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

package/dist/builder/outline-row.js

@@ -0,0 +1,6 @@
+import outline_row_vue_vue_type_script_setup_true_lang_default from "./outline-row.vue_vue_type_script_setup_true_lang.js";
+// src/builder/outline-row.vue
+var outline_row_default = outline_row_vue_vue_type_script_setup_true_lang_default;
+export { outline_row_default as default };
+
+//# sourceMappingURL=outline-row.js.map

package/dist/builder/outline-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outline-row.js","names":["_sfc_main"],"sources":["../../src/builder/outline-row.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ChevronRightIcon } from '@dou-ui/icons'\nimport type { FormNode } from '../core/types'\nimport type { FormFieldType } from '../fields/define'\nimport { useBuilderState } from './context'\nimport { iconOf, labelOf, nodeTitle } from './settings'\n\ndefineOptions({ name: 'DouFormBuilderOutlineRow' })\n\n// One row is its own component, so a change to one node of a large form\n// draws only that row again.\nconst props = defineProps<{\n  node: FormNode\n  level: number\n  position: number\n  size: number\n  container: boolean\n  open: boolean\n  selected: boolean\n}>()\nconst emit = defineEmits<{ press: [event: MouseEvent]; toggle: [] }>()\n\nconst state = useBuilderState()\nconst types = computed(() => state.fields as Map<string, FormFieldType>)\n\nconst title = computed(() => nodeTitle(props.node, types.value, state.messages))\nconst secondary = computed(() => {\n  const node = props.node\n  const type = labelOf(node.type, types.value.get(node.type), state.messages)\n  const name = 'name' in node && node.name && node.name !== title.value ? node.name : ''\n  return title.value === type ? name : name || type\n})\n\n/** The extensions' marks of the node, as dots in their colors. */\nconst marks = computed(() => state.extensions().marks.flatMap((mark) => mark(state, props.node)))\n</script>\n\n<template>\n  <div\n    :id=\"state.domId(node.id, 'outline')\"\n    class=\"dou-form-builder__outline-row\"\n    :class=\"{ 'is-selected': selected }\"\n    role=\"treeitem\"\n    :aria-level=\"level\"\n    :aria-posinset=\"position\"\n    :aria-setsize=\"size\"\n    :aria-selected=\"selected\"\n    :aria-expanded=\"container ? open : undefined\"\n    :style=\"{ '--dou-form-builder-level': level - 1 }\"\n    @click=\"emit('press', $event)\"\n  >\n    <button\n      v-if=\"container\"\n      type=\"button\"\n      tabindex=\"-1\"\n      class=\"dou-form-builder__outline-toggle\"\n      :class=\"{ 'is-open': open }\"\n      :aria-label=\"open ? state.messages.outline.collapse : state.messages.outline.expand\"\n      @click.stop=\"emit('toggle')\"\n    >\n      <ChevronRightIcon />\n    </button>\n    <span v-else class=\"dou-form-builder__outline-spacer\" />\n    <component\n      :is=\"iconOf(node.type, types.get(node.type))\"\n      class=\"dou-form-builder__outline-icon\"\n    />\n    <span class=\"dou-form-builder__outline-title\">{{ title }}</span>\n    <span class=\"dou-form-builder__outline-name\">{{ secondary }}</span>\n    <span\n      v-for=\"mark in marks\"\n      :key=\"mark.key\"\n      class=\"dou-form-builder__outline-mark\"\n      :style=\"mark.color ? { '--dou-form-builder-mark': mark.color } : undefined\"\n      :title=\"mark.label\"\n      aria-hidden=\"true\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/builder/outline-row.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,88 @@
+import { iconOf, labelOf, nodeTitle } from "./settings.js";
+import { useBuilderState } from "./context.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, resolveDynamicComponent, toDisplayString, unref, withModifiers } from "vue";
+import { ChevronRightIcon } from "@dou-ui/icons";
+// src/builder/outline-row.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"aria-level",
+	"aria-posinset",
+	"aria-setsize",
+	"aria-selected",
+	"aria-expanded"
+];
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = {
+	key: 1,
+	class: "dou-form-builder__outline-spacer"
+};
+var _hoisted_4 = { class: "dou-form-builder__outline-title" };
+var _hoisted_5 = { class: "dou-form-builder__outline-name" };
+var _hoisted_6 = ["title"];
+var outline_row_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouFormBuilderOutlineRow",
+	__name: "outline-row",
+	props: {
+		node: {},
+		level: {},
+		position: {},
+		size: {},
+		container: { type: Boolean },
+		open: { type: Boolean },
+		selected: { type: Boolean }
+	},
+	emits: ["press", "toggle"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const state = useBuilderState();
+		const types = computed(() => state.fields);
+		const title = computed(() => nodeTitle(props.node, types.value, state.messages));
+		const secondary = computed(() => {
+			const node = props.node;
+			const type = labelOf(node.type, types.value.get(node.type), state.messages);
+			const name = "name" in node && node.name && node.name !== title.value ? node.name : "";
+			return title.value === type ? name : name || type;
+		});
+		/** The extensions' marks of the node, as dots in their colors. */
+		const marks = computed(() => state.extensions().marks.flatMap((mark) => mark(state, props.node)));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(state).domId(__props.node.id, "outline"),
+				class: normalizeClass(["dou-form-builder__outline-row", { "is-selected": __props.selected }]),
+				role: "treeitem",
+				"aria-level": __props.level,
+				"aria-posinset": __props.position,
+				"aria-setsize": __props.size,
+				"aria-selected": __props.selected,
+				"aria-expanded": __props.container ? __props.open : void 0,
+				style: normalizeStyle({ "--dou-form-builder-level": __props.level - 1 }),
+				onClick: _cache[1] || (_cache[1] = ($event) => emit("press", $event))
+			}, [
+				__props.container ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					tabindex: "-1",
+					class: normalizeClass(["dou-form-builder__outline-toggle", { "is-open": __props.open }]),
+					"aria-label": __props.open ? unref(state).messages.outline.collapse : unref(state).messages.outline.expand,
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("toggle"), ["stop"]))
+				}, [createVNode(unref(ChevronRightIcon))], 10, _hoisted_2)) : (openBlock(), createElementBlock("span", _hoisted_3)),
+				(openBlock(), createBlock(resolveDynamicComponent(unref(iconOf)(__props.node.type, types.value.get(__props.node.type))), { class: "dou-form-builder__outline-icon" })),
+				createElementVNode("span", _hoisted_4, toDisplayString(title.value), 1),
+				createElementVNode("span", _hoisted_5, toDisplayString(secondary.value), 1),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(marks.value, (mark) => {
+					return openBlock(), createElementBlock("span", {
+						key: mark.key,
+						class: "dou-form-builder__outline-mark",
+						style: normalizeStyle(mark.color ? { "--dou-form-builder-mark": mark.color } : void 0),
+						title: mark.label,
+						"aria-hidden": "true"
+					}, null, 12, _hoisted_6);
+				}), 128))
+			], 14, _hoisted_1);
+		};
+	}
+});
+export { outline_row_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=outline-row.vue_vue_type_script_setup_true_lang.js.map

package/dist/builder/outline-row.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outline-row.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_normalizeClass","_normalizeStyle","_withModifiers","_createVNode","_createBlock","_resolveDynamicComponent","_createElementVNode","_toDisplayString","_Fragment","_renderList"],"sources":["../../src/builder/outline-row.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ChevronRightIcon } from '@dou-ui/icons'\nimport type { FormNode } from '../core/types'\nimport type { FormFieldType } from '../fields/define'\nimport { useBuilderState } from './context'\nimport { iconOf, labelOf, nodeTitle } from './settings'\n\ndefineOptions({ name: 'DouFormBuilderOutlineRow' })\n\n// One row is its own component, so a change to one node of a large form\n// draws only that row again.\nconst props = defineProps<{\n  node: FormNode\n  level: number\n  position: number\n  size: number\n  container: boolean\n  open: boolean\n  selected: boolean\n}>()\nconst emit = defineEmits<{ press: [event: MouseEvent]; toggle: [] }>()\n\nconst state = useBuilderState()\nconst types = computed(() => state.fields as Map<string, FormFieldType>)\n\nconst title = computed(() => nodeTitle(props.node, types.value, state.messages))\nconst secondary = computed(() => {\n  const node = props.node\n  const type = labelOf(node.type, types.value.get(node.type), state.messages)\n  const name = 'name' in node && node.name && node.name !== title.value ? node.name : ''\n  return title.value === type ? name : name || type\n})\n\n/** The extensions' marks of the node, as dots in their colors. */\nconst marks = computed(() => state.extensions().marks.flatMap((mark) => mark(state, props.node)))\n</script>\n\n<template>\n  <div\n    :id=\"state.domId(node.id, 'outline')\"\n    class=\"dou-form-builder__outline-row\"\n    :class=\"{ 'is-selected': selected }\"\n    role=\"treeitem\"\n    :aria-level=\"level\"\n    :aria-posinset=\"position\"\n    :aria-setsize=\"size\"\n    :aria-selected=\"selected\"\n    :aria-expanded=\"container ? open : undefined\"\n    :style=\"{ '--dou-form-builder-level': level - 1 }\"\n    @click=\"emit('press', $event)\"\n  >\n    <button\n      v-if=\"container\"\n      type=\"button\"\n      tabindex=\"-1\"\n      class=\"dou-form-builder__outline-toggle\"\n      :class=\"{ 'is-open': open }\"\n      :aria-label=\"open ? state.messages.outline.collapse : state.messages.outline.expand\"\n      @click.stop=\"emit('toggle')\"\n    >\n      <ChevronRightIcon />\n    </button>\n    <span v-else class=\"dou-form-builder__outline-spacer\" />\n    <component\n      :is=\"iconOf(node.type, types.get(node.type))\"\n      class=\"dou-form-builder__outline-icon\"\n    />\n    <span class=\"dou-form-builder__outline-title\">{{ title }}</span>\n    <span class=\"dou-form-builder__outline-name\">{{ secondary }}</span>\n    <span\n      v-for=\"mark in marks\"\n      :key=\"mark.key\"\n      class=\"dou-form-builder__outline-mark\"\n      :style=\"mark.color ? { '--dou-form-builder-mark': mark.color } : undefined\"\n      :title=\"mark.label\"\n      aria-hidden=\"true\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EASd,MAAM,OAAO;EAEb,MAAM,QAAQ,gBAAgB;EAC9B,MAAM,QAAQ,eAAe,MAAM,MAAoC;EAEvE,MAAM,QAAQ,eAAe,UAAU,MAAM,MAAM,MAAM,OAAO,MAAM,QAAQ,CAAC;EAC/E,MAAM,YAAY,eAAe;GAC/B,MAAM,OAAO,MAAM;GACnB,MAAM,OAAO,QAAQ,KAAK,MAAM,MAAM,MAAM,IAAI,KAAK,IAAI,GAAG,MAAM,QAAQ;GAC1E,MAAM,OAAO,UAAU,QAAQ,KAAK,QAAQ,KAAK,SAAS,MAAM,QAAQ,KAAK,OAAO;GACpF,OAAO,MAAM,UAAU,OAAO,OAAO,QAAQ;EAC/C,CAAC;;EAGD,MAAM,QAAQ,eAAe,MAAM,WAAW,CAAC,CAAC,MAAM,SAAS,SAAS,KAAK,OAAO,MAAM,IAAI,CAAC,CAAC;;GAI9F,OAAAA,UAAA,GAAAC,mBAuCM,OAAA;IAtCH,IAAIC,MAAA,KAAA,CAAK,CAAC,MAAM,QAAA,KAAK,IAAE,SAAA;IACxB,OAAKC,eAAA,CAAC,iCAA+B,EAAA,eACZ,QAAA,SAAQ,CAAA,CAAA;IACjC,MAAK;IACJ,cAAY,QAAA;IACZ,iBAAe,QAAA;IACf,gBAAc,QAAA;IACd,iBAAe,QAAA;IACf,iBAAe,QAAA,YAAY,QAAA,OAAO,KAAA;IAClC,OAAKC,eAAA,EAAA,4BAAgC,QAAA,QAAK,EAAA,CAAA;IAC1C,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAU,MAAM;;IAGpB,QAAA,aADRJ,UAAA,GAAAC,mBAUS,UAAA;;KARP,MAAK;KACL,UAAS;KACT,OAAKE,eAAA,CAAC,oCAAkC,EAAA,WACnB,QAAA,KAAI,CAAA,CAAA;KACxB,cAAY,QAAA,OAAOD,MAAA,KAAA,CAAK,CAAC,SAAS,QAAQ,WAAWA,MAAA,KAAA,CAAK,CAAC,SAAS,QAAQ;KAC5E,SAAK,OAAA,OAAA,OAAA,KAAAG,eAAA,WAAO,KAAI,QAAA,GAAA,CAAA,MAAA,CAAA;I,IAEjBC,YAAoBJ,MAAA,gBAAA,CAAA,C,uBAEtBF,UAAA,GAAAC,mBAAwD,QAAxD,UAAwD;KACxDD,UAAA,GAAAO,YAGEC,wBAFKN,MAAA,MAAA,CAAM,CAAC,QAAA,KAAK,MAAM,MAAA,MAAM,IAAI,QAAA,KAAK,IAAI,CAAA,CAAA,GAAA,EAC1C,OAAM,iCAAgC,CAAA;IAExCO,mBAAgE,QAAhE,YAAgEC,gBAAf,MAAA,KAAK,GAAA,CAAA;IACtDD,mBAAmE,QAAnE,YAAmEC,gBAAnB,UAAA,KAAS,GAAA,CAAA;KACzDV,UAAA,IAAA,GAAAC,mBAOEU,UAAA,MAAAC,WANe,MAAA,QAAR,SAAI;KADb,OAAAZ,UAAA,GAAAC,mBAOE,QAAA;MALC,KAAK,KAAK;MACX,OAAM;MACL,OAAKG,eAAE,KAAK,QAAK,EAAA,2BAAgC,KAAK,MAAK,IAAK,KAAA,CAAS;MACzE,OAAO,KAAK;MACb,eAAY"}

package/dist/builder/outline.js

@@ -0,0 +1,6 @@
+import outline_vue_vue_type_script_setup_true_lang_default from "./outline.vue_vue_type_script_setup_true_lang.js";
+// src/builder/outline.vue
+var outline_default = outline_vue_vue_type_script_setup_true_lang_default;
+export { outline_default as default };
+
+//# sourceMappingURL=outline.js.map

package/dist/builder/outline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outline.js","names":["_sfc_main"],"sources":["../../src/builder/outline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, shallowReactive, watch } from 'vue'\nimport { isContainer } from '../core/document'\nimport type { FormNode } from '../core/types'\nimport { useBuilderState } from './context'\nimport type { BuilderView } from './context'\nimport { formNodePlaces } from './core/transaction'\nimport OutlineRow from './outline-row.vue'\n\ndefineOptions({ name: 'DouFormBuilderOutline' })\n\nconst state = useBuilderState()\n/** Containers folded away. */\nconst folded = shallowReactive(new Set<string>())\n\ninterface Row {\n  node: FormNode\n  level: number\n  position: number\n  size: number\n  container: boolean\n}\n\nconst rows = computed(() => {\n  const result: Row[] = []\n  const visit = (nodes: readonly FormNode[], level: number) => {\n    nodes.forEach((node, index) => {\n      const container = isContainer(node) && node.children.length > 0\n      result.push({ node, level, position: index + 1, size: nodes.length, container })\n      if (container && !folded.has(node.id))\n        visit((node as { children: FormNode[] }).children, level + 1)\n    })\n  }\n  visit(state.document.nodes, 1)\n  return result\n})\n\n// A folded container opens when something inside it is selected.\nwatch(\n  () => state.selection,\n  (ids) => {\n    const map = formNodePlaces(state.document)\n    for (const id of ids) {\n      let parent = map.get(id)?.parent\n      while (parent) {\n        folded.delete(parent.id)\n        parent = map.get(parent.id)?.parent\n      }\n    }\n  },\n)\n\nconst view: BuilderView = {\n  name: 'outline',\n  order: () => rows.value.map((row) => row.node.id),\n  expand: (id) => {\n    if (!folded.has(id)) return false\n    folded.delete(id)\n    return true\n  },\n  collapse: (id) => {\n    const node = formNodePlaces(state.document).get(id)?.node\n    if (!node || !isContainer(node) || !node.children.length || folded.has(id)) return false\n    folded.add(id)\n    return true\n  },\n}\n\nfunction toggle(id: string) {\n  if (folded.has(id)) folded.delete(id)\n  else folded.add(id)\n}\n\nfunction press(event: MouseEvent, id: string) {\n  state.pick(id, event, view)\n}\n\nconst active = computed(() => {\n  const last = state.selection[state.selection.length - 1]\n  return last ? state.domId(last, 'outline') : undefined\n})\n</script>\n\n<template>\n  <div\n    class=\"dou-form-builder__outline\"\n    role=\"tree\"\n    tabindex=\"0\"\n    aria-multiselectable=\"true\"\n    :aria-label=\"state.messages.outline.label\"\n    :aria-activedescendant=\"active\"\n    @keydown=\"state.keydown($event, view)\"\n  >\n    <OutlineRow\n      v-for=\"row in rows\"\n      :key=\"row.node.id\"\n      :node=\"row.node\"\n      :level=\"row.level\"\n      :position=\"row.position\"\n      :size=\"row.size\"\n      :container=\"row.container\"\n      :open=\"row.container && !folded.has(row.node.id)\"\n      :selected=\"state.selected.value.has(row.node.id)\"\n      @press=\"press($event, row.node.id)\"\n      @toggle=\"toggle(row.node.id)\"\n    />\n    <div v-if=\"!rows.length\" class=\"dou-form-builder__outline-empty\">\n      {{ state.messages.canvas.empty }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/builder/outline.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,111 @@
+import { isContainer } from "../core/document.js";
+import { formNodePlaces } from "./core/transaction.js";
+import { useBuilderState } from "./context.js";
+import outline_row_default from "./outline-row.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, openBlock, renderList, shallowReactive, toDisplayString, unref, watch } from "vue";
+// src/builder/outline.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "aria-activedescendant"];
+var _hoisted_2 = {
+	key: 0,
+	class: "dou-form-builder__outline-empty"
+};
+var outline_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouFormBuilderOutline",
+	__name: "outline",
+	setup(__props) {
+		const state = useBuilderState();
+		/** Containers folded away. */
+		const folded = shallowReactive(/* @__PURE__ */ new Set());
+		const rows = computed(() => {
+			const result = [];
+			const visit = (nodes, level) => {
+				nodes.forEach((node, index) => {
+					const container = isContainer(node) && node.children.length > 0;
+					result.push({
+						node,
+						level,
+						position: index + 1,
+						size: nodes.length,
+						container
+					});
+					if (container && !folded.has(node.id)) visit(node.children, level + 1);
+				});
+			};
+			visit(state.document.nodes, 1);
+			return result;
+		});
+		watch(() => state.selection, (ids) => {
+			const map = formNodePlaces(state.document);
+			for (const id of ids) {
+				let parent = map.get(id)?.parent;
+				while (parent) {
+					folded.delete(parent.id);
+					parent = map.get(parent.id)?.parent;
+				}
+			}
+		});
+		const view = {
+			name: "outline",
+			order: () => rows.value.map((row) => row.node.id),
+			expand: (id) => {
+				if (!folded.has(id)) return false;
+				folded.delete(id);
+				return true;
+			},
+			collapse: (id) => {
+				const node = formNodePlaces(state.document).get(id)?.node;
+				if (!node || !isContainer(node) || !node.children.length || folded.has(id)) return false;
+				folded.add(id);
+				return true;
+			}
+		};
+		function toggle(id) {
+			if (folded.has(id)) folded.delete(id);
+			else folded.add(id);
+		}
+		function press(event, id) {
+			state.pick(id, event, view);
+		}
+		const active = computed(() => {
+			const last = state.selection[state.selection.length - 1];
+			return last ? state.domId(last, "outline") : void 0;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "dou-form-builder__outline",
+				role: "tree",
+				tabindex: "0",
+				"aria-multiselectable": "true",
+				"aria-label": unref(state).messages.outline.label,
+				"aria-activedescendant": active.value,
+				onKeydown: _cache[0] || (_cache[0] = ($event) => unref(state).keydown($event, view))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row) => {
+				return openBlock(), createBlock(outline_row_default, {
+					key: row.node.id,
+					node: row.node,
+					level: row.level,
+					position: row.position,
+					size: row.size,
+					container: row.container,
+					open: row.container && !unref(folded).has(row.node.id),
+					selected: unref(state).selected.value.has(row.node.id),
+					onPress: ($event) => press($event, row.node.id),
+					onToggle: ($event) => toggle(row.node.id)
+				}, null, 8, [
+					"node",
+					"level",
+					"position",
+					"size",
+					"container",
+					"open",
+					"selected",
+					"onPress",
+					"onToggle"
+				]);
+			}), 128)), !rows.value.length ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(state).messages.canvas.empty), 1)) : createCommentVNode("", true)], 40, _hoisted_1);
+		};
+	}
+});
+export { outline_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=outline.vue_vue_type_script_setup_true_lang.js.map

package/dist/builder/outline.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outline.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_createBlock","OutlineRow","_toDisplayString","_createCommentVNode"],"sources":["../../src/builder/outline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, shallowReactive, watch } from 'vue'\nimport { isContainer } from '../core/document'\nimport type { FormNode } from '../core/types'\nimport { useBuilderState } from './context'\nimport type { BuilderView } from './context'\nimport { formNodePlaces } from './core/transaction'\nimport OutlineRow from './outline-row.vue'\n\ndefineOptions({ name: 'DouFormBuilderOutline' })\n\nconst state = useBuilderState()\n/** Containers folded away. */\nconst folded = shallowReactive(new Set<string>())\n\ninterface Row {\n  node: FormNode\n  level: number\n  position: number\n  size: number\n  container: boolean\n}\n\nconst rows = computed(() => {\n  const result: Row[] = []\n  const visit = (nodes: readonly FormNode[], level: number) => {\n    nodes.forEach((node, index) => {\n      const container = isContainer(node) && node.children.length > 0\n      result.push({ node, level, position: index + 1, size: nodes.length, container })\n      if (container && !folded.has(node.id))\n        visit((node as { children: FormNode[] }).children, level + 1)\n    })\n  }\n  visit(state.document.nodes, 1)\n  return result\n})\n\n// A folded container opens when something inside it is selected.\nwatch(\n  () => state.selection,\n  (ids) => {\n    const map = formNodePlaces(state.document)\n    for (const id of ids) {\n      let parent = map.get(id)?.parent\n      while (parent) {\n        folded.delete(parent.id)\n        parent = map.get(parent.id)?.parent\n      }\n    }\n  },\n)\n\nconst view: BuilderView = {\n  name: 'outline',\n  order: () => rows.value.map((row) => row.node.id),\n  expand: (id) => {\n    if (!folded.has(id)) return false\n    folded.delete(id)\n    return true\n  },\n  collapse: (id) => {\n    const node = formNodePlaces(state.document).get(id)?.node\n    if (!node || !isContainer(node) || !node.children.length || folded.has(id)) return false\n    folded.add(id)\n    return true\n  },\n}\n\nfunction toggle(id: string) {\n  if (folded.has(id)) folded.delete(id)\n  else folded.add(id)\n}\n\nfunction press(event: MouseEvent, id: string) {\n  state.pick(id, event, view)\n}\n\nconst active = computed(() => {\n  const last = state.selection[state.selection.length - 1]\n  return last ? state.domId(last, 'outline') : undefined\n})\n</script>\n\n<template>\n  <div\n    class=\"dou-form-builder__outline\"\n    role=\"tree\"\n    tabindex=\"0\"\n    aria-multiselectable=\"true\"\n    :aria-label=\"state.messages.outline.label\"\n    :aria-activedescendant=\"active\"\n    @keydown=\"state.keydown($event, view)\"\n  >\n    <OutlineRow\n      v-for=\"row in rows\"\n      :key=\"row.node.id\"\n      :node=\"row.node\"\n      :level=\"row.level\"\n      :position=\"row.position\"\n      :size=\"row.size\"\n      :container=\"row.container\"\n      :open=\"row.container && !folded.has(row.node.id)\"\n      :selected=\"state.selected.value.has(row.node.id)\"\n      @press=\"press($event, row.node.id)\"\n      @toggle=\"toggle(row.node.id)\"\n    />\n    <div v-if=\"!rows.length\" class=\"dou-form-builder__outline-empty\">\n      {{ state.messages.canvas.empty }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/builder/palette.js

@@ -0,0 +1,6 @@
+import palette_vue_vue_type_script_setup_true_lang_default from "./palette.vue_vue_type_script_setup_true_lang.js";
+// src/builder/palette.vue
+var palette_default = palette_vue_vue_type_script_setup_true_lang_default;
+export { palette_default as default };
+
+//# sourceMappingURL=palette.js.map

package/dist/builder/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.js","names":["_sfc_main"],"sources":["../../src/builder/palette.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { DouInput } from 'dou-ui'\nimport { SearchIcon } from '@dou-ui/icons'\nimport type { FormFieldType } from '../fields/define'\nimport { formatMessage } from '../locale'\nimport { useBuilderState } from './context'\nimport { containerTypes, groupOf, iconOf, labelOf, paletteGroups } from './settings'\n\ndefineOptions({ name: 'DouFormBuilderPalette' })\n\nconst state = useBuilderState()\nconst query = ref('')\n\ninterface Entry {\n  type: string\n  label: string\n  icon: FormFieldType['icon']\n}\n\nconst groups = computed(() => {\n  const messages = state.messages\n  const types = state.fields as Map<string, FormFieldType>\n  const byGroup = new Map<string, Entry[]>()\n  const add = (type: string, spec?: FormFieldType) => {\n    const group = groupOf(type, spec)\n    const list = byGroup.get(group) ?? []\n    list.push({ type, label: labelOf(type, spec, messages), icon: iconOf(type, spec) })\n    byGroup.set(group, list)\n  }\n  for (const [type, spec] of types) add(type, spec)\n  for (const type of containerTypes) add(type)\n\n  const search = query.value.trim().toLowerCase()\n  const order = [\n    ...paletteGroups,\n    ...[...byGroup.keys()].filter((key) => !paletteGroups.includes(key)),\n  ]\n  return order\n    .map((key) => ({\n      key,\n      label: messages.groups[key] ?? key,\n      entries: (byGroup.get(key) ?? []).filter(\n        (entry) =>\n          !search ||\n          entry.label.toLowerCase().includes(search) ||\n          entry.type.toLowerCase().includes(search),\n      ),\n    }))\n    .filter((group) => group.entries.length)\n})\n</script>\n\n<template>\n  <div class=\"dou-form-builder__palette\">\n    <div class=\"dou-form-builder__palette-search\">\n      <DouInput\n        v-model=\"query\"\n        size=\"sm\"\n        clearable\n        :placeholder=\"state.messages.palette.search\"\n        :aria-label=\"state.messages.palette.search\"\n      >\n        <template #prefix><SearchIcon /></template>\n      </DouInput>\n    </div>\n    <div class=\"dou-form-builder__palette-body\">\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.key\"\n        class=\"dou-form-builder__palette-group\"\n        :aria-label=\"group.label\"\n      >\n        <div class=\"dou-form-builder__palette-heading\" aria-hidden=\"true\">{{ group.label }}</div>\n        <div class=\"dou-form-builder__palette-items\">\n          <button\n            v-for=\"entry in group.entries\"\n            :key=\"entry.type\"\n            type=\"button\"\n            class=\"dou-form-builder__palette-item\"\n            :data-type=\"entry.type\"\n            :aria-label=\"formatMessage(state.messages.palette.add, { label: entry.label })\"\n            :disabled=\"state.readonly\"\n            @click=\"!state.dragger.value?.swallowClick() && state.add(entry.type)\"\n            @pointerdown=\"state.dragger.value?.pressType($event, entry.type, entry.label)\"\n          >\n            <component :is=\"entry.icon\" class=\"dou-form-builder__palette-icon\" />\n            <span class=\"dou-form-builder__palette-label\">{{ entry.label }}</span>\n          </button>\n        </div>\n      </section>\n      <div v-if=\"!groups.length\" class=\"dou-form-builder__palette-empty\">\n        {{ state.messages.palette.empty }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/builder/palette.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+import { formatMessage } from "../locale.js";
+import { containerTypes, groupOf, iconOf, labelOf, paletteGroups } from "./settings.js";
+import { useBuilderState } from "./context.js";
+import { DouInput } from "dou-ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { SearchIcon } from "@dou-ui/icons";
+// src/builder/palette.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "dou-form-builder__palette" };
+var _hoisted_2 = { class: "dou-form-builder__palette-search" };
+var _hoisted_3 = { class: "dou-form-builder__palette-body" };
+var _hoisted_4 = ["aria-label"];
+var _hoisted_5 = {
+	class: "dou-form-builder__palette-heading",
+	"aria-hidden": "true"
+};
+var _hoisted_6 = { class: "dou-form-builder__palette-items" };
+var _hoisted_7 = [
+	"data-type",
+	"aria-label",
+	"disabled",
+	"onClick",
+	"onPointerdown"
+];
+var _hoisted_8 = { class: "dou-form-builder__palette-label" };
+var _hoisted_9 = {
+	key: 0,
+	class: "dou-form-builder__palette-empty"
+};
+var palette_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouFormBuilderPalette",
+	__name: "palette",
+	setup(__props) {
+		const state = useBuilderState();
+		const query = ref("");
+		const groups = computed(() => {
+			const messages = state.messages;
+			const types = state.fields;
+			const byGroup = /* @__PURE__ */ new Map();
+			const add = (type, spec) => {
+				const group = groupOf(type, spec);
+				const list = byGroup.get(group) ?? [];
+				list.push({
+					type,
+					label: labelOf(type, spec, messages),
+					icon: iconOf(type, spec)
+				});
+				byGroup.set(group, list);
+			};
+			for (const [type, spec] of types) add(type, spec);
+			for (const type of containerTypes) add(type);
+			const search = query.value.trim().toLowerCase();
+			return [...paletteGroups, ...[...byGroup.keys()].filter((key) => !paletteGroups.includes(key))].map((key) => ({
+				key,
+				label: messages.groups[key] ?? key,
+				entries: (byGroup.get(key) ?? []).filter((entry) => !search || entry.label.toLowerCase().includes(search) || entry.type.toLowerCase().includes(search))
+			})).filter((group) => group.entries.length);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(unref(DouInput), {
+				modelValue: query.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+				size: "sm",
+				clearable: "",
+				placeholder: unref(state).messages.palette.search,
+				"aria-label": unref(state).messages.palette.search
+			}, {
+				prefix: withCtx(() => [createVNode(unref(SearchIcon))]),
+				_: 1
+			}, 8, [
+				"modelValue",
+				"placeholder",
+				"aria-label"
+			])]), createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, (group) => {
+				return openBlock(), createElementBlock("section", {
+					key: group.key,
+					class: "dou-form-builder__palette-group",
+					"aria-label": group.label
+				}, [createElementVNode("div", _hoisted_5, toDisplayString(group.label), 1), createElementVNode("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(group.entries, (entry) => {
+					return openBlock(), createElementBlock("button", {
+						key: entry.type,
+						type: "button",
+						class: "dou-form-builder__palette-item",
+						"data-type": entry.type,
+						"aria-label": unref(formatMessage)(unref(state).messages.palette.add, { label: entry.label }),
+						disabled: unref(state).readonly,
+						onClick: ($event) => !unref(state).dragger.value?.swallowClick() && unref(state).add(entry.type),
+						onPointerdown: ($event) => unref(state).dragger.value?.pressType($event, entry.type, entry.label)
+					}, [(openBlock(), createBlock(resolveDynamicComponent(entry.icon), { class: "dou-form-builder__palette-icon" })), createElementVNode("span", _hoisted_8, toDisplayString(entry.label), 1)], 40, _hoisted_7);
+				}), 128))])], 8, _hoisted_4);
+			}), 128)), !groups.value.length ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(unref(state).messages.palette.empty), 1)) : createCommentVNode("", true)])]);
+		};
+	}
+});
+export { palette_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=palette.vue_vue_type_script_setup_true_lang.js.map

package/dist/builder/palette.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode","_unref","_withCtx","_Fragment","_renderList","_toDisplayString","_createBlock","_resolveDynamicComponent","_createCommentVNode"],"sources":["../../src/builder/palette.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { DouInput } from 'dou-ui'\nimport { SearchIcon } from '@dou-ui/icons'\nimport type { FormFieldType } from '../fields/define'\nimport { formatMessage } from '../locale'\nimport { useBuilderState } from './context'\nimport { containerTypes, groupOf, iconOf, labelOf, paletteGroups } from './settings'\n\ndefineOptions({ name: 'DouFormBuilderPalette' })\n\nconst state = useBuilderState()\nconst query = ref('')\n\ninterface Entry {\n  type: string\n  label: string\n  icon: FormFieldType['icon']\n}\n\nconst groups = computed(() => {\n  const messages = state.messages\n  const types = state.fields as Map<string, FormFieldType>\n  const byGroup = new Map<string, Entry[]>()\n  const add = (type: string, spec?: FormFieldType) => {\n    const group = groupOf(type, spec)\n    const list = byGroup.get(group) ?? []\n    list.push({ type, label: labelOf(type, spec, messages), icon: iconOf(type, spec) })\n    byGroup.set(group, list)\n  }\n  for (const [type, spec] of types) add(type, spec)\n  for (const type of containerTypes) add(type)\n\n  const search = query.value.trim().toLowerCase()\n  const order = [\n    ...paletteGroups,\n    ...[...byGroup.keys()].filter((key) => !paletteGroups.includes(key)),\n  ]\n  return order\n    .map((key) => ({\n      key,\n      label: messages.groups[key] ?? key,\n      entries: (byGroup.get(key) ?? []).filter(\n        (entry) =>\n          !search ||\n          entry.label.toLowerCase().includes(search) ||\n          entry.type.toLowerCase().includes(search),\n      ),\n    }))\n    .filter((group) => group.entries.length)\n})\n</script>\n\n<template>\n  <div class=\"dou-form-builder__palette\">\n    <div class=\"dou-form-builder__palette-search\">\n      <DouInput\n        v-model=\"query\"\n        size=\"sm\"\n        clearable\n        :placeholder=\"state.messages.palette.search\"\n        :aria-label=\"state.messages.palette.search\"\n      >\n        <template #prefix><SearchIcon /></template>\n      </DouInput>\n    </div>\n    <div class=\"dou-form-builder__palette-body\">\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.key\"\n        class=\"dou-form-builder__palette-group\"\n        :aria-label=\"group.label\"\n      >\n        <div class=\"dou-form-builder__palette-heading\" aria-hidden=\"true\">{{ group.label }}</div>\n        <div class=\"dou-form-builder__palette-items\">\n          <button\n            v-for=\"entry in group.entries\"\n            :key=\"entry.type\"\n            type=\"button\"\n            class=\"dou-form-builder__palette-item\"\n            :data-type=\"entry.type\"\n            :aria-label=\"formatMessage(state.messages.palette.add, { label: entry.label })\"\n            :disabled=\"state.readonly\"\n            @click=\"!state.dragger.value?.swallowClick() && state.add(entry.type)\"\n            @pointerdown=\"state.dragger.value?.pressType($event, entry.type, entry.label)\"\n          >\n            <component :is=\"entry.icon\" class=\"dou-form-builder__palette-icon\" />\n            <span class=\"dou-form-builder__palette-label\">{{ entry.label }}</span>\n          </button>\n        </div>\n      </section>\n      <div v-if=\"!groups.length\" class=\"dou-form-builder__palette-empty\">\n        {{ state.messages.palette.empty }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/builder/preview.js

@@ -0,0 +1,6 @@
+import preview_vue_vue_type_script_setup_true_lang_default from "./preview.vue_vue_type_script_setup_true_lang.js";
+// src/builder/preview.vue
+var preview_default = preview_vue_vue_type_script_setup_true_lang_default;
+export { preview_default as default };
+
+//# sourceMappingURL=preview.js.map

package/dist/builder/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.js","names":["_sfc_main"],"sources":["../../src/builder/preview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, shallowRef, watch } from 'vue'\nimport { DouButton, DouSegmentedControl } from 'dou-ui'\nimport type { FormModel } from 'dou-ui'\nimport { CheckCircleIcon, MonitorIcon, SmartphoneIcon, TabletIcon } from '@dou-ui/icons'\nimport FormRenderer from '../renderer/form-renderer.vue'\nimport { useBuilderState } from './context'\n\n/**\n * The form as people will fill it in, at the width of a desktop, a tablet\n * or a phone. The values are kept while the form is edited, so switching\n * back and forth does not lose them; submitting shows what would be sent.\n */\ndefineOptions({ name: 'DouFormBuilderPreview' })\n\ntype Device = 'desktop' | 'tablet' | 'phone'\n\nconst state = useBuilderState()\nconst messages = computed(() => state.messages.preview)\nconst fields = computed(() => [...state.fields.values()])\n\nconst device = shallowRef<Device>('desktop')\nconst widths: Record<Device, number | undefined> = { desktop: undefined, tablet: 768, phone: 375 }\nconst icons = { desktop: MonitorIcon, tablet: TabletIcon, phone: SmartphoneIcon }\nconst devices = computed(() =>\n  (['desktop', 'tablet', 'phone'] as const).map((value) => ({\n    value,\n    label: messages.value.devices[value],\n  })),\n)\n\nconst model = reactive<FormModel>({})\nconst result = shallowRef<FormModel | null>(null)\nwatch(\n  () => state.document,\n  () => (result.value = null),\n)\nconst shown = computed(() => (result.value ? JSON.stringify(result.value, null, 2) : ''))\n</script>\n\n<template>\n  <div class=\"dou-form-builder__preview\" role=\"region\" :aria-label=\"messages.label\">\n    <div class=\"dou-form-builder__preview-bar\">\n      <DouSegmentedControl\n        v-model=\"device\"\n        :options=\"devices\"\n        :aria-label=\"messages.device\"\n        size=\"sm\"\n        class=\"dou-form-builder__preview-devices\"\n      >\n        <template #option=\"{ option }\">\n          <span class=\"dou-form-builder__preview-device\">\n            <component :is=\"icons[option.value as Device]\" />\n            <span>{{ option.label }}</span>\n          </span>\n        </template>\n      </DouSegmentedControl>\n    </div>\n    <div class=\"dou-form-builder__preview-scroll\">\n      <div\n        class=\"dou-form-builder__preview-frame\"\n        :data-device=\"device\"\n        :style=\"widths[device] ? { width: `${widths[device]}px` } : undefined\"\n      >\n        <FormRenderer\n          :form=\"state.document\"\n          :model=\"model\"\n          :fields=\"fields\"\n          :functions=\"state.functions()\"\n          :sources=\"state.sources()\"\n          :validators=\"state.validators()\"\n          @submit=\"result = $event\"\n          @invalid=\"result = null\"\n          @reset=\"result = null\"\n        >\n          <div class=\"dou-form-builder__preview-footer\">\n            <DouButton native-type=\"submit\" tone=\"primary\">{{ messages.submit }}</DouButton>\n            <DouButton native-type=\"reset\" variant=\"outline\">{{ messages.reset }}</DouButton>\n          </div>\n        </FormRenderer>\n        <div v-if=\"result\" class=\"dou-form-builder__preview-result\" role=\"status\">\n          <div class=\"dou-form-builder__preview-result-title\">\n            <CheckCircleIcon />\n            <span>{{ messages.passed }}</span>\n          </div>\n          <pre class=\"dou-form-builder__preview-result-code\">{{ shown }}</pre>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/builder/preview.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,111 @@
+import form_renderer_default from "../renderer/form-renderer.js";
+import { useBuilderState } from "./context.js";
+import { DouButton, DouSegmentedControl } from "dou-ui";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeStyle, openBlock, reactive, resolveDynamicComponent, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { CheckCircleIcon, MonitorIcon, SmartphoneIcon, TabletIcon } from "@dou-ui/icons";
+// src/builder/preview.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = { class: "dou-form-builder__preview-bar" };
+var _hoisted_3 = { class: "dou-form-builder__preview-device" };
+var _hoisted_4 = { class: "dou-form-builder__preview-scroll" };
+var _hoisted_5 = ["data-device"];
+var _hoisted_6 = { class: "dou-form-builder__preview-footer" };
+var _hoisted_7 = {
+	key: 0,
+	class: "dou-form-builder__preview-result",
+	role: "status"
+};
+var _hoisted_8 = { class: "dou-form-builder__preview-result-title" };
+var _hoisted_9 = { class: "dou-form-builder__preview-result-code" };
+var preview_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouFormBuilderPreview",
+	__name: "preview",
+	setup(__props) {
+		const state = useBuilderState();
+		const messages = computed(() => state.messages.preview);
+		const fields = computed(() => [...state.fields.values()]);
+		const device = shallowRef("desktop");
+		const widths = {
+			desktop: void 0,
+			tablet: 768,
+			phone: 375
+		};
+		const icons = {
+			desktop: MonitorIcon,
+			tablet: TabletIcon,
+			phone: SmartphoneIcon
+		};
+		const devices = computed(() => [
+			"desktop",
+			"tablet",
+			"phone"
+		].map((value) => ({
+			value,
+			label: messages.value.devices[value]
+		})));
+		const model = reactive({});
+		const result = shallowRef(null);
+		watch(() => state.document, () => result.value = null);
+		const shown = computed(() => result.value ? JSON.stringify(result.value, null, 2) : "");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "dou-form-builder__preview",
+				role: "region",
+				"aria-label": messages.value.label
+			}, [createElementVNode("div", _hoisted_2, [createVNode(unref(DouSegmentedControl), {
+				modelValue: device.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => device.value = $event),
+				options: devices.value,
+				"aria-label": messages.value.device,
+				size: "sm",
+				class: "dou-form-builder__preview-devices"
+			}, {
+				option: withCtx(({ option }) => [createElementVNode("span", _hoisted_3, [(openBlock(), createBlock(resolveDynamicComponent(icons[option.value]))), createElementVNode("span", null, toDisplayString(option.label), 1)])]),
+				_: 1
+			}, 8, [
+				"modelValue",
+				"options",
+				"aria-label"
+			])]), createElementVNode("div", _hoisted_4, [createElementVNode("div", {
+				class: "dou-form-builder__preview-frame",
+				"data-device": device.value,
+				style: normalizeStyle(widths[device.value] ? { width: `${widths[device.value]}px` } : void 0)
+			}, [createVNode(form_renderer_default, {
+				form: unref(state).document,
+				model,
+				fields: fields.value,
+				functions: unref(state).functions(),
+				sources: unref(state).sources(),
+				validators: unref(state).validators(),
+				onSubmit: _cache[1] || (_cache[1] = ($event) => result.value = $event),
+				onInvalid: _cache[2] || (_cache[2] = ($event) => result.value = null),
+				onReset: _cache[3] || (_cache[3] = ($event) => result.value = null)
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_6, [createVNode(unref(DouButton), {
+					"native-type": "submit",
+					tone: "primary"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(messages.value.submit), 1)]),
+					_: 1
+				}), createVNode(unref(DouButton), {
+					"native-type": "reset",
+					variant: "outline"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(messages.value.reset), 1)]),
+					_: 1
+				})])]),
+				_: 1
+			}, 8, [
+				"form",
+				"model",
+				"fields",
+				"functions",
+				"sources",
+				"validators"
+			]), result.value ? (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode("div", _hoisted_8, [createVNode(unref(CheckCircleIcon)), createElementVNode("span", null, toDisplayString(messages.value.passed), 1)]), createElementVNode("pre", _hoisted_9, toDisplayString(shown.value), 1)])) : createCommentVNode("", true)], 12, _hoisted_5)])], 8, _hoisted_1);
+		};
+	}
+});
+export { preview_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=preview.vue_vue_type_script_setup_true_lang.js.map

package/dist/builder/preview.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode","_unref","_withCtx","_createBlock","_resolveDynamicComponent","_toDisplayString","_normalizeStyle","FormRenderer","_createTextVNode","_createCommentVNode"],"sources":["../../src/builder/preview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, shallowRef, watch } from 'vue'\nimport { DouButton, DouSegmentedControl } from 'dou-ui'\nimport type { FormModel } from 'dou-ui'\nimport { CheckCircleIcon, MonitorIcon, SmartphoneIcon, TabletIcon } from '@dou-ui/icons'\nimport FormRenderer from '../renderer/form-renderer.vue'\nimport { useBuilderState } from './context'\n\n/**\n * The form as people will fill it in, at the width of a desktop, a tablet\n * or a phone. The values are kept while the form is edited, so switching\n * back and forth does not lose them; submitting shows what would be sent.\n */\ndefineOptions({ name: 'DouFormBuilderPreview' })\n\ntype Device = 'desktop' | 'tablet' | 'phone'\n\nconst state = useBuilderState()\nconst messages = computed(() => state.messages.preview)\nconst fields = computed(() => [...state.fields.values()])\n\nconst device = shallowRef<Device>('desktop')\nconst widths: Record<Device, number | undefined> = { desktop: undefined, tablet: 768, phone: 375 }\nconst icons = { desktop: MonitorIcon, tablet: TabletIcon, phone: SmartphoneIcon }\nconst devices = computed(() =>\n  (['desktop', 'tablet', 'phone'] as const).map((value) => ({\n    value,\n    label: messages.value.devices[value],\n  })),\n)\n\nconst model = reactive<FormModel>({})\nconst result = shallowRef<FormModel | null>(null)\nwatch(\n  () => state.document,\n  () => (result.value = null),\n)\nconst shown = computed(() => (result.value ? JSON.stringify(result.value, null, 2) : ''))\n</script>\n\n<template>\n  <div class=\"dou-form-builder__preview\" role=\"region\" :aria-label=\"messages.label\">\n    <div class=\"dou-form-builder__preview-bar\">\n      <DouSegmentedControl\n        v-model=\"device\"\n        :options=\"devices\"\n        :aria-label=\"messages.device\"\n        size=\"sm\"\n        class=\"dou-form-builder__preview-devices\"\n      >\n        <template #option=\"{ option }\">\n          <span class=\"dou-form-builder__preview-device\">\n            <component :is=\"icons[option.value as Device]\" />\n            <span>{{ option.label }}</span>\n          </span>\n        </template>\n      </DouSegmentedControl>\n    </div>\n    <div class=\"dou-form-builder__preview-scroll\">\n      <div\n        class=\"dou-form-builder__preview-frame\"\n        :data-device=\"device\"\n        :style=\"widths[device] ? { width: `${widths[device]}px` } : undefined\"\n      >\n        <FormRenderer\n          :form=\"state.document\"\n          :model=\"model\"\n          :fields=\"fields\"\n          :functions=\"state.functions()\"\n          :sources=\"state.sources()\"\n          :validators=\"state.validators()\"\n          @submit=\"result = $event\"\n          @invalid=\"result = null\"\n          @reset=\"result = null\"\n        >\n          <div class=\"dou-form-builder__preview-footer\">\n            <DouButton native-type=\"submit\" tone=\"primary\">{{ messages.submit }}</DouButton>\n            <DouButton native-type=\"reset\" variant=\"outline\">{{ messages.reset }}</DouButton>\n          </div>\n        </FormRenderer>\n        <div v-if=\"result\" class=\"dou-form-builder__preview-result\" role=\"status\">\n          <div class=\"dou-form-builder__preview-result-title\">\n            <CheckCircleIcon />\n            <span>{{ messages.passed }}</span>\n          </div>\n          <pre class=\"dou-form-builder__preview-result-code\">{{ shown }}</pre>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ,gBAAgB;EAC9B,MAAM,WAAW,eAAe,MAAM,SAAS,OAAO;EACtD,MAAM,SAAS,eAAe,CAAC,GAAG,MAAM,OAAO,OAAO,CAAC,CAAC;EAExD,MAAM,SAAS,WAAmB,SAAS;EAC3C,MAAM,SAA6C;GAAE,SAAS,KAAA;GAAW,QAAQ;GAAK,OAAO;EAAI;EACjG,MAAM,QAAQ;GAAE,SAAS;GAAa,QAAQ;GAAY,OAAO;EAAe;EAChF,MAAM,UAAU,eACb;GAAC;GAAW;GAAU;EAAO,CAAC,CAAW,KAAK,WAAW;GACxD;GACA,OAAO,SAAS,MAAM,QAAQ;EAChC,EAAE,CACJ;EAEA,MAAM,QAAQ,SAAoB,CAAC,CAAC;EACpC,MAAM,SAAS,WAA6B,IAAI;EAChD,YACQ,MAAM,gBACL,OAAO,QAAQ,IACxB;EACA,MAAM,QAAQ,eAAgB,OAAO,QAAQ,KAAK,UAAU,OAAO,OAAO,MAAM,CAAC,IAAI,EAAG;;GAItF,OAAAA,UAAA,GAAAC,mBAgDM,OAAA;IAhDD,OAAM;IAA4B,MAAK;IAAU,cAAY,SAAA,MAAS;G,IACzEC,mBAeM,OAfN,YAeM,CAdJC,YAasBC,MAAA,mBAAA,GAAA;IAZX,YAAA,OAAA;IAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,OAAM,QAAA;IACd,SAAS,QAAA;IACT,cAAY,SAAA,MAAS;IACtB,MAAK;IACL,OAAM;;IAEK,QAAMC,SAIR,EAJY,aAAM,CACzBH,mBAGO,QAHP,YAGO,EAFLF,UAAA,GAAAM,YAAiDC,wBAAjC,MAAM,OAAO,MAAK,CAAA,IAClCL,mBAA+B,QAAA,MAAAM,gBAAtB,OAAO,KAAK,GAAA,CAAA,C;;;;;;G,MAK7BN,mBA8BM,OA9BN,YA8BM,CA7BJA,mBA4BM,OAAA;IA3BJ,OAAM;IACL,eAAa,OAAA;IACb,OAAKO,eAAE,OAAO,OAAA,SAAM,EAAA,OAAA,GAAgB,OAAO,OAAA,OAAM,IAAA,IAAU,KAAA,CAAS;G,IAErEN,YAeeO,uBAAA;IAdZ,MAAMN,MAAA,KAAA,CAAK,CAAC;IACL;IACP,QAAQ,OAAA;IACR,WAAWA,MAAA,KAAA,CAAK,CAAC,UAAS;IAC1B,SAASA,MAAA,KAAA,CAAK,CAAC,QAAO;IACtB,YAAYA,MAAA,KAAA,CAAK,CAAC,WAAU;IAC5B,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,QAAS;IACjB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,QAAM;IACf,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,QAAM;;IAEd,SAAAC,cAGM,CAHNH,mBAGM,OAHN,YAGM,CAFJC,YAAgFC,MAAA,SAAA,GAAA;KAArE,eAAY;KAAS,MAAK;;KAAU,SAAAC,cAAqB,CAAlBM,gBAAAH,gBAAA,SAAA,MAAS,MAAM,GAAA,CAAA,C;;I,IACjEL,YAAiFC,MAAA,SAAA,GAAA;KAAtE,eAAY;KAAQ,SAAQ;;KAAU,SAAAC,cAAoB,CAAjBM,gBAAAH,gBAAA,SAAA,MAAS,KAAK,GAAA,CAAA,C;;;;;;;;;;;G,IAG3D,OAAA,SAAXR,UAAA,GAAAC,mBAMM,OANN,YAMM,CALJC,mBAGM,OAHN,YAGM,CAFJC,YAAmBC,MAAA,eAAA,CAAA,GACnBF,mBAAkC,QAAA,MAAAM,gBAAzB,SAAA,MAAS,MAAM,GAAA,CAAA,C,IAE1BN,mBAAoE,OAApE,YAAoEM,gBAAd,MAAA,KAAK,GAAA,CAAA,C"}

package/dist/builder/settings-binding.js

@@ -0,0 +1,57 @@
+import { cloneValue, getPath, isList, setPath, unsetPath, valueNodes } from "../core/document.js";
+import { equalValues, isEmptyValue } from "../core/expression.js";
+import { startValue } from "../core/values.js";
+import { reactive, shallowRef, watch } from "vue";
+// src/builder/settings-binding.ts
+/**
+* Edit an object (a node, its `props`, or the document's settings)
+* through a settings form. The form's values start as a copy of the
+* object; when one changes, the keys it touches are handed to `apply`
+* as a patch. A setting set back to what leaving it out means (its
+* `default`, or empty) is left out of the object again.
+*/
+function useSettingsBinding(options) {
+	const model = shallowRef(reactive({}));
+	/** The object the last patch made, which the form already shows. */
+	let own;
+	watch([options.source, () => options.key?.()], ([data, key], previous) => {
+		if (data && data === own && previous?.[1] === key) return;
+		own = void 0;
+		const copy = cloneValue(data ?? {});
+		model.value = reactive(options.prepare ? options.prepare(copy) : copy);
+	}, { immediate: true });
+	/** What leaving a setting out means: its default, else its type's empty value. */
+	function fallback(node) {
+		if (isList(node)) return node.default ?? [];
+		const type = options.fields().get(node.type);
+		return type && "name" in node ? startValue(type, node) : void 0;
+	}
+	watch(model, (values) => {
+		const data = options.source() ?? {};
+		const patch = {};
+		for (const node of valueNodes(options.form().nodes)) {
+			const path = node.name;
+			const next = getPath(values, path);
+			const before = getPath(data, path);
+			const base = fallback(node);
+			const now = next === void 0 ? base : next;
+			if (equalValues(now, before === void 0 ? base : before)) continue;
+			const drop = equalValues(now, base) || isEmptyValue(now);
+			const [key, ...rest] = path.split(".");
+			if (!rest.length) {
+				patch[key] = drop ? void 0 : cloneValue(now);
+				continue;
+			}
+			const top = key;
+			const holder = cloneValue((top in patch ? patch[top] : data[top]) ?? {});
+			if (drop) unsetPath(holder, rest.join("."));
+			else setPath(holder, rest.join("."), cloneValue(now));
+			patch[key] = isEmptyValue(holder) ? void 0 : holder;
+		}
+		if (Object.keys(patch).length) own = options.apply(patch);
+	}, { deep: true });
+	return model;
+}
+export { useSettingsBinding };
+
+//# sourceMappingURL=settings-binding.js.map

package/dist/builder/settings-binding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-binding.js","names":[],"sources":["../../src/builder/settings-binding.ts"],"sourcesContent":["import { reactive, shallowRef, watch } from 'vue'\nimport type { Ref } from 'vue'\nimport { cloneValue, getPath, isList, setPath, unsetPath, valueNodes } from '../core/document'\nimport { equalValues, isEmptyValue } from '../core/expression'\nimport { startValue } from '../core/values'\nimport type { FormDocument, FormNode } from '../core/types'\nimport type { FormFieldType } from '../fields/define'\n\ntype Data = Record<string, unknown>\n\n/**\n * Edit an object (a node, its `props`, or the document's settings)\n * through a settings form. The form's values start as a copy of the\n * object; when one changes, the keys it touches are handed to `apply`\n * as a patch. A setting set back to what leaving it out means (its\n * `default`, or empty) is left out of the object again.\n */\nexport function useSettingsBinding(options: {\n  source: () => Data | undefined\n  /** What the object belongs to, e.g. the node's id: a new key shows a new copy even if the object is the same. */\n  key?: () => unknown\n  form: () => FormDocument\n  fields: () => Map<string, FormFieldType>\n  /** Prepare a copy of the object for the form, e.g. turn plain options into objects. */\n  prepare?: (data: Data) => Data\n  /** Write the patch; returns the object as it now is. */\n  apply: (patch: Data) => Data | undefined\n}): Ref<Data> {\n  const model = shallowRef<Data>(reactive({}))\n  /** The object the last patch made, which the form already shows. */\n  let own: Data | undefined\n\n  watch(\n    [options.source, () => options.key?.()],\n    ([data, key], previous) => {\n      if (data && data === own && previous?.[1] === key) return\n      own = undefined\n      const copy = cloneValue(data ?? {}) as Data\n      model.value = reactive(options.prepare ? options.prepare(copy) : copy)\n    },\n    { immediate: true },\n  )\n\n  /** What leaving a setting out means: its default, else its type's empty value. */\n  function fallback(node: FormNode) {\n    if (isList(node)) return node.default ?? []\n    const type = options.fields().get(node.type)\n    return type && 'name' in node ? startValue(type, node) : undefined\n  }\n\n  watch(\n    model,\n    (values) => {\n      const data = options.source() ?? {}\n      const patch: Data = {}\n      for (const node of valueNodes(options.form().nodes)) {\n        const path = node.name!\n        const next = getPath(values, path)\n        const before = getPath(data, path)\n        const base = fallback(node)\n        const now = next === undefined ? base : next\n        const was = before === undefined ? base : before\n        if (equalValues(now, was)) continue\n        const drop = equalValues(now, base) || isEmptyValue(now)\n        const [key, ...rest] = path.split('.')\n        if (!rest.length) {\n          patch[key!] = drop ? undefined : cloneValue(now)\n          continue\n        }\n        // A setting inside an object: copy the object and change only that key.\n        const top = key!\n        const holder = cloneValue((top in patch ? patch[top] : data[top]) ?? {}) as Data\n        if (drop) unsetPath(holder, rest.join('.'))\n        else setPath(holder, rest.join('.'), cloneValue(now))\n        patch[key!] = isEmptyValue(holder) ? undefined : holder\n      }\n      if (Object.keys(patch).length) own = options.apply(patch)\n    },\n    { deep: true },\n  )\n\n  return model\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,SAAgB,mBAAmB,SAUrB;CACZ,MAAM,QAAQ,WAAiB,SAAS,CAAC,CAAC,CAAC;;CAE3C,IAAI;CAEJ,MACE,CAAC,QAAQ,cAAc,QAAQ,MAAM,CAAC,IACrC,CAAC,MAAM,MAAM,aAAa;EACzB,IAAI,QAAQ,SAAS,OAAO,WAAW,OAAO,KAAK;EACnD,MAAM,KAAA;EACN,MAAM,OAAO,WAAW,QAAQ,CAAC,CAAC;EAClC,MAAM,QAAQ,SAAS,QAAQ,UAAU,QAAQ,QAAQ,IAAI,IAAI,IAAI;CACvE,GACA,EAAE,WAAW,KAAK,CACpB;;CAGA,SAAS,SAAS,MAAgB;EAChC,IAAI,OAAO,IAAI,GAAG,OAAO,KAAK,WAAW,CAAC;EAC1C,MAAM,OAAO,QAAQ,OAAO,CAAC,CAAC,IAAI,KAAK,IAAI;EAC3C,OAAO,QAAQ,UAAU,OAAO,WAAW,MAAM,IAAI,IAAI,KAAA;CAC3D;CAEA,MACE,QACC,WAAW;EACV,MAAM,OAAO,QAAQ,OAAO,KAAK,CAAC;EAClC,MAAM,QAAc,CAAC;EACrB,KAAK,MAAM,QAAQ,WAAW,QAAQ,KAAK,CAAC,CAAC,KAAK,GAAG;GACnD,MAAM,OAAO,KAAK;GAClB,MAAM,OAAO,QAAQ,QAAQ,IAAI;GACjC,MAAM,SAAS,QAAQ,MAAM,IAAI;GACjC,MAAM,OAAO,SAAS,IAAI;GAC1B,MAAM,MAAM,SAAS,KAAA,IAAY,OAAO;GAExC,IAAI,YAAY,KADJ,WAAW,KAAA,IAAY,OAAO,MAClB,GAAG;GAC3B,MAAM,OAAO,YAAY,KAAK,IAAI,KAAK,aAAa,GAAG;GACvD,MAAM,CAAC,KAAK,GAAG,QAAQ,KAAK,MAAM,GAAG;GACrC,IAAI,CAAC,KAAK,QAAQ;IAChB,MAAM,OAAQ,OAAO,KAAA,IAAY,WAAW,GAAG;IAC/C;GACF;GAEA,MAAM,MAAM;GACZ,MAAM,SAAS,YAAY,OAAO,QAAQ,MAAM,OAAO,KAAK,SAAS,CAAC,CAAC;GACvE,IAAI,MAAM,UAAU,QAAQ,KAAK,KAAK,GAAG,CAAC;QACrC,QAAQ,QAAQ,KAAK,KAAK,GAAG,GAAG,WAAW,GAAG,CAAC;GACpD,MAAM,OAAQ,aAAa,MAAM,IAAI,KAAA,IAAY;EACnD;EACA,IAAI,OAAO,KAAK,KAAK,CAAC,CAAC,QAAQ,MAAM,QAAQ,MAAM,KAAK;CAC1D,GACA,EAAE,MAAM,KAAK,CACf;CAEA,OAAO;AACT"}