Merge pull request #140 from selemondev/fix-notification-transition

fix: notification transition

packages/nuxt-ui-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-vue",
-  "version": "1.0.1-beta.1",
+  "version": "1.0.1-beta.2",
   "private": false,
   "exports": {
     ".": {

packages/nuxt-ui-vue/src/App.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
+import { injectToast } from './composables/useToast'
+import Hello from './components/Hello.vue'
+
+injectToast()
 </script>
 
 <template>
-  <div />
+  <div class="grid place-items-center w-full min-h-screen">
+    <Hello />
+    <UNotifications />
+  </div>
 </template>

packages/nuxt-ui-vue/src/components/Hello.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useToast } from '@/composables/useToast'
+
+const toast = useToast()
+</script>
+
+<template>
+  <UButton
+    label="Show toast" @click="toast.add({
+      title: 'Update downloaded.',
+    })"
+  />
+</template>

packages/nuxt-ui-vue/src/components/overlays/Notification/UNotification.vue

@@ -159,12 +159,12 @@ onUnmounted(() => {
 const attrsOmitted = omit(attrs, ['class'])
 
 const notificationTransitions = {
-  enter: variant.value.transitionEnterActiveClass,
-  enterFrom: variant.value.transitionEnterFromClass,
-  enterTo: variant.value.transitionEnterToClass,
-  leave: variant.value.transitionLeaveActiveClass,
-  leaveFrom: variant.value.transitionLeaveFromClass,
-  leaveTo: variant.value.transitionLeaveToClass,
+  enterActiveClass: variant.value.transitionEnterActiveClass,
+  enterFromClass: variant.value.transitionEnterFromClass,
+  enterToClass: variant.value.transitionEnterToClass,
+  leaveActiveClass: variant.value.transitionLeaveActiveClass,
+  leaveFromClass: variant.value.transitionLeaveFromClass,
+  leaveToClass: variant.value.transitionLeaveToClass,
 }
 </script>
 
@@ -176,6 +176,7 @@ export default defineComponent({
 </script>
 
 <template>
+  <!-- @vue-ignore -->
   <Transition appear v-bind="notificationTransitions">
     <div :class="wrapperClass" v-bind="attrsOmitted" @mouseover="onMouseover" @mouseleave="onMouseleave">
       <div :class="[variant.container, variant.rounded, variant.ring]">

packages/nuxt-ui-vue/tailwind.config.js

@@ -1,9 +1,42 @@
+/* eslint-disable no-unused-expressions */
+import tailwindColors from './node_modules/tailwindcss/colors'
+
+const colorSafeList = []
+
+const deprecated = ['lightBlue', 'warmGray', 'trueGray', 'coolGray', 'blueGray']
+
+for (const colorName in tailwindColors) {
+  if (deprecated.includes(colorName))
+    continue
+
+  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+
+  const pallette = tailwindColors[colorName]
+
+  if (typeof pallette === 'object') {
+    shades.forEach((shade) => {
+      if (shade in pallette) {
+        colorSafeList.push(`text-${colorName}-${shade}`),
+        colorSafeList.push(`accent-${colorName}-${shade}`),
+        colorSafeList.push(`bg-${colorName}-${shade}`),
+        colorSafeList.push(`hover:enabled:bg-${colorName}-${shade}`),
+        colorSafeList.push(`focus:bg-${colorName}-${shade}`),
+        colorSafeList.push(`ring-${colorName}-${shade}`),
+        colorSafeList.push(`focus:ring-${colorName}-${shade}`),
+        colorSafeList.push(`border-${colorName}-${shade}`)
+      }
+    })
+  }
+}
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   darkMode: 'class',
+  safelist: colorSafeList,
   theme: {
     extend: {
+      colors: tailwindColors,
       backgroundColor: ['disabled'],
       textColor: ['disabled'],
       fontFamily: {