song-ui-u
Version:
vue3 + js的PC前端组件库
1 lines • 3.69 kB
Source Map (JSON)
{"version":3,"file":"message-box.vue.mjs","sources":["../../../../../packages/components/messageBox/src/message-box.vue"],"sourcesContent":["<template>\n <transition :name=\"ns.b()\">\n <x-mask v-show=\"visible\" v-bind=\"$attrs\" @close=\"useClose\">\n <div :class=\"[ns.b()]\">\n <div :class=\"[ns.e('wrap')]\">\n <div :class=\"[ns.e('body')]\">\n <div :class=\"[ns.e('header')]\">\n <x-icon :class=\"[ns.m(theme)]\"><component :is=\"icon\" /></x-icon>\n <div :class=\"[ns.e('title')]\">{{ title }}</div>\n </div>\n <div :class=\"[ns.e('content')]\">\n <template v-if=\"isString\">{{ content }}</template>\n <component v-if=\"isVNodeDom\" :is=\"content\" />\n </div>\n </div>\n <div :class=\"[ns.e('footer')]\" v-if=\"footer\">\n <template v-if=\"$slots.footer\"><slot name=\"footer\" /></template>\n <template v-else>\n <x-button\n text\n size=\"large\"\n v-if=\"cancelButtonShow\"\n @click=\"useBeforeCancel\"\n >{{ cancelButtonText }}</x-button\n >\n <x-button\n type=\"primary\"\n size=\"large\"\n v-if=\"confirmButtonShow\"\n :loading=\"isLoading\"\n @click=\"useBeforeChange\"\n >{{ confirmButtonText }}</x-button\n >\n </template>\n </div>\n </div>\n </div>\n </x-mask>\n </transition>\n</template>\n<script>\nexport default { name: \"x-message-box\" };\n</script>\n<script setup>\nimport { onMounted, computed, isVNode } from \"vue\";\nimport { useNamespace } from \"@ui-library/hook\";\nimport { typeIcon, themeType, types } from \"@ui-library/utils\";\nimport { XMask, XButton, XIcon } from \"@ui-library/components\";\nimport { useMessageBox } from \"./composables/use-message-box\";\nimport { messageBoxProps } from \"./message-box\";\nconst props = defineProps(messageBoxProps);\nconst emit = defineEmits([\"ok\", \"cancel\", \"open\", \"opened\", \"close\", \"closed\"]);\nconst ns = useNamespace(\"message-box\");\nconst visible = defineModel();\nconst { useBeforeCancel, useBeforeChange, useClose, isLoading } = useMessageBox(\n { props, visible }\n);\n\n// icon\nconst icon = computed(() => typeIcon[props.icon]);\nconst theme = computed(() => themeType?.[props.icon] || props.icon);\n\n// isString\nconst isString = computed(() => types().isString(props.content));\nconst isVNodeDom = computed(() => isVNode(props.content));\n\nonMounted(() => {\n visible.value = true;\n});\n</script>\n"],"names":["_useModel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAe,WAAA,GAAA,EAAE,IAAI,EAAE,eAAe,EAAE,CAAA;;;;;;;;;;;AASxC,MAAM,KAAK,GAAG,OAA4B,CAAA;AAC1C,MAAM,IAAI,GAAG,MAAkE,CAAA;AAC/E,MAAM,EAAE,GAAG,YAAY,CAAC,aAAa,CAAC,CAAA;AACtC,MAAM,OAAO,GAAGA,QAAW,sBAAC,CAAC,CAAA;AAC7B,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,aAAa;AAC/E,EAAE,EAAE,KAAK,EAAE,OAAO,EAAC;AACnB,CAAC,CAAA;;AAED;AACA,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAA;AACjD,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,CAAA;;AAEnE;AACA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,KAAK,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAA;AAChE,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAA;;AAEzD,SAAS,CAAC,MAAM;AAChB,EAAE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAA;AACtB,CAAC,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}