@progress/kendo-vue-inputs 2.7.1 → 2.7.3-dev.202201070829

package/dist/es/colors/ColorPicker.js

@@ -0,0 +1,382 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { classNames, Keys, // useDir, 
+getTabIndex, guid } from '@progress/kendo-vue-common';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata';
+import { Picker } from './Picker';
+import { ColorPalette, DEFAULT_PRESET, DEFAULT_TILE_SIZE } from './ColorPalette';
+/**
+ * @hidden
+ */
+
+var DEFAULT_GRADIENT_SETTINGS = {
+  opacity: true
+};
+/**
+ * @hidden
+ */
+
+var DEFAULT_PALETTE_SETTINGS = {
+  palette: DEFAULT_PRESET,
+  tileSize: DEFAULT_TILE_SIZE
+};
+/**
+ * @hidden
+ */
+
+var isControlled = function isControlled(prop) {
+  return prop !== undefined;
+}; // tslint:enable:max-line-length
+
+
+var ColorPicker = {
+  name: 'KendoColorPicker',
+  props: {
+    value: {
+      type: String,
+      default: undefined
+    },
+    defaultValue: String,
+    disabled: Boolean,
+    dir: String,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    paletteSettings: {
+      type: Object,
+      default: function _default() {
+        return DEFAULT_PALETTE_SETTINGS;
+      }
+    },
+    valid: {
+      type: Boolean,
+      default: true
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    title: String,
+    icon: String,
+    iconClassName: String,
+    popupSettings: Object,
+    open: {
+      type: Boolean,
+      default: undefined
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large', 'pill'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'solid', 'flat', 'outline'].includes(value);
+      }
+    }
+  },
+  data: function data() {
+    return {
+      focused: false,
+      stateValue: '',
+      stateOpen: false
+    };
+  },
+  computed: {
+    isValueControlled: function isValueControlled() {
+      return isControlled(this.$props.value);
+    },
+    isOpenControlled: function isOpenControlled() {
+      return isControlled(this.$props.open);
+    },
+    computedValue: function computedValue() {
+      return this.isValueControlled ? this.$props.value : this.stateValue;
+    },
+    computedOpen: function computedOpen() {
+      return this.isOpenControlled ? this.$props.open : this.stateOpen;
+    },
+    computedIconClassName: function computedIconClassName() {
+      var icon = this.$props.icon;
+      return this.$props.iconClassName || icon && "k-icon k-i-" + icon;
+    },
+    wrapperClassName: function wrapperClassName() {
+      return {
+        'k-widget': true,
+        'k-colorpicker': true,
+        'k-state-invalid': this.valid === false
+      };
+    },
+    spanClassName: function spanClassName() {
+      var disabled = this.$props.disabled;
+      return {
+        'k-picker-wrap': true,
+        'k-state-disabled': disabled,
+        'k-state-focused': this.focused
+      };
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.focusableElementGuid = guid();
+  },
+  mounted: function mounted() {
+    this.focusableElement = this.$refs[this.focusableElementGuid];
+    this.button = this.v3 ? this.buttonRef : this.$refs.button;
+    this.palette = this.v3 ? this.paletteRef : this.$refs.palette;
+  },
+  updated: function updated() {
+    this.button = this.v3 ? this.buttonRef : this.$refs.button;
+    this.palette = this.v3 ? this.paletteRef : this.$refs.palette;
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        disabled = _a.disabled,
+        tabIndex = _a.tabIndex; // const dir = useDir(focusableElementGuid, props.dir);
+
+    return h("span", {
+      "class": this.wrapperClassName
+    }, [h("span", {
+      id: this.$props.id,
+      attrs: this.v3 ? undefined : {
+        id: this.$props.id,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        tabIndex: getTabIndex(tabIndex, disabled),
+        title: this.$props.title
+      },
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      "class": this.spanClassName,
+      ref: this.focusableElementGuid,
+      tabIndex: getTabIndex(tabIndex, disabled),
+      title: this.$props.title,
+      onKeydown: this.onKeyDownHandler,
+      on: this.v3 ? undefined : {
+        "keydown": this.onKeyDownHandler,
+        "focusin": this.onFocusHandler,
+        "focusout": this.onBlurHandler
+      },
+      onFocusin: this.onFocusHandler,
+      onFocusout: this.onBlurHandler
+    }, [!this.computedIconClassName ? h("span", {
+      onClick: this.onActiveColorClickHandler,
+      on: this.v3 ? undefined : {
+        "click": this.onActiveColorClickHandler
+      },
+      "class": 'k-selected-color',
+      style: {
+        backgroundColor: this.computedValue
+      }
+    }, [!this.computedValue && h("span", {
+      "class": 'k-icon k-i-line'
+    })]) : h("span", {
+      onClick: this.onActiveColorClickHandler,
+      on: this.v3 ? undefined : {
+        "click": this.onActiveColorClickHandler
+      },
+      "class": classNames('k-tool-icon', this.computedIconClassName)
+    }, [h("span", {
+      "class": 'k-selected-color',
+      style: {
+        backgroundColor: this.computedValue
+      }
+    })]), h("span", {
+      onClick: this.onClickHandler,
+      on: this.v3 ? undefined : {
+        "click": this.onClickHandler
+      },
+      "class": 'k-select',
+      ref: this.v3 ? function (el) {
+        _this.buttonRef = el;
+      } : 'button'
+    }, [h("span", {
+      "class": 'k-icon k-i-arrow-s'
+    })]), // @ts-ignore function children
+    h(Picker //  dir={dir}
+    , {
+      open: this.computedOpen,
+      attrs: this.v3 ? undefined : {
+        open: this.computedOpen,
+        popupAnchor: this.focusableElementGuid
+      },
+      onOpen: this.onOpenHandler,
+      on: this.v3 ? undefined : {
+        "open": this.onOpenHandler
+      },
+      popupAnchor: this.focusableElementGuid
+    }, this.v3 ? function () {
+      return [// @ts-ignore function children
+      h(ColorPalette, {
+        onKeydown: _this2.onKeyDownHandler //      {...paletteSettings}
+        ,
+        on: _this2.v3 ? undefined : {
+          "keydown": _this2.onKeyDownHandler,
+          "change": _this2.onPaletteChangeHandler
+        },
+        ref: _this2.v3 ? function (el) {
+          _this.paletteRef = el;
+        } : 'palette',
+        value: _this2.computedValue || undefined,
+        attrs: _this2.v3 ? undefined : {
+          value: _this2.computedValue || undefined
+        },
+        onChange: _this2.onPaletteChangeHandler
+      })];
+    } : [h(ColorPalette, {
+      onKeydown: _this2.onKeyDownHandler,
+      on: _this2.v3 ? undefined : {
+        "keydown": _this2.onKeyDownHandler,
+        "change": _this2.onPaletteChangeHandler
+      },
+      ref: _this2.v3 ? function (el) {
+        _this.paletteRef = el;
+      } : 'palette',
+      value: _this2.computedValue || undefined,
+      attrs: _this2.v3 ? undefined : {
+        value: _this2.computedValue || undefined
+      },
+      onChange: _this2.onPaletteChangeHandler
+    })])])]);
+  },
+  methods: {
+    focusElement: function focusElement() {
+      if (this.focusableElement) {
+        this.focusableElement.focus();
+      }
+    },
+    setOpen: function setOpen(nextOpen, isBlur) {
+      if (!this.isOpenControlled) {
+        if (!nextOpen && !isBlur && this.focusableElement) {
+          this.focusableElement.focus();
+        }
+
+        this.stateOpen = nextOpen;
+      }
+    },
+    onKeyDownHandler: function onKeyDownHandler(event) {
+      var altKey = event.altKey,
+          keyCode = event.keyCode;
+
+      if (keyCode === Keys.esc) {
+        this.setOpen(false);
+        return;
+      }
+
+      if (keyCode === Keys.enter && !this.isOpenControlled) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setOpen(!this.computedOpen);
+        return;
+      }
+
+      if (altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (keyCode === Keys.up && this.focusableElement) {
+          this.focusableElement.focus();
+          this.setOpen(false);
+        }
+
+        if (keyCode === Keys.down) {
+          this.setOpen(true);
+        }
+      }
+    },
+    onOpenHandler: function onOpenHandler() {
+      // Skip content autofocus when in controlled mode
+      if (!this.isOpenControlled) {
+        if (this.palette) {
+          this.palette.focus();
+        }
+      }
+    },
+    onClickHandler: function onClickHandler() {
+      this.setOpen(!this.computedOpen, true);
+    },
+    onActiveColorClickHandler: function onActiveColorClickHandler(event) {
+      this.$emit('activecolorclick', {
+        event: event,
+        value: this.computedValue
+      });
+    },
+    onFocusHandler: function onFocusHandler(event) {
+      if (this.blurTimeoutRef) {
+        clearTimeout(this.blurTimeoutRef);
+        this.blurTimeoutRef = undefined; // case where moving back to input from popup
+        // if (event.target === this.focusableElement) {
+        //     this.setOpen(false); // in this case we should focus input on keydown
+        // }
+      } else {
+        this.focused = true;
+      }
+
+      this.$emit('focus', {
+        event: event
+      });
+    },
+    onBlurTimeout: function onBlurTimeout() {
+      if (this.palette && document.activeElement !== this.palette.$el) {
+        this.setOpen(false, true);
+        this.focused = false;
+      }
+
+      this.blurTimeoutRef = undefined;
+    },
+    onBlurHandler: function onBlurHandler(event) {
+      clearTimeout(this.blurTimeoutRef);
+      this.blurTimeoutRef = window.setTimeout(this.onBlurTimeout, 200);
+      this.$emit('blur', {
+        event: event
+      });
+    },
+    onChangeHandler: function onChangeHandler(event, isPalette) {
+      var currentValue = isPalette ? event.rgbaValue : event.value;
+
+      if (!this.isValueControlled) {
+        this.stateValue = currentValue;
+      }
+
+      if (isPalette) {
+        this.setOpen(false);
+      }
+
+      this.$emit('change', {
+        value: currentValue,
+        event: event
+      });
+    },
+    onPaletteChangeHandler: function onPaletteChangeHandler(event) {
+      this.onChangeHandler(event, true);
+    }
+  }
+};
+var ColorPickerVue3 = ColorPicker;
+export { ColorPicker, ColorPickerVue3 };

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

@@ -0,0 +1,41 @@
+import { DefineComponent } from '../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+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 Vue, PickerMethods, PickerData, PickerComputed, PickerState {
+}
+declare let Picker: ComponentOptions<PickerAll, DefaultData<PickerData>, DefaultMethods<PickerAll>, PickerComputed, RecordPropsDefinition<PickerProps>>;
+declare const PickerVue3: DefineComponent<PickerProps, any, PickerData, PickerComputed, PickerMethods, {}, {}, {}, string, PickerProps, PickerProps, {}>;
+export { Picker, PickerVue3 };

package/dist/es/colors/Picker.js

@@ -0,0 +1,94 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+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'; // tslint:enable:max-line-length
+
+var Picker = {
+  name: 'KendoPicker',
+  props: {
+    popupSettings: Object,
+    dir: String,
+    open: Boolean,
+    popupAnchor: 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: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var popupSettings = this.$props.popupSettings || {};
+    return (// @ts-ignore function children
+      h(Popup // style={{
+      //           ...(popupSettings || {}).style,
+      //           direction: this.$props.dir as any
+      //       }}
+      //       {...popupSettings}
+      , {
+        anchor: this.$props.popupAnchor,
+        attrs: this.v3 ? undefined : {
+          anchor: this.$props.popupAnchor,
+          anchorAlign: this.anchorAlign,
+          popupAlign: this.popupAlign,
+          show: this.$props.open
+        },
+        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,
+        "class": classNames('k-reset', popupSettings.className)
+      }, this.v3 ? function () {
+        return [defaultSlot];
+      } : [defaultSlot])
+    );
+  },
+  methods: {
+    onOpen: function onOpen() {
+      this.$emit('open');
+    },
+    onClose: function onClose() {
+      this.$emit('close');
+    }
+  }
+};
+var PickerVue3 = Picker;
+export { Picker, PickerVue3 };

package/dist/es/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/es/colors/interfaces/ColorPaletteProps.d.ts

@@ -0,0 +1,75 @@
+import { TileSize } from '../models/tile-size';
+import { ColorPaletteChangeEvent } from './ColorPaletteChangeEvent';
+/**
+ * Represents the props of the [KendoReact 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;
+    /**
+     * Determines whether the ColorPalette is disabled
+     * ([more information and example]({% slug disabled_colorpalette %})).
+     *
+     * @example
+     * ```jsx
+     * class App extends React.Component {
+     *    render() {
+     *       return (
+     *           <ColorPalette disabled={true} />
+     *       );
+     *    }
+     * }
+     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```
+     */
+    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/es/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/es/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/es/colors/interfaces/ColorPickerChangeEvent.d.ts

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

package/dist/es/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/es/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;
+}