vuestic-ui/dist/types/components/va-layout/hooks/useLayout.d.ts

Vue 3 UI Framework

import { ComputedRef, ExtractPropTypes, PropType, Ref } from 'vue';
import { AreaName } from './useGridTemplateArea';
type UnwrapType<T> = true extends boolean ? T : never;
export type AreaConfig = UnwrapType<{
    absolute?: boolean;
    order?: number;
    fixed?: boolean;
    overlay?: boolean;
}>;
export declare const useLayoutProps: {
    top: {
        type: PropType<{
            absolute?: boolean | undefined;
            order?: number | undefined;
            fixed?: boolean | undefined;
            overlay?: boolean | undefined;
        }>;
        default: () => {
            order: number;
        };
    };
    right: {
        type: PropType<{
            absolute?: boolean | undefined;
            order?: number | undefined;
            fixed?: boolean | undefined;
            overlay?: boolean | undefined;
        }>;
        default: () => {
            order: number;
        };
    };
    left: {
        type: PropType<{
            absolute?: boolean | undefined;
            order?: number | undefined;
            fixed?: boolean | undefined;
            overlay?: boolean | undefined;
        }>;
        default: () => {
            order: number;
        };
    };
    bottom: {
        type: PropType<{
            absolute?: boolean | undefined;
            order?: number | undefined;
            fixed?: boolean | undefined;
            overlay?: boolean | undefined;
        }>;
        default: () => {
            order: number;
        };
    };
};
export type LayoutProps = ExtractPropTypes<typeof useLayoutProps>;
export declare const useLayout: (props: ExtractPropTypes<typeof useLayoutProps>) => {
    paddings: ComputedRef<{
        top: number;
        right: number;
        bottom: number;
        left: number;
    }>;
    orders: ComputedRef<{
        top: number;
        right: number;
        bottom: number;
        left: number;
    }>;
    items: Ref<{
        top: {
            sizes: {
                readonly bottom: number;
                readonly height: number;
                readonly left: number;
                readonly right: number;
                readonly top: number;
                readonly width: number;
                readonly x: number;
                readonly y: number;
                toJSON: () => any;
            };
        } | null;
        right: {
            sizes: {
                readonly bottom: number;
                readonly height: number;
                readonly left: number;
                readonly right: number;
                readonly top: number;
                readonly width: number;
                readonly x: number;
                readonly y: number;
                toJSON: () => any;
            };
        } | null;
        bottom: {
            sizes: {
                readonly bottom: number;
                readonly height: number;
                readonly left: number;
                readonly right: number;
                readonly top: number;
                readonly width: number;
                readonly x: number;
                readonly y: number;
                toJSON: () => any;
            };
        } | null;
        left: {
            sizes: {
                readonly bottom: number;
                readonly height: number;
                readonly left: number;
                readonly right: number;
                readonly top: number;
                readonly width: number;
                readonly x: number;
                readonly y: number;
                toJSON: () => any;
            };
        } | null;
    }>;
};
export declare const useFixedLayoutChild: (area: AreaName, sizes: Ref<DOMRectReadOnly | null>) => {
    paddings: ComputedRef<Record<AreaName, number>>;
};
export {};