flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/table/TableHeadCell.svelte

@@ -1,47 +1,20 @@
-<script generics="T">import { getContext } from "svelte";
-import { twMerge } from "tailwind-merge";
-export let padding = "px-6 py-3";
-export let sort = null;
-export let defaultDirection = "asc";
-export let defaultSort = false;
-export let direction = defaultSort ? defaultDirection : null;
-let sorter = getContext("sorter");
-let sortId = Math.random().toString(36).substring(2);
-$: direction = $sorter?.id === sortId ? $sorter.sortDirection === 1 ? "asc" : "desc" : null;
-if (defaultSort) {
-  sortItems();
-}
-function sortItems() {
-  if (!sort || !sorter) return;
-  sorter.update((sorter2) => {
-    return {
-      id: sortId,
-      sort,
-      sortDirection: sorter2?.id === sortId ? -sorter2.sortDirection : defaultDirection === "asc" ? 1 : -1
-    };
-  });
-}
+<script lang="ts">
+  import { type TableHeadCellProps as Props, tableheadcell } from "./";
+
+  let { children, class: className, ...restProps }: Props = $props();
+  const base = $derived(tableheadcell({ className }));
 </script>
 
-{#if sort && sorter}
-<th {...$$restProps} class={$$props.class} on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover aria-sort={direction ? `${direction}ending` : undefined}>
-  <button class={twMerge('w-full text-left', 'after:absolute after:pl-3', direction === 'asc' && 'after:content-["▲"]', direction === 'desc' && 'after:content-["▼"]', padding)} on:click={sortItems}>
-    <slot />
-  </button>
-</th>
-{:else}
-<th {...$$restProps} class={twMerge(padding, $$props.class)} on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
-  <slot />
+<th {...restProps} class={base}>
+  {#if children}
+    {@render children()}
+  {/if}
 </th>
-{/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let padding: $$Props['padding'] = 'px-6 py-3';
-@prop export let sort: $$Props['sort'] = null;
-@prop export let defaultDirection: $$Props['defaultDirection'] = 'asc';
-@prop export let defaultSort: $$Props['defaultSort'] = false;
-@prop export let direction: $$Props['direction'] = defaultSort ? defaultDirection : null;
+@props: children: any;
+@props:class: string;
 -->

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

@@ -1,41 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLThAttributes } from 'svelte/elements';
-declare class __sveltets_Render<T> {
-    props(): HTMLThAttributes & {
-        padding?: string;
-        sort?: ((a: T, b: T) => number) | null | undefined;
-        defaultDirection?: "asc" | "desc";
-        defaultSort?: boolean;
-        direction?: "asc" | "desc" | null;
-    };
-    events(): {
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        default: {};
-    };
-}
-export type TableHeadCellProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TableHeadCellEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TableHeadCellSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+import { type TableHeadCellProps as Props } from "./";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let padding: $$Props['padding'] = 'px-6 py-3';
- * @prop export let sort: $$Props['sort'] = null;
- * @prop export let defaultDirection: $$Props['defaultDirection'] = 'asc';
- * @prop export let defaultSort: $$Props['defaultSort'] = false;
- * @prop export let direction: $$Props['direction'] = defaultSort ? defaultDirection : null;
+ * @props: children: any;
+ * @props:class: string;
  */
-export default class TableHeadCell<T> extends SvelteComponentTyped<TableHeadCellProps<T>, TableHeadCellEvents<T>, TableHeadCellSlots<T>> {
-}
-export {};
+declare const TableHeadCell: import("svelte").Component<Props, {}, "">;
+type TableHeadCell = ReturnType<typeof TableHeadCell>;
+export default TableHeadCell;

package/dist/table/TableSearch.svelte

@@ -1,33 +1,32 @@
-<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 ".";
+
+  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 +34,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], className)}>
+    {#if children}
+      {@render children()}
+    {/if}
   </table>
-  <slot name="footer" />
+  {#if footer}
+    {@render footer()}
+  {/if}
 </div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.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,25 @@
-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;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        svgSearch: {};
-        header: {};
-        default: {};
-        footer: {};
-    };
-};
-export type TableSearchProps = typeof __propDef.props;
-export type TableSearchEvents = typeof __propDef.events;
-export type TableSearchSlots = typeof __propDef.slots;
+import { type TableSearchProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.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 {};
+declare const TableSearch: import("svelte").Component<Props, {}, "inputValue">;
+type TableSearch = ReturnType<typeof TableSearch>;
+export default TableSearch;

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 };