@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 5.5 kB
Source Map (JSON)
{"version":3,"file":"ellipsis.vue2.mjs","sources":["../../../components/ellipsis/ellipsis.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Tooltip } from '@/components/tooltip'\n\nimport { computed, ref } from 'vue'\n\nimport { useHoverDelay, useNameHelper, useProps } from '@vexip-ui/config'\nimport { placementWhileList, useSetTimeout } from '@vexip-ui/hooks'\nimport { getRangeWidth } from '@vexip-ui/utils'\nimport { ellipsisProps } from './props'\n\ndefineOptions({ name: 'Ellipsis' })\n\nconst nh = useNameHelper('ellipsis')\n\nconst _props = defineProps(ellipsisProps)\nconst props = useProps('ellipsis', _props, {\n placement: {\n default: 'top',\n validator: value => placementWhileList.includes(value)\n },\n transfer: 'body',\n noHover: false,\n transitionName: () => nh.ns('fade'),\n tooltipTheme: {\n default: 'dark',\n validator: value => ['light', 'dark'].includes(value)\n },\n tipClass: null,\n maxLines: null,\n tipMaxWidth: 500,\n tipDisabled: false,\n tipShift: false\n})\n\nconst hoverDelay = useHoverDelay()\nconst visible = ref(false)\nconst content = ref('')\n\nconst { timer } = useSetTimeout()\n\nconst wrapper = ref<HTMLElement>()\n\nconst className = computed(() => {\n return {\n [nh.b()]: true,\n [nh.bm('inherit')]: props.inherit,\n [nh.bm('multiple')]: props.maxLines\n }\n})\nconst ellipsisStyle = computed(() => {\n return props.maxLines > 0 ? { '-webkit-line-clamp': props.maxLines } : ''\n})\nconst tipStyle = computed(() => {\n return {\n maxWidth:\n typeof props.tipMaxWidth === 'string'\n ? parseFloat(props.tipMaxWidth) || props.tipMaxWidth\n : `${props.tipMaxWidth}px`\n }\n})\n\ndefineExpose({\n visible,\n wrapper\n})\n\nfunction handleTriggerEnter() {\n clearTimeout(timer.hover)\n\n if (props.tipDisabled) return\n\n timer.hover = setTimeout(() => {\n if (!wrapper.value || !wrapper.value.childNodes.length) {\n visible.value = false\n return\n }\n\n // In the case of multiple lines, use visual height and\n // real content height to control whether to display\n if (props.maxLines > 0) {\n const scrollHeight = wrapper.value.scrollHeight\n const clientHeight = wrapper.value.clientHeight\n\n visible.value = scrollHeight > clientHeight\n } else {\n visible.value = getRangeWidth(wrapper.value) > wrapper.value.getBoundingClientRect().width\n }\n\n content.value = visible.value ? wrapper.value.textContent ?? '' : ''\n }, hoverDelay.value)\n}\n\nfunction handleTriggerLeave() {\n clearTimeout(timer.hover)\n\n if (props.tipDisabled) return\n\n timer.hover = setTimeout(() => {\n visible.value = false\n }, hoverDelay.value)\n}\n</script>\n\n<template>\n <Tooltip\n :visible=\"visible\"\n trigger=\"custom\"\n :disabled=\"props.tipDisabled\"\n :transfer=\"props.transfer\"\n :placement=\"props.placement\"\n :no-hover=\"props.noHover\"\n :transition-name=\"props.transitionName\"\n :tip-class=\"props.tipClass\"\n :tip-style=\"tipStyle\"\n :reverse=\"props.tooltipTheme === 'dark'\"\n :shift=\"props.tipShift\"\n @tip-enter=\"handleTriggerEnter\"\n @tip-leave=\"handleTriggerLeave\"\n >\n <template #trigger>\n <div\n ref=\"wrapper\"\n v-bind=\"$attrs\"\n :class=\"className\"\n :style=\"ellipsisStyle\"\n @mouseenter=\"handleTriggerEnter\"\n @mouseleave=\"handleTriggerLeave\"\n >\n <slot></slot>\n </div>\n </template>\n {{ content }}\n </Tooltip>\n</template>\n"],"names":["nh","useNameHelper","props","useProps","__props","value","placementWhileList","hoverDelay","useHoverDelay","visible","ref","content","timer","useSetTimeout","wrapper","className","computed","ellipsisStyle","tipStyle","__expose","handleTriggerEnter","scrollHeight","clientHeight","getRangeWidth","handleTriggerLeave"],"mappings":";;;;;;;;;;;;AAYM,UAAAA,IAAKC,EAAc,UAAU,GAG7BC,IAAQC,EAAS,YADRC,GAC4B;AAAA,MACzC,WAAW;AAAA,QACT,SAAS;AAAA,QACT,WAAW,CAAAC,MAASC,EAAmB,SAASD,CAAK;AAAA,MACvD;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,gBAAgB,MAAML,EAAG,GAAG,MAAM;AAAA,MAClC,cAAc;AAAA,QACZ,SAAS;AAAA,QACT,WAAW,CAASK,MAAA,CAAC,SAAS,MAAM,EAAE,SAASA,CAAK;AAAA,MACtD;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,aAAa;AAAA,MACb,aAAa;AAAA,MACb,UAAU;AAAA,IAAA,CACX,GAEKE,IAAaC,EAAc,GAC3BC,IAAUC,EAAI,EAAK,GACnBC,IAAUD,EAAI,EAAE,GAEhB,EAAE,OAAAE,EAAM,IAAIC,EAAc,GAE1BC,IAAUJ,EAAiB,GAE3BK,IAAYC,EAAS,OAClB;AAAA,MACL,CAAChB,EAAG,EAAE,CAAC,GAAG;AAAA,MACV,CAACA,EAAG,GAAG,SAAS,CAAC,GAAGE,EAAM;AAAA,MAC1B,CAACF,EAAG,GAAG,UAAU,CAAC,GAAGE,EAAM;AAAA,IAC7B,EACD,GACKe,IAAgBD,EAAS,MACtBd,EAAM,WAAW,IAAI,EAAE,sBAAsBA,EAAM,aAAa,EACxE,GACKgB,IAAWF,EAAS,OACjB;AAAA,MACL,UACE,OAAOd,EAAM,eAAgB,WACzB,WAAWA,EAAM,WAAW,KAAKA,EAAM,cACvC,GAAGA,EAAM,WAAW;AAAA,IAC5B,EACD;AAEY,IAAAiB,EAAA;AAAA,MACX,SAAAV;AAAA,MACA,SAAAK;AAAA,IAAA,CACD;AAED,aAASM,IAAqB;AAG5B,MAFA,aAAaR,EAAM,KAAK,GAEpB,CAAAV,EAAM,gBAEJU,EAAA,QAAQ,WAAW,MAAM;AAC7B,YAAI,CAACE,EAAQ,SAAS,CAACA,EAAQ,MAAM,WAAW,QAAQ;AACtD,UAAAL,EAAQ,QAAQ;AAChB;AAAA,QAAA;AAKE,YAAAP,EAAM,WAAW,GAAG;AAChB,gBAAAmB,IAAeP,EAAQ,MAAM,cAC7BQ,IAAeR,EAAQ,MAAM;AAEnC,UAAAL,EAAQ,QAAQY,IAAeC;AAAA,QAAA;AAEvB,UAAAb,EAAA,QAAQc,EAAcT,EAAQ,KAAK,IAAIA,EAAQ,MAAM,wBAAwB;AAGvF,QAAAH,EAAQ,QAAQF,EAAQ,QAAQK,EAAQ,MAAM,eAAe,KAAK;AAAA,MAAA,GACjEP,EAAW,KAAK;AAAA,IAAA;AAGrB,aAASiB,IAAqB;AAG5B,MAFA,aAAaZ,EAAM,KAAK,GAEpB,CAAAV,EAAM,gBAEJU,EAAA,QAAQ,WAAW,MAAM;AAC7B,QAAAH,EAAQ,QAAQ;AAAA,MAAA,GACfF,EAAW,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}