feat: add classInput and classDvgDiv to Tablesearch

Author: shinokada

src/lib/tables/TableSearch.svelte

@@ -10,6 +10,13 @@
   export let customColor: string = '';
   export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
   export let innerDivClass: string = 'p-4';
+  export let searchClass: string = 'relative mt-1';
+  export let svgDivClass: string = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
+  export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+  export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 p-2.5 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';
+
+  let inputCls = twMerge(inputClass, $$props.classInput);
+  let svgDivCls = twMerge(svgDivClass, $$props.classSvgDiv);
 
   const colors = {
     default: 'text-gray-500 dark:text-gray-400',
@@ -27,15 +34,17 @@
 </script>
 
 <div class={divClass}>
-  <div class="{innerDivClass}">
+  <div class={innerDivClass}>
     <label for="table-search" class="sr-only">Search</label>
-    <div class="relative mt-1">
-      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-        <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" 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>
+    <div class={searchClass}>
+      <div class={svgDivCls}>
+        <slot name="svgSearch">
+          <svg class={svgClass} 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>
+        </slot>
       </div>
-      <input bind:value={inputValue} type="text" id="table-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 p-2.5 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" {placeholder} />
+      <input bind:value={inputValue} type="text" id="table-search" class={inputCls} {placeholder} />
     </div>
     <slot name="header" />
   </div>

src/routes/docs/components/table.md

@@ -861,6 +861,8 @@ The component has the following props, type, and default values. See [types page
 ### TableSearch styling
 
 - Use the `class` prop to overwrite the `table` tag class.
+- Use the `classInput` prop to overwrite `inputClass`.
+- Use the `classSvgDiv` prop to overwrite `svgDivClass`.
 
 <CompoAttributesViewer {components}/>