@saasmakers/ui 2.0.48 → 2.0.49

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,18 @@ 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 isHorizontal = computed(() => props.orientation === 'horizontal')
 
 const hasMediaBox = computed<boolean>(() => {
-  return !!(props.avatar || props.icon || props.image)
+  return !!(props.image || (props.emoji && !isHorizontal.value))
 })
 
-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,14 +48,11 @@ 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,
+      'base-surface h-12 overflow-hidden pl-2 pr-2.5': isHorizontal,
+      'base-surface p-3': !isHorizontal,
+      'base-border-hover': isClickable,
+      'rounded-lg': isHorizontal,
+      'rounded-xl': !isHorizontal,
       'relative': !isHorizontal,
     }"
     :to="disabled ? undefined : to"
@@ -95,9 +61,7 @@ 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,
+        'h-12 w-full flex-row items-center text-left': isHorizontal,
         'flex-col items-center text-center': !isHorizontal,
       }"
     >
@@ -108,8 +72,6 @@ function onClick(event: MouseEvent) {
           'justify-center': !isHorizontal,
         }"
       >
-        <slot name="outerBoxLeft" />
-
         <BaseEmoji
           v-if="emoji && isHorizontal"
           class="mr-2 shrink-0 bg-gray-100 flex-initial dark:bg-gray-900"
@@ -119,115 +81,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 || !isHorizontal),
+            'mr-2': isHorizontal,
+            'mb-2': !isHorizontal,
+            'h-9 w-9': isHorizontal,
+            'h-20 w-20': !isHorizontal,
           }"
         >
-          <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 && !isHorizontal"
             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': isHorizontal,
+              'h-20 w-20': !isHorizontal,
               '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,
+          'flex-1': isHorizontal,
           'w-full': !isHorizontal,
-          'mr-4': isHorizontal && size === 'base' && (to || hasChevron),
-          'mr-5': isHorizontal && size === 'lg' && (to || hasChevron),
           'items-center': !isHorizontal,
         }"
       >
         <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': isHorizontal,
+            'gap-1': !isHorizontal,
           }"
         >
           <p
-            v-if="title && isHorizontal && !titleIcon && hasBackground"
+            v-if="title && isHorizontal"
             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"
             block
             class="text-gray-600 dark:text-gray-400"
-            :size="size === 'lg' ? 'xs' : '2xs'"
+            size="2xs"
             :text="description"
           />
         </div>
@@ -238,22 +164,19 @@ function onClick(event: MouseEvent) {
         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',
+          'absolute right-2 top-2': !isHorizontal,
         }"
         color="green"
         :icon="getLayerIcon('checkCircle')"
-        :size="size === 'lg' ? '2xl' : 'xl'"
+        size="xl"
       />
 
       <BaseIcon
         v-else-if="isHorizontal && (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/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.49",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",