Created
October 15, 2024 06:39
-
-
Save fraaalk/b0560cf845e0d89095787266fab1463e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { bindings, defineFormKitConfig } from '@formkit/vue' | |
| import { createI18nPlugin, de, es } from '@formkit/i18n' | |
| import { | |
| createLibraryPlugin, | |
| form, | |
| group, | |
| submit, | |
| hidden, | |
| } from '@formkit/inputs' | |
| import { createProPlugin, dropdown, colorpicker } from '@formkit/pro' | |
| import { generateClasses, createThemePlugin } from '@formkit/themes' | |
| import { genesisIcons } from '@formkit/icons' | |
| import { inputs } from '@forms/formkit/config/inputs.js' | |
| import { validation } from '@forms/formkit/config/validation.js' | |
| import theme from './theme.js' | |
| const customMessages = { | |
| de: { | |
| ui: { | |
| remainingChars: 'Noch {remaining} Zeichen übrig.', | |
| }, | |
| }, | |
| es: { | |
| ui: { | |
| remainingChars: 'Todavía quedan {restantes} caracteres.', | |
| }, | |
| }, | |
| } | |
| const mergedDe = { ...de, ...customMessages.de } | |
| const mergedEs = { ...es, ...customMessages.es } | |
| const library = createLibraryPlugin({ | |
| group, | |
| form, | |
| submit, | |
| hidden, | |
| }) | |
| const i18n = createI18nPlugin({ | |
| de: mergedDe, | |
| es: mergedEs, | |
| }) | |
| const proPlugin = createProPlugin('fk-daf990e47d', { | |
| dropdown, | |
| colorpicker, | |
| }) | |
| const icons = { | |
| ...genesisIcons, | |
| } | |
| const themePlugin = createThemePlugin('', icons) | |
| export default defineFormKitConfig({ | |
| autoImport: false, | |
| config: { | |
| classes: generateClasses(theme), | |
| }, | |
| plugins: [library, validation, i18n, bindings, proPlugin, themePlugin], | |
| locales: { de: mergedDe, es: mergedEs }, | |
| locale: 'de', | |
| inputs, | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import type { FormKitTypeDefinition, FormKitNode } from '@formkit/core' | |
| import { | |
| outer, | |
| inner, | |
| wrapper, | |
| label, | |
| help, | |
| messages, | |
| message, | |
| icon, | |
| prefix, | |
| suffix, | |
| textInput, | |
| casts, | |
| createSection, | |
| $attrs, | |
| $if, | |
| } from '@formkit/inputs' | |
| const count = createSection('count', () => ({ | |
| $el: 'div', | |
| attrs: { | |
| class: `$classes.charCount`, | |
| }, | |
| children: [ | |
| { | |
| if: `$slots.count`, | |
| then: `$slots.count`, | |
| else: { | |
| $el: 'p', | |
| children: '$ui.remainingChars.value($characterCount)', | |
| }, | |
| }, | |
| ], | |
| })) | |
| function createTextInputDefinition( | |
| forceTypeProp: 'text' | 'email' | 'password', | |
| schemaMemoKey: string | |
| ): FormKitTypeDefinition { | |
| return { | |
| schema: $attrs( | |
| { | |
| 'data-floating-label': '$floatingLabel', | |
| }, | |
| outer( | |
| wrapper( | |
| label('$label'), | |
| inner( | |
| icon('prefix', 'label'), | |
| prefix(), | |
| textInput(), | |
| suffix(), | |
| icon('suffix') | |
| ) | |
| ), | |
| $if('$displayCharacterCount', count('$characterCount')), | |
| help('$help'), | |
| messages(message('$message.value')) | |
| ) | |
| ), | |
| type: 'input', | |
| family: 'text', | |
| props: { | |
| charCount: { | |
| boolean: true, | |
| default: false, | |
| }, | |
| floatingLabel: { | |
| boolean: true, | |
| default: false, | |
| }, | |
| }, | |
| forceTypeProp, | |
| features: [casts, addHandlers], | |
| schemaMemoKey, | |
| } | |
| } | |
| function addHandlers(node: FormKitNode) { | |
| node.on('created', () => { | |
| node.context!.floatingLabel = node.props.floatingLabel | |
| node.context!.displayCharacterCount = node.props.charCount | |
| node.context!.characterCount = '0' | |
| function updateCharacterCount() { | |
| if (!node.props.charCount) { | |
| return | |
| } | |
| const count = (node._value as string)?.length || 0 | |
| const maxLength = node.context!.attrs.maxlength as number | undefined | |
| let remaining: number | |
| if (maxLength !== undefined) { | |
| remaining = maxLength - count | |
| node.context!.characterCount = remaining.toString() | |
| } else { | |
| remaining = count | |
| node.context!.characterCount = count.toString() | |
| } | |
| } | |
| node.on('input', () => { | |
| updateCharacterCount() | |
| }) | |
| node.on('prop:charCount', () => { | |
| node.context!.displayCharacterCount = node.props.charCount | |
| updateCharacterCount() | |
| }) | |
| node.on('attr:maxlength', () => { | |
| updateCharacterCount() | |
| }) | |
| }) | |
| } | |
| export const textInputSchema: FormKitTypeDefinition = createTextInputDefinition( | |
| 'text', | |
| '96k8e005opm' | |
| ) | |
| export const emailInputSchema: FormKitTypeDefinition = | |
| createTextInputDefinition('email', '55myfo06c8c') | |
| export const passwordInputSchema: FormKitTypeDefinition = | |
| createTextInputDefinition('password', 'k2ivb3903es') |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment