@saasmakers/ui 1.5.9 → 1.5.10

package/app/assets/styles/base.css

@@ -0,0 +1,12 @@
+html,
+body {
+  touch-action: manipulation;
+}
+
+html.light body {
+  background-color: var(--gray-100);
+}
+
+html.dark body {
+  background-color: var(--gray-900);
+}

package/app/components/bases/BaseSpinner.vue

@@ -58,9 +58,9 @@ function onKeyDown(event: KeyboardEvent) {
       <div
         v-for="wave in 2"
         :key="wave"
-        class="base-spinner__wave absolute left-0 top-0 h-full w-full rounded-full opacity-75"
+        class="absolute left-0 top-0 h-full w-full animate-scale-pulse rounded-full opacity-75"
         :class="{
-          'base-spinner__wave--delayed': wave === 2,
+          'animate-delay-[-1s]': wave === 2,
           'bg-gray-900 dark:bg-gray-100': color === 'black' || !color,
           'bg-gray-700 dark:bg-gray-300': color === 'gray',
           'bg-green-700 dark:bg-green-300': color === 'green',

package/nuxt.config.ts

@@ -44,7 +44,7 @@ export default defineNuxtConfig({
 
   css: [
     '@unocss/reset/tailwind.css',
-    path.join(currentDir, './app/assets/styles/animations.css'),
+    path.join(currentDir, './app/assets/styles/base.css'),
     path.join(currentDir, './app/assets/styles/chartist.css'),
     path.join(currentDir, './app/assets/styles/colors.css'),
     path.join(currentDir, './app/assets/styles/scrollbar.css'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.5.9",
+  "version": "1.5.10",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",

package/uno.config.ts

@@ -30,6 +30,28 @@ export const shortcuts: Record<string, string> = {
 }
 
 export const theme = {
+  animation: {
+    keyframes: {
+      'fade-pulse': '{0%,100%{opacity:0.25}50%{opacity:1}}',
+      'scale-pulse': '{0%,100%{transform:scale(0)}50%{transform:scale(1)}}',
+    },
+
+    durations: {
+      'fade-pulse': '1s',
+      'scale-pulse': '2s',
+    },
+
+    timingFns: {
+      'fade-pulse': 'ease-in-out',
+      'scale-pulse': 'linear',
+    },
+
+    counts: {
+      'fade-pulse': 'infinite',
+      'scale-pulse': 'infinite',
+    },
+  },
+
   container: {
     center: true,
 

package/app/assets/styles/animations.css

@@ -1,20 +0,0 @@
-.base-spinner__wave {
-  animation: bounce 2s infinite linear;
-}
-
-.base-spinner__wave--delayed {
-  animation-delay: -1s;
-}
-
-@keyframes bounce {
-  0%,
-  100% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  }
-
-  50% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}