@dynamicforms/vuetify-modal-form-kit/dist/index.d.ts

Form layout and modal helpers

import { Action } from '@dynamicforms/vuetify-inputs';
import { App } from 'vue';
import { BreakpointNames } from '@dynamicforms/vuetify-inputs';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { DfInputComponentProps } from '@dynamicforms/vuetify-inputs';
import * as Form from '@dynamicforms/vue-forms';
import { PublicProps } from 'vue';
import { ResponsiveRenderOptions } from '@dynamicforms/vuetify-inputs';

declare const __VLS_component: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
"update:model-value": (value: boolean) => any;
}, string, PublicProps, Readonly<Props> & Readonly<{
"onUpdate:model-value"?: ((value: boolean) => any) | undefined;
}>, {
dialogId: symbol;
title: Form.RenderContent;
color: string;
modelValue: boolean;
closable: boolean;
size: DialogSize;
formControl: Form.Group;
icon: string;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: Readonly<Slots> & Slots;
    refs: {};
    rootEl: any;
};

declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;

declare type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};

declare type Align = 'start' | 'center' | 'end' | 'baseline' | 'stretch';

declare type AlignContent = 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';

declare type AlignContentProps = {
    [K in BaseBkpt as K extends 'base' ? 'align-content' : `align-content-${K}`]?: AlignContent;
};

declare type AlignProps = {
    [K in BaseBkpt as K extends 'base' ? 'align' : `align-${K}`]?: Align;
};

declare type BaseBkpt = BreakpointNames | 'base';

export declare interface CloseablePromise<T> extends Promise<T> {
    close: (value: T) => void;
    dialogId: symbol;
}

declare class ColBase implements ComponentProps {
    props: ColumnPropsPartial;
    components: Component[];
    constructor(props?: ColumnPropsPartial);
    component<T extends ComponentBuilderBase>(BuilderClass: {
        new (addCallback: (component: Component) => void): T;
    }, builderCallback: (builder: T) => T): this;
    component(builderCallback: (builder: VuetifyInputsComponentBuilder) => VuetifyInputsComponentBuilder): this;
    /**
     * @return returns a proxy that allows to immediately from the column object add components, e.g.
     * new FormBuilder().row((row) => row.col((col) => col.simple.generic(...) will add one component into this column.
     * You may call the ComponentBuilder's methods as many times as you want to generate components
     */
    simple<T extends ComponentBuilderBase = VuetifyInputsComponentBuilder>(): T;
    toJSON(): ColumnJSON;
}

declare type ColsProps = {
    [K in BaseBkpt as K extends 'base' ? 'cols' : `cols-${K}`]?: number | 'auto' | boolean;
};

declare class Column extends ResponsiveRenderOptions<ColBase> {
    constructor(props?: ColumnPropsPartial);
    component<T extends ComponentBuilderBase>(BuilderClass: {
        new (addCallback: (component: Component) => void): T;
    }, builderCallback: (builder: T) => T): this;
    component(builderCallback: (builder: VuetifyInputsComponentBuilder) => VuetifyInputsComponentBuilder): this;
    breakpoint(breakpoint: BreakpointNames, colCallback: (col: ColBase) => ColBase): this;
    /**
     * @return returns a proxy that allows to immediately from the column object add components, e.g.
     * new FormBuilder().row((row) => row.col((col) => col.simple.generic(...) will add one component into this column.
     * You may call the ComponentBuilder's methods as many times as you want to generate components
     */
    simple<T extends ComponentBuilderBase = VuetifyInputsComponentBuilder>(): T;
    toJSON(breakpoint?: BreakpointNames): ColumnJSONResponsive;
    protected cleanBreakpoint(bp?: ColBase, defaultIfEmpty?: boolean): ColBase | null;
}

declare interface ColumnJSON {
    props: ColumnPropsPartial;
    components: ComponentJSON[];
}

declare type ColumnJSONResponsive = ColumnJSON & {
    [key in BreakpointNames]?: ColumnJSON;
};

declare interface ColumnProps extends ColsProps, OffsetProps, OrderProps {
    alignSelf?: 'start' | 'end' | 'center' | 'auto' | 'baseline' | 'stretch';
    class?: string | Record<string, boolean> | string[];
    style?: string | CSSProperties | (string | CSSProperties)[];
}

declare type ColumnPropsPartial = Partial<ColumnProps>;

declare class Component<T extends Record<string, any> = Record<string, any>> {
    name: string | symbol;
    props?: ComponentProps<T>;
    constructor(name: string | symbol, props?: ComponentProps<T>);
    toJSON(): ComponentJSON;
}

declare class ComponentBuilderBase implements ComponentBuilderInterface<ComponentBuilderBase> {
    private addCallback;
    constructor(addCallback: (component: Component) => void);
    generic<P extends ComponentProps = ComponentProps>(name: string | symbol, props: P): this;
    nestedForm(form: FormBuilder): this;
}

declare interface ComponentBuilderInterface<T = any> {
    generic<P extends ComponentProps = ComponentProps>(name: string | symbol, props: P): T;
}

declare interface ComponentJSON<T extends ComponentProps = ComponentProps> {
    name: string | symbol;
    props: T;
}

declare type ComponentProps<T extends Record<string | symbol, any> = Record<string | symbol, any>> = T & {
    toJSON?: (breakpoint?: BreakpointNames) => any;
};

export declare const ComponentRender: DefineComponent<ComponentRenderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ComponentRenderProps> & Readonly<{}>, {
props: Record<string | symbol, any>;
components: Record<string | symbol, any>;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

declare interface ComponentRenderProps {
    name: string | symbol;
    props?: Record<string | symbol, any>;
    components?: Record<string | symbol, any>;
}

declare interface CSSProperties {
    [key: string]: string | number;
}

export declare const defaultDialogSize: DialogSize;

export declare const DfModal: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

export declare enum DialogSize {
    SMALL = 1,
    MEDIUM = 2,
    LARGE = 3,
    X_LARGE = 4,
    DEFAULT = 0
}

export declare namespace DialogSize {
    export function fromString(size?: string): DialogSize;
    export function isDefined(size: number | string): boolean;
}

export declare const DynamicFormsModalFormKit: {
    install: (app: App, options?: Partial<DynamicFormsModalFormKitOptions>) => void;
};

export declare interface DynamicFormsModalFormKitOptions {
    registerComponents: boolean;
    registerVuetifyComponents: boolean;
}

declare type FormActions = Record<string, Action>;

declare class FormBase implements ComponentProps {
    rows: Row[];
    row(rowProps: RowPropsPartial, rowCallback: (row: Row) => Row): this;
    /**
     * @param cols specifies how many columns we want per row. each column will be 12/cols wide with cols columns per row
     * @return returns a proxy that allows to immediately from the FormBuilder object add components into their own
     * rows and columns e.g. new FormBuilder().simple.generic(...) will create a layout with one row, column and within
     * it your generic component. You may call the ComponentBuilder's methods as many times as you want
     * to generate more rows and columns with components
     */
    simple<T extends ComponentBuilderBase = VuetifyInputsComponentBuilder>(cols?: TwelveDivisible): SimpleProxy<T>;
    toJSON(breakpoint?: BreakpointNames): FormJSON;
}

export declare class FormBuilder extends ResponsiveRenderOptions<FormBase> {
    row(rowProps: RowPropsPartial, rowCallback: (row: Row) => Row): this;
    breakpoint(breakpoint: BreakpointNames, formCallback: (form: FormBase) => FormBase): this;
    /**
     * @param cols specifies how many columns we want per row. each column will be 12/cols wide with cols columns per row
     * @return returns a proxy that allows to immediately from the FormBuilder object add components into their own
     * rows and columns e.g. new FormBuilder().simple.generic(...) will create a layout with one row, column and within
     * it your generic component. You may call the ComponentBuilder's methods as many times as you want
     * to generate more rows and columns with components
     */
    simple<T extends ComponentBuilderBase = VuetifyInputsComponentBuilder>(cols?: TwelveDivisible): SimpleProxy<T>;
    toJSON(breakpoint?: BreakpointNames): FormJSONResponsive;
    protected cleanBreakpoint(bp?: FormBase, defaultIfEmpty?: boolean): FormBase | null;
}

export declare const FormBuilderBodyProp: unique symbol;

declare const FormBuilderName: unique symbol;

declare interface FormJSON {
    rows: RowJSON[];
}

declare type FormJSONResponsive = FormJSON & {
    [key in BreakpointNames]?: FormJSON;
};

export declare namespace FormLayout {
    export {
        FormBuilderName,
        FormBuilderBodyProp,
        FormJSON,
        FormJSONResponsive,
        RowProps,
        RowPropsPartial,
        RowJSON,
        RowJSONResponsive,
        ColumnProps,
        ColumnPropsPartial,
        ColumnJSON,
        ColumnJSONResponsive,
        ComponentProps,
        ComponentJSON,
        TwelveDivisible,
        Component,
        ComponentBuilderInterface,
        ComponentBuilderBase,
        VuetifyInputsComponentBuilder,
        Column,
        Row,
        SimpleProxy,
        FormBuilder
    }
}

export declare const FormRender: DefineComponent<FormRenderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<FormRenderProps> & Readonly<{}>, {
components: Record<string | symbol, any>;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;

declare interface FormRenderProps {
    layout: FormBuilder | FormJSONResponsive;
    components?: Record<string | symbol, any>;
}

declare type Justify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';

declare type JustifyProps = {
    [K in BaseBkpt as K extends 'base' ? 'justify' : `justify-${K}`]?: Justify;
};

export declare const modal: ModalAPI;

declare class ModalAPI {
    isTop(promise: CloseablePromise<any>): boolean;
    isInstalled(): boolean;
    yesNo(title: Form.RenderContent, message: Form.RenderContent, options?: ModalOptions): CloseablePromise<string>;
    message(title: Form.RenderContent, message: Form.RenderContent, options?: ModalOptions): CloseablePromise<string>;
    custom(title: Form.RenderContent, componentName: string, componentProps: Record<any, any>, options?: ModalOptions): CloseablePromise<string>;
    private messageInternal;
}

declare interface ModalOptions {
    form?: Form.Group;
    size?: DialogSize;
    actions?: FormActions;
    color?: string;
    icon?: string;
}

export declare const ModalView: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

declare type OffsetProps = {
    [K in BaseBkpt as K extends 'base' ? 'offset' : `offset-${K}`]?: number | 'auto' | boolean;
};

declare type OrderProps = {
    [K in BaseBkpt as K extends 'base' ? 'order' : `order-${K}`]?: number | 'auto' | boolean;
};

declare interface Props {
    modelValue: boolean;
    closable?: boolean;
    size?: DialogSize;
    formControl?: Form.Group;
    dialogId?: symbol;
    title?: Form.RenderContent;
    color?: string;
    icon?: string;
}

declare class Row extends ResponsiveRenderOptions<RowBase> {
    constructor(props?: RowPropsPartial);
    col(colProps?: ColumnPropsPartial, colCallback?: (col: Column) => Column): this;
    breakpoint(breakpoint: BreakpointNames, rowCallback: (row: RowBase) => RowBase): this;
    /**
     * @param cols specifies how many columns we have designed this row to have. each column will be 12 / cols wide
     * @return returns a proxy that allows to immediately from the row object add components into their own
     * columns e.g. new FormBuilder().row((row) => row.simple.generic(...) will create a layout with one column and within
     * it your generic component. You may call the ComponentBuilder's methods as many times as you want
     * to generate more columns with components
     */
    simple<T extends ComponentBuilderBase = VuetifyInputsComponentBuilder>(cols?: TwelveDivisible): T;
    toJSON(breakpoint?: BreakpointNames): RowJSONResponsive;
    protected cleanBreakpoint(bp?: RowBase, defaultIfEmpty?: boolean): RowBase | null;
}

declare class RowBase implements ComponentProps {
    props: RowPropsPartial;
    columns: Column[];
    constructor(props?: RowPropsPartial);
    col(colProps?: ColumnPropsPartial, colCallback?: (col: Column) => Column): this;
    /**
     * @param cols specifies how many columns we have designed this row to have. each column will be 12 / cols wide
     * @return returns a proxy that allows to immediately from the row object add components into their own
     * columns e.g. new FormBuilder().row((row) => row.simple.generic(...) will create a layout with one column and within
     * it your generic component. You may call the ComponentBuilder's methods as many times as you want
     * to generate more columns with components
     */
    simple<T extends ComponentBuilderBase = VuetifyInputsComponentBuilder>(cols?: TwelveDivisible): T;
    toJSON(breakpoint?: BreakpointNames): RowJSON;
}

declare interface RowJSON {
    props: RowPropsPartial;
    columns: ColumnJSON[];
}

declare type RowJSONResponsive = RowJSON & {
    [key in BreakpointNames]?: RowJSON;
};

declare interface RowProps extends AlignProps, AlignContentProps, JustifyProps {
    dense?: boolean;
    noGutters?: boolean;
    class?: string | Record<string, boolean> | string[];
    style?: string | CSSProperties | (string | CSSProperties)[];
}

declare type RowPropsPartial = Partial<RowProps>;

declare type SimpleProxy<T extends ComponentBuilderBase> = T & {
    simple: (cols?: TwelveDivisible) => SimpleProxy<T>;
};

declare type Slots = {
    title: () => any;
    body: (props: {
        formControl: Form.Group;
    }) => Form.Group;
    actions: () => any;
};

declare type TwelveDivisible = 1 | 2 | 3 | 4 | 6 | 12;

declare class VuetifyInputsComponentBuilder extends ComponentBuilderBase {
    dfActions(props: Partial<DfInputComponentProps.DfActionsProps>): this;
    dfCheckbox(props: Partial<DfInputComponentProps.DfCheckboxProps>): this;
    dfColor(props: Partial<DfInputComponentProps.DfColorProps>): this;
    dfDateTime(props: Partial<DfInputComponentProps.DfDateTimeProps>): this;
    dfFile(props: Partial<DfInputComponentProps.DfFileProps>): this;
    dfInput(props: Partial<DfInputComponentProps.DfInputProps>): this;
    dfRtfEditor(props: Partial<DfInputComponentProps.DfRtfEditorProps>): this;
    dfSelect(props: Partial<DfInputComponentProps.DfSelectProps>): this;
    dfTextArea(props: Partial<DfInputComponentProps.DfTextAreaProps>): this;
}

export { }