Des fonctionnalités supplémentaires communes, optionnelles et de première partie pour FormKit.
Vous pouvez ajouter ce package en utilisant npm install @formkit/addons ou yarn add @formkit/addons.
Ajoute auto-animate à chaque entrée automatiquement :
createAutoAnimatePlugin(options?: AutoAnimateOptions, animationTargets?: Record<string, string[]>): FormKitPlugin;
options optionnel — AutoAnimateOptionsanimationTargets optionnel — Une carte des types d'entrée et un tableau de leurs sections qui doivent être animées.import { createApp } from 'vue'
import App from 'App.vue'
import { createAutoAnimatePlugin } from '@formkit/addons'
import { plugin, defaultConfig } from '@formkit/vue'
createApp(app).use(plugin, defaultPlugin({
plugins: [
createAutoAnimatePlugin({
// config optionnelle
duration: 250,
easing: 'ease-in-out',
delay: 0,
},
{
// objet cibles d'animation optionnel
global: ['outer', 'inner'],
form: ['form'],
repeater: ['items'],
})
]
}))
Crée un nouveau plugin de textarea à hauteur automatique.
createAutoHeightTextareaPlugin(): FormKitPlugin;
Crée un nouveau plugin d'étiquettes flottantes.
createFloatingLabelsPlugin(FloatingLabelsOptions?: FloatingLabelsOptions): FormKitPlugin;
FloatingLabelsOptions optionnel — Les options de FloatingLabelsOptions à passer au pluginCrée un nouveau plugin de sauvegarde en local.
createLocalStoragePlugin(localStorageOptions?: LocalStorageOptions): FormKitPlugin;
localStorageOptions optionnelCrée un nouveau plugin multi-étapes.
createMultiStepPlugin(options?: MultiStepOptions): FormKitPlugin;
options optionnel — Les options de MultiStepOptions à passer au pluginLa typographie pour la fonction beforeStepChange.
interface BeforeStepChange {
(data: BeforeStepChangeData): any;
}
interface BeforeStepChangeData<T = unknown> {
currentStep: FormKitFrameworkContext<T>;
delta: number;
nextStep: FormKitFrameworkContext<T>;
}
Les options à passer à createFloatingLabelsPlugin
interface FloatingLabelsOptions {
useAsDefault?: boolean;
}
interface FormKitMultiStepSlots<Props extends FormKitInputs<Props>> {
badge: FormKitSlotData<Props, MultiStepSlotData&{
step: FormKitFrameworkContext;
index: number;
}>;
default: FormKitSlotData<Props, MultiStepSlotData>;
multiStepOuter: FormKitSlotData<Props, MultiStepSlotData>;
steps: FormKitSlotData<Props, MultiStepSlotData>;
tab: FormKitSlotData<Props, MultiStepSlotData>;
tabLabel: FormKitSlotData<Props, MultiStepSlotData&{
step: FormKitFrameworkContext;
index: number;
}>;
tabs: FormKitSlotData<Props, MultiStepSlotData>;
validStepIcon: FormKitSlotData<Props, MultiStepSlotData&{
step: FormKitFrameworkContext;
index: number;
}>;
wrapper: FormKitSlotData<Props, MultiStepSlotData>;
}
interface FormKitStepSlots<Props extends FormKitInputs<Props>> {
default: FormKitSlotData<Props, StepSlotData>;
stepActions: FormKitSlotData<Props, StepSlotData>;
stepInner: FormKitSlotData<Props, StepSlotData>;
stepNext: FormKitSlotData<Props, StepSlotData>;
stepPrevious: FormKitSlotData<Props, StepSlotData>;
}
Les options à passer à createLocalStoragePlugin
interface LocalStorageOptions {
beforeLoad?: (payload: any) => any;
beforeSave?: (payload: any) => any;
control?: string;
debounce?: number;
key?: string | number;
maxAge?: number;
prefix?: string;
}
interface MultiStepHandlers {
incrementStep: (delta: number, currentStep: FormKitFrameworkContext | undefined) => () => void;
setActiveStep: (step: FormKitFrameworkContext) => (e?: Event) => void;
showStepErrors: (step: FormKitFrameworkContext) => boolean | undefined;
triggerStepValidations: (step: FormKitFrameworkContext) => void;
}
Arguments supplémentaires qui sont ajoutés au FormKitNode d'une entrée à plusieurs étapes.
interface MultiStepNodeAdditions {
goTo: (target: number | string) => void;
next: () => void;
previous: () => void;
}
Les options à passer à createMultiStepPlugin
interface MultiStepOptions {
allowIncomplete?: boolean;
hideProgressLabels?: boolean;
tabStyle?:'tab' | 'progress';
}
interface MultiStepSlotData {
activeStep: string;
allowIncomplete?: boolean;
beforeStepChange?: BeforeStepChange;
handlers: FormKitFrameworkContext['handlers']&MultiStepHandlers;
hideProgressLabels: boolean;
node: FormKitMultiStepNode;
steps: Array<FormKitMultiStepSlotData>;
tabStyle:'tab' | 'progress';
validStepIcon: string | undefined;
}
interface StepHandlers {
incrementStep: (delta: number) => () => void;
next: () => void;
previous: () => void;
}
Données de slot uniques à l'entrée de l'étape.
interface StepSlotData {
beforeStepChange?: BeforeStepChange;
blockingCount: number;
errorCount: number;
handlers: FormKitFrameworkContext['handlers']&StepHandlers;
hasBeenVisited: true | undefined;
isActiveStep: boolean;
isFirstStep: boolean;
isLastStep: boolean;
isValid: boolean;
makeActive: () => void;
nextAttrs?: Record<string, any>;
nextLabel?: string;
ordered: boolean;
previousAttrs?: Record<string, any>;
previousLabel?: string;
showStepErrors: boolean;
stepIndex: number;
stepName: string;
steps: Array<FormKitMultiStepSlotData>;
totalErrorCount: number;
validStepIcon?: string;
}
Le type de nœud qui est augmenté avec les fonctions suivantes et précédentes et goTo.
export type FormKitMultiStepNode = FormKitNode & MultiStepNodeAdditions;
La typographie pour les données de slot pour une entrée multi-étapes FormKit.
export type FormKitMultiStepSlotData = FormKitFrameworkContext<Record<string, any>> & StepSlotData;