@dou-ui/form-builder 0.0.0-stage → 0.1.0-alpha.1

package/dist/locale.js

@@ -0,0 +1,161 @@
+import { useLocale } from "dou-ui";
+import { computed, toValue } from "vue";
+// src/locale.ts
+var zhCN = {
+	prev: "上一步",
+	next: "下一步",
+	step: "第 {index} 步，共 {count} 步：{title}",
+	add: "添加一项",
+	remove: "删除第 {index} 项",
+	move: "拖动第 {index} 项调整顺序",
+	item: "第 {index} 项",
+	empty: "还没有内容",
+	invalid: "有错误",
+	noValue: "—",
+	yes: "是",
+	no: "否",
+	separator: "、",
+	rangeSeparator: " ~ ",
+	expression: {
+		"unexpected-character": "这里不能出现“{text}”",
+		"unterminated-string": "文字缺少结尾的引号",
+		"unexpected-token": "这里不能出现“{text}”",
+		"unexpected-end": "表达式还没写完",
+		"unknown-name": "读取字段请写成 values.{text}",
+		assignment: "比较请用 ==",
+		"too-deep": "表达式嵌套太深",
+		"too-long": "表达式太长",
+		"unknown-field": "没有字段“{text}”",
+		"unknown-function": "没有函数“{text}”"
+	},
+	document: {
+		version: "不认识第 {text} 版的描述",
+		"duplicate-id": "节点 id“{text}”重复了",
+		"missing-name": "字段缺少字段名",
+		"duplicate-name": "字段名“{text}”重复了",
+		"unknown-type": "没有“{text}”这种字段",
+		"misplaced-page": "页面只能放在标签页或分步里",
+		"not-a-page": "标签页和分步里只能放页面",
+		empty: "这里还没有内容",
+		expression: "表达式有误：{text}",
+		"formula-cycle": "公式互相引用：{text}",
+		"unknown-validator": "没有校验函数“{text}”",
+		"check-and-validator": "同一条规则不能同时写表达式和校验函数"
+	}
+};
+var zhTW = {
+	prev: "上一步",
+	next: "下一步",
+	step: "第 {index} 步，共 {count} 步：{title}",
+	add: "新增一項",
+	remove: "刪除第 {index} 項",
+	move: "拖曳第 {index} 項調整順序",
+	item: "第 {index} 項",
+	empty: "還沒有內容",
+	invalid: "有錯誤",
+	noValue: "—",
+	yes: "是",
+	no: "否",
+	separator: "、",
+	rangeSeparator: " ~ ",
+	expression: {
+		"unexpected-character": "這裡不能出現「{text}」",
+		"unterminated-string": "文字缺少結尾的引號",
+		"unexpected-token": "這裡不能出現「{text}」",
+		"unexpected-end": "運算式還沒寫完",
+		"unknown-name": "讀取欄位請寫成 values.{text}",
+		assignment: "比較請用 ==",
+		"too-deep": "運算式巢狀太深",
+		"too-long": "運算式太長",
+		"unknown-field": "沒有欄位「{text}」",
+		"unknown-function": "沒有函式「{text}」"
+	},
+	document: {
+		version: "不認得第 {text} 版的描述",
+		"duplicate-id": "節點 id「{text}」重複了",
+		"missing-name": "欄位缺少欄位名稱",
+		"duplicate-name": "欄位名稱「{text}」重複了",
+		"unknown-type": "沒有「{text}」這種欄位",
+		"misplaced-page": "頁面只能放在分頁或分步裡",
+		"not-a-page": "分頁和分步裡只能放頁面",
+		empty: "這裡還沒有內容",
+		expression: "運算式有誤：{text}",
+		"formula-cycle": "公式互相引用：{text}",
+		"unknown-validator": "沒有校驗函式「{text}」",
+		"check-and-validator": "同一條規則不能同時寫運算式和校驗函式"
+	}
+};
+var en = {
+	prev: "Back",
+	next: "Next",
+	step: "Step {index} of {count}: {title}",
+	add: "Add",
+	remove: "Remove item {index}",
+	move: "Drag item {index} to reorder",
+	item: "Item {index}",
+	empty: "Nothing here yet",
+	invalid: "has errors",
+	noValue: "—",
+	yes: "Yes",
+	no: "No",
+	separator: ", ",
+	rangeSeparator: " – ",
+	expression: {
+		"unexpected-character": "“{text}” can’t go here",
+		"unterminated-string": "The text is missing its closing quote",
+		"unexpected-token": "“{text}” can’t go here",
+		"unexpected-end": "The expression ends too early",
+		"unknown-name": "Read fields as values.{text}",
+		assignment: "Use == to compare",
+		"too-deep": "The expression nests too deeply",
+		"too-long": "The expression is too long",
+		"unknown-field": "There is no field “{text}”",
+		"unknown-function": "There is no function “{text}”"
+	},
+	document: {
+		version: "Version {text} of the document is not known",
+		"duplicate-id": "The node id “{text}” is used twice",
+		"missing-name": "The field has no name",
+		"duplicate-name": "The field name “{text}” is used twice",
+		"unknown-type": "There is no field type “{text}”",
+		"misplaced-page": "A page belongs in tabs or steps",
+		"not-a-page": "Tabs and steps hold pages only",
+		empty: "There is nothing in here yet",
+		expression: "The expression is wrong: {text}",
+		"formula-cycle": "The formulas read each other: {text}",
+		"unknown-validator": "There is no validator “{text}”",
+		"check-and-validator": "A rule cannot have both an expression and a validator"
+	}
+};
+var formRendererLocales = {
+	"zh-CN": zhCN,
+	"zh-TW": zhTW,
+	en
+};
+/** The form builder's texts, picked by the name of DouUI's current locale. */
+function useFormRendererMessages(override) {
+	const { locale } = useLocale();
+	return computed(() => {
+		const name = locale.value.name;
+		const base = formRendererLocales[name] ?? formRendererLocales[name.split("-")[0]] ?? (name.startsWith("zh") ? zhCN : en);
+		const extra = toValue(override);
+		if (!extra) return base;
+		return {
+			...base,
+			...extra,
+			expression: {
+				...base.expression,
+				...extra.expression
+			},
+			document: {
+				...base.document,
+				...extra.document
+			}
+		};
+	});
+}
+/** Fills `{name}` placeholders. */
+var formatMessage = (text, params) => text.replace(/\{(\w+)\}/g, (match, key) => String(params[key] ?? match));
+export { formRendererLocales, formatMessage, useFormRendererMessages };
+
+//# sourceMappingURL=locale.js.map

package/dist/locale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale.js","names":[],"sources":["../src/locale.ts"],"sourcesContent":["import { useLocale } from 'dou-ui'\nimport { computed, toValue } from 'vue'\nimport type { MaybeRefOrGetter } from 'vue'\nimport type { ExpressionProblem } from './core/expression'\nimport type { DocumentProblem } from './core/check'\n\nexport interface FormRendererMessages {\n  /** Buttons of `steps`. */\n  prev: string\n  next: string\n  /** Names the page of `steps` that shows, read out when Back or Next goes to it: `{index}`, `{count}`, `{title}`. */\n  step: string\n  /** The add button of a list, unless the list sets `addText`. */\n  add: string\n  /** The remove button of a list item, read out: `{index}` counts from 1. */\n  remove: string\n  /** The drag handle of a list item, read out: `{index}`. */\n  move: string\n  /** Names a list item: `{index}`. */\n  item: string\n  /** Shown in a list without items. */\n  empty: string\n  /** Read out after the title of a tab whose fields have errors. */\n  invalid: string\n  /** What a `readonly` renderer shows for a field without a value. */\n  noValue: string\n  /** A `readonly` renderer's text for `true`, e.g. a switch that is on. */\n  yes: string\n  /** A `readonly` renderer's text for `false`. */\n  no: string\n  /** Between the items of a list of values in a `readonly` renderer. */\n  separator: string\n  /** Between both ends of a range of dates, times or numbers in a `readonly` renderer. */\n  rangeSeparator: string\n  /** What an editor shows for each problem of an expression; `{text}` is the source at fault. */\n  expression: Record<ExpressionProblem['code'], string>\n  /** What an editor shows for each problem of a document; `{text}` is the id, name or type at fault. */\n  document: Record<DocumentProblem['code'], string>\n}\n\nconst zhCN: FormRendererMessages = {\n  prev: '上一步',\n  next: '下一步',\n  step: '第 {index} 步，共 {count} 步：{title}',\n  add: '添加一项',\n  remove: '删除第 {index} 项',\n  move: '拖动第 {index} 项调整顺序',\n  item: '第 {index} 项',\n  empty: '还没有内容',\n  invalid: '有错误',\n  noValue: '—',\n  yes: '是',\n  no: '否',\n  separator: '、',\n  rangeSeparator: ' ~ ',\n  expression: {\n    'unexpected-character': '这里不能出现“{text}”',\n    'unterminated-string': '文字缺少结尾的引号',\n    'unexpected-token': '这里不能出现“{text}”',\n    'unexpected-end': '表达式还没写完',\n    'unknown-name': '读取字段请写成 values.{text}',\n    assignment: '比较请用 ==',\n    'too-deep': '表达式嵌套太深',\n    'too-long': '表达式太长',\n    'unknown-field': '没有字段“{text}”',\n    'unknown-function': '没有函数“{text}”',\n  },\n  document: {\n    version: '不认识第 {text} 版的描述',\n    'duplicate-id': '节点 id“{text}”重复了',\n    'missing-name': '字段缺少字段名',\n    'duplicate-name': '字段名“{text}”重复了',\n    'unknown-type': '没有“{text}”这种字段',\n    'misplaced-page': '页面只能放在标签页或分步里',\n    'not-a-page': '标签页和分步里只能放页面',\n    empty: '这里还没有内容',\n    expression: '表达式有误：{text}',\n    'formula-cycle': '公式互相引用：{text}',\n    'unknown-validator': '没有校验函数“{text}”',\n    'check-and-validator': '同一条规则不能同时写表达式和校验函数',\n  },\n}\n\nconst zhTW: FormRendererMessages = {\n  prev: '上一步',\n  next: '下一步',\n  step: '第 {index} 步，共 {count} 步：{title}',\n  add: '新增一項',\n  remove: '刪除第 {index} 項',\n  move: '拖曳第 {index} 項調整順序',\n  item: '第 {index} 項',\n  empty: '還沒有內容',\n  invalid: '有錯誤',\n  noValue: '—',\n  yes: '是',\n  no: '否',\n  separator: '、',\n  rangeSeparator: ' ~ ',\n  expression: {\n    'unexpected-character': '這裡不能出現「{text}」',\n    'unterminated-string': '文字缺少結尾的引號',\n    'unexpected-token': '這裡不能出現「{text}」',\n    'unexpected-end': '運算式還沒寫完',\n    'unknown-name': '讀取欄位請寫成 values.{text}',\n    assignment: '比較請用 ==',\n    'too-deep': '運算式巢狀太深',\n    'too-long': '運算式太長',\n    'unknown-field': '沒有欄位「{text}」',\n    'unknown-function': '沒有函式「{text}」',\n  },\n  document: {\n    version: '不認得第 {text} 版的描述',\n    'duplicate-id': '節點 id「{text}」重複了',\n    'missing-name': '欄位缺少欄位名稱',\n    'duplicate-name': '欄位名稱「{text}」重複了',\n    'unknown-type': '沒有「{text}」這種欄位',\n    'misplaced-page': '頁面只能放在分頁或分步裡',\n    'not-a-page': '分頁和分步裡只能放頁面',\n    empty: '這裡還沒有內容',\n    expression: '運算式有誤：{text}',\n    'formula-cycle': '公式互相引用：{text}',\n    'unknown-validator': '沒有校驗函式「{text}」',\n    'check-and-validator': '同一條規則不能同時寫運算式和校驗函式',\n  },\n}\n\nconst en: FormRendererMessages = {\n  prev: 'Back',\n  next: 'Next',\n  step: 'Step {index} of {count}: {title}',\n  add: 'Add',\n  remove: 'Remove item {index}',\n  move: 'Drag item {index} to reorder',\n  item: 'Item {index}',\n  empty: 'Nothing here yet',\n  invalid: 'has errors',\n  noValue: '—',\n  yes: 'Yes',\n  no: 'No',\n  separator: ', ',\n  rangeSeparator: ' – ',\n  expression: {\n    'unexpected-character': '“{text}” can’t go here',\n    'unterminated-string': 'The text is missing its closing quote',\n    'unexpected-token': '“{text}” can’t go here',\n    'unexpected-end': 'The expression ends too early',\n    'unknown-name': 'Read fields as values.{text}',\n    assignment: 'Use == to compare',\n    'too-deep': 'The expression nests too deeply',\n    'too-long': 'The expression is too long',\n    'unknown-field': 'There is no field “{text}”',\n    'unknown-function': 'There is no function “{text}”',\n  },\n  document: {\n    version: 'Version {text} of the document is not known',\n    'duplicate-id': 'The node id “{text}” is used twice',\n    'missing-name': 'The field has no name',\n    'duplicate-name': 'The field name “{text}” is used twice',\n    'unknown-type': 'There is no field type “{text}”',\n    'misplaced-page': 'A page belongs in tabs or steps',\n    'not-a-page': 'Tabs and steps hold pages only',\n    empty: 'There is nothing in here yet',\n    expression: 'The expression is wrong: {text}',\n    'formula-cycle': 'The formulas read each other: {text}',\n    'unknown-validator': 'There is no validator “{text}”',\n    'check-and-validator': 'A rule cannot have both an expression and a validator',\n  },\n}\n\nexport const formRendererLocales: Record<string, FormRendererMessages> = {\n  'zh-CN': zhCN,\n  'zh-TW': zhTW,\n  en,\n}\n\n/** Texts to change; the `expression` and `document` groups are merged, so only the ones given are replaced. */\nexport type FormRendererMessagesOverride = {\n  [K in keyof FormRendererMessages]?: FormRendererMessages[K] extends string\n    ? string\n    : Partial<FormRendererMessages[K]>\n}\n\n/** The form builder's texts, picked by the name of DouUI's current locale. */\nexport function useFormRendererMessages(\n  override?: MaybeRefOrGetter<FormRendererMessagesOverride | undefined>,\n) {\n  const { locale } = useLocale()\n  return computed<FormRendererMessages>(() => {\n    const name = locale.value.name\n    const base =\n      formRendererLocales[name] ??\n      formRendererLocales[name.split('-')[0]!] ??\n      (name.startsWith('zh') ? zhCN : en)\n    const extra = toValue(override)\n    if (!extra) return base\n    return {\n      ...base,\n      ...extra,\n      expression: { ...base.expression, ...extra.expression },\n      document: { ...base.document, ...extra.document },\n    } as FormRendererMessages\n  })\n}\n\n/** Fills `{name}` placeholders. */\nexport const formatMessage = (text: string, params: Record<string, string | number>) =>\n  text.replace(/\\{(\\w+)\\}/g, (match, key: string) => String(params[key] ?? match))\n"],"mappings":";;;AAwCA,IAAM,OAA6B;CACjC,MAAM;CACN,MAAM;CACN,MAAM;CACN,KAAK;CACL,QAAQ;CACR,MAAM;CACN,MAAM;CACN,OAAO;CACP,SAAS;CACT,SAAS;CACT,KAAK;CACL,IAAI;CACJ,WAAW;CACX,gBAAgB;CAChB,YAAY;EACV,wBAAwB;EACxB,uBAAuB;EACvB,oBAAoB;EACpB,kBAAkB;EAClB,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,iBAAiB;EACjB,oBAAoB;CACtB;CACA,UAAU;EACR,SAAS;EACT,gBAAgB;EAChB,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;EAChB,kBAAkB;EAClB,cAAc;EACd,OAAO;EACP,YAAY;EACZ,iBAAiB;EACjB,qBAAqB;EACrB,uBAAuB;CACzB;AACF;AAEA,IAAM,OAA6B;CACjC,MAAM;CACN,MAAM;CACN,MAAM;CACN,KAAK;CACL,QAAQ;CACR,MAAM;CACN,MAAM;CACN,OAAO;CACP,SAAS;CACT,SAAS;CACT,KAAK;CACL,IAAI;CACJ,WAAW;CACX,gBAAgB;CAChB,YAAY;EACV,wBAAwB;EACxB,uBAAuB;EACvB,oBAAoB;EACpB,kBAAkB;EAClB,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,iBAAiB;EACjB,oBAAoB;CACtB;CACA,UAAU;EACR,SAAS;EACT,gBAAgB;EAChB,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;EAChB,kBAAkB;EAClB,cAAc;EACd,OAAO;EACP,YAAY;EACZ,iBAAiB;EACjB,qBAAqB;EACrB,uBAAuB;CACzB;AACF;AAEA,IAAM,KAA2B;CAC/B,MAAM;CACN,MAAM;CACN,MAAM;CACN,KAAK;CACL,QAAQ;CACR,MAAM;CACN,MAAM;CACN,OAAO;CACP,SAAS;CACT,SAAS;CACT,KAAK;CACL,IAAI;CACJ,WAAW;CACX,gBAAgB;CAChB,YAAY;EACV,wBAAwB;EACxB,uBAAuB;EACvB,oBAAoB;EACpB,kBAAkB;EAClB,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,iBAAiB;EACjB,oBAAoB;CACtB;CACA,UAAU;EACR,SAAS;EACT,gBAAgB;EAChB,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;EAChB,kBAAkB;EAClB,cAAc;EACd,OAAO;EACP,YAAY;EACZ,iBAAiB;EACjB,qBAAqB;EACrB,uBAAuB;CACzB;AACF;AAEA,IAAa,sBAA4D;CACvE,SAAS;CACT,SAAS;CACT;AACF;;AAUA,SAAgB,wBACd,UACA;CACA,MAAM,EAAE,WAAW,UAAU;CAC7B,OAAO,eAAqC;EAC1C,MAAM,OAAO,OAAO,MAAM;EAC1B,MAAM,OACJ,oBAAoB,SACpB,oBAAoB,KAAK,MAAM,GAAG,CAAC,CAAC,QACnC,KAAK,WAAW,IAAI,IAAI,OAAO;EAClC,MAAM,QAAQ,QAAQ,QAAQ;EAC9B,IAAI,CAAC,OAAO,OAAO;EACnB,OAAO;GACL,GAAG;GACH,GAAG;GACH,YAAY;IAAE,GAAG,KAAK;IAAY,GAAG,MAAM;GAAW;GACtD,UAAU;IAAE,GAAG,KAAK;IAAU,GAAG,MAAM;GAAS;EAClD;CACF,CAAC;AACH;;AAGA,IAAa,iBAAiB,MAAc,WAC1C,KAAK,QAAQ,eAAe,OAAO,QAAgB,OAAO,OAAO,QAAQ,KAAK,CAAC"}

package/dist/renderer/containers.js

@@ -0,0 +1,430 @@
+import { getPath, isList, setPath, valueNodes } from "../core/document.js";
+import { emptyItem } from "../core/values.js";
+import { formatMessage } from "../locale.js";
+import { disabledKey, pathIn, rendererKey, scopeKey } from "./context.js";
+import { rulesOf } from "../core/rules.js";
+import { DouButton, DouFormItem, DouSortable, DouSortableHandle, DouSteps, DouTabPanel, DouTabs } from "dou-ui";
+import { computed, defineComponent, h, inject, nextTick, onScopeDispose, provide, shallowRef, toRaw, useId, watch } from "vue";
+import { PlusIcon, TrashIcon } from "@dou-ui/icons";
+// src/renderer/containers.ts
+/** Whether a field at `path` sits among `nodes`, inside a list item included. */
+function holdsPath(nodes, path, prefix = "") {
+	return valueNodes(nodes).some((node) => {
+		const own = prefix + node.name;
+		return own === path || isList(node) && path.startsWith(`${own}.`);
+	});
+}
+/** The paths of every field among `nodes`, the fields of each list item included. */
+function valuePaths(nodes, model, prefix = "") {
+	const paths = [];
+	for (const node of valueNodes(nodes)) {
+		const own = prefix + node.name;
+		paths.push(own);
+		if (!isList(node)) continue;
+		const items = getPath(model, own);
+		if (Array.isArray(items)) items.forEach((_, index) => paths.push(...valuePaths(node.children, model, `${own}.${index}.`)));
+	}
+	return paths;
+}
+/** The pages of tabs or steps that show, as the node's own view decides them. */
+function shownPages(props, condition) {
+	return computed(() => props.node.children.filter((child) => !!child && condition(child.visibleWhen, true, child)));
+}
+/** One page of tabs or steps: its description and its own grid. */
+var pageOf = (kit, node, props) => h(kit.view, {
+	key: node.id,
+	node,
+	columns: props.columns,
+	inset: props.inset,
+	asPage: true
+});
+function tabsView(kit, props, renderer, scope, disabled, condition) {
+	provide(disabledKey, () => disabled.value);
+	const pages = shownPages(props, condition);
+	const chosen = shallowRef();
+	const selected = computed(() => pages.value.some((shown) => shown.id === chosen.value) ? chosen.value : pages.value[0]?.id);
+	onScopeDispose(renderer.addRevealer((path) => {
+		const found = pages.value.find((shown) => holdsPath(shown.children, path, scope.prefix()));
+		if (found) chosen.value = found.id;
+		return !!found;
+	}));
+	return () => h(DouTabs, {
+		class: "dou-form-renderer__tabs",
+		modelValue: selected.value,
+		"onUpdate:modelValue": (value) => {
+			if (value !== void 0) chosen.value = String(value);
+		}
+	}, () => pages.value.map((node) => h(DouTabPanel, {
+		key: node.id,
+		value: node.id,
+		label: node.title,
+		eager: true
+	}, {
+		default: () => pageOf(kit, node, props),
+		label: () => {
+			const failed = renderer.errorPaths().some((path) => holdsPath(node.children, path, scope.prefix()));
+			return h("span", { class: "dou-form-renderer__tab-title" }, [node.title, failed ? h("span", { class: "dou-form-renderer__tab-error" }, [h("span", { class: "dou-form-renderer__sr-only" }, `（${renderer.messages().invalid}）`)]) : null]);
+		}
+	})));
+}
+function stepsView(kit, props, renderer, scope, disabled, condition) {
+	provide(disabledKey, () => disabled.value);
+	const pages = shownPages(props, condition);
+	if (renderer.readonly()) {
+		const uid = useId();
+		return () => h("div", { class: "dou-form-renderer__steps is-readonly" }, pages.value.map((node) => {
+			const titleId = `dou-form-step-${uid}-${node.id}`;
+			return h("div", {
+				key: node.id,
+				class: "dou-form-renderer__section",
+				role: "group",
+				"aria-labelledby": titleId
+			}, [h("div", { class: "dou-form-renderer__section-header" }, [h("div", {
+				id: titleId,
+				class: "dou-form-renderer__section-title"
+			}, node.title)]), pageOf(kit, node, props)]);
+		}));
+	}
+	const chosen = shallowRef();
+	/** How far people got: the steps up to here can be opened again. */
+	const reached = shallowRef(0);
+	const failed = shallowRef(false);
+	const checking = shallowRef(false);
+	const current = computed(() => {
+		const index = pages.value.findIndex((shown) => shown.id === chosen.value);
+		return index < 0 ? 0 : index;
+	});
+	watch(current, () => failed.value = false);
+	watch(renderer.resets, () => {
+		chosen.value = void 0;
+		reached.value = 0;
+		failed.value = false;
+	});
+	function go(index) {
+		const target = pages.value[index];
+		if (!target) return;
+		chosen.value = target.id;
+		reached.value = Math.max(reached.value, index);
+	}
+	const stepEls = /* @__PURE__ */ new Map();
+	function turn(index) {
+		go(index);
+		const id = pages.value[index]?.id;
+		if (id) nextTick(() => stepEls.get(id)?.focus({ preventScroll: true }));
+	}
+	async function next() {
+		const shown = pages.value[current.value];
+		if (!shown || checking.value) return;
+		checking.value = true;
+		try {
+			const paths = valuePaths(shown.children, renderer.model(), scope.prefix());
+			const { valid, errors } = await renderer.validate(paths);
+			if (!valid) {
+				failed.value = true;
+				const first = Object.keys(errors)[0];
+				if (first) renderer.scrollToField(first);
+				return;
+			}
+			turn(current.value + 1);
+		} finally {
+			checking.value = false;
+		}
+	}
+	onScopeDispose(renderer.addRevealer((path) => {
+		const index = pages.value.findIndex((page) => holdsPath(page.children, path, scope.prefix()));
+		if (index >= 0) go(index);
+		return index >= 0;
+	}));
+	return () => {
+		const list = pages.value;
+		const index = current.value;
+		const messages = renderer.messages();
+		const last = index >= list.length - 1;
+		const errorPaths = renderer.errorPaths();
+		const failing = new Set(list.filter((step) => errorPaths.some((path) => holdsPath(step.children, path, scope.prefix()))).map((step) => step.id));
+		const items = list.map((step, at) => ({
+			title: step.title,
+			disabled: at > reached.value,
+			status: failing.has(step.id) ? "error" : void 0
+		}));
+		const footer = [];
+		if (index > 0) footer.push(h(DouButton, {
+			key: "prev",
+			variant: "outline",
+			onClick: () => turn(index - 1)
+		}, () => messages.prev));
+		if (!last) footer.push(h(DouButton, {
+			key: "next",
+			tone: "primary",
+			loading: checking.value,
+			onClick: next
+		}, () => messages.next));
+		else if (renderer.footerOwner() === props.node.id) footer.push(renderer.footer());
+		return h("div", { class: "dou-form-renderer__steps" }, [
+			h(DouSteps, {
+				items,
+				current: index,
+				status: failed.value ? "error" : "process",
+				clickable: true,
+				"onUpdate:current": (at) => {
+					if (at <= reached.value) go(at);
+				}
+			}),
+			...list.map((node, at) => h("div", {
+				key: node.id,
+				ref: (el) => {
+					if (el) stepEls.set(node.id, el);
+					else stepEls.delete(node.id);
+				},
+				class: "dou-form-renderer__step",
+				hidden: at !== index || void 0,
+				role: "group",
+				tabindex: -1,
+				"aria-label": formatMessage(messages.step, {
+					index: at + 1,
+					count: list.length,
+					title: node.title ?? ""
+				})
+			}, [pageOf(kit, node, props)])),
+			h("div", { class: "dou-form-renderer__steps-footer" }, footer)
+		]);
+	};
+}
+/** Ids of list items, by the item object, so each keeps its view while the list is reordered. */
+var itemIds = /* @__PURE__ */ new WeakMap();
+var nextItem = 0;
+function itemKey(item) {
+	if (item === null || typeof item !== "object") return `v:${String(item)}`;
+	const raw = toRaw(item);
+	let id = itemIds.get(raw);
+	if (!id) itemIds.set(raw, id = `i${++nextItem}`);
+	return id;
+}
+/**
+* The copy of an item that follows the pointer. It sits on `body`, away
+* from the form whose width picks the columns, whose classes set the layout
+* and whose surroundings may change the gaps (the designer's settings panel
+* narrows them), so it is wrapped in an element with the form's classes and
+* every grid in it keeps the columns and gaps it has now, in pixels.
+*/
+function listGhost(el) {
+	const clone = el.cloneNode(true);
+	freezeGrids(el, clone);
+	const form = el.closest(".dou-form");
+	if (!form) return clone;
+	const wrapper = document.createElement("div");
+	wrapper.className = `${form.className} dou-form-renderer__list-ghost`;
+	wrapper.style.containerType = "normal";
+	wrapper.append(clone);
+	return wrapper;
+}
+/** Writes the computed grid tracks, gaps and cell placement of `source` onto its copy. */
+function freezeGrids(source, copy) {
+	const from = [source, ...source.querySelectorAll("*")];
+	const to = [copy, ...copy.querySelectorAll("*")];
+	from.forEach((element, index) => {
+		const target = to[index];
+		if (!target) return;
+		const style = getComputedStyle(element);
+		if (style.display === "grid" || style.display === "inline-grid") {
+			target.style.gridTemplateColumns = style.gridTemplateColumns;
+			target.style.columnGap = style.columnGap;
+			target.style.rowGap = style.rowGap;
+		}
+		if (element.classList.contains("dou-form-renderer__cell")) target.style.gridColumn = style.gridColumn;
+	});
+}
+/** The rules of a list itself: its own, and its bounds on the number of items. */
+function listRules(node, renderer, path) {
+	const rules = rulesOf(node, {
+		functions: renderer.functions(),
+		validators: renderer.validators(),
+		path
+	});
+	const bounds = {};
+	if (node.min !== void 0 && node.min > 0) bounds.min = node.min;
+	if (node.max !== void 0) bounds.max = node.max;
+	return bounds.min === void 0 && bounds.max === void 0 ? rules : [...rules, bounds];
+}
+function listView(kit, props, renderer, scope, disabled) {
+	provide(disabledKey, () => disabled.value);
+	const uid = useId();
+	const list = () => props.node;
+	const path = () => pathIn(scope, list().name);
+	const items = computed(() => {
+		const value = getPath(renderer.model(), path());
+		return Array.isArray(value) ? value : [];
+	});
+	const rules = computed(() => listRules(list(), renderer, path));
+	function write(next) {
+		const name = path();
+		setPath(renderer.model(), name, next);
+		renderer.changed(name, getPath(renderer.model(), name));
+	}
+	const root = shallowRef();
+	const footer = shallowRef();
+	onScopeDispose(renderer.trackError(path, () => footer.value?.error));
+	/** The items of this list, not of lists inside it nor ones still animating out. */
+	const itemElements = () => [...root.value?.querySelectorAll(".dou-form-renderer__list-item") ?? []].filter((el) => el.closest(".dou-form-renderer__list") === root.value && !el.closest("[class*=\"-leave-\"]"));
+	/** Focus the first field of an item, or the add button when there is none. */
+	async function focusItem(index) {
+		await nextTick();
+		await nextTick();
+		const elements = itemElements();
+		(elements[Math.min(index, elements.length - 1)]?.querySelector(":scope > .dou-form-renderer__grid :is(input, textarea, select, button, [tabindex=\"0\"]):not([disabled])") ?? root.value?.querySelector(".dou-form-renderer__list-add"))?.focus();
+	}
+	function add() {
+		write([...items.value, emptyItem(list(), renderer.fields())]);
+		focusItem(items.value.length - 1);
+	}
+	function remove(index) {
+		write(items.value.filter((_, at) => at !== index));
+		focusItem(index);
+	}
+	return () => {
+		const node = list();
+		const rows = items.value;
+		const messages = renderer.messages();
+		const readonly = renderer.readonly() || renderer.controlsReadonly();
+		const off = disabled.value;
+		const canAdd = !off && (node.max === void 0 || rows.length < node.max);
+		const canRemove = !off && rows.length > (node.min ?? 0);
+		const sortable = node.sortable !== false && !off && !readonly && rows.length > 1;
+		const labelId = node.label ? `dou-form-list-${uid}` : void 0;
+		const required = node.required || rules.value.some((rule) => rule.required);
+		return h("div", {
+			ref: root,
+			class: [
+				"dou-form-renderer__list",
+				off && "is-disabled",
+				readonly && "is-readonly"
+			],
+			role: "group",
+			"aria-labelledby": labelId,
+			"aria-disabled": off || void 0
+		}, [
+			node.label || node.help ? h("div", { class: "dou-form-renderer__section-header" }, [node.label && h("div", {
+				id: labelId,
+				class: ["dou-form-renderer__section-title", required && "is-required"]
+			}, node.label), node.help && h("div", { class: "dou-form-renderer__section-description" }, node.help)]) : null,
+			rows.length ? h(DouSortable, {
+				class: "dou-form-renderer__list-items",
+				modelValue: rows,
+				"onUpdate:modelValue": (next) => write(next),
+				itemKey,
+				ghost: listGhost,
+				handle: true,
+				disabled: !sortable,
+				itemLabel: (_item, index) => formatMessage(messages.item, { index: index + 1 })
+			}, { default: ({ item, index }) => {
+				const raw = toRaw(item);
+				const at = rows.findIndex((row) => toRaw(row) === raw);
+				return h(ListItemView, {
+					list: node,
+					render: kit.renderNodes,
+					path: path(),
+					item,
+					index: at < 0 ? index : at,
+					position: index,
+					columns: node.columns ?? props.columns,
+					inset: props.inset + 1,
+					sortable,
+					canRemove,
+					readonly,
+					onRemove: () => remove(at < 0 ? index : at)
+				});
+			} }) : h("div", { class: "dou-form-renderer__list-empty" }, readonly ? messages.noValue : messages.empty),
+			readonly ? null : h(DouFormItem, {
+				ref: footer,
+				class: "dou-form-renderer__list-footer",
+				prop: path(),
+				rules: rules.value
+			}, () => h(DouButton, {
+				class: "dou-form-renderer__list-add",
+				variant: "outline",
+				disabled: !canAdd,
+				onClick: add
+			}, {
+				leading: () => h(PlusIcon),
+				default: () => node.addText ?? messages.add
+			}))
+		]);
+	};
+}
+/** One item of a list: its fields read and write the item. */
+var ListItemView = defineComponent({
+	name: "DouFormListItem",
+	props: {
+		list: {
+			type: Object,
+			required: true
+		},
+		render: {
+			type: Function,
+			required: true
+		},
+		path: {
+			type: String,
+			required: true
+		},
+		item: {
+			type: Object,
+			required: true
+		},
+		/** Where the item is in the value. */
+		index: {
+			type: Number,
+			required: true
+		},
+		/** Where the item is shown, which differs while it is dragged. */
+		position: {
+			type: Number,
+			required: true
+		},
+		columns: {
+			type: Number,
+			required: true
+		},
+		inset: {
+			type: Number,
+			required: true
+		},
+		sortable: Boolean,
+		canRemove: Boolean,
+		/** Without the remove button. */
+		readonly: Boolean
+	},
+	emits: ["remove"],
+	setup(props, { emit }) {
+		const renderer = inject(rendererKey);
+		provide(scopeKey, {
+			prefix: () => `${props.path}.${props.index}.`,
+			item: () => props.item
+		});
+		return () => {
+			const messages = renderer.messages();
+			const number = props.position + 1;
+			return h("div", { class: "dou-form-renderer__list-item" }, [h("div", { class: "dou-form-renderer__list-item-header" }, [
+				props.sortable ? h(DouSortableHandle, {
+					class: "dou-form-renderer__list-handle",
+					label: formatMessage(messages.move, { index: number })
+				}) : null,
+				h("span", { class: "dou-form-renderer__list-item-title" }, formatMessage(messages.item, { index: number })),
+				props.readonly ? null : h(DouButton, {
+					class: "dou-form-renderer__list-remove",
+					variant: "ghost",
+					size: "sm",
+					disabled: !props.canRemove,
+					"aria-label": formatMessage(messages.remove, { index: number }),
+					onClick: () => emit("remove")
+				}, { leading: () => h(TrashIcon) })
+			]), h("div", {
+				class: "dou-form-renderer__grid",
+				style: { "--dou-form-columns": props.columns }
+			}, props.render(props.list.children, props.columns, props.inset))]);
+		};
+	}
+});
+export { holdsPath, listView, stepsView, tabsView, valuePaths };
+
+//# sourceMappingURL=containers.js.map