@invopop/popui 0.1.35 → 0.1.40

package/dist/button/button.svelte.d.ts

@@ -10,6 +10,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         ghost: string;
         secondary: string;
+        selected: string;
         dark: string;
         'dark-ghost': string;
     };
@@ -26,6 +27,14 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    stackedLeft: {
+        true: string;
+        false: string;
+    };
+    stackedRight: {
+        true: string;
+        false: string;
+    };
 }, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-selected focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", {
     variant: {
         primary: string;
@@ -34,6 +43,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         ghost: string;
         secondary: string;
+        selected: string;
         dark: string;
         'dark-ghost': string;
     };
@@ -50,6 +60,14 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    stackedLeft: {
+        true: string;
+        false: string;
+    };
+    stackedRight: {
+        true: string;
+        false: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
@@ -58,6 +76,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         ghost: string;
         secondary: string;
+        selected: string;
         dark: string;
         'dark-ghost': string;
     };
@@ -74,6 +93,14 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    stackedLeft: {
+        true: string;
+        false: string;
+    };
+    stackedRight: {
+        true: string;
+        false: string;
+    };
 }, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-selected focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
 export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
@@ -83,6 +110,8 @@ export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<
     icon?: IconSource;
     iconPosition?: 'left' | 'right';
     iconClass?: string;
+    stackedLeft?: boolean;
+    stackedRight?: boolean;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;

package/dist/clickOutside.d.ts

@@ -1,4 +1,7 @@
-/** Dispatch event on click outside of node */
-export function clickOutside(node: any): {
+/**
+ * Dispatch event on click outside of node
+ * @param {HTMLElement} node
+ */
+export function clickOutside(node: HTMLElement): {
     destroy(): void;
 };

package/dist/clickOutside.js

@@ -1,8 +1,14 @@
-/** Dispatch event on click outside of node */
+/**
+ * Dispatch event on click outside of node
+ * @param {HTMLElement} node
+ */
 export function clickOutside(node) {
+  /**
+   * @param {MouseEvent} event
+   */
   const handleClick = (event) => {
-    if (node && !node.contains(event.target) && !event.defaultPrevented) {
-      node.dispatchEvent(new CustomEvent('click_outside', node))
+    if (node && !node.contains(/** @type {Node} */ (event.target)) && !event.defaultPrevented) {
+      node.dispatchEvent(new CustomEvent('click_outside'))
     }
   }
 

package/dist/data-table/cells/boolean-cell.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { TooltipAutoHide, TooltipContent, TooltipTrigger } from '../../tooltip'
+  import type { BooleanCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: boolean; config?: BooleanCellConfig } = $props()
+
+  const showWhenTrue = $derived(config?.showWhenTrue ?? true)
+  const showWhenFalse = $derived(config?.showWhenFalse ?? false)
+  const shouldShow = $derived(value ? showWhenTrue : showWhenFalse)
+  const hint = $derived(value ? config?.hintWhenTrue : config?.hintWhenFalse)
+</script>
+
+{#if shouldShow && config?.icon}
+  <div class="flex justify-center">
+    {#if hint}
+      <TooltipAutoHide>
+        <TooltipTrigger>
+          <Icon src={config.icon} class={config.iconClass ?? 'size-4 text-icon'} />
+        </TooltipTrigger>
+        <TooltipContent>
+          {hint}
+        </TooltipContent>
+      </TooltipAutoHide>
+    {:else}
+      <Icon src={config.icon} class={config.iconClass ?? 'size-4 text-icon'} />
+    {/if}
+  </div>
+{/if}

package/dist/data-table/cells/boolean-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BooleanCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: boolean;
+    config?: BooleanCellConfig;
+};
+declare const BooleanCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type BooleanCell = ReturnType<typeof BooleanCell>;
+export default BooleanCell;

package/dist/data-table/cells/cell-skeleton.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import Skeleton from '../../skeleton/skeleton.svelte'
+  import SkeletonAvatar from '../../skeleton/skeleton-avatar.svelte'
+  import type { CellSkeletonProps } from '../data-table-types.js'
+
+  let {
+    isBoolean = false,
+    loadingConfig = {},
+    withPadding = false
+  }: CellSkeletonProps = $props()
+
+  const lines = $derived(loadingConfig.lines ?? 1)
+  const showAvatar = $derived(loadingConfig.showAvatar ?? false)
+  const avatarSize = $derived(loadingConfig.avatarSize ?? 32)
+</script>
+
+{#if isBoolean}
+  <div class={withPadding ? 'px-3' : ''}>
+    <Skeleton class="size-4" />
+  </div>
+{:else}
+  <div class="flex items-center gap-3 w-full {withPadding ? 'px-3' : ''}">
+    {#if showAvatar}
+      <SkeletonAvatar size={avatarSize} />
+    {/if}
+    <div class="flex flex-col gap-2 flex-1">
+      {#each Array(lines) as _, i}
+        <Skeleton
+          class="h-4 w-full"
+          style="max-width: {i === lines - 1 && lines > 1 ? '80%' : '100%'}"
+        />
+      {/each}
+    </div>
+  </div>
+{/if}

package/dist/data-table/cells/cell-skeleton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CellSkeletonProps } from '../data-table-types.js';
+declare const CellSkeleton: import("svelte").Component<CellSkeletonProps, {}, "">;
+type CellSkeleton = ReturnType<typeof CellSkeleton>;
+export default CellSkeleton;

package/dist/data-table/cells/currency-cell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../utils.js'
+  import type { CurrencyCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: any; config?: CurrencyCellConfig } = $props()
+</script>
+
+<span class={cn('font-mono text-base text-foreground text-right block', config?.className)}>
+  {value}
+</span>

package/dist/data-table/cells/currency-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CurrencyCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: any;
+    config?: CurrencyCellConfig;
+};
+declare const CurrencyCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type CurrencyCell = ReturnType<typeof CurrencyCell>;
+export default CurrencyCell;

package/dist/data-table/cells/date-cell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../utils.js'
+  import type { DateCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: any; config?: DateCellConfig } = $props()
+</script>
+
+<span class={cn('font-mono text-base text-foreground', config?.className)}>
+  {value}
+</span>

package/dist/data-table/cells/date-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DateCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: any;
+    config?: DateCellConfig;
+};
+declare const DateCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type DateCell = ReturnType<typeof DateCell>;
+export default DateCell;

package/dist/data-table/cells/tag-cell.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import TagStatus from '../../TagStatus.svelte'
+  import type { TagCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: string; config: TagCellConfig } = $props()
+
+  const option = $derived(config.options.find((opt) => opt.value === value))
+</script>
+
+{#if option}
+  <TagStatus label={option.label} status={option.color} dot={config.showDot ?? false} />
+{/if}

package/dist/data-table/cells/tag-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TagCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: string;
+    config: TagCellConfig;
+};
+declare const TagCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type TagCell = ReturnType<typeof TagCell>;
+export default TagCell;

package/dist/data-table/cells/text-cell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../utils.js'
+  import type { TextCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: any; config?: TextCellConfig } = $props()
+</script>
+
+<div class={cn('truncate', config?.className)}>
+  {value}
+</div>

package/dist/data-table/cells/text-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TextCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: any;
+    config?: TextCellConfig;
+};
+declare const TextCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type TextCell = ReturnType<typeof TextCell>;
+export default TextCell;

package/dist/data-table/cells/uuid-cell.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import ButtonUuidCopy from '../../ButtonUuidCopy.svelte'
+  import type { UuidCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: string; config?: UuidCellConfig } = $props()
+</script>
+
+<div class="relative z-0">
+  <ButtonUuidCopy
+    uuid={value}
+    prefixLength={config?.prefixLength}
+    suffixLength={config?.suffixLength}
+    full={config?.full}
+    disabled={config?.disabled}
+    oncopied={config?.onCopy}
+  />
+</div>

package/dist/data-table/cells/uuid-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { UuidCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: string;
+    config?: UuidCellConfig;
+};
+declare const UuidCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type UuidCell = ReturnType<typeof UuidCell>;
+export default UuidCell;

package/dist/data-table/column-definitions.d.ts

@@ -0,0 +1,12 @@
+import type { ColumnDef, Row } from '@tanstack/table-core';
+import type { Snippet } from 'svelte';
+/**
+ * Create the selection column definition for row selection
+ */
+export declare function createSelectionColumn<TData>(): ColumnDef<TData>;
+/**
+ * Create the actions column definition for row actions
+ */
+export declare function createActionsColumn<TData>(rowActionsSnippet: Snippet<[{
+    row: Row<TData>;
+}]>): ColumnDef<TData>;

package/dist/data-table/column-definitions.js

@@ -0,0 +1,42 @@
+import { renderComponent, renderSnippet } from './render-helpers.js';
+import InputCheckbox from '../InputCheckbox.svelte';
+/**
+ * Create the selection column definition for row selection
+ */
+export function createSelectionColumn() {
+    return {
+        id: 'select',
+        header: ({ table }) => renderComponent(InputCheckbox, {
+            checked: table.getIsAllPageRowsSelected(),
+            onchange: (value) => table.toggleAllPageRowsSelected(value),
+            indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
+            'aria-label': 'Select all',
+            onclick: (e) => e.stopPropagation()
+        }),
+        cell: ({ row }) => renderComponent(InputCheckbox, {
+            checked: row.getIsSelected(),
+            onchange: (value) => row.toggleSelected(value),
+            'aria-label': 'Select row',
+            onclick: (e) => e.stopPropagation()
+        }),
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        size: 40,
+        minSize: 40,
+        maxSize: 40
+    };
+}
+/**
+ * Create the actions column definition for row actions
+ */
+export function createActionsColumn(rowActionsSnippet) {
+    return {
+        id: 'actions',
+        cell: ({ row }) => renderSnippet(rowActionsSnippet, { row }),
+        enableResizing: false,
+        size: 56,
+        minSize: 56,
+        maxSize: 56
+    };
+}

package/dist/data-table/column-sizing-helpers.d.ts

@@ -0,0 +1,6 @@
+import type { ColumnSizingState } from '@tanstack/table-core';
+/**
+ * Calculate initial column sizes based on available container width
+ * Scales column sizes proportionally if container is wider than default sizes
+ */
+export declare function calculateColumnSizing(columns: any[], containerWidth: number): ColumnSizingState | null;

package/dist/data-table/column-sizing-helpers.js

@@ -0,0 +1,24 @@
+/**
+ * Calculate initial column sizes based on available container width
+ * Scales column sizes proportionally if container is wider than default sizes
+ */
+export function calculateColumnSizing(columns, containerWidth) {
+    // Collect all column sizes
+    const defaultSizes = {};
+    columns.forEach((col) => {
+        if (col.size) {
+            defaultSizes[col.id] = col.size;
+        }
+    });
+    const totalDefaultSize = Object.values(defaultSizes).reduce((sum, size) => sum + size, 0);
+    // If container is wider than default, scale columns proportionally
+    if (containerWidth > totalDefaultSize && totalDefaultSize > 0) {
+        const scale = containerWidth / totalDefaultSize;
+        const newSizing = {};
+        Object.entries(defaultSizes).forEach(([key, value]) => {
+            newSizing[key] = Math.floor(value * scale);
+        });
+        return newSizing;
+    }
+    return null;
+}

package/dist/data-table/create-columns.d.ts

@@ -0,0 +1,3 @@
+import type { ColumnDef } from '@tanstack/table-core';
+import type { DataTableColumn } from './data-table-types.js';
+export declare function createColumns<TData>(columns: DataTableColumn<TData>[]): ColumnDef<TData>[];

package/dist/data-table/create-columns.js

@@ -0,0 +1,67 @@
+import { renderComponent } from './render-helpers.js';
+import TextCell from './cells/text-cell.svelte';
+import BooleanCell from './cells/boolean-cell.svelte';
+import TagCell from './cells/tag-cell.svelte';
+import DateCell from './cells/date-cell.svelte';
+import CurrencyCell from './cells/currency-cell.svelte';
+import UuidCell from './cells/uuid-cell.svelte';
+import { renderSnippet } from './render-helpers.js';
+export function createColumns(columns) {
+    return columns.map((col) => {
+        const tanstackCol = {
+            id: col.id,
+            accessorKey: col.accessorKey,
+            header: col.header,
+            enableSorting: col.enableSorting ?? true,
+            enableHiding: col.enableHiding ?? true,
+            enableResizing: col.enableResizing ?? true,
+            size: col.size,
+            minSize: col.minSize,
+            maxSize: col.maxSize,
+            meta: {
+                cellType: col.cellType,
+                disableColumnFilter: col.disableColumnFilter ?? false,
+                loadingConfig: col.loadingConfig
+            }
+        };
+        // Cell renderer
+        if (col.cell) {
+            // Custom cell renderer - can be a Snippet or a function
+            const cellRenderer = col.cell;
+            tanstackCol.cell = ({ row }) => {
+                const value = col.accessorKey ? row.original[col.accessorKey] : undefined;
+                // Check if it's a function or a Snippet
+                if (typeof cellRenderer === 'function') {
+                    return cellRenderer(value, row.original);
+                }
+                else {
+                    // It's a Snippet, render it with the row data
+                    return renderSnippet(cellRenderer, row.original);
+                }
+            };
+        }
+        else if (col.cellType) {
+            // Built-in cell renderer based on type
+            tanstackCol.cell = ({ row }) => {
+                const value = col.accessorKey ? row.original[col.accessorKey] : undefined;
+                switch (col.cellType) {
+                    case 'text':
+                        return renderComponent(TextCell, { value: value, config: col.cellConfig });
+                    case 'boolean':
+                        return renderComponent(BooleanCell, { value: value, config: col.cellConfig });
+                    case 'tag':
+                        return renderComponent(TagCell, { value: value, config: col.cellConfig });
+                    case 'date':
+                        return renderComponent(DateCell, { value: value, config: col.cellConfig });
+                    case 'currency':
+                        return renderComponent(CurrencyCell, { value: value, config: col.cellConfig });
+                    case 'uuid':
+                        return renderComponent(UuidCell, { value: value, config: col.cellConfig });
+                    default:
+                        return value;
+                }
+            };
+        }
+        return tanstackCol;
+    });
+}

package/dist/data-table/data-table-cell.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" generics="TData">
+  import type { DataTableCellProps } from './data-table-types.js'
+  import * as Table from '../table/index.js'
+  import FlexRender from './flex-render.svelte'
+  import CellSkeleton from './cells/cell-skeleton.svelte'
+  import { calculateFrozenOffset } from './data-table-helpers.js'
+  import { getCellStyle, getCellClasses } from './table-styles.js'
+
+  let {
+    cell,
+    index,
+    visibleCells,
+    allCells,
+    frozenColumns,
+    loading = false,
+    StickyCellWrapper
+  }: DataTableCellProps<TData> = $props()
+
+  const isLastScrollable = $derived(index === visibleCells.length - 2)
+  const firstDataColumnIndex = $derived(
+    visibleCells.findIndex((c) => c.column.id !== 'select' && c.column.id !== 'actions')
+  )
+  const isFirstDataColumn = $derived(index === firstDataColumnIndex)
+  const isFirstCell = $derived(index === 0)
+  const isLastCell = $derived(index === visibleCells.length - 1)
+  const isFrozen = $derived(frozenColumns.has(cell.column.id))
+  const lastFrozenColumnId = $derived.by(() =>
+    allCells
+      .map((c) => c.column)
+      .reverse()
+      .find((col) => frozenColumns.has(col.id))?.id
+  )
+  const isLastFrozen = $derived(isFrozen && cell.column.id === lastFrozenColumnId)
+  const frozenOffset = $derived.by(() =>
+    isFrozen
+      ? calculateFrozenOffset(
+          cell.column.id,
+          allCells.map((c) => c.column),
+          frozenColumns
+        )
+      : 0
+  )
+  const loadingConfig = $derived(cell.column.columnDef.meta?.loadingConfig || {})
+  const cellType = $derived(cell.column.columnDef.meta?.cellType)
+  const isBoolean = $derived(cellType === 'boolean')
+</script>
+
+<Table.Cell
+  style={getCellStyle(cell, isLastScrollable, isFrozen, frozenOffset)}
+  class={getCellClasses(
+    cell,
+    isLastScrollable,
+    isFirstDataColumn,
+    isFirstCell,
+    isLastCell,
+    isFrozen
+  )}
+>
+  {#if cell.column.id === 'actions'}
+    {@render StickyCellWrapper({
+      align: 'right',
+      children: CellContent,
+      isFirst: isFirstCell,
+      isLast: isLastCell
+    })}
+    {#snippet CellContent()}
+      <div class={loading ? 'opacity-30' : ''}>
+        <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+      </div>
+    {/snippet}
+  {:else if cell.column.id === 'select' || isFrozen}
+    {@render StickyCellWrapper({
+      align: 'left',
+      children: CellContent,
+      isFirst: isFirstCell,
+      isLast: isLastCell,
+      isFrozen: isFrozen,
+      isLastFrozen: isLastFrozen
+    })}
+    {#snippet CellContent()}
+      {#if loading && cell.column.id !== 'select'}
+        <CellSkeleton {isBoolean} {loadingConfig} />
+      {:else}
+        <div class={cell.column.id === 'select' && loading ? 'opacity-30' : ''}>
+          <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+        </div>
+      {/if}
+    {/snippet}
+  {:else if loading}
+    <CellSkeleton {isBoolean} {loadingConfig} withPadding />
+  {:else}
+    <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+  {/if}
+</Table.Cell>

package/dist/data-table/data-table-cell.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { DataTableCellProps } from './data-table-types.js';
+declare function $$render<TData>(): {
+    props: DataTableCellProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableCell: $$IsomorphicComponent;
+type DataTableCell<TData> = InstanceType<typeof DataTableCell<TData>>;
+export default DataTableCell;