From d24140f6738c71d9c60037772a0615b2b5761be1 Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Thu, 28 Nov 2024 14:07:18 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(message):=20add=20icon=20suppo?=
 =?UTF-8?q?er=20to=20message=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/content/2.components/message.md        | 14 ++++++++++++++
 src/runtime/components/overlays/Message.vue | 16 +++++++++++-----
 src/runtime/themes/overlays/message.ts      |  4 ++++
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/docs/content/2.components/message.md b/docs/content/2.components/message.md
index 6e1e772..6e85571 100644
--- a/docs/content/2.components/message.md
+++ b/docs/content/2.components/message.md
@@ -48,6 +48,20 @@ props:
 ---
 ::
 
+### Icon
+
+Or you can use the `icon` prop to change the icon of the message.
+
+::ComponentPreview
+---
+privateProps:
+  content: Thanks for activating
+props:
+  icon: tabler:circle-key
+---
+::
+
+
 ### Color
 
 Use the `color` prop to change the color of the message.
diff --git a/src/runtime/components/overlays/Message.vue b/src/runtime/components/overlays/Message.vue
index e116892..4510789 100644
--- a/src/runtime/components/overlays/Message.vue
+++ b/src/runtime/components/overlays/Message.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ref, onMounted, defineComponent, type PropType, toRef, computed } from 'vue'
+import { onMounted, defineComponent, type PropType, toRef, computed } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
 import { message } from '../../themes'
 import type { DeepPartial, Message, MessageColor, MessageType, Strategy } from '../../types/index'
@@ -17,6 +17,10 @@ export default defineComponent({
       type: String as PropType<MessageColor>,
       default: undefined,
     },
+    icon: {
+      type: String,
+      default: null,
+    },
     duration: {
       type: Number,
       default: config.default.duration,
@@ -63,6 +67,10 @@ export default defineComponent({
       }
     })
 
+    const iconName = computed(() => {
+      return props.icon || ui.value.type[props.type]?.icon || null
+    })
+
     onMounted(() => {
       setTimeout(() => {
         message.remove(messageBody.value.id)
@@ -75,6 +83,7 @@ export default defineComponent({
       attrs,
       messageBody,
       containerClass,
+      iconName,
     }
   },
 })
@@ -83,10 +92,7 @@ export default defineComponent({
 <template>
   <div :class="ui.wrapper" v-bind="attrs">
     <div :class="containerClass">
-      <IconCircleSuccess v-if="messageBody?.type === 'success'" class="text-xl" />
-      <IconCircleWarning v-if="messageBody?.type === 'warning'" class="text-xl" />
-      <IconCircleError v-if="messageBody?.type === 'error'" class="text-xl" />
-      <IconCircleInfo v-if="messageBody?.type === 'info'" class="text-xl" />
+      <RayIcon v-if="iconName" :name="iconName" class="text-xl" />
       <span>
         {{ messageBody.content }}
       </span>
diff --git a/src/runtime/themes/overlays/message.ts b/src/runtime/themes/overlays/message.ts
index 2ad4c28..2c6e861 100644
--- a/src/runtime/themes/overlays/message.ts
+++ b/src/runtime/themes/overlays/message.ts
@@ -9,15 +9,19 @@ export default {
   type: {
     success: {
       color: 'emerald',
+      icon: 'tabler:circle-check',
     },
     warning: {
       color: 'amber',
+      icon: 'tabler:alert-circle',
     },
     error: {
       color: 'red',
+      icon: 'tabler:circle-x',
     },
     info: {
       color: 'blue',
+      icon: 'tabler:info-circle',
     },
   },
   default: {