@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
95 lines (94 loc) • 3.46 kB
TypeScript
import { ComponentPublicInstance, InjectionKey } from 'vue';
import { Router } from 'vue-router';
import { IconMinorProps } from '../icon';
import { MenuExposed, MenuGroupType, MenuMarkerType } from '../menu';
import { NativeScrollExposed } from '../native-scroll';
import { ClassType } from '@vexip-ui/config';
import { BreakPoint } from '../grid';
export type LayoutSignType = 'aside' | 'header';
export type LayoutConfig = 'nav' | 'color' | 'theme';
export type LayoutSection = 'wrapper' | 'section' | 'header' | 'headerLeft' | 'headerMain' | 'headerRight' | 'headerUser' | 'sidebar' | 'aside' | 'asideTop' | 'asideMain' | 'asideBottom' | 'expandHandler' | 'main' | 'footer' | 'footerLinks' | 'copyright' | 'scrollbar';
export type LayoutInnerClass = Partial<Record<LayoutSection, ClassType>>;
export type LayoutMediaJudger = (breakpoint: BreakPoint) => boolean;
export interface LayoutMenuProps {
active?: string;
accordion?: boolean;
markerType?: MenuMarkerType;
groupType?: MenuGroupType;
tooltipReverse?: boolean;
router?: Router;
manualRoute?: boolean;
onExpand?: (label: string, meta: Record<string, any>) => void;
onReduce?: (label: string, meta: Record<string, any>) => void;
}
export interface LayoutHeaderAction {
label: string;
icon?: Record<string, any>;
iconProps?: IconMinorProps;
name?: string;
disabled?: boolean;
divided?: boolean;
hidden?: boolean;
meta?: Record<string, any>;
}
export interface LayoutUser {
name: string;
email?: string;
avatar?: string | Record<string, any>;
}
export interface LayoutFooterLink {
name: string;
subname?: string;
icon?: Record<string, any>;
iconProps?: IconMinorProps;
to?: string;
target?: string;
children?: Array<Omit<LayoutFooterLink, 'children'>>;
}
export interface LayoutState {
isLayout: boolean;
locked: boolean;
affixed: boolean;
scrollY: number;
affixMatched: boolean;
expandMatched: boolean;
useExpand: boolean;
expanded: boolean;
reduced: boolean;
navConfig: boolean;
classes: LayoutInnerClass;
changeInLock: (doChange: () => void) => void;
}
export interface LayoutSlotParams {
expanded: boolean;
reduced: boolean;
toggleExpanded: (expanded?: boolean) => void;
toggleReduced: (reduced: boolean) => void;
}
export interface LayoutHeaderSlotParams extends LayoutSlotParams {
handleColorChange: (color: string) => void;
toggleUserDropped: (dropped?: boolean) => void;
}
export interface LayoutExposed extends ComponentPublicInstance {
scroll?: NativeScrollExposed;
menu?: MenuExposed;
toggleExpanded: (expanded?: boolean) => void;
toggleReduced: (reduced?: boolean) => void;
expandMenuByLabel: (label: string) => void;
}
export interface LayoutHeaderExposed extends ComponentPublicInstance {
menu?: MenuExposed;
toggleExpanded: (expanded?: boolean) => void;
toggleReduced: (reduced?: boolean) => void;
expandMenuByLabel: (label: string) => void;
toggleUserDropped: (dropped: boolean) => void;
}
export interface LayoutMainExposed extends ComponentPublicInstance {
}
export interface LayoutAsideExposed extends ComponentPublicInstance {
menu?: MenuExposed;
toggleExpanded: (expanded?: boolean) => void;
toggleReduced: (reduced?: boolean) => void;
expandMenuByLabel: (label: string) => void;
}
export declare const LAYOUT_STATE: InjectionKey<LayoutState>;