fix: Search component

Author: shinokada

.changeset/silent-pants-pump.md

@@ -0,0 +1,5 @@
+---
+'svelte-5-ui-lib': patch
+---
+
+fix: Search component

src/lib/forms/search/Search.svelte

@@ -1,30 +1,21 @@
 <script lang="ts">
-  import { Input } from '$lib';
   import { type SearchProps as Props, search } from '.';
 
-  let { children, right, size = 'lg', placeholder = 'Search', value = $bindable(), show = true, use = () => {}, class: className, ...restProps }: Props<unknown> = $props();
+  let { children, right, inputClass, size = 'md', placeholder = 'Search', value = $bindable(), show = true, use = () => {}, class: className, ...restProps }: Props<unknown> = $props();
 
-  const { base, content, icon } = $derived(search());
+  const { base, content, icon, input: inputCls, leftDiv } = $derived(search({ size }));
 </script>
 
-{#if show}
-  <div class={base()} use:use>
-    <Input bind:value type="search" {placeholder} {size} {...restProps} class={className}>
-      {#snippet left()}
-        <svg class={icon()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-        </svg>
-      {/snippet}
-      {#if right}
-        {@render right()}
-      {/if}
-    </Input>
-    {#if children}
-      <div class={content()}>
-        {@render children()}
-      </div>
-    {/if}
+<div class={base()}>
+  <div class={leftDiv()}>
+      <svg class={icon()} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
+      </svg>
   </div>
-{:else if children}
-  {@render children()}
-{/if}
+  <input type="search" class={inputCls({ class: inputClass})} {placeholder} required {...restProps}/>
+  {#if children}
+    <div class={content()}>
+      {@render children()}
+    </div>
+  {/if}
+</div>

src/lib/forms/search/index.ts

@@ -2,10 +2,12 @@ import Search from './Search.svelte';
 import type { Action } from 'svelte/action';
 import type { Snippet } from 'svelte';
 import { search } from './theme';
+import type { HTMLInputAttributes } from 'svelte/elements';
 
-interface SearchProps<T> {
+interface SearchProps<T> extends Omit<HTMLInputAttributes, 'size'> {
   children?: Snippet;
   right?: Snippet;
+  inputClass?: string;
   size?: 'sm' | 'md' | 'lg';
   placeholder?: string;
   value?: T;

src/lib/forms/search/theme.ts

@@ -3,23 +3,31 @@ import { tv } from 'tailwind-variants';
 export const search = tv({
   slots: {
     base: 'relative w-full',
-    icon: '',
-    content: 'absolute inset-y-0 end-0 flex items-center text-gray-500 dark:text-gray-400'
+    leftDiv: 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none',
+    icon: 'text-gray-500 dark:text-gray-400',
+    content: 'absolute inset-y-0 end-0 flex items-center text-gray-500 dark:text-gray-400',
+    input: 'block w-full text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
   },
   variants: {
     size: {
       sm: {
-        icon: 'w-3.5 h-3.5'
+        input: 'text-xs p-2 ps-9 pe-9 ',
+        icon: 'w-3 h-3',
+        // leftDiv: 'ps-2.5',
       },
       md: {
-        icon: 'w-5 h-5'
+        input: 'text-sm p-2.5 ps-10 pe-10',
+        icon: 'w-4 h-4',
+        // leftDiv: 'ps-10',
       },
       lg: {
-        icon: 'w-6 h-6'
+        input: 'sm:text-base p-3 ps-11 pe-11',
+        icon: 'w-6 h-6',
+        // leftDiv: 'ps-11',
       }
     }
   },
   defaultVariants: {
-    size: 'lg'
+    size: 'md'
   }
 });

src/routes/forms/search-input/+page.svelte

@@ -20,8 +20,7 @@
   });
 
   const exampleArr = [
-    { name: 'Default search', component: ExampleComponents.DefaultSearch },
-    { name: 'Simple search', component: ExampleComponents.SimpleSearch },
+    { name: 'Size large', component: ExampleComponents.SizeLarge },{ name: 'Simple search', component: ExampleComponents.SimpleSearch },
     { name: 'Search with dropdown', component: ExampleComponents.SearchWithDropdown }
   ];
   let selectedExample: string | number = $state(exampleArr[0].name);
@@ -60,9 +59,7 @@
       <Radio labelClass="w-44 my-1" onclick={() => (exampleExpand = false)} name="block_style" bind:group={selectedExample} value={style.name}>{style.name}</Radio>
     {/each}
   </div>
-  <div class="h-24">
-    <SelectedComponent />
-  </div>
+  <SelectedComponent />
   {#snippet codeblock()}
     <DynamicCodeBlockHighlight replaceLib {handleExpandClick} expand={exampleExpand} {showExpandButton} code={exampleModules[`./examples/${svelteCode}`] as string} />
   {/snippet}

src/routes/forms/search-input/examples/SearchWithDropdown.svelte

@@ -22,6 +22,7 @@
   });
 </script>
 
+<div class="h-48">
 <form class="flex">
   <Button class="whitespace-nowrap rounded-e-none border border-e-0 border-primary-700" onclick={dropdown.toggle}>
     {selectCategory}
@@ -38,8 +39,9 @@
       </DropdownUl>
     </Dropdown>
   </div>
-  <Search size="md" class="rounded-none py-2.5 pl-8" placeholder="Searching {selectCategory}" />
+  <Search inputClass="rounded-none py-3 pl-8" placeholder="Searching {selectCategory}" />
   <Button class="rounded-s-none !p-2.5">
     <SearchOutline class="h-6 w-6" />
   </Button>
 </form>
+</div>

src/routes/forms/search-input/examples/SimpleSearch.svelte

@@ -4,8 +4,8 @@
 </script>
 
 <form class="flex gap-2">
-  <Search size="md" class="pl-10" />
-  <Button class="!p-2.5">
+  <Search />
+  <Button class="p-2.5">
     <SearchOutline class="h-5 w-5" />
   </Button>
 </form>

…arch-input/examples/DefaultSearch.svelte …s/search-input/examples/SizeLarge.sveltesrc/routes/forms/search-input/examples/DefaultSearch.svelte renamed to src/routes/forms/search-input/examples/SizeLarge.svelte src/routes/forms/search-input/examples/DefaultSearch.svelte renamed to src/routes/forms/search-input/examples/SizeLarge.svelte

@@ -2,6 +2,6 @@
   import { Search, Button } from '$lib';
 </script>
 
-<Search class="pl-10">
-  <Button class="mr-1">Search</Button>
+<Search size="lg">
+  <Button class="mr-2">Search</Button>
 </Search>

src/routes/forms/search-input/examples/index.ts

@@ -1,3 +1,3 @@
-export { default as DefaultSearch } from './DefaultSearch.svelte';
+export { default as SizeLarge } from './SizeLarge.svelte';
 export { default as SearchWithDropdown } from './SearchWithDropdown.svelte';
 export { default as SimpleSearch } from './SimpleSearch.svelte';