sv5ui 1.1.3 → 1.3.0

package/dist/SelectMenu/SelectMenu.svelte

@@ -0,0 +1,436 @@
+<script lang="ts" module>
+    import type {
+        SelectMenuProps,
+        SelectMenuItem,
+        SelectMenuItemType
+    } from './select-menu.types.js'
+
+    export type Props = SelectMenuProps
+</script>
+
+<script lang="ts">
+    import { Combobox } from 'bits-ui'
+    import { selectMenuVariants, selectMenuDefaults } from './select-menu.variants.js'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import { getContext } from 'svelte'
+    import {
+        fieldGroupVariantWithRoot,
+        type FieldGroupVariantProps
+    } from '../FieldGroup/field-group.variants.js'
+    import Icon from '../Icon/Icon.svelte'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import Input from '../Input/Input.svelte'
+    import type { AvatarSize } from '../Avatar/avatar.types.js'
+    import type { FormFieldProps } from '../FormField/form-field.types.js'
+
+    const config = getComponentConfig('selectMenu', selectMenuDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
+
+    let {
+        ref = $bindable(null),
+        value = $bindable(),
+        open = $bindable(false),
+        onOpenChange,
+        items = [],
+        placeholder,
+        searchPlaceholder = 'Search...',
+        name,
+        required = false,
+        disabled = false,
+        ui,
+        id,
+        color = config.defaultVariants.color,
+        variant = config.defaultVariants.variant,
+        size,
+        highlight,
+        loading = false,
+        loadingIcon = icons.loading,
+        icon,
+        leadingIcon,
+        trailingIcon = icons.chevronDown,
+        selectedIcon = icons.check,
+        avatar,
+        filterFields = ['label', 'value'] as string[],
+        ignoreFilter = false,
+        emptyText = 'No results found.',
+        transition = config.defaultVariants.transition ?? true,
+        portal = true,
+        side = config.defaultVariants.side ?? 'bottom',
+        sideOffset = 8,
+        align = 'start',
+        alignOffset = 0,
+        avoidCollisions = true,
+        collisionBoundary,
+        collisionPadding = 8,
+        onEscapeKeydown,
+        onInteractOutside,
+        forceMount,
+        class: className,
+        leadingSlot,
+        trailingSlot,
+        item: itemSlot,
+        itemLeading,
+        itemLabel: itemLabelSlot,
+        itemTrailing,
+        empty: emptySlot,
+        content: contentSlot
+    }: Props = $props()
+
+    // ---- Form context ----
+    const formFieldContext = getContext<
+        | {
+              name?: string
+              size: NonNullable<FormFieldProps['size']>
+              error?: string | boolean
+              ariaId: string
+          }
+        | undefined
+    >('formField')
+
+    const fieldGroupContext = getContext<
+        | {
+              orientation: NonNullable<FieldGroupVariantProps['orientation']>
+              size: NonNullable<FieldGroupVariantProps['size']>
+          }
+        | undefined
+    >('fieldGroup')
+
+    const hasError = $derived(
+        formFieldContext?.error !== undefined && formFieldContext?.error !== false
+    )
+    const resolvedSize = $derived(
+        size ?? formFieldContext?.size ?? fieldGroupContext?.size ?? config.defaultVariants.size
+    )
+    const resolvedColor = $derived(hasError ? 'error' : color)
+    const resolvedHighlight = $derived(highlight ?? hasError)
+    const fieldGroupClass = $derived(
+        fieldGroupContext
+            ? fieldGroupVariantWithRoot.fieldGroup[fieldGroupContext.orientation ?? 'horizontal']
+            : undefined
+    )
+    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
+    const resolvedName = $derived(name ?? formFieldContext?.name)
+
+    // ---- ARIA ----
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
+
+    // ---- Items lookup (O(1) via Map) ----
+    const itemsMap = $derived(
+        new Map(
+            (items as SelectMenuItemType[])
+                .filter((i): i is SelectMenuItem => !('type' in i))
+                .map((i) => [i.value, i])
+        )
+    )
+
+    const selectedItem = $derived(value ? itemsMap.get(value) : undefined)
+    const displayLabel = $derived(selectedItem?.label ?? selectedItem?.value ?? '')
+
+    // ---- Search & filtering ----
+    let searchTerm = $state('')
+
+    const filteredItems = $derived(
+        ignoreFilter || !searchTerm.trim()
+            ? items
+            : items.filter((item) => {
+                  if ('type' in item) return true
+                  const query = searchTerm.toLowerCase()
+                  return filterFields.some((field) => {
+                      const val = (item as unknown as Record<string, unknown>)[field]
+                      return typeof val === 'string' && val.toLowerCase().includes(query)
+                  })
+              })
+    )
+
+    const hasFilteredSelectItems = $derived(filteredItems.some((item) => !('type' in item)))
+
+    // ---- Leading / trailing ----
+    const displayAvatar = $derived(selectedItem?.avatar ?? avatar)
+    const displayIcon = $derived(selectedItem?.icon ?? leadingIcon ?? icon)
+    const isLeading = $derived(!!leadingSlot || !!displayAvatar || !!displayIcon)
+    const leadingIconName = $derived(
+        loading && isLeading ? loadingIcon : !displayAvatar ? displayIcon : undefined
+    )
+
+    // ---- Trailing icon ----
+    const trailingIconName = $derived(loading && !isLeading ? loadingIcon : trailingIcon)
+    const trailingIconClass = $derived(
+        `${loading && !isLeading ? 'animate-spin' : 'transition-transform'} ${open && !loading ? 'rotate-180' : ''}`
+    )
+
+    // ---- Variant slots ----
+    const variantSlots = $derived(
+        selectMenuVariants({
+            variant,
+            color: resolvedColor,
+            size: resolvedSize,
+            leading: isLeading,
+            trailing: true,
+            loading,
+            highlight: resolvedHighlight,
+            side,
+            transition
+        })
+    )
+
+    // ---- Trigger classes ----
+    const rootClass = $derived(
+        variantSlots.root({
+            class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
+        })
+    )
+    const baseClass = $derived(
+        variantSlots.base({
+            class: [config.slots.base, fieldGroupClass?.base, ui?.base]
+        })
+    )
+    const leadingClass = $derived(
+        variantSlots.leading({ class: [config.slots.leading, ui?.leading] })
+    )
+    const leadingIconStyleClass = $derived(
+        variantSlots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] })
+    )
+    const leadingAvatarClass = $derived(
+        variantSlots.leadingAvatar({ class: [config.slots.leadingAvatar, ui?.leadingAvatar] })
+    )
+    const leadingAvatarSizeClass = $derived(variantSlots.leadingAvatarSize() as AvatarSize)
+    const trailingStyleClass = $derived(
+        variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] })
+    )
+    const trailingIconBaseClass = $derived(
+        variantSlots.trailingIcon({ class: [config.slots.trailingIcon, ui?.trailingIcon] })
+    )
+    const valueClass = $derived(variantSlots.value({ class: [config.slots.value, ui?.value] }))
+    const placeholderClass = $derived(
+        variantSlots.placeholder({ class: [config.slots.placeholder, ui?.placeholder] })
+    )
+
+    // ---- Content classes ----
+    const contentClass = $derived(
+        variantSlots.content({ class: [config.slots.content, ui?.content] })
+    )
+    const inputClass = $derived(variantSlots.input({ class: [config.slots.input, ui?.input] }))
+    const viewportClass = $derived(
+        variantSlots.viewport({ class: [config.slots.viewport, ui?.viewport] })
+    )
+    const groupLabelClass = $derived(
+        variantSlots.groupLabel({ class: [config.slots.groupLabel, ui?.groupLabel] })
+    )
+    const separatorClass = $derived(
+        variantSlots.separator({ class: [config.slots.separator, ui?.separator] })
+    )
+    const emptyClass = $derived(variantSlots.empty({ class: [config.slots.empty, ui?.empty] }))
+
+    // ---- Item classes ----
+    const itemClass = $derived(variantSlots.item({ class: [config.slots.item, ui?.item] }))
+    const itemIconClass = $derived(
+        variantSlots.itemIcon({ class: [config.slots.itemIcon, ui?.itemIcon] })
+    )
+    const itemAvatarClass = $derived(
+        variantSlots.itemAvatar({ class: [config.slots.itemAvatar, ui?.itemAvatar] })
+    )
+    const itemAvatarSizeClass = $derived(variantSlots.itemAvatarSize() as AvatarSize)
+    const itemLabelClass = $derived(
+        variantSlots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] })
+    )
+    const itemDescriptionClass = $derived(
+        variantSlots.itemDescription({
+            class: [config.slots.itemDescription, ui?.itemDescription]
+        })
+    )
+    const itemIndicatorClass = $derived(
+        variantSlots.itemIndicator({ class: [config.slots.itemIndicator, ui?.itemIndicator] })
+    )
+
+    // ---- Type guards ----
+    function isSelectItem(item: SelectMenuItemType): item is SelectMenuItem {
+        return !('type' in item)
+    }
+
+    function isSeparator(item: SelectMenuItemType): item is { type: 'separator' } {
+        return 'type' in item && item.type === 'separator'
+    }
+
+    function isLabel(item: SelectMenuItemType): item is { type: 'label'; label: string } {
+        return 'type' in item && item.type === 'label'
+    }
+
+    // ---- Event handlers (Nuxt UI v4 pattern) ----
+    function onUpdateOpen(val: boolean) {
+        if (!val) {
+            searchTerm = ''
+        }
+        onOpenChange?.(val)
+    }
+</script>
+
+{#snippet renderItem(item: SelectMenuItem, index: number)}
+    {@const isSelected = value === item.value}
+    <Combobox.Item
+        value={item.value}
+        label={item.label ?? item.value}
+        disabled={item.disabled}
+        class={itemClass}
+    >
+        {#if itemLeading}
+            {@render itemLeading({ item, index, selected: isSelected })}
+        {:else if item.avatar}
+            <Avatar {...item.avatar} size={itemAvatarSizeClass} class={itemAvatarClass} />
+        {:else if item.icon}
+            <Icon name={item.icon} class={itemIconClass} />
+        {/if}
+
+        {#if itemLabelSlot}
+            {@render itemLabelSlot({ item, index, selected: isSelected })}
+        {:else}
+            <div class={item.description ? 'flex flex-col' : undefined}>
+                <span class={itemLabelClass}>{item.label ?? item.value}</span>
+                {#if item.description}
+                    <span class={itemDescriptionClass}>{item.description}</span>
+                {/if}
+            </div>
+        {/if}
+
+        {#if itemTrailing}
+            {@render itemTrailing({ item, index, selected: isSelected })}
+        {:else if isSelected}
+            <Icon name={selectedIcon} class={itemIndicatorClass} />
+        {/if}
+    </Combobox.Item>
+{/snippet}
+
+{#snippet contentEl()}
+    <Combobox.Content
+        {side}
+        {sideOffset}
+        {align}
+        {alignOffset}
+        {avoidCollisions}
+        {collisionBoundary}
+        {collisionPadding}
+        {onEscapeKeydown}
+        {onInteractOutside}
+        {forceMount}
+        class={contentClass}
+    >
+        <Input
+            autofocus
+            placeholder={searchPlaceholder}
+            value={searchTerm}
+            oninput={(e) => (searchTerm = (e.currentTarget as HTMLInputElement).value)}
+            variant="none"
+            size={resolvedSize}
+            class={inputClass}
+        />
+
+        {#if contentSlot}
+            {@render contentSlot({ open, searchTerm })}
+        {:else}
+            <div class={viewportClass}>
+                {#each filteredItems as selectItem, index ('value' in selectItem ? selectItem.value : `${selectItem.type}-${index}`)}
+                    {#if isSeparator(selectItem)}
+                        <div role="separator" class={separatorClass}></div>
+                    {:else if isLabel(selectItem)}
+                        <Combobox.Group>
+                            <Combobox.GroupHeading class={groupLabelClass}
+                                >{selectItem.label}</Combobox.GroupHeading
+                            >
+                        </Combobox.Group>
+                    {:else if isSelectItem(selectItem)}
+                        {#if itemSlot}
+                            {@render itemSlot({
+                                item: selectItem,
+                                index,
+                                selected: value === selectItem.value
+                            })}
+                        {:else}
+                            {@render renderItem(selectItem, index)}
+                        {/if}
+                    {/if}
+                {/each}
+
+                {#if !hasFilteredSelectItems}
+                    {#if emptySlot}
+                        {@render emptySlot({ searchTerm })}
+                    {:else}
+                        <div class={emptyClass}>{emptyText}</div>
+                    {/if}
+                {/if}
+            </div>
+        {/if}
+    </Combobox.Content>
+{/snippet}
+
+<Combobox.Root
+    type="single"
+    bind:open
+    onOpenChange={onUpdateOpen}
+    {disabled}
+    {required}
+    {value}
+    onValueChange={(val) => (value = val)}
+    name={resolvedName}
+>
+    <div bind:this={ref} class={rootClass}>
+        {#if leadingSlot}
+            <span class={leadingClass}>
+                {@render leadingSlot()}
+            </span>
+        {:else if isLeading && leadingIconName}
+            <span class={leadingClass}>
+                <Icon name={leadingIconName} class={leadingIconStyleClass} />
+            </span>
+        {:else if displayAvatar}
+            <span class={leadingClass}>
+                <Avatar
+                    {...displayAvatar}
+                    size={leadingAvatarSizeClass}
+                    class={leadingAvatarClass}
+                />
+            </span>
+        {/if}
+
+        <Combobox.Input
+            class="pointer-events-none absolute inset-0 opacity-0"
+            tabindex={-1}
+            aria-hidden="true"
+        />
+
+        <Combobox.Trigger
+            id={resolvedId}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={resolvedHighlight ? true : undefined}
+            class={baseClass}
+        >
+            {#if value && displayLabel}
+                <span class={valueClass}>{displayLabel}</span>
+            {:else if placeholder}
+                <span class={placeholderClass}>{placeholder}</span>
+            {/if}
+        </Combobox.Trigger>
+
+        {#if trailingSlot}
+            <span class={trailingStyleClass}>
+                {@render trailingSlot()}
+            </span>
+        {:else}
+            <span class={trailingStyleClass}>
+                <Icon name={trailingIconName} class="{trailingIconBaseClass} {trailingIconClass}" />
+            </span>
+        {/if}
+    </div>
+
+    {#if portal}
+        <Combobox.Portal>
+            {@render contentEl()}
+        </Combobox.Portal>
+    {:else}
+        {@render contentEl()}
+    {/if}
+</Combobox.Root>

package/dist/SelectMenu/SelectMenu.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { SelectMenuProps } from './select-menu.types.js';
+export type Props = SelectMenuProps;
+declare const SelectMenu: import("svelte").Component<SelectMenuProps, {}, "ref" | "value" | "open">;
+type SelectMenu = ReturnType<typeof SelectMenu>;
+export default SelectMenu;

package/dist/SelectMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectMenu } from './SelectMenu.svelte';
+export type { SelectMenuProps, SelectMenuItem, SelectMenuItemType } from './select-menu.types.js';

package/dist/SelectMenu/index.js

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

package/dist/SelectMenu/select-menu.types.d.ts

@@ -0,0 +1,262 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { SelectMenuVariantProps, SelectMenuSlots } from './select-menu.variants.js';
+import type { AvatarProps } from '../Avatar/avatar.types.js';
+import type { ComboboxContentPropsWithoutHTML } from 'bits-ui';
+/**
+ * A single selectable option within the SelectMenu.
+ */
+export interface SelectMenuItem {
+    /**
+     * The value submitted on form submission or returned via binding.
+     */
+    value: string;
+    /**
+     * The display text for this item.
+     * Falls back to `value` when not provided.
+     */
+    label?: string;
+    /**
+     * Optional description shown below the label.
+     */
+    description?: string;
+    /**
+     * Icon displayed before the label.
+     * Supports any Iconify icon name.
+     */
+    icon?: string;
+    /**
+     * Avatar displayed before the label.
+     * Takes precedence over `icon`.
+     */
+    avatar?: AvatarProps;
+    /**
+     * Whether this item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * A visual separator between items.
+ */
+export interface SelectMenuItemSeparator {
+    type: 'separator';
+}
+/**
+ * A non-selectable group label/heading.
+ */
+export interface SelectMenuItemLabel {
+    type: 'label';
+    /**
+     * The text displayed as the group label.
+     */
+    label: string;
+}
+/**
+ * Union type for all possible select menu items.
+ */
+export type SelectMenuItemType = SelectMenuItem | SelectMenuItemSeparator | SelectMenuItemLabel;
+/**
+ * Props passed to select menu item snippet slots.
+ */
+export interface SelectMenuItemSlotProps {
+    /** The current select menu item data */
+    item: SelectMenuItem;
+    /** Zero-based index of the item */
+    index: number;
+    /** Whether the item is currently selected */
+    selected?: boolean;
+}
+type ContentProps = Pick<ComboboxContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'onEscapeKeydown' | 'onInteractOutside' | 'forceMount'>;
+/**
+ * Props for the SelectMenu component.
+ *
+ * A searchable select dropdown built on bits-ui Combobox.
+ * Supports filtering, icons, avatars, groups, and empty states.
+ *
+ * @see https://bits-ui.com/docs/components/combobox
+ */
+export interface SelectMenuProps extends ContentProps {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The currently selected value. Supports two-way binding with `bind:value`.
+     */
+    value?: string;
+    /**
+     * Whether the dropdown is open. Supports two-way binding with `bind:open`.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Callback fired when open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Array of items to display in the select menu dropdown.
+     */
+    items?: SelectMenuItemType[];
+    /**
+     * Placeholder text shown when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * The search input placeholder text.
+     * @default 'Search...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * The form field name attribute.
+     */
+    name?: string;
+    /**
+     * Whether the field is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the select menu is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controls the visual style of the select trigger.
+     * @default 'outline'
+     */
+    variant?: NonNullable<SelectMenuVariantProps['variant']>;
+    /**
+     * Sets the color scheme for focus ring and highlight.
+     * @default 'primary'
+     */
+    color?: NonNullable<SelectMenuVariantProps['color']>;
+    /**
+     * Controls the dimensions and text size.
+     * @default 'md'
+     */
+    size?: NonNullable<SelectMenuVariantProps['size']>;
+    /**
+     * Emphasizes ring color like focus state, even when not focused.
+     * Automatically enabled when used inside a FormField with an error.
+     * @default false
+     */
+    highlight?: boolean;
+    /**
+     * Icon displayed on the leading side of the trigger.
+     * Supports any valid Iconify icon name.
+     */
+    icon?: string;
+    /**
+     * Icon placed before the selected value.
+     * Supports any valid Iconify icon name.
+     */
+    leadingIcon?: string;
+    /**
+     * Icon placed after the selected value (chevron area).
+     * @default 'lucide:chevron-down'
+     */
+    trailingIcon?: string;
+    /**
+     * Icon displayed next to selected items in the dropdown.
+     * @default 'lucide:check'
+     */
+    selectedIcon?: string;
+    /**
+     * Renders a loading spinner.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Icon displayed as the loading indicator.
+     * @default Uses `icons.loading` from app config
+     */
+    loadingIcon?: string;
+    /**
+     * Avatar displayed before the selected value on the trigger.
+     * Takes precedence over `leadingIcon`.
+     */
+    avatar?: AvatarProps;
+    /**
+     * Fields to search when filtering items.
+     * @default ['label', 'value']
+     */
+    filterFields?: string[];
+    /**
+     * Disables the default filtering. Use this for server-side / custom filtering.
+     * @default false
+     */
+    ignoreFilter?: boolean;
+    /**
+     * Text to display when no items match the search.
+     * @default 'No results found.'
+     */
+    emptyText?: string;
+    /**
+     * Animate the dropdown on open and close.
+     * @default true
+     */
+    transition?: SelectMenuVariantProps['transition'];
+    /**
+     * Render the dropdown content in a portal.
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * The HTML `id` attribute for the trigger element.
+     */
+    id?: string;
+    /**
+     * Additional CSS classes for the root wrapper.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override classes for specific select menu slots.
+     */
+    ui?: Partial<Record<SelectMenuSlots, ClassNameValue>>;
+    /**
+     * Custom content rendered before the selected value in the trigger.
+     * Takes precedence over `avatar` and `leadingIcon`.
+     */
+    leadingSlot?: Snippet;
+    /**
+     * Custom content rendered after the selected value in the trigger.
+     * Takes precedence over `trailingIcon`.
+     */
+    trailingSlot?: Snippet;
+    /**
+     * Custom snippet for rendering individual items in the dropdown.
+     * When provided, replaces the default item rendering.
+     */
+    item?: Snippet<[SelectMenuItemSlotProps]>;
+    /**
+     * Custom snippet for the leading section of items.
+     * Replaces the default icon/avatar when provided.
+     */
+    itemLeading?: Snippet<[SelectMenuItemSlotProps]>;
+    /**
+     * Custom snippet for the label section of items.
+     * Replaces the default label text when provided.
+     */
+    itemLabel?: Snippet<[SelectMenuItemSlotProps]>;
+    /**
+     * Custom snippet for the trailing section of items (selected indicator area).
+     * Replaces the default check icon when provided.
+     */
+    itemTrailing?: Snippet<[SelectMenuItemSlotProps]>;
+    /**
+     * Custom empty state snippet.
+     */
+    empty?: Snippet<[{
+        searchTerm: string;
+    }]>;
+    /**
+     * Custom dropdown content.
+     * When provided, replaces the default items rendering entirely.
+     */
+    content?: Snippet<[{
+        open: boolean;
+        searchTerm: string;
+    }]>;
+}
+export {};