@progress/kendo-vue-layout 8.0.3-develop.1 → 8.0.3-develop.3

package/drawer/Drawer.d.ts

@@ -0,0 +1,148 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DrawerSelectEvent } from './interfaces/DrawerSelectEvent';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export interface DrawerComputed {
+    drawerClassNames: object;
+}
+/**
+ * @hidden
+ */
+declare const Drawer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    animation: {
+        type: PropType<boolean | import('..').DrawerAnimation>;
+        default: boolean;
+    };
+    expanded: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    dir: {
+        type: StringConstructor;
+        default: string;
+    };
+    item: PropType<any>;
+    navigationHeader: PropType<Object | Function | String>;
+    navigationFooter: PropType<Object | Function | String>;
+    navigationContent: PropType<Object | Function | String>;
+    mode: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    position: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    items: {
+        type: PropType<import('..').DrawerItemProps[]>;
+        default: any[];
+    };
+    mini: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    tabIndex: PropType<number>;
+    width: {
+        type: PropType<number>;
+        default: number;
+    };
+    miniWidth: {
+        type: PropType<number>;
+        default: number;
+    };
+}>, {}, {
+    currentDir: string;
+    drawer: {
+        expanded: boolean;
+        mode: string;
+        dir: Function;
+        position: string;
+        animation: boolean | import('..').DrawerAnimation;
+        mini: boolean;
+        width: number;
+        miniWidth: number;
+        items: import('..').DrawerItemProps[];
+        item: any;
+    };
+    showLicenseWatermark: boolean;
+    licenseMessage: any;
+}, {
+    drawerClassNames(): DrawerComputed['drawerClassNames'];
+}, {
+    focus(): void;
+    handleSelect(itemTarget: any, itemIndex: number): void;
+    onOverlayClick(e: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (event: DrawerSelectEvent) => true;
+    overlayclick: any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    animation: {
+        type: PropType<boolean | import('..').DrawerAnimation>;
+        default: boolean;
+    };
+    expanded: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    dir: {
+        type: StringConstructor;
+        default: string;
+    };
+    item: PropType<any>;
+    navigationHeader: PropType<Object | Function | String>;
+    navigationFooter: PropType<Object | Function | String>;
+    navigationContent: PropType<Object | Function | String>;
+    mode: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    position: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    items: {
+        type: PropType<import('..').DrawerItemProps[]>;
+        default: any[];
+    };
+    mini: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    tabIndex: PropType<number>;
+    width: {
+        type: PropType<number>;
+        default: number;
+    };
+    miniWidth: {
+        type: PropType<number>;
+        default: number;
+    };
+}>> & Readonly<{
+    onSelect?: (event: DrawerSelectEvent) => any;
+    onOverlayclick?: (...args: any[] | unknown[]) => any;
+}>, {
+    width: number;
+    animation: boolean | import('..').DrawerAnimation;
+    position: string;
+    mode: string;
+    dir: string;
+    expanded: boolean;
+    mini: boolean;
+    miniWidth: number;
+    items: import('..').DrawerItemProps[];
+}, {}, {}, {}, string, () => {
+    kendoDrawer: any;
+}, true, {}, any>;
+export { Drawer };

package/drawer/DrawerContent.d.ts

@@ -0,0 +1,84 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+declare const DrawerContent: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/**
+ * Represents the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
+ *
+ * ```jsx
+ * <template>
+ *   <div>
+ *     <Drawer
+ *       :expanded="expanded"
+ *       :position="position"
+ *       :mode="mode"
+ *       :items="
+ *         items.map((item, index) => ({
+ *           ...item,
+ *           selected: index === selectedId,
+ *         }))
+ *       "
+ *       @select="handleSelect"
+ *     >
+ *       <DrawerContent>
+ *         <k-button @click="handleClick"> Toggle the drawer state </k-button>
+ *       </DrawerContent>
+ *     </Drawer>
+ *   </div>
+ * </template>
+ *
+ * <script>
+ * import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+ * import { Button } from "@progress/kendo-vue-buttons";
+ * import "./styles.css";
+ *
+ * export default {
+ *   name: "App",
+ *   components: { Drawer, DrawerContent, "k-button": Button },
+ *   data() {
+ *     return {
+ *       items: [
+ *         {
+ *           text: "Inbox",
+ *           icon: "inbox",
+ *           selected: true,
+ *         },
+ *         {
+ *           text: "Calendar",
+ *           icon: "calendar",
+ *         },
+ *         {
+ *           text: "Attachments",
+ *           icon: "hyperlink-email",
+ *         },
+ *         {
+ *           text: "Favourites",
+ *           icon: "star-outline",
+ *         },
+ *       ],
+ *       expanded: true,
+ *       selectedId: 0,
+ *       position: "start",
+ *       mode: "push",
+ *     };
+ *   },
+ *   methods: {
+ *     handleClick(e) {
+ *       this.expanded = !this.expanded;
+ *     },
+ *     handleSelect(e) {
+ *       this.selectedId = e.itemIndex;
+ *     },
+ *   },
+ * };
+ * </script>
+ * ```
+ */
+export { DrawerContent };

package/drawer/DrawerItem.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export interface DrawerItemComputed {
+    itemClassNames: object;
+}
+/**
+ * @hidden
+ */
+declare const DrawerItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    index: PropType<number>;
+    text: PropType<string>;
+    icon: PropType<string>;
+    svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
+    separator: PropType<boolean>;
+    selected: PropType<boolean>;
+    disabled: PropType<boolean>;
+    targetItem: PropType<any>;
+}>, {}, {}, {
+    itemClassNames(): DrawerItemComputed['itemClassNames'];
+}, {
+    focus(e: any): void;
+    handleClick(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    index: PropType<number>;
+    text: PropType<string>;
+    icon: PropType<string>;
+    svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
+    separator: PropType<boolean>;
+    selected: PropType<boolean>;
+    disabled: PropType<boolean>;
+    targetItem: PropType<any>;
+}>> & Readonly<{
+    onClick?: (...args: any[] | unknown[]) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/**
+ * Represents the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
+ *
+ * ```jsx
+ *     <Drawer
+ *       :expanded="expanded"
+ *       :position="position"
+ *       :mode="mode"
+ *       :mini="true"
+ *       :width="175"
+ *       :items="
+ *         items.map((item, index) => ({
+ *           ...item,
+ *           selected: index === selectedId,
+ *         }))
+ *       "
+ *       :item="'CustomItem'"
+ *       @select="onSelect"
+ *     >
+ *       <template v-slot:CustomItem="{ props }">
+ *         <DrawerItem v-bind="props" @click="props.onClick">
+ *           <span :class="'k-icon flag ' + props.flag" />
+ *           <div class="item-descr-wrap">
+ *             <div>{{ props.text }}</div>
+ *             <span class="item-descr">Capital of {{ props.country }}</span>
+ *           </div>
+ *         </DrawerItem>
+ *       </template>
+ *       <DrawerContent>
+ *         <router-view />
+ *       </DrawerContent>
+ *     </Drawer>
+ * ```
+ *
+ */
+export { DrawerItem };

package/drawer/DrawerNavigation.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export interface DrawerNavigationState {
+}
+/**
+ * @hidden
+ */
+export interface DrawerNavigationComputed {
+    navigationClassNames: object;
+}
+/**
+ * @hidden
+ */
+declare const DrawerNavigation: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    item: PropType<any>;
+    header: PropType<any>;
+    footer: PropType<any>;
+    content: PropType<any>;
+    tabIndex: PropType<number>;
+    showLicenseWatermark: PropType<boolean>;
+    licenseMessage: PropType<string>;
+    onSelect: PropType<(event: import('..').DrawerSelectEvent) => void>;
+}>, {}, {}, {
+    navigationClassNames(): DrawerNavigationComputed['navigationClassNames'];
+}, {
+    focus(e: any): void;
+    onDrawerItemSelect(e: any, index: number): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    item: PropType<any>;
+    header: PropType<any>;
+    footer: PropType<any>;
+    content: PropType<any>;
+    tabIndex: PropType<number>;
+    showLicenseWatermark: PropType<boolean>;
+    licenseMessage: PropType<string>;
+    onSelect: PropType<(event: import('..').DrawerSelectEvent) => void>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { DrawerNavigation };

package/drawer/context/DrawerContext.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DrawerAnimation } from '../interfaces/DrawerAnimation';
+import { DrawerItemProps } from '../interfaces/DrawerItemProps';
+/** @hidden */
+export type DrawerContextType = {
+    animation?: boolean | DrawerAnimation;
+    expanded?: boolean;
+    mode?: 'overlay' | 'push';
+    position?: 'start' | 'end';
+    mini?: boolean;
+    dir?: string;
+    items?: Array<DrawerItemProps>;
+    item?: any;
+    width?: number;
+    miniWidth?: number;
+    onOverlayClick?: (event: any) => void;
+    onSelect?: (target: any, idx: number) => void;
+};

package/drawer/interfaces/DrawerAnimation.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Specifies the animation settings of the Drawer.
+ *
+ */
+export interface DrawerAnimation {
+    /**
+     * Specifies the type of the Drawer animation.
+     */
+    type?: 'slide';
+    /**
+     * Specifies the duration of the Drawer animation ([see example]({% slug display_modes_drawer %}#toc-expand-modes)) .
+     */
+    duration: number;
+}

package/drawer/interfaces/DrawerContentProps.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The properties of the [Kendo UI for Vue DrawerContent component]({% slug overview_drawer %}).
+ */
+export interface DrawerContentProps {
+}

package/drawer/interfaces/DrawerItemHandle.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The DrawerItem ref.
+ */
+export interface DrawerItemHandle {
+    /**
+     * The DrawerItem element.
+     */
+    element: any;
+    /**
+     * Focus the DrawerItem.
+     */
+    focus: (e: any) => void;
+    /**
+     * The props of the DrawerItem.
+     */
+    props?: any;
+}

package/drawer/interfaces/DrawerItemProps.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SVGIcon } from '@progress/kendo-vue-common';
+/**
+ * An interface for the Drawer items.
+ */
+export interface DrawerItemProps {
+    /**
+     * Specifies if the Drawer item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Defines the name for an existing icon in a Kendo UI for Vue theme.
+     * The icon is rendered inside the Drawer item by a `span.k-icon` element.
+     */
+    icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the Drawer item.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Specifies if the Drawer item is initially selected.
+     */
+    selected?: boolean;
+    /**
+     * Specifies if this is a separator item.
+     */
+    separator?: boolean;
+    /**
+     * Specifies the text content of the Drawer item.
+     */
+    text?: string;
+    /**
+     * Sets the index of the DrawerItem that is used to identify it.
+     */
+    index?: number;
+    /**
+     * Sets the `tabIndex` property of the DrawerItem.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Sets a custom property. Contained in the DrawerItem props that are returned from the `onSelect` Drawer event.
+     */
+    [customProp: string]: any;
+    /**
+     * @hidden
+     */
+    onSelect?(target?: any, idx?: number): void;
+}

package/drawer/interfaces/DrawerNavigationProps.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DrawerSelectEvent } from './DrawerSelectEvent';
+/**
+ * @hidden
+ */
+export interface DrawerNavigationProps {
+    item?: any;
+    header?: any;
+    footer?: any;
+    content?: any;
+    showLicenseWatermark?: boolean;
+    licenseMessage?: string;
+    tabIndex?: number;
+    onSelect?: (event: DrawerSelectEvent) => void;
+}

package/drawer/interfaces/DrawerProps.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DrawerSelectEvent } from './DrawerSelectEvent';
+import { DrawerAnimation } from '../interfaces/DrawerAnimation';
+import { DrawerItemProps } from './DrawerItemProps';
+/**
+ * The properties of the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
+ */
+export interface DrawerProps {
+    /**
+     * Specifies the animation settings of the Drawer.
+     * If boolean enables or disables the default animation.
+     * Use DrawerAnimation to set slide animation with customizable duration option. Accepts a number in milliseconds.
+     */
+    animation?: boolean | DrawerAnimation;
+    /**
+     * Specifies the state of the Drawer. Defaults to `false` ([see example]({% slug expanded_state_drawer %})).
+     */
+    expanded?: boolean;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Specifies the mode in which the Drawer will be displayed.
+     * The possible values are `overlay` and `push`.
+     * Defaults to `overlay` ([see example]({% slug display_modes_drawer %}#toc-expand-modes)).
+     */
+    mode?: 'overlay' | 'push' | string;
+    /**
+     * Specifies the position of the Drawer.
+     * The possible values are `start` and `end` ([see example]({% slug positioning_drawer %})).
+     */
+    position?: 'start' | 'end' | string;
+    /**
+     * Sets the `tabIndex` property of the Drawer.
+     */
+    tabIndex?: number;
+    /**
+     * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
+     * ([see example]({% slug display_modes_drawer %}#toc-mini-view))).
+     */
+    mini?: boolean;
+    /**
+     * Defines the width of the Drawer when the mini view is enabled and the component is collapsed. Defaults to `50`.
+     */
+    miniWidth?: number;
+    /**
+     * Defines the width of the Drawer when it is expanded. Defaults to `240`.
+     */
+    width?: number;
+    /**
+     * The collection of items that will be rendered in the Drawer ([see example]({% slug overview_drawer %})).
+     */
+    items?: Array<DrawerItemProps>;
+    /**
+     * Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering %})).
+     *
+     * The default Component is: [DrawerItem]({% slug api_layout_draweritemprops %}).
+     */
+    item?: any;
+    /**
+     * The event handler that will be fired when the overlay is clicked.
+     * Used in overlay mode only.
+     */
+    onOverlayclick?: (event: any) => void;
+    /**
+     * Fires when a Drawer item is selected.
+     */
+    onSelect?: (event: DrawerSelectEvent) => void;
+    /**
+     * Provides the option to define a `header` in the Drawer component ([see example]({% slug custom_rendering %})).
+     * The header is rendered above the Drawer Items. By default, the property is not defined.
+     */
+    navigationHeader?: String | Object | Function;
+    /**
+     * Provides the option to define a `footer` in the Drawer component ([see example]({% slug custom_rendering %})).
+     * The footer is rendered below the Drawer Items. By default, the property is not defined.
+     */
+    navigationFooter?: String | Object | Function;
+    /**
+     * Provides the option to define a custom template inside the navigational section of the Drawer component ([see example]({% slug custom_rendering %})).
+     * When defined, the custom template will override the default [DrawerItem]({% slug api_layout_draweritemprops %}) rendering.
+     * By default, the property is not defined.
+     */
+    navigationContent?: String | Object | Function;
+}

package/drawer/interfaces/DrawerSelectEvent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onSelect` Drawer event.
+ */
+export interface DrawerSelectEvent {
+    /**
+     * A Drawer item event target.
+     */
+    itemTarget: any;
+    /**
+     * The index of the selected Drawer item.
+     */
+    itemIndex: number;
+}