Better errors

docs/.vitepress/components/examples/form/Basic.vue

@@ -24,7 +24,8 @@
     <FormField
       v-slot="{ componentField }"
       required
-      rules="required"
+      error-label="Term of use"
+      rules="checked"
       name="accept"
     >
       <Checkbox label="I accept the terms of use." v-bind="componentField" />
@@ -42,6 +43,9 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { defineRule, useForm } from 'vee-validate'
 import { required, email, min } from '@vee-validate/rules'
 
+defineRule('checked', (value: boolean) => {
+  return !value ? 'This value should be checked.' : true
+})
 defineRule('required', required)
 defineRule('email', email)
 defineRule('min', min)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "personizely-ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Personizely UI is a Vue.js UI library with a simple API, based on Radix Vue, inspired by shadcn-vue and Keen UI.",
   "type": "module",
   "main": "./dist/personizely-ui.js",

src/components/ui/form/FormField.vue

@@ -1,5 +1,10 @@
 <template>
-  <Field v-slot="{ componentField, errors }" :name="name" :rules="rules">
+  <Field
+    v-slot="{ componentField, errors }"
+    :name="name"
+    :rules="rules"
+    :label="errorLabel || label"
+  >
     <div :class="cn('flex flex-col gap-2 group', props.class)">
       <FormLabel v-if="$slots.label || label" :class="required ? 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-40' : ''">
         <slot name="label">
@@ -41,6 +46,7 @@ const props = withDefaults(defineProps<{
   name: string
   description?: string
   label?: string
+  errorLabel?: string
   required?: boolean
   rules?: string
 }>(), {