@zerodep-dev/vue-tsx-pro-ui 0.3.1 → 0.3.2

package/dist/patterns/DataImport.js.map

@@ -1 +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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"}
+{"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 { 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/FilterBar.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/patterns/FilterBar.js

@@ -12,7 +12,7 @@ import { useMessages } from "../config/lang/messages.js";
 import { patternsMessages } from "./messages.js";
 import { createVNode, ref, useId } from "vue";
 import { _component, bindable, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronDown, ListFilter } from "@lucide/icons";
 //#region src/patterns/FilterBar.tsx
 /**

package/dist/patterns/FilterBar.js.map

@@ -1 +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 * start、end 是整行两头的内容（标题在条件前面，工具栏的按钮在查询、重置后面）：QueryTable 用它们把标题与工具栏并进查询栏这一行，\n * 压成一行；点“展开”后更多的条件排在这一行下面，start、end 仍在第一行。\n *\n * 部件：Root（form）、Start、Fields（条件的栅格）、Field 们、More（收起的条件，display: contents）、Actions（div）、End、\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 { t } from '../config/theme/tokens';\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  /** 整行起始边的内容：在条件前面（QueryTable 的标题）；对齐第一行 */\n  start?: VNodeChild;\n  /** 整行结束边的内容：在查询、重置后面（QueryTable 的工具栏按钮）；对齐第一行，展开更多条件时也不往下掉 */\n  end?: VNodeChild;\n  /** 结束边额外的按钮：放在“重置”前面（如“导出筛选结果”） */\n  actions?: VNodeChild;\n  /** start 外层的部件属性 */\n  propsStart?: PartProps<'div'>;\n  /** end 外层的部件属性 */\n  propsEnd?: PartProps<'div'>;\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、start、end、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  // 两头的内容和第一行的控件一样高、对齐第一行：展开更多条件时（按钮区落到最后一行）它们仍在第一行\n  start: {\n    display: 'flex',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    minHeight: t.sizes.control,\n    flexShrink: 0,\n  },\n  end: {\n    display: 'flex',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    minHeight: t.sizes.control,\n    flexShrink: 0,\n    gap: '_sm',\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    start,\n    end,\n    actions,\n    labelPlacement = 'start',\n    labelWidth = 'auto',\n    propsStart,\n    propsEnd,\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        {start != null && (\n          <div {...mergeAttrs<'div'>({ sx: filterBarStyles.start }, propsStart)}>{start}</div>\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        {end != null && (\n          <div {...mergeAttrs<'div'>({ sx: filterBarStyles.end }, propsEnd)}>{end}</div>\n        )}\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":"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"}
+{"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 * start、end 是整行两头的内容（标题在条件前面，工具栏的按钮在查询、重置后面）：QueryTable 用它们把标题与工具栏并进查询栏这一行，\n * 压成一行；点“展开”后更多的条件排在这一行下面，start、end 仍在第一行。\n *\n * 部件：Root（form）、Start、Fields（条件的栅格）、Field 们、More（收起的条件，display: contents）、Actions（div）、End、\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 { 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 { t } from '../config/theme/tokens';\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  /** 整行起始边的内容：在条件前面（QueryTable 的标题）；对齐第一行 */\n  start?: VNodeChild;\n  /** 整行结束边的内容：在查询、重置后面（QueryTable 的工具栏按钮）；对齐第一行，展开更多条件时也不往下掉 */\n  end?: VNodeChild;\n  /** 结束边额外的按钮：放在“重置”前面（如“导出筛选结果”） */\n  actions?: VNodeChild;\n  /** start 外层的部件属性 */\n  propsStart?: PartProps<'div'>;\n  /** end 外层的部件属性 */\n  propsEnd?: PartProps<'div'>;\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、start、end、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  // 两头的内容和第一行的控件一样高、对齐第一行：展开更多条件时（按钮区落到最后一行）它们仍在第一行\n  start: {\n    display: 'flex',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    minHeight: t.sizes.control,\n    flexShrink: 0,\n  },\n  end: {\n    display: 'flex',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    minHeight: t.sizes.control,\n    flexShrink: 0,\n    gap: '_sm',\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    start,\n    end,\n    actions,\n    labelPlacement = 'start',\n    labelWidth = 'auto',\n    propsStart,\n    propsEnd,\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        {start != null && (\n          <div {...mergeAttrs<'div'>({ sx: filterBarStyles.start }, propsStart)}>{start}</div>\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        {end != null && (\n          <div {...mergeAttrs<'div'>({ sx: filterBarStyles.end }, propsEnd)}>{end}</div>\n        )}\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":"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"}

package/dist/patterns/KanbanBoard.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/patterns/KanbanBoard.js

@@ -11,7 +11,7 @@ import { useMessages } from "../config/lang/messages.js";
 import { patternsMessages } from "./messages.js";
 import { createVNode, shallowRef } from "vue";
 import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { GripVertical } from "@lucide/icons";
 //#region src/patterns/KanbanBoard.tsx
 /**

package/dist/patterns/KanbanBoard.js.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanBoard.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/patterns/KanbanBoard.tsx"],"sourcesContent":["/**\n * 看板：一列一个状态（或阶段、负责人），卡片在列之间移动。任务看板、招聘流程、工单。\n *\n *   <KanbanBoard\n *     aria-label=\"任务看板\"\n *     columns={[{ key: 'designing', label: '设计中' }, { key: 'verifying', label: '测试中' }]}\n *     items={tasks}\n *     getKey={(task) => task.code}\n *     getColumn={(task) => task.status}\n *     getLabel={(task) => task.name}\n *     canMove={(task, to) => (to === next(task.status) ? null : '只能拖到下一列')}\n *     onMove={(task, to) => openProcessDialog(task, to)}\n *   >\n *     {(task) => <TaskCard task={task} />}\n *   </KanbanBoard>\n *\n * 数据由使用方控制：看板不自己挪卡片，只在放下时报告 onMove（使用方处理完、刷新数据，卡片才换列）。\n * canMove 返回不能移动的原因（null 是可以）：拖动时经过的列按它高亮（可以放的是强调色，不能放的标红并写出原因），\n * 落点处画一条插入线；放在不能放的列上时卡片弹回、读屏播报原因，并报告 onReject。\n * 给了 onReorder 时列内也能排序（数据立即重排，写回整个数组）。\n *\n * 拖动、键盘、读屏播报、自动滚动建在 useSortable 的分组上（utils/dom/sortable.ts）：\n * - 指针：在卡片上按下拖动超过 3px 开始（点在卡片里的链接、按钮上不算），影子卡跟着指针走，原位留着变淡的占位；\n * - 键盘：每张卡片有把手按钮，空格 / Enter 拿起，← / → 换列（从右到左排版下镜像），↑ / ↓ 调整位置，\n *   空格 / Enter 放下，Esc 取消；每一步都有读屏播报（aria-live）。\n * 列多时整块横向滚动（ScrollArea），每列里的卡片多时列自己竖向滚动。\n */\nimport { GripVertical } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Badge } from '../base/Badge';\nimport { useMessages } from '../config/lang/messages';\nimport { patternsMessages } from './messages';\nimport { ButtonBase } from '../base/ButtonBase';\nimport { Icon } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { useSortable } from '../utils/dom/sortable';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { t } from '../config/theme/tokens';\n\n/** 看板的一列 */\nexport interface KanbanColumn {\n  /** 列的标识：getColumn 返回它 */\n  key: string;\n  /** 列名 */\n  label: string;\n  /** 列名旁计数的色调（超时、异常这类要注意的列） */\n  tone?: StatusTone;\n}\n\n/** 卡片的渲染状态 */\nexport interface KanbanCardState {\n  /** 正在被拖动或被键盘拿起 */\n  dragging: boolean;\n}\n\n/** 未声明的属性落到外层 div 上；aria-label 是看板的名称 */\nexport interface KanbanBoardProps<T> extends PartProps<'div'> {\n  /** 各列：从起始边排 */\n  columns: readonly KanbanColumn[];\n  /** 全部卡片的数据 */\n  items: readonly T[];\n  /** 卡片的标识 */\n  getKey: (item: T) => string;\n  /** 卡片在哪一列 */\n  getColumn: (item: T) => string;\n  /** 卡片的名称：把手的名称、读屏播报；默认是 key */\n  getLabel?: (item: T) => string;\n  /** 能不能移到 to 列：返回不能的原因，null、undefined 是可以 */\n  canMove?: (item: T, to: string) => string | null | undefined;\n  /** 放到了可以放的列：使用方处理（打开处理的对话框、调接口），完成后刷新数据；index 是在目标列里的位置 */\n  onMove: (item: T, to: string, index: number) => void;\n  /** 列内排序：写回新的数组（所有列的卡片）；不给时列内不能排序 */\n  onReorder?: (items: T[]) => void;\n  /** 放到了不能放的列：卡片已经弹回，可以在这里提示原因 */\n  onReject?: (item: T, to: string, reason: string) => void;\n  /**\n   * 每列至少多宽（CSS 长度）：放得下时各列平分整行，放不下时横向滚动\n   * @default '16rem'\n   */\n  columnWidth?: string;\n  /**\n   * 每列的最大高度（CSS 长度）：卡片多时列里竖向滚动\n   * @default '70vh'\n   */\n  columnHeight?: string;\n  /** 一列没有卡片时显示的内容，默认“没有” */\n  empty?: VNodeChild;\n  /** 卡片的内容 */\n  children: (item: T, state: KanbanCardState) => VNodeChild;\n}\n\n/** KanbanBoard 的样式：board、column、header、list、card、handle… */\nexport const kanbanBoardStyles = css.create({\n  board: { display: 'flex', gap: '_md', alignItems: 'flex-start', paddingBlockEnd: '_sm' },\n  column: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexShrink: 0,\n    borderRadius: '_lg',\n    backgroundColor: '_surfaceMuted',\n    outlineWidth: '_borderWidths.sm',\n    outlineStyle: 'solid',\n    outlineColor: 'transparent',\n    outlineOffset: '-2px',\n    transition: `outline-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  allowed: { outlineColor: '_accent' },\n  denied: { outlineColor: '_danger' },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_sm',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    fontWeight: '_semibold',\n    fontSize: '_sm',\n  },\n  reason: { paddingInline: '_md', paddingBlockEnd: '_xs', color: '_dangerText', fontSize: '_xs' },\n  list: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_sm',\n    margin: 0,\n    paddingInline: '_sm',\n    paddingBlockEnd: '_sm',\n    listStyle: 'none',\n    overflowY: 'auto',\n    minHeight: '3rem',\n  },\n  card: {\n    position: 'relative',\n    display: 'grid',\n    gridTemplateColumns: 'minmax(0, 1fr) auto',\n    alignItems: 'start',\n    gap: '_xs',\n    padding: '_sm',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    backgroundColor: '_surfaceRaised',\n    cursor: 'grab',\n    touchAction: 'none',\n    transition: `translate ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 指针拖动中：原位的卡片变淡，跟着指针走的是影子卡（画在滚动区域外面，不被列裁掉）\n  placeholder: { opacity: 0.4 },\n  ghost: {\n    position: 'fixed',\n    zIndex: 50,\n    pointerEvents: 'none',\n    cursor: 'grabbing',\n    boxShadow: '_lg',\n    transition: 'none',\n    rotate: '1.5deg',\n  },\n  // 键盘拿起：高亮边框\n  lifted: { borderColor: '_accent', boxShadow: '_md' },\n  handle: { color: '_textMuted', borderRadius: '_sm', padding: '2px', cursor: 'grab' },\n  empty: { color: '_textMuted', fontSize: '_xs', paddingBlock: '_sm', textAlign: 'center' },\n  // 拖到别的列时的落点：卡片之间的一条线\n  indicator: {\n    height: '_borderWidths.md',\n    marginBlock: `calc(-1 * ${t.space.xs})`,\n    borderRadius: '_full',\n    backgroundColor: '_accent',\n  },\n  indicatorDenied: { backgroundColor: '_danger' },\n});\n\n/** KanbanBoard 的动态样式：列宽、列高、拖动的位移 */\nexport const kanbanBoardDynamicStyles = css.create({\n  // 至少这么宽，富余的空间各列平分（同 Jira 的看板），放不下时外层横向滚动\n  width: (width: string) => ({ flexBasis: width, flexGrow: 1, minWidth: width }),\n  height: (height: string) => ({ maxHeight: height }),\n  ghost: (left: number, top: number, width: number) => ({ left, top, width }),\n});\n\n/** 看板 */\nexport const KanbanBoard = _component(\n  <T,>({\n    columns,\n    items,\n    getKey,\n    getColumn,\n    getLabel,\n    canMove,\n    onMove,\n    onReorder,\n    onReject,\n    columnWidth = '16rem',\n    columnHeight = '70vh',\n    empty,\n    children,\n    ...rest\n  }: KanbanBoardProps<T>) => {\n    const lang = useLang();\n    const messages = useMessages('patterns', patternsMessages);\n    let board = _state.raw<HTMLElement | null>(null);\n    const labelOf = (item: T) => getLabel?.(item) ?? getKey(item);\n    const itemOf = (key: string) => items.find((item) => getKey(item) === key);\n    const sortable = useSortable({\n      items: () => items,\n      getKey: (item) => getKey(item),\n      getLabel: labelOf,\n      // 用时再读属性：写没写 onReorder 决定了列内能不能排序，父级后来才给也要跟上\n      get onChange() {\n        return onReorder && ((next: T[]) => onReorder(next));\n      },\n      container: () => board,\n      groups: {\n        keys: () => columns.map((column) => column.key),\n        of: (item) => getColumn(item),\n        label: (key) => columns.find((column) => column.key === key)?.label ?? key,\n        canMove: (item, to) => canMove?.(item, to),\n        onMove: (item, to, index) => onMove(item, to, index),\n        onReject: (item, to, reason) => onReject?.(item, to, reason),\n      },\n    });\n\n    /** 整张卡片都能拖：卡片里的链接、按钮（把手除外）、输入框照常点 */\n    function onPointerdown(event: PointerEvent, key: string) {\n      const target = event.target as Element;\n      if (target.closest('a, input, select, textarea, button:not([data-handle])')) return;\n      (sortable.handleProps(key).onPointerdown as (event: PointerEvent) => void)(event);\n    }\n\n    return () => {\n      const dragging = sortable.active;\n      const drop = sortable.target;\n      const ghost = sortable.ghost;\n      const ghostItem = ghost && itemOf(ghost.key);\n      const draggedItem = dragging === undefined ? undefined : itemOf(dragging);\n      const draggedFrom = draggedItem === undefined ? undefined : getColumn(draggedItem);\n      return (\n        <div {...mergeAttrs<'div'>({}, rest, { role: 'group' })}>\n          <ScrollArea axis=\"x\">\n            <div\n              ref={(element: unknown) => (board = element instanceof HTMLElement ? element : null)}\n              {...css.attrs(kanbanBoardStyles.board)}\n            >\n              {columns.map((column) => {\n                const cards = items.filter((item) => getColumn(item) === column.key);\n                // 拖到了别的列：高亮这一列，在落点画线\n                const over = drop && draggedFrom !== column.key && drop.group === column.key;\n                const reason = over ? drop.reason : null;\n                const headingId = `${sortable.instructionsId}-${column.key}`;\n                const indicator = (\n                  <li\n                    key=\"drop-indicator\"\n                    aria-hidden=\"true\"\n                    {...css.attrs(\n                      kanbanBoardStyles.indicator,\n                      reason != null && kanbanBoardStyles.indicatorDenied,\n                    )}\n                  />\n                );\n                return (\n                  <section\n                    key={column.key}\n                    aria-labelledby={headingId}\n                    {...sortable.groupProps(column.key)}\n                    {...css.attrs(\n                      kanbanBoardStyles.column,\n                      kanbanBoardDynamicStyles.width(columnWidth),\n                      over && (reason ? kanbanBoardStyles.denied : kanbanBoardStyles.allowed),\n                    )}\n                  >\n                    <div {...css.attrs(kanbanBoardStyles.header)}>\n                      <span id={headingId}>{column.label}</span>\n                      <Badge\n                        radius=\"full\"\n                        tone={cards.length > 0 ? (column.tone ?? 'neutral') : 'neutral'}\n                      >\n                        {cards.length}\n                      </Badge>\n                    </div>\n                    {reason && <div {...css.attrs(kanbanBoardStyles.reason)}>{reason}</div>}\n                    <ul\n                      {...css.attrs(\n                        kanbanBoardStyles.list,\n                        kanbanBoardDynamicStyles.height(columnHeight),\n                      )}\n                    >\n                      {cards.length === 0 && !over && (\n                        <li {...css.attrs(kanbanBoardStyles.empty)}>\n                          {empty ?? messages.kanbanEmpty}\n                        </li>\n                      )}\n                      {cards.flatMap((item, index) => {\n                        const key = getKey(item);\n                        const active = dragging === key;\n                        const { onPointerdown: _, ...handle } = sortable.handleProps(key);\n                        const card = (\n                          <li\n                            key={key}\n                            {...sortable.itemProps(key)}\n                            {...css.attrs(\n                              kanbanBoardStyles.card,\n                              active && ghost && kanbanBoardStyles.placeholder,\n                              active && !ghost && kanbanBoardStyles.lifted,\n                            )}\n                            data-state={active ? 'dragging' : undefined}\n                            onPointerdown={(event: PointerEvent) => onPointerdown(event, key)}\n                          >\n                            <div>{children(item, { dragging: active })}</div>\n                            <ButtonBase\n                              {...handle}\n                              data-handle=\"\"\n                              sx={kanbanBoardStyles.handle}\n                              aria-label={lang.sortableHandle(labelOf(item))}\n                            >\n                              <Icon icon={GripVertical} />\n                            </ButtonBase>\n                          </li>\n                        );\n                        return over && drop.index === index ? [indicator, card] : [card];\n                      })}\n                      {over && drop.index >= cards.length && indicator}\n                    </ul>\n                  </section>\n                );\n              })}\n            </div>\n          </ScrollArea>\n          {ghost && ghostItem !== undefined && (\n            <div\n              aria-hidden=\"true\"\n              {...css.attrs(\n                kanbanBoardStyles.card,\n                kanbanBoardStyles.ghost,\n                kanbanBoardDynamicStyles.ghost(ghost.left, ghost.top, ghost.width),\n              )}\n            >\n              <div>{children(ghostItem, { dragging: true })}</div>\n            </div>\n          )}\n          <VisuallyHidden id={sortable.instructionsId}>\n            {messages.kanbanInstructions}\n          </VisuallyHidden>\n          <VisuallyHidden aria-live=\"assertive\">{sortable.announcement}</VisuallyHidden>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"KanbanBoard.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/patterns/KanbanBoard.tsx"],"sourcesContent":["/**\n * 看板：一列一个状态（或阶段、负责人），卡片在列之间移动。任务看板、招聘流程、工单。\n *\n *   <KanbanBoard\n *     aria-label=\"任务看板\"\n *     columns={[{ key: 'designing', label: '设计中' }, { key: 'verifying', label: '测试中' }]}\n *     items={tasks}\n *     getKey={(task) => task.code}\n *     getColumn={(task) => task.status}\n *     getLabel={(task) => task.name}\n *     canMove={(task, to) => (to === next(task.status) ? null : '只能拖到下一列')}\n *     onMove={(task, to) => openProcessDialog(task, to)}\n *   >\n *     {(task) => <TaskCard task={task} />}\n *   </KanbanBoard>\n *\n * 数据由使用方控制：看板不自己挪卡片，只在放下时报告 onMove（使用方处理完、刷新数据，卡片才换列）。\n * canMove 返回不能移动的原因（null 是可以）：拖动时经过的列按它高亮（可以放的是强调色，不能放的标红并写出原因），\n * 落点处画一条插入线；放在不能放的列上时卡片弹回、读屏播报原因，并报告 onReject。\n * 给了 onReorder 时列内也能排序（数据立即重排，写回整个数组）。\n *\n * 拖动、键盘、读屏播报、自动滚动建在 useSortable 的分组上（utils/dom/sortable.ts）：\n * - 指针：在卡片上按下拖动超过 3px 开始（点在卡片里的链接、按钮上不算），影子卡跟着指针走，原位留着变淡的占位；\n * - 键盘：每张卡片有把手按钮，空格 / Enter 拿起，← / → 换列（从右到左排版下镜像），↑ / ↓ 调整位置，\n *   空格 / Enter 放下，Esc 取消；每一步都有读屏播报（aria-live）。\n * 列多时整块横向滚动（ScrollArea），每列里的卡片多时列自己竖向滚动。\n */\nimport { GripVertical } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Badge } from '../base/Badge';\nimport { useMessages } from '../config/lang/messages';\nimport { patternsMessages } from './messages';\nimport { ButtonBase } from '../base/ButtonBase';\nimport { Icon } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { useSortable } from '../utils/dom/sortable';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { t } from '../config/theme/tokens';\n\n/** 看板的一列 */\nexport interface KanbanColumn {\n  /** 列的标识：getColumn 返回它 */\n  key: string;\n  /** 列名 */\n  label: string;\n  /** 列名旁计数的色调（超时、异常这类要注意的列） */\n  tone?: StatusTone;\n}\n\n/** 卡片的渲染状态 */\nexport interface KanbanCardState {\n  /** 正在被拖动或被键盘拿起 */\n  dragging: boolean;\n}\n\n/** 未声明的属性落到外层 div 上；aria-label 是看板的名称 */\nexport interface KanbanBoardProps<T> extends PartProps<'div'> {\n  /** 各列：从起始边排 */\n  columns: readonly KanbanColumn[];\n  /** 全部卡片的数据 */\n  items: readonly T[];\n  /** 卡片的标识 */\n  getKey: (item: T) => string;\n  /** 卡片在哪一列 */\n  getColumn: (item: T) => string;\n  /** 卡片的名称：把手的名称、读屏播报；默认是 key */\n  getLabel?: (item: T) => string;\n  /** 能不能移到 to 列：返回不能的原因，null、undefined 是可以 */\n  canMove?: (item: T, to: string) => string | null | undefined;\n  /** 放到了可以放的列：使用方处理（打开处理的对话框、调接口），完成后刷新数据；index 是在目标列里的位置 */\n  onMove: (item: T, to: string, index: number) => void;\n  /** 列内排序：写回新的数组（所有列的卡片）；不给时列内不能排序 */\n  onReorder?: (items: T[]) => void;\n  /** 放到了不能放的列：卡片已经弹回，可以在这里提示原因 */\n  onReject?: (item: T, to: string, reason: string) => void;\n  /**\n   * 每列至少多宽（CSS 长度）：放得下时各列平分整行，放不下时横向滚动\n   * @default '16rem'\n   */\n  columnWidth?: string;\n  /**\n   * 每列的最大高度（CSS 长度）：卡片多时列里竖向滚动\n   * @default '70vh'\n   */\n  columnHeight?: string;\n  /** 一列没有卡片时显示的内容，默认“没有” */\n  empty?: VNodeChild;\n  /** 卡片的内容 */\n  children: (item: T, state: KanbanCardState) => VNodeChild;\n}\n\n/** KanbanBoard 的样式：board、column、header、list、card、handle… */\nexport const kanbanBoardStyles = css.create({\n  board: { display: 'flex', gap: '_md', alignItems: 'flex-start', paddingBlockEnd: '_sm' },\n  column: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexShrink: 0,\n    borderRadius: '_lg',\n    backgroundColor: '_surfaceMuted',\n    outlineWidth: '_borderWidths.sm',\n    outlineStyle: 'solid',\n    outlineColor: 'transparent',\n    outlineOffset: '-2px',\n    transition: `outline-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  allowed: { outlineColor: '_accent' },\n  denied: { outlineColor: '_danger' },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_sm',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    fontWeight: '_semibold',\n    fontSize: '_sm',\n  },\n  reason: { paddingInline: '_md', paddingBlockEnd: '_xs', color: '_dangerText', fontSize: '_xs' },\n  list: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_sm',\n    margin: 0,\n    paddingInline: '_sm',\n    paddingBlockEnd: '_sm',\n    listStyle: 'none',\n    overflowY: 'auto',\n    minHeight: '3rem',\n  },\n  card: {\n    position: 'relative',\n    display: 'grid',\n    gridTemplateColumns: 'minmax(0, 1fr) auto',\n    alignItems: 'start',\n    gap: '_xs',\n    padding: '_sm',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    backgroundColor: '_surfaceRaised',\n    cursor: 'grab',\n    touchAction: 'none',\n    transition: `translate ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 指针拖动中：原位的卡片变淡，跟着指针走的是影子卡（画在滚动区域外面，不被列裁掉）\n  placeholder: { opacity: 0.4 },\n  ghost: {\n    position: 'fixed',\n    zIndex: 50,\n    pointerEvents: 'none',\n    cursor: 'grabbing',\n    boxShadow: '_lg',\n    transition: 'none',\n    rotate: '1.5deg',\n  },\n  // 键盘拿起：高亮边框\n  lifted: { borderColor: '_accent', boxShadow: '_md' },\n  handle: { color: '_textMuted', borderRadius: '_sm', padding: '2px', cursor: 'grab' },\n  empty: { color: '_textMuted', fontSize: '_xs', paddingBlock: '_sm', textAlign: 'center' },\n  // 拖到别的列时的落点：卡片之间的一条线\n  indicator: {\n    height: '_borderWidths.md',\n    marginBlock: `calc(-1 * ${t.space.xs})`,\n    borderRadius: '_full',\n    backgroundColor: '_accent',\n  },\n  indicatorDenied: { backgroundColor: '_danger' },\n});\n\n/** KanbanBoard 的动态样式：列宽、列高、拖动的位移 */\nexport const kanbanBoardDynamicStyles = css.create({\n  // 至少这么宽，富余的空间各列平分（同 Jira 的看板），放不下时外层横向滚动\n  width: (width: string) => ({ flexBasis: width, flexGrow: 1, minWidth: width }),\n  height: (height: string) => ({ maxHeight: height }),\n  ghost: (left: number, top: number, width: number) => ({ left, top, width }),\n});\n\n/** 看板 */\nexport const KanbanBoard = _component(\n  <T,>({\n    columns,\n    items,\n    getKey,\n    getColumn,\n    getLabel,\n    canMove,\n    onMove,\n    onReorder,\n    onReject,\n    columnWidth = '16rem',\n    columnHeight = '70vh',\n    empty,\n    children,\n    ...rest\n  }: KanbanBoardProps<T>) => {\n    const lang = useLang();\n    const messages = useMessages('patterns', patternsMessages);\n    let board = _state.raw<HTMLElement | null>(null);\n    const labelOf = (item: T) => getLabel?.(item) ?? getKey(item);\n    const itemOf = (key: string) => items.find((item) => getKey(item) === key);\n    const sortable = useSortable({\n      items: () => items,\n      getKey: (item) => getKey(item),\n      getLabel: labelOf,\n      // 用时再读属性：写没写 onReorder 决定了列内能不能排序，父级后来才给也要跟上\n      get onChange() {\n        return onReorder && ((next: T[]) => onReorder(next));\n      },\n      container: () => board,\n      groups: {\n        keys: () => columns.map((column) => column.key),\n        of: (item) => getColumn(item),\n        label: (key) => columns.find((column) => column.key === key)?.label ?? key,\n        canMove: (item, to) => canMove?.(item, to),\n        onMove: (item, to, index) => onMove(item, to, index),\n        onReject: (item, to, reason) => onReject?.(item, to, reason),\n      },\n    });\n\n    /** 整张卡片都能拖：卡片里的链接、按钮（把手除外）、输入框照常点 */\n    function onPointerdown(event: PointerEvent, key: string) {\n      const target = event.target as Element;\n      if (target.closest('a, input, select, textarea, button:not([data-handle])')) return;\n      (sortable.handleProps(key).onPointerdown as (event: PointerEvent) => void)(event);\n    }\n\n    return () => {\n      const dragging = sortable.active;\n      const drop = sortable.target;\n      const ghost = sortable.ghost;\n      const ghostItem = ghost && itemOf(ghost.key);\n      const draggedItem = dragging === undefined ? undefined : itemOf(dragging);\n      const draggedFrom = draggedItem === undefined ? undefined : getColumn(draggedItem);\n      return (\n        <div {...mergeAttrs<'div'>({}, rest, { role: 'group' })}>\n          <ScrollArea axis=\"x\">\n            <div\n              ref={(element: unknown) => (board = element instanceof HTMLElement ? element : null)}\n              {...css.attrs(kanbanBoardStyles.board)}\n            >\n              {columns.map((column) => {\n                const cards = items.filter((item) => getColumn(item) === column.key);\n                // 拖到了别的列：高亮这一列，在落点画线\n                const over = drop && draggedFrom !== column.key && drop.group === column.key;\n                const reason = over ? drop.reason : null;\n                const headingId = `${sortable.instructionsId}-${column.key}`;\n                const indicator = (\n                  <li\n                    key=\"drop-indicator\"\n                    aria-hidden=\"true\"\n                    {...css.attrs(\n                      kanbanBoardStyles.indicator,\n                      reason != null && kanbanBoardStyles.indicatorDenied,\n                    )}\n                  />\n                );\n                return (\n                  <section\n                    key={column.key}\n                    aria-labelledby={headingId}\n                    {...sortable.groupProps(column.key)}\n                    {...css.attrs(\n                      kanbanBoardStyles.column,\n                      kanbanBoardDynamicStyles.width(columnWidth),\n                      over && (reason ? kanbanBoardStyles.denied : kanbanBoardStyles.allowed),\n                    )}\n                  >\n                    <div {...css.attrs(kanbanBoardStyles.header)}>\n                      <span id={headingId}>{column.label}</span>\n                      <Badge\n                        radius=\"full\"\n                        tone={cards.length > 0 ? (column.tone ?? 'neutral') : 'neutral'}\n                      >\n                        {cards.length}\n                      </Badge>\n                    </div>\n                    {reason && <div {...css.attrs(kanbanBoardStyles.reason)}>{reason}</div>}\n                    <ul\n                      {...css.attrs(\n                        kanbanBoardStyles.list,\n                        kanbanBoardDynamicStyles.height(columnHeight),\n                      )}\n                    >\n                      {cards.length === 0 && !over && (\n                        <li {...css.attrs(kanbanBoardStyles.empty)}>\n                          {empty ?? messages.kanbanEmpty}\n                        </li>\n                      )}\n                      {cards.flatMap((item, index) => {\n                        const key = getKey(item);\n                        const active = dragging === key;\n                        const { onPointerdown: _, ...handle } = sortable.handleProps(key);\n                        const card = (\n                          <li\n                            key={key}\n                            {...sortable.itemProps(key)}\n                            {...css.attrs(\n                              kanbanBoardStyles.card,\n                              active && ghost && kanbanBoardStyles.placeholder,\n                              active && !ghost && kanbanBoardStyles.lifted,\n                            )}\n                            data-state={active ? 'dragging' : undefined}\n                            onPointerdown={(event: PointerEvent) => onPointerdown(event, key)}\n                          >\n                            <div>{children(item, { dragging: active })}</div>\n                            <ButtonBase\n                              {...handle}\n                              data-handle=\"\"\n                              sx={kanbanBoardStyles.handle}\n                              aria-label={lang.sortableHandle(labelOf(item))}\n                            >\n                              <Icon icon={GripVertical} />\n                            </ButtonBase>\n                          </li>\n                        );\n                        return over && drop.index === index ? [indicator, card] : [card];\n                      })}\n                      {over && drop.index >= cards.length && indicator}\n                    </ul>\n                  </section>\n                );\n              })}\n            </div>\n          </ScrollArea>\n          {ghost && ghostItem !== undefined && (\n            <div\n              aria-hidden=\"true\"\n              {...css.attrs(\n                kanbanBoardStyles.card,\n                kanbanBoardStyles.ghost,\n                kanbanBoardDynamicStyles.ghost(ghost.left, ghost.top, ghost.width),\n              )}\n            >\n              <div>{children(ghostItem, { dragging: true })}</div>\n            </div>\n          )}\n          <VisuallyHidden id={sortable.instructionsId}>\n            {messages.kanbanInstructions}\n          </VisuallyHidden>\n          <VisuallyHidden aria-live=\"assertive\">{sortable.announcement}</VisuallyHidden>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/patterns/NotificationCenter.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type ButtonProps } from '../base/Button';
 import { type IconButtonProps } from '../base/IconButton';

package/dist/patterns/NotificationCenter.js

@@ -15,7 +15,7 @@ import { useMessages } from "../config/lang/messages.js";
 import { patternsMessages } from "./messages.js";
 import { computed, createVNode, ref } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Bell } from "@lucide/icons";
 //#region src/patterns/NotificationCenter.tsx
 /**

package/dist/patterns/NotificationCenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vue_computed","_createVNode","_mergeProps","_vtp_bindable"],"sources":["../../src/patterns/NotificationCenter.tsx"],"sourcesContent":["/**\n * 通知：顶栏的铃铛 NotificationCenter（右上角是未读数，点开是通知列表），与列表本身 NotificationList\n * （通知页面、侧边抽屉里直接放）。列表新的在前：按类型筛选、只看未读、全部标为已读；点一条标为已读并去它的地址（走路由适配）。\n * 通知存在哪、何时算已读由应用决定：组件只报告 onRead。\n *\n *   <NotificationCenter\n *     items={notices}                                       // { id, title, description?, time, type?, read, href?, tone? }\n *     types={[{ key: 'todo', label: '待办' }, { key: 'remind', label: '催办' }]}\n *     onRead={(ids) => markRead(ids)}\n *     footer={<Link href=\"/inbox\">打开收件箱</Link>}\n *   />\n *   <NotificationList items={notices} types={types} onRead={markRead} />    通知页面：同一份列表，不放进弹出层\n *\n * 时间写成相对现在（3 分钟前、昨天），悬停看完整时间。未读的前面一个色点（tone 决定颜色，默认 accent），\n * 读屏念“未读”。列表为空时显示 empty（默认“没有通知”）。和 Toast 的分工：Toast 是此刻发生的事、几秒后消失；\n * 通知是留着、可以回头看的。\n *\n * NotificationList 的部件：Root（div）、Head（div）、Title（span）、MarkAll（Button）、Filters（div）、Types（ToggleGroup）、\n * UnreadOnly（Switch）、List（ul）、Item（a，可以按条计算）、Empty（div）、Footer（div）。\n */\nimport { Bell } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { Indicator } from '../base/Indicator';\nimport { StatusDot } from '../base/StatusDot';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useFormat } from '../config/lang/format';\nimport { useMessages } from '../config/lang/messages';\nimport { Empty } from '../feedback/Empty';\nimport { Switch, type SwitchProps } from '../input/Switch';\nimport { ToggleGroup, ToggleItem, type ToggleGroupBaseProps } from '../input/ToggleGroup';\nimport { Popover, type PopoverProps } from '../overlay/Popover';\nimport { useRouterLink } from '../utils/dom/link';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport type { SingleSelectionProps } from '../utils/data/selection';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { patternsMessages } from './messages';\n\n/** 一条通知 */\nexport interface NotificationItem {\n  /** 标识 */\n  id: string;\n  /** 标题：一句话说清发生了什么 */\n  title: string;\n  /** 补充说明（谁、哪张单） */\n  description?: string;\n  /** 发生的时间（ISO） */\n  time: string;\n  /** 类型：按 types 筛选 */\n  type?: string;\n  /** 读过了 */\n  read: boolean;\n  /** 点了去哪儿 */\n  href?: string;\n  /** 未读色点的色调，默认 accent；超时、被退回用 danger、warning */\n  tone?: StatusTone;\n}\n\n/** 通知的一种类型（筛选按钮） */\nexport interface NotificationType {\n  /** 类型：对应 NotificationItem.type */\n  key: string;\n  /** 名称 */\n  label: string;\n}\n\n/** 通知列表的内容与回调：NotificationList 与 NotificationCenter 共用 */\nexport interface NotificationListOptions {\n  /** 通知：新的在前（组件不排序） */\n  items: readonly NotificationItem[];\n  /** 类型：写了时列表上方有按类型筛选的按钮 */\n  types?: readonly NotificationType[];\n  /** 这些通知读过了：点了一条、全部标为已读 */\n  onRead?: (ids: string[]) => void;\n  /** 点了一条（标为已读之后）；有 href 时还会去那里 */\n  onItemClick?: (item: NotificationItem) => void;\n  /** 列表下面的内容（“查看全部”） */\n  footer?: VNodeChild;\n  /** 没有通知时显示的内容，默认是“没有通知” */\n  empty?: VNodeChild;\n  /** 相对时间以哪个时刻为现在（毫秒时间戳），默认此刻；演示数据固定日期时传 */\n  now?: number;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface NotificationListProps extends PartProps<'div', 'title'>, NotificationListOptions {\n  /** 标题，默认“通知”；false 不要标题行（“全部标为已读”挪到筛选那一行） */\n  title?: VNodeChild | false;\n  /** 标题行的部件属性 */\n  propsHead?: PartProps<'div'>;\n  /** “全部标为已读”按钮的部件属性 */\n  propsMarkAll?: Partial<ButtonProps>;\n  /** 筛选行的部件属性 */\n  propsFilters?: PartProps<'div'>;\n  /** 类型筛选按钮组的部件属性 */\n  propsTypes?: Partial<ToggleGroupBaseProps>;\n  /** “只看未读”开关的部件属性 */\n  propsUnreadOnly?: Partial<SwitchProps>;\n  /** 列表（ul）的部件属性 */\n  propsList?: PartProps<'ul'>;\n  /** 每一条（a）的部件属性，可以按条计算 */\n  propsItem?: PartProps<'a'> | ((item: NotificationItem) => PartProps<'a'>);\n  /** 列表为空时那一块的部件属性 */\n  propsEmpty?: PartProps<'div'>;\n  /** 列表下面那一行的部件属性 */\n  propsFooter?: PartProps<'div'>;\n}\n\n/** NotificationList 的样式：root、head、title、filters、list、item、dot… */\nexport const notificationListStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', minWidth: 0 },\n  head: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_sm',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n  },\n  title: { fontWeight: '_semibold' },\n  // 类型多时筛选按钮换行；“只看未读”总在最后、靠结束边\n  filters: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n  },\n  types: { flexWrap: 'wrap' },\n  end: { marginInlineStart: 'auto' },\n  list: { listStyle: 'none', margin: 0, padding: 0, overflowY: 'auto' },\n  item: {\n    display: 'grid',\n    gridTemplateColumns: '0.5rem minmax(0, 1fr) auto',\n    columnGap: '_sm',\n    alignItems: 'baseline',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    color: 'inherit',\n    textDecoration: 'none',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n    cursor: 'pointer',\n  },\n  // 未读的色点贴着标题的第一行\n  dot: { display: 'flex', alignItems: 'center', height: '1lh', alignSelf: 'start' },\n  body: { display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0 },\n  itemTitle: { fontSize: '_sm' },\n  itemTitleUnread: { fontWeight: '_semibold' },\n  muted: { color: '_textMuted', fontSize: '_xs' },\n  time: { color: '_textMuted', fontSize: '_xs', whiteSpace: 'nowrap' },\n  foot: {\n    display: 'flex',\n    justifyContent: 'center',\n    paddingBlock: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_border',\n  },\n  empty: { paddingBlock: '_lg' },\n});\n\n/** 通知列表：标题行、筛选、通知（新的在前）、底部；直接放在页面、抽屉里，或由 NotificationCenter 放进弹出层 */\nexport const NotificationList = _component(\n  ({\n    items,\n    types,\n    onRead,\n    onItemClick,\n    footer,\n    empty,\n    now,\n    title,\n    propsHead,\n    propsMarkAll,\n    propsFilters,\n    propsTypes,\n    propsUnreadOnly,\n    propsList,\n    propsItem,\n    propsEmpty,\n    propsFooter,\n    ...rest\n  }: NotificationListProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const format = useFormat();\n    const router = useRouterLink();\n    let type = _state('');\n    let unreadOnly = _state(false);\n    const unread = _derived(items.filter((item) => !item.read).length);\n    const shown = _derived(\n      items.filter((item) => (!type || item.type === type) && (!unreadOnly || !item.read)),\n    );\n\n    function select(item: NotificationItem, event: MouseEvent) {\n      if (!item.read) onRead?.([item.id]);\n      onItemClick?.(item);\n      if (item.href) router.onClick(event, item.href);\n    }\n\n    return () => {\n      const markAll = (\n        <Button\n          {...mergePartProps<ButtonProps>(\n            { size: 'xs', variant: 'ghost', sx: title === false && notificationListStyles.end },\n            propsMarkAll,\n            {\n              disabled: unread === 0,\n              onClick: () => onRead?.(items.filter((item) => !item.read).map((item) => item.id)),\n            },\n          )}\n        >\n          {messages.notificationsMarkAllRead}\n        </Button>\n      );\n      return (\n        <div {...mergeAttrs<'div'>({ sx: notificationListStyles.root }, rest)}>\n          {title !== false && (\n            <div {...mergeAttrs<'div'>({ sx: notificationListStyles.head }, propsHead)}>\n              <span {...css.attrs(notificationListStyles.title)}>\n                {title ?? messages.notifications}\n              </span>\n              {markAll}\n            </div>\n          )}\n          <div {...mergeAttrs<'div'>({ sx: notificationListStyles.filters }, propsFilters)}>\n            {types?.length ? (\n              <ToggleGroup\n                {...mergePartProps<ToggleGroupBaseProps & SingleSelectionProps>(\n                  {\n                    size: 'xs',\n                    sx: notificationListStyles.types,\n                    'aria-label': messages.notifications,\n                  },\n                  propsTypes,\n                )}\n                _value={type || 'all'}\n                onUpdate:_value={(next: string | null) =>\n                  (type = !next || next === 'all' ? '' : next)\n                }\n              >\n                <ToggleItem value=\"all\">{messages.notificationsAll}</ToggleItem>\n                {types.map((item) => (\n                  <ToggleItem key={item.key} value={item.key}>\n                    {item.label}\n                  </ToggleItem>\n                ))}\n              </ToggleGroup>\n            ) : null}\n            <Switch\n              {...mergePartProps<SwitchProps>(\n                { size: 'sm', sx: notificationListStyles.end },\n                propsUnreadOnly,\n              )}\n              _checked={unreadOnly}\n            >\n              {messages.notificationsUnreadOnly}\n            </Switch>\n            {title === false && markAll}\n          </div>\n          {shown.length === 0 ? (\n            <div {...mergeAttrs<'div'>({ sx: notificationListStyles.empty }, propsEmpty)}>\n              {empty ?? <Empty size=\"sm\" title={messages.notificationsEmpty} />}\n            </div>\n          ) : (\n            <ul {...mergeAttrs<'ul'>({ sx: notificationListStyles.list }, propsList)}>\n              {shown.map((item) => (\n                <li key={item.id}>\n                  <a\n                    {...mergeAttrs<'a'>(\n                      { sx: [notificationListStyles.item, focusRingStyles.visible] },\n                      typeof propsItem === 'function' ? propsItem(item) : propsItem,\n                      {\n                        href: item.href ? router.href(item.href) : undefined,\n                        role: item.href ? undefined : 'button',\n                        tabindex: 0,\n                        onClick: (event: MouseEvent) => select(item, event),\n                        onKeydown: (event: KeyboardEvent) => {\n                          if (!item.href && (event.key === 'Enter' || event.key === ' ')) {\n                            event.preventDefault();\n                            select(item, event as unknown as MouseEvent);\n                          }\n                        },\n                      },\n                    )}\n                    data-state={item.read ? 'read' : 'unread'}\n                  >\n                    <span {...css.attrs(notificationListStyles.dot)}>\n                      {!item.read && <StatusDot tone={item.tone ?? 'accent'} />}\n                    </span>\n                    <span {...css.attrs(notificationListStyles.body)}>\n                      <span\n                        {...css.attrs(\n                          notificationListStyles.itemTitle,\n                          !item.read && notificationListStyles.itemTitleUnread,\n                        )}\n                      >\n                        {!item.read && (\n                          <VisuallyHidden>{messages.notificationUnreadMark} </VisuallyHidden>\n                        )}\n                        {item.title}\n                      </span>\n                      {item.description && (\n                        <span {...css.attrs(notificationListStyles.muted)}>{item.description}</span>\n                      )}\n                    </span>\n                    <time\n                      datetime={item.time}\n                      title={format.date(item.time, { dateStyle: 'medium', timeStyle: 'short' })}\n                      {...css.attrs(notificationListStyles.time)}\n                    >\n                      {format.relative(item.time, { now })}\n                    </time>\n                  </a>\n                </li>\n              ))}\n            </ul>\n          )}\n          {hasContent(footer) && (\n            <div {...mergeAttrs<'div'>({ sx: notificationListStyles.foot }, propsFooter)}>\n              {footer}\n            </div>\n          )}\n        </div>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到弹出层的面板上 */\nexport interface NotificationCenterProps\n  extends Omit<PopoverProps, 'trigger' | 'children'>, NotificationListOptions {\n  /** 铃铛按钮的部件属性 */\n  propsTrigger?: Partial<IconButtonProps>;\n  /** 面板里的通知列表的部件属性 */\n  propsNotificationList?: Partial<NotificationListProps>;\n}\n\n/** NotificationCenter 的样式：panel（弹出层的宽度）、list（列表的最大高度） */\nexport const notificationCenterStyles = css.create({\n  panel: { width: 'min(26rem, calc(100vw - 2rem))', padding: 0 },\n  list: { maxHeight: '24rem' },\n});\n\n/** 通知中心：顶栏的铃铛（带未读数），点开是 NotificationList；点了一条就收起 */\nexport const NotificationCenter = _component(\n  ({\n    items,\n    types,\n    onRead,\n    onItemClick,\n    footer,\n    empty,\n    now,\n    _open: open = _bindable(false),\n    propsTrigger,\n    propsNotificationList,\n    sx,\n    ...rest\n  }: NotificationCenterProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const unread = _derived(items.filter((item) => !item.read).length);\n    return () => (\n      <Popover\n        {...rest}\n        placement={rest.placement ?? 'bottom-end'}\n        sx={[notificationCenterStyles.panel, sx]}\n        _open={open}\n        trigger={(trigger) => (\n          <Indicator count={unread} label={messages.notificationsUnread(unread)}>\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                { icon: Bell, 'aria-label': messages.notificationsUnread(unread) },\n                propsTrigger,\n                trigger,\n              )}\n            />\n          </Indicator>\n        )}\n      >\n        <NotificationList\n          {...mergePartProps<NotificationListProps>(\n            { items, propsList: { sx: notificationCenterStyles.list } },\n            propsNotificationList,\n            {\n              types,\n              onRead,\n              footer,\n              empty,\n              now,\n              onItemClick: (item: NotificationItem) => {\n                onItemClick?.(item);\n                open = false;\n              },\n            },\n          )}\n        />\n      </Popover>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"NotificationCenter.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vue_computed","_createVNode","_mergeProps","_vtp_bindable"],"sources":["../../src/patterns/NotificationCenter.tsx"],"sourcesContent":["/**\n * 通知：顶栏的铃铛 NotificationCenter（右上角是未读数，点开是通知列表），与列表本身 NotificationList\n * （通知页面、侧边抽屉里直接放）。列表新的在前：按类型筛选、只看未读、全部标为已读；点一条标为已读并去它的地址（走路由适配）。\n * 通知存在哪、何时算已读由应用决定：组件只报告 onRead。\n *\n *   <NotificationCenter\n *     items={notices}                                       // { id, title, description?, time, type?, read, href?, tone? }\n *     types={[{ key: 'todo', label: '待办' }, { key: 'remind', label: '催办' }]}\n *     onRead={(ids) => markRead(ids)}\n *     footer={<Link href=\"/inbox\">打开收件箱</Link>}\n *   />\n *   <NotificationList items={notices} types={types} onRead={markRead} />    通知页面：同一份列表，不放进弹出层\n *\n * 时间写成相对现在（3 分钟前、昨天），悬停看完整时间。未读的前面一个色点（tone 决定颜色，默认 accent），\n * 读屏念“未读”。列表为空时显示 empty（默认“没有通知”）。和 Toast 的分工：Toast 是此刻发生的事、几秒后消失；\n * 通知是留着、可以回头看的。\n *\n * NotificationList 的部件：Root（div）、Head（div）、Title（span）、MarkAll（Button）、Filters（div）、Types（ToggleGroup）、\n * UnreadOnly（Switch）、List（ul）、Item（a，可以按条计算）、Empty（div）、Footer（div）。\n */\nimport { Bell } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { Indicator } from '../base/Indicator';\nimport { StatusDot } from '../base/StatusDot';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useFormat } from '../config/lang/format';\nimport { useMessages } from '../config/lang/messages';\nimport { Empty } from '../feedback/Empty';\nimport { Switch, type SwitchProps } from '../input/Switch';\nimport { ToggleGroup, ToggleItem, type ToggleGroupBaseProps } from '../input/ToggleGroup';\nimport { Popover, type PopoverProps } from '../overlay/Popover';\nimport { useRouterLink } from '../utils/dom/link';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport type { SingleSelectionProps } from '../utils/data/selection';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { patternsMessages } from './messages';\n\n/** 一条通知 */\nexport interface NotificationItem {\n  /** 标识 */\n  id: string;\n  /** 标题：一句话说清发生了什么 */\n  title: string;\n  /** 补充说明（谁、哪张单） */\n  description?: string;\n  /** 发生的时间（ISO） */\n  time: string;\n  /** 类型：按 types 筛选 */\n  type?: string;\n  /** 读过了 */\n  read: boolean;\n  /** 点了去哪儿 */\n  href?: string;\n  /** 未读色点的色调，默认 accent；超时、被退回用 danger、warning */\n  tone?: StatusTone;\n}\n\n/** 通知的一种类型（筛选按钮） */\nexport interface NotificationType {\n  /** 类型：对应 NotificationItem.type */\n  key: string;\n  /** 名称 */\n  label: string;\n}\n\n/** 通知列表的内容与回调：NotificationList 与 NotificationCenter 共用 */\nexport interface NotificationListOptions {\n  /** 通知：新的在前（组件不排序） */\n  items: readonly NotificationItem[];\n  /** 类型：写了时列表上方有按类型筛选的按钮 */\n  types?: readonly NotificationType[];\n  /** 这些通知读过了：点了一条、全部标为已读 */\n  onRead?: (ids: string[]) => void;\n  /** 点了一条（标为已读之后）；有 href 时还会去那里 */\n  onItemClick?: (item: NotificationItem) => void;\n  /** 列表下面的内容（“查看全部”） */\n  footer?: VNodeChild;\n  /** 没有通知时显示的内容，默认是“没有通知” */\n  empty?: VNodeChild;\n  /** 相对时间以哪个时刻为现在（毫秒时间戳），默认此刻；演示数据固定日期时传 */\n  now?: number;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface NotificationListProps extends PartProps<'div', 'title'>, NotificationListOptions {\n  /** 标题，默认“通知”；false 不要标题行（“全部标为已读”挪到筛选那一行） */\n  title?: VNodeChild | false;\n  /** 标题行的部件属性 */\n  propsHead?: PartProps<'div'>;\n  /** “全部标为已读”按钮的部件属性 */\n  propsMarkAll?: Partial<ButtonProps>;\n  /** 筛选行的部件属性 */\n  propsFilters?: PartProps<'div'>;\n  /** 类型筛选按钮组的部件属性 */\n  propsTypes?: Partial<ToggleGroupBaseProps>;\n  /** “只看未读”开关的部件属性 */\n  propsUnreadOnly?: Partial<SwitchProps>;\n  /** 列表（ul）的部件属性 */\n  propsList?: PartProps<'ul'>;\n  /** 每一条（a）的部件属性，可以按条计算 */\n  propsItem?: PartProps<'a'> | ((item: NotificationItem) => PartProps<'a'>);\n  /** 列表为空时那一块的部件属性 */\n  propsEmpty?: PartProps<'div'>;\n  /** 列表下面那一行的部件属性 */\n  propsFooter?: PartProps<'div'>;\n}\n\n/** NotificationList 的样式：root、head、title、filters、list、item、dot… */\nexport const notificationListStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', minWidth: 0 },\n  head: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_sm',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n  },\n  title: { fontWeight: '_semibold' },\n  // 类型多时筛选按钮换行；“只看未读”总在最后、靠结束边\n  filters: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n  },\n  types: { flexWrap: 'wrap' },\n  end: { marginInlineStart: 'auto' },\n  list: { listStyle: 'none', margin: 0, padding: 0, overflowY: 'auto' },\n  item: {\n    display: 'grid',\n    gridTemplateColumns: '0.5rem minmax(0, 1fr) auto',\n    columnGap: '_sm',\n    alignItems: 'baseline',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    color: 'inherit',\n    textDecoration: 'none',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n    cursor: 'pointer',\n  },\n  // 未读的色点贴着标题的第一行\n  dot: { display: 'flex', alignItems: 'center', height: '1lh', alignSelf: 'start' },\n  body: { display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0 },\n  itemTitle: { fontSize: '_sm' },\n  itemTitleUnread: { fontWeight: '_semibold' },\n  muted: { color: '_textMuted', fontSize: '_xs' },\n  time: { color: '_textMuted', fontSize: '_xs', whiteSpace: 'nowrap' },\n  foot: {\n    display: 'flex',\n    justifyContent: 'center',\n    paddingBlock: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_border',\n  },\n  empty: { paddingBlock: '_lg' },\n});\n\n/** 通知列表：标题行、筛选、通知（新的在前）、底部；直接放在页面、抽屉里，或由 NotificationCenter 放进弹出层 */\nexport const NotificationList = _component(\n  ({\n    items,\n    types,\n    onRead,\n    onItemClick,\n    footer,\n    empty,\n    now,\n    title,\n    propsHead,\n    propsMarkAll,\n    propsFilters,\n    propsTypes,\n    propsUnreadOnly,\n    propsList,\n    propsItem,\n    propsEmpty,\n    propsFooter,\n    ...rest\n  }: NotificationListProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const format = useFormat();\n    const router = useRouterLink();\n    let type = _state('');\n    let unreadOnly = _state(false);\n    const unread = _derived(items.filter((item) => !item.read).length);\n    const shown = _derived(\n      items.filter((item) => (!type || item.type === type) && (!unreadOnly || !item.read)),\n    );\n\n    function select(item: NotificationItem, event: MouseEvent) {\n      if (!item.read) onRead?.([item.id]);\n      onItemClick?.(item);\n      if (item.href) router.onClick(event, item.href);\n    }\n\n    return () => {\n      const markAll = (\n        <Button\n          {...mergePartProps<ButtonProps>(\n            { size: 'xs', variant: 'ghost', sx: title === false && notificationListStyles.end },\n            propsMarkAll,\n            {\n              disabled: unread === 0,\n              onClick: () => onRead?.(items.filter((item) => !item.read).map((item) => item.id)),\n            },\n          )}\n        >\n          {messages.notificationsMarkAllRead}\n        </Button>\n      );\n      return (\n        <div {...mergeAttrs<'div'>({ sx: notificationListStyles.root }, rest)}>\n          {title !== false && (\n            <div {...mergeAttrs<'div'>({ sx: notificationListStyles.head }, propsHead)}>\n              <span {...css.attrs(notificationListStyles.title)}>\n                {title ?? messages.notifications}\n              </span>\n              {markAll}\n            </div>\n          )}\n          <div {...mergeAttrs<'div'>({ sx: notificationListStyles.filters }, propsFilters)}>\n            {types?.length ? (\n              <ToggleGroup\n                {...mergePartProps<ToggleGroupBaseProps & SingleSelectionProps>(\n                  {\n                    size: 'xs',\n                    sx: notificationListStyles.types,\n                    'aria-label': messages.notifications,\n                  },\n                  propsTypes,\n                )}\n                _value={type || 'all'}\n                onUpdate:_value={(next: string | null) =>\n                  (type = !next || next === 'all' ? '' : next)\n                }\n              >\n                <ToggleItem value=\"all\">{messages.notificationsAll}</ToggleItem>\n                {types.map((item) => (\n                  <ToggleItem key={item.key} value={item.key}>\n                    {item.label}\n                  </ToggleItem>\n                ))}\n              </ToggleGroup>\n            ) : null}\n            <Switch\n              {...mergePartProps<SwitchProps>(\n                { size: 'sm', sx: notificationListStyles.end },\n                propsUnreadOnly,\n              )}\n              _checked={unreadOnly}\n            >\n              {messages.notificationsUnreadOnly}\n            </Switch>\n            {title === false && markAll}\n          </div>\n          {shown.length === 0 ? (\n            <div {...mergeAttrs<'div'>({ sx: notificationListStyles.empty }, propsEmpty)}>\n              {empty ?? <Empty size=\"sm\" title={messages.notificationsEmpty} />}\n            </div>\n          ) : (\n            <ul {...mergeAttrs<'ul'>({ sx: notificationListStyles.list }, propsList)}>\n              {shown.map((item) => (\n                <li key={item.id}>\n                  <a\n                    {...mergeAttrs<'a'>(\n                      { sx: [notificationListStyles.item, focusRingStyles.visible] },\n                      typeof propsItem === 'function' ? propsItem(item) : propsItem,\n                      {\n                        href: item.href ? router.href(item.href) : undefined,\n                        role: item.href ? undefined : 'button',\n                        tabindex: 0,\n                        onClick: (event: MouseEvent) => select(item, event),\n                        onKeydown: (event: KeyboardEvent) => {\n                          if (!item.href && (event.key === 'Enter' || event.key === ' ')) {\n                            event.preventDefault();\n                            select(item, event as unknown as MouseEvent);\n                          }\n                        },\n                      },\n                    )}\n                    data-state={item.read ? 'read' : 'unread'}\n                  >\n                    <span {...css.attrs(notificationListStyles.dot)}>\n                      {!item.read && <StatusDot tone={item.tone ?? 'accent'} />}\n                    </span>\n                    <span {...css.attrs(notificationListStyles.body)}>\n                      <span\n                        {...css.attrs(\n                          notificationListStyles.itemTitle,\n                          !item.read && notificationListStyles.itemTitleUnread,\n                        )}\n                      >\n                        {!item.read && (\n                          <VisuallyHidden>{messages.notificationUnreadMark} </VisuallyHidden>\n                        )}\n                        {item.title}\n                      </span>\n                      {item.description && (\n                        <span {...css.attrs(notificationListStyles.muted)}>{item.description}</span>\n                      )}\n                    </span>\n                    <time\n                      datetime={item.time}\n                      title={format.date(item.time, { dateStyle: 'medium', timeStyle: 'short' })}\n                      {...css.attrs(notificationListStyles.time)}\n                    >\n                      {format.relative(item.time, { now })}\n                    </time>\n                  </a>\n                </li>\n              ))}\n            </ul>\n          )}\n          {hasContent(footer) && (\n            <div {...mergeAttrs<'div'>({ sx: notificationListStyles.foot }, propsFooter)}>\n              {footer}\n            </div>\n          )}\n        </div>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到弹出层的面板上 */\nexport interface NotificationCenterProps\n  extends Omit<PopoverProps, 'trigger' | 'children'>, NotificationListOptions {\n  /** 铃铛按钮的部件属性 */\n  propsTrigger?: Partial<IconButtonProps>;\n  /** 面板里的通知列表的部件属性 */\n  propsNotificationList?: Partial<NotificationListProps>;\n}\n\n/** NotificationCenter 的样式：panel（弹出层的宽度）、list（列表的最大高度） */\nexport const notificationCenterStyles = css.create({\n  panel: { width: 'min(26rem, calc(100vw - 2rem))', padding: 0 },\n  list: { maxHeight: '24rem' },\n});\n\n/** 通知中心：顶栏的铃铛（带未读数），点开是 NotificationList；点了一条就收起 */\nexport const NotificationCenter = _component(\n  ({\n    items,\n    types,\n    onRead,\n    onItemClick,\n    footer,\n    empty,\n    now,\n    _open: open = _bindable(false),\n    propsTrigger,\n    propsNotificationList,\n    sx,\n    ...rest\n  }: NotificationCenterProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const unread = _derived(items.filter((item) => !item.read).length);\n    return () => (\n      <Popover\n        {...rest}\n        placement={rest.placement ?? 'bottom-end'}\n        sx={[notificationCenterStyles.panel, sx]}\n        _open={open}\n        trigger={(trigger) => (\n          <Indicator count={unread} label={messages.notificationsUnread(unread)}>\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                { icon: Bell, 'aria-label': messages.notificationsUnread(unread) },\n                propsTrigger,\n                trigger,\n              )}\n            />\n          </Indicator>\n        )}\n      >\n        <NotificationList\n          {...mergePartProps<NotificationListProps>(\n            { items, propsList: { sx: notificationCenterStyles.list } },\n            propsNotificationList,\n            {\n              types,\n              onRead,\n              footer,\n              empty,\n              now,\n              onItemClick: (item: NotificationItem) => {\n                onItemClick?.(item);\n                open = false;\n              },\n            },\n          )}\n        />\n      </Popover>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/patterns/QueryTable.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import { type IconButtonProps } from '../base/IconButton';
 import { type AlertProps } from '../feedback/Alert';

package/dist/patterns/QueryTable.js

@@ -18,7 +18,7 @@ import { patternsMessages } from "./messages.js";
 import { FilterBar } from "./FilterBar.js";
 import { createVNode, isVNode, reactive, shallowRef } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Maximize, Minimize, RefreshCw, Rows3 } from "@lucide/icons";
 //#region src/patterns/QueryTable.tsx
 /**