vunor 0.3.1 → 0.4.0

package/dist/DatePickerBase.mjs

@@ -1,293 +1,138 @@
-import { t as useInputProps } from "./utils-6bTTIoaw.js";
-import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeProps, openBlock, ref, renderSlot, resolveComponent, unref, useModel, watch, withCtx, withKeys } from "vue";
+import { i as useRootBinding, n as useForwardToRoot, r as useModelState, t as claimToggle } from "./forward-root-DPGTBptG.js";
+import { n as useInputProps } from "./utils-BCBGEM10.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeProps, openBlock, ref, renderSlot, unref, useModel, watch, withCtx, withKeys, withModifiers } from "vue";
 import { DatePickerRoot, DatePickerTrigger } from "reka-ui";
 import VuIcon from "vunor/Icon";
+import VuInputBase from "vunor/InputBase";
 import VuDatePickerInner from "vunor/DatePickerInner";
 import VuDatePickerPopup from "vunor/DatePickerPopup";
 //#region src/components/DatePicker/DatePickerBase.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = ["onClick"];
+const _hoisted_1 = ["onClick", "onKeydown"];
 //#endregion
 //#region src/components/DatePicker/DatePickerBase.vue
 var DatePickerBase_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
 	__name: "DatePickerBase",
 	props: /* @__PURE__ */ mergeModels({
-		defaultValue: {
-			type: Object,
-			required: false
-		},
-		defaultPlaceholder: {
-			type: Object,
-			required: false
-		},
-		placeholder: {
-			type: [Object, String],
-			required: false
-		},
-		modelValue: {
-			type: [Object, null],
-			required: false
-		},
-		hourCycle: {
-			type: null,
-			required: false
-		},
-		step: {
-			type: Object,
-			required: false
-		},
-		granularity: {
-			type: String,
-			required: false
-		},
+		defaultValue: {},
+		defaultPlaceholder: {},
+		modelValue: {},
+		hourCycle: {},
+		step: {},
+		granularity: {},
 		hideTimeZone: {
 			type: Boolean,
-			required: false
-		},
-		maxValue: {
-			type: Object,
-			required: false
-		},
-		minValue: {
-			type: Object,
-			required: false
-		},
-		locale: {
-			type: String,
-			required: false
+			default: void 0
 		},
+		maxValue: {},
+		minValue: {},
+		locale: {},
 		disabled: {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
 		readonly: {
 			type: Boolean,
-			required: false
-		},
-		isDateUnavailable: {
-			type: Function,
-			required: false
-		},
-		id: {
-			type: String,
-			required: false
-		},
-		dir: {
-			type: String,
-			required: false
-		},
-		name: {
-			type: String,
-			required: false
+			default: void 0
 		},
+		isDateUnavailable: {},
+		id: {},
+		dir: {},
+		name: {},
 		required: {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
 		defaultOpen: {
 			type: Boolean,
-			required: false
-		},
-		open: {
-			type: Boolean,
-			required: false
+			default: void 0
 		},
+		open: { type: Boolean },
 		modal: {
 			type: Boolean,
-			required: false
-		},
-		isDateDisabled: {
-			type: Function,
-			required: false
+			default: void 0
 		},
+		isDateDisabled: {},
 		pagedNavigation: {
 			type: Boolean,
-			required: false
-		},
-		weekStartsOn: {
-			type: Number,
-			required: false
-		},
-		weekdayFormat: {
-			type: String,
-			required: false
+			default: void 0
 		},
+		weekStartsOn: {},
+		weekdayFormat: {},
 		fixedWeeks: {
 			type: Boolean,
-			required: false
-		},
-		numberOfMonths: {
-			type: Number,
-			required: false
+			default: void 0
 		},
+		numberOfMonths: {},
 		preventDeselect: {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
 		closeOnSelect: {
 			type: Boolean,
-			required: false
-		},
-		popupRounded: {
-			type: Boolean,
-			required: false
-		},
-		popupClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			required: false
-		},
-		openOnClick: {
-			type: Boolean,
-			required: false
-		},
-		iconBefore: {
-			type: String,
-			required: false
-		},
-		iconAfter: {
-			type: String,
-			required: false
-		},
-		error: {
-			type: [String, Boolean],
-			required: false
-		},
-		hint: {
-			type: String,
-			required: false
-		},
-		groupTemplate: {
-			type: String,
-			required: false
-		},
-		stackLabel: {
-			type: Boolean,
-			required: false
-		},
-		onBeforeClick: {
-			type: Function,
-			required: false
-		},
-		onAfterClick: {
-			type: Function,
-			required: false
-		},
-		onClick: {
-			type: Function,
-			required: false
-		},
-		onBlur: {
-			type: Function,
-			required: false
-		},
-		onFocus: {
-			type: Function,
-			required: false
-		},
-		label: {
-			type: String,
-			required: false
-		},
-		design: {
-			type: String,
-			required: false
-		},
-		iconPrepend: {
-			type: String,
-			required: false
-		},
-		iconAppend: {
-			type: String,
-			required: false
-		},
-		groupItem: {
-			type: Boolean,
-			required: false
-		},
-		autoGrow: {
-			type: Boolean,
-			required: false
-		},
-		active: {
-			type: Boolean,
-			required: false
-		},
-		loading: {
-			type: Boolean,
-			required: false
-		},
-		noUnderline: {
+			default: void 0
+		},
+		popupRounded: { type: Boolean },
+		popupClass: {},
+		openOnClick: { type: Boolean },
+		iconBefore: {},
+		iconAfter: {},
+		error: { type: [String, Boolean] },
+		hint: {},
+		groupTemplate: {},
+		stackLabel: { type: Boolean },
+		onBeforeClick: {},
+		onAfterClick: {},
+		onClick: {},
+		onBlur: {},
+		onFocus: {},
+		label: {},
+		design: {},
+		iconPrepend: {},
+		iconAppend: {},
+		groupItem: { type: Boolean },
+		autoGrow: { type: Boolean },
+		active: { type: Boolean },
+		loading: { type: Boolean },
+		noUnderline: { type: Boolean },
+		onAppendClick: {},
+		onPrependClick: {},
+		placeholder: {},
+		type: {},
+		rows: {},
+		maxlength: {},
+		autocomplete: {}
+	}, {
+		"open": {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
-		onAppendClick: {
-			type: Function,
-			required: false
-		},
-		onPrependClick: {
-			type: Function,
-			required: false
-		},
-		type: {
-			type: String,
-			required: false
-		},
-		rows: {
-			type: Number,
-			required: false
-		},
-		maxlength: {
-			type: Number,
-			required: false
-		},
-		autocomplete: {
-			type: String,
-			required: false
-		}
-	}, {
-		"open": { type: Boolean },
 		"openModifiers": {},
-		"modelValue": { type: Object },
+		"modelValue": {},
 		"modelModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["keydown-enter"], ["update:open", "update:modelValue"]),
+	emits: /* @__PURE__ */ mergeModels(["keydown-enter", "update:placeholder"], ["update:open", "update:modelValue"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const open = useModel(__props, "open");
 		const modelValue = useModel(__props, "modelValue");
-		const datePickerRootProps = computed(() => {
-			return {
-				isDateDisabled: props.isDateDisabled,
-				pagedNavigation: props.pagedNavigation,
-				weekStartsOn: props.weekStartsOn,
-				weekdayFormat: props.weekdayFormat,
-				fixedWeeks: props.fixedWeeks,
-				numberOfMonths: props.numberOfMonths,
-				preventDeselect: props.preventDeselect,
-				defaultValue: props.defaultValue,
-				defaultPlaceholder: props.defaultPlaceholder,
-				placeholder: props.placeholder,
-				modelValue: props.modelValue,
-				hourCycle: props.hourCycle,
-				granularity: props.granularity,
-				hideTimeZone: props.hideTimeZone,
-				maxValue: props.maxValue,
-				minValue: props.minValue,
-				locale: props.locale,
-				disabled: props.disabled,
-				readonly: props.readonly,
-				isDateUnavailable: props.isDateUnavailable,
-				required: props.required,
-				id: props.id,
-				dir: props.dir,
-				defaultOpen: props.defaultOpen,
-				modal: props.modal
-			};
-		});
+		const emit = __emit;
+		const rootProps = useForwardToRoot(DatePickerRoot, props, emit, [
+			"modelValue",
+			"open",
+			"placeholder",
+			"update:modelValue",
+			"update:open"
+		]);
 		const inputProps = useInputProps();
+		const isOpen = useModelState(open, DatePickerRoot, "defaultOpen", props);
+		const rootOpen = useRootBinding(open, isOpen);
+		function onAppendClick(event) {
+			if (claimToggle(event)) isOpen.value = true;
+		}
+		function activateTrigger(event) {
+			event.currentTarget?.click();
+		}
 		const popupProps = computed(() => {
 			return {
 				popupRounded: props.popupRounded,
@@ -295,8 +140,9 @@ var DatePickerBase_default = /* @__PURE__ */ defineComponent({
 			};
 		});
 		function onClick($event) {
-			if (props.openOnClick) open.value = true;
-			else ($event.target?.querySelector("[tabindex=\"0\"]"))?.focus();
+			if (props.openOnClick) {
+				if (claimToggle($event)) isOpen.value = true;
+			} else ($event.target?.querySelector("[tabindex=\"0\"]"))?.focus();
 		}
 		const datePickerInnerKey = ref(0);
 		const inputBase = ref(null);
@@ -309,27 +155,28 @@ var DatePickerBase_default = /* @__PURE__ */ defineComponent({
 		* @param {DateValue} [newValue] - The new date value
 		*/
 		async function onUpdate(newValue) {
-			if (!newValue && !open.value) {
+			if (!newValue && !isOpen.value) {
 				await nextTick();
 				inputBase.value?.$el.querySelector("[tabindex=\"0\"]")?.focus();
 			}
 		}
-		const emit = __emit;
 		return (_ctx, _cache) => {
-			const _component_VuInputBase = resolveComponent("VuInputBase");
-			return openBlock(), createBlock(unref(DatePickerRoot), mergeProps(datePickerRootProps.value, {
-				open: open.value,
-				"onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event),
+			return openBlock(), createBlock(unref(DatePickerRoot), mergeProps(unref(rootProps), {
+				open: unref(rootOpen),
+				"onUpdate:open": _cache[1] || (_cache[1] = (value) => open.value = value),
 				modelValue: modelValue.value,
-				"onUpdate:modelValue": [_cache[3] || (_cache[3] = ($event) => modelValue.value = $event), onUpdate]
+				"onUpdate:modelValue": [_cache[2] || (_cache[2] = ($event) => modelValue.value = $event), onUpdate]
 			}), {
-				default: withCtx(() => [createVNode(_component_VuInputBase, mergeProps(unref(inputProps), {
+				default: withCtx(() => [createVNode(VuInputBase, mergeProps({
+					"data-has-value": "",
+					..._ctx.$attrs,
+					...unref(inputProps)
+				}, {
 					ref_key: "inputBase",
 					ref: inputBase,
-					"data-has-value": "",
-					active: open.value,
+					active: unref(isOpen),
 					"icon-append": "i--calendar",
-					onAppendClick: _cache[1] || (_cache[1] = ($event) => open.value = true)
+					onAppendClick
 				}), {
 					default: withCtx((slotProps) => [(openBlock(), createBlock(VuDatePickerInner, mergeProps({
 						key: String(datePickerInnerKey.value),
@@ -345,13 +192,17 @@ var DatePickerBase_default = /* @__PURE__ */ defineComponent({
 					}, () => [createVNode(unref(DatePickerTrigger), { "as-child": "" }, {
 						default: withCtx(() => [createElementVNode("div", {
 							class: "i8-icon-wrap",
+							"data-vu-trigger": "",
+							role: "button",
+							tabindex: "0",
+							"aria-label": "Open calendar",
 							onClick: emitClick,
-							tabindex: "0"
-						}, [createVNode(VuIcon, { name: iconAppend }, null, 8, ["name"])], 8, _hoisted_1)]),
+							onKeydown: withKeys(withModifiers(activateTrigger, ["prevent"]), ["enter", "space"])
+						}, [createVNode(VuIcon, { name: iconAppend }, null, 8, ["name"])], 40, _hoisted_1)]),
 						_: 2
 					}, 1024)])]),
 					_: 3
-				}, 16, ["active"]), open.value ? (openBlock(), createBlock(VuDatePickerPopup, normalizeProps(mergeProps({ key: 0 }, popupProps.value)), null, 16)) : createCommentVNode("v-if", true)]),
+				}, 16, ["active"]), unref(isOpen) ? (openBlock(), createBlock(VuDatePickerPopup, normalizeProps(mergeProps({ key: 0 }, popupProps.value)), null, 16)) : createCommentVNode("", true)]),
 				_: 3
 			}, 16, ["open", "modelValue"]);
 		};

package/dist/DatePickerPopup.d.mts

@@ -1,8 +1,33 @@
+import type { DatePickerContentProps } from 'reka-ui';
 import type { TVueCssClass } from 'vunor/utils';
-type __VLS_Props = {
+type __VLS_Props = Omit<DatePickerContentProps, 'as' | 'asChild'> & {
     popupRounded?: boolean;
     popupClass?: TVueCssClass;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
+    focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
+    interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+    onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+    onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
+}>, {
+    forceMount: boolean;
+    sideFlip: boolean;
+    alignFlip: boolean;
+    avoidCollisions: boolean;
+    hideShiftedArrow: boolean;
+    hideWhenDetached: boolean;
+    disableUpdateOnLayoutShift: boolean;
+    prioritizePosition: boolean;
+    disableOutsidePointerEvents: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/DatePickerPopup.mjs

@@ -1,3 +1,4 @@
+import { n as useForwardToRoot } from "./forward-root-DPGTBptG.js";
 import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 import { DatePickerArrow, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerContent, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerNext, DatePickerPrev } from "reka-ui";
 import VuButton from "vunor/Button";
@@ -7,24 +8,72 @@ const _hoisted_1 = { class: "calendar-month-grid" };
 //#endregion
 //#region src/components/DatePicker/DatePickerPopup.vue
 var DatePickerPopup_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
 	__name: "DatePickerPopup",
 	props: {
-		popupRounded: {
+		portal: {},
+		forceMount: {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
-		popupClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			required: false
-		}
+		side: {},
+		sideOffset: {},
+		sideFlip: {
+			type: Boolean,
+			default: void 0
+		},
+		align: {},
+		alignOffset: {},
+		alignFlip: {
+			type: Boolean,
+			default: void 0
+		},
+		avoidCollisions: {
+			type: Boolean,
+			default: void 0
+		},
+		collisionBoundary: {},
+		collisionPadding: {},
+		arrowPadding: {},
+		hideShiftedArrow: {
+			type: Boolean,
+			default: void 0
+		},
+		sticky: {},
+		hideWhenDetached: {
+			type: Boolean,
+			default: void 0
+		},
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		disableUpdateOnLayoutShift: {
+			type: Boolean,
+			default: void 0
+		},
+		prioritizePosition: {
+			type: Boolean,
+			default: void 0
+		},
+		reference: {},
+		disableOutsidePointerEvents: {
+			type: Boolean,
+			default: void 0
+		},
+		popupRounded: { type: Boolean },
+		popupClass: {}
 	},
-	setup(__props) {
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(__props, { emit: __emit }) {
+		const contentProps = useForwardToRoot(DatePickerContent, __props, __emit, ["as", "asChild"]);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(DatePickerContent), { "as-child": "" }, {
+			return openBlock(), createBlock(unref(DatePickerContent), mergeProps(unref(contentProps), { "as-child": "" }), {
 				default: withCtx(() => [createVNode(VuCard, mergeProps({
 					level: "body",
 					class: "date-picker-root"
@@ -104,7 +153,7 @@ var DatePickerPopup_default = /* @__PURE__ */ defineComponent({
 					_: 1
 				}, 16, ["rounded", "class"])]),
 				_: 1
-			});
+			}, 16);
 		};
 	}
 });

package/dist/DelayedSwitch.mjs

@@ -4,20 +4,9 @@ import { defineComponent, ref, renderSlot, watch } from "vue";
 var DelayedSwitch_default = /* @__PURE__ */ defineComponent({
 	__name: "DelayedSwitch",
 	props: {
-		value: {
-			type: Boolean,
-			required: false
-		},
-		delayOn: {
-			type: Number,
-			required: false,
-			default: 0
-		},
-		delayOff: {
-			type: Number,
-			required: false,
-			default: 200
-		}
+		value: { type: Boolean },
+		delayOn: { default: 0 },
+		delayOff: { default: 200 }
 	},
 	setup(__props) {
 		const props = __props;