@saasmakers/ui 1.4.47 → 1.4.49

package/app/components/bases/BaseCard.vue

@@ -0,0 +1,201 @@
+<script lang="ts" setup>
+import { NuxtLinkLocale } from '#components'
+import type { BaseCard } from '../../types/bases'
+
+const props = withDefaults(defineProps<BaseCard>(), {
+  avatar: '',
+  clickable: true,
+  color: 'gray',
+  description: '',
+  details: '',
+  detailsIcon: undefined,
+  direction: 'horizontal',
+  emoji: undefined,
+  hasBackground: true,
+  hasChevron: false,
+  icon: undefined,
+  id: undefined,
+  image: '',
+  isSelected: false,
+  size: 'base',
+  title: undefined,
+  titleIcon: undefined,
+  to: undefined,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent, id?: number | string]
+}>()
+
+defineSlots<{
+  default?: () => VNode[]
+  detailsLeft?: () => VNode[]
+  innerBoxLeft?: () => VNode[]
+  innerBoxRight?: () => VNode[]
+  outerBoxLeft?: () => VNode[]
+  outerBoxRight?: () => VNode[]
+  right?: () => VNode[]
+}>()
+
+const { getIcon } = useLayerIcons()
+const hasAvatarBox = computed<boolean>(() => !!(props.avatar || props.emoji || props.icon || props.image))
+
+const isClickable = computed(() => {
+  return props.to || props.clickable
+})
+
+function onClick(event: MouseEvent) {
+  emit('click', event, props.id)
+}
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLinkLocale : 'div'"
+    class="group flex flex-col"
+    :class="{
+      'cursor-pointer': isClickable,
+      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-1.5 pr-2.5': hasBackground,
+      'hover:border-gray-300 dark:hover:border-gray-700': hasBackground && isClickable,
+      'rounded-lg': ['sm'].includes(size) && hasBackground,
+      'rounded-xl': ['base', 'lg'].includes(size) && hasBackground,
+    }"
+    :to="to"
+    @click="onClick"
+  >
+    <div
+      class="flex overflow-hidden"
+      :class="{
+        'flex-row items-center text-left': direction === 'horizontal',
+        'flex-col text-center': direction === 'vertical',
+      }"
+    >
+      <span class="flex justify-center">
+        <slot name="outerBoxLeft" />
+
+        <span
+          v-if="hasAvatarBox"
+          class="relative z-10 flex items-center justify-center flex-initial"
+          :class="{
+            'border shadow-inner': !avatar && !image,
+            'rounded-md': !avatar && !image && size === 'sm',
+            'rounded-lg': !avatar && !image && ['base', 'lg'].includes(size),
+            'border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900': !avatar && !image,
+            'h-8 w-8': size === 'sm' && !avatar && !image,
+            'h-9 w-9': size === 'base' && !avatar && !image,
+            'h-10 w-10': size === 'lg' && !avatar && !image,
+            'mr-2': direction === 'horizontal',
+            'mb-1': direction === 'vertical',
+          }"
+        >
+          <slot name="innerBoxLeft" />
+
+          <BaseAvatar
+            v-if="avatar"
+            class="rounded-lg flex-initial"
+            :class="{
+              'h-8 w-8': size === 'sm',
+              'h-10 w-10': size === 'base',
+              'h-14 w-14': size === 'lg',
+            }"
+            :src="avatar"
+          />
+
+          <BaseEmoji
+            v-else-if="emoji"
+            class="m-0.5"
+            :emoji="emoji"
+            :has-box="false"
+          />
+
+          <BaseIcon
+            v-else-if="icon"
+            class="text-lg"
+            :color="color"
+            :icon="icon"
+          />
+
+          <img
+            v-else-if="image"
+            class="flex-initial object-cover shadow-sm drag-none"
+            :class="{
+              'h-7 w-7 rounded-md': size === 'sm',
+              'h-9 w-9 rounded-lg': size === 'base',
+              'h-10 w-10 rounded-lg': size === 'lg',
+            }"
+            :alt="title"
+            loading="lazy"
+            :src="image"
+          >
+
+          <slot name="innerBoxRight" />
+        </span>
+
+        <slot name="outerBoxRight" />
+      </span>
+
+      <div
+        class="flex min-w-0 flex-1 flex-col justify-center leading-snug"
+        :class="{
+          'mr-4': direction === 'horizontal',
+          'items-center': direction === 'vertical',
+        }"
+      >
+        <div
+          class="flex w-full flex-col"
+          :class="{
+            'gap-0': ['sm', 'base'].includes(size),
+            'gap-0.25': size === 'lg',
+          }"
+        >
+          <BaseIcon
+            v-if="title"
+            class="w-full"
+            :class="{ 'self-center': !hasAvatarBox }"
+            :icon="titleIcon"
+            :size="size"
+            :text="title"
+            truncate
+          />
+
+          <BaseText
+            v-if="description"
+            block
+            class="text-gray-600 leading-4 dark:text-gray-400"
+            :size="size === 'lg' ? 'xs' : '2xs'"
+            :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="2xs"
+            :text="details"
+          />
+        </div>
+      </div>
+
+      <BaseIcon
+        v-if="isSelected"
+        class="mr-1.5 self-center text-2xl flex-initial"
+        color="green"
+        :icon="getIcon('checkCircle')"
+      />
+
+      <BaseIcon
+        v-else-if="to || hasChevron"
+        class="self-center text-xl text-gray-500 flex-initial dark:text-gray-500 group-hover:text-gray-900 dark:group-hover:text-gray-100"
+        :icon="getIcon('chevronRight')"
+      />
+
+      <slot name="right" />
+    </div>
+
+    <slot />
+  </component>
+</template>

package/app/types/bases.d.ts

@@ -72,6 +72,31 @@ export type BaseButtonSize
 
 export type BaseButtonType = 'button' | 'reset' | 'submit'
 
+export interface BaseCard {
+  avatar?: string
+  clickable?: boolean
+  color?: BaseColor
+  description?: string
+  details?: string
+  detailsIcon?: string
+  direction?: BaseCardDirection
+  emoji?: string
+  hasBackground?: boolean
+  hasChevron?: boolean
+  icon?: string
+  id?: number | string
+  image?: string
+  isSelected?: boolean
+  size?: BaseCardSize
+  title?: string
+  titleIcon?: string
+  to?: RouteLocationNamedI18n
+}
+
+export type BaseCardDirection = 'horizontal' | 'vertical'
+
+export type BaseCardSize = 'base' | 'lg' | 'sm'
+
 export interface BaseCharacter {
   character?: BaseCharacterCharacter
   size?: BaseCharacterSize

package/app/types/global.d.ts

@@ -12,6 +12,9 @@ declare global {
   type BaseButtonRounded = import('./bases').BaseButtonRounded
   type BaseButtonSize = import('./bases').BaseButtonSize
   type BaseButtonType = import('./bases').BaseButtonType
+  type BaseCard = import('./bases').BaseCard
+  type BaseCardDirection = import('./bases').BaseCardDirection
+  type BaseCardSize = import('./bases').BaseCardSize
   type BaseCharacter = import('./bases').BaseCharacter
   type BaseCharacterCharacter = import('./bases').BaseCharacterCharacter
   type BaseCharacterSize = import('./bases').BaseCharacterSize

package/nuxt.config.ts

@@ -16,6 +16,7 @@ export default defineNuxtConfig({
     '@nuxtjs/robots',
     '@nuxtjs/sitemap',
     '@pinia/nuxt',
+    'pinia-plugin-persistedstate/nuxt',
     '@unocss/nuxt',
     '@vueuse/nuxt',
     'floating-vue/nuxt',
@@ -47,6 +48,8 @@ export default defineNuxtConfig({
     path.join(currentDir, './app/assets/styles/v-popper.css'),
   ],
 
+  piniaPluginPersistedstate: { storage: 'localStorage' },
+
   colorMode: {
     classSuffix: '',
     fallback: 'light',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.4.47",
+  "version": "1.4.49",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -43,6 +43,7 @@
     "motion-v": "1.7.4",
     "numbro": "2.5.0",
     "pinia": "3.0.4",
+    "pinia-plugin-persistedstate": "4.7.1",
     "snarkdown": "2.0.0",
     "unocss": "66.7.0",
     "vue": "3.5.38",