magner/dist/types/configs/routing/layouts.d.ts

Universal admin panel magnetic to any backend

import type { RouteComponent, RouteLocationRaw } from 'vue-router';
import type { IconImport } from '../../../types/utils/useful';
import type { TranslateData } from '../../../utils/core/translate';
import type { RouteBase, Route, FinalNoLayoutRoute } from '../../../types/configs/routing/routing';
export type SupportedLayouts = 'main' | 'empty';
interface LayoutProps {
}
/** Default properties applicable to most of layouts */
export interface LayoutBase {
    layout: SupportedLayouts | RouteComponent | (() => Promise<RouteComponent>);
    name: string;
    path: string;
    props: LayoutProps;
    routes: FinalNoLayoutRoute[];
}
/** Route configuration used in the Empty layout  */
export interface EmptyLayoutRoute extends Route {
}
/** Layout with no wrapping around routes. Hence, empty */
export interface EmptyLayout extends LayoutBase {
    layout: 'empty';
    routes: FinalNoLayoutRoute<EmptyLayoutRoute>[];
    props: {};
}
/** Route configuration used in the Main layout  */
export interface MainLayoutRoute extends Route {
    /** Display title in the sidebar and a page */
    title?: TranslateData;
    /** Whether to display in the sidebar or not */
    visible?: boolean;
    /** Sidebar icon */
    icon?: IconImport;
    /** Use this link to override the 'path' route property in the sidebar */
    link?: RouteLocationRaw;
}
/** Group property of the main layout props. Lists the route names to visually group them in the sidebar */
export interface MainLayoutGroup<ROUTE = string> {
    /** Unique name of the group */
    name: string;
    /** The names of routes to group together */
    routes: ROUTE[];
    /** Display group title in the sidebar */
    title: TranslateData;
    /** Sidebar icon of the group */
    icon?: IconImport;
}
/** Properties of the 'main' layout */
export interface MainLayoutProps extends LayoutProps {
    /** A wide icon to display as the project logo. Displayed when the sidebar is not collapsed */
    headerIcon?: IconImport;
    /** Project logo small icon. Displayed when the sidebar is collapsed */
    headerCollapsedIcon?: IconImport;
    /** Project title is written in the header **only** if `headerIcon` is not chosen */
    headerTitle?: TranslateData;
    sidebarGroups?: MainLayoutGroup[];
}
/** Main layout has a header and a sidebar with nested routes */
export interface MainLayout extends LayoutBase {
    layout: 'main';
    routes: FinalNoLayoutRoute<MainLayoutRoute>[];
    props: MainLayoutProps;
}
/**
 * Route configuration used in the Custom layout.
 * It is made for you to extend in any way possible with new properties
 */
export interface CustomLayoutRoute extends Route {
    [key: string | number]: unknown;
}
export interface CustomLayoutProps extends LayoutProps {
    [key: string | number]: unknown;
}
/**
 * Custom layout accepts your component as 'layout'.<br>
 * Read the guide in docs on how to extend it and use in your app
 */
export interface CustomLayout extends LayoutBase {
    layout: RouteComponent | (() => Promise<RouteComponent>);
    routes: FinalNoLayoutRoute<CustomLayoutRoute>[];
    props: CustomLayoutProps;
}
/** Layout is a wrapper component over your routes. Can be custom, main or empty */
export type Layout = CustomLayout | EmptyLayout | MainLayout;
export interface RouteLayout extends RouteBase {
    /**
     * Layout of the page. Supports several types:
     * * empty – blank page
     * * main – header, sidebar included
     * * custom – you pass your own layout as a component with <router-view> inside of it
     *
     * Other keys of the 'layout' object are used inside those layouts
     */
    type: 'layout';
    layout: Layout;
}
export {};