@saasmakers/ui 0.1.71 → 0.1.73

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, 'value'>>(), {
   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<(number | string)[]>({ 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/composables/useChartist.ts

@@ -1,36 +1,42 @@
+import type { AreaDrawEvent, BarChartOptions, BarDrawEvent, BaseChart, DrawEvent, LineDrawEvent, Options } from 'chartist'
+import { easings } from 'chartist'
+
 export default function useChartist() {
+  type EasingType = keyof typeof easings | number[]
+
   const progressiveLinePlugin = (params: {
     animateArea?: boolean
     delay?: number
     duration?: number
-    easing?: any
+    easing?: EasingType
     stagger?: number
   } = {}) => {
     const {
       animateArea = true,
       delay = 0,
       duration = 500,
-      easing = (window as any)?.Chartist?.Svg?.Easing?.easeOutQuart,
+      easing = easings.easeOutQuart,
       stagger = 0,
     } = params
 
-    return (chart: any) => {
-      chart.on('draw', (ctx: any) => {
+    return (chart: BaseChart) => {
+      chart.on('draw', (ctx: DrawEvent) => {
         const begin = delay + (stagger ? stagger * (ctx.seriesIndex ?? 0) : 0)
 
         // Animation for line charts
         if (ctx.type === 'line') {
-          const node: SVGPathElement = ctx.element._node
+          const lineCtx = ctx as LineDrawEvent
+          const node = lineCtx.element.getNode<SVGPathElement>()
           const length = node.getTotalLength()
 
           // Set the stroke dasharray and dashoffset
-          ctx.element.attr({
+          lineCtx.element.attr({
             'stroke-dasharray': `${length}px ${length}px`,
             'stroke-dashoffset': `${length}px`,
           })
 
           // Animate the stroke dashoffset to 0
-          ctx.element.animate({
+          lineCtx.element.animate({
             'stroke-dashoffset': {
               begin,
               dur: duration,
@@ -42,67 +48,72 @@ export default function useChartist() {
           }, false)
 
           // Clean up the dash attributes after it finishes
-          const total = delay + duration + (stagger ? stagger * (ctx.seriesIndex ?? 0) : 0)
+          const total = delay + duration + (stagger ? stagger * (lineCtx.seriesIndex ?? 0) : 0)
 
           window.setTimeout(() => {
-            ctx.element.attr({
-              'stroke-dasharray': null,
-              'stroke-dashoffset': null,
+            lineCtx.element.attr({
+              'stroke-dasharray': undefined,
+              'stroke-dashoffset': undefined,
             })
           }, total + 30)
         }
 
         // Animation for area charts
         if (animateArea && ctx.type === 'area') {
-          ctx.element.animate({
+          const areaCtx = ctx as AreaDrawEvent
+
+          areaCtx.element.animate({
             // eslint-disable-next-line id-length -- SVG path attribute
             d: {
               begin,
               dur: duration,
               easing,
               fill: 'freeze',
-              from: ctx.path
+              from: areaCtx.path
                 .clone()
                 .scale(1, 0)
-                .translate(0, ctx.chartRect.height())
+                .translate(0, areaCtx.chartRect.height())
                 .stringify(),
-              to: ctx.path.stringify(),
+              to: areaCtx.path.stringify(),
             },
           }, false)
         }
 
         // Animation for bar charts
         if (ctx.type === 'bar') {
-          const horizontal = !!chart.options?.horizontalBars
+          const barCtx = ctx as BarDrawEvent
+          // Access private options property via type assertion
+          const chartOptions = (chart as unknown as { options?: Options & Partial<BarChartOptions> }).options
+          const horizontal = !!(chartOptions as BarChartOptions | undefined)?.horizontalBars
 
           // For vertical bars, y1 is baseline, y2 is top. For horizontal, x1 is baseline, x2 is end.
-          const from = horizontal ? ctx.x1 : ctx.y1
-          const to = horizontal ? ctx.x2 : ctx.y2
+          const from = horizontal ? barCtx.x1 : barCtx.y1
+          const to = horizontal ? barCtx.x2 : barCtx.y2
 
           // Start collapsed at baseline
           if (horizontal) {
-            ctx.element.attr({ x2: from })
-            ctx.element.animate({
+            barCtx.element.attr({ x2: from })
+            barCtx.element.animate({
               x2: {
                 begin,
                 dur: duration,
                 easing,
                 fill: 'freeze',
-                from,
-                to,
+                from: String(from),
+                to: String(to),
               },
             }, false)
           }
           else {
-            ctx.element.attr({ y2: from })
-            ctx.element.animate({
+            barCtx.element.attr({ y2: from })
+            barCtx.element.animate({
               y2: {
                 begin,
                 dur: duration,
                 easing,
                 fill: 'freeze',
-                from,
-                to,
+                from: String(from),
+                to: String(to),
               },
             }, false)
           }

package/app/types/fields.d.ts

@@ -46,7 +46,7 @@ export interface FieldInput {
   lowercaseOnly?: boolean
   max?: number
   min?: number
-  modelValue?: string
+  modelValue: string
   placeholder?: string
   required?: boolean
   size?: FieldSize
@@ -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/app/types/global.d.ts

@@ -5,7 +5,7 @@ import type * as Fields from './fields'
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     vHotkey?: Record<string, (event?: KeyboardEvent | MouseEvent) => void>
-    vTooltip?: Record<string, any> | string
+    vTooltip?: Record<string, unknown> | string
   }
 }
 

package/nuxt.config.ts

@@ -25,7 +25,7 @@ export default defineNuxtConfig({
     },
   },
 
-  // --> COMPONENTS, CSS, MODULES & PLUGINS <--
+  // --> COMPONENTS, CSS & MODULES <--
 
   components: [
     {
@@ -116,8 +116,8 @@ export default defineNuxtConfig({
 
   unocss: {
     nuxtLayers: true,
-    presets: uno.presets as any,
-    rules: uno.rules as any,
+    presets: uno.presets,
+    rules: uno.rules,
     theme: uno.theme,
   },
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.71",
+  "version": "0.1.73",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -34,7 +34,6 @@
     "@nuxtjs/robots": "5.5.6",
     "@nuxtjs/sitemap": "7.4.7",
     "@pinia/nuxt": "0.11.2",
-    "@types/chartist": "1.0.4",
     "@unocss/nuxt": "66.5.4",
     "@unocss/reset": "66.5.10",
     "@vuelidate/core": "2.0.3",
@@ -55,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",

package/uno.config.ts

@@ -1,6 +1,7 @@
+import type { Preset } from 'unocss'
 import { defineConfig, presetWind3 } from 'unocss'
 
-export const presets = [presetWind3()]
+export const presets: Preset[] = [presetWind3()]
 
 export const rules: Array<[string, Record<string, string>]> = [
   [
@@ -185,7 +186,7 @@ export const theme = {
 }
 
 export default defineConfig({
-  presets: [presetWind3()] as any,
+  presets,
   rules,
   theme,
 })