@saasmakers/ui 2.0.46 → 2.0.48

package/app/components/bases/BaseCard.vue

@@ -39,10 +39,33 @@ const hasAvatarBox = computed<boolean>(() => {
   return !!(props.avatar || props.emoji || props.icon || props.image)
 })
 
+const hasMediaBox = computed<boolean>(() => {
+  return !!(props.avatar || props.icon || props.image)
+})
+
+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)
 }
@@ -56,13 +79,15 @@ function onClick(event: MouseEvent) {
       'cursor-default': !isClickable,
       'cursor-pointer': isClickable,
       'opacity-50': disabled,
-      'base-surface p-1.5 pr-2.5': hasBackground && size === 'base' && orientation === 'horizontal',
-      'base-surface p-2.5 pr-4': hasBackground && size === 'lg' && orientation === 'horizontal',
-      'base-surface p-3': hasBackground && size === 'base' && orientation === 'vertical',
-      'base-surface p-4': hasBackground && size === 'lg' && orientation === 'vertical',
+      '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-xl': hasBackground,
-      'relative': orientation === 'vertical',
+      'rounded-lg': hasBackground && isHorizontal,
+      'rounded-xl': hasBackground && !isHorizontal,
+      'relative': !isHorizontal,
     }"
     :to="disabled ? undefined : to"
     @click="onClick"
@@ -70,28 +95,44 @@ function onClick(event: MouseEvent) {
     <div
       class="flex overflow-hidden"
       :class="{
-        'flex-row items-center text-left': orientation === 'horizontal',
-        'flex-col items-center text-center': orientation === 'vertical',
+        '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,
       }"
     >
-      <span class="flex justify-center">
+      <span
+        class="flex items-center"
+        :class="{
+          'shrink-0 justify-center': isHorizontal,
+          '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"
+          :clickable="false"
+          :emoji="emoji"
+          has-box
+        />
+
         <span
-          v-if="hasAvatarBox"
+          v-if="hasMediaBox || (emoji && !isHorizontal)"
           class="relative z-10 flex items-center justify-center flex-initial"
           :class="{
-            'border shadow-inner': !avatar && !image,
-            'rounded-lg': !avatar && !image,
-            'base-border bg-gray-100 dark:bg-gray-900': !avatar && !image,
-            'mr-2': orientation === 'horizontal' && size === 'base',
-            'mr-3': orientation === 'horizontal' && size === 'lg',
-            'mb-2': orientation === 'vertical' && size === 'base',
-            'mb-3': orientation === 'vertical' && size === 'lg',
-            'h-9 w-9': size === 'base' && orientation === 'horizontal',
-            'h-11 w-11': size === 'lg' && orientation === 'horizontal',
-            'h-20 w-20': size === 'base' && orientation === 'vertical',
-            'h-24 w-24': size === 'lg' && orientation === 'vertical',
+            '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,
           }"
         >
           <slot name="innerBoxLeft" />
@@ -100,10 +141,10 @@ function onClick(event: MouseEvent) {
             v-if="avatar"
             class="rounded-lg flex-initial"
             :class="{
-              'h-10 w-10': size === 'base' && orientation === 'horizontal',
-              'h-12 w-12': size === 'lg' && orientation === 'horizontal',
-              'h-20 w-20': size === 'base' && orientation === 'vertical',
-              'h-24 w-24': size === 'lg' && orientation === 'vertical',
+              '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"
           />
@@ -127,10 +168,10 @@ function onClick(event: MouseEvent) {
             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' && orientation === 'horizontal',
-              'h-11 w-11': size === 'lg' && orientation === 'horizontal',
-              'h-20 w-20': size === 'base' && orientation === 'vertical',
-              'h-24 w-24': size === 'lg' && orientation === 'vertical',
+              '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,
               'grayscale': disabled,
             }"
             :alt="title"
@@ -147,11 +188,11 @@ function onClick(event: MouseEvent) {
       <div
         class="min-w-0 flex flex-col justify-center leading-snug"
         :class="{
-          'flex-1': orientation === 'horizontal',
-          'w-full': orientation === 'vertical',
-          'mr-4': orientation === 'horizontal' && size === 'base',
-          'mr-5': orientation === 'horizontal' && size === 'lg',
-          'items-center': orientation === 'vertical',
+          'flex-1': isHorizontal && hasBackground,
+          'w-full': !isHorizontal,
+          'mr-4': isHorizontal && size === 'base' && (to || hasChevron),
+          'mr-5': isHorizontal && size === 'lg' && (to || hasChevron),
+          'items-center': !isHorizontal,
         }"
       >
         <div
@@ -159,22 +200,31 @@ function onClick(event: MouseEvent) {
           :class="{
             'gap-0': size === 'base',
             'gap-0.5': size === 'lg',
-            'gap-1': orientation === 'vertical' && size === 'base',
-            'gap-1.5': orientation === 'vertical' && size === 'lg',
+            'gap-1': !isHorizontal && size === 'base',
+            'gap-1.5': !isHorizontal && size === 'lg',
           }"
         >
+          <p
+            v-if="title && isHorizontal && !titleIcon && hasBackground"
+            class="line-clamp-1 min-w-0 break-words text-xs font-medium tracking-tight uppercase"
+            :class="titleColorClass"
+          >
+            {{ title }}
+          </p>
+
           <BaseIcon
-            v-if="title"
+            v-else-if="title"
             class="w-full"
             :class="{ 'self-center': !hasAvatarBox }"
+            :color="isHorizontal ? color : undefined"
             :icon="titleIcon"
             :size="size === 'lg' ? 'base' : 'sm'"
             :text="title"
-            :truncate="orientation === 'horizontal'"
+            :truncate="isHorizontal"
           />
 
           <BaseText
-            v-if="description"
+            v-if="description && !isHorizontal"
             block
             class="text-gray-600 dark:text-gray-400"
             :size="size === 'lg' ? 'xs' : '2xs'"
@@ -187,9 +237,9 @@ function onClick(event: MouseEvent) {
         v-if="isSelected"
         class="flex-initial"
         :class="{
-          'mr-1.5 self-center': orientation === 'horizontal',
-          'absolute right-2 top-2': orientation === 'vertical' && size === 'base',
-          'absolute right-2.5 top-2.5': orientation === 'vertical' && size === 'lg',
+          'mr-1.5 self-center': isHorizontal,
+          'absolute right-2 top-2': !isHorizontal && size === 'base',
+          'absolute right-2.5 top-2.5': !isHorizontal && size === 'lg',
         }"
         color="green"
         :icon="getLayerIcon('checkCircle')"
@@ -197,7 +247,7 @@ function onClick(event: MouseEvent) {
       />
 
       <BaseIcon
-        v-else-if="orientation === 'horizontal' && (to || hasChevron)"
+        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'"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.46",
+  "version": "2.0.48",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -60,6 +60,7 @@
   "devDependencies": {
     "nuxt": "4.3.1",
     "typescript": "5.9.3",
+    "vue-tsc": "3.3.7",
     "@saasmakers/apps-helpers": "0.1.0",
     "@saasmakers/shared": "0.2.8"
   },