fix(Notification): improve config options

nuxt · Nov 14, 2023 · 7cb987d · 7cb987d
1 parent 91511b9
commit 7cb987d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 27 deletions.
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
@@ -8,34 +8,32 @@
       @mouseleave="onMouseleave"
     >
       <div :class="[ui.container, ui.rounded, ui.ring]">
-        <div :class="ui.padding">
-          <div class="flex gap-3" :class="{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }">
-            <UIcon v-if="icon" :name="icon" :class="iconClass" />
-            <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
-
-            <div class="w-0 flex-1">
-              <p :class="ui.title">
-                <slot name="title" :title="title">
-                  {{ title }}
-                </slot>
-              </p>
-              <p v-if="(description || $slots.description)" :class="ui.description">
-                <slot name="description" :description="description">
-                  {{ description }}
-                </slot>
-              </p>
-
-              <div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
-                <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
-              </div>
+        <div class="flex" :class="[ui.padding, ui.gap, { 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }]">
+          <UIcon v-if="icon" :name="icon" :class="iconClass" />
+          <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+
+          <div class="w-0 flex-1">
+            <p :class="ui.title">
+              <slot name="title" :title="title">
+                {{ title }}
+              </slot>
+            </p>
+            <p v-if="(description || $slots.description)" :class="ui.description">
+              <slot name="description" :description="description">
+                {{ description }}
+              </slot>
+            </p>
+
+            <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
+              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
             </div>
-            <div v-if="closeButton || (!description && !$slots.description && actions.length)" class="flex-shrink-0 flex items-center gap-3">
-              <div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2">
-                <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
-              </div>
+          </div>
+          <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
+            <template v-if="!description && !$slots.description && actions.length">
+              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
+            </template>
 
-              <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
-            </div>
+            <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
           </div>
         </div>
         <div v-if="timeout" :class="progressClass" :style="progressStyle" />
@@ -224,7 +222,8 @@ export default defineComponent({
       onMouseover,
       onMouseleave,
       onClose,
-      onAction
+      onAction,
+      twMerge
     }
   }
 })

diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
@@ -1311,10 +1311,12 @@ export const notification = {
   container: 'relative overflow-hidden',
   title: 'text-sm font-medium text-gray-900 dark:text-white',
   description: 'mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400',
+  actions: 'flex items-center gap-2 mt-3 flex-shrink-0',
   background: 'bg-white dark:bg-gray-900',
   shadow: 'shadow-lg',
   rounded: 'rounded-lg',
   padding: 'p-4',
+  gap: 'gap-3',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
   icon: {
     base: 'flex-shrink-0 w-5 h-5',