@sdata/web-vue 4.2.0 → 4.3.0
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/dist/sd.css +17 -117
- package/dist/sd.min.css +2 -2
- package/es/_components/auto-tooltip/auto-tooltip.vue_vue_type_script_setup_true_lang.js +17 -50
- package/es/_components/input-label/input-label.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/_components/picker/input-range.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/_components/picker/input.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/_components/select-view/style/index.css +0 -39
- package/es/anchor/anchor.vue.d.ts +1 -1
- package/es/anchor/index.d.ts +3 -3
- package/es/auto-complete/auto-complete.vue.d.ts +4 -4
- package/es/auto-complete/auto-complete.vue_vue_type_script_setup_true_lang.js +6 -6
- package/es/avatar/avatar.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/button/button.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/cascader/cascader-option.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/cascader/cascader-panel.vue.d.ts +1 -1
- package/es/cascader/cascader.vue.d.ts +1 -1
- package/es/cascader/cascader.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/clamp/index.d.ts +212 -0
- package/es/clamp/index.js +15 -0
- package/es/clamp/style/css.js +1 -0
- package/es/clamp/style/index.css +0 -0
- package/es/clamp/style/index.d.ts +1 -0
- package/es/clamp/style/index.js +1 -0
- package/es/clamp/style/index.scss +1 -0
- package/es/clamp/style/token.scss +1 -0
- package/es/color-picker/color-picker.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/components.d.ts +4 -0
- package/es/date-picker/picker.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/date-picker/range-picker.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/drawer/drawer.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/ellipsis/ellipsis.vue.d.ts +8 -15
- package/es/ellipsis/ellipsis.vue_vue_type_script_setup_true_lang.js +113 -118
- package/es/ellipsis/index.d.ts +14 -16
- package/es/ellipsis/performant-ellipsis.vue.d.ts +3 -5
- package/es/ellipsis/performant-ellipsis.vue_vue_type_script_setup_true_lang.js +12 -24
- package/es/ellipsis/style/index.css +0 -2
- package/es/ellipsis/style/index.scss +3 -2
- package/es/file-previewer/file-previewer.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/image/image.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/image/preview.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/index.css +17 -117
- package/es/index.d.ts +2 -0
- package/es/index.js +4 -3
- package/es/index.scss +1 -0
- package/es/input/input.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/input-tag/index.d.ts +0 -4
- package/es/input-tag/input-tag.vue.d.ts +3 -7
- package/es/input-tag/input-tag.vue_vue_type_script_setup_true_lang.js +85 -157
- package/es/input-tag/style/index.css +6 -39
- package/es/input-tag/style/index.scss +7 -0
- package/es/input-tag/style/input-tag.scss +0 -45
- package/es/link/link.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/list/index.d.ts +3 -3
- package/es/list/list.vue.d.ts +1 -1
- package/es/menu/base-menu.vue_vue_type_script_setup_true_lang.js +3 -3
- package/es/menu/overflow-wrap.vue_vue_type_script_setup_true_lang.js +21 -27
- package/es/menu/style/index.css +5 -2
- package/es/menu/style/index.scss +5 -2
- package/es/modal/index.js +1 -1
- package/es/modal/modal.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/popover/style/index.css +0 -1
- package/es/popover/style/index.scss +0 -1
- package/es/rate/rate.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/sd-vue.js +7 -2
- package/es/secret/secret.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/select/select.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/sender/sender.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/table/index.d.ts +8 -8
- package/es/table/table-tr.vue.d.ts +1 -1
- package/es/table/table.vue.d.ts +2 -2
- package/es/tag/tag.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/tag-group/index.d.ts +4 -6
- package/es/tag-group/style/index.css +6 -29
- package/es/tag-group/style/index.scss +9 -34
- package/es/tag-group/tag-group.vue.d.ts +8 -11
- package/es/tag-group/tag-group.vue_vue_type_script_setup_true_lang.js +91 -272
- package/es/textarea/textarea.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/time-picker/time-picker.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/tree/node-switcher.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/tree/tree.vue.d.ts +12 -12
- package/es/tree/tree.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/tree-select/tree-select.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/trigger/trigger.vue_vue_type_script_setup_true_lang.js +3 -3
- package/es/typography/base.vue.d.ts +15 -15
- package/es/typography/base.vue_vue_type_script_setup_true_lang.js +93 -164
- package/es/typography/interface.d.ts +1 -2
- package/es/typography/style/index.css +0 -5
- package/es/typography/style/index.scss +0 -7
- package/json/vetur-attributes.json +0 -20
- package/json/vetur-tags.json +2 -10
- package/json/web-types.json +3 -53
- package/package.json +2 -1
- package/es/typography/utils/measure.d.ts +0 -6
- package/es/typography/utils/measure.js +0 -69
|
@@ -5,11 +5,11 @@ import { getPrefixCls } from "../_utils/global-config.js";
|
|
|
5
5
|
import { isArray, isBoolean } from "../_utils/is.js";
|
|
6
6
|
import { useI18n } from "../locale/index.js";
|
|
7
7
|
import { useAllowClear } from "../_hooks/use-allow-clear.js";
|
|
8
|
+
import { omit } from "../_utils/omit.js";
|
|
9
|
+
import Trigger from "../trigger/index.js";
|
|
8
10
|
import useState from "../_hooks/use-state.js";
|
|
9
11
|
import useMergeState from "../_hooks/use-merge-state.js";
|
|
10
|
-
import { omit } from "../_utils/omit.js";
|
|
11
12
|
import pick from "../_utils/pick.js";
|
|
12
|
-
import Trigger from "../trigger/index.js";
|
|
13
13
|
import { useConfigProviderProp } from "../_hooks/use-config-provider-prop.js";
|
|
14
14
|
import { dayjs, getDateValue, getDayjsValue, getNow, getSortedDayjsArray, initializeDateLocale, isValueChange, toLocal } from "../_utils/date.js";
|
|
15
15
|
import IconCalendar from "../icon/icon-calendar/index.js";
|
|
@@ -10,9 +10,9 @@ import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers
|
|
|
10
10
|
import client_only_default from "../_components/client-only.js";
|
|
11
11
|
import usePopupManager from "../_hooks/use-popup-manager.js";
|
|
12
12
|
import { useTeleportContainer } from "../_hooks/use-teleport-container.js";
|
|
13
|
+
import Ellipsis from "../ellipsis/index.js";
|
|
13
14
|
import Button from "../button/index.js";
|
|
14
15
|
import { useConfigProviderProp } from "../_hooks/use-config-provider-prop.js";
|
|
15
|
-
import Ellipsis from "../ellipsis/index.js";
|
|
16
16
|
import { getFocusableElements, useFocusTrap } from "../_hooks/use-focus-trap.js";
|
|
17
17
|
import { useOverflow } from "../_hooks/use-overflow.js";
|
|
18
18
|
import { DRAWER_PLACEMENTS } from "./utils.js";
|
|
@@ -1,18 +1,8 @@
|
|
|
1
|
-
import type { PropType } from 'vue';
|
|
1
|
+
import type { PropType, VNode } from 'vue';
|
|
2
2
|
import type { EllipsisTooltipProps } from './interface';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
} & {
|
|
7
|
-
default?: (props: typeof __VLS_29) => any;
|
|
8
|
-
} & {
|
|
9
|
-
tooltip?: (props: typeof __VLS_32) => any;
|
|
10
|
-
} & {
|
|
11
|
-
default?: (props: typeof __VLS_34) => any;
|
|
12
|
-
} & {
|
|
13
|
-
default?: (props: typeof __VLS_47) => any;
|
|
14
|
-
} & {
|
|
15
|
-
default?: (props: typeof __VLS_49) => any;
|
|
3
|
+
type __VLS_Slots = {
|
|
4
|
+
default?: () => VNode[];
|
|
5
|
+
tooltip?: () => VNode[];
|
|
16
6
|
};
|
|
17
7
|
declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
18
8
|
lineClamp: {
|
|
@@ -27,7 +17,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
27
17
|
type: PropType<boolean | EllipsisTooltipProps>;
|
|
28
18
|
default: boolean;
|
|
29
19
|
};
|
|
30
|
-
}>, {
|
|
20
|
+
}>, {
|
|
21
|
+
triggerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
|
|
22
|
+
readonly triggerElement: HTMLElement | undefined;
|
|
23
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
31
24
|
lineClamp: {
|
|
32
25
|
type: PropType<number | string>;
|
|
33
26
|
default: undefined;
|
|
@@ -2,10 +2,10 @@ import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/es
|
|
|
2
2
|
import { getPrefixCls } from "../_utils/global-config.js";
|
|
3
3
|
import { isObject } from "../_utils/is.js";
|
|
4
4
|
import _objectWithoutProperties from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectWithoutProperties.js";
|
|
5
|
-
import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/asyncToGenerator.js";
|
|
6
5
|
import resize_observer_v2_default from "../_components/resize-observer-v2.js";
|
|
6
|
+
import { RichLineClamp } from "../clamp/index.js";
|
|
7
7
|
import Tooltip from "../tooltip/index.js";
|
|
8
|
-
import { computed, createBlock, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, onMounted, onUpdated, openBlock,
|
|
8
|
+
import { computed, createBlock, createElementBlock, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUpdated, openBlock, renderSlot, resolveDynamicComponent, shallowRef, unref, watch, withCtx } from "vue";
|
|
9
9
|
//#region components/ellipsis/ellipsis.vue?vue&type=script&setup=true&lang.ts
|
|
10
10
|
var _excluded = ["disabled"];
|
|
11
11
|
var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
|
|
@@ -14,56 +14,40 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
14
14
|
}), {}, {
|
|
15
15
|
__name: "ellipsis",
|
|
16
16
|
props: {
|
|
17
|
-
/**
|
|
18
|
-
* @zh 最大显示行数。不传时为单行省略。
|
|
19
|
-
* @en Maximum number of displayed lines. Single-line ellipsis is used by default.
|
|
20
|
-
*/
|
|
17
|
+
/** @zh 最大显示行数。不传时为单行省略。 @en Maximum displayed lines. */
|
|
21
18
|
lineClamp: {
|
|
22
19
|
type: [Number, String],
|
|
23
20
|
default: void 0
|
|
24
21
|
},
|
|
25
|
-
/**
|
|
26
|
-
* @zh 展开的触发方式
|
|
27
|
-
* @en Trigger mode for expansion
|
|
28
|
-
* @values 'click'
|
|
29
|
-
*/
|
|
22
|
+
/** @zh 展开的触发方式 @en Trigger mode for expansion */
|
|
30
23
|
expandTrigger: {
|
|
31
24
|
type: String,
|
|
32
25
|
default: void 0
|
|
33
26
|
},
|
|
34
|
-
/**
|
|
35
|
-
* @zh 省略时是否展示提示。可传入 Tooltip 属性。
|
|
36
|
-
* @en Whether to show a tooltip when ellipsis is active. Tooltip props are supported.
|
|
37
|
-
*/
|
|
27
|
+
/** @zh 省略时是否展示提示。 @en Whether to show a tooltip when clamped. */
|
|
38
28
|
tooltip: {
|
|
39
29
|
type: [Boolean, Object],
|
|
40
30
|
default: true
|
|
41
31
|
}
|
|
42
32
|
},
|
|
43
|
-
setup(__props) {
|
|
33
|
+
setup(__props, { expose: __expose }) {
|
|
44
34
|
const props = __props;
|
|
45
|
-
/**
|
|
46
|
-
* @zh 默认内容
|
|
47
|
-
* @en Default content
|
|
48
|
-
* @slot default
|
|
49
|
-
*/
|
|
50
|
-
/**
|
|
51
|
-
* @zh 自定义提示内容
|
|
52
|
-
* @en Custom tooltip content
|
|
53
|
-
* @slot tooltip
|
|
54
|
-
*/
|
|
55
35
|
const prefixCls = getPrefixCls("ellipsis");
|
|
56
|
-
const triggerRef =
|
|
57
|
-
const
|
|
58
|
-
const
|
|
59
|
-
const
|
|
60
|
-
const
|
|
36
|
+
const triggerRef = shallowRef();
|
|
37
|
+
const text = shallowRef("");
|
|
38
|
+
const measurementHtml = shallowRef("");
|
|
39
|
+
const measurementWidth = shallowRef(0);
|
|
40
|
+
const measurementPadding = shallowRef("0");
|
|
41
|
+
const isEllipsis = shallowRef(false);
|
|
42
|
+
const expanded = shallowRef(false);
|
|
61
43
|
const isLineClamp = computed(() => props.lineClamp !== void 0);
|
|
62
44
|
const componentTag = computed(() => isLineClamp.value ? "div" : "span");
|
|
63
|
-
const
|
|
64
|
-
if (
|
|
65
|
-
|
|
45
|
+
const maxLines = computed(() => {
|
|
46
|
+
if (props.lineClamp === void 0) return 1;
|
|
47
|
+
const value = Number(props.lineClamp);
|
|
48
|
+
return Number.isFinite(value) && value > 0 ? value : 1;
|
|
66
49
|
});
|
|
50
|
+
const tooltipConfig = computed(() => isObject(props.tooltip) ? props.tooltip : {});
|
|
67
51
|
const tooltipBindings = computed(() => {
|
|
68
52
|
const _tooltipConfig$value = tooltipConfig.value, { disabled: _disabled } = _tooltipConfig$value;
|
|
69
53
|
return _objectWithoutProperties(_tooltipConfig$value, _excluded);
|
|
@@ -78,103 +62,95 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
78
62
|
[`${prefixCls}--expanded`]: expanded.value
|
|
79
63
|
}]);
|
|
80
64
|
const rootStyle = computed(() => {
|
|
81
|
-
if (isLineClamp.value) {
|
|
82
|
-
if (expanded.value) return {
|
|
83
|
-
overflow: "visible",
|
|
84
|
-
textOverflow: "clip",
|
|
85
|
-
display: "block",
|
|
86
|
-
whiteSpace: "normal",
|
|
87
|
-
WebkitLineClamp: "unset",
|
|
88
|
-
WebkitBoxOrient: "vertical"
|
|
89
|
-
};
|
|
90
|
-
return {
|
|
91
|
-
overflow: "hidden",
|
|
92
|
-
textOverflow: "ellipsis",
|
|
93
|
-
display: "-webkit-box",
|
|
94
|
-
whiteSpace: "normal",
|
|
95
|
-
WebkitLineClamp: String(props.lineClamp),
|
|
96
|
-
WebkitBoxOrient: "vertical"
|
|
97
|
-
};
|
|
98
|
-
}
|
|
99
|
-
if (expanded.value) return {
|
|
65
|
+
if (isLineClamp.value) return expanded.value ? {
|
|
100
66
|
overflow: "visible",
|
|
101
67
|
textOverflow: "clip",
|
|
102
|
-
|
|
68
|
+
display: "block",
|
|
69
|
+
whiteSpace: "normal",
|
|
70
|
+
WebkitLineClamp: "unset",
|
|
71
|
+
WebkitBoxOrient: "vertical"
|
|
72
|
+
} : {
|
|
73
|
+
overflow: "hidden",
|
|
74
|
+
textOverflow: "ellipsis",
|
|
75
|
+
display: "-webkit-box",
|
|
76
|
+
whiteSpace: "normal",
|
|
77
|
+
WebkitLineClamp: String(maxLines.value),
|
|
78
|
+
WebkitBoxOrient: "vertical"
|
|
103
79
|
};
|
|
104
|
-
return {
|
|
80
|
+
return expanded.value ? {
|
|
81
|
+
overflow: "visible",
|
|
82
|
+
textOverflow: "clip",
|
|
83
|
+
whiteSpace: "normal"
|
|
84
|
+
} : {
|
|
105
85
|
overflow: "hidden",
|
|
106
86
|
textOverflow: "ellipsis",
|
|
107
87
|
whiteSpace: "nowrap"
|
|
108
88
|
};
|
|
109
89
|
});
|
|
110
|
-
const
|
|
111
|
-
|
|
112
|
-
|
|
90
|
+
const measurementStyle = computed(() => ({
|
|
91
|
+
position: "fixed",
|
|
92
|
+
top: 0,
|
|
93
|
+
left: 0,
|
|
94
|
+
zIndex: -1,
|
|
95
|
+
boxSizing: "border-box",
|
|
96
|
+
width: `${measurementWidth.value}px`,
|
|
97
|
+
padding: measurementPadding.value,
|
|
98
|
+
margin: 0,
|
|
99
|
+
visibility: "hidden",
|
|
100
|
+
pointerEvents: "none",
|
|
101
|
+
whiteSpace: "normal"
|
|
102
|
+
}));
|
|
103
|
+
const nativeTitle = computed(() => !expanded.value && (!enableTooltip.value || tooltipConfig.value.disabled) && isEllipsis.value ? text.value : void 0);
|
|
113
104
|
const buttonRole = computed(() => isExpandable.value ? "button" : void 0);
|
|
114
105
|
const buttonTabIndex = computed(() => isExpandable.value ? 0 : void 0);
|
|
115
106
|
const ariaExpanded = computed(() => props.expandTrigger === "click" ? String(expanded.value) : void 0);
|
|
116
|
-
|
|
117
|
-
var
|
|
118
|
-
const nextText = (_triggerRef$value$tex = (_triggerRef$value = triggerRef.value) === null || _triggerRef$value === void 0 || (_triggerRef$value = _triggerRef$value.textContent) === null || _triggerRef$value === void 0 ? void 0 : _triggerRef$value.trim()) !== null && _triggerRef$value$tex !== void 0 ? _triggerRef$value$tex : "";
|
|
119
|
-
if (nextText !== text.value) text.value = nextText;
|
|
120
|
-
};
|
|
121
|
-
const calculateEllipsis = () => {
|
|
122
|
-
syncText();
|
|
107
|
+
function syncMeasurement() {
|
|
108
|
+
var _clone$querySelector, _clone$textContent$tr, _clone$textContent;
|
|
123
109
|
const triggerElement = triggerRef.value;
|
|
124
|
-
if (!triggerElement
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
110
|
+
if (!triggerElement) return;
|
|
111
|
+
const clone = triggerElement.cloneNode(true);
|
|
112
|
+
(_clone$querySelector = clone.querySelector("[data-ellipsis-measure]")) === null || _clone$querySelector === void 0 || _clone$querySelector.remove();
|
|
113
|
+
const nextHtml = clone.innerHTML;
|
|
114
|
+
const nextText = (_clone$textContent$tr = (_clone$textContent = clone.textContent) === null || _clone$textContent === void 0 ? void 0 : _clone$textContent.trim()) !== null && _clone$textContent$tr !== void 0 ? _clone$textContent$tr : "";
|
|
115
|
+
const computedStyle = window.getComputedStyle(triggerElement);
|
|
116
|
+
const nextPadding = `${computedStyle.paddingTop} ${computedStyle.paddingRight} ${computedStyle.paddingBottom} ${computedStyle.paddingLeft}`;
|
|
117
|
+
if (nextHtml !== measurementHtml.value) measurementHtml.value = nextHtml;
|
|
118
|
+
if (nextText !== text.value) text.value = nextText;
|
|
119
|
+
if (triggerElement.clientWidth !== measurementWidth.value) measurementWidth.value = triggerElement.clientWidth;
|
|
120
|
+
if (nextPadding !== measurementPadding.value) measurementPadding.value = nextPadding;
|
|
121
|
+
}
|
|
122
|
+
function handleClampChange(clamped) {
|
|
123
|
+
isEllipsis.value = clamped;
|
|
124
|
+
}
|
|
125
|
+
function handleClick() {
|
|
126
|
+
if (props.expandTrigger === "click" && (isEllipsis.value || expanded.value)) expanded.value = !expanded.value;
|
|
127
|
+
}
|
|
128
|
+
function handleKeydown(event) {
|
|
129
|
+
if (isExpandable.value && (event.key === "Enter" || event.key === " ")) {
|
|
130
|
+
event.preventDefault();
|
|
131
|
+
handleClick();
|
|
130
132
|
}
|
|
131
|
-
|
|
132
|
-
};
|
|
133
|
-
const handleResize = () => {
|
|
134
|
-
calculateEllipsis();
|
|
135
|
-
};
|
|
136
|
-
const handleClick = function() {
|
|
137
|
-
var _ref = _asyncToGenerator(function* () {
|
|
138
|
-
if (props.expandTrigger !== "click") return;
|
|
139
|
-
if (!expanded.value) calculateEllipsis();
|
|
140
|
-
if (!isEllipsis.value && !expanded.value) return;
|
|
141
|
-
expanded.value = !expanded.value;
|
|
142
|
-
yield nextTick();
|
|
143
|
-
if (!expanded.value) calculateEllipsis();
|
|
144
|
-
});
|
|
145
|
-
return function handleClick() {
|
|
146
|
-
return _ref.apply(this, arguments);
|
|
147
|
-
};
|
|
148
|
-
}();
|
|
149
|
-
const handleKeydown = function() {
|
|
150
|
-
var _ref2 = _asyncToGenerator(function* (ev) {
|
|
151
|
-
if (!isExpandable.value) return;
|
|
152
|
-
if (ev.key === "Enter" || ev.key === " ") {
|
|
153
|
-
ev.preventDefault();
|
|
154
|
-
yield handleClick();
|
|
155
|
-
}
|
|
156
|
-
});
|
|
157
|
-
return function handleKeydown(_x) {
|
|
158
|
-
return _ref2.apply(this, arguments);
|
|
159
|
-
};
|
|
160
|
-
}();
|
|
161
|
-
onMounted(() => {
|
|
162
|
-
nextTick(() => calculateEllipsis());
|
|
163
|
-
});
|
|
164
|
-
onUpdated(() => {
|
|
165
|
-
nextTick(() => calculateEllipsis());
|
|
166
|
-
});
|
|
133
|
+
}
|
|
167
134
|
watch(() => props.lineClamp, () => {
|
|
168
|
-
|
|
169
|
-
nextTick(
|
|
135
|
+
expanded.value = false;
|
|
136
|
+
nextTick(syncMeasurement);
|
|
137
|
+
});
|
|
138
|
+
onMounted(() => void nextTick(syncMeasurement));
|
|
139
|
+
onUpdated(() => void nextTick(syncMeasurement));
|
|
140
|
+
__expose({
|
|
141
|
+
triggerRef,
|
|
142
|
+
get triggerElement() {
|
|
143
|
+
return triggerRef.value;
|
|
144
|
+
}
|
|
170
145
|
});
|
|
171
146
|
return (_ctx, _cache) => {
|
|
172
|
-
return openBlock(), createBlock(unref(resize_observer_v2_default), { onResize:
|
|
147
|
+
return openBlock(), createBlock(unref(resize_observer_v2_default), { onResize: syncMeasurement }, {
|
|
173
148
|
default: withCtx(() => [enableTooltip.value ? (openBlock(), createBlock(unref(Tooltip), mergeProps({ key: 0 }, tooltipBindings.value, { disabled: tooltipDisabled.value }), {
|
|
174
149
|
content: withCtx(() => [renderSlot(_ctx.$slots, "tooltip", {}, () => [renderSlot(_ctx.$slots, "default")])]),
|
|
175
150
|
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(componentTag.value), mergeProps({
|
|
176
151
|
ref_key: "triggerRef",
|
|
177
|
-
ref: triggerRef
|
|
152
|
+
ref: triggerRef,
|
|
153
|
+
"data-part": "root"
|
|
178
154
|
}, _ctx.$attrs, {
|
|
179
155
|
class: rootCls.value,
|
|
180
156
|
style: rootStyle.value,
|
|
@@ -187,10 +163,19 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
187
163
|
}), {
|
|
188
164
|
default: withCtx(() => [isLineClamp.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock("span", {
|
|
189
165
|
key: 1,
|
|
190
|
-
ref_key: "contentRef",
|
|
191
|
-
ref: contentRef,
|
|
192
166
|
class: normalizeClass(`${unref(prefixCls)}-content`)
|
|
193
|
-
}, [renderSlot(_ctx.$slots, "default")], 2))
|
|
167
|
+
}, [renderSlot(_ctx.$slots, "default")], 2)), createVNode(unref(RichLineClamp), {
|
|
168
|
+
"data-ellipsis-measure": "",
|
|
169
|
+
"aria-hidden": "true",
|
|
170
|
+
html: measurementHtml.value,
|
|
171
|
+
"max-lines": maxLines.value,
|
|
172
|
+
style: normalizeStyle(measurementStyle.value),
|
|
173
|
+
onClampchange: handleClampChange
|
|
174
|
+
}, null, 8, [
|
|
175
|
+
"html",
|
|
176
|
+
"max-lines",
|
|
177
|
+
"style"
|
|
178
|
+
])]),
|
|
194
179
|
_: 3
|
|
195
180
|
}, 16, [
|
|
196
181
|
"class",
|
|
@@ -204,7 +189,8 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
204
189
|
}, 16, ["disabled"])) : (openBlock(), createBlock(resolveDynamicComponent(componentTag.value), mergeProps({
|
|
205
190
|
key: 1,
|
|
206
191
|
ref_key: "triggerRef",
|
|
207
|
-
ref: triggerRef
|
|
192
|
+
ref: triggerRef,
|
|
193
|
+
"data-part": "root"
|
|
208
194
|
}, _ctx.$attrs, {
|
|
209
195
|
class: rootCls.value,
|
|
210
196
|
style: rootStyle.value,
|
|
@@ -217,10 +203,19 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
217
203
|
}), {
|
|
218
204
|
default: withCtx(() => [isLineClamp.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock("span", {
|
|
219
205
|
key: 1,
|
|
220
|
-
ref_key: "contentRef",
|
|
221
|
-
ref: contentRef,
|
|
222
206
|
class: normalizeClass(`${unref(prefixCls)}-content`)
|
|
223
|
-
}, [renderSlot(_ctx.$slots, "default")], 2))
|
|
207
|
+
}, [renderSlot(_ctx.$slots, "default")], 2)), createVNode(unref(RichLineClamp), {
|
|
208
|
+
"data-ellipsis-measure": "",
|
|
209
|
+
"aria-hidden": "true",
|
|
210
|
+
html: measurementHtml.value,
|
|
211
|
+
"max-lines": maxLines.value,
|
|
212
|
+
style: normalizeStyle(measurementStyle.value),
|
|
213
|
+
onClampchange: handleClampChange
|
|
214
|
+
}, null, 8, [
|
|
215
|
+
"html",
|
|
216
|
+
"max-lines",
|
|
217
|
+
"style"
|
|
218
|
+
])]),
|
|
224
219
|
_: 3
|
|
225
220
|
}, 16, [
|
|
226
221
|
"class",
|
package/es/ellipsis/index.d.ts
CHANGED
|
@@ -18,7 +18,10 @@ declare const Ellipsis: {
|
|
|
18
18
|
type: import("vue").PropType<boolean | EllipsisTooltipProps>;
|
|
19
19
|
default: boolean;
|
|
20
20
|
};
|
|
21
|
-
}>> & Readonly<{}>, {
|
|
21
|
+
}>> & Readonly<{}>, {
|
|
22
|
+
triggerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
|
|
23
|
+
readonly triggerElement: HTMLElement | undefined;
|
|
24
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
|
|
22
25
|
tooltip: boolean | EllipsisTooltipProps;
|
|
23
26
|
lineClamp: string | number;
|
|
24
27
|
expandTrigger: "click";
|
|
@@ -42,7 +45,10 @@ declare const Ellipsis: {
|
|
|
42
45
|
type: import("vue").PropType<boolean | EllipsisTooltipProps>;
|
|
43
46
|
default: boolean;
|
|
44
47
|
};
|
|
45
|
-
}>> & Readonly<{}>, {
|
|
48
|
+
}>> & Readonly<{}>, {
|
|
49
|
+
triggerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
|
|
50
|
+
readonly triggerElement: HTMLElement | undefined;
|
|
51
|
+
}, {}, {}, {}, {
|
|
46
52
|
tooltip: boolean | EllipsisTooltipProps;
|
|
47
53
|
lineClamp: string | number;
|
|
48
54
|
expandTrigger: "click";
|
|
@@ -63,23 +69,17 @@ declare const Ellipsis: {
|
|
|
63
69
|
type: import("vue").PropType<boolean | EllipsisTooltipProps>;
|
|
64
70
|
default: boolean;
|
|
65
71
|
};
|
|
66
|
-
}>> & Readonly<{}>, {
|
|
72
|
+
}>> & Readonly<{}>, {
|
|
73
|
+
triggerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
|
|
74
|
+
readonly triggerElement: HTMLElement | undefined;
|
|
75
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
|
|
67
76
|
tooltip: boolean | EllipsisTooltipProps;
|
|
68
77
|
lineClamp: string | number;
|
|
69
78
|
expandTrigger: "click";
|
|
70
79
|
}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
|
|
71
80
|
$slots: {
|
|
72
|
-
default?: (
|
|
73
|
-
|
|
74
|
-
default?: (props: {}) => any;
|
|
75
|
-
} & {
|
|
76
|
-
tooltip?: (props: {}) => any;
|
|
77
|
-
} & {
|
|
78
|
-
default?: (props: {}) => any;
|
|
79
|
-
} & {
|
|
80
|
-
default?: (props: {}) => any;
|
|
81
|
-
} & {
|
|
82
|
-
default?: (props: {}) => any;
|
|
81
|
+
default?: () => import("vue").VNode[];
|
|
82
|
+
tooltip?: () => import("vue").VNode[];
|
|
83
83
|
};
|
|
84
84
|
}) & {
|
|
85
85
|
install: (app: App, options?: SDOptions) => void;
|
|
@@ -152,8 +152,6 @@ export declare const PerformantEllipsis: {
|
|
|
152
152
|
default?: (props: {}) => any;
|
|
153
153
|
} & {
|
|
154
154
|
default?: (props: {}) => any;
|
|
155
|
-
} & {
|
|
156
|
-
default?: (props: {}) => any;
|
|
157
155
|
} & {
|
|
158
156
|
tooltip?: (props: {}) => any;
|
|
159
157
|
};
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import type { PropType } from 'vue';
|
|
2
2
|
import type { EllipsisTooltipProps } from './interface';
|
|
3
|
-
declare var __VLS_12: {},
|
|
3
|
+
declare var __VLS_12: {}, __VLS_22: {}, __VLS_25: {};
|
|
4
4
|
type __VLS_Slots = {} & {
|
|
5
5
|
default?: (props: typeof __VLS_12) => any;
|
|
6
6
|
} & {
|
|
7
|
-
default?: (props: typeof
|
|
7
|
+
default?: (props: typeof __VLS_22) => any;
|
|
8
8
|
} & {
|
|
9
|
-
|
|
10
|
-
} & {
|
|
11
|
-
tooltip?: (props: typeof __VLS_27) => any;
|
|
9
|
+
tooltip?: (props: typeof __VLS_25) => any;
|
|
12
10
|
};
|
|
13
11
|
declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
14
12
|
lineClamp: {
|
|
@@ -2,7 +2,7 @@ import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/es
|
|
|
2
2
|
import { getPrefixCls } from "../_utils/global-config.js";
|
|
3
3
|
import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/asyncToGenerator.js";
|
|
4
4
|
import ellipsis_default from "./ellipsis.js";
|
|
5
|
-
import { computed, createBlock,
|
|
5
|
+
import { computed, createBlock, createSlots, defineComponent, mergeProps, nextTick, openBlock, renderSlot, resolveDynamicComponent, shallowRef, withCtx } from "vue";
|
|
6
6
|
//#region components/ellipsis/performant-ellipsis.vue?vue&type=script&setup=true&lang.ts
|
|
7
7
|
var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
|
|
8
8
|
name: "PerformantEllipsis",
|
|
@@ -10,27 +10,17 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
|
|
|
10
10
|
}), {}, {
|
|
11
11
|
__name: "performant-ellipsis",
|
|
12
12
|
props: {
|
|
13
|
-
/**
|
|
14
|
-
* @zh 最大显示行数。不传时为单行省略。
|
|
15
|
-
* @en Maximum number of displayed lines. Single-line ellipsis is used by default.
|
|
16
|
-
*/
|
|
13
|
+
/** @zh 最大显示行数。不传时为单行省略。 @en Maximum displayed lines. */
|
|
17
14
|
lineClamp: {
|
|
18
15
|
type: [Number, String],
|
|
19
16
|
default: void 0
|
|
20
17
|
},
|
|
21
|
-
/**
|
|
22
|
-
* @zh 展开的触发方式
|
|
23
|
-
* @en Trigger mode for expansion
|
|
24
|
-
* @values 'click'
|
|
25
|
-
*/
|
|
18
|
+
/** @zh 展开的触发方式 @en Trigger mode for expansion */
|
|
26
19
|
expandTrigger: {
|
|
27
20
|
type: String,
|
|
28
21
|
default: void 0
|
|
29
22
|
},
|
|
30
|
-
/**
|
|
31
|
-
* @zh 省略时是否展示提示。可传入 Tooltip 属性。
|
|
32
|
-
* @en Whether to show a tooltip when ellipsis is active. Tooltip props are supported.
|
|
33
|
-
*/
|
|
23
|
+
/** @zh 省略时是否展示提示。可传入 Tooltip 属性。 @en Whether to show a tooltip when ellipsis is active. */
|
|
34
24
|
tooltip: {
|
|
35
25
|
type: [Boolean, Object],
|
|
36
26
|
default: true
|
|
@@ -49,8 +39,8 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
|
|
|
49
39
|
* @slot tooltip
|
|
50
40
|
*/
|
|
51
41
|
const prefixCls = getPrefixCls("ellipsis");
|
|
52
|
-
const activated =
|
|
53
|
-
const ellipsisRef =
|
|
42
|
+
const activated = shallowRef(false);
|
|
43
|
+
const ellipsisRef = shallowRef();
|
|
54
44
|
const isLineClamp = computed(() => props.lineClamp !== void 0);
|
|
55
45
|
const componentTag = computed(() => isLineClamp.value ? "div" : "span");
|
|
56
46
|
const rootCls = computed(() => [prefixCls, {
|
|
@@ -74,9 +64,8 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
|
|
|
74
64
|
};
|
|
75
65
|
});
|
|
76
66
|
const getActivatedTriggerElement = () => {
|
|
77
|
-
var
|
|
78
|
-
|
|
79
|
-
return (_ellipsisInstance$tri = ellipsisInstance === null || ellipsisInstance === void 0 ? void 0 : ellipsisInstance.triggerRef) !== null && _ellipsisInstance$tri !== void 0 ? _ellipsisInstance$tri : ellipsisInstance === null || ellipsisInstance === void 0 ? void 0 : ellipsisInstance.$el;
|
|
67
|
+
var _ellipsisRef$value;
|
|
68
|
+
return (_ellipsisRef$value = ellipsisRef.value) === null || _ellipsisRef$value === void 0 ? void 0 : _ellipsisRef$value.triggerElement;
|
|
80
69
|
};
|
|
81
70
|
const replayInteraction = (type) => {
|
|
82
71
|
const triggerElement = getActivatedTriggerElement();
|
|
@@ -87,7 +76,7 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
|
|
|
87
76
|
return;
|
|
88
77
|
}
|
|
89
78
|
if (type === "focus") {
|
|
90
|
-
triggerElement.
|
|
79
|
+
triggerElement.focus();
|
|
91
80
|
return;
|
|
92
81
|
}
|
|
93
82
|
triggerElement.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
@@ -97,6 +86,8 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
|
|
|
97
86
|
if (activated.value) return;
|
|
98
87
|
activated.value = true;
|
|
99
88
|
yield nextTick();
|
|
89
|
+
yield nextTick();
|
|
90
|
+
yield new Promise((resolve) => requestAnimationFrame(() => resolve()));
|
|
100
91
|
replayInteraction(interactionType);
|
|
101
92
|
});
|
|
102
93
|
return function activate(_x) {
|
|
@@ -120,10 +111,7 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
|
|
|
120
111
|
onFocus: handleFocus,
|
|
121
112
|
onClick: handleClick
|
|
122
113
|
}), {
|
|
123
|
-
default: withCtx(() => [
|
|
124
|
-
key: 1,
|
|
125
|
-
class: normalizeClass(`${unref(prefixCls)}-content`)
|
|
126
|
-
}, [renderSlot(_ctx.$slots, "default")], 2))]),
|
|
114
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
127
115
|
_: 3
|
|
128
116
|
}, 16, ["class", "style"])) : (openBlock(), createBlock(ellipsis_default, mergeProps({
|
|
129
117
|
key: 1,
|
|
@@ -23,7 +23,6 @@
|
|
|
23
23
|
}
|
|
24
24
|
.sd-ellipsis--single-line {
|
|
25
25
|
overflow: hidden;
|
|
26
|
-
white-space: nowrap;
|
|
27
26
|
text-overflow: ellipsis;
|
|
28
27
|
}
|
|
29
28
|
.sd-ellipsis-content {
|
|
@@ -31,7 +30,6 @@
|
|
|
31
30
|
max-width: none;
|
|
32
31
|
}
|
|
33
32
|
.sd-ellipsis--line-clamp {
|
|
34
|
-
display: -webkit-box;
|
|
35
33
|
width: 100%;
|
|
36
34
|
word-break: break-word;
|
|
37
35
|
}
|
|
@@ -9,8 +9,10 @@
|
|
|
9
9
|
|
|
10
10
|
&--single-line {
|
|
11
11
|
overflow: hidden;
|
|
12
|
-
white-space: nowrap;
|
|
13
12
|
text-overflow: ellipsis;
|
|
13
|
+
|
|
14
|
+
// 不要在共享类上设置 nowrap:RichLineClamp 的隐藏探针会继承该类,
|
|
15
|
+
// 探针永远只有一行时 clampchange 将无法报告溢出。单行行为由组件内联样式控制。
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
&-content {
|
|
@@ -19,7 +21,6 @@
|
|
|
19
21
|
}
|
|
20
22
|
|
|
21
23
|
&--line-clamp {
|
|
22
|
-
display: -webkit-box;
|
|
23
24
|
width: 100%;
|
|
24
25
|
word-break: break-word;
|
|
25
26
|
}
|
|
@@ -5,8 +5,8 @@ import { KEYBOARD_KEY } from "../_utils/keyboard.js";
|
|
|
5
5
|
import IconClose from "../icon/icon-close/index.js";
|
|
6
6
|
import { useI18n } from "../locale/index.js";
|
|
7
7
|
import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/asyncToGenerator.js";
|
|
8
|
-
import IconLoading from "../icon/icon-loading/index.js";
|
|
9
8
|
import usePopupManager from "../_hooks/use-popup-manager.js";
|
|
9
|
+
import IconLoading from "../icon/icon-loading/index.js";
|
|
10
10
|
import usePopupContainer from "../_hooks/use-popup-container.js";
|
|
11
11
|
import usePopupOverflowHidden from "../_hooks/use-popup-overflow-hidden.js";
|
|
12
12
|
import Image from "../image/index.js";
|
|
@@ -3,9 +3,9 @@ import { getPrefixCls } from "../_utils/global-config.js";
|
|
|
3
3
|
import { isBoolean } from "../_utils/is.js";
|
|
4
4
|
import { isServerRendering } from "../_utils/dom.js";
|
|
5
5
|
import { useI18n } from "../locale/index.js";
|
|
6
|
+
import { omit } from "../_utils/omit.js";
|
|
6
7
|
import useMergeState from "../_hooks/use-merge-state.js";
|
|
7
8
|
import IconLoading from "../icon/icon-loading/index.js";
|
|
8
|
-
import { omit } from "../_utils/omit.js";
|
|
9
9
|
import IconImageClose from "../icon/icon-image-close/index.js";
|
|
10
10
|
import { PreviewGroupInjectionKey } from "./context.js";
|
|
11
11
|
import useImageLoadStatus from "./hooks/use-image-load-status.js";
|
|
@@ -5,9 +5,9 @@ import { throttleByRaf } from "../_utils/throttle-by-raf.js";
|
|
|
5
5
|
import { KEYBOARD_KEY } from "../_utils/keyboard.js";
|
|
6
6
|
import IconClose from "../icon/icon-close/index.js";
|
|
7
7
|
import { useI18n } from "../locale/index.js";
|
|
8
|
+
import usePopupManager from "../_hooks/use-popup-manager.js";
|
|
8
9
|
import useMergeState from "../_hooks/use-merge-state.js";
|
|
9
10
|
import IconLoading from "../icon/icon-loading/index.js";
|
|
10
|
-
import usePopupManager from "../_hooks/use-popup-manager.js";
|
|
11
11
|
import usePopupContainer from "../_hooks/use-popup-container.js";
|
|
12
12
|
import usePopupOverflowHidden from "../_hooks/use-popup-overflow-hidden.js";
|
|
13
13
|
import useImageLoadStatus from "./hooks/use-image-load-status.js";
|