@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 6.42 kB
Source Map (JSON)
{"version":3,"file":"avatar-group.vue2.mjs","sources":["../../../components/avatar/avatar-group.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Avatar } from '@/components/avatar'\nimport { Renderer } from '@/components/renderer'\nimport { Tooltip } from '@/components/tooltip'\n\nimport { computed, provide, ref, watchEffect } from 'vue'\n\nimport { useNameHelper, useProps } from '@vexip-ui/config'\nimport { avatarGroupProps } from './props'\nimport { GROUP_STATE } from './symbol'\n\nimport type { ComponentSize } from '@vexip-ui/config'\nimport type { AvatarGroupSlots, AvatarOption } from './symbol'\n\ndefineOptions({ name: 'AvatarGroup' })\n\nconst _props = defineProps(avatarGroupProps)\nconst props = useProps('avatarGroup', _props, {\n size: 'default',\n options: {\n default: () => [],\n static: true\n },\n circle: false,\n max: null,\n showTip: false,\n tipTrigger: 'hover',\n vertical: false,\n offset: null,\n restColor: null,\n restBackground: null,\n slots: () => ({})\n})\n\ndefineSlots<AvatarGroupSlots>()\n\nconst nh = useNameHelper('avatar-group')\n\nconst renderAvatars = ref<AvatarOption[]>([])\nconst restAvatars = ref<AvatarOption[]>([])\n\nwatchEffect(() => {\n const size = props.options.length\n\n if (props.max > 0 && size > props.max) {\n renderAvatars.value = props.options.slice(0, props.max - 1)\n restAvatars.value = props.options.slice(props.max - 1)\n } else {\n renderAvatars.value = Array.from(props.options)\n restAvatars.value = []\n }\n})\n\nprovide(GROUP_STATE, props)\n\nconst className = computed(() => {\n return {\n [nh.b()]: true,\n [nh.ns('avatar-vars')]: true,\n [nh.bm('inherit')]: props.inherit,\n [nh.bm(props.size as ComponentSize)]:\n typeof props.size !== 'number' && props.size !== 'default',\n [nh.bm('circle')]: props.circle,\n [nh.bm('vertical')]: props.vertical\n }\n})\nconst style = computed(() => {\n const style: Record<string, string> = {}\n\n if (typeof props.offset === 'number') {\n style[nh.cv('offset')] = `${props.offset}px`\n }\n\n return style\n})\n</script>\n\n<template>\n <div :class=\"className\" role=\"group\" :style=\"style\">\n <div v-for=\"(option, index) in renderAvatars\" :key=\"index\" :class=\"nh.be('item')\">\n <slot :option=\"option\" :index=\"index\">\n <Renderer :renderer=\"props.slots.default\" :data=\"{ option, index }\">\n <Avatar\n inherit\n :src=\"option.src\"\n :icon=\"option.icon\"\n :alt=\"option.alt\"\n :fit=\"option.fit\"\n :src-set=\"option.srcSet\"\n :gap=\"option.gap\"\n :icon-scale=\"option.iconScale\"\n :fallback-src=\"option.fallbackSrc\"\n >\n {{ option.text }}\n </Avatar>\n </Renderer>\n </slot>\n </div>\n <div v-if=\"restAvatars.length\" :class=\"[nh.be('item'), nh.bem('item', 'rest')]\">\n <Tooltip\n v-if=\"props.showTip\"\n inherit\n :trigger=\"props.tipTrigger\"\n :tip-class=\"nh.be('rest')\"\n >\n <template #trigger>\n <slot name=\"rest\" :options=\"restAvatars\" :count=\"restAvatars.length\">\n <Renderer\n :renderer=\"props.slots.rest\"\n :data=\"{ options: restAvatars, count: restAvatars.length }\"\n >\n <Avatar inherit :color=\"props.restColor\" :background=\"props.restBackground\">\n {{ `+${restAvatars.length}` }}\n </Avatar>\n </Renderer>>\n </slot>\n </template>\n <slot name=\"tip\" :options=\"restAvatars\" :count=\"restAvatars.length\">\n <Renderer\n :renderer=\"props.slots.tip\"\n :data=\"{ options: restAvatars, count: restAvatars.length }\"\n >\n <Avatar\n v-for=\"(option, index) in restAvatars\"\n :key=\"index\"\n inherit\n :src=\"option.src\"\n :icon=\"option.icon\"\n :alt=\"option.alt\"\n :fit=\"option.fit\"\n :src-set=\"option.srcSet\"\n :gap=\"option.gap\"\n :icon-scale=\"option.iconScale\"\n :fallback-src=\"option.fallbackSrc\"\n >\n {{ option.text }}\n </Avatar>\n </Renderer>\n </slot>\n </Tooltip>\n <slot\n v-else\n name=\"rest\"\n :options=\"restAvatars\"\n :count=\"restAvatars.length\"\n >\n <Renderer\n :renderer=\"props.slots.rest\"\n :data=\"{ options: restAvatars, count: restAvatars.length }\"\n >\n <Avatar inherit :color=\"props.restColor\" :background=\"props.restBackground\">\n {{ `+${restAvatars.length}` }}\n </Avatar>\n </Renderer>\n </slot>\n </div>\n </div>\n</template>\n"],"names":["props","useProps","__props","nh","useNameHelper","renderAvatars","ref","restAvatars","watchEffect","size","provide","GROUP_STATE","className","computed","style"],"mappings":";;;;;;;;;;;;;;;AAiBM,UAAAA,IAAQC,EAAS,eADRC,GAC+B;AAAA,MAC5C,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS,MAAM,CAAC;AAAA,QAChB,QAAQ;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,OAAO,OAAO,CAAC;AAAA,IAAA,CAChB,GAIKC,IAAKC,EAAc,cAAc,GAEjCC,IAAgBC,EAAoB,EAAE,GACtCC,IAAcD,EAAoB,EAAE;AAE1C,IAAAE,EAAY,MAAM;AACV,YAAAC,IAAOT,EAAM,QAAQ;AAE3B,MAAIA,EAAM,MAAM,KAAKS,IAAOT,EAAM,OAChCK,EAAc,QAAQL,EAAM,QAAQ,MAAM,GAAGA,EAAM,MAAM,CAAC,GAC1DO,EAAY,QAAQP,EAAM,QAAQ,MAAMA,EAAM,MAAM,CAAC,MAErDK,EAAc,QAAQ,MAAM,KAAKL,EAAM,OAAO,GAC9CO,EAAY,QAAQ,CAAC;AAAA,IACvB,CACD,GAEDG,EAAQC,GAAaX,CAAK;AAEpB,UAAAY,IAAYC,EAAS,OAClB;AAAA,MACL,CAACV,EAAG,EAAE,CAAC,GAAG;AAAA,MACV,CAACA,EAAG,GAAG,aAAa,CAAC,GAAG;AAAA,MACxB,CAACA,EAAG,GAAG,SAAS,CAAC,GAAGH,EAAM;AAAA,MAC1B,CAACG,EAAG,GAAGH,EAAM,IAAqB,CAAC,GACjC,OAAOA,EAAM,QAAS,YAAYA,EAAM,SAAS;AAAA,MACnD,CAACG,EAAG,GAAG,QAAQ,CAAC,GAAGH,EAAM;AAAA,MACzB,CAACG,EAAG,GAAG,UAAU,CAAC,GAAGH,EAAM;AAAA,IAC7B,EACD,GACKc,IAAQD,EAAS,MAAM;AAC3B,YAAMC,IAAgC,CAAC;AAEnC,aAAA,OAAOd,EAAM,UAAW,aAC1Bc,EAAMX,EAAG,GAAG,QAAQ,CAAC,IAAI,GAAGH,EAAM,MAAM,OAGnCc;AAAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}