tera-system-ui 0.1.35 → 0.1.41

package/dist/components/command/command.js

@@ -1,512 +0,0 @@
-import { getContext, setContext, tick } from 'svelte';
-import { commandScore } from '../../internal/command-score';
-import { get, writable } from 'svelte/store';
-import { omit, generateId, toWritableStores, isUndefined, kbd, removeUndefined, effect } from '../../internal';
-import './command.scss';
-const NAME = 'Command';
-const STATE_NAME = 'CommandState';
-const GROUP_NAME = 'CommandGroup';
-export const LIST_SELECTOR = `[data-cmdk-list-sizer]`;
-export const GROUP_SELECTOR = `[data-cmdk-group]`;
-export const GROUP_ITEMS_SELECTOR = `[data-cmdk-group-items]`;
-export const GROUP_HEADING_SELECTOR = `[data-cmdk-group-heading]`;
-export const ITEM_SELECTOR = `[data-cmdk-item]`;
-export const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`;
-export const VALUE_ATTR = `data-value`;
-export const defaultFilter = (value, search) => commandScore(value, search);
-export function getCtx() {
-    return getContext(NAME);
-}
-export function getState() {
-    return getContext(STATE_NAME);
-}
-export function createGroup(alwaysRender) {
-    const id = generateId();
-    setContext(GROUP_NAME, {
-        id,
-        alwaysRender: isUndefined(alwaysRender) ? false : alwaysRender
-    });
-    return { id };
-}
-export function getGroup() {
-    const context = getContext(GROUP_NAME);
-    if (!context)
-        return undefined;
-    return context;
-}
-export function createState(initialValues) {
-    const defaultState = {
-        search: '',
-        value: '',
-        filtered: {
-            count: 0,
-            items: new Map(),
-            groups: new Set()
-        }
-    };
-    const state = writable(initialValues ? { ...defaultState, ...removeUndefined(initialValues) } : defaultState);
-    return state;
-}
-const defaults = {
-    label: 'Command menu',
-    shouldFilter: true,
-    loop: false,
-    onValueChange: undefined,
-    value: undefined,
-    filter: defaultFilter,
-    ids: {
-        root: generateId(),
-        list: generateId(),
-        label: generateId(),
-        input: generateId()
-    }
-};
-export function createCommand(props) {
-    const ids = {
-        root: generateId(),
-        list: generateId(),
-        label: generateId(),
-        input: generateId(),
-        ...props.ids
-    };
-    const withDefaults = {
-        ...defaults,
-        ...removeUndefined(props)
-    };
-    const state = props.state ??
-        createState({
-            value: withDefaults.value
-        });
-    const allItems = writable(new Set()); // [...itemIds]
-    const allGroups = writable(new Map()); // groupId → [...itemIds]
-    const allIds = writable(new Map()); // id → value
-    const commandEl = writable(null);
-    const options = toWritableStores(omit(withDefaults, 'value', 'ids'));
-    let $allItems = get(allItems);
-    let $allGroups = get(allGroups);
-    let $allIds = get(allIds);
-    let shouldFilter = get(options.shouldFilter);
-    let loop = get(options.loop);
-    let label = get(options.label);
-    let filter = get(options.filter);
-    effect(options.shouldFilter, ($shouldFilter) => {
-        shouldFilter = $shouldFilter;
-    });
-    effect(options.loop, ($loop) => {
-        loop = $loop;
-    });
-    effect(options.filter, ($filter) => {
-        filter = $filter;
-    });
-    effect(options.label, ($label) => {
-        label = $label;
-    });
-    effect(allItems, (v) => {
-        $allItems = v;
-    });
-    effect(allGroups, (v) => {
-        $allGroups = v;
-    });
-    effect(allIds, (v) => {
-        $allIds = v;
-    });
-    const context = {
-        value: (id, value) => {
-            if (value !== $allIds.get(id)) {
-                allIds.update(($allIds) => {
-                    $allIds.set(id, value);
-                    return $allIds;
-                });
-                state.update(($state) => {
-                    $state.filtered.items.set(id, score(value, $state.search));
-                    return $state;
-                });
-            }
-        },
-        // Track item lifecycle (add/remove)
-        item: (id, groupId) => {
-            allItems.update(($allItems) => $allItems.add(id));
-            // Track this item within the group
-            if (groupId) {
-                allGroups.update(($allGroups) => {
-                    if (!$allGroups.has(groupId)) {
-                        $allGroups.set(groupId, new Set([id]));
-                    }
-                    else {
-                        $allGroups.get(groupId)?.add(id);
-                    }
-                    return $allGroups;
-                });
-            }
-            state.update(($state) => {
-                const filteredState = filterItems($state, shouldFilter);
-                if (!filteredState.value) {
-                    const value = selectFirstItem();
-                    filteredState.value = value ?? '';
-                }
-                return filteredState;
-            });
-            return () => {
-                allIds.update(($allIds) => {
-                    $allIds.delete(id);
-                    return $allIds;
-                });
-                allItems.update(($allItems) => {
-                    $allItems.delete(id);
-                    return $allItems;
-                });
-                state.update(($state) => {
-                    $state.filtered.items.delete(id);
-                    const selectedItem = getSelectedItem();
-                    const filteredState = filterItems($state);
-                    if (selectedItem?.getAttribute('id') === id) {
-                        filteredState.value = selectFirstItem() ?? '';
-                    }
-                    return $state;
-                });
-            };
-        },
-        group: (id) => {
-            allGroups.update(($allGroups) => {
-                if (!$allGroups.has(id)) {
-                    $allGroups.set(id, new Set());
-                }
-                return $allGroups;
-            });
-            return () => {
-                allIds.update(($allIds) => {
-                    $allIds.delete(id);
-                    return $allIds;
-                });
-                allGroups.update(($allGroups) => {
-                    $allGroups.delete(id);
-                    return $allGroups;
-                });
-            };
-        },
-        filter: () => {
-            return shouldFilter;
-        },
-        label: label || props['aria-label'] || '',
-        commandEl,
-        ids,
-        updateState
-    };
-    function updateState(key, value, preventScroll) {
-        state.update((curr) => {
-            if (Object.is(curr[key], value))
-                return curr;
-            curr[key] = value;
-            if (key === 'search') {
-                const filteredState = filterItems(curr, shouldFilter);
-                curr = filteredState;
-                const sortedState = sort(curr, shouldFilter);
-                curr = sortedState;
-                tick().then(() => state.update((curr) => {
-                    curr.value = selectFirstItem() ?? '';
-                    props.onValueChange?.(curr.value);
-                    return curr;
-                }));
-            }
-            else if (key === 'value') {
-                props.onValueChange?.(curr.value);
-                if (!preventScroll) {
-                    tick().then(() => scrollSelectedIntoView());
-                }
-            }
-            return curr;
-        });
-    }
-    function filterItems(state, shouldFilterVal) {
-        const $shouldFilter = shouldFilterVal ?? shouldFilter;
-        if (!state.search || !$shouldFilter) {
-            state.filtered.count = $allItems.size;
-            return state;
-        }
-        state.filtered.groups = new Set();
-        let itemCount = 0;
-        // check which items should be included
-        for (const id of $allItems) {
-            const value = $allIds.get(id);
-            const rank = score(value, state.search);
-            state.filtered.items.set(id, rank);
-            if (rank > 0) {
-                itemCount++;
-            }
-        }
-        // Check which groups have at least 1 item shown
-        for (const [groupId, group] of $allGroups) {
-            for (const itemId of group) {
-                const rank = state.filtered.items.get(itemId);
-                if (rank && rank > 0) {
-                    state.filtered.groups.add(groupId);
-                }
-            }
-        }
-        state.filtered.count = itemCount;
-        return state;
-    }
-    function sort(state, shouldFilterVal) {
-        const $shouldFilter = shouldFilterVal ?? shouldFilter;
-        if (!state.search || !$shouldFilter) {
-            return state;
-        }
-        console.log(state);
-        const scores = state.filtered.items;
-        // sort groups
-        const groups = [];
-        for (const value of state.filtered.groups) {
-            const items = $allGroups.get(value);
-            if (!items)
-                continue;
-            // get max score of the group's items
-            let max = 0;
-            for (const item of items) {
-                const score = scores.get(item);
-                if (isUndefined(score))
-                    continue;
-                max = Math.max(score, max);
-            }
-            groups.push([value, max]);
-        }
-        // Sort items within groups to bottom
-        // sort items outside of groups
-        // sort groups to bottom (pushed all non-grouped items to the top)
-        const rootEl = document.getElementById(ids.root);
-        if (!rootEl)
-            return state;
-        const list = rootEl.querySelector(LIST_SELECTOR);
-        const validItems = getValidItems(rootEl).sort((a, b) => {
-            const valueA = a.getAttribute('id') ?? '';
-            const valueB = b.getAttribute('id') ?? '';
-            return -(scores.get(valueA) ?? 0) + (scores.get(valueB) ?? 0);
-        });
-        // console.log('validItems', validItems)
-        // console.log(validItems)
-        // console.log(scores)
-        // console.log(validItems.map(i => {
-        // 	return scores.get(i.getAttribute('id') ?? '');
-        // }))
-        for (const item of validItems) {
-            const group = item.closest(GROUP_ITEMS_SELECTOR);
-            const closest = item.closest(`${GROUP_ITEMS_SELECTOR} > *`);
-            // console.log(group)
-            // console.log(item.textContent)
-            if (group) {
-                if (item.parentElement === group) {
-                    group.appendChild(item);
-                    // console.log('group.appendChild(item)')
-                }
-                else {
-                    if (!closest)
-                        continue;
-                    group.appendChild(closest);
-                    // console.log('group.appendChild(closest)')
-                }
-            }
-            else {
-                if (item.parentElement === list) {
-                    list?.appendChild(item);
-                }
-                else {
-                    if (!closest)
-                        continue;
-                    list?.appendChild(closest);
-                }
-            }
-        }
-        groups.sort((a, b) => b[1] - a[1]);
-        for (const group of groups) {
-            let selector = `${GROUP_SELECTOR}[${VALUE_ATTR}="${group[0]}"]`;
-            const el = rootEl.querySelector(selector);
-            el?.parentElement?.appendChild(el);
-            // console.log('el', el, selector, group);
-        }
-        return state;
-    }
-    function selectFirstItem() {
-        const item = getValidItems().find((item) => !item.ariaDisabled);
-        if (!item)
-            return;
-        const value = item.getAttribute(VALUE_ATTR);
-        if (!value)
-            return;
-        return value;
-    }
-    function score(value, search) {
-        const lowerCaseAndTrimmedValue = value?.toLowerCase().trim();
-        const filterFn = filter;
-        if (!filterFn) {
-            return lowerCaseAndTrimmedValue ? defaultFilter(lowerCaseAndTrimmedValue, search) : 0;
-        }
-        return lowerCaseAndTrimmedValue ? filterFn(lowerCaseAndTrimmedValue, search) : 0;
-    }
-    function scrollSelectedIntoView() {
-        const item = getSelectedItem();
-        if (!item) {
-            return;
-        }
-        if (item.parentElement?.firstChild === item) {
-            tick().then(() => item.closest(GROUP_SELECTOR)?.querySelector(GROUP_HEADING_SELECTOR)?.scrollIntoView({
-                block: 'nearest'
-            }));
-        }
-        tick().then(() => item.scrollIntoView({ block: 'nearest' }));
-    }
-    function getValidItems(rootElement) {
-        const rootEl = rootElement ?? document.getElementById(ids.root);
-        if (!rootEl)
-            return [];
-        return Array.from(rootEl.querySelectorAll(VALID_ITEM_SELECTOR)).filter((el) => (el ? true : false));
-    }
-    function getSelectedItem(rootElement) {
-        const rootEl = rootElement ?? document.getElementById(ids.root);
-        if (!rootEl)
-            return;
-        const selectedEl = rootEl.querySelector(`${VALID_ITEM_SELECTOR}[aria-selected="true"]`);
-        if (!selectedEl)
-            return;
-        return selectedEl;
-    }
-    function updateSelectedToIndex(index) {
-        const rootEl = document.getElementById(ids.root);
-        if (!rootEl)
-            return;
-        const items = getValidItems(rootEl);
-        const item = items[index];
-        if (!item)
-            return;
-        updateState('value', item.getAttribute(VALUE_ATTR) ?? '');
-    }
-    function updateSelectedByChange(change) {
-        const selected = getSelectedItem();
-        const items = getValidItems();
-        const index = items.findIndex((item) => item === selected);
-        // get item at this index
-        let newSelected = items[index + change];
-        if (loop) {
-            if (index + change < 0) {
-                newSelected = items[items.length - 1];
-            }
-            else if (index + change === items.length) {
-                newSelected = items[0];
-            }
-            else {
-                newSelected = items[index + change];
-            }
-        }
-        if (newSelected) {
-            updateState('value', newSelected.getAttribute(VALUE_ATTR) ?? '');
-        }
-    }
-    function updateSelectedToGroup(change) {
-        const selected = getSelectedItem();
-        let group = selected?.closest(GROUP_SELECTOR);
-        let item = undefined;
-        while (group && !item) {
-            group =
-                change > 0
-                    ? findNextSibling(group, GROUP_SELECTOR)
-                    : findPreviousSibling(group, GROUP_SELECTOR);
-            item = group?.querySelector(VALID_ITEM_SELECTOR);
-        }
-        if (item) {
-            updateState('value', item.getAttribute(VALUE_ATTR) ?? '');
-        }
-        else {
-            updateSelectedByChange(change);
-        }
-    }
-    function last() {
-        return updateSelectedToIndex(getValidItems().length - 1);
-    }
-    function next(e) {
-        e.preventDefault();
-        if (e.metaKey) {
-            last();
-        }
-        else if (e.altKey) {
-            updateSelectedToGroup(1);
-        }
-        else {
-            updateSelectedByChange(1);
-        }
-    }
-    function prev(e) {
-        e.preventDefault();
-        if (e.metaKey) {
-            updateSelectedToIndex(0);
-        }
-        else if (e.altKey) {
-            updateSelectedToGroup(-1);
-        }
-        else {
-            updateSelectedByChange(-1);
-        }
-    }
-    function requestCloseCommand(e) {
-        e.preventDefault();
-        props.onRequestCloseCommand?.();
-    }
-    function handleRootKeydown(e) {
-        switch (e.key) {
-            case kbd.ARROW_DOWN:
-                next(e);
-                break;
-            case kbd.ARROW_UP:
-                prev(e);
-                break;
-            case kbd.HOME:
-                // first item
-                e.preventDefault();
-                updateSelectedToIndex(0);
-                break;
-            case kbd.END:
-                // last item
-                e.preventDefault();
-                last();
-                break;
-            case kbd.ESCAPE:
-                // last item
-                requestCloseCommand(e);
-                break;
-            case kbd.ENTER: {
-                e.preventDefault();
-                const item = getSelectedItem();
-                if (item) {
-                    item?.click();
-                }
-            }
-        }
-    }
-    setContext(NAME, context);
-    const stateStore = {
-        subscribe: state.subscribe,
-        update: state.update,
-        set: state.set,
-        updateState
-    };
-    setContext(STATE_NAME, stateStore);
-    return {
-        state: stateStore,
-        handleRootKeydown,
-        commandEl,
-        ids
-    };
-}
-function findNextSibling(el, selector) {
-    let sibling = el.nextElementSibling;
-    while (sibling) {
-        if (sibling.matches(selector))
-            return sibling;
-        sibling = sibling.nextElementSibling;
-    }
-}
-function findPreviousSibling(el, selector) {
-    let sibling = el.previousElementSibling;
-    while (sibling) {
-        if (sibling.matches(selector))
-            return sibling;
-        sibling = sibling.previousElementSibling;
-    }
-}

package/dist/components/command/components/Command.svelte

@@ -1,120 +0,0 @@
-<script lang="ts">
-    import {addEventListener, executeCallbacks, srOnlyStyles, styleToString} from '../../../internal';
-
-    import {createCommand} from '../command.js';
-    import type {CommandProps} from '../types.js';
-
-    let {
-        children,
-        childrenWithProps,
-        label = undefined,
-        shouldFilter = true,
-        filter = undefined,
-        value = undefined,
-        onValueChange = undefined,
-        loop = undefined,
-        onKeydown = undefined,
-        state: commandState = undefined,
-        ids = undefined,
-        asChild = false,
-        onRequestCloseCommand,
-        ...restProps
-    }: CommandProps = $props();
-
-
-    const {
-        commandEl,
-        handleRootKeydown,
-        ids: commandIds,
-        state: stateStore
-    } = createCommand({
-        label,
-        shouldFilter,
-        filter,
-        value,
-        onValueChange: (next) => {
-            if (next !== value) {
-                value = next;
-                onValueChange?.(next);
-            }
-        },
-        loop,
-        state: commandState,
-        ids,
-        onRequestCloseCommand
-    });
-
-    let slotProps = $state()
-
-    function syncValueAndState(value: string | undefined) {
-        if (value && value !== $stateStore.value) {
-            $stateStore.value = value;
-        }
-    }
-
-
-
-
-    function rootAction(node: HTMLDivElement) {
-        commandEl.set(node);
-
-        const unsubEvents = executeCallbacks(addEventListener(node, 'keydown', handleKeydown));
-
-        return {
-            destroy: unsubEvents
-        };
-    }
-
-    const rootAttrs = {
-        role: 'application',
-        id: commandIds.root,
-        'data-cmdk-root': ''
-    };
-
-    const labelAttrs = {
-        'data-cmdk-label': '',
-        for: commandIds.input,
-        id: commandIds.label,
-        style: styleToString(srOnlyStyles)
-    };
-
-    function handleKeydown(e: KeyboardEvent) {
-        onKeydown?.(e);
-        if (e.defaultPrevented) return;
-        handleRootKeydown(e);
-    }
-
-    const root = {
-        action: rootAction,
-        attrs: rootAttrs
-    };
-
-
-
-
-    $effect(() => {
-        syncValueAndState(value);
-
-        slotProps = {
-            root,
-            label: {attrs: labelAttrs},
-            stateStore,
-            state: $stateStore
-        };
-    })
-</script>
-
-{#if asChild}
-    {@render childrenWithProps?.(slotProps)}
-{:else}
-    <div use:rootAction {...rootAttrs} {...restProps}>
-        <!-- svelte-ignore a11y_label_has_associated_control applied in attrs -->
-        <label {...labelAttrs}>
-            {label ?? ''}
-        </label>
-        <!--{@render childrenWithProps?.(slotProps)}-->
-        {@render children?.()}
-<!--        <slot {...slotProps}/>-->
-    </div>
-{/if}
-

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

@@ -1,4 +0,0 @@
-import type { CommandProps } from '../types.js';
-declare const Command: import("svelte").Component<CommandProps, {}, "">;
-type Command = ReturnType<typeof Command>;
-export default Command;

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

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

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