UNPKG

hongluan-ui

Version:
1 lines 5.58 kB
{"version":3,"file":"menu.mjs","sources":["../../../../../../packages/components/cascader-panel/src/menu.vue"],"sourcesContent":["<template>\n <hl-scrollbar\n :key=\"menuId\"\n tag=\"ul\"\n role=\"menu\"\n class=\"cascader-menu\"\n wrap-class=\"cascader-menu-wrap\"\n :view-class=\"[\n 'cascader-menu-list',\n isEmpty && 'is-empty'\n ]\"\n @mousemove=\"handleMouseMove\"\n @mouseleave=\"clearHoverZone\"\n >\n <hl-cascader-node\n v-for=\"node in nodes\"\n :key=\"node.uid\"\n :node=\"node\"\n :menu-id=\"menuId\"\n @expand=\"handleExpand\"\n />\n <div v-if=\"isLoading\" class=\"cascader-menu-empty-text is-loading\">\n <hl-spinner />\n {{ t('hl.cascader.loading') }}\n </div>\n <div v-else-if=\"isEmpty\" class=\"cascader-menu-empty-text\">\n {{ t('hl.cascader.noData') }}\n </div>\n\n <svg\n v-else-if=\"panel?.isHoverMenu\"\n ref=\"hoverZone\"\n class=\"cascader-menu-hover-zone\"\n />\n </hl-scrollbar>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue'\nimport HlScrollbar from '@hongluan-ui/components/scrollbar'\nimport HlSpinner from '@hongluan-ui/components/spinner'\nimport HlCascaderNode from './node.vue'\nimport { useId, useLocale } from '@hongluan-ui/hooks'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type { PropType } from 'vue'\nimport type { Nullable, TimeoutHandle } from '@hongluan-ui/utils'\nimport type { CascaderNode } from './types'\n\nexport default defineComponent({\n name: 'CascaderMenu',\n\n components: {\n HlScrollbar,\n HlCascaderNode,\n HlSpinner,\n },\n\n props: {\n nodes: {\n type: Array as PropType< CascaderNode[]>,\n required: true,\n },\n index: {\n type: Number,\n required: true,\n },\n },\n\n setup (props) {\n const { t } = useLocale()\n const instance = getCurrentInstance()\n const id = useId()\n let activeNode: Nullable<HTMLElement> = null\n let hoverTimer: Nullable<TimeoutHandle> = null\n\n const panel = inject(CASCADER_PANEL_INJECTION_KEY)\n\n const hoverZone = ref<null | SVGSVGElement>(null)\n const isLoading = computed(() => !panel.initialLoaded)\n const isEmpty = computed(() => !props.nodes.length)\n const menuId = computed(() => `${id.value}-${props.index}`)\n\n const handleExpand = (e: MouseEvent) => {\n activeNode = e.target as HTMLElement\n }\n\n const handleMouseMove = (e: MouseEvent) => {\n if (!panel.isHoverMenu || !activeNode || !hoverZone.value) return\n\n if (activeNode.contains(e.target as HTMLElement)) {\n clearHoverTimer()\n\n const el = instance.vnode.el as HTMLElement\n const { left } = el.getBoundingClientRect()\n const { offsetWidth, offsetHeight } = el\n const startX = e.clientX - left\n const top = activeNode.offsetTop\n const bottom = top + activeNode.offsetHeight\n\n hoverZone.value.innerHTML = `\n <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${top} L${offsetWidth} 0 V${top} Z\" />\n <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z\" />\n `\n } else if (!hoverTimer) {\n hoverTimer = window.setTimeout(clearHoverZone, panel.config.hoverThreshold)\n }\n }\n\n const clearHoverTimer = () => {\n if (!hoverTimer) return\n clearTimeout(hoverTimer)\n hoverTimer = null\n }\n\n const clearHoverZone = () => {\n if (!hoverZone.value) return\n hoverZone.value.innerHTML = ''\n clearHoverTimer()\n }\n\n return {\n panel,\n hoverZone,\n isEmpty,\n isLoading,\n menuId,\n t,\n handleExpand,\n handleMouseMove,\n clearHoverZone,\n }\n },\n})\n\n</script>\n\n"],"names":["_createBlock"],"mappings":";;;;;;;;;;AAiDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AACF,EAEA,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AACZ,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AACZ;AACF,EAEA,MAAO,OAAO;AACZ,UAAM,EAAE,MAAM;AACd,UAAM,WAAW;AACjB,UAAM,KAAK;AACX,QAAI,aAAoC;AACxC,QAAI,aAAsC;AAE1C,UAAM,QAAQ,OAAO,4BAA4B;AAEjD,UAAM,YAAY,IAA0B,IAAI;AAChD,UAAM,YAAY,SAAS,MAAM,CAAC,MAAM,aAAa;AACrD,UAAM,UAAU,SAAS,MAAM,CAAC,MAAM,MAAM,MAAM;AAClD,UAAM,SAAS,SAAS,MAAM,GAAG,GAAG,SAAS,MAAM,OAAO;AAE1D,UAAM,eAAe,CAAC,MAAkB;AACtC,mBAAa,EAAE;AAAA;AAGjB,UAAM,kBAAkB,CAAC,MAAkB;AACzC,UAAI,CAAC,MAAM,eAAe,CAAC,cAAc,CAAC,UAAU;AAAO;AAE3D,UAAI,WAAW,SAAS,EAAE,MAAqB,GAAG;AAChD;AAEA,cAAM,KAAK,SAAS,MAAM;AAC1B,cAAM,EAAE,SAAS,GAAG;AACpB,cAAM,EAAE,aAAa,iBAAiB;AACtC,cAAM,SAAS,EAAE,UAAU;AAC3B,cAAM,MAAM,WAAW;AACvB,cAAM,SAAS,MAAM,WAAW;AAEhC,kBAAU,MAAM,YAAY;AAAA,uEACmC,UAAU,QAAQ,kBAAkB;AAAA,uEACpC,UAAU,WAAW,eAAe,iBAAiB;AAAA;AAAA,iBAE3G,CAAC,YAAY;AACtB,qBAAa,OAAO,WAAW,gBAAgB,MAAM,OAAO,cAAc;AAAA;AAC5E;AAGF,UAAM,kBAAkB,MAAM;AAC5B,UAAI,CAAC;AAAY;AACjB,mBAAa,UAAU;AACvB,mBAAa;AAAA;AAGf,UAAM,iBAAiB,MAAM;AAC3B,UAAI,CAAC,UAAU;AAAO;AACtB,gBAAU,MAAM,YAAY;AAC5B;AAAgB;AAGlB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;;;;;sBApICA,YAiCe;AAAA,IAhCZ,KAAK;AAAA,IACN,KAAI;AAAA,IACJ,MAAK;AAAA,IACL,OAAM;AAAA,IACN,cAAW;AAAA,IACV,cAAU;AAAA;MAAsC,gBAAO;AAAA;IAIvD,aAAW;AAAA,IACX,cAAY;AAAA;qBAGX,MAAqB;AAAA;;AAKrB,mBAJW;AAAA,UACV;AAAA,qBACS;AAAA;AACD;;;AAKL;QAHgB;AAAM;;AACZ;AACV;AAIA;;AAFyB;AAQ7B;;AAFI,eACE;AAAA;;;;;;;;;;;;"}