@veltra/desktop 1.0.0

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

@@ -0,0 +1,171 @@
+import { TableRowNode } from "./node/row.js";
+import { shallowRef, watch } from "vue";
+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 rows = shallowRef([]);
+	/** 数据行， 不包括展开和折叠的行 */
+	const dataRows = shallowRef([]);
+	/** 行森林（数据结构树） */
+	const rowForest = shallowRef();
+	/** 树形节点是否全部展开 */
+	const allExpanded = shallowRef(props.defaultExpandAll ?? false);
+	/** 当前高亮的行 */
+	const currentRow = useModel$1({
+		props,
+		emit,
+		propName: "current",
+		shallow: true,
+		local: () => !!props.highlightCurrent
+	});
+	/**
+	* 用于优化增删改时的性能。
+	* 原理：Vue 的组件在属性发生改变时会重新渲染，通过 WeakMap 缓存 data -> TableRow 的映射，
+	* 可以在数据更新时复用已有的 TableRowNode 实例，避免重复创建和 DOM 抖动。
+	*/
+	let rowDicts = /* @__PURE__ */ new WeakMap();
+	let tempRowDicts = null;
+	let uidSeed = 0;
+	/** 获取行唯一标识 */
+	const getRowUID = props.rowKey ? (rowData) => rowData && o(rowData).get(props.rowKey) : () => uidSeed++;
+	/** 创建或复用 TableRow 实例 */
+	const createRow = (data, index, depth = 0, parent) => {
+		const existRow = data ? rowDicts.get(data) : void 0;
+		if (existRow) {
+			existRow.index = index;
+			existRow.depth = depth;
+			existRow.parent = parent;
+			return existRow;
+		}
+		return new TableRowNode({
+			data,
+			index,
+			depth,
+			parent,
+			uid: getRowUID(data)
+		});
+	};
+	/** 处理常规扁平列表 */
+	function getDataRows(data) {
+		let i = data.length;
+		const result = Array.from({ length: i });
+		tempRowDicts = /* @__PURE__ */ new WeakMap();
+		while (i--) {
+			const dataItem = data[i];
+			const row = createRow(dataItem, i);
+			result[i] = row;
+			tempRowDicts.set(dataItem, row);
+		}
+		rowDicts = tempRowDicts;
+		tempRowDicts = null;
+		return result;
+	}
+	function expandDataRows() {
+		const result = [];
+		let i = -1;
+		while (++i < dataRows.value.length) {
+			const row = dataRows.value[i];
+			result.push(row);
+			if (row.expanded) result.push(row.copy());
+		}
+		rows.value = result;
+	}
+	/** 处理树形森林结构 */
+	function getRowForest(data) {
+		tempRowDicts = /* @__PURE__ */ new WeakMap();
+		const ret = new Forest({
+			data,
+			childrenKey: typeof props.tree === "string" ? props.tree : "children",
+			createNode(val, index, depth, _forest, parent) {
+				const row = createRow(val, index, depth, parent);
+				if (props.defaultExpandAll) row.expanded = true;
+				val && tempRowDicts.set(val, row);
+				return row;
+			}
+		});
+		rowDicts = tempRowDicts;
+		tempRowDicts = null;
+		return ret;
+	}
+	/** 展平树形结构为可见行列表 */
+	function updateFlattedRows() {
+		if (!rowForest.value) return;
+		rows.value = rowForest.value.flattenVisible((n) => n.expanded);
+	}
+	watch(() => currentRow.value, (row, oldRow) => {
+		if (oldRow) oldRow.isCurrent = false;
+		if (row) row.isCurrent = true;
+	});
+	watch(rows, (rows) => emit("update:rows", rows));
+	watch(rowForest, (forest) => emit("update:forest", forest));
+	watch([
+		() => props.data,
+		() => props.tree,
+		() => props.defaultExpandAll
+	], ([data, tree]) => {
+		if (!data?.length) {
+			rows.value = [];
+			rowDicts = /* @__PURE__ */ new WeakMap();
+			rowForest.value = void 0;
+			return;
+		}
+		if (!tree) {
+			rowForest.value = void 0;
+			dataRows.value = getDataRows(data);
+			rows.value = dataRows.value;
+		} else {
+			dataRows.value = [];
+			rowForest.value = getRowForest(data);
+			updateFlattedRows();
+		}
+	}, { immediate: true });
+	function toggleTreeRowExpand(node) {
+		node.expanded = !node.expanded;
+		if (props.tree) return updateFlattedRows();
+		if (props.expandable) expandDataRows();
+	}
+	function toggleAllTreeRowExpand() {
+		allExpanded.value = !allExpanded.value;
+		if (props.tree) {
+			rowForest.value?.dfs((node) => {
+				node.expanded = allExpanded.value;
+			});
+			updateFlattedRows();
+			return;
+		}
+		if (props.expandable) {
+			dataRows.value.forEach((row) => {
+				row.expanded = allExpanded.value;
+			});
+			expandDataRows();
+			return;
+		}
+	}
+	function handleRowClick(row, e) {
+		currentRow.value = currentRow.value === row ? void 0 : row;
+		emit("row-click", row, e);
+	}
+	function handleCellClick(row, column, e) {
+		emit("cell-click", row, column, e);
+	}
+	function getRowByData(data) {
+		return rowDicts.get(data);
+	}
+	return {
+		rowForest,
+		rows,
+		allExpanded,
+		toggleTreeRowExpand,
+		toggleAllTreeRowExpand,
+		handleRowClick,
+		handleCellClick,
+		getRowByData
+	};
+}
+//#endregion
+export { useRows };
+
+//# sourceMappingURL=use-rows.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,70 @@
+import { useSlots } from "vue";
+import { o } from "@cat-kit/core";
+import { bem } from "@veltra/utils";
+//#region src/components/table/use-table.ts
+function useTable(options) {
+	const { props, cls, leftFixed, rightFixed } = options;
+	const slots = useSlots();
+	const getColumnSlotsNode = (ctx) => {
+		const { render, key } = ctx.column.data;
+		if (render) return render(ctx);
+		const slotsRender = props.slots?.[`column:${key}`] ?? slots[`column:${key}`];
+		if (slotsRender) return slotsRender(ctx);
+		return ctx.val;
+	};
+	const getHeaderSlotsNode = (ctx) => {
+		const column = ctx.column.data;
+		const { nameRender, key } = column;
+		if (nameRender) return nameRender(ctx);
+		const slotsRender = props.slots?.[`header:${key}`] ?? slots[`header:${key}`];
+		if (slotsRender) return slotsRender(ctx);
+		return column.name;
+	};
+	const getExpandRowSlotsNode = (ctx) => {
+		const slotsRender = props.slots?.["row:expand"] ?? slots["row:expand"];
+		if (slotsRender) return slotsRender(ctx);
+		return null;
+	};
+	const cellCls = cls.e("cell");
+	const getCommonClassName = (column) => {
+		const classList = [cellCls];
+		leftFixed.value && column.isLastFixed && classList.push(bem.is("last-fixed"));
+		rightFixed.value && column.isFirstFixed && classList.push(bem.is("first-fixed"));
+		if (column.fixed) classList.push(bem.is("fixed-" + column.fixed));
+		return classList.join(" ");
+	};
+	const getCellClass = (column) => {
+		return getCommonClassName(column) + ` ${bem.is(column.align)}`;
+	};
+	const getHeaderCellClass = (column) => {
+		return getCommonClassName(column) + ` ${bem.is(column.headerAlign)}`;
+	};
+	const getCellCtx = (row, column) => {
+		const rowData = row.data;
+		const val = column.key ? o(rowData).get(column.key) : void 0;
+		return {
+			row,
+			column,
+			rowData,
+			val,
+			model: {
+				modelValue: val,
+				"onUpdate:modelValue": (val) => {
+					rowData[column.key] = val;
+				}
+			}
+		};
+	};
+	return {
+		getColumnSlotsNode,
+		getHeaderSlotsNode,
+		getExpandRowSlotsNode,
+		getCellClass,
+		getHeaderCellClass,
+		getCellCtx
+	};
+}
+//#endregion
+export { useTable };
+
+//# sourceMappingURL=use-table.js.map

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

@@ -0,0 +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"}

package/dist/components/table-editor/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./table-editor.vue.js";

package/dist/components/table-editor/style.d.ts

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/components/table-editor/style2.css

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-table-editor .u-table__body .u-table__cell {
+  padding: 2px;
+}
+.u-table-editor .u-table__body .u-table__cell [class^=u-input] {
+  box-shadow: none;
+}
+.u-table-editor .u-table__body .u-table__cell > [class^=u-] {
+  box-shadow: none;
+}

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

@@ -0,0 +1,138 @@
+import _sfc_main$1 from "../button/button.js";
+import _sfc_main$2 from "../table/table.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, unref, withCtx } from "vue";
+import { bem } from "@veltra/utils";
+import { useComponentProps } from "@veltra/compositions";
+import { Copy, Minus, Plus } from "@veltra/icons/normal";
+//#region src/components/table-editor/table-editor.vue
+const _hoisted_1 = { style: {
+	"text-align": "center",
+	"padding": "4px 0"
+} };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "TableEditor",
+	__name: "table-editor",
+	props: {
+		modelValue: { default: () => [] },
+		size: {},
+		columns: { default: () => [] },
+		checked: {},
+		selected: {},
+		checkable: { type: Boolean },
+		showIndex: { type: Boolean },
+		selectable: { type: Boolean },
+		tree: { type: [Boolean, String] },
+		slots: {},
+		mergeCell: { type: Function },
+		current: {},
+		highlightCurrent: { type: Boolean },
+		rowKey: {},
+		stripe: { type: Boolean },
+		border: { type: Boolean },
+		virtualThreshold: {},
+		expandable: { type: Boolean },
+		virtual: { type: Boolean },
+		defaultExpandAll: { type: Boolean },
+		textEllipsis: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const cls = bem("table-editor");
+		const ButtonCommonProps = useComponentProps({
+			size: "small",
+			circle: true,
+			text: true,
+			type: "primary"
+		});
+		const actionColumn = {
+			key: "__operation",
+			name: "操作",
+			width: 120,
+			align: "center",
+			fixed: "right",
+			resizable: false
+		};
+		const internalColumns = computed(() => {
+			return [...__props.columns, actionColumn];
+		});
+		function handleCreate(index) {
+			if (index !== void 0) emit("update:modelValue", [
+				...__props.modelValue.slice(0, index + 1),
+				{},
+				...__props.modelValue.slice(index + 1)
+			]);
+			else emit("update:modelValue", [...__props.modelValue, {}]);
+		}
+		function handleCopy(row) {
+			emit("update:modelValue", [
+				...__props.modelValue.slice(0, row.index + 1),
+				JSON.parse(JSON.stringify(row.data)),
+				...__props.modelValue.slice(row.index + 1)
+			]);
+		}
+		function handleDelete(index) {
+			emit("update:modelValue", __props.modelValue.filter((_, i) => i !== index));
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(_sfc_main$2), {
+				columns: internalColumns.value,
+				data: __props.modelValue || [],
+				class: normalizeClass(unref(cls).b),
+				stripe: false,
+				"show-index": "",
+				slots: _ctx.$slots
+			}, {
+				"column:__operation": withCtx(({ row }) => [createVNode(unref(ButtonCommonProps), {
+					tag: "div",
+					style: {
+						"display": "flex",
+						"justify-content": "center",
+						"gap": "8px"
+					}
+				}, {
+					default: withCtx(() => [
+						createVNode(unref(_sfc_main$1), {
+							type: "danger",
+							onClick: ($event) => handleDelete(row.index),
+							icon: unref(Minus),
+							title: "移除"
+						}, null, 8, ["onClick", "icon"]),
+						createVNode(unref(_sfc_main$1), {
+							icon: unref(Plus),
+							onClick: ($event) => handleCreate(row.index),
+							title: "新增到下一行"
+						}, null, 8, ["icon", "onClick"]),
+						createVNode(unref(_sfc_main$1), {
+							icon: unref(Copy),
+							onClick: ($event) => handleCopy(row),
+							title: "复制到下一行"
+						}, null, 8, ["icon", "onClick"])
+					]),
+					_: 2
+				}, 1024)]),
+				empty: withCtx(() => [createElementVNode("div", _hoisted_1, [!__props.modelValue.length ? (openBlock(), createBlock(unref(_sfc_main$1), {
+					key: 0,
+					text: "",
+					size: "small",
+					type: "primary",
+					icon: unref(Plus),
+					onClick: _cache[0] || (_cache[0] = ($event) => handleCreate())
+				}, {
+					default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("添加", -1)])]),
+					_: 1
+				}, 8, ["icon"])) : createCommentVNode("v-if", true)])]),
+				_: 1
+			}, 8, [
+				"columns",
+				"data",
+				"class",
+				"slots"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=table-editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-editor.js","names":["$slots"],"sources":["../../../src/components/table-editor/table-editor.vue"],"sourcesContent":["<template>\n  <u-table\n    :columns=\"internalColumns\"\n    :data=\"modelValue || []\"\n    :class=\"cls.b\"\n    :stripe=\"false\"\n    show-index\n    :slots=\"$slots\"\n  >\n    <template #column:__operation=\"{ row }\">\n      <ButtonCommonProps tag=\"div\" style=\"display: flex; justify-content: center; gap: 8px\">\n        <u-button type=\"danger\" @click=\"handleDelete(row.index)\" :icon=\"Minus\" title=\"移除\" />\n        <u-button :icon=\"Plus\" @click=\"handleCreate(row.index)\" title=\"新增到下一行\" />\n        <u-button :icon=\"Copy\" @click=\"handleCopy(row)\" title=\"复制到下一行\" />\n      </ButtonCommonProps>\n    </template>\n\n    <!-- <template #header:__operation> </template> -->\n\n    <template #empty>\n      <div style=\"text-align: center; padding: 4px 0\">\n        <u-button\n          text\n          size=\"small\"\n          type=\"primary\"\n          v-if=\"!modelValue.length\"\n          :icon=\"Plus\"\n          @click=\"handleCreate()\"\n          >添加</u-button\n        >\n      </div>\n    </template>\n  </u-table>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useComponentProps } from '@veltra/compositions'\nimport { Copy, Minus, Plus } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { TableEditorProps, TableEditorEmits, TableColumn } from '../../types'\nimport { UButton } from '../button'\nimport { UTable } from '../table'\nimport type { TableRowNode } from '../table/node/row'\n\ndefineOptions({\n  name: 'TableEditor'\n})\n\nconst { columns = [], modelValue = [] } = defineProps<TableEditorProps>()\nconst emit = defineEmits<TableEditorEmits>()\n\nconst cls = bem('table-editor')\n\nconst ButtonCommonProps = useComponentProps({\n  size: 'small',\n  circle: true,\n  text: true,\n  type: 'primary'\n})\n\nconst actionColumn: TableColumn = {\n  key: '__operation',\n  name: '操作', // 使用name而不是title\n  width: 120,\n  align: 'center',\n  fixed: 'right',\n  resizable: false\n}\n\n// 内部列定义，添加编辑和删除操作列\nconst internalColumns = computed(() => {\n  return [...columns, actionColumn]\n})\n\nfunction handleCreate(index?: number) {\n  if (index !== undefined) {\n    emit('update:modelValue', [\n      ...modelValue.slice(0, index + 1),\n      {},\n      ...modelValue.slice(index + 1)\n    ])\n  } else {\n    emit('update:modelValue', [...modelValue, {}])\n  }\n}\n\nfunction handleCopy(row: TableRowNode) {\n  emit('update:modelValue', [\n    ...modelValue.slice(0, row.index + 1),\n    JSON.parse(JSON.stringify(row.data)),\n    ...modelValue.slice(row.index + 1)\n  ])\n}\n\nfunction handleDelete(index: number) {\n  emit(\n    'update:modelValue',\n    modelValue.filter((_, i) => i !== index)\n  )\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDA,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,eAAc;EAE9B,MAAM,oBAAoB,kBAAkB;GAC1C,MAAM;GACN,QAAQ;GACR,MAAM;GACN,MAAM;GACP,CAAA;EAED,MAAM,eAA4B;GAChC,KAAK;GACL,MAAM;GACN,OAAO;GACP,OAAO;GACP,OAAO;GACP,WAAW;GACb;EAGA,MAAM,kBAAkB,eAAe;AACrC,UAAO,CAAC,GAAG,QAAA,SAAS,aAAY;IACjC;EAED,SAAS,aAAa,OAAgB;AACpC,OAAI,UAAU,KAAA,EACZ,MAAK,qBAAqB;IACxB,GAAG,QAAA,WAAW,MAAM,GAAG,QAAQ,EAAE;IACjC,EAAE;IACF,GAAG,QAAA,WAAW,MAAM,QAAQ,EAAC;IAC9B,CAAA;OAED,MAAK,qBAAqB,CAAC,GAAG,QAAA,YAAY,EAAE,CAAC,CAAA;;EAIjD,SAAS,WAAW,KAAmB;AACrC,QAAK,qBAAqB;IACxB,GAAG,QAAA,WAAW,MAAM,GAAG,IAAI,QAAQ,EAAE;IACrC,KAAK,MAAM,KAAK,UAAU,IAAI,KAAK,CAAC;IACpC,GAAG,QAAA,WAAW,MAAM,IAAI,QAAQ,EAAC;IAClC,CAAA;;EAGH,SAAS,aAAa,OAAe;AACnC,QACE,qBACA,QAAA,WAAW,QAAQ,GAAG,MAAM,MAAM,MAAK,CACzC;;;uBAnGA,YA+BU,MAAA,YAAA,EAAA;IA9BP,SAAS,gBAAA;IACT,MAAM,QAAA,cAAU,EAAA;IAChB,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC;IACZ,QAAQ;IACT,cAAA;IACC,OAAOA,KAAAA;;IAEG,sBAAkB,SAKP,EALW,UAAG,CAClC,YAIoB,MAAA,kBAAA,EAAA;KAJD,KAAI;KAAM,OAAA;MAAA,WAAA;MAAA,mBAAA;MAAA,OAAA;MAAwD;;4BACC;MAApF,YAAoF,MAAA,YAAA,EAAA;OAA1E,MAAK;OAAU,UAAK,WAAE,aAAa,IAAI,MAAK;OAAI,MAAM,MAAA,MAAK;OAAE,OAAM;;MAC7E,YAAyE,MAAA,YAAA,EAAA;OAA9D,MAAM,MAAA,KAAI;OAAG,UAAK,WAAE,aAAa,IAAI,MAAK;OAAG,OAAM;;MAC9D,YAAiE,MAAA,YAAA,EAAA;OAAtD,MAAM,MAAA,KAAI;OAAG,UAAK,WAAE,WAAW,IAAG;OAAG,OAAM;;;;;IAM/C,OAAK,cAWR,CAVN,mBAUM,OAVN,YAUM,CAAA,CALK,QAAA,WAAW,UAAA,WAAA,EAJpB,YAQC,MAAA,YAAA,EAAA;;KAPC,MAAA;KACA,MAAK;KACL,MAAK;KAEJ,MAAM,MAAA,KAAI;KACV,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,cAAY;;4BACjB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAF,MAAE,GAAA,CAAA,EAAA,CAAA"}

package/dist/components/table-editor/table-editor.vue.d.ts

@@ -0,0 +1,13 @@
+import { TableEditorProps } from "../../types/table-editor.js";
+import * as _$vue from "vue";
+
+//#region src/components/table-editor/table-editor.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<TableEditorProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
+  "update:modelValue": (value: any[]) => any;
+}, string, _$vue.PublicProps, Readonly<TableEditorProps> & Readonly<{
+  "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };
+//# sourceMappingURL=table-editor.vue.d.ts.map

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

@@ -0,0 +1 @@
+import { _default } from "./tabs.vue.js";

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

@@ -0,0 +1 @@
+export { };

package/dist/components/tabs/style.js

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

package/dist/components/tabs/style2.css

@@ -0,0 +1,166 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-tabs {
+  display: flex;
+}
+.u-tabs__header {
+  flex-shrink: 0;
+}
+.u-tabs__content {
+  flex-grow: 1;
+}
+.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__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__header-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-tabs__header-item.is-disabled {
+  color: var(--u-text-color-disabled);
+  cursor: not-allowed;
+}
+.u-tabs__header-item.is-active {
+  color: var(--u-color-primary);
+}
+.u-tabs__close {
+  width: 0;
+  transition-property: width, margin-left;
+  transition-duration: 0.25s;
+  margin-left: 0;
+}
+.u-tabs__close-placeholder {
+  height: 1em;
+  width: 1em;
+  margin-left: var(--u-gap-small);
+}
+.u-tabs--top .u-tabs__header, .u-tabs--bottom .u-tabs__header {
+  display: flex;
+  justify-content: flex-start;
+  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);
+}
+.u-tabs--top {
+  flex-direction: column;
+}
+.u-tabs--top .u-tabs__header {
+  border-bottom: var(--u-border);
+}
+.u-tabs--bottom {
+  flex-direction: column-reverse;
+}
+.u-tabs--bottom .u-tabs__header {
+  border-top: var(--u-border);
+}
+.u-tabs--bottom .u-tabs__header-item {
+  border-radius: 0 0 var(--u-radius-large) var(--u-radius-large);
+}
+.u-tabs--left .u-tabs__content, .u-tabs--right .u-tabs__content {
+  height: 100%;
+}
+.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--left .u-tabs__header-item.is-active::after, .u-tabs--right .u-tabs__header-item.is-active::after {
+  transform: scaleY(1);
+}
+.u-tabs--left .u-tabs__header {
+  border-right: var(--u-border);
+}
+.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--left .u-tabs__header-item::after {
+  right: 0;
+}
+.u-tabs--right {
+  flex-direction: row-reverse;
+}
+.u-tabs--right .u-tabs__header {
+  border-left: var(--u-border);
+}
+.u-tabs--right .u-tabs__header-item {
+  border-radius: 0 var(--u-radius-large) var(--u-radius-large) 0;
+}
+.u-tabs--right .u-tabs__header-item::after {
+  left: 0;
+}
+.u-tabs--small .u-tabs__header-item {
+  height: var(--u-form-component-height-small);
+  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--default .u-tabs__header-item {
+  height: var(--u-form-component-height-default);
+  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--large .u-tabs__header-item {
+  height: var(--u-form-component-height-large);
+  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--left .u-tabs__close, .u-tabs--right .u-tabs__close {
+  width: auto;
+}
+.u-tabs__content {
+  width: 100%;
+  border-radius: var(--u-radius-default);
+}
+.u-tabs__ripple {
+  background-color: var(--u-color-primary);
+  opacity: 0.1;
+}