@casinogate/ui 1.9.6 → 1.9.7

package/dist/assets/css/root.css

@@ -262,6 +262,9 @@
   .cgui\:mt-4 {
     margin-top: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:mb-1 {
+    margin-bottom: calc(var(--cgui-spacing) * 1);
+  }
   .cgui\:mb-2 {
     margin-bottom: calc(var(--cgui-spacing) * 2);
   }

package/dist/components/combobox/combobox.async.svelte

@@ -0,0 +1,403 @@
+<script lang="ts">
+  import type { CommandCollection, CommandItem } from '../command/index.js';
+  import type { ComboboxAsyncProps } from './types.js';
+
+  import { boolAttr } from '../../internal/utils/attrs.js';
+  import { cn } from '../../internal/utils/common.js';
+  import { watch } from 'runed';
+  import type { AnyFn } from 'svelte-toolbelt';
+  import { onMountEffect } from 'svelte-toolbelt';
+  import { cubicInOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import { CommandApi, CommandPrimitive } from '../command/index.js';
+  import { Icon as IconComponent } from '../icons/index.js';
+  import { Kbd } from '../kbd/index.js';
+  import { PopoverPrimitive } from '../popover/index.js';
+  import { Spinner } from '../spinner/index.js';
+  import { comboboxTriggerVariants } from './styles.js';
+
+  let {
+    open = $bindable(false),
+    value = $bindable(''),
+    searchValue = $bindable(''),
+    groups = [],
+    empty,
+    placeholder = 'Select an option',
+    searchPlaceholder,
+    trigger: triggerSnippet,
+    item: itemSnippet,
+    portalDisabled = false,
+    allowDeselect = true,
+    triggerClass,
+    size = 'default',
+    variant = 'default',
+    rounded = 'default',
+    fullWidth = true,
+    closeOnSelect = true,
+
+    loading: loadingSnippet,
+    pageSize = 10,
+    callback,
+    initialItems = [],
+    loadImmediate = true,
+    searchDebounce = 300,
+    dependsOn,
+    clearOnDependencyChange = true,
+
+    ...restProps
+  }: ComboboxAsyncProps = $props();
+
+  let items = $state<CommandItem[]>(initialItems);
+  let isLoading = $state(false);
+  let hasMore = $state(true);
+  let currentPage = $state(1);
+  let error = $state<string | null>(null);
+  let viewportRef = $state<HTMLElement | null>(null);
+  let searchTimeout = $state<ReturnType<typeof setTimeout> | null>(null);
+  let lastSearch = $state('');
+
+  const createCollection = (itemList: CommandItem[]): CommandCollection => {
+    const groupOrderMap = new Map<string, number>();
+    groups.forEach((g, index) => {
+      groupOrderMap.set(g.value, g.order ?? index);
+    });
+
+    return CommandApi.createCollection({
+      items: itemList,
+      groups: groups,
+      groupSort: (a, b) => {
+        const orderA = groupOrderMap.get(a) ?? Infinity;
+        const orderB = groupOrderMap.get(b) ?? Infinity;
+        if (orderA !== orderB) return orderA - orderB;
+        return a.localeCompare(b);
+      },
+    });
+  };
+
+  const collection = $derived(createCollection(items));
+  const groupMap = $derived(new Map(collection.groups.map((g) => [g.value, g])));
+  const groupedItems = $derived(collection.group());
+
+  const displayValue = $derived.by(() => {
+    const val = items.find((item) => item.value === value)?.label ?? value;
+    return val.trim() !== '' ? val : placeholder;
+  });
+
+  const isPlaceholder = $derived.by(() => {
+    return value.trim() === '';
+  });
+
+  const hasResults = $derived(collection.size > 0);
+
+  const fetchData = async (page: number, search: string, append = false) => {
+    if (isLoading) return;
+
+    isLoading = true;
+    error = null;
+
+    try {
+      const result = await callback({ page, pageSize, search });
+
+      if (append) {
+        items = [...items, ...result.items];
+      } else {
+        items = result.items;
+      }
+
+      currentPage = page;
+      hasMore = result.hasMore;
+      lastSearch = search;
+
+      // Check if viewport needs more items after render
+      requestAnimationFrame(() => {
+        checkNeedMoreItems();
+      });
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to fetch data';
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  // Auto-fill viewport if content doesn't overflow
+  const checkNeedMoreItems = () => {
+    if (!viewportRef || isLoading || !hasMore) return;
+
+    const { scrollHeight, clientHeight } = viewportRef;
+
+    // If content doesn't fill viewport, load more
+    if (scrollHeight <= clientHeight) {
+      loadMore();
+    }
+  };
+
+  // Debounced search handler
+  const debouncedSearch = (search: string) => {
+    if (searchTimeout) {
+      clearTimeout(searchTimeout);
+    }
+
+    searchTimeout = setTimeout(() => {
+      currentPage = 1;
+      fetchData(1, search, false);
+    }, searchDebounce);
+  };
+
+  // Watch for search value changes
+  watch(
+    () => searchValue,
+    () => {
+      if (searchValue !== lastSearch) {
+        debouncedSearch(searchValue);
+      }
+    }
+  );
+
+  // Fetch on first open or check viewport fill
+  watch(
+    () => open,
+    () => {
+      if (!open) return;
+
+      // If no items yet and not loading, fetch first page
+      if (items.length === 0 && !isLoading && !loadImmediate) {
+        fetchData(1, searchValue);
+        return;
+      }
+
+      // If already have items, check if viewport needs more after it renders
+      requestAnimationFrame(() => {
+        checkNeedMoreItems();
+      });
+    }
+  );
+
+  // Fetch immediate data on mount
+  onMountEffect(() => {
+    if (loadImmediate) fetchData(1, searchValue);
+  });
+
+  // Reset page on unmount
+  $effect(() => {
+    return () => {
+      currentPage = 1;
+      if (searchTimeout) {
+        clearTimeout(searchTimeout);
+      }
+    };
+  });
+
+  // Watch for dependency changes and reset
+  let previousDependency = $state<unknown>(dependsOn?.());
+  watch(
+    () => dependsOn?.(),
+    (newValue) => {
+      if (previousDependency === undefined && newValue === undefined) return;
+      if (previousDependency === newValue) return;
+
+      previousDependency = newValue;
+
+      // Reset state
+      items = [];
+      currentPage = 1;
+      hasMore = true;
+      error = null;
+      searchValue = '';
+      lastSearch = '';
+
+      // Clear selected value if enabled
+      if (clearOnDependencyChange) {
+        value = '';
+      }
+
+      // Reload data
+      fetchData(1, '');
+    }
+  );
+
+  const loadMore = () => {
+    if (!isLoading && hasMore) {
+      fetchData(currentPage + 1, searchValue, true);
+    }
+  };
+
+  const handleScroll = (event: Event) => {
+    const viewport = event.target as HTMLElement;
+    const scrollBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+
+    if (scrollBottom < 100 && hasMore && !isLoading) {
+      loadMore();
+    }
+  };
+
+  const retry = () => {
+    error = null;
+    fetchData(currentPage, searchValue);
+  };
+
+  const scrollToTop = () => {
+    if (!viewportRef) return;
+
+    viewportRef.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  const onSelectItem = (item: Omit<CommandItem, 'onSelect'>, onSelect?: AnyFn) => () => {
+    onSelect?.();
+
+    if (item.value === value) {
+      value = allowDeselect ? '' : value;
+    } else {
+      value = item.value;
+    }
+
+    if (closeOnSelect) {
+      open = false;
+    }
+  };
+</script>
+
+{#snippet renderTrigger()}
+  {@const triggerProps = {
+    class: cn(comboboxTriggerVariants({ variant, size, rounded, fullWidth, class: triggerClass })),
+    'data-placeholder': boolAttr(isPlaceholder),
+  }}
+  {#if triggerSnippet}
+    <PopoverPrimitive.Trigger {...triggerProps}>
+      {#snippet child({ props })}
+        {@render triggerSnippet?.({ props, displayValue })}
+      {/snippet}
+    </PopoverPrimitive.Trigger>
+  {:else}
+    <PopoverPrimitive.Trigger {...triggerProps}>
+      {displayValue}
+    </PopoverPrimitive.Trigger>
+  {/if}
+{/snippet}
+
+{#snippet renderItem(item: CommandItem)}
+  {@const { value: itemValue, label, icon: Icon, shortcut, onSelect, ...restItem } = item}
+  {@const itemAttrs = {
+    value: itemValue,
+    onSelect: onSelectItem(item, onSelect),
+    'data-selected': boolAttr(itemValue === value),
+    ...restItem,
+  }}
+
+  {#if itemSnippet}
+    <CommandPrimitive.Item {...itemAttrs}>
+      {#snippet child({ props })}
+        {@render itemSnippet?.({ item, props })}
+      {/snippet}
+    </CommandPrimitive.Item>
+  {:else}
+    <CommandPrimitive.Item {...itemAttrs}>
+      {#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}
+      {#if itemValue === value}
+        <span
+          class="cgui:ms-auto cgui:text-icon-regular cgui:size-4 cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0"
+          transition:fly={{ duration: 250, y: 4, easing: cubicInOut }}
+        >
+          <IconComponent.Checkmark class="cgui:ms-auto" width={16} height={16} />
+        </span>
+      {/if}
+    </CommandPrimitive.Item>
+  {/if}
+{/snippet}
+
+{#snippet loadingSpinner()}
+  <div class="cgui:p-4 cgui:flex cgui:items-center cgui:h-full cgui:justify-center cgui:text-icon-default">
+    <Spinner />
+  </div>
+{/snippet}
+
+{#snippet loadingMore()}
+  <div class="cgui:p-2 cgui:flex cgui:items-center cgui:justify-center cgui:text-icon-default">
+    <Spinner />
+  </div>
+{/snippet}
+
+{#snippet errorState()}
+  <div class="cgui:p-4 cgui:text-center cgui:text-body-2">
+    <p class="cgui:text-destructive cgui:mb-2">{error}</p>
+    <button type="button" class="cgui:text-sm cgui:text-primary cgui:underline cgui:hover:no-underline" onclick={retry}>
+      Try again
+    </button>
+  </div>
+{/snippet}
+
+<PopoverPrimitive.Root bind:open {...restProps}>
+  {@render renderTrigger()}
+
+  <PopoverPrimitive.Portal disabled={portalDisabled}>
+    <PopoverPrimitive.Content class="cgui:overflow-hidden cgui:rounded-md">
+      <CommandPrimitive.Root shouldFilter={false}>
+        <CommandPrimitive.Input bind:value={searchValue} placeholder={searchPlaceholder} />
+
+        <CommandPrimitive.List class="cgui:rounded-inherit">
+          <CommandPrimitive.Viewport onscroll={handleScroll} bind:ref={viewportRef}>
+            {#if error}
+              {@render errorState()}
+            {:else if isLoading && !hasResults}
+              {#if loadingSnippet}
+                {@render loadingSnippet()}
+              {:else}
+                {@render loadingSpinner()}
+              {/if}
+            {:else if hasResults}
+              {#each groupedItems as [groupKey, groupItems] (groupKey || '__ungrouped__')}
+                {#if groupKey}
+                  {@const group = groupMap.get(groupKey)}
+                  <CommandPrimitive.Group value={group?.value}>
+                    <CommandPrimitive.GroupHeading>{group?.label ?? groupKey}</CommandPrimitive.GroupHeading>
+
+                    <CommandPrimitive.GroupItems>
+                      {#each groupItems as item (item.value)}
+                        {@render renderItem(item)}
+                      {/each}
+                    </CommandPrimitive.GroupItems>
+
+                    {#if group?.separator}
+                      <CommandPrimitive.Separator />
+                    {/if}
+                  </CommandPrimitive.Group>
+                {:else}
+                  {#each groupItems as item (item.value)}
+                    {@render renderItem(item)}
+                  {/each}
+                {/if}
+              {/each}
+
+              {#if isLoading}
+                {@render loadingMore()}
+              {/if}
+
+              {#if !hasMore && items.length > pageSize}
+                <button
+                  class="cgui:w-full cgui:flex cgui:justify-center cgui:cursor-pointer cgui:items-center cgui:text-xs cgui:text-icon-default cgui:underline cgui:hover:no-underline"
+                  onclick={scrollToTop}
+                >
+                  <IconComponent.ChevronUp />
+                </button>
+              {/if}
+            {:else}
+              <CommandPrimitive.Empty>No results found</CommandPrimitive.Empty>
+            {/if}
+          </CommandPrimitive.Viewport>
+        </CommandPrimitive.List>
+      </CommandPrimitive.Root>
+    </PopoverPrimitive.Content>
+  </PopoverPrimitive.Portal>
+</PopoverPrimitive.Root>

package/dist/components/combobox/combobox.async.svelte.d.ts

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

package/dist/components/combobox/exports.d.ts

@@ -1 +1,2 @@
+export { default as Async } from './combobox.async.svelte';
 export { default as Root } from './combobox.svelte';

package/dist/components/combobox/exports.js

@@ -1 +1,2 @@
+export { default as Async } from './combobox.async.svelte';
 export { default as Root } from './combobox.svelte';

package/dist/components/combobox/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { CommandProps } from '../command/index.js';
+import type { CommandGroup, CommandItem, CommandProps } from '../command/index.js';
 import type { PrimitivePopoverRootProps } from '../popover/types.js';
 import type { ComboboxTriggerVariantsProps } from './styles.js';
 export type ComboboxRootProps = PrimitivePopoverRootProps;
@@ -20,3 +20,44 @@ export type ComboboxProps = PrimitivePopoverRootProps & ComboboxTriggerVariantsP
     }]>;
     item?: CommandProps['item'];
 };
+/**
+ * Async Combobox Types
+ */
+export type ComboboxAsyncCallbackParams = {
+    page: number;
+    pageSize: number;
+    search: string;
+};
+export type ComboboxAsyncCallbackResult = {
+    items: CommandItem[];
+    hasMore: boolean;
+};
+export type ComboboxAsyncCallback = (params: ComboboxAsyncCallbackParams) => Promise<ComboboxAsyncCallbackResult>;
+export type ComboboxAsyncProps = Omit<ComboboxProps, 'collection'> & {
+    /** Loading state renderer */
+    loading?: Snippet;
+    /** Current page (default: 1) */
+    page?: number;
+    /** Page size for pagination (default: 20) */
+    pageSize?: number;
+    /** Async data callback */
+    callback: ComboboxAsyncCallback;
+    /** Initial items (optional) */
+    initialItems?: CommandItem[];
+    /** Load immediate data when combobox is mounted (default: true) */
+    loadImmediate?: boolean;
+    /** Group definitions (for labels/ordering) */
+    groups?: CommandGroup[];
+    /** Debounce delay for search in milliseconds (default: 300ms) */
+    searchDebounce?: number;
+    /**
+     * Getter function for dependency tracking. When the returned value changes,
+     * the component will reset items, page to 1, clear selected value, and reload data.
+     * @example dependsOn={() => parentSelectValue}
+     */
+    dependsOn?: () => unknown;
+    /**
+     * Whether to clear the selected value when dependsOn changes **(default: true)**
+     */
+    clearOnDependencyChange?: boolean;
+};

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

@@ -17,11 +17,9 @@ export type DialogHostProps = {
 export type DialogComponent = Component<any>;
 export interface RegisteredDialogsOverride {
 }
-export type RegisteredDialogCollectionOverwritten = RegisteredDialogsOverride extends {
+export type RegisteredDialogCollectionOverwritten = keyof RegisteredDialogsOverride extends never ? {
     dialogs: Record<string, DialogComponent>;
-} ? RegisteredDialogsOverride : {
-    dialogs: Record<string, DialogComponent>;
-};
+} : RegisteredDialogsOverride;
 export type RegisteredDialogCollection = RegisteredDialogCollectionOverwritten['dialogs'];
 export type RegisteredDialogKeys = keyof RegisteredDialogCollectionOverwritten['dialogs'];
 export type DialogRegistrationValue<TKey extends string = string, TComponent extends DialogComponent = DialogComponent> = {

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

@@ -1,3 +1,3 @@
 export * as SelectPrimitive from './exports-primitive.js';
 export * as Select from './exports.js';
-export type { SelectAsyncCallback, SelectAsyncCallbackParams, SelectAsyncCallbackResult, SelectAsyncProps, SelectCollection, SelectCollectionOptions, SelectContentProps, SelectGroup, SelectGroupHeadingProps, SelectGroupProps, SelectItem, SelectItemProps, SelectPortalProps, SelectProps, SelectRootProps, SelectTriggerProps, SelectViewportProps, } from './types.js';
+export type * from './types.js';

package/dist/components/select/select.async.svelte

@@ -39,6 +39,8 @@
     callback,
     initialItems = [],
     loadImmediate = true,
+    dependsOn,
+    clearOnDependencyChange = true,
 
     ...restProps
   }: SelectAsyncProps = $props();
@@ -112,6 +114,11 @@
 
       currentPage = page;
       hasMore = result.hasMore;
+
+      // Check if viewport needs more items after render
+      requestAnimationFrame(() => {
+        checkNeedMoreItems();
+      });
     } catch (err) {
       error = err instanceof Error ? err.message : 'Failed to fetch data';
     } finally {
@@ -119,12 +126,34 @@
     }
   };
 
-  // Fetch on first open
+  // Auto-fill viewport if content doesn't overflow
+  const checkNeedMoreItems = () => {
+    if (!viewportRef || isLoading || !hasMore) return;
+
+    const { scrollHeight, clientHeight } = viewportRef;
+
+    // If content doesn't fill viewport, load more
+    if (scrollHeight <= clientHeight) {
+      loadMore();
+    }
+  };
+
+  // Fetch on first open or check viewport fill
   watch(
     () => open,
     () => {
-      if (!open || items.length > 0 || isLoading || loadImmediate) return;
-      fetchData(1);
+      if (!open) return;
+
+      // If no items yet and not loading, fetch first page
+      if (items.length === 0 && !isLoading && !loadImmediate) {
+        fetchData(1);
+        return;
+      }
+
+      // If already have items, check if viewport needs more after it renders
+      requestAnimationFrame(() => {
+        checkNeedMoreItems();
+      });
     }
   );
 
@@ -140,6 +169,32 @@
     };
   });
 
+  // Watch for dependency changes and reset
+  let previousDependency = $state<unknown>(dependsOn?.());
+  watch(
+    () => dependsOn?.(),
+    (newValue) => {
+      if (previousDependency === undefined && newValue === undefined) return;
+      if (previousDependency === newValue) return;
+
+      previousDependency = newValue;
+
+      // Reset state
+      items = [];
+      currentPage = 1;
+      hasMore = true;
+      error = null;
+
+      // Clear selected value if enabled
+      if (clearOnDependencyChange) {
+        value = '';
+      }
+
+      // Reload data
+      fetchData(1);
+    }
+  );
+
   const loadMore = () => {
     if (!isLoading && hasMore) {
       fetchData(currentPage + 1, true);

package/dist/components/select/types.d.ts

@@ -102,6 +102,18 @@ export type SelectAsyncProps = Omit<SelectProps, 'collection'> & {
     callback: SelectAsyncCallback;
     /** Initial items (optional) */
     initialItems?: SelectItem[];
-    /** Load immediate data when select was mounted */
+    /**
+     * Load immediate data when select was mounted **(default: true)**
+     */
     loadImmediate?: boolean;
+    /**
+     * Getter function for dependency tracking. When the returned value changes,
+     * the component will reset items, page to 1, clear selected value, and reload data.
+     * @example dependsOn={() => parentSelectValue}
+     */
+    dependsOn?: () => unknown;
+    /**
+     * Whether to clear the selected value when dependsOn changes **(default: true)**
+     */
+    clearOnDependencyChange?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.9.6",
+  "version": "1.9.7",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",