magner/dist/types/form/base.d.ts

Universal admin panel magnetic to any backend

import type { SupportedDataTypes } from '../../utils/form/form';
import type { TranslateData } from '../../utils/core/translate';
import type { MixedChecker } from '../../utils/core/mixed-check';
import type { SupportedValidators } from '../../types';
import type { GenericComponent, GenericForm, InnerConditions } from './index';
export type SupportedComponentTypes = 'button' | 'input' | 'input-phone' | 'textarea' | 'checkbox' | 'radio' | 'switch' | 'select' | 'dropzone' | 'datetime' | 'editor' | 'collection' | 'custom' | 'color-picker';
export interface BaseProps<ENTITY extends {}> {
    class?: string;
    /** Displays the red asterisk next to the field label. Does not influence any validations! */
    required?: boolean;
    /** Whether the field is disabled. Accepts static boolean or the dynamic
     * MixedChecker function with access to the user's role and form's state */
    disabled?: boolean | MixedChecker<ENTITY>;
    /** Hides the field from the form if 'true' */
    hidden?: boolean | MixedChecker<ENTITY>;
    /** If 'true', the field gets a design made for the better readability  */
    readOnly?: boolean | MixedChecker<ENTITY>;
    /** If 'true', the field set class 'changed' */
    changed?: boolean | MixedChecker<ENTITY>;
    hiddenCollectionAddButton?: boolean | MixedChecker<ENTITY>;
    /** If `readOnly: true`, parse the value of the form field to display as a string */
    readOnlyFormatter?: (val: any) => string;
    /** Magner's inner properties. No need to change */
    inner?: Partial<InnerConditions<ENTITY>>;
}
export interface BaseValidation {
    /** Choose any supported validators to speed up the validation process */
    type: SupportedValidators;
    /** An event that triggers the validation to start */
    trigger: 'blur' | 'change' | 'input';
}
export interface FormInteractionsData<ENTITY extends {}> {
    form: Record<string, any>;
    getField: <FIELD extends GenericComponent<ENTITY> = GenericComponent<ENTITY>>(name: keyof ENTITY) => FIELD | undefined;
    config: GenericForm<ENTITY>;
    isNew: boolean;
    data?: unknown;
}
export type FieldInteractions<ENTITY extends {}> = (arg_1: FormInteractionsData<ENTITY>, currentCollectionItem?: Record<string, any>) => void;
export interface BaseField<ENTITY extends {}> {
    /** Choose any supported type of the field */
    type: SupportedComponentTypes;
    /** Unique name identifier of the field. It is required to be the same one incoming or outcoming to the backend */
    name: keyof ENTITY;
    /** A label to be displayed next to the field component */
    label?: TranslateData;
    labelWidth?: string;
    /** If you need to explain what some field means, put the hint there. HTML is allowed in the tooltip */
    hint?: TranslateData;
    /** Any attributes passed to the base HTML-tag */
    props: BaseProps<ENTITY>;
    /** How and when to validate the field */
    validation?: BaseValidation | BaseValidation[];
    /** Needed to setup initial values for the fields. Default is 'string' that returns and empty string '' */
    dataType?: SupportedDataTypes;
    /** Hides the fields with v-show, so that Vue can display it later with some transition */
    hidden?: boolean;
    /**
     * When the field value is changed, this action is triggered. Use it to change other fields
     * configuration. Can be used in cases like dynamic displaying/disabling of hidden fields etc.
     */
    changeAction?: FieldInteractions<ENTITY>;
    /**
     * pointer to parent element in collection
     */
    parent?: unknown;
}