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

package/dist/table/table-styles.js

@@ -31,8 +31,6 @@ var dataTableRecipe = css.recipe({
 		"sortIcon",
 		"sortPriority",
 		"selectAll",
-		"progressCell",
-		"progress",
 		"body",
 		"row",
 		"cell",
@@ -138,17 +136,6 @@ var dataTableRecipe = css.recipe({
 			color: "_accentText"
 		},
 		selectAll: { marginBlock: "-0.1875rem" },
-		progressCell: {
-			position: "relative",
-			height: 0,
-			padding: 0,
-			borderWidth: 0
-		},
-		progress: {
-			position: "absolute",
-			top: 0,
-			insetInline: 0
-		},
 		cell: {
 			boxSizing: "border-box",
 			fontVariantNumeric: "tabular-nums",

package/dist/table/table-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-styles.js","names":[],"sources":["../../src/table/table-styles.ts"],"sourcesContent":["/**\n * 表格的外观：静态 Table 与 DataTable、TreeDataTable 共用的选项（密度、样式、斑马纹）与按列、按状态叠加的样式，\n * 以及 DataTable、TreeDataTable 的配方（静态表格的配方在 Table.tsx）。\n * 单独一个模块：只用静态表格时不连带打包 DataTable 的视图（虚拟滚动、勾选、排序……）。\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 表格的密度（行高与字号） */\nexport interface DataTableDensities {\n  /** 紧凑：数据很多、要一屏看更多行（字号也小一档） */\n  compact: unknown;\n  /** 标准（默认） */\n  standard: unknown;\n  /** 宽松：行里有头像、两行文字 */\n  comfortable: unknown;\n}\n\n/** 表格的样式 */\nexport interface DataTableVariants {\n  /** 表面色、外框与圆角（默认） */\n  surface: unknown;\n  /** 没有外框，底色同页面：放在卡片、对话框里 */\n  ghost: unknown;\n}\n\n/** 表格的外观选项；可以用 createUi / Provider 的 defaults.DataTable 统一改默认值（TreeDataTable 也用它） */\nexport interface DataTableOptions {\n  /** 密度，默认 standard */\n  density?: keyof DataTableDensities;\n  /** 样式，默认 surface */\n  variant?: keyof DataTableVariants;\n  /** 斑马纹：隔行浅色底 */\n  striped?: boolean;\n}\n\n/**\n * DataTable、TreeDataTable 的配方：部件对应渲染出来的元素，密度、样式、斑马纹是档位。\n * 同类的格叠在一起用：勾选列、合计行、详情、空状态的格是 `[s.cell.sx, s.selectCell.sx]`，\n * 分组标题、表头的勾选列是 `[s.headerCell.sx, s.groupHeaderCell.sx]`；对齐、固定列、已选这些按列、按状态的\n * 样式（dataTableStateStyles）追加在部件层之后。\n * 斑马纹按行号隔行（虚拟滚动里 :nth-child 数不准）：`striped: true` 选的是浅色底的那些行\n */\nexport const dataTableRecipe = css.recipe({\n  name: 'DataTable',\n  parts: [\n    'root',\n    'table',\n    'head',\n    'headRow',\n    'headerCell',\n    'groupHeaderCell',\n    'selectHeaderCell',\n    'detailHeaderCell',\n    'headerContent',\n    'headerMain',\n    'sortButton',\n    'sortLabel',\n    'sortIcon',\n    'sortPriority',\n    'selectAll',\n    'progressCell',\n    'progress',\n    'body',\n    'row',\n    'cell',\n    'selectCell',\n    'selectCheckbox',\n    'selectRadio',\n    'detailToggleCell',\n    'detailToggle',\n    'leading',\n    'content',\n    'rowHandle',\n    'editor',\n    'editorControl',\n    'editorError',\n    'detailRow',\n    'detailCell',\n    'detailContent',\n    'skeleton',\n    'emptyCell',\n    'spacer',\n    'foot',\n    'summaryCell',\n  ],\n  base: {\n    // contain: inline-size：宽表格不会把外层的 grid / flex 容器撑宽（它们的最小宽度默认等于内容宽度），\n    // 宽度只由所在的容器决定，放不下的部分在表格里横向滚动\n    // 也是容器查询的容器：详情的内容用 100cqi 限宽到视口，横向滚动时贴着起始边\n    root: { maxHeight: '32em', minWidth: 0, containerType: 'inline-size' },\n    table: {\n      width: '_full',\n      tableLayout: 'fixed',\n      borderCollapse: 'separate',\n      borderSpacing: 0,\n      color: '_text',\n      lineHeight: '_normal',\n    },\n    head: { position: 'sticky', top: 0, zIndex: 2 },\n    headerCell: {\n      position: 'relative',\n      boxSizing: 'border-box',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_border',\n      backgroundColor: '_fill',\n      color: '_textMuted',\n      fontSize: '_sm',\n      fontWeight: '_semibold',\n      textAlign: 'start',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n    // 分组标题居中，下边线淡一些：与下面一行的列标题仍是一个表头\n    groupHeaderCell: { textAlign: 'center', borderBottomColor: '_borderMuted' },\n    // 勾选列、详情列的格（表头与各行）：控件居中，没有左右内边距\n    selectHeaderCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    detailHeaderCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    // 有筛选、列菜单按钮的列标题：文字（或排序按钮）占满剩下的宽度，按钮在结尾\n    headerContent: { display: 'flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n    headerMain: { flexGrow: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' },\n    // 去掉按钮默认外观、焦点环、波纹、颜色过渡由 ButtonBase 给出\n    sortButton: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '_xs',\n      maxWidth: '_full',\n      color: { default: 'inherit', ':hover': '_text' },\n    },\n    sortLabel: { overflow: 'hidden', textOverflow: 'ellipsis' },\n    sortIcon: { flexShrink: 0 },\n    // 多列排序时的次序（1、2…）：小号数字跟在箭头后面\n    sortPriority: { fontSize: '0.75em', fontVariantNumeric: 'tabular-nums', color: '_accentText' },\n    // 单元格里 24px 的控件（勾选框、单选框、展开按钮）：上下的负外边距抵掉比一行文字高出的部分，\n    // 有控件的行与纯文字的行一样高，点击区域仍是 24px。操作列放文字按钮时用 variant=\"link\"\n    selectAll: { marginBlock: '-0.1875rem' },\n    progressCell: { position: 'relative', height: 0, padding: 0, borderWidth: 0 },\n    progress: { position: 'absolute', top: 0, insetInline: 0 },\n    // 数字等宽：金额、数量、日期上下对齐（文字不受影响）\n    cell: {\n      boxSizing: 'border-box',\n      fontVariantNumeric: 'tabular-nums',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_borderMuted',\n      backgroundColor: 'inherit',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      verticalAlign: 'middle',\n    },\n    selectCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    selectCheckbox: { marginBlock: '-0.1875rem' },\n    selectRadio: { marginBlock: '-0.1875rem' },\n    detailToggleCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    detailToggle: {\n      width: '1.5rem',\n      height: '1.5rem',\n      minHeight: '1.5rem',\n      marginBlock: '-0.1875rem',\n    },\n    leading: { display: 'flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n    content: { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' },\n    // 行拖动的把手：在第一个数据列的最前面，按下拖动，或聚焦后用键盘\n    rowHandle: {\n      display: 'grid',\n      placeItems: 'center',\n      flexShrink: 0,\n      width: '1.5em',\n      height: '1.5em',\n      marginBlock: '-0.25em',\n      borderRadius: '_sm',\n      backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n      color: '_textMuted',\n      cursor: { default: 'grab', ':active': 'grabbing' },\n      // 触摸拖动时不滚动页面\n      touchAction: 'none',\n    },\n    // 编辑器：贴着格子；提交被拒的原因浮在下面（不撑高这一行）\n    editor: { position: 'relative', minWidth: 0 },\n    editorControl: { width: '_full' },\n    editorError: {\n      position: 'absolute',\n      insetInlineStart: 0,\n      top: 'calc(100% + 2px)',\n      zIndex: 3,\n      // 按文字宽度，不被窄列挤成一字一行；靠起始边（数字列的格是靠结束边的）\n      width: 'max-content',\n      maxWidth: '20rem',\n      textAlign: 'start',\n      paddingBlock: '_xs',\n      paddingInline: '_sm',\n      borderRadius: '_sm',\n      backgroundColor: '_danger',\n      color: '_dangerContrast',\n      fontSize: '_sm',\n      whiteSpace: 'normal',\n      boxShadow: '_md',\n    },\n    // 详情行：浅底、可以换行；内边距放在内容上，内容贴着视口起始边、宽度不超过视口\n    detailCell: {\n      paddingBlock: 0,\n      paddingInline: 0,\n      whiteSpace: 'normal',\n      backgroundColor: '_fill',\n    },\n    detailContent: {\n      position: 'sticky',\n      insetInlineStart: 0,\n      boxSizing: 'border-box',\n      maxWidth: '100cqi',\n      paddingBlock: '_md',\n      paddingInline: '_md',\n    },\n    skeleton: { display: 'block', height: '1em' },\n    // paddingBlock 盖过单元格按密度的上下内边距（padding 是简写，压不过它）\n    emptyCell: { paddingBlock: 0, padding: 0, whiteSpace: 'normal' },\n    spacer: { padding: 0, borderWidth: 0 },\n    // 合计行吸底；在表头、固定列之上\n    foot: { position: 'sticky', bottom: 0, zIndex: 2 },\n    summaryCell: {\n      borderTopWidth: '_xs',\n      borderTopStyle: 'solid',\n      borderTopColor: '_border',\n      borderBottomWidth: 0,\n      backgroundColor: '_fill',\n      fontWeight: '_semibold',\n    },\n  },\n  variants: {\n    // 单元格的上下内边距；紧凑时字号也小一档\n    density: {\n      compact: {\n        table: { fontSize: '_sm' },\n        headerCell: { paddingBlock: '_xs' },\n        cell: { paddingBlock: '_xs' },\n      },\n      standard: { headerCell: { paddingBlock: '_sm' }, cell: { paddingBlock: '_sm' } },\n      comfortable: { headerCell: { paddingBlock: '_md' }, cell: { paddingBlock: '_md' } },\n    },\n    // 行的底色：固定列的单元格继承它（backgroundColor: inherit），所以必须是不透明的颜色\n    variant: {\n      surface: {\n        root: {\n          borderWidth: '_xs',\n          borderStyle: 'solid',\n          borderColor: '_border',\n          borderRadius: '_lg',\n          backgroundColor: '_surface',\n        },\n        row: { backgroundColor: { default: '_surface', ':hover': '_fillHover' } },\n      },\n      ghost: {\n        root: { backgroundColor: '_background' },\n        row: { backgroundColor: { default: '_background', ':hover': '_fillHover' } },\n      },\n    },\n    striped: {\n      true: { row: { backgroundColor: { default: '_fill', ':hover': '_fillHover' } } },\n    },\n  },\n});\n\n/** DataTable、TreeDataTable 的部件（createUi / Provider 的 styles.DataTable 按它定制） */\nexport type DataTablePart = (typeof dataTableRecipe.parts)[number];\n\n/**\n * 表格按列、按状态叠加的样式：对齐、换行、固定列、已选、正在看、编辑中……追加在部件层之后\n * （`{ ...s.cell, sx: [s.cell.sx, dataTableStateStyles.end] }`）。静态 Table 的对齐、换行也用它\n */\nexport const dataTableStateStyles = css.create({\n  // 放在竖排的弹性容器（ViewportFill）里：按行数自己的高度，最多占到剩下的高度，再多在表格里滚动\n  flexible: { flexGrow: 0, flexShrink: 1, flexBasis: 'auto', maxHeight: 'none', minHeight: 0 },\n  // 分组与相邻的列之间一条竖线（只在表头里）：看得出哪几列属于一组\n  groupDivider: {\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n  wrap: { whiteSpace: 'normal', overflowWrap: 'anywhere' },\n  start: { textAlign: 'start' },\n  center: { textAlign: 'center' },\n  end: { textAlign: 'end' },\n  selected: { backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' } },\n  // 主从视图里正在看的一行：同已选的底色；起始边一条强调色的竖线（与勾选区分开）画在第一个单元格上，\n  // 浏览器不给 tr 画阴影\n  active: { backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' } },\n  activeEdge: {\n    boxShadow: {\n      default: `inset 3px 0 0 ${t.colors.accent}`,\n      ':dir(rtl)': `inset -3px 0 0 ${t.colors.accent}`,\n    },\n  },\n  // 整行能点（打开详情）：手形指针\n  clickable: { cursor: 'pointer' },\n  // 固定列在普通单元格之上，表头在固定列之上\n  sticky: { position: 'sticky', zIndex: 1 },\n  // 固定列与滚动的列之间一条竖线：横向滚动时看得出哪几列是固定的\n  stickyStartEdge: {\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_borderMuted',\n  },\n  stickyEndEdge: {\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n  // 有起始边的固定列时，勾选列也固定在最前面\n  stickySelect: { position: 'sticky', zIndex: 1, insetInlineStart: 0 },\n  chevronOpen: { rotate: '90deg' },\n  sortActive: { color: '_accentText' },\n  // 靠结束边的列（数字）：文字靠结束边，按钮仍在最后\n  headerMainEnd: { textAlign: 'end' },\n  // 单元格导航：聚焦的格画一圈内描边（不占位、不被相邻格盖住）\n  gridCell: {\n    outline: 'none',\n    boxShadow: {\n      default: null,\n      ':focus-visible': `inset 0 0 0 ${t.borderWidths.sm} ${t.colors.focusRing}`,\n    },\n  },\n  // 编辑中的格：编辑器贴满格子，上下内边距收小\n  editingCell: { paddingBlock: '_none', overflow: 'visible' },\n  // 校验没过的格：红色内描边；聚焦时仍是焦点环\n  invalidCell: {\n    boxShadow: {\n      default: `inset 0 0 0 ${t.borderWidths.xs} ${t.colors.danger}`,\n      ':focus-visible': `inset 0 0 0 ${t.borderWidths.sm} ${t.colors.focusRing}`,\n    },\n  },\n  // 正在拖动的行：浮在别的行上面\n  rowDragging: { position: 'relative', zIndex: 1, boxShadow: '_md' },\n});\n"],"mappings":"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"}
+{"version":3,"file":"table-styles.js","names":[],"sources":["../../src/table/table-styles.ts"],"sourcesContent":["/**\n * 表格的外观：静态 Table 与 DataTable、TreeDataTable 共用的选项（密度、样式、斑马纹）与按列、按状态叠加的样式，\n * 以及 DataTable、TreeDataTable 的配方（静态表格的配方在 Table.tsx）。\n * 单独一个模块：只用静态表格时不连带打包 DataTable 的视图（虚拟滚动、勾选、排序……）。\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 表格的密度（行高与字号） */\nexport interface DataTableDensities {\n  /** 紧凑：数据很多、要一屏看更多行（字号也小一档） */\n  compact: unknown;\n  /** 标准（默认） */\n  standard: unknown;\n  /** 宽松：行里有头像、两行文字 */\n  comfortable: unknown;\n}\n\n/** 表格的样式 */\nexport interface DataTableVariants {\n  /** 表面色、外框与圆角（默认） */\n  surface: unknown;\n  /** 没有外框，底色同页面：放在卡片、对话框里 */\n  ghost: unknown;\n}\n\n/** 表格的外观选项；可以用 createUi / Provider 的 defaults.DataTable 统一改默认值（TreeDataTable 也用它） */\nexport interface DataTableOptions {\n  /** 密度，默认 standard */\n  density?: keyof DataTableDensities;\n  /** 样式，默认 surface */\n  variant?: keyof DataTableVariants;\n  /** 斑马纹：隔行浅色底 */\n  striped?: boolean;\n}\n\n/**\n * DataTable、TreeDataTable 的配方：部件对应渲染出来的元素，密度、样式、斑马纹是档位。\n * 同类的格叠在一起用：勾选列、合计行、详情、空状态的格是 `[s.cell.sx, s.selectCell.sx]`，\n * 分组标题、表头的勾选列是 `[s.headerCell.sx, s.groupHeaderCell.sx]`；对齐、固定列、已选这些按列、按状态的\n * 样式（dataTableStateStyles）追加在部件层之后。\n * 斑马纹按行号隔行（虚拟滚动里 :nth-child 数不准）：`striped: true` 选的是浅色底的那些行\n */\nexport const dataTableRecipe = css.recipe({\n  name: 'DataTable',\n  parts: [\n    'root',\n    'table',\n    'head',\n    'headRow',\n    'headerCell',\n    'groupHeaderCell',\n    'selectHeaderCell',\n    'detailHeaderCell',\n    'headerContent',\n    'headerMain',\n    'sortButton',\n    'sortLabel',\n    'sortIcon',\n    'sortPriority',\n    'selectAll',\n    'body',\n    'row',\n    'cell',\n    'selectCell',\n    'selectCheckbox',\n    'selectRadio',\n    'detailToggleCell',\n    'detailToggle',\n    'leading',\n    'content',\n    'rowHandle',\n    'editor',\n    'editorControl',\n    'editorError',\n    'detailRow',\n    'detailCell',\n    'detailContent',\n    'skeleton',\n    'emptyCell',\n    'spacer',\n    'foot',\n    'summaryCell',\n  ],\n  base: {\n    // contain: inline-size：宽表格不会把外层的 grid / flex 容器撑宽（它们的最小宽度默认等于内容宽度），\n    // 宽度只由所在的容器决定，放不下的部分在表格里横向滚动\n    // 也是容器查询的容器：详情的内容用 100cqi 限宽到视口，横向滚动时贴着起始边\n    root: { maxHeight: '32em', minWidth: 0, containerType: 'inline-size' },\n    table: {\n      width: '_full',\n      tableLayout: 'fixed',\n      borderCollapse: 'separate',\n      borderSpacing: 0,\n      color: '_text',\n      lineHeight: '_normal',\n    },\n    head: { position: 'sticky', top: 0, zIndex: 2 },\n    headerCell: {\n      position: 'relative',\n      boxSizing: 'border-box',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_border',\n      backgroundColor: '_fill',\n      color: '_textMuted',\n      fontSize: '_sm',\n      fontWeight: '_semibold',\n      textAlign: 'start',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n    // 分组标题居中，下边线淡一些：与下面一行的列标题仍是一个表头\n    groupHeaderCell: { textAlign: 'center', borderBottomColor: '_borderMuted' },\n    // 勾选列、详情列的格（表头与各行）：控件居中，没有左右内边距\n    selectHeaderCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    detailHeaderCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    // 有筛选、列菜单按钮的列标题：文字（或排序按钮）占满剩下的宽度，按钮在结尾\n    headerContent: { display: 'flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n    headerMain: { flexGrow: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' },\n    // 去掉按钮默认外观、焦点环、波纹、颜色过渡由 ButtonBase 给出\n    sortButton: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '_xs',\n      maxWidth: '_full',\n      color: { default: 'inherit', ':hover': '_text' },\n    },\n    sortLabel: { overflow: 'hidden', textOverflow: 'ellipsis' },\n    sortIcon: { flexShrink: 0 },\n    // 多列排序时的次序（1、2…）：小号数字跟在箭头后面\n    sortPriority: { fontSize: '0.75em', fontVariantNumeric: 'tabular-nums', color: '_accentText' },\n    // 单元格里 24px 的控件（勾选框、单选框、展开按钮）：上下的负外边距抵掉比一行文字高出的部分，\n    // 有控件的行与纯文字的行一样高，点击区域仍是 24px。操作列放文字按钮时用 variant=\"link\"\n    selectAll: { marginBlock: '-0.1875rem' },\n    // 数字等宽：金额、数量、日期上下对齐（文字不受影响）\n    cell: {\n      boxSizing: 'border-box',\n      fontVariantNumeric: 'tabular-nums',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_borderMuted',\n      backgroundColor: 'inherit',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      verticalAlign: 'middle',\n    },\n    selectCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    selectCheckbox: { marginBlock: '-0.1875rem' },\n    selectRadio: { marginBlock: '-0.1875rem' },\n    detailToggleCell: { paddingInline: 0, textAlign: 'center', textOverflow: 'clip' },\n    detailToggle: {\n      width: '1.5rem',\n      height: '1.5rem',\n      minHeight: '1.5rem',\n      marginBlock: '-0.1875rem',\n    },\n    leading: { display: 'flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n    content: { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' },\n    // 行拖动的把手：在第一个数据列的最前面，按下拖动，或聚焦后用键盘\n    rowHandle: {\n      display: 'grid',\n      placeItems: 'center',\n      flexShrink: 0,\n      width: '1.5em',\n      height: '1.5em',\n      marginBlock: '-0.25em',\n      borderRadius: '_sm',\n      backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n      color: '_textMuted',\n      cursor: { default: 'grab', ':active': 'grabbing' },\n      // 触摸拖动时不滚动页面\n      touchAction: 'none',\n    },\n    // 编辑器：贴着格子；提交被拒的原因浮在下面（不撑高这一行）\n    editor: { position: 'relative', minWidth: 0 },\n    editorControl: { width: '_full' },\n    editorError: {\n      position: 'absolute',\n      insetInlineStart: 0,\n      top: 'calc(100% + 2px)',\n      zIndex: 3,\n      // 按文字宽度，不被窄列挤成一字一行；靠起始边（数字列的格是靠结束边的）\n      width: 'max-content',\n      maxWidth: '20rem',\n      textAlign: 'start',\n      paddingBlock: '_xs',\n      paddingInline: '_sm',\n      borderRadius: '_sm',\n      backgroundColor: '_danger',\n      color: '_dangerContrast',\n      fontSize: '_sm',\n      whiteSpace: 'normal',\n      boxShadow: '_md',\n    },\n    // 详情行：浅底、可以换行；内边距放在内容上，内容贴着视口起始边、宽度不超过视口\n    detailCell: {\n      paddingBlock: 0,\n      paddingInline: 0,\n      whiteSpace: 'normal',\n      backgroundColor: '_fill',\n    },\n    detailContent: {\n      position: 'sticky',\n      insetInlineStart: 0,\n      boxSizing: 'border-box',\n      maxWidth: '100cqi',\n      paddingBlock: '_md',\n      paddingInline: '_md',\n    },\n    skeleton: { display: 'block', height: '1em' },\n    // paddingBlock 盖过单元格按密度的上下内边距（padding 是简写，压不过它）\n    emptyCell: { paddingBlock: 0, padding: 0, whiteSpace: 'normal' },\n    spacer: { padding: 0, borderWidth: 0 },\n    // 合计行吸底；在表头、固定列之上\n    foot: { position: 'sticky', bottom: 0, zIndex: 2 },\n    summaryCell: {\n      borderTopWidth: '_xs',\n      borderTopStyle: 'solid',\n      borderTopColor: '_border',\n      borderBottomWidth: 0,\n      backgroundColor: '_fill',\n      fontWeight: '_semibold',\n    },\n  },\n  variants: {\n    // 单元格的上下内边距；紧凑时字号也小一档\n    density: {\n      compact: {\n        table: { fontSize: '_sm' },\n        headerCell: { paddingBlock: '_xs' },\n        cell: { paddingBlock: '_xs' },\n      },\n      standard: { headerCell: { paddingBlock: '_sm' }, cell: { paddingBlock: '_sm' } },\n      comfortable: { headerCell: { paddingBlock: '_md' }, cell: { paddingBlock: '_md' } },\n    },\n    // 行的底色：固定列的单元格继承它（backgroundColor: inherit），所以必须是不透明的颜色\n    variant: {\n      surface: {\n        root: {\n          borderWidth: '_xs',\n          borderStyle: 'solid',\n          borderColor: '_border',\n          borderRadius: '_lg',\n          backgroundColor: '_surface',\n        },\n        row: { backgroundColor: { default: '_surface', ':hover': '_fillHover' } },\n      },\n      ghost: {\n        root: { backgroundColor: '_background' },\n        row: { backgroundColor: { default: '_background', ':hover': '_fillHover' } },\n      },\n    },\n    striped: {\n      true: { row: { backgroundColor: { default: '_fill', ':hover': '_fillHover' } } },\n    },\n  },\n});\n\n/** DataTable、TreeDataTable 的部件（createUi / Provider 的 styles.DataTable 按它定制） */\nexport type DataTablePart = (typeof dataTableRecipe.parts)[number];\n\n/**\n * 表格按列、按状态叠加的样式：对齐、换行、固定列、已选、正在看、编辑中……追加在部件层之后\n * （`{ ...s.cell, sx: [s.cell.sx, dataTableStateStyles.end] }`）。静态 Table 的对齐、换行也用它\n */\nexport const dataTableStateStyles = css.create({\n  // 放在竖排的弹性容器（ViewportFill）里：按行数自己的高度，最多占到剩下的高度，再多在表格里滚动\n  flexible: { flexGrow: 0, flexShrink: 1, flexBasis: 'auto', maxHeight: 'none', minHeight: 0 },\n  // 分组与相邻的列之间一条竖线（只在表头里）：看得出哪几列属于一组\n  groupDivider: {\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n  wrap: { whiteSpace: 'normal', overflowWrap: 'anywhere' },\n  start: { textAlign: 'start' },\n  center: { textAlign: 'center' },\n  end: { textAlign: 'end' },\n  selected: { backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' } },\n  // 主从视图里正在看的一行：同已选的底色；起始边一条强调色的竖线（与勾选区分开）画在第一个单元格上，\n  // 浏览器不给 tr 画阴影\n  active: { backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' } },\n  activeEdge: {\n    boxShadow: {\n      default: `inset 3px 0 0 ${t.colors.accent}`,\n      ':dir(rtl)': `inset -3px 0 0 ${t.colors.accent}`,\n    },\n  },\n  // 整行能点（打开详情）：手形指针\n  clickable: { cursor: 'pointer' },\n  // 固定列在普通单元格之上，表头在固定列之上\n  sticky: { position: 'sticky', zIndex: 1 },\n  // 固定列与滚动的列之间一条竖线：横向滚动时看得出哪几列是固定的\n  stickyStartEdge: {\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_borderMuted',\n  },\n  stickyEndEdge: {\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n  // 有起始边的固定列时，勾选列也固定在最前面\n  stickySelect: { position: 'sticky', zIndex: 1, insetInlineStart: 0 },\n  chevronOpen: { rotate: '90deg' },\n  sortActive: { color: '_accentText' },\n  // 靠结束边的列（数字）：文字靠结束边，按钮仍在最后\n  headerMainEnd: { textAlign: 'end' },\n  // 单元格导航：聚焦的格画一圈内描边（不占位、不被相邻格盖住）\n  gridCell: {\n    outline: 'none',\n    boxShadow: {\n      default: null,\n      ':focus-visible': `inset 0 0 0 ${t.borderWidths.sm} ${t.colors.focusRing}`,\n    },\n  },\n  // 编辑中的格：编辑器贴满格子，上下内边距收小\n  editingCell: { paddingBlock: '_none', overflow: 'visible' },\n  // 校验没过的格：红色内描边；聚焦时仍是焦点环\n  invalidCell: {\n    boxShadow: {\n      default: `inset 0 0 0 ${t.borderWidths.xs} ${t.colors.danger}`,\n      ':focus-visible': `inset 0 0 0 ${t.borderWidths.sm} ${t.colors.focusRing}`,\n    },\n  },\n  // 正在拖动的行：浮在别的行上面\n  rowDragging: { position: 'relative', zIndex: 1, boxShadow: '_md' },\n});\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodep-dev/vue-tsx-pro-ui",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "vue-tsx-pro 组件库",
   "type": "module",
   "license": "MIT",
@@ -48,6 +48,11 @@
       "types": "./dist/charts/index.d.ts",
       "default": "./dist/charts/index.js"
     },
+    "./maps": {
+      "@vue-tsx-pro/source": "./src/maps/index.ts",
+      "types": "./dist/maps/index.d.ts",
+      "default": "./dist/maps/index.js"
+    },
     "./docs-kit": {
       "@vue-tsx-pro/source": "./src/docs-kit/index.ts",
       "types": "./dist/docs-kit/index.d.ts",
@@ -112,7 +117,7 @@
     "@floating-ui/dom": "1.8.0",
     "@internationalized/date": "3.12.4",
     "@radix-ui/colors": "3.0.0",
-    "@zerodep-dev/vue-tsx-pro-tsx": "^0.3.2",
+    "@zerodep-dev/vue-tsx-pro-tsx": "^0.4.0",
     "animejs": "4.5.0",
     "culori": "4.0.2",
     "decimal.js": "10.6.0",
@@ -124,7 +129,6 @@
     "pinia": "^4.0.0",
     "shiki": "^4.0.0",
     "three": ">=0.170.0",
-    "@unovis/ts": "^1.7.0",
     "vue": "^3.5.0",
     "vue-router": "^5.0.0",
     "zod": "^4.6.0",
@@ -149,9 +153,6 @@
     "three": {
       "optional": true
     },
-    "@unovis/ts": {
-      "optional": true
-    },
     "vue-router": {
       "optional": true
     },
@@ -201,7 +202,6 @@
         "@lezer/highlight",
         "@lucide/icons",
         "@radix-ui/colors",
-        "@unovis/ts",
         "animejs",
         "culori/fn",
         "exceljs",
@@ -231,7 +231,6 @@
     "three": "0.186.1",
     "@types/three": "0.186.0",
     "typescript": "7.1.0-beta",
-    "@unovis/ts": "1.7.1",
     "vite": "8.3.4",
     "vitest": "5.0.5",
     "vue": "3.5.44",

package/dist/charts/single.d.ts

@@ -1,41 +0,0 @@
-/**
- * 单容器图表（环形图、桑基图、弦图）共用的绘制过程：Unovis 的 SingleContainer 只建一次，数据与配置变化时 update，
- * 卸载时 destroy；绘图区换了元素（加载、空状态之后重新出现）时容器连同组件、提示框一起重建。
- * 提示框按选择器触发，内容用 Vue 渲染进同一个元素交给 Unovis 定位。在组件 setup 里调用。
- *
- *   const chart = useSingleChart(() => ({
- *     element: plot, ready: !loading && rows.length > 0, tooltip,
- *     build: (instance) => ({ component: …, data: rows, triggers: { [Donut.selectors.segment]: (d) => chart.tooltip(…) } }),
- *   }));
- */
-import { Tooltip, type ComponentCore } from '@unovis/ts';
-import { type VNode } from 'vue';
-/** 一次绘制要的东西 */
-export interface SingleChartBuild<D> {
-    /** 配置好的组件 */
-    component: ComponentCore<D>;
-    /** 交给组件的数据 */
-    data: D;
-    /** 提示框：选择器 → 悬停的数据 → 内容（Unovis 的 Tooltip triggers） */
-    triggers?: NonNullable<Tooltip['config']['triggers']>;
-    /** 每次画完之后（容器的 onRenderComplete）：组件要在画好之后调整的（地图的标签避让） */
-    onRender?: () => void;
-}
-/** useSingleChart 每次读取的状态 */
-export interface SingleChartState<D> {
-    /** 绘图区元素 */
-    element: HTMLElement | null;
-    /** 可以画了：不在加载中、有数据 */
-    ready: boolean;
-    /** 显示提示框 */
-    tooltip: boolean;
-    /** 配置组件：instance 取跨渲染保留的实例（第一次调用时创建） */
-    build: (instance: <C>(key: string, create: () => C) => C) => SingleChartBuild<D>;
-}
-/** useSingleChart 的返回值 */
-export interface SingleChart {
-    /** 提示框的内容渲染进同一个元素，交给 Unovis 定位 */
-    tooltip(content: VNode): HTMLElement;
-}
-/** 单容器图表的绘制 */
-export declare function useSingleChart<D>(read: () => SingleChartState<D>): SingleChart;

package/dist/charts/single.js

@@ -1,66 +0,0 @@
-import { useDetachedRender } from "../overlay/detached.js";
-import { chartDuration, createChartInstances, uniqueHighlightFilter, usePlotSeen } from "./frame.js";
-import { useId } from "vue";
-import { effect } from "@zerodep-dev/vue-tsx-pro-tsx";
-import { SingleContainer, Tooltip } from "@unovis/ts";
-//#region src/charts/single.tsx
-/**
-* 单容器图表（环形图、桑基图、弦图）共用的绘制过程：Unovis 的 SingleContainer 只建一次，数据与配置变化时 update，
-* 卸载时 destroy；绘图区换了元素（加载、空状态之后重新出现）时容器连同组件、提示框一起重建。
-* 提示框按选择器触发，内容用 Vue 渲染进同一个元素交给 Unovis 定位。在组件 setup 里调用。
-*
-*   const chart = useSingleChart(() => ({
-*     element: plot, ready: !loading && rows.length > 0, tooltip,
-*     build: (instance) => ({ component: …, data: rows, triggers: { [Donut.selectors.segment]: (d) => chart.tooltip(…) } }),
-*   }));
-*/
-/** 一次绘制要的东西 */
-/** useSingleChart 每次读取的状态 */
-/** useSingleChart 的返回值 */
-/** 单容器图表的绘制 */
-function useSingleChart(read) {
-	const id = useId();
-	const instances = createChartInstances();
-	let tooltipElement;
-	const renderDetached = useDetachedRender();
-	let container;
-	let containerElement;
-	const seen = usePlotSeen(() => read().element);
-	effect(() => () => {
-		container?.destroy();
-	});
-	effect(() => {
-		const { element, ready, tooltip, build } = read();
-		if (!element || !ready || !seen()) return;
-		if (container && containerElement !== element) {
-			container.destroy();
-			container = void 0;
-			instances.reset();
-		}
-		const { component, data, triggers, onRender } = build(instances.get);
-		const tooltipBox = instances.get("tooltip", () => new Tooltip());
-		tooltipBox.setConfig({ triggers: triggers ?? {} });
-		const config = {
-			component,
-			tooltip: tooltip ? tooltipBox : void 0,
-			ariaLabel: null,
-			duration: chartDuration(element),
-			onRenderComplete: onRender
-		};
-		if (container) container.update(config, void 0, data);
-		else {
-			container = new SingleContainer(element, config, data);
-			containerElement = element;
-			uniqueHighlightFilter(element, `${id}-highlight`);
-		}
-	});
-	return { tooltip(content) {
-		tooltipElement ??= document.createElement("div");
-		renderDetached(content, tooltipElement);
-		return tooltipElement;
-	} };
-}
-//#endregion
-export { useSingleChart };
-
-//# sourceMappingURL=single.js.map

package/dist/charts/single.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"single.js","names":[],"sources":["../../src/charts/single.tsx"],"sourcesContent":["/**\n * 单容器图表（环形图、桑基图、弦图）共用的绘制过程：Unovis 的 SingleContainer 只建一次，数据与配置变化时 update，\n * 卸载时 destroy；绘图区换了元素（加载、空状态之后重新出现）时容器连同组件、提示框一起重建。\n * 提示框按选择器触发，内容用 Vue 渲染进同一个元素交给 Unovis 定位。在组件 setup 里调用。\n *\n *   const chart = useSingleChart(() => ({\n *     element: plot, ready: !loading && rows.length > 0, tooltip,\n *     build: (instance) => ({ component: …, data: rows, triggers: { [Donut.selectors.segment]: (d) => chart.tooltip(…) } }),\n *   }));\n */\nimport { SingleContainer, Tooltip, type ComponentCore } from '@unovis/ts';\nimport { useId, type VNode } from 'vue';\nimport { useDetachedRender } from '../overlay/detached';\nimport { chartDuration, createChartInstances, uniqueHighlightFilter, usePlotSeen } from './frame';\n\n/** 一次绘制要的东西 */\nexport interface SingleChartBuild<D> {\n  /** 配置好的组件 */\n  component: ComponentCore<D>;\n  /** 交给组件的数据 */\n  data: D;\n  /** 提示框：选择器 → 悬停的数据 → 内容（Unovis 的 Tooltip triggers） */\n  triggers?: NonNullable<Tooltip['config']['triggers']>;\n  /** 每次画完之后（容器的 onRenderComplete）：组件要在画好之后调整的（地图的标签避让） */\n  onRender?: () => void;\n}\n\n/** useSingleChart 每次读取的状态 */\nexport interface SingleChartState<D> {\n  /** 绘图区元素 */\n  element: HTMLElement | null;\n  /** 可以画了：不在加载中、有数据 */\n  ready: boolean;\n  /** 显示提示框 */\n  tooltip: boolean;\n  /** 配置组件：instance 取跨渲染保留的实例（第一次调用时创建） */\n  build: (instance: <C>(key: string, create: () => C) => C) => SingleChartBuild<D>;\n}\n\n/** useSingleChart 的返回值 */\nexport interface SingleChart {\n  /** 提示框的内容渲染进同一个元素，交给 Unovis 定位 */\n  tooltip(content: VNode): HTMLElement;\n}\n\n/** 单容器图表的绘制 */\nexport function useSingleChart<D>(read: () => SingleChartState<D>): SingleChart {\n  const id = useId();\n  const instances = createChartInstances();\n  let tooltipElement: HTMLElement | undefined;\n  // 提示框的内容渲染进 Unovis 管的元素：带上调用处的主题与语言，组件卸载时一起卸载\n  const renderDetached = useDetachedRender();\n  let container: SingleContainer<D> | undefined;\n  let containerElement: HTMLElement | undefined;\n  const seen = usePlotSeen(() => read().element);\n\n  _effect(() => () => {\n    container?.destroy();\n  });\n  _effect(() => {\n    const { element, ready, tooltip, build } = read();\n    if (!element || !ready || !seen()) return;\n    // 绘图区换了元素：旧容器连同组件、提示框一起销毁，实例表清空后重新创建\n    if (container && containerElement !== element) {\n      container.destroy();\n      container = undefined;\n      instances.reset();\n    }\n    const { component, data, triggers, onRender } = build(instances.get);\n    const tooltipBox = instances.get('tooltip', () => new Tooltip());\n    tooltipBox.setConfig({ triggers: triggers ?? {} });\n    const config = {\n      component,\n      tooltip: tooltip ? tooltipBox : undefined,\n      ariaLabel: null,\n      duration: chartDuration(element),\n      onRenderComplete: onRender,\n    };\n    if (container) container.update(config, undefined, data);\n    else {\n      container = new SingleContainer<D>(element, config, data);\n      containerElement = element;\n      uniqueHighlightFilter(element, `${id}-highlight`);\n    }\n  });\n\n  return {\n    tooltip(content) {\n      tooltipElement ??= document.createElement('div');\n      renderDetached(content, tooltipElement);\n      return tooltipElement;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,eAAkB,MAA8C;CAC9E,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,qBAAqB;CACvC,IAAI;CAEJ,MAAM,iBAAiB,kBAAkB;CACzC,IAAI;CACJ,IAAI;CACJ,MAAM,OAAO,kBAAkB,KAAK,CAAC,CAAC,OAAO;CAE7C,mBAAoB;EAClB,WAAW,QAAQ;CACrB,CAAC;CACD,aAAc;EACZ,MAAM,EAAE,SAAS,OAAO,SAAS,UAAU,KAAK;EAChD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,GAAG;EAEnC,IAAI,aAAa,qBAAqB,SAAS;GAC7C,UAAU,QAAQ;GAClB,YAAY,KAAA;GACZ,UAAU,MAAM;EAClB;EACA,MAAM,EAAE,WAAW,MAAM,UAAU,aAAa,MAAM,UAAU,GAAG;EACnE,MAAM,aAAa,UAAU,IAAI,iBAAiB,IAAI,QAAQ,CAAC;EAC/D,WAAW,UAAU,EAAE,UAAU,YAAY,CAAC,EAAE,CAAC;EACjD,MAAM,SAAS;GACb;GACA,SAAS,UAAU,aAAa,KAAA;GAChC,WAAW;GACX,UAAU,cAAc,OAAO;GAC/B,kBAAkB;EACpB;EACA,IAAI,WAAW,UAAU,OAAO,QAAQ,KAAA,GAAW,IAAI;OAClD;GACH,YAAY,IAAI,gBAAmB,SAAS,QAAQ,IAAI;GACxD,mBAAmB;GACnB,sBAAsB,SAAS,GAAG,GAAE,WAAY;EAClD;CACF,CAAC;CAED,OAAO,EACL,QAAQ,SAAS;EACf,mBAAmB,SAAS,cAAc,KAAK;EAC/C,eAAe,SAAS,cAAc;EACtC,OAAO;CACT,EACF;AACF"}