tera-system-ui 0.0.16 → 0.0.18

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>

package/dist/components/command/components/CommandInput.svelte

@@ -1,93 +1,93 @@
-<script lang="ts">
-    import {derived, get} from 'svelte/store';
-    import {getCtx, getState, ITEM_SELECTOR, VALUE_ATTR} from '../command.js';
-    import {isBrowser} from '../../../internal/index.js';
-    import type {InputEvents, InputProps} from '../types.js';
-    import {sleep} from '../../../internal/helpers/sleep.js';
-    import {styles} from "../../input/Input";
-    import {IconSearch} from "../../..";
-
-    type $$Props = InputProps;
-    type $$Events = InputEvents;
-
-    const {ids, commandEl} = getCtx();
-    const commandState = getState();
-
-    const valueStore = derived(commandState, ($commandState) => $commandState.value);
-
-    let {
-        autofocus = undefined,
-        value = $bindable(),
-        el,
-        class: className,
-        ...restProps
-    }: $$Props & {
-        el?: HTMLElement
-    } = $props()
-
-
-    const selectedItemId = derived([valueStore, commandEl], ([$value, $commandEl]) => {
-        if (!isBrowser) return undefined;
-        const item = $commandEl?.querySelector(`${ITEM_SELECTOR}[${VALUE_ATTR}="${$value}"]`);
-        return item?.getAttribute('id');
-    });
-
-    function handleValueUpdate(v: string) {
-        commandState.updateState('search', v);
-    }
-
-    function action(node: HTMLInputElement) {
-        if (autofocus) {
-            sleep(200).then(() => {
-                node.focus()
-                console.log('CommandInput autofocus')
-            });
-        }
-    }
-
-    let attrs = $state<Record<string, unknown>>()
-
-    $effect(() => {
-        attrs = {
-            type: 'text',
-            'data-cmdk-input': '',
-            autocomplete: 'off',
-            autocorrect: 'off',
-            spellcheck: false,
-            'aria-autocomplete': 'list',
-            role: 'combobox',
-            'aria-expanded': true,
-            'aria-controls': ids.list,
-            'aria-labelledby': ids.label,
-            'aria-activedescendant': $selectedItemId ?? undefined,
-            id: ids.input
-        };
-    })
-
-    $effect(() => {
-        return () => {
-            value = ''
-        }
-    })
-</script>
-
-<div class="relative">
-    <input
-            class={styles({
-            variant: 'borderless',
-            size: 'lg',
-            class: className + ' pl-9 border-b border-b-neutral-token-5 rounded-none text-sm',
-        })}
-            bind:this={el}
-            {...attrs}
-            bind:value={value}
-            use:action
-            {...restProps}
-            onkeydown={() => {}}
-            oninput={() => {handleValueUpdate(value)}}
-            onfocus={() => {}}
-            onblur={() => {}}
-            onchange={() => {}}
-    />
-    <IconSearch class="absolute top-1/2 left-2 -translate-y-1/2 size-icon-xs opacity-60"/>
+<script lang="ts">
+    import {derived, get} from 'svelte/store';
+    import {getCtx, getState, ITEM_SELECTOR, VALUE_ATTR} from '../command.js';
+    import {isBrowser} from '../../../internal/index.js';
+    import type {InputEvents, InputProps} from '../types.js';
+    import {sleep} from '../../../internal/helpers/sleep.js';
+    import {styles} from "../../input/Input";
+    import {IconSearch} from "../../..";
+
+    type $$Props = InputProps;
+    type $$Events = InputEvents;
+
+    const {ids, commandEl} = getCtx();
+    const commandState = getState();
+
+    const valueStore = derived(commandState, ($commandState) => $commandState.value);
+
+    let {
+        autofocus = undefined,
+        value = $bindable(),
+        el,
+        class: className,
+        ...restProps
+    }: $$Props & {
+        el?: HTMLElement
+    } = $props()
+
+
+    const selectedItemId = derived([valueStore, commandEl], ([$value, $commandEl]) => {
+        if (!isBrowser) return undefined;
+        const item = $commandEl?.querySelector(`${ITEM_SELECTOR}[${VALUE_ATTR}="${$value}"]`);
+        return item?.getAttribute('id');
+    });
+
+    function handleValueUpdate(v: string) {
+        commandState.updateState('search', v);
+    }
+
+    function action(node: HTMLInputElement) {
+        if (autofocus) {
+            sleep(200).then(() => {
+                node.focus()
+                console.log('CommandInput autofocus')
+            });
+        }
+    }
+
+    let attrs = $state<Record<string, unknown>>()
+
+    $effect(() => {
+        attrs = {
+            type: 'text',
+            'data-cmdk-input': '',
+            autocomplete: 'off',
+            autocorrect: 'off',
+            spellcheck: false,
+            'aria-autocomplete': 'list',
+            role: 'combobox',
+            'aria-expanded': true,
+            'aria-controls': ids.list,
+            'aria-labelledby': ids.label,
+            'aria-activedescendant': $selectedItemId ?? undefined,
+            id: ids.input
+        };
+    })
+
+    $effect(() => {
+        return () => {
+            value = ''
+        }
+    })
+</script>
+
+<div class="relative">
+    <input
+            class={styles({
+            variant: 'borderless',
+            size: 'lg',
+            class: className + ' pl-9 border-b border-b-neutral-token-5 rounded-none text-sm',
+        })}
+            bind:this={el}
+            {...attrs}
+            bind:value={value}
+            use:action
+            {...restProps}
+            onkeydown={() => {}}
+            oninput={() => {handleValueUpdate(value)}}
+            onfocus={() => {}}
+            onblur={() => {}}
+            onchange={() => {}}
+    />
+    <IconSearch class="absolute top-1/2 left-2 -translate-y-1/2 size-icon-xs opacity-60"/>
 </div>