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

package/dist/patterns/DataImport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataImport.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vue_shallowRef","_createVNode","_vue_unref","_mergeProps"],"sources":["../../src/patterns/DataImport.tsx"],"sourcesContent":["/**\n * 数据导入：上传文件 → 对应列 → 逐行校验与预览（有错的格子就地改）→ 确认导入。批量导入零件、报价、人员这类数据用它。\n *\n *   <DataImport\n *     fields={[{ key: 'part', label: '零件号', required: true, aliases: ['料号'] }, { key: 'quantity', label: '数量', type: 'number' }]}\n *     schema={z.object({ part: z.string().min(1), quantity: z.number().int().positive() })}\n *     parse={readXlsx}                 // 读 Excel：@zerodep-dev/vue-tsx-pro-ui/xlsx；不写时读 CSV\n *     accept=\".xlsx,.csv\"\n *     onImport={(rows) => api.importParts(rows)}\n *   />\n *\n * - 上传：选文件或拖进来，parse 读成表（SheetTable）；几张工作表时先选一张。\n * - 对应列：按字段的 label 与 aliases 自动对上文件里的列，可以改；必填的字段没对上时不能往下走。\n * - 校验：空的格子（空字符串、只有空白）是 null，同 useForm 的约定（选填的字段在 schema 里写 .nullable()）。\n *   有 schema（zod 对象）时逐行解析，错误标在对应的格子上；没有时按 required、type（数字列要是数字）检查，\n *   也可以写 validate。有错的格子可以直接改（表格就地编辑），改完重新校验；“只看有错的行”筛出要处理的。\n * - 导入：onImport 拿到通过校验的行（schema 解析后的值）；返回 Promise 时按钮加载中，完成后显示结果。\n *\n * 部件：Root（div）、Steps、Drop（FileDrop）、Mapping（ColumnTable）、Preview（DataTable）、Actions（Flex）。\n */\nimport { CircleAlert, CircleCheck, Download } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shallowRef, type VNodeChild } from 'vue';\nimport type { $ZodType } from 'zod/v4/core';\nimport { safeParse } from 'zod/v4/core';\nimport { Badge } from '../base/Badge';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { Icon } from '../base/Icon';\nimport { Small } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { useMessages } from '../config/lang/messages';\nimport { Alert } from '../feedback/Alert';\nimport { FileDrop, type FileDropProps } from '../input/FileDrop';\nimport { Select } from '../input/Select';\nimport { Switch } from '../input/Switch';\nimport { Flex, type FlexProps } from '../layout/Flex';\nimport { Steps, type StepsProps } from '../navigation/Steps';\nimport type { DataTableColumn } from '../table/columns';\nimport { ColumnTable } from '../table/ColumnTable';\nimport { DataTable, type DataTableProps } from '../table/DataTable';\nimport { readCsvFile, type SheetTable, type SheetValue } from '../table/sheet';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { patternsMessages } from './messages';\n\n/** 要导入的一个字段 */\nexport interface ImportField {\n  /** 字段名：导入的行里的键 */\n  key: string;\n  /** 名称：对应列时显示，也用来自动对上文件里的同名列 */\n  label: string;\n  /** 必填：没对应上不能往下走；没有 schema 时空值算错 */\n  required?: boolean;\n  /** 文件里这一列可能的其他叫法（“料号”“Part No.”）：自动对应时也认 */\n  aliases?: readonly string[];\n  /** 值的类型（没有 schema 时）：number 把文字转成数字，转不了算错；默认 text */\n  type?: 'text' | 'number';\n  /** 预览表里这一列的宽度（px） */\n  width?: number;\n}\n\n/** 预览里的一行 */\ninterface ImportRow {\n  /** 第几行数据（从 1 起） */\n  line: number;\n  /** 对应后的原值（字段名 → 值），就地改的是它 */\n  raw: Record<string, unknown>;\n  /** 校验通过后的值 */\n  value?: unknown;\n  /** 字段名 → 原因 */\n  errors: Record<string, string>;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface DataImportProps<Row> extends PartProps<'div'> {\n  /** 要导入的字段，按显示的顺序 */\n  fields: readonly ImportField[];\n  /** 一行的 zod 对象 schema：逐行解析，错误标在格子上，onImport 拿到解析后的值 */\n  schema?: $ZodType<Row>;\n  /** 没有 schema 时的逐行校验：返回字段名 → 原因（在 required、type 的检查之后） */\n  validate?: (row: Record<string, unknown>) => Record<string, string> | null | undefined;\n  /** 读文件：返回各工作表；默认读 CSV（readCsvFile），读 Excel 传 @zerodep-dev/vue-tsx-pro-ui/xlsx 的 readXlsx */\n  parse?: (file: File) => Promise<SheetTable[]>;\n  /** 能选的文件类型，默认 .csv */\n  accept?: string;\n  /** 导入通过校验的行：返回 Promise 时按钮加载中，失败时留在预览（由调用方提示原因） */\n  onImport: (rows: Row[]) => unknown;\n  /** 下载模板：写了就在上传区旁边放“下载模板” */\n  onTemplate?: () => void;\n  /** 步骤条的部件属性 */\n  propsSteps?: Partial<StepsProps>;\n  /** 选文件区域的部件属性 */\n  propsDrop?: Partial<FileDropProps>;\n  /** 预览表（DataTable）的部件属性 */\n  propsPreview?: Partial<DataTableProps<ImportRow>>;\n  /** 按钮行的部件属性 */\n  propsActions?: Partial<FlexProps>;\n  /** 导入按钮的部件属性 */\n  propsSubmit?: Partial<ButtonProps>;\n}\n\n/** DataImport 的样式：root、previewTable、validIcon、invalidIcon */\nexport const dataImportStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_lg', minWidth: 0 },\n  previewTable: { maxHeight: '24rem' },\n  validIcon: { color: '_successText' },\n  invalidIcon: { color: '_dangerText' },\n});\n\n/** 文字规范化后比较：去掉空白、括号与大小写（“零件号 (必填)”也认作“零件号”） */\nconst normalize = (text: string) =>\n  text\n    .toLowerCase()\n    .replace(/[（(][^）)]*[）)]/g, '')\n    .replace(/[\\s_*]/g, '');\n\n/** 按名称与别名对上文件里的列 */\nfunction autoMap(\n  fields: readonly ImportField[],\n  headers: readonly string[],\n): Record<string, string | null> {\n  const taken = new Set<string>();\n  return Object.fromEntries(\n    fields.map((field) => {\n      const names = [field.label, field.key, ...(field.aliases ?? [])].map(normalize);\n      const header = headers.find((item) => !taken.has(item) && names.includes(normalize(item)));\n      if (header) taken.add(header);\n      return [field.key, header ?? null];\n    }),\n  );\n}\n\n/** 空值：null、空字符串 */\nconst isEmpty = (value: unknown) =>\n  value == null || (typeof value === 'string' && value.trim() === '');\n\n/** 数据导入：上传 → 对应列 → 校验与预览 → 导入 */\nexport const DataImport = _component(\n  <Row,>({\n    fields,\n    schema,\n    validate,\n    parse = readCsvFile,\n    accept = '.csv',\n    onImport,\n    onTemplate,\n    propsSteps,\n    propsDrop,\n    propsPreview,\n    propsActions,\n    propsSubmit,\n    ...rest\n  }: DataImportProps<Row>) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const lang = useLang();\n    let step = _state(0);\n    let sheets = _state.raw<SheetTable[]>([]);\n    let sheetName = _state<string | null>(null);\n    let mapping = _state<Record<string, string | null>>({});\n    let parseError = _state('');\n    let onlyErrors = _state(false);\n    let importing = _state(false);\n    let imported = _state(0);\n    // 预览的行：就地改时整个换掉\n    const rows = shallowRef<ImportRow[]>([]);\n\n    const sheet = () => sheets.find((item) => item.name === sheetName);\n    const unmapped = () =>\n      fields.filter((field) => field.required && !mapping[field.key]).map((field) => field.label);\n\n    async function onFiles(files: File[]) {\n      const file = files[0];\n      if (!file) return;\n      parseError = '';\n      try {\n        const read = (await parse(file)).filter((item) => item.rows.length > 0);\n        if (read.length === 0) {\n          parseError = messages.dataImportEmpty;\n          return;\n        }\n        sheets = read;\n        sheetName = read[0]!.name;\n        mapping = autoMap(fields, read[0]!.headers);\n        step = 1;\n      } catch (error) {\n        parseError = messages.dataImportParseFailed(\n          error instanceof Error ? error.message : String(error),\n        );\n      }\n    }\n\n    function changeSheet(name: string | null) {\n      sheetName = name;\n      const current = sheet();\n      if (current) mapping = autoMap(fields, current.headers);\n    }\n\n    /** 校验一行：schema 优先；否则 required、type 与 validate */\n    function check(raw: Record<string, unknown>): Pick<ImportRow, 'value' | 'errors'> {\n      if (schema) {\n        const result = safeParse(schema, raw);\n        if (result.success) return { value: result.data, errors: {} };\n        const errors: Record<string, string> = {};\n        for (const issue of result.error.issues) {\n          const key = String(issue.path[0] ?? fields[0]?.key ?? '');\n          errors[key] ??= issue.message;\n        }\n        return { errors };\n      }\n      const errors: Record<string, string> = {};\n      const value: Record<string, unknown> = {};\n      for (const field of fields) {\n        const cell = raw[field.key];\n        if (isEmpty(cell)) {\n          if (field.required) errors[field.key] = lang.formRequired;\n          value[field.key] = null;\n        } else if (field.type === 'number') {\n          const number = typeof cell === 'number' ? cell : Number(String(cell).replace(/,/g, ''));\n          if (Number.isNaN(number)) errors[field.key] = messages.dataImportNotNumber;\n          value[field.key] = number;\n        } else value[field.key] = typeof cell === 'string' ? cell.trim() : cell;\n      }\n      Object.assign(errors, { ...validate?.(value), ...errors });\n      return Object.keys(errors).length ? { errors } : { value, errors };\n    }\n\n    /** 对应完：按对应关系取出各行并校验，进入预览 */\n    function preview() {\n      const current = sheet();\n      if (!current) return;\n      rows.value = current.rows.map((row, index) => {\n        const raw = Object.fromEntries(\n          fields.map((field) => {\n            const header = mapping[field.key];\n            const value = header ? (row[header] ?? null) : null;\n            return [field.key, isEmpty(value) ? null : value] as [string, SheetValue];\n          }),\n        );\n        return { line: index + 1, raw, ...check(raw) };\n      });\n      onlyErrors = false;\n      step = 2;\n    }\n\n    /** 就地改了一格：改原值、重新校验这一行 */\n    function onCellChange(row: ImportRow, key: string, value: unknown) {\n      rows.value = rows.value.map((item) => {\n        if (item !== row) return item;\n        const raw = { ...item.raw, [key]: isEmpty(value) ? null : value };\n        return { ...item, raw, ...check(raw) };\n      });\n    }\n\n    async function submit() {\n      const valid = rows.value.filter((row) => Object.keys(row.errors).length === 0);\n      importing = true;\n      try {\n        await onImport(valid.map((row) => row.value as Row));\n        imported = valid.length;\n        step = 3;\n      } catch (error) {\n        console.error('DataImport 的 onImport 失败，留在预览', error);\n      } finally {\n        importing = false;\n      }\n    }\n\n    function restart() {\n      sheets = [];\n      sheetName = null;\n      rows.value = [];\n      step = 0;\n    }\n\n    const counts = () => {\n      const invalid = rows.value.filter((row) => Object.keys(row.errors).length > 0).length;\n      return { total: rows.value.length, invalid, valid: rows.value.length - invalid };\n    };\n\n    const previewColumns = (): DataTableColumn<ImportRow>[] => [\n      { key: 'line', header: messages.dataImportRow, width: 72, value: (row) => row.line },\n      {\n        key: 'status',\n        header: messages.dataImportStatus,\n        width: 200,\n        cell: (row) => {\n          const first = Object.values(row.errors)[0];\n          return first ? (\n            <Flex align=\"center\" gap=\"xs\">\n              <Icon icon={CircleAlert} sx={dataImportStyles.invalidIcon} />\n              <Small tone=\"danger\">{first}</Small>\n            </Flex>\n          ) : (\n            <Flex align=\"center\" gap=\"xs\">\n              <Icon icon={CircleCheck} sx={dataImportStyles.validIcon} />\n              <Small tone=\"muted\">{messages.dataImportValid}</Small>\n            </Flex>\n          );\n        },\n      },\n      ...fields.map((field): DataTableColumn<ImportRow> => ({\n        key: field.key,\n        header: field.label,\n        width: field.width,\n        minWidth: 120,\n        type: field.type === 'number' ? 'number' : 'text',\n        value: (row) => row.raw[field.key] as SheetValue,\n        editable: true,\n      })),\n    ];\n\n    function renderUpload(): VNodeChild {\n      return (\n        <Flex direction=\"column\" gap=\"sm\">\n          <FileDrop\n            {...mergePartProps<FileDropProps>(\n              { accept, description: messages.dataImportAccept(accept.split(',').join(', ')) },\n              propsDrop,\n              { onFiles: (files: File[]) => void onFiles(files) },\n            )}\n          />\n          {parseError && <Alert tone=\"danger\">{parseError}</Alert>}\n          {onTemplate && (\n            <Flex justify=\"end\">\n              <Button size=\"sm\" variant=\"ghost\" icon={Download} onClick={onTemplate}>\n                {messages.dataImportTemplate}\n              </Button>\n            </Flex>\n          )}\n        </Flex>\n      );\n    }\n\n    function renderMapping(): VNodeChild {\n      const current = sheet();\n      const headers = current?.headers ?? [];\n      const missing = unmapped();\n      const sampleOf = (header: string | null) =>\n        header\n          ? (current?.rows ?? [])\n              .slice(0, 2)\n              .map((row) => row[header])\n              .filter((value) => !isEmpty(value))\n              .map(String)\n              .join('、')\n          : '';\n      return (\n        <Flex direction=\"column\" gap=\"md\">\n          {sheets.length > 1 && (\n            <Flex align=\"center\" gap=\"sm\">\n              <Small tone=\"muted\">{messages.dataImportSheet}</Small>\n              <Select\n                items={sheets.map((item) => item.name)}\n                _value={sheetName}\n                onUpdate:_value={changeSheet}\n                aria-label={messages.dataImportSheet}\n                size=\"sm\"\n              />\n            </Flex>\n          )}\n          <ColumnTable\n            rows={fields}\n            getKey={(field) => field.key}\n            aria-label={messages.dataImportSteps[1]}\n            columns={[\n              {\n                key: 'label',\n                header: messages.dataImportField,\n                cell: (field) => (\n                  <Flex align=\"center\" gap=\"xs\">\n                    {field.label}\n                    {field.required && <Badge tone=\"danger\">*</Badge>}\n                  </Flex>\n                ),\n              },\n              {\n                key: 'column',\n                header: messages.dataImportColumn,\n                width: 240,\n                cell: (field) => (\n                  <Select\n                    items={headers}\n                    _value={mapping[field.key] ?? null}\n                    onUpdate:_value={(header: string | null) =>\n                      (mapping = { ...mapping, [field.key]: header })\n                    }\n                    placeholder={messages.dataImportSkip}\n                    clearable\n                    size=\"sm\"\n                    aria-label={`${field.label}：${messages.dataImportColumn}`}\n                  />\n                ),\n              },\n              {\n                key: 'sample',\n                header: messages.dataImportSample,\n                cell: (field) => <Small tone=\"muted\">{sampleOf(mapping[field.key] ?? null)}</Small>,\n              },\n            ]}\n          />\n          {missing.length > 0 && (\n            <Alert tone=\"warning\">{messages.dataImportUnmapped(missing)}</Alert>\n          )}\n        </Flex>\n      );\n    }\n\n    function renderPreview(): VNodeChild {\n      const { total, valid, invalid } = counts();\n      const shown = onlyErrors\n        ? rows.value.filter((row) => Object.keys(row.errors).length > 0)\n        : rows.value;\n      return (\n        <Flex direction=\"column\" gap=\"sm\">\n          <Flex align=\"center\" justify=\"between\" gap=\"md\" wrap>\n            <Small>{messages.dataImportSummary(total, valid, invalid)}</Small>\n            {invalid > 0 && (\n              <Switch\n                _checked={onlyErrors}\n                onUpdate:_checked={(value: boolean) => (onlyErrors = value)}\n              >\n                {messages.dataImportOnlyErrors}\n              </Switch>\n            )}\n          </Flex>\n          <DataTable\n            {...mergePartProps<Partial<DataTableProps<ImportRow>>>(\n              {\n                'aria-label': messages.dataImportPreview,\n                propsRoot: { sx: dataImportStyles.previewTable },\n                density: 'compact',\n              },\n              propsPreview,\n            )}\n            rows={shown}\n            columns={previewColumns()}\n            getKey={(row) => String(row.line)}\n            rowTone={(row) => (Object.keys(row.errors).length ? 'danger' : undefined)}\n            validateRow={(row) => row.errors}\n            onCellChange={onCellChange}\n          />\n          {invalid > 0 && <Small tone=\"muted\">{messages.dataImportEditHint}</Small>}\n        </Flex>\n      );\n    }\n\n    return () => {\n      const { valid } = counts();\n      return (\n        <div {...mergeAttrs<'div'>({ sx: dataImportStyles.root }, rest)}>\n          <Steps\n            {...mergePartProps<StepsProps>(\n              { items: messages.dataImportSteps.map((title) => ({ title })) },\n              propsSteps,\n              { items: messages.dataImportSteps.map((title) => ({ title })) },\n            )}\n            _current={step}\n          />\n          {step === 0 && renderUpload()}\n          {step === 1 && renderMapping()}\n          {step === 2 && renderPreview()}\n          {step === 3 && (\n            <Alert tone=\"success\" title={messages.dataImportDone(imported)}>\n              <Button size=\"sm\" variant=\"soft\" onClick={restart}>\n                {messages.dataImportAgain}\n              </Button>\n            </Alert>\n          )}\n          {(step === 1 || step === 2) && (\n            <Flex {...mergePartProps<FlexProps>({ justify: 'end', gap: 'sm' }, propsActions)}>\n              <Button\n                variant=\"ghost\"\n                tone=\"neutral\"\n                onClick={() => (step === 1 ? restart() : (step = 1))}\n              >\n                {messages.stepsFormPrevious}\n              </Button>\n              {step === 1 ? (\n                <Button disabled={unmapped().length > 0} onClick={preview}>\n                  {messages.stepsFormNext}\n                </Button>\n              ) : (\n                <Button\n                  {...mergePartProps<ButtonProps>({}, propsSubmit, {\n                    disabled: valid === 0,\n                    loading: importing,\n                    onClick: () => void submit(),\n                  })}\n                >\n                  {messages.dataImportSubmit(valid)}\n                </Button>\n              )}\n            </Flex>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/patterns/DeadlineBadge.d.ts

@@ -0,0 +1,21 @@
+import { type BadgeProps } from '../base/Badge';
+/** 未声明的属性落到 Badge 上 */
+export interface DeadlineBadgeProps extends Omit<BadgeProps, 'tone' | 'children' | 'title'> {
+    /** 截止日（ISO 日期）；与 start + workdays 二选一 */
+    due?: string | null;
+    /** 开始日（ISO 日期）：截止日是它加 workdays 个工作日 */
+    start?: string;
+    /** 开始日之后几个工作日截止 */
+    workdays?: number;
+    /** 完成的日期：完成了按完成那天算，显示按时或超时完成 */
+    done?: string | null;
+    /** 今天（ISO 日期），默认按浏览器的今天 */
+    today?: string;
+    /**
+     * 剩下几个工作日以内算快到期（warning）
+     * @default 2
+     */
+    soon?: number;
+}
+/** 时限标记 */
+export declare const DeadlineBadge: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DeadlineBadgeProps>;

package/dist/patterns/DeadlineBadge.js

@@ -0,0 +1,76 @@
+import { Badge } from "../base/Badge.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { useMessages } from "../config/lang/messages.js";
+import { deadlineOf, useWorkCalendar } from "../utils/data/workdays.js";
+import { patternsMessages } from "./messages.js";
+import { createTextVNode, createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/patterns/DeadlineBadge.tsx
+/** 未声明的属性落到 Badge 上 */
+var TONES = {
+	pending: "neutral",
+	soon: "warning",
+	due: "warning",
+	overdue: "danger",
+	done: "success"
+};
+/** 时限标记 */
+var DeadlineBadge = /*#__PURE__*/ _component((_props, _ctx) => {
+	const due = readonlyProp(_props, "due");
+	const start = readonlyProp(_props, "start");
+	const workdays = readonlyProp(_props, "workdays");
+	const done = readonlyProp(_props, "done");
+	const today = readonlyProp(_props, "today");
+	const soon = readonlyProp(_props, "soon");
+	const rest = restProps(_props, _ctx, true);
+	const messages = useMessages("patterns", patternsMessages);
+	const calendar = useWorkCalendar();
+	const deadline = () => {
+		if (due.value) return deadlineOf({
+			due: due.value,
+			done: done.value,
+			today: today.value,
+			soon: soon.value
+		}, calendar);
+		if (start.value && workdays.value != null) return deadlineOf({
+			start: start.value,
+			workdays: workdays.value,
+			done: done.value,
+			today: today.value,
+			soon: soon.value
+		}, calendar);
+		return null;
+	};
+	const text = ({ state, remaining }) => {
+		switch (state) {
+			case "overdue": return messages.deadlineOverdue(-remaining);
+			case "due": return messages.deadlineDue;
+			case "done": return remaining < 0 ? messages.deadlineDoneLate(-remaining) : messages.deadlineDone;
+			default: return messages.deadlineRemaining(remaining);
+		}
+	};
+	return () => {
+		const current = deadline();
+		if (!current) return null;
+		const late = current.state === "done" && current.remaining < 0;
+		return createVNode(Badge, mergeProps(rest, {
+			"tone": late ? "danger" : TONES[current.state],
+			"title": messages.deadlineOn(current.due),
+			"data-state": current.state
+		}), { default: () => [text(current), createVNode(VisuallyHidden, null, { default: () => [createTextVNode(" "), messages.deadlineOn(current.due)] })] });
+	};
+}, {
+	name: "DeadlineBadge",
+	props: [
+		"due",
+		"start",
+		"workdays",
+		"done",
+		"today",
+		"soon"
+	]
+});
+//#endregion
+export { DeadlineBadge };
+
+//# sourceMappingURL=DeadlineBadge.js.map

package/dist/patterns/DeadlineBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeadlineBadge.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_createTextVNode"],"sources":["../../src/patterns/DeadlineBadge.tsx"],"sourcesContent":["/**\n * 时限标记：按工作日算还剩几天、今天到期、超时几天，颜色随状态（超时 danger、今天到期与快到期 warning、\n * 还早 neutral、完成 success 或超时完成 danger）。用在收件箱、待办、各种有时限的列表里。\n *\n *   <DeadlineBadge due=\"2026-10-23\" />                           截止日直接给\n *   <DeadlineBadge start={verifiedOn} workdays={10} />           开始日加几个工作日（验收完成后 10 个工作日内付款）\n *   <DeadlineBadge due={item.dueOn} done={item.completedOn} />   完成了按完成那天算\n *\n * 工作日按 createUi / Provider 的 workCalendar（法定节假日与调休），没给时只按周末。今天默认按浏览器，\n * 业务以服务器的日期为准时传 today。悬停与读屏有完整说明（截止日）。算法见 utils/data/workdays 的 deadlineOf。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { Badge, type BadgeProps } from '../base/Badge';\nimport { useMessages } from '../config/lang/messages';\nimport { patternsMessages } from './messages';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport {\n  deadlineOf,\n  useWorkCalendar,\n  type Deadline,\n  type DeadlineStates,\n} from '../utils/data/workdays';\nimport type { StatusTone } from '../utils/style/tone-styles';\n\n/** 未声明的属性落到 Badge 上 */\nexport interface DeadlineBadgeProps extends Omit<BadgeProps, 'tone' | 'children' | 'title'> {\n  /** 截止日（ISO 日期）；与 start + workdays 二选一 */\n  due?: string | null;\n  /** 开始日（ISO 日期）：截止日是它加 workdays 个工作日 */\n  start?: string;\n  /** 开始日之后几个工作日截止 */\n  workdays?: number;\n  /** 完成的日期：完成了按完成那天算，显示按时或超时完成 */\n  done?: string | null;\n  /** 今天（ISO 日期），默认按浏览器的今天 */\n  today?: string;\n  /**\n   * 剩下几个工作日以内算快到期（warning）\n   * @default 2\n   */\n  soon?: number;\n}\n\nconst TONES: Record<keyof DeadlineStates, StatusTone> = {\n  pending: 'neutral',\n  soon: 'warning',\n  due: 'warning',\n  overdue: 'danger',\n  done: 'success',\n};\n\n/** 时限标记 */\nexport const DeadlineBadge = _component(\n  ({ due, start, workdays, done, today, soon, ...rest }: DeadlineBadgeProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const calendar = useWorkCalendar();\n    const deadline = (): Deadline | null => {\n      if (due) return deadlineOf({ due, done, today, soon }, calendar);\n      if (start && workdays != null)\n        return deadlineOf({ start, workdays, done, today, soon }, calendar);\n      return null;\n    };\n    const text = ({ state, remaining }: Deadline) => {\n      switch (state) {\n        case 'overdue':\n          return messages.deadlineOverdue(-remaining);\n        case 'due':\n          return messages.deadlineDue;\n        case 'done':\n          return remaining < 0 ? messages.deadlineDoneLate(-remaining) : messages.deadlineDone;\n        default:\n          return messages.deadlineRemaining(remaining);\n      }\n    };\n    return () => {\n      const current = deadline();\n      if (!current) return null;\n      const late = current.state === 'done' && current.remaining < 0;\n      return (\n        <Badge\n          {...rest}\n          tone={late ? 'danger' : TONES[current.state]}\n          title={messages.deadlineOn(current.due)}\n          data-state={current.state}\n        >\n          {text(current)}\n          {/* title 读屏不一定念：截止日另写一份给读屏 */}\n          <VisuallyHidden> {messages.deadlineOn(current.due)}</VisuallyHidden>\n        </Badge>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;AA2CA,IAAM,QAAkD;CACtD,SAAS;CACT,MAAM;CACN,KAAK;CACL,SAAS;CACT,MAAM;AACR;;AAGA,IAAa,gBAAgB,0BAC3B,QAAA,SAA8E;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAA/B,OAAIC,UAAA,QAAA,MAAA,IAAA;CACjD,MAAM,WAAW,YAAY,YAAY,gBAAgB;CACzD,MAAM,WAAW,gBAAgB;CACjC,MAAM,iBAAkC;EACtC,IAAA,IAAA,OAAS,OAAO,WAAW;GAAE,KAAG,IAAA;GAAE,MAAI,KAAA;GAAE,OAAK,MAAA;GAAE,MAAI,KAAA;EAAC,GAAG,QAAQ;EAC/D,IAAI,MAAA,SAAS,SAAA,SAAY,MACvB,OAAO,WAAW;GAAE,OAAK,MAAA;GAAE,UAAQ,SAAA;GAAE,MAAI,KAAA;GAAE,OAAK,MAAA;GAAE,MAAI,KAAA;EAAC,GAAG,QAAQ;EACpE,OAAO;CACT;CACA,MAAM,QAAQ,EAAE,OAAO,gBAA0B;EAC/C,QAAQ,OAAR;GACE,KAAK,WACH,OAAO,SAAS,gBAAgB,CAAC,SAAS;GAC5C,KAAK,OACH,OAAO,SAAS;GAClB,KAAK,QACH,OAAO,YAAY,IAAI,SAAS,iBAAiB,CAAC,SAAS,IAAI,SAAS;GAC1E,SACE,OAAO,SAAS,kBAAkB,SAAS;EAC/C;CACF;CACA,aAAa;EACX,MAAM,UAAU,SAAS;EACzB,IAAI,CAAC,SAAS,OAAO;EACrB,MAAM,OAAO,QAAQ,UAAU,UAAU,QAAQ,YAAY;EAC7D,OAAAC,YAAA,OAAAC,WAEQ,MAAI;GAAA,QACF,OAAO,WAAW,MAAM,QAAQ;GAAM,SACrC,SAAS,WAAW,QAAQ,GAAG;GAAC,cAC3B,QAAQ;EAAK,CAAA,GAAA,EAAA,eAAA,CAExB,KAAK,OAAO,GAACD,YAAA,gBAAA,MAAA,EAAA,eAAA,CAAAE,gBAAA,GAAA,GAEI,SAAS,WAAW,QAAQ,GAAG,CAAC,EAAA,CAAA,CAAA,EAAA,CAAA;CAGxD;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/patterns/FilterBar.d.ts

@@ -0,0 +1,66 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type Condition, type ConditionField } from '../input/condition';
+import { type ConditionBuilderProps } from '../input/ConditionBuilder';
+import { type ButtonProps } from '../base/Button';
+import { type PartProps } from '../utils/props';
+import { type FieldLayout } from '../form/field-layout';
+/** 角色与提交由组件管理 */
+export type FilterBarManaged = 'role' | 'onSubmit' | 'onReset';
+/** 未声明的属性落到 form 上 */
+export interface FilterBarProps extends PartProps<'form', FilterBarManaged>, Pick<FieldLayout, 'labelPlacement' | 'labelWidth'> {
+    /** 点“查询”或在输入框里按回车 */
+    onSearch?: () => void;
+    /** 点“重置”：清空条件由使用方做（通常 Object.assign 回初始值，再查询一次） */
+    onReset?: () => void;
+    /** 查询中：“查询”按钮显示加载中 */
+    loading?: boolean;
+    /** 不常用的条件：默认收起，点“展开”才显示 */
+    more?: VNodeChild;
+    /** 是否展开了 more：父级写 _expanded={x} */
+    _expanded?: boolean;
+    /** 收起的条件里已经填了几项：大于 0 时显示在“展开”旁边 */
+    moreActive?: number;
+    /** 每个条件的最小宽度（CSS 长度），默认 `'16em'` */
+    minFieldWidth?: string;
+    /** 结束边额外的按钮：放在“重置”前面（如“导出筛选结果”） */
+    actions?: VNodeChild;
+    /** 条件栅格的部件属性 */
+    propsFields?: PartProps<'div'>;
+    /** 按钮区的部件属性 */
+    propsActions?: PartProps<'div'>;
+    /** 查询按钮的部件属性 */
+    propsSearch?: Partial<ButtonProps>;
+    /** 重置按钮的部件属性 */
+    propsReset?: Partial<ButtonProps>;
+    /** 展开收起按钮的部件属性 */
+    propsToggle?: Partial<ButtonProps>;
+    /** 收起的条件的外层（display: contents）的部件属性 */
+    propsMore?: PartProps<'div'>;
+    /** 高级筛选的字段：给了时按钮区多一个“高级筛选” */
+    conditionFields?: readonly ConditionField[];
+    /** 高级筛选的条件：父级写 _condition={condition}；没有时是 null，“重置”时清成 null */
+    _condition?: Condition | null;
+    /** 高级筛选按钮的部件属性 */
+    propsAdvancedToggle?: Partial<ButtonProps>;
+    /** 高级筛选那一行（条件构造器）的部件属性 */
+    propsAdvanced?: Partial<ConditionBuilderProps>;
+    /** 常用的条件：Field */
+    children?: VNodeChild;
+}
+/** FilterBar 的样式：root、fields、more、actions、toggleIconOpen */
+export declare const filterBarStyles: Readonly<{
+    actions: css.CompiledStyles;
+    advanced: css.CompiledStyles;
+    fields: css.CompiledStyles;
+    more: css.CompiledStyles;
+    root: css.CompiledStyles;
+    summary: css.CompiledStyles;
+    toggleIconOpen: css.CompiledStyles;
+}>;
+/** FilterBar 的样式：columns（每格的最小宽度；栅格本身至少放得下一格） */
+export declare const filterBarColumnStyles: Readonly<{
+    readonly columns: (minWidth: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 查询栏：筛选条件的栅格，查询、重置，不常用的条件可以展开收起 */
+export declare const FilterBar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<FilterBarProps>;

package/dist/patterns/FilterBar.js

@@ -0,0 +1,254 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Badge } from "../base/Badge.js";
+import { disclosureStyles } from "../utils/style/transitions.js";
+import { Button } from "../base/Button.js";
+import { Small } from "../base/Text.js";
+import { provideFieldLayout } from "../form/field-layout.js";
+import { describeCondition, isConditionGroup } from "../input/condition.js";
+import { ConditionBuilder } from "../input/ConditionBuilder.js";
+import { useMessages } from "../config/lang/messages.js";
+import { patternsMessages } from "./messages.js";
+import { createVNode, mergeProps, ref, useId } from "vue";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronDown, ListFilter } from "@lucide/icons";
+//#region src/patterns/FilterBar.tsx
+/**
+* 查询栏（form role="search"）：列表页上方的一排筛选条件，最后是“查询”“重置”；条件多时其余的收起来，点“展开”再显示。
+*
+*   <FilterBar onSearch={search} onReset={reset} more={<>…不常用的条件…</>} moreActive={2}>
+*     <Field label="项目名称"><TextField _value={query.name} /></Field>
+*     <Field label="任务类别"><Select … /></Field>
+*   </FilterBar>
+*
+* 条件排成栅格：每格不窄于 minFieldWidth，栅格多宽就放几格；按钮区在栅格的结束边，宽度随按钮、不折行，
+* 和条件的最后一行对齐（按钮再多也不会在一格里挤成两行）；容器太窄放不下时，按钮区整体换到下一行、靠结束边。
+* 默认标签在起始边、宽度随文字（labelWidth 为 auto：控件紧跟着标签，不留空白；要几行对齐时写固定宽度）。在输入框里按回车就是查询（原生表单提交）。
+* more 收起时不渲染；moreActive 是收起的条件里已经填了几项，显示在“展开”旁边，免得忘了还有条件生效。
+*
+* 高级筛选：给了 conditionFields 时按钮区多一个“高级筛选”，展开后在查询栏下面用 ConditionBuilder 编辑条件树（_condition），
+* 能表达固定条件表达不了的组合（任一满足、介于、不包含）；收起时有条件就在下面写成一句话，带“清空”。
+* “重置”同时把条件清成 null。条件是纯 JSON：交给后端（query 的条件树转 SQL）或前端 matchesCondition 筛。
+*
+*   <FilterBar onSearch={search} onReset={reset} conditionFields={fields} _condition={condition}>…</FilterBar>
+*
+* 部件：Root（form）、Fields（条件的栅格）、Field 们、More（收起的条件，display: contents）、Actions（div）、
+* Search、Reset（Button）、Toggle（展开收起的 Button）、AdvancedToggle（高级筛选的 Button）、Advanced（条件构造器那一行）。
+*/
+/** 角色与提交由组件管理 */
+/** 未声明的属性落到 form 上 */
+/** FilterBar 的样式：root、fields、more、actions、toggleIconOpen */
+var filterBarStyles = css.create({
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "flex-end",
+		columnGap: "_xl",
+		rowGap: "_md"
+	},
+	fields: {
+		display: "grid",
+		columnGap: "_xl",
+		rowGap: "_md",
+		alignItems: "start",
+		flexGrow: 1,
+		minWidth: 0
+	},
+	more: { display: "contents" },
+	actions: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		flexShrink: 0,
+		marginInlineStart: "auto"
+	},
+	toggleIconOpen: { rotate: "180deg" },
+	advanced: {
+		flexBasis: "100%",
+		padding: "_md",
+		backgroundColor: "_surfaceMuted",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderMuted",
+		borderRadius: "_md"
+	},
+	summary: {
+		flexBasis: "100%",
+		display: "flex",
+		alignItems: "baseline",
+		gap: "_sm",
+		minWidth: 0
+	}
+});
+/** FilterBar 的样式：columns（每格的最小宽度；栅格本身至少放得下一格） */
+var filterBarColumnStyles = css.create({ columns: (minWidth) => ({
+	flexBasis: minWidth,
+	gridTemplateColumns: `repeat(auto-fill, minmax(min(${minWidth}, 100%), 1fr))`
+}) });
+/** 查询栏：筛选条件的栅格，查询、重置，不常用的条件可以展开收起 */
+var FilterBar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const onSearch = readonlyProp(_props, "onSearch");
+	const onReset = readonlyProp(_props, "onReset");
+	const loading = readonlyProp(_props, "loading", false);
+	const more = readonlyProp(_props, "more");
+	const expanded = bindable(_props, "_expanded", () => false, _ctx.emit);
+	const moreActive = readonlyProp(_props, "moreActive", 0);
+	const minFieldWidth = readonlyProp(_props, "minFieldWidth", "16em");
+	const actions = readonlyProp(_props, "actions");
+	const labelPlacement = readonlyProp(_props, "labelPlacement", "start");
+	const labelWidth = readonlyProp(_props, "labelWidth", "auto");
+	const propsFields = readonlyProp(_props, "propsFields");
+	const propsActions = readonlyProp(_props, "propsActions");
+	const propsSearch = readonlyProp(_props, "propsSearch");
+	const propsReset = readonlyProp(_props, "propsReset");
+	const propsToggle = readonlyProp(_props, "propsToggle");
+	const propsMore = readonlyProp(_props, "propsMore");
+	const conditionFields = readonlyProp(_props, "conditionFields");
+	const condition = bindable(_props, "_condition", () => null, _ctx.emit);
+	const propsAdvancedToggle = readonlyProp(_props, "propsAdvancedToggle");
+	const propsAdvanced = readonlyProp(_props, "propsAdvanced");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const messages = useMessages("patterns", patternsMessages);
+	const lang = useLang();
+	const moreId = useId();
+	const advancedId = useId();
+	let advancedOpen = ref(false);
+	/** 条件里有几条比较（按钮旁的计数） */
+	const countRules = (item) => !isConditionGroup(item) ? 1 : "not" in item ? countRules(item.not) : ("all" in item ? item.all : item.any).reduce((sum, child) => sum + countRules(child), 0);
+	provideFieldLayout(() => ({
+		labelPlacement: labelPlacement.value,
+		labelWidth: labelWidth.value
+	}));
+	function onSubmit(event) {
+		event.preventDefault();
+		onSearch.value?.();
+	}
+	return () => createVNode("form", mergeProps(mergeAttrs({ sx: filterBarStyles.root }, rest, {
+		role: "search",
+		onSubmit
+	}), { "data-expanded": more.value != null ? expanded.value : void 0 }), [
+		createVNode("div", mergeAttrs({ sx: [filterBarStyles.fields, css.bind(filterBarColumnStyles.columns, () => [minFieldWidth.value], true)] }, propsFields.value), [children.value, more.value != null && expanded.value && createVNode("div", mergeAttrs({ sx: filterBarStyles.more }, propsMore.value, { id: moreId }), [more.value])]),
+		createVNode("div", mergeAttrs({ sx: filterBarStyles.actions }, propsActions.value), [
+			more.value != null && createVNode(Button, mergeProps(mergePartProps({
+				variant: "ghost",
+				tone: "neutral",
+				iconEnd: ChevronDown,
+				propsIconEnd: { sx: [disclosureStyles.icon, expanded.value && filterBarStyles.toggleIconOpen] }
+			}, propsToggle.value, {
+				type: "button",
+				"aria-expanded": expanded.value,
+				"aria-controls": expanded.value ? moreId : void 0,
+				onClick: () => expanded.value = !expanded.value
+			}), { "key": "__site1" }), {
+				default: () => [expanded.value ? messages.filterCollapse : messages.filterExpand, !expanded.value && moreActive.value > 0 && createVNode(Badge, {
+					"tone": "accent",
+					"radius": "full",
+					"key": "__site0"
+				}, {
+					default: () => [messages.filterActive(moreActive.value)],
+					$stable: true
+				})],
+				$stable: true
+			}),
+			conditionFields.value && createVNode(Button, mergeProps(mergePartProps({
+				variant: "ghost",
+				tone: "neutral",
+				icon: ListFilter
+			}, propsAdvancedToggle.value, {
+				type: "button",
+				"aria-expanded": advancedOpen.value,
+				"aria-controls": advancedOpen.value ? advancedId : void 0,
+				onClick: () => advancedOpen.value = !advancedOpen.value
+			}), { "key": "__site3" }), {
+				default: () => [messages.filterAdvanced, !advancedOpen.value && condition.value && createVNode(Badge, {
+					"tone": "accent",
+					"radius": "full",
+					"key": "__site2"
+				}, {
+					default: () => [messages.filterActive(countRules(condition.value))],
+					$stable: true
+				})],
+				$stable: true
+			}),
+			actions.value,
+			createVNode(Button, mergeProps(mergePartProps({
+				variant: "outline",
+				tone: "neutral"
+			}, propsReset.value, {
+				type: "button",
+				onClick: () => {
+					if (conditionFields.value) condition.value = null;
+					onReset.value?.();
+				}
+			}), { "key": "__site4" }), {
+				default: () => [messages.filterReset],
+				$stable: true
+			}),
+			createVNode(Button, mergeProps(mergePartProps({ loading: loading.value }, propsSearch.value, { type: "submit" }), { "key": "__site5" }), {
+				default: () => [messages.filterSearch],
+				$stable: true
+			})
+		]),
+		conditionFields.value && advancedOpen.value && createVNode(ConditionBuilder, mergeProps(mergePartProps({
+			fields: conditionFields.value,
+			sx: filterBarStyles.advanced,
+			"aria-label": messages.filterAdvanced
+		}, propsAdvanced.value, { id: advancedId }), {
+			"_value": condition.value,
+			"onUpdate:_value": _cache[0] || (_cache[0] = ($event) => condition.value = $event)
+		}), null),
+		conditionFields.value && !advancedOpen.value && condition.value && createVNode("div", css.attrs(filterBarStyles.summary), [createVNode(Small, {
+			"tone": "muted",
+			"key": "__site6"
+		}, {
+			default: () => [
+				messages.filterAdvanced,
+				"：",
+				describeCondition(condition.value, conditionFields.value, lang)
+			],
+			$stable: true
+		}), createVNode(Button, {
+			"variant": "link",
+			"size": "sm",
+			"type": "button",
+			"onClick": _cache[1] || (_cache[1] = () => condition.value = null),
+			"key": "__site7"
+		}, {
+			default: () => [lang.clear],
+			$stable: true
+		})])
+	]);
+}, {
+	name: "FilterBar",
+	props: [
+		"onSearch",
+		"onReset",
+		"loading",
+		"more",
+		"_expanded",
+		"onUpdate:_expanded",
+		"moreActive",
+		"minFieldWidth",
+		"actions",
+		"labelPlacement",
+		"labelWidth",
+		"propsFields",
+		"propsActions",
+		"propsSearch",
+		"propsReset",
+		"propsToggle",
+		"propsMore",
+		"conditionFields",
+		"_condition",
+		"onUpdate:_condition",
+		"propsAdvancedToggle",
+		"propsAdvanced"
+	]
+});
+//#endregion
+export { FilterBar, filterBarColumnStyles, filterBarStyles };
+
+//# sourceMappingURL=FilterBar.js.map

package/dist/patterns/FilterBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/patterns/FilterBar.tsx"],"sourcesContent":["/**\n * 查询栏（form role=\"search\"）：列表页上方的一排筛选条件，最后是“查询”“重置”；条件多时其余的收起来，点“展开”再显示。\n *\n *   <FilterBar onSearch={search} onReset={reset} more={<>…不常用的条件…</>} moreActive={2}>\n *     <Field label=\"项目名称\"><TextField _value={query.name} /></Field>\n *     <Field label=\"任务类别\"><Select … /></Field>\n *   </FilterBar>\n *\n * 条件排成栅格：每格不窄于 minFieldWidth，栅格多宽就放几格；按钮区在栅格的结束边，宽度随按钮、不折行，\n * 和条件的最后一行对齐（按钮再多也不会在一格里挤成两行）；容器太窄放不下时，按钮区整体换到下一行、靠结束边。\n * 默认标签在起始边、宽度随文字（labelWidth 为 auto：控件紧跟着标签，不留空白；要几行对齐时写固定宽度）。在输入框里按回车就是查询（原生表单提交）。\n * more 收起时不渲染；moreActive 是收起的条件里已经填了几项，显示在“展开”旁边，免得忘了还有条件生效。\n *\n * 高级筛选：给了 conditionFields 时按钮区多一个“高级筛选”，展开后在查询栏下面用 ConditionBuilder 编辑条件树（_condition），\n * 能表达固定条件表达不了的组合（任一满足、介于、不包含）；收起时有条件就在下面写成一句话，带“清空”。\n * “重置”同时把条件清成 null。条件是纯 JSON：交给后端（query 的条件树转 SQL）或前端 matchesCondition 筛。\n *\n *   <FilterBar onSearch={search} onReset={reset} conditionFields={fields} _condition={condition}>…</FilterBar>\n *\n * 部件：Root（form）、Fields（条件的栅格）、Field 们、More（收起的条件，display: contents）、Actions（div）、\n * Search、Reset（Button）、Toggle（展开收起的 Button）、AdvancedToggle（高级筛选的 Button）、Advanced（条件构造器那一行）。\n */\nimport { ChevronDown, ListFilter } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Badge } from '../base/Badge';\nimport { Small } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { useMessages } from '../config/lang/messages';\nimport {\n  describeCondition,\n  isConditionGroup,\n  type Condition,\n  type ConditionField,\n} from '../input/condition';\nimport { ConditionBuilder, type ConditionBuilderProps } from '../input/ConditionBuilder';\nimport { patternsMessages } from './messages';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport { provideFieldLayout, type FieldLayout } from '../form/field-layout';\n\n/** 角色与提交由组件管理 */\nexport type FilterBarManaged = 'role' | 'onSubmit' | 'onReset';\n\n/** 未声明的属性落到 form 上 */\nexport interface FilterBarProps\n  extends PartProps<'form', FilterBarManaged>, Pick<FieldLayout, 'labelPlacement' | 'labelWidth'> {\n  /** 点“查询”或在输入框里按回车 */\n  onSearch?: () => void;\n  /** 点“重置”：清空条件由使用方做（通常 Object.assign 回初始值，再查询一次） */\n  onReset?: () => void;\n  /** 查询中：“查询”按钮显示加载中 */\n  loading?: boolean;\n  /** 不常用的条件：默认收起，点“展开”才显示 */\n  more?: VNodeChild;\n  /** 是否展开了 more：父级写 _expanded={x} */\n  _expanded?: boolean;\n  /** 收起的条件里已经填了几项：大于 0 时显示在“展开”旁边 */\n  moreActive?: number;\n  /** 每个条件的最小宽度（CSS 长度），默认 `'16em'` */\n  minFieldWidth?: string;\n  /** 结束边额外的按钮：放在“重置”前面（如“导出筛选结果”） */\n  actions?: VNodeChild;\n  /** 条件栅格的部件属性 */\n  propsFields?: PartProps<'div'>;\n  /** 按钮区的部件属性 */\n  propsActions?: PartProps<'div'>;\n  /** 查询按钮的部件属性 */\n  propsSearch?: Partial<ButtonProps>;\n  /** 重置按钮的部件属性 */\n  propsReset?: Partial<ButtonProps>;\n  /** 展开收起按钮的部件属性 */\n  propsToggle?: Partial<ButtonProps>;\n  /** 收起的条件的外层（display: contents）的部件属性 */\n  propsMore?: PartProps<'div'>;\n  /** 高级筛选的字段：给了时按钮区多一个“高级筛选” */\n  conditionFields?: readonly ConditionField[];\n  /** 高级筛选的条件：父级写 _condition={condition}；没有时是 null，“重置”时清成 null */\n  _condition?: Condition | null;\n  /** 高级筛选按钮的部件属性 */\n  propsAdvancedToggle?: Partial<ButtonProps>;\n  /** 高级筛选那一行（条件构造器）的部件属性 */\n  propsAdvanced?: Partial<ConditionBuilderProps>;\n  /** 常用的条件：Field */\n  children?: VNodeChild;\n}\n\n/** FilterBar 的样式：root、fields、more、actions、toggleIconOpen */\nexport const filterBarStyles = css.create({\n  // 条件栅格与按钮区并排；放不下时按钮区换行\n  root: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'flex-end',\n    columnGap: '_xl',\n    rowGap: '_md',\n  },\n  fields: {\n    display: 'grid',\n    columnGap: '_xl',\n    rowGap: '_md',\n    alignItems: 'start',\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  // 收起的条件直接是栅格的格子\n  more: { display: 'contents' },\n  // 宽度随按钮、不折行；换到下一行时也靠结束边\n  actions: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    flexShrink: 0,\n    marginInlineStart: 'auto',\n  },\n  // 展开后箭头朝上\n  toggleIconOpen: { rotate: '180deg' },\n  // 高级筛选与它的摘要各占一整行，排在条件与按钮下面\n  advanced: {\n    flexBasis: '100%',\n    padding: '_md',\n    backgroundColor: '_surfaceMuted',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n  },\n  summary: { flexBasis: '100%', display: 'flex', alignItems: 'baseline', gap: '_sm', minWidth: 0 },\n});\n\n/** FilterBar 的样式：columns（每格的最小宽度；栅格本身至少放得下一格） */\nexport const filterBarColumnStyles = css.create({\n  columns: (minWidth: string) => ({\n    flexBasis: minWidth,\n    gridTemplateColumns: `repeat(auto-fill, minmax(min(${minWidth}, 100%), 1fr))`,\n  }),\n});\n\n/** 查询栏：筛选条件的栅格，查询、重置，不常用的条件可以展开收起 */\nexport const FilterBar = _component(\n  ({\n    onSearch,\n    onReset,\n    loading = false,\n    more,\n    _expanded: expanded = _bindable(false),\n    moreActive = 0,\n    minFieldWidth = '16em',\n    actions,\n    labelPlacement = 'start',\n    labelWidth = 'auto',\n    propsFields,\n    propsActions,\n    propsSearch,\n    propsReset,\n    propsToggle,\n    propsMore,\n    conditionFields,\n    _condition: condition = _bindable<Condition | null>(null),\n    propsAdvancedToggle,\n    propsAdvanced,\n    children,\n    ...rest\n  }: FilterBarProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const lang = useLang();\n    const moreId = useId();\n    const advancedId = useId();\n    let advancedOpen = _state(false);\n\n    /** 条件里有几条比较（按钮旁的计数） */\n    const countRules = (item: Condition): number =>\n      !isConditionGroup(item)\n        ? 1\n        : 'not' in item\n          ? countRules(item.not)\n          : ('all' in item ? item.all : item.any).reduce(\n              (sum, child) => sum + countRules(child),\n              0,\n            );\n    provideFieldLayout(() => ({ labelPlacement, labelWidth }));\n\n    function onSubmit(event: Event) {\n      event.preventDefault();\n      onSearch?.();\n    }\n\n    return () => (\n      <form\n        {...mergeAttrs<'form'>({ sx: filterBarStyles.root }, rest, { role: 'search', onSubmit })}\n        data-expanded={more != null ? expanded : undefined}\n      >\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [filterBarStyles.fields, filterBarColumnStyles.columns(minFieldWidth)] },\n            propsFields,\n          )}\n        >\n          {children}\n          {more != null && expanded && (\n            <div {...mergeAttrs<'div'>({ sx: filterBarStyles.more }, propsMore, { id: moreId })}>\n              {more}\n            </div>\n          )}\n        </div>\n        <div {...mergeAttrs<'div'>({ sx: filterBarStyles.actions }, propsActions)}>\n          {more != null && (\n            <Button\n              {...mergePartProps<ButtonProps>(\n                {\n                  variant: 'ghost',\n                  tone: 'neutral',\n                  iconEnd: ChevronDown,\n                  propsIconEnd: {\n                    sx: [disclosureStyles.icon, expanded && filterBarStyles.toggleIconOpen],\n                  },\n                },\n                propsToggle,\n                {\n                  type: 'button',\n                  'aria-expanded': expanded,\n                  'aria-controls': expanded ? moreId : undefined,\n                  onClick: () => (expanded = !expanded),\n                },\n              )}\n            >\n              {expanded ? messages.filterCollapse : messages.filterExpand}\n              {!expanded && moreActive > 0 && (\n                <Badge tone=\"accent\" radius=\"full\">\n                  {messages.filterActive(moreActive)}\n                </Badge>\n              )}\n            </Button>\n          )}\n          {conditionFields && (\n            <Button\n              {...mergePartProps<ButtonProps>(\n                { variant: 'ghost', tone: 'neutral', icon: ListFilter },\n                propsAdvancedToggle,\n                {\n                  type: 'button',\n                  'aria-expanded': advancedOpen,\n                  'aria-controls': advancedOpen ? advancedId : undefined,\n                  onClick: () => (advancedOpen = !advancedOpen),\n                },\n              )}\n            >\n              {messages.filterAdvanced}\n              {!advancedOpen && condition && (\n                <Badge tone=\"accent\" radius=\"full\">\n                  {messages.filterActive(countRules(condition))}\n                </Badge>\n              )}\n            </Button>\n          )}\n          {actions}\n          <Button\n            {...mergePartProps<ButtonProps>({ variant: 'outline', tone: 'neutral' }, propsReset, {\n              type: 'button',\n              onClick: () => {\n                if (conditionFields) condition = null;\n                onReset?.();\n              },\n            })}\n          >\n            {messages.filterReset}\n          </Button>\n          <Button {...mergePartProps<ButtonProps>({ loading }, propsSearch, { type: 'submit' })}>\n            {messages.filterSearch}\n          </Button>\n        </div>\n        {conditionFields && advancedOpen && (\n          <ConditionBuilder\n            {...mergePartProps<ConditionBuilderProps>(\n              {\n                fields: conditionFields,\n                sx: filterBarStyles.advanced,\n                'aria-label': messages.filterAdvanced,\n              },\n              propsAdvanced,\n              { id: advancedId },\n            )}\n            _value={condition}\n          />\n        )}\n        {conditionFields && !advancedOpen && condition && (\n          <div {...css.attrs(filterBarStyles.summary)}>\n            <Small tone=\"muted\">\n              {messages.filterAdvanced}：{describeCondition(condition, conditionFields, lang)}\n            </Small>\n            <Button variant=\"link\" size=\"sm\" type=\"button\" onClick={() => (condition = null)}>\n              {lang.clear}\n            </Button>\n          </div>\n        )}\n      </form>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,IAAa,kBAAkB,IAAI,OAAO;CAExC,MAAM;EACJ,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;EACX,QAAQ;CACV;CACA,QAAQ;EACN,SAAS;EACT,WAAW;EACX,QAAQ;EACR,YAAY;EACZ,UAAU;EACV,UAAU;CACZ;CAEA,MAAM,EAAE,SAAS,WAAW;CAE5B,SAAS;EACP,SAAS;EACT,YAAY;EACZ,KAAK;EACL,YAAY;EACZ,mBAAmB;CACrB;CAEA,gBAAgB,EAAE,QAAQ,SAAS;CAEnC,UAAU;EACR,WAAW;EACX,SAAS;EACT,iBAAiB;EACjB,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;CAChB;CACA,SAAS;EAAE,WAAW;EAAQ,SAAS;EAAQ,YAAY;EAAY,KAAK;EAAO,UAAU;CAAE;AACjG,CAAC;;AAGD,IAAa,wBAAwB,IAAI,OAAO,EAC9C,UAAU,cAAsB;CAC9B,WAAW;CACX,qBAAqB,gCAAgC,SAAQ;AAC/D,GACF,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAuBsB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WApBV,KAAK;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,WAAAC,SAAA,QAAA,mBAEiB,OAAK,KAAA,IAAA;CAAA,MAAA,aAAAD,aAAA,QAAA,cACxB,CAAC;CAAA,MAAA,gBAAAA,aAAA,QAAA,iBACE,MAAM;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,iBAAAA,aAAA,QAAA,kBAEL,OAAO;CAAA,MAAA,aAAAA,aAAA,QAAA,cACX,MAAM;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,kBAAAA,aAAA,QAAA,iBAAA;CAAA,MAAA,YAAAC,SAAA,QAAA,oBAQiC,MAAI,KAAA,IAAA;CAAA,MAAA,sBAAAD,aAAA,QAAA,qBAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,WAAAE,aAAA,MAAA;CAAA,MAIrD,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,WAAW,YAAY,YAAY,gBAAgB;CACzD,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,MAAM;CACrB,MAAM,aAAa,MAAM;CACzB,IAAI,eAAYC,IAAU,KAAK;;CAG/B,MAAM,cAAc,SAClB,CAAC,iBAAiB,IAAI,IAClB,IACA,SAAS,OACP,WAAW,KAAK,GAAG,KAClB,SAAS,OAAO,KAAK,MAAM,KAAK,IAAA,CAAK,QACnC,KAAK,UAAU,MAAM,WAAW,KAAK,GACtC,CACF;CACR,0BAA0B;EAAE,gBAAc,eAAA;EAAE,YAAU,WAAA;CAAC,EAAE;CAEzD,SAAS,SAAS,OAAc;EAC9B,MAAM,eAAe;EACrB,SAAA,QAAW;CACb;CAEA,aAAOC,YAAA,QAAAC,WAEC,WAAmB,EAAE,IAAI,gBAAgB,KAAK,GAAG,MAAM;EAAE,MAAM;EAAU;CAAS,CAAC,GAAC,EAAA,iBACzE,KAAA,SAAQ,OAAI,SAAA,QAAc,KAAA,EAAS,CAAA,GAAA;EAAAD,YAAA,OAG5C,WACF,EAAE,IAAI,CAAC,gBAAgB,QAAM,IAAA,KAAE,sBAAsB,eAAO,CAAA,cAAA,KAAA,GAAA,IAAA,CAAA,EAAiB,GAAC,YAAA,KAEhF,GAAC,CAAA,SAAA,OAGA,KAAA,SAAQ,QAAI,SAAA,SAAYA,YAAA,OACd,WAAkB,EAAE,IAAI,gBAAgB,KAAK,GAAC,UAAA,OAAa,EAAE,IAAI,OAAO,CAAC,GAAC,CAAA,KAAA,KAAA,CAAA,CAGpF,CAAA;EAAAA,YAAA,OAEM,WAAkB,EAAE,IAAI,gBAAgB,QAAQ,GAAC,aAAA,KAAc,GAAC;GACtE,KAAA,SAAQ,QAAIA,YAAA,QAAAC,WAEL,eACF;IACE,SAAS;IACT,MAAM;IACN,SAAS;IACT,cAAc,EACZ,IAAI,CAAC,iBAAiB,MAAM,SAAA,SAAY,gBAAgB,cAAc,EACxE;GACF,GAAC,YAAA,OAED;IACE,MAAM;IACN,iBAAe,SAAA;IACf,iBAAiB,SAAA,QAAW,SAAS,KAAA;IACrC,eAAgB,SAAA,QAAW,CAAA,SAAA;GAC7B,CACF,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAEA,SAAA,QAAW,SAAS,iBAAiB,SAAS,cAC9C,CAAA,SAAA,SAAa,WAAA,QAAa,KAACD,YAAA,OAAA;KAAA,QAAA;KAAA,UAAA;KAAA,OAAA;IAAA,GAAA;KAAA,eAAA,CAEvB,SAAS,aAAY,WAAA,KAAW,CAAC;KAAA,SAAA;IAAA,CAAA,CAErC;IAAA,SAAA;GAAA,CAAA;GAGJ,gBAAA,SAAAA,YAAA,QAAAC,WAEO,eACF;IAAE,SAAS;IAAS,MAAM;IAAW,MAAM;GAAW,GAAC,oBAAA,OAEvD;IACE,MAAM;IACN,iBAAe,aAAA;IACf,iBAAiB,aAAA,QAAe,aAAa,KAAA;IAC7C,eAAgB,aAAA,QAAe,CAAA,aAAA;GACjC,CACF,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAEA,SAAS,gBACT,CAAA,aAAA,SAAa,UAAA,SAAaD,YAAA,OAAA;KAAA,QAAA;KAAA,UAAA;KAAA,OAAA;IAAA,GAAA;KAAA,eAAA,CAEtB,SAAS,aAAa,WAAU,UAAA,KAAU,CAAC,CAAC;KAAA,SAAA;IAAA,CAAA,CAEhD;IAAA,SAAA;GAAA,CAAA;GAEJ,QAAA;GAAAA,YAAA,QAAAC,WAGK,eAA4B;IAAE,SAAS;IAAW,MAAM;GAAU,GAAC,WAAA,OAAc;IACnF,MAAM;IACN,eAAe;KACb,IAAA,gBAAA,OAAqB,UAAA,QAAY;KACjC,QAAA,QAAU;IACZ;GACF,CAAC,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAED,SAAS,WAAW;IAAA,SAAA;GAAA,CAAA;GAAAD,YAAA,QAAAC,WAEX,eAA4B,EAAE,SAAO,QAAA,MAAC,GAAC,YAAA,OAAe,EAAE,MAAM,SAAS,CAAC,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAClF,SAAS,YAAY;IAAA,SAAA;GAAA,CAAA;EAAA,CAAA;EAGzB,gBAAA,SAAA,aAAA,SAA+BD,YAAA,kBAAAC,WAExB,eACF;GACE,QAAM,gBAAA;GACN,IAAI,gBAAgB;GACpB,cAAc,SAAS;EACzB,GAAC,cAAA,OAED,EAAE,IAAI,WAAW,CACnB,GAAC;GAAA,UAAA,UAAA;GAAA,mBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,UAAA,QAAA;EAAA,CAAA,GAAA,IAAA;EAIJ,gBAAA,SAAmB,CAAA,aAAA,SAAa,UAAA,SAAaD,YAAA,OACnC,IAAI,MAAM,gBAAgB,OAAO,GAAC,CAAAA,YAAA,OAAA;GAAA,QAAA;GAAA,OAAA;EAAA,GAAA;GAAA,eAAA;IAEtC,SAAS;IAAe;IAAE,kBAAiB,UAAA,OAAA,gBAAA,OAA6B,IAAI;GAAC;GAAA,SAAA;EAAA,CAAA,GAAAA,YAAA,QAAA;GAAA,WAAA;GAAA,QAAA;GAAA,QAAA;GAAA,WAAA,OAAA,OAAA,OAAA,WAEjB,UAAA,QAAY;GAAK,OAAA;EAAA,GAAA;GAAA,eAAA,CAC7E,KAAK,KAAK;GAAA,SAAA;EAAA,CAAA,CAAA,CAAA;CAGhB,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/patterns/KanbanBoard.d.ts

@@ -0,0 +1,79 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+/** 看板的一列 */
+export interface KanbanColumn {
+    /** 列的标识：getColumn 返回它 */
+    key: string;
+    /** 列名 */
+    label: string;
+    /** 列名旁计数的色调（超时、异常这类要注意的列） */
+    tone?: StatusTone;
+}
+/** 卡片的渲染状态 */
+export interface KanbanCardState {
+    /** 正在被拖动或被键盘拿起 */
+    dragging: boolean;
+}
+/** 未声明的属性落到外层 div 上；aria-label 是看板的名称 */
+export interface KanbanBoardProps<T> extends PartProps<'div'> {
+    /** 各列：从起始边排 */
+    columns: readonly KanbanColumn[];
+    /** 全部卡片的数据 */
+    items: readonly T[];
+    /** 卡片的标识 */
+    getKey: (item: T) => string;
+    /** 卡片在哪一列 */
+    getColumn: (item: T) => string;
+    /** 卡片的名称：把手的名称、读屏播报；默认是 key */
+    getLabel?: (item: T) => string;
+    /** 能不能移到 to 列：返回不能的原因，null、undefined 是可以 */
+    canMove?: (item: T, to: string) => string | null | undefined;
+    /** 放到了可以放的列：使用方处理（打开处理的对话框、调接口），完成后刷新数据；index 是在目标列里的位置 */
+    onMove: (item: T, to: string, index: number) => void;
+    /** 列内排序：写回新的数组（所有列的卡片）；不给时列内不能排序 */
+    onReorder?: (items: T[]) => void;
+    /** 放到了不能放的列：卡片已经弹回，可以在这里提示原因 */
+    onReject?: (item: T, to: string, reason: string) => void;
+    /**
+     * 每列至少多宽（CSS 长度）：放得下时各列平分整行，放不下时横向滚动
+     * @default '16rem'
+     */
+    columnWidth?: string;
+    /**
+     * 每列的最大高度（CSS 长度）：卡片多时列里竖向滚动
+     * @default '70vh'
+     */
+    columnHeight?: string;
+    /** 一列没有卡片时显示的内容，默认“没有” */
+    empty?: VNodeChild;
+    /** 卡片的内容 */
+    children: (item: T, state: KanbanCardState) => VNodeChild;
+}
+/** KanbanBoard 的样式：board、column、header、list、card、handle… */
+export declare const kanbanBoardStyles: Readonly<{
+    allowed: css.CompiledStyles;
+    board: css.CompiledStyles;
+    card: css.CompiledStyles;
+    column: css.CompiledStyles;
+    denied: css.CompiledStyles;
+    empty: css.CompiledStyles;
+    ghost: css.CompiledStyles;
+    handle: css.CompiledStyles;
+    header: css.CompiledStyles;
+    indicator: css.CompiledStyles;
+    indicatorDenied: css.CompiledStyles;
+    lifted: css.CompiledStyles;
+    list: css.CompiledStyles;
+    placeholder: css.CompiledStyles;
+    reason: css.CompiledStyles;
+}>;
+/** KanbanBoard 的动态样式：列宽、列高、拖动的位移 */
+export declare const kanbanBoardDynamicStyles: Readonly<{
+    readonly width: (width: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly height: (height: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly ghost: (left: number, top: number, width: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 看板 */
+export declare const KanbanBoard: <T>(props: KanbanBoardProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;