@veltra/desktop 1.0.7 → 1.0.9

package/dist/components/table/use-fixed-columns.js

@@ -1,22 +1,41 @@
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { debounce } from "@cat-kit/core";
 //#region src/components/table/use-fixed-columns.ts
 /**
 * 固定列
 * @returns
 */
-function useFixedColumns() {
+function useFixedColumns(options = {}) {
+	const { isScrolling } = options;
 	const leftFixed = ref(false);
 	const rightFixed = ref(false);
+	let pendingLeft = null;
+	let pendingRight = null;
+	const applyImmediate = (nextLeft, nextRight) => {
+		if (nextLeft !== leftFixed.value) leftFixed.value = nextLeft;
+		if (nextRight !== rightFixed.value) rightFixed.value = nextRight;
+		pendingLeft = null;
+		pendingRight = null;
+	};
+	const handleScroll = debounce((e) => {
+		const nextLeft = e.x > 0;
+		const nextRight = !(e.cw + e.x + 1 >= e.sw);
+		if (isScrolling?.value) {
+			pendingLeft = nextLeft;
+			pendingRight = nextRight;
+			return;
+		}
+		applyImmediate(nextLeft, nextRight);
+	}, 50);
+	if (isScrolling) watch(isScrolling, (v) => {
+		if (v) return;
+		if (pendingLeft === null && pendingRight === null) return;
+		applyImmediate(pendingLeft ?? leftFixed.value, pendingRight ?? rightFixed.value);
+	});
 	return {
 		leftFixed,
 		rightFixed,
-		handleScroll: debounce((e) => {
-			if (e.x > 0) leftFixed.value = true;
-			else leftFixed.value = false;
-			if (e.cw + e.x + 1 >= e.sw) rightFixed.value = false;
-			else rightFixed.value = true;
-		}, 50)
+		handleScroll
 	};
 }
 //#endregion

package/dist/components/table/use-fixed-columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-fixed-columns.js","names":[],"sources":["../../../src/components/table/use-fixed-columns.ts"],"sourcesContent":["import { debounce } from '@cat-kit/core'\nimport { type ShallowRef, ref } from 'vue'\n\nimport type { ScrollPosition } from '../../types'\n\ninterface UseColumnFixedReturned {\n  leftFixed: ShallowRef<boolean>\n  rightFixed: ShallowRef<boolean>\n  handleScroll: (e: Required<ScrollPosition>) => void\n}\n\n/**\n * 固定列\n * @returns\n */\nexport function useFixedColumns(): UseColumnFixedReturned {\n  const leftFixed = ref(false)\n  const rightFixed = ref(false)\n\n  const handleScroll = debounce((e: Required<ScrollPosition>) => {\n    if (e.x > 0) {\n      leftFixed.value = true\n    } else {\n      leftFixed.value = false\n    }\n\n    // 精度修正\n    if (e.cw + e.x + 1 >= e.sw) {\n      rightFixed.value = false\n    } else {\n      rightFixed.value = true\n    }\n  }, 50)\n\n  return { leftFixed, rightFixed, handleScroll }\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,kBAA0C;CACxD,MAAM,YAAY,IAAI,MAAM;CAC5B,MAAM,aAAa,IAAI,MAAM;AAiB7B,QAAO;EAAE;EAAW;EAAY,cAfX,UAAU,MAAgC;AAC7D,OAAI,EAAE,IAAI,EACR,WAAU,QAAQ;OAElB,WAAU,QAAQ;AAIpB,OAAI,EAAE,KAAK,EAAE,IAAI,KAAK,EAAE,GACtB,YAAW,QAAQ;OAEnB,YAAW,QAAQ;KAEpB,GAAG;EAEwC"}
+{"version":3,"file":"use-fixed-columns.js","names":[],"sources":["../../../src/components/table/use-fixed-columns.ts"],"sourcesContent":["import { debounce } from '@cat-kit/core'\nimport { type ShallowRef, type Ref, ref, watch } from 'vue'\n\nimport type { ScrollPosition } from '../../types'\n\ninterface UseColumnFixedReturned {\n  leftFixed: ShallowRef<boolean>\n  rightFixed: ShallowRef<boolean>\n  handleScroll: (e: Required<ScrollPosition>) => void\n}\n\ninterface Options {\n  /**\n   * D1：滚动中 (`true`) 暂缓 `leftFixed` / `rightFixed` 的切换，滚动结束后\n   * 一次性补算。\n   *\n   * 背景：固定列的阴影是通过在 cell 上切换 `is-last-fixed` / `is-first-fixed`\n   * 等 class 实现的，这些 class 会穿透到 `useTable.getCellClass` 的缓存键，\n   * 任何一次切换都会让全表的单元格类名失效重算。滚动本身并不需要实时更新阴影，\n   * 因此把切换推迟到 `isScrolling` 归零时做一次即可。\n   *\n   * 未传入时退化到旧行为（实时切换）。\n   */\n  isScrolling?: Ref<boolean>\n}\n\n/**\n * 固定列\n * @returns\n */\nexport function useFixedColumns(options: Options = {}): UseColumnFixedReturned {\n  const { isScrolling } = options\n\n  const leftFixed = ref(false)\n  const rightFixed = ref(false)\n\n  let pendingLeft: boolean | null = null\n  let pendingRight: boolean | null = null\n\n  const applyImmediate = (nextLeft: boolean, nextRight: boolean): void => {\n    if (nextLeft !== leftFixed.value) leftFixed.value = nextLeft\n    if (nextRight !== rightFixed.value) rightFixed.value = nextRight\n    pendingLeft = null\n    pendingRight = null\n  }\n\n  const handleScroll = debounce((e: Required<ScrollPosition>) => {\n    const nextLeft = e.x > 0\n    // 精度修正：浏览器滚动条最后 1px 的误差\n    const nextRight = !(e.cw + e.x + 1 >= e.sw)\n\n    if (isScrolling?.value) {\n      pendingLeft = nextLeft\n      pendingRight = nextRight\n      return\n    }\n\n    applyImmediate(nextLeft, nextRight)\n  }, 50)\n\n  if (isScrolling) {\n    watch(isScrolling, (v) => {\n      if (v) return\n      if (pendingLeft === null && pendingRight === null) return\n      applyImmediate(pendingLeft ?? leftFixed.value, pendingRight ?? rightFixed.value)\n    })\n  }\n\n  return { leftFixed, rightFixed, handleScroll }\n}\n"],"mappings":";;;;;;;AA8BA,SAAgB,gBAAgB,UAAmB,EAAE,EAA0B;CAC7E,MAAM,EAAE,gBAAgB;CAExB,MAAM,YAAY,IAAI,MAAM;CAC5B,MAAM,aAAa,IAAI,MAAM;CAE7B,IAAI,cAA8B;CAClC,IAAI,eAA+B;CAEnC,MAAM,kBAAkB,UAAmB,cAA6B;AACtE,MAAI,aAAa,UAAU,MAAO,WAAU,QAAQ;AACpD,MAAI,cAAc,WAAW,MAAO,YAAW,QAAQ;AACvD,gBAAc;AACd,iBAAe;;CAGjB,MAAM,eAAe,UAAU,MAAgC;EAC7D,MAAM,WAAW,EAAE,IAAI;EAEvB,MAAM,YAAY,EAAE,EAAE,KAAK,EAAE,IAAI,KAAK,EAAE;AAExC,MAAI,aAAa,OAAO;AACtB,iBAAc;AACd,kBAAe;AACf;;AAGF,iBAAe,UAAU,UAAU;IAClC,GAAG;AAEN,KAAI,YACF,OAAM,cAAc,MAAM;AACxB,MAAI,EAAG;AACP,MAAI,gBAAgB,QAAQ,iBAAiB,KAAM;AACnD,iBAAe,eAAe,UAAU,OAAO,gBAAgB,WAAW,MAAM;GAChF;AAGJ,QAAO;EAAE;EAAW;EAAY;EAAc"}

package/dist/components/table/use-rows.js

@@ -4,7 +4,7 @@ import { Forest, o } from "@cat-kit/core";
 import { useModel as useModel$1 } from "@veltra/compositions";
 //#region src/components/table/use-rows.ts
 function useRows(options) {
-	const { props, emit } = options;
+	const { props, emit, isScrolling } = options;
 	/** 所有可见的行 */
 	const rows = shallowRef([]);
 	/** 数据行， 不包括展开和折叠的行 */
@@ -145,7 +145,7 @@ function useRows(options) {
 		}
 	}
 	function handleRowClick(row, e) {
-		currentRow.value = currentRow.value === row ? void 0 : row;
+		if (!isScrolling?.value) currentRow.value = currentRow.value === row ? void 0 : row;
 		emit("row-click", row, e);
 	}
 	function handleCellClick(row, column, e) {

package/dist/components/table/use-rows.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-rows.js","names":["useModel"],"sources":["../../../src/components/table/use-rows.ts"],"sourcesContent":["import { Forest, o } from '@cat-kit/core'\nimport { useModel } from '@veltra/compositions'\nimport { shallowRef, watch, type ShallowRef } from 'vue'\n\nimport type { TableColumn, TableEmits, TableProps, TableRow } from '../../types'\nimport { TableRowNode } from './node/row'\n\ninterface Options {\n  props: TableProps\n  emit: TableEmits\n}\n\ninterface UseRowsReturned {\n  /** 所有的行森林（树形数据） */\n  rowForest: ShallowRef<Forest<Record<string, unknown>, any> | undefined>\n  /** 当前可见的展平行列表 */\n  rows: ShallowRef<TableRowNode[]>\n  /** 切换树形行节点的展开/折叠 */\n  toggleTreeRowExpand: (node: TableRow) => void\n  /** 是否全部展开 */\n  allExpanded: ShallowRef<boolean>\n  /** 切换全部展开/折叠 */\n  toggleAllTreeRowExpand: () => void\n  /** 行点击处理 */\n  handleRowClick: (row: TableRow, e: MouseEvent) => void\n  /** 单元格点击处理 */\n  handleCellClick: (row: TableRow, column: TableColumn, e: MouseEvent) => void\n  /** 根据原始数据对象获取对应的 TableRow */\n  getRowByData: (data: Record<string, any>) => TableRow | undefined\n}\n\nexport function useRows(options: Options): UseRowsReturned {\n  const { props, emit } = options\n\n  // --- 状态定义 ---\n\n  /** 所有可见的行 */\n  const rows = shallowRef<TableRowNode[]>([])\n  /** 数据行， 不包括展开和折叠的行 */\n  const dataRows = shallowRef<TableRowNode[]>([])\n  /** 行森林（数据结构树） */\n  const rowForest = shallowRef<Forest<Record<string, unknown>, any>>()\n  /** 树形节点是否全部展开 */\n  const allExpanded = shallowRef(props.defaultExpandAll ?? false)\n\n  /** 当前高亮的行 */\n  const currentRow = useModel({\n    props,\n    emit,\n    propName: 'current',\n    shallow: true,\n    local: () => !!props.highlightCurrent\n  })\n\n  // --- 行字典维护 (性能优化) ---\n\n  /**\n   * 用于优化增删改时的性能。\n   * 原理：Vue 的组件在属性发生改变时会重新渲染，通过 WeakMap 缓存 data -> TableRow 的映射，\n   * 可以在数据更新时复用已有的 TableRowNode 实例，避免重复创建和 DOM 抖动。\n   */\n  let rowDicts = new WeakMap<Record<string, any>, TableRowNode>()\n  let tempRowDicts: null | WeakMap<Record<string, any>, TableRowNode> = null\n  let uidSeed = 0\n\n  /** 获取行唯一标识 */\n  const getRowUID = props.rowKey\n    ? (rowData: Record<string, any>) => rowData && o(rowData).get(props.rowKey!)\n    : () => uidSeed++\n\n  /** 创建或复用 TableRow 实例 */\n  const createRow = (\n    data: Record<string, any>,\n    index: number,\n    depth = 0,\n    parent?: TableRowNode\n  ) => {\n    const existRow = data ? rowDicts.get(data) : undefined\n    if (existRow) {\n      existRow.index = index\n      existRow.depth = depth\n      existRow.parent = parent\n      return existRow\n    }\n    return new TableRowNode({ data, index, depth, parent, uid: getRowUID(data) })\n  }\n\n  // --- 行处理逻辑 ---\n\n  /** 处理常规扁平列表 */\n  function getDataRows(data: Record<string, any>[]): TableRowNode[] {\n    let i = data.length\n    const result = Array.from({ length: i }) as TableRowNode[]\n    tempRowDicts = new WeakMap()\n\n    while (i--) {\n      const dataItem = data[i]!\n      const row = createRow(dataItem, i)\n      result[i] = row\n      tempRowDicts.set(dataItem, row)\n    }\n\n    rowDicts = tempRowDicts\n    tempRowDicts = null\n    return result\n  }\n\n  function expandDataRows(): void {\n    const result: TableRowNode[] = []\n    let i = -1\n    while (++i < dataRows.value.length) {\n      const row = dataRows.value[i]!\n      result.push(row)\n      if (row.expanded) {\n        result.push(row.copy())\n      }\n    }\n    rows.value = result\n  }\n\n  /** 处理树形森林结构 */\n  function getRowForest(data: Record<string, any>[]): Forest<Record<string, unknown>, any> {\n    tempRowDicts = new WeakMap()\n    const childrenKey = typeof props.tree === 'string' ? props.tree : 'children'\n    const ret = new Forest<Record<string, unknown>, any>({\n      data,\n      childrenKey,\n      createNode(val, index, depth, _forest, parent) {\n        const row = createRow(val, index, depth, parent)\n        if (props.defaultExpandAll) {\n          row.expanded = true\n        }\n        val && tempRowDicts!.set(val, row)\n        return row\n      }\n    })\n\n    rowDicts = tempRowDicts\n    tempRowDicts = null\n    return ret\n  }\n\n  /** 展平树形结构为可见行列表 */\n  function updateFlattedRows(): void {\n    if (!rowForest.value) return\n    rows.value = rowForest.value.flattenVisible((n) => n.expanded)\n  }\n\n  // --- 副作用监听 ---\n\n  // 监听当前行切换，维护 isCurrent 状态\n  watch(\n    () => currentRow.value,\n    (row, oldRow) => {\n      if (oldRow) oldRow.isCurrent = false\n      if (row) row.isCurrent = true\n    }\n  )\n\n  // 同步状态给外部\n  watch(rows, (rows) => emit('update:rows', rows))\n  watch(rowForest, (forest) => emit('update:forest', forest))\n\n  // 核心：监听原始数据变化，重新构建行列表或树\n  watch(\n    [() => props.data, () => props.tree, () => props.defaultExpandAll],\n    ([data, tree]) => {\n      if (!data?.length) {\n        rows.value = []\n        rowDicts = new WeakMap()\n        rowForest.value = undefined\n        return\n      }\n\n      if (!tree) {\n        rowForest.value = undefined\n        dataRows.value = getDataRows(data)\n        rows.value = dataRows.value\n      } else {\n        dataRows.value = []\n        rowForest.value = getRowForest(data)\n        updateFlattedRows()\n      }\n    },\n    { immediate: true }\n  )\n\n  // --- 交互方法 ---\n\n  function toggleTreeRowExpand(node: TableRow): void {\n    node.expanded = !node.expanded\n\n    if (props.tree) {\n      return updateFlattedRows()\n    }\n    if (props.expandable) {\n      expandDataRows()\n    }\n  }\n\n  function toggleAllTreeRowExpand(): void {\n    allExpanded.value = !allExpanded.value\n    if (props.tree) {\n      rowForest.value?.dfs((node) => {\n        node.expanded = allExpanded.value\n      })\n      updateFlattedRows()\n      return\n    }\n    if (props.expandable) {\n      dataRows.value.forEach((row) => {\n        row.expanded = allExpanded.value\n      })\n      expandDataRows()\n      return\n    }\n  }\n\n  function handleRowClick(row: TableRow, e: MouseEvent): void {\n    currentRow.value = currentRow.value === row ? undefined : row\n    emit('row-click', row, e)\n  }\n\n  function handleCellClick(row: TableRow, column: TableColumn, e: MouseEvent): void {\n    emit('cell-click', row, column, e)\n  }\n\n  function getRowByData(data: Record<string, any>): TableRow | undefined {\n    return rowDicts.get(data)\n  }\n\n  return {\n    rowForest,\n    rows,\n    allExpanded,\n    toggleTreeRowExpand,\n    toggleAllTreeRowExpand,\n    handleRowClick,\n    handleCellClick,\n    getRowByData\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-rows.js","names":["useModel"],"sources":["../../../src/components/table/use-rows.ts"],"sourcesContent":["import { Forest, o } from '@cat-kit/core'\nimport { useModel } from '@veltra/compositions'\nimport { shallowRef, watch, type Ref, type ShallowRef } from 'vue'\n\nimport type { TableColumn, TableEmits, TableProps, TableRow } from '../../types'\nimport { TableRowNode } from './node/row'\n\ninterface Options {\n  props: TableProps\n  emit: TableEmits\n  /**\n   * D2：滚动中 (`true`) 跳过 `currentRow` 高亮写入。\n   *\n   * 行点击处理会通过 `currentRow` watcher 把 `isCurrent` 切换到新行 / 旧行上，\n   * 触发对应 `<tr>` 的 class 重绘。在滚动期间 (移动端/触控板惯性滚动常见)\n   * 意外点击不应改变高亮，因此直接跳过；滚动结束后的正常点击仍会生效。\n   */\n  isScrolling?: Ref<boolean>\n}\n\ninterface UseRowsReturned {\n  /** 所有的行森林（树形数据） */\n  rowForest: ShallowRef<Forest<Record<string, unknown>, any> | undefined>\n  /** 当前可见的展平行列表 */\n  rows: ShallowRef<TableRowNode[]>\n  /** 切换树形行节点的展开/折叠 */\n  toggleTreeRowExpand: (node: TableRow) => void\n  /** 是否全部展开 */\n  allExpanded: ShallowRef<boolean>\n  /** 切换全部展开/折叠 */\n  toggleAllTreeRowExpand: () => void\n  /** 行点击处理 */\n  handleRowClick: (row: TableRow, e: MouseEvent) => void\n  /** 单元格点击处理 */\n  handleCellClick: (row: TableRow, column: TableColumn, e: MouseEvent) => void\n  /** 根据原始数据对象获取对应的 TableRow */\n  getRowByData: (data: Record<string, any>) => TableRow | undefined\n}\n\nexport function useRows(options: Options): UseRowsReturned {\n  const { props, emit, isScrolling } = options\n\n  // --- 状态定义 ---\n\n  /** 所有可见的行 */\n  const rows = shallowRef<TableRowNode[]>([])\n  /** 数据行， 不包括展开和折叠的行 */\n  const dataRows = shallowRef<TableRowNode[]>([])\n  /** 行森林（数据结构树） */\n  const rowForest = shallowRef<Forest<Record<string, unknown>, any>>()\n  /** 树形节点是否全部展开 */\n  const allExpanded = shallowRef(props.defaultExpandAll ?? false)\n\n  /** 当前高亮的行 */\n  const currentRow = useModel({\n    props,\n    emit,\n    propName: 'current',\n    shallow: true,\n    local: () => !!props.highlightCurrent\n  })\n\n  // --- 行字典维护 (性能优化) ---\n\n  /**\n   * 用于优化增删改时的性能。\n   * 原理：Vue 的组件在属性发生改变时会重新渲染，通过 WeakMap 缓存 data -> TableRow 的映射，\n   * 可以在数据更新时复用已有的 TableRowNode 实例，避免重复创建和 DOM 抖动。\n   */\n  let rowDicts = new WeakMap<Record<string, any>, TableRowNode>()\n  let tempRowDicts: null | WeakMap<Record<string, any>, TableRowNode> = null\n  let uidSeed = 0\n\n  /** 获取行唯一标识 */\n  const getRowUID = props.rowKey\n    ? (rowData: Record<string, any>) => rowData && o(rowData).get(props.rowKey!)\n    : () => uidSeed++\n\n  /** 创建或复用 TableRow 实例 */\n  const createRow = (\n    data: Record<string, any>,\n    index: number,\n    depth = 0,\n    parent?: TableRowNode\n  ) => {\n    const existRow = data ? rowDicts.get(data) : undefined\n    if (existRow) {\n      existRow.index = index\n      existRow.depth = depth\n      existRow.parent = parent\n      return existRow\n    }\n    return new TableRowNode({ data, index, depth, parent, uid: getRowUID(data) })\n  }\n\n  // --- 行处理逻辑 ---\n\n  /** 处理常规扁平列表 */\n  function getDataRows(data: Record<string, any>[]): TableRowNode[] {\n    let i = data.length\n    const result = Array.from({ length: i }) as TableRowNode[]\n    tempRowDicts = new WeakMap()\n\n    while (i--) {\n      const dataItem = data[i]!\n      const row = createRow(dataItem, i)\n      result[i] = row\n      tempRowDicts.set(dataItem, row)\n    }\n\n    rowDicts = tempRowDicts\n    tempRowDicts = null\n    return result\n  }\n\n  function expandDataRows(): void {\n    const result: TableRowNode[] = []\n    let i = -1\n    while (++i < dataRows.value.length) {\n      const row = dataRows.value[i]!\n      result.push(row)\n      if (row.expanded) {\n        result.push(row.copy())\n      }\n    }\n    rows.value = result\n  }\n\n  /** 处理树形森林结构 */\n  function getRowForest(data: Record<string, any>[]): Forest<Record<string, unknown>, any> {\n    tempRowDicts = new WeakMap()\n    const childrenKey = typeof props.tree === 'string' ? props.tree : 'children'\n    const ret = new Forest<Record<string, unknown>, any>({\n      data,\n      childrenKey,\n      createNode(val, index, depth, _forest, parent) {\n        const row = createRow(val, index, depth, parent)\n        if (props.defaultExpandAll) {\n          row.expanded = true\n        }\n        val && tempRowDicts!.set(val, row)\n        return row\n      }\n    })\n\n    rowDicts = tempRowDicts\n    tempRowDicts = null\n    return ret\n  }\n\n  /** 展平树形结构为可见行列表 */\n  function updateFlattedRows(): void {\n    if (!rowForest.value) return\n    rows.value = rowForest.value.flattenVisible((n) => n.expanded)\n  }\n\n  // --- 副作用监听 ---\n\n  // 监听当前行切换，维护 isCurrent 状态\n  watch(\n    () => currentRow.value,\n    (row, oldRow) => {\n      if (oldRow) oldRow.isCurrent = false\n      if (row) row.isCurrent = true\n    }\n  )\n\n  // 同步状态给外部\n  watch(rows, (rows) => emit('update:rows', rows))\n  watch(rowForest, (forest) => emit('update:forest', forest))\n\n  // 核心：监听原始数据变化，重新构建行列表或树\n  watch(\n    [() => props.data, () => props.tree, () => props.defaultExpandAll],\n    ([data, tree]) => {\n      if (!data?.length) {\n        rows.value = []\n        rowDicts = new WeakMap()\n        rowForest.value = undefined\n        return\n      }\n\n      if (!tree) {\n        rowForest.value = undefined\n        dataRows.value = getDataRows(data)\n        rows.value = dataRows.value\n      } else {\n        dataRows.value = []\n        rowForest.value = getRowForest(data)\n        updateFlattedRows()\n      }\n    },\n    { immediate: true }\n  )\n\n  // --- 交互方法 ---\n\n  function toggleTreeRowExpand(node: TableRow): void {\n    node.expanded = !node.expanded\n\n    if (props.tree) {\n      return updateFlattedRows()\n    }\n    if (props.expandable) {\n      expandDataRows()\n    }\n  }\n\n  function toggleAllTreeRowExpand(): void {\n    allExpanded.value = !allExpanded.value\n    if (props.tree) {\n      rowForest.value?.dfs((node) => {\n        node.expanded = allExpanded.value\n      })\n      updateFlattedRows()\n      return\n    }\n    if (props.expandable) {\n      dataRows.value.forEach((row) => {\n        row.expanded = allExpanded.value\n      })\n      expandDataRows()\n      return\n    }\n  }\n\n  function handleRowClick(row: TableRow, e: MouseEvent): void {\n    // D2：滚动中的点击（多为惯性滚动误触）不应改变 currentRow 高亮。\n    if (!isScrolling?.value) {\n      currentRow.value = currentRow.value === row ? undefined : row\n    }\n    emit('row-click', row, e)\n  }\n\n  function handleCellClick(row: TableRow, column: TableColumn, e: MouseEvent): void {\n    emit('cell-click', row, column, e)\n  }\n\n  function getRowByData(data: Record<string, any>): TableRow | undefined {\n    return rowDicts.get(data)\n  }\n\n  return {\n    rowForest,\n    rows,\n    allExpanded,\n    toggleTreeRowExpand,\n    toggleAllTreeRowExpand,\n    handleRowClick,\n    handleCellClick,\n    getRowByData\n  }\n}\n"],"mappings":"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"}

package/dist/components/table/use-table.js

@@ -1,4 +1,4 @@
-import { useSlots } from "vue";
+import { useSlots, watch } from "vue";
 import { o } from "@cat-kit/core";
 import { bem } from "@veltra/utils";
 //#region src/components/table/use-table.ts
@@ -33,11 +33,33 @@ function useTable(options) {
 		if (column.fixed) classList.push(bem.is("fixed-" + column.fixed));
 		return classList.join(" ");
 	};
+	/**
+	* B1: 单元格类名按 ColumnNode 身份缓存。
+	*
+	* 对同一列，类名只取决于 (column.fixed, column.isLastFixed, column.isFirstFixed,
+	* column.align, leftFixed, rightFixed)。其中前四个绑定在 ColumnNode 实例上，
+	* 后两个在 leftFixed/rightFixed 变化时失效缓存即可。用 WeakMap 以 ColumnNode
+	* 为键可避免字符串 key 的拼接/哈希开销，且列树重建时节点随 GC 自动释放。
+	*/
+	let cellClassCache = /* @__PURE__ */ new WeakMap();
+	let headerCellClassCache = /* @__PURE__ */ new WeakMap();
+	watch([leftFixed, rightFixed], () => {
+		cellClassCache = /* @__PURE__ */ new WeakMap();
+		headerCellClassCache = /* @__PURE__ */ new WeakMap();
+	});
 	const getCellClass = (column) => {
-		return getCommonClassName(column) + ` ${bem.is(column.align)}`;
+		const cached = cellClassCache.get(column);
+		if (cached !== void 0) return cached;
+		const result = getCommonClassName(column) + ` ${bem.is(column.align)}`;
+		cellClassCache.set(column, result);
+		return result;
 	};
 	const getHeaderCellClass = (column) => {
-		return getCommonClassName(column) + ` ${bem.is(column.headerAlign)}`;
+		const cached = headerCellClassCache.get(column);
+		if (cached !== void 0) return cached;
+		const result = getCommonClassName(column) + ` ${bem.is(column.headerAlign)}`;
+		headerCellClassCache.set(column, result);
+		return result;
 	};
 	const getCellCtx = (row, column) => {
 		const rowData = row.data;

package/dist/components/table/use-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-table.js","names":[],"sources":["../../../src/components/table/use-table.ts"],"sourcesContent":["import { o } from '@cat-kit/core'\nimport { bem, type BEM } from '@veltra/utils'\nimport { useSlots, type Ref } from 'vue'\n\nimport type {\n  TableColumnRenderContext,\n  TableColumnSlotsScope,\n  TableProps,\n  TableRow,\n  RenderReturn,\n  TableRowSlotsScope\n} from '../../types'\nimport type { ColumnNode } from './node/col'\n\ninterface Options {\n  props: TableProps\n  cls: BEM<'table'>\n  leftFixed: Ref<boolean>\n  rightFixed: Ref<boolean>\n}\n\ninterface UseTableReturn {\n  getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn\n  getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn\n  getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn\n  getCellClass: (column: ColumnNode) => string\n  getHeaderCellClass: (column: ColumnNode) => string\n  getCellCtx: (\n    row: TableRow,\n    column: ColumnNode\n  ) => TableColumnSlotsScope | TableColumnRenderContext\n}\n\nexport function useTable(options: Options): UseTableReturn {\n  const { props, cls, leftFixed, rightFixed } = options\n\n  const slots = useSlots()\n\n  const getColumnSlotsNode = (\n    ctx: TableColumnSlotsScope | TableColumnRenderContext\n  ): RenderReturn => {\n    const column = ctx.column.data\n\n    const { render, key } = column\n\n    if (render) return render(ctx)\n\n    const slotsRender = props.slots?.[`column:${key}`] ?? slots[`column:${key}`]\n\n    if (slotsRender) return slotsRender(ctx)\n\n    return ctx.val\n  }\n\n  const getHeaderSlotsNode = (ctx: { column: ColumnNode }): RenderReturn => {\n    const column = ctx.column.data\n    const { nameRender, key } = column\n\n    if (nameRender) return nameRender(ctx)\n\n    const slotsRender = props.slots?.[`header:${key}`] ?? slots[`header:${key}`]\n\n    if (slotsRender) return slotsRender(ctx)\n\n    return column.name\n  }\n\n  const getExpandRowSlotsNode = (ctx: TableRowSlotsScope): RenderReturn => {\n    const slotsRender = props.slots?.['row:expand'] ?? slots['row:expand']\n\n    if (slotsRender) return slotsRender(ctx)\n    return null\n  }\n\n  const cellCls = cls.e('cell')\n\n  const getCommonClassName = (column: ColumnNode): string => {\n    const classList: string[] = [cellCls]\n\n    leftFixed.value && column.isLastFixed && classList.push(bem.is('last-fixed'))\n\n    rightFixed.value && column.isFirstFixed && classList.push(bem.is('first-fixed'))\n\n    if (column.fixed) {\n      classList.push(bem.is('fixed-' + column.fixed))\n    }\n    return classList.join(' ')\n  }\n\n  const getCellClass = (column: ColumnNode): string => {\n    return getCommonClassName(column) + ` ${bem.is(column.align)}`\n  }\n\n  const getHeaderCellClass = (column: ColumnNode): string => {\n    return getCommonClassName(column) + ` ${bem.is(column.headerAlign)}`\n  }\n\n  const getCellCtx = (\n    row: TableRow,\n    column: ColumnNode\n  ): TableColumnSlotsScope | TableColumnRenderContext => {\n    const rowData = row.data\n    const val = column.key ? o(rowData).get(column.key) : undefined\n\n    const ctx = {\n      row,\n      column,\n      rowData,\n      val,\n      model: {\n        modelValue: val,\n        'onUpdate:modelValue': (val: any) => {\n          rowData[column.key] = val\n        }\n      }\n    }\n\n    return ctx\n  }\n\n  return {\n    /**\n     * 获取列插槽VNode\n     * @param ctx 列渲染上下文\n     */\n    getColumnSlotsNode,\n    /**\n     * 获取表头插槽VNode\n     * @param ctx 表头渲染上下文\n     */\n    getHeaderSlotsNode,\n    /**\n     * 获取展开行插槽VNode\n     * @param ctx 展开行渲染上下文\n     */\n    getExpandRowSlotsNode,\n    /**\n     * 获取单元格类名\n     * @param column 列\n     */\n    getCellClass,\n    /**\n     * 获取表头单元格类名\n     * @param column 列\n     */\n    getHeaderCellClass,\n    /**\n     * 获取单元格上下文\n     * @param row 行\n     * @param column 列\n     */\n    getCellCtx\n  }\n}\n"],"mappings":";;;;AAiCA,SAAgB,SAAS,SAAkC;CACzD,MAAM,EAAE,OAAO,KAAK,WAAW,eAAe;CAE9C,MAAM,QAAQ,UAAU;CAExB,MAAM,sBACJ,QACiB;EAGjB,MAAM,EAAE,QAAQ,QAFD,IAAI,OAAO;AAI1B,MAAI,OAAQ,QAAO,OAAO,IAAI;EAE9B,MAAM,cAAc,MAAM,QAAQ,UAAU,UAAU,MAAM,UAAU;AAEtE,MAAI,YAAa,QAAO,YAAY,IAAI;AAExC,SAAO,IAAI;;CAGb,MAAM,sBAAsB,QAA8C;EACxE,MAAM,SAAS,IAAI,OAAO;EAC1B,MAAM,EAAE,YAAY,QAAQ;AAE5B,MAAI,WAAY,QAAO,WAAW,IAAI;EAEtC,MAAM,cAAc,MAAM,QAAQ,UAAU,UAAU,MAAM,UAAU;AAEtE,MAAI,YAAa,QAAO,YAAY,IAAI;AAExC,SAAO,OAAO;;CAGhB,MAAM,yBAAyB,QAA0C;EACvE,MAAM,cAAc,MAAM,QAAQ,iBAAiB,MAAM;AAEzD,MAAI,YAAa,QAAO,YAAY,IAAI;AACxC,SAAO;;CAGT,MAAM,UAAU,IAAI,EAAE,OAAO;CAE7B,MAAM,sBAAsB,WAA+B;EACzD,MAAM,YAAsB,CAAC,QAAQ;AAErC,YAAU,SAAS,OAAO,eAAe,UAAU,KAAK,IAAI,GAAG,aAAa,CAAC;AAE7E,aAAW,SAAS,OAAO,gBAAgB,UAAU,KAAK,IAAI,GAAG,cAAc,CAAC;AAEhF,MAAI,OAAO,MACT,WAAU,KAAK,IAAI,GAAG,WAAW,OAAO,MAAM,CAAC;AAEjD,SAAO,UAAU,KAAK,IAAI;;CAG5B,MAAM,gBAAgB,WAA+B;AACnD,SAAO,mBAAmB,OAAO,GAAG,IAAI,IAAI,GAAG,OAAO,MAAM;;CAG9D,MAAM,sBAAsB,WAA+B;AACzD,SAAO,mBAAmB,OAAO,GAAG,IAAI,IAAI,GAAG,OAAO,YAAY;;CAGpE,MAAM,cACJ,KACA,WACqD;EACrD,MAAM,UAAU,IAAI;EACpB,MAAM,MAAM,OAAO,MAAM,EAAE,QAAQ,CAAC,IAAI,OAAO,IAAI,GAAG,KAAA;AAetD,SAbY;GACV;GACA;GACA;GACA;GACA,OAAO;IACL,YAAY;IACZ,wBAAwB,QAAa;AACnC,aAAQ,OAAO,OAAO;;IAEzB;GACF;;AAKH,QAAO;EAKL;EAKA;EAKA;EAKA;EAKA;EAMA;EACD"}
+{"version":3,"file":"use-table.js","names":[],"sources":["../../../src/components/table/use-table.ts"],"sourcesContent":["import { o } from '@cat-kit/core'\nimport { bem, type BEM } from '@veltra/utils'\nimport { useSlots, watch, type Ref } from 'vue'\n\nimport type {\n  TableColumnRenderContext,\n  TableColumnSlotsScope,\n  TableProps,\n  TableRow,\n  RenderReturn,\n  TableRowSlotsScope\n} from '../../types'\nimport type { ColumnNode } from './node/col'\n\ninterface Options {\n  props: TableProps\n  cls: BEM<'table'>\n  leftFixed: Ref<boolean>\n  rightFixed: Ref<boolean>\n}\n\ninterface UseTableReturn {\n  getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn\n  getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn\n  getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn\n  getCellClass: (column: ColumnNode) => string\n  getHeaderCellClass: (column: ColumnNode) => string\n  getCellCtx: (\n    row: TableRow,\n    column: ColumnNode\n  ) => TableColumnSlotsScope | TableColumnRenderContext\n}\n\nexport function useTable(options: Options): UseTableReturn {\n  const { props, cls, leftFixed, rightFixed } = options\n\n  const slots = useSlots()\n\n  const getColumnSlotsNode = (\n    ctx: TableColumnSlotsScope | TableColumnRenderContext\n  ): RenderReturn => {\n    const column = ctx.column.data\n\n    const { render, key } = column\n\n    if (render) return render(ctx)\n\n    const slotsRender = props.slots?.[`column:${key}`] ?? slots[`column:${key}`]\n\n    if (slotsRender) return slotsRender(ctx)\n\n    return ctx.val\n  }\n\n  const getHeaderSlotsNode = (ctx: { column: ColumnNode }): RenderReturn => {\n    const column = ctx.column.data\n    const { nameRender, key } = column\n\n    if (nameRender) return nameRender(ctx)\n\n    const slotsRender = props.slots?.[`header:${key}`] ?? slots[`header:${key}`]\n\n    if (slotsRender) return slotsRender(ctx)\n\n    return column.name\n  }\n\n  const getExpandRowSlotsNode = (ctx: TableRowSlotsScope): RenderReturn => {\n    const slotsRender = props.slots?.['row:expand'] ?? slots['row:expand']\n\n    if (slotsRender) return slotsRender(ctx)\n    return null\n  }\n\n  const cellCls = cls.e('cell')\n\n  const getCommonClassName = (column: ColumnNode): string => {\n    const classList: string[] = [cellCls]\n\n    leftFixed.value && column.isLastFixed && classList.push(bem.is('last-fixed'))\n\n    rightFixed.value && column.isFirstFixed && classList.push(bem.is('first-fixed'))\n\n    if (column.fixed) {\n      classList.push(bem.is('fixed-' + column.fixed))\n    }\n    return classList.join(' ')\n  }\n\n  /**\n   * B1: 单元格类名按 ColumnNode 身份缓存。\n   *\n   * 对同一列，类名只取决于 (column.fixed, column.isLastFixed, column.isFirstFixed,\n   * column.align, leftFixed, rightFixed)。其中前四个绑定在 ColumnNode 实例上，\n   * 后两个在 leftFixed/rightFixed 变化时失效缓存即可。用 WeakMap 以 ColumnNode\n   * 为键可避免字符串 key 的拼接/哈希开销，且列树重建时节点随 GC 自动释放。\n   */\n  let cellClassCache = new WeakMap<ColumnNode, string>()\n  let headerCellClassCache = new WeakMap<ColumnNode, string>()\n\n  watch([leftFixed, rightFixed], () => {\n    cellClassCache = new WeakMap()\n    headerCellClassCache = new WeakMap()\n  })\n\n  const getCellClass = (column: ColumnNode): string => {\n    const cached = cellClassCache.get(column)\n    if (cached !== undefined) return cached\n    const result = getCommonClassName(column) + ` ${bem.is(column.align)}`\n    cellClassCache.set(column, result)\n    return result\n  }\n\n  const getHeaderCellClass = (column: ColumnNode): string => {\n    const cached = headerCellClassCache.get(column)\n    if (cached !== undefined) return cached\n    const result = getCommonClassName(column) + ` ${bem.is(column.headerAlign)}`\n    headerCellClassCache.set(column, result)\n    return result\n  }\n\n  const getCellCtx = (\n    row: TableRow,\n    column: ColumnNode\n  ): TableColumnSlotsScope | TableColumnRenderContext => {\n    const rowData = row.data\n    const val = column.key ? o(rowData).get(column.key) : undefined\n\n    const ctx = {\n      row,\n      column,\n      rowData,\n      val,\n      model: {\n        modelValue: val,\n        'onUpdate:modelValue': (val: any) => {\n          rowData[column.key] = val\n        }\n      }\n    }\n\n    return ctx\n  }\n\n  return {\n    /**\n     * 获取列插槽VNode\n     * @param ctx 列渲染上下文\n     */\n    getColumnSlotsNode,\n    /**\n     * 获取表头插槽VNode\n     * @param ctx 表头渲染上下文\n     */\n    getHeaderSlotsNode,\n    /**\n     * 获取展开行插槽VNode\n     * @param ctx 展开行渲染上下文\n     */\n    getExpandRowSlotsNode,\n    /**\n     * 获取单元格类名\n     * @param column 列\n     */\n    getCellClass,\n    /**\n     * 获取表头单元格类名\n     * @param column 列\n     */\n    getHeaderCellClass,\n    /**\n     * 获取单元格上下文\n     * @param row 行\n     * @param column 列\n     */\n    getCellCtx\n  }\n}\n"],"mappings":";;;;AAiCA,SAAgB,SAAS,SAAkC;CACzD,MAAM,EAAE,OAAO,KAAK,WAAW,eAAe;CAE9C,MAAM,QAAQ,UAAU;CAExB,MAAM,sBACJ,QACiB;EAGjB,MAAM,EAAE,QAAQ,QAFD,IAAI,OAAO;AAI1B,MAAI,OAAQ,QAAO,OAAO,IAAI;EAE9B,MAAM,cAAc,MAAM,QAAQ,UAAU,UAAU,MAAM,UAAU;AAEtE,MAAI,YAAa,QAAO,YAAY,IAAI;AAExC,SAAO,IAAI;;CAGb,MAAM,sBAAsB,QAA8C;EACxE,MAAM,SAAS,IAAI,OAAO;EAC1B,MAAM,EAAE,YAAY,QAAQ;AAE5B,MAAI,WAAY,QAAO,WAAW,IAAI;EAEtC,MAAM,cAAc,MAAM,QAAQ,UAAU,UAAU,MAAM,UAAU;AAEtE,MAAI,YAAa,QAAO,YAAY,IAAI;AAExC,SAAO,OAAO;;CAGhB,MAAM,yBAAyB,QAA0C;EACvE,MAAM,cAAc,MAAM,QAAQ,iBAAiB,MAAM;AAEzD,MAAI,YAAa,QAAO,YAAY,IAAI;AACxC,SAAO;;CAGT,MAAM,UAAU,IAAI,EAAE,OAAO;CAE7B,MAAM,sBAAsB,WAA+B;EACzD,MAAM,YAAsB,CAAC,QAAQ;AAErC,YAAU,SAAS,OAAO,eAAe,UAAU,KAAK,IAAI,GAAG,aAAa,CAAC;AAE7E,aAAW,SAAS,OAAO,gBAAgB,UAAU,KAAK,IAAI,GAAG,cAAc,CAAC;AAEhF,MAAI,OAAO,MACT,WAAU,KAAK,IAAI,GAAG,WAAW,OAAO,MAAM,CAAC;AAEjD,SAAO,UAAU,KAAK,IAAI;;;;;;;;;;CAW5B,IAAI,iCAAiB,IAAI,SAA6B;CACtD,IAAI,uCAAuB,IAAI,SAA6B;AAE5D,OAAM,CAAC,WAAW,WAAW,QAAQ;AACnC,mCAAiB,IAAI,SAAS;AAC9B,yCAAuB,IAAI,SAAS;GACpC;CAEF,MAAM,gBAAgB,WAA+B;EACnD,MAAM,SAAS,eAAe,IAAI,OAAO;AACzC,MAAI,WAAW,KAAA,EAAW,QAAO;EACjC,MAAM,SAAS,mBAAmB,OAAO,GAAG,IAAI,IAAI,GAAG,OAAO,MAAM;AACpE,iBAAe,IAAI,QAAQ,OAAO;AAClC,SAAO;;CAGT,MAAM,sBAAsB,WAA+B;EACzD,MAAM,SAAS,qBAAqB,IAAI,OAAO;AAC/C,MAAI,WAAW,KAAA,EAAW,QAAO;EACjC,MAAM,SAAS,mBAAmB,OAAO,GAAG,IAAI,IAAI,GAAG,OAAO,YAAY;AAC1E,uBAAqB,IAAI,QAAQ,OAAO;AACxC,SAAO;;CAGT,MAAM,cACJ,KACA,WACqD;EACrD,MAAM,UAAU,IAAI;EACpB,MAAM,MAAM,OAAO,MAAM,EAAE,QAAQ,CAAC,IAAI,OAAO,IAAI,GAAG,KAAA;AAetD,SAbY;GACV;GACA;GACA;GACA;GACA,OAAO;IACL,YAAY;IACZ,wBAAwB,QAAa;AACnC,aAAQ,OAAO,OAAO;;IAEzB;GACF;;AAKH,QAAO;EAKL;EAKA;EAKA;EAKA;EAKA;EAMA;EACD"}

package/dist/components/table-editor/style.js

@@ -1 +1,3 @@
+import "../button/style.js";
+import "../table/style.js";
 import "./style2.css";

package/dist/components/tabs/index.d.ts

@@ -1 +1,3 @@
-import { _default } from "./tabs.vue.js";
+import { _default } from "./tabs.vue.js";
+import { _default as _default$1 } from "./tabs-horizontal.vue.js";
+import { _default as _default$2 } from "./tabs-vertical.vue.js";

package/dist/components/tabs/style.js

@@ -1,2 +1,4 @@
+import "../icon/style.js";
+import "../scroll/style.js";
 import "./style2.css";
 import "@veltra/directives/ripple/style.js";

package/dist/components/tabs/style2.css

@@ -15,152 +15,214 @@
 * --u-height-small: 24px;
 */
 /** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+/** shadcn 风格 TabsList：hover 背景底色容器 + 白底活动态；rounded=true 时水平为胶囊状。 */
+/* ===== 复合标签页：bar + content 布局容器 ===== */
 .u-tabs {
   display: flex;
-}
-.u-tabs__header {
-  flex-shrink: 0;
+  gap: var(--u-gap-small);
 }
 .u-tabs__content {
-  flex-grow: 1;
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 0;
+  border-radius: var(--u-radius-default);
 }
-.u-tabs__header-item {
-  cursor: pointer;
-  font-weight: 600;
-  letter-spacing: 1px;
-  color: var(--u-text-color-main);
-  user-select: none;
-  position: relative;
+.u-tabs--top {
+  flex-direction: column;
 }
-.u-tabs__header-item::after {
-  content: "";
-  position: absolute;
-  background-color: var(--u-color-primary);
-  transition-duration: 0.25s;
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+.u-tabs--bottom {
+  flex-direction: column-reverse;
 }
-.u-tabs__header-item {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: nowrap;
+.u-tabs--left {
+  flex-direction: row;
 }
-.u-tabs__header-item.is-disabled {
-  color: var(--u-text-color-disabled);
-  cursor: not-allowed;
+.u-tabs--left .u-tabs__content {
+  height: 100%;
 }
-.u-tabs__header-item.is-active {
-  color: var(--u-color-primary);
+.u-tabs--right {
+  flex-direction: row-reverse;
 }
-.u-tabs__close {
-  width: 0;
-  transition-property: width, margin-left;
-  transition-duration: 0.25s;
-  margin-left: 0;
+.u-tabs--right .u-tabs__content {
+  height: 100%;
 }
-.u-tabs__close-placeholder {
-  height: 1em;
-  width: 1em;
-  margin-left: var(--u-gap-small);
+
+/* ===== 标签栏（独立组件）：水平 / 垂直 ===== */
+.u-tabs-bar {
+  display: inline-flex;
+  align-self: flex-start;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0 4px;
+  background-color: var(--u-bg-color-hover);
+  border-radius: var(--u-radius-default);
+  gap: 2px;
 }
-.u-tabs--top .u-tabs__header, .u-tabs--bottom .u-tabs__header {
-  display: flex;
-  justify-content: flex-start;
+.u-tabs-bar--horizontal {
   align-items: center;
-  flex-wrap: nowrap;
-}
-.u-tabs--top .u-tabs__header-item::after, .u-tabs--bottom .u-tabs__header-item::after {
-  bottom: 0;
-  left: 0;
-  height: 2px;
-  width: 100%;
-  transform: scaleX(0);
-}
-.u-tabs--top .u-tabs__header-item.is-active::after, .u-tabs--bottom .u-tabs__header-item.is-active::after {
-  transform: scaleX(1);
+  position: relative;
+  flex-shrink: 0;
 }
-.u-tabs--top {
+.u-tabs-bar--vertical {
   flex-direction: column;
 }
-.u-tabs--top .u-tabs__header {
-  border-bottom: var(--u-border);
+.u-tabs-bar__viewport {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 4px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
 }
-.u-tabs--bottom {
-  flex-direction: column-reverse;
+.u-tabs-bar__viewport::-webkit-scrollbar {
+  display: none;
+}
+.u-tabs-bar__list {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  width: max-content;
+  margin: 0;
+  padding: 0;
+  gap: 2px;
 }
-.u-tabs--bottom .u-tabs__header {
-  border-top: var(--u-border);
+.u-tabs-bar__item {
+  cursor: pointer;
+  font-weight: 500;
+  letter-spacing: 0.25px;
+  color: var(--u-text-color-main);
+  user-select: none;
+  position: relative;
+  border-radius: calc(var(--u-radius-default) - 2px);
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
 }
-.u-tabs--bottom .u-tabs__header-item {
-  border-radius: 0 0 var(--u-radius-large) var(--u-radius-large);
+.u-tabs-bar__item:not(.is-active):not(.is-disabled):hover {
+  color: var(--u-text-color-title);
 }
-.u-tabs--left .u-tabs__content, .u-tabs--right .u-tabs__content {
-  height: 100%;
+.u-tabs-bar__item.is-disabled {
+  color: var(--u-text-color-disabled);
+  cursor: not-allowed;
 }
-.u-tabs--left .u-tabs__header-item::after, .u-tabs--right .u-tabs__header-item::after {
-  top: 0;
-  width: 2px;
-  height: 100%;
-  transform: scaleY(0);
+.u-tabs-bar__item.is-active {
+  color: var(--u-text-color-title);
+  background-color: var(--u-bg-color-top);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
 }
-.u-tabs--left .u-tabs__header-item.is-active::after, .u-tabs--right .u-tabs__header-item.is-active::after {
-  transform: scaleY(1);
+.u-tabs-bar__item-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
 }
-.u-tabs--left .u-tabs__header {
-  border-right: var(--u-border);
+.u-tabs-bar__close {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 6px;
+  overflow: hidden;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--u-text-color-secondary);
+  cursor: pointer;
+  border-radius: var(--u-radius-default);
+  font-size: 12px;
+  line-height: 1;
+  transition: width 0.18s ease, margin-left 0.18s ease, opacity 0.18s ease, transform 0.18s ease, color 0.15s ease, background-color 0.15s ease;
 }
-.u-tabs--left .u-tabs__header-item {
-  border-radius: var(--u-radius-large) 0 0 var(--u-radius-large);
-  justify-content: flex-end;
+.u-tabs-bar__close:hover {
+  color: var(--u-text-color-title);
+  background-color: rgba(15, 23, 42, 0.08);
 }
-.u-tabs--left .u-tabs__header-item::after {
-  right: 0;
+.u-tabs-bar__close:active {
+  background-color: rgba(15, 23, 42, 0.14);
 }
-.u-tabs--right {
-  flex-direction: row-reverse;
+.u-tabs-bar--horizontal .u-tabs-bar__item .u-tabs-bar__close {
+  width: 0;
+  margin-left: 0;
+  opacity: 0;
+  transform: scale(0.6);
+  pointer-events: none;
+}
+.u-tabs-bar--horizontal .u-tabs-bar__item:hover .u-tabs-bar__close {
+  width: 16px;
+  margin-left: 6px;
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+.u-tabs-bar--vertical .u-tabs-bar__item {
+  justify-content: space-between;
+}
+.u-tabs-bar__nav {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--u-text-color-main);
+  cursor: pointer;
+  user-select: none;
+  border-radius: calc(var(--u-radius-default) - 2px);
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
 }
-.u-tabs--right .u-tabs__header {
-  border-left: var(--u-border);
+.u-tabs-bar__nav:hover:not(:disabled) {
+  color: var(--u-text-color-title);
+  background-color: var(--u-bg-color-top);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
 }
-.u-tabs--right .u-tabs__header-item {
-  border-radius: 0 var(--u-radius-large) var(--u-radius-large) 0;
+.u-tabs-bar__nav:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
 }
-.u-tabs--right .u-tabs__header-item::after {
-  left: 0;
+.u-tabs-bar.is-block {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  align-self: stretch;
 }
-.u-tabs--small .u-tabs__header-item {
-  height: var(--u-form-component-height-small);
+.u-tabs-bar--small .u-tabs-bar__item {
+  height: calc(var(--u-form-component-height-small) - 4px);
   padding: 0 var(--u-gap-small);
 }
-.u-tabs--small .u-tabs__header-item:hover .u-tabs__close {
-  width: var(--u-font-size-main-small);
-  margin-left: var(--u-gap-small);
+.u-tabs-bar--small .u-tabs-bar__nav {
+  width: calc(var(--u-form-component-height-small) - 4px);
+  height: calc(var(--u-form-component-height-small) - 4px);
 }
-.u-tabs--default .u-tabs__header-item {
-  height: var(--u-form-component-height-default);
+.u-tabs-bar--default .u-tabs-bar__item {
+  height: calc(var(--u-form-component-height-default) - 4px);
   padding: 0 var(--u-gap-default);
 }
-.u-tabs--default .u-tabs__header-item:hover .u-tabs__close {
-  width: var(--u-font-size-main-default);
-  margin-left: var(--u-gap-small);
+.u-tabs-bar--default .u-tabs-bar__nav {
+  width: calc(var(--u-form-component-height-default) - 4px);
+  height: calc(var(--u-form-component-height-default) - 4px);
 }
-.u-tabs--large .u-tabs__header-item {
-  height: var(--u-form-component-height-large);
+.u-tabs-bar--large .u-tabs-bar__item {
+  height: calc(var(--u-form-component-height-large) - 4px);
   padding: 0 var(--u-gap-large);
 }
-.u-tabs--large .u-tabs__header-item:hover .u-tabs__close {
-  width: var(--u-font-size-main-large);
-  margin-left: var(--u-gap-small);
+.u-tabs-bar--large .u-tabs-bar__nav {
+  width: calc(var(--u-form-component-height-large) - 4px);
+  height: calc(var(--u-form-component-height-large) - 4px);
 }
-.u-tabs--left .u-tabs__close, .u-tabs--right .u-tabs__close {
-  width: auto;
+.u-tabs-bar.is-rounded .u-tabs-bar__item {
+  border-radius: 9999px;
 }
-.u-tabs__content {
-  width: 100%;
-  border-radius: var(--u-radius-default);
+.u-tabs-bar.is-rounded .u-tabs-bar__nav {
+  border-radius: 9999px;
 }
-.u-tabs__ripple {
-  background-color: var(--u-color-primary);
-  opacity: 0.1;
+.u-tabs-bar--horizontal.is-rounded {
+  border-radius: 9999px;
 }