@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
1 lines • 5.1 kB
Source Map (JSON)
{"version":3,"file":"avatar2.mjs","sources":["../../../../../../packages/components/avatar/src/avatar.vue"],"sourcesContent":["<template>\n <div ref=\"root$\" :class=\"avatarClassess\" :style=\"avatarStyles\">\n <div v-if=\"loading\" :class=\"ns.e('loading')\">\n <div :class=\"ns.em('loading', 'animate')\">\n <icon-loading />\n </div>\n </div>\n\n <div\n :class=\"[\n ns.b(),\n getText.length > 2 && ns.em('letter', `${getText.length}`),\n ]\"\n >\n <template v-if=\"$slots.text\">\n {{ getText }}\n </template>\n\n <slot />\n </div>\n\n <div\n v-if=\"$slots.badge || badge\"\n :class=\"[\n ns.e('badge'),\n ns.is('slot', !!$slots.badge),\n ns.is('writing', writing),\n badgePosition,\n ]\"\n >\n <div v-if=\"writing\" :class=\"ns.e('points')\">\n <div :class=\"ns.em('points', 'item')\" />\n <div :class=\"ns.em('points', 'item')\" />\n <div :class=\"ns.em('points', 'item')\" />\n </div>\n <slot v-else name=\"badge\" />\n </div>\n\n <div v-if=\"isLastest\" v-show=\"showLastest\" :class=\"ns.e('lastest')\">\n {{ `+${moreNumber}` }}\n </div>\n\n <div v-if=\"$slots.icons\" :class=\"ns.e('icons')\">\n <slot name=\"icons\" />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, useSlots, watch } from 'vue'\nimport {\n useColor,\n useNamespace,\n useVuesaxBaseComponent,\n} from '@vuesax-alpha/hooks'\nimport { getVsColor, setCssVar } from '@vuesax-alpha/utils'\nimport { IconLoading } from '@vuesax-alpha/components/icon'\nimport { avatarProps } from './avatar'\nimport { useAvatarStatus } from './composables'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'VsAvatar',\n})\n\nconst props = defineProps(avatarProps)\nconst slots = useSlots()\n\nconst ns = useNamespace('avatar')\n\nconst root$ = ref<HTMLElement>()\n\nconst { isHidden, isLastest, getText, showLastest, moreNumber } =\n useAvatarStatus(slots)\n\nconst vsBaseClasses = useVuesaxBaseComponent(useColor())\nconst avatarClassess = computed(() => [\n ns.b('content'),\n vsBaseClasses,\n props.history && 'history',\n props.historyGradient && 'history--gradient',\n props.shape != 'default' && `${ns.be('content', props.shape)}`,\n isHidden.value && `${ns.be('content', 'hidden')}`,\n isLastest.value && `${ns.be('content', 'latest')}`,\n slots.icons && `${ns.be('content', 'hasIcons')}`,\n])\n\nconst avatarStyles = computed<CSSProperties>(\n () =>\n ({\n width: `${props.size}px`,\n height: `${props.size}px`,\n cursor: props.pointer ? 'pointer' : '',\n ...ns.cssVar({\n color: getVsColor(props.color),\n }),\n } as CSSProperties)\n)\n\nwatch(\n () => props.badgeColor,\n () => {\n setCssVar('avatar-badge', getVsColor(props.badgeColor), root$.value)\n root$.value?.classList.add(ns.em('badge', 'change-color'))\n }\n)\n\nonMounted(() => {\n root$.value?.classList.add(ns.em('badge', 'change-color'))\n setCssVar('avatar-badge', getVsColor(props.badgeColor), root$.value)\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;mCA6Dc,CAAA;AAAA,EACZ,IAAM,EAAA,UAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAGA,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEjB,IAAA,MAAA,EAAA,GAAK,aAAa,QAAQ,CAAA,CAAA;AAEhC,IAAA,MAAM,QAAQ,GAAiB,EAAA,CAAA;AAEzB,IAAA,MAAA,EAAE,UAAU,SAAW,EAAA,OAAA,EAAS,aAAa,UAAW,EAAA,GAC5D,gBAAgB,KAAK,CAAA,CAAA;AAEjB,IAAA,MAAA,aAAA,GAAgB,sBAAuB,CAAA,QAAA,EAAU,CAAA,CAAA;AACjD,IAAA,MAAA,cAAA,GAAiB,SAAS,MAAM;AAAA,MACpC,EAAA,CAAG,EAAE,SAAS,CAAA;AAAA,MACd,aAAA;AAAA,MACA,MAAM,OAAW,IAAA,SAAA;AAAA,MACjB,MAAM,eAAmB,IAAA,mBAAA;AAAA,MACzB,KAAA,CAAM,SAAS,SAAa,IAAA,CAAA,EAAG,GAAG,EAAG,CAAA,SAAA,EAAW,MAAM,KAAK,CAAA,CAAA,CAAA;AAAA,MAC3D,SAAS,KAAS,IAAA,CAAA,EAAG,EAAG,CAAA,EAAA,CAAG,WAAW,QAAQ,CAAA,CAAA,CAAA;AAAA,MAC9C,UAAU,KAAS,IAAA,CAAA,EAAG,EAAG,CAAA,EAAA,CAAG,WAAW,QAAQ,CAAA,CAAA,CAAA;AAAA,MAC/C,MAAM,KAAS,IAAA,CAAA,EAAG,EAAG,CAAA,EAAA,CAAG,WAAW,UAAU,CAAA,CAAA,CAAA;AAAA,KAC9C,CAAA,CAAA;AAED,IAAA,MAAM,YAAe,GAAA,QAAA;AAAA,MACnB,OACG;AAAA,QACC,KAAA,EAAO,GAAG,KAAM,CAAA,IAAA,CAAA,EAAA,CAAA;AAAA,QAChB,MAAA,EAAQ,GAAG,KAAM,CAAA,IAAA,CAAA,EAAA,CAAA;AAAA,QACjB,MAAA,EAAQ,KAAM,CAAA,OAAA,GAAU,SAAY,GAAA,EAAA;AAAA,QACpC,GAAG,GAAG,MAAO,CAAA;AAAA,UACX,KAAA,EAAO,UAAW,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,SAC9B,CAAA;AAAA,OACH,CAAA;AAAA,KACJ,CAAA;AAEA,IAAA,KAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,MAAM;;AACJ,QAAA,SAAA,CAAU,gBAAgB,UAAW,CAAA,KAAA,CAAM,UAAU,CAAA,EAAG,MAAM,KAAK,CAAA,CAAA;AACnE,QAAA,CAAA,EAAA,GAAA,KAAA,CAAM,UAAN,IAAa,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAA,CAAU,IAAI,EAAG,CAAA,EAAA,CAAG,SAAS,cAAc,CAAA,CAAA,CAAA;AAAA,OAC1D;AAAA,KACF,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;;AACd,MAAA,CAAA,EAAA,GAAA,KAAA,CAAM,UAAN,IAAa,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAA,CAAU,IAAI,EAAG,CAAA,EAAA,CAAG,SAAS,cAAc,CAAA,CAAA,CAAA;AACxD,MAAA,SAAA,CAAU,gBAAgB,UAAW,CAAA,KAAA,CAAM,UAAU,CAAA,EAAG,MAAM,KAAK,CAAA,CAAA;AAAA,KACpE,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}