@saasmakers/ui 0.1.73 → 0.1.75

package/app/components/bases/BaseTags.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { BaseTags } from '../../types/bases'
 
-const props = withDefaults(defineProps<Omit<BaseTags, 'value'>>(), {
+const props = withDefaults(defineProps<Omit<BaseTags, 'modelValue'>>(), {
   active: false,
   clickable: true,
   draggable: false,
@@ -27,7 +27,7 @@ const emit = defineEmits<{
   update: [event: FocusEvent | KeyboardEvent, name: string, tagId?: number | string]
 }>()
 
-const modelValue = defineModel<(number | string)[]>({ default: () => [] })
+const modelValue = defineModel<BaseTags['modelValue']>({ default: () => [] })
 
 const keyForTagCreation = ref(Date.now())
 const keyForTagUpdate = ref(Date.now())

package/app/components/fields/FieldTabs.vue

@@ -17,6 +17,14 @@ const emit = defineEmits<{
 
 const modelValue = defineModel<FieldTabs['modelValue']>({ default: () => [] })
 
+function isTabActive(tabValue: number | string) {
+  if (props.multiple) {
+    return Array.isArray(modelValue.value) && modelValue.value.includes(tabValue)
+  }
+
+  return modelValue.value === tabValue
+}
+
 function onTabClick(event: MouseEvent, tabValue: number | string) {
   let activeTabs = [tabValue]
 
@@ -61,10 +69,10 @@ function onTabClick(event: MouseEvent, tabValue: number | string) {
       :key="tab.value"
       class="flex cursor-pointer items-center justify-center text-xs"
       :class="{
-        'text-gray-900 dark:text-gray-100': modelValue === tab.value,
-        'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100': modelValue !== tab.value,
-        'flex-1': !minimizeOnMobile || modelValue !== tab.value,
-        'flex-2 sm:flex-1': minimizeOnMobile && modelValue === tab.value,
+        '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),
+        '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',
@@ -74,12 +82,12 @@ function onTabClick(event: MouseEvent, tabValue: number | string) {
         'py-4 px-5': size === 'lg' && theme === 'border',
 
         'border-b-2 border-gray-300 dark:border-gray-700 transition duration-500': theme === 'border',
-        'border-gray-900 dark:border-gray-100': modelValue === tab.value && theme === 'border',
-        'border-gray-100 dark:border-gray-900': modelValue !== tab.value && theme === 'border',
+        'border-gray-900 dark:border-gray-100': isTabActive(tab.value) && theme === 'border',
+        'border-gray-100 dark:border-gray-900': !isTabActive(tab.value) && theme === 'border',
 
         'rounded-lg': theme === 'rounded',
-        'bg-white dark:bg-gray-900 shadow': modelValue === tab.value && theme === 'rounded',
-        'bg-gray-200 dark:bg-gray-800': modelValue !== tab.value && theme === 'rounded',
+        'bg-white dark:bg-gray-900 shadow': isTabActive(tab.value) && theme === 'rounded',
+        'bg-gray-200 dark:bg-gray-800': !isTabActive(tab.value) && theme === 'rounded',
       }"
       :to="tab.to"
       @click="onTabClick($event, tab.value)"
@@ -87,13 +95,13 @@ function onTabClick(event: MouseEvent, tabValue: number | string) {
       <BaseIcon
         v-if="tab.icon"
         class="mr-1.5 flex-initial"
-        :color="modelValue === tab.value ? tab.activeColor : 'black'"
+        :color="isTabActive(tab.value) ? tab.activeColor : 'black'"
         :icon="tab.icon"
       />
 
       <span
         class="flex-initial"
-        :class="{ 'hidden sm:inline': minimizeOnMobile && modelValue !== tab.value }"
+        :class="{ 'hidden sm:inline': minimizeOnMobile && !isTabActive(tab.value) }"
       >
         {{ tab.label }}
       </span>

package/app/types/bases.d.ts

@@ -295,12 +295,12 @@ export interface BaseTags {
   hasBack?: boolean
   hasCreation?: boolean
   maxTags?: number
+  modelValue: (number | string)[]
   removable?: boolean
   selectable?: boolean
   selectableUnique?: boolean
   size?: BaseTagSize
   tags: BaseTag[]
-  value?: (number | string)[]
   wrap?: boolean
 }
 

package/app/types/fields.d.ts

@@ -13,7 +13,7 @@ export interface FieldCheckbox {
   labelIcon?: string
   lineThrough?: boolean
   loading?: boolean
-  modelValue?: boolean
+  modelValue: boolean
   required?: boolean
   size?: FieldSize
   truncate?: boolean
@@ -22,11 +22,11 @@ export interface FieldCheckbox {
 }
 
 export interface FieldDays {
-  modelValue?: number[]
+  modelValue: number[]
 }
 
 export interface FieldEmojis {
-  modelValue?: string
+  modelValue: string
 }
 
 export interface FieldInput {
@@ -93,7 +93,7 @@ export interface FieldSelect {
   label?: BaseTextText
   labelIcon?: string
   maxHeight?: FieldSelectMaxHeight
-  modelValue?: string
+  modelValue: string
   openOnHover?: boolean
   options?: FieldSelectOption[]
   padding?: boolean
@@ -122,7 +122,7 @@ export type FieldSelectMaxHeight = 'lg' | 'md' | 'sm' | 'xs'
 
 export interface FieldTabs {
   minimizeOnMobile?: boolean
-  modelValue?: Array<number | string> | number | string
+  modelValue: Array<number | string> | number | string
   multiple?: boolean
   size?: FieldSize
   tabs: FieldTabsTab[]
@@ -152,7 +152,7 @@ export interface FieldTextarea {
   label?: BaseTextText
   labelIcon?: string
   loading?: boolean
-  modelValue?: string
+  modelValue: string
   padding?: boolean
   placeholder?: string
   required?: boolean

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.73",
+  "version": "0.1.75",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",