vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 6.08 kB
Source Map (JSON)
{"version":3,"file":"ellipsis.vue2.cjs","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","__props","props","useProps","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":"gUAYM,MAAAA,EAAKC,gBAAc,UAAU,EAE7BC,EAASC,EACTC,EAAQC,EAAAA,SAAS,WAAYH,EAAQ,CACzC,UAAW,CACT,QAAS,MACT,UAAWI,GAASC,EAAmB,mBAAA,SAASD,CAAK,CACvD,EACA,SAAU,OACV,QAAS,GACT,eAAgB,IAAMN,EAAG,GAAG,MAAM,EAClC,aAAc,CACZ,QAAS,OACT,UAAoBM,GAAA,CAAC,QAAS,MAAM,EAAE,SAASA,CAAK,CACtD,EACA,SAAU,KACV,SAAU,KACV,YAAa,IACb,YAAa,GACb,SAAU,EAAA,CACX,EAEKE,EAAaC,EAAAA,cAAc,EAC3BC,EAAUC,MAAI,EAAK,EACnBC,EAAUD,MAAI,EAAE,EAEhB,CAAE,MAAAE,CAAM,EAAIC,gBAAc,EAE1BC,EAAUJ,EAAAA,IAAiB,EAE3BK,EAAYC,EAAAA,SAAS,KAClB,CACL,CAACjB,EAAG,EAAE,CAAC,EAAG,GACV,CAACA,EAAG,GAAG,SAAS,CAAC,EAAGI,EAAM,QAC1B,CAACJ,EAAG,GAAG,UAAU,CAAC,EAAGI,EAAM,QAC7B,EACD,EACKc,EAAgBD,EAAAA,SAAS,IACtBb,EAAM,SAAW,EAAI,CAAE,qBAAsBA,EAAM,UAAa,EACxE,EACKe,EAAWF,EAAAA,SAAS,KACjB,CACL,SACE,OAAOb,EAAM,aAAgB,SACzB,WAAWA,EAAM,WAAW,GAAKA,EAAM,YACvC,GAAGA,EAAM,WAAW,IAC5B,EACD,EAEYgB,EAAA,CACX,QAAAV,EACA,QAAAK,CAAA,CACD,EAED,SAASM,GAAqB,CAC5B,aAAaR,EAAM,KAAK,EAEpB,CAAAT,EAAM,cAEJS,EAAA,MAAQ,WAAW,IAAM,CAC7B,GAAI,CAACE,EAAQ,OAAS,CAACA,EAAQ,MAAM,WAAW,OAAQ,CACtDL,EAAQ,MAAQ,GAChB,MAAA,CAKE,GAAAN,EAAM,SAAW,EAAG,CAChB,MAAAkB,EAAeP,EAAQ,MAAM,aAC7BQ,EAAeR,EAAQ,MAAM,aAEnCL,EAAQ,MAAQY,EAAeC,CAAA,MAEvBb,EAAA,MAAQc,gBAAcT,EAAQ,KAAK,EAAIA,EAAQ,MAAM,wBAAwB,MAGvFH,EAAQ,MAAQF,EAAQ,MAASK,EAAQ,MAAM,aAAe,GAAM,EAAA,EACnEP,EAAW,KAAK,EAAA,CAGrB,SAASiB,GAAqB,CAC5B,aAAaZ,EAAM,KAAK,EAEpB,CAAAT,EAAM,cAEJS,EAAA,MAAQ,WAAW,IAAM,CAC7BH,EAAQ,MAAQ,EAAA,EACfF,EAAW,KAAK,EAAA,6BAKnBkB,EAAAA,YA4BUC,EAAA,MAAAC,CAAA,EAAA,CA3BP,QAASlB,EAAO,MACjB,QAAQ,SACP,SAAUiB,EAAAA,MAAKvB,CAAA,EAAC,YAChB,SAAUuB,EAAAA,MAAKvB,CAAA,EAAC,SAChB,UAAWuB,EAAAA,MAAKvB,CAAA,EAAC,UACjB,WAAUuB,EAAAA,MAAKvB,CAAA,EAAC,QAChB,kBAAiBuB,EAAAA,MAAKvB,CAAA,EAAC,eACvB,YAAWuB,EAAAA,MAAKvB,CAAA,EAAC,SACjB,YAAWe,EAAQ,MACnB,QAASQ,EAAA,MAAKvB,CAAA,EAAC,eAAY,OAC3B,MAAOuB,EAAAA,MAAKvB,CAAA,EAAC,SACb,WAAWiB,EACX,WAAWI,CAAA,GAED,kBACT,IASM,CATNI,EAAA,mBASM,MATNC,aASM,SARA,UAAJ,IAAIf,CAAA,EACIgB,EAAM,OAAA,CACb,MAAOf,EAAS,MAChB,MAAOE,EAAa,MACpB,aAAYG,EACZ,aAAYI,CAAA,IAEbO,aAAaC,EAAA,OAAA,SAAA,CAAA,0BAEN,IACX,CADWC,EAAAA,gBAAA,sBACRtB,EAAO,KAAA,EAAA,CAAA,CAAA"}