@saasmakers/ui 2.0.49 → 2.0.50

package/app/components/bases/BaseCard.vue

@@ -25,10 +25,8 @@ defineSlots<{
   default?: () => VNode[]
 }>()
 
-const isHorizontal = computed(() => props.orientation === 'horizontal')
-
 const hasMediaBox = computed<boolean>(() => {
-  return !!(props.image || (props.emoji && !isHorizontal.value))
+  return !!(props.image || (props.emoji && props.orientation !== 'horizontal'))
 })
 
 const isClickable = computed(() => {
@@ -48,12 +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': isHorizontal,
-      'base-surface p-3': !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': isHorizontal,
-      'rounded-xl': !isHorizontal,
-      'relative': !isHorizontal,
+      'rounded-lg': orientation === 'horizontal',
+      'rounded-xl': orientation !== 'horizontal',
+      'relative': orientation !== 'horizontal',
     }"
     :to="disabled ? undefined : to"
     @click="onClick"
@@ -61,19 +59,19 @@ function onClick(event: MouseEvent) {
     <div
       class="flex overflow-hidden"
       :class="{
-        'h-12 w-full flex-row items-center text-left': isHorizontal,
-        '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',
         }"
       >
         <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"
@@ -84,15 +82,15 @@ function onClick(event: MouseEvent) {
           v-if="hasMediaBox"
           class="relative z-10 flex items-center justify-center flex-initial"
           :class="{
-            '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,
+            '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',
           }"
         >
           <BaseEmoji
-            v-if="emoji && !isHorizontal"
+            v-if="emoji && orientation !== 'horizontal'"
             class="m-0.5"
             :emoji="emoji"
             :has-box="false"
@@ -102,8 +100,8 @@ 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': isHorizontal,
-              'h-20 w-20': !isHorizontal,
+              'h-9 w-9': orientation === 'horizontal',
+              'h-20 w-20': orientation !== 'horizontal',
               'grayscale': disabled,
             }"
             :alt="title"
@@ -116,20 +114,20 @@ function onClick(event: MouseEvent) {
       <div
         class="min-w-0 flex flex-col justify-center leading-snug"
         :class="{
-          'flex-1': isHorizontal,
-          'w-full': !isHorizontal,
-          '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': isHorizontal,
-            'gap-1': !isHorizontal,
+            'gap-0': orientation === 'horizontal',
+            'gap-1': orientation !== 'horizontal',
           }"
         >
           <p
-            v-if="title && isHorizontal"
+            v-if="title && orientation === 'horizontal'"
             class="line-clamp-1 min-w-0 break-words text-xs font-medium tracking-tight uppercase"
             :class="{
               'text-gray-900 dark:text-gray-100': color === 'gray' || color === 'black' || color === 'white',
@@ -145,12 +143,12 @@ function onClick(event: MouseEvent) {
           <BaseIcon
             v-else-if="title"
             class="w-full self-center"
-            :size="'sm'"
+            size="sm"
             :text="title"
           />
 
           <BaseText
-            v-if="description && !isHorizontal"
+            v-if="description && orientation !== 'horizontal'"
             block
             class="text-gray-600 dark:text-gray-400"
             size="2xs"
@@ -163,8 +161,8 @@ function onClick(event: MouseEvent) {
         v-if="isSelected"
         class="flex-initial"
         :class="{
-          'mr-1.5 self-center': isHorizontal,
-          'absolute right-2 top-2': !isHorizontal,
+          'mr-1.5 self-center': orientation === 'horizontal',
+          'absolute right-2 top-2': orientation !== 'horizontal',
         }"
         color="green"
         :icon="getLayerIcon('checkCircle')"
@@ -172,7 +170,7 @@ function onClick(event: MouseEvent) {
       />
 
       <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="xl"

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/package.json

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