@casinogate/ui 1.7.0 → 1.8.0

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

@@ -1,6 +1,13 @@
 <script lang="ts">
+  import type { SelectAsyncProps, SelectItem } from './types.js';
+
+  import { Icon } from '../icons/index.js';
   import { Spinner } from '../spinner/index.js';
+  import { createListCollection, type ListCollection } from '../../internal/index.js';
+  import { cn } from '../../internal/utils/common.js';
   import { watch } from 'runed';
+  import { cubicInOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
   import Content from './components/select.content.svelte';
   import GroupHeading from './components/select.group-heading.svelte';
   import Group from './components/select.group.svelte';
@@ -9,54 +16,84 @@
   import Root from './components/select.root.svelte';
   import Trigger from './components/select.trigger.svelte';
   import Viewport from './components/select.viewport.svelte';
-  import type { SelectAsyncProps, SelectData, SelectItem, SelectItemGroup } from './types.js';
-  import { getItemKey, getLabelFromValue } from './utils/index.js';
 
   let {
     value = $bindable(''),
     open = $bindable(false),
+
     empty = 'No results found',
-    maxContentHeight,
-    item,
-    trigger,
-    side,
-    sideOffset,
-    align,
-    alignOffset,
-    avoidCollisions,
-    collisionPadding,
-    customAnchor,
+
+    groups = [],
+    item: itemSnippet,
+    trigger: triggerSnippet,
+
+    contentProps,
+    contentClass,
+    contentRef = $bindable(null),
+
     placeholder: placeholderProp,
-    loading,
+
+    loading: loadingSnippet,
     pageSize = 10,
     callback,
+    initialItems = [],
+
     ...restProps
   }: SelectAsyncProps = $props();
 
-  let data = $state<SelectData>([]);
+  let items = $state<SelectItem[]>(initialItems);
   let isLoading = $state(false);
   let hasMore = $state(true);
   let currentPage = $state(1);
-
   let error = $state<string | null>(null);
 
-  const placeholder = $derived.by(() => {
+  const createCollection = (itemList: SelectItem[]): ListCollection<SelectItem> => {
+    const groupOrderMap = new Map<string, number>();
+    groups.forEach((g, index) => {
+      groupOrderMap.set(g.key, g.order ?? index);
+    });
+
+    return createListCollection({
+      items: itemList,
+      itemToValue: (item) => item.value,
+      itemToString: (item) => item.textValue ?? item.label,
+      isItemDisabled: (item) => !!item.disabled,
+      groupBy: (item) => item.group ?? '',
+      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 groupLabelMap = $derived(new Map(groups.map((g) => [g.key, g.label ?? g.key])));
+  const groupedItems = $derived(collection.group());
+  const hasResults = $derived(collection.size > 0);
+
+  const displayLabel = $derived.by(() => {
     if (typeof value === 'string' && value.trim() !== '') {
-      const label = getLabelFromValue(value, data);
-      return label ?? value;
+      const item = collection.find(value);
+      if (item) return item.label;
+      return value;
     }
 
     if (Array.isArray(value) && value.length > 0) {
-      const labels = value.map((v) => getLabelFromValue(v, data) ?? v);
+      const labels = value.map((v) => {
+        const item = collection.find(v);
+        return item?.label ?? v;
+      });
       return labels.join(', ');
     }
 
-    if (placeholderProp) return placeholderProp;
-
-    return '';
+    return placeholderProp ?? '';
   });
 
   const fetchData = async (page: number, append = false) => {
+    if (isLoading) return;
+
     isLoading = true;
     error = null;
 
@@ -64,14 +101,13 @@
       const result = await callback({ page, pageSize });
 
       if (append) {
-        data = [...data, ...(result.data as any)];
+        items = [...items, ...result.items];
       } else {
-        data = result.data;
+        items = result.items;
       }
 
       currentPage = page;
       hasMore = result.hasMore;
-      isLoading = false;
     } catch (err) {
       error = err instanceof Error ? err.message : 'Failed to fetch data';
     } finally {
@@ -79,15 +115,16 @@
     }
   };
 
+  // Fetch on first open
   watch(
     () => open,
     () => {
-      if (!open || data.length > 0 || isLoading) return;
-
-      fetchData(currentPage);
+      if (!open || items.length > 0 || isLoading) return;
+      fetchData(1);
     }
   );
 
+  // Reset page on unmount
   $effect(() => {
     return () => {
       currentPage = 1;
@@ -96,8 +133,7 @@
 
   const loadMore = () => {
     if (!isLoading && hasMore) {
-      const nextPage = currentPage + 1;
-      fetchData(nextPage, true);
+      fetchData(currentPage + 1, true);
     }
   };
 
@@ -110,88 +146,115 @@
     }
   };
 
-  const hasResults = $derived.by(() => {
-    return data.length > 0;
-  });
+  const retry = () => {
+    error = null;
+    fetchData(currentPage);
+  };
 </script>
 
-{#snippet itemsString(item: string)}
-  <Item value={item} label={item} />
+{#snippet defaultItemRenderer(item: SelectItem)}
+  <Item value={item.value} label={item.label} disabled={item.disabled} data-value={item.value}>
+    {#snippet children({ selected })}
+      {#if item.icon}
+        <item.icon width={16} height={16} />
+      {/if}
+      {item.label}
+
+      {#if selected}
+        <span class="cgui:ms-auto" transition:fly={{ duration: 250, y: 4, easing: cubicInOut }}>
+          <Icon.Checkmark class="cgui:ms-auto" width={16} height={16} />
+        </span>
+      {/if}
+    {/snippet}
+  </Item>
 {/snippet}
 
-{#snippet itemBasic(item: SelectItem)}
-  <Item value={item.value} label={item.label} />
+{#snippet renderItem(item: SelectItem)}
+  {#if itemSnippet}
+    <Item value={item.value} label={item.label} disabled={item.disabled} data-value={item.value}>
+      {#snippet child({ selected, highlighted, props })}
+        {@render itemSnippet({
+          item,
+          props,
+          selected,
+          highlighted,
+        })}
+      {/snippet}
+    </Item>
+  {:else}
+    {@render defaultItemRenderer(item)}
+  {/if}
 {/snippet}
 
-{#snippet itemGroup(group: SelectItemGroup)}
-  <Group>
-    <GroupHeading>
-      {group.group}
-    </GroupHeading>
-
-    {#each group.items as item (getItemKey(item))}
-      {#if typeof item === 'string'}
-        {@render itemsString(item)}
-      {:else}
-        {@render itemBasic(item)}
-      {/if}
-    {/each}
-  </Group>
+{#snippet loadingSpinner()}
+  <div class="cgui:p-4 cgui:flex cgui:items-center cgui:h-full cgui:justify-center cgui:text-icon-regular">
+    <Spinner />
+  </div>
+{/snippet}
+
+{#snippet loadingMore()}
+  <div class="cgui:p-2 cgui:flex cgui:items-center cgui:justify-center cgui:text-fg-muted">
+    <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}
 
 <Root bind:value={value as never} bind:open {...restProps as any}>
-  {#if trigger}
+  {#if triggerSnippet}
     <Trigger>
       {#snippet child({ props })}
-        {@render trigger?.({ props, label: placeholder })}
+        {@render triggerSnippet?.({ props, label: displayLabel })}
       {/snippet}
     </Trigger>
   {:else}
     <Trigger>
-      {placeholder}
+      {displayLabel}
     </Trigger>
   {/if}
 
   <Portal>
-    <Content
-      {maxContentHeight}
-      {side}
-      {sideOffset}
-      {align}
-      {alignOffset}
-      {avoidCollisions}
-      {collisionPadding}
-      {customAnchor}
-    >
+    <Content bind:ref={contentRef} class={cn(contentClass)} {...contentProps}>
       <Viewport onscroll={handleScroll}>
         {#if error}
-          <div class="cgui:p-4 cgui:text-center cgui:text-body-2 cgui:text-fg-darkest cgui:text-destructive">
-            {error}
-          </div>
+          {@render errorState()}
         {:else if isLoading && !hasResults}
-          {#if loading}
-            {@render loading?.()}
+          {#if loadingSnippet}
+            {@render loadingSnippet()}
           {:else}
-            <div class="cgui:p-4 cgui:flex cgui:items-center cgui:h-full cgui:justify-center cgui:text-fg-darkest">
-              <Spinner />
-            </div>
+            {@render loadingSpinner()}
           {/if}
         {:else if hasResults}
-          {#each data as item (getItemKey(item))}
-            {#if typeof item === 'string'}
-              {@render itemsString(item)}
-            {:else if 'group' in item}
-              {@render itemGroup(item)}
+          {#each groupedItems as [groupKey, groupItems] (groupKey || '__ungrouped__')}
+            {#if groupKey}
+              <Group>
+                <GroupHeading>
+                  {groupLabelMap.get(groupKey) ?? groupKey}
+                </GroupHeading>
+                {#each groupItems as item (item.value)}
+                  {@render renderItem(item)}
+                {/each}
+              </Group>
             {:else}
-              {@render itemBasic(item)}
+              {#each groupItems as item (item.value)}
+                {@render renderItem(item)}
+              {/each}
             {/if}
           {/each}
+
           {#if isLoading}
-            <div
-              class="cgui:p-2 cgui:flex cgui:items-center cgui:justify-center cgui:text-center cgui:text-body-2 cgui:text-fg-darkest"
-            >
-              <Spinner />
-            </div>
+            {@render loadingMore()}
+          {/if}
+
+          {#if !hasMore && items.length > pageSize}
+            <div class="cgui:p-2 cgui:text-center cgui:text-xs cgui:text-fg-muted">End of list</div>
           {/if}
         {:else if typeof empty === 'string'}
           <div

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

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

package/dist/components/select/select.svelte

@@ -1,7 +1,38 @@
+<script lang="ts" module>
+  export function createSelectCollection(options: SelectCollectionOptions): ListCollection<SelectItem> {
+    const { items, groups = [], groupSort } = options;
+
+    const groupOrderMap = new Map<string, number>();
+    groups.forEach((g, index) => {
+      groupOrderMap.set(g.key, g.order ?? index);
+    });
+
+    return createListCollection({
+      items,
+      itemToValue: (item) => item.value,
+      itemToString: (item) => item.textValue ?? item.label,
+      isItemDisabled: (item) => !!item.disabled,
+      groupBy: (item) => item.group ?? '',
+      groupSort:
+        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);
+        }),
+    });
+  }
+</script>
+
 <script lang="ts">
-  import type { SelectItem, SelectItemGroup, SelectProps } from './types.js';
-  import { getItemKey, getLabelFromValue } from './utils/index.js';
+  import type { SelectCollectionOptions, SelectItem, SelectProps } from './types.js';
 
+  import { Icon } from '../icons/index.js';
+  import { createListCollection, type ListCollection } from '../../internal/index.js';
+  import { cn } from '../../internal/utils/common.js';
+  import { cubicInOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
   import Content from './components/select.content.svelte';
   import GroupHeading from './components/select.group-heading.svelte';
   import Group from './components/select.group.svelte';
@@ -17,101 +48,115 @@
 
     empty = 'No results found',
 
-    maxContentHeight,
-    data,
-    item,
-    trigger,
-    side,
-    sideOffset,
-    align,
-    alignOffset,
-    avoidCollisions,
-    collisionPadding,
-    customAnchor,
+    collection,
+    groups = [],
+    item: itemSnippet,
+    trigger: triggerSnippet,
+    label: labelSnippet,
+
+    contentProps,
+    contentClass,
+    contentRef = $bindable(null),
 
     placeholder: placeholderProp,
 
     ...restProps
   }: SelectProps = $props();
 
-  const placeholder = $derived.by(() => {
+  const groupLabelMap = $derived(new Map(groups.map((g) => [g.key, g.label ?? g.key])));
+
+  const groupedItems = $derived(collection.group());
+
+  const hasResults = $derived(collection.size > 0);
+
+  const displayLabel = $derived.by(() => {
     if (typeof value === 'string' && value.trim() !== '') {
-      const label = getLabelFromValue(value, data);
-      return label ?? value;
+      const item = collection.find(value);
+      if (item) return item.label;
+      return value;
     }
 
     if (Array.isArray(value) && value.length > 0) {
-      const labels = value.map((v) => getLabelFromValue(v, data) ?? v);
+      const labels = value.map((v) => {
+        const item = collection.find(v);
+        return item?.label ?? v;
+      });
       return labels.join(', ');
     }
 
-    if (placeholderProp) return placeholderProp;
-
-    return '';
-  });
-
-  const hasResults = $derived.by(() => {
-    return data.length > 0;
+    return placeholderProp ?? '';
   });
 </script>
 
-{#snippet itemsString(item: string)}
-  <Item value={item} label={item} />
-{/snippet}
+{#snippet defaultItemRenderer(item: SelectItem)}
+  <Item value={item.value} label={item.label} disabled={item.disabled} data-value={item.value}>
+    {#snippet children({ selected })}
+      {#if item.icon}
+        <item.icon width={16} height={16} />
+      {/if}
+      {item.label}
 
-{#snippet itemBasic(item: SelectItem)}
-  <Item value={item.value} label={item.label} />
+      {#if selected}
+        <span class="cgui:ms-auto" transition:fly={{ duration: 250, y: 4, easing: cubicInOut }}>
+          <Icon.Checkmark class="cgui:ms-auto" width={16} height={16} />
+        </span>
+      {/if}
+    {/snippet}
+  </Item>
 {/snippet}
 
-{#snippet itemGroup(group: SelectItemGroup)}
-  <Group>
-    <GroupHeading>
-      {group.group}
-    </GroupHeading>
-
-    {#each group.items as item (getItemKey(item))}
-      {#if typeof item === 'string'}
-        {@render itemsString(item)}
-      {:else}
-        {@render itemBasic(item)}
-      {/if}
-    {/each}
-  </Group>
+{#snippet renderItem(item: SelectItem)}
+  {#if itemSnippet}
+    <Item value={item.value} label={item.label} disabled={item.disabled} data-value={item.value}>
+      {#snippet child({ selected, highlighted, props })}
+        {@render itemSnippet({
+          item,
+          props,
+          selected,
+          highlighted,
+        })}
+      {/snippet}
+    </Item>
+  {:else}
+    {@render defaultItemRenderer(item)}
+  {/if}
 {/snippet}
 
 <Root bind:value={value as never} bind:open {...restProps}>
-  {#if trigger}
+  {#if triggerSnippet}
     <Trigger>
       {#snippet child({ props })}
-        {@render trigger?.({ props, label: placeholder })}
+        {@render triggerSnippet?.({ props, label: displayLabel })}
       {/snippet}
     </Trigger>
   {:else}
     <Trigger>
-      {placeholder}
+      {#if labelSnippet}
+        {@render labelSnippet?.({ placeholder: displayLabel, value })}
+      {:else}
+        {displayLabel}
+      {/if}
     </Trigger>
   {/if}
 
   <Portal>
-    <Content
-      {maxContentHeight}
-      {side}
-      {sideOffset}
-      {align}
-      {alignOffset}
-      {avoidCollisions}
-      {collisionPadding}
-      {customAnchor}
-    >
+    <Content bind:ref={contentRef} class={cn(contentClass)} {...contentProps}>
       <Viewport>
         {#if hasResults}
-          {#each data as item (getItemKey(item))}
-            {#if typeof item === 'string'}
-              {@render itemsString(item)}
-            {:else if 'group' in item}
-              {@render itemGroup(item)}
+          {#each groupedItems as [groupKey, items] (groupKey || '__ungrouped__')}
+            {#if groupKey}
+              <Group>
+                <GroupHeading>
+                  {groupLabelMap.get(groupKey) ?? groupKey}
+                </GroupHeading>
+                {#each items as item (item.value)}
+                  {@render renderItem(item)}
+                {/each}
+              </Group>
             {:else}
-              {@render itemBasic(item)}
+              {#each items as item (item.value)}
+                {@render renderItem(item)}
+              {/each}
             {/if}
           {/each}
         {:else if typeof empty === 'string'}

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

@@ -1,4 +1,6 @@
-import type { SelectProps } from './types.js';
-declare const Select: import("svelte").Component<SelectProps, {}, "value" | "open">;
+export declare function createSelectCollection(options: SelectCollectionOptions): ListCollection<SelectItem>;
+import type { SelectCollectionOptions, SelectItem, SelectProps } from './types.js';
+import { type ListCollection } from '../../internal/index.js';
+declare const Select: import("svelte").Component<SelectProps, {}, "value" | "open" | "contentRef">;
 type Select = ReturnType<typeof Select>;
 export default Select;