@saasmakers/ui 1.5.8 → 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/BaseDivider.vue

@@ -29,10 +29,12 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
 
 <template>
   <div
-    class="my-6"
     :class="{
       'mx-auto': size === 'sm' && !pill,
       'mx-auto w-full': pill,
+      'my-10': marginY === 10,
+      'my-12': marginY === 12,
+      'my-6': marginY === 6,
     }"
   >
     <div

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',
@@ -82,26 +82,3 @@ function onKeyDown(event: KeyboardEvent) {
     />
   </div>
 </template>
-
-  <style>
-  .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);
-    }
-  }
-  </style>

package/app/types/bases.d.ts

@@ -135,6 +135,7 @@ export interface BaseDivider {
   hideNext?: boolean
   hidePrevious?: boolean
   loading?: boolean
+  marginY?: BaseDividerMarginY
   navigable?: boolean
   pill?: boolean
   size?: BaseDividerSize
@@ -143,6 +144,8 @@ export interface BaseDivider {
 
 export type BaseDividerBorderStyle = 'dashed' | 'dotted' | 'solid'
 
+export type BaseDividerMarginY = 6 | 10 | 12
+
 export type BaseDividerNavigateDirection = 'next' | 'previous'
 
 export type BaseDividerSize = 'base' | 'sm'

package/app/types/global.d.ts

@@ -23,6 +23,7 @@ declare global {
   type BaseColor = import('./bases').BaseColor
   type BaseDivider = import('./bases').BaseDivider
   type BaseDividerBorderStyle = import('./bases').BaseDividerBorderStyle
+  type BaseDividerMarginY = import('./bases').BaseDividerMarginY
   type BaseDividerNavigateDirection = import('./bases').BaseDividerNavigateDirection
   type BaseDividerSize = import('./bases').BaseDividerSize
   type BaseEmoji = import('./bases').BaseEmoji

package/nuxt.config.ts

@@ -44,6 +44,7 @@ export default defineNuxtConfig({
 
   css: [
     '@unocss/reset/tailwind.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.8",
+  "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,