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

package/dist/input/Upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Upload.js","names":["_isVNode","Upload","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps","FileIcon","_Fragment"],"sources":["../../src/input/Upload.tsx"],"sourcesContent":["/**\n * 上传（div）：FileDrop 选文件，下面列出文件、上传进度、失败重试与移除。只负责界面与状态，怎样上传由 upload 决定：\n *\n *   <Upload\n *     _value={files}\n *     multiple\n *     accept=\"image/*\"\n *     maxSize={5_000_000}\n *     upload={(file, { onProgress, signal }) => api.upload(file, { onProgress, signal })}\n *   />\n *   <Upload _value={files} action=\"/files\" />   用应用配置的请求客户端（http）上传\n *\n * - value 是 UploadFile 的数组（文件、状态、进度、错误、upload 的结果），父级写 _value={list}；\n * - 给了 upload 或 action 时选到文件就开始上传，否则停在 selected（等提交时一起上传）；移除正在上传的文件会中止（signal）；\n * - action：经 createUi / Provider 的 http 把文件 POST 过去（multipart，字段名 fieldName），与其他请求共用 baseURL、令牌与拆包；\n *   fetch 拿不到上传的字节进度，进度条是不确定的，要进度时写 upload（XMLHttpRequest 的 upload.onprogress）；\n * - 超过 maxSize、不在 accept 里的文件也列出来，带错误、不上传；单选（不写 multiple）时新文件替换旧的；\n * - 已有文件（之前上传过、从后端读回来的）用 existingUploadFile 放进 value：状态是 done，没有 File，\n *   给了 url 时文件名链到它（预览、下载），可以移除；\n *\n *   let files = _state([existingUploadFile({ name: '验证报告.pdf', url: '/files/123' })]);\n * - 在 Field 里时关联标签与错误；写了 name 时有一个隐藏的 file input 带着全部文件，原生提交（FormData）也拿得到。\n *\n * - 图片墙（listType=\"picture\"）：方形缩略图（选的文件用本地地址显示，不等上传），点开看大图（整面墙是一个 ImageGroup，\n *   大图里左右切换）；上传中盖一层进度，失败标红；选文件的区域是墙上最后一格。sortable 时拖动把手（或聚焦后用键盘）调整顺序，\n *   pasteable 时焦点在组件里按 Ctrl + V 把剪贴板里的图片加进来（截图、从别处复制的图）。\n *\n * 部件：Root（div）、Drop（FileDrop）、List（ul）、Item（li）、Icon（文件图标）、Body（文件名与下一行）、Name、Meta（大小或错误）、\n * Progress、Retry（重试按钮）、Remove（移除按钮）。\n */\nimport {\n  CircleAlert,\n  CircleCheck,\n  File as FileIcon,\n  GripVertical,\n  ImagePlus,\n  RotateCw,\n  X,\n} from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount, watch } from 'vue';\nimport { ButtonBase } from '../base/ButtonBase';\nimport { Image, ImageGroup } from '../display/Image';\nimport { useSortable } from '../utils/dom/sortable';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { Link } from '../base/Link';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useFormat } from '../config/lang/format';\nimport { useFieldControl } from '../form/Field';\nimport { useHttp } from '../utils/request/http';\nimport { Progress, type ProgressProps } from '../feedback/Progress';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { itemStyles } from '../utils/style/item-styles';\nimport { FileDrop, matchesAccept, type FileDropProps } from './FileDrop';\nimport { GridList, type GridProps } from '../layout/Grid';\n\n/** 列表里的一个文件 */\nexport interface UploadFile {\n  /** 组件给的 id，同一个列表里唯一 */\n  readonly id: string;\n  /** 文件名 */\n  readonly name: string;\n  /** 大小（字节）；已有文件不知道时为 undefined */\n  readonly size?: number;\n  /** 选的文件；已有文件没有 */\n  readonly file?: File;\n  /** 已有文件的地址：文件名链到它 */\n  readonly url?: string;\n  /** selected：选了、还没上传；uploading：上传中；done：完成；error：失败或没通过检查 */\n  readonly status: 'selected' | 'uploading' | 'done' | 'error';\n  /** 上传进度 0–1；upload 没报告进度时为 undefined（不确定进度） */\n  readonly progress?: number;\n  /** 错误信息 */\n  readonly error?: string;\n  /** 没通过大小或类型检查：不会上传，也不能重试 */\n  readonly rejected?: boolean;\n  /** upload 的返回值（如文件地址） */\n  readonly response?: unknown;\n}\n\n/** 上传一个文件：报告进度、响应中止；成功时 resolve（值记在 response 上），失败时 reject */\nexport type UploadHandler = (\n  file: File,\n  context: { onProgress: (fraction: number) => void; signal: AbortSignal },\n) => Promise<unknown>;\n\n/** 列表的样子 */\nexport interface UploadListTypes {\n  /** 一行一个文件：图标、文件名、大小或进度（默认） */\n  text: unknown;\n  /** 图片墙：方形缩略图，点开看大图 */\n  picture: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface UploadProps extends PartProps<'div'> {\n  /** 文件列表：父级写 _value={list} */\n  _value?: UploadFile[];\n  /** 怎样上传一个文件；不写时用 action，都没有时只选文件、不上传 */\n  upload?: UploadHandler;\n  /** 上传地址：没写 upload 时用应用配置的请求客户端（useHttp）POST 过去，响应体记在 response 上 */\n  action?: string;\n  /** action 上传时文件在表单里的字段名，默认 file */\n  fieldName?: string;\n  /** 接受的文件类型（同原生 accept） */\n  accept?: string;\n  /** 可以选多个；不写时新文件替换旧的 */\n  multiple?: boolean;\n  /** 单个文件的大小上限（字节） */\n  maxSize?: number;\n  /** 最多几个文件，超出的不加进来 */\n  maxFiles?: number;\n  /** 原生表单提交时的字段名：写了才有隐藏的 file input */\n  name?: string;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读：只列出文件，不能再选、不能移除或重试 */\n  readonly?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 选择区域里提示文字下面的说明（大小、类型限制） */\n  description?: FileDropProps['description'];\n  /** 列表的样子：text 一行一个文件（默认），picture 是图片墙 */\n  listType?: keyof UploadListTypes;\n  /** 图片墙里缩略图的边长（px），默认 104 */\n  thumbnailSize?: number;\n  /** 拖动把手（或聚焦后用键盘）调整文件的顺序（图片墙） */\n  sortable?: boolean;\n  /** 焦点在组件里时 Ctrl + V 把剪贴板里的图片、文件加进来 */\n  pasteable?: boolean;\n  /** 选择区域（FileDrop）的部件属性 */\n  propsDrop?: Partial<FileDropProps>;\n  /** 列表的部件属性 */\n  propsList?: Partial<GridProps<'ul'>>;\n  /** 每一项的部件属性，可以按文件计算 */\n  propsItem?: PartProps<'li'> | ((file: UploadFile) => PartProps<'li'>);\n  /** 每一项的文件图标（按状态是文件、对勾或警告）的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 每一项里文件名与下一行（大小、错误或进度）的外层的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 每一项里文件名的部件属性 */\n  propsName?: PartProps<'span'>;\n  /** 每一项里文件大小或错误信息的部件属性 */\n  propsMeta?: PartProps<'span'>;\n  /** 每一项上传中的进度条的部件属性；进度与名称（文件名）由组件管理 */\n  propsProgress?: Omit<Partial<ProgressProps>, 'value' | 'aria-label'>;\n  /**\n   * 每一项失败后的重试按钮的部件属性。名称（重新上传 文件名）每项不同，由组件按语言包生成，\n   * 改文案请改语言包的 uploadRetry；点击由组件管理\n   */\n  propsRetry?: Omit<Partial<IconButtonProps>, 'aria-label' | 'onClick'>;\n  /** 每一项的移除按钮的部件属性；名称（语言包的 uploadRemove）、点击与不可用由组件管理 */\n  propsRemove?: Omit<Partial<IconButtonProps>, 'aria-label' | 'onClick' | 'disabled'>;\n}\n\n/** Upload 的样式：root、list、item、icon、body、name、meta、error、progress */\nexport const uploadStyles = css.create({\n  root: { display: 'grid', gap: '_sm' },\n  item: {\n    cursor: 'default',\n    gap: '_sm',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n  },\n  icon: { flexShrink: 0, color: '_textMuted' },\n  body: { display: 'grid', gap: '_xs', flexGrow: 1, minWidth: 0 },\n  name: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },\n  meta: { fontSize: '_sm', color: '_textMuted' },\n  error: { color: '_dangerText' },\n  done: { color: '_successText' },\n  progress: { width: '_full' },\n  // 图片墙：缩略图与“添加图片”一样大，排成一行、放不下换行\n  wall: { display: 'flex', flexWrap: 'wrap', gap: '_sm' },\n  wallList: { display: 'contents' },\n  card: {\n    position: 'relative',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    overflow: 'hidden',\n    backgroundColor: '_fill',\n  },\n  cardError: { borderColor: '_danger' },\n  // 选文件的那一格：同样大小，图标与文字居中\n  addCard: { padding: '_xs', gap: '_xs', textAlign: 'center', fontSize: '_sm' },\n  // 上传中、失败：盖在缩略图上\n  overlay: {\n    position: 'absolute',\n    insetInline: 0,\n    bottom: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_xs',\n    padding: '_xs',\n    backgroundColor: 'rgb(0 0 0 / 0.55)',\n    color: 'white',\n    fontSize: '_xs',\n  },\n  placeholder: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_xs',\n    width: '_full',\n    height: '_full',\n    padding: '_xs',\n    boxSizing: 'border-box',\n    color: '_textMuted',\n    fontSize: '_xs',\n    textAlign: 'center',\n    overflowWrap: 'anywhere',\n  },\n  // 右上角的把手、重试、移除：浅色底上的小按钮\n  actions: {\n    position: 'absolute',\n    top: '_xs',\n    insetInlineEnd: '_xs',\n    display: 'flex',\n    gap: '2px',\n  },\n  action: { backgroundColor: { default: 'rgb(255 255 255 / 0.85)', ':hover': 'white' } },\n  handle: {\n    display: 'grid',\n    placeItems: 'center',\n    width: '1.75em',\n    height: '1.75em',\n    borderRadius: '_sm',\n    color: '_text',\n    backgroundColor: 'rgb(255 255 255 / 0.85)',\n    cursor: { default: 'grab', ':active': 'grabbing' },\n    touchAction: 'none',\n  },\n});\n\n/** Upload 的动态样式：缩略图的边长 */\nexport const uploadDynamicStyles = css.create({\n  square: (size: number) => ({ width: `${size}px`, height: `${size}px` }),\n});\n\nlet nextId = 0;\n\n/** 已有文件（之前上传过、从后端读回来的）：放进 Upload 的 value，状态是 done */\nexport function existingUploadFile(file: {\n  /** 标识；不写时生成一个 */\n  id?: string;\n  /** 文件名 */\n  name: string;\n  /** 大小（字节） */\n  size?: number;\n  /** 地址：文件名链到它 */\n  url?: string;\n}): UploadFile {\n  return { ...file, id: file.id ?? `upload-${++nextId}`, status: 'done', response: file.url };\n}\n\n/** 上传：选文件、列出文件与进度、失败重试、移除 */\nexport const Upload = _component(\n  ({\n    _value: value = _bindable<UploadFile[]>([]),\n    upload,\n    action,\n    fieldName = 'file',\n    accept,\n    multiple = false,\n    maxSize,\n    maxFiles,\n    name,\n    disabled,\n    readonly,\n    invalid,\n    required,\n    description,\n    listType = 'text',\n    thumbnailSize = 104,\n    sortable = false,\n    pasteable = false,\n    propsDrop,\n    propsList,\n    propsItem,\n    propsIcon,\n    propsBody,\n    propsName,\n    propsMeta,\n    propsProgress,\n    propsRetry,\n    propsRemove,\n    ...rest\n  }: UploadProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    // delegate：里面的 FileDrop 照常从 Field 拿 id、说明与标签\n    const control = useFieldControl(() => ({ invalid, required, disabled, readonly }), {\n      delegate: true,\n    });\n    const http = useHttp();\n    /** 实际用的上传函数：upload 优先，其次按 action 用请求客户端发 */\n    const uploader = (): UploadHandler | undefined =>\n      upload ??\n      (action\n        ? (file, { signal }) => {\n            const body = new FormData();\n            body.append(fieldName, file);\n            return http.request({ method: 'POST', url: action, body, signal });\n          }\n        : undefined);\n    let hidden = _state.raw<HTMLInputElement | null>(null);\n    // 每个正在上传的文件一个：移除、重试、卸载时中止\n    const controllers = new Map<string, AbortController>();\n    onBeforeUnmount(() => controllers.forEach((controller) => controller.abort()));\n\n    const patch = (id: string, changes: Partial<UploadFile>) =>\n      (value = value.map((item) => (item.id === id ? { ...item, ...changes } : item)));\n\n    async function start(item: UploadFile) {\n      const send = uploader();\n      if (!send || !item.file) return;\n      controllers.get(item.id)?.abort();\n      const controller = new AbortController();\n      controllers.set(item.id, controller);\n      patch(item.id, { status: 'uploading', progress: undefined, error: undefined });\n      try {\n        const response = await send(item.file!, {\n          onProgress: (fraction) => {\n            if (!controller.signal.aborted) patch(item.id, { progress: fraction });\n          },\n          signal: controller.signal,\n        });\n        if (!controller.signal.aborted) patch(item.id, { status: 'done', progress: 1, response });\n      } catch (error) {\n        if (controller.signal.aborted) return;\n        const message = error instanceof Error && error.message ? error.message : lang.uploadFailed;\n        patch(item.id, { status: 'error', error: message });\n      } finally {\n        if (controllers.get(item.id) === controller) controllers.delete(item.id);\n      }\n    }\n\n    function remove(id: string) {\n      controllers.get(id)?.abort();\n      controllers.delete(id);\n      value = value.filter((item) => item.id !== id);\n    }\n\n    function add(files: File[], rejectedType = false) {\n      const entries = files.map((file): UploadFile => {\n        const base = { id: `upload-${++nextId}`, name: file.name, size: file.size, file };\n        if (rejectedType) {\n          return { ...base, status: 'error', error: lang.fileTypeRejected, rejected: true };\n        }\n        if (maxSize != null && file.size > maxSize) {\n          const error = lang.fileTooLarge(format.fileSize(maxSize));\n          return { ...base, status: 'error', error, rejected: true };\n        }\n        return { ...base, status: 'selected' };\n      });\n      if (!multiple) value.forEach((item) => controllers.get(item.id)?.abort());\n      const kept = multiple ? value : [];\n      const room = maxFiles == null ? entries.length : Math.max(0, maxFiles - kept.length);\n      const added = (multiple ? entries : entries.slice(-1)).slice(0, room);\n      value = [...kept, ...added];\n      added.filter((item) => item.status === 'selected').forEach((item) => void start(item));\n    }\n\n    // 图片墙里选的文件的本地地址：用完（移除、卸载）回收\n    const previews = new Map<string, string>();\n    const previewOf = (item: UploadFile) => {\n      if (item.url) return item.url;\n      if (!item.file || !item.file.type.startsWith('image/')) return undefined;\n      let url = previews.get(item.id);\n      if (!url) previews.set(item.id, (url = URL.createObjectURL(item.file)));\n      return url;\n    };\n    watch(\n      () => value,\n      (list) => {\n        const kept = new Set(list.map((item) => item.id));\n        for (const [id, url] of previews)\n          if (!kept.has(id)) {\n            URL.revokeObjectURL(url);\n            previews.delete(id);\n          }\n      },\n    );\n    onBeforeUnmount(() => previews.forEach((url) => URL.revokeObjectURL(url)));\n\n    let wall = _state.raw<HTMLElement | null>(null);\n    const sortableWall = useSortable<UploadFile>({\n      items: () => value,\n      getKey: (item) => item.id,\n      getLabel: (item) => item.name,\n      onChange: (next) => (value = next),\n      container: () => wall,\n      orientation: () => 'horizontal',\n      disabled: () => !sortable || control().readonly || control().disabled,\n    });\n\n    /** 粘贴：剪贴板里的文件（截图是 image/png）按 accept 分开，不符合的照常列出、带错误 */\n    function onPaste(event: ClipboardEvent) {\n      const state = control();\n      if (!pasteable || state.disabled || state.readonly) return;\n      const files = [...(event.clipboardData?.files ?? [])];\n      if (files.length === 0) return;\n      event.preventDefault();\n      const accepted = files.filter((file) => matchesAccept(file, accept));\n      const rejected = files.filter((file) => !matchesAccept(file, accept));\n      if (accepted.length) add(accepted);\n      if (rejected.length) add(rejected, true);\n    }\n\n    // 隐藏的 file input 带着全部可提交的文件：原生提交、FormData 拿得到\n    _effect(() => {\n      if (!hidden || typeof DataTransfer === 'undefined') return;\n      const transfer = new DataTransfer();\n      for (const item of value) if (item.file && !item.rejected) transfer.items.add(item.file);\n      hidden.files = transfer.files;\n    });\n\n    function renderItem(item: UploadFile) {\n      const state = control();\n      const own = typeof propsItem === 'function' ? propsItem(item) : propsItem;\n      const fileName = item.name;\n      const failed = item.status === 'error';\n      return (\n        <li\n          key={item.id}\n          {...mergeAttrs<'li'>({ sx: [itemStyles.row, uploadStyles.item] }, own)}\n          data-state={item.status}\n        >\n          <Icon\n            {...mergePartProps<IconProps>(\n              {\n                icon: failed ? CircleAlert : item.status === 'done' ? CircleCheck : FileIcon,\n                sx: [\n                  uploadStyles.icon,\n                  failed && uploadStyles.error,\n                  item.status === 'done' && uploadStyles.done,\n                ],\n              },\n              propsIcon,\n            )}\n          />\n          <div {...mergeAttrs<'div'>({ sx: uploadStyles.body }, propsBody)}>\n            <span {...mergeAttrs<'span'>({ sx: uploadStyles.name }, propsName)}>\n              {item.url ? (\n                <Link href={item.url} target=\"_blank\">\n                  {fileName}\n                </Link>\n              ) : (\n                fileName\n              )}\n            </span>\n            {item.status === 'uploading' ? (\n              <Progress\n                {...mergePartProps<ProgressProps>(\n                  { size: 'xs', sx: uploadStyles.progress },\n                  propsProgress,\n                  {\n                    value: item.progress == null ? null : Math.round(item.progress * 100),\n                    'aria-label': fileName,\n                  },\n                )}\n              />\n            ) : (\n              <span\n                {...mergeAttrs<'span'>(\n                  { sx: [uploadStyles.meta, failed && uploadStyles.error] },\n                  propsMeta,\n                )}\n              >\n                {failed ? item.error : item.size != null && format.fileSize(item.size)}\n                {item.status === 'done' && <VisuallyHidden> {lang.uploadDone}</VisuallyHidden>}\n              </span>\n            )}\n          </div>\n          {failed && uploader() && !item.rejected && !state.readonly && (\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                {\n                  icon: RotateCw,\n                  variant: 'ghost',\n                  size: 'sm',\n                  // 名称带文件名、每项不同：类型里不让使用方覆盖（同一个值会让各项的按钮同名）\n                  'aria-label': lang.uploadRetry(fileName),\n                },\n                propsRetry,\n                { onClick: () => void start(item) },\n              )}\n            />\n          )}\n          {!state.readonly && (\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                {\n                  icon: X,\n                  variant: 'ghost',\n                  size: 'sm',\n                  'aria-label': lang.uploadRemove(fileName),\n                },\n                propsRemove,\n                { disabled: state.disabled, onClick: () => remove(item.id) },\n              )}\n            />\n          )}\n        </li>\n      );\n    }\n\n    /** 图片墙的一格：缩略图（点开看大图）、上传进度或错误、把手、重试与移除 */\n    function renderCard(item: UploadFile) {\n      const state = control();\n      const failed = item.status === 'error';\n      const src = previewOf(item);\n      return (\n        <div\n          key={item.id}\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                uploadStyles.card,\n                uploadDynamicStyles.square(thumbnailSize),\n                failed && uploadStyles.cardError,\n              ],\n            },\n            sortableWall.itemProps(item.id),\n            { role: 'listitem' },\n          )}\n          data-state={item.status}\n        >\n          {src && !item.rejected ? (\n            <Image\n              src={src}\n              alt={item.name}\n              width={thumbnailSize - 2}\n              height={thumbnailSize - 2}\n              radius=\"none\"\n              preview={{ caption: item.name, download: item.name }}\n            />\n          ) : (\n            <div {...css.attrs(uploadStyles.placeholder)}>\n              <Icon icon={failed ? CircleAlert : FileIcon} sx={failed && uploadStyles.error} />\n              {item.name}\n            </div>\n          )}\n          {item.status === 'uploading' && (\n            <div {...css.attrs(uploadStyles.overlay)}>\n              <Progress\n                {...mergePartProps<ProgressProps>({ size: 'xs' }, propsProgress, {\n                  value: item.progress == null ? null : Math.round(item.progress * 100),\n                  'aria-label': item.name,\n                })}\n              />\n            </div>\n          )}\n          {failed && src && !item.rejected && (\n            <div {...css.attrs(uploadStyles.overlay)} title={item.error}>\n              {item.error}\n            </div>\n          )}\n          {item.status === 'done' && <VisuallyHidden>{lang.uploadDone}</VisuallyHidden>}\n          {!state.readonly && (\n            <div {...css.attrs(uploadStyles.actions)}>\n              {sortable && (\n                <ButtonBase\n                  sx={uploadStyles.handle}\n                  ripple={false}\n                  disabled={state.disabled}\n                  aria-label={lang.sortableHandle(item.name)}\n                  {...sortableWall.handleProps(item.id)}\n                >\n                  <Icon icon={GripVertical} />\n                </ButtonBase>\n              )}\n              {failed && uploader() && !item.rejected && (\n                <IconButton\n                  {...mergePartProps<IconButtonProps>(\n                    {\n                      icon: RotateCw,\n                      variant: 'ghost',\n                      size: 'xs',\n                      sx: uploadStyles.action,\n                      'aria-label': lang.uploadRetry(item.name),\n                    },\n                    propsRetry,\n                    { onClick: () => void start(item) },\n                  )}\n                />\n              )}\n              <IconButton\n                {...mergePartProps<IconButtonProps>(\n                  {\n                    icon: X,\n                    variant: 'ghost',\n                    size: 'xs',\n                    sx: uploadStyles.action,\n                    'aria-label': lang.uploadRemove(item.name),\n                  },\n                  propsRemove,\n                  { disabled: state.disabled, onClick: () => remove(item.id) },\n                )}\n              />\n            </div>\n          )}\n        </div>\n      );\n    }\n\n    /** 选文件的区域：列表模式在上方，图片墙模式是最后一格 */\n    function renderDrop(picture: boolean) {\n      const state = control();\n      const full = maxFiles != null && multiple && value.length >= maxFiles;\n      if (state.readonly || (picture && full)) return null;\n      const hint = pasteable ? lang.uploadPasteHint : undefined;\n      const props = mergePartProps<FileDropProps>(\n        {\n          accept,\n          multiple,\n          disabled: state.disabled,\n          invalid: state.invalid,\n          // 选好的文件不在这个输入框里（它选完就清空）：已有文件时不再原生必填，免得表单交不了\n          required: state.required && value.length === 0,\n          description: picture\n            ? undefined\n            : hint\n              ? [description, description != null && ' · ', hint]\n              : description,\n          propsRoot: picture\n            ? { sx: [uploadStyles.addCard, uploadDynamicStyles.square(thumbnailSize)] }\n            : undefined,\n        },\n        propsDrop,\n        {\n          onFiles: (files: File[]) => add(files),\n          onReject: (files: File[]) => add(files, true),\n        },\n      );\n      // 列表模式不传子元素：FileDrop 用默认的图标、提示与说明（写了 undefined 也算传了，会把默认内容换掉）\n      if (!picture) return <FileDrop {...props} />;\n      return (\n        <FileDrop {...props}>\n          <Icon icon={ImagePlus} />\n          {lang.uploadAddImage}\n        </FileDrop>\n      );\n    }\n\n    return () => {\n      const state = control();\n      if (listType === 'picture')\n        return (\n          <div {...mergeAttrs<'div'>({ sx: uploadStyles.root }, rest, { onPaste })}>\n            <ImageGroup sx={uploadStyles.wall}>\n              {/* 列表里只有缩略图（“添加图片”与预览不是列表项）；display: contents，缩略图仍和“添加图片”排在一行 */}\n              <div\n                ref={_toRef(wall)}\n                role=\"list\"\n                // 状态变化（失败、完成）由读屏播报\n                aria-live=\"polite\"\n                {...css.attrs(uploadStyles.wallList)}\n              >\n                {value.map(renderCard)}\n              </div>\n              {renderDrop(true)}\n            </ImageGroup>\n            {pasteable && !state.readonly && (\n              <span {...css.attrs(uploadStyles.meta)}>\n                {[description, description != null && ' · ', lang.uploadPasteHint]}\n              </span>\n            )}\n            {sortable && (\n              <>\n                <VisuallyHidden id={sortableWall.instructionsId}>\n                  {lang.sortableInstructions}\n                </VisuallyHidden>\n                <VisuallyHidden aria-live=\"assertive\">{sortableWall.announcement}</VisuallyHidden>\n              </>\n            )}\n            {name != null && (\n              <input\n                ref={_toRef(hidden)}\n                type=\"file\"\n                name={name}\n                multiple\n                hidden\n                tabindex={-1}\n                aria-hidden=\"true\"\n              />\n            )}\n          </div>\n        );\n      return (\n        <div {...mergeAttrs<'div'>({ sx: uploadStyles.root }, rest, { onPaste })}>\n          {renderDrop(false)}\n          {name != null && (\n            <input\n              ref={_toRef(hidden)}\n              type=\"file\"\n              name={name}\n              multiple\n              hidden\n              tabindex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n          {value.length > 0 && (\n            // 状态变化（失败、完成）由读屏播报\n            <GridList\n              {...mergePartProps<GridProps<'ul'>>({ gap: 'xs' }, propsList)}\n              aria-live=\"polite\"\n            >\n              {value.map(renderItem)}\n            </GridList>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/choice-styles.d.ts

@@ -0,0 +1,117 @@
+/**
+ * 勾选类控件（Checkbox、Radio、Switch）共用的样式与结构：
+ *
+ *   label（Root，整块可点）> span（Control，叠放层）> input（原生，appearance: none 画成方框 / 圆 / 轨道）
+ *                                               + 标记（图标或滑块，叠在 input 上，不接收指针）
+ *                        > span（Label，文字）
+ *
+ * 用原生 input：键盘（空格切换、单选组的方向键）、表单提交与重置、label 点击、读屏语义都是浏览器的；
+ * 组件只画外观。勾选状态的样式由组件按自己的状态加（样式里不写兄弟选择器）。尺寸用 em。
+ * 部件与样式见 choiceRecipe（createUi / Provider 的 styles.Choice 按它定制）。
+ */
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { useRecipe, type PartLayer } from '../config/styles';
+import { type StatusTone } from '../utils/style/tone-styles';
+import { type TextSize } from '../utils/style/typography';
+/** 勾选类控件的外观选项；可以用 createUi / Provider 的 defaults.Choice 统一改默认值 */
+export interface ChoiceOptions {
+    /** 字号档位（方框、圆、开关随之缩放）；不写时继承上下文字号 */
+    size?: TextSize;
+    /**
+     * 选中时的色调（与 Button、Badge 等同一套）
+     * @default 'accent'
+     */
+    tone?: StatusTone;
+}
+/**
+ * 勾选类控件的配方：部件 root（外层 label，整块可点）、control（叠放层）、input（原生 input）、
+ * indicator（标记：对勾、圆点、开关滑块）、label（文字）、description（文字下方的说明）、group（复选组、单选组）。
+ * 档位是外层的只读、不可用与组的排列方向；勾选、出错见 choiceInputStyles
+ */
+export declare const choiceRecipe: css.Recipe<"control" | "description" | "group" | "indicator" | "input" | "label" | "root", {
+    readonly readonly: {
+        readonly true: {
+            readonly root: {
+                readonly cursor: "default";
+            };
+        };
+    };
+    readonly disabled: {
+        readonly true: {
+            readonly root: {
+                readonly opacity: "_disabled";
+                readonly cursor: "not-allowed";
+            };
+        };
+    };
+    readonly orientation: {
+        readonly vertical: {
+            readonly group: {
+                readonly display: "flex";
+                readonly flexDirection: "column";
+                readonly gap: "_xs";
+            };
+        };
+        readonly horizontal: {
+            readonly group: {
+                readonly display: "flex";
+                readonly flexWrap: "wrap";
+                readonly columnGap: "_lg";
+                readonly rowGap: "_xs";
+            };
+        };
+    };
+}>;
+/** 勾选类控件的部件（createUi / Provider 的 styles.Choice 按它定制） */
+export type ChoicePart = (typeof choiceRecipe.parts)[number];
+/**
+ * 原生 input 的勾选、出错样式：排在各组件的形状（方框、圆、轨道）之后，所以不放进配方——
+ * 开关的轨道把描边设成透明，出错的红色描边要盖过它
+ */
+export declare const choiceInputStyles: Readonly<{
+    checked: css.CompiledStyles;
+    invalid: css.CompiledStyles;
+}>;
+/** 合并后的外观：tone 总有值，size 不写时继承字号 */
+export type ChoiceAppearance = Pick<ChoiceOptions, 'size'> & Required<Pick<ChoiceOptions, 'tone'>> & {
+    /** 勾选类控件的配方，带上 createUi / Provider 里 styles.Choice 的定制 */
+    recipe: ReturnType<typeof useRecipe<ChoicePart, unknown>>;
+};
+/** 勾选类控件的外观：显式写的 > defaults.Choice > 默认。在 setup 里调用，返回的函数在渲染时调用 */
+export declare function useChoiceAppearance(read: () => ChoiceOptions): () => ChoiceAppearance;
+/** 各部件交给 mergeAttrs / mergeProps 的默认层：样式与部件标记（data-scope="choice"） */
+export type ChoiceParts = {
+    readonly [Part in ChoicePart]: Omit<PartLayer, 'sx'> & {
+        readonly sx: SxStyles;
+    };
+};
+/**
+ * 外观与状态 → 各部件的默认层。外层 label 在配方之后叠上色调（经 toneFillStyles 的变量传给方框、圆点、轨道）
+ * 与字号
+ */
+export declare function choiceParts({ size, tone, recipe }: ChoiceAppearance, { disabled, readonly }: {
+    disabled: boolean;
+    readonly: boolean;
+}): ChoiceParts;
+/**
+ * 只读的原生勾选框要拦住的事件：点击（空格键也是点击）不改勾选，单选组的方向键不换选中项。
+ * 原生 checkbox 没有 readonly 属性；这样焦点照常能到，读屏经 aria-readonly 念“只读”，值也照常随表单提交
+ */
+export declare const readonlyChoiceHandlers: {
+    onClick: (event: Event) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+};
+/**
+ * 受控的勾选：改值之后，父级没接受（或改成了别的值）时把原生 input 的 checked 改回去。
+ * 浏览器在点击时已经改了 checked（单选还取消了同组原来选中的那个），而 Vue 比较的是 prop：
+ * 父级的值没变就不会去动 DOM，界面和值就对不上了（切换要等接口的开关、只能选几项的复选框）
+ */
+export declare function syncChecked(inputs: readonly HTMLInputElement[], isChecked: (input: HTMLInputElement) => boolean): void;
+/** 复选组、单选组的排列方向 */
+export interface ChoiceOrientations {
+    /** 竖排（默认） */
+    vertical: unknown;
+    /** 横排，放不下时换行 */
+    horizontal: unknown;
+}

package/dist/input/choice-styles.js

@@ -0,0 +1,176 @@
+import { t } from "../config/theme/tokens.js";
+import { useDefaults } from "../config/defaults.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { useRecipe } from "../config/styles.js";
+import { toneFillStyles } from "../utils/style/tone-styles.js";
+import { nextTick } from "vue";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/choice-styles.ts
+/**
+* 勾选类控件（Checkbox、Radio、Switch）共用的样式与结构：
+*
+*   label（Root，整块可点）> span（Control，叠放层）> input（原生，appearance: none 画成方框 / 圆 / 轨道）
+*                                               + 标记（图标或滑块，叠在 input 上，不接收指针）
+*                        > span（Label，文字）
+*
+* 用原生 input：键盘（空格切换、单选组的方向键）、表单提交与重置、label 点击、读屏语义都是浏览器的；
+* 组件只画外观。勾选状态的样式由组件按自己的状态加（样式里不写兄弟选择器）。尺寸用 em。
+* 部件与样式见 choiceRecipe（createUi / Provider 的 styles.Choice 按它定制）。
+*/
+/**
+* 勾选类控件的配方：部件 root（外层 label，整块可点）、control（叠放层）、input（原生 input）、
+* indicator（标记：对勾、圆点、开关滑块）、label（文字）、description（文字下方的说明）、group（复选组、单选组）。
+* 档位是外层的只读、不可用与组的排列方向；勾选、出错见 choiceInputStyles
+*/
+var choiceRecipe = css.recipe({
+	name: "Choice",
+	parts: [
+		"root",
+		"control",
+		"input",
+		"indicator",
+		"label",
+		"description",
+		"group"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "flex-start",
+			gap: "_sm",
+			minHeight: "_sizes.minTarget",
+			lineHeight: "_normal",
+			color: "_text",
+			cursor: "pointer",
+			userSelect: "none"
+		},
+		control: {
+			display: "inline-grid",
+			placeItems: "center",
+			flexShrink: 0,
+			minHeight: "1.5em"
+		},
+		input: {
+			gridArea: "1 / 1",
+			appearance: "none",
+			boxSizing: "border-box",
+			margin: 0,
+			borderWidth: "_sm",
+			borderStyle: "solid",
+			borderColor: "_borderStrong",
+			backgroundColor: "_surface",
+			cursor: "inherit",
+			transition: `background-color ${t.durations.sm} ${t.easings.standard}, border-color ${t.durations.sm} ${t.easings.standard}`
+		},
+		indicator: {
+			gridArea: "1 / 1",
+			pointerEvents: "none"
+		},
+		label: {
+			minWidth: 0,
+			display: "grid"
+		},
+		description: {
+			color: "_textMuted",
+			fontSize: "0.875em"
+		}
+	},
+	variants: {
+		readonly: { true: { root: { cursor: "default" } } },
+		disabled: { true: { root: {
+			opacity: "_disabled",
+			cursor: "not-allowed"
+		} } },
+		orientation: {
+			vertical: { group: {
+				display: "flex",
+				flexDirection: "column",
+				gap: "_xs"
+			} },
+			horizontal: { group: {
+				display: "flex",
+				flexWrap: "wrap",
+				columnGap: "_lg",
+				rowGap: "_xs"
+			} }
+		}
+	}
+});
+/**
+* 原生 input 的勾选、出错样式：排在各组件的形状（方框、圆、轨道）之后，所以不放进配方——
+* 开关的轨道把描边设成透明，出错的红色描边要盖过它
+*/
+var choiceInputStyles = css.create({
+	/** 已勾选（或部分勾选）：色调的实底色，见 choiceParts */
+	checked: {
+		borderColor: "var(--tone-fill)",
+		backgroundColor: "var(--tone-fill)"
+	},
+	invalid: {
+		borderColor: "_danger",
+		outlineColor: "_danger"
+	}
+});
+/** 勾选类控件的外观：显式写的 > defaults.Choice > 默认。在 setup 里调用，返回的函数在渲染时调用 */
+function useChoiceAppearance(read) {
+	const recipe = useRecipe(choiceRecipe);
+	const appearance = useDefaults("Choice", read, { tone: "accent" });
+	return () => ({
+		...appearance(),
+		recipe
+	});
+}
+/**
+* 外观与状态 → 各部件的默认层。外层 label 在配方之后叠上色调（经 toneFillStyles 的变量传给方框、圆点、轨道）
+* 与字号
+*/
+function choiceParts({ size, tone, recipe }, { disabled, readonly }) {
+	const parts = recipe({
+		readonly,
+		disabled
+	});
+	return {
+		...parts,
+		root: {
+			...parts.root,
+			sx: [
+				parts.root.sx,
+				toneFillStyles[tone],
+				size && fontSizeStyles[size]
+			]
+		}
+	};
+}
+var ARROW_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+]);
+/**
+* 只读的原生勾选框要拦住的事件：点击（空格键也是点击）不改勾选，单选组的方向键不换选中项。
+* 原生 checkbox 没有 readonly 属性；这样焦点照常能到，读屏经 aria-readonly 念“只读”，值也照常随表单提交
+*/
+var readonlyChoiceHandlers = {
+	onClick: (event) => event.preventDefault(),
+	onKeydown: (event) => {
+		if (ARROW_KEYS.has(event.key)) event.preventDefault();
+	}
+};
+/**
+* 受控的勾选：改值之后，父级没接受（或改成了别的值）时把原生 input 的 checked 改回去。
+* 浏览器在点击时已经改了 checked（单选还取消了同组原来选中的那个），而 Vue 比较的是 prop：
+* 父级的值没变就不会去动 DOM，界面和值就对不上了（切换要等接口的开关、只能选几项的复选框）
+*/
+function syncChecked(inputs, isChecked) {
+	nextTick(() => {
+		for (const input of inputs) {
+			const checked = isChecked(input);
+			if (input.checked !== checked) input.checked = checked;
+		}
+	});
+}
+//#endregion
+export { choiceInputStyles, choiceParts, choiceRecipe, readonlyChoiceHandlers, syncChecked, useChoiceAppearance };
+
+//# sourceMappingURL=choice-styles.js.map

package/dist/input/choice-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-styles.js","names":[],"sources":["../../src/input/choice-styles.ts"],"sourcesContent":["/**\n * 勾选类控件（Checkbox、Radio、Switch）共用的样式与结构：\n *\n *   label（Root，整块可点）> span（Control，叠放层）> input（原生，appearance: none 画成方框 / 圆 / 轨道）\n *                                               + 标记（图标或滑块，叠在 input 上，不接收指针）\n *                        > span（Label，文字）\n *\n * 用原生 input：键盘（空格切换、单选组的方向键）、表单提交与重置、label 点击、读屏语义都是浏览器的；\n * 组件只画外观。勾选状态的样式由组件按自己的状态加（样式里不写兄弟选择器）。尺寸用 em。\n * 部件与样式见 choiceRecipe（createUi / Provider 的 styles.Choice 按它定制）。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick } from 'vue';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe, type PartLayer } from '../config/styles';\nimport { toneFillStyles, type StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 勾选类控件的外观选项；可以用 createUi / Provider 的 defaults.Choice 统一改默认值 */\nexport interface ChoiceOptions {\n  /** 字号档位（方框、圆、开关随之缩放）；不写时继承上下文字号 */\n  size?: TextSize;\n  /**\n   * 选中时的色调（与 Button、Badge 等同一套）\n   * @default 'accent'\n   */\n  tone?: StatusTone;\n}\n\n/**\n * 勾选类控件的配方：部件 root（外层 label，整块可点）、control（叠放层）、input（原生 input）、\n * indicator（标记：对勾、圆点、开关滑块）、label（文字）、description（文字下方的说明）、group（复选组、单选组）。\n * 档位是外层的只读、不可用与组的排列方向；勾选、出错见 choiceInputStyles\n */\nexport const choiceRecipe = css.recipe({\n  name: 'Choice',\n  parts: ['root', 'control', 'input', 'indicator', 'label', 'description', 'group'],\n  base: {\n    // 控件与文字一行，整块可点；点击区域不小于 24px（WCAG 2.5.8）\n    root: {\n      display: 'inline-flex',\n      alignItems: 'flex-start',\n      gap: '_sm',\n      minHeight: '_sizes.minTarget',\n      lineHeight: '_normal',\n      color: '_text',\n      cursor: 'pointer',\n      userSelect: 'none',\n    },\n    // input 与标记放在同一个网格格子里；与第一行文字垂直居中（行高 1.5em）\n    control: {\n      display: 'inline-grid',\n      placeItems: 'center',\n      flexShrink: 0,\n      minHeight: '1.5em',\n    },\n    // 去掉浏览器外观，由各组件给出形状；焦点环用 focusRingStyles.tight（排在它后面）\n    input: {\n      gridArea: '1 / 1',\n      appearance: 'none',\n      boxSizing: 'border-box',\n      margin: 0,\n      borderWidth: '_sm',\n      borderStyle: 'solid',\n      borderColor: '_borderStrong',\n      backgroundColor: '_surface',\n      cursor: 'inherit',\n      transition: `background-color ${t.durations.sm} ${t.easings.standard}, border-color ${t.durations.sm} ${t.easings.standard}`,\n    },\n    // 叠在 input 上，点击穿透到 input\n    indicator: { gridArea: '1 / 1', pointerEvents: 'none' },\n    // 有说明时文字在上、说明在下\n    label: { minWidth: 0, display: 'grid' },\n    // 次要颜色、小一号\n    description: { color: '_textMuted', fontSize: '0.875em' },\n  },\n  variants: {\n    // 只读：外观照常（看得清选了什么），只是不像能点\n    readonly: { true: { root: { cursor: 'default' } } },\n    disabled: { true: { root: { opacity: '_disabled', cursor: 'not-allowed' } } },\n    orientation: {\n      vertical: { group: { display: 'flex', flexDirection: 'column', gap: '_xs' } },\n      horizontal: {\n        group: { display: 'flex', flexWrap: 'wrap', columnGap: '_lg', rowGap: '_xs' },\n      },\n    },\n  },\n});\n\n/** 勾选类控件的部件（createUi / Provider 的 styles.Choice 按它定制） */\nexport type ChoicePart = (typeof choiceRecipe.parts)[number];\n\n/**\n * 原生 input 的勾选、出错样式：排在各组件的形状（方框、圆、轨道）之后，所以不放进配方——\n * 开关的轨道把描边设成透明，出错的红色描边要盖过它\n */\nexport const choiceInputStyles = css.create({\n  /** 已勾选（或部分勾选）：色调的实底色，见 choiceParts */\n  checked: { borderColor: 'var(--tone-fill)', backgroundColor: 'var(--tone-fill)' },\n  invalid: { borderColor: '_danger', outlineColor: '_danger' },\n});\n\n/** 合并后的外观：tone 总有值，size 不写时继承字号 */\nexport type ChoiceAppearance = Pick<ChoiceOptions, 'size'> &\n  Required<Pick<ChoiceOptions, 'tone'>> & {\n    /** 勾选类控件的配方，带上 createUi / Provider 里 styles.Choice 的定制 */\n    recipe: ReturnType<typeof useRecipe<ChoicePart, unknown>>;\n  };\n\n/** 勾选类控件的外观：显式写的 > defaults.Choice > 默认。在 setup 里调用，返回的函数在渲染时调用 */\nexport function useChoiceAppearance(read: () => ChoiceOptions): () => ChoiceAppearance {\n  const recipe = useRecipe(choiceRecipe);\n  const appearance = useDefaults('Choice', read, { tone: 'accent' });\n  return () => ({ ...appearance(), recipe });\n}\n\n/** 各部件交给 mergeAttrs / mergeProps 的默认层：样式与部件标记（data-scope=\"choice\"） */\nexport type ChoiceParts = {\n  readonly [Part in ChoicePart]: Omit<PartLayer, 'sx'> & { readonly sx: SxStyles };\n};\n\n/**\n * 外观与状态 → 各部件的默认层。外层 label 在配方之后叠上色调（经 toneFillStyles 的变量传给方框、圆点、轨道）\n * 与字号\n */\nexport function choiceParts(\n  { size, tone, recipe }: ChoiceAppearance,\n  { disabled, readonly }: { disabled: boolean; readonly: boolean },\n): ChoiceParts {\n  const parts = recipe({ readonly, disabled });\n  return {\n    ...parts,\n    root: {\n      ...parts.root,\n      sx: [parts.root.sx, toneFillStyles[tone], size && fontSizeStyles[size]],\n    },\n  };\n}\n\nconst ARROW_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);\n\n/**\n * 只读的原生勾选框要拦住的事件：点击（空格键也是点击）不改勾选，单选组的方向键不换选中项。\n * 原生 checkbox 没有 readonly 属性；这样焦点照常能到，读屏经 aria-readonly 念“只读”，值也照常随表单提交\n */\nexport const readonlyChoiceHandlers = {\n  onClick: (event: Event) => event.preventDefault(),\n  onKeydown: (event: KeyboardEvent) => {\n    if (ARROW_KEYS.has(event.key)) event.preventDefault();\n  },\n};\n\n/**\n * 受控的勾选：改值之后，父级没接受（或改成了别的值）时把原生 input 的 checked 改回去。\n * 浏览器在点击时已经改了 checked（单选还取消了同组原来选中的那个），而 Vue 比较的是 prop：\n * 父级的值没变就不会去动 DOM，界面和值就对不上了（切换要等接口的开关、只能选几项的复选框）\n */\nexport function syncChecked(\n  inputs: readonly HTMLInputElement[],\n  isChecked: (input: HTMLInputElement) => boolean,\n): void {\n  void nextTick(() => {\n    for (const input of inputs) {\n      const checked = isChecked(input);\n      if (input.checked !== checked) input.checked = checked;\n    }\n  });\n}\n\n/** 复选组、单选组的排列方向 */\nexport interface ChoiceOrientations {\n  /** 竖排（默认） */\n  vertical: unknown;\n  /** 横排，放不下时换行 */\n  horizontal: unknown;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM;CACN,OAAO;EAAC;EAAQ;EAAW;EAAS;EAAa;EAAS;EAAe;CAAO;CAChF,MAAM;EAEJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,WAAW;GACX,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,YAAY;EACd;EAEA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,WAAW;EACb;EAEA,OAAO;GACL,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,aAAa;GACb,aAAa;GACb,aAAa;GACb,iBAAiB;GACjB,QAAQ;GACR,YAAY,oBAAoB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,iBAAkB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;EACpH;EAEA,WAAW;GAAE,UAAU;GAAS,eAAe;EAAO;EAEtD,OAAO;GAAE,UAAU;GAAG,SAAS;EAAO;EAEtC,aAAa;GAAE,OAAO;GAAc,UAAU;EAAU;CAC1D;CACA,UAAU;EAER,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,UAAU,EAAE,EAAE;EAClD,UAAU,EAAE,MAAM,EAAE,MAAM;GAAE,SAAS;GAAa,QAAQ;EAAc,EAAE,EAAE;EAC5E,aAAa;GACX,UAAU,EAAE,OAAO;IAAE,SAAS;IAAQ,eAAe;IAAU,KAAK;GAAM,EAAE;GAC5E,YAAY,EACV,OAAO;IAAE,SAAS;IAAQ,UAAU;IAAQ,WAAW;IAAO,QAAQ;GAAM,EAC9E;EACF;CACF;AACF,CAAC;;;;;AASD,IAAa,oBAAoB,IAAI,OAAO;;CAE1C,SAAS;EAAE,aAAa;EAAoB,iBAAiB;CAAmB;CAChF,SAAS;EAAE,aAAa;EAAW,cAAc;CAAU;AAC7D,CAAC;;AAUD,SAAgB,oBAAoB,MAAmD;CACrF,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,aAAa,YAAY,UAAU,MAAM,EAAE,MAAM,SAAS,CAAC;CACjE,cAAc;EAAE,GAAG,WAAW;EAAG;CAAO;AAC1C;;;;;AAWA,SAAgB,YACd,EAAE,MAAM,MAAM,UACd,EAAE,UAAU,YACC;CACb,MAAM,QAAQ,OAAO;EAAE;EAAU;CAAS,CAAC;CAC3C,OAAO;EACL,GAAG;EACH,MAAM;GACJ,GAAG,MAAM;GACT,IAAI;IAAC,MAAM,KAAK;IAAI,eAAe;IAAO,QAAQ,eAAe;GAAK;EACxE;CACF;AACF;AAEA,IAAM,6BAAa,IAAI,IAAI;CAAC;CAAW;CAAa;CAAa;AAAY,CAAC;;;;;AAM9E,IAAa,yBAAyB;CACpC,UAAU,UAAiB,MAAM,eAAe;CAChD,YAAY,UAAyB;EACnC,IAAI,WAAW,IAAI,MAAM,GAAG,GAAG,MAAM,eAAe;CACtD;AACF;;;;;;AAOA,SAAgB,YACd,QACA,WACM;CACN,eAAoB;EAClB,KAAK,MAAM,SAAS,QAAQ;GAC1B,MAAM,UAAU,UAAU,KAAK;GAC/B,IAAI,MAAM,YAAY,SAAS,MAAM,UAAU;EACjD;CACF,CAAC;AACH"}

package/dist/input/condition.d.ts

@@ -0,0 +1,153 @@
+/**
+ * 条件：比较一个字段，或用 all / any / not 组合的表达式树。纯 JSON，可以存库、传给后端，前后端各自求值、结果一致。
+ * ConditionBuilder 编辑它；FilterBar 的高级筛选、流程连线的条件都用这一种写法。
+ *
+ *   const condition: Condition = {
+ *     all: [
+ *       { field: 'amount', op: 'gte', value: 10000 },
+ *       { any: [{ field: 'category', op: 'in', value: ['钢材', '铝材'] }, { not: { field: 'urgent', op: 'eq', value: false } }] },
+ *     ],
+ *   };
+ *   rows.filter((row) => matchesCondition(condition, row));
+ *   describeCondition(condition, fields, lang);   // “金额 大于等于 10000，且（品类 是其中之一 钢材、铝材，或 不满足：加急 是 否）”
+ *
+ * 字段（ConditionField）给出名字、显示名与类型；类型决定能用哪些比较方式（conditionOperators）与值用什么控件填。
+ * 值的形式：between 是 [下限, 上限]（含两端，任一端为空时不限），in / notIn 是数组，exists / empty 没有值；日期是 ISO 文字，按文字比就是先后。
+ */
+import type { VNodeChild } from 'vue';
+import type { Lang } from '../config/lang/lang';
+/** 比较的方式 */
+export interface ConditionOps {
+    /** 等于 */
+    eq: unknown;
+    /** 不等于 */
+    ne: unknown;
+    /** 大于（日期：晚于） */
+    gt: unknown;
+    /** 大于等于 */
+    gte: unknown;
+    /** 小于（日期：早于） */
+    lt: unknown;
+    /** 小于等于 */
+    lte: unknown;
+    /** 在两个值之间（含两端）：value 是 [下限, 上限] */
+    between: unknown;
+    /** 是其中之一：value 是数组 */
+    in: unknown;
+    /** 不是其中任何一个：value 是数组 */
+    notIn: unknown;
+    /** 文字包含 */
+    contains: unknown;
+    /** 文字不包含 */
+    notContains: unknown;
+    /** 文字以它开头 */
+    startsWith: unknown;
+    /** 有值（不是 null、undefined、空字符串、空数组） */
+    exists: unknown;
+    /** 没有值 */
+    empty: unknown;
+}
+/** 比较的方式 */
+export type ConditionOp = keyof ConditionOps;
+/** 比较一个字段 */
+export interface ConditionRule {
+    /** 字段名 */
+    field: string;
+    /** 比较的方式 */
+    op: ConditionOp;
+    /** 比较的值；exists、empty 没有 */
+    value?: unknown;
+}
+/** 条件：比较一个字段，或用 all（全部满足）/ any（任一满足）/ not（不满足）组合 */
+export type Condition = ConditionRule | {
+    all: readonly Condition[];
+} | {
+    any: readonly Condition[];
+} | {
+    not: Condition;
+};
+/** 字段的类型：决定能用哪些比较方式、值用什么控件填 */
+export interface ConditionFieldTypes {
+    /** 文字：包含、等于、开头是 */
+    text: unknown;
+    /** 数字：大小、介于 */
+    number: unknown;
+    /** 日期（ISO 文字）：早于、晚于、介于 */
+    date: unknown;
+    /** 从选项里选：是、不是、是其中之一 */
+    select: unknown;
+    /** 是或否 */
+    boolean: unknown;
+}
+/** 字段的类型 */
+export type ConditionFieldType = keyof ConditionFieldTypes;
+/** 选项型字段的一个选项 */
+export interface ConditionOption {
+    /** 值 */
+    value: string | number;
+    /** 显示的文字 */
+    label: string;
+}
+/** 自己画值的输入时拿到的参数 */
+export interface ConditionInputContext {
+    /** 字段 */
+    field: ConditionField;
+    /** 比较的方式 */
+    op: ConditionOp;
+    /** 现在的值 */
+    value: unknown;
+    /** 改值 */
+    onChange: (value: unknown) => void;
+    /** 无障碍名称（“金额的值”） */
+    label: string;
+}
+/** 能参与比较的字段 */
+export interface ConditionField {
+    /** 字段名：写进条件的 field */
+    name: string;
+    /** 显示名 */
+    label: string;
+    /** 类型 */
+    type: ConditionFieldType;
+    /** 分组名：字段多时字段列表按它分组（如“申请单”“流程变量”） */
+    group?: string;
+    /** 选项（select 类型） */
+    options?: readonly ConditionOption[];
+    /** 能用的比较方式，默认按类型（conditionOperators） */
+    operators?: readonly ConditionOp[];
+    /** 自己画值的输入（人员选择器、带单位的数字……）；类型仍决定比较方式与摘要里值的写法 */
+    input?: (context: ConditionInputContext) => VNodeChild;
+    /** 摘要里值的写法，默认选项的文字、日期原样、是否写成“是 / 否” */
+    format?: (value: unknown) => string;
+}
+/** 各类型默认能用的比较方式，第一个是新条件默认的 */
+export declare const conditionOperators: Readonly<Record<ConditionFieldType, readonly ConditionOp[]>>;
+/** 字段能用的比较方式 */
+export declare const operatorsOf: (field: ConditionField) => readonly ConditionOp[];
+/** 这种比较要不要值 */
+export declare const needsValue: (op: ConditionOp) => op is "between" | "contains" | "eq" | "gt" | "gte" | "in" | "lt" | "lte" | "ne" | "notContains" | "notIn" | "startsWith";
+/** 值的形状：between 两个值，in / notIn 一组值，exists / empty 没有，其余一个 */
+export type ConditionValueShape = 'none' | 'single' | 'range' | 'list';
+/** 比较方式要的值的形状 */
+export declare function valueShape(op: ConditionOp): ConditionValueShape;
+/** 是组合（all / any / not），不是比较 */
+export declare const isConditionGroup: (condition: Condition) => condition is Exclude<Condition, ConditionRule>;
+/** 值写成文字：null、undefined 是空字符串，对象（不该出现在比较里）写成 JSON */
+export declare const toText: (value: unknown) => string;
+/** 比较已经填完整：要值的有值，between 至少一端有值 */
+export declare function isRuleComplete(rule: ConditionRule): boolean;
+/**
+ * 记录满不满足条件。字段的值默认按名字取属性，read 可以改（嵌套字段、计算字段）。
+ * 规则与 query 库的 conditionBy（后端写成 SQL，query 仓库的 0017）一致，同一份条件在两边筛出同样的行：
+ * 没填完整的比较（isRuleComplete）与空的组不加条件，组里只看加了条件的那几项；不等于、不在其中、不包含把空值算作满足
+ */
+export declare function matchesCondition<T>(condition: Condition, record: T, read?: (record: T, field: string) => unknown): boolean;
+/** 比较方式的文字：日期、选项、是否这几种类型有自己的说法（早于、是其中之一） */
+export declare function operatorLabel(lang: Lang, type: ConditionFieldType, op: ConditionOp): string;
+/** 值在摘要里的写法 */
+export declare function formatConditionValue(lang: Lang, field: ConditionField | undefined, value: unknown): string;
+/**
+ * 条件写成一句话：收起的高级筛选、流程连线上的条件摘要用。不认识的字段原样写字段名；
+ * 嵌套的组加括号，not 写成“不满足：…”
+ */
+export declare function describeCondition(condition: Condition, fields: readonly ConditionField[], lang: Lang): string;