@gx-design-vue/pro-table 0.2.0-alpha.2 → 0.2.0-alpha.21

package/dist/components/Drag/Handle.d.ts

@@ -0,0 +1,90 @@
+import { CustomRender } from "@gx-design-vue/pro-utils";
+
+//#region src/components/Drag/Handle.d.ts
+interface DragHandleProps {
+  /** 自定义把手渲染（覆盖默认图标） */
+  handleRender?: (record: any, index: number) => CustomRender;
+  /** 当前行数据 */
+  record?: any;
+  /** 当前行索引 */
+  index?: number;
+  /** 是否禁用拖拽 */
+  disabled?: boolean;
+  /** 样式前缀 */
+  prefixCls?: string;
+}
+/**
+ * 行拖拽把手 —— 默认渲染 HolderOutlined 图标，`handleRender` 可覆盖。
+ *
+ * 根元素带 `data-drag-handle` 标记，`useRowDrag` 通过它识别拖拽入口；
+ * 禁用时 `data-drag-disabled` 标记 + not-allowed 光标。
+ */
+declare const DragHandle: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  handleRender: {
+    type: FunctionConstructor;
+    default: any;
+  };
+  record: {
+    type: ObjectConstructor;
+    default: any;
+  };
+  index: {
+    type: NumberConstructor;
+    default: any;
+  };
+  disabled: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  prefixCls: {
+    type: StringConstructor;
+    default: string;
+  };
+  hashId: {
+    type: StringConstructor;
+    default: string;
+  };
+  cssVarCls: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  handleRender: {
+    type: FunctionConstructor;
+    default: any;
+  };
+  record: {
+    type: ObjectConstructor;
+    default: any;
+  };
+  index: {
+    type: NumberConstructor;
+    default: any;
+  };
+  disabled: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  prefixCls: {
+    type: StringConstructor;
+    default: string;
+  };
+  hashId: {
+    type: StringConstructor;
+    default: string;
+  };
+  cssVarCls: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  prefixCls: string;
+  handleRender: Function;
+  record: Record<string, any>;
+  index: number;
+  disabled: boolean;
+  hashId: string;
+  cssVarCls: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { DragHandle, DragHandleProps };

package/dist/components/Drag/Handle.js

@@ -0,0 +1,64 @@
+import { createVNode, defineComponent } from "vue";
+import { GIcon } from "@gx-design-vue/icon";
+//#region src/components/Drag/Handle.tsx
+/**
+* 行拖拽把手 —— 默认渲染 HolderOutlined 图标，`handleRender` 可覆盖。
+*
+* 根元素带 `data-drag-handle` 标记，`useRowDrag` 通过它识别拖拽入口；
+* 禁用时 `data-drag-disabled` 标记 + not-allowed 光标。
+*/
+const DragHandle = /* @__PURE__ */ defineComponent({
+	name: "ProTableDragHandle",
+	inheritAttrs: false,
+	props: {
+		handleRender: {
+			type: Function,
+			default: void 0
+		},
+		record: {
+			type: Object,
+			default: void 0
+		},
+		index: {
+			type: Number,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		prefixCls: {
+			type: String,
+			default: ""
+		},
+		hashId: {
+			type: String,
+			default: ""
+		},
+		cssVarCls: {
+			type: String,
+			default: ""
+		}
+	},
+	setup(props) {
+		return () => {
+			const customNode = props.handleRender?.(props.record, props.index ?? 0);
+			if (customNode !== void 0 && customNode !== null && customNode !== false) return createVNode("span", {
+				"class": `${props.prefixCls}-drag-handle`,
+				"data-drag-handle": "true",
+				"data-drag-disabled": props.disabled ? "true" : void 0
+			}, [customNode]);
+			return createVNode("span", {
+				"class": [
+					props.cssVarCls,
+					`${props.prefixCls}-drag-handle`,
+					props.disabled ? `${props.prefixCls}-drag-handle-disabled` : ""
+				],
+				"data-drag-handle": "true",
+				"data-drag-disabled": props.disabled ? "true" : void 0
+			}, [createVNode(GIcon, { "type": "HolderOutlined" }, null)]);
+		};
+	}
+});
+//#endregion
+export { DragHandle };

package/dist/components/Drag/Tbody.d.ts

@@ -0,0 +1,17 @@
+import { Ref } from "vue";
+
+//#region src/components/Drag/Tbody.d.ts
+/**
+ * 透传 `<tbody>` 并捕获其 DOM 引用。
+ *
+ * 用于 `components.body.wrapper` 覆写，让 `useRowDrag` 能拿到 tbody 元素，
+ * 从而 `querySelectorAll('tr[data-row-key]')` 获取所有行。
+ *
+ * 对标 `useColumnResize` 覆写 `components.header.cell` 的手法：
+ * attrs 全部透传给 `<tbody>`，slots 原样保留。
+ */
+declare function createDragTbody(tbodyRef: Ref<HTMLElement | undefined>): import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { createDragTbody };

package/dist/components/Drag/Tbody.js

@@ -0,0 +1,27 @@
+import { defineComponent, h } from "vue";
+//#region src/components/Drag/Tbody.ts
+/**
+* 透传 `<tbody>` 并捕获其 DOM 引用。
+*
+* 用于 `components.body.wrapper` 覆写，让 `useRowDrag` 能拿到 tbody 元素，
+* 从而 `querySelectorAll('tr[data-row-key]')` 获取所有行。
+*
+* 对标 `useColumnResize` 覆写 `components.header.cell` 的手法：
+* attrs 全部透传给 `<tbody>`，slots 原样保留。
+*/
+function createDragTbody(tbodyRef) {
+	return defineComponent({
+		name: "ProTableDragTbody",
+		inheritAttrs: false,
+		setup(_, { attrs, slots }) {
+			return () => h("tbody", {
+				...attrs,
+				ref: (el) => {
+					tbodyRef.value = el instanceof HTMLElement ? el : void 0;
+				}
+			}, slots.default?.());
+		}
+	});
+}
+//#endregion
+export { createDragTbody };

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

@@ -0,0 +1,50 @@
+import { NormalizedEllipsis } from "../../utils/ellipsis.js";
+import { PropType } from "vue";
+
+//#region src/components/EllipsisText/index.d.ts
+/**
+ * 单元格文本溢出渲染：
+ * - 视觉省略由 CSS `-webkit-line-clamp` 承担；
+ * - 是否溢出由 useEllipsis（@chenglou/pretext）判断；
+ * - 溢出且未关闭 tooltip 时挂 Tooltip，getPopupContainer 指向表格滚动容器（滚动时跟随）。
+ */
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 纯文本：用于 pretext 测量与 tooltip title */text: {
+    type: StringConstructor;
+    default: string;
+  }; /** 归一化后的溢出配置 */
+  ellipsis: {
+    type: PropType<NormalizedEllipsis>;
+    required: true;
+  };
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  hashId: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 纯文本：用于 pretext 测量与 tooltip title */text: {
+    type: StringConstructor;
+    default: string;
+  }; /** 归一化后的溢出配置 */
+  ellipsis: {
+    type: PropType<NormalizedEllipsis>;
+    required: true;
+  };
+  prefixCls: {
+    type: StringConstructor;
+    required: true;
+  };
+  hashId: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  hashId: string;
+  text: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/components/EllipsisText/index.js

@@ -0,0 +1,65 @@
+import { useInjectScrollBarContext } from "../ScrollBar/context.js";
+import { useEllipsis } from "../../hooks/useEllipsis.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, ref, toRef } from "vue";
+import { Tooltip } from "antdv-next";
+//#region src/components/EllipsisText/index.tsx
+/**
+* 单元格文本溢出渲染：
+* - 视觉省略由 CSS `-webkit-line-clamp` 承担；
+* - 是否溢出由 useEllipsis（@chenglou/pretext）判断；
+* - 溢出且未关闭 tooltip 时挂 Tooltip，getPopupContainer 指向表格滚动容器（滚动时跟随）。
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var EllipsisText_default = /* @__PURE__ */ defineComponent({
+	name: "ProTableEllipsisText",
+	props: {
+		/** 纯文本：用于 pretext 测量与 tooltip title */
+		text: {
+			type: String,
+			default: ""
+		},
+		/** 归一化后的溢出配置 */
+		ellipsis: {
+			type: Object,
+			required: true
+		},
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		hashId: {
+			type: String,
+			default: ""
+		}
+	},
+	setup(props, { slots }) {
+		const contentRef = ref();
+		const { isOverflow } = useEllipsis(toRef(props, "text"), computed(() => props.ellipsis.lines), contentRef);
+		const scrollContext = useInjectScrollBarContext();
+		const getScrollContainer = () => scrollContext?.wrapElement?.value ?? document.body;
+		return () => {
+			let _slot;
+			const children = slots.default ? slots.default() : props.text;
+			const lineClampStyle = {
+				WebkitLineClamp: props.ellipsis.lines,
+				lineClamp: props.ellipsis.lines
+			};
+			const renderCell = (extra) => createVNode("div", mergeProps({
+				"ref": contentRef,
+				"class": [`${props.prefixCls}-cell-ellipsis`, props.hashId],
+				"style": lineClampStyle
+			}, extra ?? {}), [children]);
+			if (props.ellipsis.showTitle) return renderCell({ title: props.text });
+			const tooltipConfig = props.ellipsis.tooltip;
+			if (tooltipConfig === false || !isOverflow.value) return renderCell();
+			return createVNode(Tooltip, mergeProps({ "title": props.text }, tooltipConfig, {
+				"getPopupContainer": getScrollContainer,
+				"destroyOnHidden": true
+			}), _isSlot(_slot = renderCell()) ? _slot : { default: () => [_slot] });
+		};
+	}
+});
+//#endregion
+export { EllipsisText_default as default };

package/dist/components/ScrollBar/Bar.d.ts

@@ -0,0 +1,79 @@
+import { CSSProperties } from "vue";
+
+//#region src/components/ScrollBar/Bar.d.ts
+interface BarExpose {
+  handleScroll: (wrap: HTMLElement) => void;
+  update: () => void;
+}
+declare const barProps: {
+  readonly always: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+  readonly minSize: {
+    readonly type: NumberConstructor;
+    readonly default: 20;
+  };
+  readonly barStyle: {
+    readonly type: () => {
+      x: CSSProperties;
+      y: CSSProperties;
+    };
+    readonly default: () => {};
+  };
+  readonly hasScrollY: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+};
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  readonly always: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+  readonly minSize: {
+    readonly type: NumberConstructor;
+    readonly default: 20;
+  };
+  readonly barStyle: {
+    readonly type: () => {
+      x: CSSProperties;
+      y: CSSProperties;
+    };
+    readonly default: () => {};
+  };
+  readonly hasScrollY: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  readonly always: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+  readonly minSize: {
+    readonly type: NumberConstructor;
+    readonly default: 20;
+  };
+  readonly barStyle: {
+    readonly type: () => {
+      x: CSSProperties;
+      y: CSSProperties;
+    };
+    readonly default: () => {};
+  };
+  readonly hasScrollY: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+}>> & Readonly<{}>, {
+  readonly always: boolean;
+  readonly minSize: number;
+  readonly barStyle: {
+    x: CSSProperties;
+    y: CSSProperties;
+  };
+  readonly hasScrollY: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { BarExpose, barProps, _default as default };

package/dist/components/ScrollBar/Bar.js

@@ -0,0 +1,84 @@
+import { useInjectScrollBarContext } from "./context.js";
+import "./util.js";
+import Thumb_default from "./Thumb.js";
+import { Fragment, createVNode, defineComponent, nextTick, onMounted, ref } from "vue";
+//#region src/components/ScrollBar/Bar.tsx
+const barProps = {
+	always: {
+		type: Boolean,
+		default: true
+	},
+	minSize: {
+		type: Number,
+		default: 20
+	},
+	barStyle: {
+		type: Object,
+		default: () => ({})
+	},
+	hasScrollY: {
+		type: Boolean,
+		default: false
+	}
+};
+var Bar_default = /* @__PURE__ */ defineComponent({
+	name: "ScrollBarBar",
+	inheritAttrs: false,
+	props: barProps,
+	setup(props, { expose }) {
+		const scrollbar = useInjectScrollBarContext();
+		const moveX = ref(0);
+		const moveY = ref(0);
+		const sizeWidth = ref("");
+		const sizeHeight = ref("");
+		const ratioY = ref(1);
+		const ratioX = ref(1);
+		function handleScroll(wrap) {
+			if (!wrap) return;
+			const offsetHeight = wrap.offsetHeight - 4;
+			const offsetWidth = wrap.offsetWidth - 4;
+			moveY.value = wrap.scrollTop * 100 / offsetHeight * ratioY.value;
+			moveX.value = wrap.scrollLeft * 100 / offsetWidth * ratioX.value;
+		}
+		function update() {
+			const wrap = scrollbar?.wrapElement?.value;
+			if (!wrap) return;
+			const offsetHeight = wrap.offsetHeight - 4;
+			const offsetWidth = wrap.offsetWidth - 4;
+			const originalHeight = offsetHeight ** 2 / wrap.scrollHeight;
+			const originalWidth = offsetWidth ** 2 / wrap.scrollWidth;
+			const height = Math.max(originalHeight, props.minSize);
+			const width = Math.max(originalWidth, props.minSize);
+			ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
+			ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
+			sizeHeight.value = height + 4 < offsetHeight ? `${height}px` : "";
+			sizeWidth.value = width + 4 < offsetWidth ? `${width}px` : "";
+		}
+		onMounted(() => {
+			nextTick(() => update());
+		});
+		expose({
+			update,
+			handleScroll
+		});
+		return () => {
+			if (!scrollbar) return null;
+			return createVNode(Fragment, null, [createVNode(Thumb_default, {
+				"move": moveX.value,
+				"barStyle": props.barStyle.x,
+				"ratio": ratioX.value,
+				"size": sizeWidth.value,
+				"always": props.always
+			}, null), props.hasScrollY && createVNode(Thumb_default, {
+				"move": moveY.value,
+				"barStyle": props.barStyle.y,
+				"ratio": ratioY.value,
+				"size": sizeHeight.value,
+				"vertical": true,
+				"always": props.always
+			}, null)]);
+		};
+	}
+});
+//#endregion
+export { barProps, Bar_default as default };

package/dist/components/ScrollBar/Thumb.d.ts

@@ -0,0 +1,50 @@
+import { CSSProperties } from "vue";
+
+//#region src/components/ScrollBar/Thumb.d.ts
+declare const thumbProps: {
+  readonly vertical: BooleanConstructor;
+  readonly size: StringConstructor;
+  readonly move: NumberConstructor;
+  readonly ratio: {
+    readonly type: NumberConstructor;
+    readonly required: true;
+  };
+  readonly always: BooleanConstructor;
+  readonly barStyle: {
+    readonly type: () => CSSProperties;
+    readonly default: () => {};
+  };
+};
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  readonly vertical: BooleanConstructor;
+  readonly size: StringConstructor;
+  readonly move: NumberConstructor;
+  readonly ratio: {
+    readonly type: NumberConstructor;
+    readonly required: true;
+  };
+  readonly always: BooleanConstructor;
+  readonly barStyle: {
+    readonly type: () => CSSProperties;
+    readonly default: () => {};
+  };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  readonly vertical: BooleanConstructor;
+  readonly size: StringConstructor;
+  readonly move: NumberConstructor;
+  readonly ratio: {
+    readonly type: NumberConstructor;
+    readonly required: true;
+  };
+  readonly always: BooleanConstructor;
+  readonly barStyle: {
+    readonly type: () => CSSProperties;
+    readonly default: () => {};
+  };
+}>> & Readonly<{}>, {
+  readonly vertical: boolean;
+  readonly always: boolean;
+  readonly barStyle: CSSProperties;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default, thumbProps };