sv5ui 2.1.0 → 2.3.0

package/dist/components/SelectMenu/SelectMenu.svelte

@@ -0,0 +1,544 @@
+<script lang="ts" module>const CREATE_ITEM_VALUE = "@@sv5ui/select-menu/create-item";
+</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
+} from "../FieldGroup/field-group.variants.js";
+import Icon from "../Icon/Icon.svelte";
+import Avatar from "../Avatar/Avatar.svelte";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
+import { useDebouncedState } from "../../hooks/useDebouncedState/index.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,
+  multiple = false,
+  separator = ", ",
+  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"],
+  ignoreFilter = false,
+  emptyText = "No results found.",
+  createItem = false,
+  createItemLabel = (value2) => `Create "${value2}"`,
+  createItemIcon,
+  onCreate,
+  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,
+  selected: selectedSlot,
+  empty: emptySlot,
+  content: contentSlot,
+  ...restProps
+} = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const fieldGroupContext = getContext("fieldGroup");
+const hasError = $derived(
+  formFieldContext?.error !== void 0 && 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"] : void 0
+);
+const resolvedId = $derived(id ?? formFieldContext?.ariaId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const ariaDescribedBy = $derived(
+  !formFieldContext ? void 0 : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+);
+let createdItems = $state([]);
+const combinedItems = $derived.by(() => {
+  const propValues = new Set(
+    items.filter((i) => !("type" in i)).map((i) => i.value)
+  );
+  const extras = createdItems.filter((c) => !propValues.has(c.value));
+  return [...items, ...extras];
+});
+const itemsMap = $derived(
+  new Map(
+    combinedItems.filter((i) => !("type" in i)).map((i) => [i.value, i])
+  )
+);
+const selectedValues = $derived(
+  multiple ? Array.isArray(value) ? value : [] : typeof value === "string" && value !== "" ? [value] : []
+);
+const selectedItems = $derived(
+  selectedValues.map((v) => itemsMap.get(v)).filter((i) => i !== void 0)
+);
+const hasSelection = $derived(selectedValues.length > 0);
+const singleSelectedItem = $derived(multiple ? void 0 : selectedItems[0]);
+const displayLabel = $derived(
+  multiple ? selectedItems.map((i) => i.label ?? i.value).join(separator) : singleSelectedItem?.label ?? singleSelectedItem?.value ?? ""
+);
+function removeValue(val) {
+  if (!multiple) return;
+  value = selectedValues.filter((v) => v !== val);
+  emit.onChange();
+}
+function clearSelection() {
+  if (!multiple) return;
+  value = [];
+  emit.onChange();
+}
+const search = useDebouncedState("", 200);
+function setSearch(term) {
+  search.current = term;
+}
+function resetSearch() {
+  search.setImmediate("");
+}
+const filteredItems = $derived(
+  ignoreFilter || !search.debounced.trim() ? combinedItems : combinedItems.filter((item) => {
+    if ("type" in item) return true;
+    const query = search.debounced.toLowerCase();
+    return filterFields.some((field) => {
+      const val = item[field];
+      return typeof val === "string" && val.toLowerCase().includes(query);
+    });
+  })
+);
+const hasFilteredSelectItems = $derived(filteredItems.some((item) => !("type" in item)));
+const trimmedSearch = $derived(search.current.trim());
+const exactMatchExists = $derived.by(() => {
+  if (!trimmedSearch) return false;
+  const query = trimmedSearch.toLowerCase();
+  for (const i of combinedItems) {
+    if ("type" in i) continue;
+    if (i.value.toLowerCase() === query || (i.label ?? i.value).toLowerCase() === query) {
+      return true;
+    }
+  }
+  return false;
+});
+const showCreateItem = $derived.by(() => {
+  if (!createItem) return false;
+  if (!trimmedSearch) return false;
+  const mode = createItem === true ? "lazy" : createItem;
+  if (mode === "always") return true;
+  return !exactMatchExists;
+});
+const resolvedCreateLabel = $derived(
+  typeof createItemLabel === "function" ? createItemLabel(trimmedSearch) : createItemLabel
+);
+function findItemByCaseInsensitive(query) {
+  const q = query.toLowerCase();
+  for (const it of itemsMap.values()) {
+    if (it.value.toLowerCase() === q || (it.label ?? it.value).toLowerCase() === q) {
+      return it;
+    }
+  }
+  return void 0;
+}
+function selectValue(val) {
+  if (multiple) {
+    if (!selectedValues.includes(val)) {
+      value = [...selectedValues, val];
+    }
+  } else {
+    value = val;
+  }
+}
+function handleCreate() {
+  if (!showCreateItem) return;
+  const newValue = trimmedSearch;
+  if (!newValue) return;
+  const existing = findItemByCaseInsensitive(newValue);
+  if (existing) {
+    selectValue(existing.value);
+  } else {
+    createdItems = [...createdItems, { value: newValue, label: newValue }];
+    selectValue(newValue);
+    onCreate?.(newValue);
+  }
+  emit.onChange();
+  resetSearch();
+}
+const displayAvatar = $derived(multiple ? avatar : singleSelectedItem?.avatar ?? avatar);
+const displayIcon = $derived(
+  multiple ? leadingIcon ?? icon : singleSelectedItem?.icon ?? leadingIcon ?? icon
+);
+const isLeading = $derived(!!leadingSlot || !!displayAvatar || !!displayIcon);
+const leadingIconName = $derived(
+  loading && isLeading ? loadingIcon : !displayAvatar ? displayIcon : void 0
+);
+const trailingIconName = $derived(loading && !isLeading ? loadingIcon : trailingIcon);
+const trailingIconClass = $derived(
+  `${loading && !isLeading ? "animate-spin" : "transition-transform"} ${open && !loading ? "rotate-180" : ""}`
+);
+const variantSlots = $derived(
+  selectMenuVariants({
+    variant,
+    color: resolvedColor,
+    size: resolvedSize,
+    leading: isLeading,
+    trailing: true,
+    loading,
+    highlight: resolvedHighlight,
+    side,
+    transition
+  })
+);
+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());
+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] })
+);
+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] }));
+const createItemClass = $derived(
+  variantSlots.createItem({ class: [config.slots.createItem, ui?.createItem] })
+);
+const createItemIconClass = $derived(
+  variantSlots.createItemIcon({ class: [config.slots.createItemIcon, ui?.createItemIcon] })
+);
+const createItemLabelClass = $derived(
+  variantSlots.createItemLabel({
+    class: [config.slots.createItemLabel, ui?.createItemLabel]
+  })
+);
+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());
+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] })
+);
+function isSelectItem(item) {
+  return !("type" in item);
+}
+function isSeparator(item) {
+  return "type" in item && item.type === "separator";
+}
+function isLabel(item) {
+  return "type" in item && item.type === "label";
+}
+function onUpdateOpen(val) {
+  if (!val) {
+    resetSearch();
+    emit.onBlur();
+  } else {
+    emit.onFocus();
+  }
+  onOpenChange?.(val);
+}
+</script>
+
+{#snippet renderItem(item: SelectMenuItem, index: number)}
+    {@const isSelected = selectedValues.includes(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
+            type="text"
+            placeholder={searchPlaceholder}
+            value={search.current}
+            oninput={(e) => setSearch((e.currentTarget as HTMLInputElement).value)}
+            onkeydown={(e: KeyboardEvent) => {
+                if (e.key !== 'Enter') return
+                if (!showCreateItem) return
+                e.preventDefault()
+                handleCreate()
+            }}
+            class={inputClass}
+        />
+
+        {#if contentSlot}
+            {@render contentSlot({ open, searchTerm: search.current })}
+        {: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: selectedValues.includes(selectItem.value)
+                            })}
+                        {:else}
+                            {@render renderItem(selectItem, index)}
+                        {/if}
+                    {/if}
+                {/each}
+
+                {#if !hasFilteredSelectItems && !showCreateItem}
+                    {#if emptySlot}
+                        {@render emptySlot({ searchTerm: search.current })}
+                    {:else}
+                        <div class={emptyClass}>{emptyText}</div>
+                    {/if}
+                {/if}
+
+                {#if showCreateItem}
+                    <Combobox.Item
+                        value={CREATE_ITEM_VALUE}
+                        label={resolvedCreateLabel}
+                        {disabled}
+                        class={createItemClass}
+                    >
+                        {#if createItemIcon}
+                            <Icon name={createItemIcon} class={createItemIconClass} />
+                        {/if}
+                        <span class={createItemLabelClass}>{resolvedCreateLabel}</span>
+                    </Combobox.Item>
+                {/if}
+            </div>
+        {/if}
+    </Combobox.Content>
+{/snippet}
+
+{#snippet rootChildren()}
+    <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-label={searchPlaceholder}
+        />
+
+        <Combobox.Trigger
+            {...restProps}
+            id={resolvedId}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={resolvedHighlight ? true : undefined}
+            class={baseClass}
+        >
+            {#snippet child({ props })}
+                <div {...props} role="button" tabindex={disabled ? -1 : 0}>
+                    {#if selectedSlot && hasSelection}
+                        {@render selectedSlot({
+                            items: selectedItems,
+                            remove: removeValue,
+                            clear: clearSelection
+                        })}
+                    {:else if hasSelection && displayLabel}
+                        <span class={valueClass}>{displayLabel}</span>
+                    {:else if placeholder}
+                        <span class={placeholderClass}>{placeholder}</span>
+                    {/if}
+                </div>
+            {/snippet}
+        </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}
+{/snippet}
+
+{#if multiple}
+    <Combobox.Root
+        type="multiple"
+        bind:open
+        onOpenChange={onUpdateOpen}
+        {disabled}
+        {required}
+        value={selectedValues}
+        onValueChange={(val) => {
+            if (Array.isArray(val) && val.includes(CREATE_ITEM_VALUE)) {
+                handleCreate()
+                return
+            }
+            value = val
+            emit.onChange()
+        }}
+        name={resolvedName}
+    >
+        {@render rootChildren()}
+    </Combobox.Root>
+{:else}
+    <Combobox.Root
+        type="single"
+        bind:open
+        onOpenChange={onUpdateOpen}
+        {disabled}
+        {required}
+        value={selectedValues[0] ?? ''}
+        onValueChange={(val) => {
+            if (val === CREATE_ITEM_VALUE) {
+                handleCreate()
+                return
+            }
+            value = val
+            emit.onChange()
+        }}
+        name={resolvedName}
+    >
+        {@render rootChildren()}
+    </Combobox.Root>
+{/if}

package/dist/components/SelectMenu/SelectMenuFormFieldTestWrapper.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">import FormField from "../FormField/FormField.svelte";
+import SelectMenu from "./SelectMenu.svelte";
+let { items = [] } = $props();
+</script>
+
+<FormField name="fruit" label="Fruit">
+    <SelectMenu open {items} placeholder="Pick" />
+</FormField>

package/dist/components/Separator/Separator.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { Separator } from "bits-ui";
+import { separatorVariants, separatorDefaults } from "./separator.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import Avatar from "../Avatar/Avatar.svelte";
+const config = getComponentConfig("separator", separatorDefaults);
+let {
+  ref = $bindable(null),
+  ui,
+  label,
+  icon,
+  avatar,
+  color = config.defaultVariants.color,
+  size = config.defaultVariants.size,
+  type = config.defaultVariants.type,
+  orientation = config.defaultVariants.orientation,
+  position = config.defaultVariants.position,
+  decorative = false,
+  class: className,
+  content,
+  ...restProps
+} = $props();
+const hasContent = $derived(!!label || !!icon || !!avatar || !!content);
+const classes = $derived.by(() => {
+  const slots = separatorVariants({ color, size, type, orientation });
+  return {
+    root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+    border: slots.border({ class: [config.slots.border, ui?.border] }),
+    container: slots.container({ class: [config.slots.container, ui?.container] }),
+    icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+    avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
+    label: slots.label({ class: [config.slots.label, ui?.label] })
+  };
+});
+</script>
+
+<Separator.Root bind:ref class={classes.root} {orientation} {decorative} {...restProps}>
+    {#if hasContent}
+        {#if position !== 'start'}
+            <div class={classes.border}></div>
+        {/if}
+
+        <div class={classes.container}>
+            {#if content}
+                {@render content()}
+            {:else if avatar}
+                <Avatar
+                    {...avatar}
+                    size={avatar.size ?? (config.avatarSize as AvatarSize)}
+                    class={classes.avatar}
+                />
+            {:else if icon}
+                <Icon name={icon} class={classes.icon} />
+            {:else if label}
+                <span class={classes.label}>{label}</span>
+            {/if}
+        </div>
+
+        {#if position !== 'end'}
+            <div class={classes.border}></div>
+        {/if}
+    {:else}
+        <div class={classes.border}></div>
+    {/if}
+</Separator.Root>

package/dist/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { skeletonVariants, skeletonDefaults } from "./skeleton.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("skeleton", skeletonDefaults);
+let {
+  ref = $bindable(null),
+  as = "div",
+  ui,
+  class: className,
+  children,
+  ...restProps
+} = $props();
+const slots = skeletonVariants();
+const classes = $derived({
+  root: slots.root({ class: [config.slots.root, className, ui?.root] })
+});
+</script>
+
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    role="alert"
+    aria-busy="true"
+    aria-label="loading"
+    aria-live="polite"
+    {...restProps}
+>
+    {@render children?.()}
+</svelte:element>