@saasmakers/ui 1.4.43 → 1.4.44

package/app/components/bases/BaseAlert.vue

@@ -21,7 +21,6 @@ defineSlots<{
 
 const { t } = useI18n()
 const { getIcon } = useLayerIcons()
-
 const isClosed = ref(false)
 
 const buttonColor = computed<BaseColor>(() => {

package/app/components/bases/BaseAvatar.vue

@@ -23,12 +23,10 @@ defineSlots<{
 }>()
 
 const { createToast } = useToasts()
-
 const error = ref(false)
 const fileInput = ref<HTMLInputElement>()
 const hovered = ref(false)
 const loaded = ref(false)
-
 const { t } = useI18n()
 
 const isClickable = computed(() => {
@@ -40,7 +38,10 @@ function onAvatarSelected(event: Event) {
 
   if (file) {
     if (props.maxSizeMb && file.size > props.maxSizeMb * 1024 * 1024) {
-      return createToast(t('fileSizeTooLarge', { maxSizeMb: props.maxSizeMb }), 'error')
+      return createToast({
+        message: t('fileSizeTooLarge', { maxSizeMb: props.maxSizeMb }),
+        status: 'error',
+      })
     }
 
     emit('avatarSelected', event, file)

package/app/components/bases/BaseButton.vue

@@ -32,7 +32,6 @@ defineSlots<{
 }>()
 
 const confirming = ref(false)
-
 const { t } = useI18n()
 
 function onClick(event: MouseEvent) {

package/app/components/bases/BaseIcon.vue

@@ -25,7 +25,6 @@ const emit = defineEmits<{
 }>()
 
 const confirming = ref(false)
-
 const { t } = useI18n()
 const { getIcon } = useLayerIcons()
 

package/app/components/bases/BaseOverlay.vue

@@ -45,7 +45,6 @@ function onKeyDown(event: KeyboardEvent) {
 
 onKeyStroke('Escape', (event) => {
   event.preventDefault()
-
   onClose(event)
 })
 </script>

package/app/components/bases/BaseQuote.vue

@@ -30,7 +30,6 @@ defineSlots<{
 const { locale, t } = useI18n()
 const { translatedContent } = useTranslation(useSlots(), locale)
 const { getIcon } = useLayerIcons()
-
 const closed = ref(false)
 
 const finalBackground = computed(() => {

package/app/components/bases/BaseTag.vue

@@ -37,9 +37,7 @@ defineSlots<{
 }>()
 
 const { getIcon } = useLayerIcons()
-
 const hovered = ref(false)
-
 const form = reactive({ name: '' })
 
 onBeforeMount(() => {

package/app/components/bases/BaseTags.vue

@@ -28,13 +28,11 @@ const emit = defineEmits<{
 }>()
 
 const modelValue = defineModel<BaseTags['modelValue']>({ default: () => [] })
-
 const keyForTagCreation = ref(Date.now())
 const keyForTagUpdate = ref(Date.now())
 const root = ref<HTMLDivElement>()
 const showingAllTags = ref(false)
 const showingTagCreationField = ref(false)
-
 const { t } = useI18n()
 const { getIcon } = useLayerIcons()
 
@@ -85,7 +83,6 @@ function onShowTagField() {
   if (!showingTagCreationField.value) {
     showingTagCreationField.value = true
 
-    // Focus contenteditable
     nextTick(() => {
       const element = root.value?.querySelector<HTMLInputElement>('input[type="text"]')
 
@@ -104,6 +101,7 @@ function onTagClick(event: MouseEvent, tagId?: number | string) {
     }
     else if (props.selectableUnique) {
       value = [tagId]
+
       emit('attach', event, tagId)
     }
     else {

package/app/components/bases/BaseText.vue

@@ -28,7 +28,6 @@ defineSlots<{
 }>()
 
 const showAll = ref(false)
-
 const { t } = useI18n()
 
 const finalText = computed(() => {

package/app/components/fields/FieldAvatar.vue

@@ -26,7 +26,6 @@ const emit = defineEmits<{
 
 const { createToast } = useToasts()
 const { t } = useI18n()
-
 const fileInput = ref<HTMLInputElement>()
 const id = useId()
 
@@ -41,7 +40,11 @@ function onAvatarChange(event: Event) {
   }
 
   if (props.maxSizeMb && file.size > props.maxSizeMb * 1024 * 1024) {
-    createToast(t('fileSizeTooLarge', { maxSizeMb: props.maxSizeMb }), 'error')
+    createToast({
+      message: t('fileSizeTooLarge', { maxSizeMb: props.maxSizeMb }),
+      status: 'error',
+    })
+
     return
   }
 

package/app/components/fields/FieldCheckbox.vue

@@ -18,7 +18,6 @@ withDefaults(defineProps<Omit<FieldCheckbox, 'modelValue'>>(), {
 })
 
 const id = useId()
-
 const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
 </script>
 

package/app/components/fields/FieldDays.vue

@@ -8,7 +8,6 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-
 const modelValue = defineModel<FieldDays['modelValue']>({ default: () => [] })
 
 const daysToDisplay = computed(() => {

package/app/components/fields/FieldEmojis.vue

@@ -11,9 +11,7 @@ const emit = defineEmits<{
 
 const { locale, t } = useI18n()
 const { normalizeText } = useLayerUtils()
-
 const modelValue = defineModel<FieldEmojis['modelValue']>({ default: '' })
-
 const searchRaw = ref('')
 const searchQuery = refDebounced(searchRaw, 250)
 

package/app/components/fields/FieldInput.vue

@@ -43,11 +43,8 @@ defineSlots<{
 }>()
 
 const id = useId()
-
 const modelValue = defineModel<FieldInput['modelValue']>({ default: '' })
-
 const input = ref<HTMLInputElement>()
-
 const { isDesktopBrowser } = useDevice()
 
 onMounted(() => {

package/app/components/fields/FieldMessage.vue

@@ -18,6 +18,7 @@ const validationMessage = computed(() => {
   }
 
   const firstError = props.validation.$errors[0]
+
   if (firstError) {
     return unref(firstError.$message)
   }

package/app/components/fields/FieldSelect.vue

@@ -36,12 +36,9 @@ const { fadeIn } = useMotion()
 const { normalizeText } = useLayerUtils()
 const { t } = useI18n()
 const id = useId()
-
 const modelValue = defineModel<FieldSelect['modelValue']>({ default: '' })
-
 const opened = ref(false)
 const searchRaw = ref('')
-
 const searchInput = ref<InstanceType<typeof FieldInput>>()
 
 const computedColumns = computed(() => {
@@ -55,7 +52,6 @@ const computedColumns = computed(() => {
 const computedOptions = computed(() => {
   const options: FieldSelectOption[] = []
 
-  // Add index to each option
   if (props.columns.length > 0) {
     for (const column of props.columns) {
       for (const columnOption of column.options) {
@@ -152,8 +148,7 @@ function onMouseLeaveOrBlur() {
 
 function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
   if (!props.disabled) {
-    // Check that the option is not currently selected
-    if ((selectedOption.value || {}).value === option.value) {
+    if (selectedOption.value?.value === option.value) {
       reset()
     }
     else {
@@ -348,8 +343,8 @@ function selectOption(event: MouseEvent, value: string) {
                 :class="{
                   'border-b border-gray-200 dark:border-gray-800 p-3 hover:bg-gray-100 dark:hover:bg-gray-800 last:border-b-0': computedColumns.length < 2,
                   'px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-800 last:mb-2': computedColumns.length >= 2,
-                  'font-medium underline': selectedOption && option.value === selectedOption.value,
-                  'text-gray-900 dark:text-gray-100': selectedOption && option.value === selectedOption.value,
+                  'font-medium underline': option.value === selectedOption?.value,
+                  'text-gray-900 dark:text-gray-100': option.value === selectedOption?.value,
                   'bg-white dark:bg-gray-900': selectedOption && option.value !== selectedOption.value,
                 }"
                 role="button"

package/app/components/fields/FieldTextarea.vue

@@ -27,11 +27,8 @@ const emit = defineEmits<{
 }>()
 
 const id = useId()
-
 const modelValue = defineModel<FieldTextarea['modelValue']>({ default: '' })
-
 const textarea = ref<HTMLTextAreaElement>()
-
 const { isDesktopBrowser } = useDevice()
 
 onMounted(() => {

package/app/components/fields/FieldTime.vue

@@ -21,9 +21,7 @@ const emit = defineEmits<{
 
 const { getIcon } = useLayerIcons()
 const id = useId()
-
 const modelValue = defineModel<FieldTime['modelValue']>({ default: '' })
-
 const inputRef = ref<HTMLInputElement>()
 
 function onContainerClick() {

package/app/composables/useChartist.ts

@@ -80,10 +80,12 @@ export default function useChartist() {
         // Animation for bar charts
         if (ctx.type === 'bar') {
           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.
@@ -93,6 +95,7 @@ export default function useChartist() {
           // Start collapsed at baseline
           if (horizontal) {
             barCtx.element.attr({ x2: from })
+
             barCtx.element.animate({
               x2: {
                 begin,
@@ -106,6 +109,7 @@ export default function useChartist() {
           }
           else {
             barCtx.element.attr({ y2: from })
+
             barCtx.element.animate({
               y2: {
                 begin,

package/app/composables/useToasts.ts

@@ -13,43 +13,46 @@ export default function useToast() {
     }
 
     dismissTimers.clear()
+
     toasts.value = []
   }
 
-  const createToast = (
-    message: string,
-    status: BaseStatus = 'success',
-    i18nParams?: Record<string, number | string>,
-    action?: BaseToastAction,
-  ) => {
+  const createToast = (params: {
+    action?: BaseToastAction
+    i18nParams?: Record<string, number | string>
+    message: string
+    status?: BaseStatus
+  }) => {
     if (!import.meta.client) {
       return
     }
 
-    const text = message.includes(' ')
-      ? message
-      : nuxtApp.$i18n.t(`toasts.${message}`, i18nParams ?? {})
+    const text = params.message.includes(' ')
+      ? params.message
+      : nuxtApp.$i18n.t(`toasts.${params.message}`, params.i18nParams ?? {})
 
-    const fingerprint = getFingerprint(status, text, action?.label)
+    const fingerprint = getFingerprint(params.status, text, params.action?.label)
     const existingToast = toasts.value.find(item => getFingerprint(item.status, item.text, item.action?.label) === fingerprint)
 
     if (existingToast) {
-      if (action) {
-        existingToast.action = action
+      if (params.action) {
+        existingToast.action = params.action
       }
+
       scheduleDismiss(existingToast.id, !!existingToast.action)
+
       return
     }
 
     const toast: BaseToast = {
-      action,
+      action: params.action,
       id: crypto.randomUUID(),
-      status,
+      status: params.status,
       text,
     }
 
     toasts.value.push(toast)
-    scheduleDismiss(toast.id, !!action)
+    scheduleDismiss(toast.id, !!params.action)
   }
 
   return {
@@ -62,6 +65,7 @@ export default function useToast() {
 
 function clearDismissTimer(toastId: string) {
   const timer = dismissTimers.get(toastId)
+
   if (timer !== undefined) {
     clearTimeout(timer)
     dismissTimers.delete(toastId)
@@ -73,6 +77,7 @@ function closeToast(toastId: string) {
     return
 
   clearDismissTimer(toastId)
+
   toasts.value = toasts.value.filter(item => item.id !== toastId)
 }
 

package/nuxt.config.ts

@@ -1,3 +1,4 @@
+import { localeCodes } from '@saasmakers/shared'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { defineNuxtConfig } from 'nuxt/config'
@@ -71,7 +72,7 @@ export default defineNuxtConfig({
 
   i18n: {
     defaultLocale: 'en',
-    locales: ['de', 'en', 'es', 'fr', 'it', 'ja', 'ko', 'nl', 'pl', 'pt', 'pt-BR', 'id', 'vi'],
+    locales: localeCodes,
     strategy: 'prefix_except_default',
 
     detectBrowserLanguage: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.4.43",
+  "version": "1.4.44",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -51,10 +51,10 @@
   "devDependencies": {
     "nuxt": "4.3.1",
     "typescript": "5.9.3",
-    "@saasmakers/shared": "0.2.5"
+    "@saasmakers/shared": "0.2.8"
   },
   "peerDependencies": {
-    "@saasmakers/shared": "^0.2.0",
+    "@saasmakers/shared": "^0.2.8",
     "nuxt": "^4.3.1"
   },
   "publishConfig": {