@sdata/web-vue 4.2.0 → 4.3.1

package/es/typography/base.vue_vue_type_script_setup_true_lang.js

@@ -1,18 +1,16 @@
 import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isObject } from "../_utils/is.js";
-import resize_observer_default from "../_components/resize-observer.js";
-import { caf, raf } from "../_utils/raf.js";
-import useMergeState from "../_hooks/use-merge-state.js";
+import { RichLineClamp } from "../clamp/index.js";
 import { omit } from "../_utils/omit.js";
 import Tooltip from "../tooltip/index.js";
+import useMergeState from "../_hooks/use-merge-state.js";
 import Popover from "../popover/index.js";
 import edit_content_default from "./edit-content.js";
 import typography_content_default from "./typography-content.js";
 import typography_operations_default from "./typography-operations.js";
 import getInnerText from "./utils/getInnerText.js";
-import measure_default from "./utils/measure.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onMounted, onUnmounted, onUpdated, openBlock, reactive, ref, resolveDynamicComponent, toDisplayString, toRef, unref, useAttrs, useSlots, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onMounted, onUnmounted, onUpdated, openBlock, reactive, resolveDynamicComponent, shallowRef, toDisplayString, toRef, unref, useAttrs, useSlots, withCtx } from "vue";
 import { createReusableTemplate } from "@vueuse/core";
 import copy from "copy-to-clipboard";
 //#region components/typography/base.vue?vue&type=script&setup=true&lang.ts
@@ -57,27 +55,26 @@ var base_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		editTooltipProps: Object,
 		copyTooltipProps: Object
 	},
-	emits: {
-		"editStart": () => true,
-		"change": (_text) => true,
-		"update:editText": (_text) => true,
-		"editEnd": () => true,
-		"update:editing": (_editing) => true,
-		"copy": (_text) => true,
-		"ellipsis": (_isEllipsis) => true,
-		"expand": (_expanded) => true
-	},
+	emits: [
+		"editStart",
+		"change",
+		"update:editText",
+		"editEnd",
+		"update:editing",
+		"copy",
+		"ellipsis",
+		"expand"
+	],
 	setup(__props, { emit: __emit }) {
 		const normalizeEllipsisConfig = (config) => {
-			const showTooltip = !!config.showTooltip;
+			const showTooltip = Boolean(config.showTooltip);
 			const TooltipComponent = isObject(config.showTooltip) && config.showTooltip.type === "popover" ? Popover : Tooltip;
 			const tooltipProps = isObject(config.showTooltip) && config.showTooltip.props || {};
 			return _objectSpread2(_objectSpread2({
 				rows: 1,
 				suffix: "",
 				ellipsisStr: "...",
-				expandable: false,
-				css: false
+				expandable: false
 			}, omit(config, ["showTooltip"])), {}, {
 				showTooltip,
 				TooltipComponent,
@@ -88,31 +85,71 @@ var base_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		const emit = __emit;
 		const attrs = useAttrs();
 		const slots = useSlots();
-		const [DefineCssOuter, ReuseCssOuter] = createReusableTemplate();
+		const [DefineDisplay, ReuseDisplay] = createReusableTemplate();
 		const prefixCls = getPrefixCls("typography");
 		const classNames = computed(() => [prefixCls, {
 			[`${prefixCls}-${props.type}`]: props.type,
 			[`${prefixCls}-disabled`]: props.disabled
 		}]);
-		const wrapperRef = ref();
-		const fullText = ref("");
+		const fullText = shallowRef("");
+		const isEllipsis = shallowRef(false);
+		const expanded = shallowRef(false);
 		const [editing, setEditing] = useMergeState(props.defaultEditing, reactive({ value: toRef(props, "editing") }));
 		const mergeEditing = computed(() => props.editable && editing.value);
 		const editTextValue = computed(() => {
 			var _props$editText;
 			return (_props$editText = props.editText) !== null && _props$editText !== void 0 ? _props$editText : fullText.value;
 		});
+		const ellipsisConfig = computed(() => normalizeEllipsisConfig(isObject(props.ellipsis) && props.ellipsis || {}));
+		const rootAttrs = computed(() => _objectSpread2(_objectSpread2({}, isEllipsis.value && !expanded.value && !ellipsisConfig.value.showTooltip ? { title: fullText.value } : {}), attrs));
+		const contentTags = computed(() => {
+			const tags = [];
+			if (props.bold) tags.push("b");
+			if (props.underline) tags.push("u");
+			if (props.delete) tags.push("del");
+			if (props.code) tags.push("code");
+			if (props.mark) tags.push("mark");
+			return tags;
+		});
+		const markStyle = computed(() => {
+			const style = {};
+			if (isObject(props.mark) && props.mark.color) style.backgroundColor = props.mark.color;
+			return style;
+		});
+		const escapeHtml = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+		const styleAttribute = (style) => {
+			const text = style ? Object.entries(style).map(([name, value]) => `${name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}:${value}`).join(";") : "";
+			return text ? ` style="${escapeHtml(text)}"` : "";
+		};
+		const richHtml = computed(() => [...contentTags.value].reverse().reduce((html, tag) => {
+			return `<${tag}${tag === "mark" ? styleAttribute(markStyle.value) : ""}>${html}</${tag}>`;
+		}, escapeHtml(fullText.value)));
+		const getChildren = () => {
+			var _slots$default;
+			return ((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)) || [];
+		};
+		const updateFullText = () => {
+			if (props.ellipsis || props.copyable || props.editable) {
+				const nextFullText = getInnerText(getChildren());
+				if (fullText.value !== nextFullText) fullText.value = nextFullText;
+			}
+		};
+		const handleClampChange = (value) => {
+			if (isEllipsis.value !== value) {
+				isEllipsis.value = value;
+				emit("ellipsis", value);
+			}
+		};
 		const onEditStart = () => {
 			emit("update:editing", true);
 			emit("editStart");
 			setEditing(true);
 		};
-		const onEditChange = (text) => {
-			emit("update:editText", text);
-			emit("change", text);
-		};
 		const handleEditContentChange = (text) => {
-			if (text !== editTextValue.value) onEditChange(text);
+			if (text !== editTextValue.value) {
+				emit("update:editText", text);
+				emit("change", text);
+			}
 		};
 		const onEditEnd = () => {
 			if (!editing.value) return;
@@ -120,37 +157,28 @@ var base_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			emit("editEnd");
 			setEditing(false);
 		};
-		const isCopied = ref(false);
+		const isCopied = shallowRef(false);
 		let copyTimer = null;
 		const onCopyClick = () => {
 			var _props$copyText;
 			const text = (_props$copyText = props.copyText) !== null && _props$copyText !== void 0 ? _props$copyText : fullText.value;
-			copy(text || "", props.clipboardProps);
+			copy(text, props.clipboardProps);
 			isCopied.value = true;
 			emit("copy", text);
-			copyTimer = setTimeout(() => {
-				isCopied.value = false;
-			}, props.copyDelay);
+			copyTimer = setTimeout(() => isCopied.value = false, props.copyDelay);
 		};
-		const isEllipsis = ref(false);
-		const expanded = ref(false);
-		const ellipsisText = ref("");
-		const ellipsisConfig = computed(() => normalizeEllipsisConfig(isObject(props.ellipsis) && props.ellipsis || {}));
-		const showEllipsis = computed(() => isEllipsis.value && !expanded.value);
-		const rootAttrs = computed(() => _objectSpread2(_objectSpread2({}, showEllipsis.value && !ellipsisConfig.value.showTooltip ? { title: fullText.value } : {}), attrs));
-		let rafId = null;
 		const onExpandClick = () => {
 			expanded.value = !expanded.value;
 			emit("expand", expanded.value);
 		};
-		const getOperationsProps = (forceRenderExpand = false) => ({
+		const getOperationsProps = () => ({
 			editable: props.editable,
 			copyable: props.copyable,
 			expandable: ellipsisConfig.value.expandable,
 			isCopied: isCopied.value,
-			isEllipsis: ellipsisConfig.value.css ? showCSSTooltip.value : isEllipsis.value,
+			isEllipsis: isEllipsis.value,
 			expanded: expanded.value,
-			forceRenderExpand: forceRenderExpand || ellipsisConfig.value.css && expanded.value,
+			forceRenderExpand: expanded.value,
 			editTooltipProps: props.editTooltipProps,
 			copyTooltipProps: props.copyTooltipProps,
 			onEdit: onEditStart,
@@ -160,88 +188,33 @@ var base_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			copyIcon: slots["copy-icon"],
 			expandNode: slots["expand-node"]
 		});
-		const calEllipsis = () => {
-			if (!wrapperRef.value) return;
-			const result = measure_default(wrapperRef.value, ellipsisConfig.value, getOperationsProps(!!ellipsisConfig.value.expandable), fullText.value);
-			if (isEllipsis.value !== result.ellipsis) {
-				isEllipsis.value = result.ellipsis;
-				if (!ellipsisConfig.value.css) emit("ellipsis", result.ellipsis);
-			}
-			if (ellipsisText.value !== result.text) ellipsisText.value = result.text || "";
-		};
-		const resizeOnNextFrame = () => {
-			if (!props.ellipsis || expanded.value) return;
-			if (rafId != null) caf(rafId);
-			rafId = raf(calEllipsis);
-		};
-		watch(() => ellipsisConfig.value.rows, resizeOnNextFrame);
-		watch(toRef(props, "ellipsis"), (value) => {
-			if (value) resizeOnNextFrame();
-			else isEllipsis.value = false;
-		});
-		let children = [];
-		const getChildren = () => {
-			var _slots$default;
-			children = ((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)) || [];
-			return children;
-		};
-		const contentTags = computed(() => {
-			const tags = [];
-			if (props.bold) tags.push("b");
-			if (props.underline) tags.push("u");
-			if (props.delete) tags.push("del");
-			if (props.code) tags.push("code");
-			if (props.mark) tags.push("mark");
-			return tags;
-		});
-		const markStyle = computed(() => isObject(props.mark) && props.mark.color ? { backgroundColor: props.mark.color } : {});
-		const getDisplayContent = () => showEllipsis.value ? ellipsisText.value : getChildren();
-		const updateFullText = () => {
-			if (props.ellipsis || props.copyable || props.editable) {
-				const text = getInnerText(children);
-				if (text !== fullText.value) {
-					fullText.value = text;
-					resizeOnNextFrame();
-				}
-			}
-		};
 		onMounted(updateFullText);
 		onUpdated(updateFullText);
-		const contentRef = ref();
-		const showCSSTooltip = ref(false);
-		const calTooltip = () => {
-			if (wrapperRef.value && contentRef.value) {
-				const show = contentRef.value.offsetHeight > wrapperRef.value.offsetHeight;
-				if (show !== showCSSTooltip.value) {
-					showCSSTooltip.value = show;
-					emit("ellipsis", show);
-				}
-			}
-		};
-		const ellipsisStyle = computed(() => expanded.value ? {} : {
-			"overflow": "hidden",
-			"text-overflow": "ellipsis",
-			"display": "-webkit-box",
-			"-webkit-line-clamp": ellipsisConfig.value.rows,
-			"-webkit-box-orient": "vertical"
-		});
 		onUnmounted(() => {
 			if (copyTimer) clearTimeout(copyTimer);
-			if (rafId != null) caf(rafId);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineCssOuter), null, {
-				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(props.component), mergeProps({
-					ref_key: "wrapperRef",
-					ref: wrapperRef
-				}, rootAttrs.value, {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineDisplay), null, {
+				default: withCtx(() => [props.ellipsis ? (openBlock(), createBlock(unref(RichLineClamp), mergeProps({ key: 0 }, rootAttrs.value, {
+					as: props.component,
 					class: classNames.value,
-					style: ellipsisStyle.value
+					html: richHtml.value,
+					"max-lines": ellipsisConfig.value.rows,
+					ellipsis: ellipsisConfig.value.ellipsisStr,
+					expanded: expanded.value,
+					onClampchange: handleClampChange
 				}), {
-					default: withCtx(() => [createElementVNode("span", {
-						ref_key: "contentRef",
-						ref: contentRef
-					}, [createVNode(typography_content_default, {
+					after: withCtx(() => [createTextVNode(toDisplayString(ellipsisConfig.value.suffix) + " ", 1), createVNode(typography_operations_default, normalizeProps(guardReactiveProps(getOperationsProps())), null, 16)]),
+					_: 1
+				}, 16, [
+					"as",
+					"class",
+					"html",
+					"max-lines",
+					"ellipsis",
+					"expanded"
+				])) : (openBlock(), createBlock(resolveDynamicComponent(props.component), mergeProps({ key: 1 }, rootAttrs.value, { class: classNames.value }), {
+					default: withCtx(() => [createVNode(typography_content_default, {
 						content: getChildren(),
 						tags: contentTags.value,
 						"mark-style": markStyle.value
@@ -249,64 +222,20 @@ var base_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 						"content",
 						"tags",
 						"mark-style"
-					])], 512)]),
+					]), createVNode(typography_operations_default, normalizeProps(guardReactiveProps(getOperationsProps())), null, 16)]),
 					_: 1
-				}, 16, ["class", "style"]))]),
+				}, 16, ["class"]))]),
 				_: 1
 			}), mergeEditing.value ? (openBlock(), createBlock(edit_content_default, {
 				key: 0,
 				text: editTextValue.value,
 				onChange: handleEditContentChange,
 				onEnd: onEditEnd
-			}, null, 8, ["text"])) : ellipsisConfig.value.css ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [showCSSTooltip.value ? (openBlock(), createBlock(resolveDynamicComponent(ellipsisConfig.value.TooltipComponent), mergeProps({ key: 0 }, ellipsisConfig.value.tooltipProps, { onResize: calTooltip }), {
+			}, null, 8, ["text"])) : props.ellipsis && ellipsisConfig.value.showTooltip ? (openBlock(), createBlock(resolveDynamicComponent(ellipsisConfig.value.TooltipComponent), mergeProps({ key: 1 }, ellipsisConfig.value.tooltipProps, { disabled: !isEllipsis.value }), {
 				content: withCtx(() => [createTextVNode(toDisplayString(fullText.value), 1)]),
-				default: withCtx(() => [createVNode(unref(ReuseCssOuter))]),
-				_: 1
-			}, 16)) : (openBlock(), createBlock(resize_observer_default, {
-				key: 1,
-				onResize: calTooltip
-			}, {
-				default: withCtx(() => [createVNode(unref(ReuseCssOuter))]),
-				_: 1
-			}))], 64)) : (openBlock(), createBlock(resize_observer_default, {
-				key: 2,
-				onResize: resizeOnNextFrame
-			}, {
-				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(props.component), mergeProps({
-					ref_key: "wrapperRef",
-					ref: wrapperRef
-				}, rootAttrs.value, { class: classNames.value }), {
-					default: withCtx(() => [
-						showEllipsis.value && ellipsisConfig.value.showTooltip ? (openBlock(), createBlock(resolveDynamicComponent(ellipsisConfig.value.TooltipComponent), normalizeProps(mergeProps({ key: 0 }, ellipsisConfig.value.tooltipProps)), {
-							content: withCtx(() => [createTextVNode(toDisplayString(fullText.value), 1)]),
-							default: withCtx(() => [createElementVNode("span", null, [createVNode(typography_content_default, {
-								content: getDisplayContent(),
-								tags: contentTags.value,
-								"mark-style": markStyle.value
-							}, null, 8, [
-								"content",
-								"tags",
-								"mark-style"
-							])])]),
-							_: 1
-						}, 16)) : (openBlock(), createBlock(typography_content_default, {
-							key: 1,
-							content: getDisplayContent(),
-							tags: contentTags.value,
-							"mark-style": markStyle.value
-						}, null, 8, [
-							"content",
-							"tags",
-							"mark-style"
-						])),
-						showEllipsis.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(ellipsisConfig.value.ellipsisStr), 1)], 64)) : createCommentVNode("", true),
-						createTextVNode(" " + toDisplayString(ellipsisConfig.value.suffix) + " ", 1),
-						createVNode(typography_operations_default, normalizeProps(guardReactiveProps(getOperationsProps())), null, 16)
-					]),
-					_: 1
-				}, 16, ["class"]))]),
+				default: withCtx(() => [createVNode(unref(ReuseDisplay))]),
 				_: 1
-			}))], 64);
+			}, 16, ["disabled"])) : (openBlock(), createBlock(unref(ReuseDisplay), { key: 2 }))], 64);
 		};
 	}
 }));

package/es/typography/interface.d.ts

@@ -1,5 +1,5 @@
 import type { Options as ClipboardOptions } from 'copy-to-clipboard';
-import { VNode } from 'vue';
+import type { VNode } from 'vue';
 export interface EllipsisConfig {
     rows?: number;
     expandable?: boolean;
@@ -9,7 +9,6 @@ export interface EllipsisConfig {
         type: 'tooltip' | 'popover';
         props: Record<string, unknown>;
     };
-    css?: boolean;
 }
 export interface EllipsisInternalConfig extends Required<EllipsisConfig> {
     showTooltip: boolean;

package/es/typography/style/index.css

@@ -170,9 +170,4 @@
   margin-top: -5px;
   margin-right: -13px;
   margin-bottom: calc(1em - 4px - 1px);
-}
-.sd-typography-css-operation {
-  margin-top: -1em;
-  margin-bottom: 1em;
-  text-align: right;
 }

package/es/typography/style/index.scss

@@ -198,11 +198,4 @@ $typography-prefix-cls: string.unquote('#{theme.$prefix}-typography');
     margin-right: -($textarea-padding-horizontal + $input-border-width);
     margin-bottom: calc(1em - $textarea-padding-vertical - $input-border-width);
   }
-
-  // css
-  &-css-operation {
-    margin-top: -1em;
-    margin-bottom: 1em;
-    text-align: right;
-  }
 }

package/json/vetur-attributes.json

@@ -953,26 +953,6 @@
     "description": "Whether to hide popup when the user selects",
     "type": "boolean"
   },
-  "sd-ellipsis/line-clamp": {
-    "description": "Maximum number of displayed lines. Single-line ellipsis is used by default.",
-    "type": "number | string"
-  },
-  "sd-ellipsis/expand-trigger": {
-    "description": "Trigger mode for expansion"
-  },
-  "sd-ellipsis/tooltip": {
-    "description": "Whether to show a tooltip when ellipsis is active. Tooltip props are supported."
-  },
-  "sd-performant-ellipsis/line-clamp": {
-    "description": "Maximum number of displayed lines. Single-line ellipsis is used by default.",
-    "type": "number | string"
-  },
-  "sd-performant-ellipsis/expand-trigger": {
-    "description": "Trigger mode for expansion"
-  },
-  "sd-performant-ellipsis/tooltip": {
-    "description": "Whether to show a tooltip when ellipsis is active. Tooltip props are supported."
-  },
   "sd-empty/description": {
     "description": "Description",
     "type": "string"

package/json/vetur-tags.json

@@ -437,18 +437,10 @@
     ]
   },
   "sd-ellipsis": {
-    "attributes": [
-      "line-clamp",
-      "expand-trigger",
-      "tooltip"
-    ]
+    "attributes": []
   },
   "sd-performant-ellipsis": {
-    "attributes": [
-      "line-clamp",
-      "expand-trigger",
-      "tooltip"
-    ]
+    "attributes": []
   },
   "sd-empty": {
     "attributes": [

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -2370,63 +2370,13 @@
         },
         {
           "name": "sd-ellipsis",
-          "attributes": [
-            {
-              "name": "line-clamp",
-              "description": "Maximum number of displayed lines. Single-line ellipsis is used by default.",
-              "value": {
-                "type": "number | string",
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "expand-trigger",
-              "description": "Trigger mode for expansion",
-              "value": {
-                "type": "'click'",
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "tooltip",
-              "description": "Whether to show a tooltip when ellipsis is active. Tooltip props are supported.",
-              "value": {
-                "type": "boolean | EllipsisTooltipProps",
-                "kind": "expression"
-              }
-            }
-          ],
+          "attributes": [],
           "events": [],
           "slots": []
         },
         {
           "name": "sd-performant-ellipsis",
-          "attributes": [
-            {
-              "name": "line-clamp",
-              "description": "Maximum number of displayed lines. Single-line ellipsis is used by default.",
-              "value": {
-                "type": "number | string",
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "expand-trigger",
-              "description": "Trigger mode for expansion",
-              "value": {
-                "type": "'click'",
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "tooltip",
-              "description": "Whether to show a tooltip when ellipsis is active. Tooltip props are supported.",
-              "value": {
-                "type": "boolean | EllipsisTooltipProps",
-                "kind": "expression"
-              }
-            }
-          ],
+          "attributes": [],
           "events": [],
           "slots": []
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",
@@ -81,6 +81,7 @@
     "scroll-into-view-if-needed": "^3.1.0",
     "virtua": "^0.49.3",
     "vue": "^3.5.41",
+    "vue-clamp": "^1.6.0",
     "vue-draggable-plus": "^0.6.1"
   },
   "devDependencies": {

package/es/typography/utils/measure.d.ts

@@ -1,6 +0,0 @@
-import type { EllipsisInternalConfig } from '../interface';
-declare const _default: (originElement: HTMLElement, ellipsisConfig: EllipsisInternalConfig, operationsProps: Record<string, unknown>, fullText: string) => {
-    ellipsis: boolean;
-    text: string;
-};
-export default _default;

package/es/typography/utils/measure.js

@@ -1,69 +0,0 @@
-import typography_operations_default from "../typography-operations.js";
-import { createApp } from "vue";
-//#region components/typography/utils/measure.ts
-var ellipsisContainer;
-function styleToString(style) {
-	return Array.prototype.slice.apply(style).map((name) => `${name}: ${style.getPropertyValue(name)};`).join("");
-}
-function pxToNumber(value) {
-	if (!value) return 0;
-	const match = value.match(/^\d*(\.\d*)?/);
-	return match ? Number(match[0]) : 0;
-}
-var measure_default = (originElement, ellipsisConfig, operationsProps, fullText) => {
-	if (!ellipsisContainer) {
-		ellipsisContainer = document.createElement("div");
-		document.body.appendChild(ellipsisContainer);
-	}
-	const { rows, suffix, ellipsisStr } = ellipsisConfig;
-	const originStyle = window.getComputedStyle(originElement);
-	const styleString = styleToString(originStyle);
-	const lineHeight = pxToNumber(originStyle.lineHeight);
-	const maxHeight = Math.round(lineHeight * rows + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
-	ellipsisContainer.setAttribute("style", styleString);
-	ellipsisContainer.setAttribute("aria-hidden", "true");
-	ellipsisContainer.style.height = "auto";
-	ellipsisContainer.style.minHeight = "auto";
-	ellipsisContainer.style.maxHeight = "auto";
-	ellipsisContainer.style.position = "fixed";
-	ellipsisContainer.style.left = "0";
-	ellipsisContainer.style.top = "-99999999px";
-	ellipsisContainer.style.zIndex = "-200";
-	ellipsisContainer.style.whiteSpace = "normal";
-	const operationsApp = createApp(typography_operations_default, operationsProps);
-	operationsApp.mount(ellipsisContainer);
-	const operationsChildNodes = Array.prototype.slice.apply(ellipsisContainer.cloneNode(true).childNodes);
-	operationsApp.unmount();
-	const ellipsisTextNode = document.createTextNode(`${ellipsisStr}${suffix}`);
-	ellipsisContainer.appendChild(ellipsisTextNode);
-	operationsChildNodes.forEach((operationNode) => {
-		ellipsisContainer.appendChild(operationNode);
-	});
-	const textNode = document.createTextNode(fullText);
-	ellipsisContainer.insertBefore(textNode, ellipsisTextNode);
-	function inRange() {
-		return ellipsisContainer.offsetHeight <= maxHeight;
-	}
-	if (inRange()) return {
-		ellipsis: false,
-		text: fullText
-	};
-	function measureText(textNode, startLoc = 0, endLoc = fullText.length) {
-		const midLoc = Math.floor((startLoc + endLoc) / 2);
-		textNode.textContent = fullText.slice(0, midLoc);
-		if (startLoc >= endLoc - 1) for (let step = endLoc; step >= startLoc; step -= 1) {
-			const currentStepText = fullText.slice(0, step);
-			textNode.textContent = currentStepText;
-			if (inRange() || !currentStepText) return;
-		}
-		if (inRange()) measureText(textNode, midLoc, endLoc);
-		else measureText(textNode, startLoc, midLoc);
-	}
-	measureText(textNode);
-	return {
-		text: textNode.textContent,
-		ellipsis: true
-	};
-};
-//#endregion
-export { measure_default as default };