formkit / formkit Goto Github PK

View Code? Open in Web Editor NEW

4.0K 31.0 152.0 7.23 MB

Vue Forms ⚡️ Supercharged

Home Page: https://formkit.com

License: MIT License

JavaScript 3.05% TypeScript 94.22% CSS 2.07% Vue 0.46% HTML 0.19% Shell 0.01%

forms vue validation form-generation

formkit's Introduction

Documentation website

FormKit

Vue 3 form development. 10x faster.

FormKit is a form-authoring framework for Vue developers that makes building high quality production-ready forms 10x faster. It is easy-to-learn and ships with production-ready scaffolding like inputs, forms, submission and error handling, and validation rules. To learn more check out the documentation website at: formkit.com.

Key features
☝️ Comprehensive package FormKit is an all-in-one form-authoring framework with input scaffolding (labels, help text, etc.), validation, form UI & styling, error handling, generation, a11y, i18n, and more!	😎 Developer happiness Forms are everywhere, yet surprisingly tedious to author — well, not anymore. FormKit provides a powerful and flexible API to developers that makes complex form creation a breeze.
🎯 Validation built in Ridiculously easy validation out-of-the-box to handle 95% of use-cases. Help text, validation rules, and validation messages are simple props. Need more? You can add custom validation rules too.	⚡️ Blazing-fast Performance FormKit can handle the most demanding forms — wizards, multi-step, deeply nested repeating groups, and more.
🔌 Plugin system Extend FormKit's functionality or reuse custom inputs, validation rules and messages across projects by tapping into the plugin system. Make your plugin open source to share with others!	✨ Generate forms Generate an entire form from a JSON-compatible schema. Schema allows you to render complex forms from JSON with conditional rendering, logic, dynamic data, groups, wrappers, HTML elements, and custom components.
🎨 Robust Theming FormKit works easily alongside your favorite UI frameworks like Bootstrap and utility-class tools like Tailwind. With numerous ways to modify classes and DOM structure, integrating FormKit plays nicely with any frontend.	🌐 Internationalization FormKit is made for all! Thanks to the FormKit community, FormKit ships with support for many languages. Don't see your language? Contribute one with our locale builder.

Contributing

Thank you for your willingness to contribute to this free and open source project! When contributing, consider first discussing your desired change with the core team via GitHub issues, Discord, or other method.

Contributors

This project exists thanks to all the people who volunteer their time to contribute!

License

MIT

formkit's People

Contributors

Stargazers

Watchers

Forkers

oanhnn sidearmsports lennartzellmer nils-kt tusdz shahabbasian stewartmuhanuzi lavolpecheprogramma kavallo bwp618 fengweijp basarozcan productinfo pop123123123 geekcheng wormgirl arjendejong12 jmalatia srijanlama oriog antbrl ironytr halilertekin suryatmodulus skchronicles elmassimo fabriciomoeller xen0byte antonlinderer razvanposobescu tmm1 sadobass mkuitra sheremet-va dolsup t-zahil aresofficial cuulee divzoon raphaelbernhart jeni1616 nightdev2790 erssebaggala selemondev danielroe chz shaci ankur198 pitcher-maarten the14thsky bymykel weiplanet tong0711 dominikklein aryeh bordagabor chiquyet199 willer-613 jerrebm phbdemorais markxuxiao abbijamal sunxyw kubacode gg-big-org nishavijai bellyfat ali-hazan dickri8 gfenn08 it810 kimamov lotfi-a fantafi ap-slalombuild developer-experience-hub fuzi1996 lekesiz shakiroye cap-go g1eny0ung andrew-boyd catalpainternational logikonline tpwd abaso007 next1981 assagroup assagroup tyrozhang assagroup matthauszillig ajaythewizard userquin reconbug jesusantguerrero saomcol jorgee97 benlind joaopedroas51

formkit's Issues

i18n: Chinese Simplified (zh-Hans) translation

I’ve completed the undefined language translation.

import { FormKitValidationMessages } from '@formkit/validation'

/**
 * Here we can import additional helper functions to assist in formatting our
 * language. Feel free to add additional helper methods to libs/formats if it
 * assists in creating good validation messages for your locale.
 */
import { sentence as s, list, date } from '../formatters'
import { FormKitLocaleMessages } from '../i18n'

/**
 * Standard language for interface features.
 * @public
 */
export const ui: FormKitLocaleMessages = {
  /**
   * Shown when a button to remove items is visible.
   */
  remove: '移除',
  /**
   * Shown when all fields are not filled out correctly.
   */
  incomplete: '对不起，有些字段未被正确填写',
  /**
   * Shown in a button inside a form to submit the form.
   */
  submit: '提交',
}

/**
 * These are all the possible strings that pertain to validation messages.
 * @public
 */
export const validation: FormKitValidationMessages = {
  /**
   * The value is not an accepted value.
   * @see {@link https://docs.formkit.com/essentials/validation#accepted}
   */
  accepted({ name }): string {
    /* <i18n case="Shown when the user-provided value is not a valid 'accepted' value."> */
    return `请接受${name}`
    /* </i18n> */
  },

  /**
   * The date is not after
   * @see {@link https://docs.formkit.com/essentials/validation#date-after}
   */
  date_after({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not after the date supplied to the rule."> */
      return `${s(name)}必须晚于${date(args[0])}`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not after today's date, since no date was supplied to the rule."> */
    return `${s(name)}必须是未来的日期`
    /* </i18n> */
  },

  /**
   * The value is not a letter.
   * @see {@link https://docs.formkit.com/essentials/validation#alpha}
   */
  alpha({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphabetical characters."> */
    return `${s(name)}仅能包含字母字符`
    /* </i18n> */
  },

  /**
   * The value is not alphanumeric
   * @see {@link https://docs.formkit.com/essentials/validation#alphanumeric}
   */
  alphanumeric({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphanumeric characters."> */
    return `${s(name)}仅能包含字母和数字`
    /* </i18n> */
  },

  /**
   * The date is not before
   * @see {@link https://docs.formkit.com/essentials/validation#date-before}
   */
  date_before({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not before the date supplied to the rule."> */
      return `${s(name)}必须早于${date(args[0])}`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not before today's date, since no date was supplied to the rule."> */
    return `${s(name)}必须是过去的日期`
    /* </i18n> */
  },

  /**
   * The value is not between two numbers
   * @see {@link https://docs.formkit.com/essentials/validation#between}
   */
  between({ name, args }) {
    if (isNaN(args[0]) || isNaN(args[1])) {
      /* <i18n case="Shown when any of the arguments supplied to the rule were not a number."> */
      return `该字段未被正确设置而无法被提交`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is not between two numbers."> */
    return `${s(name)}必须在${args[0]}和${args[1]}之间`
    /* </i18n> */
  },

  /**
   * The confirmation field does not match
   * @see {@link https://docs.formkit.com/essentials/validation#confirm}
   */
  confirm({ name }) {
    /* <i18n case="Shown when the user-provided value does not equal the value of the matched input."> */
    return `${s(name)}不匹配`
    /* </i18n> */
  },

  /**
   * The value is not a valid date
   * @see {@link https://docs.formkit.com/essentials/validation#date-format}
   */
  date_format({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date does not satisfy the date format supplied to the rule."> */
      return `${s(name)}不是一个合法日期，请使用此格式${args[0]}`
      /* </i18n> */
    }
    /* <i18n case="Shown when no date argument was supplied to the rule."> */
    return '该字段未被正确设置而无法被提交'
    /* </i18n> */
  },

  /**
   * Is not within expected date range
   * @see {@link https://docs.formkit.com/essentials/validation#date-between}
   */
  date_between({ name, args }) {
    /* <i18n case="Shown when the user-provided date is not between the start and end dates supplied to the rule. "> */
    return `${s(name)}必须在${date(args[0])}和${date(args[1])}之间`
    /* </i18n> */
  },

  /**
   * Shown when the user-provided value is not a valid email address.
   * @see {@link https://docs.formkit.com/essentials/validation#email}
   */
  email: '请输入一个合法的电子邮件地址',

  /**
   * Does not end with the specified value
   * @see {@link https://docs.formkit.com/essentials/validation#ends-with}
   */
  ends_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not end with the substring supplied to the rule."> */
    return `${s(name)}并未以${list(args)}结尾`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#is}
   */
  is({ name }) {
    /* <i18n case="Shown when the user-provided value is not one of the values supplied to the rule."> */
    return `${s(name)}不是一个允许值`
    /* </i18n> */
  },

  /**
   * Does not match specified length
   * @see {@link https://docs.formkit.com/essentials/validation#length}
   */
  length({ name, args: [first = 0, second = Infinity] }) {
    const min = first <= second ? first : second
    const max = second >= first ? second : first
    if (min == 1 && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is not at least one character."> */
      return `${s(name)}至少要有一个字符`
      /* </i18n> */
    }
    if (min == 0 && max) {
      /* <i18n case="Shown when first argument supplied to the rule is 0, and the user-provided value is longer than the max (the 2nd argument) supplied to the rule."> */
      return `${s(name)}必须少于或等于${max}个字符`
      /* </i18n> */
    }
    if (min && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is less than the minimum supplied to the rule and there is no maximum supplied to the rule."> */
      return `${s(name)}必须多于或等于${min}个字符`
      /* </i18n> */
    }
    /* <i18n case="Shown when the length of the user-provided value is between the two lengths supplied to the rule."> */
    return `${s(name)}必须有${min}至${max}个字符`
    /* </i18n> */
  },

  /**
   * Value is not a match
   * @see {@link https://docs.formkit.com/essentials/validation#matches}
   */
  matches({ name }) {
    /* <i18n case="Shown when the user-provided value does not match any of the values or RegExp patterns supplied to the rule. "> */
    return `${s(name)}不是一个允许值`
    /* </i18n> */
  },

  /**
   * Exceeds maximum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#max}
   */
  max({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is longer than the max supplied to the rule."> */
      return `${name}不能超过${args[0]}`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is greater than the maximum number supplied to the rule."> */
    return `${s(name)}必须小于或等于${args[0]}`
    /* </i18n> */
  },

  /**
   * The (field-level) value does not match specified mime type
   * @see {@link https://docs.formkit.com/essentials/validation#mime}
   */
  mime({ name, args }) {
    if (!args[0]) {
      /* <i18n case="Shown when no file formats were supplied to the rule."> */
      return '无允许的文件格式'
      /* </i18n> */
    }
    /* <i18n case="Shown when the mime type of user-provided file does not match any mime types supplied to the rule."> */
    return `${s(name)}必须为此类型：${args[0]}`
    /* </i18n> */
  },

  /**
   * Does not fulfill minimum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#min}
   */
  min({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is shorter than the min supplied to the rule."> */
      return `${name}不能少于${args[0]}`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is less than the minimum number supplied to the rule."> */
    return `${s(name)}不能小于${args[0]}`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#not}
   */
  not({ name, node: { value } }) {
    /* <i18n case="Shown when the user-provided value matches one of the values supplied to (and thus disallowed by) the rule."> */
    return `“${value}”不是一个被允许的${name}`
    /* </i18n> */
  },

  /**
   *  Is not a number
   * @see {@link https://docs.formkit.com/essentials/validation#number}
   */
  number({ name }) {
    /* <i18n case="Shown when the user-provided value is not a number."> */
    return `${s(name)}必须是一个数字`
    /* </i18n> */
  },

  /**
   * Required field.
   * @see {@link https://docs.formkit.com/essentials/validation#required}
   */
  required({ name }) {
    /* <i18n case="Shown when a user does not provide a value to a required input."> */
    return `${s(name)}必须填写`
    /* </i18n> */
  },

  /**
   * Does not start with specified value
   * @see {@link https://docs.formkit.com/essentials/validation#starts-with}
   */
  starts_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not start with the substring supplied to the rule."> */
    return `${s(name)}没有以${list(args)}开头`
    /* </i18n> */
  },

  /**
   * Is not a url
   * @see {@link https://docs.formkit.com/essentials/validation#url}
   */
  url() {
    /* <i18n case="Shown when the user-provided value is not a valid url."> */
    return `请包含一个合法的url`
    /* </i18n> */
  },
}

Schema defined inside default slot loses reference to its instanceKey

const data = {
  foo: 'Bar',
}

const schema = [
  {
    $cmp: 'FormKit',
    props: {
      type: 'group',
    },
    children: [
      '$foo'
    ]
]

Will produce an error like:

TypeError: compiledFns[instanceKey] is not a function

This is because children of a component are parsed in the context of the root schema, but the render function is called in the context of the currently rendering component's instance.

i18n: Hebrew (he) translation

I’ve completed the Hebrew language translation.

// Please copy and paste the file your just downloaded here
import { FormKitValidationMessages } from '@formkit/validation'

/**
 * Here we can import additional helper functions to assist in formatting our
 * language. Feel free to add additional helper methods to libs/formats if it
 * assists in creating good validation messages for your locale.
 */
import { sentence as s, list, date } from '../formatters'
import { FormKitLocaleMessages } from '../i18n'

/**
 * Standard language for interface features.
 * @public
 */
export const ui: FormKitLocaleMessages = {
  /**
   * Shown when a button to remove items is visible.
   */
  remove: 'מחק',
  /**
   * Shown when all fields are not filled out correctly.
   */
  incomplete: 'שים לב, לא כל השדות מלאים כראוי.',
  /**
   * Shown in a button inside a form to submit the form.
   */
  submit: 'שלח',
}

/**
 * These are all the possible strings that pertain to validation messages.
 * @public
 */
export const validation: FormKitValidationMessages = {
  /**
   * The value is not an accepted value.
   * @see {@link https://docs.formkit.com/essentials/validation#accepted}
   */
  accepted({ name }): string {
    /* <i18n case="Shown when the user-provided value is not a valid 'accepted' value."> */
    return `אנא אשר את ${name}.`
    /* </i18n> */
  },

  /**
   * The date is not after
   * @see {@link https://docs.formkit.com/essentials/validation#date-after}
   */
  date_after({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not after the date supplied to the rule."> */
      return `${s(name)} חייב להיות אחרי ${date(args[0])}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not after today's date, since no date was supplied to the rule."> */
    return `${s(name)} חייב להיות בעתיד.`
    /* </i18n> */
  },

  /**
   * The value is not a letter.
   * @see {@link https://docs.formkit.com/essentials/validation#alpha}
   */
  alpha({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphabetical characters."> */
    return `${s(name)} חייב להכיל אותיות אלפבת.`
    /* </i18n> */
  },

  /**
   * The value is not alphanumeric
   * @see {@link https://docs.formkit.com/essentials/validation#alphanumeric}
   */
  alphanumeric({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphanumeric characters."> */
    return `${s(name)} יכול להכיל רק מספרים ואותיות.`
    /* </i18n> */
  },

  /**
   * The date is not before
   * @see {@link https://docs.formkit.com/essentials/validation#date-before}
   */
  date_before({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not before the date supplied to the rule."> */
      return `${s(name)} חייב להיות לפני ${date(args[0])}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not before today's date, since no date was supplied to the rule."> */
    return `${s(name)} חייב להיות בעבר`
    /* </i18n> */
  },

  /**
   * The value is not between two numbers
   * @see {@link https://docs.formkit.com/essentials/validation#between}
   */
  between({ name, args }) {
    if (isNaN(args[0]) || isNaN(args[1])) {
      /* <i18n case="Shown when any of the arguments supplied to the rule were not a number."> */
      return `שדה זה לא הוגדר כראוי ולא יכול להישלח.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is not between two numbers."> */
    return `${s(name)} חייב להיות בין ${args[0]} ו-${args[1]}.`
    /* </i18n> */
  },

  /**
   * The confirmation field does not match
   * @see {@link https://docs.formkit.com/essentials/validation#confirm}
   */
  confirm({ name }) {
    /* <i18n case="Shown when the user-provided value does not equal the value of the matched input."> */
    return `${s(name)} לא מתאים.`
    /* </i18n> */
  },

  /**
   * The value is not a valid date
   * @see {@link https://docs.formkit.com/essentials/validation#date-format}
   */
  date_format({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date does not satisfy the date format supplied to the rule."> */
      return `${s(name)} הוא לא תאריך תקין, אנא השתמש בפורמט ${args[0]}`
      /* </i18n> */
    }
    /* <i18n case="Shown when no date argument was supplied to the rule."> */
    return 'שדה זה לא הוגדר כראוי ולא יכול להישלח.'
    /* </i18n> */
  },

  /**
   * Is not within expected date range
   * @see {@link https://docs.formkit.com/essentials/validation#date-between}
   */
  date_between({ name, args }) {
    /* <i18n case="Shown when the user-provided date is not between the start and end dates supplied to the rule. "> */
    return `${s(name)} חייב להיות בין ${date(args[0])} ו- ${date(args[1])}`
    /* </i18n> */
  },

  /**
   * Shown when the user-provided value is not a valid email address.
   * @see {@link https://docs.formkit.com/essentials/validation#email}
   */
  email: 'אנא הקלד אימייל תקין.',

  /**
   * Does not end with the specified value
   * @see {@link https://docs.formkit.com/essentials/validation#ends-with}
   */
  ends_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not end with the substring supplied to the rule."> */
    return `${s(name)} לא מסתיים ב- ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#is}
   */
  is({ name }) {
    /* <i18n case="Shown when the user-provided value is not one of the values supplied to the rule."> */
    return `${s(name)} הוא לא ערך מורשה.`
    /* </i18n> */
  },

  /**
   * Does not match specified length
   * @see {@link https://docs.formkit.com/essentials/validation#length}
   */
  length({ name, args: [first = 0, second = Infinity] }) {
    const min = first <= second ? first : second
    const max = second >= first ? second : first
    if (min == 1 && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is not at least one character."> */
      return `${s(name)} חייב להיות לפחות תו אחד.`
      /* </i18n> */
    }
    if (min == 0 && max) {
      /* <i18n case="Shown when first argument supplied to the rule is 0, and the user-provided value is longer than the max (the 2nd argument) supplied to the rule."> */
      return `${s(name)} חייב להיות פחות או שווה ל- ${max} תווים.`
      /* </i18n> */
    }
    if (min && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is less than the minimum supplied to the rule and there is no maximum supplied to the rule."> */
      return `${s(name)} חייב ליות גדול או שווה ל- ${min} תווים.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the length of the user-provided value is between the two lengths supplied to the rule."> */
    return `${s(name)} חייב להיות בין ${min} ו- ${max} תווים.`
    /* </i18n> */
  },

  /**
   * Value is not a match
   * @see {@link https://docs.formkit.com/essentials/validation#matches}
   */
  matches({ name }) {
    /* <i18n case="Shown when the user-provided value does not match any of the values or RegExp patterns supplied to the rule. "> */
    return `${s(name)} הוא לא ערך תקין.`
    /* </i18n> */
  },

  /**
   * Exceeds maximum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#max}
   */
  max({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is longer than the max supplied to the rule."> */
      return `${name} לא יכול להיות עם יותר מ- ${args[0]}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is greater than the maximum number supplied to the rule."> */
    return `${s(name)} חייב להיות פחות או שווה ל- ${args[0]}.`
    /* </i18n> */
  },

  /**
   * The (field-level) value does not match specified mime type
   * @see {@link https://docs.formkit.com/essentials/validation#mime}
   */
  mime({ name, args }) {
    if (!args[0]) {
      /* <i18n case="Shown when no file formats were supplied to the rule."> */
      return 'פורמט הקובץ לא מורשה.'
      /* </i18n> */
    }
    /* <i18n case="Shown when the mime type of user-provided file does not match any mime types supplied to the rule."> */
    return `${s(name)} חייב להיות מסוג: ${args[0]}`
    /* </i18n> */
  },

  /**
   * Does not fulfill minimum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#min}
   */
  min({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is shorter than the min supplied to the rule."> */
      return `${name} לא יכול להיות עם פחות מ- ${args[0]}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is less than the minimum number supplied to the rule."> */
    return `${s(name)} חייב להיות לפחות ${args[0]}.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#not}
   */
  not({ name, node: { value } }) {
    /* <i18n case="Shown when the user-provided value matches one of the values supplied to (and thus disallowed by) the rule."> */
    return `“${value}” לא מתאים ל- ${name}.`
    /* </i18n> */
  },

  /**
   *  Is not a number
   * @see {@link https://docs.formkit.com/essentials/validation#number}
   */
  number({ name }) {
    /* <i18n case="Shown when the user-provided value is not a number."> */
    return `${s(name)} חייב להיות מספר.`
    /* </i18n> */
  },

  /**
   * Required field.
   * @see {@link https://docs.formkit.com/essentials/validation#required}
   */
  required({ name }) {
    /* <i18n case="Shown when a user does not provide a value to a required input."> */
    return `${s(name)} הינו חובה.`
    /* </i18n> */
  },

  /**
   * Does not start with specified value
   * @see {@link https://docs.formkit.com/essentials/validation#starts-with}
   */
  starts_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not start with the substring supplied to the rule."> */
    return `${s(name)} לא מתחיל ב- ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not a url
   * @see {@link https://docs.formkit.com/essentials/validation#url}
   */
  url() {
    /* <i18n case="Shown when the user-provided value is not a valid url."> */
    return `אנא הקלד קישור תקין.`
    /* </i18n> */
  },
}

Preserve all keys/values when placing "preserve" attribute on overarching inputs or schema

Describe the bug
Placing the preserve attribute on <FormKit type="form" /> or <FormKitSchema /> does not result in keeping all keys/values when a pair gets unmounted.

Reproduction
FormKit playground

Multi-checkboxes are not properly set when hydrated from parent

Describe the bug
Given a form, group, or list that sets values on children — a multi-checkbox input does not have its value set.

Reproduction

https://formkit.link/fc5d6eba8d162e9b236395603e4d0172

i18n: Russian (ru) translation

I’ve completed the Russian language translation.

// Please copy and paste the file your just downloaded here

You cannot v-model a `reactive()` value directly

Describe the bug
When (v-model) binding a reactive() object to the <FormKit type="form">, it will loose it's reactivity almost completely.

Using a ref() instead is working and even updates the reactive object when changed.

The examples in the documentation use ref(), but I'm wondering whether reactive shouldn't work as well, since it's common to use reactive() for objects.

Reproduction

Open Playground: https://formkit.link/d3506792267c1eb4909331f1695d288c
Enter something in the first field -> most likely nothing will happen or only first 1-2 letters will be output above the field.
Enter something in the second field -> the input is displayed almost immediately (as expected) and also the input from the first field is shown.
Repeat the same with the third field -> again no updates, only after the middle input is changed.

Desktop

OS: Mac 11.6.2
Browser: Chrome 98.0.4758.80

Schema class strings fail if using $reset as the first item due to schema parser.

When supplying custom classes and using the $reset token, the schema attempts to parse the string resulting in the default classes persisting and the custom classes not being applied.

We probably need a different token for $reset unless it's acceptable to prevent -class schema items from being dynamically processed.

FormKit Vue Playground link:
https://formkit.link/5e27eb29b8894ccfb4431fe63238b92c

Update — CURRENT SOLUTION:

Prefix your $reset calls in schema with raw per the docs.
https://formkit.link/0f8d83e4f7b51791eef9aa544383fa81

i18n: Croatian (hr) translation

I’ve completed the Croatian language translation.
For some reason I can't submit *.ts files...

// Please copy and paste the file your just downloaded here
``
[hr.txt](https://github.com/formkit/formkit/files/7966717/hr.txt)
`

Playground: Support imports in formkit.config.js files.

Currently the playground file for a FormKit config file is "magic" and expects just the raw object to be the contents of the file. This means importing plugins and using them is impossible with the current setup. It would be ideal if the FormKit config file was a full .js file with support for imports and required an export of your config that would be automatically imported into the Playground setup if it exists.

Use Nuxt with TailwindCSS in formkit.config.ts

Hi,

someone has an example to use the TailwindCSS config (here: https://formkit.com/essentials/styling#tailwind-css-example) made for "vue" package in a "nuxt3" project?

I miss an example to use the "formkit.config.ts" in a "nuxt3" project. I have no idea how to use this:-(

Thank you.

Inputs should be disabled whilst form is in loading state

Describe the bug
Setting the form to a loading state if returning a promise from the submit handler is a great new feature.

I believe the inputs should be disabled whilst in this loading state.
Currently, this is not the case meaning you can edit existing inputs whilst the submit button is "spinning".

Reproduction
https://formkit.link/a03e7b8b648463917105d9f75928b748

Desktop (please complete the following information):

OS: Windows
Browser Chrome
Version 97.0.4692.71

Checkboxes incorrectly propagate values when set via form v-model

Describe the bug

I believe this is an issue with Vue’s reactivity system and deeply linked objects, but when checkbox values are set via an external manipulation the dom doesn't reflect it. However the values do appear to be correct at the core-node level.

Reproduction

https://formkit.link/c173c5ba62cf604236c933f1c612e9ec

and

https://formkit.link/08f227e961f72c87a18b06f8edabb857

Thanks jumbo on Discord.

Checkboxes and radios with options shouldn’t require a label.

Describe the bug
Radios and checkboxes break when no label is defined.

Reproduction
Please try to reproduce the issue using the FormKit playground. https://docs.formkit.com/playground

Different event `prop:{propName}` behaviour for default props and custom props.

Describe the bug
At the moment the core event for set/updated props (prop:{propName}) has a different beahviour for the default props and the added custom props.

I think the behaviour should be aligned:

Trigger also for the "initial value" the event for the default props (e.g. label).
Don't trigger the event for custom props, when the "initial value" was filled.

The question is maybe, for what kind of default props we ware talking and has it some downsides to trigger for all the default props the event?
If i understand it correctly the placeholder is normally not a real prop, so for this the event can not be used? Are there other possibilities?

Reproduction
Playground
See log messages.

Using a placeholder in a select applies the placeholder color to the options

Describe the bug
When using a placeholder in a select, all options are gray but change to black when you pick an option. This is because of the following css rule:

select.formkit-input[data-placeholder]:not([multiple]) {
    color: var(--fk-color-placeholder);
}

If you haven't picked an option yet, you can't make the distinction between selectable and disabled options, because both are gray.

Reproduction
https://formkit.link/3b592b04ed973531dd508820ba7d68dd

Desktop (please complete the following information):

OS: Windows 11
Browser: Chrome
Version: 97

Documentation: FormKit Config

FormKit can be customized with a user-provided config file for setting locales, adding plugins, changing the default behaviors of inputs, adjusting default CSS classes, and more. We reference the config in several places in the docs, each showing a small subset of functionality, but there is not currently a comprehensive reference to the anatomy of a FormKit config file.

Nuxt module improvement suggestions

Thanks, @justin-schroeder for creating a nice Nuxt module. I've spotted few items that could be improved regarding config loading.

Config files should be resolved from rootDir rather than srcDir. You can use resolvePath utility from @nuxt/kit to easily resolve it, respecting supported extensions. example

It would be so nice to reduce dependency on templating as much as possible. this error for instance could be directly thrown in the module instead of delegation to runtime and defaultConfig can be set as default value for configFile in module.ts.

Config could also be directly imported in module using requireModule utility and passed as options object. This not only reduces depending on templating, but also improves build time by avoid transpiler and gives more possibilities to validate config in build time or extend it with other modules.

Would be also nice to also add compatibility field in meta field to indicate only Nuxt ^3.0.0 with vue3 is supported.

User's input is changing the <FormKit type="form">'s value prop

Describe the bug
When assigning a const obj = ref({}) to a <FormKit type="form"> element using the :value` prop, the component is making changes to the prop.

Generally in Vue, components should not mutate props, so that behavior comes unexpected.
(see. https://vuejs.org/guide/components/props.html#one-way-data-flow)

When objects and arrays are passed as props, while the child component cannot mutate the prop binding, it will be able to mutate the object or array's nested properties. This is because in JavaScript objects and arrays are passed by reference, and it is unreasonably expensive for Vue to prevent such mutations.

The main drawback of such mutations is that it allows the child component to affect parent state in a way that isn't obvious to the parent component, potentially making it more difficult to reason about the data flow in the future. As a best practice, you should avoid such mutations unless the parent and child are tightly coupled by design. In most cases, the child should emit an event to let the parent perform the mutation.

If - as a Developer - I want my data (outside of the component) being mutated, I can use v-model's two-way binding, which is available, too. https://formkit.com/essentials/forms#populating)

Reproduction

Open Playground: https://formkit.link/d586e48ef957b35f08e95aad67c3b389
The field is correctly pre-populated and also the debug output below
Type something in the input
Debug output changes, too, although v-model is not used.

Desktop (please complete the following information):

OS: Mac 11.6.2
Browser: Chrome 98.0.4758.80

Numbers are not rendering as select options

FormKit select renders undefined if options are Numbers

Converting number to string fixes issue.

FormKit Vue Playground link:
https://formkit.link/c28ad9bc087b51b5ed02d13fc211221f

Incomplete message not displaying on form submission

When a form is incomplete (all its validation rules are not passing) an incomplete message should (optionally) be displayed on attempted form submission. A regression between alpha.3 and alpha.4 prevents this message from being properly displayed.

Reproduction

Go Here: https://formkit.link/df75d9d15c1e19591627db55d0ec1bb9
Click submit
No incomplete message is displayed

FormKit Form submit values

When submitting a form, we get an unexpected property, submit_2, which is the name of the submit button generated by the FormKit form.

    <FormKit
      type="form"
      @submit="login"
    >
      <FormKit
        type="email"
        placeholder="Email"
        validation="required|email"
        validation-label="Email"
        name="email"
      />
      <FormKit
        type="password"
        placeholder="Password"
        validation="required|password"
        name="password"
      />
    </FormKit>

 methods: {
    async login (formData) {
      console.log('formData', formData)
      const user = await this.$store.dispatch('auth/authenticate', { ...formData })
    }
}

failing classlist generation

https://github.com/formkit/formkit/blob/master/packages/core/src/classes.ts#L55 we need an undefined check for currentClassList and only apply the user classes!

i would have provided a patch myself, but i cant ;)

Enabling/Disabling Form Fields Using a Parent Group/List/Form Component.

It would be ideal to be able to disable all the subfields in a group by disabling the top level component.

Additionally, allowing for easy CSS display differences so that when the form is disabled, it can be used as a display, rather than just a locked form.

It might also make sense to support hidden in the same way.

i18n: Portuguese (pt) translation

I’ve completed the Portuguese (BR) language translation.

import { FormKitValidationMessages } from '@formkit/validation'

/**
 * Here we can import additional helper functions to assist in formatting our
 * language. Feel free to add additional helper methods to libs/formats if it
 * assists in creating good validation messages for your locale.
 */
import { sentence as s, list, date } from '../formatters'
import { FormKitLocaleMessages } from '../i18n'

/**
 * Standard language for interface features.
 * @public
 */
export const ui: FormKitLocaleMessages = {
  /**
   * Shown when a button to remove items is visible.
   */
  remove: 'Remover',
  /**
   * Shown when all fields are not filled out correctly.
   */
  incomplete: 'Desculpe, nem todos os campos foram preenchidos corretamente.',
  /**
   * Shown in a button inside a form to submit the form.
   */
  submit: 'Enviar',
}

/**
 * These are all the possible strings that pertain to validation messages.
 * @public
 */
export const validation: FormKitValidationMessages = {
  /**
   * The value is not an accepted value.
   * @see {@link https://docs.formkit.com/essentials/validation#accepted}
   */
  accepted({ name }): string {
    /* <i18n case="Shown when the user-provided value is not a valid 'accepted' value."> */
    return `Por favor aceite o ${name}.`
    /* </i18n> */
  },

  /**
   * The date is not after
   * @see {@link https://docs.formkit.com/essentials/validation#date-after}
   */
  date_after({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not after the date supplied to the rule."> */
      return `${s(name)} deve ser posterior a ${date(args[0])}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not after today's date, since no date was supplied to the rule."> */
    return `${s(name)} deve ser no futuro.`
    /* </i18n> */
  },

  /**
   * The value is not a letter.
   * @see {@link https://docs.formkit.com/essentials/validation#alpha}
   */
  alpha({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphabetical characters."> */
    return `${s(name)} só pode conter caracteres do alfabeto.`
    /* </i18n> */
  },

  /**
   * The value is not alphanumeric
   * @see {@link https://docs.formkit.com/essentials/validation#alphanumeric}
   */
  alphanumeric({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphanumeric characters."> */
    return `${s(name)} só pode ter letras e números.`
    /* </i18n> */
  },

  /**
   * The date is not before
   * @see {@link https://docs.formkit.com/essentials/validation#date-before}
   */
  date_before({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not before the date supplied to the rule."> */
      return `${s(name)} deve ser anterior a ${date(args[0])}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not before today's date, since no date was supplied to the rule."> */
    return `${s(name)} deve ser anterior a data atual.`
    /* </i18n> */
  },

  /**
   * The value is not between two numbers
   * @see {@link https://docs.formkit.com/essentials/validation#between}
   */
  between({ name, args }) {
    if (isNaN(args[0]) || isNaN(args[1])) {
      /* <i18n case="Shown when any of the arguments supplied to the rule were not a number."> */
      return `O campo foi configurado incorretamente e não pode ser enviado.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is not between two numbers."> */
    return `${s(name)} deve estar entre ${args[0]} e ${args[1]}.`
    /* </i18n> */
  },

  /**
   * The confirmation field does not match
   * @see {@link https://docs.formkit.com/essentials/validation#confirm}
   */
  confirm({ name }) {
    /* <i18n case="Shown when the user-provided value does not equal the value of the matched input."> */
    return `${s(name)} não confere.`
    /* </i18n> */
  },

  /**
   * The value is not a valid date
   * @see {@link https://docs.formkit.com/essentials/validation#date-format}
   */
  date_format({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date does not satisfy the date format supplied to the rule."> */
      return `${s(name)} não é uma data válida, por favor use o formato ${args[0]}`
      /* </i18n> */
    }
    /* <i18n case="Shown when no date argument was supplied to the rule."> */
    return 'O campo foi configurado incorretamente e não pode ser enviado.'
    /* </i18n> */
  },

  /**
   * Is not within expected date range
   * @see {@link https://docs.formkit.com/essentials/validation#date-between}
   */
  date_between({ name, args }) {
    /* <i18n case="Shown when the user-provided date is not between the start and end dates supplied to the rule. "> */
    return `${s(name)} deve ser entre ${date(args[0])} e ${date(args[1])}`
    /* </i18n> */
  },

  /**
   * Shown when the user-provided value is not a valid email address.
   * @see {@link https://docs.formkit.com/essentials/validation#email}
   */
  email: 'Por favor informe um e-mail válido.',

  /**
   * Does not end with the specified value
   * @see {@link https://docs.formkit.com/essentials/validation#ends-with}
   */
  ends_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not end with the substring supplied to the rule."> */
    return `${s(name)} não termina com ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#is}
   */
  is({ name }) {
    /* <i18n case="Shown when the user-provided value is not one of the values supplied to the rule."> */
    return `${s(name)} não é um valor permitido.`
    /* </i18n> */
  },

  /**
   * Does not match specified length
   * @see {@link https://docs.formkit.com/essentials/validation#length}
   */
  length({ name, args: [first = 0, second = Infinity] }) {
    const min = first <= second ? first : second
    const max = second >= first ? second : first
    if (min == 1 && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is not at least one character."> */
      return `${s(name)} deve ter ao menos um caractere.`
      /* </i18n> */
    }
    if (min == 0 && max) {
      /* <i18n case="Shown when first argument supplied to the rule is 0, and the user-provided value is longer than the max (the 2nd argument) supplied to the rule."> */
      return `${s(name)} não pode ter mais que ${max} caracteres.`
      /* </i18n> */
    }
    if (min && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is less than the minimum supplied to the rule and there is no maximum supplied to the rule."> */
      return `${s(name)} deve ter no mínimo ${min} caracteres.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the length of the user-provided value is between the two lengths supplied to the rule."> */
    return `${s(name)} deve ter entre ${min} e ${max} caracteres.`
    /* </i18n> */
  },

  /**
   * Value is not a match
   * @see {@link https://docs.formkit.com/essentials/validation#matches}
   */
  matches({ name }) {
    /* <i18n case="Shown when the user-provided value does not match any of the values or RegExp patterns supplied to the rule. "> */
    return `${s(name)} não é um valor permitido.`
    /* </i18n> */
  },

  /**
   * Exceeds maximum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#max}
   */
  max({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is longer than the max supplied to the rule."> */
      return `Não pode ter mais que ${args[0]} ${name}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is greater than the maximum number supplied to the rule."> */
    return `${s(name)} deve ser igual ou menor que ${args[0]}.`
    /* </i18n> */
  },

  /**
   * The (field-level) value does not match specified mime type
   * @see {@link https://docs.formkit.com/essentials/validation#mime}
   */
  mime({ name, args }) {
    if (!args[0]) {
      /* <i18n case="Shown when no file formats were supplied to the rule."> */
      return 'Nenhum formato de arquivo permitido.'
      /* </i18n> */
    }
    /* <i18n case="Shown when the mime type of user-provided file does not match any mime types supplied to the rule."> */
    return `${s(name)} deve ser do tipo: ${args[0]}`
    /* </i18n> */
  },

  /**
   * Does not fulfill minimum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#min}
   */
  min({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is shorter than the min supplied to the rule."> */
      return `Não pode ter menos que ${args[0]} ${name}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is less than the minimum number supplied to the rule."> */
    return `${s(name)} deve ter pelo menos ${args[0]}.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#not}
   */
  not({ name, node: { value } }) {
    /* <i18n case="Shown when the user-provided value matches one of the values supplied to (and thus disallowed by) the rule."> */
    return `“${value}” não permite ${name}.`
    /* </i18n> */
  },

  /**
   *  Is not a number
   * @see {@link https://docs.formkit.com/essentials/validation#number}
   */
  number({ name }) {
    /* <i18n case="Shown when the user-provided value is not a number."> */
    return `${s(name)} deve ser um número.`
    /* </i18n> */
  },

  /**
   * Required field.
   * @see {@link https://docs.formkit.com/essentials/validation#required}
   */
  required({ name }) {
    /* <i18n case="Shown when a user does not provide a value to a required input."> */
    return `${s(name)} é obrigatório.`
    /* </i18n> */
  },

  /**
   * Does not start with specified value
   * @see {@link https://docs.formkit.com/essentials/validation#starts-with}
   */
  starts_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not start with the substring supplied to the rule."> */
    return `${s(name)} não começa com ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not a url
   * @see {@link https://docs.formkit.com/essentials/validation#url}
   */
  url() {
    /* <i18n case="Shown when the user-provided value is not a valid url."> */
    return `Por favor informe um url válido.`
    /* </i18n> */
  },
}

German Locale

import { FormKitValidationMessages } from '@formkit/validation'

/**
 * Here we can import additional helper functions to assist in formatting our
 * language. Feel free to add additional helper methods to libs/formats if it
 * assists in creating good validation messages for your locale.
 */
import { sentence as s, list, date } from '../formatters'
import { FormKitLocaleMessages } from '../i18n'

/**
 * Standard language for interface features.
 * @public
 */
export const ui: FormKitLocaleMessages = {
  /**
   * Shown when a button to remove items is visible.
   */
  remove: 'Entfernen',
  /**
   * Shown when all fields are not filled out correctly.
   */
  incomplete: 'Einige Felder enthalten Fehler.',
  /**
   * Shown in a button inside a form to submit the form.
   */
  submit: 'Senden',
}

/**
 * These are all the possible strings that pertain to validation messages.
 * @public
 */
export const validation: FormKitValidationMessages = {
  /**
   * The value is not an accepted value.
   * @see {@link https://docs.formkit.com/essentials/validation#accepted}
   */
  accepted({ name }): string {
    /* <i18n case="Shown when the user-provided value is not a valid 'accepted' value."> */
    return `Bitte akzeptiere ${name}.`
    /* </i18n> */
  },

  /**
   * The date is not after
   * @see {@link https://docs.formkit.com/essentials/validation#date-after}
   */
  date_after({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not after the date supplied to the rule."> */
      return `${s(name)} muss nach dem ${date(args[0])} liegen.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not after today's date, since no date was supplied to the rule."> */
    return `${s(name)} muss in der Zukunft liegen.`
    /* </i18n> */
  },

  /**
   * The value is not a letter.
   * @see {@link https://docs.formkit.com/essentials/validation#alpha}
   */
  alpha({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphabetical characters."> */
    return `${s(name)} kann nur Buchstaben enthalten.`
    /* </i18n> */
  },

  /**
   * The value is not alphanumeric
   * @see {@link https://docs.formkit.com/essentials/validation#alphanumeric}
   */
  alphanumeric({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphanumeric characters."> */
    return `${s(name)} kann nur Zahlen und Buchstaben enthalten.`
    /* </i18n> */
  },

  /**
   * The date is not before
   * @see {@link https://docs.formkit.com/essentials/validation#date-before}
   */
  date_before({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not before the date supplied to the rule."> */
      return `${s(name)} muss vor dem ${date(args[0])} liegen.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not before today's date, since no date was supplied to the rule."> */
    return `${s(name)} muss in der Vergangenheit liegen.`
    /* </i18n> */
  },

  /**
   * The value is not between two numbers
   * @see {@link https://docs.formkit.com/essentials/validation#between}
   */
  between({ name, args }) {
    if (isNaN(args[0]) || isNaN(args[1])) {
      /* <i18n case="Shown when any of the arguments supplied to the rule were not a number."> */
      return `Dieses Feld ist fehlerhaft konfiguriert.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is not between two numbers."> */
    return `${s(name)} muss zwischen ${args[0]} und ${args[1]} liegen.`
    /* </i18n> */
  },

  /**
   * The confirmation field does not match
   * @see {@link https://docs.formkit.com/essentials/validation#confirm}
   */
  confirm({ name }) {
    /* <i18n case="Shown when the user-provided value does not equal the value of the matched input."> */
    return `${s(name)} stimmt nicht überein.`
    /* </i18n> */
  },

  /**
   * The value is not a valid date
   * @see {@link https://docs.formkit.com/essentials/validation#date-format}
   */
  date_format({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date does not satisfy the date format supplied to the rule."> */
      return `${s(name)} ist kein gültiges Datum, bitte nutze das Format ${args[0]}`
      /* </i18n> */
    }
    /* <i18n case="Shown when no date argument was supplied to the rule."> */
    return 'Dieses Feld enthält einen ungültigen Wert.'
    /* </i18n> */
  },

  /**
   * Is not within expected date range
   * @see {@link https://docs.formkit.com/essentials/validation#date-between}
   */
  date_between({ name, args }) {
    /* <i18n case="Shown when the user-provided date is not between the start and end dates supplied to the rule. "> */
    return `${s(name)} muss zwischen dem ${date(args[0])} und dem ${date(args[1])} liegen.`
    /* </i18n> */
  },

  /**
   * Shown when the user-provided value is not a valid email address.
   * @see {@link https://docs.formkit.com/essentials/validation#email}
   */
  email: 'Dies ist keine gültige E-Mail.',

  /**
   * Does not end with the specified value
   * @see {@link https://docs.formkit.com/essentials/validation#ends-with}
   */
  ends_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not end with the substring supplied to the rule."> */
    return `${s(name)} endet nicht mit ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#is}
   */
  is({ name }) {
    /* <i18n case="Shown when the user-provided value is not one of the values supplied to the rule."> */
    return `${s(name)} ist hier nicht erlaubt.`
    /* </i18n> */
  },

  /**
   * Does not match specified length
   * @see {@link https://docs.formkit.com/essentials/validation#length}
   */
  length({ name, args: [first = 0, second = Infinity] }) {
    const min = first <= second ? first : second
    const max = second >= first ? second : first
    if (min == 1 && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is not at least one character."> */
      return `${s(name)} muss mindestens ein Zeichen enthalten.`
      /* </i18n> */
    }
    if (min == 0 && max) {
      /* <i18n case="Shown when first argument supplied to the rule is 0, and the user-provided value is longer than the max (the 2nd argument) supplied to the rule."> */
      return `${s(name)} darf höchstens ${max} Zeichen enthalten.`
      /* </i18n> */
    }
    if (min && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is less than the minimum supplied to the rule and there is no maximum supplied to the rule."> */
      return `${s(name)} muss mindestens ${min} Zeichen enthalten.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the length of the user-provided value is between the two lengths supplied to the rule."> */
    return `${s(name)} muss zwischen ${min} und ${max} Zeichen enthalten.`
    /* </i18n> */
  },

  /**
   * Value is not a match
   * @see {@link https://docs.formkit.com/essentials/validation#matches}
   */
  matches({ name }) {
    /* <i18n case="Shown when the user-provided value does not match any of the values or RegExp patterns supplied to the rule. "> */
    return `${s(name)} ist hier nicht erlaubt.`
    /* </i18n> */
  },

  /**
   * Exceeds maximum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#max}
   */
  max({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is longer than the max supplied to the rule."> */
      return `${name} kann nicht mehr als ${args[0]} Elemente enhalten.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is greater than the maximum number supplied to the rule."> */
    return `${s(name)} darf höchstens ${args[0]} sein.`
    /* </i18n> */
  },

  /**
   * The (field-level) value does not match specified mime type
   * @see {@link https://docs.formkit.com/essentials/validation#mime}
   */
  mime({ name, args }) {
    if (!args[0]) {
      /* <i18n case="Shown when no file formats were supplied to the rule."> */
      return 'Keine Dateitypen erlaubt.'
      /* </i18n> */
    }
    /* <i18n case="Shown when the mime type of user-provided file does not match any mime types supplied to the rule."> */
    return `${s(name)} muss vom Dateityp ${args[0]} sein.`
    /* </i18n> */
  },

  /**
   * Does not fulfill minimum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#min}
   */
  min({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is shorter than the min supplied to the rule."> */
      return `${name} muss mindestens ${args[0]} Elemente enthalten.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is less than the minimum number supplied to the rule."> */
    return `${s(name)} muss mindestens ${args[0]} sein.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#not}
   */
  not({ name, node: { value } }) {
    /* <i18n case="Shown when the user-provided value matches one of the values supplied to (and thus disallowed by) the rule."> */
    return `"${value}" ist nicht erlaubt für ${name}.`
    /* </i18n> */
  },

  /**
   *  Is not a number
   * @see {@link https://docs.formkit.com/essentials/validation#number}
   */
  number({ name }) {
    /* <i18n case="Shown when the user-provided value is not a number."> */
    return `${s(name)} muss eine Zahl enthalten.`
    /* </i18n> */
  },

  /**
   * Required field.
   * @see {@link https://docs.formkit.com/essentials/validation#required}
   */
  required({ name }) {
    /* <i18n case="Shown when a user does not provide a value to a required input."> */
    return `${s(name)} ist ein Pflichtfeld.`
    /* </i18n> */
  },

  /**
   * Does not start with specified value
   * @see {@link https://docs.formkit.com/essentials/validation#starts-with}
   */
  starts_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not start with the substring supplied to the rule."> */
    return `${s(name)} beginnt nicht mit ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not a url
   * @see {@link https://docs.formkit.com/essentials/validation#url}
   */
  url() {
    /* <i18n case="Shown when the user-provided value is not a valid url."> */
    return `Dies ist keine gültige URL.`
    /* </i18n> */
  },
}

`label` missing from TypeScript definition

Describe the bug
I'm getting a typescript error Property 'label' does not exist on type...

// Form.tsx

import { defineComponent } from "vue";
import { FormKit } from "@formkit/vue";

export const MyForm = defineComponent({
    setup() {
        return () => (
            <div>
                <FormKit
                    type="form"
                >
                    <FormKit
                        type="date"
                        name="start"
                        label="Start" // error on this line
                    />
                </FormKit>
            </div>
        );
    }
})

Reproduction
FormKit playground doesn't support .tsx files

Desktop (please complete the following information):
N/A

i18n: German (de) translation

I’ve completed the German language translation as discussed. During my translation (and my way through the docs) I discovered that @digitalkaoz already provided initial translations. So i did compare them as well, to merge our brain power.

Here are my results, with some space for further improvements:

Two strings (removeAll and noFiles) from the current translation are not included in the translation tool. Maybe you want to add them for the other languages. The German translations are already perfect.
I did not change 13 translations. But identified potential improvements for 3 of them, which would required general adjustments. (see potential improvements)
About 21 strings received changes by me. I have commented all of them. @digitalkaoz maybe you could briefly review them and share your thoughts?

Changes

EN	DE_current	DE_new	Comment
Sorry, not all fields are filled out correctly.	Einige Felder enthalten Fehler.	Entschuldigung, nicht alle Felder wurden korrekt ausgefüllt.	Current translation was missing the "Sorry"
Please accept the ${name}.	Bitte akzeptiere ${name}.	Bitte ${name} akzeptieren.	Current translation uses the informal "Du" and might not be used on enterprise websites.
${s(name)} can only contain alphabetical characters.	${s(name)} kann nur Buchstaben enthalten.	${s(name)} darf nur Buchstaben enthalten.	In form validation i'd rather use the permissive term "darf" insted of "kann" (able to)
${s(name)} can only contain letters and numbers.	${s(name)} kann nur Zahlen und Buchstaben enthalten.	${s(name)} darf nur Buchstaben und Zahlen enthalten.	Usually letters are mentioned before numbers. In form validation i'd rather use the permissive term "darf" insted of "kann" (able to)
${s(name)} must be between ${args[0]} and ${args[1]}.	${s(name)} muss zwischen ${a} und ${b} liegen.	${s(name)} muss zwischen ${args[0]} und ${args[1]} sein.	A number (e.g. 5) can lie ("liegen") between 2 and 7, but a field (e.g. age) is ("sein") between 2 and 7.
${s(name)} is not a valid date, please use the format ${args[0]}	${s(name)} ist kein gültiges Datum, bitte nutze das Format ${args[0]}	${s(name)} ist kein gültiges Datum im Format ${args[0]}.	Current translation uses the informal "Du" and might not be used on enterprise websites.
This field was configured incorrectly and can’t be submitted	Dieses Feld enthält einen ungültigen Wert.	Dieses Feld wurde falsch konfiguriert und kann nicht übermittelt werden.	Current translation suggests, that the user entered wrong data, but actually this is a configuration error.
${s(name)} must be between ${date(args[0])} and ${date(args[1])}	${s(name)} muss zwischen dem ${date(args[0])} und dem ${date(args[1])} liegen.	${s(name)} muss zwischen ${date(args[0])} und ${date(args[1])} liegen.	Using "dem" in front of date makes it unnecessary complex.
Please enter a valid email address.	Dies ist keine gültige E-Mail.	E-Mail Adresse ist ungültig.	"Dies" (this) as reference to the value was only used for url and email, removed it to harmonize the error messages. Potential improvement: would be good to have ${s(name)} available, to harmonize it even more.
${s(name)} is not an allowed value.	${s(name)} ist hier nicht erlaubt.	${s(name)} enthält einen ungültigen Wert.	Current translation is very casually.
${s(name)} must be less than or equal to ${max} characters.	${s(name)} darf höchstens ${max} Zeichen enthalten.	${s(name)} darf maximal ${max} Zeichen enthalten.	Again, "höchstens" (height) is not ideal. For a string length i would rather use "maximal" or "nicht länger als" (not longer than)
${s(name)} is not an allowed value.	${s(name)} ist hier nicht erlaubt.	${s(name)} enthält einen ungültigen Wert.	Current translation is very casually.
Cannot have more than ${args[0]} ${name}.	${name} kann nicht mehr als ${args[0]} Elemente enhalten.	Darf maximal ${args[0]} ${name} haben.	Both possible. Current translation is more neutral "FIELD must contain at least X elements. New translation would be "At least 5 ingredients required"
${s(name)} must be less than or equal to ${args[0]}.	${s(name)} darf höchstens ${args[0]} sein.	${s(name)} darf maximal ${args[0]} sein.	"höchstens" mostly refers to height. An age or width would never be höchstens, but rather "maximal" (maximal), which is more generic
No file formats allowed.	Keine Dateitypen erlaubt.	Keine Dateiformate konfiguriert.	Current translation is correct word by word, but this is an configuration error and should be exposed as such. e.g. "No file formats configured" or with a generic message as in the other cases
${s(name)} must be of the type: ${args[0]}	${s(name)} muss vom Dateityp ${args[0]} sein.	${s(name)} muss vom Typ ${args[0]} sein.	"Dateityp" translates "file type" original validation message only contains "type" => Typ.
Cannot have less than ${args[0]} ${name}.	${name} muss mindestens ${args[0]} Elemente enthalten.	Mindestens ${args[0]} ${name} erforderlich.	Both possible. Current translation is more neutral "FIELD must contain at least X elements. New translation would be "At least 5 ingredients required"
“${value}” is not an allowed ${name}.	"${value}" ist nicht erlaubt für ${name}.	“${value}” ist kein gültiger Wert für ${name}.	Word by word translation doesn't work for German. Translated it to "VALUE is not a valid value for FIELD"
${s(name)} must be a number.	${s(name)} muss eine Zahl enthalten.	${s(name)} muss eine Zahl sein.	Thinking that name is something like age, length or amount i would rather use "sein" instead of "enthalten". A field can contain something, but an age would rather not contain, but "sein".
${s(name)} is required.	${s(name)} ist ein Pflichtfeld.	${s(name)} ist erforderlich.	Word by word required => erforderlich; Pflichtfeld would be translated as "mandatory field"
Please include a valid url.	Dies ist keine gültige URL.	URL ist ungültig.	"Dies" (this) as reference to the value was only used for url and email, removed it to harmonize the error messages. Potential improvement: would be good to have ${s(name)} available, to harmonize it even more.

Potential Improvements

email/url: Would be good to have ${s(name)} available, to harmonize the message with the other fields.
ends_with/starts_with: It's probably better to instruct the user that the field "should begin with/ end with (positive message)
length >= 1: Think it would be better to say "may not be empty" to let users think about entering something meaning full and not just fill the field to send the form.

Validation File

Note: This is exported from the translation tool, and missing removeAll and noFiles strings.

import { FormKitValidationMessages } from '@formkit/validation'

/**
 * Here we can import additional helper functions to assist in formatting our
 * language. Feel free to add additional helper methods to libs/formats if it
 * assists in creating good validation messages for your locale.
 */
import { sentence as s, list, date } from '../formatters'
import { FormKitLocaleMessages } from '../i18n'

/**
 * Standard language for interface features.
 * @public
 */
export const ui: FormKitLocaleMessages = {
  /**
   * Shown when a button to remove items is visible.
   */
  remove: 'Entfernen',
  /**
   * Shown when all fields are not filled out correctly.
   */
  incomplete: 'Entschuldigung, nicht alle Felder wurden korrekt ausgefüllt.',
  /**
   * Shown in a button inside a form to submit the form.
   */
  submit: 'Senden',
}

/**
 * These are all the possible strings that pertain to validation messages.
 * @public
 */
export const validation: FormKitValidationMessages = {
  /**
   * The value is not an accepted value.
   * @see {@link https://docs.formkit.com/essentials/validation#accepted}
   */
  accepted({ name }): string {
    /* <i18n case="Shown when the user-provided value is not a valid 'accepted' value."> */
    return `Bitte ${name} akzeptieren.`
    /* </i18n> */
  },

  /**
   * The date is not after
   * @see {@link https://docs.formkit.com/essentials/validation#date-after}
   */
  date_after({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not after the date supplied to the rule."> */
      return `${s(name)} muss nach dem ${date(args[0])} liegen.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not after today's date, since no date was supplied to the rule."> */
    return `${s(name)} muss in der Zukunft liegen.`
    /* </i18n> */
  },

  /**
   * The value is not a letter.
   * @see {@link https://docs.formkit.com/essentials/validation#alpha}
   */
  alpha({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphabetical characters."> */
    return `${s(name)} darf nur Buchstaben enthalten.`
    /* </i18n> */
  },

  /**
   * The value is not alphanumeric
   * @see {@link https://docs.formkit.com/essentials/validation#alphanumeric}
   */
  alphanumeric({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphanumeric characters."> */
    return `${s(name)} darf nur Buchstaben und Zahlen enthalten.`
    /* </i18n> */
  },

  /**
   * The date is not before
   * @see {@link https://docs.formkit.com/essentials/validation#date-before}
   */
  date_before({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not before the date supplied to the rule."> */
      return `${s(name)} muss vor dem ${date(args[0])} liegen.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not before today's date, since no date was supplied to the rule."> */
    return `${s(name)} muss in der Vergangenheit liegen.`
    /* </i18n> */
  },

  /**
   * The value is not between two numbers
   * @see {@link https://docs.formkit.com/essentials/validation#between}
   */
  between({ name, args }) {
    if (isNaN(args[0]) || isNaN(args[1])) {
      /* <i18n case="Shown when any of the arguments supplied to the rule were not a number."> */
      return `Dieses Feld wurde falsch konfiguriert und kann nicht übermittelt werden.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is not between two numbers."> */
    return `${s(name)} muss zwischen ${args[0]} und ${args[1]} sein.`
    /* </i18n> */
  },

  /**
   * The confirmation field does not match
   * @see {@link https://docs.formkit.com/essentials/validation#confirm}
   */
  confirm({ name }) {
    /* <i18n case="Shown when the user-provided value does not equal the value of the matched input."> */
    return `${s(name)} stimmt nicht überein.`
    /* </i18n> */
  },

  /**
   * The value is not a valid date
   * @see {@link https://docs.formkit.com/essentials/validation#date-format}
   */
  date_format({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date does not satisfy the date format supplied to the rule."> */
      return `${s(name)} ist kein gültiges Datum im Format ${args[0]}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when no date argument was supplied to the rule."> */
    return 'Dieses Feld wurde falsch konfiguriert und kann nicht übermittelt werden.'
    /* </i18n> */
  },

  /**
   * Is not within expected date range
   * @see {@link https://docs.formkit.com/essentials/validation#date-between}
   */
  date_between({ name, args }) {
    /* <i18n case="Shown when the user-provided date is not between the start and end dates supplied to the rule. "> */
    return `${s(name)} muss zwischen ${date(args[0])} und ${date(args[1])} liegen.`
    /* </i18n> */
  },

  /**
   * Shown when the user-provided value is not a valid email address.
   * @see {@link https://docs.formkit.com/essentials/validation#email}
   */
  email: 'E-Mail Adresse ist ungültig.',

  /**
   * Does not end with the specified value
   * @see {@link https://docs.formkit.com/essentials/validation#ends-with}
   */
  ends_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not end with the substring supplied to the rule."> */
    return `${s(name)} endet nicht mit ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#is}
   */
  is({ name }) {
    /* <i18n case="Shown when the user-provided value is not one of the values supplied to the rule."> */
    return `${s(name)} enthält einen ungültigen Wert.`
    /* </i18n> */
  },

  /**
   * Does not match specified length
   * @see {@link https://docs.formkit.com/essentials/validation#length}
   */
  length({ name, args: [first = 0, second = Infinity] }) {
    const min = first <= second ? first : second
    const max = second >= first ? second : first
    if (min == 1 && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is not at least one character."> */
      return `${s(name)} muss mindestens ein Zeichen enthalten.`
      /* </i18n> */
    }
    if (min == 0 && max) {
      /* <i18n case="Shown when first argument supplied to the rule is 0, and the user-provided value is longer than the max (the 2nd argument) supplied to the rule."> */
      return `${s(name)} darf maximal ${max} Zeichen enthalten.`
      /* </i18n> */
    }
    if (min && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is less than the minimum supplied to the rule and there is no maximum supplied to the rule."> */
      return `${s(name)} muss mindestens ${min} Zeichen enthalten.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the length of the user-provided value is between the two lengths supplied to the rule."> */
    return `${s(name)} muss zwischen ${min} und ${max} Zeichen enthalten.`
    /* </i18n> */
  },

  /**
   * Value is not a match
   * @see {@link https://docs.formkit.com/essentials/validation#matches}
   */
  matches({ name }) {
    /* <i18n case="Shown when the user-provided value does not match any of the values or RegExp patterns supplied to the rule. "> */
    return `${s(name)} enthält einen ungültigen Wert.`
    /* </i18n> */
  },

  /**
   * Exceeds maximum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#max}
   */
  max({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is longer than the max supplied to the rule."> */
      return `Darf maximal ${args[0]} ${name} haben.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is greater than the maximum number supplied to the rule."> */
    return `${s(name)} darf maximal ${args[0]} sein.`
    /* </i18n> */
  },

  /**
   * The (field-level) value does not match specified mime type
   * @see {@link https://docs.formkit.com/essentials/validation#mime}
   */
  mime({ name, args }) {
    if (!args[0]) {
      /* <i18n case="Shown when no file formats were supplied to the rule."> */
      return 'Keine Dateiformate konfiguriert.'
      /* </i18n> */
    }
    /* <i18n case="Shown when the mime type of user-provided file does not match any mime types supplied to the rule."> */
    return `${s(name)} muss vom Typ ${args[0]} sein.`
    /* </i18n> */
  },

  /**
   * Does not fulfill minimum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#min}
   */
  min({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is shorter than the min supplied to the rule."> */
      return `Mindestens ${args[0]} ${name} erforderlich.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is less than the minimum number supplied to the rule."> */
    return `${s(name)} muss mindestens ${args[0]} sein.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#not}
   */
  not({ name, node: { value } }) {
    /* <i18n case="Shown when the user-provided value matches one of the values supplied to (and thus disallowed by) the rule."> */
    return `“${value}” ist kein gültiger Wert für ${name}.`
    /* </i18n> */
  },

  /**
   *  Is not a number
   * @see {@link https://docs.formkit.com/essentials/validation#number}
   */
  number({ name }) {
    /* <i18n case="Shown when the user-provided value is not a number."> */
    return `${s(name)} muss eine Zahl sein.`
    /* </i18n> */
  },

  /**
   * Required field.
   * @see {@link https://docs.formkit.com/essentials/validation#required}
   */
  required({ name }) {
    /* <i18n case="Shown when a user does not provide a value to a required input."> */
    return `${s(name)} ist erforderlich.`
    /* </i18n> */
  },

  /**
   * Does not start with specified value
   * @see {@link https://docs.formkit.com/essentials/validation#starts-with}
   */
  starts_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not start with the substring supplied to the rule."> */
    return `${s(name)} beginnt nicht mit ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not a url
   * @see {@link https://docs.formkit.com/essentials/validation#url}
   */
  url() {
    /* <i18n case="Shown when the user-provided value is not a valid url."> */
    return `URL ist ungültig.`
    /* </i18n> */
  },
}

Multi-step Form Support/Docs

The readme lists multi-step forms as supported, but I've read through the docs and can't find an example of how this would be done. In particular I'm interested in using the schema generator to go from JSON to a multi-step form. Apologies if I've just missed it.

Just to clarify, when I say multi-step form I mean the ability to have one or more inputs per step, some sort of "next" or "submit" button that goes to the next step (next set of inputs become visible, previous ones hidden) until you get to a final step and do a full form submission. Some nice-to-haves would be the ability to go back to a previous step, as well as the ability to do partial submissions to the backend between steps.

I suppose one hacky way to do this would be with the conditional visibility feature, but hoping there is something better I missed, like just grouping the inputs in a list or something.

Thanks for putting this library together, been looking forward to seeing what the Vue 3 version looks like.

i18n: Dutch (nl) translation

I’ve completed the Dutch language translation.

import { FormKitValidationMessages } from '@formkit/validation'

/**
 * Here we can import additional helper functions to assist in formatting our
 * language. Feel free to add additional helper methods to libs/formats if it
 * assists in creating good validation messages for your locale.
 */
import { sentence as s, list, date } from '../formatters'
import { FormKitLocaleMessages } from '../i18n'

/**
 * Standard language for interface features.
 * @public
 */
export const ui: FormKitLocaleMessages = {
  /**
   * Shown when a button to remove items is visible.
   */
  remove: 'Verwijder',
  /**
   * Shown when all fields are not filled out correctly.
   */
  incomplete: 'Sorry, niet alle velden zijn correct ingevuld.',
  /**
   * Shown in a button inside a form to submit the form.
   */
  submit: 'Versturen',
}

/**
 * These are all the possible strings that pertain to validation messages.
 * @public
 */
export const validation: FormKitValidationMessages = {
  /**
   * The value is not an accepted value.
   * @see {@link https://docs.formkit.com/essentials/validation#accepted}
   */
  accepted({ name }): string {
    /* <i18n case="Shown when the user-provided value is not a valid 'accepted' value."> */
    return `Accepteer de ${name}.`
    /* </i18n> */
  },

  /**
   * The date is not after
   * @see {@link https://docs.formkit.com/essentials/validation#date-after}
   */
  date_after({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not after the date supplied to the rule."> */
      return `${s(name)} moet na ${date(args[0])} zijn.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not after today's date, since no date was supplied to the rule."> */
    return `${s(name)} moet in de toekomst liggen.`
    /* </i18n> */
  },

  /**
   * The value is not a letter.
   * @see {@link https://docs.formkit.com/essentials/validation#alpha}
   */
  alpha({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphabetical characters."> */
    return `${s(name)} mag alleen alfabetische tekens bevatten.`
    /* </i18n> */
  },

  /**
   * The value is not alphanumeric
   * @see {@link https://docs.formkit.com/essentials/validation#alphanumeric}
   */
  alphanumeric({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphanumeric characters."> */
    return `${s(name)} mag alleen letters en cijfers bevatten.`
    /* </i18n> */
  },

  /**
   * The date is not before
   * @see {@link https://docs.formkit.com/essentials/validation#date-before}
   */
  date_before({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not before the date supplied to the rule."> */
      return `${s(name)} moet vóór ${date(args[0])} vallen.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not before today's date, since no date was supplied to the rule."> */
    return `${s(name)} moet in het verleden zijn.`
    /* </i18n> */
  },

  /**
   * The value is not between two numbers
   * @see {@link https://docs.formkit.com/essentials/validation#between}
   */
  between({ name, args }) {
    if (isNaN(args[0]) || isNaN(args[1])) {
      /* <i18n case="Shown when any of the arguments supplied to the rule were not a number."> */
      return `Dit veld is verkeerd geconfigureerd en kan niet worden ingediend.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is not between two numbers."> */
    return `${s(name)} moet tussen ${args[0]} en ${args[1]} liggen.`
    /* </i18n> */
  },

  /**
   * The confirmation field does not match
   * @see {@link https://docs.formkit.com/essentials/validation#confirm}
   */
  confirm({ name }) {
    /* <i18n case="Shown when the user-provided value does not equal the value of the matched input."> */
    return `${s(name)} komt niet overeen.`
    /* </i18n> */
  },

  /**
   * The value is not a valid date
   * @see {@link https://docs.formkit.com/essentials/validation#date-format}
   */
  date_format({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date does not satisfy the date format supplied to the rule."> */
      return `${s(name)} is geen geldige datum, gebruik de notatie ${args[0]}`
      /* </i18n> */
    }
    /* <i18n case="Shown when no date argument was supplied to the rule."> */
    return 'Dit veld is onjuist geconfigureerd en kan niet worden verzonden'
    /* </i18n> */
  },

  /**
   * Is not within expected date range
   * @see {@link https://docs.formkit.com/essentials/validation#date-between}
   */
  date_between({ name, args }) {
    /* <i18n case="Shown when the user-provided date is not between the start and end dates supplied to the rule. "> */
    return `${s(name)} moet tussen ${date(args[0])} en ${date(args[1])} liggen`
    /* </i18n> */
  },

  /**
   * Shown when the user-provided value is not a valid email address.
   * @see {@link https://docs.formkit.com/essentials/validation#email}
   */
  email: 'Vul een geldig e-mailadres in.',

  /**
   * Does not end with the specified value
   * @see {@link https://docs.formkit.com/essentials/validation#ends-with}
   */
  ends_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not end with the substring supplied to the rule."> */
    return `${s(name)} eindigt niet met ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#is}
   */
  is({ name }) {
    /* <i18n case="Shown when the user-provided value is not one of the values supplied to the rule."> */
    return `${s(name)} is geen toegestane waarde.`
    /* </i18n> */
  },

  /**
   * Does not match specified length
   * @see {@link https://docs.formkit.com/essentials/validation#length}
   */
  length({ name, args: [first = 0, second = Infinity] }) {
    const min = first <= second ? first : second
    const max = second >= first ? second : first
    if (min == 1 && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is not at least one character."> */
      return `${s(name)} moet minimaal één teken zijn.`
      /* </i18n> */
    }
    if (min == 0 && max) {
      /* <i18n case="Shown when first argument supplied to the rule is 0, and the user-provided value is longer than the max (the 2nd argument) supplied to the rule."> */
      return `${s(name)} moet kleiner zijn dan of gelijk zijn aan ${max} tekens.`
      /* </i18n> */
    }
    if (min && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is less than the minimum supplied to the rule and there is no maximum supplied to the rule."> */
      return `${s(name)} moet groter zijn dan of gelijk zijn aan ${min} tekens.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the length of the user-provided value is between the two lengths supplied to the rule."> */
    return `${s(name)} moet tussen de ${min} en ${max} tekens bevatten.`
    /* </i18n> */
  },

  /**
   * Value is not a match
   * @see {@link https://docs.formkit.com/essentials/validation#matches}
   */
  matches({ name }) {
    /* <i18n case="Shown when the user-provided value does not match any of the values or RegExp patterns supplied to the rule. "> */
    return `${s(name)} is geen toegestane waarde.`
    /* </i18n> */
  },

  /**
   * Exceeds maximum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#max}
   */
  max({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is longer than the max supplied to the rule."> */
      return `Mag niet meer dan ${args[0]} ${name} hebben.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is greater than the maximum number supplied to the rule."> */
    return `${s(name)} moet kleiner zijn dan of gelijk zijn aan ${args[0]}.`
    /* </i18n> */
  },

  /**
   * The (field-level) value does not match specified mime type
   * @see {@link https://docs.formkit.com/essentials/validation#mime}
   */
  mime({ name, args }) {
    if (!args[0]) {
      /* <i18n case="Shown when no file formats were supplied to the rule."> */
      return 'Geen bestandsformaten toegestaan.'
      /* </i18n> */
    }
    /* <i18n case="Shown when the mime type of user-provided file does not match any mime types supplied to the rule."> */
    return `${s(name)} moet van het type: ${args[0]} zijn`
    /* </i18n> */
  },

  /**
   * Does not fulfill minimum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#min}
   */
  min({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is shorter than the min supplied to the rule."> */
      return `Mag niet minder dan ${args[0]} ${name} hebben.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is less than the minimum number supplied to the rule."> */
    return `${s(name)} moet minimaal ${args[0]} zijn.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#not}
   */
  not({ name, node: { value } }) {
    /* <i18n case="Shown when the user-provided value matches one of the values supplied to (and thus disallowed by) the rule."> */
    return `"${value}" is geen toegestane ${name}.`
    /* </i18n> */
  },

  /**
   *  Is not a number
   * @see {@link https://docs.formkit.com/essentials/validation#number}
   */
  number({ name }) {
    /* <i18n case="Shown when the user-provided value is not a number."> */
    return `${s(name)} moet een getal zijn.`
    /* </i18n> */
  },

  /**
   * Required field.
   * @see {@link https://docs.formkit.com/essentials/validation#required}
   */
  required({ name }) {
    /* <i18n case="Shown when a user does not provide a value to a required input."> */
    return `${s(name)} is verplicht.`
    /* </i18n> */
  },

  /**
   * Does not start with specified value
   * @see {@link https://docs.formkit.com/essentials/validation#starts-with}
   */
  starts_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not start with the substring supplied to the rule."> */
    return `${s(name)} begint niet met ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not a url
   * @see {@link https://docs.formkit.com/essentials/validation#url}
   */
  url() {
    /* <i18n case="Shown when the user-provided value is not a valid url."> */
    return `Voeg een geldige url toe.`
    /* </i18n> */
  },
}

Unmounted field stays in the payload

In the docs section with unmounting fields, once you've added then removed it, unmounted field value stays in the form payload object

FormKit Vue Playground link:
https://formkit.link/c890c42f5345fb63de3df85746778033

i18n: Russian (ru) translation

Hi. I’ve completed the Russian language translation.
I tried to make the translation as versatile as possible. But in Russian, a lot of things depends on the field name, because it affects the endings of other words in the sentence and in some places I had to use more words to connect the meaning of the error message, for example, the word "field" (поле) or "date" (дата).

Therefore, it's good for user that there is an opportunity to make custom error messages :)

import { FormKitValidationMessages } from '@formkit/validation'

/**
 * Here we can import additional helper functions to assist in formatting our
 * language. Feel free to add additional helper methods to libs/formats if it
 * assists in creating good validation messages for your locale.
 */
import { sentence as s, list, date } from '../formatters'
import { FormKitLocaleMessages } from '../i18n'

/**
 * Standard language for interface features.
 * @public
 */
export const ui: FormKitLocaleMessages = {
  /**
   * Shown when a button to remove items is visible.
   */
  remove: 'Удалить',
  /**
   * Shown when all fields are not filled out correctly.
   */
  incomplete: 'Извините, не все поля заполнены верно.',
  /**
   * Shown in a button inside a form to submit the form.
   */
  submit: 'Отправить',
}

/**
 * These are all the possible strings that pertain to validation messages.
 * @public
 */
export const validation: FormKitValidationMessages = {
  /**
   * The value is not an accepted value.
   * @see {@link https://docs.formkit.com/essentials/validation#accepted}
   */
  accepted({ name }): string {
    /* <i18n case="Shown when the user-provided value is not a valid 'accepted' value."> */
    return `Пожалуйста, примите ${name}.`
    /* </i18n> */
  },

  /**
   * The date is not after
   * @see {@link https://docs.formkit.com/essentials/validation#date-after}
   */
  date_after({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not after the date supplied to the rule."> */
      return `Дата ${s(name)} должна быть позже ${date(args[0])}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not after today's date, since no date was supplied to the rule."> */
    return `Дата ${s(name)} должна быть в будущем.`
    /* </i18n> */
  },

  /**
   * The value is not a letter.
   * @see {@link https://docs.formkit.com/essentials/validation#alpha}
   */
  alpha({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphabetical characters."> */
    return `Поле ${s(name)} может содержать только буквы.`
    /* </i18n> */
  },

  /**
   * The value is not alphanumeric
   * @see {@link https://docs.formkit.com/essentials/validation#alphanumeric}
   */
  alphanumeric({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphanumeric characters."> */
    return `Поле ${s(name)} может содержать только буквы и цифры.`
    /* </i18n> */
  },

  /**
   * The date is not before
   * @see {@link https://docs.formkit.com/essentials/validation#date-before}
   */
  date_before({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not before the date supplied to the rule."> */
      return `Дата ${s(name)} должна быть раньше ${date(args[0])}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not before today's date, since no date was supplied to the rule."> */
    return `Дата ${s(name)} должна быть в прошлом.`
    /* </i18n> */
  },

  /**
   * The value is not between two numbers
   * @see {@link https://docs.formkit.com/essentials/validation#between}
   */
  between({ name, args }) {
    if (isNaN(args[0]) || isNaN(args[1])) {
      /* <i18n case="Shown when any of the arguments supplied to the rule were not a number."> */
      return `Это поле заполнено неверно и не может быть отправлено.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is not between two numbers."> */
    return `Поле ${s(name)} должно быть между ${args[0]} и ${args[1]}.`
    /* </i18n> */
  },

  /**
   * The confirmation field does not match
   * @see {@link https://docs.formkit.com/essentials/validation#confirm}
   */
  confirm({ name }) {
    /* <i18n case="Shown when the user-provided value does not equal the value of the matched input."> */
    return `Поле ${s(name)} не совпадает.`
    /* </i18n> */
  },

  /**
   * The value is not a valid date
   * @see {@link https://docs.formkit.com/essentials/validation#date-format}
   */
  date_format({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date does not satisfy the date format supplied to the rule."> */
      return `Поле ${s(name)} имеет неверную дату. Пожалуйста, используйте формат ${args[0]}`
      /* </i18n> */
    }
    /* <i18n case="Shown when no date argument was supplied to the rule."> */
    return 'Это поле заполнено неверно и не может быть отправлено.'
    /* </i18n> */
  },

  /**
   * Is not within expected date range
   * @see {@link https://docs.formkit.com/essentials/validation#date-between}
   */
  date_between({ name, args }) {
    /* <i18n case="Shown when the user-provided date is not between the start and end dates supplied to the rule. "> */
    return `Дата ${s(name)} должна быть между ${date(args[0])} и ${date(args[1])}`
    /* </i18n> */
  },

  /**
   * Shown when the user-provided value is not a valid email address.
   * @see {@link https://docs.formkit.com/essentials/validation#email}
   */
  email: 'Пожалуйста, введите действительный электронный адрес.',

  /**
   * Does not end with the specified value
   * @see {@link https://docs.formkit.com/essentials/validation#ends-with}
   */
  ends_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not end with the substring supplied to the rule."> */
    return `Поле ${s(name)} не должно заканчиваться на ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#is}
   */
  is({ name }) {
    /* <i18n case="Shown when the user-provided value is not one of the values supplied to the rule."> */
    return `Поле ${s(name)} имеет неподустимое значение.`
    /* </i18n> */
  },

  /**
   * Does not match specified length
   * @see {@link https://docs.formkit.com/essentials/validation#length}
   */
  length({ name, args: [first = 0, second = Infinity] }) {
    const min = first <= second ? first : second
    const max = second >= first ? second : first
    if (min == 1 && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is not at least one character."> */
      return `Поле ${s(name)} должно содержать минимум один символ.`
      /* </i18n> */
    }
    if (min == 0 && max) {
      /* <i18n case="Shown when first argument supplied to the rule is 0, and the user-provided value is longer than the max (the 2nd argument) supplied to the rule."> */
      return `Длина поля ${s(name)} должна быть меньше или равна ${max} символам.`
      /* </i18n> */
    }
    if (min && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is less than the minimum supplied to the rule and there is no maximum supplied to the rule."> */
      return `Длина поля ${s(name)} должна быть больше или равна ${min} символам.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the length of the user-provided value is between the two lengths supplied to the rule."> */
    return `Длина поля ${s(name)} должна быть между ${min} и ${max} символами.`
    /* </i18n> */
  },

  /**
   * Value is not a match
   * @see {@link https://docs.formkit.com/essentials/validation#matches}
   */
  matches({ name }) {
    /* <i18n case="Shown when the user-provided value does not match any of the values or RegExp patterns supplied to the rule. "> */
    return `Поле ${s(name)} имеет недопустимое значение.`
    /* </i18n> */
  },

  /**
   * Exceeds maximum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#max}
   */
  max({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is longer than the max supplied to the rule."> */
      return `Не может быть выбрано больше, чем ${args[0]} ${name}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is greater than the maximum number supplied to the rule."> */
    return `Поле ${s(name)} должно быть меньше или равно ${args[0]}.`
    /* </i18n> */
  },

  /**
   * The (field-level) value does not match specified mime type
   * @see {@link https://docs.formkit.com/essentials/validation#mime}
   */
  mime({ name, args }) {
    if (!args[0]) {
      /* <i18n case="Shown when no file formats were supplied to the rule."> */
      return 'Не указаны поддержиавемые форматы файла.'
      /* </i18n> */
    }
    /* <i18n case="Shown when the mime type of user-provided file does not match any mime types supplied to the rule."> */
    return `Формат файла в поле ${s(name)} должен быть: ${args[0]}.`
    /* </i18n> */
  },

  /**
   * Does not fulfill minimum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#min}
   */
  min({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is shorter than the min supplied to the rule."> */
      return `Не может быть выбрано меньше, чем ${args[0]} ${name}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is less than the minimum number supplied to the rule."> */
    return `Поле ${s(name)} должно быть не менее, чем ${args[0]}.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#not}
   */
  not({ name, node: { value } }) {
    /* <i18n case="Shown when the user-provided value matches one of the values supplied to (and thus disallowed by) the rule."> */
    return `“${value}” не поддерживается в поле ${name}.`
    /* </i18n> */
  },

  /**
   *  Is not a number
   * @see {@link https://docs.formkit.com/essentials/validation#number}
   */
  number({ name }) {
    /* <i18n case="Shown when the user-provided value is not a number."> */
    return `Поле ${s(name)} должно быть числом.`
    /* </i18n> */
  },

  /**
   * Required field.
   * @see {@link https://docs.formkit.com/essentials/validation#required}
   */
  required({ name }) {
    /* <i18n case="Shown when a user does not provide a value to a required input."> */
    return `Поле ${s(name)} обязательно для заполнения.`
    /* </i18n> */
  },

  /**
   * Does not start with specified value
   * @see {@link https://docs.formkit.com/essentials/validation#starts-with}
   */
  starts_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not start with the substring supplied to the rule."> */
    return `Поле ${s(name)} должно начинаться с ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not a url
   * @see {@link https://docs.formkit.com/essentials/validation#url}
   */
  url() {
    /* <i18n case="Shown when the user-provided value is not a valid url."> */
    return `Пожалуйста, введите действительный URL адрес.`
    /* </i18n> */
  },
}

Buttons should have `ignore=true` enabled by default.

Describe the bug
Usually people don’t want their button's value included in the output of the form data. We should default to this behavior.

Schema calls to resolveComponent should happen in render function

Originally from: @digitalkaoz

Currently when the schema is re-parsed (by changing the schema) and the schema contains components ($cmp) the schema parser calls resolveComponent. Instead resolveComponent should be called in the render function.

FormKit Vue Playground link:
https://formkit.link/d2a2981d9f4ba2b5bd670eb3fe5885d1

Syntactic sugar for FormKit components in the schema.

Originally: @digitalkaoz

It would be nice to have syntactic sugar for the schema components. Instead of:

[{
  $cmp: 'FormKit',
  props: {
    type: 'checkbox',
    options: { foo: 'Bar' }
  }
}]

The proposed sugar is:

[{
  $formkit: 'checkbox',
  options: { foo: 'Bar' }
}]

Suggestion: Wrapper classes for errors and messages

Hi, I have a suggestion regarding the styling of fields -> to add additional classes to .formkit-outer if there's a validation error or some other message displayed. Something like ".has-messages.has-messages--error".

This is currently not a case, but it would make it easier for developers to additionally point out which forms are invalid by outlining inputs or some other css property...

FormKit core vue plugin is not exported

Describe the bug
We are not currently exporting the FormKit plugin that provides bindings between FormKit core and Vue. This is required for users who want to write their own config files.

vitesse-formkit error when build

Hi, developer mode works as a charm, but, when i tried to make a build terminal shows this error: '@formkit/vue' does not provide an export named 'plugin'

Minimal reproduction: https://github.com/serggiocaramello/vitesse-formkit-issue

Full error message:

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
(node:8912) UnhandledPromiseRejectionWarning: file:///C:/folder/vitesse-formkit/.vite-ssg-temp/main.mjs:20
import { plugin, defaultConfig } from "@formkit/vue";
^^^^^^
SyntaxError: The requested module '@formkit/vue' does not provide an export named 'plugin'
at ModuleJob._instantiate (internal/modules/esm/module_job.js:124:21)
at async ModuleJob.run (internal/modules/esm/module_job.js:179:5)
at async Loader.import (internal/modules/esm/loader.js:178:24)
at async build (C:\folder\vitesse-formkit\node_modules.pnpm\[email protected]_1ede6668370ad42aad1df87e2fa73e29\node_modules\vite-ssg\dist\node\cli.cjs:180:87)
at async Object.handler (C:\folder\vitesse-formkit\node_modules.pnpm\[email protected]_1ede6668370ad42aad1df87e2fa73e29\node_modules\vite-ssg\dist\node\cli.cjs:314:3)
(Use node --trace-warnings ... to show where the warning was created)
(node:8912) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:8912) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Desktop

```
OS: Windows 10 Pro 21 H1
```
```
Browser: Firefox 97.0
```

Adding global validation messages overrides all default messages

Describe the bug
When following the docs at https://docs.formkit.com/essentials/validation under the headline "Global validation message" to add a custom validation message for a built in or custom validation it will override all the default validation messages for the en locale. This is because the locales.en object is being fully overridden and is not merging with the default ui or validation objects. The current workaround is to import the en locale and extend when defining custom validation messages

import { en } from '@formkit/i18n'

const app = createApp(App).use(
    FormKitPlugin,
    defaultFormKitConfig({
      locales: {
        en: {
          ...en,
          validation: {
            ...en.validation,
            ...customFormKitValidationMessages,
          },
        },
      },
    })
  )

Reproduction

Have a <FormKit /> input with required validation.
Trigger validation and message should read as: ${input.name} is required.
In FormKitPlugin setup include the defaultFormKitConfig and define the following object:

locales: {
  en: {
    validation: {
      foo() { return 'bar' }
    }
  }
}

Reload browser and trigger validation. You will see the following message: This field is not valid.

Desktop (please complete the following information):

OS: macOS Monterey 12.1
Browser: Chrome
Version 97

i18n: Turkish (tr) translation

I’ve completed the Turkish language translation. For now it is %90 accurate, yet I will try to make it better while using it.

import { FormKitValidationMessages } from '@formkit/validation'

/**
 * Here we can import additional helper functions to assist in formatting our
 * language. Feel free to add additional helper methods to libs/formats if it
 * assists in creating good validation messages for your locale.
 */
import { sentence as s, list, date } from '../formatters'
import { FormKitLocaleMessages } from '../i18n'

/**
 * Standard language for interface features.
 * @public
 */
export const ui: FormKitLocaleMessages = {
  /**
   * Shown when a button to remove items is visible.
   */
  remove: 'Kaldır',
  /**
   * Shown when all fields are not filled out correctly.
   */
  incomplete: 'Maalesef, tüm alanlar doğru doldurulmadı.',
  /**
   * Shown in a button inside a form to submit the form.
   */
  submit: 'Gönder',
}

/**
 * These are all the possible strings that pertain to validation messages.
 * @public
 */
export const validation: FormKitValidationMessages = {
  /**
   * The value is not an accepted value.
   * @see {@link https://docs.formkit.com/essentials/validation#accepted}
   */
  accepted({ name }): string {
    /* <i18n case="Shown when the user-provided value is not a valid 'accepted' value."> */
    return `Lütfen ${name}'yi kabul edin.`
    /* </i18n> */
  },

  /**
   * The date is not after
   * @see {@link https://docs.formkit.com/essentials/validation#date-after}
   */
  date_after({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not after the date supplied to the rule."> */
      return `${s(name)} ${date(args[0])}'den sonra olmalıdır.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not after today's date, since no date was supplied to the rule."> */
    return `${s(name)} gelecekte bir zaman olmalıdır.`
    /* </i18n> */
  },

  /**
   * The value is not a letter.
   * @see {@link https://docs.formkit.com/essentials/validation#alpha}
   */
  alpha({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphabetical characters."> */
    return `${s(name)} sadece alfabetik karakterler içerebilir.`
    /* </i18n> */
  },

  /**
   * The value is not alphanumeric
   * @see {@link https://docs.formkit.com/essentials/validation#alphanumeric}
   */
  alphanumeric({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphanumeric characters."> */
    return `${s(name)} sadece alfabetik karakterler ve sayı içerebilir.`
    /* </i18n> */
  },

  /**
   * The date is not before
   * @see {@link https://docs.formkit.com/essentials/validation#date-before}
   */
  date_before({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not before the date supplied to the rule."> */
      return `${s(name)} ${date(args[0])} tarihinden önce olmalı.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not before today's date, since no date was supplied to the rule."> */
    return `${s(name)} geçmişte olmalı.`
    /* </i18n> */
  },

  /**
   * The value is not between two numbers
   * @see {@link https://docs.formkit.com/essentials/validation#between}
   */
  between({ name, args }) {
    if (isNaN(args[0]) || isNaN(args[1])) {
      /* <i18n case="Shown when any of the arguments supplied to the rule were not a number."> */
      return `Alan yanlış yapılandırılmış ve gönderilemez.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is not between two numbers."> */
    return `${s(name)} ${args[0]} ve ${args[1]} aralığında olmalı.`
    /* </i18n> */
  },

  /**
   * The confirmation field does not match
   * @see {@link https://docs.formkit.com/essentials/validation#confirm}
   */
  confirm({ name }) {
    /* <i18n case="Shown when the user-provided value does not equal the value of the matched input."> */
    return `${s(name)} eşleşmiyor.`
    /* </i18n> */
  },

  /**
   * The value is not a valid date
   * @see {@link https://docs.formkit.com/essentials/validation#date-format}
   */
  date_format({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date does not satisfy the date format supplied to the rule."> */
      return `${s(name)} geçerli bir tarih değil, lütfen ${args[0]} biçimini kullanın.`
      /* </i18n> */
    }
    /* <i18n case="Shown when no date argument was supplied to the rule."> */
    return 'Alan yanlış yapılandırılmış ve gönderilemez.'
    /* </i18n> */
  },

  /**
   * Is not within expected date range
   * @see {@link https://docs.formkit.com/essentials/validation#date-between}
   */
  date_between({ name, args }) {
    /* <i18n case="Shown when the user-provided date is not between the start and end dates supplied to the rule. "> */
    return `${s(name)}, ${date(args[0])} ve ${date(args[1])} aralığında olmalı.`
    /* </i18n> */
  },

  /**
   * Shown when the user-provided value is not a valid email address.
   * @see {@link https://docs.formkit.com/essentials/validation#email}
   */
  email: 'Lütfen geçerli bir e-mail adresi girin.',

  /**
   * Does not end with the specified value
   * @see {@link https://docs.formkit.com/essentials/validation#ends-with}
   */
  ends_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not end with the substring supplied to the rule."> */
    return `${s(name)} ${list(args)} ile bitmiyor.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#is}
   */
  is({ name }) {
    /* <i18n case="Shown when the user-provided value is not one of the values supplied to the rule."> */
    return `${s(name)} izin verilen bir değer değil.`
    /* </i18n> */
  },

  /**
   * Does not match specified length
   * @see {@link https://docs.formkit.com/essentials/validation#length}
   */
  length({ name, args: [first = 0, second = Infinity] }) {
    const min = first <= second ? first : second
    const max = second >= first ? second : first
    if (min == 1 && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is not at least one character."> */
      return `${s(name)} en azından bir karakter uzunluğunda olmalı.`
      /* </i18n> */
    }
    if (min == 0 && max) {
      /* <i18n case="Shown when first argument supplied to the rule is 0, and the user-provided value is longer than the max (the 2nd argument) supplied to the rule."> */
      return `${s(name)} ${max}'e eşit veya daha küçük olmalı.`
      /* </i18n> */
    }
    if (min && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is less than the minimum supplied to the rule and there is no maximum supplied to the rule."> */
      return `${s(name)} ${min}'e eşit veya daha büyük olmalı.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the length of the user-provided value is between the two lengths supplied to the rule."> */
    return `${s(name)}, ${min} ve ${max} karakter uzunluğu aralığında olmalı.`
    /* </i18n> */
  },

  /**
   * Value is not a match
   * @see {@link https://docs.formkit.com/essentials/validation#matches}
   */
  matches({ name }) {
    /* <i18n case="Shown when the user-provided value does not match any of the values or RegExp patterns supplied to the rule. "> */
    return `${s(name)} izin verilen bir değer değil.`
    /* </i18n> */
  },

  /**
   * Exceeds maximum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#max}
   */
  max({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is longer than the max supplied to the rule."> */
      return `${name}'in uzunluğu ${args[0]}'dan daha uzun olamaz.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is greater than the maximum number supplied to the rule."> */
    return `${s(name)} en azından ${args[0]} uzunluğunda veya ona eşit olmalı.`
    /* </i18n> */
  },

  /**
   * The (field-level) value does not match specified mime type
   * @see {@link https://docs.formkit.com/essentials/validation#mime}
   */
  mime({ name, args }) {
    if (!args[0]) {
      /* <i18n case="Shown when no file formats were supplied to the rule."> */
      return 'Hiçbir dosya türüne izin verilmez.'
      /* </i18n> */
    }
    /* <i18n case="Shown when the mime type of user-provided file does not match any mime types supplied to the rule."> */
    return `${s(name)} şu tiplerden biri olmalı: ${args[0]}`
    /* </i18n> */
  },

  /**
   * Does not fulfill minimum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#min}
   */
  min({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is shorter than the min supplied to the rule."> */
      return `${name}'in uzunluğu ${args[0]}'dan daha kısa olamaz.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is less than the minimum number supplied to the rule."> */
    return `${s(name)} en azından ${args[0]} uzunluğunda olmalı.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#not}
   */
  not({ name, node: { value } }) {
    /* <i18n case="Shown when the user-provided value matches one of the values supplied to (and thus disallowed by) the rule."> */
    return `“${value}” ${name} olamaz.`
    /* </i18n> */
  },

  /**
   *  Is not a number
   * @see {@link https://docs.formkit.com/essentials/validation#number}
   */
  number({ name }) {
    /* <i18n case="Shown when the user-provided value is not a number."> */
    return `${s(name)} sayı olmalı.`
    /* </i18n> */
  },

  /**
   * Required field.
   * @see {@link https://docs.formkit.com/essentials/validation#required}
   */
  required({ name }) {
    /* <i18n case="Shown when a user does not provide a value to a required input."> */
    return `${s(name)} gerekli.`
    /* </i18n> */
  },

  /**
   * Does not start with specified value
   * @see {@link https://docs.formkit.com/essentials/validation#starts-with}
   */
  starts_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not start with the substring supplied to the rule."> */
    return `${s(name)} ${list(args)} ile başlamıyor.`
    /* </i18n> */
  },

  /**
   * Is not a url
   * @see {@link https://docs.formkit.com/essentials/validation#url}
   */
  url() {
    /* <i18n case="Shown when the user-provided value is not a valid url."> */
    return `Lütfen geçerli bir url dahil edin.`
    /* </i18n> */
  },
}

French Locale

import { FormKitValidationMessages } from '@formkit/validation'

/**
 * Here we can import additional helper functions to assist in formatting our
 * language. Feel free to add additional helper methods to libs/formats if it
 * assists in creating good validation messages for your locale.
 */
import { sentence as s, list, date } from '../formatters'
import { FormKitLocaleMessages } from '../i18n'

/**
 * Standard language for interface features.
 * @public
 */
export const ui: FormKitLocaleMessages = {
  /**
   * Shown when a button to remove items is visible.
   */
  remove: 'Supprimer',
  /**
   * Shown when all fields are not filled out correctly.
   */
  incomplete: 'Désolé, tous les champs ne sont pas remplit correctement.',
  /**
   * Shown in a button inside a form to submit the form.
   */
  submit: 'Valider',
}

/**
 * These are all the possible strings that pertain to validation messages.
 * @public
 */
export const validation: FormKitValidationMessages = {
  /**
   * The value is not an accepted value.
   * @see {@link https://docs.formkit.com/essentials/validation#accepted}
   */
  accepted({ name }): string {
    /* <i18n case="Shown when the user-provided value is not a valid 'accepted' value."> */
    return `Veuillez accepter le ${name}.`
    /* </i18n> */
  },

  /**
   * The date is not after
   * @see {@link https://docs.formkit.com/essentials/validation#date-after}
   */
  date_after({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not after the date supplied to the rule."> */
      return `${s(name)} doit être après ${date(args[0])}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not after today's date, since no date was supplied to the rule."> */
    return `${s(name)} doit être dans le futur.`
    /* </i18n> */
  },

  /**
   * The value is not a letter.
   * @see {@link https://docs.formkit.com/essentials/validation#alpha}
   */
  alpha({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphabetical characters."> */
    return `${s(name)} ne peut contenir que des caractères alphabétiques.`
    /* </i18n> */
  },

  /**
   * The value is not alphanumeric
   * @see {@link https://docs.formkit.com/essentials/validation#alphanumeric}
   */
  alphanumeric({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphanumeric characters."> */
    return `${s(name)} ne peut contenir que des lettres et des chiffres.`
    /* </i18n> */
  },

  /**
   * The date is not before
   * @see {@link https://docs.formkit.com/essentials/validation#date-before}
   */
  date_before({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not before the date supplied to the rule."> */
      return `${s(name)} doit être avant ${date(args[0])}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not before today's date, since no date was supplied to the rule."> */
    return `${s(name)} doit être dans le passé.`
    /* </i18n> */
  },

  /**
   * The value is not between two numbers
   * @see {@link https://docs.formkit.com/essentials/validation#between}
   */
  between({ name, args }) {
    if (isNaN(args[0]) || isNaN(args[1])) {
      /* <i18n case="Shown when any of the arguments supplied to the rule were not a number."> */
      return `Ce champ a été configuré de manière incorrecte et ne peut pas être soumis.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is not between two numbers."> */
    return `${s(name)} doit être comprise entre ${args[0]} et ${args[1]}.`
    /* </i18n> */
  },

  /**
   * The confirmation field does not match
   * @see {@link https://docs.formkit.com/essentials/validation#confirm}
   */
  confirm({ name }) {
    /* <i18n case="Shown when the user-provided value does not equal the value of the matched input."> */
    return `${s(name)} ne correspond pas.`
    /* </i18n> */
  },

  /**
   * The value is not a valid date
   * @see {@link https://docs.formkit.com/essentials/validation#date-format}
   */
  date_format({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date does not satisfy the date format supplied to the rule."> */
      return `${s(name)} n'est pas une date valide, veuillez utiliser le format ${args[0]}`
      /* </i18n> */
    }
    /* <i18n case="Shown when no date argument was supplied to the rule."> */
    return 'Ce champ a été configuré de manière incorrecte et ne peut pas être soumis.'
    /* </i18n> */
  },

  /**
   * Is not within expected date range
   * @see {@link https://docs.formkit.com/essentials/validation#date-between}
   */
  date_between({ name, args }) {
    /* <i18n case="Shown when the user-provided date is not between the start and end dates supplied to the rule. "> */
    return `${s(name)} doit être comprise entre ${date(args[0])} et ${date(args[1])}`
    /* </i18n> */
  },

  /**
   * Shown when the user-provided value is not a valid email address.
   * @see {@link https://docs.formkit.com/essentials/validation#email}
   */
  email: 'Veuillez saisir une adresse email valide.',

  /**
   * Does not end with the specified value
   * @see {@link https://docs.formkit.com/essentials/validation#ends-with}
   */
  ends_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not end with the substring supplied to the rule."> */
    return `${s(name)} ne se termine pas par ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#is}
   */
  is({ name }) {
    /* <i18n case="Shown when the user-provided value is not one of the values supplied to the rule."> */
    return `${s(name)} n'est pas une valeur autorisée.`
    /* </i18n> */
  },

  /**
   * Does not match specified length
   * @see {@link https://docs.formkit.com/essentials/validation#length}
   */
  length({ name, args: [first = 0, second = Infinity] }) {
    const min = first <= second ? first : second
    const max = second >= first ? second : first
    if (min == 1 && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is not at least one character."> */
      return `${s(name)} doit comporter au moins un caractère.`
      /* </i18n> */
    }
    if (min == 0 && max) {
      /* <i18n case="Shown when first argument supplied to the rule is 0, and the user-provided value is longer than the max (the 2nd argument) supplied to the rule."> */
      return `${s(name)} doit être inférieur ou égal à ${max} caractères.`
      /* </i18n> */
    }
    if (min && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is less than the minimum supplied to the rule and there is no maximum supplied to the rule."> */
      return `${s(name)} doit être supérieur ou égal à ${min} caractères.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the length of the user-provided value is between the two lengths supplied to the rule."> */
    return `${s(name)} doit être comprise entre ${min} et ${max} caractères.`
    /* </i18n> */
  },

  /**
   * Value is not a match
   * @see {@link https://docs.formkit.com/essentials/validation#matches}
   */
  matches({ name }) {
    /* <i18n case="Shown when the user-provided value does not match any of the values or RegExp patterns supplied to the rule. "> */
    return `${s(name)} n'est pas une valeur autorisée.`
    /* </i18n> */
  },

  /**
   * Exceeds maximum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#max}
   */
  max({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is longer than the max supplied to the rule."> */
      return `Ne peut pas avoir plus de ${args[0]} ${name}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is greater than the maximum number supplied to the rule."> */
    return `${s(name)} doit être inférieur ou égal à ${args[0]}.`
    /* </i18n> */
  },

  /**
   * The (field-level) value does not match specified mime type
   * @see {@link https://docs.formkit.com/essentials/validation#mime}
   */
  mime({ name, args }) {
    if (!args[0]) {
      /* <i18n case="Shown when no file formats were supplied to the rule."> */
      return 'Aucun format de fichier n'est autorisé'
      /* </i18n> */
    }
    /* <i18n case="Shown when the mime type of user-provided file does not match any mime types supplied to the rule."> */
    return `${s(name)} doit être du type: ${args[0]}`
    /* </i18n> */
  },

  /**
   * Does not fulfill minimum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#min}
   */
  min({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is shorter than the min supplied to the rule."> */
      return `Ne peut pas avoir moins de ${args[0]} ${name}.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is less than the minimum number supplied to the rule."> */
    return `${s(name)} doit être au moins de ${args[0]}.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#not}
   */
  not({ name, node: { value } }) {
    /* <i18n case="Shown when the user-provided value matches one of the values supplied to (and thus disallowed by) the rule."> */
    return `“${value}” n'est pas un ${name} autorisé.`
    /* </i18n> */
  },

  /**
   *  Is not a number
   * @see {@link https://docs.formkit.com/essentials/validation#number}
   */
  number({ name }) {
    /* <i18n case="Shown when the user-provided value is not a number."> */
    return `${s(name)} doit être un nombre.`
    /* </i18n> */
  },

  /**
   * Required field.
   * @see {@link https://docs.formkit.com/essentials/validation#required}
   */
  required({ name }) {
    /* <i18n case="Shown when a user does not provide a value to a required input."> */
    return `${s(name)} est requis.`
    /* </i18n> */
  },

  /**
   * Does not start with specified value
   * @see {@link https://docs.formkit.com/essentials/validation#starts-with}
   */
  starts_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not start with the substring supplied to the rule."> */
    return `${s(name)} ne commence pas par ${list(args)}.`
    /* </i18n> */
  },

  /**
   * Is not a url
   * @see {@link https://docs.formkit.com/essentials/validation#url}
   */
  url() {
    /* <i18n case="Shown when the user-provided value is not a valid url."> */
    return `Veuillez saisir une url valide.`
    /* </i18n> */
  },
}

schema prop should not be interpreted when used in a schema object.

When using the :schema prop we currently interpret the value of the schema prop as schema itself instead of as a raw value.

https://formkit.link/1745cad9cb6c63cabfb6364874a54fb9

Add development plugin with error message decoding

Describe the feature
Currently our error messages are intentionally output as pure integers (for production bundle reasons). Our goal is to implement a plugin the decodes these messages and outputs helpful errors to the console. This plugin could be removed for tree shaking purposes.

Select inputs generated by schema display erratic behavior.

This input doesn't have a proper placeholder, and furthermore has a "randomly" selected input as the value.

FormKit Vue Playground link:
https://formkit.link/61587901255535ac1d755f8e94cda6cc

Length Validation Message out of order

With a validation ruleset as follows:

<FormKit
  type="password"
  name="password"
  label="Password"
  v-model="userDetails.password"
  validation="required|length:64,8"
  validation-behavior="live"
/>

The rendered help error message is:
Password must be between 64 and 8 characters.

Suggest we flip it to Password must be between 8 and 64 characters. with the smaller number first. It's a minor quibble and if you did it this way for a reason feel free to close the issue. It's aligned to the help docs, so your call.

Note: Changing the order of the numbers in the validation field doesn't change the output error message

Children of a list require a validation-label to use validation rules.

List children automatically have their name assigned by their index. However, these "undefined" names actually throw an exception when applied to a validation rule.

https://formkit.link/8191760232be942608ff0b41b8b32b0e

(check the console)

This is resolved if you provide a validation-label prop, but we should have a "fallback" for cases like this — some hyper generic word like "Field" or "Input".

Type Error to adding formKit option to nuxt config file

Describe the bug
A clear and concise description of what the bug is.

I was following the documentation and making configurations for my Nuxt3 project. When I wanted to add formKit property to defineNuxtConfig function parameter. It throws an error like below.

Here is the all nuxt config file:

export default defineNuxtConfig({
  buildModules: ["@pinia/nuxt"],
  modules: ["@formkit/nuxt"],
  formkit: {
    configFile: "./my/custom/location/formkit.config.ts",
  },
  build: {
    postcss: {
      postcssOptions: require("./postcss.config.js"),
    },
  },
  css: ["~/assets/css/tailwind.scss", "~/assets/css/global.scss"],
});

i18n: Persian (fa) translation

I’ve completed the Persian language translation.

import { FormKitValidationMessages } from '@formkit/validation'

/**
 * Here we can import additional helper functions to assist in formatting our
 * language. Feel free to add additional helper methods to libs/formats if it
 * assists in creating good validation messages for your locale.
 */
import { sentence as s, list, date } from '../formatters'
import { FormKitLocaleMessages } from '../i18n'

/**
 * Standard language for interface features.
 * @public
 */
export const ui: FormKitLocaleMessages = {
  /**
   * Shown when a button to remove items is visible.
   */
  remove: 'حذف',
  /**
   * Shown when all fields are not filled out correctly.
   */
  incomplete: 'همه فیلدها به‌درستی پر نشده‌اند',
  /**
   * Shown in a button inside a form to submit the form.
   */
  submit: 'ثبت',
}

/**
 * These are all the possible strings that pertain to validation messages.
 * @public
 */
export const validation: FormKitValidationMessages = {
  /**
   * The value is not an accepted value.
   * @see {@link https://docs.formkit.com/essentials/validation#accepted}
   */
  accepted({ name }): string {
    /* <i18n case="Shown when the user-provided value is not a valid 'accepted' value."> */
    return `لطفاً ${name} را بپذیرید.`
    /* </i18n> */
  },

  /**
   * The date is not after
   * @see {@link https://docs.formkit.com/essentials/validation#date-after}
   */
  date_after({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not after the date supplied to the rule."> */
      return `${s(name)} باید بعد از تاریخ ${date(args[0])} باشد.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not after today's date, since no date was supplied to the rule."> */
    return `${s(name)} باید مربوط به آینده باشد.`
    /* </i18n> */
  },

  /**
   * The value is not a letter.
   * @see {@link https://docs.formkit.com/essentials/validation#alpha}
   */
  alpha({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphabetical characters."> */
    return `${s(name)} فقط میتواند شامل حروف الفبا باشد.`
    /* </i18n> */
  },

  /**
   * The value is not alphanumeric
   * @see {@link https://docs.formkit.com/essentials/validation#alphanumeric}
   */
  alphanumeric({ name }) {
    /* <i18n case="Shown when the user-provided value contains non-alphanumeric characters."> */
    return `${s(name)} فقط میتواند شامل حروف و اعداد باشد.`
    /* </i18n> */
  },

  /**
   * The date is not before
   * @see {@link https://docs.formkit.com/essentials/validation#date-before}
   */
  date_before({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date is not before the date supplied to the rule."> */
      return `${s(name)} باید قبل از تاریخ ${date(args[0])} باشد.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided date is not before today's date, since no date was supplied to the rule."> */
    return `${s(name)} باید مربوط به گذشته باشد.`
    /* </i18n> */
  },

  /**
   * The value is not between two numbers
   * @see {@link https://docs.formkit.com/essentials/validation#between}
   */
  between({ name, args }) {
    if (isNaN(args[0]) || isNaN(args[1])) {
      /* <i18n case="Shown when any of the arguments supplied to the rule were not a number."> */
      return `این فیلد به اشتباه پیکربندی شده است و قابل ارسال نیست`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is not between two numbers."> */
    return `${s(name)} باید بین ${args[0]} و ${args[1]} باشد.`
    /* </i18n> */
  },

  /**
   * The confirmation field does not match
   * @see {@link https://docs.formkit.com/essentials/validation#confirm}
   */
  confirm({ name }) {
    /* <i18n case="Shown when the user-provided value does not equal the value of the matched input."> */
    return `${s(name)} مطابقت ندارد.`
    /* </i18n> */
  },

  /**
   * The value is not a valid date
   * @see {@link https://docs.formkit.com/essentials/validation#date-format}
   */
  date_format({ name, args }) {
    if (Array.isArray(args) && args.length) {
      /* <i18n case="Shown when the user-provided date does not satisfy the date format supplied to the rule."> */
      return `${s(name)} تاریخ معتبری نیست، لطفاً از قالب ${args[0]} استفاده کنید
`
      /* </i18n> */
    }
    /* <i18n case="Shown when no date argument was supplied to the rule."> */
    return 'این فیلد به اشتباه پیکربندی شده است و قابل ارسال نیست'
    /* </i18n> */
  },

  /**
   * Is not within expected date range
   * @see {@link https://docs.formkit.com/essentials/validation#date-between}
   */
  date_between({ name, args }) {
    /* <i18n case="Shown when the user-provided date is not between the start and end dates supplied to the rule. "> */
    return `${s(name)} باید بین ${date(args[0])} و ${date(args[1])} باشد.`
    /* </i18n> */
  },

  /**
   * Shown when the user-provided value is not a valid email address.
   * @see {@link https://docs.formkit.com/essentials/validation#email}
   */
  email: 'لطفا آدرس ایمیل معتبر وارد کنید.',

  /**
   * Does not end with the specified value
   * @see {@link https://docs.formkit.com/essentials/validation#ends-with}
   */
  ends_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not end with the substring supplied to the rule."> */
    return `${s(name)} باید به ${list(args)} ختم شود.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#is}
   */
  is({ name }) {
    /* <i18n case="Shown when the user-provided value is not one of the values supplied to the rule."> */
    return `${s(name)} مجاز نیست.`
    /* </i18n> */
  },

  /**
   * Does not match specified length
   * @see {@link https://docs.formkit.com/essentials/validation#length}
   */
  length({ name, args: [first = 0, second = Infinity] }) {
    const min = first <= second ? first : second
    const max = second >= first ? second : first
    if (min == 1 && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is not at least one character."> */
      return `${s(name)} باید حداقل یک کاراکتر باشد.`
      /* </i18n> */
    }
    if (min == 0 && max) {
      /* <i18n case="Shown when first argument supplied to the rule is 0, and the user-provided value is longer than the max (the 2nd argument) supplied to the rule."> */
      return `${s(name)} باید کمتر یا برابر با ${max} کاراکتر باشد.`
      /* </i18n> */
    }
    if (min && max === Infinity) {
      /* <i18n case="Shown when the length of the user-provided value is less than the minimum supplied to the rule and there is no maximum supplied to the rule."> */
      return `${s(name)} باید بزرگتر یا برابر با ${min} کاراکتر باشد.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the length of the user-provided value is between the two lengths supplied to the rule."> */
    return `${s(name)} باید بین ${min} و ${max} کاراکتر باشد.`
    /* </i18n> */
  },

  /**
   * Value is not a match
   * @see {@link https://docs.formkit.com/essentials/validation#matches}
   */
  matches({ name }) {
    /* <i18n case="Shown when the user-provided value does not match any of the values or RegExp patterns supplied to the rule. "> */
    return `${s(name)} مجاز نیست.`
    /* </i18n> */
  },

  /**
   * Exceeds maximum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#max}
   */
  max({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is longer than the max supplied to the rule."> */
      return `${name} نمی تواند بیش از ${args[0]} باشد.`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is greater than the maximum number supplied to the rule."> */
    return `${s(name)} باید کمتر یا برابر با ${args[0]} باشد.`
    /* </i18n> */
  },

  /**
   * The (field-level) value does not match specified mime type
   * @see {@link https://docs.formkit.com/essentials/validation#mime}
   */
  mime({ name, args }) {
    if (!args[0]) {
      /* <i18n case="Shown when no file formats were supplied to the rule."> */
      return 'فرمت فایل مجاز نیست.'
      /* </i18n> */
    }
    /* <i18n case="Shown when the mime type of user-provided file does not match any mime types supplied to the rule."> */
    return `${s(name)} باید از این نوع باشد: ${args[0]}`
    /* </i18n> */
  },

  /**
   * Does not fulfill minimum allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#min}
   */
  min({ name, node: { value }, args }) {
    if (Array.isArray(value)) {
      /* <i18n case="Shown when the length of the array of user-provided values is shorter than the min supplied to the rule."> */
      return `${name} نمی تواند کمتر از ${args[0]} باشد.
`
      /* </i18n> */
    }
    /* <i18n case="Shown when the user-provided value is less than the minimum number supplied to the rule."> */
    return `${s(name)} باید حداقل ${args[0]} باشد.`
    /* </i18n> */
  },

  /**
   * Is not an allowed value
   * @see {@link https://docs.formkit.com/essentials/validation#not}
   */
  not({ name, node: { value } }) {
    /* <i18n case="Shown when the user-provided value matches one of the values supplied to (and thus disallowed by) the rule."> */
    return `"${value}" یک ${name} مجاز نیست.`
    /* </i18n> */
  },

  /**
   *  Is not a number
   * @see {@link https://docs.formkit.com/essentials/validation#number}
   */
  number({ name }) {
    /* <i18n case="Shown when the user-provided value is not a number."> */
    return `${s(name)} باید عدد باشد.`
    /* </i18n> */
  },

  /**
   * Required field.
   * @see {@link https://docs.formkit.com/essentials/validation#required}
   */
  required({ name }) {
    /* <i18n case="Shown when a user does not provide a value to a required input."> */
    return `پر کردن ${s(name)} اجباری است.`
    /* </i18n> */
  },

  /**
   * Does not start with specified value
   * @see {@link https://docs.formkit.com/essentials/validation#starts-with}
   */
  starts_with({ name, args }) {
    /* <i18n case="Shown when the user-provided value does not start with the substring supplied to the rule."> */
    return `${s(name)} باید با ${list(args)} شروع شود.`
    /* </i18n> */
  },

  /**
   * Is not a url
   * @see {@link https://docs.formkit.com/essentials/validation#url}
   */
  url() {
    /* <i18n case="Shown when the user-provided value is not a valid url."> */
    return `لطفاً آدرس اینترنتی معتبر وارد کنید.`
    /* </i18n> */
  },
}

Genesis theme: --fk-placeholder-color is not defined

Describe the bug
Placeholders for select inputs dont look like select inputs:

Reproduction

https://formkit.link/514c26b6a049e7f6f259c6212254d2cc

Localization formatter helper functions are currently not exported

At the moment it's not possible to use the formatter helper functions, because there are not available as exports.
The use case would be for example, when someone want to create a own custom locale file.

formkit / formkit Goto Github PK

formkit's Introduction

FormKit

Vue 3 form development. 10x faster.

Sponsors

💎 Platinum sponsors

🥇 Gold sponsors

🥈 Silver sponsors

🥉 Bronze sponsors

Backers

Key features

☝️ Comprehensive package

😎 Developer happiness

🎯 Validation built in

⚡️ Blazing-fast Performance

🔌 Plugin system

✨ Generate forms

🎨 Robust Theming

🌐 Internationalization

Contributing

Contributors

License

formkit's People

Contributors

Stargazers

Watchers

Forkers

formkit's Issues

Reproduction

Changes

Potential Improvements

Validation File

Recommend Projects

Recommend Topics

Recommend Org