hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
1 lines • 4.02 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/overflow-list/src/index.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, h, ref, vShow, withDirectives } from 'vue'\nimport { HlDropdown, HlDropdownItem, HlDropdownMenu, HlIcon, SystemMore } from 'hongluan-ui'\nimport { usePrefix } from '@hongluan-business-ui/utils/util'\n\nimport type { PropType, VNode } from 'vue'\n\nexport default defineComponent({\n name: 'OverflowList',\n props: {\n showCount: {\n type: Number,\n default: 1,\n },\n showType: {\n type: String as PropType<'expand' | 'tooltip'>,\n default: 'tooltip',\n },\n dropdownProps: {\n type: Object,\n default: () => ({}),\n },\n },\n setup(props, { slots }) {\n const { prefix } = usePrefix()\n const hasMore = ref(true)\n\n const show = () => {\n hasMore.value = false\n }\n const hide = () => {\n hasMore.value = true\n }\n\n return () => {\n let childDoms = slots.default?.() ?? [], realDoms = childDoms\n if (\n childDoms.length === 1 &&\n /Symbol\\(.*\\)/.test(childDoms[0].type.toString()) &&\n childDoms[0].children.length\n ) {\n childDoms = childDoms[0].children as any\n realDoms = childDoms\n }\n\n realDoms = realDoms.filter(rd => !/Symbol\\(.*\\)/.test(rd.type.toString()))\n\n if (realDoms.length <= props.showCount) {\n return h('div', {\n class: `${prefix}-overflow-list`,\n }, realDoms)\n } else {\n if (props.showType === 'tooltip') {\n const dropMenuLen = realDoms.length - 1, dropMenuDoms = []\n for (let i = props.showCount; i <= dropMenuLen; i++) {\n dropMenuDoms.push(h(HlDropdownItem, null, { default: () => realDoms[i] }))\n }\n const dropdown = h(HlDropdown, { showTimeout: 0, placement: 'bottom', class: 'm-l-xs', ...props.dropdownProps }, {\n default: () => slots.more ? slots.more({ hasMore }) : h(HlIcon, { style: 'transform:rotate(90deg)' }, { default: () => h(SystemMore) }),\n dropdown: () => h(HlDropdownMenu, { class: 'overflow-items' }, { default: () => dropMenuDoms }),\n })\n\n return h('div', {\n class: `${prefix}-overflow-list`,\n }, [realDoms.slice(0, props.showCount), dropdown])\n } else {\n const len = realDoms.length - 1, moreItems: VNode[] = []\n for (let i = props.showCount; i <= len; i++) {\n moreItems.push(withDirectives(h(realDoms[i]), [[vShow, !hasMore.value]]))\n }\n const moreIcon = slots.more ?\n slots.more({ hasMore: hasMore.value, show, hide }) :\n h(HlIcon, {\n style: 'transform:rotate(90deg)',\n class: 'cursor-pointer',\n onClick: () => {\n hasMore.value = !hasMore.value\n },\n }, { default: () => h(SystemMore) })\n return h('div', {\n class: `${prefix}-overflow-list`,\n }, [realDoms.slice(0, props.showCount), ...moreItems, moreIcon])\n }\n }\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;MAOK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAO;AAAA;AAAA,EAGpB,MAAM,OAAO,EAAE,SAAS;AACtB,UAAM,EAAE,WAAW;AACnB,UAAM,UAAU,IAAI;AAEpB,UAAM,OAAO,MAAM;AACjB,cAAQ,QAAQ;AAAA;AAElB,UAAM,OAAO,MAAM;AACjB,cAAQ,QAAQ;AAAA;AAGlB,WAAO,MAAM;AACX,UAAI;AACJ,UACE,qBAAqB,yBACD,2CACV,YAAY;AAEtB,oBAAY;AACZ;AAAW;AAGb;AAEA;AACE;AAAgB,iBACP;AAAG;AACT;AAEH;AACE;AACA,6CAAmC,kBAAkB;AACnD,wDAA4C;AAAwB;AAEtE;AAAiH,2BAChG,yCAAyC,UAAU,OAAO;AAAgD,YACzH,kCAAkC;AAA8C;AAGlF;AAAgB,mBACP;AAAG,6BACO;AAAqB;AAExC;AACA,mBAAS,qBAAqB,eAAe;AAC3C,qDAAyC;AAAuB;AAElE;AAEY;AACD,YACP,OAAO;AAAA,YACP;AACE;AAAyB;AAAA,aAE1B;AACL;AAAgB,mBACP;AAAG,6BACO;AAAmC;AAAA;AAAA;AAAA;AAAA;;;;;"}