@saasmakers/ui 0.1.76 → 0.1.77

package/app/components/fields/FieldTabs.vue

@@ -2,56 +2,32 @@
 import type { FieldTabs, FieldTabsAction } from '../../types/fields'
 import { NuxtLinkLocale } from '#components'
 
-const props = withDefaults(defineProps<Omit<FieldTabs, 'modelValue'>>(), {
+const _props = withDefaults(defineProps<Omit<FieldTabs, 'modelValue'>>(), {
   minimizeOnMobile: false,
-  multiple: false,
   size: 'base',
   tabs: undefined,
   theme: 'rounded',
 })
 
 const emit = defineEmits<{
-  change: [event: MouseEvent, tabValue: number | string, action: FieldTabsAction, activeTabs: Array<number | string>]
-  click: [event: MouseEvent, tabValue: number | string, activeTabs: Array<number | string>]
+  change: [event: MouseEvent, tabValue: string, action: FieldTabsAction, activeTab: string]
+  click: [event: MouseEvent, tabValue: string, activeTab: string]
 }>()
 
-const modelValue = defineModel<FieldTabs['modelValue']>({ default: () => [] })
-
-function isTabActive(tabValue: number | string) {
-  if (props.multiple) {
-    return Array.isArray(modelValue.value) && modelValue.value.includes(tabValue)
-  }
+const modelValue = defineModel<FieldTabs['modelValue']>({ default: '' })
 
+function isTabActive(tabValue: string) {
   return modelValue.value === tabValue
 }
 
-function onTabClick(event: MouseEvent, tabValue: number | string) {
-  let activeTabs = [tabValue]
-
-  // When multiple values are not allowed and tab is not already active
-  if (!props.multiple && modelValue.value !== tabValue) {
-    emit('change', event, tabValue, 'added', activeTabs)
-  }
-
-  // When multiple values are allowed
-  if (props.multiple) {
-    // Remove the tab when already active
-    if (Array.isArray(modelValue.value) && modelValue.value.includes(tabValue)) {
-      activeTabs = modelValue.value.filter(item => item !== tabValue)
-
-      emit('change', event, tabValue, 'removed', activeTabs)
-    }
-    // Push the tab when not already active
-    else {
-      activeTabs = Array.isArray(modelValue.value) ? [...modelValue.value, tabValue] : [tabValue]
-
-      emit('change', event, tabValue, 'added', activeTabs)
-    }
+function onTabClick(event: MouseEvent, tabValue: string) {
+  if (modelValue.value !== tabValue) {
+    emit('change', event, tabValue, 'added', tabValue)
   }
 
-  modelValue.value = props.multiple ? activeTabs : tabValue
+  modelValue.value = tabValue
 
-  emit('click', event, tabValue, activeTabs)
+  emit('click', event, tabValue, tabValue)
 }
 </script>
 

package/app/types/fields.d.ts

@@ -140,8 +140,7 @@ export type FieldSelectMaxHeight = 'lg' | 'md' | 'sm' | 'xs'
 
 export interface FieldTabs {
   minimizeOnMobile?: boolean
-  modelValue: Array<number | string> | number | string
-  multiple?: boolean
+  modelValue: string
   size?: FieldSize
   tabs: FieldTabsTab[]
   theme?: FieldTabsTheme
@@ -152,7 +151,7 @@ export interface FieldTabsTab {
   icon?: string
   label: string
   to?: RouteLocationNamedI18n
-  value: number | string
+  value: string
 }
 
 export type FieldTabsAction = 'added' | 'removed'

package/package.json

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