@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 6.16 kB
Source Map (JSON)
{"version":3,"file":"notice.vue2.mjs","sources":["../../../components/notice/notice.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Icon } from '@/components/icon'\nimport { Renderer } from '@/components/renderer'\nimport { Popup } from '@/components/popup'\n\nimport { computed, reactive, ref } from 'vue'\n\nimport { useIcons, useNameHelper } from '@vexip-ui/config'\nimport { assertiveTypes, effectiveTypes } from './symbol'\n\nimport type { Key, NoticeConfig, NoticePlacement } from './symbol'\n\ndefineOptions({ name: 'Notice' })\n\nconst nh = useNameHelper('notice')\nconst icons = useIcons()\n\nconst predefinedIcons = computed(() => ({\n primary: icons.value.info,\n info: icons.value.info,\n success: icons.value.success,\n warning: icons.value.warning,\n error: icons.value.error\n}))\n\nconst placement = ref<NoticePlacement>('top-right')\nconst popup = ref<InstanceType<typeof Popup>>()\n\nasync function add(options: Record<string, any>) {\n if (popup.value) {\n await popup.value.add(options)\n }\n}\n\nasync function remove(key: Key) {\n return !!popup.value && (await popup.value.remove(key))\n}\n\nfunction clear() {\n popup.value && popup.value.clear()\n}\n\nfunction config(config: NoticeConfig) {\n placement.value = config.placement || placement.value\n}\n\ndefineExpose(\n reactive({\n popup,\n add,\n remove,\n clear,\n config\n })\n)\n</script>\n\n<template>\n <!-- eslint-disable vue/no-v-html -->\n <Popup\n ref=\"popup\"\n :class=\"nh.b()\"\n :transition-name=\"nh.ns(`popup-${placement.split('-')[1]}`)\"\n :placement=\"placement\"\n >\n <template #item=\"{ item }: { item: import('./symbol').NoticeOptions }\">\n <div\n :class=\"[\n {\n [nh.be('item')]: true,\n [nh.bs('vars')]: true,\n [nh.bem('item', 'title-only')]: !item.content && typeof item.renderer !== 'function',\n [nh.bem('item', 'has-icon')]: item.icon,\n [nh.bem('item', 'content-only')]: !item.title,\n [nh.bem('item', item.type!)]: item.type && effectiveTypes.includes(item.type),\n [nh.bem('item', 'background')]: item.background,\n [nh.bem('item', 'color')]: item.background && item.color,\n [nh.bem('item', 'color-only')]: !item.background && item.color,\n [nh.bem('item', 'marker')]: item.marker\n },\n item.className\n ]\"\n role=\"alert\"\n :style=\"[\n {\n color: typeof item.color === 'string' ? item.color : undefined,\n backgroundColor: typeof item.background === 'string' ? item.background : undefined\n },\n item.style || {}\n ]\"\n aria-atomic=\"true\"\n :aria-live=\"item.type && assertiveTypes.includes(item.type) ? 'assertive' : 'polite'\"\n >\n <div\n v-if=\"item.icon || (item.type && effectiveTypes.includes(item.type))\"\n :class=\"nh.be('icon')\"\n :style=\"{ color: item.iconColor }\"\n >\n <Icon\n v-if=\"item.icon\"\n :icon=\"item.icon\"\n :scale=\"!item.content && typeof item.renderer !== 'function' ? 1 : 2\"\n :style=\"[{ color: item.iconColor }, (item.icon as any).style]\"\n ></Icon>\n <Icon\n v-else\n v-bind=\"predefinedIcons[item.type!]\"\n :scale=\"!item.content && typeof item.renderer !== 'function' ? 1 : 2\"\n :style=\"{ color: item.iconColor }\"\n ></Icon>\n </div>\n <div :class=\"nh.be('wrapper')\">\n <Renderer\n v-if=\"typeof item.renderer === 'function'\"\n :renderer=\"item.renderer\"\n :data=\"item\"\n ></Renderer>\n <template v-else>\n <template v-if=\"item.title\">\n <div\n v-if=\"item.parseHtml\"\n :class=\"nh.be('title')\"\n :style=\"{\n color: typeof item.titleColor === 'string' ? item.titleColor : undefined\n }\"\n v-html=\"item.title\"\n ></div>\n <div\n v-else\n :class=\"nh.be('title')\"\n :style=\"{\n color: typeof item.titleColor === 'string' ? item.titleColor : undefined\n }\"\n >\n {{ item.title || '' }}\n </div>\n </template>\n <template v-if=\"item.content\">\n <div v-if=\"item.parseHtml\" :class=\"nh.be('content')\" v-html=\"item.content\"></div>\n <div v-else :class=\"nh.be('content')\">\n {{ item.content || '' }}\n </div>\n </template>\n </template>\n </div>\n <button\n v-if=\"item.closable\"\n type=\"button\"\n :class=\"nh.be('close')\"\n @click=\"remove(item.key!)\"\n >\n <Icon v-bind=\"icons.close\" label=\"close\"></Icon>\n </button>\n </div>\n </template>\n </Popup>\n</template>\n"],"names":["nh","useNameHelper","icons","useIcons","predefinedIcons","computed","placement","ref","popup","add","options","remove","key","clear","config","__expose","reactive"],"mappings":";;;;;;;;;;;;;AAcM,UAAAA,IAAKC,EAAc,QAAQ,GAC3BC,IAAQC,EAAS,GAEjBC,IAAkBC,EAAS,OAAO;AAAA,MACtC,SAASH,EAAM,MAAM;AAAA,MACrB,MAAMA,EAAM,MAAM;AAAA,MAClB,SAASA,EAAM,MAAM;AAAA,MACrB,SAASA,EAAM,MAAM;AAAA,MACrB,OAAOA,EAAM,MAAM;AAAA,IAAA,EACnB,GAEII,IAAYC,EAAqB,WAAW,GAC5CC,IAAQD,EAAgC;AAE9C,mBAAeE,EAAIC,GAA8B;AAC/C,MAAIF,EAAM,SACF,MAAAA,EAAM,MAAM,IAAIE,CAAO;AAAA,IAC/B;AAGF,mBAAeC,EAAOC,GAAU;AACvB,aAAA,CAAC,CAACJ,EAAM,SAAU,MAAMA,EAAM,MAAM,OAAOI,CAAG;AAAA,IAAA;AAGvD,aAASC,IAAQ;AACT,MAAAL,EAAA,SAASA,EAAM,MAAM,MAAM;AAAA,IAAA;AAGnC,aAASM,EAAOA,GAAsB;AAC1B,MAAAR,EAAA,QAAQQ,EAAO,aAAaR,EAAU;AAAA,IAAA;AAGlD,WAAAS;AAAA,MACEC,EAAS;AAAA,QACP,OAAAR;AAAA,QACA,KAAAC;AAAA,QACA,QAAAE;AAAA,QACA,OAAAE;AAAA,QACA,QAAAC;AAAA,MACD,CAAA;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}