@saasmakers/ui 2.0.55 → 2.0.57

package/app/components/bases/BaseTag.vue

@@ -1,26 +1,51 @@
 <script lang="ts" setup>
 import type { BaseTag } from '../../types/bases'
 
-withDefaults(defineProps<BaseTag>(), {
+const props = withDefaults(defineProps<BaseTag>(), {
+  active: false,
+  clickable: false,
   color: 'gray',
   size: 'base',
   text: '',
+  variant: 'filled',
 })
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+function onClick(event: MouseEvent) {
+  if (props.clickable) {
+    emit('click', event)
+  }
+}
 </script>
 
 <template>
-  <span
-    class="pointer-events-none inline-flex rounded font-medium tracking-tight"
+  <component
+    :is="clickable ? 'button' : 'span'"
+    class="inline-flex rounded border font-medium tracking-tight uppercase transition-colors"
     :class="{
+      'cursor-pointer': clickable,
+      'pointer-events-none': !clickable,
       'px-0.5 py-px text-3xs': size === 'xs',
       'px-1 py-px text-3xs': size === 'sm',
       'px-1.5 py-0.5 text-2xs': size === 'base',
-      'bg-orange-500/15 text-orange-800 dark:text-orange-300': color === 'orange',
-      'bg-indigo-500/15 text-indigo-800 dark:text-indigo-300': color === 'indigo',
-      'bg-green-500/15 text-green-800 dark:text-green-300': color === 'green',
-      'bg-gray-500/20 text-gray-700 dark:text-gray-300': color === 'gray',
+      'border-transparent': variant === 'filled',
+      'border border-gray-300 bg-transparent text-gray-900 dark:border-gray-700 dark:text-gray-100': variant === 'ghost' && !active,
+      'hover:border-gray-400 dark:hover:border-gray-600': variant === 'ghost' && !active && clickable,
+      'border border-indigo-700 bg-transparent text-indigo-800 dark:border-indigo-300 dark:text-indigo-300': variant === 'ghost' && active && color === 'indigo',
+      'border border-orange-700 bg-transparent text-orange-800 dark:border-orange-300 dark:text-orange-300': variant === 'ghost' && active && color === 'orange',
+      'border border-green-700 bg-transparent text-green-800 dark:border-green-300 dark:text-green-300': variant === 'ghost' && active && color === 'green',
+      'border border-gray-700 bg-transparent text-gray-700 dark:border-gray-300 dark:text-gray-300': variant === 'ghost' && active && color === 'gray',
+      'bg-orange-500/15 text-orange-800 dark:text-orange-300': variant === 'filled' && color === 'orange' && (!clickable || active),
+      'bg-indigo-500/15 text-indigo-800 dark:text-indigo-300': variant === 'filled' && color === 'indigo' && (!clickable || active),
+      'bg-green-500/15 text-green-800 dark:text-green-300': variant === 'filled' && color === 'green' && (!clickable || active),
+      'bg-gray-500/20 text-gray-700 dark:text-gray-300': variant === 'filled' && (color === 'gray' || (clickable && !active)),
     }"
+    :type="clickable ? 'button' : undefined"
+    @click="onClick"
   >
     <slot>{{ text }}</slot>
-  </span>
+  </component>
 </template>

package/app/types/bases.d.ts

@@ -328,13 +328,18 @@ export interface BaseSpinner {
 export type BaseStatus = | 'error' | 'info' | 'success' | 'warning'
 
 export interface BaseTag {
+  active?: boolean
+  clickable?: boolean
   color?: BaseTagColor
   size?: BaseTagSize
   text?: BaseTextText
+  variant?: BaseTagVariant
 }
 
 export type BaseTagColor = 'gray' | 'green' | 'indigo' | 'orange'
 
+export type BaseTagVariant = 'filled' | 'ghost'
+
 export interface BaseTagItem extends BaseTag {
   id?: number | string
   order?: number

package/app/types/global.d.ts

@@ -73,6 +73,7 @@ declare global {
   type BaseTagItem = import('./bases').BaseTagItem
   type BaseTags = import('./bases').BaseTags
   type BaseTagSize = import('./bases').BaseTagSize
+  type BaseTagVariant = import('./bases').BaseTagVariant
   type BaseText = import('./bases').BaseText
   type BaseTextText = import('./bases').BaseTextText
   type BaseToast = import('./bases').BaseToast

package/package.json

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