@saasmakers/ui 0.1.72 → 0.1.74

package/app/components/bases/BaseChart.vue

@@ -47,7 +47,6 @@ onMounted(() => {
   }
 })
 
-// Expose
 defineExpose({ chart })
 </script>
 

package/app/components/bases/BaseTags.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { BaseTags } from '../../types/bases'
 
-const props = withDefaults(defineProps<BaseTags>(), {
+const props = withDefaults(defineProps<Omit<BaseTags, 'modelValue'>>(), {
   active: false,
   clickable: true,
   draggable: false,
@@ -14,21 +14,21 @@ const props = withDefaults(defineProps<BaseTags>(), {
   selectableUnique: false,
   size: 'base',
   tags: () => [],
-  value: () => [],
   wrap: false,
 })
 
 const emit = defineEmits<{
-  'attach': [event: MouseEvent, tagId?: number | string]
-  'back': [event: MouseEvent]
-  'click': [event: MouseEvent]
-  'create': [event: FocusEvent | KeyboardEvent, name: string]
-  'detach': [event: MouseEvent, tagId?: number | string]
-  'remove': [event: MouseEvent, tagId?: number | string]
-  'update': [event: FocusEvent | KeyboardEvent, name: string, tagId?: number | string]
-  'update:modelValue': [value: (number | string)[]]
+  attach: [event: MouseEvent, tagId?: number | string]
+  back: [event: MouseEvent]
+  click: [event: MouseEvent]
+  create: [event: FocusEvent | KeyboardEvent, name: string]
+  detach: [event: MouseEvent, tagId?: number | string]
+  remove: [event: MouseEvent, tagId?: number | string]
+  update: [event: FocusEvent | KeyboardEvent, name: string, tagId?: number | string]
 }>()
 
+const modelValue = defineModel<BaseTags['modelValue']>({ default: () => [] })
+
 const keyForTagCreation = ref(Date.now())
 const keyForTagUpdate = ref(Date.now())
 const root = ref<HTMLDivElement>()
@@ -91,7 +91,7 @@ function onShowAllTags() {
 
 function onTagClick(event: MouseEvent, tagId?: number | string) {
   if (props.selectable && tagId) {
-    let value = [...props.value]
+    let value = [...modelValue.value]
 
     if (value.includes(tagId)) {
       value.splice(value.indexOf(tagId), 1)
@@ -106,7 +106,7 @@ function onTagClick(event: MouseEvent, tagId?: number | string) {
       emit('attach', event, tagId)
     }
 
-    emit('update:modelValue', value)
+    modelValue.value = value
   }
 }
 
@@ -184,7 +184,7 @@ function onRemoveTag(event: MouseEvent, tagId?: number | string) {
           <BaseTag
             :id="tag.id || tagIndex"
             :key="`${tag.id}_${tagIndex}`"
-            :active="tag.id && value.includes(tag.id) || tag.active"
+            :active="tag.id && modelValue.includes(tag.id) || tag.active"
             :avatar="tag.avatar"
             :circle="tag.circle"
             :clickable="clickable"

package/app/components/fields/FieldCheckbox.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { FieldCheckbox } from '../../types/fields'
 
-const props = withDefaults(defineProps<FieldCheckbox>(), {
+withDefaults(defineProps<Omit<FieldCheckbox, 'modelValue'>>(), {
   description: '',
   disabled: false,
   fullWidth: false,
@@ -10,7 +10,6 @@ const props = withDefaults(defineProps<FieldCheckbox>(), {
   labelIcon: undefined,
   lineThrough: false,
   loading: false,
-  modelValue: false,
   required: false,
   size: 'base',
   truncate: false,
@@ -18,27 +17,9 @@ const props = withDefaults(defineProps<FieldCheckbox>(), {
   validation: undefined,
 })
 
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean ]
-}>()
+const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
 
-const input = ref<HTMLInputElement>()
 const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
-
-const value = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value) {
-    emit('update:modelValue', value || false)
-  },
-})
-
-function onFieldChange(event: Event) {
-  const value = (event.target as HTMLInputElement).checked
-
-  emit('update:modelValue', value)
-}
 </script>
 
 <template>
@@ -51,8 +32,7 @@ function onFieldChange(event: Event) {
       <input
         v-if="!loading"
         :id="uuid"
-        ref="input"
-        v-model="value"
+        v-model="modelValue"
         class="cursor-pointer border border-gray-300 rounded-lg accent-indigo-700 transition-shadow flex-initial dark:border-gray-700 focus:border-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500/40 dark:focus:border-gray-500 dark:hover:border-gray-600"
         :class="{
           'disabled:opacity-50 disabled:cursor-not-allowed': disabled,
@@ -64,7 +44,6 @@ function onFieldChange(event: Event) {
         }"
         :disabled="disabled"
         type="checkbox"
-        @change="onFieldChange"
       >
 
       <BaseSpinner

package/app/components/fields/FieldDays.vue

@@ -1,15 +1,14 @@
 <script lang="ts" setup>
 import type { FieldDays } from '../../types/fields'
 
-const props = withDefaults(defineProps<FieldDays>(), { modelValue: () => [] })
-
 const emit = defineEmits<{
-  'change': [event: MouseEvent, value: number[]]
-  'update:modelValue': [value: number[]]
+  change: [event: MouseEvent, value: number[]]
 }>()
 
 const { t } = useI18n()
 
+const modelValue = defineModel<FieldDays['modelValue']>({ default: () => [] })
+
 const daysToDisplay = computed(() => {
   return [
     {
@@ -44,12 +43,13 @@ const daysToDisplay = computed(() => {
 })
 
 function onUpdateDays(event: MouseEvent, day: number) {
-  const days = [...props.modelValue]
+  const days = [...modelValue.value]
 
   days.includes(day) ? days.splice(days.indexOf(day), 1) : days.push(day)
 
+  modelValue.value = days
+
   emit('change', event, days)
-  emit('update:modelValue', days)
 }
 </script>
 

package/app/components/fields/FieldEmojis.vue

@@ -3,16 +3,15 @@ import type { FieldEmojis } from '../../types/fields'
 import { emojis } from '@saasmakers/shared'
 import { refDebounced } from '@vueuse/core'
 
-withDefaults(defineProps<FieldEmojis>(), { modelValue: undefined })
-
 const emit = defineEmits<{
-  'click': [event: MouseEvent, emoji: string]
-  'update:modelValue': [value: string]
+  click: [event: MouseEvent, emoji: string]
 }>()
 
 const { locale, t } = useI18n()
 const { normalizeText } = useLayerUtils()
 
+const modelValue = defineModel<FieldEmojis['modelValue']>({ default: '' })
+
 const searchRaw = ref('')
 const searchQuery = refDebounced(searchRaw, 250)
 
@@ -43,7 +42,7 @@ const emojisFiltered = computed(() => {
 
 function onEmojiClick(event: MouseEvent, emoji?: string) {
   emit('click', event, emoji || '')
-  emit('update:modelValue', emoji || '')
+  modelValue.value = emoji || ''
 }
 </script>
 

package/app/components/fields/FieldInput.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { FieldInput } from '../../types/fields'
 
-const props = withDefaults(defineProps<FieldInput>(), {
+const props = withDefaults(defineProps<Omit<FieldInput, 'modelValue'>>(), {
   alignment: 'left',
   autocomplete: true,
   autofocus: false,
@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<FieldInput>(), {
   lowercaseOnly: false,
   max: undefined,
   min: undefined,
-  modelValue: '',
   placeholder: '',
   required: false,
   size: 'base',
@@ -28,11 +27,10 @@ const props = withDefaults(defineProps<FieldInput>(), {
 })
 
 const emit = defineEmits<{
-  'blur': [event: FocusEvent]
-  'focus': [event: FocusEvent]
-  'keyup': [event: KeyboardEvent, value: string ]
-  'submit': [event: KeyboardEvent, value: string ]
-  'update:modelValue': [value: string ]
+  blur: [event: FocusEvent]
+  focus: [event: FocusEvent]
+  keyup: [event: KeyboardEvent, value: string ]
+  submit: [event: KeyboardEvent, value: string ]
 }>()
 
 defineSlots<{
@@ -41,6 +39,8 @@ defineSlots<{
   label?: () => VNode[]
 }>()
 
+const modelValue = defineModel<FieldInput['modelValue']>({ default: '' })
+
 const input = ref<HTMLInputElement>()
 const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
 
@@ -52,15 +52,6 @@ onMounted(() => {
   }
 })
 
-const value = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value) {
-    emit('update:modelValue', value || '')
-  },
-})
-
 function blur() {
   if (input.value) {
     input.value.blur()
@@ -92,7 +83,7 @@ function onFieldInput(event: Event) {
     value = value.toString().toLowerCase()
   }
 
-  emit('update:modelValue', value)
+  modelValue.value = value
 }
 
 function onFieldKeyDown(event: KeyboardEvent) {
@@ -102,7 +93,7 @@ function onFieldKeyDown(event: KeyboardEvent) {
     blur()
   }
 
-  else if (event.key === 'Enter' && props.modelValue) {
+  else if (event.key === 'Enter' && modelValue.value) {
     emit('submit', event, value)
   }
 
@@ -120,7 +111,6 @@ function onFieldKeyDown(event: KeyboardEvent) {
   emit('keyup', event, value)
 }
 
-// Expose
 defineExpose({ focus })
 </script>
 
@@ -160,7 +150,6 @@ defineExpose({ focus })
       <input
         :id="uuid"
         ref="input"
-        v-model="value"
         :autocomplete="autocomplete ? 'on' : 'off'"
         class="h-full w-full flex-1 appearance-none items-center rounded-lg outline-none placeholder-gray-600 dark:placeholder-gray-400 focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100"
         :class="{
@@ -190,6 +179,7 @@ defineExpose({ focus })
         :placeholder="placeholder"
         spellcheck="false"
         :type="type"
+        :value="modelValue"
         @blur="onFieldBlur"
         @focus="onFieldFocus"
         @input="onFieldInput"

package/app/components/fields/FieldSelect.vue

@@ -2,7 +2,7 @@
 import type { FieldSelect, FieldSelectOption } from '../../types/fields'
 import { vOnClickOutside } from '@vueuse/components'
 
-const props = withDefaults(defineProps<FieldSelect>(), {
+const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
   border: 'full',
   caret: true,
   columns: () => [],
@@ -13,7 +13,6 @@ const props = withDefaults(defineProps<FieldSelect>(), {
   label: '',
   labelIcon: undefined,
   maxHeight: 'xs',
-  modelValue: undefined,
   openOnHover: false,
   options: () => [],
   padding: true,
@@ -24,15 +23,16 @@ const props = withDefaults(defineProps<FieldSelect>(), {
 })
 
 const emit = defineEmits<{
-  'change': [event: MouseEvent, value: string]
-  'click': [event: MouseEvent, value: string]
-  'optionClick': [event: MouseEvent, value: string]
-  'update:modelValue': [value: string]
+  change: [event: MouseEvent, value: string]
+  click: [event: MouseEvent, value: string]
+  optionClick: [event: MouseEvent, value: string]
 }>()
 
 const { getIcon } = useLayerIcons()
 const { fadeIn } = useMotion()
 
+const modelValue = defineModel<FieldSelect['modelValue']>({ default: '' })
+
 const opened = ref(false)
 const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
 
@@ -66,7 +66,7 @@ const computedOptions = computed(() => {
 
 const selectedOption = computed(() => {
   return computedOptions.value.find((option) => {
-    return option.value === props.modelValue
+    return option.value === modelValue.value
   })
 })
 
@@ -75,9 +75,9 @@ function reset() {
 }
 
 function selectOption(event: MouseEvent, value: string) {
-  emit('change', event, value)
-  emit('update:modelValue', value)
+  modelValue.value = value
 
+  emit('change', event, value)
   reset()
 }
 

package/app/components/fields/FieldTabs.vue

@@ -2,9 +2,8 @@
 import type { FieldTabs, FieldTabsAction } from '../../types/fields'
 import { NuxtLinkLocale } from '#components'
 
-const props = withDefaults(defineProps<FieldTabs>(), {
+const props = withDefaults(defineProps<Omit<FieldTabs, 'modelValue'>>(), {
   minimizeOnMobile: false,
-  modelValue: undefined,
   multiple: false,
   size: 'base',
   tabs: undefined,
@@ -12,36 +11,39 @@ const props = withDefaults(defineProps<FieldTabs>(), {
 })
 
 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>]
-  'update:modelValue': [value?: Array<number | string> | number | string]
+  change: [event: MouseEvent, tabValue: number | string, action: FieldTabsAction, activeTabs: Array<number | string>]
+  click: [event: MouseEvent, tabValue: number | string, activeTabs: Array<number | string>]
 }>()
 
+const modelValue = defineModel<FieldTabs['modelValue']>({ default: () => [] })
+
 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 && props.modelValue !== tabValue) {
+  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(props.modelValue) && props.modelValue.includes(tabValue)) {
-      activeTabs = props.modelValue.filter(item => item !== tabValue)
+    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(props.modelValue) ? [...props.modelValue, tabValue] : [tabValue]
+      activeTabs = Array.isArray(modelValue.value) ? [...modelValue.value, tabValue] : [tabValue]
+
       emit('change', event, tabValue, 'added', activeTabs)
     }
   }
 
+  modelValue.value = props.multiple ? activeTabs : tabValue
+
   emit('click', event, tabValue, activeTabs)
-  emit('update:modelValue', props.multiple ? activeTabs : tabValue)
 }
 </script>
 

package/app/components/fields/FieldTextarea.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { FieldTextarea } from '../../types/fields'
 
-const props = withDefaults(defineProps<FieldTextarea>(), {
+const props = withDefaults(defineProps<Omit<FieldTextarea, 'modelValue'>>(), {
   autofocus: false,
   background: 'gray',
   border: true,
@@ -12,7 +12,6 @@ const props = withDefaults(defineProps<FieldTextarea>(), {
   label: '',
   labelIcon: undefined,
   loading: false,
-  modelValue: '',
   padding: true,
   placeholder: '',
   required: false,
@@ -23,25 +22,17 @@ const props = withDefaults(defineProps<FieldTextarea>(), {
 })
 
 const emit = defineEmits<{
-  'blur': [event: FocusEvent, value: string]
-  'click': [event: MouseEvent, value: string]
-  'update:modelValue': [value: string]
+  blur: [event: FocusEvent, value: string]
+  click: [event: MouseEvent, value: string]
 }>()
 
+const modelValue = defineModel<FieldTextarea['modelValue']>({ default: '' })
+
 const textarea = ref<HTMLTextAreaElement>()
 const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
 
 const { isDesktopBrowser } = useDevice()
 
-const value = computed({
-  get() {
-    return `${props.modelValue}`
-  },
-  set(value) {
-    emit('update:modelValue', value)
-  },
-})
-
 onMounted(() => {
   if (props.autofocus && textarea.value && isDesktopBrowser.value) {
     textarea.value.focus()
@@ -49,21 +40,11 @@ onMounted(() => {
 })
 
 function onFieldBlur(event: FocusEvent) {
-  const value = textarea.value?.value || ''
-
-  emit('blur', event, value)
+  emit('blur', event, modelValue.value || '')
 }
 
 function onFieldClick(event: MouseEvent) {
-  const value = textarea.value?.value || ''
-
-  emit('click', event, value)
-}
-
-function onFieldInput() {
-  const value = textarea.value?.value || ''
-
-  emit('update:modelValue', value)
+  emit('click', event, modelValue.value || '')
 }
 </script>
 
@@ -86,7 +67,7 @@ function onFieldInput() {
     <textarea
       :id="uuid"
       ref="textarea"
-      v-model="value"
+      v-model="modelValue"
       v-bind="{ 'data-enable-grammarly': 'false' }"
       class="w-full flex-1 appearance-none rounded-lg text-gray-900 font-medium tracking-tight uppercase outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400 focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100"
       :class="{
@@ -110,7 +91,6 @@ function onFieldInput() {
       spellcheck="false"
       @blur="onFieldBlur"
       @click="onFieldClick"
-      @input="onFieldInput"
     />
 
     <FieldMessage

package/app/components/fields/FieldTime.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { FieldTime } from '../../types/fields'
 
-const props = withDefaults(defineProps<FieldTime>(), {
+const props = withDefaults(defineProps<Omit<FieldTime, 'modelValue'>>(), {
   background: 'gray',
   description: '',
   disabled: false,
@@ -10,7 +10,6 @@ const props = withDefaults(defineProps<FieldTime>(), {
   id: undefined,
   label: '',
   labelIcon: undefined,
-  modelValue: '',
   name: undefined,
   required: false,
   size: 'base',
@@ -18,21 +17,16 @@ const props = withDefaults(defineProps<FieldTime>(), {
 })
 
 const emit = defineEmits<{
-  'blur': [event: FocusEvent, value: string, name?: string]
-  'update:modelValue': [value: string, name?: string]
+  blur: [event: FocusEvent, value: string, name?: string]
 }>()
 
+const modelValue = defineModel<FieldTime['modelValue']>({ default: '' })
+
 const root = ref<HTMLDivElement>()
 const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
 
 function onFieldBlur(event: FocusEvent) {
-  emit('blur', event, props.modelValue, props.name)
-}
-
-function onFieldInput() {
-  const value = root.value?.querySelector('input')?.value || ''
-
-  emit('update:modelValue', value, props.name)
+  emit('blur', event, modelValue.value, props.name)
 }
 </script>
 
@@ -52,6 +46,7 @@ function onFieldInput() {
     <div class="item-center h-[42px] flex overflow-hidden border border-gray-200 rounded-lg pl-3 pr-2 dark:border-gray-800 focus-within:border-gray-400 hover:border-gray-300 dark:focus-within:border-gray-600 dark:hover:border-gray-700">
       <input
         :id="`${id}`"
+        v-model="modelValue"
         class="text-sm outline-none"
         :class="{
           'bg-gray-100 dark:bg-gray-900': background === 'gray',
@@ -59,7 +54,6 @@ function onFieldInput() {
         }"
         type="time"
         @blur="onFieldBlur"
-        @input="onFieldInput"
       >
     </div>
 

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 {
@@ -46,7 +46,7 @@ export interface FieldInput {
   lowercaseOnly?: boolean
   max?: number
   min?: number
-  modelValue?: string
+  modelValue: string
   placeholder?: string
   required?: boolean
   size?: FieldSize
@@ -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
@@ -171,7 +171,7 @@ export interface FieldTime {
   id: number | string
   label?: BaseTextText
   labelIcon?: string
-  modelValue?: string
+  modelValue: string
   name?: string
   required?: boolean
   size?: FieldSize

package/nuxt.config.ts

@@ -25,7 +25,7 @@ export default defineNuxtConfig({
     },
   },
 
-  // --> COMPONENTS, CSS, MODULES & PLUGINS <--
+  // --> COMPONENTS, CSS & MODULES <--
 
   components: [
     {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -54,7 +54,7 @@
   "devDependencies": {
     "nuxt": "4.2.1",
     "typescript": "5.9.3",
-    "@saasmakers/shared": "0.1.3"
+    "@saasmakers/shared": "0.1.4"
   },
   "scripts": {
     "dev": "nuxi dev",