flowbite-svelte 0.13.4 → 0.13.5

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.13.5](https://github.com/shinokada/flowbite-svelte/compare/v0.13.4...v0.13.5) (2022-04-12)
+
+
+### Features
+
+* add table search ([72664ee](https://github.com/shinokada/flowbite-svelte/commit/72664eed118587b445f931c57f1def7bf87056f6))
+* table search on progress ([9cff21d](https://github.com/shinokada/flowbite-svelte/commit/9cff21d7ffbeb351b95601a85abe826323c68f9d))
+
 ### [0.13.4](https://github.com/shinokada/flowbite-svelte/compare/v0.13.2...v0.13.4) (2022-04-12)
 
 

package/index.d.ts

@@ -62,6 +62,7 @@ export { default as Spinner } from "./spinners/Spinner.svelte";
 export { default as SpinnerButton } from "./spinners/SpinnerButton.svelte";
 export { default as Table } from "./tables/Table.svelte";
 export { default as TableDefaultRow } from "./tables/TableDefaultRow.svelte";
+export { default as TableSearch } from "./tables/TableSearch.svelte";
 export { default as InteractiveTabHead } from "./tabs/InteractiveTabHead.svelte";
 export { default as InteractiveTabs } from "./tabs/InteractiveTabs.svelte";
 export { default as DefaultTabs } from "./tabs/DefaultTabs.svelte";

package/index.js

@@ -101,6 +101,7 @@ export { default as SpinnerButton } from'./spinners/SpinnerButton.svelte'
 // Tables
 export { default as Table } from './tables/Table.svelte'
 export { default as TableDefaultRow } from './tables/TableDefaultRow.svelte'
+export { default as TableSearch } from './tables/TableSearch.svelte'
 
 // Tabs
 export { default as InteractiveTabHead } from './tabs/InteractiveTabHead.svelte'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.13.4",
+  "version": "0.13.5",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -149,6 +149,7 @@
     "./tables/TableCheckbox.svelte": "./tables/TableCheckbox.svelte",
     "./tables/TableCheckboxRow.svelte": "./tables/TableCheckboxRow.svelte",
     "./tables/TableDefaultRow.svelte": "./tables/TableDefaultRow.svelte",
+    "./tables/TableSearch.svelte": "./tables/TableSearch.svelte",
     "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
     "./tabs/FullWidthTabs.svelte": "./tabs/FullWidthTabs.svelte",
     "./tabs/IconTabs.svelte": "./tabs/IconTabs.svelte",

package/tables/TableSearch.svelte

@@ -0,0 +1,47 @@
+<script >import TableDefaultRow from './TableDefaultRow.svelte';
+export let inputValue = '';
+export let menuItems;
+export let filteredItems = [];
+export let placeholder = 'Search';
+const handleInput = () => {
+    // console.log('inputValue', inputValue);
+    let result = (filteredItems = menuItems.filter((item) => item[0].toLowerCase().match(inputValue.toLowerCase())));
+    // console.log('result', result);
+    return result;
+};
+export let header;
+export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+export let tableClass = 'w-full text-sm text-left text-gray-500 dark:text-gray-400';
+export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400';
+</script>
+
+<div class={divClass}>
+  <div class="p-4">
+    <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>
+      <input bind:value={inputValue} on:input={handleInput} 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} />
+    </div>
+  </div>
+
+  <table class={tableClass}>
+    <thead class={theadClass}>
+      <tr>
+        {#each header as column}
+          <th scope="col" class="px-6 py-3">
+            {column}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#if filteredItems.length > 0}
+        <TableDefaultRow items={filteredItems} html />
+      {:else}
+        <TableDefaultRow items={menuItems} html />
+      {/if}
+    </tbody>
+  </table>
+</div>

package/tables/TableSearch.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        inputValue?: string;
+        menuItems: Array<Array<string>>;
+        filteredItems?: any[];
+        placeholder?: string;
+        header: Array<string>;
+        divClass?: string;
+        tableClass?: string;
+        theadClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TableSearchProps = typeof __propDef.props;
+export declare type TableSearchEvents = typeof __propDef.events;
+export declare type TableSearchSlots = typeof __propDef.slots;
+export default class TableSearch extends SvelteComponentTyped<TableSearchProps, TableSearchEvents, TableSearchSlots> {
+}
+export {};