@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/input/ConditionBuilder.d.ts

@@ -0,0 +1,55 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+import type { TextSize } from '../utils/style/typography';
+import { type Condition, type ConditionField } from './condition';
+/** 组的满足方式 */
+export interface ConditionModes {
+    /** 全部满足：{ all } */
+    all: unknown;
+    /** 任一满足：{ any } */
+    any: unknown;
+    /** 都不满足：{ not: { any } } */
+    none: unknown;
+    /** 不全满足：{ not: { all } } */
+    notAll: unknown;
+}
+/** 组的满足方式 */
+export type ConditionMode = keyof ConditionModes;
+/** 未声明的属性落到外层 div（role="group"）上：aria-label 写条件管什么 */
+export interface ConditionBuilderProps extends PartProps<'div', 'role'> {
+    /** 能参与比较的字段 */
+    fields: readonly ConditionField[];
+    /** 条件：父级写 _value={condition} 双向绑定；没有填完整的比较时是 null */
+    _value?: Condition | null;
+    /** 组最多嵌套几层，默认 2（根组里还能加一层组）；1 时不能加组 */
+    maxDepth?: number;
+    /** 控件与按钮的字号档位，不写时继承 */
+    size?: TextSize;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 每个组的部件属性 */
+    propsGroup?: PartProps<'div'>;
+    /** 每条比较的部件属性 */
+    propsRule?: PartProps<'div'>;
+}
+/** ConditionBuilder 的样式：root、group、nested、header、rows、row、joiner、rule、field、op、value、range、actions、empty */
+export declare const conditionBuilderStyles: Readonly<{
+    actions: css.CompiledStyles;
+    actionsRoot: css.CompiledStyles;
+    empty: css.CompiledStyles;
+    field: css.CompiledStyles;
+    group: css.CompiledStyles;
+    header: css.CompiledStyles;
+    joiner: css.CompiledStyles;
+    nested: css.CompiledStyles;
+    op: css.CompiledStyles;
+    range: css.CompiledStyles;
+    removeGroup: css.CompiledStyles;
+    root: css.CompiledStyles;
+    row: css.CompiledStyles;
+    rows: css.CompiledStyles;
+    rule: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** 条件构造器 */
+export declare const ConditionBuilder: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ConditionBuilderProps>;

package/dist/input/ConditionBuilder.js

@@ -0,0 +1,471 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { Button } from "../base/Button.js";
+import { IconButton } from "../base/IconButton.js";
+import { Small } from "../base/Text.js";
+import { NumberField } from "./NumberField.js";
+import { TextField } from "./TextField.js";
+import { Select } from "./Select.js";
+import { DatePicker } from "../date/DatePicker.js";
+import { DateRangePicker } from "../date/DateRangePicker.js";
+import { isRuleComplete, operatorLabel, operatorsOf, toText, valueShape } from "./condition.js";
+import { NumberRangeField } from "./NumberRangeField.js";
+import { TagsInput } from "./TagsInput.js";
+import { createVNode, mergeProps, nextTick, ref, watch } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Plus, Trash2, X } from "@lucide/icons";
+//#region src/input/ConditionBuilder.tsx
+/**
+* 条件构造器：编辑 all / any / not 加比较的条件树（Condition，见 condition.ts）。每条是“字段 · 比较方式 · 值”，
+* 比较方式随字段类型、值的输入随字段类型与比较方式；组的表头选满足方式（全部、任一、都不、不全），组里还能再加组。
+*
+*   const fields: ConditionField[] = [
+*     { name: 'amount', label: '金额', type: 'number' },
+*     { name: 'category', label: '品类', type: 'select', options: [{ value: 'steel', label: '钢材' }, …] },
+*     { name: 'owner', label: '经办人', type: 'select', input: ({ value, onChange, label }) => <UserPicker … /> },
+*   ];
+*   let condition = _state<Condition | null>(null);
+*   <ConditionBuilder fields={fields} _value={condition} aria-label="审批条件" />
+*
+* 写回的是只含填完整的比较的条件：没选字段、没填值的那几条留在界面上，不进 _value；一条也没有时是 null。
+* 根总是一个组（{ all }、{ any }，都不满足是 { not: { any } }，不全满足是 { not: { all } }）；
+* 传进来的单条比较、嵌套的 not 按同样的规则读成组。父级改了 _value（与上次写回的不同）时整棵重读。
+*
+* 读屏：根与每个嵌套的组是 role="group"，每条比较也是一组（“条件 2”），三个控件各有名称（“字段”“比较方式”“金额的值”）。
+* 加了一条之后焦点落到它的字段上；删掉之后落到组的“添加条件”上。
+* 部件：Root（div）、Group（每个组）、Rule（每条比较）。
+*/
+/** 组的满足方式 */
+/** 组的满足方式 */
+/** 未声明的属性落到外层 div（role="group"）上：aria-label 写条件管什么 */
+var MODES = [
+	"all",
+	"any",
+	"none",
+	"notAll"
+];
+/** ConditionBuilder 的样式：root、group、nested、header、rows、row、joiner、rule、field、op、value、range、actions、empty */
+var conditionBuilderStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm",
+		minWidth: 0
+	},
+	group: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm",
+		minWidth: 0
+	},
+	nested: {
+		flexGrow: 1,
+		padding: "_sm",
+		backgroundColor: "_surfaceMuted",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderMuted",
+		borderRadius: "_md"
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm"
+	},
+	rows: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm"
+	},
+	row: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: "_sm",
+		minWidth: 0
+	},
+	joiner: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		flexShrink: 0,
+		width: "2em",
+		minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		color: "_textMuted"
+	},
+	rule: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "flex-start",
+		gap: "_sm",
+		flexGrow: 1,
+		minWidth: 0
+	},
+	field: {
+		flexGrow: 1,
+		flexShrink: 1,
+		flexBasis: "9rem",
+		minWidth: "7rem",
+		maxWidth: "14rem"
+	},
+	op: {
+		flexGrow: 0,
+		flexShrink: 1,
+		flexBasis: "8rem",
+		minWidth: "6rem"
+	},
+	value: {
+		display: "grid",
+		flexGrow: 2,
+		flexShrink: 1,
+		flexBasis: "12rem",
+		minWidth: "8rem"
+	},
+	range: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_xs"
+	},
+	actions: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "_xs",
+		paddingInlineStart: "calc(2em + 0.5rem)"
+	},
+	actionsRoot: { paddingInlineStart: 0 },
+	removeGroup: { marginInlineStart: "auto" },
+	empty: { color: "_textMuted" }
+});
+var nextId = 0;
+var rule = (field = null, op = null, value) => ({
+	kind: "rule",
+	id: ++nextId,
+	field,
+	op,
+	value
+});
+var group = (mode, children = []) => ({
+	kind: "group",
+	id: ++nextId,
+	mode,
+	children
+});
+/** 条件读成界面上的组：not 包着 any 是“都不满足”、包着 all 是“不全满足”，包着单条比较是只有它的“都不满足” */
+function toGroup(condition) {
+	if ("all" in condition) return group("all", condition.all.map(toNode));
+	if ("any" in condition) return group("any", condition.any.map(toNode));
+	if ("not" in condition) {
+		const inner = condition.not;
+		if ("not" in inner) return toGroup(inner.not);
+		if ("any" in inner) return group("none", inner.any.map(toNode));
+		if ("all" in inner) return group("notAll", inner.all.map(toNode));
+		return group("none", [toNode(inner)]);
+	}
+	return group("all", [toNode(condition)]);
+}
+function toNode(condition) {
+	return "field" in condition ? rule(condition.field, condition.op, condition.value) : toGroup(condition);
+}
+/** 界面上的组写回条件：只留填完整的比较，空的组去掉 */
+function toCondition(node) {
+	const list = node.children.flatMap((child) => {
+		if (child.kind === "group") {
+			const nested = toCondition(child);
+			return nested ? [nested] : [];
+		}
+		if (!child.field || !child.op) return [];
+		const item = valueShape(child.op) === "none" ? {
+			field: child.field,
+			op: child.op
+		} : {
+			field: child.field,
+			op: child.op,
+			value: child.value
+		};
+		return isRuleComplete(item) ? [item] : [];
+	});
+	if (list.length === 0) return null;
+	switch (node.mode) {
+		case "all": return { all: list };
+		case "any": return { any: list };
+		case "none": return { not: { any: list } };
+		case "notAll": return { not: { all: list } };
+	}
+}
+/** 换比较方式时把值换成新的形状：一个值 ↔ 一组值 ↔ 范围，尽量留住已经填的 */
+function reshape(value, op) {
+	const first = Array.isArray(value) ? value.find((item) => item != null && item !== "") : value;
+	switch (valueShape(op)) {
+		case "none": return;
+		case "list": return Array.isArray(value) ? value.filter((item) => item != null) : first == null ? [] : [first];
+		case "range": return Array.isArray(value) && value.length === 2 ? value : [first ?? null, null];
+		case "single": return first;
+	}
+}
+/** 选项的值写成文字（Select 的值是文字），选中后再换回原来的值 */
+var optionKey = (value) => value == null ? null : toText(value);
+/** 条件构造器 */
+var ConditionBuilder = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const fields = readonlyProp(_props, "fields");
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const maxDepth = readonlyProp(_props, "maxDepth", 2);
+	const size = readonlyProp(_props, "size");
+	const disabled = readonlyProp(_props, "disabled", false);
+	const propsGroup = readonlyProp(_props, "propsGroup");
+	const propsRule = readonlyProp(_props, "propsRule");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	let element = null;
+	let emitted = JSON.stringify(value.value ?? null);
+	let tree = ref(value.value ? toGroup(value.value) : group("all"));
+	watch(() => value.value, (next) => {
+		const key = JSON.stringify(next ?? null);
+		if (key === emitted) return;
+		emitted = key;
+		tree.value = next ? toGroup(next) : group("all");
+	});
+	function commit() {
+		const next = toCondition(tree.value);
+		emitted = JSON.stringify(next);
+		value.value = next;
+	}
+	const fieldOf = (name) => fields.value.find((field) => field.name === name);
+	/** 渲染之后把焦点移到某个元素上（加了一条之后到它的字段，删掉之后到“添加条件”） */
+	function focusLater(selector) {
+		nextTick(() => element?.querySelector(selector)?.focus());
+	}
+	function addRule(parent) {
+		const added = rule();
+		parent.children.push(added);
+		focusLater(`[data-condition-rule="${added.id}"] [data-condition-part="field"]`);
+	}
+	function addGroup(parent) {
+		const added = rule();
+		parent.children.push(group("all", [added]));
+		focusLater(`[data-condition-rule="${added.id}"] [data-condition-part="field"]`);
+	}
+	function remove(parent, child) {
+		parent.children = parent.children.filter((item) => item !== child);
+		commit();
+		focusLater(`[data-condition-group="${parent.id}"] > [data-condition-part="actions"] button`);
+	}
+	function setField(node, name) {
+		const field = fieldOf(name);
+		node.field = name;
+		const ops = field ? operatorsOf(field) : [];
+		if (!node.op || !ops.includes(node.op)) node.op = ops[0] ?? null;
+		node.value = node.op ? reshape(field?.type === "boolean" ? true : void 0, node.op) : void 0;
+		commit();
+	}
+	function setOp(node, op) {
+		node.op = op;
+		node.value = reshape(node.value, op);
+		commit();
+	}
+	function setValue(node, next) {
+		node.value = next;
+		commit();
+	}
+	/** 值的输入：随字段类型与比较方式 */
+	function renderValue(node, field, op) {
+		const label = lang.conditionValue(field.label);
+		const shape = valueShape(op);
+		const onChange = (next) => setValue(node, next);
+		const common = {
+			size: size.value,
+			disabled: disabled.value,
+			"aria-label": label
+		};
+		if (shape === "none") return null;
+		if (field.input) return field.input({
+			field,
+			op,
+			value: node.value,
+			onChange,
+			label
+		});
+		if (field.type === "select" || field.type === "boolean") {
+			const options = field.type === "boolean" ? [{
+				value: true,
+				label: lang.conditionTrue
+			}, {
+				value: false,
+				label: lang.conditionFalse
+			}] : field.options ?? [];
+			const items = options.map((option) => ({
+				value: String(option.value),
+				label: option.label
+			}));
+			const back = (key) => options.find((option) => String(option.value) === key)?.value;
+			return shape === "list" ? createVNode(Select, mergeProps(common, {
+				"items": items,
+				"selectionMode": "multiple",
+				"maxTagCount": "responsive",
+				"_value": (node.value ?? []).map(String),
+				"onUpdate:_value": (keys) => onChange(keys.map(back))
+			}), null) : createVNode(Select, mergeProps(common, {
+				"items": items,
+				"_value": optionKey(node.value),
+				"onUpdate:_value": (key) => onChange(back(key))
+			}), null);
+		}
+		if (shape === "list") return createVNode(TagsInput, mergeProps(common, {
+			"_value": (node.value ?? []).map(String),
+			"onUpdate:_value": (list) => onChange(field.type === "number" ? list.map(Number).filter((n) => !Number.isNaN(n)) : list)
+		}), null);
+		if (field.type === "number") return shape === "range" ? createVNode(NumberRangeField, mergeProps(common, {
+			"_value": node.value ?? [null, null],
+			"onUpdate:_value": (range) => onChange([...range])
+		}), null) : createVNode(NumberField, mergeProps(common, {
+			"_value": node.value ?? null,
+			"onUpdate:_value": onChange
+		}), null);
+		if (field.type === "date") {
+			if (shape === "range") {
+				const [start, end] = node.value ?? [null, null];
+				return createVNode(DateRangePicker, mergeProps(common, {
+					"_value": start && end ? {
+						start,
+						end
+					} : null,
+					"onUpdate:_value": (range) => onChange(range ? [range.start, range.end] : [null, null])
+				}), null);
+			}
+			return createVNode(DatePicker, mergeProps(common, {
+				"_value": node.value ?? null,
+				"onUpdate:_value": onChange
+			}), null);
+		}
+		return createVNode(TextField, mergeProps(common, {
+			"_value": node.value ?? "",
+			"onUpdate:_value": onChange
+		}), null);
+	}
+	function renderRule(parent, node, index) {
+		const field = fieldOf(node.field);
+		const ops = field ? operatorsOf(field) : [];
+		return createVNode("div", mergeAttrs({ sx: conditionBuilderStyles.rule }, propsRule.value, {
+			role: "group",
+			"aria-label": lang.conditionRule(index + 1),
+			...dataAttrs({ "data-condition-rule": node.id })
+		}), [
+			createVNode(Select, {
+				"items": fields.value.map((item) => ({
+					value: item.name,
+					label: item.label,
+					group: item.group
+				})),
+				"_value": node.field,
+				"onUpdate:_value": (name) => setField(node, name),
+				"searchable": fields.value.length > 8,
+				"placeholder": lang.conditionField,
+				"aria-label": lang.conditionField,
+				"size": size.value,
+				"disabled": disabled.value,
+				"propsRoot": _cache[0] || (_cache[0] = { sx: conditionBuilderStyles.field }),
+				"data-condition-part": "field"
+			}, null),
+			createVNode(Select, {
+				"items": ops.map((op) => ({
+					value: op,
+					label: operatorLabel(lang, field.type, op)
+				})),
+				"_value": node.op,
+				"onUpdate:_value": (op) => op && setOp(node, op),
+				"aria-label": lang.conditionOperator,
+				"size": size.value,
+				"disabled": disabled.value || !field,
+				"propsRoot": _cache[1] || (_cache[1] = { sx: conditionBuilderStyles.op })
+			}, null),
+			field && node.op && valueShape(node.op) !== "none" && createVNode("div", css.attrs(conditionBuilderStyles.value), [renderValue(node, field, node.op)]),
+			createVNode(IconButton, {
+				"icon": X,
+				"variant": "ghost",
+				"size": size.value,
+				"disabled": disabled.value,
+				"aria-label": lang.conditionRemoveRule,
+				"onClick": () => remove(parent, node)
+			}, null)
+		]);
+	}
+	function renderGroup(node, depth, parent) {
+		const nested = depth > 0;
+		const joiner = node.mode === "any" || node.mode === "none" ? lang.conditionOr : lang.conditionAnd;
+		return createVNode("div", mergeAttrs({ sx: [conditionBuilderStyles.group, nested && conditionBuilderStyles.nested] }, propsGroup.value, {
+			...nested ? {
+				role: "group",
+				"aria-label": lang.conditionGroup
+			} : {},
+			...dataAttrs({ "data-condition-group": node.id })
+		}), [
+			(node.children.length > 0 || nested) && createVNode("div", css.attrs(conditionBuilderStyles.header), [createVNode(Select, {
+				"items": MODES.map((mode) => ({
+					value: mode,
+					label: lang.conditionModes[mode]
+				})),
+				"_value": node.mode,
+				"onUpdate:_value": (mode) => {
+					if (!mode) return;
+					node.mode = mode;
+					commit();
+				},
+				"aria-label": lang.conditionMode,
+				"size": size.value,
+				"disabled": disabled.value
+			}, null), nested && parent && createVNode(IconButton, {
+				"icon": Trash2,
+				"variant": "ghost",
+				"size": size.value,
+				"disabled": disabled.value,
+				"aria-label": lang.conditionRemoveGroup,
+				"onClick": () => remove(parent, node),
+				"sx": conditionBuilderStyles.removeGroup
+			}, null)]),
+			node.children.length === 0 ? !nested && createVNode(Small, { "sx": conditionBuilderStyles.empty }, {
+				default: () => [lang.conditionEmpty],
+				$stable: true
+			}) : createVNode("div", css.attrs(conditionBuilderStyles.rows), [node.children.map((child, index) => createVNode("div", mergeProps({ "key": child.id }, css.attrs(conditionBuilderStyles.row)), [createVNode("span", mergeProps(css.attrs(conditionBuilderStyles.joiner), { "aria-hidden": "true" }), [index > 0 ? joiner : ""]), child.kind === "rule" ? renderRule(node, child, index) : renderGroup(child, depth + 1, node)]))]),
+			createVNode("div", mergeProps(css.attrs(conditionBuilderStyles.actions, node.children.length === 0 && conditionBuilderStyles.actionsRoot), { "data-condition-part": "actions" }), [createVNode(Button, {
+				"variant": "ghost",
+				"size": size.value,
+				"icon": Plus,
+				"disabled": disabled.value,
+				"onClick": () => addRule(node)
+			}, {
+				default: () => [lang.conditionAddRule],
+				$stable: true
+			}), depth + 1 < maxDepth.value && createVNode(Button, {
+				"variant": "ghost",
+				"size": size.value,
+				"icon": Plus,
+				"disabled": disabled.value,
+				"onClick": () => addGroup(node)
+			}, {
+				default: () => [lang.conditionAddGroup],
+				$stable: true
+			})])
+		]);
+	}
+	return () => createVNode("div", mergeAttrs({ sx: conditionBuilderStyles.root }, rest, {
+		role: "group",
+		ref: (target) => element = target
+	}), [renderGroup(tree.value, 0)]);
+}, {
+	name: "ConditionBuilder",
+	props: [
+		"fields",
+		"_value",
+		"onUpdate:_value",
+		"maxDepth",
+		"size",
+		"disabled",
+		"propsGroup",
+		"propsRule"
+	]
+});
+//#endregion
+export { ConditionBuilder, conditionBuilderStyles };
+
+//# sourceMappingURL=ConditionBuilder.js.map

package/dist/input/ConditionBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/input/ConditionBuilder.tsx"],"sourcesContent":["/**\n * 条件构造器：编辑 all / any / not 加比较的条件树（Condition，见 condition.ts）。每条是“字段 · 比较方式 · 值”，\n * 比较方式随字段类型、值的输入随字段类型与比较方式；组的表头选满足方式（全部、任一、都不、不全），组里还能再加组。\n *\n *   const fields: ConditionField[] = [\n *     { name: 'amount', label: '金额', type: 'number' },\n *     { name: 'category', label: '品类', type: 'select', options: [{ value: 'steel', label: '钢材' }, …] },\n *     { name: 'owner', label: '经办人', type: 'select', input: ({ value, onChange, label }) => <UserPicker … /> },\n *   ];\n *   let condition = _state<Condition | null>(null);\n *   <ConditionBuilder fields={fields} _value={condition} aria-label=\"审批条件\" />\n *\n * 写回的是只含填完整的比较的条件：没选字段、没填值的那几条留在界面上，不进 _value；一条也没有时是 null。\n * 根总是一个组（{ all }、{ any }，都不满足是 { not: { any } }，不全满足是 { not: { all } }）；\n * 传进来的单条比较、嵌套的 not 按同样的规则读成组。父级改了 _value（与上次写回的不同）时整棵重读。\n *\n * 读屏：根与每个嵌套的组是 role=\"group\"，每条比较也是一组（“条件 2”），三个控件各有名称（“字段”“比较方式”“金额的值”）。\n * 加了一条之后焦点落到它的字段上；删掉之后落到组的“添加条件”上。\n * 部件：Root（div）、Group（每个组）、Rule（每条比较）。\n */\nimport { Plus, Trash2, X } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, watch, type VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { IconButton } from '../base/IconButton';\nimport { Small } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { t } from '../config/theme/tokens';\nimport { DatePicker } from '../date/DatePicker';\nimport { DateRangePicker } from '../date/DateRangePicker';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport {\n  isRuleComplete,\n  operatorLabel,\n  toText,\n  operatorsOf,\n  valueShape,\n  type Condition,\n  type ConditionField,\n  type ConditionOp,\n  type ConditionRule,\n} from './condition';\nimport { NumberField } from './NumberField';\nimport { NumberRangeField } from './NumberRangeField';\nimport { Select } from './Select';\nimport { TagsInput } from './TagsInput';\nimport { TextField } from './TextField';\n\n/** 组的满足方式 */\nexport interface ConditionModes {\n  /** 全部满足：{ all } */\n  all: unknown;\n  /** 任一满足：{ any } */\n  any: unknown;\n  /** 都不满足：{ not: { any } } */\n  none: unknown;\n  /** 不全满足：{ not: { all } } */\n  notAll: unknown;\n}\n\n/** 组的满足方式 */\nexport type ConditionMode = keyof ConditionModes;\n\n/** 未声明的属性落到外层 div（role=\"group\"）上：aria-label 写条件管什么 */\nexport interface ConditionBuilderProps extends PartProps<'div', 'role'> {\n  /** 能参与比较的字段 */\n  fields: readonly ConditionField[];\n  /** 条件：父级写 _value={condition} 双向绑定；没有填完整的比较时是 null */\n  _value?: Condition | null;\n  /** 组最多嵌套几层，默认 2（根组里还能加一层组）；1 时不能加组 */\n  maxDepth?: number;\n  /** 控件与按钮的字号档位，不写时继承 */\n  size?: TextSize;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 每个组的部件属性 */\n  propsGroup?: PartProps<'div'>;\n  /** 每条比较的部件属性 */\n  propsRule?: PartProps<'div'>;\n}\n\ninterface RuleNode {\n  kind: 'rule';\n  id: number;\n  field: string | null;\n  op: ConditionOp | null;\n  value: unknown;\n}\n\ninterface GroupNode {\n  kind: 'group';\n  id: number;\n  mode: ConditionMode;\n  children: (RuleNode | GroupNode)[];\n}\n\nconst MODES: readonly ConditionMode[] = ['all', 'any', 'none', 'notAll'];\n\n/** ConditionBuilder 的样式：root、group、nested、header、rows、row、joiner、rule、field、op、value、range、actions、empty */\nexport const conditionBuilderStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  group: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  // 嵌套的组：浅底加描边，和外层的条件分开\n  nested: {\n    flexGrow: 1,\n    padding: '_sm',\n    backgroundColor: '_surfaceMuted',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n  },\n  header: { display: 'flex', alignItems: 'center', gap: '_sm' },\n  rows: { display: 'flex', flexDirection: 'column', gap: '_sm' },\n  row: { display: 'flex', alignItems: 'flex-start', gap: '_sm', minWidth: 0 },\n  // 连接词（且、或）一列，宽度固定：各条的字段对齐\n  joiner: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    flexShrink: 0,\n    width: '2em',\n    // 与控件同高：连接词对着这一条的第一行\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    color: '_textMuted',\n  },\n  rule: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'flex-start',\n    gap: '_sm',\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  field: { flexGrow: 1, flexShrink: 1, flexBasis: '9rem', minWidth: '7rem', maxWidth: '14rem' },\n  op: { flexGrow: 0, flexShrink: 1, flexBasis: '8rem', minWidth: '6rem' },\n  // grid：里面的输入框拉满这一格（多选的标签按这个宽度排）\n  value: { display: 'grid', flexGrow: 2, flexShrink: 1, flexBasis: '12rem', minWidth: '8rem' },\n  range: { display: 'flex', alignItems: 'center', gap: '_xs' },\n  actions: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '_xs',\n    paddingInlineStart: 'calc(2em + 0.5rem)',\n  },\n  actionsRoot: { paddingInlineStart: 0 },\n  removeGroup: { marginInlineStart: 'auto' },\n  empty: { color: '_textMuted' },\n});\n\nlet nextId = 0;\nconst rule = (\n  field: string | null = null,\n  op: ConditionOp | null = null,\n  value?: unknown,\n): RuleNode => ({\n  kind: 'rule',\n  id: ++nextId,\n  field,\n  op,\n  value,\n});\nconst group = (mode: ConditionMode, children: (RuleNode | GroupNode)[] = []): GroupNode => ({\n  kind: 'group',\n  id: ++nextId,\n  mode,\n  children,\n});\n\n/** 条件读成界面上的组：not 包着 any 是“都不满足”、包着 all 是“不全满足”，包着单条比较是只有它的“都不满足” */\nfunction toGroup(condition: Condition): GroupNode {\n  if ('all' in condition) return group('all', condition.all.map(toNode));\n  if ('any' in condition) return group('any', condition.any.map(toNode));\n  if ('not' in condition) {\n    const inner = condition.not;\n    if ('not' in inner) return toGroup(inner.not);\n    if ('any' in inner) return group('none', inner.any.map(toNode));\n    if ('all' in inner) return group('notAll', inner.all.map(toNode));\n    return group('none', [toNode(inner)]);\n  }\n  return group('all', [toNode(condition)]);\n}\n\nfunction toNode(condition: Condition): RuleNode | GroupNode {\n  return 'field' in condition\n    ? rule(condition.field, condition.op, condition.value)\n    : toGroup(condition);\n}\n\n/** 界面上的组写回条件：只留填完整的比较，空的组去掉 */\nfunction toCondition(node: GroupNode): Condition | null {\n  const list = node.children.flatMap((child): Condition[] => {\n    if (child.kind === 'group') {\n      const nested = toCondition(child);\n      return nested ? [nested] : [];\n    }\n    if (!child.field || !child.op) return [];\n    const item: ConditionRule =\n      valueShape(child.op) === 'none'\n        ? { field: child.field, op: child.op }\n        : { field: child.field, op: child.op, value: child.value };\n    return isRuleComplete(item) ? [item] : [];\n  });\n  if (list.length === 0) return null;\n  switch (node.mode) {\n    case 'all':\n      return { all: list };\n    case 'any':\n      return { any: list };\n    case 'none':\n      return { not: { any: list } };\n    case 'notAll':\n      return { not: { all: list } };\n  }\n}\n\n/** 换比较方式时把值换成新的形状：一个值 ↔ 一组值 ↔ 范围，尽量留住已经填的 */\nfunction reshape(value: unknown, op: ConditionOp): unknown {\n  const first = Array.isArray(value) ? value.find((item) => item != null && item !== '') : value;\n  switch (valueShape(op)) {\n    case 'none':\n      return undefined;\n    case 'list':\n      return Array.isArray(value)\n        ? value.filter((item) => item != null)\n        : first == null\n          ? []\n          : [first];\n    case 'range':\n      return Array.isArray(value) && value.length === 2 ? value : [first ?? null, null];\n    case 'single':\n      return first;\n  }\n}\n\n/** 选项的值写成文字（Select 的值是文字），选中后再换回原来的值 */\nconst optionKey = (value: unknown) => (value == null ? null : toText(value));\n\n/** 条件构造器 */\nexport const ConditionBuilder = _component(\n  ({\n    fields,\n    _value: value = _bindable<Condition | null>(null),\n    maxDepth = 2,\n    size,\n    disabled = false,\n    propsGroup,\n    propsRule,\n    ...rest\n  }: ConditionBuilderProps) => {\n    const lang = useLang();\n    let element: HTMLElement | null = null;\n    // 上次写回的值：父级改成别的才整棵重读，自己写回的不重读（没填完的那几条还要留在界面上）\n    let emitted = JSON.stringify(value ?? null);\n    let tree = _state<GroupNode>(value ? toGroup(value) : group('all'));\n\n    watch(\n      () => value,\n      (next) => {\n        const key = JSON.stringify(next ?? null);\n        if (key === emitted) return;\n        emitted = key;\n        tree = next ? toGroup(next) : group('all');\n      },\n    );\n\n    function commit() {\n      const next = toCondition(tree);\n      emitted = JSON.stringify(next);\n      value = next;\n    }\n\n    const fieldOf = (name: string | null) => fields.find((field) => field.name === name);\n\n    /** 渲染之后把焦点移到某个元素上（加了一条之后到它的字段，删掉之后到“添加条件”） */\n    function focusLater(selector: string) {\n      void nextTick(() => element?.querySelector<HTMLElement>(selector)?.focus());\n    }\n\n    function addRule(parent: GroupNode) {\n      const added = rule();\n      parent.children.push(added);\n      focusLater(`[data-condition-rule=\"${added.id}\"] [data-condition-part=\"field\"]`);\n    }\n\n    function addGroup(parent: GroupNode) {\n      const added = rule();\n      parent.children.push(group('all', [added]));\n      focusLater(`[data-condition-rule=\"${added.id}\"] [data-condition-part=\"field\"]`);\n    }\n\n    function remove(parent: GroupNode, child: RuleNode | GroupNode) {\n      parent.children = parent.children.filter((item) => item !== child);\n      commit();\n      focusLater(`[data-condition-group=\"${parent.id}\"] > [data-condition-part=\"actions\"] button`);\n    }\n\n    function setField(node: RuleNode, name: string | null) {\n      const field = fieldOf(name);\n      node.field = name;\n      const ops = field ? operatorsOf(field) : [];\n      if (!node.op || !ops.includes(node.op)) node.op = ops[0] ?? null;\n      // 换了字段，原来的值多半不适用：清空，是否型默认“是”\n      node.value = node.op\n        ? reshape(field?.type === 'boolean' ? true : undefined, node.op)\n        : undefined;\n      commit();\n    }\n\n    function setOp(node: RuleNode, op: ConditionOp) {\n      node.op = op;\n      node.value = reshape(node.value, op);\n      commit();\n    }\n\n    function setValue(node: RuleNode, next: unknown) {\n      node.value = next;\n      commit();\n    }\n\n    /** 值的输入：随字段类型与比较方式 */\n    function renderValue(node: RuleNode, field: ConditionField, op: ConditionOp): VNodeChild {\n      const label = lang.conditionValue(field.label);\n      const shape = valueShape(op);\n      const onChange = (next: unknown) => setValue(node, next);\n      const common = { size, disabled, 'aria-label': label };\n      if (shape === 'none') return null;\n      if (field.input) return field.input({ field, op, value: node.value, onChange, label });\n\n      if (field.type === 'select' || field.type === 'boolean') {\n        const options =\n          field.type === 'boolean'\n            ? [\n                { value: true, label: lang.conditionTrue },\n                { value: false, label: lang.conditionFalse },\n              ]\n            : (field.options ?? []);\n        const items = options.map((option) => ({\n          value: String(option.value),\n          label: option.label,\n        }));\n        const back = (key: string | null) =>\n          options.find((option) => String(option.value) === key)?.value;\n        return shape === 'list' ? (\n          <Select\n            {...common}\n            items={items}\n            selectionMode=\"multiple\"\n            maxTagCount=\"responsive\"\n            _value={((node.value as unknown[] | undefined) ?? []).map(String)}\n            onUpdate:_value={(keys) => onChange((keys as string[]).map(back))}\n          />\n        ) : (\n          <Select\n            {...common}\n            items={items}\n            _value={optionKey(node.value)}\n            onUpdate:_value={(key) => onChange(back(key as string | null))}\n          />\n        );\n      }\n\n      if (shape === 'list') {\n        return (\n          <TagsInput\n            {...common}\n            _value={((node.value as unknown[] | undefined) ?? []).map(String)}\n            onUpdate:_value={(list) =>\n              onChange(\n                field.type === 'number' ? list.map(Number).filter((n) => !Number.isNaN(n)) : list,\n              )\n            }\n          />\n        );\n      }\n\n      if (field.type === 'number') {\n        return shape === 'range' ? (\n          <NumberRangeField\n            {...common}\n            _value={(node.value as [number | null, number | null] | undefined) ?? [null, null]}\n            onUpdate:_value={(range) => onChange([...range])}\n          />\n        ) : (\n          <NumberField\n            {...common}\n            _value={(node.value as number | null | undefined) ?? null}\n            onUpdate:_value={onChange}\n          />\n        );\n      }\n\n      if (field.type === 'date') {\n        if (shape === 'range') {\n          const [start, end] = (node.value as [string | null, string | null] | undefined) ?? [\n            null,\n            null,\n          ];\n          return (\n            <DateRangePicker\n              {...common}\n              _value={start && end ? { start, end } : null}\n              onUpdate:_value={(range) => onChange(range ? [range.start, range.end] : [null, null])}\n            />\n          );\n        }\n        return (\n          <DatePicker\n            {...common}\n            _value={(node.value as string | null | undefined) ?? null}\n            onUpdate:_value={onChange}\n          />\n        );\n      }\n\n      return (\n        <TextField\n          {...common}\n          _value={(node.value as string | undefined) ?? ''}\n          onUpdate:_value={onChange}\n        />\n      );\n    }\n\n    function renderRule(parent: GroupNode, node: RuleNode, index: number): VNodeChild {\n      const field = fieldOf(node.field);\n      const ops = field ? operatorsOf(field) : [];\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: conditionBuilderStyles.rule }, propsRule, {\n            role: 'group',\n            'aria-label': lang.conditionRule(index + 1),\n            ...dataAttrs({ 'data-condition-rule': node.id }),\n          })}\n        >\n          <Select\n            items={fields.map((item) => ({\n              value: item.name,\n              label: item.label,\n              group: item.group,\n            }))}\n            _value={node.field}\n            onUpdate:_value={(name) => setField(node, name as string | null)}\n            searchable={fields.length > 8}\n            placeholder={lang.conditionField}\n            aria-label={lang.conditionField}\n            size={size}\n            disabled={disabled}\n            propsRoot={{ sx: conditionBuilderStyles.field }}\n            data-condition-part=\"field\"\n          />\n          <Select\n            items={ops.map((op) => ({ value: op, label: operatorLabel(lang, field!.type, op) }))}\n            _value={node.op}\n            onUpdate:_value={(op) => op && setOp(node, op as ConditionOp)}\n            aria-label={lang.conditionOperator}\n            size={size}\n            disabled={disabled || !field}\n            propsRoot={{ sx: conditionBuilderStyles.op }}\n          />\n          {field && node.op && valueShape(node.op) !== 'none' && (\n            <div {...css.attrs(conditionBuilderStyles.value)}>\n              {renderValue(node, field, node.op)}\n            </div>\n          )}\n          <IconButton\n            icon={X}\n            variant=\"ghost\"\n            size={size}\n            disabled={disabled}\n            aria-label={lang.conditionRemoveRule}\n            onClick={() => remove(parent, node)}\n          />\n        </div>\n      );\n    }\n\n    function renderGroup(node: GroupNode, depth: number, parent?: GroupNode): VNodeChild {\n      const nested = depth > 0;\n      const joiner =\n        node.mode === 'any' || node.mode === 'none' ? lang.conditionOr : lang.conditionAnd;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [conditionBuilderStyles.group, nested && conditionBuilderStyles.nested] },\n            propsGroup,\n            {\n              ...(nested ? { role: 'group', 'aria-label': lang.conditionGroup } : {}),\n              ...dataAttrs({ 'data-condition-group': node.id }),\n            },\n          )}\n        >\n          {(node.children.length > 0 || nested) && (\n            <div {...css.attrs(conditionBuilderStyles.header)}>\n              <Select\n                items={MODES.map((mode) => ({ value: mode, label: lang.conditionModes[mode] }))}\n                _value={node.mode}\n                onUpdate:_value={(mode) => {\n                  if (!mode) return;\n                  node.mode = mode as ConditionMode;\n                  commit();\n                }}\n                aria-label={lang.conditionMode}\n                size={size}\n                disabled={disabled}\n              />\n              {nested && parent && (\n                <IconButton\n                  icon={Trash2}\n                  variant=\"ghost\"\n                  size={size}\n                  disabled={disabled}\n                  aria-label={lang.conditionRemoveGroup}\n                  onClick={() => remove(parent, node)}\n                  sx={conditionBuilderStyles.removeGroup}\n                />\n              )}\n            </div>\n          )}\n          {node.children.length === 0 ? (\n            !nested && <Small sx={conditionBuilderStyles.empty}>{lang.conditionEmpty}</Small>\n          ) : (\n            <div {...css.attrs(conditionBuilderStyles.rows)}>\n              {node.children.map((child, index) => (\n                <div key={child.id} {...css.attrs(conditionBuilderStyles.row)}>\n                  <span {...css.attrs(conditionBuilderStyles.joiner)} aria-hidden=\"true\">\n                    {index > 0 ? joiner : ''}\n                  </span>\n                  {child.kind === 'rule'\n                    ? renderRule(node, child, index)\n                    : renderGroup(child, depth + 1, node)}\n                </div>\n              ))}\n            </div>\n          )}\n          <div\n            {...css.attrs(\n              conditionBuilderStyles.actions,\n              node.children.length === 0 && conditionBuilderStyles.actionsRoot,\n            )}\n            data-condition-part=\"actions\"\n          >\n            <Button\n              variant=\"ghost\"\n              size={size}\n              icon={Plus}\n              disabled={disabled}\n              onClick={() => addRule(node)}\n            >\n              {lang.conditionAddRule}\n            </Button>\n            {depth + 1 < maxDepth && (\n              <Button\n                variant=\"ghost\"\n                size={size}\n                icon={Plus}\n                disabled={disabled}\n                onClick={() => addGroup(node)}\n              >\n                {lang.conditionAddGroup}\n              </Button>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: conditionBuilderStyles.root }, rest, {\n          role: 'group',\n          ref: (target: unknown) => (element = target as HTMLElement | null),\n        })}\n      >\n        {renderGroup(tree, 0)}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/input/ControlGroup.d.ts

@@ -0,0 +1,26 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type AttachedOrientations } from '../utils/style/attached';
+/** 角色由组件管理 */
+export type ControlGroupManaged = 'role';
+/** 未声明的属性落到 div 上；aria-label 是这组输入的名称 */
+export interface ControlGroupProps extends PartProps<'div', ControlGroupManaged> {
+    /**
+     * 排列方向
+     * @default 'horizontal'
+     */
+    orientation?: keyof AttachedOrientations;
+    /** 不占满一行（行内排列），默认占满 */
+    inline?: boolean;
+    /** 输入框、选择框、按钮 */
+    children?: VNodeChild;
+}
+/** ControlGroup 的样式：root、inline、vertical */
+export declare const controlGroupStyles: Readonly<{
+    inline: css.CompiledStyles;
+    root: css.CompiledStyles;
+    vertical: css.CompiledStyles;
+}>;
+/** 组合输入：相连的一排输入框与按钮 */
+export declare const ControlGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ControlGroupProps>;