tera-system-ui 0.0.19 → 0.0.20

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.astro

@@ -0,0 +1,63 @@
+---
+import {type DialogPropsAstro, styles} from "./Dialog";
+import IconX from "../icons/IconX.svelte";
+import {Button} from "../button";
+import './dialog.scss'
+
+const {
+    closeOnClickOutside = true,
+    closeButton = true,
+    size = 'sm',
+    class: className,
+    position = 'center',
+    padding,
+    focusTriggerAfterClose,
+    ...props
+}: DialogPropsAstro = Astro.props
+
+const {base, dialog: dialogStyle, dialogContainer, header: headerStyle, body, footer: footerStyle} = styles({
+    size,
+    padding
+})
+
+const hasHeaderSlot = !!Astro.slots["header"];
+const hasFooterSlot = !!Astro.slots["footer"];
+---
+
+<dialog class={dialogStyle() + ` ${className}`}
+        data-position={position}
+        onmousedown={closeOnClickOutside ? 'event.target==this && this.close()' : ''}
+        size={size}
+        {...props}
+>
+    <button class=""></button>
+
+    {closeButton &&
+            <form method="dialog">
+                <Button class="absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90 z-10"
+                        icon={true}
+                        client:idle
+                        variant="ghost"
+                        size="sm">
+                    <IconX/>
+                </Button>
+            </form>
+    }
+
+    <div class={"dialog-box " + dialogContainer()}>
+        {hasHeaderSlot &&
+                <header class={headerStyle()}>
+                    <slot name="header"/>
+                </header>
+        }
+
+        <main class={body()}>
+            <slot/>
+        </main>
+        {hasFooterSlot &&
+                <footer class={footerStyle()}>
+                    <slot name="footer"/>
+                </footer>
+        }
+    </div>
+</dialog>

package/dist/components/dialog/Dialog.d.ts

@@ -190,18 +190,22 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     };
 }>, unknown, unknown, undefined>>;
 type DialogVariants = VariantProps<typeof styles>;
-export interface DialogProps extends DialogVariants {
-    children?: any;
+type DialogPropsCommon = {
     class?: string;
     id?: string;
-    open?: boolean;
     closeOnClickOutside?: boolean;
     closeButton?: boolean;
+    position?: 'top' | 'center';
+    focusTriggerAfterClose?: boolean;
+    padding?: 'none' | undefined;
+};
+export type DialogProps = DialogVariants & DialogPropsCommon & {
+    children?: any;
     header?: any;
     footer?: any;
-    position?: 'top' | 'center';
+    open?: boolean;
     staticRender?: boolean;
     triggerRef?: HTMLElement;
-    focusTriggerAfterClose?: boolean;
-}
+};
+export type DialogPropsAstro = DialogVariants & DialogPropsCommon & {};
 export {};