From 384faeadf4339cdca7d868c2dbbc49eb6e3ab13b Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Fri, 15 Nov 2024 19:45:10 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat(message):=20new=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .playground/pages/index.vue             | 19 +++++
 app.vue                                 | 10 ++-
 components/icons/CircleError.vue        | 10 +++
 components/icons/CircleInfo.vue         |  7 ++
 components/icons/CircleSuccess.vue      | 10 +++
 components/icons/CircleWarning.vue      | 10 +++
 components/icons/Spinner.vue            | 11 +++
 components/overlays/Message.vue         | 62 ++++++++++++++++
 components/overlays/MessageProvider.vue | 95 +++++++++++++++++++++++++
 composables/useMessage.ts               |  9 +++
 nuxt.config.ts                          |  6 ++
 types/Message.d.ts                      | 20 ++++++
 12 files changed, 267 insertions(+), 2 deletions(-)
 create mode 100644 .playground/pages/index.vue
 create mode 100644 components/icons/CircleError.vue
 create mode 100644 components/icons/CircleInfo.vue
 create mode 100644 components/icons/CircleSuccess.vue
 create mode 100644 components/icons/CircleWarning.vue
 create mode 100644 components/icons/Spinner.vue
 create mode 100644 components/overlays/Message.vue
 create mode 100644 components/overlays/MessageProvider.vue
 create mode 100644 composables/useMessage.ts
 create mode 100644 types/Message.d.ts

diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue
new file mode 100644
index 0000000..ff04ce0
--- /dev/null
+++ b/.playground/pages/index.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+const message = useMessage();
+
+const count = ref(1)
+
+const info = () => {
+  message.info(`message ${count.value++}`);
+}
+</script>
+
+<template>
+  <div>
+    <button @click="info">info</button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/app.vue b/app.vue
index c5f8626..b735add 100644
--- a/app.vue
+++ b/app.vue
@@ -1,4 +1,10 @@
+<script>
+</script>
+
 <template>
-  <RayButton>test</RayButton>
-  <RayInput/>
+  <div>
+    <RayMessageProvider>
+      <NuxtPage />
+    </RayMessageProvider>
+  </div>
 </template>
diff --git a/components/icons/CircleError.vue b/components/icons/CircleError.vue
new file mode 100644
index 0000000..4d84356
--- /dev/null
+++ b/components/icons/CircleError.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
+      <path d="M0 0h24v24H0z"></path>
+      <path fill="currentColor"
+        d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34zm-6.489 5.8a1 1 0 0 0-1.218 1.567L10.585 12l-1.292 1.293l-.083.094a1 1 0 0 0 1.497 1.32L12 13.415l1.293 1.292l.094.083a1 1 0 0 0 1.32-1.497L13.415 12l1.292-1.293l.083-.094a1 1 0 0 0-1.497-1.32L12 10.585l-1.293-1.292l-.094-.083z">
+      </path>
+    </g>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/CircleInfo.vue b/components/icons/CircleInfo.vue
new file mode 100644
index 0000000..660e8e1
--- /dev/null
+++ b/components/icons/CircleInfo.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path fill="currentColor" fillRule="evenodd"
+      d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10Zm-10 5.75a.75.75 0 0 0 .75-.75v-6a.75.75 0 0 0-1.5 0v6c0 .414.336.75.75.75ZM12 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2Z"
+      clipRule="evenodd"></path>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/CircleSuccess.vue b/components/icons/CircleSuccess.vue
new file mode 100644
index 0000000..8a64ee6
--- /dev/null
+++ b/components/icons/CircleSuccess.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
+      <path d="M0 0h24v24H0z"></path>
+      <path fill="currentColor"
+        d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34zm-1.293 5.953a1 1 0 0 0-1.32-.083l-.094.083L11 12.585l-1.293-1.292l-.094-.083a1 1 0 0 0-1.403 1.403l.083.094l2 2l.094.083a1 1 0 0 0 1.226 0l.094-.083l4-4l.083-.094a1 1 0 0 0-.083-1.32z">
+      </path>
+    </g>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/CircleWarning.vue b/components/icons/CircleWarning.vue
new file mode 100644
index 0000000..5a5aebc
--- /dev/null
+++ b/components/icons/CircleWarning.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
+      <path d="M0 0h24v24H0z"></path>
+      <path fill="currentColor"
+        d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1-19.995.324L2 12l.004-.28C2.152 6.327 6.57 2 12 2zm.01 13l-.127.007a1 1 0 0 0 0 1.986L12 17l.127-.007a1 1 0 0 0 0-1.986L12.01 15zM12 7a1 1 0 0 0-.993.883L11 8v4l.007.117a1 1 0 0 0 1.986 0L13 12V8l-.007-.117A1 1 0 0 0 12 7z">
+      </path>
+    </g>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/Spinner.vue b/components/icons/Spinner.vue
new file mode 100644
index 0000000..cab4a3f
--- /dev/null
+++ b/components/icons/Spinner.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+      opacity=".25"></path>
+    <path fill="currentColor"
+      d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
+      <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
+        values="0 12 12;360 12 12"></animateTransform>
+    </path>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/components/overlays/Message.vue b/components/overlays/Message.vue
new file mode 100644
index 0000000..ccbbd21
--- /dev/null
+++ b/components/overlays/Message.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { MessageProviderApi, Message } from '../../types/Message';
+
+const providerApi = inject<MessageProviderApi>('ray-message-provider')
+
+const props = defineProps({
+  message: {
+    require: true,
+    type: Object,
+  },
+})
+
+const message = ref<Message>(props.message as Message)
+
+onMounted(() => {
+  setTimeout(() => {
+    providerApi?.destroy(message.value.id)
+  }, message.value?.duration || 3000)
+})
+</script>
+
+<template>
+  <div class="message" :class="{
+    '!text-blue-500 !border-blue-400 !bg-blue-50': message.type === 'info',
+    '!text-emerald-500 !border-emerald-400 !bg-emerald-50': message.type === 'success',
+    '!text-orange-500 !border-orange-400 !bg-orange-50': message.type === 'warning',
+    '!text-rose-500 !border-rose-400 !bg-rose-50': message.type === 'error',
+    [message.type]: message.type
+  }">
+    <IconCircleSuccess v-if="message.type === 'success'" class="text-xl" />
+    <IconCircleWarning v-if="message.type === 'warning'" class="text-xl" />
+    <IconCircleError v-if="message.type === 'error'" class="text-xl" />
+    <IconCircleInfo v-if="message.type === 'info'" class="text-xl" />
+    <span>
+      {{ message.content }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.message {
+  min-width: 80px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
+  @apply h-fit px-2 py-1.5 border bg-white border-gray-300 rounded-md text-gray-500 text-xs font-sans flex items-center gap-1.5 first-of-type:mt-2.5 mt-2.5 font-bold pointer-events-auto;
+}
+
+.message.info {
+  box-shadow: 0 4px 12px rgba(59, 130, 246, .2);
+}
+
+.message.success {
+  box-shadow: 0 4px 12px rgba(16, 185, 129, .2);
+}
+
+.message.warning {
+  box-shadow: 0 4px 12px rgba(249, 115, 22, .2);
+}
+
+.message.error {
+  box-shadow: 0 4px 12px rgba(244, 63, 94, .2);
+}
+</style>
diff --git a/components/overlays/MessageProvider.vue b/components/overlays/MessageProvider.vue
new file mode 100644
index 0000000..f4168f9
--- /dev/null
+++ b/components/overlays/MessageProvider.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { Message, MessageType } from '../../types/Message';
+
+const props = defineProps({
+  max: {
+    type: Number,
+    default: 5,
+  },
+})
+
+const nuxtApp = useNuxtApp()
+const messageList = ref<Message[]>([])
+
+const createMessage = (content: string, type: MessageType, duration: number = 3000) => {
+  const { max } = props
+  messageList.value.push({
+    id: (Date.now() + Math.random() * 100).toString(32).toUpperCase(),
+    content,
+    type,
+    duration,
+  })
+  if (messageList.value.length > max) {
+    messageList.value.shift()
+  }
+}
+
+const providerApi = {
+  destroy: (id: string) => {
+    if (!messageList.value.find(message => message.id === id)) return
+    messageList.value.splice(messageList.value.findIndex(message => message.id === id), 1)
+  },
+}
+
+const api = {
+  info: (content: string, duration: number = 3000) => {
+    createMessage(content, 'info', duration)
+  },
+  success: (content: string, duration: number = 3000) => {
+    createMessage(content, 'success', duration)
+  },
+  warning: (content: string, duration: number = 3000) => {
+    createMessage(content, 'warning', duration)
+  },
+  error: (content: string, duration: number = 3000) => {
+    createMessage(content, 'error', duration)
+  },
+}
+
+nuxtApp.vueApp.provide('ray-message-provider', providerApi)
+nuxtApp.vueApp.provide('ray-message', api)
+</script>
+
+<template>
+  <slot></slot>
+  <teleport to="body">
+    <div id="message-provider">
+      <div class="message-wrapper">
+        <TransitionGroup name="message">
+          <RayMessage v-for="(message, k) in messageList" :key="message.id" :message="message" />
+        </TransitionGroup>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<style scoped>
+#message-provider .message-wrapper {
+  @apply z-[50000] fixed inset-0 flex flex-col items-center pointer-events-none;
+}
+
+.message-move,
+.message-leave-active {
+  transition: all .8s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.message-enter-active {
+  transition: all .8s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.message-enter-from {
+  filter: blur(2px);
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+.message-leave-to {
+  filter: blur(6px);
+  opacity: 0;
+  transform: translateY(-20%);
+}
+
+.message-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/composables/useMessage.ts b/composables/useMessage.ts
new file mode 100644
index 0000000..a11ef93
--- /dev/null
+++ b/composables/useMessage.ts
@@ -0,0 +1,9 @@
+import type { MessageApi } from "../types/Message";
+
+export const useMessage = () => {
+  const message = inject<MessageApi>("ray-message");
+  if (!message) {
+    throw new Error("No outer message-provider found!");
+  }
+  return message;
+};
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 82f5ee6..d322d64 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  compatibilityDate: "2024-11-15",
   modules: ["@nuxtjs/tailwindcss"],
   components: [
     {
@@ -8,5 +9,10 @@ export default defineNuxtConfig({
       prefix: "Ray",
       pathPrefix: false,
     },
+    {
+      path: "./components/icons",
+      prefix: "Icon",
+      pathPrefix: false,
+    },
   ],
 });
diff --git a/types/Message.d.ts b/types/Message.d.ts
new file mode 100644
index 0000000..1b0e13f
--- /dev/null
+++ b/types/Message.d.ts
@@ -0,0 +1,20 @@
+export type MessageType = "success" | "warning" | "error" | "info";
+
+export interface Message {
+  id: string;
+  content: string;
+  type: MessageType;
+  duration?: number;
+}
+
+export interface MessageApi {
+  info: (content: string, duration?: number) => void;
+  success: (content: string, duration?: number) => void;
+  warning: (content: string, duration?: number) => void;
+  error: (content: string, duration?: number) => void;
+  destroyAll: () => void;
+}
+
+export interface MessageProviderApi {
+  destroy: (id: string) => void;
+}