@sdata/web-vue 3.29.0 → 4.0.0

package/es/typography/base.js

@@ -1,429 +1,5 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.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 { 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 operations_default from "./operations.js";
-import getInnerText from "./utils/getInnerText.js";
-import measure_default from "./utils/measure.js";
-import { computed, createVNode, defineComponent, isVNode, mergeProps, onMounted, onUnmounted, onUpdated, reactive, ref, toRefs, watch } from "vue";
-import copy from "copy-to-clipboard";
-//#region components/typography/base.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-function getComponentTags(props) {
-	const { bold, mark, underline, delete: propDelete, code } = props;
-	const componentTags = [];
-	if (bold) componentTags.push("b");
-	if (underline) componentTags.push("u");
-	if (propDelete) componentTags.push("del");
-	if (code) componentTags.push("code");
-	if (mark) componentTags.push("mark");
-	return componentTags;
-}
-function Wrap(props, children) {
-	const { mark } = props;
-	const componentTags = getComponentTags(props);
-	const markStyle = isObject(mark) && mark.color ? { backgroundColor: mark.color } : {};
-	return componentTags.reduce((content, Tag) => {
-		return createVNode(Tag, Tag === "mark" ? { style: markStyle } : {}, _isSlot(content) ? content : { default: () => [content] });
-	}, children);
-}
-function normalizeEllipsisConfig(config) {
-	const showTooltip = !!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
-	}, omit(config, ["showTooltip"])), {}, {
-		showTooltip,
-		TooltipComponent,
-		tooltipProps
-	});
-}
-/**
-* @displayName Common
-* @noBrackets
-*/
-var base_default = /* @__PURE__ */ defineComponent({
-	name: "TypographyBase",
-	inheritAttrs: false,
-	props: {
-		component: {
-			type: String,
-			required: true
-		},
-		/**
-		* @zh 文本类型
-		* @en Text type
-		*/
-		type: { type: String },
-		/**
-		* @zh 粗体
-		* @en Whether enable bold style
-		*/
-		bold: { type: Boolean },
-		/**
-		* @zh 添加标记样式
-		* @en Mark style
-		*/
-		mark: {
-			type: [Boolean, Object],
-			default: false
-		},
-		/**
-		* @zh 下划线样式
-		* @en Whether enable underline style
-		*/
-		underline: { type: Boolean },
-		/**
-		* @zh 删除线样式
-		* @en Whether enable delete style
-		*/
-		delete: { type: Boolean },
-		/**
-		* @zh 代码块样式
-		* @en Whether enable code style
-		*/
-		code: { type: Boolean },
-		/**
-		* @zh 禁用状态
-		* @en Whether disabled
-		*/
-		disabled: { type: Boolean },
-		/**
-		* @zh 开启可编辑功能
-		* @en Whether it's editable
-		*/
-		editable: { type: Boolean },
-		/**
-		* @zh 是否在编辑状态
-		* @en Whether it's editing
-		* @vModel
-		*/
-		editing: {
-			type: Boolean,
-			default: void 0
-		},
-		/**
-		* @zh 默认的编辑状态
-		* @en Default editing state
-		*/
-		defaultEditing: { type: Boolean },
-		/**
-		* @zh 编辑的文字
-		* @en Edit text
-		* @vModel
-		*/
-		editText: { type: String },
-		/**
-		* @zh 开启复制功能
-		* @en Whether turn on copy functionality
-		*/
-		copyable: { type: Boolean },
-		/**
-		* @zh 复制的文字
-		* @en Copied text
-		*/
-		copyText: { type: String },
-		/**
-		* @zh 透传给 copy-to-clipboard 的配置
-		* @en Options passed through to copy-to-clipboard
-		*/
-		clipboardProps: { type: Object },
-		/**
-		* @zh 复制成功后，复制按钮恢复到可点击状态的延迟时间，单位是毫秒
-		* @en After the copy is successful, the delay time for the copy button to return to the clickable state, in milliseconds
-		* @version 2.16.0
-		*/
-		copyDelay: {
-			type: Number,
-			default: 3e3
-		},
-		/**
-		* @zh 自动溢出省略，具体参数配置看 [EllipsisConfig](#EllipsisConfig)
-		* @en Automatic overflow omission, refer to [EllipsisConfig](#EllipsisConfig) for more information.
-		*/
-		ellipsis: {
-			type: [Boolean, Object],
-			default: false
-		},
-		/**
-		* @zh 编辑按钮问题提示配置
-		* @en Edit button question prompt configuration
-		* @version 2.32.0
-		*/
-		editTooltipProps: { type: Object },
-		/**
-		* @zh 拷贝按钮问题提示配置
-		* @en Copy button question prompt configuration
-		* @version 2.32.0
-		*/
-		copyTooltipProps: { type: Object }
-	},
-	emits: {
-		/**
-		* @zh 开始编辑
-		* @en Edit start
-		*/
-		"editStart": () => true,
-		/**
-		* @zh 编辑内容变化
-		* @en Edit content change
-		* @param {string} text
-		*/
-		"change": (_text) => true,
-		"update:editText": (_text) => true,
-		/**
-		* @zh 编辑结束
-		* @en Edit end
-		*/
-		"editEnd": () => true,
-		"update:editing": (_editing) => true,
-		/**
-		* @zh 复制
-		* @en Copy
-		* @param {string} text
-		*/
-		"copy": (_text) => true,
-		/**
-		* @zh 省略变化事件
-		* @en Ellipsis change
-		* @param {boolean} isEllipsis
-		*/
-		"ellipsis": (_isEllipsis) => true,
-		/**
-		* @zh 展开收起事件
-		* @en Expand collapse event
-		* @param {boolean} expanded
-		*/
-		"expand": (_expanded) => true
-	},
-	/**
-	* @zh 自定义复制按钮的 tooltip 内容
-	* @en Customize the tooltip content of the copy button
-	* @slot copy-tooltip
-	* @binding {boolean} copied
-	*/
-	/**
-	* @zh 自定义复制按钮图标
-	* @en Custom copy button icon
-	* @slot copy-icon
-	* @binding {boolean} copied
-	*/
-	/**
-	* @zh 自定义展开和折叠按钮
-	* @en Custom expand button
-	* @slot expand-node
-	* @binding {boolean} expanded
-	*/
-	setup(props, { slots, emit, attrs }) {
-		const { editing: propEditing, defaultEditing, ellipsis, copyable, editable, copyText, editText, copyDelay, component } = toRefs(props);
-		const prefixCls = getPrefixCls("typography");
-		const classNames = computed(() => [prefixCls, {
-			[`${prefixCls}-${props.type}`]: props.type,
-			[`${prefixCls}-disabled`]: props.disabled
-		}]);
-		const wrapperRef = ref();
-		const fullText = ref("");
-		const [editing, setEditing] = useMergeState(defaultEditing.value, reactive({ value: propEditing }));
-		const mergeEditing = computed(() => editable.value && editing.value);
-		function onEditStart() {
-			emit("update:editing", true);
-			emit("editStart");
-			setEditing(true);
-		}
-		function onEditChange(text) {
-			emit("update:editText", text);
-			emit("change", text);
-		}
-		function onEditEnd() {
-			if (!editing.value) return;
-			emit("update:editing", false);
-			emit("editEnd");
-			setEditing(false);
-		}
-		const isCopied = ref(false);
-		let copyTimer = null;
-		function onCopyClick() {
-			var _copyText$value;
-			const text = (_copyText$value = copyText.value) !== null && _copyText$value !== void 0 ? _copyText$value : fullText.value;
-			copy(text || "", props.clipboardProps);
-			isCopied.value = true;
-			emit("copy", text);
-			copyTimer = setTimeout(() => {
-				isCopied.value = false;
-			}, copyDelay.value);
-		}
-		onUnmounted(() => {
-			copyTimer && clearTimeout(copyTimer);
-			copyTimer = null;
-		});
-		const isEllipsis = ref(false);
-		const expanded = ref(false);
-		const ellipsisText = ref("");
-		const ellipsisConfig = computed(() => normalizeEllipsisConfig(isObject(ellipsis.value) && ellipsis.value || {}));
-		let rafId = null;
-		function onExpandClick() {
-			const newVal = !expanded.value;
-			expanded.value = newVal;
-			emit("expand", newVal);
-		}
-		function renderOperations(forceRenderExpand = false) {
-			if (ellipsisConfig.value.css) return createVNode(operations_default, {
-				"editable": editable.value,
-				"copyable": copyable.value,
-				"expandable": ellipsisConfig.value.expandable,
-				"isCopied": isCopied.value,
-				"isEllipsis": showCSSTooltip.value,
-				"expanded": expanded.value,
-				"forceRenderExpand": forceRenderExpand || expanded.value,
-				"editTooltipProps": props.editTooltipProps,
-				"copyTooltipProps": props.copyTooltipProps,
-				"onEdit": onEditStart,
-				"onCopy": onCopyClick,
-				"onExpand": onExpandClick
-			}, {
-				"copy-tooltip": slots["copy-tooltip"],
-				"copy-icon": slots["copy-icon"],
-				"expand-node": slots["expand-node"]
-			});
-			return createVNode(operations_default, {
-				"editable": editable.value,
-				"copyable": copyable.value,
-				"expandable": ellipsisConfig.value.expandable,
-				"isCopied": isCopied.value,
-				"isEllipsis": isEllipsis.value,
-				"expanded": expanded.value,
-				"forceRenderExpand": forceRenderExpand,
-				"editTooltipProps": props.editTooltipProps,
-				"copyTooltipProps": props.copyTooltipProps,
-				"onEdit": onEditStart,
-				"onCopy": onCopyClick,
-				"onExpand": onExpandClick
-			}, {
-				"copy-tooltip": slots["copy-tooltip"],
-				"copy-icon": slots["copy-icon"],
-				"expand-node": slots["expand-node"]
-			});
-		}
-		function calEllipsis() {
-			if (!wrapperRef.value) return;
-			const { ellipsis, text } = measure_default(wrapperRef.value, ellipsisConfig.value, renderOperations(!!ellipsisConfig.value.expandable), fullText.value);
-			if (isEllipsis.value !== ellipsis) {
-				isEllipsis.value = ellipsis;
-				if (!ellipsisConfig.value.css) emit("ellipsis", ellipsis);
-			}
-			if (ellipsisText.value !== text) ellipsisText.value = text || "";
-		}
-		function resizeOnNextFrame() {
-			if (!(ellipsis.value && !expanded.value)) return;
-			if (rafId != null) caf(rafId);
-			rafId = raf(() => {
-				calEllipsis();
-			});
-		}
-		onUnmounted(() => {
-			if (rafId != null) caf(rafId);
-		});
-		watch(() => ellipsisConfig.value.rows, () => {
-			resizeOnNextFrame();
-		});
-		watch(ellipsis, (newVal) => {
-			if (newVal) resizeOnNextFrame();
-			else isEllipsis.value = false;
-		});
-		let children = [];
-		const updateFullText = () => {
-			if (ellipsis.value || copyable.value || editable.value) {
-				const _fullText = getInnerText(children);
-				if (_fullText !== fullText.value) {
-					fullText.value = _fullText;
-					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(() => {
-			if (expanded.value) return {};
-			return {
-				"overflow": "hidden",
-				"text-overflow": "ellipsis",
-				"display": "-webkit-box",
-				"-webkit-line-clamp": ellipsisConfig.value.rows,
-				"-webkit-box-orient": "vertical"
-			};
-		});
-		return () => {
-			var _slots$default;
-			children = ((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)) || [];
-			if (mergeEditing.value) {
-				var _editText$value;
-				const _editText = (_editText$value = editText.value) !== null && _editText$value !== void 0 ? _editText$value : fullText.value;
-				return createVNode(edit_content_default, {
-					"text": _editText,
-					"onChange": (text) => {
-						if (text !== _editText) onEditChange(text);
-					},
-					"onEnd": onEditEnd
-				}, null);
-			}
-			const { suffix, ellipsisStr, showTooltip, tooltipProps, TooltipComponent } = ellipsisConfig.value;
-			const showEllipsis = isEllipsis.value && !expanded.value;
-			const titleAttrs = showEllipsis && !showTooltip ? { title: fullText.value } : {};
-			const Component = component.value;
-			if (ellipsisConfig.value.css) {
-				const Content = Wrap(props, children);
-				const Outer = createVNode(Component, mergeProps({
-					"class": classNames.value,
-					"ref": wrapperRef,
-					"style": ellipsisStyle.value
-				}, titleAttrs, attrs), { default: () => [createVNode("span", { "ref": contentRef }, [Content])] });
-				if (showCSSTooltip.value) return createVNode(TooltipComponent, mergeProps(tooltipProps, { "onResize": () => calTooltip() }), {
-					default: () => [Outer],
-					content: () => fullText.value
-				});
-				return createVNode(resize_observer_default, { "onResize": () => {
-					calTooltip();
-				} }, _isSlot(Outer) ? Outer : { default: () => [Outer] });
-			}
-			const Content = Wrap(props, showEllipsis ? ellipsisText.value : children);
-			return createVNode(resize_observer_default, { "onResize": () => resizeOnNextFrame() }, { default: () => [createVNode(Component, mergeProps({
-				"class": classNames.value,
-				"ref": wrapperRef
-			}, titleAttrs, attrs), { default: () => [
-				showEllipsis && showTooltip ? createVNode(TooltipComponent, tooltipProps, {
-					default: () => [createVNode("span", null, [Content])],
-					content: () => fullText.value
-				}) : Content,
-				showEllipsis ? ellipsisStr : null,
-				suffix,
-				renderOperations()
-			] })] });
-		};
-	}
-});
+import base_vue_vue_type_script_setup_true_lang_default from "./base.vue_vue_type_script_setup_true_lang.js";
+//#region components/typography/base.vue
+var base_default = base_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { base_default as default };

package/es/typography/base.vue.d.ts

@@ -0,0 +1,116 @@
+import type { Options as ClipboardOptions } from 'copy-to-clipboard';
+import { type PropType } from 'vue';
+import type { BaseProps, EllipsisConfig } from './interface';
+interface BaseInternalProps extends BaseProps {
+    component: keyof HTMLElementTagNameMap;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    component: {
+        type: PropType<BaseInternalProps["component"]>;
+        required: true;
+    };
+    type: PropType<"primary" | "secondary" | "success" | "danger" | "warning">;
+    bold: BooleanConstructor;
+    mark: {
+        type: PropType<boolean | {
+            color: string;
+        }>;
+        default: boolean;
+    };
+    underline: BooleanConstructor;
+    delete: BooleanConstructor;
+    code: BooleanConstructor;
+    disabled: BooleanConstructor;
+    editable: BooleanConstructor;
+    editing: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultEditing: BooleanConstructor;
+    editText: StringConstructor;
+    copyable: BooleanConstructor;
+    copyText: StringConstructor;
+    clipboardProps: PropType<ClipboardOptions>;
+    copyDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ellipsis: {
+        type: PropType<boolean | EllipsisConfig>;
+        default: boolean;
+    };
+    editTooltipProps: ObjectConstructor;
+    copyTooltipProps: ObjectConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    copy: (_text: string) => void;
+    ellipsis: (_isEllipsis: boolean) => void;
+    change: (_text: string) => void;
+    expand: (_expanded: boolean) => void;
+    editStart: () => void;
+    "update:editText": (_text: string) => void;
+    editEnd: () => void;
+    "update:editing": (_editing: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    component: {
+        type: PropType<BaseInternalProps["component"]>;
+        required: true;
+    };
+    type: PropType<"primary" | "secondary" | "success" | "danger" | "warning">;
+    bold: BooleanConstructor;
+    mark: {
+        type: PropType<boolean | {
+            color: string;
+        }>;
+        default: boolean;
+    };
+    underline: BooleanConstructor;
+    delete: BooleanConstructor;
+    code: BooleanConstructor;
+    disabled: BooleanConstructor;
+    editable: BooleanConstructor;
+    editing: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultEditing: BooleanConstructor;
+    editText: StringConstructor;
+    copyable: BooleanConstructor;
+    copyText: StringConstructor;
+    clipboardProps: PropType<ClipboardOptions>;
+    copyDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ellipsis: {
+        type: PropType<boolean | EllipsisConfig>;
+        default: boolean;
+    };
+    editTooltipProps: ObjectConstructor;
+    copyTooltipProps: ObjectConstructor;
+}>> & Readonly<{
+    onCopy?: ((_text: string) => any) | undefined;
+    onEllipsis?: ((_isEllipsis: boolean) => any) | undefined;
+    onChange?: ((_text: string) => any) | undefined;
+    onExpand?: ((_expanded: boolean) => any) | undefined;
+    onEditStart?: (() => any) | undefined;
+    "onUpdate:editText"?: ((_text: string) => any) | undefined;
+    onEditEnd?: (() => any) | undefined;
+    "onUpdate:editing"?: ((_editing: boolean) => any) | undefined;
+}>, {
+    bold: boolean;
+    underline: boolean;
+    ellipsis: boolean | EllipsisConfig;
+    disabled: boolean;
+    delete: boolean;
+    code: boolean;
+    mark: boolean | {
+        color: string;
+    };
+    editable: boolean;
+    copyable: boolean;
+    defaultEditing: boolean;
+    editing: boolean;
+    copyDelay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;