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

Universal admin panel magnetic to any backend

import type { RouteComponent } from 'vue-router';
import type { TranslateData } from '../../utils/core/translate';
import { MixedChecker } from '../../utils/core/mixed-check';
import type { GenericComponent, InnerConditions } from './index';
interface FormLayoutBase<ENTITY extends {}> {
    title?: TranslateData;
    layout?: GenericFormLayout<ENTITY>[];
    fields?: GenericComponent<ENTITY>[];
}
interface LayoutPropsBase<ENTITY extends {}> {
    /** Add any class to the layout block */
    class?: string;
    /** Sets shadow and a padding to the block, visually taking it out of the form */
    isPaper?: boolean;
    /** What type of styles to apply to the title of the block:<br>
     * • label – small text that can group fields in one row<br>
     * • heading – h2 tag that visually separates the group from the form
     */
    titleType?: 'label' | 'heading';
    /** Style object to be applied to the row or column */
    styles?: Record<string, string>;
    /** Style object to be applied to the row or column of mobile breakpoint */
    mobileStyles?: Record<string, string>;
    /** Hides the layout if 'true' */
    hidden?: boolean | MixedChecker<ENTITY>;
    /** Magner's inner properties. No need to change */
    inner?: Partial<InnerConditions<ENTITY>>;
}
/** RowBase defines element-ui el-row's attributes:
 *  https://element-plus.org/#/en-US/component/layout#row-attributes */
interface RowBase<ENTITY extends {}> extends LayoutPropsBase<ENTITY> {
    /** Grid spacing */
    gutter?: number;
    /** Horizontal alignment of flex layout */
    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
    /** Vertical alignment of flex layout */
    align?: 'top' | 'middle' | 'bottom';
    /** Whether nested elements of the row should take full width or not */
    elementsGrow?: boolean;
    /** Custom element tag */
    tag?: string;
}
/** Define different column types */
interface RowFields<ENTITY extends {}> extends FormLayoutBase<ENTITY> {
    type: 'row';
    props: RowBase<ENTITY>;
    layout?: never;
    component?: never;
    fields: GenericComponent<ENTITY>[];
}
interface RowLayout<ENTITY extends {}> extends FormLayoutBase<ENTITY> {
    type: 'row';
    props: RowBase<ENTITY>;
    layout: GenericFormLayout<ENTITY>[];
    component?: never;
    fields?: never;
}
export type FormLayoutRow<ENTITY extends {}> = RowLayout<ENTITY> | RowFields<ENTITY>;
/** ColumnBase defines element-ui el-col's attributes:
 *  https://element-plus.org/#/en-US/component/layout#col-attributes */
interface ColumnBase<ENTITY extends {}> extends LayoutPropsBase<ENTITY> {
    /** Number of column the grid spans */
    span?: number;
    /** Number of spacing on the left side of the grid */
    offset?: number;
    /** Number of columns that grid moves to the right */
    push?: number;
    /** Number of columns that grid moves to the left */
    pull?: number;
    /** Column Span for <768px */
    xs?: number | {
        span: number;
        offset: number;
    };
    /** Column Span for ≥768px */
    sm?: number | {
        span: number;
        offset: number;
    };
    /** Column Span for ≥992px */
    md?: number | {
        span: number;
        offset: number;
    };
    /** Column Span for ≥1200px */
    lg?: number | {
        span: number;
        offset: number;
    };
    /** Column Span for ≥1920px */
    xl?: number | {
        span: number;
        offset: number;
    };
    /** Custom element tag */
    tag?: string;
}
/** Define different column types */
export interface ColumnFields<ENTITY extends {}> extends FormLayoutBase<ENTITY> {
    type: 'column';
    props: ColumnBase<ENTITY>;
    layout?: never;
    component?: never;
    fields: GenericComponent<ENTITY>[];
}
export interface ColumnLayout<ENTITY extends {}> extends FormLayoutBase<ENTITY>, ColumnBase<ENTITY> {
    type: 'column';
    props: ColumnBase<ENTITY>;
    layout: GenericFormLayout<ENTITY>[];
    component?: never;
    fields?: never;
}
export type FormLayoutColumn<ENTITY extends {}> = ColumnLayout<ENTITY> | ColumnFields<ENTITY>;
/** Custom layout allows adding your own components */
export interface FormLayoutCustom<ENTITY extends {}> extends FormLayoutBase<ENTITY> {
    type: 'custom';
    layout?: never;
    fields?: never;
    component: () => (RouteComponent | (() => Promise<RouteComponent>));
    props: Record<string, any>;
}
export type GenericFormLayout<ENTITY extends {}> = FormLayoutRow<ENTITY> | FormLayoutColumn<ENTITY> | FormLayoutCustom<ENTITY>;
/** Form layout. Allows creating infinitely-nested layouts of rows, columns and custom components */
export type FormLayout<ENTITY extends {}> = GenericFormLayout<ENTITY> | GenericComponent<ENTITY>[];
export {};