@qin-ui/antd-vue-pro 2.6.1 → 2.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/api.json +2 -2
- package/es/antd-vue-pro.css +6 -8
- package/es/components/table/components/ProTable.vue.d.ts.map +1 -1
- package/es/components/table/components/TableEllipsisTooltip.vue.d.ts +2 -0
- package/es/components/table/components/TableEllipsisTooltip.vue.d.ts.map +1 -1
- package/es/components/table/hooks/useEllipsisTooltip.d.ts +9 -3
- package/es/components/table/hooks/useEllipsisTooltip.d.ts.map +1 -1
- package/es/index.js +247 -95
- package/es/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/form/components/ProForm/index.vue +3 -3
- package/src/components/table/components/ProTable.vue +9 -5
- package/src/components/table/components/TableEllipsisTooltip.vue +65 -8
- package/src/components/table/hooks/useEllipsisTooltip.ts +177 -28
package/api.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-11-
|
|
2
|
+
"generatedAt": "2026-11-08T07:42:00.421Z",
|
|
3
3
|
"name": "@qin-ui/antd-vue-pro",
|
|
4
4
|
"api": [
|
|
5
5
|
{
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
}
|
|
79
79
|
],
|
|
80
80
|
"examples": [
|
|
81
|
-
"```vue\n<template>\n<ProForm :form=\"form\" @submit=\"handleSubmit\">\n<template #name=\"
|
|
81
|
+
"```vue\n<template>\n<ProForm :form=\"form\" @submit=\"handleSubmit\">\n<template #name=\"scoped\">\n<a-input v-bind=\"scoped\" />\n</template>\n</ProForm>\n</template>\n```"
|
|
82
82
|
]
|
|
83
83
|
},
|
|
84
84
|
{
|
package/es/antd-vue-pro.css
CHANGED
|
@@ -36,23 +36,21 @@
|
|
|
36
36
|
.pro-table_column-control_button[data-v-58650608] svg {
|
|
37
37
|
transform: scale(1.2, 1.4);
|
|
38
38
|
}
|
|
39
|
-
.pro-table_header[data-v-
|
|
39
|
+
.pro-table_header[data-v-73310ef7] {
|
|
40
40
|
display: flex;
|
|
41
41
|
align-items: center;
|
|
42
42
|
justify-content: flex-end;
|
|
43
|
+
margin-bottom: 8px;
|
|
43
44
|
}
|
|
44
|
-
.pro-table_header[data-v-
|
|
45
|
+
.pro-table_header[data-v-73310ef7]:empty {
|
|
45
46
|
display: none;
|
|
46
47
|
}
|
|
47
|
-
.pro-
|
|
48
|
-
margin-top: 16px;
|
|
49
|
-
}
|
|
50
|
-
.pro-table_header_button-bar[data-v-1d90bfc7] {
|
|
48
|
+
.pro-table_header_button-bar[data-v-73310ef7] {
|
|
51
49
|
flex: 1;
|
|
52
50
|
}
|
|
53
|
-
.pro-table_header_toolbar[data-v-
|
|
51
|
+
.pro-table_header_toolbar[data-v-73310ef7] {
|
|
54
52
|
margin-left: 12px;
|
|
55
53
|
}
|
|
56
|
-
.pro-table[data-v-
|
|
54
|
+
.pro-table[data-v-73310ef7] [class*='-pagination'] [class*='-pagination-total-text'] {
|
|
57
55
|
flex: 1;
|
|
58
56
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProTable.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/ProTable.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ProTable.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/ProTable.vue"],"names":[],"mappings":"AAqxBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,OAAO,KAAK,EAEV,UAAU,EACV,UAAU,EACX,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAYL,KAAK,IAAI,EACV,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAoBjD,OAAO,KAAK,EACV,MAAM,EAEN,mBAAmB,EACnB,qBAAqB,EACtB,MAAM,UAAU,CAAC;yBAED,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,EAC5C,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WA61BO,mBAAmB,CAAC;;;;eA3SnB,UAAU,CAAC,MAAM,CAAC;kBACf,OAAO;;QAjiBjB,2BAA2B;gBACnB,CAAC;QACT,eAAe;iBACN,MAAM,OAAO,CAAC,OAAO,CAAC;QAC/B,iBAAiB;yBACA,OAAO;QACxB,oBAAoB;0BACF,OAAO;QACzB,yCAAyC;kBAC/B,OAAO,GAAG,OAAO;yBArBd,OAAO;2BACL,OAAO,GAAG,mBAAmB,CAAC,IAAI,4BAsPc,CAAC,iEAtPH,CAAC;UAoB1B;QACpC,kBAAkB;;qBAhBT,OAAO;wBAEJ,kBAAkB,GAAG,KAAK;;QAgBtC,eAAe;yBACE,kBAAkB,GAAG,KAAK;QAC3C,oCAAoC;0BAClB,OAAO,GAAG,qBAAqB;iCA4zB2C,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;QAxU7C,8CAA8C;;MAwUqB,GAAG,IAAI;WACpE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;mBAzsBI,CAAC,KAAK,EAAE;YACjB,IAAI,EAAE,GAAG,CAAC;YACV,MAAM,6BAqGqD,CAAC,iEArGzC;YACnB,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,4BAmG6C,CAAC,iEAnGlC,CAAC;SAC5B,KAAK,IAAI;;QAGZ,8BAA8B;kBACpB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;mBATD,CAAC,KAAK,EAAE;YACjB,IAAI,EAAE,GAAG,CAAC;YACV,MAAM,6BAqGqD,CAAC,iEArGzC;YACnB,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,4BAmG6C,CAAC,iEAnGlC,CAAC;SAC5B,KAAK,IAAI;;QAGZ,8BAA8B;kBACpB,IAAI;;;EAosBZ,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAx2BzE,wBAw2B4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
|
|
@@ -6,12 +6,14 @@ type Props = {
|
|
|
6
6
|
content?: string;
|
|
7
7
|
anchorStyle?: EllipsisTooltipAnchorStyle;
|
|
8
8
|
container?: () => HTMLElement | null | undefined;
|
|
9
|
+
setOverlayElement?: (element: HTMLElement | null) => void;
|
|
9
10
|
} & /* @vue-ignore */ HostTooltipProps;
|
|
10
11
|
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
11
12
|
open: boolean;
|
|
12
13
|
content: string;
|
|
13
14
|
anchorStyle: EllipsisTooltipAnchorStyle;
|
|
14
15
|
container: () => HTMLElement | null | undefined;
|
|
16
|
+
setOverlayElement: (element: HTMLElement | null) => void;
|
|
15
17
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
16
18
|
tooltipRef: unknown;
|
|
17
19
|
}, any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableEllipsisTooltip.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/TableEllipsisTooltip.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableEllipsisTooltip.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/TableEllipsisTooltip.vue"],"names":[],"mappings":"AAqKA,OAAO,EAGL,KAAK,0BAA0B,EAChC,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAItD,KAAK,gBAAgB,GAAG,IAAI,CAC1B,qBAAqB,EACrB,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAC5D,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,0BAA0B,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACjD,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3D,GAAG,iBAAiB,CAAC,gBAAgB,CAAC;;UAL9B,OAAO;aACJ,MAAM;iBACF,0BAA0B;eAC5B,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS;uBAC5B,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;;;;AAyL3D,wBAQG"}
|
|
@@ -3,6 +3,10 @@ import { Ref } from 'vue';
|
|
|
3
3
|
export declare const ELLIPSIS_TOOLTIP_CELL_ATTR = "data-pro-table-ellipsis";
|
|
4
4
|
/** ProTable 根节点归属标记 */
|
|
5
5
|
export declare const PRO_TABLE_ROOT_ATTR = "data-pro-table-root";
|
|
6
|
+
/** 登记省略 Tooltip 浮层 */
|
|
7
|
+
export declare const registerEllipsisTooltipOverlay: (overlay: HTMLElement) => void;
|
|
8
|
+
/** 注销省略 Tooltip 浮层 */
|
|
9
|
+
export declare const unregisterEllipsisTooltipOverlay: (overlay: HTMLElement) => void;
|
|
6
10
|
/** 共享 Tooltip 锚点样式 */
|
|
7
11
|
export type EllipsisTooltipAnchorStyle = {
|
|
8
12
|
position: 'fixed';
|
|
@@ -32,14 +36,16 @@ export type EllipsisTooltipState = {
|
|
|
32
36
|
* 表格级共享省略 Tooltip
|
|
33
37
|
*
|
|
34
38
|
* @description
|
|
35
|
-
* 在 ProTable 根节点上以事件委托识别带标记的 body 单元格,维护单个 Tooltip
|
|
36
|
-
*
|
|
39
|
+
* 在 ProTable 根节点上以事件委托识别带标记的 body 单元格,维护单个 Tooltip 的显隐、文本与按单元格文本行矩形计算的固定定位锚点,文本行矩形不可用时回退单元格内容盒;
|
|
40
|
+
* 仅在单元格文本横向溢出时触发;鼠标移入浮层时保持展示,移出浮层后按离开延迟关闭;
|
|
41
|
+
* 表格滚动、窗口尺寸变化、KeepAlive 停用时关闭,卸载时移除监听。
|
|
37
42
|
*
|
|
38
43
|
* @param rootRef - ProTable 根节点引用
|
|
39
44
|
* @param enabled - 是否启用共享 Tooltip;为 false 时不注册全局监听
|
|
40
45
|
* @param delay - 悬停延迟(ms),0 表示立即展示
|
|
41
46
|
* @param leaveDelay - 移出延迟(ms),0 表示立即关闭
|
|
47
|
+
* @param overlayElement - 当前 Tooltip 浮层节点引用
|
|
42
48
|
* @returns Tooltip 状态与根节点事件处理器
|
|
43
49
|
*/
|
|
44
|
-
export declare function useEllipsisTooltip(rootRef: Ref<HTMLElement | null | undefined>, enabled: Ref<boolean>, delay: Ref<number>, leaveDelay: Ref<number>): EllipsisTooltipState;
|
|
50
|
+
export declare function useEllipsisTooltip(rootRef: Ref<HTMLElement | null | undefined>, enabled: Ref<boolean>, delay: Ref<number>, leaveDelay: Ref<number>, overlayElement: Ref<HTMLElement | null | undefined>): EllipsisTooltipState;
|
|
45
51
|
//# sourceMappingURL=useEllipsisTooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEllipsisTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/table/hooks/useEllipsisTooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,GAAG,EACT,MAAM,KAAK,CAAC;AAEb,gCAAgC;AAChC,eAAO,MAAM,0BAA0B,4BAA4B,CAAC;AAEpE,uBAAuB;AACvB,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"useEllipsisTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/table/hooks/useEllipsisTooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,GAAG,EACT,MAAM,KAAK,CAAC;AAEb,gCAAgC;AAChC,eAAO,MAAM,0BAA0B,4BAA4B,CAAC;AAEpE,uBAAuB;AACvB,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAKzD,sBAAsB;AACtB,eAAO,MAAM,8BAA8B,GAAI,SAAS,WAAW,SAElE,CAAC;AAEF,sBAAsB;AACtB,eAAO,MAAM,gCAAgC,GAAI,SAAS,WAAW,SAEpE,CAAC;AAEF,sBAAsB;AACtB,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,0BAA0B;AAC1B,MAAM,MAAM,oBAAoB,GAAG;IACjC,mBAAmB;IACnB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACnB,iBAAiB;IACjB,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACrB,eAAe;IACf,WAAW,EAAE,GAAG,CAAC,0BAA0B,CAAC,CAAC;IAC7C,wBAAwB;IACxB,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,uBAAuB;IACvB,UAAU,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,iBAAiB;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAwFF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,EAC5C,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,EACrB,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,EAClB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,EACvB,cAAc,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,GAClD,oBAAoB,CAsOtB"}
|
package/es/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "./antd-vue-pro.css";
|
|
2
|
-
import { defineComponent, createBlock, renderSlot, openBlock, resolveDynamicComponent, normalizeProps, mergeProps, withCtx, createElementBlock, Fragment, createTextVNode, toDisplayString, inject, computed, toValue, ref, onBeforeUnmount, createCommentVNode, createSlots, renderList, createVNode, watch, h, toRaw, unref, provide, useSlots, shallowRef, onUpdated, triggerRef, createElementVNode, withModifiers, normalizeStyle, nextTick, mergeModels, useModel,
|
|
2
|
+
import { defineComponent, createBlock, renderSlot, openBlock, resolveDynamicComponent, normalizeProps, mergeProps, withCtx, createElementBlock, Fragment, createTextVNode, toDisplayString, inject, computed, toValue, ref, onBeforeUnmount, createCommentVNode, createSlots, renderList, createVNode, watch, h, toRaw, unref, provide, useSlots, shallowRef, onUpdated, triggerRef, createElementVNode, withModifiers, normalizeStyle, nextTick, mergeModels, useModel, onDeactivated, onMounted, useAttrs, Teleport, getCurrentInstance, normalizeClass, guardReactiveProps } from "vue";
|
|
3
3
|
import { Transfer, TreeSelect, Slider, Switch, RadioGroup, CheckboxGroup, TimePicker, RangePicker, DatePicker, Cascader, Select, InputNumber, InputPassword, InputSearch, Textarea, Input, FormItem, Col, Row, Form, Space, Button, theme, Dropdown, Menu, MenuItem, Checkbox, MenuDivider, Tooltip, Table, TableColumn } from "ant-design-vue";
|
|
4
4
|
import { useForm as useForm$1, resolveLocaleName, zhTW, enUS, zhCN, format, useReactiveAttrs, cloneDeep, getObject, omitBy, InjectionFormSlotsKey, isPlainObject, resolveFieldIdentity, toPath, isObjectItem, InjectionFormKey, createFormProxy, camelizeProperties, useFields as useFields$1, useFormRef as useFormRef$1, useSearchFormExpand, pick, callListeners, isPromise, useTable as useTable$1, omit, mergeComponentVars } from "@qin-ui/pro-components-core";
|
|
5
5
|
import { enUS as enUS2, useFormData, zhCN as zhCN2, zhTW as zhTW2 } from "@qin-ui/pro-components-core";
|
|
@@ -1330,72 +1330,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1330
1330
|
}
|
|
1331
1331
|
});
|
|
1332
1332
|
const ColumnControl = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-58650608"]]);
|
|
1333
|
-
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
1334
|
-
...{ name: "TableEllipsisTooltip", inheritAttrs: false },
|
|
1335
|
-
__name: "TableEllipsisTooltip",
|
|
1336
|
-
props: {
|
|
1337
|
-
open: { type: Boolean, default: false },
|
|
1338
|
-
content: { default: "" },
|
|
1339
|
-
anchorStyle: { default: () => ({
|
|
1340
|
-
position: "fixed",
|
|
1341
|
-
pointerEvents: "none",
|
|
1342
|
-
opacity: 0
|
|
1343
|
-
}) },
|
|
1344
|
-
container: { type: Function, default: () => void 0 }
|
|
1345
|
-
},
|
|
1346
|
-
setup(__props) {
|
|
1347
|
-
const props = __props;
|
|
1348
|
-
const attrs = useAttrs();
|
|
1349
|
-
const HostTooltip = Tooltip;
|
|
1350
|
-
const tooltipRef = ref(null);
|
|
1351
|
-
const forceAlign = async () => {
|
|
1352
|
-
var _a;
|
|
1353
|
-
if (!props.open) return;
|
|
1354
|
-
await nextTick();
|
|
1355
|
-
const instance = tooltipRef.value;
|
|
1356
|
-
(_a = (instance == null ? void 0 : instance.forceAlign) ?? (instance == null ? void 0 : instance.forcePopupAlign)) == null ? void 0 : _a();
|
|
1357
|
-
};
|
|
1358
|
-
watch(() => props.anchorStyle, forceAlign, { deep: true });
|
|
1359
|
-
watch(
|
|
1360
|
-
() => props.open,
|
|
1361
|
-
(value) => {
|
|
1362
|
-
if (value) forceAlign();
|
|
1363
|
-
}
|
|
1364
|
-
);
|
|
1365
|
-
const getContainerNode = () => {
|
|
1366
|
-
var _a;
|
|
1367
|
-
const container = (_a = props.container) == null ? void 0 : _a.call(props);
|
|
1368
|
-
if (container) return container;
|
|
1369
|
-
return typeof document !== "undefined" ? document.body : void 0;
|
|
1370
|
-
};
|
|
1371
|
-
const getPopupContainer2 = () => getContainerNode() ?? document.body;
|
|
1372
|
-
return (_ctx, _cache) => {
|
|
1373
|
-
return openBlock(), createBlock(Teleport, {
|
|
1374
|
-
to: getContainerNode() ?? "body"
|
|
1375
|
-
}, [
|
|
1376
|
-
createVNode(unref(HostTooltip), mergeProps(unref(attrs), {
|
|
1377
|
-
ref_key: "tooltipRef",
|
|
1378
|
-
ref: tooltipRef,
|
|
1379
|
-
open: __props.open,
|
|
1380
|
-
title: __props.content,
|
|
1381
|
-
trigger: [],
|
|
1382
|
-
"get-popup-container": getPopupContainer2
|
|
1383
|
-
}), {
|
|
1384
|
-
default: withCtx(() => [
|
|
1385
|
-
createElementVNode("span", {
|
|
1386
|
-
class: "pro-table_ellipsis-tooltip-anchor",
|
|
1387
|
-
style: normalizeStyle(__props.anchorStyle),
|
|
1388
|
-
"aria-hidden": "true"
|
|
1389
|
-
}, null, 4)
|
|
1390
|
-
]),
|
|
1391
|
-
_: 1
|
|
1392
|
-
}, 16, ["open", "title"])
|
|
1393
|
-
], 8, ["to"]);
|
|
1394
|
-
};
|
|
1395
|
-
}
|
|
1396
|
-
});
|
|
1397
1333
|
const ELLIPSIS_TOOLTIP_CELL_ATTR = "data-pro-table-ellipsis";
|
|
1398
1334
|
const PRO_TABLE_ROOT_ATTR = "data-pro-table-root";
|
|
1335
|
+
const activeOverlays = /* @__PURE__ */ new Set();
|
|
1336
|
+
const registerEllipsisTooltipOverlay = (overlay) => {
|
|
1337
|
+
activeOverlays.add(overlay);
|
|
1338
|
+
};
|
|
1339
|
+
const unregisterEllipsisTooltipOverlay = (overlay) => {
|
|
1340
|
+
activeOverlays.delete(overlay);
|
|
1341
|
+
};
|
|
1399
1342
|
const ANCHOR_BASE_STYLE = {
|
|
1400
1343
|
position: "fixed",
|
|
1401
1344
|
pointerEvents: "none",
|
|
@@ -1412,7 +1355,42 @@ const measureCell = (cell) => {
|
|
|
1412
1355
|
overflow: Boolean(text) && cell.scrollWidth > cell.clientWidth
|
|
1413
1356
|
};
|
|
1414
1357
|
};
|
|
1415
|
-
|
|
1358
|
+
const toPixel = (value) => Number.parseFloat(value) || 0;
|
|
1359
|
+
const measureContentRect = (cell) => {
|
|
1360
|
+
const rect = cell.getBoundingClientRect();
|
|
1361
|
+
const style = getComputedStyle(cell);
|
|
1362
|
+
const insetLeft = toPixel(style.borderLeftWidth) + toPixel(style.paddingLeft);
|
|
1363
|
+
const insetTop = toPixel(style.borderTopWidth) + toPixel(style.paddingTop);
|
|
1364
|
+
const insetRight = toPixel(style.borderRightWidth) + toPixel(style.paddingRight);
|
|
1365
|
+
const insetBottom = toPixel(style.borderBottomWidth) + toPixel(style.paddingBottom);
|
|
1366
|
+
return {
|
|
1367
|
+
left: rect.left + insetLeft,
|
|
1368
|
+
top: rect.top + insetTop,
|
|
1369
|
+
width: Math.max(0, rect.width - insetLeft - insetRight),
|
|
1370
|
+
height: Math.max(0, rect.height - insetTop - insetBottom)
|
|
1371
|
+
};
|
|
1372
|
+
};
|
|
1373
|
+
const measureTextRect = (cell, content) => {
|
|
1374
|
+
if (typeof document === "undefined" || typeof document.createRange !== "function") {
|
|
1375
|
+
return content;
|
|
1376
|
+
}
|
|
1377
|
+
const range = document.createRange();
|
|
1378
|
+
range.selectNodeContents(cell);
|
|
1379
|
+
const rect = range.getBoundingClientRect();
|
|
1380
|
+
if (!rect.width || !rect.height) return content;
|
|
1381
|
+
const left = Math.max(rect.left, content.left);
|
|
1382
|
+
const top = Math.max(rect.top, content.top);
|
|
1383
|
+
const right = Math.min(rect.right, content.left + content.width);
|
|
1384
|
+
const bottom = Math.min(rect.bottom, content.top + content.height);
|
|
1385
|
+
if (right <= left || bottom <= top) return content;
|
|
1386
|
+
return {
|
|
1387
|
+
left,
|
|
1388
|
+
top,
|
|
1389
|
+
width: right - left,
|
|
1390
|
+
height: bottom - top
|
|
1391
|
+
};
|
|
1392
|
+
};
|
|
1393
|
+
function useEllipsisTooltip(rootRef, enabled, delay, leaveDelay, overlayElement) {
|
|
1416
1394
|
const open = ref(false);
|
|
1417
1395
|
const content = ref("");
|
|
1418
1396
|
const anchorStyle = ref({
|
|
@@ -1420,29 +1398,91 @@ function useEllipsisTooltip(rootRef, enabled, delay, leaveDelay) {
|
|
|
1420
1398
|
});
|
|
1421
1399
|
let activeCell = null;
|
|
1422
1400
|
let pendingCell = null;
|
|
1401
|
+
let pendingContent = "";
|
|
1402
|
+
let pendingRect = null;
|
|
1423
1403
|
let openTimer = null;
|
|
1424
1404
|
let closeTimer = null;
|
|
1425
1405
|
const clearOpenTimer = () => {
|
|
1406
|
+
pendingCell = null;
|
|
1407
|
+
pendingContent = "";
|
|
1408
|
+
pendingRect = null;
|
|
1426
1409
|
if (openTimer === null) return;
|
|
1427
1410
|
clearTimeout(openTimer);
|
|
1428
1411
|
openTimer = null;
|
|
1429
|
-
pendingCell = null;
|
|
1430
1412
|
};
|
|
1431
1413
|
const clearCloseTimer = () => {
|
|
1432
1414
|
if (closeTimer === null) return;
|
|
1433
1415
|
clearTimeout(closeTimer);
|
|
1434
1416
|
closeTimer = null;
|
|
1435
1417
|
};
|
|
1418
|
+
const getEventRoot = (node) => {
|
|
1419
|
+
var _a;
|
|
1420
|
+
const element = node instanceof Element ? node : node == null ? void 0 : node.parentElement;
|
|
1421
|
+
return ((_a = element == null ? void 0 : element.closest) == null ? void 0 : _a.call(element, `[${PRO_TABLE_ROOT_ATTR}]`)) ?? null;
|
|
1422
|
+
};
|
|
1436
1423
|
const close = () => {
|
|
1437
1424
|
clearOpenTimer();
|
|
1438
1425
|
clearCloseTimer();
|
|
1439
1426
|
open.value = false;
|
|
1440
1427
|
activeCell = null;
|
|
1428
|
+
removeOverlayListeners();
|
|
1441
1429
|
};
|
|
1442
|
-
const
|
|
1443
|
-
|
|
1444
|
-
const
|
|
1445
|
-
|
|
1430
|
+
const scheduleClose = () => {
|
|
1431
|
+
clearCloseTimer();
|
|
1432
|
+
const delayMs = Math.max(0, leaveDelay.value);
|
|
1433
|
+
if (delayMs === 0) {
|
|
1434
|
+
close();
|
|
1435
|
+
return;
|
|
1436
|
+
}
|
|
1437
|
+
closeTimer = setTimeout(() => {
|
|
1438
|
+
closeTimer = null;
|
|
1439
|
+
close();
|
|
1440
|
+
}, delayMs);
|
|
1441
|
+
};
|
|
1442
|
+
const isOverlayNode = (node) => {
|
|
1443
|
+
const overlay = overlayElement.value;
|
|
1444
|
+
return Boolean(overlay && node instanceof Node && overlay.contains(node));
|
|
1445
|
+
};
|
|
1446
|
+
const isForeignOverlayNode = (node) => {
|
|
1447
|
+
if (!(node instanceof Node)) return false;
|
|
1448
|
+
const own = overlayElement.value;
|
|
1449
|
+
for (const overlay of activeOverlays) {
|
|
1450
|
+
if (overlay !== own && overlay.contains(node)) return true;
|
|
1451
|
+
}
|
|
1452
|
+
return false;
|
|
1453
|
+
};
|
|
1454
|
+
const onOverlayMouseOver = (event) => {
|
|
1455
|
+
if (!isOverlayNode(event.target)) return;
|
|
1456
|
+
clearCloseTimer();
|
|
1457
|
+
};
|
|
1458
|
+
const onOverlayMouseOut = (event) => {
|
|
1459
|
+
if (!isOverlayNode(event.target)) return;
|
|
1460
|
+
const related = event.relatedTarget;
|
|
1461
|
+
if (isOverlayNode(related)) return;
|
|
1462
|
+
if (isForeignOverlayNode(related)) {
|
|
1463
|
+
close();
|
|
1464
|
+
return;
|
|
1465
|
+
}
|
|
1466
|
+
if (activeCell && related instanceof Node && activeCell.contains(related)) {
|
|
1467
|
+
const relatedRoot = getEventRoot(related);
|
|
1468
|
+
if (!relatedRoot || relatedRoot === rootRef.value) return;
|
|
1469
|
+
close();
|
|
1470
|
+
return;
|
|
1471
|
+
}
|
|
1472
|
+
scheduleClose();
|
|
1473
|
+
};
|
|
1474
|
+
let overlayListening = false;
|
|
1475
|
+
const addOverlayListeners = () => {
|
|
1476
|
+
if (overlayListening || typeof document === "undefined") return;
|
|
1477
|
+
overlayListening = true;
|
|
1478
|
+
document.addEventListener("mouseover", onOverlayMouseOver);
|
|
1479
|
+
document.addEventListener("mouseout", onOverlayMouseOut);
|
|
1480
|
+
};
|
|
1481
|
+
const removeOverlayListeners = () => {
|
|
1482
|
+
if (!overlayListening) return;
|
|
1483
|
+
overlayListening = false;
|
|
1484
|
+
document.removeEventListener("mouseover", onOverlayMouseOver);
|
|
1485
|
+
document.removeEventListener("mouseout", onOverlayMouseOut);
|
|
1446
1486
|
};
|
|
1447
1487
|
const getCellFromEvent = (event) => {
|
|
1448
1488
|
var _a;
|
|
@@ -1462,24 +1502,32 @@ function useEllipsisTooltip(rootRef, enabled, delay, leaveDelay) {
|
|
|
1462
1502
|
close();
|
|
1463
1503
|
const measurement = measureCell(cell);
|
|
1464
1504
|
if (!measurement.overflow) return;
|
|
1465
|
-
const
|
|
1466
|
-
if (!
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
left: `${rect.left}px`,
|
|
1471
|
-
top: `${rect.top}px`,
|
|
1472
|
-
width: `${rect.width}px`,
|
|
1473
|
-
height: `${rect.height}px`
|
|
1474
|
-
};
|
|
1505
|
+
const contentRect = measureContentRect(cell);
|
|
1506
|
+
if (!contentRect.width || !contentRect.height) return;
|
|
1507
|
+
const rect = measureTextRect(cell, contentRect);
|
|
1508
|
+
pendingContent = measurement.text;
|
|
1509
|
+
pendingRect = rect;
|
|
1475
1510
|
pendingCell = cell;
|
|
1476
1511
|
openTimer = setTimeout(
|
|
1477
1512
|
() => {
|
|
1478
1513
|
openTimer = null;
|
|
1479
1514
|
pendingCell = null;
|
|
1480
|
-
|
|
1515
|
+
const anchorRect = pendingRect;
|
|
1516
|
+
const nextContent = pendingContent;
|
|
1517
|
+
pendingContent = "";
|
|
1518
|
+
pendingRect = null;
|
|
1519
|
+
if (!cell.isConnected || !anchorRect) return;
|
|
1520
|
+
content.value = nextContent;
|
|
1521
|
+
anchorStyle.value = {
|
|
1522
|
+
...ANCHOR_BASE_STYLE,
|
|
1523
|
+
left: `${anchorRect.left}px`,
|
|
1524
|
+
top: `${anchorRect.top}px`,
|
|
1525
|
+
width: `${anchorRect.width}px`,
|
|
1526
|
+
height: `${anchorRect.height}px`
|
|
1527
|
+
};
|
|
1481
1528
|
activeCell = cell;
|
|
1482
1529
|
open.value = true;
|
|
1530
|
+
addOverlayListeners();
|
|
1483
1531
|
},
|
|
1484
1532
|
Math.max(0, delay.value)
|
|
1485
1533
|
);
|
|
@@ -1490,6 +1538,11 @@ function useEllipsisTooltip(rootRef, enabled, delay, leaveDelay) {
|
|
|
1490
1538
|
const target = event.target;
|
|
1491
1539
|
if (!owner || !target || !owner.contains(target)) return;
|
|
1492
1540
|
const related = event.relatedTarget;
|
|
1541
|
+
if (isOverlayNode(related)) return;
|
|
1542
|
+
if (isForeignOverlayNode(related)) {
|
|
1543
|
+
close();
|
|
1544
|
+
return;
|
|
1545
|
+
}
|
|
1493
1546
|
if (related && owner.contains(related)) {
|
|
1494
1547
|
const relatedRoot = getEventRoot(related);
|
|
1495
1548
|
if (!relatedRoot || relatedRoot === rootRef.value) return;
|
|
@@ -1500,16 +1553,7 @@ function useEllipsisTooltip(rootRef, enabled, delay, leaveDelay) {
|
|
|
1500
1553
|
close();
|
|
1501
1554
|
return;
|
|
1502
1555
|
}
|
|
1503
|
-
|
|
1504
|
-
const delayMs = Math.max(0, leaveDelay.value);
|
|
1505
|
-
if (delayMs === 0) {
|
|
1506
|
-
close();
|
|
1507
|
-
return;
|
|
1508
|
-
}
|
|
1509
|
-
closeTimer = setTimeout(() => {
|
|
1510
|
-
closeTimer = null;
|
|
1511
|
-
close();
|
|
1512
|
-
}, delayMs);
|
|
1556
|
+
scheduleClose();
|
|
1513
1557
|
};
|
|
1514
1558
|
const onViewportChange = () => close();
|
|
1515
1559
|
let listening = false;
|
|
@@ -1539,6 +1583,7 @@ function useEllipsisTooltip(rootRef, enabled, delay, leaveDelay) {
|
|
|
1539
1583
|
});
|
|
1540
1584
|
onBeforeUnmount(() => {
|
|
1541
1585
|
removeViewportListeners();
|
|
1586
|
+
removeOverlayListeners();
|
|
1542
1587
|
clearOpenTimer();
|
|
1543
1588
|
clearCloseTimer();
|
|
1544
1589
|
});
|
|
@@ -1551,6 +1596,108 @@ function useEllipsisTooltip(rootRef, enabled, delay, leaveDelay) {
|
|
|
1551
1596
|
close
|
|
1552
1597
|
};
|
|
1553
1598
|
}
|
|
1599
|
+
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
1600
|
+
...{ name: "TableEllipsisTooltip", inheritAttrs: false },
|
|
1601
|
+
__name: "TableEllipsisTooltip",
|
|
1602
|
+
props: {
|
|
1603
|
+
open: { type: Boolean, default: false },
|
|
1604
|
+
content: { default: "" },
|
|
1605
|
+
anchorStyle: { default: () => ({
|
|
1606
|
+
position: "fixed",
|
|
1607
|
+
pointerEvents: "none",
|
|
1608
|
+
opacity: 0
|
|
1609
|
+
}) },
|
|
1610
|
+
container: { type: Function, default: () => void 0 },
|
|
1611
|
+
setOverlayElement: { type: Function, default: () => void 0 }
|
|
1612
|
+
},
|
|
1613
|
+
setup(__props) {
|
|
1614
|
+
const props = __props;
|
|
1615
|
+
const attrs = useAttrs();
|
|
1616
|
+
const HostTooltip = Tooltip;
|
|
1617
|
+
const tooltipRef = ref(null);
|
|
1618
|
+
let currentOverlay = null;
|
|
1619
|
+
let overlaySyncToken = 0;
|
|
1620
|
+
const getContainerNode = () => {
|
|
1621
|
+
var _a;
|
|
1622
|
+
const container = (_a = props.container) == null ? void 0 : _a.call(props);
|
|
1623
|
+
if (container) return container;
|
|
1624
|
+
return typeof document !== "undefined" ? document.body : void 0;
|
|
1625
|
+
};
|
|
1626
|
+
const getPopupElement = () => {
|
|
1627
|
+
var _a, _b;
|
|
1628
|
+
return ((_b = (_a = tooltipRef.value) == null ? void 0 : _a.getPopupDomNode) == null ? void 0 : _b.call(_a)) ?? null;
|
|
1629
|
+
};
|
|
1630
|
+
const syncOverlayElement = (next) => {
|
|
1631
|
+
if (currentOverlay === next) return;
|
|
1632
|
+
if (currentOverlay) unregisterEllipsisTooltipOverlay(currentOverlay);
|
|
1633
|
+
currentOverlay = next;
|
|
1634
|
+
props.setOverlayElement(next);
|
|
1635
|
+
if (next) registerEllipsisTooltipOverlay(next);
|
|
1636
|
+
};
|
|
1637
|
+
const syncOverlayFromDom = async () => {
|
|
1638
|
+
if (!props.open) return;
|
|
1639
|
+
const token = ++overlaySyncToken;
|
|
1640
|
+
for (let attempt = 0; attempt < 3; attempt += 1) {
|
|
1641
|
+
const popup = getPopupElement();
|
|
1642
|
+
if (popup) {
|
|
1643
|
+
if (token === overlaySyncToken) syncOverlayElement(popup);
|
|
1644
|
+
return;
|
|
1645
|
+
}
|
|
1646
|
+
if (!props.open) return;
|
|
1647
|
+
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
1648
|
+
}
|
|
1649
|
+
if (token === overlaySyncToken) syncOverlayElement(null);
|
|
1650
|
+
};
|
|
1651
|
+
const clearOverlay = () => {
|
|
1652
|
+
overlaySyncToken += 1;
|
|
1653
|
+
syncOverlayElement(null);
|
|
1654
|
+
};
|
|
1655
|
+
const forceAlign = async () => {
|
|
1656
|
+
var _a;
|
|
1657
|
+
if (!props.open) return;
|
|
1658
|
+
await nextTick();
|
|
1659
|
+
syncOverlayFromDom();
|
|
1660
|
+
const instance = tooltipRef.value;
|
|
1661
|
+
(_a = (instance == null ? void 0 : instance.forceAlign) ?? (instance == null ? void 0 : instance.forcePopupAlign)) == null ? void 0 : _a();
|
|
1662
|
+
};
|
|
1663
|
+
watch(() => props.anchorStyle, forceAlign, { deep: true });
|
|
1664
|
+
watch(
|
|
1665
|
+
() => props.open,
|
|
1666
|
+
(value) => {
|
|
1667
|
+
if (value) {
|
|
1668
|
+
forceAlign();
|
|
1669
|
+
} else {
|
|
1670
|
+
clearOverlay();
|
|
1671
|
+
}
|
|
1672
|
+
}
|
|
1673
|
+
);
|
|
1674
|
+
onBeforeUnmount(clearOverlay);
|
|
1675
|
+
const getPopupContainer2 = () => getContainerNode() ?? document.body;
|
|
1676
|
+
return (_ctx, _cache) => {
|
|
1677
|
+
return openBlock(), createBlock(Teleport, {
|
|
1678
|
+
to: getContainerNode() ?? "body"
|
|
1679
|
+
}, [
|
|
1680
|
+
createVNode(unref(HostTooltip), mergeProps(unref(attrs), {
|
|
1681
|
+
ref_key: "tooltipRef",
|
|
1682
|
+
ref: tooltipRef,
|
|
1683
|
+
open: __props.open,
|
|
1684
|
+
title: __props.content,
|
|
1685
|
+
trigger: [],
|
|
1686
|
+
"get-popup-container": getPopupContainer2
|
|
1687
|
+
}), {
|
|
1688
|
+
default: withCtx(() => [
|
|
1689
|
+
createElementVNode("span", {
|
|
1690
|
+
class: "pro-table_ellipsis-tooltip-anchor",
|
|
1691
|
+
style: normalizeStyle(__props.anchorStyle),
|
|
1692
|
+
"aria-hidden": "true"
|
|
1693
|
+
}, null, 4)
|
|
1694
|
+
]),
|
|
1695
|
+
_: 1
|
|
1696
|
+
}, 16, ["open", "title"])
|
|
1697
|
+
], 8, ["to"]);
|
|
1698
|
+
};
|
|
1699
|
+
}
|
|
1700
|
+
});
|
|
1554
1701
|
function useEllipsisTooltipColumns(getColumns, globalEnabled = () => false) {
|
|
1555
1702
|
const originalColumns = /* @__PURE__ */ new WeakMap();
|
|
1556
1703
|
const registerColumnClone = (next, source) => {
|
|
@@ -1895,6 +2042,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
1895
2042
|
} = config2;
|
|
1896
2043
|
return rest;
|
|
1897
2044
|
});
|
|
2045
|
+
const ellipsisTooltipOverlay = shallowRef(null);
|
|
2046
|
+
const setEllipsisTooltipOverlay = (element) => {
|
|
2047
|
+
ellipsisTooltipOverlay.value = element;
|
|
2048
|
+
};
|
|
1898
2049
|
const {
|
|
1899
2050
|
open: ellipsisTooltipOpen,
|
|
1900
2051
|
content: ellipsisTooltipContent,
|
|
@@ -1906,7 +2057,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
1906
2057
|
rootRef,
|
|
1907
2058
|
ellipsisTooltipEnabled,
|
|
1908
2059
|
ellipsisTooltipDelay,
|
|
1909
|
-
ellipsisTooltipLeaveDelay
|
|
2060
|
+
ellipsisTooltipLeaveDelay,
|
|
2061
|
+
ellipsisTooltipOverlay
|
|
1910
2062
|
);
|
|
1911
2063
|
const computedDataSource = computed(() => {
|
|
1912
2064
|
var _a;
|
|
@@ -2104,12 +2256,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
2104
2256
|
content: unref(ellipsisTooltipContent),
|
|
2105
2257
|
"anchor-style": unref(ellipsisTooltipAnchorStyle),
|
|
2106
2258
|
container: ellipsisTooltipContainer.value
|
|
2107
|
-
}, ellipsisTooltipProps.value), null, 16, ["open", "content", "anchor-style", "container"])) : createCommentVNode("", true)
|
|
2259
|
+
}, ellipsisTooltipProps.value, { "set-overlay-element": setEllipsisTooltipOverlay }), null, 16, ["open", "content", "anchor-style", "container"])) : createCommentVNode("", true)
|
|
2108
2260
|
], 38);
|
|
2109
2261
|
};
|
|
2110
2262
|
}
|
|
2111
2263
|
});
|
|
2112
|
-
const ProTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-
|
|
2264
|
+
const ProTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-73310ef7"]]);
|
|
2113
2265
|
function useTable(params) {
|
|
2114
2266
|
return useTable$1(params);
|
|
2115
2267
|
}
|