{"version":3,"file":"my-message.vue2.mjs","sources":["../../../../../../src/components/my/message/my-message.vue"],"sourcesContent":["<script lang=\"ts\">\nenum ColorStyle { // 颜色主题对象\n    info = '#1677FF',\n    success = '#52c41a',\n    error = '#ff4d4f',\n    warning = '#faad14',\n    loading = '#1677FF'\n}\n</script>\n<script setup lang=\"ts\">\nimport { ref, computed, watch } from 'vue';\nimport { cancelRaf, rafTimeout } from '@myprint/design/utils/utils';\n\n// @ts-ignore\ninterface Props {\n    duration?: number; // 自动关闭的延时，单位ms\n    top?: number | string; // 消息距离顶部的位置，单位px\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    duration: 3000,\n    top: 30\n});\n\n\n\ninterface Message {\n    content: string;\n    mode: string;\n}\n\nconst resetTimer = ref();\nconst showMessage = ref<boolean[]>([]);\nconst hideTimers = ref<any[]>([]);\nconst messageContent = ref<Message[]>([]);\nconst messTop = computed(() => {\n    if (typeof props.top === 'number') {\n        return props.top + 'px';\n    }\n    return props.top;\n});\nconst clear = computed(() => {\n    // 所有提示是否已经全部变为false\n    return showMessage.value.every((show) => !show);\n});\nwatch(clear, (to, from) => {\n    // 所有提示都消失后重置\n    if (!from && to) {\n        resetTimer.value = rafTimeout(() => {\n            messageContent.value.splice(0);\n            showMessage.value.splice(0);\n        }, 300);\n    }\n});\n\nfunction onEnter(index: number) {\n    cancelRaf(hideTimers.value[index]);\n}\n\nfunction onLeave(index: number) {\n    onHideMessage(index);\n}\n\nfunction show() {\n    cancelRaf(resetTimer.value);\n    const index = messageContent.value.length - 1;\n    showMessage.value[index] = true;\n    onHideMessage(index);\n}\n\nfunction info(content: string) {\n    messageContent.value.push({\n        content,\n        mode: 'info'\n    });\n    show();\n}\n\nfunction success(content: string) {\n    messageContent.value.push({\n        content,\n        mode: 'success'\n    });\n    show();\n}\n\nfunction error(content: string) {\n    messageContent.value.push({\n        content,\n        mode: 'error'\n    });\n    show();\n}\n\nfunction warning(content: string) {\n    messageContent.value.push({\n        content,\n        mode: 'warning'\n    });\n    show();\n}\n\nfunction loading(content: string) {\n    messageContent.value.push({\n        content,\n        mode: 'loading'\n    });\n    show();\n}\n\ndefineExpose({\n    info,\n    success,\n    error,\n    warning,\n    loading\n});\nconst emit = defineEmits(['close']);\n\nfunction onHideMessage(index: number) {\n    hideTimers.value[index] = rafTimeout(() => {\n        showMessage.value[index] = false;\n        emit('close');\n    }, props.duration);\n}\n</script>\n<template>\n    <div class=\"m-message-wrap\" :style=\"`top: ${messTop};`\">\n        <TransitionGroup name=\"slide-fade\">\n            <div class=\"m-message\" v-show=\"showMessage[index]\" v-for=\"(message, index) in messageContent\" :key=\"index\">\n                <div class=\"m-message-content\" @mouseenter=\"onEnter(index)\" @mouseleave=\"onLeave(index)\">\n                    <svg\n                        class=\"u-svg\"\n                        v-if=\"message.mode === 'info'\"\n                        :style=\"{ fill: ColorStyle[message.mode] }\"\n                        viewBox=\"64 64 896 896\"\n                        data-icon=\"info-circle\"\n                        aria-hidden=\"true\"\n                        focusable=\"false\"\n                    >\n                        <path\n                            d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\"\n                        ></path>\n                    </svg>\n                    <svg\n                        class=\"u-svg\"\n                        v-if=\"message.mode === 'success'\"\n                        :style=\"{ fill: ColorStyle[message.mode] }\"\n                        viewBox=\"64 64 896 896\"\n                        data-icon=\"check-circle\"\n                        aria-hidden=\"true\"\n                        focusable=\"false\"\n                    >\n                        <path\n                            d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z\"\n                        ></path>\n                    </svg>\n                    <svg\n                        class=\"u-svg\"\n                        v-if=\"message.mode === 'error'\"\n                        :style=\"{ fill: ColorStyle[message.mode] }\"\n                        viewBox=\"64 64 896 896\"\n                        data-icon=\"close-circle\"\n                        aria-hidden=\"true\"\n                        focusable=\"false\"\n                    >\n                        <path\n                            d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z\"\n                        ></path>\n                    </svg>\n                    <svg\n                        class=\"u-svg\"\n                        v-if=\"message.mode === 'warning'\"\n                        :style=\"{ fill: ColorStyle[message.mode] }\"\n                        viewBox=\"64 64 896 896\"\n                        data-icon=\"exclamation-circle\"\n                        aria-hidden=\"true\"\n                        focusable=\"false\"\n                    >\n                        <path\n                            d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\"\n                        ></path>\n                    </svg>\n                    <svg\n                        class=\"u-svg circular\"\n                        v-if=\"message.mode === 'loading'\"\n                        :style=\"{ stroke: ColorStyle[message.mode] }\"\n                        viewBox=\"0 0 50 50\"\n                        focusable=\"false\"\n                    >\n                        <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n                    </svg>\n                    <span class=\"u-content\">{{ message.content }}</span>\n                </div>\n            </div>\n        </TransitionGroup>\n    </div>\n</template>\n"],"names":["ColorStyle","show"],"mappings":"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"}