@progress/kendo-vue-layout 8.0.3-develop.2 → 8.0.3-develop.4

package/appbar/interfaces/AppBarProps.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the props of the [Kendo UI for Vue AppBar component]({% slug overview_appbar %}).
+ * Used to display information, actions, branding titles and additional navigation on the current screen.
+ */
+export interface AppBarProps {
+    /**
+     * Sets the `id` property of the root AppBar element.
+     */
+    id?: string;
+    /**
+     * Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
+     *
+     * * The possible values are:
+     * * 'top' (Default)
+     * * 'bottom'
+     *
+     */
+    position?: AppBarPosition | string;
+    /**
+     * Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-position-mode)).
+     *
+     * * The possible values are:
+     * * 'static' (Default)
+     * * 'sticky'
+     * * 'fixed'
+     */
+    positionMode?: AppBarPositionMode | string;
+    /**
+     * Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
+     *
+     * * The possible values are:
+     * * `light` (Default)
+     * * 'primary'
+     * * 'dark'
+     * * 'inherit'
+     *
+     */
+    themeColor?: AppBarThemeColor | string;
+}
+/**
+ * Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
+ *
+ * * The possible values are:
+ * * 'top' (Default)
+ * * 'bottom'
+ *
+ */
+export type AppBarPosition = 'top' | 'bottom';
+/**
+ * Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-position-mode)).
+ *
+ * * The possible values are:
+ * * 'static' (Default)
+ * * 'sticky'
+ * * 'fixed'
+ */
+export type AppBarPositionMode = 'static' | 'sticky' | 'fixed';
+/**
+ * Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
+ *
+ * * The possible values are:
+ * * `inherit`
+ * * `light` (Default)
+ * * `dark`
+ *
+ */
+export type AppBarThemeColor = 'light' | 'dark' | 'inherit';

package/appbar/interfaces/AppBarSectionProps.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
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the props of the [Kendo UI for Vue AppBarSection component]({% slug contentarrangement_appbar %}#toc-defining-sections).
+ */
+export interface AppBarSectionProps {
+}

package/appbar/interfaces/AppBarSpacerProps.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the props of the [Kendo UI for Vue AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-defining-spacings).
+ * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
+ */
+export interface AppBarSpacerProps {
+    width?: string | number;
+}

package/bottomnavigation/BottomNavigation.d.ts

@@ -0,0 +1,117 @@
+/**
+ * @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';
+import { BottomNavigationSelectEvent } from './models/events';
+/**
+ * @hidden
+ */
+export interface BottomNavigationComputed {
+    [key: string]: any;
+    navClasses: object;
+}
+/**
+ * @hidden
+ */
+declare const BottomNavigation: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    dir: PropType<string>;
+    themeColor: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    fill: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    fillMode: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    item: PropType<any>;
+    items: PropType<import('./BottomNavigationItemProps').BottomNavigationItemProps[]>;
+    itemFlow: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    positionMode: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    border: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    disabled: PropType<boolean>;
+    selected: PropType<number>;
+}>, {}, {}, {
+    navClasses(): {
+        [x: string]: any;
+        [x: number]: boolean;
+        'k-bottom-nav': boolean;
+        'k-bottom-nav-border': any;
+        'k-disabled': any;
+    };
+}, {
+    focus(): void;
+    dispatchSelectEvent(dispatchedEvent: any, index: number): void;
+    handleSelect(event: any, clickedItemIndex: number): void;
+    handleKeyDown(event: any, clickedItemIndex: number): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    keydown: any;
+    select: (event: BottomNavigationSelectEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    dir: PropType<string>;
+    themeColor: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    fill: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    fillMode: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    item: PropType<any>;
+    items: PropType<import('./BottomNavigationItemProps').BottomNavigationItemProps[]>;
+    itemFlow: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    positionMode: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    border: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    disabled: PropType<boolean>;
+    selected: PropType<number>;
+}>> & Readonly<{
+    onSelect?: (event: BottomNavigationSelectEvent) => any;
+    onKeydown?: (...args: any[] | unknown[]) => any;
+}>, {
+    fill: string;
+    themeColor: string;
+    fillMode: string;
+    border: boolean;
+    positionMode: string;
+    itemFlow: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { BottomNavigation };

package/bottomnavigation/BottomNavigationItem.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @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 BottomNavigationItemComputed {
+    [key: string]: any;
+    itemClasses: object;
+}
+/**
+ * @hidden
+ */
+declare const BottomNavigationItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    disabled: PropType<boolean>;
+    selected: PropType<boolean>;
+    icon: PropType<any>;
+    item: PropType<any>;
+    text: PropType<any>;
+    dataItem: PropType<any>;
+    index: PropType<number>;
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+}>, {}, {}, {
+    itemClasses(): BottomNavigationItemComputed['itemClasses'];
+}, {
+    handleClick(event: any): void;
+    handleKeyDown(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    keydown: any;
+    select: any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    disabled: PropType<boolean>;
+    selected: PropType<boolean>;
+    icon: PropType<any>;
+    item: PropType<any>;
+    text: PropType<any>;
+    dataItem: PropType<any>;
+    index: PropType<number>;
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+}>> & Readonly<{
+    onSelect?: (...args: any[] | unknown[]) => any;
+    onKeydown?: (...args: any[] | unknown[]) => any;
+}>, {
+    tabIndex: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { BottomNavigationItem };

package/bottomnavigation/BottomNavigationItemProps.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The interface for describing items that can be passed to the `items` property of the BottomNavigation component.
+ */
+export interface BottomNavigationItemProps {
+    /**
+     * Style the BottomNavigation item.
+     */
+    style?: object;
+    /**
+     * Class the BottomNavigation item.
+     */
+    class?: string;
+    /**
+     * Disables the BottomNavigation item.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies if the BottomNavigation item is selected.
+     */
+    selected?: boolean;
+    /**
+     * Defines the name for an existing icon in a Kendo UI for Vue theme.
+     * The icon is rendered inside the BottomNavigation item by a `span.k-icon` element.
+     */
+    icon?: any;
+    /**
+     * Specifies the text content of the BottomNavigation item.
+     */
+    text?: any;
+    /**
+     * Sets the `tabIndex` property of the BottomNavigation item. Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Sets a custom property. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
+     */
+    [customProp: string]: any;
+    /**
+     * @hidden
+     */
+    index?: number;
+    /**
+     * @hidden
+     */
+    item?: any;
+    /**
+     * @hidden
+     */
+    dataItem?: any;
+    /**
+     * @hidden
+     */
+    id?: string;
+}

package/bottomnavigation/BottomNavigationProps.d.ts

@@ -0,0 +1,154 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BottomNavigationItemProps } from './BottomNavigationItemProps';
+import { BottomNavigationEvent, BottomNavigationSelectEvent } from './models/events';
+/**
+ * Represents the props of the [Kendo UI for Vue BottomNavigation component]({% slug overview_bottomnavigation %}).
+ */
+export interface BottomNavigationProps {
+    /**
+     * Sets the `id` property of the root BottomNavigation element.
+     */
+    id?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Specifies the theme color of the BottomNavigation
+     * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
+     *
+     * The possible values are:
+     * * `primary` (Default) — Applies coloring based on the primary theme color.
+     * * `secondary` — Applies coloring based on the secondary theme color.
+     * * `tertiary` — Applies coloring based on the tertiary theme color.
+     * * `info` — Applies coloring based on the info theme color.
+     * * `success` — Applies coloring based on the success theme color.
+     * * `warning` — Applies coloring based on the warning theme color.
+     * * `error` — Applies coloring based on the error theme color.
+     * * `dark` — Applies coloring based on the dark theme color.
+     * * `light` — Applies coloring based on the light theme color.
+     * * `inverse` — Applies coloring based on the inverted theme color.
+     */
+    themeColor?: BottomNavigationThemeColor | string;
+    /**
+     * The fill style of the BottomNavigation
+     * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
+     *
+     * The possible values are:
+     * * `flat`(Default) — Sets the theme color as the text color. The background will be white.
+     * * `solid` — Sets the theme color as a background color.
+     */
+    fillMode?: BottomNavigationFill | string;
+    /**
+     * @hidden
+     */
+    fill?: BottomNavigationFill | string;
+    /**
+     * Specifies the position and behavior of the BottomNavigation when the page is scrolled
+     * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
+     *
+     * The possible values are:
+     * * `fixed`(Default) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
+     * * `sticky` — Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static
+     * and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
+     * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
+     */
+    positionMode?: BottomNavigationPositionMode | string;
+    /**
+     * Specifies how the icon and text label are positioned in each item of the BottomNavigation
+     * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
+     *
+     * The possible values are:
+     * * `vertical`(Default) — Renders the text below the icon.
+     * * `horizontal` — Renders the text and the icon on the same line.
+     */
+    itemFlow?: BottomNavigationItemFlow | string;
+    /**
+     * Sets a border to the BottomNavigation.
+     */
+    border?: boolean;
+    /**
+     * Disables the whole BottomNavigation.
+     */
+    disabled?: boolean;
+    /**
+     * The index of the selected BottomNavigationItem.
+     */
+    selected?: number;
+    /**
+     * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug overview_bottomnavigation %})).
+     */
+    items?: Array<BottomNavigationItemProps>;
+    /**
+     * Overrides the default component's content responsible for visualizing a single item
+     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-custom-rendering)).
+     */
+    item?: any;
+    /**
+     * Fires when a BottomNavigation item is about to be rendered
+     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-item-render-property)).
+     * Used to override the default appearance of the items.
+     */
+    itemRender?: any;
+    /**
+     * Fires when a BottomNavigation item is selected.
+     */
+    onSelect?: (event: BottomNavigationSelectEvent) => void;
+    /**
+     * Triggered on `onKeyDown` event.
+     */
+    onKeyDown?: (event: BottomNavigationEvent) => void;
+}
+/**
+ * The fill style of the BottomNavigation
+ * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
+ *
+ * The possible values are:
+ * * `flat`(Default) &mdash; Sets the theme color as the text color. The background will be white.
+ * * `solid` &mdash; Sets the theme color as a background color.
+ *
+ */
+export type BottomNavigationFill = 'solid' | 'flat';
+/**
+ * Specifies how the icon and text label are positioned in each item of the BottomNavigation
+ * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
+ *
+ * The possible values are:
+ * * `vertical`(Default) &mdash; Renders the text below the icon.
+ * * `horizontal` &mdash; Renders the text and the icon on the same line.
+ */
+export type BottomNavigationItemFlow = 'vertical' | 'horizontal';
+/**
+ * Specifies the theme color of the BottomNavigationThemeColor.
+ * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
+ *
+ * The possible values are:
+ * * `primary` (Default) &mdash; Applies coloring based on the primary theme color.
+ * * `secondary` &mdash; Applies coloring based on the secondary theme color.
+ * * `tertiary` &mdash; Applies coloring based on the tertiary theme color.
+ * * `info` &mdash; Applies coloring based on the info theme color.
+ * * `success` &mdash; Applies coloring based on the success theme color.
+ * * `warning` &mdash; Applies coloring based on the warning theme color.
+ * * `error` &mdash; Applies coloring based on the error theme color.
+ * * `dark` &mdash; Applies coloring based on the dark theme color.
+ * * `light` &mdash; Applies coloring based on the light theme color.
+ * * `inverse` &mdash; Applies coloring based on the inverted theme color.
+ */
+export type BottomNavigationThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+/**
+ * Specifies the position and behavior of the BottomNavigation when the page is scrolled
+ * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
+ *
+ * The possible values are:
+ * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
+ * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between
+ * static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
+ * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
+ */
+export type BottomNavigationPositionMode = 'sticky' | 'fixed';

package/bottomnavigation/models/events.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @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` BottomNavigation event.
+ */
+export interface BottomNavigationSelectEvent {
+    /**
+     * A BottomNavigation item event target.
+     */
+    itemTarget: any;
+    /**
+     * The index of the selected BottomNavigation item.
+     */
+    itemIndex: number;
+}
+/**
+ * Represents the return type of the BottomNavigation events.
+ */
+export interface BottomNavigationEvent {
+}

package/bottomnavigation/models/utils.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const THEME_COLOR_CLASSES: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    info: string;
+    success: string;
+    warning: string;
+    error: string;
+    dark: string;
+    light: string;
+    inverse: string;
+};
+/**
+ * @hidden
+ */
+export declare const FILL_CLASSES: {
+    flat: string;
+    solid: string;
+};
+/**
+ * @hidden
+ */
+export declare const ITEM_FLOW_CLASSES: {
+    vertical: string;
+    horizontal: string;
+};
+/**
+ * @hidden
+ */
+export declare const POSITION_MODE_CLASSES: {
+    fixed: string;
+    sticky: string;
+};