winbox-ui-next
Version:
We Design Vue 2.0: A Vue.js 3 UI Library
387 lines (386 loc) • 10.5 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, toRefs, computed, ref, reactive, onUnmounted, watch, createVNode, mergeProps, Text, isVNode } from "vue";
import { getPrefixCls } from "../_utils/global-config.js";
import { isObject, isUndefined, isString } from "../_utils/is.js";
import EditContent from "./edit-content.js";
import Operations from "./operations.js";
import ResizeObserver from "../_components/resize-observer.js";
import { omit } from "../_utils/omit.js";
import useMergeState from "../_hooks/use-merge-state.js";
import usePickSlots from "../_hooks/use-pick-slots.js";
import measure from "./utils/measure.js";
import { clipboard } from "../_utils/clipboard.js";
import getInnerText from "./utils/getInnerText.js";
import { caf, raf } from "../_utils/raf.js";
import Tooltip from "../tooltip/index.js";
import Popover from "../popover/index.js";
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
function getClassNames(prefixCls, props) {
const {
type,
disabled
} = props;
const classNames = [];
if (type) {
classNames.push(`${prefixCls}-${type}`);
}
if (disabled) {
classNames.push(`${prefixCls}-disabled`);
}
return classNames;
}
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 getEditText(children) {
if (!children)
return "";
const res = [];
children.some((child) => {
if (child.type === Text && isString(child.children)) {
res.push(String(child.children));
return true;
}
return false;
});
return res.join("");
}
function Wrap(props, children) {
const {
mark
} = props;
const componentTags = getComponentTags(props);
let content = children;
componentTags.forEach((Tag) => {
const attrs = isObject(mark) && mark.color ? {
style: {
backgroundColor: mark.color
}
} : {};
const _content = function() {
return content;
}();
content = createVNode(Tag, attrs, _isSlot(content) ? content : {
default: () => [_content]
});
});
return content;
}
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 __spreadProps(__spreadValues({
rows: 1,
suffix: "",
ellipsisStr: "...",
expandable: false
}, omit(config, ["showTooltip"])), {
showTooltip,
TooltipComponent,
tooltipProps
});
}
var Base = defineComponent({
name: "TypographyBase",
props: {
component: {
type: String,
required: true
},
type: {
type: String
},
bold: {
type: Boolean
},
mark: {
type: [Boolean, Object],
default: false
},
underline: {
type: Boolean
},
delete: {
type: Boolean
},
code: {
type: Boolean
},
disabled: {
type: Boolean
},
editable: {
type: Boolean
},
editing: {
type: Boolean,
default: void 0
},
defaultEditing: {
type: Boolean
},
editText: {
type: String
},
copyable: {
type: Boolean
},
copyText: {
type: String
},
ellipsis: {
type: [Boolean, Object],
default: false
}
},
emits: [
"editStart",
"change",
"update:editText",
"editEnd",
"update:editing",
"copy",
"ellipsis",
"expand"
],
setup(props, {
slots,
emit
}) {
const {
editing: propEditing,
defaultEditing,
ellipsis,
copyable,
editable,
copyText
} = toRefs(props);
const prefixCls = getPrefixCls("typography");
const classNames = computed(() => [prefixCls, ...getClassNames(prefixCls, props)]);
const wrapperRef = ref();
const defaultSlot = usePickSlots(slots, "default");
const children = computed(() => {
var _a;
return ((_a = defaultSlot.value) == null ? void 0 : _a.call(defaultSlot)) || [];
});
const fullText = computed(() => getInnerText(children.value));
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() {
emit("update:editing", false);
emit("editEnd");
setEditing(false);
}
const isCopied = ref(false);
const copyTimer = ref();
function onCopyClick() {
const text = !isUndefined(copyText == null ? void 0 : copyText.value) ? copyText == null ? void 0 : copyText.value : fullText.value;
clipboard(text || "");
isCopied.value = true;
emit("copy", text);
copyTimer.value = setTimeout(() => {
isCopied.value = false;
}, 3e3);
}
onUnmounted(() => {
copyTimer.value && clearTimeout(copyTimer);
copyTimer.value = null;
});
const isEllipsis = ref(false);
const expanded = ref(false);
const ellipsisText = ref("");
const ellipsisConfig = computed(() => normalizeEllipsisConfig(isObject(ellipsis == null ? void 0 : ellipsis.value) && (ellipsis == null ? void 0 : ellipsis.value) || {}));
const rafId = ref();
function onExpandClick() {
const newVal = !expanded.value;
expanded.value = newVal;
emit("expand", newVal);
}
function renderOperations(forceRenderExpand = false) {
return createVNode(Operations, {
"editable": editable.value,
"copyable": copyable.value,
"expandable": ellipsisConfig.value.expandable,
"isCopied": isCopied.value,
"isEllipsis": isEllipsis.value,
"expanded": expanded.value,
"forceRenderExpand": forceRenderExpand,
"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: ellipsis2,
text
} = measure(wrapperRef.value, ellipsisConfig.value, renderOperations(!!ellipsisConfig.value.expandable), fullText.value);
if (isEllipsis.value !== ellipsis2) {
isEllipsis.value = ellipsis2;
emit("ellipsis", ellipsis2);
}
if (ellipsisText.value !== text) {
ellipsisText.value = text || "";
}
}
function resizeOnNextFrame() {
const needCalEllipsis = !!(ellipsis == null ? void 0 : ellipsis.value) && !expanded.value;
if (!needCalEllipsis)
return;
caf(rafId.value);
rafId.value = raf(() => {
calEllipsis();
});
}
onUnmounted(() => {
caf(rafId.value);
});
const rows = computed(() => ellipsisConfig.value.rows);
watch([rows, children], () => {
resizeOnNextFrame();
});
watch(ellipsis, (newVal) => {
if (newVal) {
resizeOnNextFrame();
} else {
isEllipsis.value = false;
}
});
return {
props,
classNames,
children,
fullText,
isEllipsis,
expanded,
ellipsisText,
ellipsisConfig,
mergeEditing,
wrapperRef,
renderOperations,
onEditChange,
onEditEnd,
onResize() {
resizeOnNextFrame();
}
};
},
render() {
const {
props,
component: Component,
classNames,
isEllipsis,
expanded,
ellipsisText,
ellipsisConfig,
children,
fullText,
editText,
mergeEditing,
renderOperations,
onResize,
onEditChange,
onEditEnd
} = this;
if (mergeEditing) {
const _editText = !isUndefined(editText) ? editText : getEditText(children);
return createVNode(EditContent, {
"text": _editText,
"onChange": (text) => {
if (text !== _editText) {
onEditChange(text);
}
},
"onEnd": onEditEnd
}, null);
}
const {
suffix,
ellipsisStr,
showTooltip,
tooltipProps,
TooltipComponent
} = ellipsisConfig;
const showEllipsis = isEllipsis && !expanded;
const Content = Wrap(props, showEllipsis ? ellipsisText : children);
const titleAttrs = showEllipsis && !showTooltip ? {
title: fullText
} : {};
return createVNode(ResizeObserver, {
"onResize": onResize
}, {
default: () => [createVNode(Component, mergeProps({
"class": classNames,
"ref": "wrapperRef"
}, titleAttrs), {
default: () => [showEllipsis && showTooltip ? createVNode(TooltipComponent, tooltipProps, {
content: () => fullText,
default: () => [createVNode("span", null, [Content])]
}) : Content, showEllipsis ? ellipsisStr : null, suffix, renderOperations()]
})]
});
}
});
export { Base as default };