HoshinoSuzumi/rayine-ui
1
0
Fork 0
mirror of https://github.com/HoshinoSuzumi/rayine-ui.git synced 2025-04-13 17:58:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Feat(message): new component

Browse Source
This commit is contained in:
Timothy Yin 2024-11-15 19:45:10 +08:00
parent dbbd73d9d1
commit 384faeadf4
12 changed files with 267 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.playground/pages/index.vue Normal file
View File

@ -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>

10
app.vue
View File

@ -1,4 +1,10 @@
<script>
</script>
<template>
<RayButton>test</RayButton>
<RayInput/>
<div>
<RayMessageProvider>
<NuxtPage />
</RayMessageProvider>
</div>
</template>

10
components/icons/CircleError.vue Normal file
View File

@ -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>

7
components/icons/CircleInfo.vue Normal file
View File

@ -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>

10
components/icons/CircleSuccess.vue Normal file
View File

@ -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>

10
components/icons/CircleWarning.vue Normal file
View File

@ -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>

11
components/icons/Spinner.vue Normal file
View File

@ -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>

62
components/overlays/Message.vue Normal file
View File

@ -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>

95
components/overlays/MessageProvider.vue Normal file
View File

@ -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>

9
composables/useMessage.ts Normal file
View File

@ -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;
};

6
nuxt.config.ts
View File

@ -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,
},
],
});

20
types/Message.d.ts vendored Normal file
View File

@ -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;
}