@saasmakers/ui 2.0.54 → 2.0.56

package/app/components/bases/BaseAction.vue

@@ -44,7 +44,7 @@ function onClick(event: MouseEvent) {
 
 <template>
   <button
-    class="relative flex select-none flex-col items-center rounded-lg text-center transition-colors"
+    class="relative flex flex-col select-none items-center rounded-lg text-center transition-colors"
     :aria-busy="loading"
     :class="{
       'cursor-not-allowed opacity-50': disabled,

package/app/components/bases/BaseCircle.vue

@@ -8,10 +8,10 @@ withDefaults(defineProps<BaseCircle>(), { color: 'indigo' })
   <span
     class="inline-block size-2.5 shrink-0 rounded-full"
     :class="{
-      'bg-red-500': color === 'red',
-      'bg-amber-500': color === 'amber',
-      'bg-indigo-500': color === 'indigo',
-      'bg-green-500': color === 'green',
+      'bg-red-600 dark:bg-red-400': color === 'red',
+      'bg-amber-600 dark:bg-amber-400': color === 'amber',
+      'bg-indigo-600 dark:bg-indigo-400': color === 'indigo',
+      'bg-green-600 dark:bg-green-400': color === 'green',
     }"
   />
 </template>

package/app/components/bases/BaseTag.vue

@@ -1,24 +1,50 @@
 <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 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-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300': color === 'orange',
-      'bg-gray-200 text-gray-600 dark:bg-gray-800 dark:text-gray-400': color === 'gray',
+      '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,12 +328,17 @@ 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' | 'orange'
+export type BaseTagColor = 'gray' | 'green' | 'indigo' | 'orange'
+
+export type BaseTagVariant = 'filled' | 'ghost'
 
 export interface BaseTagItem extends BaseTag {
   id?: number | string

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.54",
+  "version": "2.0.56",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",