input url implementation

Author: shivajivarma

astro-docs/src/_data/componentsDetails.json

@@ -14,7 +14,7 @@ const isProd = import.meta.env.PROD;
 let envProps;
 
 if (isProd) {
-  envProps = site['prod'];
+  envProps = true;//site['prod'];
 } else {
   envProps = site['dev'];
 }

astro-docs/src/layouts/Base.astro

@@ -21,7 +21,7 @@ const {nextComponent, previousComponent} = getNextAndPrevious(componentDetails.t
 
 <Layout title={title} description={description} classes='layer-01'>
 
-  <div class='sidenav m-hide layer-background'>
+  <div class='sidenav m-hide layer-background' id="component-page">
 
     <div class='sidenav-components'>
 

astro-docs/src/layouts/Component.astro

@@ -27,11 +27,11 @@ const searchItems = componentsDetails.components.map(component => ({
         <goat-header-brand logo='/assets/img/logo.svg' href='/#' name={site.title}></goat-header-brand>
 
 
-        <goat-header-action
+        <!--goat-header-action
           class='hide-tablet-portrait-below'
           href='/components#'>
           Docs
-        </goat-header-action>
+        </goat-header-action-->
 
         <goat-header-action
           class='hide-tablet-portrait-below'
@@ -153,13 +153,10 @@ const searchItems = componentsDetails.components.map(component => ({
       const search = document.querySelector('#site-search');
 
       searchBtn.addEventListener('click', function() {
-        const searchContainer = document.querySelector('#search-header-container');
-        searchContainer.toggleAttribute('open');
-        setTimeout(() => {
-          search.openSelectList();
-        }, 300);
+        openSearchContainer();
       });
 
+      
 
       searchContainerOverlay.addEventListener('click', function() {
         const searchContainer = document.querySelector('#search-header-container');
@@ -185,18 +182,25 @@ const searchItems = componentsDetails.components.map(component => ({
           if (e.key === '/') {
             const path = e.composedPath();
             for (const elm of path) {
-              if (elm.tagName === 'GOAT-INPUT' || elm.tagName === 'GOAT-CODE-EDITOR' || elm.tagName === 'GOAT-TEXTAREA') {
+              if (elm.tagName === 'GOAT-INPUT' || elm.tagName === 'GOAT-CODE-EDITOR' || elm.tagName === 'GOAT-TEXTAREA' || elm.tagName === 'INPUT') {
                 return;
               }
             }
             e.preventDefault();
-            search.open = true;
-            setTimeout(() => {
-              search.setFocus();
-            }, 300);
+            openSearchContainer();
           }
         });
       }
+
+
+      function openSearchContainer() {
+        const searchContainer = document.querySelector('#search-header-container');
+        searchContainer.toggleAttribute('open');
+        setTimeout(() => {
+          search.openSelectList();
+        }, 300);
+      }
+
     });
   </script>
 </Layout>

astro-docs/src/layouts/Default.astro

@@ -3,7 +3,7 @@ import HighlighterCard from '../../../../components/HighlighterCard.astro';
 ---
 <goat-text type='body'>Fancy larger or smaller input? Add size attribute for additional sizes.</goat-text>
 <HighlighterCard lang={'html'}>
-  <goat-input size='lg' placeholder='Large'></goat-input>
-  <goat-input placeholder='Medium'></goat-input>
-  <goat-input size='sm' placeholder='Small'></goat-input>
+  <goat-input-url size='lg' placeholder='Large'></goat-input-url>
+  <goat-input-url placeholder='Medium'></goat-input-url>
+  <goat-input-url size='sm' placeholder='Small'></goat-input-url>
 </HighlighterCard>

astro-docs/src/pages/components/url-input/_sections/events.astro renamed to astro-docs/src/pages/components/input-url/_sections/events.astro

@@ -4,12 +4,13 @@ import HighlighterCard from '../../../../components/HighlighterCard.astro';
 <goat-text type='body'>Here are different types of inputs.</goat-text>
 
 <HighlighterCard lang={'html'} cssClasses='demo-input'>
-  <goat-url-input 
+  <goat-input-url 
               required
               clearable
+              value="https://shivajivarma.com"
               label='Text input label'
               helper-text='Optional help text'
               placeholder='Optional placeholder text'
-  ></goat-url-input>
+  ></goat-input-url>
 
 </HighlighterCard>

astro-docs/src/pages/components/url-input/_sections/sizes.astro renamed to astro-docs/src/pages/components/input-url/_sections/sizes.astro

@@ -3,10 +3,9 @@ import Layout from '../../../layouts/Component.astro';
 import { getComponentDetails } from '../../../_data/getComponentDetails.ts';
 import ApiPanel from '../../../components/ApiPanel.astro';
 import OverviewPanel from '../../../components/OverviewPanel.astro';
-const componentDetails = getComponentDetails('goat-url-input');
+const componentDetails = getComponentDetails('goat-input-url');
 
 import UsageSection from './_sections/usage.astro';
-import SlotsSection from './_sections/slots.astro';
 import SizesSection from './_sections/sizes.astro';
 import StatesSection from './_sections/states.astro';
 import EventsSection from './_sections/events.astro';
@@ -15,18 +14,9 @@ const sections = [
   {
     'title': 'Usage',
     'Component': UsageSection,
-  }, {
-    'title': 'Slots',
-    'Component': SlotsSection,
   }, {
     'title': 'Sizes',
     'Component': SizesSection,
-  }, {
-    'title': 'States',
-    'Component': StatesSection,
-  }, {
-    'title': 'Events',
-    'Component': EventsSection,
   }];
 ---
 <Layout componentDetails={componentDetails}>