@casinogate/ui 1.10.7 → 1.10.9

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

@@ -19,14 +19,16 @@
 
   let {
     open = $bindable(false),
-    value = $bindable(''),
+    value = $bindable(),
     searchValue = $bindable(''),
+    type,
     groups = [],
     empty,
     placeholder = 'Select an option',
     searchPlaceholder,
     trigger: triggerSnippet,
     item: itemSnippet,
+    label: labelSnippet,
     portalDisabled = false,
     allowDeselect = true,
     triggerClass,
@@ -34,7 +36,9 @@
     variant = 'default',
     rounded = 'default',
     fullWidth = true,
-    closeOnSelect = true,
+    closeOnSelect,
+
+    maxContentHeight,
 
     loading: loadingSnippet,
     pageSize = 10,
@@ -44,10 +48,18 @@
     searchDebounce = 300,
     dependsOn,
     clearOnDependencyChange = true,
+    onSelect,
 
     ...restProps
   }: ComboboxAsyncProps = $props();
 
+  const isMultiple = type === 'multiple';
+
+  // Initialize value based on type
+  if (value === undefined) {
+    value = isMultiple ? ([] as string[]) : '';
+  }
+
   let items = $state<CommandItem[]>(initialItems);
   let isLoading = $state(false);
   let isSearching = $state(false);
@@ -80,13 +92,32 @@
   const groupMap = $derived(new Map(collection.groups.map((g) => [g.value, g])));
   const groupedItems = $derived(collection.group());
 
+  const isSelected = (itemValue: string): boolean => {
+    if (Array.isArray(value)) return value.includes(itemValue);
+    return value === itemValue;
+  };
+
   const displayValue = $derived.by(() => {
-    const val = items.find((item) => item.value === value)?.label ?? value;
-    return val.trim() !== '' ? val : placeholder;
+    if (typeof value === 'string' && value.trim() !== '') {
+      const item = items.find((i) => i.value === value);
+      return item?.label ?? value;
+    }
+
+    if (Array.isArray(value) && value.length > 0) {
+      return value
+        .map((v) => {
+          const item = items.find((i) => i.value === v);
+          return item?.label ?? v;
+        })
+        .join(', ');
+    }
+
+    return placeholder;
   });
 
   const isPlaceholder = $derived.by(() => {
-    return value.trim() === '';
+    if (Array.isArray(value)) return value.length === 0;
+    return typeof value === 'string' && value.trim() === '';
   });
 
   const hasResults = $derived(collection.size > 0);
@@ -183,7 +214,7 @@
 
       // Clear selected value if enabled
       if (clearOnDependencyChange) {
-        value = '';
+        value = isMultiple ? [] : '';
       }
 
       // Reload data
@@ -191,6 +222,34 @@
     }
   );
 
+  // onSelect callback
+  let previousValue = $state<string | string[]>(
+    isMultiple ? [...((value as string[]) ?? [])] : ((value as string) ?? '')
+  );
+
+  watch(
+    () => value,
+    (newValue) => {
+      if (!onSelect) {
+        previousValue = isMultiple ? [...((newValue as string[]) ?? [])] : ((newValue as string) ?? '');
+        return;
+      }
+
+      if (typeof newValue === 'string') {
+        const item = newValue ? (items.find((i) => i.value === newValue) ?? null) : null;
+        onSelect(newValue, item);
+      } else if (Array.isArray(newValue)) {
+        const prev = Array.isArray(previousValue) ? previousValue : [];
+        const added = newValue.find((v) => !prev.includes(v));
+        const item = added ? (items.find((i) => i.value === added) ?? null) : null;
+        onSelect(newValue, item);
+      }
+
+      previousValue = isMultiple ? [...((newValue as string[]) ?? [])] : ((newValue as string) ?? '');
+    },
+    { lazy: true }
+  );
+
   const loadMore = () => {
     if (!isLoading && hasMore) {
       fetchData(currentPage + 1, searchValue, true);
@@ -228,16 +287,25 @@
     });
   };
 
-  const onSelectItem = (item: Omit<CommandItem, 'onSelect'>, onSelect?: AnyFn) => () => {
-    onSelect?.();
+  const onSelectItem = (item: Omit<CommandItem, 'onSelect'>, itemOnSelect?: AnyFn) => () => {
+    itemOnSelect?.();
 
-    if (item.value === value) {
-      value = allowDeselect ? '' : value;
+    if (Array.isArray(value)) {
+      if (value.includes(item.value)) {
+        value = allowDeselect ? value.filter((v) => v !== item.value) : value;
+      } else {
+        value = [...value, item.value];
+      }
     } else {
-      value = item.value;
+      if (item.value === value) {
+        value = allowDeselect ? '' : value;
+      } else {
+        value = item.value;
+      }
     }
 
-    if (closeOnSelect) {
+    const shouldClose = closeOnSelect ?? !isMultiple;
+    if (shouldClose) {
       open = false;
     }
   };
@@ -248,7 +316,11 @@
     class: cn(comboboxTriggerVariants({ variant, size, rounded, fullWidth, class: triggerClass })),
     'data-placeholder': boolAttr(isPlaceholder),
   }}
-  {#if triggerSnippet}
+  {#if labelSnippet}
+    <PopoverPrimitive.Trigger {...triggerProps}>
+      {@render labelSnippet({ placeholder: displayValue, value: isMultiple ? (value as string[]) : (value as string) })}
+    </PopoverPrimitive.Trigger>
+  {:else if triggerSnippet}
     <PopoverPrimitive.Trigger {...triggerProps}>
       {#snippet child({ props })}
         {@render triggerSnippet?.({ props, displayValue })}
@@ -262,11 +334,11 @@
 {/snippet}
 
 {#snippet renderItem(item: CommandItem)}
-  {@const { value: itemValue, label, icon: Icon, shortcut, onSelect, ...restItem } = item}
+  {@const { value: itemValue, label, icon: Icon, shortcut, onSelect: itemOnSelect, ...restItem } = item}
   {@const itemAttrs = {
     value: itemValue,
-    onSelect: onSelectItem(item, onSelect),
-    'data-selected': boolAttr(itemValue === value),
+    onSelect: onSelectItem(item, itemOnSelect),
+    'data-selected': boolAttr(isSelected(itemValue)),
     ...restItem,
   }}
 
@@ -281,7 +353,7 @@
       {#if Icon}
         <Icon width={16} height={16} />
       {/if}
-      {label ?? value}
+      {label ?? itemValue}
       {#if shortcut && shortcut.length > 0}
         <Kbd.Group>
           {#each shortcut as shortcut (shortcut)}
@@ -289,7 +361,7 @@
           {/each}
         </Kbd.Group>
       {/if}
-      {#if itemValue === value}
+      {#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 }}

package/dist/components/combobox/combobox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   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 { cubicInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
@@ -13,14 +14,16 @@
 
   let {
     open = $bindable(false),
-    value = $bindable(''),
+    value = $bindable(),
     searchValue = $bindable(''),
+    type,
     collection,
     empty,
     placeholder = 'Select an option',
     searchPlaceholder,
     trigger: triggerSnippet,
     item: itemSnippet,
+    label: labelSnippet,
     portalDisabled = false,
     allowDeselect = true,
     triggerClass,
@@ -28,34 +31,97 @@
     variant = 'default',
     rounded = 'default',
     fullWidth = true,
-    closeOnSelect = true,
+    closeOnSelect,
     maxContentHeight,
+    onSelect,
     ...restProps
   }: ComboboxProps = $props();
 
+  const isMultiple = $derived(type === 'multiple');
+
+  // Initialize value based on type
+  if (value === undefined) {
+    value = isMultiple ? ([] as string[]) : '';
+  }
+
   const groupMap = $derived(new Map(collection.groups.map((g) => [g.value, g])));
 
   const groupedItems = $derived(collection.group());
 
+  const isSelected = (itemValue: string): boolean => {
+    if (Array.isArray(value)) return value.includes(itemValue);
+    return value === itemValue;
+  };
+
   const displayValue = $derived.by(() => {
-    const val = collection.items.find((item) => item.value === value)?.label ?? value;
-    return val.trim() !== '' ? val : placeholder;
+    if (typeof value === 'string' && value.trim() !== '') {
+      const item = collection.items.find((i) => i.value === value);
+      return item?.label ?? value;
+    }
+
+    if (Array.isArray(value) && value.length > 0) {
+      return value
+        .map((v) => {
+          const item = collection.items.find((i) => i.value === v);
+          return item?.label ?? v;
+        })
+        .join(', ');
+    }
+
+    return placeholder;
   });
 
   const isPlaceholder = $derived.by(() => {
-    return value.trim() === '';
+    if (Array.isArray(value)) return value.length === 0;
+    return typeof value === 'string' && value.trim() === '';
   });
 
-  const onSelectItem = (item: Omit<CommandItem, 'onSelect'>, onSelect?: AnyFn) => () => {
-    onSelect?.();
-
-    if (item.value === value) {
-      value = allowDeselect ? '' : value;
+  let previousValue = $state<string | string[]>(
+    isMultiple ? [...((value as string[]) ?? [])] : ((value as string) ?? '')
+  );
+
+  watch(
+    () => value,
+    (newValue) => {
+      if (!onSelect) {
+        previousValue = isMultiple ? [...((newValue as string[]) ?? [])] : ((newValue as string) ?? '');
+        return;
+      }
+
+      if (typeof newValue === 'string') {
+        const item = newValue ? (collection.items.find((i) => i.value === newValue) ?? null) : null;
+        onSelect(newValue, item);
+      } else if (Array.isArray(newValue)) {
+        const prev = Array.isArray(previousValue) ? previousValue : [];
+        const added = newValue.find((v) => !prev.includes(v));
+        const item = added ? (collection.items.find((i) => i.value === added) ?? null) : null;
+        onSelect(newValue, item);
+      }
+
+      previousValue = isMultiple ? [...((newValue as string[]) ?? [])] : ((newValue as string) ?? '');
+    },
+    { lazy: true }
+  );
+
+  const onSelectItem = (item: Omit<CommandItem, 'onSelect'>, itemOnSelect?: AnyFn) => () => {
+    itemOnSelect?.();
+
+    if (Array.isArray(value)) {
+      if (value.includes(item.value)) {
+        value = allowDeselect ? value.filter((v) => v !== item.value) : value;
+      } else {
+        value = [...value, item.value];
+      }
     } else {
-      value = item.value;
+      if (item.value === value) {
+        value = allowDeselect ? '' : value;
+      } else {
+        value = item.value;
+      }
     }
 
-    if (closeOnSelect) {
+    const shouldClose = closeOnSelect ?? !isMultiple;
+    if (shouldClose) {
       open = false;
     }
   };
@@ -66,7 +132,11 @@
     class: cn(comboboxTriggerVariants({ variant, size, rounded, fullWidth, class: triggerClass })),
     'data-placeholder': boolAttr(isPlaceholder),
   }}
-  {#if triggerSnippet}
+  {#if labelSnippet}
+    <PopoverPrimitive.Trigger {...triggerProps}>
+      {@render labelSnippet({ placeholder: displayValue, value: isMultiple ? (value as string[]) : (value as string) })}
+    </PopoverPrimitive.Trigger>
+  {:else if triggerSnippet}
     <PopoverPrimitive.Trigger {...triggerProps}>
       {#snippet child({ props })}
         {@render triggerSnippet?.({ props, displayValue })}
@@ -80,11 +150,11 @@
 {/snippet}
 
 {#snippet renderItem(item: CommandItem)}
-  {@const { value: itemValue, label, icon: Icon, shortcut, onSelect, ...restItem } = item}
+  {@const { value: itemValue, label, icon: Icon, shortcut, onSelect: itemOnSelect, ...restItem } = item}
   {@const itemAttrs = {
     value: itemValue,
-    onSelect: onSelectItem(item, onSelect),
-    'data-selected': boolAttr(itemValue === value),
+    onSelect: onSelectItem(item, itemOnSelect),
+    'data-selected': boolAttr(isSelected(itemValue)),
     ...restItem,
   }}
 
@@ -99,7 +169,7 @@
       {#if Icon}
         <Icon width={16} height={16} />
       {/if}
-      {label ?? value}
+      {label ?? itemValue}
       {#if shortcut && shortcut.length > 0}
         <Kbd.Group>
           {#each shortcut as shortcut (shortcut)}
@@ -107,7 +177,7 @@
           {/each}
         </Kbd.Group>
       {/if}
-      {#if itemValue === value}
+      {#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 }}

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

@@ -3,9 +3,11 @@ import type { CommandGroup, CommandItem, CommandProps } from '../command/index.j
 import type { PrimitivePopoverRootProps } from '../popover/types.js';
 import type { ComboboxTriggerVariantsProps } from './styles.js';
 export type ComboboxRootProps = PrimitivePopoverRootProps;
-export type ComboboxProps = PrimitivePopoverRootProps & ComboboxTriggerVariantsProps & {
+/**
+ * Base props shared by both single and multiple selection modes
+ */
+type ComboboxBaseProps = PrimitivePopoverRootProps & ComboboxTriggerVariantsProps & {
     collection: CommandProps['collection'];
-    value?: string;
     empty?: CommandProps['empty'];
     placeholder?: string;
     searchPlaceholder?: string;
@@ -20,7 +22,25 @@ export type ComboboxProps = PrimitivePopoverRootProps & ComboboxTriggerVariantsP
         displayValue: string;
     }]>;
     item?: CommandProps['item'];
+    /** Custom label renderer for trigger display */
+    label?: Snippet<[{
+        placeholder: string;
+        value: string | string[];
+    }]>;
+    /** Callback when selection changes */
+    onSelect?: (value: string | string[], item: CommandItem | null) => void;
+};
+type ComboboxSingleProps = ComboboxBaseProps & {
+    /** Selection mode (default: 'single') */
+    type?: 'single';
+    value?: string;
+};
+type ComboboxMultipleProps = ComboboxBaseProps & {
+    /** Selection mode */
+    type: 'multiple';
+    value?: string[];
 };
+export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
 /**
  * Async Combobox Types
  */
@@ -34,7 +54,7 @@ export type ComboboxAsyncCallbackResult = {
     hasMore: boolean;
 };
 export type ComboboxAsyncCallback = (params: ComboboxAsyncCallbackParams) => Promise<ComboboxAsyncCallbackResult>;
-export type ComboboxAsyncProps = Omit<ComboboxProps, 'collection'> & {
+type ComboboxAsyncBaseProps = Omit<ComboboxBaseProps, 'collection'> & {
     /** Loading state renderer */
     loading?: Snippet;
     /** Current page (default: 1) */
@@ -62,3 +82,15 @@ export type ComboboxAsyncProps = Omit<ComboboxProps, 'collection'> & {
      */
     clearOnDependencyChange?: boolean;
 };
+type ComboboxAsyncSingleProps = ComboboxAsyncBaseProps & {
+    /** Selection mode (default: 'single') */
+    type?: 'single';
+    value?: string;
+};
+type ComboboxAsyncMultipleProps = ComboboxAsyncBaseProps & {
+    /** Selection mode */
+    type: 'multiple';
+    value?: string[];
+};
+export type ComboboxAsyncProps = ComboboxAsyncSingleProps | ComboboxAsyncMultipleProps;
+export {};

package/package.json

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