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

package/dist/builder/settings.js

@@ -0,0 +1,487 @@
+import { markRaw } from "vue";
+import { CalendarIcon, CheckSquareIcon, ChevronDownSquareIcon, ClockIcon, HashIcon, InfoSquareIcon, LayoutIcon, LayoutListIcon, ListChecksIcon, ListTreeIcon, OtpIcon, PaletteIcon, RadioIcon, SegmentedControlIcon, SeparatorHorizontalIcon, SlidersIcon, SquareDashedIcon, StarIcon, StepsIcon, TabsIcon, TagsIcon, TextAlignLeftIcon, TextCursorIcon, ToggleRightIcon, TreeStructureIcon, TypeIcon, UploadIcon } from "@dou-ui/icons";
+// src/builder/settings.ts
+/** The palette groups in the order they are listed; groups of other names follow. */
+var paletteGroups = [
+	"input",
+	"choice",
+	"more",
+	"display",
+	"layout"
+];
+var raw = (icon) => markRaw(icon);
+/** Icons and groups of the built-in types, kept out of the renderer's entry. */
+var builtinLooks = {
+	input: {
+		icon: raw(TextCursorIcon),
+		group: "input"
+	},
+	textarea: {
+		icon: raw(TextAlignLeftIcon),
+		group: "input"
+	},
+	"input-number": {
+		icon: raw(HashIcon),
+		group: "input"
+	},
+	"input-tag": {
+		icon: raw(TagsIcon),
+		group: "input"
+	},
+	"input-otp": {
+		icon: raw(OtpIcon),
+		group: "input"
+	},
+	select: {
+		icon: raw(ChevronDownSquareIcon),
+		group: "choice"
+	},
+	"radio-group": {
+		icon: raw(RadioIcon),
+		group: "choice"
+	},
+	"checkbox-group": {
+		icon: raw(ListChecksIcon),
+		group: "choice"
+	},
+	checkbox: {
+		icon: raw(CheckSquareIcon),
+		group: "choice"
+	},
+	switch: {
+		icon: raw(ToggleRightIcon),
+		group: "choice"
+	},
+	"segmented-control": {
+		icon: raw(SegmentedControlIcon),
+		group: "choice"
+	},
+	cascader: {
+		icon: raw(ListTreeIcon),
+		group: "choice"
+	},
+	"tree-select": {
+		icon: raw(TreeStructureIcon),
+		group: "choice"
+	},
+	slider: {
+		icon: raw(SlidersIcon),
+		group: "more"
+	},
+	rate: {
+		icon: raw(StarIcon),
+		group: "more"
+	},
+	"date-picker": {
+		icon: raw(CalendarIcon),
+		group: "more"
+	},
+	"time-picker": {
+		icon: raw(ClockIcon),
+		group: "more"
+	},
+	"color-picker": {
+		icon: raw(PaletteIcon),
+		group: "more"
+	},
+	upload: {
+		icon: raw(UploadIcon),
+		group: "more"
+	},
+	text: {
+		icon: raw(TypeIcon),
+		group: "display"
+	},
+	divider: {
+		icon: raw(SeparatorHorizontalIcon),
+		group: "display"
+	},
+	alert: {
+		icon: raw(InfoSquareIcon),
+		group: "display"
+	},
+	section: {
+		icon: raw(SquareDashedIcon),
+		group: "layout"
+	},
+	tabs: {
+		icon: raw(TabsIcon),
+		group: "layout"
+	},
+	steps: {
+		icon: raw(StepsIcon),
+		group: "layout"
+	},
+	list: {
+		icon: raw(LayoutListIcon),
+		group: "layout"
+	},
+	page: {
+		icon: raw(LayoutIcon),
+		group: "layout"
+	}
+};
+/** The containers the palette offers, after the field types. */
+var containerTypes = [
+	"section",
+	"tabs",
+	"steps",
+	"list"
+];
+/** A type's icon: its own, else the built-in one, else a plain box. */
+function iconOf(type, spec) {
+	return spec?.icon ?? builtinLooks[type]?.icon ?? builtinLooks.section.icon;
+}
+function groupOf(type, spec) {
+	return spec?.group ?? builtinLooks[type]?.group ?? "more";
+}
+/** A type's name for people: its own `label`, else the locale's. */
+function labelOf(type, spec, messages) {
+	return spec?.label ?? messages.types[type] ?? type;
+}
+/** What a node is called in the outline and the inspector's heading. */
+function nodeTitle(node, fields, messages) {
+	const record = node;
+	const own = record.label ?? record.title;
+	if (own) return own;
+	if ("name" in node && node.name) return node.name;
+	return labelOf(node.type, fields.get(node.type), messages);
+}
+var field = (type, name, label, extra = {}) => ({
+	id: `setting-${name}`,
+	type,
+	name,
+	label,
+	...extra
+});
+var sw = (name, label, extra = {}) => field("switch", name, label, extra);
+var text = (name, label, extra = {}) => field("input", name, label, {
+	...extra,
+	props: {
+		clearable: true,
+		...extra.props
+	}
+});
+var number = (name, label, props = {}, extra = {}) => field("input-number", name, label, {
+	...extra,
+	props: {
+		controls: false,
+		...props
+	}
+});
+function choices(messages, key, values) {
+	const labels = messages.choices[key] ?? {};
+	return values.map((value) => ({
+		value,
+		label: labels[String(value)] ?? String(value)
+	}));
+}
+var segmented = (messages, name, values, fallback, extra = {}, key = name) => field("segmented-control", name, messages.settings[key] ?? name, {
+	default: fallback,
+	props: {
+		options: choices(messages, key, values),
+		block: true
+	},
+	...extra
+});
+function optionList(messages, name = "options") {
+	const s = messages.settings;
+	return {
+		id: `setting-${name}`,
+		type: "list",
+		name,
+		label: s.options,
+		columns: 12,
+		children: [field("input", "label", s.optionLabel, { span: 6 }), field("input", "value", s.optionValue, { span: 6 })]
+	};
+}
+/** Settings of the built-in types, edited in a node's `props`. */
+function builtinSettings(type, messages) {
+	const s = messages.settings;
+	const placeholder = text("placeholder", s.placeholder);
+	const clearable = sw("clearable", s.clearable);
+	const multiple = sw("multiple", s.multiple);
+	const filterable = sw("filterable", s.filterable);
+	const options = optionList(messages);
+	const direction = segmented(messages, "direction", ["horizontal", "vertical"], "horizontal");
+	switch (type) {
+		case "input": return [
+			placeholder,
+			clearable,
+			number("maxlength", s.maxlength, { min: 1 }),
+			sw("showCount", s.showCount)
+		];
+		case "textarea": return [
+			placeholder,
+			number("rows", s.rows, {
+				min: 1,
+				placeholder: "3"
+			}),
+			sw("autosize", s.autosize),
+			number("maxlength", s.maxlength, { min: 1 }),
+			sw("showCount", s.showCount)
+		];
+		case "input-number": return [
+			placeholder,
+			number("min", s.min, {}, { span: 6 }),
+			number("max", s.max, {}, { span: 6 }),
+			number("step", s.step, {
+				min: 0,
+				placeholder: "1"
+			}, { span: 6 }),
+			number("precision", s.precision, {
+				min: 0,
+				precision: 0
+			}, { span: 6 }),
+			sw("controls", s.controls, { default: true })
+		];
+		case "select": return [
+			options,
+			placeholder,
+			multiple,
+			filterable,
+			clearable
+		];
+		case "radio-group":
+		case "checkbox-group": return [options, direction];
+		case "segmented-control": return [options];
+		case "checkbox": return [text("text", s.text)];
+		case "slider": return [
+			number("min", s.min, {}, {
+				span: 6,
+				default: 0
+			}),
+			number("max", s.max, {}, {
+				span: 6,
+				default: 100
+			}),
+			number("step", s.step, { min: 0 }, { default: 1 }),
+			sw("range", s.range)
+		];
+		case "rate": return [number("max", s.count, {
+			min: 1,
+			max: 10,
+			precision: 0
+		}, { default: 5 }), sw("allowHalf", s.allowHalf)];
+		case "date-picker": return [
+			field("select", "type", s.dateType, {
+				default: "date",
+				props: { options: choices(messages, "dateType", [
+					"date",
+					"week",
+					"month",
+					"quarter",
+					"year",
+					"datetime"
+				]) }
+			}),
+			sw("range", s.range, { visibleWhen: "values.type != 'week'" }),
+			placeholder,
+			clearable
+		];
+		case "time-picker": return [
+			sw("range", s.range),
+			placeholder,
+			clearable
+		];
+		case "color-picker": return [sw("showAlpha", s.showAlpha), clearable];
+		case "cascader":
+		case "tree-select": return [
+			placeholder,
+			multiple,
+			filterable,
+			clearable
+		];
+		case "input-tag": return [
+			placeholder,
+			number("max", s.maxTags, {
+				min: 1,
+				precision: 0
+			}),
+			clearable
+		];
+		case "input-otp": return [number("length", s.length, {
+			min: 1,
+			max: 12,
+			precision: 0
+		}, { default: 6 }), sw("mask", s.mask)];
+		case "upload": return [
+			text("accept", s.accept, { props: { placeholder: "image/*, .pdf" } }),
+			multiple,
+			number("maxCount", s.maxCount, {
+				min: 1,
+				precision: 0
+			}),
+			sw("dropzone", s.dropzone)
+		];
+		case "text": return [field("textarea", "content", s.content, { props: { autosize: {
+			minRows: 2,
+			maxRows: 8
+		} } }), segmented(messages, "variant", [
+			"title",
+			"body",
+			"caption"
+		], "body")];
+		case "divider": return [text("text", s.content), sw("dashed", s.dashed)];
+		case "alert": return [
+			field("select", "tone", s.tone, {
+				default: "neutral",
+				props: { options: choices(messages, "tone", [
+					"neutral",
+					"primary",
+					"success",
+					"warning",
+					"danger"
+				]) }
+			}),
+			text("title", s.title),
+			field("textarea", "content", s.content, { props: { autosize: {
+				minRows: 2,
+				maxRows: 8
+			} } })
+		];
+		default: return [];
+	}
+}
+/** The builder's own type for a node's width: a number of columns, or one per breakpoint. */
+var SPAN_TYPE = "dou-builder-span";
+/** The builder's own type for expression text, with completions and problems. */
+var EXPRESSION_TYPE = "dou-builder-expression";
+/** The builder's own type for a condition, edited as rows or as text. */
+var CONDITION_TYPE = "dou-builder-condition";
+function spanSetting(context) {
+	const node = field(SPAN_TYPE, "span", "", {
+		default: context.columns,
+		props: { columns: context.columns }
+	});
+	delete node.label;
+	return node;
+}
+/** The settings of a node itself, besides its type's: name, label, width and so on. */
+function nodeSettings(node, context) {
+	const s = context.messages.settings;
+	const span = spanSetting(context);
+	const name = text("name", context.inItem ? s.itemName : s.name, {
+		help: context.inItem ? s.itemNameHelp : s.nameHelp,
+		props: { clearable: false }
+	});
+	const columns = number("columns", s.columns, {
+		min: 1,
+		max: 24,
+		precision: 0,
+		placeholder: String(context.columns)
+	});
+	switch (node.type) {
+		case "section": return [
+			text("title", s.title),
+			field("textarea", "description", s.description, { props: { autosize: {
+				minRows: 1,
+				maxRows: 6
+			} } }),
+			sw("bordered", s.bordered),
+			columns,
+			span
+		];
+		case "page": return [
+			text("title", s.title),
+			field("textarea", "description", s.description, { props: { autosize: {
+				minRows: 1,
+				maxRows: 6
+			} } }),
+			columns
+		];
+		case "tabs":
+		case "steps": return [span];
+		case "list": return [
+			name,
+			text("label", s.label),
+			text("help", s.help),
+			span,
+			number("min", s.minItems, {
+				min: 0,
+				precision: 0
+			}, { span: 6 }),
+			number("max", s.maxItems, {
+				min: 1,
+				precision: 0
+			}, { span: 6 }),
+			text("addText", s.addText),
+			sw("sortable", s.sortable, { default: true }),
+			sw("required", s.required),
+			columns
+		];
+		default: {
+			const type = context.type;
+			if (type?.kind === "display") return [span];
+			const own = node;
+			const result = [
+				name,
+				text("label", s.label),
+				text("help", s.help),
+				span
+			];
+			if (type && own.type !== "upload") result.push({
+				id: "setting-default",
+				type: own.type,
+				name: "default",
+				label: s.default,
+				props: own.props
+			});
+			result.push(sw("required", s.required));
+			return result;
+		}
+	}
+}
+/** The settings of the document itself. */
+function documentSettings(messages) {
+	const s = messages.settings;
+	const horizontal = "values.layout == 'horizontal'";
+	return [
+		segmented(messages, "layout", [
+			"vertical",
+			"horizontal",
+			"inline"
+		], "vertical"),
+		segmented(messages, "labelAlign", ["start", "end"], "start", { visibleWhen: horizontal }),
+		number("labelWidth", s.labelWidth, {
+			min: 40,
+			max: 400,
+			step: 8,
+			precision: 0
+		}, {
+			default: 96,
+			visibleWhen: horizontal
+		}),
+		segmented(messages, "size", [
+			"sm",
+			"md",
+			"lg"
+		], "md"),
+		field("radio-group", "requiredMark", s.requiredMark, {
+			default: true,
+			props: { options: choices(messages, "requiredMark", [
+				true,
+				"optional",
+				false
+			]) }
+		}),
+		number("columns", s.columns, {
+			min: 1,
+			max: 24,
+			precision: 0
+		}, { default: 12 })
+	];
+}
+/** A settings form: the nodes in a vertical, compact document. */
+function settingsDocument(nodes) {
+	return {
+		version: 1,
+		size: "sm",
+		columns: 12,
+		requiredMark: false,
+		nodes
+	};
+}
+export { CONDITION_TYPE, EXPRESSION_TYPE, SPAN_TYPE, builtinSettings, choices, containerTypes, documentSettings, field, groupOf, iconOf, labelOf, nodeSettings, nodeTitle, number, paletteGroups, segmented, settingsDocument, text };
+
+//# sourceMappingURL=settings.js.map

package/dist/builder/settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.js","names":[],"sources":["../../src/builder/settings.ts"],"sourcesContent":["import {\n  CalendarIcon,\n  CheckSquareIcon,\n  ChevronDownSquareIcon,\n  ClockIcon,\n  HashIcon,\n  InfoSquareIcon,\n  LayoutIcon,\n  LayoutListIcon,\n  ListChecksIcon,\n  ListTreeIcon,\n  OtpIcon,\n  PaletteIcon,\n  RadioIcon,\n  SegmentedControlIcon,\n  SeparatorHorizontalIcon,\n  SlidersIcon,\n  SquareDashedIcon,\n  StarIcon,\n  StepsIcon,\n  TabsIcon,\n  TagsIcon,\n  TextAlignLeftIcon,\n  TextCursorIcon,\n  ToggleRightIcon,\n  TreeStructureIcon,\n  TypeIcon,\n  UploadIcon,\n} from '@dou-ui/icons'\nimport { markRaw } from 'vue'\nimport type { Component } from 'vue'\nimport type { FormDocument, FormFieldNode, FormListNode, FormNode } from '../core/types'\nimport type { FormFieldType } from '../fields/define'\nimport type { FormBuilderMessages } from './locale'\n\n/** The palette groups in the order they are listed; groups of other names follow. */\nexport const paletteGroups = ['input', 'choice', 'more', 'display', 'layout']\n\nconst raw = (icon: Component) => markRaw(icon)\n\n/** Icons and groups of the built-in types, kept out of the renderer's entry. */\nconst builtinLooks: Record<string, { icon: Component; group: string }> = {\n  input: { icon: raw(TextCursorIcon), group: 'input' },\n  textarea: { icon: raw(TextAlignLeftIcon), group: 'input' },\n  'input-number': { icon: raw(HashIcon), group: 'input' },\n  'input-tag': { icon: raw(TagsIcon), group: 'input' },\n  'input-otp': { icon: raw(OtpIcon), group: 'input' },\n  select: { icon: raw(ChevronDownSquareIcon), group: 'choice' },\n  'radio-group': { icon: raw(RadioIcon), group: 'choice' },\n  'checkbox-group': { icon: raw(ListChecksIcon), group: 'choice' },\n  checkbox: { icon: raw(CheckSquareIcon), group: 'choice' },\n  switch: { icon: raw(ToggleRightIcon), group: 'choice' },\n  'segmented-control': { icon: raw(SegmentedControlIcon), group: 'choice' },\n  cascader: { icon: raw(ListTreeIcon), group: 'choice' },\n  'tree-select': { icon: raw(TreeStructureIcon), group: 'choice' },\n  slider: { icon: raw(SlidersIcon), group: 'more' },\n  rate: { icon: raw(StarIcon), group: 'more' },\n  'date-picker': { icon: raw(CalendarIcon), group: 'more' },\n  'time-picker': { icon: raw(ClockIcon), group: 'more' },\n  'color-picker': { icon: raw(PaletteIcon), group: 'more' },\n  upload: { icon: raw(UploadIcon), group: 'more' },\n  text: { icon: raw(TypeIcon), group: 'display' },\n  divider: { icon: raw(SeparatorHorizontalIcon), group: 'display' },\n  alert: { icon: raw(InfoSquareIcon), group: 'display' },\n  section: { icon: raw(SquareDashedIcon), group: 'layout' },\n  tabs: { icon: raw(TabsIcon), group: 'layout' },\n  steps: { icon: raw(StepsIcon), group: 'layout' },\n  list: { icon: raw(LayoutListIcon), group: 'layout' },\n  page: { icon: raw(LayoutIcon), group: 'layout' },\n}\n\n/** The containers the palette offers, after the field types. */\nexport const containerTypes = ['section', 'tabs', 'steps', 'list']\n\n/** A type's icon: its own, else the built-in one, else a plain box. */\nexport function iconOf(type: string, spec?: FormFieldType): Component {\n  return spec?.icon ?? builtinLooks[type]?.icon ?? builtinLooks.section!.icon\n}\n\nexport function groupOf(type: string, spec?: FormFieldType): string {\n  return spec?.group ?? builtinLooks[type]?.group ?? 'more'\n}\n\n/** A type's name for people: its own `label`, else the locale's. */\nexport function labelOf(\n  type: string,\n  spec: FormFieldType | undefined,\n  messages: FormBuilderMessages,\n) {\n  return spec?.label ?? messages.types[type] ?? type\n}\n\n/** What a node is called in the outline and the inspector's heading. */\nexport function nodeTitle(\n  node: FormNode,\n  fields: ReadonlyMap<string, FormFieldType>,\n  messages: FormBuilderMessages,\n): string {\n  const record = node as unknown as Record<string, unknown>\n  const own = (record.label ?? record.title) as string | undefined\n  if (own) return own\n  if ('name' in node && node.name) return node.name\n  return labelOf(node.type, fields.get(node.type), messages)\n}\n\n// Settings ----------------------------------------------------------------------\n\ntype Setting = Record<string, unknown>\n\nexport const field = (type: string, name: string, label: string, extra: Setting = {}): FormNode =>\n  ({ id: `setting-${name}`, type, name, label, ...extra }) as FormFieldNode\n\nconst sw = (name: string, label: string, extra: Setting = {}) => field('switch', name, label, extra)\nexport const text = (name: string, label: string, extra: Setting = {}) =>\n  field('input', name, label, { ...extra, props: { clearable: true, ...(extra.props as Setting) } })\nexport const number = (name: string, label: string, props: Setting = {}, extra: Setting = {}) =>\n  field('input-number', name, label, { ...extra, props: { controls: false, ...props } })\n\nexport function choices(\n  messages: FormBuilderMessages,\n  key: string,\n  values: readonly (string | boolean)[],\n): { value: string | boolean; label: string }[] {\n  const labels = messages.choices[key] ?? {}\n  return values.map((value) => ({ value, label: labels[String(value)] ?? String(value) }))\n}\n\nexport const segmented = (\n  messages: FormBuilderMessages,\n  name: string,\n  values: readonly string[],\n  fallback: string,\n  extra: Setting = {},\n  key = name,\n) =>\n  field('segmented-control', name, messages.settings[key] ?? name, {\n    default: fallback,\n    props: { options: choices(messages, key, values), block: true },\n    ...extra,\n  })\n\nfunction optionList(messages: FormBuilderMessages, name = 'options'): FormListNode {\n  const s = messages.settings\n  return {\n    id: `setting-${name}`,\n    type: 'list',\n    name,\n    label: s.options,\n    columns: 12,\n    children: [\n      field('input', 'label', s.optionLabel!, { span: 6 }),\n      field('input', 'value', s.optionValue!, { span: 6 }),\n    ],\n  }\n}\n\n/** Settings of the built-in types, edited in a node's `props`. */\nexport function builtinSettings(type: string, messages: FormBuilderMessages): FormNode[] {\n  const s = messages.settings as Record<string, string>\n  const placeholder = text('placeholder', s.placeholder!)\n  const clearable = sw('clearable', s.clearable!)\n  const multiple = sw('multiple', s.multiple!)\n  const filterable = sw('filterable', s.filterable!)\n  const options = optionList(messages)\n  const direction = segmented(messages, 'direction', ['horizontal', 'vertical'], 'horizontal')\n  switch (type) {\n    case 'input':\n      return [\n        placeholder,\n        clearable,\n        number('maxlength', s.maxlength!, { min: 1 }),\n        sw('showCount', s.showCount!),\n      ]\n    case 'textarea':\n      return [\n        placeholder,\n        number('rows', s.rows!, { min: 1, placeholder: '3' }),\n        sw('autosize', s.autosize!),\n        number('maxlength', s.maxlength!, { min: 1 }),\n        sw('showCount', s.showCount!),\n      ]\n    case 'input-number':\n      return [\n        placeholder,\n        number('min', s.min!, {}, { span: 6 }),\n        number('max', s.max!, {}, { span: 6 }),\n        number('step', s.step!, { min: 0, placeholder: '1' }, { span: 6 }),\n        number('precision', s.precision!, { min: 0, precision: 0 }, { span: 6 }),\n        sw('controls', s.controls!, { default: true }),\n      ]\n    case 'select':\n      return [options, placeholder, multiple, filterable, clearable]\n    case 'radio-group':\n    case 'checkbox-group':\n      return [options, direction]\n    case 'segmented-control':\n      return [options]\n    case 'checkbox':\n      return [text('text', s.text!)]\n    case 'slider':\n      return [\n        number('min', s.min!, {}, { span: 6, default: 0 }),\n        number('max', s.max!, {}, { span: 6, default: 100 }),\n        number('step', s.step!, { min: 0 }, { default: 1 }),\n        sw('range', s.range!),\n      ]\n    case 'rate':\n      return [\n        number('max', s.count!, { min: 1, max: 10, precision: 0 }, { default: 5 }),\n        sw('allowHalf', s.allowHalf!),\n      ]\n    case 'date-picker':\n      return [\n        field('select', 'type', s.dateType!, {\n          default: 'date',\n          props: {\n            options: choices(messages, 'dateType', [\n              'date',\n              'week',\n              'month',\n              'quarter',\n              'year',\n              'datetime',\n            ]),\n          },\n        }),\n        sw('range', s.range!, { visibleWhen: \"values.type != 'week'\" }),\n        placeholder,\n        clearable,\n      ]\n    case 'time-picker':\n      return [sw('range', s.range!), placeholder, clearable]\n    case 'color-picker':\n      return [sw('showAlpha', s.showAlpha!), clearable]\n    case 'cascader':\n    case 'tree-select':\n      return [placeholder, multiple, filterable, clearable]\n    case 'input-tag':\n      return [placeholder, number('max', s.maxTags!, { min: 1, precision: 0 }), clearable]\n    case 'input-otp':\n      return [\n        number('length', s.length!, { min: 1, max: 12, precision: 0 }, { default: 6 }),\n        sw('mask', s.mask!),\n      ]\n    case 'upload':\n      return [\n        text('accept', s.accept!, { props: { placeholder: 'image/*, .pdf' } }),\n        multiple,\n        number('maxCount', s.maxCount!, { min: 1, precision: 0 }),\n        sw('dropzone', s.dropzone!),\n      ]\n    case 'text':\n      return [\n        field('textarea', 'content', s.content!, {\n          props: { autosize: { minRows: 2, maxRows: 8 } },\n        }),\n        segmented(messages, 'variant', ['title', 'body', 'caption'], 'body'),\n      ]\n    case 'divider':\n      return [text('text', s.content!), sw('dashed', s.dashed!)]\n    case 'alert':\n      return [\n        field('select', 'tone', s.tone!, {\n          default: 'neutral',\n          props: {\n            options: choices(messages, 'tone', [\n              'neutral',\n              'primary',\n              'success',\n              'warning',\n              'danger',\n            ]),\n          },\n        }),\n        text('title', s.title!),\n        field('textarea', 'content', s.content!, {\n          props: { autosize: { minRows: 2, maxRows: 8 } },\n        }),\n      ]\n    default:\n      return []\n  }\n}\n\n/** What the node-level settings of a node depend on. */\nexport interface NodeSettingsContext {\n  messages: FormBuilderMessages\n  /** Columns of the grid the node sits on. */\n  columns: number\n  /** Whether the node sits in a list item, so its name is a key of the item. */\n  inItem: boolean\n  /** The node's type, for a field. */\n  type?: FormFieldType\n}\n\n/** The builder's own type for a node's width: a number of columns, or one per breakpoint. */\nexport const SPAN_TYPE = 'dou-builder-span'\n/** The builder's own type for expression text, with completions and problems. */\nexport const EXPRESSION_TYPE = 'dou-builder-expression'\n/** The builder's own type for a condition, edited as rows or as text. */\nexport const CONDITION_TYPE = 'dou-builder-condition'\n\nfunction spanSetting(context: NodeSettingsContext): FormNode {\n  // The field draws its own label, with the \"by form width\" switch on the same row.\n  const node = field(SPAN_TYPE, 'span', '', {\n    default: context.columns,\n    props: { columns: context.columns },\n  }) as FormFieldNode\n  delete node.label\n  return node\n}\n\n/** The settings of a node itself, besides its type's: name, label, width and so on. */\nexport function nodeSettings(node: FormNode, context: NodeSettingsContext): FormNode[] {\n  const s = context.messages.settings as Record<string, string>\n  const span = spanSetting(context)\n  const name = text('name', context.inItem ? s.itemName! : s.name!, {\n    help: context.inItem ? s.itemNameHelp : s.nameHelp,\n    props: { clearable: false },\n  })\n  const columns = number('columns', s.columns!, {\n    min: 1,\n    max: 24,\n    precision: 0,\n    placeholder: String(context.columns),\n  })\n  switch (node.type) {\n    case 'section':\n      return [\n        text('title', s.title!),\n        field('textarea', 'description', s.description!, {\n          props: { autosize: { minRows: 1, maxRows: 6 } },\n        }),\n        sw('bordered', s.bordered!),\n        columns,\n        span,\n      ]\n    case 'page':\n      return [\n        text('title', s.title!),\n        field('textarea', 'description', s.description!, {\n          props: { autosize: { minRows: 1, maxRows: 6 } },\n        }),\n        columns,\n      ]\n    case 'tabs':\n    case 'steps':\n      return [span]\n    case 'list':\n      return [\n        name,\n        text('label', s.label!),\n        text('help', s.help!),\n        span,\n        number('min', s.minItems!, { min: 0, precision: 0 }, { span: 6 }),\n        number('max', s.maxItems!, { min: 1, precision: 0 }, { span: 6 }),\n        text('addText', s.addText!),\n        sw('sortable', s.sortable!, { default: true }),\n        sw('required', s.required!),\n        columns,\n      ]\n    default: {\n      const type = context.type\n      if (type?.kind === 'display') return [span]\n      const own = node as FormFieldNode\n      const result: FormNode[] = [name, text('label', s.label!), text('help', s.help!), span]\n      if (type && own.type !== 'upload')\n        result.push({\n          id: 'setting-default',\n          type: own.type,\n          name: 'default',\n          label: s.default,\n          props: own.props,\n        } as FormFieldNode)\n      result.push(sw('required', s.required!))\n      return result\n    }\n  }\n}\n\n/** The settings of the document itself. */\nexport function documentSettings(messages: FormBuilderMessages): FormNode[] {\n  const s = messages.settings as Record<string, string>\n  const horizontal = \"values.layout == 'horizontal'\"\n  return [\n    segmented(messages, 'layout', ['vertical', 'horizontal', 'inline'], 'vertical'),\n    segmented(messages, 'labelAlign', ['start', 'end'], 'start', { visibleWhen: horizontal }),\n    number(\n      'labelWidth',\n      s.labelWidth!,\n      { min: 40, max: 400, step: 8, precision: 0 },\n      { default: 96, visibleWhen: horizontal },\n    ),\n    segmented(messages, 'size', ['sm', 'md', 'lg'], 'md'),\n    field('radio-group', 'requiredMark', s.requiredMark!, {\n      default: true,\n      props: { options: choices(messages, 'requiredMark', [true, 'optional', false]) },\n    }),\n    number('columns', s.columns!, { min: 1, max: 24, precision: 0 }, { default: 12 }),\n  ]\n}\n\n/** A settings form: the nodes in a vertical, compact document. */\nexport function settingsDocument(nodes: FormNode[]): FormDocument {\n  return { version: 1, size: 'sm', columns: 12, requiredMark: false, nodes }\n}\n"],"mappings":"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"}

package/dist/builder/span-field.js

@@ -0,0 +1,104 @@
+import { defineFormField } from "../fields/define.js";
+import { SPAN_TYPE } from "./settings.js";
+import { useBuilderState } from "./context.js";
+import { DouCheckbox, DouInputNumber } from "dou-ui";
+import { computed, defineComponent, h, useId } from "vue";
+// src/builder/span-field.ts
+var breakpoints = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+/**
+* A node's width in columns: one number, or one per form width when
+* "by form width" is on. A width left empty takes the next narrower one.
+*/
+var SpanInput = defineComponent({
+	name: "DouFormBuilderSpan",
+	props: {
+		modelValue: {
+			type: [Number, Object],
+			default: void 0
+		},
+		columns: {
+			type: Number,
+			default: 12
+		},
+		disabled: Boolean
+	},
+	emits: { "update:modelValue": (_value) => true },
+	setup(props, { emit }) {
+		const state = useBuilderState();
+		const labelId = `dou-form-builder-span-${useId()}`;
+		const responsive = computed(() => typeof props.modelValue === "object" && props.modelValue !== null);
+		const whole = computed(() => {
+			const value = props.modelValue;
+			if (typeof value === "number") return value;
+			if (value && typeof value === "object") return value.base ?? props.columns;
+			return props.columns;
+		});
+		const clamp = (value) => Math.min(Math.max(1, Math.round(value)), props.columns);
+		function setOne(value) {
+			emit("update:modelValue", value === null ? props.columns : clamp(value));
+		}
+		function setAt(key, value) {
+			const current = { ...props.modelValue };
+			if (value === null) delete current[key];
+			else current[key] = clamp(value);
+			emit("update:modelValue", current);
+		}
+		function toggle(on) {
+			emit("update:modelValue", on ? { base: whole.value } : whole.value);
+		}
+		return () => {
+			const messages = state.messages;
+			const choices = messages.choices.breakpoint ?? {};
+			const input = (value, set, label, placeholder) => h(DouInputNumber, {
+				modelValue: value ?? null,
+				min: 1,
+				max: props.columns,
+				precision: 0,
+				size: "sm",
+				controls: false,
+				disabled: props.disabled,
+				placeholder,
+				"aria-label": label,
+				"onUpdate:modelValue": set
+			});
+			const rows = responsive.value ? breakpoints.map((key, index) => {
+				const value = props.modelValue[key];
+				let inherited;
+				for (let at = index - 1; at >= 0 && inherited === void 0; at--) inherited = props.modelValue[breakpoints[at]];
+				return h("label", {
+					key,
+					class: "dou-form-builder__span-row"
+				}, [h("span", { class: "dou-form-builder__span-label" }, choices[key] ?? key), input(value, (next) => setAt(key, next), choices[key] ?? key, String(inherited ?? props.columns))]);
+			}) : [h("div", { class: "dou-form-builder__span-row" }, [input(whole.value, setOne, messages.settings.span ?? "span"), h("span", { class: "dou-form-builder__span-label" }, `/ ${props.columns}`)])];
+			return h("div", {
+				class: "dou-form-builder__span",
+				role: "group",
+				"aria-labelledby": labelId
+			}, [h("div", { class: "dou-form-builder__span-head" }, [h("div", {
+				id: labelId,
+				class: "dou-form-item__label"
+			}, h("span", { class: "dou-form-item__label-text" }, messages.settings.span)), h(DouCheckbox, {
+				modelValue: responsive.value,
+				disabled: props.disabled,
+				size: "sm",
+				class: "dou-form-builder__span-toggle",
+				"onUpdate:modelValue": (on) => toggle(on === true)
+			}, () => messages.settings.spanResponsive)]), ...rows]);
+		};
+	}
+});
+/** The width setting of the inspector, a field type of the builder's own. */
+var spanField = defineFormField({
+	type: SPAN_TYPE,
+	component: SpanInput,
+	empty: (props) => props.columns ?? 12
+});
+export { spanField };
+
+//# sourceMappingURL=span-field.js.map

package/dist/builder/span-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"span-field.js","names":[],"sources":["../../src/builder/span-field.ts"],"sourcesContent":["import { computed, defineComponent, h, useId } from 'vue'\nimport type { PropType } from 'vue'\nimport { DouCheckbox, DouInputNumber } from 'dou-ui'\nimport type { FormResponsive } from '../core/types'\nimport { defineFormField } from '../fields/define'\nimport { useBuilderState } from './context'\nimport { SPAN_TYPE } from './settings'\n\nconst breakpoints = ['base', 'sm', 'md', 'lg', 'xl'] as const\ntype Breakpoint = (typeof breakpoints)[number]\ntype Span = FormResponsive<number>\n\n/**\n * A node's width in columns: one number, or one per form width when\n * \"by form width\" is on. A width left empty takes the next narrower one.\n */\nconst SpanInput = defineComponent({\n  name: 'DouFormBuilderSpan',\n  props: {\n    modelValue: { type: [Number, Object] as PropType<Span | null>, default: undefined },\n    columns: { type: Number, default: 12 },\n    disabled: Boolean,\n  },\n  emits: { 'update:modelValue': (_value: Span) => true },\n  setup(props, { emit }) {\n    const state = useBuilderState()\n    const labelId = `dou-form-builder-span-${useId()}`\n    const responsive = computed(\n      () => typeof props.modelValue === 'object' && props.modelValue !== null,\n    )\n    const whole = computed(() => {\n      const value = props.modelValue\n      if (typeof value === 'number') return value\n      if (value && typeof value === 'object') return value.base ?? props.columns\n      return props.columns\n    })\n    const clamp = (value: number) => Math.min(Math.max(1, Math.round(value)), props.columns)\n\n    function setOne(value: number | null) {\n      emit('update:modelValue', value === null ? props.columns : clamp(value))\n    }\n    function setAt(key: Breakpoint, value: number | null) {\n      const current = { ...(props.modelValue as Partial<Record<Breakpoint, number>>) }\n      if (value === null) delete current[key]\n      else current[key] = clamp(value)\n      emit('update:modelValue', current)\n    }\n    function toggle(on: boolean) {\n      emit('update:modelValue', on ? { base: whole.value } : whole.value)\n    }\n\n    return () => {\n      const messages = state.messages\n      const choices = messages.choices.breakpoint ?? {}\n      const input = (\n        value: number | null | undefined,\n        set: (value: number | null) => void,\n        label: string,\n        placeholder?: string,\n      ) =>\n        h(DouInputNumber, {\n          modelValue: value ?? null,\n          min: 1,\n          max: props.columns,\n          precision: 0,\n          size: 'sm',\n          controls: false,\n          disabled: props.disabled,\n          placeholder,\n          'aria-label': label,\n          'onUpdate:modelValue': set,\n        })\n      const rows = responsive.value\n        ? breakpoints.map((key, index) => {\n            const value = (props.modelValue as Partial<Record<Breakpoint, number>>)[key]\n            // An empty width shows the one it takes over from.\n            let inherited: number | undefined\n            for (let at = index - 1; at >= 0 && inherited === undefined; at--)\n              inherited = (props.modelValue as Partial<Record<Breakpoint, number>>)[\n                breakpoints[at]!\n              ]\n            return h('label', { key, class: 'dou-form-builder__span-row' }, [\n              h('span', { class: 'dou-form-builder__span-label' }, choices[key] ?? key),\n              input(\n                value,\n                (next) => setAt(key, next),\n                choices[key] ?? key,\n                String(inherited ?? props.columns),\n              ),\n            ])\n          })\n        : [\n            h('div', { class: 'dou-form-builder__span-row' }, [\n              input(whole.value, setOne, messages.settings.span ?? 'span'),\n              h('span', { class: 'dou-form-builder__span-label' }, `/ ${props.columns}`),\n            ]),\n          ]\n      return h(\n        'div',\n        { class: 'dou-form-builder__span', role: 'group', 'aria-labelledby': labelId },\n        [\n          h('div', { class: 'dou-form-builder__span-head' }, [\n            h(\n              'div',\n              { id: labelId, class: 'dou-form-item__label' },\n              h('span', { class: 'dou-form-item__label-text' }, messages.settings.span),\n            ),\n            h(\n              DouCheckbox,\n              {\n                modelValue: responsive.value,\n                disabled: props.disabled,\n                size: 'sm',\n                class: 'dou-form-builder__span-toggle',\n                'onUpdate:modelValue': (on: unknown) => toggle(on === true),\n              },\n              () => messages.settings.spanResponsive,\n            ),\n          ]),\n          ...rows,\n        ],\n      )\n    }\n  },\n})\n\n/** The width setting of the inspector, a field type of the builder's own. */\nexport const spanField = defineFormField({\n  type: SPAN_TYPE,\n  component: SpanInput,\n  empty: (props: { columns?: number }) => props.columns ?? 12,\n})\n"],"mappings":"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"}

package/dist/code/expression-input.js

@@ -0,0 +1,6 @@
+import expression_input_vue_vue_type_script_setup_true_lang_default from "./expression-input.vue_vue_type_script_setup_true_lang.js";
+// src/code/expression-input.vue
+var expression_input_default = expression_input_vue_vue_type_script_setup_true_lang_default;
+export { expression_input_default as default };
+
+//# sourceMappingURL=expression-input.js.map

package/dist/code/expression-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expression-input.js","names":["_sfc_main"],"sources":["../../src/code/expression-input.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouCodeInput } from '@dou-ui/code'\nimport { computed, useId } from 'vue'\nimport { builtinFunctions, checkExpression } from '../core/expression'\nimport { formatMessage } from '../locale'\nimport { useBuilderState } from '../builder/context'\nimport { expressionCodeExtension } from './extension'\nimport type { ExpressionName } from './extension'\nimport { formExpression } from './language'\n\n/**\n * The builder's expression box as a code input: colored, with completions\n * of field paths and functions, parameter hints, and problems underlined\n * as well as written under it.\n */\ndefineOptions({ name: 'DouFormBuilderCodeExpression', inheritAttrs: false })\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | null\n    names?: ExpressionName[]\n    itemNames?: ExpressionName[]\n    readsValue?: boolean\n    placeholder?: string\n    disabled?: boolean\n    /** Shown and selectable, but not changed; also when the form around is read-only. */\n    readonly?: boolean\n  }>(),\n  { modelValue: '', names: () => [], itemNames: undefined, placeholder: undefined },\n)\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\nconst state = useBuilderState()\nconst errorId = `dou-form-builder-expression-${useId()}`\nconst words = computed(() => state.messages.expression)\n\nconst problemMessage = (problem: { code: string; message: string; text: string }) =>\n  formatMessage(words.value.problems[problem.code] ?? problem.message, { text: problem.text })\n\nconst extensions = [\n  expressionCodeExtension({\n    names: () => props.names,\n    itemNames: () => props.itemNames,\n    readsValue: () => !!props.readsValue,\n    functions: () => state.functionNames.value,\n    functionInfo: () => words.value.functions,\n    labels: () => words.value,\n    problemMessage,\n  }),\n]\n\nconst text = computed(() => props.modelValue ?? '')\n\n// The first problem in words too, for screen readers and at a glance.\nconst problem = computed(() => {\n  if (!text.value.trim()) return undefined\n  const found = checkExpression(text.value, {\n    fields: props.names.map((name) => name.path),\n    itemFields: props.itemNames ? props.itemNames.map((name) => name.path) : [],\n    functions: [...new Set([...Object.keys(builtinFunctions), ...state.functionNames.value])],\n  })[0]\n  return found && problemMessage(found)\n})\n</script>\n\n<template>\n  <div class=\"dou-form-builder__expression\">\n    <DouCodeInput\n      v-bind=\"$attrs\"\n      :model-value=\"text\"\n      :language=\"formExpression\"\n      :extensions=\"extensions\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"readonly\"\n      :invalid=\"!!problem\"\n      :aria-describedby=\"problem ? errorId : undefined\"\n      multiline\n      :autosize=\"{ maxRows: 4 }\"\n      size=\"sm\"\n      class=\"dou-form-builder__expression-input\"\n      @update:model-value=\"emit('update:modelValue', $event)\"\n    />\n    <div v-if=\"problem\" :id=\"errorId\" class=\"dou-form-builder__expression-error\">\n      {{ problem }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}