tera-system-ui 0.0.16 → 0.0.18

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}

package/dist/components/dialog/Dialog.svelte

@@ -1,108 +1,108 @@
-<script lang="ts">
-    import {type DialogProps, styles} from "./Dialog";
-    import IconX from "../icons/IconX.svelte";
-    import {Button} from "../button";
-    import './dialog.scss'
-    import {sleep} from "../../internal/helpers/sleep";
-
-    let {
-        children, open = $bindable(),
-        closeOnClickOutside = true,
-        closeButton = true,
-        size = 'sm',
-        header,
-        footer,
-        class: className,
-        position = 'center',
-        padding,
-        staticRender = false,
-        triggerRef,
-        focusTriggerAfterClose,
-        ...props
-    }: DialogProps = $props();
-
-    let dialog;
-
-    let hasOpened = $state(false);
-
-    // Watch for prop changes to open/close the dialog
-    $effect(() => {
-        if (open) {
-            stillAnimating = open
-            dialog?.showModal();
-
-            if (!hasOpened)
-                hasOpened = true
-        } else {
-            dialog?.close()
-            sleep(200).then(() => {
-                stillAnimating = open
-                console.log('stillAnimating', stillAnimating)
-            })
-
-            if (focusTriggerAfterClose && hasOpened && triggerRef) {
-                triggerRef.focus()
-            }
-        }
-    })
-
-    // Close dialog on clicking outside (optional)
-    function handleClickOutside(e) {
-        if (closeOnClickOutside && e.target === dialog) {
-            dialog?.close();
-        }
-    }
-
-    // Emit close event when dialog is closed
-    function handleClose() {
-        open = false;
-    }
-
-    // onmousedown={closeOnClickOutside ? 'event.target==this && this.close()' : ''}
-
-    const {base, dialog: dialogStyle, dialogContainer, header: headerStyle, body, footer: footerStyle} = styles({
-        size,
-        padding
-    })
-
-    let stillAnimating = $state()
-
-</script>
-
-{#if staticRender || (!staticRender && (open || stillAnimating))}
-    <dialog class={dialogStyle() + ` ${className}`}
-            data-position={position}
-            bind:this={dialog}
-            onclose={handleClose}
-            onmousedown={handleClickOutside}
-            size={size}
-    >
-        <button class=""></button>
-        {#if (closeButton)}
-            <form method="dialog">
-                <Button class="absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90 z-10" icon
-                        variant="ghost"
-                        size="sm">
-                    <IconX/>
-                </Button>
-            </form>
-        {/if}
-
-        <div class={"dialog-box " + dialogContainer()}>
-            {#if header}
-                <header class={headerStyle()}>
-                    {@render header?.()}
-                </header>
-            {/if}
-
-            <main class={body()}>
-                {@render children?.()}
-            </main>
-            {#if footer}
-                <footer class={footerStyle()}>
-                    {@render footer?.()}
-                </footer>
-            {/if}
-        </div>
-    </dialog>
+<script lang="ts">
+    import {type DialogProps, styles} from "./Dialog";
+    import IconX from "../icons/IconX.svelte";
+    import {Button} from "../button";
+    import './dialog.scss'
+    import {sleep} from "../../internal/helpers/sleep";
+
+    let {
+        children, open = $bindable(),
+        closeOnClickOutside = true,
+        closeButton = true,
+        size = 'sm',
+        header,
+        footer,
+        class: className,
+        position = 'center',
+        padding,
+        staticRender = false,
+        triggerRef,
+        focusTriggerAfterClose,
+        ...props
+    }: DialogProps = $props();
+
+    let dialog;
+
+    let hasOpened = $state(false);
+
+    // Watch for prop changes to open/close the dialog
+    $effect(() => {
+        if (open) {
+            stillAnimating = open
+            dialog?.showModal();
+
+            if (!hasOpened)
+                hasOpened = true
+        } else {
+            dialog?.close()
+            sleep(200).then(() => {
+                stillAnimating = open
+                console.log('stillAnimating', stillAnimating)
+            })
+
+            if (focusTriggerAfterClose && hasOpened && triggerRef) {
+                triggerRef.focus()
+            }
+        }
+    })
+
+    // Close dialog on clicking outside (optional)
+    function handleClickOutside(e) {
+        if (closeOnClickOutside && e.target === dialog) {
+            dialog?.close();
+        }
+    }
+
+    // Emit close event when dialog is closed
+    function handleClose() {
+        open = false;
+    }
+
+    // onmousedown={closeOnClickOutside ? 'event.target==this && this.close()' : ''}
+
+    const {base, dialog: dialogStyle, dialogContainer, header: headerStyle, body, footer: footerStyle} = styles({
+        size,
+        padding
+    })
+
+    let stillAnimating = $state()
+
+</script>
+
+{#if staticRender || (!staticRender && (open || stillAnimating))}
+    <dialog class={dialogStyle() + ` ${className}`}
+            data-position={position}
+            bind:this={dialog}
+            onclose={handleClose}
+            onmousedown={handleClickOutside}
+            size={size}
+    >
+        <button class=""></button>
+        {#if (closeButton)}
+            <form method="dialog">
+                <Button class="absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90 z-10" icon
+                        variant="ghost"
+                        size="sm">
+                    <IconX/>
+                </Button>
+            </form>
+        {/if}
+
+        <div class={"dialog-box " + dialogContainer()}>
+            {#if header}
+                <header class={headerStyle()}>
+                    {@render header?.()}
+                </header>
+            {/if}
+
+            <main class={body()}>
+                {@render children?.()}
+            </main>
+            {#if footer}
+                <footer class={footerStyle()}>
+                    {@render footer?.()}
+                </footer>
+            {/if}
+        </div>
+    </dialog>
 {/if}