@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.
- package/dist/cjs/index.cjs +785 -711
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/components/autocomplete/Autocomplete.js.map +1 -1
- package/dist/components/autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js +22 -3
- package/dist/components/autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/combo-box/ComboBox.js.map +1 -1
- package/dist/components/combo-box/ComboBox.vue_vue_type_script_setup_true_lang.js +20 -2
- package/dist/components/combo-box/ComboBox.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/select/Select.context.js.map +1 -1
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select/Select.vue_vue_type_script_setup_true_lang.js +33 -5
- package/dist/components/select/Select.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/select/SelectItem.js.map +1 -1
- package/dist/components/select/SelectItem.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/components/select/SelectItem.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/select/SelectOverflowChips.js.map +1 -1
- package/dist/components/select/SelectOverflowChips.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/select/SelectValue.js.map +1 -1
- package/dist/components/select/SelectValue.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/select/SelectValue.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/index.d.ts +49 -20
- package/dist/index.js +3 -3
- package/dist/utils/hasSlotComponent.js +26 -0
- package/dist/utils/hasSlotComponent.js.map +1 -0
- 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:
|
|
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:
|
|
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:
|
|
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":""}
|
package/dist/components/select/SelectOverflowChips.vue_vue_type_script_setup_true_lang.js.map
CHANGED
|
@@ -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:
|
|
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
|
|
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(
|
|
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
|
|
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:
|
|
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:
|
|
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:
|
|
1861
|
-
defaultValue:
|
|
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:
|
|
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
|
-
|
|
3648
|
-
|
|
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?:
|
|
7959
|
-
/** Initial selected value (uncontrolled). */
|
|
7960
|
-
defaultValue?:
|
|
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:
|
|
8226
|
-
itemLabel: (value:
|
|
8227
|
-
removeValue: (value:
|
|
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.
|
|
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.
|
|
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/
|
|
92
|
-
"@auronui/
|
|
91
|
+
"@auronui/vitest": "0.0.0",
|
|
92
|
+
"@auronui/standard": "0.0.0"
|
|
93
93
|
},
|
|
94
94
|
"scripts": {
|
|
95
95
|
"build": "vite build",
|