tera-system-ui 0.0.2 → 0.0.5

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

@@ -0,0 +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}

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

@@ -0,0 +1,3 @@
+import type { EmptyProps } from '../types.js';
+declare const CommandEmpty: import("svelte").Component<EmptyProps, {}, "">;
+export default CommandEmpty;

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

@@ -0,0 +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>

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

@@ -0,0 +1,3 @@
+import type { GroupProps } from '../types.js';
+declare const CommandGroup: import("svelte").Component<GroupProps, {}, "">;
+export default CommandGroup;

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

@@ -0,0 +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"/>
+</div>

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

@@ -0,0 +1,7 @@
+declare const CommandInput: import("svelte").Component<{
+    el?: HTMLInputElement;
+    asChild?: boolean;
+} & import("svelte/elements.js").HTMLInputAttributes & {
+    el?: HTMLElement;
+}, {}, "value">;
+export default CommandInput;

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

@@ -0,0 +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}

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

@@ -0,0 +1,3 @@
+import type { ItemProps } from '../types.js';
+declare const CommandItem: import("svelte").Component<ItemProps, {}, "">;
+export default CommandItem;

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

@@ -0,0 +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>

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

@@ -0,0 +1,5 @@
+declare const CommandList: import("svelte").Component<{
+    children: unknown;
+    el: unknown;
+} & Record<string, unknown>, {}, "">;
+export default CommandList;

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

@@ -0,0 +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>
+</div>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+declare const CommandLoading: import("svelte").Component<{
+    progress?: number;
+    asChild?: boolean;
+} & import("../../../internal/types.js").HTMLDivAttributes & {
+    childrenWithProps: Snippet<[any]>;
+}, {}, "">;
+export default CommandLoading;

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

@@ -0,0 +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}

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

@@ -0,0 +1,3 @@
+import type { SeparatorProps } from '../types.js';
+declare const CommandSeparator: import("svelte").Component<SeparatorProps, {}, "">;
+export default CommandSeparator;

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

@@ -0,0 +1,12 @@
+export { default as Command } from './components/Command.svelte';
+import type { LoadingProps, CommandProps, EmptyProps, ItemProps, GroupProps, ListProps, InputProps, SeparatorProps } from './types.js';
+import Root from './components/Command.svelte';
+import Empty from './components/CommandEmpty.svelte';
+import Group from './components/CommandGroup.svelte';
+import Input from './components/CommandInput.svelte';
+import Item from './components/CommandItem.svelte';
+import List from './components/CommandList.svelte';
+import Loading from './components/CommandLoading.svelte';
+import Separator from './components/CommandSeparator.svelte';
+export { Root, Empty, Group, Input, Item, List, Loading, Separator, Root as CommandRoot, Empty as CommandEmpty, Group as CommandGroup, Input as CommandInput, Item as CommandItem, List as CommandList, Loading as CommandLoading, Separator as CommandSeparator };
+export type { LoadingProps, CommandProps, EmptyProps, ItemProps, GroupProps, ListProps, InputProps, SeparatorProps };

package/dist/components/command/index.js

@@ -0,0 +1,19 @@
+export { default as Command } from './components/Command.svelte';
+import Root from './components/Command.svelte';
+// import Dialog from './components/CommandDialog.svelte';
+import Empty from './components/CommandEmpty.svelte';
+import Group from './components/CommandGroup.svelte';
+import Input from './components/CommandInput.svelte';
+import Item from './components/CommandItem.svelte';
+import List from './components/CommandList.svelte';
+import Loading from './components/CommandLoading.svelte';
+import Separator from './components/CommandSeparator.svelte';
+export { 
+// Components
+Root, 
+// Dialog,
+Empty, Group, Input, Item, List, Loading, Separator, 
+//
+Root as CommandRoot, 
+// Dialog as CommandDialog,
+Empty as CommandEmpty, Group as CommandGroup, Input as CommandInput, Item as CommandItem, List as CommandList, Loading as CommandLoading, Separator as CommandSeparator };