@atscript/vue-form 0.1.58

package/dist/use-as-date-B7CtcRQd.cjs

@@ -0,0 +1,329 @@
+let vue = require("vue");
+//#region src/components/internal/as-date-control.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"type",
+	"value",
+	"placeholder",
+	"name",
+	"disabled",
+	"readonly",
+	"aria-required",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-label"
+];
+//#endregion
+//#region src/components/internal/as-date-control.vue
+var as_date_control_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-date-control",
+	props: {
+		onBlur: {
+			type: Function,
+			required: true
+		},
+		error: {
+			type: String,
+			required: false
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		description: {
+			type: String,
+			required: false
+		},
+		hint: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		prefixIcon: {
+			type: String,
+			required: false
+		},
+		suffixIcon: {
+			type: String,
+			required: false
+		},
+		class: {
+			type: [Object, String],
+			required: false
+		},
+		style: {
+			type: [Object, String],
+			required: false
+		},
+		optional: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		onToggleOptional: {
+			type: Function,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		type: {
+			type: String,
+			required: true
+		},
+		formAction: {
+			type: Object,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		field: {
+			type: Object,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		level: {
+			type: Number,
+			required: false
+		},
+		onRemove: {
+			type: Function,
+			required: false
+		},
+		canRemove: {
+			type: Boolean,
+			required: false
+		},
+		removeLabel: {
+			type: String,
+			required: false
+		},
+		arrayIndex: {
+			type: Number,
+			required: false
+		},
+		path: {
+			type: String,
+			required: true
+		},
+		valueHelp: {
+			type: Object,
+			required: false
+		},
+		singularLabel: {
+			type: String,
+			required: false
+		},
+		inputId: {
+			type: String,
+			required: true
+		},
+		errorId: {
+			type: String,
+			required: true
+		},
+		descId: {
+			type: String,
+			required: true
+		},
+		ariaDescribedBy: {
+			type: String,
+			required: false
+		},
+		currencyCode: {
+			type: String,
+			required: false
+		},
+		unitCode: {
+			type: String,
+			required: false
+		},
+		precisionScale: {
+			type: Number,
+			required: false
+		},
+		prefix: {
+			type: String,
+			required: false
+		},
+		suffix: {
+			type: String,
+			required: false
+		},
+		scale: {
+			type: Number,
+			required: false
+		},
+		hasAdornment: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		hidden: {
+			type: Boolean,
+			required: false
+		},
+		inputType: {
+			type: String,
+			required: true
+		},
+		displayValue: {
+			type: String,
+			required: true
+		},
+		setFromInput: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("input", {
+				id: __props.inputId,
+				type: __props.inputType,
+				value: __props.displayValue,
+				onChange: _cache[0] || (_cache[0] = (e) => __props.setFromInput(e.target.value)),
+				onBlur: _cache[1] || (_cache[1] = (...args) => __props.onBlur && __props.onBlur(...args)),
+				placeholder: __props.placeholder,
+				name: __props.name,
+				disabled: __props.disabled,
+				readonly: __props.readonly,
+				"aria-required": __props.required || void 0,
+				"aria-invalid": !!__props.error || void 0,
+				"aria-describedby": __props.ariaDescribedBy,
+				"aria-label": !__props.label ? __props.name : void 0
+			}, null, 40, _hoisted_1);
+		};
+	}
+});
+//#endregion
+//#region src/composables/use-as-date.ts
+function pad2(n) {
+	return n < 10 ? `0${n}` : String(n);
+}
+function toDate(v) {
+	if (v === null || v === void 0 || v === "") return void 0;
+	if (v instanceof Date) return Number.isFinite(v.getTime()) ? v : void 0;
+	if (typeof v === "number" || typeof v === "string") {
+		const d = new Date(v);
+		return Number.isFinite(d.getTime()) ? d : void 0;
+	}
+}
+/**
+* Format a Date for `<input type="date|datetime-local">`. Renders in the
+* user's local timezone — matching browser-native behaviour for the
+* underlying input element. Storage epoch-ms remains UTC.
+*/
+function formatLocal(d, kind) {
+	const y = d.getFullYear();
+	const m = pad2(d.getMonth() + 1);
+	const day = pad2(d.getDate());
+	if (kind === "date") return `${y}-${m}-${day}`;
+	return `${y}-${m}-${day}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
+/** Extract HH:mm from an epoch-ms number / Date / ISO string. */
+function formatTime(v) {
+	if (v === null || v === void 0 || v === "") return "";
+	if (typeof v === "string" && /^\d{1,2}:\d{2}(:\d{2})?$/.test(v)) {
+		const [hh, mm] = v.split(":");
+		return `${pad2(Number(hh))}:${mm}`;
+	}
+	const d = toDate(v);
+	if (!d) return "";
+	return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
+/**
+* Composable backing `AsDate` / `AsDatetime` / `AsTime`. Pick the variant
+* via `kind`. Conversion direction:
+*
+* - `'date'`: epoch-ms ↔ `YYYY-MM-DD` (local TZ).
+*   Empty input commits `null`. If previous value was a `string`,
+*   commits a string (`YYYY-MM-DD`); otherwise commits epoch-ms (UTC
+*   midnight on the picked date in local TZ — same as `new Date(str)`).
+* - `'datetime'`: epoch-ms ↔ `YYYY-MM-DDTHH:mm` (local TZ).
+* - `'time'`: prev-string ↔ `HH:mm`. Numeric storage isn't meaningful
+*   for naked time-of-day, so we commit a string.
+*/
+function useAsDate(opts) {
+	const inputType = opts.kind === "datetime" ? "datetime-local" : opts.kind === "time" ? "time" : "date";
+	const displayValue = (0, vue.computed)(() => {
+		const v = opts.modelValue();
+		if (opts.kind === "time") return formatTime(v);
+		const d = toDate(v);
+		if (!d) return "";
+		return formatLocal(d, opts.kind === "datetime" ? "datetime" : "date");
+	});
+	function setFromInput(raw) {
+		if (raw === "") {
+			opts.onCommit(null);
+			return;
+		}
+		if (opts.kind === "time") {
+			opts.onCommit(raw);
+			return;
+		}
+		if (typeof opts.modelValue() === "string") {
+			opts.onCommit(raw);
+			return;
+		}
+		const d = new Date(raw);
+		if (!Number.isFinite(d.getTime())) return;
+		opts.onCommit(d.getTime());
+	}
+	return {
+		inputType,
+		displayValue,
+		setFromInput
+	};
+}
+//#endregion
+Object.defineProperty(exports, "as_date_control_default", {
+	enumerable: true,
+	get: function() {
+		return as_date_control_default;
+	}
+});
+Object.defineProperty(exports, "useAsDate", {
+	enumerable: true,
+	get: function() {
+		return useAsDate;
+	}
+});

package/dist/use-as-date-C39i9mzE.mjs

@@ -0,0 +1,318 @@
+import { computed, createElementBlock, defineComponent, openBlock } from "vue";
+//#region src/components/internal/as-date-control.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"type",
+	"value",
+	"placeholder",
+	"name",
+	"disabled",
+	"readonly",
+	"aria-required",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-label"
+];
+//#endregion
+//#region src/components/internal/as-date-control.vue
+var as_date_control_default = /* @__PURE__ */ defineComponent({
+	__name: "as-date-control",
+	props: {
+		onBlur: {
+			type: Function,
+			required: true
+		},
+		error: {
+			type: String,
+			required: false
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		description: {
+			type: String,
+			required: false
+		},
+		hint: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		prefixIcon: {
+			type: String,
+			required: false
+		},
+		suffixIcon: {
+			type: String,
+			required: false
+		},
+		class: {
+			type: [Object, String],
+			required: false
+		},
+		style: {
+			type: [Object, String],
+			required: false
+		},
+		optional: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		onToggleOptional: {
+			type: Function,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		type: {
+			type: String,
+			required: true
+		},
+		formAction: {
+			type: Object,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		field: {
+			type: Object,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		level: {
+			type: Number,
+			required: false
+		},
+		onRemove: {
+			type: Function,
+			required: false
+		},
+		canRemove: {
+			type: Boolean,
+			required: false
+		},
+		removeLabel: {
+			type: String,
+			required: false
+		},
+		arrayIndex: {
+			type: Number,
+			required: false
+		},
+		path: {
+			type: String,
+			required: true
+		},
+		valueHelp: {
+			type: Object,
+			required: false
+		},
+		singularLabel: {
+			type: String,
+			required: false
+		},
+		inputId: {
+			type: String,
+			required: true
+		},
+		errorId: {
+			type: String,
+			required: true
+		},
+		descId: {
+			type: String,
+			required: true
+		},
+		ariaDescribedBy: {
+			type: String,
+			required: false
+		},
+		currencyCode: {
+			type: String,
+			required: false
+		},
+		unitCode: {
+			type: String,
+			required: false
+		},
+		precisionScale: {
+			type: Number,
+			required: false
+		},
+		prefix: {
+			type: String,
+			required: false
+		},
+		suffix: {
+			type: String,
+			required: false
+		},
+		scale: {
+			type: Number,
+			required: false
+		},
+		hasAdornment: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		hidden: {
+			type: Boolean,
+			required: false
+		},
+		inputType: {
+			type: String,
+			required: true
+		},
+		displayValue: {
+			type: String,
+			required: true
+		},
+		setFromInput: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("input", {
+				id: __props.inputId,
+				type: __props.inputType,
+				value: __props.displayValue,
+				onChange: _cache[0] || (_cache[0] = (e) => __props.setFromInput(e.target.value)),
+				onBlur: _cache[1] || (_cache[1] = (...args) => __props.onBlur && __props.onBlur(...args)),
+				placeholder: __props.placeholder,
+				name: __props.name,
+				disabled: __props.disabled,
+				readonly: __props.readonly,
+				"aria-required": __props.required || void 0,
+				"aria-invalid": !!__props.error || void 0,
+				"aria-describedby": __props.ariaDescribedBy,
+				"aria-label": !__props.label ? __props.name : void 0
+			}, null, 40, _hoisted_1);
+		};
+	}
+});
+//#endregion
+//#region src/composables/use-as-date.ts
+function pad2(n) {
+	return n < 10 ? `0${n}` : String(n);
+}
+function toDate(v) {
+	if (v === null || v === void 0 || v === "") return void 0;
+	if (v instanceof Date) return Number.isFinite(v.getTime()) ? v : void 0;
+	if (typeof v === "number" || typeof v === "string") {
+		const d = new Date(v);
+		return Number.isFinite(d.getTime()) ? d : void 0;
+	}
+}
+/**
+* Format a Date for `<input type="date|datetime-local">`. Renders in the
+* user's local timezone — matching browser-native behaviour for the
+* underlying input element. Storage epoch-ms remains UTC.
+*/
+function formatLocal(d, kind) {
+	const y = d.getFullYear();
+	const m = pad2(d.getMonth() + 1);
+	const day = pad2(d.getDate());
+	if (kind === "date") return `${y}-${m}-${day}`;
+	return `${y}-${m}-${day}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
+/** Extract HH:mm from an epoch-ms number / Date / ISO string. */
+function formatTime(v) {
+	if (v === null || v === void 0 || v === "") return "";
+	if (typeof v === "string" && /^\d{1,2}:\d{2}(:\d{2})?$/.test(v)) {
+		const [hh, mm] = v.split(":");
+		return `${pad2(Number(hh))}:${mm}`;
+	}
+	const d = toDate(v);
+	if (!d) return "";
+	return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
+/**
+* Composable backing `AsDate` / `AsDatetime` / `AsTime`. Pick the variant
+* via `kind`. Conversion direction:
+*
+* - `'date'`: epoch-ms ↔ `YYYY-MM-DD` (local TZ).
+*   Empty input commits `null`. If previous value was a `string`,
+*   commits a string (`YYYY-MM-DD`); otherwise commits epoch-ms (UTC
+*   midnight on the picked date in local TZ — same as `new Date(str)`).
+* - `'datetime'`: epoch-ms ↔ `YYYY-MM-DDTHH:mm` (local TZ).
+* - `'time'`: prev-string ↔ `HH:mm`. Numeric storage isn't meaningful
+*   for naked time-of-day, so we commit a string.
+*/
+function useAsDate(opts) {
+	const inputType = opts.kind === "datetime" ? "datetime-local" : opts.kind === "time" ? "time" : "date";
+	const displayValue = computed(() => {
+		const v = opts.modelValue();
+		if (opts.kind === "time") return formatTime(v);
+		const d = toDate(v);
+		if (!d) return "";
+		return formatLocal(d, opts.kind === "datetime" ? "datetime" : "date");
+	});
+	function setFromInput(raw) {
+		if (raw === "") {
+			opts.onCommit(null);
+			return;
+		}
+		if (opts.kind === "time") {
+			opts.onCommit(raw);
+			return;
+		}
+		if (typeof opts.modelValue() === "string") {
+			opts.onCommit(raw);
+			return;
+		}
+		const d = new Date(raw);
+		if (!Number.isFinite(d.getTime())) return;
+		opts.onCommit(d.getTime());
+	}
+	return {
+		inputType,
+		displayValue,
+		setFromInput
+	};
+}
+//#endregion
+export { as_date_control_default as n, useAsDate as t };

package/dist/use-as-dropdown-BMnEm6jF.mjs

@@ -0,0 +1,82 @@
+import { nextTick, onBeforeUnmount, ref, watch } from "vue";
+//#region src/composables/focus-after-toggle.ts
+const FOCUSABLE_SELECTOR = [
+	"input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])"
+].join(",");
+/** Run an action, then focus the first focusable input descendant of `scope`. */
+async function focusFirstAfter(action, scope, ticks = 1) {
+	action();
+	for (let i = 0; i < ticks; i++) await nextTick();
+	const root = scope();
+	if (!root) return;
+	root.querySelector(FOCUSABLE_SELECTOR)?.focus();
+}
+/**
+* Run an action, then focus the first focusable input that wasn't present
+* before the action. Used by array Add buttons so the user lands on the
+* just-added row's first input regardless of how many items already exist.
+* Falls back to first focusable when nothing existed before (the typical
+* "enable optional + add first item" flow).
+*/
+async function focusNewFocusableAfter(action, scope, ticks = 1) {
+	const before = scope();
+	const known = before ? new Set(before.querySelectorAll(FOCUSABLE_SELECTOR)) : null;
+	action();
+	for (let i = 0; i < ticks; i++) await nextTick();
+	const after = scope();
+	if (!after) return;
+	const all = after.querySelectorAll(FOCUSABLE_SELECTOR);
+	for (const el of all) if (!known || !known.has(el)) {
+		el.focus();
+		return;
+	}
+}
+/** Sugar over `focusFirstAfter` scoped to a template ref. */
+function useAsFocusFirstAfter(onToggleOptional) {
+	const rootRef = ref(null);
+	const runAndFocus = (action, ticks = 1) => {
+		focusFirstAfter(action, () => rootRef.value, ticks);
+	};
+	const runAndFocusNew = (action, ticks = 1) => {
+		focusNewFocusableAfter(action, () => rootRef.value, ticks);
+	};
+	return {
+		rootRef,
+		runAndFocus,
+		runAndFocusNew,
+		enableOptional: () => runAndFocus(() => onToggleOptional?.(true))
+	};
+}
+//#endregion
+//#region src/composables/use-as-dropdown.ts
+function useAsDropdown(containerRef) {
+	const isOpen = ref(false);
+	function toggle() {
+		isOpen.value = !isOpen.value;
+	}
+	function close() {
+		isOpen.value = false;
+	}
+	function select(callback) {
+		callback();
+		close();
+	}
+	function onClickOutside(event) {
+		if (containerRef.value && !containerRef.value.contains(event.target)) close();
+	}
+	watch(isOpen, (open) => {
+		if (open) document.addEventListener("click", onClickOutside, true);
+		else document.removeEventListener("click", onClickOutside, true);
+	});
+	onBeforeUnmount(() => document.removeEventListener("click", onClickOutside, true));
+	return {
+		isOpen,
+		toggle,
+		close,
+		select
+	};
+}
+//#endregion
+export { useAsFocusFirstAfter as i, focusFirstAfter as n, focusNewFocusableAfter as r, useAsDropdown as t };