@saasmakers/ui 1.4.53 → 1.4.55

package/app/components/bases/BaseCard.vue

@@ -7,9 +7,6 @@ const props = withDefaults(defineProps<BaseCard>(), {
   clickable: true,
   color: 'gray',
   description: '',
-  details: '',
-  detailsIcon: undefined,
-  direction: 'horizontal',
   disabled: false,
   emoji: undefined,
   hasBackground: true,
@@ -18,6 +15,7 @@ const props = withDefaults(defineProps<BaseCard>(), {
   id: undefined,
   image: '',
   isSelected: false,
+  orientation: 'horizontal',
   size: 'base',
   title: undefined,
   titleIcon: undefined,
@@ -30,7 +28,6 @@ const emit = defineEmits<{
 
 defineSlots<{
   default?: () => VNode[]
-  detailsLeft?: () => VNode[]
   innerBoxLeft?: () => VNode[]
   innerBoxRight?: () => VNode[]
   outerBoxLeft?: () => VNode[]
@@ -62,11 +59,14 @@ function onClick(event: MouseEvent) {
     :is="to && !disabled ? NuxtLinkLocale : 'div'"
     class="group flex flex-col"
     :class="{
+      'cursor-default': !isClickable,
       'cursor-pointer': isClickable,
       'pointer-events-none': disabled,
       'opacity-50': disabled,
-      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-1.5 pr-2.5': hasBackground && size === 'base',
-      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-2.5 pr-4': hasBackground && size === 'lg',
+      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-1.5 pr-2.5': hasBackground && size === 'base' && orientation === 'horizontal',
+      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-2.5 pr-4': hasBackground && size === 'lg' && orientation === 'horizontal',
+      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-3': hasBackground && size === 'base' && orientation === 'vertical',
+      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-4': hasBackground && size === 'lg' && orientation === 'vertical',
       'hover:border-gray-300 dark:hover:border-gray-700': hasBackground && isClickable,
       'rounded-xl': hasBackground,
     }"
@@ -76,8 +76,8 @@ function onClick(event: MouseEvent) {
     <div
       class="flex overflow-hidden"
       :class="{
-        'flex-row items-center text-left': direction === 'horizontal',
-        'flex-col text-center': direction === 'vertical',
+        'flex-row items-center text-left': orientation === 'horizontal',
+        'flex-col items-center text-center': orientation === 'vertical',
       }"
     >
       <span class="flex justify-center">
@@ -88,24 +88,31 @@ function onClick(event: MouseEvent) {
           class="relative z-10 flex items-center justify-center flex-initial"
           :class="{
             'border shadow-inner': !avatar && !image,
-            'rounded-lg': !avatar && !image,
+            'rounded-lg': !avatar && !image && orientation === 'horizontal',
+            'rounded-full': !avatar && !image && orientation === 'vertical',
             'border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900': !avatar && !image,
-            'mr-2': direction === 'horizontal' && size === 'base',
-            'mr-3': direction === 'horizontal' && size === 'lg',
-            'mb-1': direction === 'vertical' && size === 'base',
-            'mb-1.5': direction === 'vertical' && size === 'lg',
-            'h-9 w-9': size === 'base',
-            'h-11 w-11': size === 'lg',
+            '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',
           }"
         >
           <slot name="innerBoxLeft" />
 
           <BaseAvatar
             v-if="avatar"
-            class="rounded-lg flex-initial"
+            class="flex-initial"
             :class="{
-              'h-10 w-10': size === 'base',
-              'h-12 w-12': size === 'lg',
+              'rounded-lg': orientation === 'horizontal',
+              'rounded-full': orientation === 'vertical',
+              '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',
             }"
             :src="avatar"
           />
@@ -130,10 +137,15 @@ function onClick(event: MouseEvent) {
 
           <img
             v-else-if="image"
-            class="rounded-lg object-cover shadow-sm drag-none flex-initial"
+            class="object-cover shadow-sm transition-[filter] duration-300 drag-none flex-initial"
             :class="{
-              'h-9 w-9': size === 'base',
-              'h-11 w-11': size === 'lg',
+              'rounded-lg': orientation === 'horizontal',
+              'rounded-full': orientation === 'vertical',
+              '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',
+              'grayscale': disabled,
             }"
             :alt="title"
             loading="lazy"
@@ -147,11 +159,13 @@ function onClick(event: MouseEvent) {
       </span>
 
       <div
-        class="min-w-0 flex flex-1 flex-col justify-center leading-snug"
+        class="min-w-0 flex flex-col justify-center leading-snug"
         :class="{
-          'mr-4': direction === 'horizontal' && size === 'base',
-          'mr-5': direction === 'horizontal' && size === 'lg',
-          'items-center': direction === 'vertical',
+          'flex-1': orientation === 'horizontal',
+          'w-full': orientation === 'vertical',
+          'mr-4': orientation === 'horizontal' && size === 'base',
+          'mr-5': orientation === 'horizontal' && size === 'lg',
+          'items-center': orientation === 'vertical',
         }"
       >
         <div
@@ -159,6 +173,8 @@ 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',
           }"
         >
           <BaseIcon
@@ -168,7 +184,7 @@ function onClick(event: MouseEvent) {
             :icon="titleIcon"
             :size="size === 'lg' ? 'base' : 'sm'"
             :text="title"
-            truncate
+            :truncate="orientation === 'horizontal'"
           />
 
           <BaseText
@@ -179,33 +195,21 @@ function onClick(event: MouseEvent) {
             :text="description"
           />
         </div>
-
-        <div class="flex items-center">
-          <slot name="detailsLeft" />
-
-          <BaseIcon
-            v-if="details"
-            class="mt-0.5 whitespace-nowrap text-gray-700 font-semibold tracking-tighter dark:text-gray-300"
-            :icon="detailsIcon"
-            :size="size === 'lg' ? 'xs' : '2xs'"
-            :text="details"
-          />
-        </div>
       </div>
 
       <BaseIcon
         v-if="isSelected"
         class="mr-1.5 self-center flex-initial"
         :class="{
-          'text-2xl': size === 'base',
-          'text-3xl': size === 'lg',
+          'text-xl': size === 'base',
+          'text-2xl': size === 'lg',
         }"
         color="green"
         :icon="getIcon('checkCircle')"
       />
 
       <BaseIcon
-        v-else-if="to || hasChevron"
+        v-else-if="orientation === 'horizontal' && (to || hasChevron)"
         class="self-center text-gray-500 flex-initial dark:text-gray-500"
         :class="{
           'group-hover:text-gray-900 dark:group-hover:text-gray-100': isClickable,

package/app/components/bases/BaseIcon.vue

@@ -28,7 +28,7 @@ const { t } = useI18n()
 const { getIcon } = useLayerIcons()
 
 const isClickable = computed(() => {
-  return props.clickable || props.to
+  return props.clickable || props.to || props.confirmation
 })
 
 const statusIcon = computed<string | undefined>(() => {
@@ -112,8 +112,8 @@ function onKeyDown(event: KeyboardEvent) {
       'flex-row': !reverse,
       'flex-row-reverse': reverse,
     }"
-    role="button"
-    tabindex="0"
+    :role="isClickable ? 'button' : undefined"
+    :tabindex="isClickable ? 0 : undefined"
     @click="onClick"
     @keydown.enter="onKeyDown"
     @keydown.space.prevent="onKeyDown"

package/app/components/fields/FieldTabs.vue

@@ -4,7 +4,7 @@ import type { FieldTabs, FieldTabsAction } from '../../types/fields'
 
 withDefaults(defineProps<Omit<FieldTabs, 'modelValue'>>(), {
   disabled: false,
-  minimizeOnMobile: false,
+  orientation: 'horizontal',
   size: 'base',
   tabs: undefined,
   theme: 'rounded',
@@ -45,12 +45,12 @@ function onTabClick(event: MouseEvent, tabValue: string) {
       :is="tab.to ? NuxtLinkLocale : 'div'"
       v-for="tab in tabs"
       :key="tab.value"
-      class="flex cursor-pointer items-center justify-center text-xs"
+      class="flex flex-1 cursor-pointer items-center justify-center text-xs"
       :class="{
+        'flex-col sm:flex-row': orientation === 'responsive',
+        'flex-col': orientation === 'vertical',
         'text-gray-900 dark:text-gray-100': isTabActive(tab.value),
         'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100': !isTabActive(tab.value) && !disabled,
-        'flex-1': !minimizeOnMobile || !isTabActive(tab.value),
-        'flex-2 sm:flex-1': minimizeOnMobile && isTabActive(tab.value),
         'py-1.5 px-2.5': size === 'xs' && theme === 'rounded',
         'py-2 px-3': size === 'sm' && theme === 'rounded',
         'py-2.5 px-3.5': size === 'base' && theme === 'rounded' || size === 'xs' && theme === 'border',
@@ -69,14 +69,22 @@ function onTabClick(event: MouseEvent, tabValue: string) {
     >
       <BaseIcon
         v-if="tab.icon"
-        class="mr-1.5 flex-initial"
+        class="flex-initial"
+        :class="{
+          'mb-1 sm:mb-0 sm:mr-1.5': orientation === 'responsive',
+          'mr-1.5': orientation === 'horizontal',
+          'mb-1': orientation === 'vertical',
+        }"
         :color="isTabActive(tab.value) ? tab.activeColor : 'black'"
         :icon="tab.icon"
       />
 
       <span
-        class="flex-initial"
-        :class="{ 'hidden sm:inline': minimizeOnMobile && !isTabActive(tab.value) }"
+        class="whitespace-nowrap flex-initial"
+        :class="{
+          'text-2xs sm:text-xs': orientation === 'responsive',
+          'text-2xs': orientation === 'vertical',
+        }"
       >
         {{ tab.label }}
       </span>

package/app/types/bases.d.ts

@@ -77,9 +77,6 @@ export interface BaseCard {
   clickable?: boolean
   color?: BaseColor
   description?: string
-  details?: string
-  detailsIcon?: string
-  direction?: BaseCardDirection
   disabled?: boolean
   emoji?: string
   hasBackground?: boolean
@@ -88,13 +85,14 @@ export interface BaseCard {
   id?: number | string
   image?: string
   isSelected?: boolean
+  orientation?: BaseCardOrientation
   size?: BaseCardSize
   title?: string
   titleIcon?: string
   to?: RouteLocationNamedI18n
 }
 
-export type BaseCardDirection = 'horizontal' | 'vertical'
+export type BaseCardOrientation = 'horizontal' | 'vertical'
 
 export type BaseCardSize = 'base' | 'lg'
 

package/app/types/fields.d.ts

@@ -167,8 +167,8 @@ export type FieldStatus
 
 export interface FieldTabs {
   disabled?: boolean
-  minimizeOnMobile?: boolean
   modelValue: string
+  orientation?: FieldTabsOrientation
   size?: FieldSize
   tabs: FieldTabsTab[]
   theme?: FieldTabsTheme
@@ -176,6 +176,8 @@ export interface FieldTabs {
 
 export type FieldTabsAction = 'added' | 'removed'
 
+export type FieldTabsOrientation = 'horizontal' | 'responsive' | 'vertical'
+
 export interface FieldTabsTab {
   activeColor?: BaseColor
   icon?: string

package/app/types/global.d.ts

@@ -13,7 +13,7 @@ declare global {
   type BaseButtonSize = import('./bases').BaseButtonSize
   type BaseButtonType = import('./bases').BaseButtonType
   type BaseCard = import('./bases').BaseCard
-  type BaseCardDirection = import('./bases').BaseCardDirection
+  type BaseCardOrientation = import('./bases').BaseCardOrientation
   type BaseCardSize = import('./bases').BaseCardSize
   type BaseCharacter = import('./bases').BaseCharacter
   type BaseCharacterCharacter = import('./bases').BaseCharacterCharacter

package/package.json

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