@sdata/web-vue 1.4.1 → 1.6.0

package/es/ellipsis/ellipsis.vue_vue_type_script_lang.js

@@ -0,0 +1,170 @@
+import { getPrefixCls } from "../_utils/global-config.js";
+import { isObject } from "../_utils/is.js";
+import resize_observer_v2_default from "../_components/resize-observer-v2.js";
+import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/asyncToGenerator.js";
+import Tooltip from "../tooltip/index.js";
+import { _objectWithoutProperties } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectWithoutProperties.js";
+import { computed, defineComponent, nextTick, onMounted, onUpdated, ref, watch } from "vue";
+//#region components/ellipsis/ellipsis.vue?vue&type=script&lang.ts
+var _excluded = ["disabled"];
+var ellipsis_vue_vue_type_script_lang_default = defineComponent({
+	name: "Ellipsis",
+	components: {
+		ResizeObserver: resize_observer_v2_default,
+		Tooltip
+	},
+	inheritAttrs: false,
+	props: {
+		lineClamp: {
+			type: [Number, String],
+			default: void 0
+		},
+		expandTrigger: {
+			type: String,
+			default: void 0
+		},
+		tooltip: {
+			type: [Boolean, Object],
+			default: true
+		}
+	},
+	setup(props) {
+		const prefixCls = getPrefixCls("ellipsis");
+		const triggerRef = ref();
+		const contentRef = ref();
+		const text = ref("");
+		const isEllipsis = ref(false);
+		const expanded = ref(false);
+		const isLineClamp = computed(() => props.lineClamp !== void 0);
+		const componentTag = computed(() => isLineClamp.value ? "div" : "span");
+		const tooltipConfig = computed(() => {
+			if (isObject(props.tooltip)) return props.tooltip;
+			return {};
+		});
+		const tooltipBindings = computed(() => {
+			const _tooltipConfig$value = tooltipConfig.value, { disabled: _disabled } = _tooltipConfig$value;
+			return _objectWithoutProperties(_tooltipConfig$value, _excluded);
+		});
+		const enableTooltip = computed(() => props.tooltip !== false);
+		const tooltipDisabled = computed(() => !isEllipsis.value || expanded.value || Boolean(tooltipConfig.value.disabled));
+		const isExpandable = computed(() => props.expandTrigger === "click" && (isEllipsis.value || expanded.value));
+		const rootCls = computed(() => [prefixCls, {
+			[`${prefixCls}--single-line`]: !isLineClamp.value && !expanded.value,
+			[`${prefixCls}--line-clamp`]: isLineClamp.value,
+			[`${prefixCls}--expandable`]: isExpandable.value,
+			[`${prefixCls}--expanded`]: expanded.value
+		}]);
+		const rootStyle = computed(() => {
+			if (isLineClamp.value) {
+				if (expanded.value) return {
+					overflow: "visible",
+					textOverflow: "clip",
+					display: "block",
+					whiteSpace: "normal",
+					WebkitLineClamp: "unset",
+					WebkitBoxOrient: "vertical"
+				};
+				return {
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					display: "-webkit-box",
+					whiteSpace: "normal",
+					WebkitLineClamp: String(props.lineClamp),
+					WebkitBoxOrient: "vertical"
+				};
+			}
+			if (expanded.value) return {
+				overflow: "visible",
+				textOverflow: "clip",
+				whiteSpace: "normal"
+			};
+			return {
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			};
+		});
+		const nativeTitle = computed(() => {
+			if ((!enableTooltip.value || Boolean(tooltipConfig.value.disabled)) && isEllipsis.value) return text.value;
+		});
+		const buttonRole = computed(() => isExpandable.value ? "button" : void 0);
+		const buttonTabIndex = computed(() => isExpandable.value ? 0 : void 0);
+		const ariaExpanded = computed(() => props.expandTrigger === "click" ? String(expanded.value) : void 0);
+		const syncText = () => {
+			var _triggerRef$value$tex, _triggerRef$value;
+			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 : "";
+			if (nextText !== text.value) text.value = nextText;
+		};
+		const calculateEllipsis = () => {
+			syncText();
+			const triggerElement = triggerRef.value;
+			if (!triggerElement || expanded.value) return;
+			let nextEllipsis = false;
+			if (isLineClamp.value) nextEllipsis = triggerElement.scrollHeight > triggerElement.offsetHeight + 1 || triggerElement.scrollWidth > triggerElement.clientWidth + 1;
+			else {
+				var _contentRef$value$scr, _contentRef$value, _contentRef$value$off, _contentRef$value2;
+				nextEllipsis = Math.max((_contentRef$value$scr = (_contentRef$value = contentRef.value) === null || _contentRef$value === void 0 ? void 0 : _contentRef$value.scrollWidth) !== null && _contentRef$value$scr !== void 0 ? _contentRef$value$scr : 0, (_contentRef$value$off = (_contentRef$value2 = contentRef.value) === null || _contentRef$value2 === void 0 ? void 0 : _contentRef$value2.offsetWidth) !== null && _contentRef$value$off !== void 0 ? _contentRef$value$off : 0) > triggerElement.clientWidth + 1 || triggerElement.scrollWidth > triggerElement.clientWidth + 1;
+			}
+			if (nextEllipsis !== isEllipsis.value) isEllipsis.value = nextEllipsis;
+		};
+		const handleResize = () => {
+			calculateEllipsis();
+		};
+		const handleClick = function() {
+			var _ref = _asyncToGenerator(function* () {
+				if (props.expandTrigger !== "click") return;
+				if (!expanded.value) calculateEllipsis();
+				if (!isEllipsis.value && !expanded.value) return;
+				expanded.value = !expanded.value;
+				yield nextTick();
+				if (!expanded.value) calculateEllipsis();
+			});
+			return function handleClick() {
+				return _ref.apply(this, arguments);
+			};
+		}();
+		const handleKeydown = function() {
+			var _ref2 = _asyncToGenerator(function* (ev) {
+				if (!isExpandable.value) return;
+				if (ev.key === "Enter" || ev.key === " ") {
+					ev.preventDefault();
+					yield handleClick();
+				}
+			});
+			return function handleKeydown(_x) {
+				return _ref2.apply(this, arguments);
+			};
+		}();
+		onMounted(() => {
+			nextTick(() => calculateEllipsis());
+		});
+		onUpdated(() => {
+			nextTick(() => calculateEllipsis());
+		});
+		watch(() => props.lineClamp, () => {
+			if (expanded.value) expanded.value = false;
+			nextTick(() => calculateEllipsis());
+		});
+		return {
+			prefixCls,
+			triggerRef,
+			contentRef,
+			componentTag,
+			isLineClamp,
+			enableTooltip,
+			tooltipBindings,
+			tooltipDisabled,
+			rootCls,
+			rootStyle,
+			nativeTitle,
+			buttonRole,
+			buttonTabIndex,
+			ariaExpanded,
+			handleResize,
+			handleClick,
+			handleKeydown
+		};
+	}
+});
+//#endregion
+export { ellipsis_vue_vue_type_script_lang_default as default };