vunor 0.3.1 → 0.4.0

package/dist/SelectBase.d.mts

@@ -6,10 +6,25 @@ interface TSelectItem {
     disabled?: boolean;
 }
 type TSelectItems<T extends TSelectItem = TSelectItem> = Array<T | string> | Record<string, Array<T | string>>;
-interface TSelectBaseProps<T extends TSelectItem> {
+/** Select model: a string, or an array of strings with `multiple` */
+type TSelectModel<M extends boolean = false> = M extends true ? string[] : string;
+interface TSelectBaseProps<T extends TSelectItem, M extends boolean = false> {
     required?: boolean;
     disabledValues?: Array<string | null | undefined>;
-    defaultValue?: string | null | undefined;
+    /** Initial value when uncontrolled (an array with `multiple`). */
+    defaultValue?: TSelectModel<M> | null | undefined;
+    /** Initial open state when `v-model:open` is not used. */
+    defaultOpen?: boolean;
+    /** Allow selecting several values; the model becomes an array. */
+    multiple?: M;
+    /** Compare values by a field or a function (forwarded to Reka `SelectRoot`). */
+    by?: string | ((a: unknown, b: unknown) => boolean);
+    /** Reading direction (forwarded to Reka `SelectRoot`). */
+    dir?: 'ltr' | 'rtl';
+    /** Native `autocomplete` of the hidden form select. */
+    autocomplete?: string;
+    /** Form field name: the value is submitted with the enclosing `<form>`. */
+    name?: string;
     popupClass?: string | Record<string, boolean>;
     popupRound?: boolean;
     valueClass?: string | Record<string, boolean>;
@@ -25,13 +40,13 @@ interface TSelectBaseProps<T extends TSelectItem> {
     updatePositionStrategy?: 'always' | 'optimized';
 }
 
-declare const __VLS_export: <T extends TSelectItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(TSelectBaseProps<T> & {
+declare const __VLS_export: <T extends TSelectItem, M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(TSelectBaseProps<T, M> & {
         open?: boolean;
-        modelValue?: string;
+        modelValue?: TSelectModel<M>;
     }) & {
-        "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: TSelectModel<M> | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -40,9 +55,9 @@ declare const __VLS_export: <T extends TSelectItem>(__VLS_props: NonNullable<Awa
     slots: {
         default?: (props: {
             displayItem: T | undefined;
-            value: string | undefined;
-            openPopup: () => void;
-            open: boolean | undefined;
+            value: TSelectModel<M>;
+            openPopup: (event?: Event) => void;
+            open: boolean;
             icon: string;
         }) => any;
     } & {
@@ -53,7 +68,7 @@ declare const __VLS_export: <T extends TSelectItem>(__VLS_props: NonNullable<Awa
     } & {
         item?: (props: T) => any;
     };
-    emit: ((event: "update:open", value: boolean | undefined) => void) & ((event: "update:modelValue", value: string | undefined) => void);
+    emit: ((event: "update:open", value: boolean) => void) & ((event: "update:modelValue", value: TSelectModel<M> | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/SelectBase.mjs

@@ -1,3 +1,4 @@
+import { i as useRootBinding, n as useForwardToRoot, r as useModelState, t as claimToggle } from "./forward-root-DPGTBptG.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
 import { SelectContent, SelectGroup, SelectItem, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport } from "reka-ui";
 import VuIcon from "vunor/Icon";
@@ -6,76 +7,47 @@ const _hoisted_1 = { class: "hidden" };
 //#endregion
 //#region src/components/Select/SelectBase.vue
 var SelectBase_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
 	__name: "SelectBase",
 	props: /* @__PURE__ */ mergeModels({
 		required: {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
-		disabledValues: {
-			type: Array,
-			required: false
-		},
-		defaultValue: {
-			type: null,
-			required: false
-		},
-		popupClass: {
-			type: [String, Object],
-			required: false
-		},
-		popupRound: {
+		disabledValues: {},
+		defaultValue: {},
+		defaultOpen: {
 			type: Boolean,
-			required: false
-		},
-		valueClass: {
-			type: [String, Object],
-			required: false
-		},
-		iconClass: {
-			type: [String, Object],
-			required: false
-		},
-		class: {
-			type: [String, Object],
-			required: false
-		},
-		items: {
-			type: [Array, Object],
-			required: true
+			default: void 0
 		},
+		multiple: { default: void 0 },
+		by: {},
+		dir: {},
+		autocomplete: {},
+		name: {},
+		popupClass: {},
+		popupRound: { type: Boolean },
+		valueClass: {},
+		iconClass: {},
+		class: {},
+		items: {},
 		disabled: {
 			type: Boolean,
-			required: false
-		},
-		placeholder: {
-			type: String,
-			required: false
+			default: void 0
 		},
-		popupPosition: {
-			type: String,
-			required: false
-		},
-		side: {
-			type: String,
-			required: false
-		},
-		sideOffset: {
-			type: Number,
-			required: false
-		},
-		sticky: {
-			type: String,
-			required: false
-		},
-		updatePositionStrategy: {
-			type: String,
-			required: false
-		}
+		placeholder: {},
+		popupPosition: {},
+		side: {},
+		sideOffset: {},
+		sticky: {},
+		updatePositionStrategy: {}
 	}, {
-		"open": { type: Boolean },
+		"open": {
+			type: Boolean,
+			default: void 0
+		},
 		"openModifiers": {},
-		"modelValue": { type: String },
+		"modelValue": {},
 		"modelModifiers": {}
 	}),
 	emits: ["update:open", "update:modelValue"],
@@ -83,6 +55,10 @@ var SelectBase_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const open = useModel(__props, "open");
 		const modelValue = useModel(__props, "modelValue");
+		const rootProps = useForwardToRoot(SelectRoot, props, void 0, ["modelValue", "open"]);
+		const isOpen = useModelState(open, SelectRoot, "defaultOpen", props);
+		const value = useModelState(modelValue, SelectRoot, "defaultValue", props);
+		const rootOpen = useRootBinding(open, isOpen);
 		const groups = computed(() => {
 			if (Array.isArray(props.items)) return [{
 				grp: "",
@@ -111,37 +87,43 @@ var SelectBase_default = /* @__PURE__ */ defineComponent({
 		function isItemDisabled(val) {
 			return props.disabledValues?.includes(val);
 		}
-		function openPopup() {
-			if (!props.disabled) open.value = !open.value;
+		function openPopup(event) {
+			if (claimToggle(event) && !props.disabled) isOpen.value = !isOpen.value;
 		}
-		const displayItem = computed(() => flatItems.value.get(modelValue.value));
+		const displayItem = computed(() => {
+			const current = value.value;
+			if (!Array.isArray(current)) return flatItems.value.get(current);
+			if (current.length === 0) return;
+			const label = current.map((v) => flatItems.value.get(v)?.label ?? v).join(", ");
+			return {
+				value: current.join(", "),
+				label
+			};
+		});
 		function getSearchValue(item) {
 			return item.search || item.label?.replace(/[^\p{L}\p{N}\p{P}\p{M}\p{Zs}]/gu, "").trim();
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" prettier-ignore-attribute default-value "), createVNode(unref(SelectRoot), {
+			return openBlock(), createBlock(unref(SelectRoot), mergeProps(unref(rootProps), {
 				modelValue: modelValue.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
-				open: open.value,
-				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => open.value = $event),
-				disabled: __props.disabled,
-				required: __props.required,
-				"default-value": __props.defaultValue
-			}, {
+				open: unref(rootOpen),
+				"onUpdate:open": _cache[1] || (_cache[1] = (value) => open.value = value)
+			}), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
 					displayItem: displayItem.value,
-					value: modelValue.value,
+					value: unref(value),
 					openPopup,
-					open: open.value,
+					open: unref(isOpen),
 					icon: "i--chevron-down"
-				}, () => [createVNode(unref(SelectTrigger), { class: normalizeClass(__props.class) }, {
+				}, () => [createVNode(unref(SelectTrigger), mergeProps(_ctx.$attrs, { class: __props.class }), {
 					default: withCtx(() => [
 						!!displayItem.value?.icon ? (openBlock(), createBlock(VuIcon, {
 							key: 0,
 							name: displayItem.value.icon,
 							class: "inline-block vertical-middle mr-$xs",
 							style: { "color": "currentColor" }
-						}, null, 8, ["name"])) : createCommentVNode("v-if", true),
+						}, null, 8, ["name"])) : createCommentVNode("", true),
 						createVNode(unref(SelectValue), {
 							placeholder: __props.placeholder,
 							class: normalizeClass(__props.valueClass)
@@ -155,7 +137,7 @@ var SelectBase_default = /* @__PURE__ */ defineComponent({
 						}, null, 8, ["class"])
 					]),
 					_: 1
-				}, 8, ["class"])]), createVNode(unref(SelectPortal), null, {
+				}, 16, ["class"])]), createVNode(unref(SelectPortal), null, {
 					default: withCtx(() => [createVNode(unref(SelectContent), {
 						class: normalizeClass(["select-content group", __props.popupClass]),
 						style: normalizeStyle({
@@ -184,14 +166,14 @@ var SelectBase_default = /* @__PURE__ */ defineComponent({
 										grpIndex > 0 ? (openBlock(), createBlock(unref(SelectSeparator), {
 											key: 0,
 											class: "select-separator"
-										})) : createCommentVNode("v-if", true),
+										})) : createCommentVNode("", true),
 										!!g.grp ? (openBlock(), createBlock(unref(SelectLabel), {
 											key: 1,
 											class: "select-grp-label"
 										}, {
 											default: withCtx(() => [renderSlot(_ctx.$slots, "group", mergeProps({ ref_for: true }, g), () => [createElementVNode("span", null, toDisplayString(g.grp), 1)])]),
 											_: 2
-										}, 1024)) : createCommentVNode("v-if", true),
+										}, 1024)) : createCommentVNode("", true),
 										createVNode(unref(SelectGroup), null, {
 											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(g.items, (item, index) => {
 												return openBlock(), createBlock(unref(SelectItem), {
@@ -209,7 +191,7 @@ var SelectBase_default = /* @__PURE__ */ defineComponent({
 														name: item.icon,
 														class: "inline-block vertical-middle mr-$xs",
 														style: { "color": "currentColor" }
-													}, null, 8, ["name"])) : createCommentVNode("v-if", true), createTextVNode(" " + toDisplayString(item.label), 1)])])]),
+													}, null, 8, ["name"])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(item.label), 1)])])]),
 													_: 2
 												}, 1032, [
 													"value",
@@ -245,13 +227,7 @@ var SelectBase_default = /* @__PURE__ */ defineComponent({
 					_: 3
 				})]),
 				_: 3
-			}, 8, [
-				"modelValue",
-				"open",
-				"disabled",
-				"required",
-				"default-value"
-			])], 2112);
+			}, 16, ["modelValue", "open"]);
 		};
 	}
 });

package/dist/Slider.d.mts

@@ -26,7 +26,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
     onValueCommit?: ((payload: number[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    required: boolean;
+    disabled: boolean;
+    asChild: boolean;
+    inverted: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/Slider.mjs

@@ -1,5 +1,6 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui";
+import { n as useForwardToRoot, r as useModelState } from "./forward-root-DPGTBptG.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui";
 import VuLabel from "vunor/Label";
 //#region src/components/Slider/Slider.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = {
@@ -12,123 +13,53 @@ const _hoisted_2 = { class: "text-label text-grey-400" };
 var Slider_default = /* @__PURE__ */ defineComponent({
 	__name: "Slider",
 	props: /* @__PURE__ */ mergeModels({
-		defaultValue: {
-			type: Array,
-			required: false
-		},
-		modelValue: {
-			type: [Array, null],
-			required: false
-		},
+		defaultValue: {},
+		modelValue: {},
 		disabled: {
 			type: Boolean,
-			required: false
-		},
-		orientation: {
-			type: String,
-			required: false
-		},
-		dir: {
-			type: String,
-			required: false
+			default: void 0
 		},
+		orientation: {},
+		dir: {},
 		inverted: {
 			type: Boolean,
-			required: false
-		},
-		min: {
-			type: Number,
-			required: false
-		},
-		max: {
-			type: Number,
-			required: false
-		},
-		step: {
-			type: Number,
-			required: false
-		},
-		minStepsBetweenThumbs: {
-			type: Number,
-			required: false
-		},
-		thumbAlignment: {
-			type: String,
-			required: false
+			default: void 0
 		},
+		min: {},
+		max: {},
+		step: {},
+		minStepsBetweenThumbs: {},
+		thumbAlignment: {},
 		asChild: {
 			type: Boolean,
-			required: false
-		},
-		as: {
-			type: null,
-			required: false
-		},
-		name: {
-			type: String,
-			required: false
+			default: void 0
 		},
+		as: {},
+		name: {},
 		required: {
 			type: Boolean,
-			required: false
-		},
-		class: {
-			type: [String, Object],
-			required: false
-		},
-		rootClass: {
-			type: [String, Object],
-			required: false
-		},
-		trackClass: {
-			type: [String, Object],
-			required: false
-		},
-		rangeClass: {
-			type: [String, Object],
-			required: false
-		},
-		hideRange: {
-			type: Boolean,
-			required: false
-		},
-		thumbs: {
-			type: Number,
-			required: false
-		},
-		labels: {
-			type: Array,
-			required: false
-		},
-		sliderClass: {
-			type: [
-				String,
-				Object,
-				Array
-			],
-			required: false
-		},
-		label: {
-			type: String,
-			required: false
-		},
-		displayValue: {
-			type: Boolean,
-			required: false
-		}
+			default: void 0
+		},
+		class: {},
+		rootClass: {},
+		trackClass: {},
+		rangeClass: {},
+		hideRange: { type: Boolean },
+		thumbs: {},
+		labels: {},
+		sliderClass: {},
+		label: {},
+		displayValue: { type: Boolean }
 	}, {
-		"modelValue": { type: Array },
+		"modelValue": {},
 		"modelModifiers": {}
 	}),
 	emits: /* @__PURE__ */ mergeModels(["update:modelValue", "valueCommit"], ["update:modelValue"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
-		const emits = __emit;
-		const forwarded = useForwardPropsEmits(computed(() => {
-			const { class: _, rootClass, hideRange, trackClass, rangeClass, thumbs, labels, sliderClass, label, displayValue, ...delegated } = props;
-			return delegated;
-		}), emits);
+		const forwarded = useForwardToRoot(SliderRoot, props, __emit, ["modelValue", "update:modelValue"]);
 		const modelValue = useModel(__props, "modelValue");
+		const value = useModelState(modelValue, SliderRoot, "defaultValue", props);
 		function getSliderClass(n) {
 			if (Array.isArray(props.sliderClass)) return props.sliderClass[n];
 			else if (props.sliderClass !== void 0) return props.sliderClass;
@@ -137,7 +68,7 @@ var Slider_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("div", { class: normalizeClass(__props.class) }, [!!__props.label || __props.displayValue ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(VuLabel, null, {
 				default: withCtx(() => [createTextVNode(toDisplayString(__props.label || ""), 1)]),
 				_: 1
-			}), createElementVNode("span", _hoisted_2, toDisplayString(modelValue.value?.join(" | ")), 1)])) : createCommentVNode("v-if", true), createVNode(unref(SliderRoot), mergeProps(unref(forwarded), {
+			}), createElementVNode("span", _hoisted_2, toDisplayString(unref(value)?.join(" | ")), 1)])) : createCommentVNode("", true), createVNode(unref(SliderRoot), mergeProps(unref(forwarded), {
 				modelValue: modelValue.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
 				class: ["slider", __props.rootClass]
@@ -146,7 +77,7 @@ var Slider_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [!__props.hideRange ? (openBlock(), createBlock(unref(SliderRange), {
 						key: 0,
 						class: normalizeClass(__props.rangeClass || "slider-range")
-					}, null, 8, ["class"])) : createCommentVNode("v-if", true)]),
+					}, null, 8, ["class"])) : createCommentVNode("", true)]),
 					_: 1
 				}, 8, ["class"]), renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.thumbs || 1, (n) => {
 					return openBlock(), createBlock(unref(SliderThumb), {

package/dist/Tabs.mjs

@@ -5,54 +5,18 @@ import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "rek
 var Tabs_default = /* @__PURE__ */ defineComponent({
 	__name: "Tabs",
 	props: /* @__PURE__ */ mergeModels({
-		tabs: {
-			type: Array,
-			required: true
-		},
-		defaultValue: {
-			type: String,
-			required: false
-		},
-		activationMode: {
-			type: String,
-			required: false
-		},
-		dir: {
-			type: String,
-			required: false
-		},
-		indicator: {
-			type: Boolean,
-			required: false
-		},
-		noContent: {
-			type: Boolean,
-			required: false
-		},
-		orientation: {
-			type: String,
-			required: false
-		},
-		tabsListClass: {
-			type: [
-				String,
-				Object,
-				Array
-			],
-			required: false,
-			default: "flex relative"
-		},
-		tabGrow: {
-			type: Boolean,
-			required: false
-		},
-		tabClass: {
-			type: String,
-			required: false,
-			default: "c8-flat"
-		}
+		tabs: {},
+		defaultValue: {},
+		activationMode: {},
+		dir: {},
+		indicator: { type: Boolean },
+		noContent: { type: Boolean },
+		orientation: {},
+		tabsListClass: { default: "flex relative" },
+		tabGrow: { type: Boolean },
+		tabClass: { default: "c8-flat" }
 	}, {
-		"modelValue": { type: String },
+		"modelValue": {},
 		"modelModifiers": {}
 	}),
 	emits: ["update:modelValue"],
@@ -71,7 +35,7 @@ var Tabs_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [__props.indicator ? (openBlock(), createBlock(unref(TabsIndicator), {
 						key: 0,
 						class: "tabs-indicator"
-					})) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab) => {
+					})) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab) => {
 						return openBlock(), createBlock(unref(TabsTrigger), {
 							"as-child": "",
 							value: tab.value
@@ -92,7 +56,7 @@ var Tabs_default = /* @__PURE__ */ defineComponent({
 						default: withCtx(() => [renderSlot(_ctx.$slots, tab.value)]),
 						_: 2
 					}, 1032, ["value"]);
-				}), 256)) : createCommentVNode("v-if", true)]),
+				}), 256)) : createCommentVNode("", true)]),
 				_: 3
 			}, 8, [
 				"modelValue",