sv5ui 2.0.0 → 2.2.0

package/dist/{DropdownMenu → components/DropdownMenu}/DropdownMenu.svelte

@@ -1,129 +1,104 @@
-<script lang="ts" module>
-    import type {
-        DropdownMenuProps,
-        DropdownMenuItem,
-        DropdownMenuItemAction,
-        DropdownMenuItemCheckbox,
-        DropdownMenuItemRadio,
-        DropdownMenuItemSub
-    } from './dropdown-menu.types.js'
-
-    export type Props = DropdownMenuProps
-</script>
-
-<script lang="ts">
-    import { DropdownMenu } from 'bits-ui'
-    import {
-        dropdownMenuVariants,
-        dropdownMenuDefaults,
-        itemColorClasses
-    } from './dropdown-menu.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Kbd from '../Kbd/Kbd.svelte'
-
-    const config = getComponentConfig('dropdownMenu', dropdownMenuDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        open = $bindable(false),
-        onOpenChange,
-        items = [],
-        radioGroups = [],
-        checkedIcon = icons.check,
-        submenuIcon = icons.chevronRight,
-        side = 'bottom',
-        sideOffset = 4,
-        align = 'start',
-        alignOffset = 0,
-        avoidCollisions = true,
-        collisionBoundary,
-        collisionPadding = 8,
-        sticky = 'partial',
-        hideWhenDetached = false,
-        onEscapeKeydown,
-        onInteractOutside,
-        onCloseAutoFocus,
-        forceMount,
-        loop = true,
-        arrow = false,
-        transition = config.defaultVariants.transition ?? true,
-        portal = true,
-        size = config.defaultVariants.size ?? 'md',
-        ui,
-        class: className,
-        children,
-        header,
-        footer,
-        item: itemSlot,
-        itemLeading,
-        itemLabel,
-        itemTrailing,
-        content: contentSlot
-    }: Props = $props()
-
-    const hasRadioItems = $derived(items.some((i) => i.type === 'radio'))
-    const firstRadioGroup = $derived(radioGroups[0])
-
-    const variantSlots = $derived(dropdownMenuVariants({ transition, size }))
-    const classes = $derived({
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
-        arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] }),
-        group: variantSlots.group({ class: [config.slots.group, ui?.group] }),
-        separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
-        label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
-        item: variantSlots.item({ class: [config.slots.item, ui?.item] }),
-        itemLeadingIcon: variantSlots.itemLeadingIcon({
-            class: [config.slots.itemLeadingIcon, ui?.itemLeadingIcon]
-        }),
-        itemLabel: variantSlots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] }),
-        itemTrailingKbds: variantSlots.itemTrailingKbds({
-            class: [config.slots.itemTrailingKbds, ui?.itemTrailingKbds]
-        }),
-        itemIndicator: variantSlots.itemIndicator({
-            class: [config.slots.itemIndicator, ui?.itemIndicator]
-        }),
-        subTrigger: variantSlots.subTrigger({ class: [config.slots.subTrigger, ui?.subTrigger] }),
-        subTriggerIcon: variantSlots.subTriggerIcon({
-            class: [config.slots.subTriggerIcon, ui?.subTriggerIcon]
-        }),
-        subContent: variantSlots.subContent({ class: [config.slots.subContent, ui?.subContent] })
-    })
-
-    const arrowProps = $derived.by(() => {
-        if (typeof arrow === 'object') return { width: 12, height: 6, ...arrow }
-        return { width: 12, height: 6 }
-    })
-
-    function close() {
-        open = false
-    }
-
-    // Type guards
-    function isActionItem(item: DropdownMenuItem): item is DropdownMenuItemAction {
-        return !item.type || item.type === 'item'
-    }
-
-    function isCheckboxItem(item: DropdownMenuItem): item is DropdownMenuItemCheckbox {
-        return item.type === 'checkbox'
-    }
-
-    function isRadioItem(item: DropdownMenuItem): item is DropdownMenuItemRadio {
-        return item.type === 'radio'
-    }
-
-    function isSubItem(item: DropdownMenuItem): item is DropdownMenuItemSub {
-        return item.type === 'sub'
-    }
-
-    function isSeparator(item: DropdownMenuItem): item is { type: 'separator' } {
-        return item.type === 'separator'
-    }
-
-    function isLabel(item: DropdownMenuItem): item is { type: 'label'; label: string } {
-        return item.type === 'label'
-    }
+<script lang="ts" module></script>
+
+<script lang="ts">import { DropdownMenu } from "bits-ui";
+import {
+  dropdownMenuVariants,
+  dropdownMenuDefaults,
+  itemColorClasses
+} from "./dropdown-menu.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import Kbd from "../Kbd/Kbd.svelte";
+const config = getComponentConfig("dropdownMenu", dropdownMenuDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  open = $bindable(false),
+  onOpenChange,
+  items = [],
+  radioGroups = [],
+  checkedIcon = icons.check,
+  submenuIcon = icons.chevronRight,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  alignOffset = 0,
+  avoidCollisions = true,
+  collisionBoundary,
+  collisionPadding = 8,
+  sticky = "partial",
+  hideWhenDetached = false,
+  onEscapeKeydown,
+  onInteractOutside,
+  onCloseAutoFocus,
+  forceMount,
+  loop = true,
+  arrow = false,
+  transition = config.defaultVariants.transition ?? true,
+  portal = true,
+  size = config.defaultVariants.size ?? "md",
+  ui,
+  class: className,
+  children,
+  header,
+  footer,
+  item: itemSlot,
+  itemLeading,
+  itemLabel,
+  itemTrailing,
+  content: contentSlot
+} = $props();
+const hasRadioItems = $derived(items.some((i) => i.type === "radio"));
+const firstRadioGroup = $derived(radioGroups[0]);
+const variantSlots = $derived(dropdownMenuVariants({ transition, size }));
+const classes = $derived({
+  content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+  arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] }),
+  group: variantSlots.group({ class: [config.slots.group, ui?.group] }),
+  separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
+  label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
+  item: variantSlots.item({ class: [config.slots.item, ui?.item] }),
+  itemLeadingIcon: variantSlots.itemLeadingIcon({
+    class: [config.slots.itemLeadingIcon, ui?.itemLeadingIcon]
+  }),
+  itemLabel: variantSlots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] }),
+  itemTrailingKbds: variantSlots.itemTrailingKbds({
+    class: [config.slots.itemTrailingKbds, ui?.itemTrailingKbds]
+  }),
+  itemIndicator: variantSlots.itemIndicator({
+    class: [config.slots.itemIndicator, ui?.itemIndicator]
+  }),
+  subTrigger: variantSlots.subTrigger({ class: [config.slots.subTrigger, ui?.subTrigger] }),
+  subTriggerIcon: variantSlots.subTriggerIcon({
+    class: [config.slots.subTriggerIcon, ui?.subTriggerIcon]
+  }),
+  subContent: variantSlots.subContent({ class: [config.slots.subContent, ui?.subContent] })
+});
+const arrowProps = $derived.by(() => {
+  if (typeof arrow === "object") return { width: 12, height: 6, ...arrow };
+  return { width: 12, height: 6 };
+});
+function close() {
+  open = false;
+}
+function isActionItem(item) {
+  return !item.type || item.type === "item";
+}
+function isCheckboxItem(item) {
+  return item.type === "checkbox";
+}
+function isRadioItem(item) {
+  return item.type === "radio";
+}
+function isSubItem(item) {
+  return item.type === "sub";
+}
+function isSeparator(item) {
+  return item.type === "separator";
+}
+function isLabel(item) {
+  return item.type === "label";
+}
 </script>
 
 {#snippet renderKbds(kbds: DropdownMenuItemAction['kbds'])}
@@ -187,7 +162,7 @@
             {:else}
                 <span class={classes.itemIndicator}>
                     {#if item.checked}
-                        <Icon name={checkedIcon} />
+                        <Icon name={checkedIcon} class="size-full" />
                     {/if}
                 </span>
             {/if}
@@ -216,7 +191,7 @@
             {:else}
                 <span class={classes.itemIndicator}>
                     {#if firstRadioGroup?.value === item.value}
-                        <Icon name={checkedIcon} />
+                        <Icon name={checkedIcon} class="size-full" />
                     {/if}
                 </span>
             {/if}

package/dist/components/DropdownMenu/DropdownMenuTriggerTestWrapper.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import DropdownMenu from "./DropdownMenu.svelte";
+let { items = [] } = $props();
+</script>
+
+<DropdownMenu {items}>
+    {#snippet children({ open, props })}
+        <button data-testid="trigger" data-open={open} {...props}>Open</button>
+    {/snippet}
+</DropdownMenu>