@veltra/desktop 1.0.0

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

@@ -0,0 +1,234 @@
+import _sfc_main from "../checkbox/checkbox.js";
+import { computed, createTextVNode, createVNode, nextTick, shallowRef, toRaw, triggerRef, watch } from "vue";
+import { dfs, o } from "@cat-kit/core";
+//#region src/components/table/use-check.ts
+function useCheck(options) {
+	const { rows, rowForest, props, emit, size, cls } = options;
+	const checkedRows = shallowRef(/* @__PURE__ */ new Set());
+	const selectedRow = shallowRef();
+	/** 触发checkedRows的更新 */
+	function triggerCheckedRows() {
+		triggerRef(checkedRows);
+	}
+	function clearChecked() {
+		checkedRows.value.forEach((row) => {
+			row.checked = false;
+		});
+		checkedRows.value.clear();
+		triggerCheckedRows();
+	}
+	function clearSelected() {
+		if (selectedRow.value) {
+			selectedRow.value.checked = false;
+			selectedRow.value = void 0;
+		}
+	}
+	watch([
+		() => props.checkable,
+		() => props.selectable,
+		() => rows.value
+	], () => {
+		clearChecked();
+		clearSelected();
+	});
+	watch(selectedRow, (selectedRow) => {
+		if (changedByModel) return;
+		changedByEvent = true;
+		emit("update:selected", selectedRow?.data ? toRaw(selectedRow.data) : void 0);
+		nextTick(() => {
+			changedByEvent = false;
+		});
+	});
+	let changedByEvent = false;
+	let changedByModel = false;
+	watch(checkedRows, (checkedRows) => {
+		if (changedByModel) return;
+		changedByEvent = true;
+		emit("update:checked", Array.from(checkedRows).map((row) => toRaw(row.data)));
+		nextTick(() => {
+			changedByEvent = false;
+		});
+	});
+	let dicts = void 0;
+	function setDicts() {
+		if (dicts || !rows.value || !props.rowKey) return;
+		let mapEntries = [];
+		let i = 0;
+		while (i < rows.value.length) {
+			const row = rows.value[i];
+			mapEntries.push([row.uid, row]);
+			i++;
+		}
+		dicts = new Map(mapEntries);
+	}
+	watch(rows, () => {
+		dicts = void 0;
+	});
+	watch([
+		() => props.checked,
+		() => props.rowKey,
+		() => props.checkable,
+		rows
+	], ([checked, rowKey, checkable, rows], [_, __, ___, oRows]) => {
+		if (changedByEvent || !checkable || !rowKey) return;
+		changedByModel = true;
+		rows !== oRows && setDicts();
+		clearChecked();
+		checked?.forEach((item) => {
+			const uid = o(item).get(rowKey);
+			if (uid === void 0 || uid === null) return;
+			const row = dicts?.get(uid);
+			if (!row) return;
+			row.checked = true;
+			checkedRows.value.add(row);
+		});
+		triggerCheckedRows();
+		nextTick(() => {
+			changedByModel = false;
+		});
+	}, { immediate: true });
+	watch([
+		() => props.selected,
+		() => props.rowKey,
+		() => props.selectable,
+		rows
+	], ([selected, rowKey, selectable, rows], [_, __, ___, oRows]) => {
+		if (changedByEvent || !selectable || !rowKey) return;
+		changedByModel = true;
+		rows !== oRows && setDicts();
+		if (selected) {
+			const uid = o(selected).get(rowKey);
+			const row = uid === void 0 || uid === null ? void 0 : dicts?.get(uid);
+			if (row) {
+				row.checked = true;
+				selectedRow.value = row;
+			}
+		} else clearSelected();
+		nextTick(() => {
+			changedByModel = false;
+		});
+	}, { immediate: true });
+	const allChecked = computed(() => {
+		const rowSize = props.tree ? rowForest.value?.size : rows.value?.length;
+		return !!rowSize && rowSize === checkedRows.value.size;
+	});
+	function handleCheckAllTree(check) {
+		if (check) rowForest.value?.dfs((row) => {
+			row.checked = true;
+			checkedRows.value.add(row);
+		});
+		else {
+			rowForest.value?.dfs((row) => {
+				row.checked = false;
+			});
+			checkedRows.value.clear();
+		}
+		triggerCheckedRows();
+	}
+	function handleCheckAllRows(check) {
+		if (check) rows.value?.forEach((row) => {
+			row.checked = true;
+			checkedRows.value.add(row);
+		});
+		else {
+			rows.value?.forEach((row) => {
+				row.checked = false;
+			});
+			checkedRows.value.clear();
+		}
+		triggerCheckedRows();
+	}
+	function handleCheckAll(check) {
+		if (props.tree) handleCheckAllTree(check);
+		else handleCheckAllRows(check);
+	}
+	function handleCheckRow(row, check) {
+		const cb = check ? (row) => checkedRows.value.add(row) : (row) => checkedRows.value.delete(row);
+		dfs(row, (node) => {
+			const r = node;
+			r.checked = check;
+			cb(r);
+		}, typeof props.tree === "string" ? props.tree : "children");
+		triggerCheckedRows();
+	}
+	const getCheckboxColumnWidth = () => {
+		return size.value === "large" ? 80 : 60;
+	};
+	const checkboxClass = cls.e("checkbox");
+	const checkboxClick = (e) => e.stopPropagation();
+	function createCheckColumn() {
+		const width = getCheckboxColumnWidth();
+		return {
+			key: "__is_check_column__",
+			name: "",
+			width,
+			minWidth: width,
+			align: "center",
+			fixed: "left",
+			resizable: false,
+			nameRender() {
+				const checkboxNode = createVNode(_sfc_main, {
+					modelValue: allChecked.value,
+					"onUpdate:modelValue": handleCheckAll
+				});
+				if (!props.tree) return checkboxNode;
+				return [checkboxNode];
+			},
+			render(ctx) {
+				const { row } = ctx;
+				return createVNode(_sfc_main, {
+					class: checkboxClass,
+					modelValue: row.checked,
+					"onUpdate:modelValue": (val) => {
+						handleCheckRow(row, val);
+					},
+					onClick: checkboxClick
+				});
+			}
+		};
+	}
+	function handleSelect(row, check) {
+		row.checked = check;
+		if (check) {
+			if (selectedRow.value) selectedRow.value.checked = false;
+			selectedRow.value = row;
+		} else selectedRow.value = void 0;
+	}
+	function createSelectColumn() {
+		const width = getCheckboxColumnWidth();
+		return {
+			key: "__is_select_column__",
+			name: "单选",
+			minWidth: width,
+			resizable: false,
+			width,
+			align: "center",
+			fixed: "left",
+			nameRender(_ctx) {
+				if (!props.tree) return "单选";
+				return [createTextVNode("单选")];
+			},
+			render({ row }) {
+				return createVNode(_sfc_main, {
+					class: checkboxClass,
+					modelValue: row.checked,
+					"onUpdate:modelValue": (val) => {
+						handleSelect(row, val);
+					},
+					onClick: checkboxClick
+				});
+			}
+		};
+	}
+	return {
+		checkedRows,
+		createCheckColumn,
+		createSelectColumn,
+		clearChecked,
+		clearSelected
+	};
+}
+//#endregion
+export { useCheck };
+
+//# sourceMappingURL=use-check.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-check.js","names":["UCheckbox"],"sources":["../../../src/components/table/use-check.ts"],"sourcesContent":["import { dfs, o, type Forest } from '@cat-kit/core'\nimport type { BEM } from '@veltra/utils'\nimport {\n  computed,\n  createTextVNode,\n  createVNode,\n  nextTick,\n  shallowRef,\n  toRaw,\n  triggerRef,\n  watch,\n  type ComputedRef,\n  type ShallowRef\n} from 'vue'\n\nimport type { TableRow, TableColumn, TableEmits, TableProps, ComponentSize } from '../../types'\nimport { UCheckbox } from '../checkbox'\n\ninterface Options {\n  rows: ShallowRef<TableRow[] | undefined>\n  rowForest: ShallowRef<Forest<Record<string, unknown>, any> | undefined>\n  props: TableProps\n  emit: TableEmits<any>\n  size: ComputedRef<ComponentSize>\n  cls: BEM<'table'>\n}\n\ninterface UseCheckReturned {\n  checkedRows: ShallowRef<Set<TableRow>>\n  clearChecked: () => void\n  clearSelected: () => void\n  createCheckColumn: () => TableColumn\n  createSelectColumn: () => TableColumn\n}\n\nexport function useCheck(options: Options): UseCheckReturned {\n  const { rows, rowForest, props, emit, size, cls } = options\n\n  const checkedRows = shallowRef(new Set<TableRow>())\n  const selectedRow = shallowRef<TableRow>()\n\n  /** 触发checkedRows的更新 */\n  function triggerCheckedRows() {\n    triggerRef(checkedRows)\n  }\n\n  function clearChecked() {\n    checkedRows.value.forEach((row) => {\n      row.checked = false\n    })\n    checkedRows.value.clear()\n    triggerCheckedRows()\n  }\n\n  function clearSelected() {\n    if (selectedRow.value) {\n      selectedRow.value.checked = false\n      selectedRow.value = undefined\n    }\n  }\n\n  watch([() => props.checkable, () => props.selectable, () => rows.value], () => {\n    clearChecked()\n    clearSelected()\n  })\n\n  watch(selectedRow, (selectedRow) => {\n    if (changedByModel) return\n    changedByEvent = true\n    emit('update:selected', selectedRow?.data ? toRaw(selectedRow.data) : undefined)\n    nextTick(() => {\n      changedByEvent = false\n    })\n  })\n\n  let changedByEvent = false\n  let changedByModel = false\n  watch(checkedRows, (checkedRows) => {\n    if (changedByModel) return\n    changedByEvent = true\n    emit(\n      'update:checked',\n      Array.from(checkedRows).map((row) => toRaw(row.data))\n    )\n    nextTick(() => {\n      changedByEvent = false\n    })\n  })\n\n  let dicts: Map<string | number, TableRow> | undefined = undefined\n\n  // 设置uid -> row 字典，以便于数据重复使用\n  function setDicts() {\n    if (dicts || !rows.value || !props.rowKey) return\n\n    let mapEntries: [string | number, TableRow][] = []\n    let i = 0\n    while (i < rows.value.length) {\n      const row = rows.value[i]!\n\n      mapEntries.push([row.uid, row])\n      i++\n    }\n    dicts = new Map(mapEntries)\n  }\n\n  watch(rows, () => {\n    dicts = undefined\n  })\n\n  watch(\n    [() => props.checked, () => props.rowKey, () => props.checkable, rows],\n    ([checked, rowKey, checkable, rows], [_, __, ___, oRows]) => {\n      if (changedByEvent || !checkable || !rowKey) return\n\n      changedByModel = true\n\n      // 如果没有字典，先建立字典\n      rows !== oRows && setDicts()\n\n      clearChecked()\n\n      checked?.forEach((item) => {\n        const uid = o(item).get(rowKey)\n        if (uid === undefined || uid === null) return\n        const row = dicts?.get(uid as string | number)\n        if (!row) return\n\n        row.checked = true\n        checkedRows.value.add(row)\n      })\n      triggerCheckedRows()\n\n      nextTick(() => {\n        changedByModel = false\n      })\n    },\n    { immediate: true }\n  )\n\n  watch(\n    [() => props.selected, () => props.rowKey, () => props.selectable, rows],\n    ([selected, rowKey, selectable, rows], [_, __, ___, oRows]) => {\n      if (changedByEvent || !selectable || !rowKey) return\n\n      changedByModel = true\n\n      // 如果没有字典，先建立字典(懒建立)\n      rows !== oRows && setDicts()\n\n      if (selected) {\n        const uid = o(selected).get(rowKey)\n        const row =\n          uid === undefined || uid === null ? undefined : dicts?.get(uid as string | number)\n        if (row) {\n          row.checked = true\n          selectedRow.value = row\n        }\n      } else {\n        clearSelected()\n      }\n\n      nextTick(() => {\n        changedByModel = false\n      })\n    },\n    { immediate: true }\n  )\n\n  const allChecked = computed(() => {\n    const rowSize = props.tree ? rowForest.value?.size : rows.value?.length\n    return !!rowSize && rowSize === checkedRows.value.size\n  })\n\n  function handleCheckAllTree(check: boolean) {\n    if (check) {\n      rowForest.value?.dfs((row) => {\n        row.checked = true\n        checkedRows.value.add(row)\n      })\n    } else {\n      rowForest.value?.dfs((row) => {\n        row.checked = false\n      })\n      checkedRows.value.clear()\n    }\n    triggerCheckedRows()\n  }\n\n  function handleCheckAllRows(check: boolean) {\n    if (check) {\n      rows.value?.forEach((row) => {\n        row.checked = true\n        checkedRows.value.add(row)\n      })\n    } else {\n      rows.value?.forEach((row) => {\n        row.checked = false\n      })\n      checkedRows.value.clear()\n    }\n    triggerCheckedRows()\n  }\n\n  function handleCheckAll(check: boolean) {\n    if (props.tree) {\n      handleCheckAllTree(check as boolean)\n    } else {\n      handleCheckAllRows(check as boolean)\n    }\n  }\n\n  function handleCheckRow(row: TableRow, check: boolean) {\n    const cb = check\n      ? (row: TableRow) => checkedRows.value.add(row)\n      : (row: TableRow) => checkedRows.value.delete(row)\n\n    const childrenKey = typeof props.tree === 'string' ? props.tree : 'children'\n    dfs(\n      row as unknown as Record<string, unknown>,\n      (node) => {\n        const r = node as unknown as TableRow\n        r.checked = check\n        cb(r)\n      },\n      childrenKey\n    )\n\n    triggerCheckedRows()\n  }\n\n  const getCheckboxColumnWidth = () => {\n    return size.value === 'large' ? 80 : 60\n  }\n\n  const checkboxClass = cls.e('checkbox')\n  const checkboxClick = (e: Event) => e.stopPropagation()\n\n  function createCheckColumn(): TableColumn {\n    const width = getCheckboxColumnWidth()\n    return {\n      key: '__is_check_column__',\n      name: '',\n      width,\n      minWidth: width,\n      align: 'center',\n      fixed: 'left',\n      resizable: false,\n      nameRender() {\n        const checkboxNode = createVNode(UCheckbox, {\n          modelValue: allChecked.value,\n          'onUpdate:modelValue': handleCheckAll\n        })\n        if (!props.tree) {\n          return checkboxNode\n        }\n\n        // const expandNode = createVNode('i', {\n        //   text: true,\n        //   class: cls.e('expand-space')\n        // })\n        return [checkboxNode]\n      },\n      render(ctx) {\n        const { row } = ctx\n\n        // @ts-ignore\n        return createVNode(UCheckbox, {\n          class: checkboxClass,\n          modelValue: row.checked,\n          'onUpdate:modelValue': (val: boolean) => {\n            handleCheckRow(row, val)\n          },\n          onClick: checkboxClick\n        })\n      }\n    }\n  }\n\n  function handleSelect(row: TableRow, check: boolean) {\n    row.checked = check\n    if (check) {\n      if (selectedRow.value) {\n        selectedRow.value.checked = false\n      }\n      selectedRow.value = row\n    } else {\n      selectedRow.value = undefined\n    }\n  }\n\n  function createSelectColumn(): TableColumn {\n    const width = getCheckboxColumnWidth()\n    return {\n      key: '__is_select_column__',\n      name: '单选',\n      minWidth: width,\n      resizable: false,\n      width,\n      align: 'center',\n      fixed: 'left',\n      nameRender(_ctx) {\n        if (!props.tree) {\n          return '单选'\n        }\n\n        // const expandNode = createVNode('i', {\n        //   text: true,\n        //   class: cls.e('expand-space')\n        // })\n        return [createTextVNode('单选')]\n      },\n\n      render({ row }) {\n        // @ts-ignore\n        return createVNode(UCheckbox, {\n          class: checkboxClass,\n          modelValue: row.checked,\n          'onUpdate:modelValue': (val: boolean) => {\n            handleSelect(row, val)\n          },\n          onClick: checkboxClick\n        })\n      }\n    }\n  }\n\n  return { checkedRows, createCheckColumn, createSelectColumn, clearChecked, clearSelected }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,87 @@
+import { TableResizeKey } from "./di.js";
+import { nextTick, provide, shallowRef, watchEffect } from "vue";
+//#region src/components/table/use-col-resize.ts
+function useColResize(options) {
+	const { scrollRef, leafColumns } = options;
+	const showResizeLine = shallowRef(false);
+	const resizeLineRef = shallowRef();
+	const colgroupRef = shallowRef();
+	const headerRef = shallowRef();
+	/**
+	* 修正列样式
+	*/
+	function correctColumnStyle() {
+		const containerWidth = scrollRef.value?.containerRef?.clientWidth;
+		if (!containerWidth || !leafColumns.value.length) return;
+		const allColumnsWidth = leafColumns.value.reduce((acc, cur) => {
+			return acc + (cur.width ?? cur.minWidth);
+		}, 0);
+		if (allColumnsWidth < containerWidth) {
+			const freeWidth = containerWidth - allColumnsWidth;
+			const allocatableColumns = leafColumns.value.filter((column) => column.resizable !== false);
+			const allocatedWidth = freeWidth / allocatableColumns.length;
+			allocatableColumns.forEach((column) => {
+				column.width = (column.width ?? column.minWidth) + allocatedWidth;
+			});
+		}
+		const fixedLeft = leafColumns.value.filter((column) => column.fixed === "left");
+		const fixedRight = leafColumns.value.filter((column) => column.fixed === "right");
+		fixedLeft.reduce((acc, cur) => {
+			cur.style.left = acc;
+			return acc + (cur.width ?? cur.minWidth);
+		}, 0);
+		fixedRight.reduceRight((acc, cur) => {
+			cur.style.right = acc;
+			return acc + (cur.width ?? cur.minWidth);
+		}, 0);
+	}
+	watchEffect(correctColumnStyle);
+	function updateResizeLine(transformX) {
+		if (!resizeLineRef.value) return;
+		resizeLineRef.value.style.transform = `translateX(${transformX}px)`;
+	}
+	let containerLeft = 0;
+	let originX = 0;
+	let originWidth = 0;
+	let currentResizeColumn = null;
+	function handleResizeMousedown(e, resizeColumn) {
+		const tableEl = scrollRef.value?.el;
+		if (!tableEl) return;
+		showResizeLine.value = true;
+		currentResizeColumn = resizeColumn;
+		originX = e.pageX;
+		originWidth = resizeColumn.width ?? 0;
+		const { left } = tableEl.getBoundingClientRect();
+		containerLeft = left;
+		nextTick(() => {
+			updateResizeLine(e.pageX - left);
+		});
+		document.addEventListener("mousemove", handleResizeMousemove);
+		document.addEventListener("mouseup", handleResizeMouseup);
+	}
+	function handleResizeMousemove(e) {
+		updateResizeLine(e.pageX - containerLeft);
+	}
+	function handleResizeMouseup(e) {
+		currentResizeColumn.width = Math.max(originWidth + e.pageX - originX, currentResizeColumn.minWidth);
+		showResizeLine.value = false;
+		currentResizeColumn = null;
+		correctColumnStyle();
+		document.removeEventListener("mouseup", handleResizeMouseup);
+		document.removeEventListener("mousemove", handleResizeMousemove);
+	}
+	provide(TableResizeKey, {
+		handleResizeMousedown,
+		headerRef
+	});
+	return {
+		resizeLineRef,
+		colgroupRef,
+		showResizeLine,
+		handleResizeMousedown
+	};
+}
+//#endregion
+export { useColResize };
+
+//# sourceMappingURL=use-col-resize.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-col-resize.js","names":[],"sources":["../../../src/components/table/use-col-resize.ts"],"sourcesContent":["import { nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'\n\nimport type { ScrollExposed } from '../../types'\nimport { TableResizeKey } from './di'\nimport type { ColumnNode } from './node/col'\n\ninterface Options {\n  scrollRef: ShallowRef<ScrollExposed | undefined>\n  leafColumns: ShallowRef<ColumnNode[]>\n}\n\ninterface UseColResizeReturned {\n  resizeLineRef: ShallowRef<HTMLElement | undefined>\n  colgroupRef: ShallowRef<HTMLElement | undefined>\n  showResizeLine: ShallowRef<boolean>\n  handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void\n}\n\nexport function useColResize(options: Options): UseColResizeReturned {\n  const { scrollRef, leafColumns } = options\n\n  const showResizeLine = shallowRef(false)\n\n  const resizeLineRef = shallowRef<HTMLElement>()\n  const colgroupRef = shallowRef<HTMLElement>()\n  const headerRef = shallowRef<HTMLElement>()\n\n  /**\n   * 修正列样式\n   */\n  function correctColumnStyle() {\n    // 获取表格容器宽度\n    const containerWidth = scrollRef.value?.containerRef?.clientWidth\n\n    if (!containerWidth || !leafColumns.value.length) return\n\n    // 如果每个列都设置了宽度， 有两种情况\n    // 1. 表格容器宽度大于所有列宽度之和，则将剩下的宽度均匀分布到所有列中\n    // 2. 表格容器宽度小于所有列宽度之和，则什么也不管\n    const allColumnsWidth = leafColumns.value.reduce((acc, cur) => {\n      return acc + (cur.width ?? cur.minWidth!)\n    }, 0)\n\n    if (allColumnsWidth < containerWidth) {\n      const freeWidth = containerWidth - allColumnsWidth\n\n      const allocatableColumns = leafColumns.value.filter((column) => column.resizable !== false)\n\n      const allocatedWidth = freeWidth / allocatableColumns.length\n\n      allocatableColumns.forEach((column) => {\n        column.width = (column.width ?? column.minWidth!) + allocatedWidth\n      })\n    }\n\n    const fixedLeft = leafColumns.value.filter((column) => column.fixed === 'left')\n    const fixedRight = leafColumns.value.filter((column) => column.fixed === 'right')\n\n    fixedLeft.reduce((acc, cur) => {\n      cur.style.left = acc\n      return acc + (cur.width ?? cur.minWidth!)\n    }, 0)\n\n    fixedRight.reduceRight((acc, cur) => {\n      cur.style.right = acc\n      return acc + (cur.width ?? cur.minWidth!)\n    }, 0)\n  }\n\n  watchEffect(correctColumnStyle)\n\n  function updateResizeLine(transformX: number): void {\n    if (!resizeLineRef.value) return\n    resizeLineRef.value.style.transform = `translateX(${transformX}px)`\n  }\n\n  // 表格相对于页面左边缘的偏移量，\n  // 此处作为缓存以减少频繁地调用 getBoundingClientRect 方法\n  let containerLeft = 0\n  let originX = 0\n  let originWidth = 0\n  let currentResizeColumn: ColumnNode | null = null\n\n  function handleResizeMousedown(e: MouseEvent, resizeColumn: ColumnNode): void {\n    const tableEl = scrollRef.value?.el\n    if (!tableEl) return\n\n    showResizeLine.value = true\n    currentResizeColumn = resizeColumn\n    originX = e.pageX\n    originWidth = resizeColumn.width ?? 0\n\n    const { left } = tableEl.getBoundingClientRect()\n    containerLeft = left\n\n    nextTick(() => {\n      updateResizeLine(e.pageX - left)\n    })\n\n    document.addEventListener('mousemove', handleResizeMousemove)\n    document.addEventListener('mouseup', handleResizeMouseup)\n  }\n\n  function handleResizeMousemove(e: MouseEvent): void {\n    updateResizeLine(e.pageX - containerLeft)\n  }\n\n  function handleResizeMouseup(e: MouseEvent): void {\n    currentResizeColumn!.width = Math.max(\n      originWidth + e.pageX - originX,\n      currentResizeColumn!.minWidth!\n    )\n\n    showResizeLine.value = false\n    currentResizeColumn = null\n    correctColumnStyle()\n\n    document.removeEventListener('mouseup', handleResizeMouseup)\n    document.removeEventListener('mousemove', handleResizeMousemove)\n  }\n\n  provide(TableResizeKey, { handleResizeMousedown, headerRef })\n\n  return { resizeLineRef, colgroupRef, showResizeLine, handleResizeMousedown }\n}\n"],"mappings":";;;AAkBA,SAAgB,aAAa,SAAwC;CACnE,MAAM,EAAE,WAAW,gBAAgB;CAEnC,MAAM,iBAAiB,WAAW,MAAM;CAExC,MAAM,gBAAgB,YAAyB;CAC/C,MAAM,cAAc,YAAyB;CAC7C,MAAM,YAAY,YAAyB;;;;CAK3C,SAAS,qBAAqB;EAE5B,MAAM,iBAAiB,UAAU,OAAO,cAAc;AAEtD,MAAI,CAAC,kBAAkB,CAAC,YAAY,MAAM,OAAQ;EAKlD,MAAM,kBAAkB,YAAY,MAAM,QAAQ,KAAK,QAAQ;AAC7D,UAAO,OAAO,IAAI,SAAS,IAAI;KAC9B,EAAE;AAEL,MAAI,kBAAkB,gBAAgB;GACpC,MAAM,YAAY,iBAAiB;GAEnC,MAAM,qBAAqB,YAAY,MAAM,QAAQ,WAAW,OAAO,cAAc,MAAM;GAE3F,MAAM,iBAAiB,YAAY,mBAAmB;AAEtD,sBAAmB,SAAS,WAAW;AACrC,WAAO,SAAS,OAAO,SAAS,OAAO,YAAa;KACpD;;EAGJ,MAAM,YAAY,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,OAAO;EAC/E,MAAM,aAAa,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,QAAQ;AAEjF,YAAU,QAAQ,KAAK,QAAQ;AAC7B,OAAI,MAAM,OAAO;AACjB,UAAO,OAAO,IAAI,SAAS,IAAI;KAC9B,EAAE;AAEL,aAAW,aAAa,KAAK,QAAQ;AACnC,OAAI,MAAM,QAAQ;AAClB,UAAO,OAAO,IAAI,SAAS,IAAI;KAC9B,EAAE;;AAGP,aAAY,mBAAmB;CAE/B,SAAS,iBAAiB,YAA0B;AAClD,MAAI,CAAC,cAAc,MAAO;AAC1B,gBAAc,MAAM,MAAM,YAAY,cAAc,WAAW;;CAKjE,IAAI,gBAAgB;CACpB,IAAI,UAAU;CACd,IAAI,cAAc;CAClB,IAAI,sBAAyC;CAE7C,SAAS,sBAAsB,GAAe,cAAgC;EAC5E,MAAM,UAAU,UAAU,OAAO;AACjC,MAAI,CAAC,QAAS;AAEd,iBAAe,QAAQ;AACvB,wBAAsB;AACtB,YAAU,EAAE;AACZ,gBAAc,aAAa,SAAS;EAEpC,MAAM,EAAE,SAAS,QAAQ,uBAAuB;AAChD,kBAAgB;AAEhB,iBAAe;AACb,oBAAiB,EAAE,QAAQ,KAAK;IAChC;AAEF,WAAS,iBAAiB,aAAa,sBAAsB;AAC7D,WAAS,iBAAiB,WAAW,oBAAoB;;CAG3D,SAAS,sBAAsB,GAAqB;AAClD,mBAAiB,EAAE,QAAQ,cAAc;;CAG3C,SAAS,oBAAoB,GAAqB;AAChD,sBAAqB,QAAQ,KAAK,IAChC,cAAc,EAAE,QAAQ,SACxB,oBAAqB,SACtB;AAED,iBAAe,QAAQ;AACvB,wBAAsB;AACtB,sBAAoB;AAEpB,WAAS,oBAAoB,WAAW,oBAAoB;AAC5D,WAAS,oBAAoB,aAAa,sBAAsB;;AAGlE,SAAQ,gBAAgB;EAAE;EAAuB;EAAW,CAAC;AAE7D,QAAO;EAAE;EAAe;EAAa;EAAgB;EAAuB"}

package/dist/components/table/use-columns.d.ts

@@ -0,0 +1,11 @@
+import { TableColumn } from "../../types/table.js";
+import { ComputedRef, ShallowRef } from "vue";
+//#region src/components/table/use-columns.d.ts
+/**
+ * 定义表格列
+ * @param columns 表格列
+ */
+declare function defineTableColumns(columns: TableColumn[], commonProps?: Partial<Pick<TableColumn, 'align' | 'minWidth'>>): TableColumn[];
+//#endregion
+export { defineTableColumns };
+//# sourceMappingURL=use-columns.d.ts.map

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

@@ -0,0 +1,165 @@
+import _sfc_main from "../icon/icon.js";
+import _sfc_main$1 from "../button/button.js";
+import { ColumnNode } from "./node/col.js";
+import { computed, createVNode, shallowRef, watch } from "vue";
+import { Forest, dfs, last } from "@cat-kit/core";
+import "@veltra/utils";
+import { ArrowRight } from "@veltra/icons/normal";
+//#region src/components/table/use-columns.ts
+/**
+* 定义表格列
+* @param columns 表格列
+*/
+function defineTableColumns(columns, commonProps) {
+	columns.forEach((col) => {
+		dfs(col, (node) => {
+			for (const key in commonProps) {
+				if (node[key] !== void 0) continue;
+				node[key] = commonProps[key];
+			}
+		});
+	});
+	return columns;
+}
+function useColumns(options) {
+	const { props, createCheckColumn, createSelectColumn, toggleAllTreeRowExpand, cls } = options;
+	/** 前置列 */
+	const preColumns = computed(() => {
+		const { selectable, checkable, showIndex } = props;
+		const columns = [];
+		if (selectable) columns.push(createSelectColumn());
+		else if (checkable) columns.push(createCheckColumn());
+		if (showIndex) columns.push({
+			key: "__index__",
+			name: "#",
+			resizable: false,
+			width: 60,
+			minWidth: 60,
+			align: "center",
+			fixed: "left",
+			render({ row }) {
+				return row.index + 1;
+			}
+		});
+		return columns;
+	});
+	const columnForest = shallowRef();
+	const renderExpandAll = () => createVNode(_sfc_main$1, {
+		text: true,
+		title: "展开或收起全部",
+		class: cls.e("expand-all"),
+		type: "primary",
+		size: "small",
+		circle: true,
+		onClick: (e) => {
+			e.stopPropagation();
+			toggleAllTreeRowExpand();
+		}
+	}, () => [createVNode(_sfc_main, void 0, () => [createVNode(ArrowRight)])]);
+	watch([
+		preColumns,
+		() => props.columns,
+		() => props.tree,
+		() => props.expandable
+	], ([preColumns, columns, tree, expandable]) => {
+		/** 固定到左侧的列 */
+		const fixedOnLeft = [...preColumns];
+		/** 未固定的列 */
+		const unfixed = [];
+		/** 固定到右侧的列 */
+		const fixedOnRight = [];
+		columns?.forEach((column) => {
+			if (!column.fixed || column.children) {
+				column.fixed = void 0;
+				return unfixed.push(column);
+			}
+			if (column.fixed === "left") fixedOnLeft.push(column);
+			else fixedOnRight.push(column);
+		});
+		if (last(fixedOnLeft)) last(fixedOnLeft).isLastFixed = true;
+		if (fixedOnRight[0]) fixedOnRight[0].isFirstFixed = true;
+		const sortedColumns = [
+			...fixedOnLeft,
+			...unfixed,
+			...fixedOnRight
+		];
+		const firstColumn = { ...sortedColumns[0] };
+		sortedColumns[0] = firstColumn;
+		if ((!!tree || expandable) && firstColumn) {
+			firstColumn.align = "left";
+			firstColumn.width = firstColumn.width ? firstColumn.width + 60 : void 0;
+			const oldNameRender = firstColumn.nameRender;
+			firstColumn.nameRender = oldNameRender ? (ctx) => {
+				const oldNodes = oldNameRender(ctx);
+				return [renderExpandAll(), ...Array.isArray(oldNodes) ? oldNodes : [oldNodes]];
+			} : () => {
+				return [renderExpandAll(), firstColumn.name];
+			};
+		}
+		columnForest.value = new Forest({
+			data: sortedColumns,
+			createNode(data, index, depth, _f, parent) {
+				return new ColumnNode(data, index, depth, parent);
+			}
+		});
+	}, { immediate: true });
+	const headers = computed(() => {
+		const headers = [];
+		const forest = columnForest.value;
+		if (!forest) return headers;
+		const queue = [...forest.roots];
+		while (queue.length > 0) {
+			const size = queue.length;
+			const layer = [];
+			for (let i = 0; i < size; i++) {
+				const node = queue.shift();
+				layer.push(node);
+				const ch = node.children;
+				if (ch?.length) for (const c of ch) queue.push(c);
+			}
+			headers.push(layer);
+		}
+		for (let i = headers.length - 1; i > 0; i--) headers[i].forEach((node) => {
+			const parent = node.parent;
+			if (!parent) return;
+			if (parent.leafs !== void 0) return;
+			parent.leafs = parent.children.reduce((sum, node) => {
+				return sum + (node.leafs ?? 1);
+			}, 0);
+		});
+		return headers;
+	});
+	/** 除展开按钮之外的列 */
+	const columns = shallowRef([]);
+	/** 所有叶子节点 */
+	const leafColumns = shallowRef([]);
+	const expandColumn = shallowRef();
+	watch([
+		columnForest,
+		() => props.tree,
+		() => props.expandable
+	], ([forest, tree, expandable]) => {
+		const _columns = [];
+		forest?.dfs((node) => {
+			if (node.isLeaf) _columns.push(node);
+		});
+		leafColumns.value = _columns;
+		if (tree || expandable) {
+			expandColumn.value = _columns[0];
+			columns.value = _columns.slice(1);
+		} else {
+			columns.value = _columns;
+			expandColumn.value = void 0;
+		}
+	}, { immediate: true });
+	return {
+		expandColumn,
+		leafColumns,
+		columns,
+		headers
+	};
+}
+//#endregion
+export { defineTableColumns, useColumns };
+
+//# sourceMappingURL=use-columns.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-columns.js","names":["UButton","UIcon"],"sources":["../../../src/components/table/use-columns.ts"],"sourcesContent":["import { Forest, dfs, last } from '@cat-kit/core'\nimport { ArrowRight } from '@veltra/icons/normal'\nimport { type BEM } from '@veltra/utils'\nimport { computed, createVNode, shallowRef, watch, type ComputedRef, type ShallowRef } from 'vue'\n\nimport type { TableColumn, TableProps } from '../../types'\nimport { UButton } from '../button'\nimport { UIcon } from '../icon'\nimport { ColumnNode } from './node/col'\n\n/**\n * 定义表格列\n * @param columns 表格列\n */\nexport function defineTableColumns(\n  columns: TableColumn[],\n  commonProps?: Partial<Pick<TableColumn, 'align' | 'minWidth'>>\n): TableColumn[] {\n  columns.forEach((col) => {\n    dfs(col, (node) => {\n      for (const key in commonProps) {\n        if (node[key] !== undefined) continue\n        node[key] = commonProps[key]\n      }\n    })\n  })\n  return columns\n}\n\nexport interface ColumnConfig {\n  /** 表头 */\n  headers: ComputedRef<ColumnNode[][]>\n\n  /**\n   *  body列, 在body中使用\n   */\n  columns: ShallowRef<ColumnNode[]>\n\n  /** 所有叶子列 */\n  leafColumns: ShallowRef<ColumnNode[]>\n\n  /** 第一列 */\n  expandColumn: ShallowRef<ColumnNode | undefined>\n}\n\ninterface Options {\n  props: TableProps\n  cls: BEM<'table'>\n  /** 创建复选框 */\n  createCheckColumn: () => TableColumn\n  createSelectColumn: () => TableColumn\n  toggleAllTreeRowExpand: () => void\n}\n\nexport function useColumns(options: Options): ColumnConfig {\n  const { props, createCheckColumn, createSelectColumn, toggleAllTreeRowExpand, cls } = options\n\n  /** 前置列 */\n  const preColumns = computed<TableColumn[]>(() => {\n    const { selectable, checkable, showIndex } = props\n\n    const columns: TableColumn[] = []\n\n    if (selectable) {\n      columns.push(createSelectColumn())\n    } else if (checkable) {\n      columns.push(createCheckColumn())\n    }\n    if (showIndex) {\n      columns.push({\n        key: '__index__',\n        name: '#',\n        resizable: false,\n        width: 60,\n        minWidth: 60,\n        align: 'center',\n        fixed: 'left',\n        render({ row }) {\n          return row.index + 1\n        }\n      })\n    }\n\n    return columns\n  })\n\n  const columnForest = shallowRef<Forest<TableColumn, any>>()\n\n  const renderExpandAll = () =>\n    createVNode(\n      UButton,\n      {\n        text: true,\n        title: '展开或收起全部',\n        class: cls.e('expand-all'),\n        type: 'primary',\n        size: 'small',\n        circle: true,\n        onClick: (e) => {\n          e.stopPropagation()\n          toggleAllTreeRowExpand()\n        }\n      },\n      () => [createVNode(UIcon, undefined, () => [createVNode(ArrowRight)])]\n    )\n\n  watch(\n    [preColumns, () => props.columns, () => props.tree, () => props.expandable],\n    ([preColumns, columns, tree, expandable]) => {\n      /** 固定到左侧的列 */\n      const fixedOnLeft: TableColumn[] = [...preColumns]\n      /** 未固定的列 */\n      const unfixed: TableColumn[] = []\n      /** 固定到右侧的列 */\n      const fixedOnRight: TableColumn[] = []\n\n      columns?.forEach((column) => {\n        if (!column.fixed || column.children) {\n          column.fixed = undefined\n          return unfixed.push(column)\n        }\n        if (column.fixed === 'left') {\n          fixedOnLeft.push(column)\n        } else {\n          fixedOnRight.push(column)\n        }\n      })\n\n      if (last(fixedOnLeft)) {\n        last(fixedOnLeft)!.isLastFixed = true\n      }\n      if (fixedOnRight[0]) {\n        fixedOnRight[0].isFirstFixed = true\n      }\n\n      const sortedColumns = [...fixedOnLeft, ...unfixed, ...fixedOnRight]\n      // 操作时避免改变原数据\n      const firstColumn = { ...sortedColumns[0] } as TableColumn\n      sortedColumns[0] = firstColumn\n\n      // 树形表格需要给第一列添加展开按钮\n      // 因此要重新设置第一列的宽度和对齐方式\n      if ((!!tree || expandable) && firstColumn) {\n        firstColumn.align = 'left'\n        firstColumn.width = firstColumn.width ? firstColumn.width + 60 : undefined\n\n        const oldNameRender = firstColumn.nameRender\n\n        firstColumn.nameRender = oldNameRender\n          ? (ctx) => {\n              const oldNodes = oldNameRender!(ctx)\n              return [renderExpandAll(), ...(Array.isArray(oldNodes) ? oldNodes : [oldNodes])]\n            }\n          : () => {\n              return [renderExpandAll(), firstColumn.name]\n            }\n      }\n\n      const result = new Forest<TableColumn, any>({\n        data: sortedColumns,\n        createNode(data, index, depth, _f, parent) {\n          return new ColumnNode(data, index, depth, parent)\n        }\n      })\n\n      columnForest.value = result\n    },\n    { immediate: true }\n  )\n\n  const headers = computed(() => {\n    const headers: ColumnNode[][] = []\n    const forest = columnForest.value\n    if (!forest) return headers\n\n    // Forest.bfs 对每个根单独 BFS，按 depth 拼行会把后续根节点错放到深层，且根节点无 parent，\n    // 回溯 leafs 时会读到 undefined。这里从所有根一次性层序遍历，与多列表头布局一致。\n    const queue: ColumnNode[] = [...forest.roots]\n    while (queue.length > 0) {\n      const size = queue.length\n      const layer: ColumnNode[] = []\n      for (let i = 0; i < size; i++) {\n        const node = queue.shift()!\n        layer.push(node)\n        const ch = node.children\n        if (ch?.length) {\n          for (const c of ch) {\n            queue.push(c)\n          }\n        }\n      }\n      headers.push(layer)\n    }\n\n    // 从叶子节点开始回溯计算每个节点的累计叶子节点数量，叶子节点数量代表表头的宽度\n    for (let i = headers.length - 1; i > 0; i--) {\n      const header = headers[i]!\n\n      header.forEach((node) => {\n        const parent = node.parent\n        if (!parent) return\n        if (parent.leafs !== undefined) return\n        parent.leafs = parent.children!.reduce((sum, node) => {\n          return sum + (node.leafs ?? 1)\n        }, 0)\n      })\n    }\n\n    return headers\n  })\n\n  /** 除展开按钮之外的列 */\n  const columns = shallowRef<ColumnNode[]>([])\n\n  /** 所有叶子节点 */\n  const leafColumns = shallowRef<ColumnNode[]>([])\n\n  const expandColumn = shallowRef<ColumnNode>()\n\n  // 监听列的变化\n  watch(\n    [columnForest, () => props.tree, () => props.expandable],\n    ([forest, tree, expandable]) => {\n      const _columns: ColumnNode[] = []\n\n      forest?.dfs((node) => {\n        if (node.isLeaf) {\n          _columns.push(node)\n        }\n      })\n\n      leafColumns.value = _columns\n\n      if (tree || expandable) {\n        expandColumn.value = _columns[0]\n        columns.value = _columns.slice(1)\n      } else {\n        columns.value = _columns\n        expandColumn.value = undefined\n      }\n    },\n    { immediate: true }\n  )\n\n  return {\n    /** 第一列 */\n    expandColumn,\n    /** 所有列 */\n    leafColumns,\n    /** 列 */\n    columns,\n    /** 表格头的分层展示 */\n    headers\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import { ref } from "vue";
+import { debounce } from "@cat-kit/core";
+//#region src/components/table/use-fixed-columns.ts
+/**
+* 固定列
+* @returns
+*/
+function useFixedColumns() {
+	const leftFixed = ref(false);
+	const rightFixed = ref(false);
+	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)
+	};
+}
+//#endregion
+export { useFixedColumns };
+
+//# sourceMappingURL=use-fixed-columns.js.map

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

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