winbox-ui-next
Version:
We Design Vue 2.0: A Vue.js 3 UI Library
388 lines (387 loc) • 10.6 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));
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var is = require("../_utils/is.js");
var editContent = require("./edit-content.js");
var operations = require("./operations.js");
var resizeObserver = require("../_components/resize-observer.js");
var omit = require("../_utils/omit.js");
var useMergeState = require("../_hooks/use-merge-state.js");
var usePickSlots = require("../_hooks/use-pick-slots.js");
var measure = require("./utils/measure.js");
var clipboard = require("../_utils/clipboard.js");
var getInnerText = require("./utils/getInnerText.js");
var raf = require("../_utils/raf.js");
var index$1 = require("../tooltip/index.js");
var index = require("../popover/index.js");
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.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 === vue.Text && is.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 = is.isObject(mark) && mark.color ? {
style: {
backgroundColor: mark.color
}
} : {};
const _content = function() {
return content;
}();
content = vue.createVNode(Tag, attrs, _isSlot(content) ? content : {
default: () => [_content]
});
});
return content;
}
function normalizeEllipsisConfig(config) {
const showTooltip = !!config.showTooltip;
const TooltipComponent = is.isObject(config.showTooltip) && config.showTooltip.type === "popover" ? index : index$1;
const tooltipProps = is.isObject(config.showTooltip) && config.showTooltip.props || {};
return __spreadProps(__spreadValues({
rows: 1,
suffix: "",
ellipsisStr: "...",
expandable: false
}, omit.omit(config, ["showTooltip"])), {
showTooltip,
TooltipComponent,
tooltipProps
});
}
var Base = vue.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
} = vue.toRefs(props);
const prefixCls = globalConfig.getPrefixCls("typography");
const classNames = vue.computed(() => [prefixCls, ...getClassNames(prefixCls, props)]);
const wrapperRef = vue.ref();
const defaultSlot = usePickSlots(slots, "default");
const children = vue.computed(() => {
var _a;
return ((_a = defaultSlot.value) == null ? void 0 : _a.call(defaultSlot)) || [];
});
const fullText = vue.computed(() => getInnerText(children.value));
const [editing, setEditing] = useMergeState(defaultEditing.value, vue.reactive({
value: propEditing
}));
const mergeEditing = vue.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 = vue.ref(false);
const copyTimer = vue.ref();
function onCopyClick() {
const text = !is.isUndefined(copyText == null ? void 0 : copyText.value) ? copyText == null ? void 0 : copyText.value : fullText.value;
clipboard.clipboard(text || "");
isCopied.value = true;
emit("copy", text);
copyTimer.value = setTimeout(() => {
isCopied.value = false;
}, 3e3);
}
vue.onUnmounted(() => {
copyTimer.value && clearTimeout(copyTimer);
copyTimer.value = null;
});
const isEllipsis = vue.ref(false);
const expanded = vue.ref(false);
const ellipsisText = vue.ref("");
const ellipsisConfig = vue.computed(() => normalizeEllipsisConfig(is.isObject(ellipsis == null ? void 0 : ellipsis.value) && (ellipsis == null ? void 0 : ellipsis.value) || {}));
const rafId = vue.ref();
function onExpandClick() {
const newVal = !expanded.value;
expanded.value = newVal;
emit("expand", newVal);
}
function renderOperations(forceRenderExpand = false) {
return vue.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;
raf.caf(rafId.value);
rafId.value = raf.raf(() => {
calEllipsis();
});
}
vue.onUnmounted(() => {
raf.caf(rafId.value);
});
const rows = vue.computed(() => ellipsisConfig.value.rows);
vue.watch([rows, children], () => {
resizeOnNextFrame();
});
vue.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 = !is.isUndefined(editText) ? editText : getEditText(children);
return vue.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 vue.createVNode(resizeObserver, {
"onResize": onResize
}, {
default: () => [vue.createVNode(Component, vue.mergeProps({
"class": classNames,
"ref": "wrapperRef"
}, titleAttrs), {
default: () => [showEllipsis && showTooltip ? vue.createVNode(TooltipComponent, tooltipProps, {
content: () => fullText,
default: () => [vue.createVNode("span", null, [Content])]
}) : Content, showEllipsis ? ellipsisStr : null, suffix, renderOperations()]
})]
});
}
});
module.exports = Base;