@casinogate/ui 1.11.14 → 2.0.0

package/dist/composed/command/index.js

@@ -0,0 +1 @@
+export * as Command from './root/index.js';

package/dist/composed/command/model/use-command-items.svelte.d.ts

@@ -0,0 +1,13 @@
+import { SvelteMap } from 'svelte/reactivity';
+import type { CommandGroup, CommandItem } from '../types.js';
+export declare const COMMAND_UNGROUPED_KEY = "__ungrouped__";
+type Opts<TItem extends CommandItem> = {
+    items: () => TItem[];
+    groups: () => CommandGroup[];
+};
+export declare const useCommandItems: <TItem extends CommandItem>({ items, groups }: Opts<TItem>) => {
+    readonly groupMap: SvelteMap<string, CommandGroup>;
+    readonly groupedItems: [string, TItem[]][];
+    readonly hasResults: boolean;
+};
+export {};

package/dist/composed/command/model/use-command-items.svelte.js

@@ -0,0 +1,45 @@
+import { SvelteMap } from 'svelte/reactivity';
+export const COMMAND_UNGROUPED_KEY = '__ungrouped__';
+const LAST_GROUP_ORDER = Number.MAX_SAFE_INTEGER;
+export const useCommandItems = ({ items, groups }) => {
+    const groupMap = $derived.by(() => {
+        const map = new SvelteMap();
+        for (const group of groups())
+            map.set(group.value, group);
+        return map;
+    });
+    const groupOrderMap = $derived.by(() => {
+        const map = new SvelteMap();
+        groups().forEach((group, index) => map.set(group.value, group.order ?? index));
+        return map;
+    });
+    const groupedItems = $derived.by(() => {
+        const buckets = new SvelteMap();
+        for (const item of items()) {
+            const key = item.group ?? '';
+            const bucket = buckets.get(key);
+            if (bucket)
+                bucket.push(item);
+            else
+                buckets.set(key, [item]);
+        }
+        return [...buckets.entries()].sort(([a], [b]) => {
+            const orderA = groupOrderMap.get(a) ?? LAST_GROUP_ORDER;
+            const orderB = groupOrderMap.get(b) ?? LAST_GROUP_ORDER;
+            if (orderA !== orderB)
+                return orderA - orderB;
+            return a.localeCompare(b);
+        });
+    });
+    return {
+        get groupMap() {
+            return groupMap;
+        },
+        get groupedItems() {
+            return groupedItems;
+        },
+        get hasResults() {
+            return items().length > 0;
+        },
+    };
+};

package/dist/composed/command/root/command.root.svelte

@@ -0,0 +1,97 @@
+<script lang="ts" generics="TItem extends CommandItem">
+  import { Kbd } from '../../../primitives/kbd/index.js';
+  import * as Primitive from '../../../primitives/command/components/index.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { COMMAND_UNGROUPED_KEY, useCommandItems } from '../model/use-command-items.svelte.js';
+  import type { CommandItem, CommandProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    searchValue = $bindable(''),
+    api = $bindable(null),
+    items = [],
+    groups = [],
+    placeholder = 'Search...',
+    item: itemSnippet,
+    empty: emptySnippet = 'No results found',
+    maxContentHeight,
+    listClass,
+    viewportClass,
+    ...restProps
+  }: CommandProps<TItem> = $props();
+
+  const itemsModel = useCommandItems({
+    items: () => items,
+    groups: () => groups,
+  });
+</script>
+
+{#snippet renderItem(item: TItem)}
+  {@const { value, label, icon: Icon, shortcut, ...restItem } = item}
+  {#if itemSnippet}
+    <Primitive.Item {value} {...restItem}>
+      {#snippet child({ props })}
+        {@render itemSnippet?.({ item, props })}
+      {/snippet}
+    </Primitive.Item>
+  {:else}
+    <Primitive.Item {value} {...restItem}>
+      {#if Icon}
+        <Icon width={16} height={16} />
+      {/if}
+      {label ?? value}
+      {#if shortcut && shortcut.length > 0}
+        <Kbd.Group>
+          {#each shortcut as shortcut (shortcut)}
+            <Kbd.Root>{shortcut}</Kbd.Root>
+          {/each}
+        </Kbd.Group>
+      {/if}
+    </Primitive.Item>
+  {/if}
+{/snippet}
+
+<Primitive.Root bind:api bind:ref bind:value {...restProps}>
+  <Primitive.Input bind:value={searchValue} {placeholder} />
+
+  <Primitive.List
+    style={maxContentHeight ? { '--max-content-height': maxContentHeight } : undefined}
+    class={cn(listClass, 'cgui:max-h-(--max-content-height)')}
+  >
+    <Primitive.Viewport class={viewportClass}>
+      {#if typeof emptySnippet === 'string'}
+        <Primitive.Empty>{emptySnippet}</Primitive.Empty>
+      {:else}
+        <Primitive.Empty>
+          {#snippet child({ props })}
+            {@render emptySnippet?.({ props })}
+          {/snippet}
+        </Primitive.Empty>
+      {/if}
+
+      {#each itemsModel.groupedItems as [groupKey, items] (groupKey || COMMAND_UNGROUPED_KEY)}
+        {#if groupKey}
+          {@const group = itemsModel.groupMap.get(groupKey)}
+          <Primitive.Group value={group?.value}>
+            <Primitive.GroupHeading>{group?.label ?? groupKey}</Primitive.GroupHeading>
+
+            <Primitive.GroupItems>
+              {#each items as item (item.value)}
+                {@render renderItem(item)}
+              {/each}
+            </Primitive.GroupItems>
+
+            {#if group?.separator}
+              <Primitive.Separator />
+            {/if}
+          </Primitive.Group>
+        {:else}
+          {#each items as item (item.value)}
+            {@render renderItem(item)}
+          {/each}
+        {/if}
+      {/each}
+    </Primitive.Viewport>
+  </Primitive.List>
+</Primitive.Root>

package/dist/composed/command/root/command.root.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { CommandItem, CommandProps } from '../types.js';
+declare function $$render<TItem extends CommandItem>(): {
+    props: CommandProps<TItem>;
+    exports: {};
+    bindings: "value" | "ref" | "api" | "searchValue";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TItem extends CommandItem> {
+    props(): ReturnType<typeof $$render<TItem>>['props'];
+    events(): ReturnType<typeof $$render<TItem>>['events'];
+    slots(): ReturnType<typeof $$render<TItem>>['slots'];
+    bindings(): "value" | "ref" | "api" | "searchValue";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TItem extends CommandItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TItem>['props']>, ReturnType<__sveltets_Render<TItem>['events']>, ReturnType<__sveltets_Render<TItem>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TItem>['bindings']>;
+    } & ReturnType<__sveltets_Render<TItem>['exports']>;
+    <TItem extends CommandItem>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Command: $$IsomorphicComponent;
+type Command<TItem extends CommandItem> = InstanceType<typeof Command<TItem>>;
+export default Command;

package/dist/composed/command/root/index.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './command.root.svelte';

package/dist/composed/command/root/index.js

@@ -0,0 +1 @@
+export { default as Root } from './command.root.svelte';

package/dist/composed/command/types.d.ts

@@ -0,0 +1,41 @@
+import type { CommandRootApi, CommandRootProps } from '../../primitives/command/types.js';
+import type { Component, Snippet } from 'svelte';
+import type { WithoutChildrenOrChild } from 'svelte-toolbelt';
+export type { CommandRootApi };
+export type CommandItem = {
+    value: string;
+    label?: string;
+    keywords?: string[];
+    disabled?: boolean;
+    icon?: Component<{
+        width?: number;
+        height?: number;
+    }>;
+    shortcut?: string[];
+    class?: string;
+    group?: string;
+    onSelect?: () => void;
+    [key: string]: unknown;
+};
+export type CommandGroup = {
+    value: string;
+    label?: string;
+    order?: number;
+    separator?: boolean;
+};
+export type CommandProps<TItem extends CommandItem = CommandItem> = WithoutChildrenOrChild<CommandRootProps> & {
+    items?: TItem[];
+    groups?: CommandGroup[];
+    placeholder?: string;
+    searchValue?: string;
+    listClass?: string;
+    viewportClass?: string;
+    item?: Snippet<[{
+        item: TItem;
+        props: Record<string, unknown>;
+    }]>;
+    empty?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | string;
+    maxContentHeight?: string;
+};

package/dist/composed/command/types.js

@@ -0,0 +1 @@
+export {};