flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/table/TableSearch.svelte

@@ -1,33 +1,33 @@
-<script>import { twMerge } from "tailwind-merge";
-import { setContext } from "svelte";
-export let divClass = "relative overflow-x-auto shadow-md sm:rounded-lg";
-export let inputValue = "";
-export let striped = false;
-export let hoverable = false;
-export let placeholder = "Search";
-export let customColor = "";
-export let color = "default";
-export let innerDivClass = "p-4";
-export let searchClass = "relative mt-1";
-export let svgDivClass = "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none";
-export let svgClass = "w-5 h-5 text-gray-500 dark:text-gray-400";
-export let inputClass = "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 p-2.5 ps-10 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";
-export let classInput = "";
-export let classSvgDiv = "";
-let inputCls = twMerge(inputClass, classInput);
-let svgDivCls = twMerge(svgDivClass, classSvgDiv);
-const colors = {
-  default: "text-gray-500 dark:text-gray-400",
-  blue: "text-blue-100 dark:text-blue-100",
-  green: "text-green-100 dark:text-green-100",
-  red: "text-red-100 dark:text-red-100",
-  yellow: "text-yellow-100 dark:text-yellow-100",
-  purple: "text-purple-100 dark:text-purple-100",
-  custom: customColor
-};
-$: setContext("striped", striped);
-$: setContext("hoverable", hoverable);
-$: setContext("color", color);
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import { setContext } from "svelte";
+  import { type TableSearchProps as Props, type TableSearchType } from ".";
+  import clsx from "clsx";
+
+  let { children, header, footer, divClass = "relative overflow-x-auto shadow-md sm:rounded-lg", inputValue = $bindable(), striped, hoverable, customColor = "", color = "default", innerDivClass = "p-4", inputClass, searchClass = "relative mt-1", svgDivClass, svgClass = "w-5 h-5 text-gray-500 dark:text-gray-400", tableClass = "w-full text-left text-sm", class: className, placeholder = "Search", ...restProps }: Props = $props();
+
+  let inputCls = twMerge("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 p-2.5 ps-10 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", inputClass);
+  let svgDivCls = twMerge("absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none", svgDivClass);
+
+  const colors: { [key: string]: string } = {
+    default: "text-gray-500 dark:text-gray-400",
+    blue: "text-blue-100 dark:text-blue-100",
+    green: "text-green-100 dark:text-green-100",
+    red: "text-red-100 dark:text-red-100",
+    yellow: "text-yellow-100 dark:text-yellow-100",
+    purple: "text-purple-100 dark:text-purple-100",
+    indigo: "text-indigo-100 dark:text-indigo-100",
+    pink: "text-pink-100 dark:text-pink-100",
+    custom: customColor
+  };
+
+  const tableSearchCtx: TableSearchType = {
+    striped,
+    hoverable,
+    color
+  };
+
+  setContext("tableCtx", tableSearchCtx);
 </script>
 
 <div class={divClass}>
@@ -35,38 +35,45 @@ $: setContext("color", color);
     <label for="table-search" class="sr-only">Search</label>
     <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>
+        <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>
       </div>
       <input bind:value={inputValue} type="text" id="table-search" class={inputCls} {placeholder} />
     </div>
-    <slot name="header" />
+    {#if header}
+      {@render header()}
+    {/if}
   </div>
-  <table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
-    <slot />
+  <table {...restProps} class={twMerge(tableClass, colors[color], clsx(className))}>
+    {#if children}
+      {@render children()}
+    {/if}
   </table>
-  <slot name="footer" />
+  {#if footer}
+    {@render footer()}
+  {/if}
 </div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'relative overflow-x-auto shadow-md sm:rounded-lg';
-@prop export let inputValue: $$Props['inputValue'] = '';
-@prop export let striped: $$Props['striped'] = false;
-@prop export let hoverable: $$Props['hoverable'] = false;
-@prop export let placeholder: $$Props['placeholder'] = 'Search';
-@prop export let customColor: $$Props['customColor'] = '';
-@prop export let color: NonNullable<$$Props['color']> = 'default';
-@prop export let innerDivClass: $$Props['innerDivClass'] = 'p-4';
-@prop export let searchClass: $$Props['searchClass'] = 'relative mt-1';
-@prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
-@prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
-@prop export let inputClass: $$Props['inputClass'] = '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 p-2.5 ps-10 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';
-@prop export let classInput: $$Props['classInput'] = '';
-@prop export let classSvgDiv: $$Props['classSvgDiv'] = '';
+@props: children: any;
+@props:header: any;
+@props:footer: any;
+@props:divClass: any = "relative overflow-x-auto shadow-md sm:rounded-lg";
+@props:inputValue: any = $bindable();
+@props:striped: any;
+@props:hoverable: any;
+@props:customColor: any = "";
+@props:color: any = "default";
+@props:innerDivClass: any = "p-4";
+@props:inputClass: any;
+@props:searchClass: any = "relative mt-1";
+@props:svgDivClass: any;
+@props:svgClass: any = "w-5 h-5 text-gray-500 dark:text-gray-400";
+@props:tableClass: any = "w-full text-left text-sm";
+@props:class: string;
+@props:placeholder: any = "Search";
 -->

package/dist/table/TableSearch.svelte.d.ts

@@ -1,53 +1,35 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLTableAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLTableAttributes & {
-        divClass?: string;
-        inputValue?: string;
-        striped?: boolean;
-        hoverable?: boolean;
-        placeholder?: string;
-        customColor?: string;
-        color?: "blue" | "green" | "red" | "yellow" | "purple" | "default" | "custom";
-        innerDivClass?: string;
-        searchClass?: string;
-        svgDivClass?: string;
-        svgClass?: string;
-        inputClass?: string;
-        classInput?: string;
-        classSvgDiv?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        svgSearch: {};
-        header: {};
-        default: {};
-        footer: {};
-    };
+    slots: {};
 };
-export type TableSearchProps = typeof __propDef.props;
+type TableSearchProps_ = typeof __propDef.props;
+export { TableSearchProps_ as TableSearchProps };
 export type TableSearchEvents = typeof __propDef.events;
 export type TableSearchSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'relative overflow-x-auto shadow-md sm:rounded-lg';
- * @prop export let inputValue: $$Props['inputValue'] = '';
- * @prop export let striped: $$Props['striped'] = false;
- * @prop export let hoverable: $$Props['hoverable'] = false;
- * @prop export let placeholder: $$Props['placeholder'] = 'Search';
- * @prop export let customColor: $$Props['customColor'] = '';
- * @prop export let color: NonNullable<$$Props['color']> = 'default';
- * @prop export let innerDivClass: $$Props['innerDivClass'] = 'p-4';
- * @prop export let searchClass: $$Props['searchClass'] = 'relative mt-1';
- * @prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
- * @prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
- * @prop export let inputClass: $$Props['inputClass'] = '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 p-2.5 ps-10 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';
- * @prop export let classInput: $$Props['classInput'] = '';
- * @prop export let classSvgDiv: $$Props['classSvgDiv'] = '';
+ * @props: children: any;
+ * @props:header: any;
+ * @props:footer: any;
+ * @props:divClass: any = "relative overflow-x-auto shadow-md sm:rounded-lg";
+ * @props:inputValue: any = $bindable();
+ * @props:striped: any;
+ * @props:hoverable: any;
+ * @props:customColor: any = "";
+ * @props:color: any = "default";
+ * @props:innerDivClass: any = "p-4";
+ * @props:inputClass: any;
+ * @props:searchClass: any = "relative mt-1";
+ * @props:svgDivClass: any;
+ * @props:svgClass: any = "w-5 h-5 text-gray-500 dark:text-gray-400";
+ * @props:tableClass: any = "w-full text-left text-sm";
+ * @props:class: string;
+ * @props:placeholder: any = "Search";
  */
-export default class TableSearch extends SvelteComponentTyped<TableSearchProps, TableSearchEvents, TableSearchSlots> {
+export default class TableSearch extends SvelteComponentTyped<TableSearchProps_, TableSearchEvents, TableSearchSlots> {
 }
-export {};

package/dist/table/index.d.ts

@@ -0,0 +1,10 @@
+import type { TableProps, TableCtxType, TableHeadProps, HeadItemType, TableColrType, TableBodyRowProps, TableBodyCellProps, BodyRow, CellValue, TableBodyProps, TableHeadCellProps, TableSearchProps, TableSearchType, TableItemType } from "./type";
+import Table from "./Table.svelte";
+import TableBody from "./TableBody.svelte";
+import TableBodyCell from "./TableBodyCell.svelte";
+import TableBodyRow from "./TableBodyRow.svelte";
+import TableHeadCell from "./TableHeadCell.svelte";
+import TableHead from "./TableHead.svelte";
+import TableSearch from "./TableSearch.svelte";
+import { table, tablebodyrow, tablehead, tablebodycell, tableheadcell } from "./theme";
+export { Table, table, TableBody, TableBodyCell, tablebodycell, TableBodyRow, tablebodyrow, TableHeadCell, tableheadcell, TableHead, tablehead, TableSearch, type TableProps, type TableCtxType, type TableHeadProps, type HeadItemType, type TableColrType, type TableBodyRowProps, type TableBodyCellProps, type BodyRow, type CellValue, type TableBodyProps, type TableHeadCellProps, type TableSearchProps, type TableSearchType, type TableItemType };

package/dist/table/index.js

@@ -0,0 +1,9 @@
+import Table from "./Table.svelte";
+import TableBody from "./TableBody.svelte";
+import TableBodyCell from "./TableBodyCell.svelte";
+import TableBodyRow from "./TableBodyRow.svelte";
+import TableHeadCell from "./TableHeadCell.svelte";
+import TableHead from "./TableHead.svelte";
+import TableSearch from "./TableSearch.svelte";
+import { table, tablebodyrow, tablehead, tablebodycell, tableheadcell } from "./theme";
+export { Table, table, TableBody, TableBodyCell, tablebodycell, TableBodyRow, tablebodyrow, TableHeadCell, tableheadcell, TableHead, tablehead, TableSearch };

package/dist/table/theme.d.ts

@@ -0,0 +1,424 @@
+import { type VariantProps } from "tailwind-variants";
+export type TableVariants = VariantProps<typeof table>;
+export declare const table: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            table: string;
+        };
+        primary: {
+            table: string;
+        };
+        secondary: {
+            table: string;
+        };
+        gray: {
+            table: string;
+        };
+        red: {
+            table: string;
+        };
+        orange: {
+            table: string;
+        };
+        amber: {
+            table: string;
+        };
+        yellow: {
+            table: string;
+        };
+        lime: {
+            table: string;
+        };
+        green: {
+            table: string;
+        };
+        emerald: {
+            table: string;
+        };
+        teal: {
+            table: string;
+        };
+        cyan: {
+            table: string;
+        };
+        sky: {
+            table: string;
+        };
+        blue: {
+            table: string;
+        };
+        indigo: {
+            table: string;
+        };
+        violet: {
+            table: string;
+        };
+        purple: {
+            table: string;
+        };
+        fuchsia: {
+            table: string;
+        };
+        pink: {
+            table: string;
+        };
+        rose: {
+            table: string;
+        };
+    };
+    shadow: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    table: string;
+}, undefined, {
+    color: {
+        default: {
+            table: string;
+        };
+        primary: {
+            table: string;
+        };
+        secondary: {
+            table: string;
+        };
+        gray: {
+            table: string;
+        };
+        red: {
+            table: string;
+        };
+        orange: {
+            table: string;
+        };
+        amber: {
+            table: string;
+        };
+        yellow: {
+            table: string;
+        };
+        lime: {
+            table: string;
+        };
+        green: {
+            table: string;
+        };
+        emerald: {
+            table: string;
+        };
+        teal: {
+            table: string;
+        };
+        cyan: {
+            table: string;
+        };
+        sky: {
+            table: string;
+        };
+        blue: {
+            table: string;
+        };
+        indigo: {
+            table: string;
+        };
+        violet: {
+            table: string;
+        };
+        purple: {
+            table: string;
+        };
+        fuchsia: {
+            table: string;
+        };
+        pink: {
+            table: string;
+        };
+        rose: {
+            table: string;
+        };
+    };
+    shadow: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    table: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            table: string;
+        };
+        primary: {
+            table: string;
+        };
+        secondary: {
+            table: string;
+        };
+        gray: {
+            table: string;
+        };
+        red: {
+            table: string;
+        };
+        orange: {
+            table: string;
+        };
+        amber: {
+            table: string;
+        };
+        yellow: {
+            table: string;
+        };
+        lime: {
+            table: string;
+        };
+        green: {
+            table: string;
+        };
+        emerald: {
+            table: string;
+        };
+        teal: {
+            table: string;
+        };
+        cyan: {
+            table: string;
+        };
+        sky: {
+            table: string;
+        };
+        blue: {
+            table: string;
+        };
+        indigo: {
+            table: string;
+        };
+        violet: {
+            table: string;
+        };
+        purple: {
+            table: string;
+        };
+        fuchsia: {
+            table: string;
+        };
+        pink: {
+            table: string;
+        };
+        rose: {
+            table: string;
+        };
+    };
+    shadow: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    table: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const tablebodyrow: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    hoverable: {
+        true: string;
+    };
+    striped: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+}, undefined, "", {
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    hoverable: {
+        true: string;
+    };
+    striped: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    hoverable: {
+        true: string;
+    };
+    striped: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;
+export declare const tablehead: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    striped: {
+        true: string;
+        false: string;
+    };
+}, undefined, "text-xs uppercase", {
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    striped: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    striped: {
+        true: string;
+        false: string;
+    };
+}, undefined, "text-xs uppercase", unknown, unknown, undefined>>;
+export declare const tablebodycell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-6 py-4 whitespace-nowrap font-medium", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-6 py-4 whitespace-nowrap font-medium", unknown, unknown, undefined>>;
+export declare const tableheadcell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-6 py-3", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-6 py-3", unknown, unknown, undefined>>;