mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
203 lines • 7.73 kB
JavaScript
/* Analyzed bindings: {
"expandTrigger": "props",
"lineClamp": "props",
"tooltip": "props",
"JTooltip": "setup-maybe-ref",
"TooltipProps": "setup-maybe-ref",
"Ellipsis": "setup-maybe-ref",
"computed": "setup-const",
"mergeProps": "setup-const",
"PropType": "setup-const",
"ref": "setup-const",
"useAttrs": "setup-const",
"jEllipsis": "literal-const",
"jEllipsisCursorClass": "literal-const",
"jEllipsisLineClampClass": "literal-const",
"props": "setup-reactive-const",
"attrs": "setup-maybe-ref",
"triggerAttrs": "setup-const",
"expandedRef": "setup-ref",
"tooltipRef": "setup-ref",
"triggerRef": "setup-ref",
"visible": "setup-ref",
"showTooltip": "setup-const",
"ellipsisStyleRef": "setup-ref",
"syncCursorStyle": "setup-const",
"getTooltipDisabled": "setup-const",
"handleClickRef": "setup-ref",
"syncEllipsisStyle": "setup-const",
"syncTriggerClass": "setup-const"
} */
import { defineComponent as _defineComponent } from 'vue';
import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, mergeProps as _mergeProps, unref as _unref, withCtx as _withCtx, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from "vue";
const _hoisted_1 = { class: "j-ellipsis-line-clamp j-ellipsis j-ellipsis-deep" };
import { Tooltip as JTooltip, } from '../components';
import { computed, mergeProps, ref, useAttrs } from 'vue';
// define class name
const jEllipsis = 'j-ellipsis';
const jEllipsisCursorClass = 'j-ellipsis-cursor';
const jEllipsisLineClampClass = 'j-ellipsis-line-clamp';
const __sfc_main__ = _defineComponent({
props: {
/** expand by */
expandTrigger: {
type: String,
default: undefined,
},
/** multiline ellipsis */
lineClamp: {
type: [Number, String],
default: 1,
},
/** a-tooltip props */
tooltip: {
type: [Boolean, Object],
default: true,
},
},
setup(__props) {
const props = __props;
const attrs = useAttrs();
function triggerAttrs() {
return {
...mergeProps(attrs, {
class: [
jEllipsis,
props.lineClamp !== undefined
? jEllipsisLineClampClass
: undefined,
props.expandTrigger === 'click'
? jEllipsisCursorClass
: undefined,
],
style: ellipsisStyleRef.value,
}),
};
}
const expandedRef = ref(false);
const tooltipRef = ref(null);
const triggerRef = ref(null);
const visible = ref(false);
const showTooltip = () => {
const { value: trigger } = triggerRef;
if (trigger) {
visible.value = trigger.scrollHeight > trigger.offsetHeight;
}
};
const ellipsisStyleRef = computed(() => {
const { lineClamp } = props;
const { value: expanded } = expandedRef;
if (lineClamp !== undefined) {
return {
textOverflow: '',
'-webkit-line-clamp': expanded ? '' : lineClamp,
};
}
else {
return {
textOverflow: expanded ? '' : 'ellipsis',
'-webkit-line-clamp': '',
};
}
});
function syncCursorStyle(trigger, tooltipDisabled) {
if (props.expandTrigger === 'click' && !tooltipDisabled) {
syncTriggerClass(trigger, jEllipsisCursorClass, 'add');
}
else {
syncTriggerClass(trigger, jEllipsisCursorClass, 'remove');
}
}
function getTooltipDisabled() {
let tooltipDisabled = false;
const { value: expanded } = expandedRef;
if (expanded)
return true;
const { value: trigger } = triggerRef;
if (trigger) {
syncEllipsisStyle(trigger);
tooltipDisabled = trigger.scrollHeight <= trigger.offsetHeight;
syncCursorStyle(trigger, tooltipDisabled);
}
return tooltipDisabled;
}
const handleClickRef = computed(() => {
return props.expandTrigger === 'click'
? () => {
const { value: expanded } = expandedRef;
expandedRef.value = !expanded;
}
: undefined;
});
function syncEllipsisStyle(trigger) {
if (!trigger)
return;
const latestStyle = ellipsisStyleRef.value;
const lineClampClass = jEllipsisLineClampClass;
if (props.lineClamp !== undefined) {
syncTriggerClass(trigger, lineClampClass, 'add');
}
else {
syncTriggerClass(trigger, lineClampClass, 'remove');
}
for (const key in latestStyle) {
if ((trigger.style)[key] !== (latestStyle)[key]) {
(trigger.style)[key] = (latestStyle)[key];
}
}
}
function syncTriggerClass(trigger, styleClass, action) {
if (action === 'add') {
if (!trigger.classList.contains(styleClass)) {
trigger.classList.add(styleClass);
}
}
else {
if (trigger.classList.contains(styleClass)) {
trigger.classList.remove(styleClass);
}
}
}
return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_unref(JTooltip), _mergeProps({
ref_key: "tooltipRef",
ref: tooltipRef,
placement: "top"
}, props.tooltip, { open: visible.value }), _createSlots({
default: _withCtx(() => [
_createElementVNode("span", _mergeProps({
ref_key: "triggerRef",
ref: triggerRef
}, triggerAttrs(), {
onClick: _cache[0] || (_cache[0] =
//@ts-ignore
(...args) => (handleClickRef.value && handleClickRef.value(...args))),
onMouseenter: _cache[1] || (_cache[1] = ($event) => ([
props.expandTrigger === 'click'
? getTooltipDisabled()
: showTooltip(),
])),
onMouseleave: _cache[2] || (_cache[2] = ($event) => (visible.value = false))
}), [
_renderSlot(_ctx.$slots, "default")
], 16 /* FULL_PROPS */)
]),
_: 2 /* DYNAMIC */
}, [
(props.tooltip)
? {
name: "title",
fn: _withCtx(() => [
_createElementVNode("div", _hoisted_1, [
_renderSlot(_ctx.$slots, "default"),
_renderSlot(_ctx.$slots, "tooltip")
])
]),
key: "0"
}
: undefined
]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["open"]));
};
}
});
export default __sfc_main__;