tera-system-ui 0.1.18 → 0.1.30

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

@@ -1,92 +1,92 @@
-<script lang="ts">
-    import {derived, get} from 'svelte/store';
-    import {getCtx, getState, ITEM_SELECTOR, VALUE_ATTR} from '../command.js';
-    import {isBrowser} from '../../../internal/index';
-    import type {InputEvents, InputProps} from '../types.js';
-    import {sleep} from '../../../internal/helpers/sleep.js';
-    import {styles} from "../../input/Input";
-    import {IconSearch} from "../../icons";
-
-    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()
-            });
-        }
-    }
-
-    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';
+    import type {InputEvents, InputProps} from '../types.js';
+    import {sleep} from '../../../internal/helpers/sleep.js';
+    import {styles} from "../../input/Input";
+    import {IconSearch} from "../../icons";
+
+    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()
+            });
+        }
+    }
+
+    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>

package/dist/components/command/components/CommandItem.svelte

@@ -1,110 +1,110 @@
-<script lang="ts">
-    import {addEventListener, executeCallbacks, generateId, isUndefined} from '../../../internal/index.js';
-    import {getCtx, getGroup, getState, VALUE_ATTR} from '../command.js';
-    import type {ItemProps} from '../types.js';
-    import {derived} from 'svelte/store';
-    import {onMount} from "svelte";
-
-    type $$Props = ItemProps
-    let {
-        children,
-        childrenWithProps,
-        id = generateId(),
-        alwaysRender = false,
-        onSelect,
-        value = '',
-        disabled = false,
-        ...restProps
-    }: $$Props = $props()
-
-    const groupContext = getGroup();
-    const context = getCtx();
-    const commandState = getState();
-
-    const trueAlwaysRender = alwaysRender ?? groupContext?.alwaysRender;
-
-    const render = derived(commandState, ($state) => {
-        if (trueAlwaysRender || context.filter() === false || !$commandState.search) return true;
-        const currentScore = $commandState.filtered.items.get(id);
-        if (isUndefined(currentScore)) return false;
-        return currentScore > 0;
-    });
-
-    const selected = derived(commandState, ($state) => $commandState.value === value);
-
-    let isFirstRender = $state(true);
-
-
-    let attrs = derived(selected, ($selected) => (
-        {
-            'aria-disabled': disabled ? true : undefined,
-            'data-disabled': disabled ? true : undefined,
-            'aria-selected': $selected ? true : undefined,
-            'data-selected': $selected ? true : undefined,
-            'data-cmdk-item': '',
-            'data-value': value,
-            role: 'option',
-            id
-        }
-    ));
-
-    onMount(() => {
-        isFirstRender = false;
-    })
-
-
-    onMount(() => {
-        let unsub
-        unsub = context.item(id, groupContext?.id);
-        return unsub;
-    })
-
-
-    function action(node: HTMLElement) {
-        if (!value && node.textContent) {
-            value = node.textContent.trim().toLowerCase();
-        }
-        context.value(id, value);
-        node.setAttribute(VALUE_ATTR, value);
-
-        const unsubEvents = executeCallbacks(
-            addEventListener(node, 'pointerenter', () => {
-                if (disabled) return;
-                select();
-            }),
-            addEventListener(node, 'click', () => {
-                if (disabled) return;
-                handleItemClick();
-            })
-        );
-
-        return {
-            destroy() {
-                unsubEvents();
-            }
-        };
-    }
-
-    function handleItemClick() {
-        select();
-        onSelect?.(value);
-    }
-
-    function select() {
-        commandState.updateState('value', value, true);
-    }
-
-</script>
-
-{#if $render || isFirstRender}
-    <div {...$attrs} use:action {...restProps}>
-        <!--{@render childrenWithProps?.(-->
-        <!--    {-->
-        <!--        attrs: attrs,-->
-        <!--        action: action-->
-        <!--    }-->
-        <!--)-->
-        <!--}-->
-        {@render children?.()}
-    </div>
-{/if}
+<script lang="ts">
+    import {addEventListener, executeCallbacks, generateId, isUndefined} from '../../../internal/index.js';
+    import {getCtx, getGroup, getState, VALUE_ATTR} from '../command.js';
+    import type {ItemProps} from '../types.js';
+    import {derived} from 'svelte/store';
+    import {onMount} from "svelte";
+
+    type $$Props = ItemProps
+    let {
+        children,
+        childrenWithProps,
+        id = generateId(),
+        alwaysRender = false,
+        onSelect,
+        value = '',
+        disabled = false,
+        ...restProps
+    }: $$Props = $props()
+
+    const groupContext = getGroup();
+    const context = getCtx();
+    const commandState = getState();
+
+    const trueAlwaysRender = alwaysRender ?? groupContext?.alwaysRender;
+
+    const render = derived(commandState, ($state) => {
+        if (trueAlwaysRender || context.filter() === false || !$commandState.search) return true;
+        const currentScore = $commandState.filtered.items.get(id);
+        if (isUndefined(currentScore)) return false;
+        return currentScore > 0;
+    });
+
+    const selected = derived(commandState, ($state) => $commandState.value === value);
+
+    let isFirstRender = $state(true);
+
+
+    let attrs = derived(selected, ($selected) => (
+        {
+            'aria-disabled': disabled ? true : undefined,
+            'data-disabled': disabled ? true : undefined,
+            'aria-selected': $selected ? true : undefined,
+            'data-selected': $selected ? true : undefined,
+            'data-cmdk-item': '',
+            'data-value': value,
+            role: 'option',
+            id
+        }
+    ));
+
+    onMount(() => {
+        isFirstRender = false;
+    })
+
+
+    onMount(() => {
+        let unsub
+        unsub = context.item(id, groupContext?.id);
+        return unsub;
+    })
+
+
+    function action(node: HTMLElement) {
+        if (!value && node.textContent) {
+            value = node.textContent.trim().toLowerCase();
+        }
+        context.value(id, value);
+        node.setAttribute(VALUE_ATTR, value);
+
+        const unsubEvents = executeCallbacks(
+            addEventListener(node, 'pointerenter', () => {
+                if (disabled) return;
+                select();
+            }),
+            addEventListener(node, 'click', () => {
+                if (disabled) return;
+                handleItemClick();
+            })
+        );
+
+        return {
+            destroy() {
+                unsubEvents();
+            }
+        };
+    }
+
+    function handleItemClick() {
+        select();
+        onSelect?.(value);
+    }
+
+    function select() {
+        commandState.updateState('value', value, true);
+    }
+
+</script>
+
+{#if $render || isFirstRender}
+    <div {...$attrs} use:action {...restProps}>
+        <!--{@render childrenWithProps?.(-->
+        <!--    {-->
+        <!--        attrs: attrs,-->
+        <!--        action: action-->
+        <!--    }-->
+        <!--)-->
+        <!--}-->
+        {@render children?.()}
+    </div>
+{/if}

package/dist/components/command/components/CommandList.svelte

@@ -1,56 +1,56 @@
-<script lang="ts">
-    import {isHTMLElement} from '../../../internal/index.js';
-    import {getCtx, getState} from '../command.js';
-    import type {ListProps} from '../types.js';
-
-    const {ids} = getCtx();
-    const commandState = getState();
-
-    type $$Props = ListProps;
-
-    let {children, el, ...restProps} = $props()
-
-    function sizerAction(node: HTMLElement) {
-        let animationFrame: number;
-        const listEl = node.closest('[data-cmdk-list]');
-        if (!isHTMLElement(listEl)) {
-            return;
-        }
-
-        const observer = new ResizeObserver(() => {
-            animationFrame = requestAnimationFrame(() => {
-                const height = node.offsetHeight;
-                listEl.style.setProperty('--cmdk-list-height', height.toFixed(1) + 'px');
-            });
-        });
-
-        observer.observe(node);
-        return {
-            destroy() {
-                cancelAnimationFrame(animationFrame);
-                observer.unobserve(node);
-            }
-        };
-    }
-
-    const listAttrs = {
-        'data-cmdk-list': '',
-        role: 'listbox',
-        'aria-label': 'Suggestions',
-        id: ids.list,
-        'aria-labelledby': ids.input
-    };
-
-    const sizerAttrs = {
-        'data-cmdk-list-sizer': ''
-    };
-
-</script>
-
-<div {...listAttrs} bind:this={el} {...restProps}>
-    <div {...sizerAttrs} use:sizerAction>
-        {#key $commandState.search === ''}
-            {@render children()}
-        {/key}
-    </div>
-</div>
+<script lang="ts">
+    import {isHTMLElement} from '../../../internal/index.js';
+    import {getCtx, getState} from '../command.js';
+    import type {ListProps} from '../types.js';
+
+    const {ids} = getCtx();
+    const commandState = getState();
+
+    type $$Props = ListProps;
+
+    let {children, el, ...restProps} = $props()
+
+    function sizerAction(node: HTMLElement) {
+        let animationFrame: number;
+        const listEl = node.closest('[data-cmdk-list]');
+        if (!isHTMLElement(listEl)) {
+            return;
+        }
+
+        const observer = new ResizeObserver(() => {
+            animationFrame = requestAnimationFrame(() => {
+                const height = node.offsetHeight;
+                listEl.style.setProperty('--cmdk-list-height', height.toFixed(1) + 'px');
+            });
+        });
+
+        observer.observe(node);
+        return {
+            destroy() {
+                cancelAnimationFrame(animationFrame);
+                observer.unobserve(node);
+            }
+        };
+    }
+
+    const listAttrs = {
+        'data-cmdk-list': '',
+        role: 'listbox',
+        'aria-label': 'Suggestions',
+        id: ids.list,
+        'aria-labelledby': ids.input
+    };
+
+    const sizerAttrs = {
+        'data-cmdk-list-sizer': ''
+    };
+
+</script>
+
+<div {...listAttrs} bind:this={el} {...restProps}>
+    <div {...sizerAttrs} use:sizerAction>
+        {#key $commandState.search === ''}
+            {@render children()}
+        {/key}
+    </div>
+</div>

package/dist/components/command/components/CommandLoading.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-	import type { LoadingProps } from '../types.js';
-	import type {Snippet} from "svelte";
-
-	type $$Props = LoadingProps;
-
-	let {childrenWithProps, progress, ...restProps} : $$Props & {
-		childrenWithProps: Snippet<[any]>
-	} = $props()
-
-	let attrs = $state<any>()
-
-	$effect(() => {
-		attrs = {
-			'data-cmdk-loading': '',
-			role: 'progressbar',
-			'aria-valuenow': progress,
-			'aria-valuemin': 0,
-			'aria-valuemax': 100,
-			'aria-label': 'Loading...'
-		};
-	})
-</script>
-
-<div {...attrs} {...restProps}>
-	<div aria-hidden>
-		{@render childrenWithProps(attrs)}
-	</div>
+<script lang="ts">
+	import type { LoadingProps } from '../types.js';
+	import type {Snippet} from "svelte";
+
+	type $$Props = LoadingProps;
+
+	let {childrenWithProps, progress, ...restProps} : $$Props & {
+		childrenWithProps: Snippet<[any]>
+	} = $props()
+
+	let attrs = $state<any>()
+
+	$effect(() => {
+		attrs = {
+			'data-cmdk-loading': '',
+			role: 'progressbar',
+			'aria-valuenow': progress,
+			'aria-valuemin': 0,
+			'aria-valuemax': 100,
+			'aria-label': 'Loading...'
+		};
+	})
+</script>
+
+<div {...attrs} {...restProps}>
+	<div aria-hidden>
+		{@render childrenWithProps(attrs)}
+	</div>
 </div>

package/dist/components/command/components/CommandSeparator.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import { derived } from 'svelte/store';
-	import { getState } from '../command.js';
-	import type { SeparatorProps } from '../types.js';
-
-	type $$Props = SeparatorProps;
-
-	let {alwaysRender,...restProps} :$$Props= $props()
-
-	const commandState = getState();
-	const render = derived(commandState, ($state) => !$commandState.search);
-
-	const attrs = {
-		'data-cmdk-separator': '',
-		role: 'separator'
-	};
-</script>
-
-{#if $render || alwaysRender}
-	<div {...attrs} {...restProps}></div>
-{/if}
+<script lang="ts">
+	import { derived } from 'svelte/store';
+	import { getState } from '../command.js';
+	import type { SeparatorProps } from '../types.js';
+
+	type $$Props = SeparatorProps;
+
+	let {alwaysRender,...restProps} :$$Props= $props()
+
+	const commandState = getState();
+	const render = derived(commandState, ($state) => !$commandState.search);
+
+	const attrs = {
+		'data-cmdk-separator': '',
+		role: 'separator'
+	};
+</script>
+
+{#if $render || alwaysRender}
+	<div {...attrs} {...restProps}></div>
+{/if}