@auronui/vue 1.0.12 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/cjs/index.cjs +785 -711
  2. package/dist/cjs/index.cjs.map +1 -1
  3. package/dist/components/autocomplete/Autocomplete.js.map +1 -1
  4. package/dist/components/autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js +22 -3
  5. package/dist/components/autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js.map +1 -1
  6. package/dist/components/combo-box/ComboBox.js.map +1 -1
  7. package/dist/components/combo-box/ComboBox.vue_vue_type_script_setup_true_lang.js +20 -2
  8. package/dist/components/combo-box/ComboBox.vue_vue_type_script_setup_true_lang.js.map +1 -1
  9. package/dist/components/select/Select.context.js.map +1 -1
  10. package/dist/components/select/Select.js.map +1 -1
  11. package/dist/components/select/Select.vue_vue_type_script_setup_true_lang.js +33 -5
  12. package/dist/components/select/Select.vue_vue_type_script_setup_true_lang.js.map +1 -1
  13. package/dist/components/select/SelectItem.js.map +1 -1
  14. package/dist/components/select/SelectItem.vue_vue_type_script_setup_true_lang.js +2 -2
  15. package/dist/components/select/SelectItem.vue_vue_type_script_setup_true_lang.js.map +1 -1
  16. package/dist/components/select/SelectOverflowChips.js.map +1 -1
  17. package/dist/components/select/SelectOverflowChips.vue_vue_type_script_setup_true_lang.js.map +1 -1
  18. package/dist/components/select/SelectValue.js.map +1 -1
  19. package/dist/components/select/SelectValue.vue_vue_type_script_setup_true_lang.js +1 -1
  20. package/dist/components/select/SelectValue.vue_vue_type_script_setup_true_lang.js.map +1 -1
  21. package/dist/index.d.ts +49 -20
  22. package/dist/index.js +3 -3
  23. package/dist/utils/hasSlotComponent.js +26 -0
  24. package/dist/utils/hasSlotComponent.js.map +1 -0
  25. package/package.json +4 -4
@@ -1 +1 @@
1
- {"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, toRef, useAttrs, useId } from 'vue'\nimport { SelectRoot } from 'reka-ui'\nimport { selectVariants, type SelectVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useSelectProvide } from './Select.context'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'flat',\n size: 'md',\n color: 'default',\n labelPlacement: 'inside',\n fullWidth: false,\n isInvalid: false,\n isDisabled: false,\n isReadonly: false,\n isRequired: false,\n multiple: false,\n modelValue: undefined,\n defaultValue: undefined,\n open: undefined,\n defaultOpen: undefined,\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string | string[]]\n 'update:open': [value: boolean]\n}>()\n\ntype Props = {\n /** Visual style of the field. @default 'flat' */\n variant?: SelectVariants['variant']\n /** Field height. @default 'md' */\n size?: SelectVariants['size']\n /** Accent color applied to focus ring + floating label. @default 'default' */\n color?: SelectVariants['color']\n /**\n * Where the `label` is rendered relative to the field.\n * - `inside`: floats above the trigger (shrinks when focused/filled)\n * - `outside`: sits above the field, static\n * - `outside-left`: sits to the left, horizontal layout\n * @default 'inside'\n */\n labelPlacement?: SelectVariants['labelPlacement']\n /** Stretches root wrapper to 100% width. @default false */\n fullWidth?: boolean\n /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n isInvalid?: boolean\n /** Disables the field. @default false */\n isDisabled?: boolean\n /** Makes the field read-only. @default false */\n isReadonly?: boolean\n /** Adds a required asterisk next to the label. @default false */\n isRequired?: boolean\n /** Placeholder shown when no value is selected. */\n placeholder?: string\n /** Form field name, for native form submission. */\n name?: string\n /** Field label. When omitted, the floating-label behavior is skipped. */\n label?: string\n /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n description?: string\n /** Error text displayed below the field. Only rendered when `isInvalid` is also true. */\n errorMessage?: string\n /** Extra classes merged onto the root wrapper via `composeClassName`. */\n class?: string\n\n /* ─── Select-specific ─────────────────────────────────────── */\n /** Two-way bound selected value. */\n modelValue?: string | string[]\n /** Initial selected value (uncontrolled). */\n defaultValue?: string | string[]\n /** Allow selecting multiple values. modelValue becomes string[]. @default false */\n multiple?: boolean\n /** Controls open state of the dropdown. */\n open?: boolean\n /** Initial open state of the dropdown (uncontrolled). */\n defaultOpen?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst triggerId = computed(() => (attrs.id as string | undefined) ?? generatedId)\n\nconst hasLabel = computed(() => !!props.label)\n\n// Helper IDs / aria wiring\nconst descriptionId = computed(() => `${triggerId.value}-description`)\nconst errorMessageId = computed(() => `${triggerId.value}-error`)\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n if (showError.value) return errorMessageId.value\n if (showDescription.value) return descriptionId.value\n return undefined\n})\n\nconst slotFns = computed(() =>\n selectVariants({\n variant: props.variant,\n size: props.size,\n color: props.color,\n fullWidth: props.fullWidth,\n isInvalid: props.isInvalid,\n isDisabled: props.isDisabled,\n isReadonly: props.isReadonly,\n hasLabel: hasLabel.value,\n labelPlacement: props.labelPlacement,\n }),\n)\n\nconst showOutsideLabel = computed(\n () => hasLabel.value && props.labelPlacement !== 'inside',\n)\n\n// Persistent item registry. SelectItem populates on first mount; entries\n// survive SelectContent unmount so SelectValue can render the label while\n// the popover is closed.\nconst itemRegistry = reactive(new Map<string, string>())\nconst registerItem = (value: string, label: string) => {\n itemRegistry.set(value, label)\n}\nconst itemLabel = (value: string | string[] | undefined | null): string => {\n if (value == null) return ''\n if (Array.isArray(value)) {\n return value.map(v => itemRegistry.get(v) ?? v).filter(Boolean).join(', ')\n }\n return itemRegistry.get(value) ?? value\n}\n\nfunction removeValue(value: string) {\n const current = Array.isArray(props.modelValue) ? props.modelValue : []\n emit('update:modelValue', current.filter(v => v !== value))\n}\n\nuseSelectProvide({\n isDisabled: toRef(props, 'isDisabled'),\n isInvalid: toRef(props, 'isInvalid'),\n isReadonly: toRef(props, 'isReadonly'),\n isRequired: toRef(props, 'isRequired'),\n fullWidth: toRef(props, 'fullWidth'),\n hasLabel,\n labelPlacement: toRef(props, 'labelPlacement'),\n triggerId,\n label: toRef(props, 'label'),\n ariaDescribedBy,\n slots: slotFns,\n multiple: toRef(props, 'multiple'),\n registerItem,\n itemLabel,\n removeValue,\n})\n</script>\n\n<template>\n <div\n :class=\"composeClassName(slotFns.base(), props.class)\"\n :data-invalid=\"isInvalid || undefined\"\n :data-disabled=\"isDisabled || undefined\"\n :data-readonly=\"isReadonly || undefined\"\n :data-required=\"isRequired || undefined\"\n :data-has-label=\"hasLabel || undefined\"\n :data-has-helper=\"hasHelper || undefined\"\n >\n <label\n v-if=\"showOutsideLabel\"\n :for=\"triggerId\"\n :class=\"slotFns.label()\"\n >{{ label }}<span\n v-if=\"isRequired\"\n aria-hidden=\"true\"\n > *</span></label>\n\n <div :class=\"slotFns.mainWrapper()\">\n <SelectRoot\n :model-value=\"props.modelValue\"\n :default-value=\"props.defaultValue\"\n :multiple=\"props.multiple\"\n :open=\"props.open\"\n :default-open=\"props.defaultOpen\"\n :disabled=\"props.isDisabled\"\n :required=\"props.isRequired\"\n :name=\"props.name\"\n @update:model-value=\"emit('update:modelValue', $event as string | string[])\"\n @update:open=\"emit('update:open', $event)\"\n >\n <slot />\n </SelectRoot>\n\n <div\n v-if=\"hasHelper\"\n :class=\"slotFns.helperWrapper()\"\n >\n <div\n v-if=\"showError\"\n :id=\"errorMessageId\"\n :class=\"slotFns.errorMessage()\"\n >\n {{ errorMessage }}\n </div>\n <div\n v-else-if=\"showDescription\"\n :id=\"descriptionId\"\n :class=\"slotFns.description()\"\n >\n {{ description }}\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"mappings":"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"}
1
+ {"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, toRef, useAttrs, useId, useSlots } from 'vue'\nimport { SelectRoot } from 'reka-ui'\nimport { selectVariants, type SelectVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useSelectProvide, type SelectItemValue, type SelectItemData } from './Select.context'\nimport { hasSlotComponent } from '../../utils/hasSlotComponent'\nimport SelectTrigger from './SelectTrigger.vue'\nimport SelectValue from './SelectValue.vue'\nimport SelectContent from './SelectContent.vue'\nimport SelectItem from './SelectItem.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'flat',\n size: 'md',\n color: 'default',\n labelPlacement: 'inside',\n fullWidth: false,\n isInvalid: false,\n isDisabled: false,\n isReadonly: false,\n isRequired: false,\n multiple: false,\n modelValue: undefined,\n defaultValue: undefined,\n open: undefined,\n defaultOpen: undefined,\n items: () => [],\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: SelectItemValue | SelectItemValue[]]\n 'update:open': [value: boolean]\n}>()\n\ntype Props = {\n /** Visual style of the field. @default 'flat' */\n variant?: SelectVariants['variant']\n /** Field height. @default 'md' */\n size?: SelectVariants['size']\n /** Accent color applied to focus ring + floating label. @default 'default' */\n color?: SelectVariants['color']\n /**\n * Where the `label` is rendered relative to the field.\n * - `inside`: floats above the trigger (shrinks when focused/filled)\n * - `outside`: sits above the field, static\n * - `outside-left`: sits to the left, horizontal layout\n * @default 'inside'\n */\n labelPlacement?: SelectVariants['labelPlacement']\n /** Stretches root wrapper to 100% width. @default false */\n fullWidth?: boolean\n /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n isInvalid?: boolean\n /** Disables the field. @default false */\n isDisabled?: boolean\n /** Makes the field read-only. @default false */\n isReadonly?: boolean\n /** Adds a required asterisk next to the label. @default false */\n isRequired?: boolean\n /** Placeholder shown when no value is selected. */\n placeholder?: string\n /** Form field name, for native form submission. */\n name?: string\n /** Field label. When omitted, the floating-label behavior is skipped. */\n label?: string\n /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n description?: string\n /** Error text displayed below the field. Only rendered when `isInvalid` is also true. */\n errorMessage?: string\n /** Extra classes merged onto the root wrapper via `composeClassName`. */\n class?: string\n\n /* ─── Select-specific ─────────────────────────────────────── */\n /** Two-way bound selected value. Accepts string or numeric keys. */\n modelValue?: SelectItemValue | SelectItemValue[]\n /** Initial selected value (uncontrolled). Accepts string or numeric keys. */\n defaultValue?: SelectItemValue | SelectItemValue[]\n /** Allow selecting multiple values. modelValue becomes string[]. @default false */\n multiple?: boolean\n /** Controls open state of the dropdown. */\n open?: boolean\n /** Initial open state of the dropdown (uncontrolled). */\n defaultOpen?: boolean\n /**\n * Data-driven items for the terse API. When provided (and no SelectTrigger /\n * SelectContent is passed as a child), the trigger, value, and popover are\n * rendered internally. Use the `#item` slot to customize per-item rendering.\n */\n items?: SelectItemData[]\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst triggerId = computed(() => (attrs.id as string | undefined) ?? generatedId)\n\nconst hasLabel = computed(() => !!props.label)\n\nconst slots = useSlots()\n// Tier 3 (advanced): consumer supplied explicit compound chrome → pass through.\n// Tier 1/2 (terse): render trigger/value/content internally.\nconst usesCustomChrome = computed(() =>\n hasSlotComponent(slots.default?.(), [SelectTrigger, SelectContent]),\n)\n\n// Helper IDs / aria wiring\nconst descriptionId = computed(() => `${triggerId.value}-description`)\nconst errorMessageId = computed(() => `${triggerId.value}-error`)\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n if (showError.value) return errorMessageId.value\n if (showDescription.value) return descriptionId.value\n return undefined\n})\n\nconst slotFns = computed(() =>\n selectVariants({\n variant: props.variant,\n size: props.size,\n color: props.color,\n fullWidth: props.fullWidth,\n isInvalid: props.isInvalid,\n isDisabled: props.isDisabled,\n isReadonly: props.isReadonly,\n hasLabel: hasLabel.value,\n labelPlacement: props.labelPlacement,\n }),\n)\n\nconst showOutsideLabel = computed(\n () => hasLabel.value && props.labelPlacement !== 'inside',\n)\n\n// Persistent item registry. SelectItem populates on first mount; entries\n// survive SelectContent unmount so SelectValue can render the label while\n// the popover is closed.\nconst itemRegistry = reactive(new Map<SelectItemValue, string>())\nconst registerItem = (value: SelectItemValue, label: string) => {\n itemRegistry.set(value, label)\n}\nconst itemLabel = (value: SelectItemValue | SelectItemValue[] | undefined | null): string => {\n if (value == null) return ''\n if (Array.isArray(value)) {\n // Fall back to the stringified value (handles numeric keys) when no label is\n // registered. Filter empty strings only — never use filter(Boolean), which\n // would drop a registered label for the numeric key 0.\n return value\n .map(v => String(itemRegistry.get(v) ?? v))\n .filter(s => s.length > 0)\n .join(', ')\n }\n return itemRegistry.get(value) ?? String(value)\n}\n\nfunction removeValue(value: SelectItemValue) {\n const current = Array.isArray(props.modelValue) ? props.modelValue : []\n emit('update:modelValue', current.filter(v => v !== value))\n}\n\nuseSelectProvide({\n isDisabled: toRef(props, 'isDisabled'),\n isInvalid: toRef(props, 'isInvalid'),\n isReadonly: toRef(props, 'isReadonly'),\n isRequired: toRef(props, 'isRequired'),\n fullWidth: toRef(props, 'fullWidth'),\n hasLabel,\n labelPlacement: toRef(props, 'labelPlacement'),\n triggerId,\n label: toRef(props, 'label'),\n ariaDescribedBy,\n slots: slotFns,\n multiple: toRef(props, 'multiple'),\n registerItem,\n itemLabel,\n removeValue,\n})\n</script>\n\n<template>\n <div\n :class=\"composeClassName(slotFns.base(), props.class)\"\n :data-invalid=\"isInvalid || undefined\"\n :data-disabled=\"isDisabled || undefined\"\n :data-readonly=\"isReadonly || undefined\"\n :data-required=\"isRequired || undefined\"\n :data-has-label=\"hasLabel || undefined\"\n :data-has-helper=\"hasHelper || undefined\"\n >\n <label\n v-if=\"showOutsideLabel\"\n :for=\"triggerId\"\n :class=\"slotFns.label()\"\n >{{ label }}<span\n v-if=\"isRequired\"\n aria-hidden=\"true\"\n > *</span></label>\n\n <div :class=\"slotFns.mainWrapper()\">\n <SelectRoot\n :model-value=\"props.modelValue\"\n :default-value=\"props.defaultValue\"\n :multiple=\"props.multiple\"\n :open=\"props.open\"\n :default-open=\"props.defaultOpen\"\n :disabled=\"props.isDisabled\"\n :required=\"props.isRequired\"\n :name=\"props.name\"\n @update:model-value=\"emit('update:modelValue', $event as SelectItemValue | SelectItemValue[])\"\n @update:open=\"emit('update:open', $event)\"\n >\n <!-- Tier 3: consumer-provided compound chrome -->\n <slot v-if=\"usesCustomChrome\" />\n <!-- Tier 1/2: internally rendered chrome -->\n <template v-else>\n <SelectTrigger>\n <SelectValue :placeholder=\"props.placeholder\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem\n v-for=\"item in props.items\"\n :key=\"item.value\"\n :value=\"item.value\"\n :text-value=\"item.textValue ?? item.label\"\n :is-disabled=\"item.isDisabled\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n >{{ item.label ?? String(item.value) }}</slot>\n </SelectItem>\n <slot />\n </SelectContent>\n </template>\n </SelectRoot>\n\n <div\n v-if=\"hasHelper\"\n :class=\"slotFns.helperWrapper()\"\n >\n <div\n v-if=\"showError\"\n :id=\"errorMessageId\"\n :class=\"slotFns.errorMessage()\"\n >\n {{ errorMessage }}\n </div>\n <div\n v-else-if=\"showDescription\"\n :id=\"descriptionId\"\n :class=\"slotFns.description()\"\n >\n {{ description }}\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"SelectItem.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n value: string\n /**\n * Explicit human-readable label for this item. When provided, the registry is\n * populated immediately at setup time (before the dropdown is ever opened),\n * so SelectValue can display the correct label for a pre-set modelValue.\n * When omitted, the label is read from slot DOM text on first mount.\n */\n textValue?: string\n isDisabled?: boolean\n class?: string\n}>(), {\n textValue: undefined,\n isDisabled: false,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\n// Register immediately with textValue if provided — this runs at setup time,\n// before mount, so SelectValue shows the correct label for a pre-set modelValue\n// even before the dropdown has ever been opened.\nif (props.textValue !== undefined) {\n ctx.registerItem(props.value, props.textValue)\n}\n\nonMounted(() => {\n // textRef points to the SelectItemText component instance (not a DOM element).\n // Access $el to get the underlying span element and read its text content.\n // This refines the registry entry with actual DOM text (handles slot-text items\n // that don't have an explicit textValue prop).\n const el = (textRef.value as { $el?: HTMLElement } | null)?.$el\n const label = props.textValue ?? el?.textContent?.trim() ?? props.value\n ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n <SelectItem\n :value=\"props.value\"\n :disabled=\"props.isDisabled\"\n :text-value=\"props.textValue ?? props.value\"\n class=\"list-box-item list-box-item--default\"\n data-slot=\"list-box-item\"\n >\n <slot name=\"startContent\" />\n <SelectItemText ref=\"textRef\">\n <slot />\n </SelectItemText>\n <SelectItemIndicator\n class=\"list-box-item__indicator\"\n data-slot=\"list-box-item-indicator\"\n >\n <slot name=\"selectedIcon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n data-slot=\"list-box-item-indicator--checkmark\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n </slot>\n </SelectItemIndicator>\n <slot name=\"endContent\" />\n </SelectItem>\n</template>\n"],"mappings":""}
1
+ {"version":3,"file":"SelectItem.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n value: SelectItemValue\n /**\n * Explicit human-readable label for this item. When provided, the registry is\n * populated immediately at setup time (before the dropdown is ever opened),\n * so SelectValue can display the correct label for a pre-set modelValue.\n * When omitted, the label is read from slot DOM text on first mount.\n */\n textValue?: string\n isDisabled?: boolean\n class?: string\n}>(), {\n textValue: undefined,\n isDisabled: false,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\n// Register immediately with textValue if provided — this runs at setup time,\n// before mount, so SelectValue shows the correct label for a pre-set modelValue\n// even before the dropdown has ever been opened.\nif (props.textValue !== undefined) {\n ctx.registerItem(props.value, props.textValue)\n}\n\nonMounted(() => {\n // textRef points to the SelectItemText component instance (not a DOM element).\n // Access $el to get the underlying span element and read its text content.\n // This refines the registry entry with actual DOM text (handles slot-text items\n // that don't have an explicit textValue prop).\n const el = (textRef.value as { $el?: HTMLElement } | null)?.$el\n const label = props.textValue ?? el?.textContent?.trim() ?? String(props.value)\n ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n <SelectItem\n :value=\"props.value\"\n :disabled=\"props.isDisabled\"\n :text-value=\"props.textValue ?? String(props.value)\"\n class=\"list-box-item list-box-item--default\"\n data-slot=\"list-box-item\"\n >\n <slot name=\"startContent\" />\n <SelectItemText ref=\"textRef\">\n <slot />\n </SelectItemText>\n <SelectItemIndicator\n class=\"list-box-item__indicator\"\n data-slot=\"list-box-item-indicator\"\n >\n <slot name=\"selectedIcon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n data-slot=\"list-box-item-indicator--checkmark\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n </slot>\n </SelectItemIndicator>\n <slot name=\"endContent\" />\n </SelectItem>\n</template>\n"],"mappings":""}
@@ -20,14 +20,14 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
20
20
  if (props.textValue !== void 0) ctx.registerItem(props.value, props.textValue);
21
21
  onMounted(() => {
22
22
  const el = textRef.value?.$el;
23
- const label = props.textValue ?? el?.textContent?.trim() ?? props.value;
23
+ const label = props.textValue ?? el?.textContent?.trim() ?? String(props.value);
24
24
  ctx.registerItem(props.value, label);
25
25
  });
26
26
  return (_ctx, _cache) => {
27
27
  return openBlock(), createBlock(unref(SelectItem), {
28
28
  value: props.value,
29
29
  disabled: props.isDisabled,
30
- "text-value": props.textValue ?? props.value,
30
+ "text-value": props.textValue ?? String(props.value),
31
31
  class: "list-box-item list-box-item--default",
32
32
  "data-slot": "list-box-item"
33
33
  }, {
@@ -1 +1 @@
1
- {"version":3,"file":"SelectItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n value: string\n /**\n * Explicit human-readable label for this item. When provided, the registry is\n * populated immediately at setup time (before the dropdown is ever opened),\n * so SelectValue can display the correct label for a pre-set modelValue.\n * When omitted, the label is read from slot DOM text on first mount.\n */\n textValue?: string\n isDisabled?: boolean\n class?: string\n}>(), {\n textValue: undefined,\n isDisabled: false,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\n// Register immediately with textValue if provided — this runs at setup time,\n// before mount, so SelectValue shows the correct label for a pre-set modelValue\n// even before the dropdown has ever been opened.\nif (props.textValue !== undefined) {\n ctx.registerItem(props.value, props.textValue)\n}\n\nonMounted(() => {\n // textRef points to the SelectItemText component instance (not a DOM element).\n // Access $el to get the underlying span element and read its text content.\n // This refines the registry entry with actual DOM text (handles slot-text items\n // that don't have an explicit textValue prop).\n const el = (textRef.value as { $el?: HTMLElement } | null)?.$el\n const label = props.textValue ?? el?.textContent?.trim() ?? props.value\n ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n <SelectItem\n :value=\"props.value\"\n :disabled=\"props.isDisabled\"\n :text-value=\"props.textValue ?? props.value\"\n class=\"list-box-item list-box-item--default\"\n data-slot=\"list-box-item\"\n >\n <slot name=\"startContent\" />\n <SelectItemText ref=\"textRef\">\n <slot />\n </SelectItemText>\n <SelectItemIndicator\n class=\"list-box-item__indicator\"\n data-slot=\"list-box-item-indicator\"\n >\n <slot name=\"selectedIcon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n data-slot=\"list-box-item-indicator--checkmark\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n </slot>\n </SelectItemIndicator>\n <slot name=\"endContent\" />\n </SelectItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAiBd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,UAAU,eAA4B,UAAS;AAKrD,MAAI,MAAM,cAAc,KAAA,EACtB,KAAI,aAAa,MAAM,OAAO,MAAM,UAAS;AAG/C,kBAAgB;GAKd,MAAM,KAAM,QAAQ,OAAwC;GAC5D,MAAM,QAAQ,MAAM,aAAa,IAAI,aAAa,MAAM,IAAI,MAAM;AAClE,OAAI,aAAa,MAAM,OAAO,MAAK;IACpC;;uBAIC,YAkCa,MAAA,WAAA,EAAA;IAjCV,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,cAAY,MAAM,aAAa,MAAM;IACtC,OAAM;IACN,aAAU;;2BAEkB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,YAEiB,MAAA,eAAA,EAAA;eAFG;MAAJ,KAAI;;6BACV,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;KAEV,YAqBsB,MAAA,oBAAA,EAAA;MApBpB,OAAM;MACN,aAAU;;6BAkBH,CAhBP,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;;KAIvC,WAA0B,KAAA,QAAA,aAAA"}
1
+ {"version":3,"file":"SelectItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n value: SelectItemValue\n /**\n * Explicit human-readable label for this item. When provided, the registry is\n * populated immediately at setup time (before the dropdown is ever opened),\n * so SelectValue can display the correct label for a pre-set modelValue.\n * When omitted, the label is read from slot DOM text on first mount.\n */\n textValue?: string\n isDisabled?: boolean\n class?: string\n}>(), {\n textValue: undefined,\n isDisabled: false,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\n// Register immediately with textValue if provided — this runs at setup time,\n// before mount, so SelectValue shows the correct label for a pre-set modelValue\n// even before the dropdown has ever been opened.\nif (props.textValue !== undefined) {\n ctx.registerItem(props.value, props.textValue)\n}\n\nonMounted(() => {\n // textRef points to the SelectItemText component instance (not a DOM element).\n // Access $el to get the underlying span element and read its text content.\n // This refines the registry entry with actual DOM text (handles slot-text items\n // that don't have an explicit textValue prop).\n const el = (textRef.value as { $el?: HTMLElement } | null)?.$el\n const label = props.textValue ?? el?.textContent?.trim() ?? String(props.value)\n ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n <SelectItem\n :value=\"props.value\"\n :disabled=\"props.isDisabled\"\n :text-value=\"props.textValue ?? String(props.value)\"\n class=\"list-box-item list-box-item--default\"\n data-slot=\"list-box-item\"\n >\n <slot name=\"startContent\" />\n <SelectItemText ref=\"textRef\">\n <slot />\n </SelectItemText>\n <SelectItemIndicator\n class=\"list-box-item__indicator\"\n data-slot=\"list-box-item-indicator\"\n >\n <slot name=\"selectedIcon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n data-slot=\"list-box-item-indicator--checkmark\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n </slot>\n </SelectItemIndicator>\n <slot name=\"endContent\" />\n </SelectItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAiBd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,UAAU,eAA4B,UAAS;AAKrD,MAAI,MAAM,cAAc,KAAA,EACtB,KAAI,aAAa,MAAM,OAAO,MAAM,UAAS;AAG/C,kBAAgB;GAKd,MAAM,KAAM,QAAQ,OAAwC;GAC5D,MAAM,QAAQ,MAAM,aAAa,IAAI,aAAa,MAAM,IAAI,OAAO,MAAM,MAAK;AAC9E,OAAI,aAAa,MAAM,OAAO,MAAK;IACpC;;uBAIC,YAkCa,MAAA,WAAA,EAAA;IAjCV,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,cAAY,MAAM,aAAa,OAAO,MAAM,MAAK;IAClD,OAAM;IACN,aAAU;;2BAEkB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,YAEiB,MAAA,eAAA,EAAA;eAFG;MAAJ,KAAI;;6BACV,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;KAEV,YAqBsB,MAAA,oBAAA,EAAA;MApBpB,OAAM;MACN,aAAU;;6BAkBH,CAhBP,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;;KAIvC,WAA0B,KAAA,QAAA,aAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"SelectOverflowChips.js","names":[],"sources":["../../../src/components/select/SelectOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\n\nconst props = defineProps<{\n values: string[]\n getLabel: (value: string) => string\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n if (measuring) return\n measuring = true\n\n try {\n const el = containerEl.value\n if (!el) return\n\n // Phase 1: show all chips to measure their natural widths\n visibleCount.value = props.values.length\n await nextTick()\n\n const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n if (!chips.length) return\n\n const containerW = el.offsetWidth\n if (!containerW) return\n\n // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n // The sm Chip has px-2 (16px padding) so \"+N more\" fits in ~52–68px.\n const BADGE_W = 76\n\n let usedW = 0\n let n = 0\n\n for (let i = 0; i < chips.length; i++) {\n const gap = i > 0 ? 4 : 0\n const chipW = chips[i].offsetWidth\n const isLast = i === chips.length - 1\n // Last chip: use full budget (no badge needed if everything fits).\n // Earlier chips: reserve BADGE_W so the badge has room when we do overflow.\n const budget = isLast ? containerW : containerW - BADGE_W\n\n if (usedW + gap + chipW > budget) break\n usedW += gap + chipW\n n++\n }\n\n visibleCount.value = Math.max(1, n)\n } finally {\n measuring = false\n }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\n\n// Watch a comma-joined string derived from the values — Vue uses Object.is for\n// primitives, so this only fires when the selection actually changes.\n//\n// WHY NOT { deep: true }: Vue's watch fires the callback whenever the effect\n// re-runs when deep=true (because `if (deep || hasChanged)` short-circuits).\n// Reka passes a new array reference for modelValue on every internal re-render\n// (optionsSet updates, dropdown open/close), so a deep or shallow ref watch\n// fires continuously, causing the reflow loop that produces the oscillation.\nwatch(\n () => props.values.join('\\x00'),\n () => reflow(),\n { flush: 'post' },\n)\n</script>\n\n<template>\n <div\n ref=\"container\"\n style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n >\n <Chip\n v-for=\"(val, i) in values\"\n :key=\"val\"\n data-chip-item\n size=\"sm\"\n :style=\"i >= visibleCount ? 'display: none' : undefined\"\n >\n {{ getLabel(val) }}\n </Chip>\n <Chip\n v-if=\"overflowCount > 0\"\n size=\"sm\"\n color=\"default\"\n >\n +{{ overflowCount }} more\n </Chip>\n </div>\n</template>\n"],"mappings":""}
1
+ {"version":3,"file":"SelectOverflowChips.js","names":[],"sources":["../../../src/components/select/SelectOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\nimport type { SelectItemValue } from './Select.context'\n\nconst props = defineProps<{\n values: SelectItemValue[]\n getLabel: (value: SelectItemValue) => string\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n if (measuring) return\n measuring = true\n\n try {\n const el = containerEl.value\n if (!el) return\n\n // Phase 1: show all chips to measure their natural widths\n visibleCount.value = props.values.length\n await nextTick()\n\n const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n if (!chips.length) return\n\n const containerW = el.offsetWidth\n if (!containerW) return\n\n // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n // The sm Chip has px-2 (16px padding) so \"+N more\" fits in ~52–68px.\n const BADGE_W = 76\n\n let usedW = 0\n let n = 0\n\n for (let i = 0; i < chips.length; i++) {\n const gap = i > 0 ? 4 : 0\n const chipW = chips[i].offsetWidth\n const isLast = i === chips.length - 1\n // Last chip: use full budget (no badge needed if everything fits).\n // Earlier chips: reserve BADGE_W so the badge has room when we do overflow.\n const budget = isLast ? containerW : containerW - BADGE_W\n\n if (usedW + gap + chipW > budget) break\n usedW += gap + chipW\n n++\n }\n\n visibleCount.value = Math.max(1, n)\n } finally {\n measuring = false\n }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\n\n// Watch a comma-joined string derived from the values — Vue uses Object.is for\n// primitives, so this only fires when the selection actually changes.\n//\n// WHY NOT { deep: true }: Vue's watch fires the callback whenever the effect\n// re-runs when deep=true (because `if (deep || hasChanged)` short-circuits).\n// Reka passes a new array reference for modelValue on every internal re-render\n// (optionsSet updates, dropdown open/close), so a deep or shallow ref watch\n// fires continuously, causing the reflow loop that produces the oscillation.\nwatch(\n () => props.values.join('\\x00'),\n () => reflow(),\n { flush: 'post' },\n)\n</script>\n\n<template>\n <div\n ref=\"container\"\n style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n >\n <Chip\n v-for=\"(val, i) in values\"\n :key=\"val\"\n data-chip-item\n size=\"sm\"\n :style=\"i >= visibleCount ? 'display: none' : undefined\"\n >\n {{ getLabel(val) }}\n </Chip>\n <Chip\n v-if=\"overflowCount > 0\"\n size=\"sm\"\n color=\"default\"\n >\n +{{ overflowCount }} more\n </Chip>\n </div>\n</template>\n"],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"file":"SelectOverflowChips.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\n\nconst props = defineProps<{\n values: string[]\n getLabel: (value: string) => string\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n if (measuring) return\n measuring = true\n\n try {\n const el = containerEl.value\n if (!el) return\n\n // Phase 1: show all chips to measure their natural widths\n visibleCount.value = props.values.length\n await nextTick()\n\n const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n if (!chips.length) return\n\n const containerW = el.offsetWidth\n if (!containerW) return\n\n // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n // The sm Chip has px-2 (16px padding) so \"+N more\" fits in ~52–68px.\n const BADGE_W = 76\n\n let usedW = 0\n let n = 0\n\n for (let i = 0; i < chips.length; i++) {\n const gap = i > 0 ? 4 : 0\n const chipW = chips[i].offsetWidth\n const isLast = i === chips.length - 1\n // Last chip: use full budget (no badge needed if everything fits).\n // Earlier chips: reserve BADGE_W so the badge has room when we do overflow.\n const budget = isLast ? containerW : containerW - BADGE_W\n\n if (usedW + gap + chipW > budget) break\n usedW += gap + chipW\n n++\n }\n\n visibleCount.value = Math.max(1, n)\n } finally {\n measuring = false\n }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\n\n// Watch a comma-joined string derived from the values — Vue uses Object.is for\n// primitives, so this only fires when the selection actually changes.\n//\n// WHY NOT { deep: true }: Vue's watch fires the callback whenever the effect\n// re-runs when deep=true (because `if (deep || hasChanged)` short-circuits).\n// Reka passes a new array reference for modelValue on every internal re-render\n// (optionsSet updates, dropdown open/close), so a deep or shallow ref watch\n// fires continuously, causing the reflow loop that produces the oscillation.\nwatch(\n () => props.values.join('\\x00'),\n () => reflow(),\n { flush: 'post' },\n)\n</script>\n\n<template>\n <div\n ref=\"container\"\n style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n >\n <Chip\n v-for=\"(val, i) in values\"\n :key=\"val\"\n data-chip-item\n size=\"sm\"\n :style=\"i >= visibleCount ? 'display: none' : undefined\"\n >\n {{ getLabel(val) }}\n </Chip>\n <Chip\n v-if=\"overflowCount > 0\"\n size=\"sm\"\n color=\"default\"\n >\n +{{ overflowCount }} more\n </Chip>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAKd,MAAM,cAAc,eAA4B,YAAW;EAC3D,MAAM,eAAe,IAAI,MAAM,OAAO,OAAM;EAC5C,MAAM,gBAAgB,eAAe,KAAK,IAAI,GAAG,MAAM,OAAO,SAAS,aAAa,MAAM,CAAA;EAG1F,IAAI,YAAY;EAEhB,eAAe,SAAS;AACtB,OAAI,UAAW;AACf,eAAY;AAEZ,OAAI;IACF,MAAM,KAAK,YAAY;AACvB,QAAI,CAAC,GAAI;AAGT,iBAAa,QAAQ,MAAM,OAAO;AAClC,UAAM,UAAS;IAEf,MAAM,QAAQ,CAAC,GAAG,GAAG,iBAA8B,mBAAmB,CAAA;AACtE,QAAI,CAAC,MAAM,OAAQ;IAEnB,MAAM,aAAa,GAAG;AACtB,QAAI,CAAC,WAAY;IAIjB,MAAM,UAAU;IAEhB,IAAI,QAAQ;IACZ,IAAI,IAAI;AAER,SAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;KACrC,MAAM,MAAM,IAAI,IAAI,IAAI;KACxB,MAAM,QAAQ,MAAM,GAAG;KAIvB,MAAM,SAHS,MAAM,MAAM,SAAS,IAGZ,aAAa,aAAa;AAElD,SAAI,QAAQ,MAAM,QAAQ,OAAQ;AAClC,cAAS,MAAM;AACf;;AAGF,iBAAa,QAAQ,KAAK,IAAI,GAAG,EAAC;aAC1B;AACR,gBAAY;;;AAIhB,YAAU,OAAM;AAChB,oBAAkB,aAAa,OAAM;AAUrC,cACQ,MAAM,OAAO,KAAK,KAAO,QACzB,QAAQ,EACd,EAAE,OAAO,QAAQ,CACnB;;uBAIE,mBAoBM,OApBN,YAoBM,EAAA,UAAA,KAAA,EAhBJ,mBAQO,UAAA,MAAA,WAPc,QAAA,SAAX,KAAK,MAAC;wBADhB,YAQO,cAAA;KANJ,KAAK;KACN,kBAAA;KACA,MAAK;KACJ,OAAK,eAAE,KAAK,aAAA,QAAY,kBAAqB,KAAA,EAAS;;4BAEpC,CAAA,gBAAA,gBAAhB,QAAA,SAAS,IAAG,CAAA,EAAA,EAAA,CAAA,CAAA;;;cAGT,cAAA,QAAa,KAAA,WAAA,EADrB,YAMO,cAAA;;IAJL,MAAK;IACL,OAAM;;2BAEL,CAAA,gBADF,OACE,gBAAG,cAAA,MAAa,GAAG,UACtB,EAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"SelectOverflowChips.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\nimport type { SelectItemValue } from './Select.context'\n\nconst props = defineProps<{\n values: SelectItemValue[]\n getLabel: (value: SelectItemValue) => string\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n if (measuring) return\n measuring = true\n\n try {\n const el = containerEl.value\n if (!el) return\n\n // Phase 1: show all chips to measure their natural widths\n visibleCount.value = props.values.length\n await nextTick()\n\n const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n if (!chips.length) return\n\n const containerW = el.offsetWidth\n if (!containerW) return\n\n // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n // The sm Chip has px-2 (16px padding) so \"+N more\" fits in ~52–68px.\n const BADGE_W = 76\n\n let usedW = 0\n let n = 0\n\n for (let i = 0; i < chips.length; i++) {\n const gap = i > 0 ? 4 : 0\n const chipW = chips[i].offsetWidth\n const isLast = i === chips.length - 1\n // Last chip: use full budget (no badge needed if everything fits).\n // Earlier chips: reserve BADGE_W so the badge has room when we do overflow.\n const budget = isLast ? containerW : containerW - BADGE_W\n\n if (usedW + gap + chipW > budget) break\n usedW += gap + chipW\n n++\n }\n\n visibleCount.value = Math.max(1, n)\n } finally {\n measuring = false\n }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\n\n// Watch a comma-joined string derived from the values — Vue uses Object.is for\n// primitives, so this only fires when the selection actually changes.\n//\n// WHY NOT { deep: true }: Vue's watch fires the callback whenever the effect\n// re-runs when deep=true (because `if (deep || hasChanged)` short-circuits).\n// Reka passes a new array reference for modelValue on every internal re-render\n// (optionsSet updates, dropdown open/close), so a deep or shallow ref watch\n// fires continuously, causing the reflow loop that produces the oscillation.\nwatch(\n () => props.values.join('\\x00'),\n () => reflow(),\n { flush: 'post' },\n)\n</script>\n\n<template>\n <div\n ref=\"container\"\n style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n >\n <Chip\n v-for=\"(val, i) in values\"\n :key=\"val\"\n data-chip-item\n size=\"sm\"\n :style=\"i >= visibleCount ? 'display: none' : undefined\"\n >\n {{ getLabel(val) }}\n </Chip>\n <Chip\n v-if=\"overflowCount > 0\"\n size=\"sm\"\n color=\"default\"\n >\n +{{ overflowCount }} more\n </Chip>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAKd,MAAM,cAAc,eAA4B,YAAW;EAC3D,MAAM,eAAe,IAAI,MAAM,OAAO,OAAM;EAC5C,MAAM,gBAAgB,eAAe,KAAK,IAAI,GAAG,MAAM,OAAO,SAAS,aAAa,MAAM,CAAA;EAG1F,IAAI,YAAY;EAEhB,eAAe,SAAS;AACtB,OAAI,UAAW;AACf,eAAY;AAEZ,OAAI;IACF,MAAM,KAAK,YAAY;AACvB,QAAI,CAAC,GAAI;AAGT,iBAAa,QAAQ,MAAM,OAAO;AAClC,UAAM,UAAS;IAEf,MAAM,QAAQ,CAAC,GAAG,GAAG,iBAA8B,mBAAmB,CAAA;AACtE,QAAI,CAAC,MAAM,OAAQ;IAEnB,MAAM,aAAa,GAAG;AACtB,QAAI,CAAC,WAAY;IAIjB,MAAM,UAAU;IAEhB,IAAI,QAAQ;IACZ,IAAI,IAAI;AAER,SAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;KACrC,MAAM,MAAM,IAAI,IAAI,IAAI;KACxB,MAAM,QAAQ,MAAM,GAAG;KAIvB,MAAM,SAHS,MAAM,MAAM,SAAS,IAGZ,aAAa,aAAa;AAElD,SAAI,QAAQ,MAAM,QAAQ,OAAQ;AAClC,cAAS,MAAM;AACf;;AAGF,iBAAa,QAAQ,KAAK,IAAI,GAAG,EAAC;aAC1B;AACR,gBAAY;;;AAIhB,YAAU,OAAM;AAChB,oBAAkB,aAAa,OAAM;AAUrC,cACQ,MAAM,OAAO,KAAK,KAAO,QACzB,QAAQ,EACd,EAAE,OAAO,QAAQ,CACnB;;uBAIE,mBAoBM,OApBN,YAoBM,EAAA,UAAA,KAAA,EAhBJ,mBAQO,UAAA,MAAA,WAPc,QAAA,SAAX,KAAK,MAAC;wBADhB,YAQO,cAAA;KANJ,KAAK;KACN,kBAAA;KACA,MAAK;KACJ,OAAK,eAAE,KAAK,aAAA,QAAY,kBAAqB,KAAA,EAAS;;4BAEpC,CAAA,gBAAA,gBAAhB,QAAA,SAAS,IAAG,CAAA,EAAA,EAAA,CAAA,CAAA;;;cAGT,cAAA,QAAa,KAAA,WAAA,EADrB,YAMO,cAAA;;IAJL,MAAK;IACL,OAAM;;2BAEL,CAAA,gBADF,OACE,gBAAG,cAAA,MAAa,GAAG,UACtB,EAAA,CAAA,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"SelectValue.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\nimport SelectOverflowChips from './SelectOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n placeholder?: string\n class?: string\n}>(), {\n placeholder: undefined,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n <SelectValue\n :class=\"ctx.slots.value.value()\"\n :placeholder=\"props.placeholder\"\n data-slot=\"value\"\n >\n <template #default=\"{ selectedLabel, modelValue }\">\n <!-- Multiple mode: chips with overflow truncation -->\n <template v-if=\"ctx.multiple.value && Array.isArray(modelValue) && modelValue.length > 0\">\n <SelectOverflowChips\n :values=\"(modelValue as string[])\"\n :get-label=\"ctx.itemLabel\"\n />\n </template>\n <!-- Multiple mode: nothing selected yet -->\n <template v-else-if=\"ctx.multiple.value\">\n {{ props.placeholder }}\n </template>\n <!--\n Single mode label resolution:\n 1. Reka's native selectedLabel — populated via optionsSet once items mount\n 2. itemRegistry label — populated at setup time for items with explicit textValue\n 3. Placeholder when no value is selected\n -->\n <template v-else-if=\"selectedLabel && selectedLabel.length > 0\">\n {{ selectedLabel.join(', ') }}\n </template>\n <template v-else-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n {{ ctx.itemLabel(Array.isArray(modelValue) ? modelValue : modelValue.toString()) }}\n </template>\n <template v-else>\n {{ props.placeholder }}\n </template>\n </template>\n </SelectValue>\n</template>\n"],"mappings":""}
1
+ {"version":3,"file":"SelectValue.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\nimport SelectOverflowChips from './SelectOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n placeholder?: string\n class?: string\n}>(), {\n placeholder: undefined,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n <SelectValue\n :class=\"ctx.slots.value.value()\"\n :placeholder=\"props.placeholder\"\n data-slot=\"value\"\n >\n <template #default=\"{ selectedLabel, modelValue }\">\n <!-- Multiple mode: chips with overflow truncation -->\n <template v-if=\"ctx.multiple.value && Array.isArray(modelValue) && modelValue.length > 0\">\n <SelectOverflowChips\n :values=\"(modelValue as SelectItemValue[])\"\n :get-label=\"ctx.itemLabel\"\n />\n </template>\n <!-- Multiple mode: nothing selected yet -->\n <template v-else-if=\"ctx.multiple.value\">\n {{ props.placeholder }}\n </template>\n <!--\n Single mode label resolution:\n 1. Reka's native selectedLabel — populated via optionsSet once items mount\n 2. itemRegistry label — populated at setup time for items with explicit textValue\n 3. Placeholder when no value is selected\n -->\n <template v-else-if=\"selectedLabel && selectedLabel.length > 0\">\n {{ selectedLabel.join(', ') }}\n </template>\n <template v-else-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n {{ ctx.itemLabel(modelValue as SelectItemValue | SelectItemValue[]) }}\n </template>\n <template v-else>\n {{ props.placeholder }}\n </template>\n </template>\n </SelectValue>\n</template>\n"],"mappings":""}
@@ -22,7 +22,7 @@ var SelectValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
22
22
  key: 0,
23
23
  values: modelValue,
24
24
  "get-label": unref(ctx).itemLabel
25
- }, null, 8, ["values", "get-label"])) : unref(ctx).multiple.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64)) : selectedLabel && selectedLabel.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createTextVNode(toDisplayString(unref(ctx).itemLabel(Array.isArray(modelValue) ? modelValue : modelValue.toString())), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 4 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64))]),
25
+ }, null, 8, ["values", "get-label"])) : unref(ctx).multiple.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64)) : selectedLabel && selectedLabel.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createTextVNode(toDisplayString(unref(ctx).itemLabel(modelValue)), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 4 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64))]),
26
26
  _: 1
27
27
  }, 8, ["class", "placeholder"]);
28
28
  };
@@ -1 +1 @@
1
- {"version":3,"file":"SelectValue.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\nimport SelectOverflowChips from './SelectOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n placeholder?: string\n class?: string\n}>(), {\n placeholder: undefined,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n <SelectValue\n :class=\"ctx.slots.value.value()\"\n :placeholder=\"props.placeholder\"\n data-slot=\"value\"\n >\n <template #default=\"{ selectedLabel, modelValue }\">\n <!-- Multiple mode: chips with overflow truncation -->\n <template v-if=\"ctx.multiple.value && Array.isArray(modelValue) && modelValue.length > 0\">\n <SelectOverflowChips\n :values=\"(modelValue as string[])\"\n :get-label=\"ctx.itemLabel\"\n />\n </template>\n <!-- Multiple mode: nothing selected yet -->\n <template v-else-if=\"ctx.multiple.value\">\n {{ props.placeholder }}\n </template>\n <!--\n Single mode label resolution:\n 1. Reka's native selectedLabel — populated via optionsSet once items mount\n 2. itemRegistry label — populated at setup time for items with explicit textValue\n 3. Placeholder when no value is selected\n -->\n <template v-else-if=\"selectedLabel && selectedLabel.length > 0\">\n {{ selectedLabel.join(', ') }}\n </template>\n <template v-else-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n {{ ctx.itemLabel(Array.isArray(modelValue) ? modelValue : modelValue.toString()) }}\n </template>\n <template v-else>\n {{ props.placeholder }}\n </template>\n </template>\n </SelectValue>\n</template>\n"],"mappings":";;;;;;;;;;;;EAKA,MAAM,QAAQ;EAQd,MAAM,MAAM,iBAAgB;;uBAI1B,YAiCc,MAAA,YAAA,EAAA;IAhCX,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,OAAK,CAAA;IAC5B,aAAa,MAAM;IACpB,aAAU;;IAEC,SAAO,SAOL,EAPS,eAAe,iBAAU,CAE7B,MAAA,IAAG,CAAC,SAAS,SAAS,MAAM,QAAQ,WAAU,IAAK,WAAW,SAAM,KAAA,WAAA,EAClF,YAGE,6BAAA;;KAFC,QAAS;KACT,aAAW,MAAA,IAAG,CAAC;4CAIC,MAAA,IAAG,CAAC,SAAS,SAAA,WAAA,EAAlC,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAM,YAAW,EAAA,EAAA,CAAA,EAAA,GAAA,IAQD,iBAAiB,cAAc,SAAM,KAAA,WAAA,EAA1D,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,cAAc,KAAI,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,IAEF,cAAU,SAAa,MAAM,QAAQ,WAAU,GAAI,WAAW,SAAM,IAAO,eAAU,OAAA,WAAA,EAA1G,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAA,IAAG,CAAC,UAAU,MAAM,QAAQ,WAAU,GAAI,aAAa,WAAW,UAAQ,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,KAAA,WAAA,EAE/E,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAM,YAAW,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA"}
1
+ {"version":3,"file":"SelectValue.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\nimport SelectOverflowChips from './SelectOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n placeholder?: string\n class?: string\n}>(), {\n placeholder: undefined,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n <SelectValue\n :class=\"ctx.slots.value.value()\"\n :placeholder=\"props.placeholder\"\n data-slot=\"value\"\n >\n <template #default=\"{ selectedLabel, modelValue }\">\n <!-- Multiple mode: chips with overflow truncation -->\n <template v-if=\"ctx.multiple.value && Array.isArray(modelValue) && modelValue.length > 0\">\n <SelectOverflowChips\n :values=\"(modelValue as SelectItemValue[])\"\n :get-label=\"ctx.itemLabel\"\n />\n </template>\n <!-- Multiple mode: nothing selected yet -->\n <template v-else-if=\"ctx.multiple.value\">\n {{ props.placeholder }}\n </template>\n <!--\n Single mode label resolution:\n 1. Reka's native selectedLabel — populated via optionsSet once items mount\n 2. itemRegistry label — populated at setup time for items with explicit textValue\n 3. Placeholder when no value is selected\n -->\n <template v-else-if=\"selectedLabel && selectedLabel.length > 0\">\n {{ selectedLabel.join(', ') }}\n </template>\n <template v-else-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n {{ ctx.itemLabel(modelValue as SelectItemValue | SelectItemValue[]) }}\n </template>\n <template v-else>\n {{ props.placeholder }}\n </template>\n </template>\n </SelectValue>\n</template>\n"],"mappings":";;;;;;;;;;;;EAKA,MAAM,QAAQ;EAQd,MAAM,MAAM,iBAAgB;;uBAI1B,YAiCc,MAAA,YAAA,EAAA;IAhCX,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,OAAK,CAAA;IAC5B,aAAa,MAAM;IACpB,aAAU;;IAEC,SAAO,SAOL,EAPS,eAAe,iBAAU,CAE7B,MAAA,IAAG,CAAC,SAAS,SAAS,MAAM,QAAQ,WAAU,IAAK,WAAW,SAAM,KAAA,WAAA,EAClF,YAGE,6BAAA;;KAFC,QAAS;KACT,aAAW,MAAA,IAAG,CAAC;4CAIC,MAAA,IAAG,CAAC,SAAS,SAAA,WAAA,EAAlC,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAM,YAAW,EAAA,EAAA,CAAA,EAAA,GAAA,IAQD,iBAAiB,cAAc,SAAM,KAAA,WAAA,EAA1D,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,cAAc,KAAI,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,IAEF,cAAU,SAAa,MAAM,QAAQ,WAAU,GAAI,WAAW,SAAM,IAAO,eAAU,OAAA,WAAA,EAA1G,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAA,IAAG,CAAC,UAAU,WAAU,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,KAAA,WAAA,EAE7B,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAM,YAAW,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA"}
package/dist/index.d.ts CHANGED
@@ -1841,10 +1841,10 @@ showDivider: boolean;
1841
1841
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
1842
1842
 
1843
1843
  declare const __VLS_component_98: DefineComponent<Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
1844
- "update:modelValue": (value: string | string[]) => any;
1844
+ "update:modelValue": (value: SelectItemValue | SelectItemValue[]) => any;
1845
1845
  "update:open": (value: boolean) => any;
1846
1846
  }, string, PublicProps, Readonly<Props_3> & Readonly<{
1847
- "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
1847
+ "onUpdate:modelValue"?: ((value: SelectItemValue | SelectItemValue[]) => any) | undefined;
1848
1848
  "onUpdate:open"?: ((value: boolean) => any) | undefined;
1849
1849
  }>, {
1850
1850
  size: "md" | "sm" | "lg";
@@ -1856,9 +1856,10 @@ isInvalid: boolean;
1856
1856
  isReadonly: boolean;
1857
1857
  labelPlacement: "inside" | "outside" | "outside-left";
1858
1858
  isRequired: boolean;
1859
+ items: SelectItemData[];
1859
1860
  multiple: boolean;
1860
- modelValue: string | string[];
1861
- defaultValue: string | string[];
1861
+ modelValue: SelectItemValue | SelectItemValue[];
1862
+ defaultValue: SelectItemValue | SelectItemValue[];
1862
1863
  defaultOpen: boolean;
1863
1864
  open: boolean;
1864
1865
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
@@ -1975,7 +1976,7 @@ declare type __VLS_Props_111 = {
1975
1976
  };
1976
1977
 
1977
1978
  declare type __VLS_Props_112 = {
1978
- value: string;
1979
+ value: SelectItemValue;
1979
1980
  /**
1980
1981
  * Explicit human-readable label for this item. When provided, the registry is
1981
1982
  * populated immediately at setup time (before the dropdown is ever opened),
@@ -3594,6 +3595,9 @@ declare function __VLS_template_113(): {
3594
3595
  attrs: Partial<{}>;
3595
3596
  slots: {
3596
3597
  default?(_: {}): any;
3598
+ item?(_: {
3599
+ item: ComboBoxItemData;
3600
+ }): any;
3597
3601
  };
3598
3602
  refs: {};
3599
3603
  rootEl: HTMLDivElement;
@@ -3643,14 +3647,9 @@ declare function __VLS_template_117(): {
3643
3647
  declare function __VLS_template_118(): {
3644
3648
  attrs: Partial<{}>;
3645
3649
  slots: {
3646
- default?(_: {
3647
- isLoading: boolean;
3648
- items: {
3649
- value: string;
3650
- label?: string | undefined;
3651
- textValue?: string | undefined;
3652
- isDisabled?: boolean | undefined;
3653
- }[];
3650
+ default?(_: any): any;
3651
+ item?(_: {
3652
+ item: any;
3654
3653
  }): any;
3655
3654
  };
3656
3655
  refs: {};
@@ -5487,6 +5486,10 @@ declare function __VLS_template_98(): {
5487
5486
  attrs: Partial<{}>;
5488
5487
  slots: {
5489
5488
  default?(_: {}): any;
5489
+ default?(_: {}): any;
5490
+ item?(_: {
5491
+ item: SelectItemData;
5492
+ }): any;
5490
5493
  };
5491
5494
  refs: {};
5492
5495
  rootEl: any;
@@ -7954,16 +7957,22 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
7954
7957
  errorMessage?: string;
7955
7958
  /** Extra classes merged onto the root wrapper via `composeClassName`. */
7956
7959
  class?: string;
7957
- /** Two-way bound selected value. */
7958
- modelValue?: string | string[];
7959
- /** Initial selected value (uncontrolled). */
7960
- defaultValue?: string | string[];
7960
+ /** Two-way bound selected value. Accepts string or numeric keys. */
7961
+ modelValue?: SelectItemValue | SelectItemValue[];
7962
+ /** Initial selected value (uncontrolled). Accepts string or numeric keys. */
7963
+ defaultValue?: SelectItemValue | SelectItemValue[];
7961
7964
  /** Allow selecting multiple values. modelValue becomes string[]. @default false */
7962
7965
  multiple?: boolean;
7963
7966
  /** Controls open state of the dropdown. */
7964
7967
  open?: boolean;
7965
7968
  /** Initial open state of the dropdown (uncontrolled). */
7966
7969
  defaultOpen?: boolean;
7970
+ /**
7971
+ * Data-driven items for the terse API. When provided (and no SelectTrigger /
7972
+ * SelectContent is passed as a child), the trigger, value, and popover are
7973
+ * rendered internally. Use the `#item` slot to customize per-item rendering.
7974
+ */
7975
+ items?: SelectItemData[];
7967
7976
  };
7968
7977
 
7969
7978
  declare type Props_4 = {
@@ -8222,15 +8231,35 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
8222
8231
  * unmount so SelectValue can show the selected label while the popover
8223
8232
  * is closed (Reka clears its own optionsSet on unmount).
8224
8233
  */
8225
- registerItem: (value: string, label: string) => void;
8226
- itemLabel: (value: string | string[] | undefined | null) => string;
8227
- removeValue: (value: string) => void;
8234
+ registerItem: (value: SelectItemValue, label: string) => void;
8235
+ itemLabel: (value: SelectItemValue | SelectItemValue[] | undefined | null) => string;
8236
+ removeValue: (value: SelectItemValue) => void;
8228
8237
  }
8229
8238
 
8230
8239
  declare type SelectionMode_2 = 'none' | 'single' | 'multiple';
8231
8240
 
8232
8241
  export declare const SelectItem: __VLS_WithTemplateSlots_101<typeof __VLS_component_101, __VLS_TemplateResult_101["slots"]>;
8233
8242
 
8243
+ /**
8244
+ * Data-driven item shape for the terse `items` prop. `value` accepts numeric
8245
+ * keys (see SelectItemValue). `label` is the display text (falls back to
8246
+ * String(value)); `textValue` overrides the type-ahead / pre-set label.
8247
+ */
8248
+ declare interface SelectItemData {
8249
+ value: SelectItemValue;
8250
+ label?: string;
8251
+ textValue?: string;
8252
+ isDisabled?: boolean;
8253
+ }
8254
+
8255
+ /**
8256
+ * Acceptable value for a Select item / model. Numeric values are legitimate
8257
+ * (e.g. entity IDs) and are preserved end-to-end — they are only coerced to a
8258
+ * string where the underlying contract requires one (Reka `text-value`,
8259
+ * registry display labels).
8260
+ */
8261
+ declare type SelectItemValue = string | number;
8262
+
8234
8263
  export declare const SelectTrigger: __VLS_WithTemplateSlots_99<typeof __VLS_component_99, __VLS_TemplateResult_99["slots"]>;
8235
8264
 
8236
8265
  export declare const SelectValue: DefineComponent<__VLS_Props_110, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_110> & Readonly<{}>, {
package/dist/index.js CHANGED
@@ -130,11 +130,11 @@ import ToastViewport_default from "./components/toast/ToastViewport.js";
130
130
  import ListBox_default from "./components/list-box/ListBox.js";
131
131
  import ListBoxItem_default from "./components/list-box/ListBoxItem.js";
132
132
  import ListBoxSection_default from "./components/list-box/ListBoxSection.js";
133
- import Select_default from "./components/select/Select.js";
134
133
  import SelectTrigger_default from "./components/select/SelectTrigger.js";
135
134
  import SelectValue_default from "./components/select/SelectValue.js";
136
135
  import SelectContent_default from "./components/select/SelectContent.js";
137
136
  import SelectItem_default from "./components/select/SelectItem.js";
137
+ import Select_default from "./components/select/Select.js";
138
138
  import { dropdownContextKey, useDropdownInject, useDropdownProvide } from "./components/dropdown/Dropdown.context.js";
139
139
  import Dropdown_default from "./components/dropdown/Dropdown.js";
140
140
  import DropdownTrigger_default from "./components/dropdown/DropdownTrigger.js";
@@ -148,16 +148,16 @@ import DropdownSub_default from "./components/dropdown/DropdownSub.js";
148
148
  import DropdownSubTrigger_default from "./components/dropdown/DropdownSubTrigger.js";
149
149
  import DropdownSubContent_default from "./components/dropdown/DropdownSubContent.js";
150
150
  import { comboBoxContextKey, useComboBoxInject, useComboBoxProvide } from "./components/combo-box/ComboBox.context.js";
151
- import ComboBox_default from "./components/combo-box/ComboBox.js";
152
151
  import ComboBoxInput_default from "./components/combo-box/ComboBoxInput.js";
153
152
  import ComboBoxContent_default from "./components/combo-box/ComboBoxContent.js";
154
153
  import ComboBoxItem_default from "./components/combo-box/ComboBoxItem.js";
154
+ import ComboBox_default from "./components/combo-box/ComboBox.js";
155
155
  import ComboBoxEmpty_default from "./components/combo-box/ComboBoxEmpty.js";
156
156
  import { autocompleteContextKey, useAutocompleteInject, useAutocompleteProvide } from "./components/autocomplete/Autocomplete.context.js";
157
- import Autocomplete_default from "./components/autocomplete/Autocomplete.js";
158
157
  import AutocompleteInput_default from "./components/autocomplete/AutocompleteInput.js";
159
158
  import AutocompleteContent_default from "./components/autocomplete/AutocompleteContent.js";
160
159
  import AutocompleteItem_default from "./components/autocomplete/AutocompleteItem.js";
160
+ import Autocomplete_default from "./components/autocomplete/Autocomplete.js";
161
161
  import AutocompleteCreateItem_default from "./components/autocomplete/AutocompleteCreateItem.js";
162
162
  import { createPaginationContext, paginationContextKey, usePaginationInject, usePaginationProvide } from "./components/pagination/pagination.context.js";
163
163
  import Pagination_default from "./components/pagination/Pagination.js";
@@ -0,0 +1,26 @@
1
+ import { Fragment } from "vue";
2
+ //#region src/utils/hasSlotComponent.ts
3
+ /**
4
+ * Returns true if any vnode in `nodes` has a `type` referentially equal to one
5
+ * of `components`, recursively flattening `Fragment` (v-for / template) children.
6
+ *
7
+ * Dropdown form controls (Select, Autocomplete, ComboBox) use this to detect
8
+ * whether the consumer supplied explicit compound chrome (e.g. SelectTrigger /
9
+ * SelectContent) versus terse `*Item` children or an `items` prop. When chrome
10
+ * is present the control passes the slot through unchanged; otherwise it renders
11
+ * the trigger/value/content internally.
12
+ */
13
+ function hasSlotComponent(nodes, components) {
14
+ if (!nodes) return false;
15
+ for (const node of nodes) {
16
+ if (components.includes(node.type)) return true;
17
+ if (node.type === Fragment && Array.isArray(node.children)) {
18
+ if (hasSlotComponent(node.children, components)) return true;
19
+ }
20
+ }
21
+ return false;
22
+ }
23
+ //#endregion
24
+ export { hasSlotComponent };
25
+
26
+ //# sourceMappingURL=hasSlotComponent.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hasSlotComponent.js","names":[],"sources":["../../src/utils/hasSlotComponent.ts"],"sourcesContent":["import { Fragment, type VNode } from 'vue'\n\n/**\n * Returns true if any vnode in `nodes` has a `type` referentially equal to one\n * of `components`, recursively flattening `Fragment` (v-for / template) children.\n *\n * Dropdown form controls (Select, Autocomplete, ComboBox) use this to detect\n * whether the consumer supplied explicit compound chrome (e.g. SelectTrigger /\n * SelectContent) versus terse `*Item` children or an `items` prop. When chrome\n * is present the control passes the slot through unchanged; otherwise it renders\n * the trigger/value/content internally.\n */\nexport function hasSlotComponent(\n nodes: VNode[] | undefined,\n components: unknown[],\n): boolean {\n if (!nodes) return false\n for (const node of nodes) {\n if (components.includes(node.type)) return true\n if (node.type === Fragment && Array.isArray(node.children)) {\n if (hasSlotComponent(node.children as VNode[], components)) return true\n }\n }\n return false\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,iBACd,OACA,YACS;AACT,KAAI,CAAC,MAAO,QAAO;AACnB,MAAK,MAAM,QAAQ,OAAO;AACxB,MAAI,WAAW,SAAS,KAAK,KAAK,CAAE,QAAO;AAC3C,MAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,SAAS;OACpD,iBAAiB,KAAK,UAAqB,WAAW,CAAE,QAAO;;;AAGvE,QAAO"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auronui/vue",
3
- "version": "1.0.12",
3
+ "version": "1.0.13",
4
4
  "description": "Vue 3 85 components with full visual and functional parity",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -69,7 +69,7 @@
69
69
  "tailwind-merge": "3.5.0",
70
70
  "tailwind-variants": "3.2.2",
71
71
  "vee-validate": "^4.15.1",
72
- "@auronui/styles": "1.0.12"
72
+ "@auronui/styles": "1.0.13"
73
73
  },
74
74
  "devDependencies": {
75
75
  "@chialab/vitest-axe": "0.19.1",
@@ -88,8 +88,8 @@
88
88
  "vitest": "4.1.4",
89
89
  "vue": "^3.5.32",
90
90
  "vue-tsc": "^3.2.6",
91
- "@auronui/standard": "0.0.0",
92
- "@auronui/vitest": "0.0.0"
91
+ "@auronui/vitest": "0.0.0",
92
+ "@auronui/standard": "0.0.0"
93
93
  },
94
94
  "scripts": {
95
95
  "build": "vite build",