mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-05-06 20:42:57 +08:00
✨ Feature(custom): optimize message toast
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
v-if="text"
|
||||
:class="textClassVar"
|
||||
:data-active="active"
|
||||
class="[.primary] text-sm leading-[1.4] font-semibold text-secondary"
|
||||
class="text-sm leading-[1.4] font-semibold text-secondary"
|
||||
>{{ text }}</span
|
||||
>
|
||||
</slot>
|
||||
|
||||
@@ -12,11 +12,11 @@
|
||||
<div
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
class="flex-start group pointer-events-auto mb-2 flex max-w-96 min-w-80 gap-3 rounded-sm border border-gray-300 bg-white px-4 py-3 wrap-break-word shadow-sm [.message-error]:border-l-4 [.message-error]:border-l-danger [.message-info]:border-l-4 [.message-info]:border-l-accent [.message-success]:border-l-4 [.message-success]:border-l-success [.message-warning]:border-l-4 [.message-warning]:border-l-warning"
|
||||
class="flex-start group pointer-events-auto mb-2 flex max-w-96 min-w-80 items-center gap-3 rounded-sm border border-gray-300 bg-white px-4 py-3 wrap-break-word shadow-sm [.message-error]:border-l-4 [.message-error]:border-l-danger [.message-info]:border-l-4 [.message-info]:border-l-accent [.message-success]:border-l-4 [.message-success]:border-l-success [.message-warning]:border-l-4 [.message-warning]:border-l-warning"
|
||||
:class="getMessageClass(message.type)"
|
||||
>
|
||||
<div
|
||||
class="mt-0.5 shrink-0 group-[.message-error]:text-danger group-[.message-info]:text-accent group-[.message-success]:text-success group-[.message-warning]:text-warning"
|
||||
class="shrink-0 group-[.message-error]:text-danger group-[.message-info]:text-accent group-[.message-success]:text-success group-[.message-warning]:text-warning"
|
||||
>
|
||||
<component :is="getIconComponent(message.type)" :size="16" />
|
||||
</div>
|
||||
@@ -25,7 +25,7 @@
|
||||
</div>
|
||||
<button
|
||||
v-if="message.showClose"
|
||||
class="mt-0.5 flex shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-none p-1 text-secondary hover:bg-danger/10"
|
||||
class="flex shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-none p-1 text-secondary hover:bg-danger/10"
|
||||
@click="removeMessage(message.id)"
|
||||
>
|
||||
<X :size="16" />
|
||||
|
||||
Reference in New Issue
Block a user