@vizejs/ui 0.386.0 → 0.388.0

package/dist/error-summary-DMe4IlM9.mjs

@@ -0,0 +1,209 @@
+import { a as useDeterministicId } from "./deterministic-id-yMq4HfmS.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentScope, nextTick, onMounted, onScopeDispose, openBlock, renderList, renderSlot, shallowReadonly, shallowRef, toDisplayString, toRef, toValue, unref, useTemplateRef, watch } from "vue";
+//#region src/families/form/error-summary/error-summary-runtime.ts
+const invalidOptionDiagnostic = "VIZE_UI_ERROR_SUMMARY_OPTION";
+const disposedDiagnostic = "VIZE_UI_ERROR_SUMMARY_DISPOSED";
+const setupDiagnostic = "VIZE_UI_ERROR_SUMMARY_SETUP";
+function readFields(value) {
+	const resolved = toValue(value);
+	if (resolved === void 0) return [];
+	if (!Array.isArray(resolved)) throw new TypeError(`${invalidOptionDiagnostic}: fields must resolve to an array`);
+	const seen = /* @__PURE__ */ new Set();
+	for (const field of resolved) {
+		if (typeof field.id !== "string" || field.id.length === 0) throw new TypeError(`${invalidOptionDiagnostic}: every field needs a non-empty id`);
+		if (typeof field.message !== "string") throw new TypeError(`${invalidOptionDiagnostic}: every field needs a message string`);
+		if (seen.has(field.id)) throw new TypeError(`${invalidOptionDiagnostic}: field ids must be unique, saw ${field.id}`);
+		seen.add(field.id);
+	}
+	return resolved;
+}
+function readBoolean(value, fallback) {
+	const resolved = toValue(value);
+	if (resolved === void 0) return fallback;
+	if (typeof resolved !== "boolean") throw new TypeError(`${invalidOptionDiagnostic}: autoFocus must resolve to a boolean`);
+	return resolved;
+}
+/**
+* Create the focus contract behind an error summary.
+*
+* When invalid fields appear the previously focused element is captured and
+* focus moves to the summary; when every field is repaired that element gets
+* focus back, provided focus has not been moved elsewhere in the meantime.
+*/
+function createErrorSummary(options = {}) {
+	for (const name of ["onRestore", "resolveField"]) {
+		const callback = options[name];
+		if (callback !== void 0 && typeof callback !== "function") throw new TypeError(`${invalidOptionDiagnostic}: ${name} must be a function`);
+	}
+	if (typeof options.autoFocus !== "function") readBoolean(options.autoFocus, true);
+	const fields = shallowRef(readFields(options.fields));
+	const hasErrors = computed(() => fields.value.length > 0);
+	let restoreTarget = null;
+	let disposed = false;
+	const assertAlive = () => {
+		if (disposed) throw new Error(`${disposedDiagnostic}: the controller has been disposed`);
+	};
+	const readElement = () => toValue(options.element) ?? null;
+	const captureRestoreTarget = () => {
+		if (typeof document === "undefined") return;
+		const active = document.activeElement;
+		restoreTarget = active instanceof HTMLElement && active !== document.body ? active : null;
+	};
+	const focusElement = () => {
+		const element = readElement();
+		if (element === null) return false;
+		element.focus();
+		return true;
+	};
+	const restoreFocus = () => {
+		const target = restoreTarget;
+		restoreTarget = null;
+		if (target === null || !target.isConnected) return false;
+		target.focus();
+		return true;
+	};
+	const settleRepair = () => {
+		if (typeof document === "undefined") return;
+		const active = document.activeElement;
+		const element = readElement();
+		const focusInSummary = element !== null && active !== null && element.contains(active);
+		const focusLost = active === null || active === document.body || !active.isConnected;
+		if (!focusInSummary && !focusLost) {
+			restoreTarget = null;
+			return;
+		}
+		const target = restoreTarget;
+		options.onRestore?.(restoreFocus() ? target : null);
+	};
+	const stopWatch = watch(() => readFields(options.fields), (next, previous) => {
+		fields.value = next;
+		if (previous.length === 0 && next.length > 0) {
+			if (!readBoolean(options.autoFocus, true)) return;
+			captureRestoreTarget();
+			nextTick(() => {
+				if (!disposed && fields.value.length > 0) focusElement();
+			});
+		} else if (previous.length > 0 && next.length === 0) nextTick(() => {
+			if (!disposed) settleRepair();
+		});
+	}, { flush: "sync" });
+	return Object.freeze({
+		fields: shallowReadonly(fields),
+		hasErrors,
+		focusSummary: () => {
+			assertAlive();
+			captureRestoreTarget();
+			return focusElement();
+		},
+		focusField: (id) => {
+			assertAlive();
+			const field = fields.value.find((candidate) => candidate.id === id);
+			if (field === void 0) return null;
+			const control = options.resolveField === void 0 ? typeof document === "undefined" ? null : document.getElementById(field.id) : options.resolveField(field);
+			if (!(control instanceof HTMLElement)) return null;
+			control.focus();
+			return control;
+		},
+		restoreFocus: () => {
+			assertAlive();
+			return restoreFocus();
+		},
+		dispose: () => {
+			if (disposed) return;
+			disposed = true;
+			restoreTarget = null;
+			stopWatch();
+		}
+	});
+}
+/** Create an error summary controller disposed with the current Vue effect scope. */
+function useErrorSummary(options = {}) {
+	if (!getCurrentScope()) throw new Error(`${setupDiagnostic}: use inside component setup or an active effect scope`);
+	const controller = createErrorSummary(options);
+	onScopeDispose(controller.dispose);
+	return controller;
+}
+//#endregion
+//#region src/families/form/error-summary/error-summary.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { "data-vize-ui": "error-summary-host" };
+const _hoisted_2 = ["aria-labelledby"];
+const _hoisted_3 = ["id"];
+const _hoisted_4 = { "data-vize-ui": "error-summary-list" };
+const _hoisted_5 = ["href", "onClick"];
+//#endregion
+//#region src/families/form/error-summary/error-summary.vue
+var error_summary_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "error-summary",
+	props: {
+		fields: {
+			type: Array,
+			required: false,
+			default: () => []
+		},
+		heading: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+	emits: ["fieldFocus", "restore"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const headingId = useDeterministicId({ hint: "error-summary-heading" });
+		const summary = useErrorSummary({
+			fields: toRef(() => __props.fields),
+			element,
+			autoFocus: toRef(() => __props.autoFocus),
+			onRestore: (target) => emit("restore", target)
+		});
+		onMounted(() => {
+			if (__props.autoFocus && summary.hasErrors.value) summary.focusSummary();
+		});
+		function linkText(field) {
+			return field.label === void 0 ? field.message : `${field.label}: ${field.message}`;
+		}
+		function onFieldLink(field, event) {
+			event.preventDefault();
+			if (summary.focusField(field.id) !== null) emit("fieldFocus", field);
+		}
+		__expose({
+			element,
+			hasErrors: summary.hasErrors,
+			focusSummary: summary.focusSummary,
+			focusField: summary.focusField,
+			restoreFocus: summary.restoreFocus
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [unref(summary).hasErrors.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "error-summary",
+				role: "group",
+				tabindex: "-1",
+				"aria-labelledby": unref(headingId)
+			}, [createElementVNode("div", {
+				id: unref(headingId),
+				"data-vize-ui": "error-summary-heading"
+			}, [renderSlot(_ctx.$slots, "heading", { fields: unref(summary).fields.value }, () => [createTextVNode(toDisplayString(__props.heading), 1)], true)], 8, _hoisted_3), createElementVNode("ul", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(summary).fields.value, (field) => {
+				return openBlock(), createElementBlock("li", {
+					key: field.id,
+					"data-vize-ui": "error-summary-item"
+				}, [createElementVNode("a", {
+					"data-vize-ui": "error-summary-link",
+					href: "#" + field.id,
+					onClick: (event) => onFieldLink(field, event)
+				}, [renderSlot(_ctx.$slots, "field", { field }, () => [createTextVNode(toDisplayString(linkText(field)), 1)], true)], 8, _hoisted_5)]);
+			}), 128))])], 8, _hoisted_2)) : createCommentVNode("v-if", true)]);
+		};
+	}
+}), [["__scopeId", "data-v-26965bac"]]);
+//#endregion
+export { createErrorSummary as n, useErrorSummary as r, error_summary_default as t };

package/dist/error-summary-types-5ePaC9O3.d.mts

@@ -0,0 +1,74 @@
+import { ComputedRef, MaybeRefOrGetter, ShallowRef } from "vue";
+
+//#region src/families/form/error-summary/error-summary-types.d.ts
+/** One invalid field listed by the error summary. */
+interface ErrorSummaryField {
+  /** Document id of the focusable invalid control. */
+  readonly id: string;
+  /** Human-readable error text for the summary link. */
+  readonly message: string;
+  /**
+   * Accessible field label, prefixed onto the default link text.
+   *
+   * @default undefined
+   */
+  readonly label?: string;
+}
+/** Options shared by {@link createErrorSummary} and {@link useErrorSummary}. */
+interface ErrorSummaryOptions {
+  /**
+   * Invalid fields in document order. Field ids must be unique.
+   *
+   * @default []
+   */
+  readonly fields?: MaybeRefOrGetter<readonly ErrorSummaryField[] | undefined>;
+  /**
+   * Summary container that receives focus when invalid fields appear.
+   *
+   * @default undefined
+   */
+  readonly element?: MaybeRefOrGetter<HTMLElement | null | undefined>;
+  /**
+   * Move focus into the summary when invalid fields appear.
+   *
+   * @default true
+   */
+  readonly autoFocus?: MaybeRefOrGetter<boolean | undefined>;
+  /**
+   * Resolve one field's focusable control.
+   *
+   * @default Document lookup by field id
+   */
+  readonly resolveField?: (field: ErrorSummaryField) => HTMLElement | null;
+  /**
+   * Called after a repair settles focus, with the restored element or `null`.
+   *
+   * @default undefined
+   */
+  readonly onRestore?: (target: HTMLElement | null) => void;
+}
+/** Focus-managing controller behind the error summary component. */
+interface ErrorSummaryController {
+  /** Current invalid fields in document order. */
+  readonly fields: Readonly<ShallowRef<readonly ErrorSummaryField[]>>;
+  /** Whether any field is invalid. */
+  readonly hasErrors: ComputedRef<boolean>;
+  /**
+   * Capture the previously focused element and move focus to the summary.
+   *
+   * @returns Whether the summary element existed and received focus.
+   */
+  readonly focusSummary: () => boolean;
+  /** Move focus to one listed invalid control. `null` when unknown or absent. */
+  readonly focusField: (id: string) => HTMLElement | null;
+  /**
+   * Restore focus to the element focused before the summary took it.
+   *
+   * @returns Whether a connected capture target regained focus.
+   */
+  readonly restoreFocus: () => boolean;
+  /** Stop watching fields and release the captured focus target. */
+  readonly dispose: () => void;
+}
+//#endregion
+export { ErrorSummaryField as n, ErrorSummaryOptions as r, ErrorSummaryController as t };

package/dist/error-summary.d.mts

@@ -0,0 +1,3 @@
+import { n as ErrorSummaryField, r as ErrorSummaryOptions, t as ErrorSummaryController } from "./error-summary-types-5ePaC9O3.mjs";
+import { n as createErrorSummary, r as useErrorSummary, t as _default } from "./error-summary-6Xis_769.mjs";
+export { _default as ErrorSummary, type ErrorSummaryController, type ErrorSummaryField, type ErrorSummaryOptions, createErrorSummary, useErrorSummary };

package/dist/error-summary.mjs

@@ -0,0 +1,2 @@
+import { n as createErrorSummary, r as useErrorSummary, t as error_summary_default } from "./error-summary-DMe4IlM9.mjs";
+export { error_summary_default as ErrorSummary, createErrorSummary, useErrorSummary };

package/dist/field-CBs2-Z9B.mjs

@@ -0,0 +1,254 @@
+import { t as useFieldWiring } from "./field-wiring-runtime-fQ3GoLuG.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { createContext } from "./context.mjs";
+import { o as useFormField } from "./form-runtime-CcMDY0Iq.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, toRef, unref, useTemplateRef, watch, withCtx } from "vue";
+//#region src/families/form/field/field-context.ts
+const fieldContext = createContext("Field");
+//#endregion
+//#region src/families/form/field/field.vue
+var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "field",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		name: {
+			type: String,
+			required: true
+		},
+		errors: {
+			type: Array,
+			required: false,
+			default: () => []
+		},
+		invalid: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		hasDescription: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		hasErrorMessage: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+	emits: ["invalid-change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const formField = useFormField({
+			errors: toRef(() => __props.errors),
+			name: toRef(() => __props.name)
+		});
+		const isInvalid = computed(() => __props.invalid ?? formField.isInvalid.value);
+		const wiring = useFieldWiring({
+			hasDescription: toRef(() => __props.hasDescription),
+			hasErrorMessage: toRef(() => __props.hasErrorMessage),
+			id: toRef(() => __props.id),
+			invalid: isInvalid
+		});
+		const slotState = computed(() => ({
+			descriptionProps: wiring.descriptionProps.value,
+			errorMessage: formField.errorMessage.value,
+			errorMessageProps: wiring.errorMessageProps.value,
+			errors: formField.errors.value,
+			fieldProps: wiring.fieldProps.value,
+			id: wiring.fieldId.value,
+			invalid: isInvalid.value,
+			labelProps: wiring.labelProps.value,
+			name: formField.name.value
+		}));
+		const context = fieldContext.provide({
+			descriptionProps: wiring.descriptionProps,
+			errorMessage: formField.errorMessage,
+			errorMessageProps: wiring.errorMessageProps,
+			errors: formField.errors,
+			fieldProps: wiring.fieldProps,
+			id: wiring.fieldId,
+			invalid: isInvalid,
+			labelProps: wiring.labelProps,
+			name: formField.name
+		});
+		watch(isInvalid, (next, previous) => {
+			if (next !== previous) emit("invalid-change", next, formField.errors.value);
+		});
+		__expose({
+			descriptionProps: context.descriptionProps,
+			element,
+			errorMessage: context.errorMessage,
+			errorMessageProps: context.errorMessageProps,
+			errors: context.errors,
+			fieldProps: context.fieldProps,
+			id: context.id,
+			invalid: context.invalid,
+			labelProps: context.labelProps,
+			name: context.name
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "field",
+				part: "root",
+				"data-state": isInvalid.value ? "invalid" : "valid",
+				"data-invalid": isInvalid.value ? "true" : "false",
+				"data-name": unref(formField).name.value
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 8, [
+				"data-state",
+				"data-invalid",
+				"data-name"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-e3618c9f"]]);
+//#endregion
+//#region src/families/form/field/field-description.vue
+var field_description_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "field-description",
+	props: { as: {
+		type: null,
+		required: false,
+		default: "p"
+	} },
+	setup(__props, { expose: __expose }) {
+		const context = fieldContext.use();
+		const element = useTemplateRef("element");
+		const slotState = computed(() => ({
+			id: context.descriptionProps.value.id,
+			invalid: context.invalid.value,
+			name: context.name.value
+		}));
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+				ref_key: "element",
+				ref: element
+			}, unref(context).descriptionProps.value, {
+				"data-vize-ui": "field-description",
+				part: "description",
+				"data-state": unref(context).invalid.value ? "invalid" : "valid",
+				"data-invalid": unref(context).invalid.value ? "true" : "false",
+				"data-name": unref(context).name.value
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 16, [
+				"data-state",
+				"data-invalid",
+				"data-name"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-f7dc6d1b"]]);
+//#endregion
+//#region src/families/form/field/field-error-message.vue
+var field_error_message_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "field-error-message",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "p"
+		},
+		forceMount: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = fieldContext.use();
+		const element = useTemplateRef("element");
+		const rendered = computed(() => context.invalid.value || __props.forceMount);
+		const slotState = computed(() => ({
+			errors: context.errors.value,
+			id: context.errorMessageProps.value.id,
+			invalid: context.invalid.value,
+			message: context.errorMessage.value,
+			name: context.name.value
+		}));
+		__expose({
+			element,
+			invalid: context.invalid,
+			message: context.errorMessage
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable vue/no-root-v-if "), rendered.value ? (openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+				key: 0,
+				ref_key: "element",
+				ref: element
+			}, unref(context).errorMessageProps.value, {
+				"data-vize-ui": "field-error-message",
+				part: "error-message",
+				"data-state": unref(context).invalid.value ? "invalid" : "valid",
+				"data-invalid": unref(context).invalid.value ? "true" : "false",
+				"data-name": unref(context).name.value
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), () => [createTextVNode(toDisplayString(unref(context).errorMessage.value), 1)], true)]),
+				_: 3
+			}, 16, [
+				"data-state",
+				"data-invalid",
+				"data-name"
+			])) : createCommentVNode("v-if", true)], 2112);
+		};
+	}
+}), [["__scopeId", "data-v-a837a89c"]]);
+//#endregion
+//#region src/families/form/field/field-label.vue
+var field_label_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "field-label",
+	props: { as: {
+		type: null,
+		required: false,
+		default: "label"
+	} },
+	setup(__props, { expose: __expose }) {
+		const context = fieldContext.use();
+		const element = useTemplateRef("element");
+		const slotState = computed(() => ({
+			for: context.labelProps.value.for,
+			id: context.labelProps.value.id,
+			invalid: context.invalid.value,
+			name: context.name.value
+		}));
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+				ref_key: "element",
+				ref: element
+			}, unref(context).labelProps.value, {
+				"data-vize-ui": "field-label",
+				part: "label",
+				"data-state": unref(context).invalid.value ? "invalid" : "valid",
+				"data-invalid": unref(context).invalid.value ? "true" : "false",
+				"data-name": unref(context).name.value
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 16, [
+				"data-state",
+				"data-invalid",
+				"data-name"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-be651956"]]);
+//#endregion
+export { field_default as i, field_error_message_default as n, field_description_default as r, field_label_default as t };