@progress/kendo-vue-indicators
Version:
695 lines (675 loc) • 20.7 kB
text/typescript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { SkeletonAnimation as SkeletonAnimation_2 } from './SkeletonProps';
/**
* Represents the [Kendo UI for Vue Badge component]({% slug api_indicators_badgeprops %}).
*
* @example
* ```jsx
* <Badge>99+</Badge>
* ```
*/
export declare const Badge: DefineComponent<ExtractPropTypes< {
dir: PropType<string>;
align: {
type: PropType<BadgeAlign>;
default: () => BadgeAlign;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
cutoutBorder: PropType<boolean>;
}>, {}, {}, {
badgeClasses(): {
[x: string]: any;
'k-badge': boolean;
'k-badge-sm': boolean;
'k-badge-md': boolean;
'k-badge-lg': boolean;
'k-badge-border-cutout': any;
'k-top-start': boolean;
'k-top-end': boolean;
'k-bottom-start': boolean;
'k-bottom-end': boolean;
};
}, {
focusElement(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
dir: PropType<string>;
align: {
type: PropType<BadgeAlign>;
default: () => BadgeAlign;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
cutoutBorder: PropType<boolean>;
}>> & Readonly<{}>, {
themeColor: string;
size: string;
fillMode: string;
rounded: string;
position: string;
align: BadgeAlign;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Specifies the horizontal and vertical alignment of the Badge in a relation to the element.
*/
export declare interface BadgeAlign {
/**
* Defines the possible horizontal alignment of the Badge.
*
* The available values are:
* - `start`—Uses the start point of the parent element.
* - `end`(Default)—Uses the end point of the parent element.
*/
horizontal: 'start' | 'end';
/**
* Defines the possible vertical alignment of the Badge.
*
* The available values are:
* - `top`(Default)—Uses the top point of the parent element.
* - `bottom`—Uses the bottom point of the parent element.
*/
vertical: 'top' | 'bottom';
}
/**
* Represents the [Kendo UI for Vue BadgeContainer component]({% slug api_indicators_badgeprops %}).
*
* @example
* ```jsx
* <BadgeContainer>99+</BadgeContainer>
* ```
*/
export declare const BadgeContainer: DefineComponent<ExtractPropTypes< {
dir: PropType<string>;
align: {
type: PropType<BadgeAlign>;
default: () => BadgeAlign;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
cutoutBorder: PropType<boolean>;
content: PropType<any>;
}>, {}, {}, {
badgeContainerClasses(): {
'k-badge-container': boolean;
};
badgeClasses(): {
[x: string]: any;
'k-badge': boolean;
'k-badge-sm': boolean;
'k-badge-md': boolean;
'k-badge-lg': boolean;
'k-badge-border-cutout': any;
'k-top-start': boolean;
'k-top-end': boolean;
'k-bottom-start': boolean;
'k-bottom-end': boolean;
};
}, {
focusElement(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
dir: PropType<string>;
align: {
type: PropType<BadgeAlign>;
default: () => BadgeAlign;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
cutoutBorder: PropType<boolean>;
content: PropType<any>;
}>> & Readonly<{}>, {
themeColor: string;
size: string;
fillMode: string;
rounded: string;
position: string;
align: BadgeAlign;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the props of the [Kendo UI for Vue Badge component]({% slug overview_badge %}).
*/
export declare interface BadgeContainerProps extends BadgeProps {
/**
* Defines the custom rendering of the Badge content. Accepts a slot name, a `render` function, or a Vue Component.
*/
content?: any;
}
/**
* Specifies the appearance fill style of the Badge.
*
* The possible values are:
* * `solid` (Default)
* * `outline`
*
*/
export declare type BadgeFill = 'solid' | 'outline';
/**
* Specifies the position of the Badge relative to the edge of the container element.
*
* The possible values are:
* * `edge` (Default)—The center of the Badge is positioned on the edge of the container element.
* * `outside`—The Badge is entirely positioned outside the edge of the container element.
* * `inside`—The Badge is entirely positioned inside the edge of the the container element.
*
*/
export declare type BadgePosition = 'edge' | 'outside' | 'inside';
/**
* Represents the props of the [Kendo UI for Vue Badge component]({% slug overview_badge %}).
*/
export declare interface BadgeProps {
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Specifies the size of the Badge.
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
* * null—Does not set a size `className`
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Specifies the roundness of the Badge.
*
* The possible values are:
* - small
* - medium (Default)
* - large
* - full
* - null—Does not set a rounded `className`
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Specifies the appearance fill style of the Badge.
*
* The possible values are:
* * `solid` (Default)
* * `outline`
* * null—Does not set a fillMode `className`
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'outline' | string;
/**
* Specifies the theme color of the Badge.
*
* The possible values are:
* * `primary` (Default)—Applies coloring based on primary theme color.
* * `secondary`—Applies coloring based on secondary theme color.
* * `tertiary`— Applies coloring based on tertiary theme color.
* * `inherit`— Applies inherited coloring value.
* * `info`—Applies coloring based on info theme color.
* * `success`— Applies coloring based on success theme color.
* * `warning`— Applies coloring based on warning theme color.
* * `error`— Applies coloring based on error theme color.
* * `dark`— Applies coloring based on dark theme color.
* * `light`— Applies coloring based on light theme color.
* * `inverse`— Applies coloring based on inverse theme color.
* * null—Does not set a themeColor `className`.
*
* @default `primary`
*/
themeColor?: null | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'inherit' | string;
/**
* Specifies the alignment of the Badge.
*
* The possible keys are:
* * `horizontal`— Defines the possible horizontal alignment of the Badge.
* * `start`—Uses the start point of the parent element.
* * `end`(Default)—Uses the end point of the parent element.
* * `vertical`— Defines the possible vertical alignment of the Badge.
* * `top`(Default)—Uses the top point of the parent element.
* * `bottom`—Uses the bottom point of the parent element.
*
*/
align?: {
/**
* Defines the possible horizontal alignment of the Badge.
*
* The available values are:
* - `start`—Uses the start point of the parent element.
* - `end`(Default)—Uses the end point of the parent element.
*/
horizontal: 'start' | 'end';
/**
* Defines the possible vertical alignment of the Badge.
*
* The available values are:
* - `top`(Default)—Uses the top point of the parent element.
* - `bottom`—Uses the bottom point of the parent element.
*/
vertical: 'top' | 'bottom';
};
/**
* Specifies the position of the Badge relative to the edge of the container element.
*
* The possible values are:
* * `edge` (Default)—The center of the Badge is positioned on the edge of the container element.
* * `outside`—The Badge is entirely positioned outside the edge of the container element.
* * `inside`—The Badge is entirely positioned inside the edge of the the container element.
*
* @default `edge`
*/
position?: 'edge' | 'outside' | 'inside' | string;
/**
* Specifies wether or not to render additional "cutout" border around the Badge.
*
* The possible values are:
* * `true`
* * `false` (Default)
*
*/
cutoutBorder?: boolean;
}
/**
* Specifies the size of the Badge.
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
*
*/
export declare type BadgeSize = 'small' | 'medium' | 'large';
/**
* Specifies the theme color of the Badge.
*
* The possible values are:
* * `primary` (Default)—Applies coloring based on primary theme color.
* * `secondary`—Applies coloring based on secondary theme color.
* * `tertiary`— Applies coloring based on tertiary theme color.
* * `inherit`— Applies inherited coloring value.
* * `info`—Applies coloring based on info theme color.
* * `success`— Applies coloring based on success theme color.
* * `warning`— Applies coloring based on warning theme color.
* * `error`— Applies coloring based on error theme color.
* * `dark`— Applies coloring based on dark theme color.
* * `light`— Applies coloring based on light theme color.
* * `inverse`— Applies coloring based on inverse theme color.
*
*/
export declare type BadgeThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'inherit';
/**
* @hidden
*/
export declare const Loader: DefineComponent<ExtractPropTypes< {
type: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>, {}, {}, {
loaderClasses(): {
'k-loader': boolean;
'k-loader-sm': boolean;
'k-loader-md': boolean;
'k-loader-lg': boolean;
'k-loader-primary': boolean;
'k-loader-secondary': boolean;
'k-loader-tertiary': boolean;
'k-loader-info': boolean;
'k-loader-success': boolean;
'k-loader-warning': boolean;
'k-loader-error': boolean;
'k-loader-dark': boolean;
'k-loader-light': boolean;
'k-loader-inverse': boolean;
'k-loader-pulsing-2': boolean;
'k-loader-spinner-3': boolean;
'k-loader-spinner-4': boolean;
};
}, {
focus(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
type: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
type: string;
themeColor: string;
size: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the props of the [Kendo UI for Vue Loader component]({% slug overview_loader %}).
*/
export declare interface LoaderProps {
/**
* Specifies the size of the Loader.
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
*
*/
size?: LoaderSize | string;
/**
* Specifies the theme color of the Loader.
*
* The possible values are:
* * `primary` (Default)—Applies coloring based on primary theme color.
* * `secondary`—Applies coloring based on secondary theme color.
* * `tertiary`— Applies coloring based on tertiary theme color.
* * `info`—Applies coloring based on info theme color.
* * `success`— Applies coloring based on success theme color.
* * `warning`— Applies coloring based on warning theme color.
* * `error`— Applies coloring based on error theme color.
* * `dark`— Applies coloring based on dark theme color.
* * `light`— Applies coloring based on light theme color.
* * `inverse`— Applies coloring based on inverse theme color.
*/
themeColor?: LoaderThemeColor | string;
/**
* Specifies the Loader animation type.
*
* The possible values are:
* - `pulsing` (default)
* - `infinite-spinner`
* - `converging-spinner`
*/
type?: LoaderType | string;
}
/**
* Specifies the size of the Loader
* ([see example]({% slug appearance_loader %}#toc-size)).
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
*
*/
export declare type LoaderSize = 'small' | 'medium' | 'large';
/**
* Specifies the theme color of the Loader.
* ([see example]({% slug appearance_loader %}#toc-theme-color)).
*
* The possible values are:
* * `primary` (Default)—Applies coloring based on primary theme color.
* * `secondary`—Applies coloring based on secondary theme color.
* * `tertiary`— Applies coloring based on tertiary theme color.
* * `info`—Applies coloring based on info theme color.
* * `success`— Applies coloring based on success theme color.
* * `warning`— Applies coloring based on warning theme color.
* * `error`— Applies coloring based on error theme color.
* * `dark`— Applies coloring based on dark theme color.
* * `light`— Applies coloring based on light theme color.
* * `inverse`— Applies coloring based on inverted theme color.
*
*/
export declare type LoaderThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
/**
* Specifies the Loader animation type.
*
* The possible values are:
* - `pulsing` (default)
* - `infinite-spinner`
* - `converging-spinner`
*
*/
export declare type LoaderType = 'pulsing' | 'infinite-spinner' | 'converging-spinner';
/**
* @hidden
*/
export declare const Skeleton: DefineComponent<ExtractPropTypes< {
animation: {
type: PropType<boolean | SkeletonAnimation_2>;
default: () => {
type: string;
};
validator: (value: any) => any;
};
shape: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
ariaBusy: {
type: PropType<boolean>;
default: any;
};
role: {
type: PropType<string>;
default: any;
};
}>, {}, {}, {
skeletonClasses(): {
'k-skeleton': boolean;
'k-skeleton-circle': boolean;
'k-skeleton-rect': boolean;
'k-skeleton-text': boolean;
'k-skeleton-pulse': boolean;
'k-skeleton-wave': boolean;
};
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
animation: {
type: PropType<boolean | SkeletonAnimation_2>;
default: () => {
type: string;
};
validator: (value: any) => any;
};
shape: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
ariaBusy: {
type: PropType<boolean>;
default: any;
};
role: {
type: PropType<string>;
default: any;
};
}>> & Readonly<{}>, {
role: string;
animation: {
type: string;
};
shape: string;
ariaBusy: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Specifies the animation settings of the Skeleton.
*/
export declare interface SkeletonAnimation {
/**
* Specifies the type of the Skeleton animation. Defaults to `pulse`.
*/
type?: 'wave' | 'pulse';
}
/**
* Represents the props of the [Kendo Ui for Vue Skeleton component]({% slug overview_skeleton %}).
*/
export declare interface SkeletonProps {
/**
* Specifies the animation settings of the Skeleton.
*
* The possible keys are:
* * `type`—Defines the type of the Skeleton animation.
* * `wave`—Shows wave animation effect.
* * `pulse`(Default)—Shows pulse animation effect.
*
* To disable the animation, set the property to `false`.
*
*/
animation?: boolean | SkeletonAnimation;
/**
* Specifies the shape of the Skeleton.
*
* The possible values are:
* * `circle`—Renders a circular Skeleton.
* * `text`(Default)—Renders a line Skeleton.
* * `rectangle`—Renders a rectangular Skeleton.
*
*/
shape?: SkeletonShape | string;
/**
* Specifies the ariaBusy attribute of the Skeleton.
*
* The Skeleton component does not have accessibility on its own as it is only a visual indicator.
* It should be integrated within an element that refers to the loading state.
* When integrating the Skeleton on a page, you might want to define an `ariaBusy` attribute and
* this property gives you this option.
*
* By default the `ariaBusy` attribute is not rendered.
*/
ariaBusy?: boolean | undefined;
/**
* Specifies the role attribute of the Skeleton.
*
* The Skeleton component does not have accessibility on its own as it is only a visual indicator.
* It should be integrated within an element that refers to the loading state.
* When integrating the Skeleton on a page, you might want to define a `role` attribute and
* this property gives you this option.
*
* By default the `role` attribute is not rendered.
*
* The recommended value of the attribute is `alert`
*/
role?: string | undefined;
}
/**
* Specifies the shape of the Skeleton.
*
* The possible values are:
* * `circle`—Renders a circular Skeleton.
* * `text`(Default)—Renders a line Skeleton.
* * `rectangle`—Renders a rectangular Skeleton.
*
*/
export declare type SkeletonShape = 'circle' | 'text' | 'rectangle';
export { }