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

package/dist/esm/switch/util.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @hidden
+ */
+export declare const FRAME_DURATION: number;
+/**
+ * @hidden
+ */
+export declare const throttle: (func: Function, wait: number, options?: any) => (this: any) => any;

package/dist/esm/switch/util.js

@@ -0,0 +1,46 @@
+/**
+ * @hidden
+ */
+export var FRAME_DURATION = 1000 / 60; // 1000ms divided by 60fps
+/**
+ * @hidden
+ */
+export var throttle = function (func, wait, options) {
+    if (options === void 0) { options = {}; }
+    var timeout, context, args, result;
+    var previous = 0;
+    options = options || {};
+    var later = function () {
+        previous = options.leading === false ? 0 : new Date().getTime();
+        timeout = null;
+        result = func.apply(context, args);
+        if (!timeout) {
+            context = args = null;
+        }
+    };
+    var throttled = function () {
+        var now = new Date().getTime();
+        if (!previous && options.leading === false) {
+            previous = now;
+        }
+        var remaining = wait - (now - previous);
+        context = this;
+        args = arguments;
+        if (remaining <= 0 || remaining > wait) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+            previous = now;
+            result = func.apply(context, args);
+            if (!timeout) {
+                context = args = null;
+            }
+        }
+        else if (!timeout && options.trailing !== false) {
+            timeout = window.setTimeout(later, remaining);
+        }
+        return result;
+    };
+    return throttled;
+};

package/dist/esm/textarea/TextArea.d.ts

@@ -0,0 +1,81 @@
+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 { TextAreaProps } from './interfaces/TextAreaProps';
+/**
+ * @hidden
+ */
+export interface TextAreaHandle {
+    element: HTMLTextAreaElement | null;
+    focus: any;
+    name?: string | null;
+}
+/**
+ * @hidden
+ */
+export interface TextAreaState {
+}
+/**
+ * @hidden
+ */
+export interface TextAreaComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface TextAreaMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface TextAreaData {
+    currentActive: boolean;
+}
+/**
+ * @hidden
+ */
+export interface TextAreaAll extends Vue2type, TextAreaMethods, TextAreaData, TextAreaComputed, TextAreaState {
+}
+/**
+ * @hidden
+ */
+declare let TextAreaVue2: ComponentOptions<TextAreaAll, DefaultData<TextAreaData>, DefaultMethods<TextAreaAll>, TextAreaComputed, RecordPropsDefinition<TextAreaProps>>;
+/**
+ * Represents the [Kendo UI for Vue Native TextArea component]({% slug overview_textarea %}).
+ *
+ * Accepts properties of type [TextAreaProps]({% slug api_inputs_textareaprops %}).
+ * Obtaining the `ref` returns an object of type [TextAreaHandle]({% slug api_inputs_textareahandle %}).
+ *
+ *
+ * ```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>
+ * ```
+ */
+declare const TextArea: DefineComponent<TextAreaProps, any, TextAreaData, TextAreaComputed, TextAreaMethods, {}, {}, {}, string, TextAreaProps, TextAreaProps, {}>;
+export { TextArea, TextAreaVue2 };

package/dist/esm/textarea/TextArea.js

@@ -0,0 +1,422 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { guid, isRtl, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate // useDir,
+} from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var TextAreaVue2 = {
+  name: 'KendoTextArea',
+  model: {
+    event: 'changemodel'
+  },
+  // @ts-ignore
+  emits: {
+    'input': null,
+    'change': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'focus': null,
+    'blur': null
+  },
+  props: {
+    ariaDescribedBy: String,
+    ariaLabelledBy: String,
+    autoSize: Boolean,
+    modelValue: {
+      type: [String, Array, Number],
+      default: undefined
+    },
+    defaultValue: [String, Number],
+    dir: String,
+    disabled: Boolean,
+    readOnly: Boolean,
+    rows: Number,
+    id: String,
+    name: String,
+    validationMessage: String,
+    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', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    required: Boolean,
+    placeholder: String,
+    tabIndex: Number,
+    valid: {
+      type: Boolean,
+      default: undefined
+    },
+    value: [String, Array, Number],
+    validityStyles: {
+      type: Boolean,
+      default: true
+    },
+    iconName: String,
+    inputPrefix: templateDefinition,
+    inputSuffix: templateDefinition,
+    showValidationIcon: Boolean,
+    showLoadingIcon: Boolean,
+    showClearButton: Boolean,
+    inputClass: String,
+    wrapperClass: String,
+    flow: {
+      type: String,
+      default: 'horizontal',
+      validator: function validator(value) {
+        return ['horizontal', 'vertical'].includes(value);
+      }
+    },
+    resizable: {
+      type: String,
+      default: 'vertical',
+      validator: function validator(value) {
+        return ['both', 'horizontal', 'vertical', 'none'].includes(value);
+      }
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.calculatedId = guid();
+  },
+  computed: {
+    rootClassName: function rootClassName() {
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          fillMode = _b.fillMode,
+          rounded = _b.rounded,
+          required = _b.required,
+          showLoadingIcon = _b.showLoadingIcon,
+          resizable = _b.resizable,
+          autoSize = _b.autoSize;
+      var invalid = this.validityStyles === true ? !this.isValid : false;
+      return _a = {
+        'k-input': true,
+        'k-textarea': true
+      }, _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-disabled'] = this.$props.disabled, _a['k-invalid'] = invalid, _a['k-required'] = required, _a['k-loading'] = showLoadingIcon, _a["k-resize-".concat(resizable)] = autoSize ? 'none' : resizable, _a['!k-flex-col'] = this.flow === 'vertical', _a['!k-flex-row'] = this.flow === 'horizontal', _a[this.wrapperClass] = this.wrapperClass, _a;
+    },
+    inputInnerClass: function inputInnerClass() {
+      var _a;
+
+      return _a = {
+        'k-input-inner': true,
+        '!k-resize-none': true,
+        'k-flex': true
+      }, _a[this.inputClass] = this.inputClass, _a;
+    },
+    prefixRenderClass: function prefixRenderClass() {
+      return {
+        'k-input-prefix': true,
+        '!k-flex-col': this.flow === 'horizontal',
+        '!k-flex-row': this.flow === 'vertical',
+        '!k-align-items-start': this.flow === 'horizontal'
+      };
+    },
+    suffixRenderClass: function suffixRenderClass() {
+      return {
+        'k-input-suffix': true,
+        '!k-flex-col': this.flow === 'horizontal',
+        '!k-flex-row': this.flow === 'vertical',
+        '!k-align-items-start': this.flow === 'horizontal'
+      };
+    },
+    suffixIconWrapClass: function suffixIconWrapClass() {
+      return {
+        'k-flex-wrap': true,
+        '!k-align-items-start': true
+      };
+    },
+    computedValue: function computedValue() {
+      return this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
+    },
+    isValid: function isValid() {
+      return this.valid !== undefined ? this.valid : !this.required ? true : this.computedValue ? true : false;
+    }
+  },
+  data: function data() {
+    return {
+      currentValue: this.$props.defaultValue,
+      textAreaHeight: 'auto',
+      currentDir: 'ltr'
+    };
+  },
+  watch: {
+    size: function size() {
+      this.textAreaHeight = 'auto';
+    }
+  },
+  mounted: function mounted() {
+    this.element = this.v3 ? this.elementRef : this.$refs.element;
+    this.currentDir = this.$props.dir !== undefined ? this.$props.dir : isRtl(this.$el) ? 'rtl' : 'ltr';
+    this.setValidity();
+  },
+  updated: function updated() {
+    this.element = this.v3 ? this.elementRef : this.$refs.element;
+    this.setValidity();
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        ariaDescribedBy = _a.ariaDescribedBy,
+        ariaLabelledBy = _a.ariaLabelledBy,
+        autoSize = _a.autoSize,
+        disabled = _a.disabled,
+        readOnly = _a.readOnly,
+        required = _a.required,
+        rows = _a.rows,
+        id = _a.id,
+        name = _a.name,
+        placeholder = _a.placeholder,
+        tabIndex = _a.tabIndex,
+        iconName = _a.iconName,
+        showValidationIcon = _a.showValidationIcon,
+        showLoadingIcon = _a.showLoadingIcon,
+        showClearButton = _a.showClearButton;
+
+    var textAreaAttrs = __assign({
+      id: id || this.calculatedId,
+      name: name,
+      disabled: disabled,
+      rows: rows,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      required: required,
+      tabIndex: getTabIndex(tabIndex, disabled),
+      'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
+      'aria-multiline': true,
+      'aria-disabled': disabled || undefined
+    }, this.$attrs);
+
+    var inputPrefixTemplate = templateRendering.call(this, this.$props.inputPrefix, getListeners.call(this));
+    var inputSuffixTemplate = templateRendering.call(this, this.$props.inputSuffix, getListeners.call(this));
+    var inputPrefix = getTemplate.call(this, {
+      h: h,
+      template: inputPrefixTemplate,
+      additionalProps: {
+        value: this.computedValue,
+        valid: this.isValid
+      }
+    });
+    var inputSuffix = getTemplate.call(this, {
+      h: h,
+      template: inputSuffixTemplate,
+      additionalProps: {
+        value: this.computedValue,
+        valid: this.isValid
+      }
+    });
+    var textarea = h('textarea', __assign(__assign({}, textAreaAttrs), {
+      attrs: this.v3 ? undefined : textAreaAttrs,
+      class: this.inputInnerClass,
+      ref: this.v3 ? function (el) {
+        _this.elementRef = el;
+      } : 'element',
+      style: autoSize ? {
+        overflow: 'hidden',
+        height: this.textAreaHeight
+      } : {},
+      value: this.v3 ? this.computedValue : null,
+      domProps: this.v3 ? undefined : {
+        'value': this.computedValue
+      },
+      onChange: this.handleChange,
+      onInput: this.handleInput,
+      on: this.v3 ? undefined : {
+        'change': this.handleChange,
+        'focus': this.handleFocus,
+        'blur': this.handleBlur,
+        input: this.handleInput
+      },
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    }));
+    return h("span", {
+      "class": this.rootClassName,
+      dir: this.currentDir === 'rtl' ? this.currentDir : '',
+      attrs: this.v3 ? undefined : {
+        dir: this.currentDir === 'rtl' ? this.currentDir : ''
+      },
+      style: this.$attrs.style
+    }, [this.$props.inputPrefix && h("span", {
+      "class": this.prefixRenderClass
+    }, [inputPrefix]), h("span", {
+      "class": "k-hstack k-flex"
+    }, [iconName && h("span", {
+      "class": "k-flex-wrap"
+    }, [h("span", {
+      "class": "k-input-icon k-icon k-i-".concat(iconName)
+    })]), textarea, showValidationIcon && this.isValid && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
+      "class": "k-input-validation-icon k-icon k-i-check"
+    })]), showValidationIcon && !this.isValid && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
+      "class": "k-input-validation-icon k-icon k-i-warning"
+    })]), showLoadingIcon && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
+      "class": "k-input-loading-icon k-icon k-i-loading"
+    })]), showClearButton && this.computedValue && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
+      onClick: this.clearClick,
+      on: this.v3 ? undefined : {
+        "click": this.clearClick
+      },
+      "class": "k-clear-value"
+    }, [h("span", {
+      "class": "k-icon k-i-x"
+    })])])]), this.$props.inputSuffix && h("span", {
+      "class": this.suffixRenderClass
+    }, [inputSuffix])]);
+  },
+  methods: {
+    setValidity: function setValidity() {
+      if (this.element && this.element.setCustomValidity) {
+        this.element.setCustomValidity(this.isValid ? '' : this.validationMessage || '');
+      }
+
+      if (this.element) {
+        this.textAreaHeight = "".concat(this.element.scrollHeight, "px");
+      }
+    },
+    clearClick: function clearClick(event) {
+      this.emitUpdate(event, 'change', '');
+    },
+    focus: function focus() {
+      if (this.element) {
+        this.element.focus();
+      }
+    },
+    emitUpdate: function emitUpdate(event, eventName, value) {
+      var newValue = value;
+
+      if (!this.$props.disabled) {
+        this.textAreaHeight = 'auto';
+        this.currentValue = newValue;
+      }
+
+      if (!this.$props.disabled) {
+        this.$emit('changemodel', newValue);
+        this.$emit('update:modelValue', newValue);
+        this.$emit(eventName, {
+          event: event,
+          component: this,
+          name: this.element.name,
+          value: newValue
+        });
+      }
+    },
+    handleChange: function handleChange(event) {
+      this.emitUpdate(event, 'change', event.target.value);
+    },
+    handleInput: function handleInput(event) {
+      this.emitUpdate(event, 'input', event.target.value);
+    },
+    handleFocus: function handleFocus(event) {
+      if (!this.$props.disabled) {
+        this.$emit('focus', {
+          event: event,
+          component: this,
+          name: this.element.name
+        });
+      }
+    },
+    handleBlur: function handleBlur(event) {
+      if (!this.$props.disabled) {
+        this.$emit('blur', {
+          event: event,
+          component: this,
+          name: this.element.name
+        });
+      }
+    }
+  }
+};
+/**
+ * Represents the [Kendo UI for Vue Native TextArea component]({% slug overview_textarea %}).
+ *
+ * Accepts properties of type [TextAreaProps]({% slug api_inputs_textareaprops %}).
+ * Obtaining the `ref` returns an object of type [TextAreaHandle]({% slug api_inputs_textareahandle %}).
+ *
+ *
+ * ```jsx
+ * <template>
+ *     <k-form
+ *       @submit="handleSubmit">
+ *       <formcontent />
+ *    </k-form>
+ * </template>
+ * <script>
+ * import { Form } from "@progress/kendo-vue-form";
+ * import FormContent from './FormContent.vue.js';
+ *
+ * export default {
+ *     components: {
+ *       'k-form': Form,
+ *       'formcontent': FormContent
+ *     },
+ *     methods: {
+ *       handleSubmit (dataItem) {
+ *          alert(JSON.stringify(dataItem, null, 2));
+ *       }
+ *     }
+ * };
+ *
+ * </script>
+ * ```
+ */
+
+var TextArea = TextAreaVue2;
+export { TextArea, TextAreaVue2 };

package/dist/esm/textarea/interfaces/TextAreaBlurEvent.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The arguments for the `onBlur` TextArea event.
+ */
+export interface TextAreaBlurEvent {
+}

package/dist/esm/textarea/interfaces/TextAreaBlurEvent.js

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

package/dist/esm/textarea/interfaces/TextAreaChangeEvent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The arguments for the `onChange` TextArea event.
+ */
+export interface TextAreaChangeEvent {
+    /**
+     * The new value of the TextArea.
+     */
+    value: string;
+}

package/dist/esm/textarea/interfaces/TextAreaChangeEvent.js

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

package/dist/esm/textarea/interfaces/TextAreaFlow.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export declare type TextAreaFlow = 'horizontal' | 'vertical';

package/dist/esm/textarea/interfaces/TextAreaFlow.js

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

package/dist/esm/textarea/interfaces/TextAreaFocusEvent.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The arguments for the `onFocus` TextArea event.
+ */
+export interface TextAreaFocusEvent {
+}

package/dist/esm/textarea/interfaces/TextAreaFocusEvent.js

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