flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/table/TableBody.svelte

@@ -1,23 +1,36 @@
-<script generics="T">import { getContext } from "svelte";
-export let tableBodyClass = void 0;
-$: items = getContext("items") || [];
-let filter = getContext("filter");
-let searchTerm = getContext("searchTerm");
-$: filtered = $filter ? items.filter((item) => $filter(item, $searchTerm)) : items;
-let sorter = getContext("sorter");
-$: sorted = $sorter ? filtered.toSorted((a, b) => $sorter.sortDirection * $sorter.sort(a, b)) : filtered;
+<script lang="ts">
+  import { TableBodyRow, TableBodyCell, type TableBodyProps as Props, type CellValue, type BodyRow } from ".";
+
+  let { children, bodyItems, class: className, ...restProps }: Props = $props();
+
+  function getCellValues(row: BodyRow): CellValue[] {
+    if (Array.isArray(row)) {
+      return row;
+    } else {
+      return Object.values(row);
+    }
+  }
 </script>
 
-<tbody {...$$restProps} class={tableBodyClass}>
-  <slot />
-  {#each sorted as item}
-    <slot name="row" {item} />
-  {/each}
+<tbody {...restProps} class={className}>
+  {#if bodyItems}
+    {#each bodyItems as row}
+      <TableBodyRow>
+        {#each getCellValues(row) as cellValue}
+          <TableBodyCell>{cellValue ?? ""}</TableBodyCell>
+        {/each}
+      </TableBodyRow>
+    {/each}
+  {:else if children}
+    {@render children()}
+  {/if}
 </tbody>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let tableBodyClass: $$Props['tableBodyClass'] = undefined;
+@props: children: any;
+@props:bodyItems: any;
+@props:class: string;
 -->

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

@@ -1,27 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-declare class __sveltets_Render<T> {
-    props(): HTMLAttributes<HTMLTableSectionElement> & {
-        tableBodyClass?: string;
-    };
-    events(): {} & {
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {
-        default: {};
-        row: {
-            item: T;
-        };
-    };
-}
-export type TableBodyProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TableBodyEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TableBodySlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+    slots: {};
+};
+type TableBodyProps_ = typeof __propDef.props;
+export { TableBodyProps_ as TableBodyProps };
+export type TableBodyEvents = typeof __propDef.events;
+export type TableBodySlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let tableBodyClass: $$Props['tableBodyClass'] = undefined;
+ * @props: children: any;
+ * @props:bodyItems: any;
+ * @props:class: string;
  */
-export default class TableBody<T> extends SvelteComponentTyped<TableBodyProps<T>, TableBodyEvents<T>, TableBodySlots<T>> {
+export default class TableBody extends SvelteComponentTyped<TableBodyProps_, TableBodyEvents, TableBodySlots> {
 }
-export {};

package/dist/table/TableBodyCell.svelte

@@ -1,19 +1,21 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-export let tdClass = "px-6 py-4 whitespace-nowrap font-medium ";
-let color = "default";
-color = getContext("color");
-let tdClassfinal;
-$: tdClassfinal = twMerge(tdClass, color === "default" ? "text-gray-900 dark:text-white" : "text-blue-50 whitespace-nowrap dark:text-blue-100", $$props.class);
+<script lang="ts">
+  import clsx from "clsx";
+  import { type TableBodyCellProps as Props, tablebodycell } from "./";
+
+  let { children, class: className, colspan, onclick, ...restProps }: Props = $props();
+
+  const base = $derived(tablebodycell({ class: clsx(className) }));
 </script>
 
-<td {...$$restProps} class={tdClassfinal}>
-  {#if $$props.onclick}
-  <button on:click={$$props.onclick}>
-    <slot />
-  </button>
-  {:else}
-    <slot />
+<td {...restProps} class={base} colspan={colspan ?? 1}>
+  {#if onclick}
+    <button {onclick}>
+      {#if children}
+        {@render children()}
+      {/if}
+    </button>
+  {:else if children}
+    {@render children()}
   {/if}
 </td>
 
@@ -21,5 +23,8 @@ $: tdClassfinal = twMerge(tdClass, color === "default" ? "text-gray-900 dark:tex
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let tdClass: $$Props['tdClass'] = 'px-6 py-4 whitespace-nowrap font-medium ';
+@props: children: any;
+@props:class: string;
+@props:colspan: any;
+@props:onclick: any;
 -->

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

@@ -1,24 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLTdAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLTdAttributes & {
-        tdClass?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type TableBodyCellProps = typeof __propDef.props;
+type TableBodyCellProps_ = typeof __propDef.props;
+export { TableBodyCellProps_ as TableBodyCellProps };
 export type TableBodyCellEvents = typeof __propDef.events;
 export type TableBodyCellSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let tdClass: $$Props['tdClass'] = 'px-6 py-4 whitespace-nowrap font-medium ';
+ * @props: children: any;
+ * @props:class: string;
+ * @props:colspan: any;
+ * @props:onclick: any;
  */
-export default class TableBodyCell extends SvelteComponentTyped<TableBodyCellProps, TableBodyCellEvents, TableBodyCellSlots> {
+export default class TableBodyCell extends SvelteComponentTyped<TableBodyCellProps_, TableBodyCellEvents, TableBodyCellSlots> {
 }
-export {};

package/dist/table/TableBodyRow.svelte

@@ -1,44 +1,34 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-export let color = getContext("color");
-const colors = {
-  default: "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700",
-  blue: "bg-blue-500 border-blue-400",
-  green: "bg-green-500 border-green-400",
-  red: "bg-red-500 border-red-400",
-  yellow: "bg-yellow-500 border-yellow-400",
-  purple: "bg-purple-500 border-purple-400",
-  custom: ""
-};
-const hoverColors = {
-  default: "hover:bg-gray-50 dark:hover:bg-gray-600",
-  blue: "hover:bg-blue-400",
-  green: "hover:bg-green-400",
-  red: "hover:bg-red-400",
-  yellow: "hover:bg-yellow-400",
-  purple: "hover:bg-purple-400",
-  custom: ""
-};
-const stripColors = {
-  default: "odd:bg-white even:bg-gray-50 dark:odd:bg-gray-800 dark:even:bg-gray-700",
-  blue: "odd:bg-blue-800 even:bg-blue-700 dark:odd:bg-blue-800 dark:even:bg-blue-700",
-  green: "odd:bg-green-800 even:bg-green-700 dark:odd:bg-green-800 dark:even:bg-green-700",
-  red: "odd:bg-red-800 even:bg-red-700 dark:odd:bg-red-800 dark:even:bg-red-700",
-  yellow: "odd:bg-yellow-800 even:bg-yellow-700 dark:odd:bg-yellow-800 dark:even:bg-yellow-700",
-  purple: "odd:bg-purple-800 even:bg-purple-700 dark:odd:bg-purple-800 dark:even:bg-purple-700",
-  custom: ""
-};
-let trClass;
-$: trClass = twMerge([!getContext("noborder") && "border-b last:border-b-0", colors[color], getContext("hoverable") && hoverColors[color], getContext("striped") && stripColors[color], $$props.class]);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { type TableBodyRowProps as Props, tablebodyrow, type TableCtxType, type TableColrType } from "./";
+  import clsx from "clsx";
+
+  let { children, class: className, color, striped, hoverable, border, ...restProps }: Props = $props();
+
+  const tableCtx = getContext<TableCtxType>("tableCtx");
+  // for reactivity with svelte context
+  let compoColor = $derived(color ? color : tableCtx.color || "default");
+  let compoHoverable = $derived(hoverable ? hoverable : tableCtx.hoverable || false);
+  let compoStriped = $derived(striped ? striped : tableCtx.striped || false);
+  let compoBorder = $derived(border ? border : tableCtx.border || false);
+
+  const base = $derived(tablebodyrow({ color: compoColor as TableColrType, hoverable: compoHoverable, striped: compoStriped, border: compoBorder, class: clsx(className) }));
 </script>
 
-<tr {...$$restProps} class={trClass} on:click on:contextmenu on:dblclick>
-  <slot />
+<tr {...restProps} class={base}>
+  {#if children}
+    {@render children()}
+  {/if}
 </tr>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let color: NonNullable<$$Props['color']> = getContext('color');
+@props: children: any;
+@props:class: string;
+@props:color: any;
+@props:striped: any;
+@props:hoverable: any;
+@props:border: any;
 -->

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

@@ -1,28 +1,24 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLTableRowElement> & {
-        color?: "blue" | "green" | "red" | "yellow" | "purple" | "default" | "custom";
-    };
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-        contextmenu: MouseEvent;
-        dblclick: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type TableBodyRowProps = typeof __propDef.props;
+type TableBodyRowProps_ = typeof __propDef.props;
+export { TableBodyRowProps_ as TableBodyRowProps };
 export type TableBodyRowEvents = typeof __propDef.events;
 export type TableBodyRowSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let color: NonNullable<$$Props['color']> = getContext('color');
+ * @props: children: any;
+ * @props:class: string;
+ * @props:color: any;
+ * @props:striped: any;
+ * @props:hoverable: any;
+ * @props:border: any;
  */
-export default class TableBodyRow extends SvelteComponentTyped<TableBodyRowProps, TableBodyRowEvents, TableBodyRowSlots> {
+export default class TableBodyRow extends SvelteComponentTyped<TableBodyRowProps_, TableBodyRowEvents, TableBodyRowSlots> {
 }
-export {};

package/dist/table/TableHead.svelte

@@ -1,33 +1,46 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-export let theadClass = "text-xs uppercase";
-export let defaultRow = true;
-let color;
-color = getContext("color");
-let noborder = getContext("noborder");
-let striped = getContext("striped");
-let defaultBgColor = noborder || striped ? "" : "bg-gray-50 dark:bg-gray-700";
-const bgColors = {
-  default: defaultBgColor,
-  blue: "bg-blue-600",
-  green: "bg-green-600",
-  red: "bg-red-600",
-  yellow: "bg-yellow-600",
-  purple: "bg-purple-600",
-  custom: ""
-};
-let textColor = color === "default" ? "text-gray-700 dark:text-gray-400" : color === "custom" ? "" : "text-white  dark:text-white";
-let borderColors = striped ? "" : color === "default" ? "border-gray-700" : color === "custom" ? "" : `border-${color}-400`;
-$: theadClassfinal = twMerge(theadClass, textColor, striped && borderColors, bgColors[color], $$props.class);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { TableHeadCell, type TableHeadProps as Props, tablehead, type TableCtxType, type HeadItemType } from ".";
+  import clsx from "clsx";
+
+  let { children, headerSlot, color, striped, border, class: className, headItems, defaultRow = true, ...restProps }: Props = $props();
+
+  const tableCtx = getContext<TableCtxType>("tableCtx");
+  // for reactivity with svelte context
+  let compoColor = $derived(color ? color : tableCtx.color || "default");
+  let compoStriped = $derived(striped ? striped : tableCtx.striped || false);
+  let compoBorder = $derived(border ? border : tableCtx.border || false);
+
+  const base = $derived(tablehead({ color: compoColor, border: compoBorder, striped: compoStriped, class: clsx(className) }));
+
+  function getItemText(item: HeadItemType): string {
+    if (typeof item === "object" && "text" in item) {
+      return item.text;
+    }
+    return String(item);
+  }
 </script>
 
-<thead {...$$restProps} class={theadClassfinal}>
-  {#if defaultRow}
+<thead {...restProps} class={base}>
+  {#if headItems}
+    {#if headerSlot}
+      {@render headerSlot()}
+    {/if}
     <tr>
-      <slot />
+      {#each headItems as item}
+        <TableHeadCell>
+          {getItemText(item)}
+        </TableHeadCell>
+      {/each}
     </tr>
-  {:else}
-    <slot />
+  {:else if children}
+    {#if defaultRow}
+      <tr>
+        {@render children()}
+      </tr>
+    {:else}
+      {@render children()}
+    {/if}
   {/if}
 </thead>
 
@@ -35,6 +48,12 @@ $: theadClassfinal = twMerge(theadClass, textColor, striped && borderColors, bgC
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let theadClass: $$Props['theadClass'] = 'text-xs uppercase';
-@prop export let defaultRow: $$Props['defaultRow'] = true;
+@props: children: any;
+@props:headerSlot: any;
+@props:color: any;
+@props:striped: any;
+@props:border: any;
+@props:class: string;
+@props:headItems: any;
+@props:defaultRow: any = true;
 -->

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

@@ -1,26 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLTableSectionElement> & {
-        theadClass?: string;
-        defaultRow?: boolean;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type TableHeadProps = typeof __propDef.props;
+type TableHeadProps_ = typeof __propDef.props;
+export { TableHeadProps_ as TableHeadProps };
 export type TableHeadEvents = typeof __propDef.events;
 export type TableHeadSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let theadClass: $$Props['theadClass'] = 'text-xs uppercase';
- * @prop export let defaultRow: $$Props['defaultRow'] = true;
+ * @props: children: any;
+ * @props:headerSlot: any;
+ * @props:color: any;
+ * @props:striped: any;
+ * @props:border: any;
+ * @props:class: string;
+ * @props:headItems: any;
+ * @props:defaultRow: any = true;
  */
-export default class TableHead extends SvelteComponentTyped<TableHeadProps, TableHeadEvents, TableHeadSlots> {
+export default class TableHead extends SvelteComponentTyped<TableHeadProps_, TableHeadEvents, TableHeadSlots> {
 }
-export {};

package/dist/table/TableHeadCell.svelte

@@ -1,47 +1,21 @@
-<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 clsx from "clsx";
+  import { type TableHeadCellProps as Props, tableheadcell } from "./";
+
+  let { children, class: className, ...restProps }: Props = $props();
+  const base = $derived(tableheadcell({ class: clsx(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/)
 ## 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,20 @@
 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;
-    } & {
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
         [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']>;
+    slots: {};
+};
+type TableHeadCellProps_ = typeof __propDef.props;
+export { TableHeadCellProps_ as TableHeadCellProps };
+export type TableHeadCellEvents = typeof __propDef.events;
+export type TableHeadCellSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://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 default class TableHeadCell extends SvelteComponentTyped<TableHeadCellProps_, TableHeadCellEvents, TableHeadCellSlots> {
 }
-export {};