@saasmakers/ui 1.0.4 → 1.0.6

package/app/components/bases/BaseButton.vue

@@ -56,7 +56,7 @@ function onClick(event: MouseEvent) {
 <template>
   <component
     :is="to ? NuxtLinkLocale : 'button'"
-    class="relative inline-block select-none appearance-none border focus:outline-none"
+    class="relative inline-block select-none appearance-none border focus-visible:outline-none"
     :class="{
       'inline-block': !circular,
       'flex items-center justify-center': circular,
@@ -141,43 +141,43 @@ function onClick(event: MouseEvent) {
 <i18n lang="json">
 {
   "de": {
-    "confirm": "Bestätigen"
+    "confirm": "Bestätigen?"
   },
   "en": {
-    "confirm": "Confirm"
+    "confirm": "Confirm?"
   },
   "es": {
-    "confirm": "Confirmar"
+    "confirm": "¿Confirmar?"
   },
   "fr": {
-    "confirm": "Confirmer"
+    "confirm": "Confirmer ?"
   },
   "it": {
-    "confirm": "Conferma"
+    "confirm": "Confermare?"
   },
   "ja": {
-    "confirm": "確認"
+    "confirm": "確認しますか？"
   },
   "ko": {
-    "confirm": "확인"
+    "confirm": "확인할까요?"
   },
   "nl": {
-    "confirm": "Bevestigen"
+    "confirm": "Bevestigen?"
   },
   "pl": {
-    "confirm": "Potwierdź"
+    "confirm": "Potwierdzić?"
   },
   "pt": {
-    "confirm": "Confirmar"
+    "confirm": "Confirmar?"
   },
   "pt-BR": {
-    "confirm": "Confirmar"
+    "confirm": "Confirmar?"
   },
   "id": {
-    "confirm": "Konfirmasi"
+    "confirm": "Konfirmasi?"
   },
   "vi": {
-    "confirm": "Xác nhận"
+    "confirm": "Xác nhận?"
   }
 }
 </i18n>

package/app/components/bases/BaseIcon.vue

@@ -163,43 +163,43 @@ function onKeyDown(event: KeyboardEvent) {
 <i18n lang="json">
 {
   "de": {
-    "confirm": "Bestätigen"
+    "confirm": "Bestätigen?"
   },
   "en": {
-    "confirm": "Confirm"
+    "confirm": "Confirm?"
   },
   "es": {
-    "confirm": "Confirmar"
+    "confirm": "¿Confirmar?"
   },
   "fr": {
-    "confirm": "Confirmer"
+    "confirm": "Confirmer ?"
   },
   "it": {
-    "confirm": "Conferma"
+    "confirm": "Confermare?"
   },
   "ja": {
-    "confirm": "確認"
+    "confirm": "確認しますか？"
   },
   "ko": {
-    "confirm": "확인"
+    "confirm": "확인할까요?"
   },
   "nl": {
-    "confirm": "Bevestigen"
+    "confirm": "Bevestigen?"
   },
   "pl": {
-    "confirm": "Potwierdź"
+    "confirm": "Potwierdzić?"
   },
   "pt": {
-    "confirm": "Confirmar"
+    "confirm": "Confirmar?"
   },
   "pt-BR": {
-    "confirm": "Confirmar"
+    "confirm": "Confirmar?"
   },
   "id": {
-    "confirm": "Konfirmasi"
+    "confirm": "Konfirmasi?"
   },
   "vi": {
-    "confirm": "Xác nhận"
+    "confirm": "Xác nhận?"
   }
 }
 </i18n>

package/app/components/fields/FieldCheckbox.vue

@@ -35,7 +35,7 @@ const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
         v-model="modelValue"
         class="border border-gray-300 rounded-lg accent-indigo-700 transition-shadow flex-initial dark:border-gray-700"
         :class="{
-          'cursor-pointer hover:border-gray-400 dark:hover:border-gray-600 focus:border-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500/40 dark:focus:border-gray-500': !disabled,
+          'cursor-pointer hover:border-gray-400 dark:hover:border-gray-600 focus-visible:border-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500/40 dark:focus-visible:border-gray-500': !disabled,
           'field-disabled': disabled,
           'h-3.5 w-3.5': size === 'xs',
           'h-4 w-4': size === 'sm',

package/app/components/fields/FieldMessage.vue

@@ -9,72 +9,80 @@ const props = withDefaults(defineProps<FieldMessage>(), {
   validation: undefined,
 })
 
-// Composable
 const { t } = useI18n()
 
 const validationMessage = computed(() => {
-  // Available rules
-  // https://vuelidate.js.org/#sub-builtin-validators
-  if (props.validation && props.validation.$dirty) {
-    // Required, Required If, Required Unless
-    switch (false) {
-      case props.validation.alpha: {
-        return t('alpha')
-      }
-      case props.validation.alphaNum: {
-        return t('alphaNum')
-      }
-      case props.validation.between: {
-        return t('between', {
-          max: props.validation.$params.between.max,
-          min: props.validation.$params.between.min,
-        })
-      }
-      case props.validation.decimal: {
-        return t('decimal')
-      }
-      case props.validation.email: {
-        return t('email')
-      }
-      case props.validation.integer: {
-        return t('integer')
-      }
-      case props.validation.ipAddress: {
-        return t('ipAddress')
-      }
-      case props.validation.macAddress: {
-        return t('maxAddress')
-      }
-      case props.validation.maxLength: {
-        return t('maxLength', { max: props.validation.$params.maxLength.max })
-      }
-      case props.validation.maxValue: {
-        return t('maxValue', { max: props.validation.$params.maxValue.max })
-      }
-      case props.validation.minLength: {
-        return t('minLength', { min: props.validation.$params.minLength.min })
-      }
-      case props.validation.minValue: {
-        return t('minValue', { min: props.validation.$params.minValue.min })
-      }
-      case props.validation.numeric: {
-        return t('numeric')
-      }
-      case props.validation.required:
-      case props.validation.requiredIf:
-      case props.validation.requiredUnless: {
-        return t('required')
-      }
-      case props.validation.sameAs: {
-        return t('sameAs', { field: props.validation.$params.sameAs.eq })
-      }
-      case props.validation.url: {
-        return t('url')
-      }
-      default: {
-        if (props.validation.$invalid === true) {
-          return t('invalid')
-        }
+  // Available rules: https://vuelidate.js.org/#sub-builtin-validators
+  if (!props.validation?.$dirty) {
+    return ''
+  }
+
+  const firstError = props.validation.$errors[0]
+  if (firstError) {
+    return unref(firstError.$message)
+  }
+
+  switch (false) {
+    case ruleIsInvalid(props.validation.alpha): {
+      return t('alpha')
+    }
+    case ruleIsInvalid(props.validation.alphaNum): {
+      return t('alphaNum')
+    }
+    case ruleIsInvalid(props.validation.between): {
+      return t('between', {
+        max: props.validation.between.$params.max,
+        min: props.validation.between.$params.min,
+      })
+    }
+    case ruleIsInvalid(props.validation.decimal): {
+      return t('decimal')
+    }
+    case ruleIsInvalid(props.validation.email): {
+      return t('email')
+    }
+    case ruleIsInvalid(props.validation.integer): {
+      return t('integer')
+    }
+    case ruleIsInvalid(props.validation.ipAddress): {
+      return t('ipAddress')
+    }
+    case ruleIsInvalid(props.validation.macAddress): {
+      return t('macAddress')
+    }
+    case ruleIsInvalid(props.validation.maxLength): {
+      return t('maxLength', { max: props.validation.maxLength.$params.max })
+    }
+    case ruleIsInvalid(props.validation.maxValue): {
+      return t('maxValue', { max: props.validation.maxValue.$params.max })
+    }
+    case ruleIsInvalid(props.validation.minLength): {
+      return t('minLength', { min: props.validation.minLength.$params.min })
+    }
+    case ruleIsInvalid(props.validation.minValue): {
+      return t('minValue', { min: props.validation.minValue.$params.min })
+    }
+    case ruleIsInvalid(props.validation.numeric): {
+      return t('numeric')
+    }
+    case ruleIsInvalid(props.validation.required):
+    case ruleIsInvalid(props.validation.requiredIf):
+    case ruleIsInvalid(props.validation.requiredUnless): {
+      return t('required')
+    }
+    case ruleIsInvalid(props.validation.sameAs): {
+      return t('sameAs', {
+        field: props.validation.sameAs?.$params?.otherName
+          ?? props.validation.$params?.sameAs?.eq
+          ?? '',
+      })
+    }
+    case ruleIsInvalid(props.validation.url): {
+      return t('url')
+    }
+    default: {
+      if (props.validation.$invalid === true) {
+        return t('invalid')
       }
     }
   }
@@ -97,13 +105,28 @@ const text = computed<BaseTextText>(() => {
     return ''
   }
 })
+
+function ruleIsInvalid(rule: unknown) {
+  if (rule === false) {
+    return true
+  }
+
+  if (rule && typeof rule === 'object' && '$invalid' in rule) {
+    return (rule as {
+      $invalid: boolean
+    }).$invalid
+  }
+
+  return false
+}
 </script>
 
 <template>
   <BaseIcon
     v-if="text"
-    class="field-disabled text-left tracking-tighter"
+    class="text-left tracking-tighter"
     :class="{
+      'field-disabled': disabled,
       'mt-2': size === 'xs',
       'mt-2.5': size === 'sm',
       'mt-3': size === 'base',
@@ -189,7 +212,7 @@ const text = computed<BaseTextText>(() => {
     "minLength": "La valeur est trop petite (min: {min})",
     "minValue": "La valeur minimum acceptée: {min}",
     "numeric": "La valeur n'accepte que des chiffres",
-    "required": "La valeur est requise",
+    "required": "Ce champ est requis",
     "sameAs": "La valeur ne correspond pas à: {field}",
     "url": "La valeur n'est pas une URL valide"
   },

package/app/components/fields/FieldSelect.vue

@@ -174,7 +174,7 @@ function selectOption(event: MouseEvent, value: string) {
             'border-0': border === 'none',
             'border-gray-400 dark:border-gray-600': opened,
             'hover:border-gray-300 dark:hover:border-gray-700': !opened && !disabled,
-            'focus:border-gray-400 dark:focus:border-gray-600': !disabled,
+            'focus-visible:border-gray-400 dark:focus-visible:border-gray-600': !disabled,
             'px-3': padding,
             'text-2xs h-8': size === 'xs',
             'text-xs h-10': size === 'sm',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",