@saasmakers/ui 2.0.28 → 2.0.30

package/app/components/bases/BaseEmoji.vue

@@ -6,6 +6,7 @@ const props = withDefaults(defineProps<BaseEmoji>(), {
   clickable: true,
   emoji: undefined,
   hasBox: false,
+  legend: undefined,
   size: 'base',
 })
 
@@ -13,10 +14,6 @@ const emit = defineEmits<{
   click: [event: MouseEvent, emoji?: string]
 }>()
 
-defineSlots<{
-  default?: () => VNode[]
-}>()
-
 const { urls } = useAppConfig()
 
 function onClick(event: MouseEvent) {
@@ -34,6 +31,7 @@ function onKeyDown(event: KeyboardEvent) {
   <span
     class="flex items-center justify-center transition"
     :class="{
+      'relative': legend,
       'border base-border': hasBox,
       'bg-gray-100 dark:bg-gray-900 shadow-inner': hasBox && background === 'gray',
       'bg-white dark:bg-gray-900 shadow-sm': hasBox && background === 'white',
@@ -79,6 +77,11 @@ function onKeyDown(event: KeyboardEvent) {
       :src="`${urls.storage}/images/emojis/${emoji}.svg`"
     >
 
-    <slot />
+    <BaseText
+      v-if="legend"
+      class="absolute bottom-0 left-0 right-0 select-none rounded-b bg-gray-200 text-center text-gray-900 leading-[0.75rem] opacity-90 -mx-px -mb-px dark:bg-gray-800 dark:text-gray-100"
+      size="3xs"
+      :text="legend"
+    />
   </span>
 </template>

package/app/components/bases/BaseHeading.vue

@@ -21,12 +21,11 @@ defineSlots<{
       'justify-start': alignment === 'left',
       'justify-center text-center': alignment === 'center',
       'justify-end': alignment === 'right',
-      'font-bold': ['xs', 'sm'].includes(size),
-      'font-extrabold': ['base', 'lg', 'xl'].includes(size),
-      'text-lg sm:text-xl': size === 'xs',
-      'text-xl sm:text-2xl': size === 'sm',
-      'text-2xl sm:text-3xl': size === 'base',
-      'text-2xl sm:text-4xl': size === 'lg',
+      'font-bold': size === 'sm',
+      'font-extrabold': ['base', 'lg'].includes(size),
+      'text-lg': size === 'sm',
+      'text-xl': size === 'base',
+      'text-2xl': size === 'lg',
     }"
   >
     <template v-if="text && typeof text === 'string'">

package/app/components/bases/BaseMessage.vue

@@ -30,7 +30,7 @@ defineSlots<{
       <BaseHeading
         v-if="title"
         alignment="center"
-        size="xs"
+        size="sm"
         tag="h1"
         :text="title"
       />
@@ -45,7 +45,7 @@ defineSlots<{
 
       <div
         v-if="$slots.default"
-        class="mt-6 flex flex-col items-center justify-center sm:flex-row"
+        class="mt-5 flex flex-col items-center justify-center gap-2 sm:flex-row sm:gap-3"
       >
         <slot />
       </div>

package/app/components/bases/BaseParagraph.vue

@@ -19,9 +19,9 @@ defineSlots<{
       'text-center': alignment === 'center',
       'text-left': alignment === 'left',
       'text-right': alignment === 'right',
-      'text-sm sm:text-base': size === 'sm',
-      'text-base sm:text-lg': size === 'base',
-      'text-lg sm:text-xl': size === 'lg',
+      'text-sm': size === 'sm',
+      'text-base': size === 'base',
+      'text-lg': size === 'lg',
     }"
   >
     <template v-if="text && typeof text === 'string'">

package/app/composables/useToasts.ts

@@ -47,7 +47,7 @@ export default function useToast() {
     const toast: BaseToast = {
       action: params.action,
       id: crypto.randomUUID(),
-      status: params.status,
+      status: params.status ?? 'success',
       text,
     }
 

package/app/types/bases.d.ts

@@ -169,6 +169,7 @@ export interface BaseEmoji {
   clickable?: boolean
   emoji?: string
   hasBox?: boolean
+  legend?: string
   size?: BaseSize
 }
 
@@ -179,12 +180,7 @@ export interface BaseHeading {
   text?: BaseTextText
 }
 
-export type BaseHeadingSize
-  = | 'base'
-    | 'lg'
-    | 'sm'
-    | 'xl'
-    | 'xs'
+export type BaseHeadingSize = 'base' | 'lg' | 'sm'
 
 export type BaseHeadingTag
   = | 'h1'

package/package.json

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