svelora 3.0.14 → 3.0.16

package/dist/components/ConfirmDialog/ConfirmDialog.svelte

@@ -0,0 +1,167 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { Dialog } from "bits-ui";
+import Button from "../Button/Button.svelte";
+import Input from "../Input/Input.svelte";
+import Textarea from "../Textarea/Textarea.svelte";
+import AnimatedIcon from "../Toast/internal/AnimatedIcon.svelte";
+import { modalVariants } from "../Modal/modal.variants.js";
+let { confirmText: defaultConfirmText = "Confirm", cancelText: defaultCancelText = "Cancel" } = $props();
+let open = $state(false);
+let pending = $state(null);
+let currentInputValue = $state("");
+const classes = $derived(modalVariants({
+	transition: "scale",
+	size: "sm",
+	overlay: true,
+	scrollable: false
+}));
+const dismissible = $derived(pending?.options.dismissible !== false);
+const showCancel = $derived(pending?.options.showCancel !== false);
+export function show(options = {}) {
+	return new Promise((resolve) => {
+		currentInputValue = options.inputValue ?? "";
+		pending = {
+			options,
+			resolve
+		};
+		open = true;
+	});
+}
+function settle(result) {
+	const current = pending;
+	pending = null;
+	open = false;
+	current?.resolve(result);
+}
+function handleConfirm() {
+	pending?.options.onConfirm?.(currentInputValue);
+	settle(true);
+}
+function handleCancel() {
+	pending?.options.onCancel?.();
+	settle(false);
+}
+function handleOpenChange(value) {
+	if (!value && pending) {
+		handleCancel();
+		return;
+	}
+	open = value;
+}
+const contentProps = $derived.by(() => {
+	const behavior = dismissible ? "close" : "ignore";
+	return {
+		trapFocus: true,
+		preventScroll: true,
+		escapeKeydownBehavior: behavior,
+		interactOutsideBehavior: behavior
+	};
+});
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+    <Dialog.Portal>
+        <Dialog.Overlay class={classes.overlay()} />
+        {#if pending}
+            <Dialog.Content
+                {...contentProps}
+                class={[classes.content(), 'p-6 text-center']}
+            >
+                {#if pending.options.title}
+                    <Dialog.Title class="sr-only">{pending.options.title}</Dialog.Title>
+                {/if}
+                {#if pending.options.message}
+                    <Dialog.Description class="sr-only"
+                        >{pending.options.message}</Dialog.Description
+                    >
+                {/if}
+
+                {#if pending.options.icon}
+                    {#key pending.options.icon}
+                        <div class="mb-4 flex min-h-20 justify-center">
+                            <AnimatedIcon
+                                type={pending.options.icon}
+                                size={80}
+                                forceMotion
+                                idle={false}
+                            />
+                        </div>
+                    {/key}
+                {/if}
+
+                {#if pending.options.title}
+                    <h3 class="mb-2 text-lg font-semibold text-on-surface">
+                        {pending.options.title}
+                    </h3>
+                {/if}
+
+                {#if pending.options.message}
+                    <p class="mb-6 text-sm text-on-surface-variant">
+                        {pending.options.message}
+                    </p>
+                {:else if !pending.options.inputPlaceholder}
+                    <div class="mb-6"></div>
+                {/if}
+
+                {#if pending.options.inputPlaceholder}
+                    {#if pending.options.inputChoices && pending.options.inputChoices.length > 0}
+                        <div class="mb-3 flex flex-wrap justify-center gap-1">
+                            {#each pending.options.inputChoices as choice (choice)}
+                                <Button
+                                    label={choice}
+                                    size="xs"
+                                    variant={currentInputValue === choice ? 'solid' : 'outline'}
+                                    color={currentInputValue === choice ? 'primary' : 'surface'}
+                                    onclick={() => (currentInputValue = choice)}
+                                />
+                            {/each}
+                        </div>
+                    {/if}
+
+                    <div class="mb-6 text-left">
+                        {#if pending.options.inputType === 'textarea'}
+                            <Textarea
+                                bind:value={currentInputValue}
+                                placeholder={pending.options.inputPlaceholder}
+                                class="w-full"
+                            />
+                        {:else}
+                            <Input
+                                type={pending.options.inputType ?? 'text'}
+                                bind:value={currentInputValue}
+                                placeholder={pending.options.inputPlaceholder}
+                                class="w-full"
+                                onkeydown={(e) => {
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault()
+                                        handleConfirm()
+                                    }
+                                }}
+                            />
+                        {/if}
+                    </div>
+                {/if}
+
+                <div class="flex justify-center gap-2">
+                    {#if showCancel}
+                        <Button
+                            label={pending.options.cancelText ?? defaultCancelText}
+                            variant="outline"
+                            class="flex-1"
+                            onclick={handleCancel}
+                        />
+                    {/if}
+                    <Button
+                        label={pending.options.confirmText ?? defaultConfirmText}
+                        variant="solid"
+                        color={pending.options.confirmColor ?? 'primary'}
+                        class={showCancel ? 'flex-1' : 'w-full'}
+                        onclick={handleConfirm}
+                    />
+                </div>
+            </Dialog.Content>
+        {/if}
+    </Dialog.Portal>
+</Dialog.Root>

package/dist/components/ConfirmDialog/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,10 @@
+export type Props = {
+    confirmText?: string;
+    cancelText?: string;
+};
+import type { ConfirmOptions } from './confirm.types.js';
+declare const ConfirmDialog: import("svelte").Component<Props, {
+    show: (options?: ConfirmOptions) => Promise<boolean>;
+}, "">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/components/ConfirmDialog/confirm.d.ts

@@ -0,0 +1,9 @@
+import type { ConfirmOptions } from './confirm.types.js';
+type ShowFn = (options?: ConfirmOptions) => Promise<boolean>;
+export declare function registerConfirmDialog(fn: ShowFn | null): void;
+export declare const confirmDialog: {
+    show(options?: ConfirmOptions): Promise<boolean>;
+    delete(options?: ConfirmOptions): Promise<boolean>;
+};
+export type ConfirmDialogUtility = typeof confirmDialog;
+export {};

package/dist/components/ConfirmDialog/confirm.js

@@ -0,0 +1,24 @@
+let showFn = null;
+export function registerConfirmDialog(fn) {
+    showFn = fn;
+}
+export const confirmDialog = {
+    show(options = {}) {
+        if (!showFn) {
+            console.warn('[confirmDialog] ConfirmDialog is not registered — add <ConfirmDialog /> to your root layout.');
+            return Promise.resolve(false);
+        }
+        return showFn(options);
+    },
+    delete(options = {}) {
+        return this.show({
+            title: 'Delete this item?',
+            message: 'This action is permanent and cannot be undone.',
+            confirmText: 'Delete',
+            cancelText: 'Cancel',
+            icon: 'warning',
+            confirmColor: 'error',
+            ...options
+        });
+    }
+};

package/dist/components/ConfirmDialog/confirm.types.d.ts

@@ -0,0 +1,22 @@
+import type { ButtonVariantProps } from '../Button/button.variants.js';
+import type { AnimatedIconType } from '../Toast/internal/animated-icon.types.js';
+export type ConfirmIcon = Extract<AnimatedIconType, 'warning' | 'error' | 'question' | 'info' | 'success'>;
+export type ConfirmColor = NonNullable<ButtonVariantProps['color']>;
+export interface ConfirmOptions {
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    icon?: ConfirmIcon;
+    confirmColor?: ConfirmColor;
+    /** When false, only the confirm button is shown (alert-style). @default true */
+    showCancel?: boolean;
+    /** When false, backdrop click and Escape do not dismiss. @default true */
+    dismissible?: boolean;
+    inputPlaceholder?: string;
+    inputValue?: string;
+    inputType?: 'text' | 'password' | 'email' | 'number' | 'textarea';
+    inputChoices?: string[];
+    onConfirm?: (value?: string) => void;
+    onCancel?: () => void;
+}

package/dist/components/ConfirmDialog/confirm.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ConfirmDialog/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { confirmDialog, registerConfirmDialog } from './confirm.js';
+export type { ConfirmOptions, ConfirmIcon, ConfirmColor } from './confirm.types.js';
+export type { ConfirmDialogUtility } from './confirm.js';

package/dist/components/ConfirmDialog/index.js

@@ -0,0 +1,2 @@
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { confirmDialog, registerConfirmDialog } from './confirm.js';

package/dist/components/Editor/editor.schemas.js

@@ -3,7 +3,7 @@ export function createUrlSchema(validateFn) {
         '~standard': {
             version: 1,
             vendor: 'svelora',
-            validate: validateFn,
+            validate: validateFn
         }
     };
 }

package/dist/components/SortableList/SortableList.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts" generics="T">import { twMerge } from "tailwind-merge";
+import Icon from "../Icon/Icon.svelte";
+import { useSortable } from "../../hooks/useSortable/index.js";
+let { items = $bindable(), getKey, onReorder, axis = "vertical", handle = true, disabled = false, class: className, itemClass, children } = $props();
+const sortable = useSortable({
+	getItems: () => items,
+	getId: (item) => getKey(item),
+	axis: () => axis,
+	handle: () => handle ? "[data-sortable-handle]" : undefined,
+	disabled: () => disabled,
+	onReorder(nextItems) {
+		items = nextItems;
+		onReorder?.(nextItems);
+	}
+});
+const listClass = $derived(twMerge(axis === "vertical" ? "flex flex-col gap-2" : axis === "horizontal" ? "flex flex-row flex-wrap gap-2" : "gap-3", className));
+const itemClasses = $derived(twMerge("relative flex items-center gap-3 rounded-lg border border-outline-variant/60 bg-surface-container-low px-3 py-2 transition-shadow select-none", itemClass));
+</script>
+
+<sortable.Provider>
+    <div use:sortable.container class={listClass} role="list">
+        {#each items as item, index (getKey(item))}
+            {@const id = getKey(item)}
+            {@const dragging = sortable.draggingId === String(id)}
+            <div
+                use:sortable.item={{ index, item }}
+                role="listitem"
+                class={twMerge(itemClasses, dragging && 'z-10 opacity-95 shadow-md')}
+                aria-grabbed={dragging}
+            >
+                {#if handle}
+                    <button
+                        type="button"
+                        data-sortable-handle
+                        class="inline-flex shrink-0 cursor-grab rounded-md p-1 text-on-surface-variant hover:bg-surface-container-high active:cursor-grabbing"
+                        aria-label="Drag to reorder"
+                    >
+                        <Icon name="lucide:grip-vertical" size="16" />
+                    </button>
+                {/if}
+                {@render children({ item, index, dragging })}
+            </div>
+        {/each}
+    </div>
+</sortable.Provider>
+
+<style>
+    :global([data-sortable-active='true']) {
+        user-select: none;
+    }
+</style>

package/dist/components/SortableList/SortableList.svelte.d.ts

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

package/dist/components/SortableList/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SortableList } from './SortableList.svelte';
+export type { SortableListProps } from './sortable-list.types.js';

package/dist/components/SortableList/index.js

@@ -0,0 +1 @@
+export { default as SortableList } from './SortableList.svelte';

package/dist/components/SortableList/sortable-list.types.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export interface SortableListProps<T> {
+    items: T[];
+    getKey: (item: T) => string | number;
+    onReorder?: (items: T[]) => void;
+    axis?: 'vertical' | 'horizontal' | 'grid';
+    handle?: boolean;
+    disabled?: boolean;
+    class?: ClassNameValue;
+    itemClass?: ClassNameValue;
+    children: Snippet<[{
+        item: T;
+        index: number;
+        dragging: boolean;
+    }]>;
+}

package/dist/components/SortableList/sortable-list.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Table/Table.svelte

@@ -11,7 +11,7 @@ import { autoGenerateColumns, computePinOffsets, filterByColumns, filterByGlobal
 import { tableDefaults, tableVariants } from "./table.variants.js";
 const config = getComponentConfig("table", tableDefaults);
 const icons = getComponentConfig("icons", iconsDefaults);
-let { ref = $bindable(null), as = "div", data = [], columns: columnsProp, rowKey, caption, sorting = $bindable([]), multiSort = false, manualSorting = false, onSortingChange, globalFilter = $bindable(""), globalFilterKeys, manualFiltering = false, onGlobalFilterChange, columnFilters = $bindable({}), onColumnFiltersChange, page = $bindable(0), pageSize = 10, manualPagination = false, onPageChange, selection, selectedRows = $bindable([]), onSelectionChange, columnVisibility = $bindable(), onColumnVisibilityChange, columnPinning = $bindable(), pinnedRows = $bindable([]), onPinnedRowsChange, expandedRows = $bindable([]), onExpandedChange, columnSizing = $bindable({}), onColumnSizingChange, loading = false, loadingColor = config.defaultVariants.loadingColor ?? "primary", loadingAnimation = config.defaultVariants.loadingAnimation ?? "carousel", empty = "No data.", striped = false, hoverable = config.defaultVariants.hoverable ?? true, sticky = false, action, onRowClick, onRowHover, onRowContextmenu, ui, class: className, captionSlot, emptySlot, loadingSlot, expandedSlot, bodyTopSlot, bodyBottomSlot, headerSlot, cellSlot, ...restProps } = $props();
+let { ref = $bindable(null), as = "div", data = [], columns: columnsProp, rowKey, caption, sorting = $bindable([]), multiSort = false, manualSorting = false, onSortingChange, globalFilter = $bindable(""), globalFilterKeys, manualFiltering = false, onGlobalFilterChange, columnFilters = $bindable({}), onColumnFiltersChange, page = $bindable(0), pageSize = 10, manualPagination = false, onPageChange, selection, selectedRows = $bindable([]), onSelectionChange, columnVisibility = $bindable(), onColumnVisibilityChange, columnPinning = $bindable(), pinnedRows = $bindable([]), onPinnedRowsChange, expandedRows = $bindable([]), onExpandedChange, columnSizing = $bindable({}), onColumnSizingChange, loading = false, loadingColor = config.defaultVariants.loadingColor ?? "primary", loadingAnimation = config.defaultVariants.loadingAnimation ?? "carousel", size = config.defaultVariants.size ?? "md", empty = "No data.", striped = false, hoverable = config.defaultVariants.hoverable ?? true, sticky = false, action, onRowClick, onRowHover, onRowContextmenu, ui, class: className, captionSlot, emptySlot, loadingSlot, expandedSlot, bodyTopSlot, bodyBottomSlot, headerSlot, cellSlot, ...restProps } = $props();
 // =========================================================================
 // Apply Svelte action on root element
 // =========================================================================
@@ -75,6 +75,7 @@ const resolvedColumns = $derived.by(() => {
 });
 const visibleColumns = $derived(resolveVisibleColumns(resolvedColumns, columnVisibility, columnPinning));
 const hasFooter = $derived(visibleColumns.some((col) => col.footer));
+const hasColumnFilterRow = $derived(visibleColumns.some((col) => col.filterable === true));
 const totalColspan = $derived(visibleColumns.length + (selection === "multiple" ? 1 : 0));
 // =========================================================================
 // Data Pipeline: filter → sort → paginate
@@ -304,6 +305,7 @@ function getAlignClass(align) {
 // Variant Classes
 // =========================================================================
 const variantSlots = $derived(tableVariants({
+	size,
 	hoverable: hoverable || undefined,
 	striped: striped || undefined,
 	sticky: sticky || undefined,
@@ -523,6 +525,60 @@ function tdClass(key) {
                     </th>
                 {/each}
             </tr>
+
+            {#if hasColumnFilterRow}
+                <tr class="{classes.tr} border-t border-outline-variant/30">
+                    {#if selection === 'multiple'}
+                        <th class={classes.th} style="width: 48px"></th>
+                    {/if}
+                    {#each visibleColumns as col (col.key)}
+                        <th
+                            class="px-2 py-1.5"
+                            data-pinned={isPinned(col.key) || undefined}
+                            style={getPinStyle(col.key)}
+                        >
+                            {#if col.filterable}
+                                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                                <div class="relative">
+                                    <input
+                                        type="text"
+                                        value={columnFilters[col.key] ?? ''}
+                                        placeholder="Filter…"
+                                        aria-label="Filter {col.label ?? col.key}"
+                                        oninput={(e) => {
+                                            const val = (e.currentTarget as HTMLInputElement).value;
+                                            if (val) {
+                                                columnFilters = { ...columnFilters, [col.key]: val };
+                                            } else {
+                                                const { [col.key]: _removed, ...rest } = columnFilters;
+                                                columnFilters = rest;
+                                            }
+                                            onColumnFiltersChange?.(columnFilters);
+                                            page = 0;
+                                        }}
+                                        class="w-full rounded-md border border-outline-variant/40 bg-surface-container-low px-2 py-1 text-xs text-on-surface placeholder:text-on-surface-variant/40 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30 transition-colors"
+                                    />
+                                    {#if columnFilters[col.key]}
+                                        <button
+                                            type="button"
+                                            aria-label="Clear filter for {col.label ?? col.key}"
+                                            class="absolute right-1.5 top-1/2 -translate-y-1/2 text-on-surface-variant/50 hover:text-on-surface transition-colors"
+                                            onclick={() => {
+                                                const { [col.key]: _removed, ...rest } = columnFilters;
+                                                columnFilters = rest;
+                                                onColumnFiltersChange?.(columnFilters);
+                                                page = 0;
+                                            }}
+                                        >
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+                                        </button>
+                                    {/if}
+                                </div>
+                            {/if}
+                        </th>
+                    {/each}
+                </tr>
+            {/if}
         </thead>
 
         <!-- TBODY -->

package/dist/components/Table/table.types.d.ts

@@ -160,6 +160,8 @@ export interface TableProps<T extends Record<string, any> = Record<string, any>>
     loadingColor?: NonNullable<TableVariantProps['loadingColor']>;
     /** Loading bar animation. @default 'carousel' */
     loadingAnimation?: NonNullable<TableVariantProps['loadingAnimation']>;
+    /** Table density preset. @default 'md' */
+    size?: NonNullable<TableVariantProps['size']>;
     /** Text shown when data is empty. @default 'No data.' */
     empty?: string;
     /** Alternate row background colors. @default false */

package/dist/components/Table/table.variants.d.ts

@@ -1,5 +1,16 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const tableVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            th: string;
+            td: string;
+        };
+        md: {};
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
     pinned: {
         true: {
             th: string;
@@ -63,6 +74,17 @@ export declare const tableVariants: import("tailwind-variants").TVReturnType<{
     empty: string;
     loading: string;
 }, undefined, {
+    size: {
+        sm: {
+            th: string;
+            td: string;
+        };
+        md: {};
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
     pinned: {
         true: {
             th: string;
@@ -126,6 +148,17 @@ export declare const tableVariants: import("tailwind-variants").TVReturnType<{
     empty: string;
     loading: string;
 }, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            th: string;
+            td: string;
+        };
+        md: {};
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
     pinned: {
         true: {
             th: string;
@@ -193,6 +226,7 @@ export type TableVariantProps = VariantProps<typeof tableVariants>;
 export type TableSlots = keyof ReturnType<typeof tableVariants>;
 export declare const tableDefaults: {
     defaultVariants: {
+        size: "md";
         hoverable: true;
         loadingColor: "primary";
         loadingAnimation: "carousel";

package/dist/components/Table/table.variants.js

@@ -27,6 +27,17 @@ export const tableVariants = tv({
         loading: 'py-10 text-center'
     },
     variants: {
+        size: {
+            sm: {
+                th: 'px-3 py-2 text-[11px]',
+                td: 'px-3 py-2 text-xs'
+            },
+            md: {},
+            lg: {
+                th: 'px-5 py-3.5 text-sm',
+                td: 'px-5 py-4 text-base'
+            }
+        },
         pinned: {
             true: {
                 th: 'sticky bg-surface-container-low/95 backdrop-blur-sm z-1',
@@ -110,6 +121,7 @@ export const tableVariants = tv({
         }
     ],
     defaultVariants: {
+        size: 'md',
         hoverable: true,
         loadingColor: 'primary',
         loadingAnimation: 'carousel'
@@ -118,6 +130,7 @@ export const tableVariants = tv({
 export const tableDefaults = {
     defaultVariants: {
         ...tableVariants.defaultVariants,
+        size: 'md',
         hoverable: true,
         loadingColor: 'primary',
         loadingAnimation: 'carousel'