@cocoar/vue-markdown-form 3.1.0-beta.1

package/dist/index.js

@@ -0,0 +1,1027 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, h as c, inject as l, markRaw as u, normalizeClass as d, normalizeStyle as f, openBlock as p, provide as m, renderList as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useAttrs as y, watch as b, withCtx as x } from "vue";
+import { CoarMarkdown as S, defaultMarkdownRenderers as C } from "@cocoar/vue-markdown";
+import { parse as w, parseEmbedDirective as T, toEmbedProps as E } from "@cocoar/vue-markdown-core";
+import { Temporal as D } from "@js-temporal/polyfill";
+import { CoarCheckbox as O, CoarNumberInput as k, CoarPlainDatePicker as A, CoarPlainDateTimePicker as j, CoarSelect as M, CoarTextInput as N } from "@cocoar/vue-ui";
+import { CoarMarkdownEditor as ee } from "@cocoar/vue-markdown-editor";
+//#region src/field-layout.ts
+var P = new Set([
+	"small",
+	"medium",
+	"large"
+]), F = /^(\d+(?:\.\d+)?)(ch|rem)$/;
+function I(e, t) {
+	let n = e?.trim() || "medium";
+	if (P.has(n)) return t[n];
+	if (n === "fill" || n === "full") return "100%";
+	let r = F.exec(n);
+	if (!r) return t.medium;
+	let i = Number(r[1]), a = r[2] === "ch" ? 100 : 80;
+	return i <= 0 || i > a ? t.medium : n;
+}
+function L(e) {
+	if (e === void 0 || e.trim() === "") return;
+	let t = Number(e);
+	return Number.isFinite(t) ? t : void 0;
+}
+function R(e, t) {
+	let n = [], r = "", i = !1;
+	for (let a of e) i ? (r += a, i = !1) : a === "\\" ? i = !0 : a === t ? (n.push(r), r = "") : r += a;
+	return i && (r += "\\"), n.push(r), n;
+}
+function z(e) {
+	return e ? R(e, "|").map((e) => {
+		let [t, ...n] = R(e, ":"), r = t.trim();
+		return {
+			value: r,
+			label: n.join(":").trim() || r
+		};
+	}).filter((e) => e.value.length > 0) : [];
+}
+var B = {
+	design: "coar",
+	locale: "en",
+	widths: {
+		small: "10ch",
+		medium: "18ch",
+		large: "32ch"
+	},
+	decorations: {
+		markdownFrame: !0,
+		inlineUnderline: !0
+	},
+	messages: {
+		required: (e) => `${e.props.label || e.id} is required.`,
+		missingId: () => "A form field is missing its id.",
+		duplicateId: (e) => `Field id "${e.id}" is used more than once.`,
+		unknownType: (e) => `Unknown field type "${e.type}".`,
+		unsupportedLayout: (e) => `Field type "${e.type}" does not support layout "${e.layout}".`,
+		booleanTrue: "Yes",
+		booleanFalse: "No",
+		empty: "—"
+	},
+	markdownTools: [
+		"bold",
+		"italic",
+		"strikethrough",
+		"inlineCode",
+		"headings",
+		"divider",
+		"bulletList",
+		"orderedList",
+		"taskList",
+		"blockquote",
+		"divider",
+		"table",
+		"image",
+		"clearFormatting",
+		"divider",
+		"undo",
+		"redo"
+	]
+};
+function V(e) {
+	return {
+		...B,
+		...e,
+		widths: {
+			...B.widths,
+			...e?.widths
+		},
+		decorations: {
+			...B.decorations,
+			...e?.decorations
+		},
+		messages: {
+			...B.messages,
+			...e?.messages
+		},
+		markdownTools: e?.markdownTools ?? B.markdownTools
+	};
+}
+var H = Symbol("coar:markdown-form-runtime");
+function U() {
+	let e = l(H);
+	if (!e) throw Error("Markdown form fields require a CoarMarkdownForm parent.");
+	return e;
+}
+//#endregion
+//#region src/FieldHost.vue?vue&type=script&setup=true&lang.ts
+var te = {
+	key: 0,
+	class: "coar-markdown-form-field__invalid"
+}, ne = {
+	key: 3,
+	class: "coar-markdown-form-field__readonly"
+}, W = /* @__PURE__ */ s({
+	__name: "FieldHost",
+	props: { field: {} },
+	setup(e) {
+		let a = e, o = U(), s = t(() => o.registry.value[a.field.type]), c = t(() => {
+			let e = o.getValue(a.field.id);
+			return e === void 0 ? s.value?.defaultValue?.(a.field) : e;
+		}), l = t(() => o.validation.value.errors[a.field.id]), u = t(() => I(a.field.width, o.context.value.widths)), m = t(() => a.field.width === "fill" || a.field.width === "full" ? a.field.width : "fixed"), h = t(() => a.field.source === "block" ? "section" : "span"), y = t(() => s.value ? s.value.formatReadonly?.(c.value, a.field, o.context.value) ?? String(c.value ?? o.context.value.messages.empty) : o.context.value.messages.empty), b = t(() => a.field.id ? s.value ? "" : o.context.value.messages.unknownType(a.field) : o.context.value.messages.missingId(a.field)), S = t(() => a.field.source === "block" && o.mode.value === "readonly" && !o.context.value.decorations.markdownFrame);
+		function C(e) {
+			o.updateValue(a.field, e);
+		}
+		return (t, a) => (p(), n(g(h.value), {
+			class: d(["coar-markdown-form-field", [
+				`coar-markdown-form-field--${e.field.source}`,
+				`coar-markdown-form-field--layout-${e.field.layout}`,
+				`coar-markdown-form-field--width-${m.value}`,
+				{
+					"coar-markdown-form-field--readonly": v(o).mode.value === "readonly",
+					"coar-markdown-form-field--underlined": v(o).mode.value === "readonly" && e.field.source === "inline" && v(o).context.value.decorations.inlineUnderline,
+					"coar-markdown-form-field--frameless": S.value,
+					"coar-markdown-form-field--error": v(o).showErrors.value && !!l.value,
+					"coar-markdown-form-field--invalid": !!b.value
+				}
+			]]),
+			style: f(e.field.source === "inline" ? {
+				width: u.value,
+				maxWidth: "100%"
+			} : void 0),
+			"data-field-id": e.field.id || void 0,
+			"data-field-type": e.field.type,
+			"aria-label": e.field.props.label || e.field.id || e.field.type,
+			"aria-invalid": v(o).showErrors.value && l.value ? "true" : void 0,
+			title: b.value || (v(o).showErrors.value ? l.value : void 0)
+		}, {
+			default: x(() => [b.value ? (p(), i("span", te, _(b.value), 1)) : v(o).mode.value === "fill" && s.value ? (p(), n(g(s.value.control), {
+				key: 1,
+				field: e.field,
+				"model-value": c.value,
+				context: v(o).context.value,
+				error: v(o).showErrors.value ? l.value : void 0,
+				"onUpdate:modelValue": C
+			}, null, 8, [
+				"field",
+				"model-value",
+				"context",
+				"error"
+			])) : s.value?.readonly ? (p(), n(g(s.value.readonly), {
+				key: 2,
+				field: e.field,
+				"model-value": c.value,
+				context: v(o).context.value
+			}, null, 8, [
+				"field",
+				"model-value",
+				"context"
+			])) : (p(), i("span", ne, _(y.value), 1)), v(o).showErrors.value && l.value ? (p(), i("small", {
+				key: 4,
+				class: d(["coar-markdown-form-field__error", { "coar-markdown-form-field__error--inline": e.field.layout === "inline" }])
+			}, _(l.value), 3)) : r("", !0)]),
+			_: 1
+		}, 8, [
+			"class",
+			"style",
+			"data-field-id",
+			"data-field-type",
+			"aria-label",
+			"aria-invalid",
+			"title"
+		]));
+	}
+}), G = ":field{", re = new Set([
+	"inline",
+	"row",
+	"stacked",
+	"block"
+]);
+function ie(e, t) {
+	let n = 0;
+	for (let r = t - 1; r >= 0 && e[r] === "\\"; --r) n += 1;
+	return n % 2 == 1;
+}
+function ae(e, t) {
+	let n = null, r = !1;
+	for (let i = t; i < e.length; i += 1) {
+		let t = e[i];
+		if (r) {
+			r = !1;
+			continue;
+		}
+		if (t === "\\") {
+			r = !0;
+			continue;
+		}
+		if (n) {
+			t === n && (n = null);
+			continue;
+		}
+		if (t === "\"" || t === "'") {
+			n = t;
+			continue;
+		}
+		if (t === "}") return i;
+	}
+	return -1;
+}
+function oe(e, t) {
+	if (!(t in e)) return !1;
+	let n = e[t].trim().toLowerCase();
+	return n === "" || ![
+		"false",
+		"0",
+		"no",
+		"off"
+	].includes(n);
+}
+function K(e, t, n, r = "text") {
+	let i = e.layout, a = t === "block" ? "block" : "inline", o = re.has(i) ? i : a;
+	return {
+		occurrenceId: n,
+		id: (e.id ?? "").trim(),
+		type: (e.type || r).trim(),
+		source: t,
+		layout: o,
+		width: e.width || (o === "block" || o === "stacked" ? "full" : "medium"),
+		required: oe(e, "required"),
+		props: e
+	};
+}
+function q(e, t = "inline") {
+	let n = [], r = 0, i = 0, a = 0;
+	for (; i < e.length;) {
+		let o = e.indexOf(G, i);
+		for (; o >= 0 && ie(e, o);) o = e.indexOf(G, o + 7);
+		if (o < 0) break;
+		let s = ae(e, o + 7);
+		if (s < 0) break;
+		let c = T(`:::field{${e.slice(o + 7, s)}}`);
+		if (!c) {
+			i = s + 1;
+			continue;
+		}
+		o > r && n.push({
+			type: "text",
+			text: e.slice(r, o)
+		}), n.push({
+			type: "field",
+			field: K(c.props, "inline", `${t}:${o}:${a}`)
+		}), a += 1, r = s + 1, i = r;
+	}
+	return r < e.length && n.push({
+		type: "text",
+		text: e.slice(r)
+	}), n.length > 0 ? n : [{
+		type: "text",
+		text: e
+	}];
+}
+function J(e) {
+	if (e.type !== "embed") return null;
+	let t = typeof e.attrs?.key == "string" ? e.attrs.key : "";
+	return t !== "field" && t !== "markdown-field" ? null : K(E(e.attrs?.props), "block", e.id, t === "markdown-field" ? "markdown" : "text");
+}
+function Y(e) {
+	let t = [], n = (e) => {
+		let r = J(e);
+		if (r && t.push(r), e.type === "text" && e.text) for (let n of q(e.text, e.id)) n.type === "field" && t.push(n.field);
+		for (let t of e.children ?? []) n(t);
+	};
+	for (let t of e.nodes) n(t);
+	return t;
+}
+function X(e, t, n) {
+	let r = Y(e), i = [], a = /* @__PURE__ */ new Set();
+	for (let e of r) {
+		if (!e.id) {
+			i.push({
+				code: "missing-id",
+				message: n.missingId(e),
+				field: e
+			});
+			continue;
+		}
+		a.has(e.id) ? i.push({
+			code: "duplicate-id",
+			message: n.duplicateId(e),
+			field: e
+		}) : a.add(e.id);
+		let r = t[e.type];
+		r ? r.layouts && !r.layouts.includes(e.layout) && i.push({
+			code: "unsupported-layout",
+			message: n.unsupportedLayout(e),
+			field: e
+		}) : i.push({
+			code: "unknown-type",
+			message: n.unknownType(e),
+			field: e
+		});
+	}
+	return {
+		fields: r,
+		issues: i
+	};
+}
+//#endregion
+//#region src/BlockFieldEmbed.vue
+var se = /* @__PURE__ */ s({
+	__name: "BlockFieldEmbed",
+	props: {
+		fieldProps: {},
+		defaultType: { default: "text" }
+	},
+	setup(e) {
+		let r = e, i = t(() => K(E(r.fieldProps), "block", `block:${String(r.fieldProps.id ?? crypto.randomUUID?.() ?? "field")}`, r.defaultType));
+		return (e, t) => (p(), n(W, { field: i.value }, null, 8, ["field"]));
+	}
+}), ce = s({
+	name: "CoarMarkdownFormTextRenderer",
+	props: {
+		node: {
+			type: Object,
+			required: !0
+		},
+		renderChildren: {
+			type: Function,
+			required: !0
+		},
+		renderNodes: {
+			type: Function,
+			required: !0
+		}
+	},
+	setup(e) {
+		return () => c("span", { class: "coar-markdown-form-text-fragment" }, q(e.node.text ?? "", e.node.id).map((e, t) => e.type === "text" ? e.text : c(W, {
+			key: `${e.field.occurrenceId}:${t}`,
+			field: e.field
+		})));
+	}
+});
+//#endregion
+//#region src/ParagraphRenderer.ts
+function Z(e) {
+	if (e.type === "text" && e.text) {
+		for (let t of q(e.text, e.id)) if (t.type === "field" && t.field.layout !== "inline") return t.field.layout;
+	}
+	for (let t of e.children ?? []) {
+		let e = Z(t);
+		if (e) return e;
+	}
+	return null;
+}
+var le = s({
+	name: "CoarMarkdownFormParagraphRenderer",
+	props: {
+		node: {
+			type: Object,
+			required: !0
+		},
+		renderChildren: {
+			type: Function,
+			required: !0
+		},
+		renderNodes: {
+			type: Function,
+			required: !0
+		}
+	},
+	setup(e) {
+		return () => {
+			let t = Z(e.node);
+			return c("p", { class: ["coar-markdown-paragraph", t === "row" || t === "stacked" ? `coar-markdown-form-paragraph--${t}` : void 0] }, e.renderChildren());
+		};
+	}
+}), ue = [
+	"id",
+	"value",
+	"rows",
+	"maxlength",
+	"placeholder",
+	"required",
+	"aria-invalid"
+], de = [
+	"id",
+	"type",
+	"value",
+	"maxlength",
+	"placeholder",
+	"required",
+	"aria-invalid"
+], fe = /* @__PURE__ */ s({
+	__name: "TextFieldControl",
+	props: {
+		field: {},
+		modelValue: {},
+		context: {},
+		error: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: r }) {
+		let a = e, o = r, s = t(() => typeof a.modelValue == "string" ? a.modelValue : ""), c = t(() => Math.max(1, Math.trunc(L(a.field.props.rows) ?? 1))), l = t(() => L(a.field.props.maxLength)), u = t(() => {
+			let e = a.field.props.inputType;
+			return e === "email" || e === "url" || e === "tel" || e === "search" ? e : "text";
+		});
+		function d(e) {
+			o("update:modelValue", e.target.value);
+		}
+		return (t, r) => e.context.design === "coar" ? (p(), n(v(N), {
+			key: 0,
+			id: `markdown-form-${e.field.id}`,
+			"model-value": s.value,
+			placeholder: e.field.props.placeholder || e.field.id,
+			rows: c.value,
+			type: u.value,
+			maxlength: l.value,
+			required: e.field.required,
+			error: !!e.error,
+			size: "xs",
+			clearable: "",
+			"onUpdate:modelValue": r[0] ||= (e) => o("update:modelValue", e)
+		}, null, 8, [
+			"id",
+			"model-value",
+			"placeholder",
+			"rows",
+			"type",
+			"maxlength",
+			"required",
+			"error"
+		])) : c.value > 1 ? (p(), i("textarea", {
+			key: 1,
+			id: `markdown-form-${e.field.id}`,
+			class: "coar-markdown-form-basic-control",
+			value: s.value,
+			rows: c.value,
+			maxlength: l.value,
+			placeholder: e.field.props.placeholder || e.field.id,
+			required: e.field.required,
+			"aria-invalid": e.error ? "true" : void 0,
+			onInput: d
+		}, null, 40, ue)) : (p(), i("input", {
+			key: 2,
+			id: `markdown-form-${e.field.id}`,
+			class: "coar-markdown-form-basic-control",
+			type: u.value,
+			value: s.value,
+			maxlength: l.value,
+			placeholder: e.field.props.placeholder || e.field.id,
+			required: e.field.required,
+			"aria-invalid": e.error ? "true" : void 0,
+			onInput: d
+		}, null, 40, de));
+	}
+}), pe = [
+	"id",
+	"value",
+	"placeholder",
+	"min",
+	"max",
+	"step",
+	"required",
+	"aria-invalid"
+], me = /* @__PURE__ */ s({
+	__name: "NumberFieldControl",
+	props: {
+		field: {},
+		modelValue: {},
+		context: {},
+		error: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: r }) {
+		let a = e, o = r, s = t(() => typeof a.modelValue == "number" && Number.isFinite(a.modelValue) ? a.modelValue : typeof a.modelValue == "string" ? L(a.modelValue) ?? null : null), c = t(() => L(a.field.props.min)), l = t(() => L(a.field.props.max)), u = t(() => L(a.field.props.step) ?? 1), d = t(() => Math.max(0, Math.trunc(L(a.field.props.decimals) ?? 0)));
+		function f(e) {
+			let t = e.target.value;
+			o("update:modelValue", t === "" ? null : Number(t));
+		}
+		return (t, r) => e.context.design === "coar" ? (p(), n(v(k), {
+			key: 0,
+			id: `markdown-form-${e.field.id}`,
+			"model-value": s.value,
+			placeholder: e.field.props.placeholder || e.field.id,
+			min: c.value,
+			max: l.value,
+			step: u.value,
+			decimals: d.value,
+			suffix: e.field.props.suffix,
+			required: e.field.required,
+			error: !!e.error,
+			locale: e.context.locale,
+			size: "xs",
+			"stepper-buttons": "both",
+			clearable: "",
+			"onUpdate:modelValue": r[0] ||= (e) => o("update:modelValue", e)
+		}, null, 8, [
+			"id",
+			"model-value",
+			"placeholder",
+			"min",
+			"max",
+			"step",
+			"decimals",
+			"suffix",
+			"required",
+			"error",
+			"locale"
+		])) : (p(), i("input", {
+			key: 1,
+			id: `markdown-form-${e.field.id}`,
+			class: "coar-markdown-form-basic-control",
+			type: "number",
+			value: s.value ?? "",
+			placeholder: e.field.props.placeholder || e.field.id,
+			min: c.value,
+			max: l.value,
+			step: u.value,
+			required: e.field.required,
+			"aria-invalid": e.error ? "true" : void 0,
+			onInput: f
+		}, null, 40, pe));
+	}
+}), he = [
+	"id",
+	"value",
+	"placeholder",
+	"min",
+	"max",
+	"required",
+	"aria-invalid"
+], ge = /* @__PURE__ */ s({
+	__name: "DateFieldControl",
+	props: {
+		field: {},
+		modelValue: {},
+		context: {},
+		error: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: r }) {
+		let a = e, o = r, s = {
+			pattern: "dd.mm.yyyy",
+			firstDayOfWeek: 1
+		};
+		function c(e) {
+			if (typeof e != "string" || !e) return null;
+			try {
+				return D.PlainDate.from(e);
+			} catch {
+				return null;
+			}
+		}
+		let l = t({
+			get: () => c(a.modelValue),
+			set: (e) => o("update:modelValue", e?.toString() ?? "")
+		}), u = t(() => c(a.field.props.min)), d = t(() => c(a.field.props.max));
+		function f(e) {
+			o("update:modelValue", e.target.value);
+		}
+		return (t, r) => e.context.design === "coar" ? (p(), n(v(A), {
+			key: 0,
+			id: `markdown-form-${e.field.id}`,
+			modelValue: l.value,
+			"onUpdate:modelValue": r[0] ||= (e) => l.value = e,
+			placeholder: e.field.props.placeholder || e.field.id,
+			required: e.field.required,
+			error: !!e.error,
+			locale: e.context.locale,
+			"date-format": s,
+			min: u.value,
+			max: d.value,
+			size: "xs",
+			clearable: ""
+		}, null, 8, [
+			"id",
+			"modelValue",
+			"placeholder",
+			"required",
+			"error",
+			"locale",
+			"min",
+			"max"
+		])) : (p(), i("input", {
+			key: 1,
+			id: `markdown-form-${e.field.id}`,
+			class: "coar-markdown-form-basic-control",
+			type: "date",
+			value: typeof e.modelValue == "string" ? e.modelValue : "",
+			placeholder: e.field.props.placeholder || e.field.id,
+			min: e.field.props.min,
+			max: e.field.props.max,
+			required: e.field.required,
+			"aria-invalid": e.error ? "true" : void 0,
+			onInput: f
+		}, null, 40, he));
+	}
+}), _e = [
+	"id",
+	"value",
+	"placeholder",
+	"min",
+	"max",
+	"required",
+	"aria-invalid"
+], ve = /* @__PURE__ */ s({
+	__name: "DateTimeFieldControl",
+	props: {
+		field: {},
+		modelValue: {},
+		context: {},
+		error: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: r }) {
+		let a = e, o = r, s = {
+			pattern: "dd.mm.yyyy",
+			firstDayOfWeek: 1
+		};
+		function c(e) {
+			if (typeof e != "string" || !e) return null;
+			try {
+				return D.PlainDateTime.from(e);
+			} catch {
+				return null;
+			}
+		}
+		let l = t({
+			get: () => c(a.modelValue),
+			set: (e) => o("update:modelValue", e?.toString({ smallestUnit: "minute" }) ?? "")
+		}), u = t(() => c(a.field.props.min)), d = t(() => c(a.field.props.max)), f = t(() => {
+			let e = L(a.field.props.minuteStep);
+			return e === 1 || e === 5 || e === 10 || e === 15 ? e : 15;
+		});
+		function m(e) {
+			o("update:modelValue", e.target.value);
+		}
+		return (t, r) => e.context.design === "coar" ? (p(), n(v(j), {
+			key: 0,
+			id: `markdown-form-${e.field.id}`,
+			modelValue: l.value,
+			"onUpdate:modelValue": r[0] ||= (e) => l.value = e,
+			placeholder: e.field.props.placeholder || e.field.id,
+			required: e.field.required,
+			error: !!e.error,
+			locale: e.context.locale,
+			"date-format": s,
+			min: u.value,
+			max: d.value,
+			"minute-step": f.value,
+			"use24-hour": !0,
+			size: "xs",
+			clearable: ""
+		}, null, 8, [
+			"id",
+			"modelValue",
+			"placeholder",
+			"required",
+			"error",
+			"locale",
+			"min",
+			"max",
+			"minute-step"
+		])) : (p(), i("input", {
+			key: 1,
+			id: `markdown-form-${e.field.id}`,
+			class: "coar-markdown-form-basic-control",
+			type: "datetime-local",
+			value: typeof e.modelValue == "string" ? e.modelValue : "",
+			placeholder: e.field.props.placeholder || e.field.id,
+			min: e.field.props.min,
+			max: e.field.props.max,
+			required: e.field.required,
+			"aria-invalid": e.error ? "true" : void 0,
+			onInput: m
+		}, null, 40, _e));
+	}
+}), ye = {
+	key: 1,
+	class: "coar-markdown-form-basic-checkbox"
+}, be = [
+	"id",
+	"checked",
+	"required",
+	"aria-invalid"
+], xe = { key: 0 }, Se = /* @__PURE__ */ s({
+	__name: "BooleanFieldControl",
+	props: {
+		field: {},
+		modelValue: {},
+		context: {},
+		error: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: o }) {
+		let s = e, c = o, l = t(() => s.modelValue === !0 || s.modelValue === "true"), u = t(() => s.field.source === "block" && s.field.props.label || "");
+		function d(e) {
+			c("update:modelValue", e.target.checked);
+		}
+		return (t, o) => e.context.design === "coar" ? (p(), n(v(O), {
+			key: 0,
+			id: `markdown-form-${e.field.id}`,
+			"model-value": l.value,
+			label: u.value,
+			required: e.field.required,
+			error: !!e.error,
+			size: "xs",
+			"onUpdate:modelValue": o[0] ||= (e) => c("update:modelValue", e)
+		}, null, 8, [
+			"id",
+			"model-value",
+			"label",
+			"required",
+			"error"
+		])) : (p(), i("label", ye, [a("input", {
+			id: `markdown-form-${e.field.id}`,
+			type: "checkbox",
+			checked: l.value,
+			required: e.field.required,
+			"aria-invalid": e.error ? "true" : void 0,
+			onChange: d
+		}, null, 40, be), u.value ? (p(), i("span", xe, _(u.value), 1)) : r("", !0)]));
+	}
+}), Ce = [
+	"id",
+	"value",
+	"required",
+	"aria-invalid"
+], we = { value: "" }, Te = ["value"], Ee = /* @__PURE__ */ s({
+	__name: "SelectFieldControl",
+	props: {
+		field: {},
+		modelValue: {},
+		context: {},
+		error: {}
+	},
+	emits: ["update:modelValue"],
+	setup(r, { emit: o }) {
+		let s = r, c = o, l = t(() => typeof s.modelValue == "string" ? s.modelValue : null), u = t(() => z(s.field.props.options));
+		function d(e) {
+			let t = e.target.value;
+			c("update:modelValue", t || null);
+		}
+		return (t, o) => r.context.design === "coar" ? (p(), n(v(M), {
+			key: 0,
+			id: `markdown-form-${r.field.id}`,
+			"model-value": l.value,
+			options: u.value,
+			placeholder: r.field.props.placeholder || r.field.id,
+			error: !!r.error,
+			size: "xs",
+			clearable: "",
+			"onUpdate:modelValue": o[0] ||= (e) => c("update:modelValue", e)
+		}, null, 8, [
+			"id",
+			"model-value",
+			"options",
+			"placeholder",
+			"error"
+		])) : (p(), i("select", {
+			key: 1,
+			id: `markdown-form-${r.field.id}`,
+			class: "coar-markdown-form-basic-control",
+			value: l.value ?? "",
+			required: r.field.required,
+			"aria-invalid": r.error ? "true" : void 0,
+			onChange: d
+		}, [a("option", we, _(r.field.props.placeholder || "—"), 1), (p(!0), i(e, null, h(u.value, (e) => (p(), i("option", {
+			key: e.value,
+			value: e.value
+		}, _(e.label), 9, Te))), 128))], 40, Ce));
+	}
+}), De = /* @__PURE__ */ s({
+	__name: "MarkdownFieldControl",
+	props: {
+		field: {},
+		modelValue: {},
+		context: {},
+		error: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: r }) {
+		let i = e, a = r, o = t(() => typeof i.modelValue == "string" ? i.modelValue : ""), s = t(() => [...i.context.markdownTools]);
+		return (t, r) => (p(), n(v(ee), {
+			"model-value": o.value,
+			placeholder: e.field.props.placeholder || e.field.id,
+			tools: s.value,
+			"toolbar-mode": "external",
+			"toolbar-position": "top",
+			flavor: "gfm",
+			"onUpdate:modelValue": r[0] ||= (e) => a("update:modelValue", e)
+		}, null, 8, [
+			"model-value",
+			"placeholder",
+			"tools"
+		]));
+	}
+}), Oe = {
+	key: 1,
+	class: "coar-markdown-form-field__empty"
+}, ke = /* @__PURE__ */ s({
+	__name: "MarkdownFieldReadonly",
+	props: {
+		field: {},
+		modelValue: {},
+		context: {}
+	},
+	setup(e) {
+		let r = e, a = t(() => typeof r.modelValue == "string" ? r.modelValue : ""), o = t(() => w(a.value));
+		return (t, r) => a.value ? (p(), n(v(S), {
+			key: 0,
+			doc: o.value
+		}, null, 8, ["doc"])) : (p(), i("span", Oe, _(e.context.messages.empty), 1));
+	}
+}), Q = [
+	"inline",
+	"row",
+	"stacked",
+	"block"
+];
+function $(e) {
+	return e == null || e === "" || e === !1 || Array.isArray(e) && e.length === 0;
+}
+function Ae(e, t, n) {
+	let r = typeof e == "number" ? e : Number(e);
+	if (!Number.isFinite(r)) return String(e ?? n.messages.empty);
+	let i = Math.max(0, Math.trunc(L(t.props.decimals) ?? 0)), a = new Intl.NumberFormat(n.locale, {
+		minimumFractionDigits: i,
+		maximumFractionDigits: i
+	}).format(r);
+	return t.props.suffix ? `${a} ${t.props.suffix}` : a;
+}
+function je(e, t) {
+	if (typeof e != "string" || !e) return t.messages.empty;
+	try {
+		return D.PlainDate.from(e).toLocaleString(t.locale, { dateStyle: "medium" });
+	} catch {
+		return e;
+	}
+}
+function Me(e, t) {
+	if (typeof e != "string" || !e) return t.messages.empty;
+	try {
+		return D.PlainDateTime.from(e).toLocaleString(t.locale, {
+			dateStyle: "medium",
+			timeStyle: "short"
+		});
+	} catch {
+		return e;
+	}
+}
+var Ne = {
+	text: {
+		control: u(fe),
+		valueType: "string",
+		layouts: Q,
+		defaultValue: () => "",
+		isEmpty: $,
+		validate: (e, t) => {
+			let n = typeof e == "string" ? e : "", r = L(t.props.minLength), i = L(t.props.maxLength);
+			return r !== void 0 && n.length < r ? t.props.minLengthMessage || `Enter at least ${r} characters.` : i !== void 0 && n.length > i ? t.props.maxLengthMessage || `Enter no more than ${i} characters.` : null;
+		},
+		formatReadonly: (e, t, n) => typeof e == "string" && e ? e : n.messages.empty
+	},
+	number: {
+		control: u(me),
+		valueType: "number",
+		layouts: Q,
+		defaultValue: () => null,
+		isEmpty: $,
+		validate: (e, t) => {
+			if (e == null || e === "") return null;
+			let n = typeof e == "number" ? e : Number(e);
+			if (!Number.isFinite(n)) return t.props.numberMessage || "Enter a valid number.";
+			let r = L(t.props.min), i = L(t.props.max);
+			return r !== void 0 && n < r ? t.props.minMessage || `Minimum: ${r}.` : i !== void 0 && n > i ? t.props.maxMessage || `Maximum: ${i}.` : null;
+		},
+		formatReadonly: Ae
+	},
+	date: {
+		control: u(ge),
+		valueType: "date",
+		layouts: Q,
+		defaultValue: () => "",
+		isEmpty: $,
+		formatReadonly: (e, t, n) => je(e, n)
+	},
+	datetime: {
+		control: u(ve),
+		valueType: "datetime",
+		layouts: Q,
+		defaultValue: () => "",
+		isEmpty: $,
+		formatReadonly: (e, t, n) => Me(e, n)
+	},
+	boolean: {
+		control: u(Se),
+		valueType: "boolean",
+		layouts: Q,
+		defaultValue: () => !1,
+		isEmpty: $,
+		formatReadonly: (e, t, n) => e === !0 ? t.props.trueLabel || n.messages.booleanTrue : t.props.falseLabel || n.messages.booleanFalse
+	},
+	select: {
+		control: u(Ee),
+		valueType: "string",
+		layouts: Q,
+		defaultValue: () => null,
+		isEmpty: $,
+		validate: (e, t) => e == null || e === "" || z(t.props.options).some((t) => t.value === e) ? null : t.props.optionMessage || "Select one of the available options.",
+		formatReadonly: (e, t, n) => typeof e != "string" || !e ? n.messages.empty : z(t.props.options).find((t) => t.value === e)?.label ?? e
+	},
+	markdown: {
+		control: u(De),
+		readonly: u(ke),
+		valueType: "string",
+		layouts: ["block"],
+		defaultValue: () => "",
+		isEmpty: $
+	}
+};
+function Pe(e) {
+	return {
+		...Ne,
+		...e
+	};
+}
+//#endregion
+//#region src/CoarMarkdownForm.vue?vue&type=script&setup=true&lang.ts
+var Fe = {
+	key: 0,
+	class: "coar-markdown-form__issues",
+	role: "alert"
+}, Ie = /* @__PURE__ */ s({
+	__name: "CoarMarkdownForm",
+	props: {
+		template: {},
+		values: {},
+		mode: { default: "fill" },
+		fields: { default: () => ({}) },
+		context: { default: () => ({}) },
+		embeds: { default: () => ({}) },
+		showErrors: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:values", "validation"],
+	setup(n, { expose: l, emit: f }) {
+		let g = n, x = f;
+		function T(e) {
+			return u(s({
+				name: `CoarMarkdownForm${e}Block`,
+				inheritAttrs: !1,
+				setup() {
+					let t = y();
+					return () => c(se, {
+						fieldProps: E(t),
+						defaultType: e
+					});
+				}
+			}));
+		}
+		let D = t(() => V(g.context)), O = t(() => Pe(g.fields)), k = t(() => w(g.template)), A = t(() => X(k.value, O.value, D.value.messages)), j = t(() => {
+			let e = {};
+			for (let t of A.value.fields) {
+				if (!t.id || e[t.id]) continue;
+				let n = O.value[t.type];
+				if (!n) continue;
+				let r = g.values[t.id], i = r === void 0 ? n.defaultValue?.(t) : r, a = n.isEmpty?.(i, t) ?? (i == null || i === "" || i === !1);
+				if (t.required && a) {
+					e[t.id] = t.props.requiredMessage || D.value.messages.required(t);
+					continue;
+				}
+				let o = n.validate?.(i, t, g.values, D.value);
+				o && (e[t.id] = o);
+			}
+			return e;
+		}), M = t(() => ({
+			valid: A.value.issues.length === 0 && Object.keys(j.value).length === 0,
+			errors: j.value,
+			issues: A.value.issues
+		})), N = t(() => g.mode), ee = t(() => g.showErrors), P = {
+			...C,
+			paragraph: le,
+			text: ce
+		}, F = T("text"), I = T("markdown"), L = t(() => ({
+			...g.embeds,
+			field: { viewer: F },
+			"markdown-field": { viewer: I }
+		}));
+		return m(H, {
+			mode: N,
+			context: D,
+			registry: O,
+			validation: M,
+			showErrors: ee,
+			getValue: (e) => g.values[e],
+			updateValue: (e, t) => {
+				g.mode !== "fill" || !e.id || x("update:values", {
+					...g.values,
+					[e.id]: t
+				});
+			}
+		}), b(M, (e) => x("validation", e), {
+			immediate: !0,
+			deep: !0
+		}), l({ validate: () => M.value }), (t, n) => (p(), i("div", { class: d(["coar-markdown-form", `coar-markdown-form--${N.value}`]) }, [A.value.issues.length ? (p(), i("div", Fe, [n[0] ||= a("strong", null, "Invalid Markdown form template", -1), a("ul", null, [(p(!0), i(e, null, h(A.value.issues, (e) => (p(), i("li", { key: `${e.field.occurrenceId}:${e.code}` }, _(e.message), 1))), 128))])])) : r("", !0), o(v(S), {
+			doc: k.value,
+			renderers: P,
+			embeds: L.value
+		}, null, 8, ["doc", "embeds"])], 2));
+	}
+});
+//#endregion
+export { Ne as BUILTIN_MARKDOWN_FORM_FIELDS, Ie as CoarMarkdownForm, B as DEFAULT_MARKDOWN_FORM_CONTEXT, H as MARKDOWN_FORM_RUNTIME_KEY, X as analyzeMarkdownFormTemplate, Y as collectMarkdownFormFields, K as createMarkdownFormField, J as fieldFromEmbedNode, Pe as mergeMarkdownFormFields, L as parseFiniteNumber, q as parseInlineMarkdownFormFields, z as parseMarkdownFormSelectOptions, V as resolveMarkdownFormContext, I as resolveMarkdownFormFieldWidth, U as useMarkdownFormRuntime };