@auronui/vue 1.0.11 → 1.0.12

package/dist/components/select/SelectOverflowChips.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,85 @@
+import Chip_default from "../chip/Chip.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, nextTick, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, useTemplateRef, watch, withCtx } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+//#region src/components/select/SelectOverflowChips.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	ref: "container",
+	style: {
+		"display": "flex",
+		"flex-wrap": "nowrap",
+		"align-items": "center",
+		"gap": "4px",
+		"overflow": "hidden",
+		"flex": "1",
+		"min-width": "0"
+	}
+};
+var SelectOverflowChips_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SelectOverflowChips",
+	props: {
+		values: {},
+		getLabel: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const containerEl = useTemplateRef("container");
+		const visibleCount = ref(props.values.length);
+		const overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value));
+		let measuring = false;
+		async function reflow() {
+			if (measuring) return;
+			measuring = true;
+			try {
+				const el = containerEl.value;
+				if (!el) return;
+				visibleCount.value = props.values.length;
+				await nextTick();
+				const chips = [...el.querySelectorAll("[data-chip-item]")];
+				if (!chips.length) return;
+				const containerW = el.offsetWidth;
+				if (!containerW) return;
+				const BADGE_W = 76;
+				let usedW = 0;
+				let n = 0;
+				for (let i = 0; i < chips.length; i++) {
+					const gap = i > 0 ? 4 : 0;
+					const chipW = chips[i].offsetWidth;
+					const budget = i === chips.length - 1 ? containerW : containerW - BADGE_W;
+					if (usedW + gap + chipW > budget) break;
+					usedW += gap + chipW;
+					n++;
+				}
+				visibleCount.value = Math.max(1, n);
+			} finally {
+				measuring = false;
+			}
+		}
+		onMounted(reflow);
+		useResizeObserver(containerEl, reflow);
+		watch(() => props.values.join("\0"), () => reflow(), { flush: "post" });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.values, (val, i) => {
+				return openBlock(), createBlock(Chip_default, {
+					key: val,
+					"data-chip-item": "",
+					size: "sm",
+					style: normalizeStyle(i >= visibleCount.value ? "display: none" : void 0)
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.getLabel(val)), 1)]),
+					_: 2
+				}, 1032, ["style"]);
+			}), 128)), overflowCount.value > 0 ? (openBlock(), createBlock(Chip_default, {
+				key: 0,
+				size: "sm",
+				color: "default"
+			}, {
+				default: withCtx(() => [createTextVNode(" +" + toDisplayString(overflowCount.value) + " more ", 1)]),
+				_: 1
+			})) : createCommentVNode("", true)], 512);
+		};
+	}
+});
+//#endregion
+export { SelectOverflowChips_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SelectOverflowChips.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/select/SelectOverflowChips.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +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"}

package/dist/components/select/SelectValue.js.map

@@ -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'\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      <!--\n        Label resolution order:\n        1. Reka's native selectedLabel — populated via optionsSet once items mount\n           (works after first open, and in real browsers via DocumentFragment path)\n        2. itemRegistry label — populated at setup time for items with explicit\n           textValue prop, or at onMounted for slot-text items after first open\n        3. Placeholder when no value is selected\n      -->\n      <template v-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":""}
+{"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":""}

package/dist/components/select/SelectValue.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,5 @@
 import { useSelectInject } from "./Select.context.js";
+import SelectOverflowChips_default from "./SelectOverflowChips.js";
 import { Fragment, createBlock, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { SelectValue } from "reka-ui";
 //#region src/components/select/SelectValue.vue?vue&type=script&setup=true&lang.ts
@@ -17,7 +18,11 @@ var SelectValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				placeholder: props.placeholder,
 				"data-slot": "value"
 			}, {
-				default: withCtx(({ selectedLabel, modelValue }) => [selectedLabel && selectedLabel.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(ctx).itemLabel(Array.isArray(modelValue) ? modelValue : modelValue.toString())), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64))]),
+				default: withCtx(({ selectedLabel, modelValue }) => [unref(ctx).multiple.value && Array.isArray(modelValue) && modelValue.length > 0 ? (openBlock(), createBlock(SelectOverflowChips_default, {
+					key: 0,
+					values: modelValue,
+					"get-label": unref(ctx).itemLabel
+				}, 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))]),
 				_: 1
 			}, 8, ["class", "placeholder"]);
 		};

package/dist/components/select/SelectValue.vue_vue_type_script_setup_true_lang.js.map

@@ -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'\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      <!--\n        Label resolution order:\n        1. Reka's native selectedLabel — populated via optionsSet once items mount\n           (works after first open, and in real browsers via DocumentFragment path)\n        2. itemRegistry label — populated at setup time for items with explicit\n           textValue prop, or at onMounted for slot-text items after first open\n        3. Placeholder when no value is selected\n      -->\n      <template v-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":";;;;;;;;;;;EAIA,MAAM,QAAQ;EAQd,MAAM,MAAM,iBAAgB;;uBAI1B,YAwBc,MAAA,YAAA,EAAA;IAvBX,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,OAAK,CAAA;IAC5B,aAAa,MAAM;IACpB,aAAU;;IAEC,SAAO,SAWL,EAXS,eAAe,iBAAU,CAS7B,iBAAiB,cAAc,SAAM,KAAA,WAAA,EAArD,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"}
+{"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"}