@progress/kendo-vue-inputs
Version:
5,563 lines • 148 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 { ColorGradientProps } from './interfaces/ColorGradientProps';
import { ColorPickerPaletteSettings as ColorPickerPaletteSettings_2 } from '..';
import { ColorPickerPopupSettings as ColorPickerPopupSettings_2 } from '..';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { DraggableDragEvent } from '@progress/kendo-vue-common';
import { ExtractPropTypes } from 'vue';
import { FlatColorPickerProps as FlatColorPickerProps_2 } from './FlatColorPicker';
import { FormComponentProps } from '@progress/kendo-vue-common';
import { FormComponentValidity } from '@progress/kendo-vue-common';
import { NumberFormatOptions } from '@progress/kendo-vue-intl';
import { PopupAnimation } from '@progress/kendo-vue-popup';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { Ref } from 'vue';
import { SVGIcon } from '@progress/kendo-vue-common';
import { TileSize } from './models/tile-size';
/**
* @hidden
*/
export declare const Checkbox: DefineComponent<ExtractPropTypes< {
checked: {
type: PropType<boolean>;
default: any;
};
defaultChecked: {
type: PropType<boolean>;
default: any;
};
defaultValue: {
type: PropType<any>;
default: any;
};
modelValue: {
type: PropType<string | number | boolean | string[]>;
default: any;
};
dir: PropType<string>;
disabled: PropType<boolean>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
label: PropType<string | HTMLElement>;
labelRender: PropType<any>;
labelPlacement: PropType<string>;
labelOptional: PropType<boolean>;
labelClass: PropType<string>;
name: PropType<string>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
tabIndex: PropType<number>;
value: {
type: PropType<string | number | boolean | string[]>;
default: any;
};
validationMessage: PropType<string>;
required: PropType<boolean>;
valid: {
type: PropType<boolean>;
default: any;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
}>, {
inputRef: Ref<any, any>;
kendoLocalizationService: {};
}, {
valueDuringOnChange: any;
currentDir: string;
currentChecked: any;
currentValue: any;
}, {
valueIsBooleanOrNull(): boolean;
isCheckedControlled(): boolean;
isValueControlled(): any;
computedValue(): any;
computedChecked(): any;
useValueAsChecked(): any;
checkedProp(): any;
valueProp(): any;
indeterminateProp(): boolean;
isValid(): any;
labelComputedClass(): {
[x: number]: any;
'k-checkbox-label': boolean;
};
}, {
setValidity(): void;
localizeMessage(message: string): string;
focusElement(): void;
setValue(e: any, val: boolean): void;
onChangeHandler(e: any): void;
onKeyDownHandler(e: any): void;
onBlurHandler(e: any): void;
onFocusHandler(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
changemodel: any;
'update:modelValue': any;
change: any;
focus: any;
blur: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
checked: {
type: PropType<boolean>;
default: any;
};
defaultChecked: {
type: PropType<boolean>;
default: any;
};
defaultValue: {
type: PropType<any>;
default: any;
};
modelValue: {
type: PropType<string | number | boolean | string[]>;
default: any;
};
dir: PropType<string>;
disabled: PropType<boolean>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
label: PropType<string | HTMLElement>;
labelRender: PropType<any>;
labelPlacement: PropType<string>;
labelOptional: PropType<boolean>;
labelClass: PropType<string>;
name: PropType<string>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
tabIndex: PropType<number>;
value: {
type: PropType<string | number | boolean | string[]>;
default: any;
};
validationMessage: PropType<string>;
required: PropType<boolean>;
valid: {
type: PropType<boolean>;
default: any;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
}>, {
value: string | number | boolean | string[];
size: string;
modelValue: string | number | boolean | string[];
defaultValue: any;
rounded: string;
valid: boolean;
validityStyles: boolean;
checked: boolean;
defaultChecked: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The arguments for the `onChange` Checkbox event.
*/
export declare interface CheckboxChangeEvent {
/**
* The new value of the Checkbox.
*/
value: boolean;
}
/**
* @hidden
*/
export declare interface CheckboxComputed {
[key: string]: any;
valueIsBooleanOrNull: boolean;
isCheckedControlled: boolean;
isValueControlled: boolean;
computedValue: any;
computedChecked?: boolean;
useValueAsChecked: boolean;
checkedProp?: any;
valueProp: any;
indeterminateProp: any;
isValid: boolean;
}
/**
* The arguments for the `onFocus` Checkbox event.
*/
export declare interface CheckboxFocusEvent {
}
/**
* @hidden
*/
export declare interface CheckboxHandle {
element: any;
focus: any;
}
/**
* Represents the props of the [Kendo UI for Vue Checkbox component]({% slug overview_checkbox %}).
*/
export declare interface CheckboxProps extends ToggleBaseProps, FormComponentProps {
/**
* Sets the checked state of the Checkbox.
* Set to null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})).
*/
checked?: boolean | null;
/**
* @hidden
*/
modelValue?: string | number | string[] | boolean | null;
/**
* If the type is different than boolean and the `checked` property is provided it's
* passed to the underlying `input` element.
* If set to boolean and the `checked` property is omitted sets the checked state of the Checkbox.
* Set null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})).
*/
value?: string | number | string[] | boolean | null;
/**
* Sets the default value of checked attribute when used in
* uncontrolled mode ([see example]({% slug default_state %})).
*/
defaultChecked?: boolean;
/**
* The default value of the Checkbox.
*/
defaultValue?: any;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Sets the disabled state of the Checkbox
* ([see example]({% slug disabled_checkbox %})).
*/
disabled?: boolean;
/**
* Sets the `id` of the Checkbox.
*/
id?: string;
/**
* Configures the `size` of the Checkbox.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `rounded` style of the Checkbox.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a rounded `className`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | string;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Sets the label of the Checkbox component ([see example]({% slug labels_checkbox %})).
*/
label?: string | HTMLElement;
/**
* Sets the label render template of the Checkbox component.
* Accepts a slot name, a `render` function, or a Vue component.
*/
labelRender?: any;
/**
* Sets the label position of the Checkbox component 'before' | 'after' ([see example]({% slug labels_checkbox %})).
*/
labelPlacement?: string;
/**
* Sets the optional text after the label of the Checkbox component.
*/
labelOptional?: boolean;
/**
* Sets the `class` of the label element of the Checkbox.
*/
labelClass?: string;
/**
* The event handler that will be fired when the user edits the value.
*/
onChange?: (event: CheckboxChangeEvent) => void;
/**
* The event handler that will be fired when Checkbox is focused.
*/
onFocus?: (event: CheckboxFocusEvent) => void;
/**
* Sets the `tabIndex` property of the Checkbox.
* Defaults to `0`.
*/
tabIndex?: number;
}
/**
* @hidden
*/
export declare const ColorGradient: DefineComponent<ExtractPropTypes< {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
defaultValue: PropType<string>;
value: PropType<string>;
opacity: {
type: PropType<boolean>;
default: boolean;
};
backgroundColor: PropType<string>;
disabled: PropType<boolean>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
tabIndex: PropType<number>;
innerTabIndex: {
type: PropType<number>;
default: any;
};
size: PropType<"small" | "medium" | "large">;
class: PropType<string>;
adaptive: PropType<boolean>;
}>, {}, {
currentValue: any;
currentBgColor: any;
isFirstRender: boolean;
currentHsva: any;
currentRgba: any;
currentHex: any;
focused: boolean;
}, {
valueSet(): any;
computedValue(): any;
hsva(): any;
rgba(): any;
hex(): any;
computedBgColor(): any;
computedTabIndex(): any;
}, {
onKeyDownHandler(e: any): void;
onHexChange(hex: string, value: string, event: any): void;
onRgbaChange(rgba: RGBA, event: NumericTextBoxChangeEvent): void;
onAlphaSliderChange(event: SliderChangeEvent): void;
onHueSliderChange(event: SliderChangeEvent): void;
onDrag(e: DraggableDragEvent): void;
onRelease(): void;
onGradientWrapperClick(event: any): void;
move(e: any, prop: any, d: any): void;
dragKeyDown(e: any): void;
changePosition(event: any): void;
handleHsvaChange(hsva: HSVA, event: any): void;
dispatchChangeEvent(value: string, event: any, hex: string, rgbaValue: string): void;
onFocus(event: any): void;
onBlur(event: any): void;
setAlphaSliderBackground(backgroundColor: string): void;
getGradientRectMetrics(): {
top: any;
right: any;
bottom: any;
left: any;
width: any;
height: any;
x: any;
y: any;
};
focus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
focus: any;
blur: any;
changemodel: any;
'update:modelValue': any;
'update:modelRgbaValue': any;
keydown: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
defaultValue: PropType<string>;
value: PropType<string>;
opacity: {
type: PropType<boolean>;
default: boolean;
};
backgroundColor: PropType<string>;
disabled: PropType<boolean>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
tabIndex: PropType<number>;
innerTabIndex: {
type: PropType<number>;
default: any;
};
size: PropType<"small" | "medium" | "large">;
class: PropType<string>;
adaptive: PropType<boolean>;
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
"onUpdate:modelRgbaValue"?: (...args: any[] | unknown[]) => any;
}>, {
opacity: boolean;
innerTabIndex: number;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The arguments for the `onChange` ColorGradient event.
*/
declare interface ColorGradientChangeEvent {
/**
* The current value of the ColorGradient.
*/
value: string;
/**
* The current value of the ColorGradient in RGBA format.
*/
rgbaValue: string;
}
/**
* Represents the props of the [Kendo UI for Vue ColorGradient component]({% slug overview_colorgradient %}).
*/
declare interface ColorGradientProps_2 {
/**
* The model value of the ColorGradient.
*/
modelValue?: string;
/**
* The model rgba value of the ColorGradient.
*/
modelRgbaValue?: string;
/**
* The default value of the ColorGradient.
*/
defaultValue?: string;
/**
* The value of the ColorGradient.
*/
value?: string;
/**
* Determines the event handler that will be fired when the user edits the value.
*/
onChange?: (event: ColorGradientChangeEvent) => void;
/**
* Represents the focus event.
*/
onFocus?: (event: any) => void;
/**
* Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
*/
opacity?: boolean;
/**
* Enables the color contrast tool.
* Sets the background color that will be compared to the selected value.
* The tool will calculate the contrast ratio between two colors.
* Currently, only the RGBA format is supported.
*/
backgroundColor?: string;
/**
* Determines whether the ColorGradient is disabled
* ([more information and example]({% slug disabled_colorgradient %})).
*
*/
disabled?: boolean;
/**
* Sets the `tabIndex` property of the ColorGradient.
*/
tabIndex?: number;
/**
* Sets tabindex of the inner components of the ColorGradient.
*/
innerTabIndex?: number;
/**
* Specifies the id of the component.
*/
id?: string;
/**
* Sets additional CSS classes to the ColorGradient.
*/
class?: string;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Configures the `size` of the ColorGradient.
*
* The available options are:
* - `small`
* - `medium`
* - `large`
* - `null`—This option removes the the built-in size styles of the ColorGradient. Allows for custom `padding`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* @hidden
* Internal prop that determines whether the ColorGradient is in adaptive state.
*/
adaptive?: boolean;
}
/**
* @hidden
*/
export declare const ColorPalette: DefineComponent<ExtractPropTypes< {
palette: {
type: PropType<string | string[]>;
default: string;
};
columns: PropType<number>;
tileSize: {
type: PropType<number | TileSize>;
};
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
defaultValue: PropType<string>;
value: PropType<string>;
disabled: PropType<boolean>;
tabIndex: PropType<number>;
id: PropType<string>;
class: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
}>, {}, {
focusedColor: string;
currentValue: any;
}, {
focusedColorCooridanates(): TableCell | undefined;
isUncontrolled(): boolean;
selectedColor(): any;
}, {
focus(): void;
onKeyDown(event: any): void;
onColorClick(color: string, event: any): void;
onFocus(event: any): void;
onBlur(event: any): void;
handleCellNavigation(event: any, horizontalStep: number, verticalStep: number): void;
handleEnter(event: any): void;
dispatchChangeEvent(value: string, event: any): void;
getPaletteInfo(): {
colors: any;
columns: any;
};
createCellId(cellCoords: TableCell): string;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
keydown: any;
focus: any;
blur: any;
changemodel: any;
'update:modelValue': any;
'update:modelRgbaValue': any;
change: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
palette: {
type: PropType<string | string[]>;
default: string;
};
columns: PropType<number>;
tileSize: {
type: PropType<number | TileSize>;
};
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
defaultValue: PropType<string>;
value: PropType<string>;
disabled: PropType<boolean>;
tabIndex: PropType<number>;
id: PropType<string>;
class: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
"onUpdate:modelRgbaValue"?: (...args: any[] | unknown[]) => any;
}>, {
size: "small" | "medium" | "large";
palette: string | string[];
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The arguments for the `onChange` ColorPalette event.
*/
export declare interface ColorPaletteChangeEvent {
/**
* The current value of the ColorPalette.
*/
value: string;
/**
* The current value of the ColorPalette in RGBA format.
*/
rgbaValue: string;
}
/**
* Represents the props of the [KendoVue ColorPalette component]({% slug overview_colorpalette %}).
*/
export declare interface ColorPaletteProps {
/**
* The color palette that will be displayed.
*
* The supported values are:
* * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
* * A string array.
*/
palette?: string[] | string;
/**
* Specifies the number of columns that will be displayed.
* Defaults to `10`.
*/
columns?: number;
/**
* Specifies the size of a color cell in px.
* Defaults to `24`.
*/
tileSize?: number | TileSize_2;
/**
* The default value of the ColorPalette.
*/
defaultValue?: string;
/**
* The value of the ColorPalette.
*/
value?: string;
/**
* The model value of the ColorPalette.
*/
modelValue?: string;
/**
* The model rgba value of the ColorPalette.
*/
modelRgbaValue?: string;
/**
* Determines whether the ColorPalette is disabled
* ([more information and example]({% slug disabled_colorpalette %})).
*/
disabled?: boolean;
/**
* Sets the `tabIndex` property of the ColorPalette.
*/
tabIndex?: number;
/**
* Specifies the id of the component.
*/
id?: string;
/**
* Sets additional CSS classes to the ColorPalette.
*/
class?: string;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Configures the `size` of the ColorPalette.
*
* The available options are:
* - `small`
* - `medium`
* - `large`
* - `null`—This option removes the the built-in size styles of the ColorPalette. To set a tile size use the `tileSize` property.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Determines the event handler that will be fired when the user edits the value.
*/
onChange?: (event: ColorPaletteChangeEvent) => void;
/**
* Represent the focus event of the ColorPalette.
*/
onFocus?: (event: FocusEvent) => void;
}
/**
* @hidden
*/
export declare const ColorPicker: DefineComponent<ExtractPropTypes< {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
value: {
type: PropType<string>;
default: any;
};
defaultValue: PropType<string>;
disabled: PropType<boolean>;
dir: PropType<string>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
showClearButton: {
type: PropType<boolean>;
default: boolean;
};
showPreview: {
type: PropType<boolean>;
default: boolean;
};
showButtons: {
type: PropType<boolean>;
default: boolean;
};
paletteSettings: {
type: PropType<ColorPickerPaletteSettings_2>;
default: () => {
palette: string;
};
};
valid: {
type: PropType<boolean>;
default: boolean;
};
tabIndex: {
type: PropType<number>;
default: number;
};
title: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconClassName: PropType<string>;
popupSettings: {
type: PropType<ColorPickerPopupSettings_2>;
default: () => {};
};
gradientSettings: {
type: PropType<ColorGradientProps>;
default: () => {
opacity: boolean;
};
};
flatColorPickerSettings: {
type: PropType<FlatColorPickerProps_2>;
default: () => {};
};
open: {
type: PropType<boolean>;
default: any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
view: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
selectedView: {
type: PropType<number>;
default: any;
};
adaptive: {
type: PropType<boolean>;
default: boolean;
};
adaptiveTitle: {
type: PropType<string>;
};
}>, {}, {
focused: boolean;
currentValue: string;
currentOpen: boolean;
flatcolorpickerRef: any;
windowWidth: number;
observer: any;
}, {
isValueControlled(): boolean;
isOpenControlled(): boolean;
computedValue(): any;
computedOpen(): any;
wrapperClassName(): {
[x: string]: any;
'k-picker': boolean;
'k-colorpicker': boolean;
'k-icon-picker': boolean;
'k-invalid': boolean;
'k-disabled': any;
'k-focus': any;
};
animationStyles(): {
top: number;
width: string;
height: string;
};
classNameAdaptive(): string;
adaptiveState(): boolean;
}, {
calculateMedia(entries: ResizeObserverEntry[]): void;
focusElement(): void;
setOpen(nextOpen: boolean, isBlur?: boolean): void;
onButtonKeyDown(event: any): void;
onKeyDownHandler(event: any): void;
onOpenHandler(): void;
onClickHandler(): void;
onActiveColorClickHandler(event: any): void;
isViewFocused(): boolean;
onButtonBlur(event: any): void;
onFocusHandler(event: any): void;
onBlurTimeout(): void;
onBlurHandler(): void;
onViewChange(event: any): void;
onChangeHandler(event: ColorPaletteChangeEvent, isPalette?: boolean): void;
onFlatChangeHandler(event: FlatColorPickerViewChangeEvent): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
open: any;
close: any;
changemodel: any;
'update:modelValue': any;
'update:modelRgbaValue': any;
activecolorclick: any;
focus: any;
blur: any;
change: any;
viewchange: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
value: {
type: PropType<string>;
default: any;
};
defaultValue: PropType<string>;
disabled: PropType<boolean>;
dir: PropType<string>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
showClearButton: {
type: PropType<boolean>;
default: boolean;
};
showPreview: {
type: PropType<boolean>;
default: boolean;
};
showButtons: {
type: PropType<boolean>;
default: boolean;
};
paletteSettings: {
type: PropType<ColorPickerPaletteSettings_2>;
default: () => {
palette: string;
};
};
valid: {
type: PropType<boolean>;
default: boolean;
};
tabIndex: {
type: PropType<number>;
default: number;
};
title: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconClassName: PropType<string>;
popupSettings: {
type: PropType<ColorPickerPopupSettings_2>;
default: () => {};
};
gradientSettings: {
type: PropType<ColorGradientProps>;
default: () => {
opacity: boolean;
};
};
flatColorPickerSettings: {
type: PropType<FlatColorPickerProps_2>;
default: () => {};
};
open: {
type: PropType<boolean>;
default: any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
view: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
selectedView: {
type: PropType<number>;
default: any;
};
adaptive: {
type: PropType<boolean>;
default: boolean;
};
adaptiveTitle: {
type: PropType<string>;
};
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onClose?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
"onUpdate:modelRgbaValue"?: (...args: any[] | unknown[]) => any;
onOpen?: (...args: any[] | unknown[]) => any;
onViewchange?: (...args: any[] | unknown[]) => any;
onActivecolorclick?: (...args: any[] | unknown[]) => any;
}>, {
value: string;
tabIndex: number;
size: string;
view: string;
rounded: string;
fillMode: string;
valid: boolean;
showClearButton: boolean;
open: boolean;
popupSettings: ColorPickerPopupSettings_2;
adaptive: boolean;
selectedView: number;
showPreview: boolean;
showButtons: boolean;
gradientSettings: ColorGradientProps;
paletteSettings: ColorPickerPaletteSettings_2;
flatColorPickerSettings: FlatColorPickerProps_2;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The arguments for the `onActiveColorClick` ColorPicker event.
*/
declare interface ColorPickerActiveColorClick {
/**
* The current value of the ColorPicker.
*/
value: string;
/**
* A native DOM event.
*/
event: any;
}
/**
* The arguments for the `onBlur` ColorPicker event.
*/
export declare interface ColorPickerBlurEvent {
/**
* A native DOM event.
*/
event: any;
}
/**
* The arguments for the `onChange` ColorPicker event.
*/
export declare interface ColorPickerChangeEvent {
/**
* The current value of the ColorPicker.
*/
value: string;
/**
* The current value of the ColorPicker in RGBA format.
*/
rgbaValue: string;
/**
* A native DOM event.
*/
event: any;
}
/**
* The arguments for the `onFocus` ColorPicker event.
*/
export declare interface ColorPickerFocusEvent {
/**
* A native DOM event.
*/
event: any;
}
/**
* The settings of the ColorPalette that is nested inside the popup of the ColorPicker
* ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)).
*/
export declare interface ColorPickerPaletteSettings {
/**
* Specifies the set of colors.
* Provides a set of predefined palette presets (for example, `office`, `basic`, and `apex`)
* and enables you to implement a custom color palette.
* Defaults to the `office` preset.
*
* The supported values are:
* * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
* * A string with comma-separated colors.
* * A string array.
*/
palette?: string | Array<string>;
/**
* Specifies the number of columns that will be displayed.
* Defaults to `10`.
*/
columns?: number;
/**
* Specifies the size of a color cell.
*
* The possible values are:
* * (Default) `24`
* * `{ width: number, height: number }`
*/
tileSize?: number | TileSize_2;
}
/**
* The settings of the popup container of the ColorPicker.
*/
export declare interface ColorPickerPopupSettings {
/**
* Controls the popup animation. By default, the open and close animations are enabled.
*/
animate?: boolean | PopupAnimation;
/**
* Specifies a list of CSS classes that will be added to the Popup element.
*/
className?: string | Array<string>;
}
/**
* Represents the props of the [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
*/
export declare interface ColorPickerProps {
/**
* The default value of the ColorPicker
* ([see example]({% slug default_value_colorpicker %})).
*/
defaultValue?: string;
/**
* Specifies the model value of the ColorPicker.
*/
modelValue?: string;
/**
* The model rgba value of the ColorPicker.
*/
modelRgbaValue?: string;
/**
* Specifies the value of the ColorPicker.
*/
value?: string;
/**
* Overrides the validity state of the component.
* If `valid` is set, the `required` property will be ignored.
*
* This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
*/
valid?: boolean;
/**
* Sets the disabled state of the ColorPicker
* ([see example]({% slug disabled_colorpicker %})).
*/
disabled?: boolean;
/**
* Sets the `tabIndex` property of the ColorPicker.
* Defaults to `0`.
*/
tabIndex?: number;
/**
* Sets the `title` property of the ColorPicker.
*/
title?: string;
/**
* Sets the ColorPicker selected view index. The default is `0`.
*/
selectedView?: number;
/**
* Sets the view which the ColorPicker will render in the popup
* ([see example]({% slug combinedview_colorpicker %})).
*/
view?: ColorPickerView | string;
/**
* Represents the `dir` HTML attribute.
*/
dir?: string;
/**
* Specifies whether clear button will be rendered in the header.
*/
showClearButton?: boolean;
/**
* Specifies whether preview and revert color boxes will be rendered in the header.
*/
showPreview?: boolean;
/**
* Specifies whether action buttons will be rendered in the footer.
*/
showButtons?: boolean;
/**
* Defines the name of an [existing icon in the Kendo UI for Vue theme]({% slug icons %}).
* ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-kendo-ui-icons)).
*/
icon?: string;
/**
* Defines an SVGIcon to be rendered within the ColorPicker button.
*/
svgIcon?: SVGIcon;
/**
* The class name which displays an icon in the ColorPicker button
* ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-custom-icons)).
*/
iconClassName?: string;
/**
* Configures the ColorPalette that is displayed in the ColorPicker popup
* ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)).
*/
paletteSettings?: ColorPickerPaletteSettings;
/**
* Configures the ColorGradient that is displayed in the ColorPicker popup.
*/
gradientSettings?: ColorGradientProps_2;
/**
* Configures the FlatColorPicker that is displayed in the ColorPicker popup.
*/
flatColorPickerSettings?: FlatColorPickerProps;
/**
* Configures the popup of the ColorPicker.
*/
popupSettings?: ColorPickerPopupSettings;
/**
* Sets the open and close state of the ColorPicker.
*/
open?: boolean;
/**
* Specifies the id of the component.
*/
id?: string;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* The event handler that will be fired when the user edits the value.
*/
onChange?: (event: ColorPickerChangeEvent) => void;
/**
* The event handler that will be fired when ColorPicker is focused.
*/
onFocus?: (event: ColorPickerFocusEvent) => void;
/**
* The event handler that will be fired when ColorPicker is blurred.
*/
onBlur?: (event: ColorPickerBlurEvent) => void;
/**
* The event handler that will be fired when the left side of the ColorPicker is clicked.
*/
onActivecolorclick?: (event: ColorPickerActiveColorClick) => void;
/**
* Configures the `size` of the ColorPicker.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `roundness` of the ColorPicker.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `className`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Configures the `fillMode` of the ColorPicker.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `className`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'flat' | 'outline' | string;
/**
* Providing different rendering of the popup element based on the screen dimensions.
*/
adaptive?: boolean;
/**
* Specifies the text that is rendered as title in the adaptive popup.
*/
adaptiveTitle?: string;
}
/**
* Specifies the view which the ColorPicker will render in the popup
* ([see example]({% slug combinedview_colorpicker %})).
*
* The possible values are:
* * (Default) `palette`
* * `gradient`
* * `combo`
*/
declare type ColorPickerView = 'gradient' | 'palette' | 'combo';
declare type Direction = 'ltr' | 'rtl';
/**
* @hidden
*/
export declare const FlatColorPicker: DefineComponent<ExtractPropTypes< {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
value: PropType<string>;
prevValue: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
view: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
selectedView: {
type: PropType<number>;
default: any;
};
header: PropType<any>;
footer: PropType<any>;
showClearButton: {
type: PropType<boolean>;
default: boolean;
};
showPreview: {
type: PropType<boolean>;
default: boolean;
};
showButtons: {
type: PropType<boolean>;
default: boolean;
};
gradientSettings: {
type: PropType<ColorGradientProps_2>;
default: () => {
opacity: boolean;
};
};
paletteSettings: {
type: PropType<ColorPickerPaletteSettings>;
default: () => {
palette: string;
};
};
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
adaptive: PropType<boolean>;
}>, {}, {
currentView: string;
colorValue: string | Function;
currentPrevColor: string | Function;
focused: boolean;
}, {
isColorGradient(): boolean;
computedColor(): any;
computedPrevColor(): any;
previewClass(): {
'k-coloreditor-preview-color': boolean;
'k-color-preview': boolean;
'k-no-color': boolean;
};
currentClass(): {
'k-coloreditor-current-color': boolean;
'k-color-preview': boolean;
'k-no-color': boolean;
};
computedTabIndex(): 0 | -1;
}, {
focus(): void;
onKeyDownHandler(e: any): void;
handleViewChange(event: any, viewType: any): void;
handleResetColor(): void;
handleColorChange(event: any): void;
handlePaletteColorChange(event: any): void;
triggerChange(event: any): void;
innerKeyDown(event: any): void;
gradientKeyDown(event: any): void;
handleButtonKeydown(e: any): void;
handleCancelBtnClick(): void;
handlePrevColorClick(): void;
onFocus(event: any): void;
onBlur(event: any): void;
onFocusout(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
viewchange: any;
changemodel: any;
'update:modelValue': any;
'update:modelRgbaValue': any;
focus: any;
blur: any;
focusout: any;
keydown: any;
change: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
value: PropType<string>;
prevValue: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
view: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
selectedView: {
type: PropType<number>;
default: any;
};
header: PropType<any>;
footer: PropType<any>;
showClearButton: {
type: PropType<boolean>;
default: boolean;
};
showPreview: {
type: PropType<boolean>;
default: boolean;
};
showButtons: {
type: PropType<boolean>;
default: boolean;
};
gradientSettings: {
type: PropType<ColorGradientProps_2>;
default: () => {
opacity: boolean;
};
};
paletteSettings: {
type: PropType<ColorPickerPaletteSettings>;
default: () => {
palette: string;
};
};
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
adaptive: PropType<boolean>;
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onFocusout?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
"onUpdate:modelRgbaValue"?: (...args: any[] | unknown[]) => any;
onViewchange?: (...args: any[] | unknown[]) => any;
}>, {
size: "small" | "medium" | "large";
view: string;
showClearButton: boolean;
selectedView: number;
showPreview: boolean;
showButtons: boolean;
gradientSettings: ColorGradientProps_2;
paletteSettings: ColorPickerPaletteSettings;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface FlatColorPickerHandle {
/**
* The current element or `null` if there is none.
*/
element: HTMLDivElement | null;
/**
* The props values of the FlatColorPicker.
*/
props: FlatColorPickerProps;
/**
* The focus event callback.
*/
focus: () => void;
}
/**
* Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpickerprops %) component.
*/
export declare interface FlatColorPickerProps {
/**
* Sets the `id` property of the top `div` element of the FlatColorPicker.
*/
id?: string;
/**
* Sets the color model value.
*/
modelValue?: string;
/**
* The model rgba value of the FlatColorPicker.
*/
modelRgbaValue?: string;
/**
* Sets the color value.
*/
value?: string;
/**
* Sets the previous color value.
*/
prevValue?: string;
/**
* Sets the `tabIndex` property of the FlatColorPicker.
*/
tabIndex?: number;
/**
* Determines whether the FlatColorPicker is disabled.
*/
disabled?: boolean;
/**
* Sets the FlatColorPicker view. The default is `combo`.
*/
view?: 'combo' | 'gradient' | 'palette' | string;
/**
* Sets the FlatColorPicker selected view index. The default is `0`.
*/
selectedView?: number;
/**
* Sets custom header component.
*/
header?: any;
/**
* Sets custom footer component.
*/
footer?: any;
/**
* Specifies whether clear button will be rendered in the header.
*/
showClearButton?: boolean;
/**
* Specifies whether preview and revert color boxes will be rendered in the header.
*/
showPreview?: boolean;
/**
* Specifies whether action buttons will be rendered in the footer.
*/
showButtons?: boolean;
/**
* Configures the ColorPalette that is displayed in the ColorPicker popup.
*/
paletteSettings?: ColorPickerPaletteSettings;
/**
* Configures the ColorGradient that is displayed in the ColorPicker popup.
*/
gradientSettings?: ColorGradientProps_2;
/**
* Configures the `size` of the FlatColorPicker.
*
* The available options are:
* - `small`
* - `medium`
* - `large`
* - `null`—This option removes the the built-in size styles of the FlatColorPicker. Allows for custom `padding`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* The event handler that will be fired when the view is changed.
*/
onViewchange?: (event: FlatColorPickerViewChangeEvent) => void;
/**
* The event handler that will be fired when the user edits the value.
*/
onChange?: (event: ColorPickerChangeEvent) => void;
/**
* @hidden
* Internal prop that determines whether the ColorGradient is in adaptive state.
*/
adaptive?: boolean;
}
/**
* The arguments for the `onChange` ColorPicker event.
*/
declare interface FlatColorPickerViewChangeEvent {
/**
* The current value of the ColorPicker.
*/
value: string;
/**
* The viewType of the selected view.
*/
viewType: 'gradient' | 'palette';
}
export { FormComponentValidity }
/**
* @hidden
*/
declare interface HSVA {
h?: number;
s?: number;
v?: number;
a?: number;
}
/**
* @hidden
*/
export declare const Input: DefineComponent<ExtractPropTypes< {
modelValue: {
type: PropType<string | number>;
default: any;
};
disabled: {
type: PropType<boolean>;
default: any;
};
defaultValue: {
type: PropType<string | number | string[]>;
default: string;
};
value: {
type: PropType<string | number | string[]>;
};
label: {
type: PropType<string>;
};
placeholder: {
type: PropType<string>;
};
required: {
type: PropType<boolean>;
default: boolean;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
dir: {
type: PropType<string>;
};
id: PropType<string>;
valid: {
type: PropType<boolean>;
default: any;
};
validate: {
type: PropType<boolean>;
};
validationMessage: {
type: PropType<string>;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
inputClass: PropType<string>;
tabIndex: PropType<number>;
ariaLabel: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
}>, {
inputRef: Ref<any, any>;
}, {
hasMounted: boolean;
autofill: boolean;
currentValue: string | number | string[];
valueDuringOnChange: string;
focused: boolean;
}, {
spanClassNames(): {
'k-floating-label-container': boolean;
'k-focus': any;
'k-empty': boolean;
'k-autofill': any;
'k-invalid': boolean;
'k-rtl': boolean;
};
inputInnerClass(): {
[x: string]: any;
[x: number]: any;
'k-input': boolean;
'k-invalid': boolean;
'k-required': any;
'k-disabled': any;
};
computedValue(): any;
}, {
updateValidClass(): void;
emitFocus(e: any): void;
emitBlur(e: any): void;
handleKeydown(e: any): void;
handleKeyup(e: any): void;
handleKeypress(e: any): void;
clearClick(event: any): void;
focus(): void;
validity(): {
customError: boolean;
valid: any;
badInput: any;
patternMismatch: any;
rangeOverflow: any;
rangeUnderflow: any;
stepMismatch: any;
tooLong: any;
tooShort: any;
typeMismatch: any;
valueMissing: any;
};
isInvalid(state: Object): boolean;
setValidity(): void;
handleInput(event: any): void;
handleChange(event: any): void;
emitUpdate(event: any, eventName: string, value: any): void;
handleAutoFill(e: any): void;
handleAutoFillEnd(e: any): void;
name: () => any;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
input: any;
change: any;
changemodel: any;
'update:modelValue': any;
focus: any;
blur: any;
keyup: any;
keydown: any;
keypress: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
modelValue: {
type: PropType<string | number>;
default: any;
};
disabled: {
type: PropType<boolean>;
default: any;
};
defaultValue: {
type: PropType<string | number | string[]>;
default: string;
};
value: {
type: PropType<string | number | string[]>;
};
label: {
type: PropType<string>;
};
placeholder: {
type: PropType<string>;
};
required: {
type: PropType<boolean>;
default: boolean;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
dir: {
type: PropType<string>;
};
id: PropType<string>;
valid: {
type: PropType<boolean>;
default: any;
};
validate: {
type: PropType<boolean>;
};
validationMessage: {
type: PropType<string>;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
inputClass: PropType<string>;
tabIndex: PropType<number>;
ariaLabel: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
}>> & Readonly<{
onInput?: (...args: any[] | unknown[]) => any;
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onKeypress?: (...args: any[] | unknown[]) => any;
onKeyup?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
}>, {
required: boolean;
size: string;
modelValue: string | number;
defaultValue: string | number | string[];
disabled: boolean;
rounded: string;
fillMode: string;
valid: boolean;
validityStyles: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the props of the [KendoVue Input component]({% slug overview_textbox %}).
* Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
*/
export declare interface InputProps extends FormComponentProps {
/**
* Renders a floating label for the Input component.
*/
id?: string;
label?: string;
value?: string | string[] | number;
modelValue?: string | number;
defaultValue?: string | string[] | number | undefined;
disabled?: boolean;
validate?: boolean;
/**
* Configures the `size` of the Input.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `class`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `roundness` of the Input.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `class`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Configures the `fillMode` of the Input.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `class`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'flat' | 'outline' | string;
dir?: string;
/**
* Fires when the `change` event of the input is triggered.
*/
onChange?: (event: any) => void;
/**
* Fires when the `input` event of the input is triggered.
*/
onInput?: (event: any) => void;
/**
* Fires when the input is focused.
*/
onFocus?: (event: any) => void;
/**
* Fires when the input is blurred.
*/
onBlur?: (event: any) => void;
/**
* Fires when the 'keyup' input event is triggered.
*/
onKeyup?: (event: any) => void;
/**
* Fires when the 'keydown' input event is triggered.
*/
onKeydown?: (event: any) => void;
/**
* Fires when the 'keypress' input event is triggered.
*/
onKeypress?: (event: any) => void;
/**
* Specifies the placeholder of an `input` element. Used to define if the input is empty.
*/
placeholder?: string;
/**
* Defines a string prop that controls the input icon.
*
* @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
*/
iconName?: string;
/**
* Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
*
* @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
*/
inputPrefix?: boolean | string | object | Function;
/**
* Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
*
* @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
*/
inputSuffix?: boolean | string | object | Function;
/**
* Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
*
* @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
*/
showValidationIcon?: boolean;
/**
* Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
*
* @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
*/
showLoadingIcon?: boolean;
/**
*
* Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
*
* @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
*/
showClearButton?: boolean;
/**
* Defines additional class to the wrapper element.
*
* @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
*/
wrapperClass?: string;
/**
* Defines tabindex to the input element.
*/
tabIndex?: number;
/**
* Defines additional class to the input element.
*/
inputClass?: string;
/**
* Defines a string value that labels an interactive element.
*/
ariaLabel?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaDescribedBy?: string;
/**
* Defines a string value that labels an interactive element.
*/
ariaLabelledBy?: string;
/**
* Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs.
* * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario.
*/
minlength?: string;
/**
* Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs.
* * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario.
*/
maxlength?: string;
}
/**
* Represents the Kendo UI for Vue InputSeparator component. It can be used as a separator
* between horizontal icons in prefix and suffix templates.
*
* ```jsx
* <template>
* <InputSeparator />
* </template>
* ```
*/
export declare const InputSeparator: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const MaskedTextBox: DefineComponent<ExtractPropTypes< {
type: {
type: PropType<string>;
default: string;
};
modelValue: PropType<string>;
modelRawValue: PropType<string>;
value: PropType<string>;
defaultValue: PropType<string>;
placeholder: PropType<string>;
title: PropType<string>;
dir: PropType<string>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
tabIndex: PropType<number>;
accessKey: PropType<string>;
disabled: PropType<boolean>;
readonly: PropType<boolean>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
prompt: {
type: PropType<string>;
default: string;
};
promptPlaceholder: {
type: PropType<string>;
default: string;
};
includeLiterals: {
type: PropType<boolean>;
default: boolean;
};
maskValidation: {
type: PropType<boolean>;
default: boolean;
};
mask: PropType<string>;
rules: {
type: PropType<{
[key: string]: RegExp;
}>;
default: () => {
[key: string]: RegExp;
};
};
selection: PropType<{
start: number;
end: number;
}>;
name: PropType<string>;
label: PropType<string>;
validationMessage: PropType<string>;
required: {
type: PropType<boolean>;
default: boolean;
};
valid: {
type: PropType<boolean>;
default: any;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
iconName: PropType<String>;
inputPrefix: {
type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[];
default: () => any;
};
inputSuffix: {
type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[];
default: () => any;
};
showValidationIcon: PropType<Boolean>;
showLoadingIcon: PropType<Boolean>;
showClearButton: PropType<Boolean>;
inputClass: PropType<String>;
wrapperClass: PropType<String>;
inputAttributes: PropType<Object>;
}>, {
inputRef: Ref<any, any>;
}, {
currentValue: any;
currentFocused: boolean;
inputValue: any;
currentSelection: any[];
}, {
computedRules(): any;
spanClassNames(): {
[x: number]: any;
'k-floating-label-container': boolean;
'k-focus': any;
'k-empty': boolean;
'k-invalid': boolean;
'k-rtl': boolean;
'k-loading': any;
};
wrapperSpanClass(): {
[x: string]: any;
[x: number]: any;
'k-maskedtextbox': boolean;
'k-input': boolean;
'k-invalid': boolean;
'k-required': any;
'k-disabled': any;
'k-loading': any;
};
inputInnerClass(): {
[x: number]: any;
'k-input-inner': boolean;
};
}, {
focus(): void;
computedValue(): any;
rawValue(): string;
validity(): FormComponentValidity;
pasteHandler(event: any): void;
clearClick(event: any): void;
onChangeHandler(event: any): void;
focusHandler(event: any): void;
blurHandler(event: any): void;
triggerOnChange(maskedValue: string, event: any): void;
updateService(extra?: any): void;
setValidity(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, ("blur" | "change" | "focus" | "changemodel" | "update:modelValue" | "update:modelRawValue")[], "blur" | "change" | "focus" | "changemodel" | "update:modelValue" | "update:modelRawValue", PublicProps, Readonly<ExtractPropTypes< {
type: {
type: PropType<string>;
default: string;
};
modelValue: PropType<string>;
modelRawValue: PropType<string>;
value: PropType<string>;
defaultValue: PropType<string>;
placeholder: PropType<string>;
title: PropType<string>;
dir: PropType<string>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
tabIndex: PropType<number>;
accessKey: PropType<string>;
disabled: PropType<boolean>;
readonly: PropType<boolean>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
prompt: {
type: PropType<string>;
default: string;
};
promptPlaceholder: {
type: PropType<string>;
default: string;
};
includeLiterals: {
type: PropType<boolean>;
default: boolean;
};
maskValidation: {
type: PropType<boolean>;
default: boolean;
};
mask: PropType<string>;
rules: {
type: PropType<{
[key: string]: RegExp;
}>;
default: () => {
[key: string]: RegExp;
};
};
selection: PropType<{
start: number;
end: number;
}>;
name: PropType<string>;
label: PropType<string>;
validationMessage: PropType<string>;
required: {
type: PropType<boolean>;
default: boolean;
};
valid: {
type: PropType<boolean>;
default: any;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
iconName: PropType<String>;
inputPrefix: {
type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[];
default: () => any;
};
inputSuffix: {
type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[];
default: () => any;
};
showValidationIcon: PropType<Boolean>;
showLoadingIcon: PropType<Boolean>;
showClearButton: PropType<Boolean>;
inputClass: PropType<String>;
wrapperClass: PropType<String>;
inputAttributes: PropType<Object>;
}>> & Readonly<{
onFocus?: (...args: any[]) => any;
onBlur?: (...args: any[]) => any;
onChange?: (...args: any[]) => any;
onChangemodel?: (...args: any[]) => any;
"onUpdate:modelValue"?: (...args: any[]) => any;
"onUpdate:modelRawValue"?: (...args: any[]) => any;
}>, {
type: string;
required: boolean;
size: string;
rounded: string;
fillMode: string;
valid: boolean;
validityStyles: boolean;
inputPrefix: string | boolean | Function | Record<string, any>;
inputSuffix: string | boolean | Function | Record<string, any>;
prompt: string;
promptPlaceholder: string;
rules: {
[key: string]: RegExp;
};
includeLiterals: boolean;
maskValidation: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The arguments for the `change` event of the MaskedTextBox.
*/
export declare interface MaskedTextBoxChangeEvent extends MaskedTextBoxEvent {
/**
* Specifies the start of the selection which will be set to the MaskedTextBox when it is updated.
*/
selectionStart: number;
/**
* Specifies the end of the selection which will be set to the MaskedTextBox when it is updated.
*/
selectionEnd: number;
/**
* The current value of the component.
*/
value: any;
}
/**
* The arguments for a MaskedTextBox event.
*/
export declare interface MaskedTextBoxEvent {
/**
* A native DOM event.
*/
event: Event;
/**
* An event target.
*/
target: any;
}
/**
* Represents the props of the [Kendo UI for Vue MaskedTextBox component]({% slug overview_maskedtextbox %}).
*/
export declare interface MaskedTextBoxProps extends FormComponentProps {
/**
* Specifies the value of the MaskedTextBox.
*/
value?: string;
/**
* Specifies the initial value. Leaves the subsequent updates uncontrolled.
*/
defaultValue?: string;
/**
* Specifies the input placeholder.
*/
placeholder?: string;
/**
* Sets the title of the `input` element of the MaskedTextBox.
*/
title?: string;
/**
* Represents the `dir` HTML attribute.
*/
dir?: string;
/**
* Configures the `size` of the MaskedTextBox.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `class`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `roundness` of the MaskedTextBox.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `class`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Configures the `fillMode` of the MaskedTextBox.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `class`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'flat' | 'outline' | string;
/**
* Sets the `tabIndex` property of the MaskedTextBox.
*/
tabIndex?: number;
/**
* Specifies the `accessKey` of the MaskedTextBox.
*/
accessKey?: string;
/**
* Specifies the width of the MaskedTextBox.
*/
width?: number | string;
/**
* Determines whether the MaskedTextBox is disabled.
*/
disabled?: boolean;
/**
* Renders a floating label for the MaskedTextBox.
*/
label?: string;
/**
* Sets the `id` of the `input` DOM element.
*/
id?: string;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Determines whether the MaskedTextBox is in its read-only state.
*/
readonly?: boolean;
/**
* Represents a prompt character for the masked value. Defaults to `_`.
*/
prompt?: string;
/**
* Indicates a character which represents an empty position in the raw value. Defaults to ` `.
*/
promptPlaceholder?: string;
/**
* Indicates whether to include literals in the raw value. Defaults to `false`.
*/
includeLiterals?: boolean;
/**
* Determines whether the built-in mask validator is enforced when a form is validated. Defaults to `true`.
*/
maskValidation?: boolean;
/**
* Represents the current mask. If no mask is set, the component behaves as a standard `type="text"` input.
*/
mask?: string;
/**
* Represents the RegExp-based mask validation array.
*/
rules?: {
[key: string]: RegExp;
};
/**
* Represents the beginning and ending of the selected portion of the input content that will be applied the next time when the MaskedTextBox is rendered.
*/
selection?: {
start: number;
end: number;
};
/**
* Determines the event handler that will be fired when the user edits the value.
*/
onChange?: (event: MaskedTextBoxChangeEvent) => void;
/**
* Fires each time the user focuses the MaskedTextBox.
*/
onFocus?: (event: MaskedTextBoxEvent) => void;
/**
* Fires each time the MaskedTextBox gets blurred.
*/
onBlur?: (event: MaskedTextBoxEvent) => void;
/**
* v-model raw value
*/
modelRawValue?: string;
/**
* v-model value
*/
modelValue?: string;
/**
* The type of the input - 'text' by default
*/
type?: string;
/**
* Defines a string prop that controls the input icon. This property works only with the Kendo UI for Vue FontIcons.
* Check the [Icons]({% slug icons %}) article for more information about how the Font Icon can be loaded to your project.
*/
iconName?: String;
/**
* Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
*/
inputPrefix?: Boolean | String | Object | Function;
/**
* Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
*/
inputSuffix?: Boolean | String | Object | Function;
/**
* Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
*/
showValidationIcon?: Boolean;
/**
* Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
*/
showLoadingIcon?: Boolean;
/**
* Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
*/
showClearButton?: Boolean;
/**
* Defines additional class to the inner input element.
*/
inputClass?: String;
/**
* Defines additional class to the wrapper element.
*/
wrapperClass?: String;
/**
* Sets the built-in HTML attributes of the inner focusable input element.
* Attributes which are essential for certain component functionalities cannot be changed.
*/
inputAttributes?: Object;
}
/**
* @hidden
*/
export declare const NumericTextBox: DefineComponent<ExtractPropTypes< {
modelValue: PropType<number>;
value: PropType<number>;
defaultValue: PropType<number>;
step: {
type: PropType<number>;
default: number;
};
format: PropType<string | NumberFormatOptions>;
tabIndex: PropType<number>;
accessKey: PropType<string>;
title: PropType<string>;
placeholder: PropType<string>;
min: PropType<number>;
max: PropType<number>;
spinners: {
type: PropType<boolean>;
default: boolean;
};
disabled: {
type: PropType<boolean>;
default: boolean;
};
dir: PropType<string>;
name: PropType<string>;
label: PropType<string>;
validationMessage: PropType<string>;
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
valid: {
type: PropType<boolean>;
default: any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
required: {
type: PropType<boolean>;
default: boolean;
};
id: PropType<string>;
ariaLabel: PropType<string>;
iconName: PropType<string>;
inputPrefix: PropType<string | boolean | object | Function>;
inputSuffix: PropType<string | boolean | object | Function>;
showValidationIcon: PropType<boolean>;
showLoadingIcon: PropType<boolean>;
showClearButton: PropType<boolean>;
inputClass: PropType<string>;
inputType: {
type: PropType<string>;
default: string;
};
wrapperClass: PropType<string>;
inputAttributes: PropType<Object>;
}>, {
inputRef: Ref<any, any>;
elementWrapperRef: Ref<any, any>;
kendoLocalizationService: {};
kendoIntlService: {};
}, {
hasMounted: boolean;
isInvalid: boolean;
isEmpty: boolean;
currentValue: number;
valueDuringOnChange: number;
currentLooseValue: string;
selectionStart: number;
selectionEnd: number;
decimalSelect: boolean;
focused: boolean;
forceUpdate: boolean;
}, {
computedValue(): number | undefined;
looseValue(): string;
spanClassNames(): {
[x: number]: any;
'k-floating-label-container': boolean;
'k-focus': any;
'k-empty': boolean;
'k-invalid': boolean;
'k-rtl': boolean;
};
wrapperClassNames(): {
[x: string]: any;
[x: number]: any;
'k-input': boolean;
'k-numerictextbox': boolean;
'k-invalid': boolean;
'k-required': any;
'k-disabled': any;
'k-loading': any;
};
inputInnerClass(): {
[x: number]: any;
'k-input-inner': boolean;
};
}, {
validity(): FormComponentValidity;
clearClick(event: any): void;
focus(): void;
emitFocus(e: any): void;
emitBlur(e: any): void;
handleFocus(_: any): void;
handleBlur(_: any): void;
setValidity(): void;
getCurrentState(): {
eventValue: number;
prevLooseValue: any;
currentLooseValue: any;
selectionStart: any;
selectionEnd: any;
decimalSelect: boolean;
valueIsCorrected: boolean;
valueIsOutOfRange: boolean;
isPaste: any;
focused: any;
};
parseNumber(text: string): number;
elementChange(event: any): void;
triggerChange(event: any, newState: NumericTextBoxData): void;
onPasteHandler(_event: any): void;
increase(event: any): void;
decrease(event: any): void;
wheel(event: any): void;
keyDown(event: any): void;
spinnersWrapperMouseDown(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
changemodel: any;
'update:modelValue': any;
focus: any;
blur: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
modelValue: PropType<number>;
value: PropType<number>;
defaultValue: PropType<number>;
step: {
type: PropType<number>;
default: number;
};
format: PropType<string | NumberFormatOptions>;
tabIndex: PropType<number>;
accessKey: PropType<string>;
title: PropType<string>;
placeholder: PropType<string>;
min: PropType<number>;
max: PropType<number>;
spinners: {
type: PropType<boolean>;
default: boolean;
};
disabled: {
type: PropType<boolean>;
default: boolean;
};
dir: PropType<string>;
name: PropType<string>;
label: PropType<string>;
validationMessage: PropType<string>;
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
valid: {
type: PropType<boolean>;
default: any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
required: {
type: PropType<boolean>;
default: boolean;
};
id: PropType<string>;
ariaLabel: PropType<string>;
iconName: PropType<string>;
inputPrefix: PropType<string | boolean | object | Function>;
inputSuffix: PropType<string | boolean | object | Function>;
showValidationIcon: PropType<boolean>;
showLoadingIcon: PropType<boolean>;
showClearButton: PropType<boolean>;
inputClass: PropType<string>;
inputType: {
type: PropType<string>;
default: string;
};
wrapperClass: PropType<string>;
inputAttributes: PropType<Object>;
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
}>, {
required: boolean;
size: string;
disabled: boolean;
rounded: string;
fillMode: string;
valid: boolean;
validityStyles: boolean;
step: number;
spinners: boolean;
inputType: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The arguments for the `change` event of the NumericTextBox.
*/
export declare interface NumericTextBoxChangeEvent {
/**
* The current value of the NumericTextBox.
*/
value: number | null;
/**
* The native event.
*/
event: any;
}
/**
* @hidden
*/
export declare interface NumericTextBoxComputed {
[key: string]: any;
wrapperClassNames: any;
computedValue?: number;
looseValue?: string;
spanClassNames: any;
}
/**
* @hidden
*/
declare interface NumericTextBoxData {
eventValue: number | null | undefined;
prevLooseValue: string | undefined;
currentLooseValue: string | undefined;
selectionStart: number | undefined;
selectionEnd: number | undefined;
decimalSelect: boolean;
valueIsCorrected: boolean;
valueIsOutOfRange: boolean;
focused: boolean;
isPaste: boolean;
}
/**
* @hidden
*/
export declare const RadioButton: DefineComponent<ExtractPropTypes< {
ariaDescribedBy: PropType<string>;
checked: PropType<boolean>;
disabled: PropType<boolean>;
className: PropType<string>;
content: PropType<any>;
dataItem: PropType<object>;
id: PropType<string>;
label: PropType<string>;
labelRender: PropType<any>;
item: PropType<any>;
labelPlacement: PropType<string>;
name: PropType<string>;
index: PropType<number>;
tag: {
type: PropType<string>;
default: string;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
tabIndex: PropType<number>;
value: PropType<any>;
valid: {
type: PropType<boolean>;
default: any;
};
role: PropType<string>;
}>, {
inputRef: Ref<any, any>;
}, {}, {
inputClassName(): object;
}, {
focusElement(): void;
handleChange(event: any): void;
handleFocus(event: any): void;
handleBlur(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
focus: any;
blur: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
ariaDescribedBy: PropType<string>;
checked: PropType<boolean>;
disabled: PropType<boolean>;
className: PropType<string>;
content: PropType<any>;
dataItem: PropType<object>;
id: PropType<string>;
label: PropType<string>;
labelRender: PropType<any>;
item: PropType<any>;
labelPlacement: PropType<string>;
name: PropType<string>;
index: PropType<number>;
tag: {
type: PropType<string>;
default: string;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
tabIndex: PropType<number>;
value: PropType<any>;
valid: {
type: PropType<boolean>;
default: any;
};
role: PropType<string>;
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
}>, {
size: string;
valid: boolean;
tag: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The arguments for the `onBlur` RadioButton event.
*/
declare interface RadioButtonBlurEvent {
}
/**
* The arguments for the `onChange` RadioButton event.
*/
export declare interface RadioButtonChangeEvent {
/**
* The value of the selected RadioButton.
*/
value: any;
}
/**
* The arguments for the `onFocus` RadioButton event.
*/
export declare interface RadioButtonFocusEvent {
}
/**
* Represents the props of the [Kendo UI for Vue RadioButton component]({% slug overview_radiobutton %}).
* Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
*/
export declare interface RadioButtonProps {
/**
* Identifies the element(s) which will describe the component, similar
* to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Specifies if the Radio button is checked.
*/
checked?: boolean;
/**
* Specifies the class applied to the input element.
*/
className?: string;
/**
* Specifies if the Radio button is disabled.
*/
disabled?: boolean;
/**
* @hidden
* Used in RadioGroup scenarios with a custom template to pass dataItem data to the template
*/
dataItem?: object;
/**
* Specifies the current index of the Radio button.
*/
index?: number;
/**
* Sets the `id` of the Radio button.
*/
id?: string;
/**
* Sets the label of the Radio button ([see example]({% slug labels_radiobutton %})).
*/
label?: string;
/**
* Sets the label render template of the Radio button component.
* Accepts a slot name, a `render` function, or a Vue component.
*/
labelRender?: any;
/**
* Sets the item content template of the Radio button component.
* Accepts a slot name, a `render` function, or a Vue component.
*/
content?: any;
/**
* Sets the item render template of the Radio button component.
* Accepts a slot name, a `render` function, or a Vue component.
*/
item?: any;
/**
* Sets the label position of the Radio button ([see example]({% slug labels_radiobutton %})).
* Accepts two options: `before` or `after`. Defaults to `after`.
*/
labelPlacement?: string;
/**
* Sets the `name` property of the Radio button.
*/
name?: string;
/**
* Sets the `tag` property of the Radio button wrapping element.
*/
tag?: string;
/**
* Configures the `size` of the RadioButton.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `class`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Sets the `tabIndex` property of the Radio button.
* Defaults to `0`.
*/
tabIndex?: number;
/**
* Overrides the validity state of the component.
* If `valid` is set, the `required` property will be ignored.
*
* This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
*/
valid?: boolean;
/**
* Sets the value to be submitted.
*/
value?: any;
/**
* Represents the `role` HTML attribute.
*/
role?: string;
/**
* The event handler that will be fired when the changes the selected value.
*/
onChange?: (event: RadioButtonChangeEvent) => void;
/**
* The event handler that will be fired when RadioButton is focused.
*/
onFocus?: (event: RadioButtonFocusEvent) => void;
/**
* The event handler that will be fired when RadioButton is blurred.
*/
onBlur?: (event: RadioButtonBlurEvent) => void;
}
/**
* @hidden
*/
export declare const RadioGroup: DefineComponent<ExtractPropTypes< {
ariaLabelledBy: StringConstructor;
ariaDescribedBy: StringConstructor;
dataItems: ArrayConstructor;
defaultValue: (ObjectConstructor | StringConstructor | NumberConstructor)[];
dir: StringConstructor;
disabled: BooleanConstructor;
labelPlacement: StringConstructor;
item: {
type: StringConstructor;
default: any;
};
layout: {
type: StringConstructor;
default: string;
validator: (value: string) => any;
};
name: StringConstructor;
modelValue: (ObjectConstructor | StringConstructor | NumberConstructor)[];
value: (ObjectConstructor | StringConstructor | NumberConstructor)[];
valid: {
type: BooleanConstructor;
default: any;
};
}>, {
inputRef: Ref<any, any>;
}, {
rtl: boolean;
stateChecked: any;
}, {
radioGroupClasses(): any;
checkedRadioValue(): any;
currentDir(): any;
}, {
focusElement(): void;
handleChange(event: RadioButtonChangeEvent): void;
handleFocus(event: RadioButtonFocusEvent): void;
handleBlur(event: RadioButtonBlurEvent): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
changemodel: any;
'update:modelValue': any;
change: any;
focus: any;
blur: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
ariaLabelledBy: StringConstructor;
ariaDescribedBy: StringConstructor;
dataItems: ArrayConstructor;
defaultValue: (ObjectConstructor | StringConstructor | NumberConstructor)[];
dir: StringConstructor;
disabled: BooleanConstructor;
labelPlacement: StringConstructor;
item: {
type: StringConstructor;
default: any;
};
layout: {
type: StringConstructor;
default: string;
validator: (value: string) => any;
};
name: StringConstructor;
modelValue: (ObjectConstructor | StringConstructor | NumberConstructor)[];
value: (ObjectConstructor | StringConstructor | NumberConstructor)[];
valid: {
type: BooleanConstructor;
default: any;
};
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
}>, {
disabled: boolean;
valid: boolean;
item: string;
layout: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The arguments for the `onChange` RadioGroup event.
*/
export declare interface RadioGroupChangeEvent {
/**
* The value of the selected RadioButton.
*/
value: any;
}
/**
* The arguments for the `onFocus` RadioGroup event.
*/
export declare interface RadioGroupFocusEvent {
}
/**
* Represents the props of the [Kendo UI for Vue RadioGroup component]({% slug overview_radiobutton %}).
*/
export declare interface RadioGroupProps {
/**
* Identifies the element(s) which will describe the component, similar to HTML
* [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute)
* attribute. For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* The collection of radio buttons that will
* be rendered in the RadioGroup ([see example]({% slug overview_radiobutton %})).
*/
dataItems?: Array<RadioButtonProps>;
/**
* Sets the default checked state of a radio button when used in
* uncontrolled mode ([see example]({% slug overview_radiobutton %})).
* The `checked` property is passed to the underlying `input` element.
*/
defaultValue?: any;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Disable all radio buttons ([see example]({% slug disabled_radiobutton %})).
*/
disabled?: boolean;
/**
* Overrides the default component responsible for visualizing a single item.
*
* The default element is `li` with a [RadioButton]({% slug api_inputs_radiobuttonprops %}) as `children`.
*/
item?: any;
/**
* Sets the label position of the radio buttons.
* Accepts two options: `before` or `after`. Defaults to `after`.
*/
labelPlacement?: string;
/**
* Specifies the radio group layout 'horizontal' or 'vertical'. DEfault is 'horizontal'.
*/
layout?: string;
/**
* Specifies the `name` property of the `input` DOM elements.
*/
name?: string;
/**
* The event handler that will be fired when the changes the selected value.
*/
onChange?: (event: RadioGroupChangeEvent) => void;
/**
* The event handler that will be fired when Radio button is focused.
*/
onFocus?: (event: RadioGroupFocusEvent) => void;
/**
* @hidden
*/
modelValue?: string | number | null;
/**
* Sets the default checked state of a radio
* button when used in controlled mode ([see example]({% slug controlled_radiogroup %})).
* The `checked` property is passed to the underlying `input` element.
*/
value?: string | number | null;
/**
* Overrides the validity state of the component.
* If `valid` is set, the `required` property will be ignored.
*
* This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
*/
valid?: boolean;
}
/**
* The range object representing the value of the RangeSlider.
*/
declare type Range_2 = {
/**
* The start of the range.
*/
start: number;
/**
* The end of the range.
*/
end: number;
};
export { Range_2 as Range }
/**
* Represents the [Kendo UI for Vue Native RangeSlider component]({% slug overview_rangeslider %}).
* Accepts properties of type [RangeSliderProps]({% slug api_inputs_rangesliderprops %}).
* Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).
*/
export declare const RangeSlider: DefineComponent<ExtractPropTypes< {
id: StringConstructor;
value: {
type: ObjectConstructor;
validator: (value: any) => boolean;
};
defaultValue: {
type: ObjectConstructor;
default: () => {
start: number;
end: number;
};
validator: (value: any) => boolean;
};
step: {
type: NumberConstructor;
default: number;
};
min: {
type: NumberConstructor;
required: true;
};
max: {
type: NumberConstructor;
required: true;
};
vertical: BooleanConstructor;
disabled: BooleanConstructor;
dir: {
type: StringConstructor;
default: string;
validator: (value: any) => any;
};
startTabIndex: NumberConstructor;
endTabIndex: NumberConstructor;
}>, {
inputRef: Ref<any, any>;
kendoLocalizationService: {};
}, {
currentValue: Record<string, any>;
currentDrag: string;
currentDir: string;
}, {
computedValue(): any;
percentStart(): number;
percentEnd(): number;
sliderItemsStyle(): {
paddingTop: number;
height: string;
} | {
paddingTop?: undefined;
height?: undefined;
};
trackStyles(): {
marginTop: string;
marginBottom: string;
marginLeft?: undefined;
marginRight?: undefined;
} | {
marginLeft: string;
marginRight: string;
marginTop?: undefined;
marginBottom?: undefined;
};
}, {
dispatchStateValue(args: any): void;
focus(): void;
handleChange(newValue: any, event: any | DraggableDragEvent): void;
calcNewDistance(event: any): any;
calcKey(payload: any): "end" | "start";
handleStartKeyDown(event: any): void;
handleEndKeyDown(event: any): void;
handleTrackPress(event: any): void;
handleTrackDrag(event: any): void;
handleTrackRelease(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
id: StringConstructor;
value: {
type: ObjectConstructor;
validator: (value: any) => boolean;
};
defaultValue: {
type: ObjectConstructor;
default: () => {
start: number;
end: number;
};
validator: (value: any) => boolean;
};
step: {
type: NumberConstructor;
default: number;
};
min: {
type: NumberConstructor;
required: true;
};
max: {
type: NumberConstructor;
required: true;
};
vertical: BooleanConstructor;
disabled: BooleanConstructor;
dir: {
type: StringConstructor;
default: string;
validator: (value: any) => any;
};
startTabIndex: NumberConstructor;
endTabIndex: NumberConstructor;
}>> & Readonly<{}>, {
vertical: boolean;
defaultValue: Record<string, any>;
disabled: boolean;
dir: string;
step: number;
}, {}, {}, {}, string, () => {
kendoMin: any;
kendoMax: any;
kendoVertical: any;
}, true, {}, any>;
/**
* Represent the return type of RangeSliderChangeEvent.
*/
export declare interface RangeSliderChangeEvent {
/**
* The value from type Range - `start` and `end`.
*/
value: Range_2;
/**
* The target of the RangeSliderChangeEvent from RangeSliderHandle.
*/
target: RangeSliderHandle;
/**
* The event of the RangeSliderChangeEvent.
*/
event: any | DraggableDragEvent;
}
/**
* @hidden
*/
export declare interface RangeSliderComputed {
[key: string]: any;
computedValue: any;
percentStart: number;
percentEnd: number;
sliderItemsStyle: object;
trackStyles: object;
}
/**
* Represents the target(element and props) of the RangeSliderChangeEvent.
*/
export declare interface RangeSliderHandle {
/**
* The current element or `null` if there is no one.
*/
element: HTMLDivElement | null;
/**
* The props values of the RangeSlider.
*/
props: RangeSliderProps;
/**
* The focus event callback.
*/
focus: () => void;
}
/**
* Represents the properties of [RangeSlider](% slug api_inputs_rangeslider %) component.
*/
export declare interface RangeSliderProps extends FormComponentProps {
/**
* Sets the `id` property of the top div element of the RangeSlider.
*/
id?: string;
/**
* The flexible values of type Range - `start and `end`.
*/
value?: Range_2;
/**
* The default set values of type Range - `start` and `end`.
*/
defaultValue?: Range_2;
/**
* Triggered after value change - gets outside access to the element, new values and the event type.
*/
onChange?: (event: RangeSliderChangeEvent) => void;
/**
* The step by which the value is increment/decrement.
*/
step?: number;
/**
* The minimum possible value of the RangeSlider.
*/
min: number;
/**
* The maximum possible value of the RangeSlider.
*/
max: number;
/**
* The RangeSlider orientation if true - vertical, else - horizontal.
*/
vertical?: boolean;
/**
* Determines the disabled mode of the RangeSlider, if true - disabled.
*/
disabled?: boolean;
/**
* The RangeSlider direction `ltr` or `rtl`.
*/
dir?: Direction | string;
/**
* Sets the `tabIndex` attribute to the `start` drag handle.
*/
startTabIndex?: number;
/**
* Sets the `tabIndex` attribute to the `end` drag handle.
*/
endTabIndex?: number;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
}
/**
* @hidden
*/
export declare const Rating: DefineComponent<ExtractPropTypes< {
min: {
type: PropType<number>;
default: number;
};
max: {
type: PropType<number>;
default: number;
};
step: {
type: PropType<number>;
default: number;
};
item: {
type: PropType<any>;
};
precision: {
type: PropType<"item" | "half">;
default: string;
validator: (value: 'item' | 'half') => any;
};
selection: {
type: PropType<"single" | "continues">;
default: string;
validator: (value: 'continues' | 'single') => any;
};
value: PropType<number>;
icon: PropType<string>;
svgIconOutline: PropType<SVGIcon>;
svgIcon: PropType<SVGIcon>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
readonly: PropType<boolean>;
id: PropType<string>;
half: PropType<boolean>;
defaultValue: PropType<number>;
label: PropType<string>;
}>, {
inputRef: Ref<any, any>;
}, {
focused: boolean;
currentValue: any;
currentHovered: any;
}, {
base(): number;
computedValue(): number;
}, {
handleFocus(event: FocusEvent): void;
handleBlur(event: FocusEvent): void;
handleChange(newValue: number, event: PointerEvent): void;
handleKeyDown(event: KeyboardEvent): void;
handleItemClick(eventData: RatingItemMouseEvent): void;
handleMouseMove(eventData: RatingItemMouseEvent): void;
handleMouseLeave(eventData: RatingItemMouseEvent): void;
dispatchValue(action: RatingActionDispatch): void;
dispatchHover(action: RatingActionDispatch): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
keydown: any;
focus: any;
blur: any;
click: any;
mouseleave: any;
mousemove: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
min: {
type: PropType<number>;
default: number;
};
max: {
type: PropType<number>;
default: number;
};
step: {
type: PropType<number>;
default: number;
};
item: {
type: PropType<any>;
};
precision: {
type: PropType<"item" | "half">;
default: string;
validator: (value: 'item' | 'half') => any;
};
selection: {
type: PropType<"single" | "continues">;
default: string;
validator: (value: 'continues' | 'single') => any;
};
value: PropType<number>;
icon: PropType<string>;
svgIconOutline: PropType<SVGIcon>;
svgIcon: PropType<SVGIcon>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
readonly: PropType<boolean>;
id: PropType<string>;
half: PropType<boolean>;
defaultValue: PropType<number>;
label: PropType<string>;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onMouseleave?: (...args: any[] | unknown[]) => any;
onMousemove?: (...args: any[] | unknown[]) => any;
}>, {
selection: "single" | "continues";
step: number;
min: number;
max: number;
precision: "item" | "half";
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
declare enum RATING_ACTION {
select = "select",
deselect = "deselect",
increase = "increase",
decrease = "decrease",
min = "min",
max = "max",
reset = "reset"
}
/**
* @hidden
*/
declare type RatingActionDispatch = {
type: RATING_ACTION;
payload?: number;
event?: any;
};
/**
* Represents the return type of the RatingItemMouseEvent.
*/
declare interface RatingItemMouseEvent {
/**
* The event of the RatingItemMouseEvent.
*/
event: MouseEvent;
/**
* The target of the RatingItemMouseEvent.
*/
target: Element;
/**
* @hidden
*/
value?: number | null;
}
/**
* @hidden
*/
declare interface RGBA {
r?: number;
g?: number;
b?: number;
a?: number;
}
/**
* @hidden
*/
export declare const Signature: DefineComponent<ExtractPropTypes< {
strokeWidth: {
type: PropType<number>;
default: number;
};
smooth: PropType<boolean>;
popupScale: {
type: PropType<number>;
default: number;
};
exportScale: {
type: PropType<number>;
default: number;
};
modelValue: PropType<string>;
name: PropType<string>;
value: PropType<string>;
tabIndex: PropType<number>;
dir: PropType<string>;
ariaDescribedBy: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaLabel: PropType<string>;
hideLine: PropType<boolean>;
open: {
type: PropType<boolean>;
default: any;
};
readOnly: PropType<boolean>;
disabled: PropType<boolean>;
validationMessage: PropType<string>;
maximizable: {
type: PropType<boolean>;
default: boolean;
};
color: PropType<string>;
backgroundColor: PropType<string>;
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
required: {
type: PropType<boolean>;
default: boolean;
};
valid: {
type: PropType<boolean>;
default: any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
}>, {
inputRef: Ref<any, any>;
}, {
focused: boolean;
isDrawing: boolean;
currentValue: any;
popupValue: any;
currentOpen: boolean;
}, {
wrapperClass(): any;
openWrapperClass(): {
[x: string]: any;
'k-input': boolean;
'k-signature': boolean;
'k-signature-maximized': boolean;
'k-invalid': boolean;
'k-required': any;
'k-disabled': any;
'k-focus': any;
};
computedValue(): any;
computedOpen(): any;
computedColor(): any;
computedBgColor(): any;
}, {
setRefs(): void;
onOverlayClick(): void;
onValueChange(nextValue?: string): void;
onDialogChange(e: SignatureChangeEvent): void;
reset(): void;
clear(): void;
loadImage(value: string): void;
onDialogClose(event: any): void;
exportImage(exportSize: {
width: number;
height: number;
}): any;
validityGetter(): {
customError: boolean;
valid: any;
valueMissing: boolean;
};
focusElement(): void;
getImperativeHandle(): SignatureHandle;
onFocus(event: any): void;
onBlur(event: any): void;
onMaximizeClick: (event: any) => Promise<void>;
onMinimizeClick(event: any): void;
onClear(): void;
elementSize(): {
width: any;
height: any;
};
popupSize(): {
width: number;
height: number;
};
onDraw(): void;
onDrawEnd(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
focus: any;
blur: any;
open: any;
close: any;
changemodel: any;
'update:modelValue': any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
strokeWidth: {
type: PropType<number>;
default: number;
};
smooth: PropType<boolean>;
popupScale: {
type: PropType<number>;
default: number;
};
exportScale: {
type: PropType<number>;
default: number;
};
modelValue: PropType<string>;
name: PropType<string>;
value: PropType<string>;
tabIndex: PropType<number>;
dir: PropType<string>;
ariaDescribedBy: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaLabel: PropType<string>;
hideLine: PropType<boolean>;
open: {
type: PropType<boolean>;
default: any;
};
readOnly: PropType<boolean>;
disabled: PropType<boolean>;
validationMessage: PropType<string>;
maximizable: {
type: PropType<boolean>;
default: boolean;
};
color: PropType<string>;
backgroundColor: PropType<string>;
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
required: {
type: PropType<boolean>;
default: boolean;
};
valid: {
type: PropType<boolean>;
default: any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onClose?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
onOpen?: (...args: any[] | unknown[]) => any;
}>, {
required: boolean;
size: string;
rounded: string;
fillMode: string;
valid: boolean;
validityStyles: boolean;
open: boolean;
strokeWidth: number;
popupScale: number;
exportScale: number;
maximizable: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The arguments for the `onBlur` Signature event.
*/
export declare interface SignatureBlurEvent {
}
/**
* The arguments for the `change` event of the Signature.
*/
export declare interface SignatureChangeEvent {
/**
* The current value of the Signature.
*/
value: string;
}
/**
* The arguments for the `onClose` Signature event.
*/
export declare interface SignatureCloseEvent {
}
/**
* The arguments for the `onFocus` Signature event.
*/
export declare interface SignatureFocusEvent {
}
/**
* The Signature ref.
*/
export declare interface SignatureHandle {
/**
* The Signature element.
*/
element: HTMLInputElement | null;
/**
* Focus the Signature.
*/
focus: () => void;
/**
* Gets the `name` property of the Signature.
*/
name: string | undefined;
/**
* Gets the value of the Signature.
*/
value: number | null;
/**
* @hidden
*/
props: SignatureProps;
/**
* @hidden
*/
validityStyles: boolean;
/**
* @hidden
*/
required: boolean;
/**
* @hidden
*/
color: string;
/**
* @hidden
*/
backgroundColor: string;
}
/**
* The arguments for the `onOpen` Signature event.
*/
export declare interface SignatureOpenEvent {
}
/**
* Represents the props of the [Kendo UI for Vue Signature component]({% slug overview_signature %}).
*/
export declare interface SignatureProps extends FormComponentProps {
/**
* Specifies the value of the Signature.
*
* The value is an image encoded as a [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs).
*/
value?: string;
/**
* Specifies the v-model.
*/
modelValue?: string;
/**
* Sets the `tabIndex` property of the Signature.
*/
tabIndex?: number;
/**
* Sets the `id` of the Signature DOM element.
*/
id?: string;
/**
* Represents the `dir` HTML attribute.
*/
dir?: string;
/**
* Specifies the name of the Signature input.
*/
name?: string;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* The accessible label of the component.
*/
ariaLabel?: string;
/**
* Determines whether the Signature is in its read-only state.
*/
readOnly?: boolean;
/**
* Determines whether the Signature is in its disabled state.
*/
disabled?: boolean;
/**
* Configures the `size` of the Signature.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `roundness` of the Signature.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a rounded `className`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `fillMode` of the Signature.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `className`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'flat' | 'outline' | string;
/**
* The stroke color of the signature.
*
* Accepts CSS color names and hex values.
*
* The default value is determined by the theme `$kendo-input-text` variable.
*/
color?: string;
/**
* The background color of the signature.
*
* Accepts CSS color names and hex values.
*
* The default value is determined by the theme `$kendo-input-bg` variable.
*/
backgroundColor?: string;
/**
* The stroke width of the signature.
*
* @default 1
*/
strokeWidth?: number;
/**
* A flag indicating whether to smooth out signature lines.
*
* @default false
*/
smooth?: boolean;
/**
* A flag indicating if the signature can be maximized.
*
* @default true
*/
maximizable?: boolean;
/**
* Sets the open and close state of the Signature.
*/
open?: boolean;
/**
* The scale factor for the popup.
*
* The Signature width and height will be multiplied by the scale when showing the popup.
*
* @default 3
*/
popupScale?: number;
/**
* The scale factor for the exported image.
*
* The Signature width and height will be multiplied by the scale when converting the signature to an image.
*
* @default 2
*/
exportScale?: number;
/**
* A flag indicating whether the dotted line should be displayed in the background.
*
* @default false
*/
hideLine?: boolean;
/**
* Represents the input element `style` HTML attribute.
*/
inputStyle?: object;
/**
* Determines the event handler that will be fired when the user edits the value.
*/
onChange?: (event: SignatureChangeEvent) => void;
/**
* The event handler that will be fired when Signature is focused.
*/
onFocus?: (event: SignatureFocusEvent) => void;
/**
* The event handler that will be fired when Signature is blurred.
*/
onBlur?: (event: SignatureBlurEvent) => void;
/**
* The event handler that will be fired when Signature popup is open.
*/
onOpen?: (event: SignatureOpenEvent) => void;
/**
* The event handler that will be fired when Signature popup is closed.
*/
onClose?: (event: SignatureCloseEvent) => void;
/** @hidden */
maximized?: boolean;
/**
* The validation message of the component.
*/
validationMessage?: string;
/**
* The validity styles. Defaults to 'true'.
*/
validityStyles?: boolean;
/**
* The required state of the component.
*/
required?: boolean;
}
/**
* @hidden
*/
export declare const Slider: DefineComponent<ExtractPropTypes< {
modelValue: {
type: PropType<number>;
default: any;
};
defaultValue: {
type: PropType<number>;
default: any;
};
name: PropType<string>;
buttons: PropType<boolean>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
dir: PropType<string>;
step: PropType<number>;
min: {
type: PropType<number>;
required: true;
};
max: {
type: PropType<number>;
required: true;
};
value: PropType<number>;
vertical: PropType<boolean>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
ariaLabel: PropType<string>;
}>, {
inputRef: Ref<any, any>;
kendoLocalizationService: {};
}, {
currentValue: any;
currentFocused: boolean;
currentDir: string;
}, {
computedValue(): number;
sliderTrack(): any;
}, {
focus(): void;
isLabel(target: any): boolean;
onFocus(event: any): void;
onBlur(event: any): void;
onKeyDown(e: any): void;
decrement(e: any): void;
increment(e: any): void;
dragStart(e: any): void;
dragOver(e: any): void;
drag(e: any): void;
change(e: any, value: number): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
changemodel: any;
'update:modelValue': any;
change: any;
blur: any;
focus: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
modelValue: {
type: PropType<number>;
default: any;
};
defaultValue: {
type: PropType<number>;
default: any;
};
name: PropType<string>;
buttons: PropType<boolean>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
dir: PropType<string>;
step: PropType<number>;
min: {
type: PropType<number>;
required: true;
};
max: {
type: PropType<number>;
required: true;
};
value: PropType<number>;
vertical: PropType<boolean>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
ariaLabel: PropType<string>;
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
}>, {
modelValue: number;
defaultValue: number;
}, {}, {}, {}, string, () => {
kendoMin: any;
kendoMax: any;
kendoVertical: any;
}, true, {}, any>;
/**
* @hidden
*/
export declare const SLIDER_LABEL_ATTRIBUTE = "data-slider-label";
/**
* The arguments for the `change` Slider event.
*/
export declare interface SliderChangeEvent {
/**
* The current value of the Slider.
*/
value: number;
/**
* The native event.
*/
event: any;
}
/**
* Represents the Kendo UI for Vue Native SliderLabel component.
* ### props <span class='code'>[SliderLabelProps]({% slug api_inputs_sliderlabelprops %})</span>
* The props of the SliderLabel component.
*/
export declare const SliderLabel: DefineComponent<ExtractPropTypes< {
position: NumberConstructor;
title: StringConstructor;
vertical: BooleanConstructor;
}>, {}, {
currentDir: string;
}, {}, {
onClick(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
position: NumberConstructor;
title: StringConstructor;
vertical: BooleanConstructor;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
}>, {
vertical: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the props of the Kendo UI for Vue SliderLabel component.
*/
export declare interface SliderLabelProps {
/**
* The position in relative to the start of the SliderLabel component.
*/
position: number;
/**
* The onClick event of the SliderLabel component.
*/
onClick?: (event: any) => void;
/**
* The title of the SliderLabel component.
*/
title?: string;
/**
* @hidden
*/
vertical?: boolean;
}
/**
* Represents the props of the [Kendo UI for Vue Slider component]({% slug overview_slider %}).
*/
export declare interface SliderProps extends FormComponentProps {
/**
* The value of the Slider.
*/
value?: number;
/**
* @hidden
*/
modelValue?: number;
/**
* The default value of the Slider.
*/
defaultValue?: number;
/**
* The minimum value of the Slider.
*/
min: number;
/**
* The maximum value of the Slider.
*/
max: number;
/**
* Specifies the step of the value increase and decrease.
*/
step?: number;
/**
* Determines the event handler that will be fired when the user edits the value.
*/
onChange?: (event: SliderChangeEvent) => void;
/**
* Renders the arrow side buttons of the Slider if set to true.
*/
buttons?: boolean;
/**
* Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
* of the Slider.
*/
tabIndex?: number;
/**
* Determines whether the Slider is disabled.
*
*/
disabled?: boolean;
/**
* If `vertical` is set to `true`, the orientation of the Slider changes from horizontal to vertical
* ([see example]({% slug orientation_slider %})).
*/
vertical?: boolean;
/**
* Specifies the id of the component.
*/
id?: string;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Represents the `dir` HTML attribute.
*/
dir?: string;
/**
* Specifies the aria-label attribute of the Slider.
*/
ariaLabel?: string;
}
/**
* Represents the [Kendo UI for Vue Native Switch component]({% slug overview_switch %}).
* Accepts properties of type [SwitchProps]({% slug api_inputs_switchprops %}).
*/
export declare const Switch: DefineComponent<ExtractPropTypes< {
name: StringConstructor;
accessKey: StringConstructor;
checked: {
type: BooleanConstructor;
default: any;
};
className: StringConstructor;
disabled: {
type: BooleanConstructor;
default: boolean;
};
defaultChecked: {
type: BooleanConstructor;
default: boolean;
};
size: {
type: StringConstructor;
default: string;
validator: (value: any) => any;
};
trackRounded: {
type: StringConstructor;
default: string;
validator: (value: any) => any;
};
thumbRounded: {
type: StringConstructor;
default: string;
validator: (value: any) => any;
};
dir: StringConstructor;
id: StringConstructor;
ariaLabelledBy: StringConstructor;
ariaDescribedBy: StringConstructor;
offLabel: {
type: StringConstructor;
default: string;
};
onLabel: {
type: StringConstructor;
default: string;
};
required: {
type: BooleanConstructor;
default: boolean;
};
tabIndex: NumberConstructor;
valid: BooleanConstructor;
validityStyles: {
type: BooleanConstructor;
default: boolean;
};
validationMessage: StringConstructor;
value: {
type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
default: any;
};
modelValue: {
type: BooleanConstructor;
default: any;
};
}>, {}, {
currentChecked: boolean;
valueDuringOnChange: any;
focused: boolean;
currentDir: any;
}, {
computedValue(): any;
switchClassName(): {
[x: string]: any;
'k-switch': boolean;
'k-switch-on': any;
'k-switch-off': boolean;
'k-focus': any;
'k-disabled': any;
'k-invalid': boolean;
};
switchTrackClass(): {
[x: string]: any;
'k-switch-track': boolean;
};
switchThumbClass(): {
[x: string]: any;
'k-switch-thumb': boolean;
};
}, {
focus(): void;
element(): HTMLSpanElement | null;
validity(): FormComponentValidity;
setValidity(): void;
limit(offset: number, drag: HTMLSpanElement, wrapper: HTMLSpanElement): number;
toggle(value: boolean, event: any): void;
handleClick(event: any): void;
handleKeyDown(event: any): void;
handleWrapperFocus(event: any): void;
handleWrapperBlur(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
changemodel: any;
'update:modelValue': any;
focus: any;
blur: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
name: StringConstructor;
accessKey: StringConstructor;
checked: {
type: BooleanConstructor;
default: any;
};
className: StringConstructor;
disabled: {
type: BooleanConstructor;
default: boolean;
};
defaultChecked: {
type: BooleanConstructor;
default: boolean;
};
size: {
type: StringConstructor;
default: string;
validator: (value: any) => any;
};
trackRounded: {
type: StringConstructor;
default: string;
validator: (value: any) => any;
};
thumbRounded: {
type: StringConstructor;
default: string;
validator: (value: any) => any;
};
dir: StringConstructor;
id: StringConstructor;
ariaLabelledBy: StringConstructor;
ariaDescribedBy: StringConstructor;
offLabel: {
type: StringConstructor;
default: string;
};
onLabel: {
type: StringConstructor;
default: string;
};
required: {
type: BooleanConstructor;
default: boolean;
};
tabIndex: NumberConstructor;
valid: BooleanConstructor;
validityStyles: {
type: BooleanConstructor;
default: boolean;
};
validationMessage: StringConstructor;
value: {
type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
default: any;
};
modelValue: {
type: BooleanConstructor;
default: any;
};
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
}>, {
required: boolean;
value: string | number | boolean;
size: string;
modelValue: boolean;
disabled: boolean;
valid: boolean;
validityStyles: boolean;
checked: boolean;
defaultChecked: boolean;
trackRounded: string;
thumbRounded: string;
offLabel: string;
onLabel: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The arguments for the `onChange` Switch event.
*/
export declare interface SwitchChangeEvent {
/**
* The new value of the Switch.
*/
value: boolean;
}
/**
* Represents the props of the [Kendo UI for Vue Switch component]({% slug overview_switch %}).
*/
export declare interface SwitchProps extends ToggleBaseProps, FormComponentProps {
/**
* Specifies the `name` of the Switch.
*/
name?: string;
/**
* Specifies the `accessKey` of the Switch.
*/
accessKey?: string;
/**
* Sets the current value of the Switch ([see example]({% slug controlled_switch %})).
*/
checked?: boolean;
/**
* Sets the `className` of the wrapping element of the Switch.
*/
className?: string;
/**
* Sets the value of the Switch when it is initially displayed ([see example]({% slug default_state %})).
*/
defaultChecked?: boolean;
/**
* Sets the default value of the Switch.
*/
defaultValue?: any;
/**
* Disables the Switch when set to `true` ([see example]({% slug disabled_switch %})).
*/
disabled?: boolean;
/**
* Sets the `dir` property of the wrapping element of the Switch.
*/
dir?: string;
/**
* Sets the `id` of the Switch.
*/
id?: string;
/**
* Configures the `size` of the Switch.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `trackRounded` of the Switch.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - circle
* - null—Does not set a trackRounded `className`.
*
* @default `full`
*/
trackRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Configures the `thumbRounded` of the Switch.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - circle
* - null—Does not set a thumbRounded `className`.
*
* @default `circle`
*/
thumbRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Changes the **Off** label([see example]({% slug labels_switch %})).
*/
offLabel?: string;
/**
* Fires each time the Switch gets blurred.
*/
onBlur?: (event: any) => void;
/**
* Fires each time the user selects a new value ([see example]({% slug controlled_switch %})).
*/
onChange?: (event: SwitchChangeEvent) => void;
/**
* Fires each time the Switch component gets focused.
*/
onFocus?: (event: any) => void;
/**
* Changes the **On** label ([see example]({% slug labels_switch %})).
*/
onLabel?: string;
/**
* Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
tabIndex?: number;
/**
* Sets the value of the Switch. It can either be of the primitive (string, number, boolean) or of the complex (array) type.
*/
value?: string | number | string[] | boolean | null;
modelValue?: string | number | string[] | boolean | null;
}
/**
* @hidden
*/
declare interface TableCell {
row: number;
col: number;
}
/**
* Represents the [Kendo UI for Vue Native TextArea component]({% slug overview_textarea %}).
*
* Accepts properties of type [TextAreaProps]({% slug api_inputs_textareaprops %}).
*
*
* ```jsx
* <template>
* <k-form
* @submit="handleSubmit">
* <formcontent />
* </k-form>
* </template>
* <script>
* import { Form } from "@progress/kendo-vue-form";
* import FormContent from './FormContent.vue';
*
* export default {
* components: {
* 'k-form': Form,
* 'formcontent': FormContent
* },
* methods: {
* handleSubmit (dataItem) {
* alert(JSON.stringify(dataItem, null, 2));
* }
* }
* };
*
* </script>
* ```
*/
export declare const TextArea: DefineComponent<ExtractPropTypes< {
title: PropType<string>;
ariaDescribedBy: PropType<string>;
ariaLabelledBy: PropType<string>;
autoSize: PropType<boolean>;
modelValue: {
type: PropType<string | number | string[]>;
default: any;
};
defaultValue: PropType<string | number | string[]>;
dir: PropType<string>;
disabled: PropType<boolean>;
readOnly: PropType<boolean>;
rows: PropType<number>;
id: PropType<string>;
name: PropType<string>;
validationMessage: PropType<string>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
required: PropType<boolean>;
placeholder: PropType<string>;
tabIndex: PropType<number>;
valid: {
type: PropType<boolean>;
default: any;
};
value: PropType<string | number | string[]>;
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
iconName: PropType<string>;
inputPrefix: PropType<string | boolean | Object | Function>;
inputSuffix: PropType<string | boolean | Object | Function>;
showValidationIcon: PropType<boolean>;
showLoadingIcon: PropType<boolean>;
showClearButton: PropType<boolean>;
inputClass: PropType<string>;
wrapperClass: PropType<string>;
flow: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
resizable: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
inputAttributes: PropType<Object>;
}>, {}, {
currentValue: string | number | string[];
textAreaHeight: string;
currentDir: string;
}, {
resizableClass(): "k-resize-none" | "k-resize-y" | "k-resize-x" | "k-resize";
rootClassName(): {
[x: string]: any;
[x: number]: any;
'k-input': boolean;
'k-textarea': boolean;
'k-disabled': any;
'k-invalid': boolean;
'k-required': any;
'k-loading': any;
'!k-flex-col': boolean;
'!k-flex-row': boolean;
};
inputInnerClass(): {
[x: number]: any;
'k-input-inner': boolean;
'!k-resize-none': boolean;
'!k-overflow-auto': boolean;
'k-flex': boolean;
};
prefixRenderClass(): {
'k-input-prefix': boolean;
'!k-flex-col': boolean;
'!k-flex-row': boolean;
'!k-align-items-start': boolean;
};
suffixRenderClass(): {
'k-input-suffix': boolean;
'!k-flex-col': boolean;
'!k-flex-row': boolean;
'!k-align-items-start': boolean;
};
suffixIconWrapClass(): {
'k-flex-wrap': boolean;
'!k-align-items-start': boolean;
};
computedValue(): any;
isValid(): any;
}, {
setValidity(): void;
clearClick(event: any): void;
focus(): void;
emitUpdate(event: any, eventName: string, value: any): void;
handleChange(event: any): void;
handleInput(event: any): void;
handleFocus(event: any): void;
handleBlur(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
input: any;
change: any;
changemodel: any;
'update:modelValue': any;
focus: any;
blur: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
title: PropType<string>;
ariaDescribedBy: PropType<string>;
ariaLabelledBy: PropType<string>;
autoSize: PropType<boolean>;
modelValue: {
type: PropType<string | number | string[]>;
default: any;
};
defaultValue: PropType<string | number | string[]>;
dir: PropType<string>;
disabled: PropType<boolean>;
readOnly: PropType<boolean>;
rows: PropType<number>;
id: PropType<string>;
name: PropType<string>;
validationMessage: PropType<string>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
required: PropType<boolean>;
placeholder: PropType<string>;
tabIndex: PropType<number>;
valid: {
type: PropType<boolean>;
default: any;
};
value: PropType<string | number | string[]>;
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
iconName: PropType<string>;
inputPrefix: PropType<string | boolean | Object | Function>;
inputSuffix: PropType<string | boolean | Object | Function>;
showValidationIcon: PropType<boolean>;
showLoadingIcon: PropType<boolean>;
showClearButton: PropType<boolean>;
inputClass: PropType<string>;
wrapperClass: PropType<string>;
flow: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
resizable: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
inputAttributes: PropType<Object>;
}>> & Readonly<{
onInput?: (...args: any[] | unknown[]) => any;
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
}>, {
size: string;
flow: string;
modelValue: string | number | string[];
rounded: string;
fillMode: string;
valid: boolean;
validityStyles: boolean;
resizable: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The arguments for the `onBlur` TextArea event.
*/
declare interface TextAreaBlurEvent {
}
/**
* The arguments for the `onChange` TextArea event.
*/
export declare interface TextAreaChangeEvent {
/**
* The new value of the TextArea.
*/
value: string;
}
/**
* Specifies the flow direction of the TextArea sections.
*
* The possible values are:
* * `vertical`(Default) —TextArea sections are placed from top to bottom.
* * `horizontal`—TextArea sections are placed from left to right in `ltr`, and from right to left in `rtl` mode.
*/
declare type TextAreaFlow = 'horizontal' | 'vertical';
/**
* The arguments for the `onFocus` TextArea event.
*/
export declare interface TextAreaFocusEvent {
}
/**
* Represents the props of the [Kendo UI for Vue TextArea component]({% slug overview_textarea %}).
*/
export declare interface TextAreaProps extends FormComponentProps {
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Identifies the title of the TextArea component.
*/
title?: string;
/**
* Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs.
* * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario.
*/
minlength?: string;
/**
* Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs.
* * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario.
*/
maxlength?: string;
/**
* Specifies if the textarea element will resize its height automatically ([see example]({% slug sizing_textarea %})).
* Defaults to `false`.
*/
autoSize?: boolean;
modelValue?: string | string[] | number;
/**
* Specifies a list of CSS classes that will be added to the TextArea.
*/
className?: string;
/**
* The default value of the TextArea ([see example]({% slug default_textarea %})).
*/
defaultValue?: string | string[] | number;
/**
* Represents the `dir` HTML attribute.
*/
dir?: string;
/**
* Specifies if the TextArea is disabled ([see example]({% slug disabled_textarea %})).
*/
disabled?: boolean;
/**
* Sets the read-only state of the TextArea.
*/
readOnly?: boolean;
/**
* Specifies an exact height size for the TextArea to take ([see example]({% slug sizing_textarea %})).
*/
rows?: number;
/**
* Sets the `id` of the TextArea.
*/
id?: string;
/**
* Specifies the `name` property of the `textarea` DOM element.
*
* This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
*/
name?: string;
/**
* The hint that is displayed when the TextArea is empty.
*/
placeholder?: string;
/**
* Sets the `tabIndex` property of the TextArea.
* Defaults to `0`.
*/
tabIndex?: number;
/**
* Configures the `size` of the NumericTextBox.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `class`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `roundness` of the NumericTextBox.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `class`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Configures the `fillMode` of the NumericTextBox.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `class`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'flat' | 'outline' | string;
/**
* Sets the value to be submitted ([see example]({% slug controlled_textarea %})).
*/
value?: string | string[] | number;
/**
* If set to `false`, no visual representation of the invalid state of the component will be applied.
*
* This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
*
* @default true
*/
validityStyles?: boolean;
/**
* Defines a string prop that controls the input icon. This property works only with the Kendo UI for Vue FontIcons.
* Check the [Icons]({% slug icons %}) article for more information about how the Font Icon can be loaded to your project.
*/
iconName?: string;
/**
* Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
*/
inputPrefix?: boolean | string | Object | Function;
/**
* Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
*/
inputSuffix?: boolean | string | Object | Function;
/**
* Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
*/
showValidationIcon?: boolean;
/**
* Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
*/
showLoadingIcon?: boolean;
/**
* Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
*/
showClearButton?: boolean;
/**
* Defines additional class to the wrapper element.
*/
wrapperClass?: string;
/**
* Defines the flow direction of the TextArea sections.
*/
flow?: TextAreaFlow | string;
/**
* Defines the way the TextArea will resize.
*/
resizable?: TextAreaResize | string;
/**
* Defines additional class to the input element.
*/
inputClass?: string;
/**
* Sets the built-in HTML attributes of the inner focusable input element.
* Attributes which are essential for certain component functionalities cannot be changed.
*/
inputAttributes?: Object;
/**
* The event handler that will be fired when the changes the selected value.
*/
onChange?: (event: TextAreaChangeEvent) => void;
/**
* The event handler that will be fired when TextArea is focused.
*/
onFocus?: (event: TextAreaFocusEvent) => void;
/**
* The event handler that will be fired when TextArea is blurred.
*/
onBlur?: (event: TextAreaBlurEvent) => void;
}
/**
* Specifies the resize direction of the TextArea sections.
*
* The possible values are:
* `vertical`(Default) —TextArea can be resized only vertically.
* `horizontal`—TextArea can be resized only horizontally.
* `both`—TextArea can be resized both vertically and horizontally.
* `none`—TextArea can not be manually resized.
*/
export declare type TextAreaResize = 'both' | 'horizontal' | 'vertical' | 'none';
/**
* Specifies the enum options for resize direction of the TextArea sections.
*/
export declare enum TextAreaResizeEnum {
/**
* `both`—TextArea can be resized both vertically and horizontally.
*/
both = "both",
/**
* `horizontal`—TextArea can be resized only horizontally.
*/
horizontal = "horizontal",
/**
* `vertical`(Default) —TextArea can be resized only vertically.
*/
vertical = "vertical",
/**
* `none`—TextArea can not be manually resized.
*/
none = "none"
}
/**
* @hidden
*/
export declare const TextBox: DefineComponent<ExtractPropTypes< {
modelValue: {
type: PropType<string | number>;
default: any;
};
disabled: {
type: PropType<boolean>;
default: any;
};
defaultValue: {
type: PropType<string | number | string[]>;
default: string;
};
value: {
type: PropType<string | number | string[]>;
};
label: {
type: PropType<string>;
};
placeholder: {
type: PropType<string>;
};
required: {
type: PropType<boolean>;
default: boolean;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
dir: {
type: PropType<string>;
};
id: StringConstructor;
valid: {
type: PropType<boolean>;
default: any;
};
validate: {
type: PropType<boolean>;
};
validationMessage: {
type: PropType<string>;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
iconName: PropType<string>;
inputPrefix: PropType<string | boolean | Object | Function>;
inputSuffix: PropType<string | boolean | Object | Function>;
showValidationIcon: PropType<boolean>;
showLoadingIcon: PropType<boolean>;
showClearButton: PropType<boolean>;
inputClass: PropType<string>;
wrapperClass: PropType<string>;
tabIndex: PropType<number>;
role: PropType<string>;
title: PropType<string>;
ariaLabel: PropType<string>;
inputAttributes: PropType<Object>;
}>, {
inputRef: Ref<any, any>;
}, {
hasMounted: boolean;
autofill: boolean;
currentValue: string | number | string[];
valueDuringOnChange: string;
focused: boolean;
}, {
spanClassNames(): {
'k-floating-label-container': boolean;
'k-focus': any;
'k-empty': boolean;
'k-autofill': any;
'k-invalid': boolean;
'k-rtl': boolean;
};
inputInnerClass(): {
[x: number]: any;
'k-input-inner': boolean;
};
computedValue(): any;
}, {
updateValidClass(): void;
emitFocus(e: any): void;
emitBlur(e: any): void;
handleKeydown(e: any): void;
handleKeyup(e: any): void;
handleKeypress(e: any): void;
clearClick(event: any): void;
focus(): void;
validity(): {
customError: boolean;
valid: any;
badTextBox: any;
patternMismatch: any;
rangeOverflow: any;
rangeUnderflow: any;
stepMismatch: any;
tooLong: any;
tooShort: any;
typeMismatch: any;
valueMissing: any;
};
isInvalid(state: Object): boolean;
setValidity(): void;
handleInput(event: any): void;
handleChange(event: any): void;
emitUpdate(event: any, eventName: string, value: any): void;
handleAutoFill(e: any): void;
handleAutoFillEnd(e: any): void;
name: () => any;
inputWrapperClass(): {
[x: string]: any;
[x: number]: any;
'k-textbox': boolean;
'k-input': boolean;
'k-invalid': boolean;
'k-required': any;
'k-disabled': any;
};
}, ComponentOptionsMixin, ComponentOptionsMixin, {
input: any;
change: any;
changemodel: any;
'update:modelValue': any;
focus: any;
blur: any;
keyup: any;
keydown: any;
keypress: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
modelValue: {
type: PropType<string | number>;
default: any;
};
disabled: {
type: PropType<boolean>;
default: any;
};
defaultValue: {
type: PropType<string | number | string[]>;
default: string;
};
value: {
type: PropType<string | number | string[]>;
};
label: {
type: PropType<string>;
};
placeholder: {
type: PropType<string>;
};
required: {
type: PropType<boolean>;
default: boolean;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
dir: {
type: PropType<string>;
};
id: StringConstructor;
valid: {
type: PropType<boolean>;
default: any;
};
validate: {
type: PropType<boolean>;
};
validationMessage: {
type: PropType<string>;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
iconName: PropType<string>;
inputPrefix: PropType<string | boolean | Object | Function>;
inputSuffix: PropType<string | boolean | Object | Function>;
showValidationIcon: PropType<boolean>;
showLoadingIcon: PropType<boolean>;
showClearButton: PropType<boolean>;
inputClass: PropType<string>;
wrapperClass: PropType<string>;
tabIndex: PropType<number>;
role: PropType<string>;
title: PropType<string>;
ariaLabel: PropType<string>;
inputAttributes: PropType<Object>;
}>> & Readonly<{
onInput?: (...args: any[] | unknown[]) => any;
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onKeypress?: (...args: any[] | unknown[]) => any;
onKeyup?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
}>, {
required: boolean;
size: string;
modelValue: string | number;
defaultValue: string | number | string[];
disabled: boolean;
rounded: string;
fillMode: string;
valid: boolean;
validityStyles: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
export declare interface TextBoxChangeEvent {
/**
* A reference to the native event.
*/
event: any;
/**
* The name of the event that is triggred. The value of this prop is `change`.
*/
eventName: string;
/**
* The current value of the TextBox.
*/
value: string | string[] | number;
}
/**
* Represents the props of the [Kendo UI for Vue TextBox component]({% slug overview_textbox %}).
* Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextBoxElement).
*/
export declare interface TextBoxProps extends FormComponentProps {
/**
* Renders a floating label for the TextBox component.
*/
id?: string;
label?: string;
value?: string | string[] | number;
modelValue?: string | number;
defaultValue?: string | string[] | number | undefined;
disabled?: boolean;
validate?: boolean;
/**
* Configures the `size` of the TextBox.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `class`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `roundness` of the TextBox.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `class`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Configures the `fillMode` of the TextBox.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `class`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'flat' | 'outline' | string;
dir?: string;
/**
* Fires when the `change` event of the input is triggered.
*/
onChange?: (event: TextBoxChangeEvent) => void;
/**
* Fires when the `input` event of the input is triggered.
*/
onTextBox?: (event: any) => void;
/**
* Fires when the input is focused.
*/
onFocus?: (event: any) => void;
/**
* Fires when the input is blurred.
*/
onBlur?: (event: any) => void;
/**
* Fires when the 'keyup' input event is triggered.
*/
onKeyup?: (event: any) => void;
/**
* Fires when the 'keydown' input event is triggered.
*/
onKeydown?: (event: any) => void;
/**
* Fires when the 'keypress' input event is triggered.
*/
onKeypress?: (event: any) => void;
/**
* Specifies the placeholder of an `input` element. Used to define if the input is empty.
*/
placeholder?: string;
/**
* Defines a string prop that controls the input icon. This property works only with the Kendo UI for Vue FontIcons.
* Check the [Icons]({% slug icons %}) article for more information about how the Font Icon can be loaded to your project.
*/
iconName?: string;
/**
* Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
*/
inputPrefix?: boolean | string | Object | Function;
/**
* Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
*/
inputSuffix?: boolean | string | Object | Function;
/**
* Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
*/
showValidationIcon?: boolean;
/**
* Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
*/
showLoadingIcon?: boolean;
/**
* Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
*/
showClearButton?: boolean;
/**
* Defines additional class to the wrapper element.
*/
wrapperClass?: string;
/**
* Defines additional class to the input element.
*/
inputClass?: string;
/**
* Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs.
* * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario.
*/
minlength?: string;
/**
* Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs.
* * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario.
*/
maxlength?: string;
/**
* Defines the built-in [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) property of the input element inside the TextBox.
*/
tabIndex?: number;
/**
* Defines the role of the input element inside the TextBox.
*/
role?: string;
/**
* Defines the built-in [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) property of the input element inside the TextBox.
*/
title?: string;
/**
* Defines the built-in [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) property of the input element inside the TextBox.
*/
ariaLabel?: string;
/**
* Sets the built-in HTML attributes of the inner focusable input element.
* Attributes which are essential for certain component functionalities cannot be changed.
*/
inputAttributes?: Object;
}
/**
* Specifies the size of a color cell.
*
* The possible values are:
* * (Default) `number = 24`
* * `{ width: number, height: number }`
*/
declare type TileSize_2 = {
width: number;
height: number;
};
/**
* The props passed to the Checkbox and Switch components.
*/
declare interface ToggleBaseProps {
value?: any;
checked?: any;
defaultChecked?: any;
}
export { }