@casinogate/ui 1.11.14 → 2.0.0

package/dist/composed/combobox/async/combobox.async.svelte

@@ -0,0 +1,454 @@
+<script lang="ts" generics="TItem extends ComboboxItem">
+  import type { ComboboxAsyncProps, ComboboxItem } from '../types.js';
+
+  import { SELECTION_TYPE } from '../../../internal/constants/selection-type.js';
+  import { boolAttr } from '../../../internal/utils/attrs.js';
+  import { cn, noop } from '../../../internal/utils/common.js';
+  import { watch } from 'runed';
+  import { afterTick, boxWith } from 'svelte-toolbelt';
+  import type { Attachment } from 'svelte/attachments';
+  import { cubicInOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import { Icon, Icon as IconComponent } from '../../../atomic/icons/index.js';
+  import { Command as CommandPrimitive } from '../../../primitives/command/index.js';
+  import { Kbd } from '../../../primitives/kbd/index.js';
+  import { Popover as PopoverPrimitive } from '../../../primitives/popover/index.js';
+  import { Spinner } from '../../../primitives/spinner/index.js';
+  import { comboboxTriggerVariants } from '../styles.js';
+  import { useDisplayValue } from '../model/use-display-value.svelte.js';
+  import { useGroupedItems } from '../model/use-grouped-items.svelte.js';
+  import { useSelectedItems } from '../model/use-selected-items.svelte.js';
+  import { useAsyncComboboxData } from './use-async-combobox-data.svelte.js';
+
+  let {
+    open = $bindable(false),
+    value = $bindable(),
+    searchValue = $bindable(''),
+    type,
+    groups = [],
+    empty,
+    placeholder = 'Select an option',
+    searchPlaceholder,
+    trigger: triggerSnippet,
+    item: itemSnippet,
+    label: labelSnippet,
+    portalDisabled = false,
+    allowDeselect = true,
+    triggerClass,
+    contentClass,
+    size = 'default',
+    variant = 'default',
+    rounded = 'default',
+    fullWidth = true,
+    closeOnSelect,
+    clearable = false,
+
+    items = $bindable([]),
+    selectedItems = $bindable([]),
+
+    maxContentHeight,
+
+    loading: loadingSnippet,
+    pageSize = 10,
+    callback,
+    loadItems,
+    loadImmediate = true,
+    debounceMs,
+    searchDebounce = 300,
+    dependsOn,
+    clearOnDependencyChange = true,
+    onDependencyChange,
+    onSelect = noop,
+
+    ...restProps
+  }: ComboboxAsyncProps<TItem> = $props();
+
+  const getDefaultValue = () => (type === SELECTION_TYPE.MULTIPLE ? [] : '');
+  const isMultiple = $derived.by(() => type === SELECTION_TYPE.MULTIPLE);
+
+  // Initialize value based on type
+  if (value === undefined) {
+    value = getDefaultValue();
+  }
+
+  watch.pre(
+    () => value,
+    () => {
+      if (value !== undefined) return;
+      value = getDefaultValue();
+    }
+  );
+
+  let listRef = $state<HTMLElement | null>(null);
+
+  const groupedItems = useGroupedItems({
+    items: boxWith(() => items),
+    groups: boxWith(() => groups),
+  });
+
+  const displayValue = useDisplayValue({
+    value: boxWith(() => value!),
+    items: boxWith(() => items),
+    placeholder: boxWith(() => placeholder),
+    selectedItems: boxWith(() => selectedItems),
+  });
+
+  const resolvedSelectedItems = useSelectedItems({
+    value: boxWith(() => value!),
+    items: boxWith(() => items),
+    selectedItems: boxWith(() => selectedItems),
+  });
+
+  const isSelected = (itemValue: string): boolean => {
+    if (Array.isArray(value)) return value.includes(itemValue);
+    return value === itemValue;
+  };
+
+  const getItemKey = (item: TItem) => item.key ?? item.value;
+
+  const isPlaceholder = $derived.by(() => {
+    if (Array.isArray(value)) return value.length === 0;
+    return typeof value === 'string' && value.trim() === '';
+  });
+
+  const hasResults = $derived(items.length > 0);
+
+  const resolvedLoadItems = $derived.by(() => {
+    const loader = loadItems ?? callback;
+    if (!loader) {
+      throw new Error('Combobox.Async requires either loadItems or callback');
+    }
+
+    return loader;
+  });
+
+  const asyncData = useAsyncComboboxData<TItem>({
+    items: boxWith(
+      () => items,
+      (next) => {
+        items = next;
+      }
+    ),
+    loadItems: boxWith(() => resolvedLoadItems),
+    search: boxWith(
+      () => searchValue,
+      (next) => {
+        searchValue = next;
+      }
+    ),
+    pageSize: boxWith(() => pageSize),
+    debounceMs: boxWith(() => debounceMs ?? searchDebounce),
+    loadImmediate: boxWith(() => loadImmediate),
+    dependency: boxWith(() => dependsOn?.()),
+    onDependencyReset: (dependency) => {
+      onDependencyChange?.(dependency);
+
+      if (clearOnDependencyChange) {
+        value = isMultiple ? [] : '';
+        selectedItems = [];
+      }
+    },
+  });
+
+  const isLoading = $derived(asyncData.isLoading);
+  const isSearching = $derived(asyncData.isSearching);
+  const hasMore = $derived(asyncData.hasMore);
+  const error = $derived(asyncData.error);
+
+  watch(
+    () => open,
+    () => {
+      if (!open) return;
+      if (items.length > 0 || isLoading || loadImmediate) return;
+
+      asyncData.reload(searchValue);
+    }
+  );
+
+  const loadMore = () => {
+    if (!isLoading && hasMore) {
+      asyncData.loadMore();
+    }
+  };
+
+  const anchorAttachment: Attachment = (el) => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          loadMore();
+        }
+      },
+      { threshold: 0 }
+    );
+
+    observer.observe(el);
+
+    return () => {
+      observer.disconnect();
+    };
+  };
+
+  const retry = () => {
+    asyncData.retry();
+  };
+
+  const scrollToTop = () => {
+    if (!listRef) return;
+
+    listRef.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  const cacheSelectedItem = (item: TItem) => {
+    selectedItems = [...selectedItems.filter((selectedItem) => selectedItem.value !== item.value), item];
+  };
+
+  const removeSelectedItem = (itemValue: string) => {
+    selectedItems = selectedItems.filter((selectedItem) => selectedItem.value !== itemValue);
+  };
+
+  function onSelectItem(item: TItem) {
+    if (Array.isArray(value)) {
+      let result = value;
+      if (value.includes(item.value)) {
+        if (allowDeselect) {
+          result = value.filter((v) => v !== item.value);
+          removeSelectedItem(item.value);
+        }
+      } else {
+        result = [...value, item.value];
+        cacheSelectedItem(item);
+      }
+      onSelect(result, item);
+      value = result;
+    } else {
+      let result = typeof value === 'string' ? value : '';
+      if (item.value === value) {
+        if (allowDeselect) {
+          result = '';
+          selectedItems = [];
+        } else {
+          cacheSelectedItem(item);
+        }
+      } else {
+        result = item.value;
+        selectedItems = [item];
+      }
+      onSelect(result, item);
+      value = result;
+    }
+
+    afterTick(() => {
+      const shouldClose = closeOnSelect ?? !isMultiple;
+
+      if (shouldClose) {
+        open = false;
+      }
+    });
+  }
+  const isNotEmpty = $derived.by(() => {
+    if (Array.isArray(value)) return value.length > 0;
+
+    return typeof value === 'string' && value.trim() !== '';
+  });
+</script>
+
+{#snippet clearBtn()}
+  {#if clearable && isNotEmpty}
+    <button
+      aria-label="Clear selection"
+      class="cgui:ms-auto cgui:text-icon-regular cgui:size-4 cgui:cursor-pointer cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0"
+      type="button"
+      onclick={(event) => {
+        event.stopPropagation();
+        const nextValue = isMultiple ? [] : '';
+        value = nextValue;
+        selectedItems = [];
+        onSelect(nextValue, null);
+      }}
+    >
+      <Icon.Cross class="cgui:ms-auto" width={16} height={16} />
+    </button>
+  {/if}
+{/snippet}
+
+{#snippet renderTrigger()}
+  {@const triggerProps = {
+    class: cn(comboboxTriggerVariants({ variant, size, rounded, fullWidth, class: triggerClass })),
+    'data-placeholder': boolAttr(isPlaceholder),
+    'aria-expanded': open,
+    'aria-busy': isLoading,
+  }}
+  {#if labelSnippet}
+    <PopoverPrimitive.Trigger {...triggerProps}>
+      {@render labelSnippet({
+        placeholder: displayValue.current,
+        value: isMultiple ? (value as string[]) : (value as string),
+        selectedItems: resolvedSelectedItems.current,
+      })}
+
+      {@render clearBtn()}
+    </PopoverPrimitive.Trigger>
+  {:else if triggerSnippet}
+    <PopoverPrimitive.Trigger {...triggerProps}>
+      {#snippet child({ props })}
+        {@render triggerSnippet?.({ props, displayValue: displayValue.current })}
+      {/snippet}
+    </PopoverPrimitive.Trigger>
+  {:else}
+    <PopoverPrimitive.Trigger {...triggerProps}>
+      {displayValue.current}
+
+      {@render clearBtn()}
+    </PopoverPrimitive.Trigger>
+  {/if}
+{/snippet}
+
+{#snippet renderItem(item: TItem)}
+  {@const { value: itemValue, label, icon: Icon, shortcut, onSelect: _, ...restItem } = item}
+  {@const itemAttrs = {
+    value: itemValue,
+    onSelect: () => onSelectItem(item),
+    ...restItem,
+  }}
+
+  {#if itemSnippet}
+    <CommandPrimitive.Item {...itemAttrs} data-selected={boolAttr(isSelected(itemValue))}>
+      {#snippet child({ props })}
+        {@render itemSnippet?.({ item, props })}
+      {/snippet}
+    </CommandPrimitive.Item>
+  {:else}
+    <CommandPrimitive.Item {...itemAttrs} data-selected={boolAttr(isSelected(itemValue))}>
+      {#if Icon}
+        <Icon width={16} height={16} />
+      {/if}
+      {label ?? itemValue}
+      {#if shortcut && shortcut.length > 0}
+        <Kbd.Group>
+          {#each shortcut as shortcut (shortcut)}
+            <Kbd.Root>{shortcut}</Kbd.Root>
+          {/each}
+        </Kbd.Group>
+      {/if}
+      {#if isSelected(itemValue)}
+        <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 renderEmpty()}
+  {#if typeof empty === 'string'}
+    <CommandPrimitive.Empty>{empty}</CommandPrimitive.Empty>
+  {:else if empty}
+    {@render empty({ props: {} })}
+  {:else}
+    <CommandPrimitive.Empty>No results found</CommandPrimitive.Empty>
+  {/if}
+{/snippet}
+
+{#snippet loadingSpinner()}
+  <div
+    role="status"
+    aria-live="polite"
+    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 role="alert" 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={cn('cgui:overflow-hidden cgui:rounded-md', contentClass)}>
+      <CommandPrimitive.Root shouldFilter={false} class="cgui:max-h-80">
+        <CommandPrimitive.Input bind:value={searchValue} placeholder={searchPlaceholder} />
+
+        <CommandPrimitive.List class="cgui:rounded-inherit" bind:ref={listRef} style={{ maxHeight: maxContentHeight }}>
+          <CommandPrimitive.Viewport class={cn('cgui:relative')}>
+            {#if error}
+              {@render errorState()}
+            {:else if isSearching}
+              {#if loadingSnippet}
+                {@render loadingSnippet()}
+              {:else}
+                {@render loadingSpinner()}
+              {/if}
+            {:else if hasResults}
+              {#each groupedItems.items.current as [groupKey, groupItems] (groupKey || groupedItems.ungroupedKey)}
+                {#if groupKey}
+                  {@const group = groupedItems.map.current.get(groupKey)}
+                  <CommandPrimitive.Group value={group?.value}>
+                    <CommandPrimitive.GroupHeading>{group?.label ?? groupKey}</CommandPrimitive.GroupHeading>
+
+                    <CommandPrimitive.GroupItems>
+                      {#each groupItems as item (getItemKey(item))}
+                        {@render renderItem(item)}
+                      {/each}
+                    </CommandPrimitive.GroupItems>
+
+                    {#if group?.separator}
+                      <CommandPrimitive.Separator />
+                    {/if}
+                  </CommandPrimitive.Group>
+                {:else}
+                  <CommandPrimitive.Group value="__ungrouped__">
+                    {#each groupItems as item (getItemKey(item))}
+                      {@render renderItem(item)}
+                    {/each}
+                  </CommandPrimitive.Group>
+                {/if}
+              {/each}
+
+              {#if hasMore}
+                {#key items.length}
+                  <div class="cgui:h-1 cgui:w-full" {@attach anchorAttachment}></div>
+                {/key}
+              {/if}
+
+              {#if isLoading}
+                {@render loadingMore()}
+              {/if}
+            {:else}
+              {@render renderEmpty()}
+            {/if}
+          </CommandPrimitive.Viewport>
+
+          {#if !hasMore && items.length > pageSize}
+            <button
+              type="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}
+        </CommandPrimitive.List>
+      </CommandPrimitive.Root>
+    </PopoverPrimitive.Content>
+  </PopoverPrimitive.Portal>
+</PopoverPrimitive.Root>

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

@@ -0,0 +1,25 @@
+import type { ComboboxAsyncProps, ComboboxItem } from '../types.js';
+declare function $$render<TItem extends ComboboxItem>(): {
+    props: ComboboxAsyncProps<TItem>;
+    exports: {};
+    bindings: "value" | "open" | "items" | "searchValue" | "selectedItems";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TItem extends ComboboxItem> {
+    props(): ReturnType<typeof $$render<TItem>>['props'];
+    events(): ReturnType<typeof $$render<TItem>>['events'];
+    slots(): ReturnType<typeof $$render<TItem>>['slots'];
+    bindings(): "value" | "open" | "items" | "searchValue" | "selectedItems";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TItem extends ComboboxItem>(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 ComboboxItem>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Combobox: $$IsomorphicComponent;
+type Combobox<TItem extends ComboboxItem> = InstanceType<typeof Combobox<TItem>>;
+export default Combobox;

package/dist/composed/combobox/async/index.d.ts

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

package/dist/composed/combobox/async/index.js

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

package/dist/composed/combobox/async/use-async-combobox-data.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { ComboboxAsyncLoader, ComboboxItem } from '../types.js';
+import type { ReadableBoxedValues, WritableBoxedValues } from 'svelte-toolbelt';
+export declare const ASYNC_STATUS: {
+    readonly IDLE: "idle";
+    readonly LOADING: "loading";
+    readonly SEARCHING: "searching";
+    readonly LOADING_MORE: "loadingMore";
+    readonly ERROR: "error";
+};
+export type AsyncStatus = (typeof ASYNC_STATUS)[keyof typeof ASYNC_STATUS];
+type Options<TItem extends ComboboxItem> = WritableBoxedValues<{
+    items: TItem[];
+    search: string;
+}> & ReadableBoxedValues<{
+    loadItems: ComboboxAsyncLoader<TItem>;
+    pageSize: number;
+    debounceMs: number;
+    loadImmediate: boolean;
+    dependency: unknown;
+}> & {
+    onDependencyReset?: (value: unknown) => void;
+};
+export declare function useAsyncComboboxData<TItem extends ComboboxItem>(opts: Options<TItem>): {
+    readonly status: AsyncStatus;
+    readonly error: string | null;
+    readonly hasMore: boolean;
+    readonly currentPage: number;
+    readonly isLoading: boolean;
+    readonly isSearching: boolean;
+    readonly isLoadingMore: boolean;
+    reload: (search?: string) => Promise<void>;
+    loadMore: () => Promise<void>;
+    retry: () => Promise<void>;
+    abort: () => void;
+};
+export {};

package/dist/composed/combobox/async/use-async-combobox-data.svelte.js

@@ -0,0 +1,113 @@
+import { Debounced, watch } from 'runed';
+import { onMount } from 'svelte';
+export const ASYNC_STATUS = {
+    IDLE: 'idle',
+    LOADING: 'loading',
+    SEARCHING: 'searching',
+    LOADING_MORE: 'loadingMore',
+    ERROR: 'error',
+};
+export function useAsyncComboboxData(opts) {
+    let status = $state(ASYNC_STATUS.IDLE);
+    let error = $state(null);
+    let hasMore = $state(false);
+    let currentPage = $state(1);
+    let committedSearch = $state('');
+    let requestId = 0;
+    let controller = null;
+    const abortCurrent = () => {
+        requestId += 1;
+        controller?.abort();
+        controller = null;
+    };
+    const run = async (page, search, append = false) => {
+        if (append && (status === ASYNC_STATUS.LOADING_MORE || !hasMore))
+            return;
+        abortCurrent();
+        const id = requestId;
+        const localController = new AbortController();
+        controller = localController;
+        status = append
+            ? ASYNC_STATUS.LOADING_MORE
+            : opts.items.current.length > 0
+                ? ASYNC_STATUS.SEARCHING
+                : ASYNC_STATUS.LOADING;
+        error = null;
+        try {
+            const result = await opts.loadItems.current({
+                page,
+                pageSize: opts.pageSize.current,
+                search,
+                signal: localController.signal,
+                dependency: opts.dependency.current,
+            });
+            if (localController.signal.aborted || id !== requestId)
+                return;
+            opts.items.current = append ? [...opts.items.current, ...result.items] : result.items;
+            currentPage = page;
+            committedSearch = search;
+            hasMore = result.hasMore;
+            status = ASYNC_STATUS.IDLE;
+        }
+        catch (err) {
+            if (localController.signal.aborted || id !== requestId)
+                return;
+            error = err instanceof Error ? err.message : 'Failed to fetch data';
+            status = ASYNC_STATUS.ERROR;
+        }
+    };
+    const reload = (search = opts.search.current) => run(1, search, false);
+    const loadMore = () => run(currentPage + 1, committedSearch, true);
+    const retry = () => run(currentPage, committedSearch, currentPage > 1);
+    const debouncedSearch = new Debounced(() => opts.search.current, opts.debounceMs.current);
+    watch(() => debouncedSearch.current, (search) => {
+        reload(search);
+    }, { lazy: true });
+    let previousDependency = $state(opts.dependency.current);
+    watch(() => $state.snapshot(opts.dependency.current), (dependency) => {
+        if (Object.is(previousDependency, dependency))
+            return;
+        previousDependency = dependency;
+        abortCurrent();
+        opts.items.current = [];
+        opts.search.current = '';
+        opts.onDependencyReset?.(dependency);
+        error = null;
+        hasMore = false;
+        currentPage = 1;
+        committedSearch = '';
+        reload('');
+    }, { lazy: true });
+    onMount(() => {
+        if (opts.loadImmediate.current)
+            reload(opts.search.current);
+        return () => abortCurrent();
+    });
+    return {
+        get status() {
+            return status;
+        },
+        get error() {
+            return error;
+        },
+        get hasMore() {
+            return hasMore;
+        },
+        get currentPage() {
+            return currentPage;
+        },
+        get isLoading() {
+            return (status === ASYNC_STATUS.LOADING || status === ASYNC_STATUS.SEARCHING || status === ASYNC_STATUS.LOADING_MORE);
+        },
+        get isSearching() {
+            return status === ASYNC_STATUS.LOADING || status === ASYNC_STATUS.SEARCHING;
+        },
+        get isLoadingMore() {
+            return status === ASYNC_STATUS.LOADING_MORE;
+        },
+        reload,
+        loadMore,
+        retry,
+        abort: abortCurrent,
+    };
+}