tera-system-ui 0.0.20 → 0.0.22

package/dist/components/command/components/Command.svelte

@@ -1,120 +1,120 @@
-<script lang="ts">
-    import {addEventListener, executeCallbacks, srOnlyStyles, styleToString} from '../../../internal';
-
-    import {createCommand} from '../command.js';
-    import type {CommandProps} from '../types.js';
-
-    let {
-        children,
-        childrenWithProps,
-        label = undefined,
-        shouldFilter = true,
-        filter = undefined,
-        value = undefined,
-        onValueChange = undefined,
-        loop = undefined,
-        onKeydown = undefined,
-        state: commandState = undefined,
-        ids = undefined,
-        asChild = false,
-        onRequestCloseCommand,
-        ...restProps
-    }: CommandProps = $props();
-
-
-    const {
-        commandEl,
-        handleRootKeydown,
-        ids: commandIds,
-        state: stateStore
-    } = createCommand({
-        label,
-        shouldFilter,
-        filter,
-        value,
-        onValueChange: (next) => {
-            if (next !== value) {
-                value = next;
-                onValueChange?.(next);
-            }
-        },
-        loop,
-        state: commandState,
-        ids,
-        onRequestCloseCommand
-    });
-
-    let slotProps = $state()
-
-    function syncValueAndState(value: string | undefined) {
-        if (value && value !== $stateStore.value) {
-            $stateStore.value = value;
-        }
-    }
-
-
-
-
-    function rootAction(node: HTMLDivElement) {
-        commandEl.set(node);
-
-        const unsubEvents = executeCallbacks(addEventListener(node, 'keydown', handleKeydown));
-
-        return {
-            destroy: unsubEvents
-        };
-    }
-
-    const rootAttrs = {
-        role: 'application',
-        id: commandIds.root,
-        'data-cmdk-root': ''
-    };
-
-    const labelAttrs = {
-        'data-cmdk-label': '',
-        for: commandIds.input,
-        id: commandIds.label,
-        style: styleToString(srOnlyStyles)
-    };
-
-    function handleKeydown(e: KeyboardEvent) {
-        onKeydown?.(e);
-        if (e.defaultPrevented) return;
-        handleRootKeydown(e);
-    }
-
-    const root = {
-        action: rootAction,
-        attrs: rootAttrs
-    };
-
-
-
-
-    $effect(() => {
-        syncValueAndState(value);
-
-        slotProps = {
-            root,
-            label: {attrs: labelAttrs},
-            stateStore,
-            state: $stateStore
-        };
-    })
-</script>
-
-{#if asChild}
-    {@render childrenWithProps?.(slotProps)}
-{:else}
-    <div use:rootAction {...rootAttrs} {...restProps}>
-        <!-- svelte-ignore a11y_label_has_associated_control applied in attrs -->
-        <label {...labelAttrs}>
-            {label ?? ''}
-        </label>
-        <!--{@render childrenWithProps?.(slotProps)}-->
-        {@render children?.()}
-<!--        <slot {...slotProps}/>-->
-    </div>
-{/if}
-
+<script lang="ts">
+    import {addEventListener, executeCallbacks, srOnlyStyles, styleToString} from '../../../internal';
+
+    import {createCommand} from '../command.js';
+    import type {CommandProps} from '../types.js';
+
+    let {
+        children,
+        childrenWithProps,
+        label = undefined,
+        shouldFilter = true,
+        filter = undefined,
+        value = undefined,
+        onValueChange = undefined,
+        loop = undefined,
+        onKeydown = undefined,
+        state: commandState = undefined,
+        ids = undefined,
+        asChild = false,
+        onRequestCloseCommand,
+        ...restProps
+    }: CommandProps = $props();
+
+
+    const {
+        commandEl,
+        handleRootKeydown,
+        ids: commandIds,
+        state: stateStore
+    } = createCommand({
+        label,
+        shouldFilter,
+        filter,
+        value,
+        onValueChange: (next) => {
+            if (next !== value) {
+                value = next;
+                onValueChange?.(next);
+            }
+        },
+        loop,
+        state: commandState,
+        ids,
+        onRequestCloseCommand
+    });
+
+    let slotProps = $state()
+
+    function syncValueAndState(value: string | undefined) {
+        if (value && value !== $stateStore.value) {
+            $stateStore.value = value;
+        }
+    }
+
+
+
+
+    function rootAction(node: HTMLDivElement) {
+        commandEl.set(node);
+
+        const unsubEvents = executeCallbacks(addEventListener(node, 'keydown', handleKeydown));
+
+        return {
+            destroy: unsubEvents
+        };
+    }
+
+    const rootAttrs = {
+        role: 'application',
+        id: commandIds.root,
+        'data-cmdk-root': ''
+    };
+
+    const labelAttrs = {
+        'data-cmdk-label': '',
+        for: commandIds.input,
+        id: commandIds.label,
+        style: styleToString(srOnlyStyles)
+    };
+
+    function handleKeydown(e: KeyboardEvent) {
+        onKeydown?.(e);
+        if (e.defaultPrevented) return;
+        handleRootKeydown(e);
+    }
+
+    const root = {
+        action: rootAction,
+        attrs: rootAttrs
+    };
+
+
+
+
+    $effect(() => {
+        syncValueAndState(value);
+
+        slotProps = {
+            root,
+            label: {attrs: labelAttrs},
+            stateStore,
+            state: $stateStore
+        };
+    })
+</script>
+
+{#if asChild}
+    {@render childrenWithProps?.(slotProps)}
+{:else}
+    <div use:rootAction {...rootAttrs} {...restProps}>
+        <!-- svelte-ignore a11y_label_has_associated_control applied in attrs -->
+        <label {...labelAttrs}>
+            {label ?? ''}
+        </label>
+        <!--{@render childrenWithProps?.(slotProps)}-->
+        {@render children?.()}
+<!--        <slot {...slotProps}/>-->
+    </div>
+{/if}
+

package/dist/components/command/components/CommandEmpty.svelte

@@ -1,30 +1,30 @@
-<script lang="ts">
-    import {getState} from '../command.js';
-    import type {EmptyProps} from '../types.js';
-    import {derived} from "svelte/store";
-    import {onMount} from "svelte";
-
-    type $$Props = EmptyProps;
-
-    let {children, ...restProps}: $$Props = $props()
-
-    let isFirstRender = $state(true);
-    const commandState = getState();
-
-    let render = derived(commandState, ($commandState) => ($commandState.filtered.count === 0))
-
-    onMount(() => {
-        isFirstRender = false;
-    });
-
-    const attrs = {
-        'data-cmdk-empty': '',
-        role: 'presentation'
-    };
-</script>
-
-{#if !isFirstRender &&  $render}
-    <div {...attrs} {...restProps}>
-        {@render children?.()}
-    </div>
-{/if}
+<script lang="ts">
+    import {getState} from '../command.js';
+    import type {EmptyProps} from '../types.js';
+    import {derived} from "svelte/store";
+    import {onMount} from "svelte";
+
+    type $$Props = EmptyProps;
+
+    let {children, ...restProps}: $$Props = $props()
+
+    let isFirstRender = $state(true);
+    const commandState = getState();
+
+    let render = derived(commandState, ($commandState) => ($commandState.filtered.count === 0))
+
+    onMount(() => {
+        isFirstRender = false;
+    });
+
+    const attrs = {
+        'data-cmdk-empty': '',
+        role: 'presentation'
+    };
+</script>
+
+{#if !isFirstRender &&  $render}
+    <div {...attrs} {...restProps}>
+        {@render children?.()}
+    </div>
+{/if}

package/dist/components/command/components/CommandGroup.svelte

@@ -1,110 +1,110 @@
-<script lang="ts">
-    import {generateId} from '../../../internal/index.js';
-    import {derived} from 'svelte/store';
-    import {createGroup, getCtx, getState, VALUE_ATTR} from '../command.js';
-    import type {GroupProps} from '../types.js';
-    import {onMount} from 'svelte';
-
-    type $$Props = GroupProps;
-
-    let {
-        children,
-        heading,
-        value = '',
-        alwaysRender = false,
-        ...restProps
-    }: $$Props = $props()
-
-    const {id} = createGroup(alwaysRender);
-
-    const context = getCtx();
-    const commandState = getState();
-    const headingId = generateId();
-
-    const render = derived(commandState, ($state) => {
-        if (alwaysRender) return true;
-        if (context.filter() === false) return true;
-        if (!$commandState.search) return true;
-        return $commandState.filtered.groups.has(id);
-    });
-
-
-    onMount(() => {
-        const unsubGroup = context.group(id);
-        return unsubGroup;
-    });
-
-
-    function containerAction(node: HTMLElement) {
-
-        if (value) {
-            context.value(id, value);
-            node.setAttribute(VALUE_ATTR, value);
-            return;
-        }
-
-        if (heading) {
-            value = heading.trim().toLowerCase();
-        } else if (node.textContent) {
-            value = node.textContent.trim().toLowerCase();
-        }
-
-        context.value(id, value);
-        node.setAttribute(VALUE_ATTR, value);
-    }
-
-    let containerAttrs = $state()
-
-    $effect(() => {
-        containerAttrs = {
-            'data-cmdk-group': '',
-            role: 'presentation',
-            hidden: $render ? undefined : true,
-            'data-value': value
-        }
-    })
-
-
-    const headingAttrs = {
-        'data-cmdk-group-heading': '',
-        'aria-hidden': true,
-        id: headingId
-    };
-
-    let groupAttrs = $state()
-    $effect(() => {
-        groupAttrs = {
-            'data-cmdk-group-items': '',
-            role: 'group',
-            'aria-labelledby': heading ? headingId : undefined
-        };
-    })
-
-    let container = $state()
-    $effect(() => {
-        container = {
-            action: containerAction,
-            attrs: containerAttrs
-        };
-    })
-
-
-    let group = $state()
-    $effect(() => {
-        group = {
-            attrs: groupAttrs
-        };
-    })
-</script>
-
-<div use:containerAction {...containerAttrs} {...restProps}>
-    {#if heading}
-        <div {...headingAttrs}>
-            {heading}
-        </div>
-    {/if}
-    <div {...groupAttrs}>
-        <!--        <slot {container} {group} heading={{ attrs: headingAttrs }}/>-->
-        {@render children?.()}
-    </div>
-</div>
+<script lang="ts">
+    import {generateId} from '../../../internal/index.js';
+    import {derived} from 'svelte/store';
+    import {createGroup, getCtx, getState, VALUE_ATTR} from '../command.js';
+    import type {GroupProps} from '../types.js';
+    import {onMount} from 'svelte';
+
+    type $$Props = GroupProps;
+
+    let {
+        children,
+        heading,
+        value = '',
+        alwaysRender = false,
+        ...restProps
+    }: $$Props = $props()
+
+    const {id} = createGroup(alwaysRender);
+
+    const context = getCtx();
+    const commandState = getState();
+    const headingId = generateId();
+
+    const render = derived(commandState, ($state) => {
+        if (alwaysRender) return true;
+        if (context.filter() === false) return true;
+        if (!$commandState.search) return true;
+        return $commandState.filtered.groups.has(id);
+    });
+
+
+    onMount(() => {
+        const unsubGroup = context.group(id);
+        return unsubGroup;
+    });
+
+
+    function containerAction(node: HTMLElement) {
+
+        if (value) {
+            context.value(id, value);
+            node.setAttribute(VALUE_ATTR, value);
+            return;
+        }
+
+        if (heading) {
+            value = heading.trim().toLowerCase();
+        } else if (node.textContent) {
+            value = node.textContent.trim().toLowerCase();
+        }
+
+        context.value(id, value);
+        node.setAttribute(VALUE_ATTR, value);
+    }
+
+    let containerAttrs = $state()
+
+    $effect(() => {
+        containerAttrs = {
+            'data-cmdk-group': '',
+            role: 'presentation',
+            hidden: $render ? undefined : true,
+            'data-value': value
+        }
+    })
+
+
+    const headingAttrs = {
+        'data-cmdk-group-heading': '',
+        'aria-hidden': true,
+        id: headingId
+    };
+
+    let groupAttrs = $state()
+    $effect(() => {
+        groupAttrs = {
+            'data-cmdk-group-items': '',
+            role: 'group',
+            'aria-labelledby': heading ? headingId : undefined
+        };
+    })
+
+    let container = $state()
+    $effect(() => {
+        container = {
+            action: containerAction,
+            attrs: containerAttrs
+        };
+    })
+
+
+    let group = $state()
+    $effect(() => {
+        group = {
+            attrs: groupAttrs
+        };
+    })
+</script>
+
+<div use:containerAction {...containerAttrs} {...restProps}>
+    {#if heading}
+        <div {...headingAttrs}>
+            {heading}
+        </div>
+    {/if}
+    <div {...groupAttrs}>
+        <!--        <slot {container} {group} heading={{ attrs: headingAttrs }}/>-->
+        {@render children?.()}
+    </div>
+</div>