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

package/dist/input/condition.js

@@ -0,0 +1,187 @@
+import { compareDecimalText, decimalTextOf, isDecimal } from "../utils/data/numeric.js";
+//#region src/input/condition.ts
+/** 各类型默认能用的比较方式，第一个是新条件默认的 */
+var conditionOperators = {
+	text: [
+		"contains",
+		"notContains",
+		"eq",
+		"ne",
+		"startsWith",
+		"empty",
+		"exists"
+	],
+	number: [
+		"eq",
+		"ne",
+		"gt",
+		"gte",
+		"lt",
+		"lte",
+		"between",
+		"empty",
+		"exists"
+	],
+	date: [
+		"eq",
+		"lt",
+		"gt",
+		"lte",
+		"gte",
+		"between",
+		"empty",
+		"exists"
+	],
+	select: [
+		"eq",
+		"ne",
+		"in",
+		"notIn",
+		"empty",
+		"exists"
+	],
+	boolean: ["eq"]
+};
+/** 字段能用的比较方式 */
+var operatorsOf = (field) => field.operators ?? conditionOperators[field.type];
+/** 这种比较要不要值 */
+var needsValue = (op) => op !== "exists" && op !== "empty";
+/** 比较方式要的值的形状 */
+function valueShape(op) {
+	if (!needsValue(op)) return "none";
+	if (op === "between") return "range";
+	if (op === "in" || op === "notIn") return "list";
+	return "single";
+}
+/** 是组合（all / any / not），不是比较 */
+var isConditionGroup = (condition) => "all" in condition || "any" in condition || "not" in condition;
+/** 值写成文字：null、undefined 是空字符串，对象（不该出现在比较里）写成 JSON */
+var toText = (value) => value == null ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);
+var isBlank = (value) => value == null || value === "" || Array.isArray(value) && value.length === 0;
+/** 比较已经填完整：要值的有值，between 至少一端有值 */
+function isRuleComplete(rule) {
+	switch (valueShape(rule.op)) {
+		case "none": return true;
+		case "range": return Array.isArray(rule.value) && rule.value.some((end) => !isBlank(end));
+		default: return !isBlank(rule.value);
+	}
+}
+/**
+* 两个值按大小比：数字、大整数、Decimal、十进制写法的文字按精确的数值（不经过浮点数，长小数、大整数不丢精度），
+* 其余写成文字后按编码顺序（不按语言环境；ISO 日期按文字比就是先后）。与流程引擎模型包（flow 的 values.ts）同一套规则
+*/
+function compare(a, b) {
+	const x = decimalTextOf(a);
+	const y = decimalTextOf(b);
+	if (x !== void 0 && y !== void 0) return compareDecimalText(x, y);
+	const left = toText(a);
+	const right = toText(b);
+	return left === right ? 0 : left < right ? -1 : 1;
+}
+/** 等于：数字与数字文字视为相等（表单里的 '5' 与数据里的 5）；对象只有 Decimal 参与比较 */
+var same = (a, b) => a === b || a != null && b != null && (typeof a !== "object" || isDecimal(a)) && (typeof b !== "object" || isDecimal(b)) && compare(a, b) === 0;
+var text = (value) => toText(value).toLowerCase();
+/** 对一个（不是数组的）值，这条比较成不成立 */
+function matchesOne(op, actual, value) {
+	switch (op) {
+		case "eq": return same(actual, value);
+		case "ne": return !same(actual, value);
+		case "gt": return actual != null && compare(actual, value) > 0;
+		case "gte": return actual != null && compare(actual, value) >= 0;
+		case "lt": return actual != null && compare(actual, value) < 0;
+		case "lte": return actual != null && compare(actual, value) <= 0;
+		case "between": {
+			const [low, high] = Array.isArray(value) ? value : [];
+			if (actual == null) return false;
+			return (isBlank(low) || compare(actual, low) >= 0) && (isBlank(high) || compare(actual, high) <= 0);
+		}
+		case "in": return Array.isArray(value) && value.some((item) => same(actual, item));
+		case "notIn": return !Array.isArray(value) || !value.some((item) => same(actual, item));
+		case "contains": return text(actual).includes(text(value));
+		case "notContains": return !text(actual).includes(text(value));
+		case "startsWith": return text(actual).startsWith(text(value));
+		case "exists": return !isBlank(actual);
+		case "empty": return isBlank(actual);
+	}
+}
+/** "没有一项满足"的比较 */
+var NEGATIVE = /* @__PURE__ */ new Set([
+	"ne",
+	"notIn",
+	"notContains"
+]);
+/**
+* 一条比较成不成立。字段的值是数组时（多选、人员的编号列表）对每一项比：等于、是其中之一、包含、大小这些是"有一项满足"，
+* 不等于、不在其中、不包含是"没有一项满足"；有值、没有值看数组是不是空的
+*/
+function matchesRule(rule, actual) {
+	if (rule.op === "exists" || rule.op === "empty" || !Array.isArray(actual)) return matchesOne(rule.op, actual, rule.value);
+	return NEGATIVE.has(rule.op) ? actual.every((item) => matchesOne(rule.op, item, rule.value)) : actual.some((item) => matchesOne(rule.op, item, rule.value));
+}
+/**
+* 记录满不满足条件。字段的值默认按名字取属性，read 可以改（嵌套字段、计算字段）。
+* 规则与 query 库的 conditionBy（后端写成 SQL，query 仓库的 0017）、流程引擎的模型包（flow 仓库）一致，同一份条件在各处筛出同样的行：
+* 没填完整的比较（isRuleComplete）与空的组不加条件，组里只看加了条件的那几项；不等于、不在其中、不包含把空值算作满足
+*/
+function matchesCondition(condition, record, read = (item, field) => item?.[field]) {
+	return evaluate(condition, record, read) ?? true;
+}
+/** 求值；不加条件（没填完整的比较、空的组）时是 undefined，同 SQL 端丢掉空条件 */
+function evaluate(condition, record, read) {
+	if ("not" in condition) {
+		const inner = evaluate(condition.not, record, read);
+		return inner === void 0 ? void 0 : !inner;
+	}
+	if ("all" in condition || "any" in condition) {
+		const results = ("all" in condition ? condition.all : condition.any).map((item) => evaluate(item, record, read)).filter((result) => result !== void 0);
+		if (results.length === 0) return void 0;
+		return "all" in condition ? results.every(Boolean) : results.some(Boolean);
+	}
+	if (!isRuleComplete(condition)) return void 0;
+	return matchesRule(condition, read(record, condition.field));
+}
+/** 比较方式的文字：日期、选项、是否这几种类型有自己的说法（早于、是其中之一） */
+function operatorLabel(lang, type, op) {
+	return lang.conditionTypeOperators[type]?.[op] ?? lang.conditionOperators[op];
+}
+/** 值在摘要里的写法 */
+function formatConditionValue(lang, field, value) {
+	const one = (item) => {
+		if (field?.format) return field.format(item);
+		if (field?.type === "boolean") return item ? lang.conditionTrue : lang.conditionFalse;
+		const option = field?.options?.find((candidate) => candidate.value === item);
+		if (option) return option.label;
+		if (typeof item === "number") return item.toLocaleString(lang.code);
+		return toText(item);
+	};
+	if (Array.isArray(value)) return value.map(one).join(lang.conditionValueSeparator);
+	return one(value);
+}
+/**
+* 条件写成一句话：收起的高级筛选、流程连线上的条件摘要用。不认识的字段原样写字段名；
+* 嵌套的组加括号，not 写成“不满足：…”
+*/
+function describeCondition(condition, fields, lang) {
+	const describe = (item, nested) => {
+		if ("not" in item) return `${lang.conditionNotPrefix}${describe(item.not, true)}`;
+		if ("all" in item || "any" in item) {
+			const list = "all" in item ? item.all : item.any;
+			const joiner = "all" in item ? lang.conditionAndJoiner : lang.conditionOrJoiner;
+			const text = list.map((child) => describe(child, true)).join(joiner);
+			return nested && list.length > 1 ? `（${text}）` : text;
+		}
+		const field = fields.find((candidate) => candidate.name === item.field);
+		const parts = [field?.label ?? item.field, operatorLabel(lang, field?.type ?? "text", item.op)];
+		const shape = valueShape(item.op);
+		if (shape === "range") {
+			const [low, high] = Array.isArray(item.value) ? item.value : [];
+			parts.push(lang.conditionRange(formatConditionValue(lang, field, low), formatConditionValue(lang, field, high)));
+		} else if (shape !== "none") parts.push(formatConditionValue(lang, field, item.value));
+		return parts.join(" ");
+	};
+	return describe(condition, false);
+}
+//#endregion
+export { conditionOperators, describeCondition, formatConditionValue, isConditionGroup, isRuleComplete, matchesCondition, needsValue, operatorLabel, operatorsOf, toText, valueShape };
+
+//# sourceMappingURL=condition.js.map

package/dist/input/condition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"condition.js","names":[],"sources":["../../src/input/condition.ts"],"sourcesContent":["/**\n * 条件：比较一个字段，或用 all / any / not 组合的表达式树。纯 JSON，可以存库、传给后端，前后端各自求值、结果一致。\n * ConditionBuilder 编辑它；FilterBar 的高级筛选、流程连线的条件都用这一种写法。\n *\n *   const condition: Condition = {\n *     all: [\n *       { field: 'amount', op: 'gte', value: 10000 },\n *       { any: [{ field: 'category', op: 'in', value: ['钢材', '铝材'] }, { not: { field: 'urgent', op: 'eq', value: false } }] },\n *     ],\n *   };\n *   rows.filter((row) => matchesCondition(condition, row));\n *   describeCondition(condition, fields, lang);   // “金额 大于等于 10000，且（品类 是其中之一 钢材、铝材，或 不满足：加急 是 否）”\n *\n * 字段（ConditionField）给出名字、显示名与类型；类型决定能用哪些比较方式（conditionOperators）与值用什么控件填。\n * 值的形式：between 是 [下限, 上限]（含两端，任一端为空时不限），in / notIn 是数组，exists / empty 没有值；日期是 ISO 文字，按文字比就是先后。\n */\nimport type { VNodeChild } from 'vue';\nimport type { Lang } from '../config/lang/lang';\nimport { compareDecimalText, decimalTextOf, isDecimal } from '../utils/data/numeric';\n\n/** 比较的方式 */\nexport interface ConditionOps {\n  /** 等于 */\n  eq: unknown;\n  /** 不等于 */\n  ne: unknown;\n  /** 大于（日期：晚于） */\n  gt: unknown;\n  /** 大于等于 */\n  gte: unknown;\n  /** 小于（日期：早于） */\n  lt: unknown;\n  /** 小于等于 */\n  lte: unknown;\n  /** 在两个值之间（含两端）：value 是 [下限, 上限] */\n  between: unknown;\n  /** 是其中之一：value 是数组 */\n  in: unknown;\n  /** 不是其中任何一个：value 是数组 */\n  notIn: unknown;\n  /** 文字包含 */\n  contains: unknown;\n  /** 文字不包含 */\n  notContains: unknown;\n  /** 文字以它开头 */\n  startsWith: unknown;\n  /** 有值（不是 null、undefined、空字符串、空数组） */\n  exists: unknown;\n  /** 没有值 */\n  empty: unknown;\n}\n\n/** 比较的方式 */\nexport type ConditionOp = keyof ConditionOps;\n\n/** 比较一个字段 */\nexport interface ConditionRule {\n  /** 字段名 */\n  field: string;\n  /** 比较的方式 */\n  op: ConditionOp;\n  /** 比较的值；exists、empty 没有 */\n  value?: unknown;\n}\n\n/** 条件：比较一个字段，或用 all（全部满足）/ any（任一满足）/ not（不满足）组合 */\nexport type Condition =\n  | ConditionRule\n  | { all: readonly Condition[] }\n  | { any: readonly Condition[] }\n  | { not: Condition };\n\n/** 字段的类型：决定能用哪些比较方式、值用什么控件填 */\nexport interface ConditionFieldTypes {\n  /** 文字：包含、等于、开头是 */\n  text: unknown;\n  /** 数字：大小、介于 */\n  number: unknown;\n  /** 日期（ISO 文字）：早于、晚于、介于 */\n  date: unknown;\n  /** 从选项里选：是、不是、是其中之一 */\n  select: unknown;\n  /** 是或否 */\n  boolean: unknown;\n}\n\n/** 字段的类型 */\nexport type ConditionFieldType = keyof ConditionFieldTypes;\n\n/** 选项型字段的一个选项 */\nexport interface ConditionOption {\n  /** 值 */\n  value: string | number;\n  /** 显示的文字 */\n  label: string;\n}\n\n/** 自己画值的输入时拿到的参数 */\nexport interface ConditionInputContext {\n  /** 字段 */\n  field: ConditionField;\n  /** 比较的方式 */\n  op: ConditionOp;\n  /** 现在的值 */\n  value: unknown;\n  /** 改值 */\n  onChange: (value: unknown) => void;\n  /** 无障碍名称（“金额的值”） */\n  label: string;\n}\n\n/** 能参与比较的字段 */\nexport interface ConditionField {\n  /** 字段名：写进条件的 field */\n  name: string;\n  /** 显示名 */\n  label: string;\n  /** 类型 */\n  type: ConditionFieldType;\n  /** 分组名：字段多时字段列表按它分组（如“申请单”“流程变量”） */\n  group?: string;\n  /** 选项（select 类型） */\n  options?: readonly ConditionOption[];\n  /** 能用的比较方式，默认按类型（conditionOperators） */\n  operators?: readonly ConditionOp[];\n  /** 自己画值的输入（人员选择器、带单位的数字……）；类型仍决定比较方式与摘要里值的写法 */\n  input?: (context: ConditionInputContext) => VNodeChild;\n  /** 摘要里值的写法，默认选项的文字、日期原样、是否写成“是 / 否” */\n  format?: (value: unknown) => string;\n}\n\n/** 各类型默认能用的比较方式，第一个是新条件默认的 */\nexport const conditionOperators: Readonly<Record<ConditionFieldType, readonly ConditionOp[]>> = {\n  text: ['contains', 'notContains', 'eq', 'ne', 'startsWith', 'empty', 'exists'],\n  number: ['eq', 'ne', 'gt', 'gte', 'lt', 'lte', 'between', 'empty', 'exists'],\n  date: ['eq', 'lt', 'gt', 'lte', 'gte', 'between', 'empty', 'exists'],\n  select: ['eq', 'ne', 'in', 'notIn', 'empty', 'exists'],\n  boolean: ['eq'],\n};\n\n/** 字段能用的比较方式 */\nexport const operatorsOf = (field: ConditionField): readonly ConditionOp[] =>\n  field.operators ?? conditionOperators[field.type];\n\n/** 这种比较要不要值 */\nexport const needsValue = (op: ConditionOp) => op !== 'exists' && op !== 'empty';\n\n/** 值的形状：between 两个值，in / notIn 一组值，exists / empty 没有，其余一个 */\nexport type ConditionValueShape = 'none' | 'single' | 'range' | 'list';\n\n/** 比较方式要的值的形状 */\nexport function valueShape(op: ConditionOp): ConditionValueShape {\n  if (!needsValue(op)) return 'none';\n  if (op === 'between') return 'range';\n  if (op === 'in' || op === 'notIn') return 'list';\n  return 'single';\n}\n\n/** 是组合（all / any / not），不是比较 */\nexport const isConditionGroup = (\n  condition: Condition,\n): condition is Exclude<Condition, ConditionRule> =>\n  'all' in condition || 'any' in condition || 'not' in condition;\n\n/** 值写成文字：null、undefined 是空字符串，对象（不该出现在比较里）写成 JSON */\nexport const toText = (value: unknown): string =>\n  value == null\n    ? ''\n    : typeof value === 'object'\n      ? JSON.stringify(value)\n      : String(value as string | number | boolean | bigint);\n\nconst isBlank = (value: unknown) =>\n  value == null || value === '' || (Array.isArray(value) && value.length === 0);\n\n/** 比较已经填完整：要值的有值，between 至少一端有值 */\nexport function isRuleComplete(rule: ConditionRule): boolean {\n  switch (valueShape(rule.op)) {\n    case 'none':\n      return true;\n    case 'range':\n      return Array.isArray(rule.value) && rule.value.some((end) => !isBlank(end));\n    default:\n      return !isBlank(rule.value);\n  }\n}\n\n/**\n * 两个值按大小比：数字、大整数、Decimal、十进制写法的文字按精确的数值（不经过浮点数，长小数、大整数不丢精度），\n * 其余写成文字后按编码顺序（不按语言环境；ISO 日期按文字比就是先后）。与流程引擎模型包（flow 的 values.ts）同一套规则\n */\nfunction compare(a: unknown, b: unknown): number {\n  const x = decimalTextOf(a);\n  const y = decimalTextOf(b);\n  if (x !== undefined && y !== undefined) return compareDecimalText(x, y);\n  const left = toText(a);\n  const right = toText(b);\n  return left === right ? 0 : left < right ? -1 : 1;\n}\n\n/** 等于：数字与数字文字视为相等（表单里的 '5' 与数据里的 5）；对象只有 Decimal 参与比较 */\nconst same = (a: unknown, b: unknown) =>\n  a === b ||\n  (a != null &&\n    b != null &&\n    (typeof a !== 'object' || isDecimal(a)) &&\n    (typeof b !== 'object' || isDecimal(b)) &&\n    compare(a, b) === 0);\n\nconst text = (value: unknown) => toText(value).toLowerCase();\n\n/** 对一个（不是数组的）值，这条比较成不成立 */\nfunction matchesOne(op: ConditionOp, actual: unknown, value: unknown): boolean {\n  switch (op) {\n    case 'eq':\n      return same(actual, value);\n    case 'ne':\n      return !same(actual, value);\n    case 'gt':\n      return actual != null && compare(actual, value) > 0;\n    case 'gte':\n      return actual != null && compare(actual, value) >= 0;\n    case 'lt':\n      return actual != null && compare(actual, value) < 0;\n    case 'lte':\n      return actual != null && compare(actual, value) <= 0;\n    case 'between': {\n      const [low, high] = Array.isArray(value) ? value : [];\n      if (actual == null) return false;\n      return (\n        (isBlank(low) || compare(actual, low) >= 0) && (isBlank(high) || compare(actual, high) <= 0)\n      );\n    }\n    case 'in':\n      return Array.isArray(value) && value.some((item) => same(actual, item));\n    case 'notIn':\n      return !Array.isArray(value) || !value.some((item) => same(actual, item));\n    case 'contains':\n      return text(actual).includes(text(value));\n    case 'notContains':\n      return !text(actual).includes(text(value));\n    case 'startsWith':\n      return text(actual).startsWith(text(value));\n    case 'exists':\n      return !isBlank(actual);\n    case 'empty':\n      return isBlank(actual);\n  }\n}\n\n/** \"没有一项满足\"的比较 */\nconst NEGATIVE: ReadonlySet<ConditionOp> = new Set(['ne', 'notIn', 'notContains']);\n\n/**\n * 一条比较成不成立。字段的值是数组时（多选、人员的编号列表）对每一项比：等于、是其中之一、包含、大小这些是\"有一项满足\"，\n * 不等于、不在其中、不包含是\"没有一项满足\"；有值、没有值看数组是不是空的\n */\nfunction matchesRule(rule: ConditionRule, actual: unknown): boolean {\n  if (rule.op === 'exists' || rule.op === 'empty' || !Array.isArray(actual))\n    return matchesOne(rule.op, actual, rule.value);\n  return NEGATIVE.has(rule.op)\n    ? actual.every((item) => matchesOne(rule.op, item, rule.value))\n    : actual.some((item) => matchesOne(rule.op, item, rule.value));\n}\n\n/**\n * 记录满不满足条件。字段的值默认按名字取属性，read 可以改（嵌套字段、计算字段）。\n * 规则与 query 库的 conditionBy（后端写成 SQL，query 仓库的 0017）、流程引擎的模型包（flow 仓库）一致，同一份条件在各处筛出同样的行：\n * 没填完整的比较（isRuleComplete）与空的组不加条件，组里只看加了条件的那几项；不等于、不在其中、不包含把空值算作满足\n */\nexport function matchesCondition<T>(\n  condition: Condition,\n  record: T,\n  read: (record: T, field: string) => unknown = (item, field) =>\n    (item as Record<string, unknown> | null)?.[field],\n): boolean {\n  return evaluate(condition, record, read) ?? true;\n}\n\n/** 求值；不加条件（没填完整的比较、空的组）时是 undefined，同 SQL 端丢掉空条件 */\nfunction evaluate<T>(\n  condition: Condition,\n  record: T,\n  read: (record: T, field: string) => unknown,\n): boolean | undefined {\n  if ('not' in condition) {\n    const inner = evaluate(condition.not, record, read);\n    return inner === undefined ? undefined : !inner;\n  }\n  if ('all' in condition || 'any' in condition) {\n    const results = ('all' in condition ? condition.all : condition.any)\n      .map((item) => evaluate(item, record, read))\n      .filter((result) => result !== undefined);\n    if (results.length === 0) return undefined;\n    return 'all' in condition ? results.every(Boolean) : results.some(Boolean);\n  }\n  if (!isRuleComplete(condition)) return undefined;\n  return matchesRule(condition, read(record, condition.field));\n}\n\n/** 比较方式的文字：日期、选项、是否这几种类型有自己的说法（早于、是其中之一） */\nexport function operatorLabel(lang: Lang, type: ConditionFieldType, op: ConditionOp): string {\n  return lang.conditionTypeOperators[type]?.[op] ?? lang.conditionOperators[op];\n}\n\n/** 值在摘要里的写法 */\nexport function formatConditionValue(\n  lang: Lang,\n  field: ConditionField | undefined,\n  value: unknown,\n) {\n  const one = (item: unknown): string => {\n    if (field?.format) return field.format(item);\n    if (field?.type === 'boolean') return item ? lang.conditionTrue : lang.conditionFalse;\n    const option = field?.options?.find((candidate) => candidate.value === item);\n    if (option) return option.label;\n    if (typeof item === 'number') return item.toLocaleString(lang.code);\n    return toText(item);\n  };\n  if (Array.isArray(value)) return value.map(one).join(lang.conditionValueSeparator);\n  return one(value);\n}\n\n/**\n * 条件写成一句话：收起的高级筛选、流程连线上的条件摘要用。不认识的字段原样写字段名；\n * 嵌套的组加括号，not 写成“不满足：…”\n */\nexport function describeCondition(\n  condition: Condition,\n  fields: readonly ConditionField[],\n  lang: Lang,\n): string {\n  const describe = (item: Condition, nested: boolean): string => {\n    if ('not' in item) return `${lang.conditionNotPrefix}${describe(item.not, true)}`;\n    if ('all' in item || 'any' in item) {\n      const list = 'all' in item ? item.all : item.any;\n      const joiner = 'all' in item ? lang.conditionAndJoiner : lang.conditionOrJoiner;\n      const text = list.map((child) => describe(child, true)).join(joiner);\n      return nested && list.length > 1 ? `（${text}）` : text;\n    }\n    const field = fields.find((candidate) => candidate.name === item.field);\n    const parts = [field?.label ?? item.field, operatorLabel(lang, field?.type ?? 'text', item.op)];\n    const shape = valueShape(item.op);\n    if (shape === 'range') {\n      const [low, high] = Array.isArray(item.value) ? item.value : [];\n      parts.push(\n        lang.conditionRange(\n          formatConditionValue(lang, field, low),\n          formatConditionValue(lang, field, high),\n        ),\n      );\n    } else if (shape !== 'none') {\n      parts.push(formatConditionValue(lang, field, item.value));\n    }\n    return parts.join(' ');\n  };\n  return describe(condition, false);\n}\n"],"mappings":"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"}

package/dist/input/control.d.ts

@@ -0,0 +1,160 @@
+/**
+ * 输入框外壳：配方、外观选项、前置图标与交互小工具。TextField、Textarea、NumberField、Select、Combobox、
+ * TagsInput 与日期输入框共用。
+ * 外壳是包着原生 input 的 div：边框、悬停、焦点环（:focus-within）、出错、不可用、只读都画在外壳上，
+ * input 本身透明无边框，所以图标、清除按钮、步进按钮可以放进框里。尺寸用 em，随 size 缩放（COMPONENTS.md §3）。
+ */
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PresetIconButtonProps } from '../base/CloseButton';
+import { type IconData, type IconProps } from '../base/Icon';
+import { useRecipe, type PartLayer } from '../config/styles';
+import { type PartProps } from '../utils/props';
+import { type AttachedOrientations } from '../utils/style/attached';
+import { type Radius } from '../utils/style/styles';
+import { type TextSize } from '../utils/style/typography';
+/** 输入框的样式 */
+export interface ControlVariants {
+    /** 表面色加描边（默认） */
+    surface: unknown;
+    /** 浅色底，没有描边：表单很密、或放在有底色的区域里 */
+    soft: unknown;
+}
+/** 输入框的外观选项；可以用 createUi / Provider 的 defaults.Input 统一改默认值 */
+export interface ControlOptions {
+    /** 样式，默认 surface */
+    variant?: keyof ControlVariants;
+    /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */
+    size?: TextSize;
+    /** 圆角，与按钮同一套档位，默认 md；搜索框常用 full（胶囊形） */
+    radius?: Radius;
+}
+/** 框里最前面的图标（搜索、日历、地球……）：各种输入框共有 */
+export interface ControlIconOptions {
+    /** 前置图标 */
+    icon?: IconData;
+    /** 前置图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+}
+/** 外壳的状态：出错、不可用、只读 */
+export interface ControlState {
+    /** 校验未通过：红色描边与焦点环 */
+    invalid?: boolean;
+    /** 不可用：变淡 */
+    disabled?: boolean;
+    /** 只读：底色变浅，不显示悬停 */
+    readonly?: boolean;
+}
+/**
+ * 输入框外壳的配方：部件 root（外壳 div）、input（原生 input / textarea）、icon（前后的图标）、
+ * affix（前后缀文字）、button（框里的小按钮：清除、显示密码、步进）。
+ * 档位是样式（variant）、在 ControlGroup 里的方向（attached）与外壳的状态；圆角、相连、字号用共用的样式表，
+ * 由 controlParts 叠在配方之后
+ */
+export declare const inputRecipe: css.Recipe<"affix" | "button" | "icon" | "input" | "root", {
+    readonly variant: {
+        readonly surface: {};
+        readonly soft: {
+            readonly root: {
+                readonly borderColor: {
+                    readonly default: "transparent";
+                    readonly ':hover': "transparent";
+                };
+                readonly backgroundColor: "_fill";
+            };
+        };
+    };
+    readonly attached: {
+        readonly horizontal: {
+            readonly root: {
+                readonly flexGrow: 1;
+            };
+        };
+        readonly vertical: {};
+    };
+    readonly readonly: {
+        readonly true: {
+            readonly root: {
+                readonly borderColor: {
+                    readonly default: "_borderMuted";
+                    readonly ':hover': "_borderMuted";
+                };
+                readonly backgroundColor: "_fill";
+            };
+        };
+    };
+    readonly invalid: {
+        readonly true: {
+            readonly root: {
+                readonly borderColor: {
+                    readonly default: "_danger";
+                    readonly ':hover': "_danger";
+                };
+                readonly outlineColor: "_danger";
+            };
+        };
+    };
+    readonly disabled: {
+        readonly true: {
+            readonly root: {
+                readonly opacity: "_disabled";
+                readonly cursor: "not-allowed";
+            };
+        };
+    };
+    readonly multiline: {
+        readonly true: {
+            readonly root: {
+                readonly alignItems: "stretch";
+                readonly paddingBlock: "_xs";
+            };
+        };
+    };
+}>;
+/** 输入框外壳的部件（createUi / Provider 的 styles.Input 按它定制） */
+export type InputPart = (typeof inputRecipe.parts)[number];
+/**
+ * 外壳各部件交给 mergeAttrs / mergeProps 的默认层：样式与部件标记（data-scope="input"）。
+ * 要加样式时写 `{ ...s.root, sx: [s.root.sx, 别的] }`
+ */
+export type ControlParts = {
+    readonly [Part in InputPart]: Omit<PartLayer, 'sx'> & {
+        readonly sx: SxStyles;
+    };
+};
+/** 外壳里的图标（前置、后置）：次要颜色、不被挤压；没有图标时不渲染 */
+export declare function controlIcon(parts: ControlParts, icon: IconData | undefined, props?: Partial<IconProps>): VNodeChild;
+/** 外壳里的清空按钮：圆形、名称取语言包（清空）；有值、可编辑时才渲染由调用方决定 */
+export declare function controlClear(parts: ControlParts, props: Partial<PresetIconButtonProps> | undefined, onClick: () => void): VNodeChild;
+/**
+ * 外壳里的前缀、后缀文字（币种、单位）：用指向输入框的 label，读屏把单位念进名称（“年度预算 万元”），
+ * 不可用时也算作不可用控件的文字（不要求对比度）；没有内容时不渲染
+ */
+export declare function controlAffix(parts: ControlParts, content: VNodeChild, inputId: string, props?: PartProps<'label'>): VNodeChild;
+/** 合并后的外观（默认值已填上）；在 ControlGroup 里时带上相连的方向 */
+export type ControlAppearance = Required<Pick<ControlOptions, 'variant' | 'radius'>> & Pick<ControlOptions, 'size'> & {
+    attached?: keyof AttachedOrientations;
+    /** 外壳的配方，带上 createUi / Provider 里 styles.Input 的定制 */
+    recipe: ReturnType<typeof useRecipe<InputPart, unknown>>;
+};
+/**
+ * 输入框的外观：显式写的 prop > createUi / Provider 的 defaults.Input > 默认（surface）。
+ * 在 setup 里调用，返回的函数在渲染时调用
+ */
+export declare function useControlAppearance(read: () => ControlOptions): () => ControlAppearance;
+/**
+ * 外观与状态 → 外壳各部件的默认层；multiline 给 Textarea。
+ * 外壳在配方之后叠上圆角、相连、字号；焦点环排在配方之前，出错档位的红色焦点环才盖得过它
+ */
+export declare function controlParts({ variant, size, radius, attached, recipe }: ControlAppearance, { invalid, disabled, readonly }: ControlState, multiline?: boolean): ControlParts;
+/**
+ * 外壳的 onPointerdown：点在外壳的空白处时把焦点交给主元素（input、触发按钮），不让浏览器把焦点放到别处；
+ * 点在主元素或框里的按钮上时照常
+ */
+export declare function focusOnShell(main: () => HTMLElement | null): (event: PointerEvent) => void;
+/**
+ * 外壳的 onClick：点在外壳的空白处时调用 action（Select、TreeSelect 据此切换打开，与点触发按钮一样）。
+ * 不在 pointerdown 里打开：原生 popover="auto" 在 pointerup 时把“按下时还没打开”的浮层当作点在外面关掉
+ */
+export declare function clickOnShell(main: () => HTMLElement | null, action: (event: MouseEvent) => void): (event: MouseEvent) => void;

package/dist/input/control.js

@@ -0,0 +1,236 @@
+import { t } from "../config/theme/tokens.js";
+import { useDefaults } from "../config/defaults.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { focusRingStyles, radiusStyles } from "../utils/style/styles.js";
+import { useRecipe } from "../config/styles.js";
+import { Icon } from "../base/Icon.js";
+import { AttachedContext, attachedStyles } from "../utils/style/attached.js";
+import { ClearButton } from "../base/CloseButton.js";
+import { createVNode } from "vue";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/control.tsx
+/**
+* 输入框外壳：配方、外观选项、前置图标与交互小工具。TextField、Textarea、NumberField、Select、Combobox、
+* TagsInput 与日期输入框共用。
+* 外壳是包着原生 input 的 div：边框、悬停、焦点环（:focus-within）、出错、不可用、只读都画在外壳上，
+* input 本身透明无边框，所以图标、清除按钮、步进按钮可以放进框里。尺寸用 em，随 size 缩放（COMPONENTS.md §3）。
+*/
+/** 输入框的样式 */
+/** 输入框的外观选项；可以用 createUi / Provider 的 defaults.Input 统一改默认值 */
+/** 框里最前面的图标（搜索、日历、地球……）：各种输入框共有 */
+/** 外壳的状态：出错、不可用、只读 */
+/**
+* 输入框外壳的配方：部件 root（外壳 div）、input（原生 input / textarea）、icon（前后的图标）、
+* affix（前后缀文字）、button（框里的小按钮：清除、显示密码、步进）。
+* 档位是样式（variant）、在 ControlGroup 里的方向（attached）与外壳的状态；圆角、相连、字号用共用的样式表，
+* 由 controlParts 叠在配方之后
+*/
+var inputRecipe = css.recipe({
+	name: "Input",
+	parts: [
+		"root",
+		"input",
+		"icon",
+		"affix",
+		"button"
+	],
+	base: {
+		root: {
+			boxSizing: "border-box",
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "_sm",
+			minWidth: 0,
+			minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+			paddingInline: "_md",
+			borderWidth: "_xs",
+			borderStyle: "solid",
+			borderColor: {
+				default: "_border",
+				":hover": "_borderStrong"
+			},
+			borderRadius: "_md",
+			backgroundColor: "_surface",
+			color: "_text",
+			lineHeight: "_normal",
+			cursor: "text",
+			transition: `border-color ${t.durations.sm} ${t.easings.standard}`
+		},
+		input: {
+			alignSelf: "baseline",
+			boxSizing: "border-box",
+			flexGrow: 1,
+			minWidth: 0,
+			minHeight: `calc(max(${t.sizes.control}, ${t.sizes.minTarget}) - 2 * ${t.borderWidths.xs})`,
+			margin: 0,
+			paddingBlock: "_xs",
+			paddingInline: 0,
+			borderWidth: 0,
+			outlineStyle: "none",
+			backgroundColor: "transparent",
+			color: "inherit",
+			font: "inherit",
+			cursor: "inherit",
+			"::placeholder": {
+				color: "_textPlaceholder",
+				opacity: 1
+			}
+		},
+		icon: {
+			flexShrink: 0,
+			color: "_textMuted"
+		},
+		affix: {
+			flexShrink: 0,
+			color: "_textMuted",
+			whiteSpace: "nowrap"
+		},
+		button: {
+			flexShrink: 0,
+			width: `max(1.5em, ${t.sizes.minTarget})`,
+			minHeight: `max(1.5em, ${t.sizes.minTarget})`,
+			marginInline: `calc(-1 * ${t.space.xs})`,
+			color: "_textMuted"
+		}
+	},
+	variants: {
+		variant: {
+			surface: {},
+			soft: { root: {
+				borderColor: {
+					default: "transparent",
+					":hover": "transparent"
+				},
+				backgroundColor: "_fill"
+			} }
+		},
+		attached: {
+			horizontal: { root: { flexGrow: 1 } },
+			vertical: {}
+		},
+		readonly: { true: { root: {
+			borderColor: {
+				default: "_borderMuted",
+				":hover": "_borderMuted"
+			},
+			backgroundColor: "_fill"
+		} } },
+		invalid: { true: { root: {
+			borderColor: {
+				default: "_danger",
+				":hover": "_danger"
+			},
+			outlineColor: "_danger"
+		} } },
+		disabled: { true: { root: {
+			opacity: "_disabled",
+			cursor: "not-allowed"
+		} } },
+		multiline: { true: { root: {
+			alignItems: "stretch",
+			paddingBlock: "_xs"
+		} } }
+	}
+});
+/** 输入框外壳的部件（createUi / Provider 的 styles.Input 按它定制） */
+/**
+* 外壳各部件交给 mergeAttrs / mergeProps 的默认层：样式与部件标记（data-scope="input"）。
+* 要加样式时写 `{ ...s.root, sx: [s.root.sx, 别的] }`
+*/
+/** 外壳里的图标（前置、后置）：次要颜色、不被挤压；没有图标时不渲染 */
+function controlIcon(parts, icon, props) {
+	return icon ? createVNode(Icon, mergePartProps({
+		...parts.icon,
+		icon
+	}, props), null) : null;
+}
+/** 外壳里的清空按钮：圆形、名称取语言包（清空）；有值、可编辑时才渲染由调用方决定 */
+function controlClear(parts, props, onClick) {
+	return createVNode(ClearButton, mergePartProps({
+		...parts.button,
+		radius: "full"
+	}, props, { onClick }), null);
+}
+/**
+* 外壳里的前缀、后缀文字（币种、单位）：用指向输入框的 label，读屏把单位念进名称（“年度预算 万元”），
+* 不可用时也算作不可用控件的文字（不要求对比度）；没有内容时不渲染
+*/
+function controlAffix(parts, content, inputId, props) {
+	return content == null ? null : createVNode("label", mergeAttrs(parts.affix, props, { for: inputId }), [content]);
+}
+/** 合并后的外观（默认值已填上）；在 ControlGroup 里时带上相连的方向 */
+/**
+* 输入框的外观：显式写的 prop > createUi / Provider 的 defaults.Input > 默认（surface）。
+* 在 setup 里调用，返回的函数在渲染时调用
+*/
+function useControlAppearance(read) {
+	const group = AttachedContext.inject(null);
+	const recipe = useRecipe(inputRecipe);
+	const appearance = useDefaults("Input", read, {
+		variant: "surface",
+		radius: "md"
+	});
+	return () => ({
+		...appearance(),
+		attached: group?.orientation,
+		recipe
+	});
+}
+/**
+* 外观与状态 → 外壳各部件的默认层；multiline 给 Textarea。
+* 外壳在配方之后叠上圆角、相连、字号；焦点环排在配方之前，出错档位的红色焦点环才盖得过它
+*/
+function controlParts({ variant, size, radius, attached, recipe }, { invalid, disabled, readonly }, multiline = false) {
+	const parts = recipe({
+		variant,
+		attached,
+		readonly,
+		invalid,
+		disabled,
+		multiline
+	});
+	return {
+		...parts,
+		root: {
+			...parts.root,
+			sx: [
+				focusRingStyles.within,
+				parts.root.sx,
+				radiusStyles[radius],
+				attached && attachedStyles[attached],
+				size && fontSizeStyles[size]
+			]
+		}
+	};
+}
+/** 点在外壳的空白处（内边距、图标、标签上）：不是主元素本身，也不是框里的按钮 */
+function isShellBlank(target, element) {
+	return target !== element && !element.contains(target) && !target.closest("button");
+}
+/**
+* 外壳的 onPointerdown：点在外壳的空白处时把焦点交给主元素（input、触发按钮），不让浏览器把焦点放到别处；
+* 点在主元素或框里的按钮上时照常
+*/
+function focusOnShell(main) {
+	return (event) => {
+		const element = main();
+		if (!element || !isShellBlank(event.target, element)) return;
+		event.preventDefault();
+		element.focus();
+	};
+}
+/**
+* 外壳的 onClick：点在外壳的空白处时调用 action（Select、TreeSelect 据此切换打开，与点触发按钮一样）。
+* 不在 pointerdown 里打开：原生 popover="auto" 在 pointerup 时把“按下时还没打开”的浮层当作点在外面关掉
+*/
+function clickOnShell(main, action) {
+	return (event) => {
+		const element = main();
+		if (element && isShellBlank(event.target, element)) action(event);
+	};
+}
+//#endregion
+export { clickOnShell, controlAffix, controlClear, controlIcon, controlParts, focusOnShell, inputRecipe, useControlAppearance };
+
+//# sourceMappingURL=control.js.map

package/dist/input/control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","names":["_createVNode"],"sources":["../../src/input/control.tsx"],"sourcesContent":["/**\n * 输入框外壳：配方、外观选项、前置图标与交互小工具。TextField、Textarea、NumberField、Select、Combobox、\n * TagsInput 与日期输入框共用。\n * 外壳是包着原生 input 的 div：边框、悬停、焦点环（:focus-within）、出错、不可用、只读都画在外壳上，\n * input 本身透明无边框，所以图标、清除按钮、步进按钮可以放进框里。尺寸用 em，随 size 缩放（COMPONENTS.md §3）。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { ClearButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe, type PartLayer } from '../config/styles';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  AttachedContext,\n  attachedStyles,\n  type AttachedOrientations,\n} from '../utils/style/attached';\nimport { focusRingStyles, radiusStyles, type Radius } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 输入框的样式 */\nexport interface ControlVariants {\n  /** 表面色加描边（默认） */\n  surface: unknown;\n  /** 浅色底，没有描边：表单很密、或放在有底色的区域里 */\n  soft: unknown;\n}\n\n/** 输入框的外观选项；可以用 createUi / Provider 的 defaults.Input 统一改默认值 */\nexport interface ControlOptions {\n  /** 样式，默认 surface */\n  variant?: keyof ControlVariants;\n  /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 圆角，与按钮同一套档位，默认 md；搜索框常用 full（胶囊形） */\n  radius?: Radius;\n}\n\n/** 框里最前面的图标（搜索、日历、地球……）：各种输入框共有 */\nexport interface ControlIconOptions {\n  /** 前置图标 */\n  icon?: IconData;\n  /** 前置图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\n/** 外壳的状态：出错、不可用、只读 */\nexport interface ControlState {\n  /** 校验未通过：红色描边与焦点环 */\n  invalid?: boolean;\n  /** 不可用：变淡 */\n  disabled?: boolean;\n  /** 只读：底色变浅，不显示悬停 */\n  readonly?: boolean;\n}\n\n/**\n * 输入框外壳的配方：部件 root（外壳 div）、input（原生 input / textarea）、icon（前后的图标）、\n * affix（前后缀文字）、button（框里的小按钮：清除、显示密码、步进）。\n * 档位是样式（variant）、在 ControlGroup 里的方向（attached）与外壳的状态；圆角、相连、字号用共用的样式表，\n * 由 controlParts 叠在配方之后\n */\nexport const inputRecipe = css.recipe({\n  name: 'Input',\n  parts: ['root', 'input', 'icon', 'affix', 'button'],\n  base: {\n    root: {\n      boxSizing: 'border-box',\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '_sm',\n      minWidth: 0,\n      minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n      paddingInline: '_md',\n      borderWidth: '_xs',\n      borderStyle: 'solid',\n      borderColor: { default: '_border', ':hover': '_borderStrong' },\n      borderRadius: '_md',\n      backgroundColor: '_surface',\n      color: '_text',\n      lineHeight: '_normal',\n      cursor: 'text',\n      transition: `border-color ${t.durations.sm} ${t.easings.standard}`,\n    },\n    // 原生 input / textarea：透明、无边框，占满剩余宽度，字体继承外壳。\n    // 参与基线对齐、高度撑满外壳：外壳（flex）的基线取输入框文字的基线，而不是排在前面的图标的底边，\n    // 左标签（按基线对齐）才与输入的文字在同一条线上；原生输入框自己把文字竖直居中\n    input: {\n      alignSelf: 'baseline',\n      boxSizing: 'border-box',\n      flexGrow: 1,\n      minWidth: 0,\n      minHeight: `calc(max(${t.sizes.control}, ${t.sizes.minTarget}) - 2 * ${t.borderWidths.xs})`,\n      margin: 0,\n      paddingBlock: '_xs',\n      paddingInline: 0,\n      borderWidth: 0,\n      outlineStyle: 'none',\n      backgroundColor: 'transparent',\n      color: 'inherit',\n      font: 'inherit',\n      cursor: 'inherit',\n      '::placeholder': { color: '_textPlaceholder', opacity: 1 },\n    },\n    // 前后的图标：次要颜色\n    icon: { flexShrink: 0, color: '_textMuted' },\n    // 前后缀文字（如 https://、元）：次要颜色，不换行\n    affix: { flexShrink: 0, color: '_textMuted', whiteSpace: 'nowrap' },\n    // 框里的小按钮：比独立的图标按钮紧凑，仍不小于 24px 的点击区域\n    button: {\n      flexShrink: 0,\n      width: `max(1.5em, ${t.sizes.minTarget})`,\n      minHeight: `max(1.5em, ${t.sizes.minTarget})`,\n      marginInline: `calc(-1 * ${t.space.xs})`,\n      color: '_textMuted',\n    },\n  },\n  // 档位的先后就是覆盖的先后：只读、出错依次盖过样式的描边与底色\n  variants: {\n    variant: {\n      surface: {},\n      soft: {\n        root: {\n          borderColor: { default: 'transparent', ':hover': 'transparent' },\n          backgroundColor: '_fill',\n        },\n      },\n    },\n    // 在横排的 ControlGroup 里：输入框分掉剩余宽度（选择框按内容宽，见 selectStyles.root）\n    attached: { horizontal: { root: { flexGrow: 1 } }, vertical: {} },\n    readonly: {\n      true: {\n        root: {\n          borderColor: { default: '_borderMuted', ':hover': '_borderMuted' },\n          backgroundColor: '_fill',\n        },\n      },\n    },\n    invalid: {\n      true: {\n        root: {\n          borderColor: { default: '_danger', ':hover': '_danger' },\n          outlineColor: '_danger',\n        },\n      },\n    },\n    disabled: { true: { root: { opacity: '_disabled', cursor: 'not-allowed' } } },\n    // 多行（Textarea）：内容从顶部开始，上下也留内边距\n    multiline: { true: { root: { alignItems: 'stretch', paddingBlock: '_xs' } } },\n  },\n});\n\n/** 输入框外壳的部件（createUi / Provider 的 styles.Input 按它定制） */\nexport type InputPart = (typeof inputRecipe.parts)[number];\n\n/**\n * 外壳各部件交给 mergeAttrs / mergeProps 的默认层：样式与部件标记（data-scope=\"input\"）。\n * 要加样式时写 `{ ...s.root, sx: [s.root.sx, 别的] }`\n */\nexport type ControlParts = {\n  readonly [Part in InputPart]: Omit<PartLayer, 'sx'> & { readonly sx: SxStyles };\n};\n\n/** 外壳里的图标（前置、后置）：次要颜色、不被挤压；没有图标时不渲染 */\nexport function controlIcon(\n  parts: ControlParts,\n  icon: IconData | undefined,\n  props?: Partial<IconProps>,\n): VNodeChild {\n  return icon ? <Icon {...mergePartProps<IconProps>({ ...parts.icon, icon }, props)} /> : null;\n}\n\n/** 外壳里的清空按钮：圆形、名称取语言包（清空）；有值、可编辑时才渲染由调用方决定 */\nexport function controlClear(\n  parts: ControlParts,\n  props: Partial<PresetIconButtonProps> | undefined,\n  onClick: () => void,\n): VNodeChild {\n  return (\n    <ClearButton\n      {...mergePartProps<PresetIconButtonProps>({ ...parts.button, radius: 'full' }, props, {\n        onClick,\n      })}\n    />\n  );\n}\n\n/**\n * 外壳里的前缀、后缀文字（币种、单位）：用指向输入框的 label，读屏把单位念进名称（“年度预算 万元”），\n * 不可用时也算作不可用控件的文字（不要求对比度）；没有内容时不渲染\n */\nexport function controlAffix(\n  parts: ControlParts,\n  content: VNodeChild,\n  inputId: string,\n  props?: PartProps<'label'>,\n): VNodeChild {\n  return content == null ? null : (\n    <label {...mergeAttrs<'label'>(parts.affix, props, { for: inputId })}>{content}</label>\n  );\n}\n\n/** 合并后的外观（默认值已填上）；在 ControlGroup 里时带上相连的方向 */\nexport type ControlAppearance = Required<Pick<ControlOptions, 'variant' | 'radius'>> &\n  Pick<ControlOptions, 'size'> & {\n    attached?: keyof AttachedOrientations;\n    /** 外壳的配方，带上 createUi / Provider 里 styles.Input 的定制 */\n    recipe: ReturnType<typeof useRecipe<InputPart, unknown>>;\n  };\n\n/**\n * 输入框的外观：显式写的 prop > createUi / Provider 的 defaults.Input > 默认（surface）。\n * 在 setup 里调用，返回的函数在渲染时调用\n */\nexport function useControlAppearance(read: () => ControlOptions): () => ControlAppearance {\n  const group = AttachedContext.inject(null);\n  const recipe = useRecipe(inputRecipe);\n  const appearance = useDefaults('Input', read, { variant: 'surface', radius: 'md' });\n  return () => ({ ...appearance(), attached: group?.orientation, recipe });\n}\n\n/**\n * 外观与状态 → 外壳各部件的默认层；multiline 给 Textarea。\n * 外壳在配方之后叠上圆角、相连、字号；焦点环排在配方之前，出错档位的红色焦点环才盖得过它\n */\nexport function controlParts(\n  { variant, size, radius, attached, recipe }: ControlAppearance,\n  { invalid, disabled, readonly }: ControlState,\n  multiline = false,\n): ControlParts {\n  const parts = recipe({ variant, attached, readonly, invalid, disabled, multiline });\n  return {\n    ...parts,\n    root: {\n      ...parts.root,\n      sx: [\n        focusRingStyles.within,\n        parts.root.sx,\n        radiusStyles[radius],\n        attached && attachedStyles[attached],\n        size && fontSizeStyles[size],\n      ],\n    },\n  };\n}\n\n/** 点在外壳的空白处（内边距、图标、标签上）：不是主元素本身，也不是框里的按钮 */\nfunction isShellBlank(target: Element, element: HTMLElement): boolean {\n  return target !== element && !element.contains(target) && !target.closest('button');\n}\n\n/**\n * 外壳的 onPointerdown：点在外壳的空白处时把焦点交给主元素（input、触发按钮），不让浏览器把焦点放到别处；\n * 点在主元素或框里的按钮上时照常\n */\nexport function focusOnShell(main: () => HTMLElement | null): (event: PointerEvent) => void {\n  return (event) => {\n    const element = main();\n    if (!element || !isShellBlank(event.target as Element, element)) return;\n    event.preventDefault();\n    element.focus();\n  };\n}\n\n/**\n * 外壳的 onClick：点在外壳的空白处时调用 action（Select、TreeSelect 据此切换打开，与点触发按钮一样）。\n * 不在 pointerdown 里打开：原生 popover=\"auto\" 在 pointerup 时把“按下时还没打开”的浮层当作点在外面关掉\n */\nexport function clickOnShell(\n  main: () => HTMLElement | null,\n  action: (event: MouseEvent) => void,\n): (event: MouseEvent) => void {\n  return (event) => {\n    const element = main();\n    if (element && isShellBlank(event.target as Element, element)) action(event);\n  };\n}\n"],"mappings":"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"}