app/frontend/shared/form/i18n/locales.ts
// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
import type { FormKitValidationMessages } from '@formkit/validation'
import { createMessageName } from '@formkit/validation'
import type { FormKitLocale } from '@formkit/i18n'
import { i18n } from '#shared/i18n.ts'
import { commaSeparatedList, order } from '#shared/utils/formatter.ts'
import type { ComputedRef } from 'vue'
interface FormKitLocaleExtended extends FormKitLocale {
validation: FormKitValidationMessages
}
// TODO: Use translateLabel for all validation messages if we stay with the labels inside of the messages. It's a open
// question if we want use them inside of the messages.
const loadLocales = (): FormKitLocaleExtended => {
return {
ui: {
/**
* Shown on a button for adding additional items.
*/
add: () => i18n.t('Add'),
/**
* Shown when a button to remove items is visible.
*/
remove: () => i18n.t('Remove'),
/**
* Shown when there are multiple items to remove at the same time.
*/
removeAll: () => i18n.t('Remove all'),
/**
* Shown when all fields are not filled out correctly.
*/
incomplete: () =>
i18n.t('Sorry, not all fields are filled out correctly.'),
/**
* Shown in a button inside a form to submit the form.
*/
submit: () => i18n.t('Submit'),
/**
* Shown when no files are selected.
*/
noFiles: () => i18n.t('No file chosen.'),
/**
* Shown on buttons that move fields up in a list.
*/
moveUp: () => i18n.t('Move up'),
/**
* Shown on buttons that move fields down in a list.
*/
moveDown: () => i18n.t('Move down'),
/**
* Shown when something is actively loading.
*/
isLoading: () => i18n.t('Loading…'),
/**
* Shown when there is more to load.
*/
loadMore: () => i18n.t('Load more'),
/**
* Show on buttons that navigate state forward
*/
next: () => i18n.t('Next'),
/**
* Show on buttons that navigate state backward
*/
prev: () => i18n.t('Previous'),
/**
* Shown when adding all values.
*/
addAllValues: () => i18n.t('Add all values'),
/**
* Shown when adding selected values.
*/
addSelectedValues: () => i18n.t('Add selected values'),
/**
* Shown when removing all values.
*/
removeAllValues: () => i18n.t('Remove all values'),
/**
* Shown when removing selected values.
*/
removeSelectedValues: () => i18n.t('Remove selected values'),
/**
* Shown when there is a date to choose.
*/
chooseDate: () => i18n.t('Choose date'),
/**
* Shown when there is a date to change.
*/
changeDate: () => i18n.t('Change date'),
/**
* Shown above error summaries when someone attempts to submit a form with
* errors and the developer has implemented `<FormKitSummary />`.
*/
summaryHeader: () => i18n.t('There were errors in your form.'),
/*
* Shown when there is something to close
*/
close: () => i18n.t('Close'),
/**
* Shown when there is something to open.
*/
open: () => i18n.t('Open'),
},
validation: {
/**
* The value is not an accepted value.
* @see {@link https://docs.formkit.com/essentials/validation#accepted}
*/
accepted({ name }) {
/* <i18n case="Shown when the user-provided value is not a valid 'accepted' value."> */
return i18n.t('Please accept the %s.', name)
/* </i18n> */
},
/**
* The value is not letter and/or spaces
* @see {@link https://docs.formkit.com/essentials/validation#alpha-spaces}
*/
alpha_spaces() {
/* <i18n case="Shown when the user-provided value contains non-alphabetical and non-space characters."> */
return i18n.t('This field can only contain letters and spaces.')
/* </i18n> */
},
/**
* The date is not after
* @see {@link https://docs.formkit.com/essentials/validation#date-after}
*/
date_after({ 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 i18n.t(
'This field must have a value that is after %s.',
i18n.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 i18n.t('This field must have a value that is in the future.')
/* </i18n> */
},
/**
* The value is not a letter.
* @see {@link https://docs.formkit.com/essentials/validation#alpha}
*/
alpha() {
/* <i18n case="Shown when the user-provided value contains non-alphabetical characters."> */
return i18n.t('This field can only contain alphabetical characters.')
/* </i18n> */
},
/**
* The value is not alphanumeric
* @see {@link https://docs.formkit.com/essentials/validation#alphanumeric}
*/
alphanumeric() {
/* <i18n case="Shown when the user-provided value contains non-alphanumeric characters."> */
return i18n.t('This field can only contain letters and numbers.')
/* </i18n> */
},
/**
* The value have no letter.
* @see {@link https://formkit.com/essentials/validation#contains_alpha}
*/
contains_alpha() {
/* <i18n case="Shown when the user-provided value contains only non-alphabetical characters."> */
return i18n.t('This field must contain alphabetical characters.')
/* </i18n> */
},
/**
* The value have no alphanumeric
* @see {@link https://formkit.com/essentials/validation#contains_alphanumeric}
*/
contains_alphanumeric() {
/* <i18n case="Shown when the user-provided value contains only non-alphanumeric characters."> */
return i18n.t('This field must contain letters or numbers.')
/* </i18n> */
},
/**
* The value have no letter and/or spaces
* @see {@link https://formkit.com/essentials/validation#contains_alpha-spaces}
*/
contains_alpha_spaces() {
/* <i18n case="Shown when the user-provided value contains only non-alphabetical and non-space characters."> */
return i18n.t('This field must contain letters or spaces.')
/* </i18n> */
},
/**
* The value have no symbol
* @see {@link https://formkit.com/essentials/validation#contains_symbol}
*/
contains_symbol() {
/* <i18n case="Shown when the user-provided value contains only alphanumeric and space characters."> */
return i18n.t('This field must contain a symbol.')
/* </i18n> */
},
/**
* The value have no uppercase
* @see {@link https://formkit.com/essentials/validation#contains_uppercase}
*/
contains_uppercase() {
/* <i18n case="Shown when the user-provided value contains only non-alphabetical-uppercase characters."> */
return i18n.t('This field must contain an uppercase letter.')
/* </i18n> */
},
/**
* The value have no lowercase
* @see {@link https://formkit.com/essentials/validation#contains_lowercase}
*/
contains_lowercase() {
/* <i18n case="Shown when the user-provided value contains only non-alphabetical-lowercase characters."> */
return i18n.t('This field must contain a lowercase letter.')
/* </i18n> */
},
/**
* The value have no numeric
* @see {@link https://formkit.com/essentials/validation#contains_numeric}
*/
contains_numeric() {
/* <i18n case="Shown when the user-provided value have no numeric."> */
return i18n.t('This field must contain numbers.')
/* </i18n> */
},
/**
* The value is not symbol
* @see {@link https://formkit.com/essentials/validation#symbol}
*/
symbol() {
/* <i18n case="Shown when the user-provided value contains alphanumeric and space characters."> */
return i18n.t('This field must be a symbol.')
/* </i18n> */
},
/**
* The value is not uppercase
* @see {@link https://formkit.com/essentials/validation#uppercase}
*/
uppercase() {
/* <i18n case="Shown when the user-provided value contains non-alphabetical-uppercase characters."> */
return i18n.t('This field can only contain uppercase letters.')
/* </i18n> */
},
/**
* The value is not lowercase
* @see {@link https://formkit.com/essentials/validation#lowercase}
*/
lowercase() {
/* <i18n case="Shown when the user-provided value contains non-alphabetical-lowercase characters."> */
return i18n.t('This field can only contain lowercase letters.')
/* </i18n> */
},
/**
* The date is not before
* @see {@link https://docs.formkit.com/essentials/validation#date-before}
*/
date_before({ 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 i18n.t(
'This field must have a value that is before %s.',
i18n.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 i18n.t('This field must have a value that is in the past.')
/* </i18n> */
},
/**
* The value is not between two numbers
* @see {@link https://docs.formkit.com/essentials/validation#between}
*/
between({ args }) {
if (Number.isNaN(args[0]) || Number.isNaN(args[1])) {
/* <i18n case="Shown when any of the arguments supplied to the rule were not a number."> */
return i18n.t(
"This field was configured incorrectly and can't be submitted.",
)
/* </i18n> */
}
const [first, second] = order(args[0], args[1])
/* <i18n case="Shown when the user-provided value is not between two numbers."> */
return i18n.t(
'This field must have a value that is between %s and %s.',
first,
second,
)
/* </i18n> */
},
/**
* The confirmation field does not match
* @see {@link https://docs.formkit.com/essentials/validation#confirm}
*/
confirm() {
// TODO: Check if message is in a good shape (e.g. for the usage for password + confirm password).
/* <i18n case="Shown when the user-provided value does not equal the value of the matched input."> */
return i18n.t("This field doesn't correspond to the expected value.")
/* </i18n> */
},
/**
* The value is not a valid date
* @see {@link https://docs.formkit.com/essentials/validation#date-format}
*/
date_format({ 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 i18n.t(
'This field isn\'t a valid date, please use the format "%s".',
args[0],
)
/* </i18n> */
}
/* <i18n case="Shown when no date argument was supplied to the rule."> */
return i18n.t(
"This field was configured incorrectly and can't be submitted.",
)
/* </i18n> */
},
/**
* Is not within expected date range
* @see {@link https://docs.formkit.com/essentials/validation#date-between}
*/
date_between({ args }) {
/* <i18n case="Shown when the user-provided date is not between the start and end dates supplied to the rule. "> */
return i18n.t(
'This field must have a value that is between %s and %s.',
i18n.date(args[0]),
i18n.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: i18n.t('Please enter a valid email address.'),
/**
* Does not end with the specified value
* @see {@link https://docs.formkit.com/essentials/validation#ends-with}
*/
ends_with({ args }) {
/* <i18n case="Shown when the user-provided value does not end with the substring supplied to the rule."> */
return i18n.t(
'This field doesn\'t end with "%s".',
commaSeparatedList(args),
)
/* </i18n> */
},
/**
* Is not an allowed value
* @see {@link https://docs.formkit.com/essentials/validation#is}
*/
is() {
/* <i18n case="Shown when the user-provided value is not one of the values supplied to the rule."> */
return i18n.t("This field doesn't contain an allowed value.")
/* </i18n> */
},
/**
* Does not match specified length
* @see {@link https://docs.formkit.com/essentials/validation#length}
*/
length({ args: [first = 0, second = Infinity] }) {
const min = Number(first) <= Number(second) ? first : second
const max = Number(second) >= Number(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 i18n.t('This field must contain at least one character.')
/* </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 i18n.t(
'This field must not contain more than %s characters.',
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 i18n.t('This field must contain at least %s characters.', min)
/* </i18n> */
}
/* <i18n case="Shown when the length of the user-provided value is between the two lengths supplied to the rule."> */
return i18n.t(
'This field must contain between %s and %s characters.',
min,
max,
)
/* </i18n> */
},
/**
* Value is not a match
* @see {@link https://docs.formkit.com/essentials/validation#matches}
*/
matches() {
/* <i18n case="Shown when the user-provided value does not match any of the values or RegExp patterns supplied to the rule. "> */
return i18n.t("This field doesn't contain an allowed value.")
/* </i18n> */
},
/**
* Exceeds maximum allowed value
* @see {@link https://docs.formkit.com/essentials/validation#max}
*/
max({ 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 i18n.t("This field can't have more than %s entries.", args[0])
/* </i18n> */
}
/* <i18n case="Shown when the user-provided value is greater than the maximum number supplied to the rule."> */
return i18n.t(
'This field must have a value that is at most %s.',
args[0],
)
/* </i18n> */
},
/**
* The (field-level) value does not match specified mime type
* @see {@link https://docs.formkit.com/essentials/validation#mime}
*/
mime({ args }) {
if (!args[0]) {
/* <i18n case="Shown when no file formats were supplied to the rule."> */
return i18n.t('No file formats allowed.')
/* </i18n> */
}
/* <i18n case="Shown when the mime type of user-provided file does not match any mime types supplied to the rule."> */
return i18n.t('This field must be of the type "%s".', args[0])
/* </i18n> */
},
/**
* Does not fulfill minimum allowed value
* @see {@link https://docs.formkit.com/essentials/validation#min}
*/
min({ 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 i18n.t("This field can't have less than %s entries.", args[0])
/* </i18n> */
}
/* <i18n case="Shown when the user-provided value is less than the minimum number supplied to the rule."> */
return i18n.t(
'This field must have a value that is at least %s.',
args[0],
)
/* </i18n> */
},
/**
* Is not an allowed value
* @see {@link https://docs.formkit.com/essentials/validation#not}
*/
not({ node: { value } }) {
/* <i18n case="Shown when the user-provided value matches one of the values supplied to (and thus disallowed by) the rule."> */
return i18n.t(
'This field can\'t contain the value "%s".',
value as string,
)
/* </i18n> */
},
/**
* Is not a number
* @see {@link https://docs.formkit.com/essentials/validation#number}
*/
number() {
/* <i18n case="Shown when the user-provided value is not a number."> */
return i18n.t('This field must contain a number.')
/* </i18n> */
},
/**
* Required field.
* @see {@link https://docs.formkit.com/essentials/validation#required}
*/
required() {
/* <i18n case="Shown when a user does not provide a value to a required input."> */
return i18n.t('This field is required.')
/* </i18n> */
},
/**
* Require one field.
* @see {@link https://formkit.com/essentials/validation#require-one}
*/
require_one: ({ name, node, args: inputNames }) => {
const labels = inputNames
.map((name) => {
const dependentNode = node.at(name)
if (dependentNode) {
return createMessageName(dependentNode)
}
return false
})
.filter((name) => !!name) as unknown as ComputedRef<string>[]
labels.unshift(name as unknown as ComputedRef<string>)
/* <i18n case="Shown when the user-provided has not provided a value for at least one of the required fields."> */
// return `${labels.join(' or ')} is required.`
const translatedSeparator = i18n.t('or')
return i18n.t(
'%s is required.',
labels
.map((label: ComputedRef<string>) => label.value)
.join(` ${translatedSeparator} `),
)
/* </i18n> */
},
/**
* Does not start with specified value
* @see {@link https://docs.formkit.com/essentials/validation#starts-with}
*/
starts_with({ args }) {
/* <i18n case="Shown when the user-provided value does not start with the substring supplied to the rule."> */
return i18n.t(
'This field doesn\'t start with "%s".',
commaSeparatedList(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.t('Please include a valid url.')
/* </i18n> */
},
/**
* Shown when the date is invalid.
*/
invalidDate: () => i18n.t('The selected date is invalid.'),
},
}
}
export default loadLocales