@eslamdevui/ui
Version:
A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
73 lines (72 loc) • 2.94 kB
TypeScript
import type { AppConfig } from '@nuxt/schema';
import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, ComponentConfig } from '../types';
import type { UseResizableProps } from '../composables/useResizable';
import theme from '#build/ui/dashboard-sidebar';
export type DashboardSidebar = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebar'>;
export type DashboardSidebarMode = 'modal' | 'slideover' | 'drawer';
export type DashboardSidebarMenu<T extends DashboardSidebarMode> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
export interface DashboardSidebarProps<T extends DashboardSidebarMode = DashboardSidebarMode> extends Pick<UseResizableProps, 'id' | 'side' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable' | 'collapsible' | 'collapsedSize'> {
/** @defaultValue 'slideover' */
mode?: T;
/** Props for the sidebar menu component */
menu?: DashboardSidebarMenu<T>;
/** Customize the toggle button */
toggle?: boolean | Partial<ButtonProps>;
/** @defaultValue 'left' */
toggleSide?: 'left' | 'right';
class?: any;
ui?: DashboardSidebar['slots'];
}
export interface DashboardSidebarSlots {
'header'(props: {
collapsed?: boolean;
collapse?: (value: boolean) => void;
}): any;
'default'(props: {
collapsed?: boolean;
collapse?: (value: boolean) => void;
}): any;
'footer'(props: {
collapsed?: boolean;
collapse?: (value: boolean) => void;
}): any;
'toggle'(props: {
open: boolean;
toggle: () => void;
}): any;
'content'(props?: {}): any;
'resize-handle'(props: {
onMouseDown: (e: MouseEvent) => void;
onTouchStart: (e: TouchEvent) => void;
}): any;
}
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardSidebarProps<DashboardSidebarMode> & {
open?: boolean;
collapsed?: boolean;
}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:open": (value: boolean) => any;
"update:collapsed": (value: boolean) => any;
}, string, import("vue").PublicProps, Readonly<DashboardSidebarProps<DashboardSidebarMode> & {
open?: boolean;
collapsed?: boolean;
}> & Readonly<{
"onUpdate:open"?: ((value: boolean) => any) | undefined;
"onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
}>, {
toggle: boolean | Partial<ButtonProps>;
collapsible: boolean;
mode: DashboardSidebarMode;
side: "left" | "right";
minSize: number;
maxSize: number;
defaultSize: number;
resizable: boolean;
collapsedSize: number;
toggleSide: "left" | "right";
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSidebarSlots>;
export default _default;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};