@saasmakers/ui 2.0.48 → 2.0.50

package/app/components/bases/BaseCard.vue

@@ -3,22 +3,17 @@ import { NuxtLinkLocale } from '#components'
 import type { BaseCard } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseCard>(), {
-  avatar: '',
   clickable: true,
   color: 'gray',
   description: '',
   disabled: false,
   emoji: undefined,
-  hasBackground: true,
   hasChevron: false,
-  icon: undefined,
   id: undefined,
   image: '',
   isSelected: false,
   orientation: 'horizontal',
-  size: 'base',
   title: undefined,
-  titleIcon: undefined,
   to: undefined,
 })
 
@@ -28,44 +23,16 @@ const emit = defineEmits<{
 
 defineSlots<{
   default?: () => VNode[]
-  innerBoxLeft?: () => VNode[]
-  innerBoxRight?: () => VNode[]
-  outerBoxLeft?: () => VNode[]
-  outerBoxRight?: () => VNode[]
-  right?: () => VNode[]
 }>()
 
-const hasAvatarBox = computed<boolean>(() => {
-  return !!(props.avatar || props.emoji || props.icon || props.image)
-})
-
 const hasMediaBox = computed<boolean>(() => {
-  return !!(props.avatar || props.icon || props.image)
+  return !!(props.image || (props.emoji && props.orientation !== 'horizontal'))
 })
 
-const isHorizontal = computed(() => props.orientation === 'horizontal')
-
 const isClickable = computed(() => {
   return props.to || props.clickable
 })
 
-const titleColorClass = computed(() => {
-  if (!isHorizontal.value || props.color === 'gray') {
-    return 'text-gray-900 dark:text-gray-100'
-  }
-
-  const colorClasses: Partial<Record<BaseColor, string>> = {
-    black: 'text-gray-900 dark:text-gray-100',
-    green: 'text-green-600 dark:text-green-400',
-    indigo: 'text-indigo-600 dark:text-indigo-400',
-    orange: 'text-orange-600 dark:text-orange-400',
-    red: 'text-red-600 dark:text-red-400',
-    white: 'text-gray-900 dark:text-gray-100',
-  }
-
-  return colorClasses[props.color] ?? 'text-gray-900 dark:text-gray-100'
-})
-
 function onClick(event: MouseEvent) {
   emit('click', event, props.id)
 }
@@ -79,15 +46,12 @@ function onClick(event: MouseEvent) {
       'cursor-default': !isClickable,
       'cursor-pointer': isClickable,
       'opacity-50': disabled,
-      'base-surface h-12 overflow-hidden pl-2 pr-2.5': hasBackground && size === 'base' && isHorizontal,
-      'base-surface h-14 overflow-hidden pl-3 pr-3': hasBackground && size === 'lg' && isHorizontal,
-      'base-surface p-3': hasBackground && size === 'base' && !isHorizontal,
-      'base-surface p-4': hasBackground && size === 'lg' && !isHorizontal,
-      'w-fit': !hasBackground && isHorizontal,
-      'base-border-hover': hasBackground && isClickable,
-      'rounded-lg': hasBackground && isHorizontal,
-      'rounded-xl': hasBackground && !isHorizontal,
-      'relative': !isHorizontal,
+      'base-surface h-12 overflow-hidden pl-2 pr-2.5': orientation === 'horizontal',
+      'base-surface p-3': orientation !== 'horizontal',
+      'base-border-hover': isClickable,
+      'rounded-lg': orientation === 'horizontal',
+      'rounded-xl': orientation !== 'horizontal',
+      'relative': orientation !== 'horizontal',
     }"
     :to="disabled ? undefined : to"
     @click="onClick"
@@ -95,23 +59,19 @@ function onClick(event: MouseEvent) {
     <div
       class="flex overflow-hidden"
       :class="{
-        'h-12 w-full flex-row items-center text-left': isHorizontal && size === 'base' && hasBackground,
-        'h-14 w-full flex-row items-center text-left': isHorizontal && size === 'lg' && hasBackground,
-        'flex-row items-center text-left': isHorizontal && !hasBackground,
-        'flex-col items-center text-center': !isHorizontal,
+        'h-12 w-full flex-row items-center text-left': orientation === 'horizontal',
+        'flex-col items-center text-center': orientation !== 'horizontal',
       }"
     >
       <span
         class="flex items-center"
         :class="{
-          'shrink-0 justify-center': isHorizontal,
-          'justify-center': !isHorizontal,
+          'shrink-0 justify-center': orientation === 'horizontal',
+          'justify-center': orientation !== 'horizontal',
         }"
       >
-        <slot name="outerBoxLeft" />
-
         <BaseEmoji
-          v-if="emoji && isHorizontal"
+          v-if="emoji && orientation === 'horizontal'"
           class="mr-2 shrink-0 bg-gray-100 flex-initial dark:bg-gray-900"
           :clickable="false"
           :emoji="emoji"
@@ -119,115 +79,79 @@ function onClick(event: MouseEvent) {
         />
 
         <span
-          v-if="hasMediaBox || (emoji && !isHorizontal)"
+          v-if="hasMediaBox"
           class="relative z-10 flex items-center justify-center flex-initial"
           :class="{
-            'border shadow-inner': !avatar && !image && (!emoji || !isHorizontal),
-            'rounded-lg': !avatar && !image && (!emoji || !isHorizontal),
-            'base-border bg-gray-100 dark:bg-gray-900': !avatar && !image && (!emoji || !isHorizontal),
-            'mr-2': isHorizontal && size === 'base',
-            'mr-3': isHorizontal && size === 'lg',
-            'mb-2': !isHorizontal && size === 'base',
-            'mb-3': !isHorizontal && size === 'lg',
-            'h-9 w-9': size === 'base' && isHorizontal,
-            'h-11 w-11': size === 'lg' && isHorizontal,
-            'h-20 w-20': size === 'base' && !isHorizontal,
-            'h-24 w-24': size === 'lg' && !isHorizontal,
+            'border shadow-inner rounded-lg base-border bg-gray-100 dark:bg-gray-900': !image && (!emoji || orientation !== 'horizontal'),
+            'mr-2': orientation === 'horizontal',
+            'mb-2': orientation !== 'horizontal',
+            'h-9 w-9': orientation === 'horizontal',
+            'h-20 w-20': orientation !== 'horizontal',
           }"
         >
-          <slot name="innerBoxLeft" />
-
-          <BaseAvatar
-            v-if="avatar"
-            class="rounded-lg flex-initial"
-            :class="{
-              'h-10 w-10': size === 'base' && isHorizontal,
-              'h-12 w-12': size === 'lg' && isHorizontal,
-              'h-20 w-20': size === 'base' && !isHorizontal,
-              'h-24 w-24': size === 'lg' && !isHorizontal,
-            }"
-            :src="avatar"
-          />
-
           <BaseEmoji
-            v-else-if="emoji"
+            v-if="emoji && orientation !== 'horizontal'"
             class="m-0.5"
             :emoji="emoji"
             :has-box="false"
-            :size="size === 'lg' ? 'lg' : 'base'"
-          />
-
-          <BaseIcon
-            v-else-if="icon"
-            :color="color"
-            :icon="icon"
-            :size="size === 'lg' ? '2xl' : 'lg'"
           />
 
           <img
             v-else-if="image"
             class="select-none rounded-lg object-cover shadow-sm transition-[filter] duration-300 drag-none flex-initial"
             :class="{
-              'h-9 w-9': size === 'base' && isHorizontal,
-              'h-11 w-11': size === 'lg' && isHorizontal,
-              'h-20 w-20': size === 'base' && !isHorizontal,
-              'h-24 w-24': size === 'lg' && !isHorizontal,
+              'h-9 w-9': orientation === 'horizontal',
+              'h-20 w-20': orientation !== 'horizontal',
               'grayscale': disabled,
             }"
             :alt="title"
             loading="lazy"
             :src="image"
           >
-
-          <slot name="innerBoxRight" />
         </span>
-
-        <slot name="outerBoxRight" />
       </span>
 
       <div
         class="min-w-0 flex flex-col justify-center leading-snug"
         :class="{
-          'flex-1': isHorizontal && hasBackground,
-          'w-full': !isHorizontal,
-          'mr-4': isHorizontal && size === 'base' && (to || hasChevron),
-          'mr-5': isHorizontal && size === 'lg' && (to || hasChevron),
-          'items-center': !isHorizontal,
+          'flex-1': orientation === 'horizontal',
+          'w-full': orientation !== 'horizontal',
+          'items-center': orientation !== 'horizontal',
         }"
       >
         <div
           class="w-full flex flex-col"
           :class="{
-            'gap-0': size === 'base',
-            'gap-0.5': size === 'lg',
-            'gap-1': !isHorizontal && size === 'base',
-            'gap-1.5': !isHorizontal && size === 'lg',
+            'gap-0': orientation === 'horizontal',
+            'gap-1': orientation !== 'horizontal',
           }"
         >
           <p
-            v-if="title && isHorizontal && !titleIcon && hasBackground"
+            v-if="title && orientation === 'horizontal'"
             class="line-clamp-1 min-w-0 break-words text-xs font-medium tracking-tight uppercase"
-            :class="titleColorClass"
+            :class="{
+              'text-gray-900 dark:text-gray-100': color === 'gray' || color === 'black' || color === 'white',
+              'text-green-600 dark:text-green-400': color === 'green',
+              'text-indigo-600 dark:text-indigo-400': color === 'indigo',
+              'text-orange-600 dark:text-orange-400': color === 'orange',
+              'text-red-600 dark:text-red-400': color === 'red',
+            }"
           >
             {{ title }}
           </p>
 
           <BaseIcon
             v-else-if="title"
-            class="w-full"
-            :class="{ 'self-center': !hasAvatarBox }"
-            :color="isHorizontal ? color : undefined"
-            :icon="titleIcon"
-            :size="size === 'lg' ? 'base' : 'sm'"
+            class="w-full self-center"
+            size="sm"
             :text="title"
-            :truncate="isHorizontal"
           />
 
           <BaseText
-            v-if="description && !isHorizontal"
+            v-if="description && orientation !== 'horizontal'"
             block
             class="text-gray-600 dark:text-gray-400"
-            :size="size === 'lg' ? 'xs' : '2xs'"
+            size="2xs"
             :text="description"
           />
         </div>
@@ -237,23 +161,20 @@ function onClick(event: MouseEvent) {
         v-if="isSelected"
         class="flex-initial"
         :class="{
-          'mr-1.5 self-center': isHorizontal,
-          'absolute right-2 top-2': !isHorizontal && size === 'base',
-          'absolute right-2.5 top-2.5': !isHorizontal && size === 'lg',
+          'mr-1.5 self-center': orientation === 'horizontal',
+          'absolute right-2 top-2': orientation !== 'horizontal',
         }"
         color="green"
         :icon="getLayerIcon('checkCircle')"
-        :size="size === 'lg' ? '2xl' : 'xl'"
+        size="xl"
       />
 
       <BaseIcon
-        v-else-if="isHorizontal && (to || hasChevron)"
+        v-else-if="orientation === 'horizontal' && (to || hasChevron)"
         class="self-center text-gray-500 flex-initial dark:text-gray-500 group-hover:text-gray-900 dark:group-hover:text-gray-100"
         :icon="getLayerIcon('chevronRight')"
-        :size="size === 'lg' ? '2xl' : 'xl'"
+        size="xl"
       />
-
-      <slot name="right" />
     </div>
 
     <slot />

package/app/components/bases/BaseIcon.vue

@@ -100,15 +100,29 @@ function onClick(event: MouseEvent) {
   emit('click', event)
 }
 
+function onEnterKeyDown(event: KeyboardEvent) {
+  if (!props.to) {
+    onKeyDown(event)
+  }
+}
+
 function onKeyDown(event: KeyboardEvent) {
   if (isClickable.value) {
     (event.currentTarget as HTMLElement).click()
   }
 }
+
+function onSpaceKeyDown(event: KeyboardEvent) {
+  if (!props.to) {
+    event.preventDefault()
+    onKeyDown(event)
+  }
+}
 </script>
 
 <template>
-  <div
+  <component
+    :is="to ? NuxtLinkLocale : 'div'"
     class="flex items-center"
     :class="{
       'group cursor-pointer hover:underline hover:text-black dark:hover:text-white': isClickable && text,
@@ -116,14 +130,14 @@ function onKeyDown(event: KeyboardEvent) {
       'flex-row': !reverse,
       'flex-row-reverse': reverse,
     }"
-    :role="isClickable ? 'button' : undefined"
-    :tabindex="isClickable ? 0 : undefined"
+    :role="isClickable && !to ? 'button' : undefined"
+    :tabindex="isClickable && !to ? 0 : undefined"
+    :to="to"
     @click="onClick"
-    @keydown.enter="onKeyDown"
-    @keydown.space.prevent="onKeyDown"
+    @keydown.enter="onEnterKeyDown"
+    @keydown.space="onSpaceKeyDown"
   >
-    <component
-      :is="to ? NuxtLinkLocale : 'span'"
+    <span
       v-if="finalIcon && !loading"
       class="flex items-center justify-center"
       :class="{
@@ -153,10 +167,9 @@ function onKeyDown(event: KeyboardEvent) {
         'group-hover:text-orange-700 dark:group-hover:text-orange-300': isClickable && finalColor === 'orange',
         'group-hover:text-red-700 dark:group-hover:text-red-300': isClickable && finalColor === 'red',
       }"
-      :to="to"
     >
       <Icon :name="finalIcon" />
-    </component>
+    </span>
 
     <BaseSpinner
       v-else-if="loading"
@@ -176,7 +189,7 @@ function onKeyDown(event: KeyboardEvent) {
       :truncate="truncate"
       :underline="underline"
     />
-  </div>
+  </component>
 </template>
 
 <i18n lang="json">

package/app/types/bases.d.ts

@@ -81,29 +81,22 @@ export type BaseButtonSize
 export type BaseButtonType = 'button' | 'reset' | 'submit'
 
 export interface BaseCard {
-  avatar?: string
   clickable?: boolean
   color?: BaseColor
   description?: string
   disabled?: boolean
   emoji?: string
-  hasBackground?: boolean
   hasChevron?: boolean
-  icon?: string
   id?: number | string
   image?: string
   isSelected?: boolean
   orientation?: BaseCardOrientation
-  size?: BaseCardSize
   title?: string
-  titleIcon?: string
   to?: RouteLocationNamedI18n
 }
 
 export type BaseCardOrientation = 'horizontal' | 'vertical'
 
-export type BaseCardSize = 'base' | 'lg'
-
 export interface BaseCharacter {
   character?: BaseCharacterCharacter
   size?: BaseCharacterSize

package/app/types/global.d.ts

@@ -30,7 +30,6 @@ declare global {
   type BaseButtonType = import('./bases').BaseButtonType
   type BaseCard = import('./bases').BaseCard
   type BaseCardOrientation = import('./bases').BaseCardOrientation
-  type BaseCardSize = import('./bases').BaseCardSize
   type BaseCharacter = import('./bases').BaseCharacter
   type BaseCharacterCharacter = import('./bases').BaseCharacterCharacter
   type BaseCharacterSize = import('./bases').BaseCharacterSize

package/package.json

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