UNPKG

@extclp/vexip-ui

Version:

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

1 lines 6.57 kB
{"version":3,"file":"ellipsis.vue2.mjs","sources":["../../../components/ellipsis/ellipsis.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { Tooltip } from '@/components/tooltip'\r\n\r\nimport { computed, ref } from 'vue'\r\n\r\nimport { useHoverDelay, useNameHelper, useProps } from '@vexip-ui/config'\r\nimport { placementWhileList, useSetTimeout } from '@vexip-ui/hooks'\r\nimport { getRangeWidth } from '@vexip-ui/utils'\r\nimport { ellipsisProps } from './props'\r\n\r\ndefineOptions({ name: 'Ellipsis' })\r\n\r\nconst nh = useNameHelper('ellipsis')\r\n\r\nconst _props = defineProps(ellipsisProps)\r\nconst props = useProps('ellipsis', _props, {\r\n placement: {\r\n default: 'top',\r\n validator: value => placementWhileList.includes(value),\r\n },\r\n transfer: 'body',\r\n noHover: false,\r\n transitionName: () => nh.ns('fade'),\r\n tooltipTheme: {\r\n default: 'dark',\r\n validator: value => ['light', 'dark'].includes(value),\r\n },\r\n tipClass: null,\r\n maxLines: null,\r\n tipMaxWidth: 500,\r\n tipDisabled: false,\r\n tipShift: false,\r\n})\r\n\r\nconst hoverDelay = useHoverDelay()\r\nconst visible = ref(false)\r\nconst content = ref('')\r\n\r\nconst { timer } = useSetTimeout()\r\n\r\nconst wrapper = ref<HTMLElement>()\r\n\r\nconst className = computed(() => {\r\n return {\r\n [nh.b()]: true,\r\n [nh.bm('inherit')]: props.inherit,\r\n [nh.bm('multiple')]: props.maxLines,\r\n }\r\n})\r\nconst ellipsisStyle = computed(() => {\r\n return props.maxLines > 0 ? { '-webkit-line-clamp': props.maxLines } : ''\r\n})\r\nconst tipStyle = computed(() => {\r\n return {\r\n maxWidth:\r\n typeof props.tipMaxWidth === 'string'\r\n ? parseFloat(props.tipMaxWidth) || props.tipMaxWidth\r\n : `${props.tipMaxWidth}px`,\r\n }\r\n})\r\n\r\ndefineExpose({\r\n visible,\r\n wrapper,\r\n})\r\n\r\nfunction handleTriggerEnter() {\r\n clearTimeout(timer.hover)\r\n\r\n if (props.tipDisabled) return\r\n\r\n timer.hover = setTimeout(() => {\r\n if (!wrapper.value || !wrapper.value.childNodes.length) {\r\n visible.value = false\r\n return\r\n }\r\n\r\n // In the case of multiple lines, use visual height and\r\n // real content height to control whether to display\r\n if (props.maxLines > 0) {\r\n const scrollHeight = wrapper.value.scrollHeight\r\n const clientHeight = wrapper.value.clientHeight\r\n\r\n visible.value = scrollHeight > clientHeight\r\n } else {\r\n visible.value = getRangeWidth(wrapper.value) > wrapper.value.getBoundingClientRect().width\r\n }\r\n\r\n content.value = visible.value ? (wrapper.value.textContent ?? '') : ''\r\n }, hoverDelay.value)\r\n}\r\n\r\nfunction handleTriggerLeave() {\r\n clearTimeout(timer.hover)\r\n\r\n if (props.tipDisabled) return\r\n\r\n timer.hover = setTimeout(() => {\r\n visible.value = false\r\n }, hoverDelay.value)\r\n}\r\n</script>\r\n\r\n<template>\r\n <Tooltip\r\n :visible=\"visible\"\r\n trigger=\"custom\"\r\n :disabled=\"props.tipDisabled\"\r\n :transfer=\"props.transfer\"\r\n :placement=\"props.placement\"\r\n :no-hover=\"props.noHover\"\r\n :transition-name=\"props.transitionName\"\r\n :tip-class=\"props.tipClass\"\r\n :tip-style=\"tipStyle\"\r\n :reverse=\"props.tooltipTheme === 'dark'\"\r\n :shift=\"props.tipShift\"\r\n @tip-enter=\"handleTriggerEnter\"\r\n @tip-leave=\"handleTriggerLeave\"\r\n >\r\n <template #trigger>\r\n <div\r\n ref=\"wrapper\"\r\n v-bind=\"$attrs\"\r\n :class=\"className\"\r\n :style=\"ellipsisStyle\"\r\n @mouseenter=\"handleTriggerEnter\"\r\n @mouseleave=\"handleTriggerLeave\"\r\n >\r\n <slot></slot>\r\n </div>\r\n </template>\r\n {{ content }}\r\n </Tooltip>\r\n</template>\r\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","_createBlock","_unref","Tooltip","_createElementVNode","_mergeProps","$attrs","_renderSlot","_ctx","_createTextVNode"],"mappings":"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"}