hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
1 lines • 6.35 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/avatar-list/src/index.vue"],"sourcesContent":["<template>\n <hl-group ref=\"hlGroup\" :class=\"prefix + '-avatar-list'\" :indent=\"computedIndent\">\n <template v-for=\"img in imgList\" :key=\"img[props.url]\">\n <hl-popover\n trigger=\"hover\"\n :popper-class=\"popperClass\"\n :disabled=\"!img[props.title] || img[props.url] === 'LAST_NUMBER'\"\n >\n <slot name=\"tip\" :item=\"img\">\n <span>{{ img[props.title] }}</span>\n </slot>\n <template #reference>\n <hl-thumb\n v-if=\"img[props.url] !== 'LAST_NUMBER'\"\n :src=\"img[props.url]\"\n :size=\"size\"\n :fit=\"fit\"\n bordered\n round\n @click=\"$emit('click', img)\"\n />\n <hl-thumb\n v-else\n :size=\"size\"\n :fit=\"fit\"\n :style=\"'background-color:' + maxBgColor\"\n bordered\n round\n @click=\"$emit('click', img)\"\n >\n <span class=\"lastClazz\">{{ img[props.title] }}</span>\n </hl-thumb>\n </template>\n </hl-popover>\n </template>\n </hl-group>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, onMounted, ref } from 'vue'\nimport { HlThumb, HlGroup, HlPopover } from 'hongluan-ui'\nimport { isValidComponentSize } from '@hongluan-business-ui/utils/validators'\nimport { usePrefix } from '@hongluan-business-ui/utils/util'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@hongluan-business-ui/utils/types'\n\ntype ImgObj = {\n url: string\n title: string\n}\n\nexport default defineComponent({\n name: 'AvatarList',\n components: {\n HlGroup,\n HlThumb,\n HlPopover,\n },\n props: {\n data: {\n type: Array,\n default: () => [],\n },\n indent: String,\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n default: 'sm',\n },\n fit: {\n type: String,\n default: 'cover',\n },\n props: {\n type: Object as PropType<ImgObj>,\n default: () => ({ url: 'url', title: 'title' }),\n },\n max: Number,\n maxBgColor: {\n type: String,\n default: 'black',\n },\n popperClass: {\n type: String,\n default: '',\n },\n },\n emits: ['click'],\n setup(props) {\n const { prefix } = usePrefix()\n const computedIndent = ref(props.indent)\n const hlGroup = ref(null)\n\n const imgList = computed(() => {\n if (isNaN(+props.max) || props.data.length < props.max) {\n return props.data\n } else {\n const last = {\n [props.props.url]: 'LAST_NUMBER',\n [props.props.title]: props.data.length - props.max,\n }\n return [...props.data.slice(0, props.max), last]\n }\n })\n const lastClazz = computed(() => {\n let clazz = ''\n if (!isNaN(+props.max) && props.data.length > props.max) {\n const lastNum = props.data.length - props.max\n if (lastNum < 10) {\n clazz = 'less-10'\n } else if (lastNum < 100) {\n clazz = 'less-100'\n } else if (lastNum < 1000) {\n clazz = 'less-1k'\n } else if (lastNum < 10000) {\n clazz = 'less-10k'\n } else if (lastNum < 100000) {\n clazz = 'less-100k'\n }\n }\n return clazz\n })\n\n onMounted(() => {\n if (!computedIndent.value) {\n const img = hlGroup.value.$el.querySelector('div.group-item') as HTMLElement\n try {\n computedIndent.value = -img.offsetWidth / 2 + 'px'\n } catch {\n computedIndent.value = '0px'\n }\n }\n })\n\n return {\n prefix,\n hlGroup,\n imgList,\n computedIndent,\n lastClazz,\n }\n },\n})\n</script>\n"],"names":["_createBlock","_normalizeClass","_createElementBlock","_Fragment","_withCtx","_normalizeStyle","_createElementVNode","_toDisplayString","_renderSlot"],"mappings":"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"}