@progress/kendo-vue-inputs 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/colors/Picker.d.ts

@@ -0,0 +1,46 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { PickerProps } from './interfaces/PickerProps';
+/**
+ * @hidden
+ */
+export interface PickerState {
+}
+/**
+ * @hidden
+ */
+export interface PickerComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface PickerMethods {
+    [key: string]: any;
+    focus: (e: any) => void;
+    toggleIfApplicable: () => void;
+    handleClick: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface PickerData {
+    currentActive: boolean;
+}
+/**
+ * @hidden
+ */
+export interface PickerAll extends Vue2type, PickerMethods, PickerData, PickerComputed, PickerState {
+}
+/**
+ * @hidden
+ */
+declare let PickerVue2: ComponentOptions<PickerAll, DefaultData<PickerData>, DefaultMethods<PickerAll>, PickerComputed, RecordPropsDefinition<PickerProps>>;
+/**
+ * @hidden
+ */
+declare const Picker: DefineComponent<PickerProps, any, PickerData, PickerComputed, PickerMethods, {}, {}, {}, string, PickerProps, PickerProps, {}>;
+export { Picker, PickerVue2 };

package/dist/esm/colors/Picker.js

@@ -0,0 +1,110 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { Popup } from '@progress/kendo-vue-popup';
+import { classNames, getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var ANCHOR_VERTICAL_ALIGN = 'bottom';
+/**
+ * @hidden
+ */
+
+var POPUP_VERTICAL_ALIGN = 'top';
+/**
+ * @hidden
+ */
+
+var PickerVue2 = {
+  name: 'KendoPicker',
+  props: {
+    popupSettings: Object,
+    dir: String,
+    open: Boolean,
+    popupAnchor: String,
+    id: String
+  },
+  computed: {
+    horizontalAlign: function horizontalAlign() {
+      return this.$props.dir === 'rtl' ? 'right' : 'left';
+    },
+    anchorAlign: function anchorAlign() {
+      return {
+        horizontal: this.horizontalAlign,
+        vertical: ANCHOR_VERTICAL_ALIGN
+      };
+    },
+    popupAlign: function popupAlign() {
+      return {
+        horizontal: this.horizontalAlign,
+        vertical: POPUP_VERTICAL_ALIGN
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var _a = this.$props.popupSettings,
+        popupClass = _a.popupClass,
+        appendTo = _a.appendTo,
+        animate = _a.animate,
+        className = _a.className;
+    return (// @ts-ignore function children
+      h(Popup, {
+        id: this.id,
+        attrs: this.v3 ? undefined : {
+          id: this.id,
+          anchor: this.$props.popupAnchor,
+          anchorAlign: this.anchorAlign,
+          popupAlign: this.popupAlign,
+          show: this.$props.open,
+          appendTo: appendTo,
+          animate: animate,
+          popupClass: popupClass
+        },
+        anchor: this.$props.popupAnchor,
+        anchorAlign: this.anchorAlign,
+        popupAlign: this.popupAlign,
+        show: this.$props.open,
+        onOpen: this.onOpen,
+        on: this.v3 ? undefined : {
+          "open": this.onOpen,
+          "close": this.onClose
+        },
+        onClose: this.onClose,
+        appendTo: appendTo,
+        animate: animate,
+        popupClass: popupClass,
+        "class": classNames('k-reset', className)
+      }, this.v3 ? function () {
+        return [defaultSlot];
+      } : [defaultSlot])
+    );
+  },
+  methods: {
+    onOpen: function onOpen() {
+      this.$emit('open');
+    },
+    onClose: function onClose() {
+      this.$emit('close');
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var Picker = PickerVue2;
+export { Picker, PickerVue2 };

package/dist/esm/colors/interfaces/ColorGradientChangeEvent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The arguments for the `onChange` ColorGradient event.
+ */
+export interface ColorGradientChangeEvent {
+    /**
+     * The current value of the ColorGradient.
+     */
+    value: string;
+    /**
+     * The current value of the ColorGradient in RGBA format.
+     */
+    rgbaValue: string;
+}

package/dist/esm/colors/interfaces/ColorGradientChangeEvent.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/ColorGradientProps.d.ts

@@ -0,0 +1,68 @@
+import { ColorGradientChangeEvent } from './ColorGradientChangeEvent';
+/**
+ * Represents the props of the [KendoReact ColorGradient component]({% slug overview_colorgradient %}).
+ */
+export interface ColorGradientProps {
+    /**
+     * 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;
+    /**
+     * 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;
+}

package/dist/esm/colors/interfaces/ColorGradientProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/ColorPaletteChangeEvent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The arguments for the `onChange` ColorPalette event.
+ */
+export interface ColorPaletteChangeEvent {
+    /**
+     * The current value of the ColorPalette.
+     */
+    value: string;
+    /**
+     * The current value of the ColorPalette in RGBA format.
+     */
+    rgbaValue: string;
+}

package/dist/esm/colors/interfaces/ColorPaletteChangeEvent.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/ColorPaletteProps.d.ts

@@ -0,0 +1,71 @@
+import { TileSize } from '../models/tile-size';
+import { ColorPaletteChangeEvent } from './ColorPaletteChangeEvent';
+/**
+ * Represents the props of the [KendoVue ColorPalette component]({% slug overview_colorpalette %}).
+ */
+export 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;
+    /**
+     * 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;
+    /**
+     * 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 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;
+}

package/dist/esm/colors/interfaces/ColorPaletteProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/ColorPickerActiveColorClick.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The arguments for the `onActiveColorClick` ColorPicker event.
+ */
+export interface ColorPickerActiveColorClick {
+    /**
+     * The current value of the ColorPicker.
+     */
+    value: string;
+    /**
+     * A native DOM event.
+     */
+    event: any;
+}

package/dist/esm/colors/interfaces/ColorPickerActiveColorClick.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/ColorPickerBlurEvent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The arguments for the `onBlur` ColorPicker event.
+ */
+export interface ColorPickerBlurEvent {
+    /**
+     * A native DOM event.
+     */
+    event: any;
+}

package/dist/esm/colors/interfaces/ColorPickerBlurEvent.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/ColorPickerChangeEvent.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The arguments for the `onChange` ColorPicker event.
+ */
+export 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;
+}

package/dist/esm/colors/interfaces/ColorPickerChangeEvent.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/ColorPickerFocusEvent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The arguments for the `onFocus` ColorPicker event.
+ */
+export interface ColorPickerFocusEvent {
+    /**
+     * A native DOM event.
+     */
+    event: any;
+}

package/dist/esm/colors/interfaces/ColorPickerFocusEvent.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/ColorPickerPaletteSettings.d.ts

@@ -0,0 +1,32 @@
+import { TileSize } from '../models/tile-size';
+/**
+ * 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 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;
+}

package/dist/esm/colors/interfaces/ColorPickerPaletteSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/ColorPickerPopupSettings.d.ts

@@ -0,0 +1,14 @@
+import { PopupAnimation } from '@progress/kendo-vue-popup';
+/**
+ * The settings of the popup container of the ColorPicker.
+ */
+export 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>;
+}

package/dist/esm/colors/interfaces/ColorPickerPopupSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/ColorPickerProps.d.ts

@@ -0,0 +1,176 @@
+import { ColorPickerBlurEvent } from './ColorPickerBlurEvent';
+import { ColorPickerFocusEvent } from './ColorPickerFocusEvent';
+import { ColorPickerChangeEvent } from './ColorPickerChangeEvent';
+import { ColorPickerActiveColorClick } from './ColorPickerActiveColorClick';
+import { ColorPickerPopupSettings } from './ColorPickerPopupSettings';
+import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
+import { ColorPickerView } from './ColorPickerView';
+import { ColorGradientProps } from './ColorGradientProps';
+import { FlatColorPickerProps } from '../FlatColorPicker';
+/**
+ * Represents the props of the [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
+ */
+export 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 %}).
+     * You have to provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
+     * For example, `edit-tools` will be parsed to `k-icon k-i-edit-tools`
+     * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-kendo-ui-icons)).
+     */
+    icon?: string;
+    /**
+     * 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;
+    /**
+     * 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;
+}

package/dist/esm/colors/interfaces/ColorPickerProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/ColorPickerView.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Specifies the view which the ColorPicker will render in the popup
+ * ([see example]({% slug combinedview_colorpicker %})).
+ *
+ * The possible values are:
+ * * (Default) `palette`
+ * * `gradient`
+ * * `combo`
+ */
+export declare type ColorPickerView = 'gradient' | 'palette' | 'combo';

package/dist/esm/colors/interfaces/ColorPickerView.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/colors/interfaces/FlatColorPickerViewChangeEvent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The arguments for the `onChange` ColorPicker event.
+ */
+export interface FlatColorPickerViewChangeEvent {
+    /**
+     * The current value of the ColorPicker.
+     */
+    value: string;
+    /**
+     * The viewType of the selected view.
+     */
+    viewType: 'gradient' | 'palette';
+}

package/dist/esm/colors/interfaces/FlatColorPickerViewChangeEvent.js

@@ -0,0 +1 @@
+export {};