@progress/kendo-vue-inputs 2.7.0 → 2.7.2-dev.202201020746

package/dist/npm/textarea/TextArea.js

@@ -0,0 +1,261 @@
+"use strict";
+
+var __assign = undefined && undefined.__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);
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextAreaVue3 = exports.TextArea = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var package_metadata_1 = require("../package-metadata"); // tslint:enable:max-line-length
+
+
+var TextArea = {
+  name: 'KendoTextArea',
+  inheritAttrs: false,
+  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,
+    required: Boolean,
+    placeholder: String,
+    tabIndex: Number,
+    valid: {
+      type: Boolean,
+      default: undefined
+    },
+    value: [String, Array, Number],
+    validityStyles: {
+      type: Boolean,
+      default: true
+    }
+  },
+  created: function created() {
+    kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
+    this.calculatedId = kendo_vue_common_1.guid();
+  },
+  computed: {
+    rootClassName: function rootClassName() {
+      return {
+        'k-textarea': true,
+        'k-state-invalid': this.validityStyles === true ? !this.isValid : false,
+        'k-state-disabled': this.$props.disabled
+      };
+    },
+    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'
+    };
+  },
+  mounted: function mounted() {
+    this.element = this.v3 ? this.elementRef : this.$refs.element;
+    this.currentDir = this.$props.dir !== undefined ? this.$props.dir : kendo_vue_common_1.isRtl(this.$el) ? 'rtl' : 'ltr';
+    this.setValidity();
+  },
+  updated: function updated() {
+    this.element = this.v3 ? this.elementRef : this.$refs.element;
+    this.setValidity();
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    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;
+
+    var textAreaAttrs = __assign({
+      id: id || this.calculatedId,
+      name: name,
+      disabled: disabled,
+      rows: rows,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      required: required,
+      tabIndex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
+      'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
+      'aria-multiline': true,
+      'aria-disabled': disabled || undefined
+    }, this.$attrs);
+
+    var textarea = h('textarea', __assign(__assign({}, textAreaAttrs), {
+      attrs: this.v3 ? undefined : textAreaAttrs,
+      'class': 'k-input',
+      ref: this.v3 ? function (el) {
+        _this.elementRef = el;
+      } : 'element',
+      style: autoSize ? {
+        resize: 'none',
+        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,
+      attrs: this.v3 ? undefined : {
+        dir: this.currentDir
+      }
+    }, [textarea]);
+  },
+  methods: {
+    setValidity: function setValidity() {
+      if (this.element && this.element.setCustomValidity) {
+        this.element.setCustomValidity(this.isValid ? '' : this.validationMessage || '');
+      }
+
+      if (this.element) {
+        this.textAreaHeight = this.element.scrollHeight + "px";
+      }
+    },
+    focus: function focus() {
+      if (this.element) {
+        this.element.focus();
+      }
+    },
+    handleChange: function handleChange(event) {
+      var newValue = event.target.value;
+
+      if (!this.$props.disabled) {
+        this.textAreaHeight = 'auto';
+        this.currentValue = newValue;
+      }
+
+      if (!this.$props.disabled) {
+        this.$emit('change', {
+          event: event,
+          component: this,
+          name: this.element.name,
+          value: newValue
+        });
+        this.$emit('changemodel', newValue);
+        this.$emit('update:modelValue', newValue);
+      }
+    },
+    handleInput: function handleInput(event) {
+      var newValue = event.target.value;
+
+      if (!this.$props.disabled) {
+        this.textAreaHeight = 'auto';
+        this.currentValue = newValue;
+      }
+
+      if (!this.$props.disabled) {
+        this.$emit('input', {
+          event: event,
+          component: this,
+          name: this.element.name,
+          value: newValue
+        });
+        this.$emit('changemodel', newValue);
+        this.$emit('update:modelValue', newValue);
+      }
+    },
+    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
+        });
+      }
+    }
+  }
+};
+exports.TextArea = TextArea;
+var TextAreaVue3 = TextArea;
+exports.TextAreaVue3 = TextAreaVue3;

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

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

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/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/npm/textarea/interfaces/TextAreaChangeEvent.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/textarea/interfaces/TextAreaProps.d.ts

@@ -0,0 +1,84 @@
+import { FormComponentProps } from '@progress/kendo-vue-common';
+import { TextAreaBlurEvent } from './TextAreaBlurEvent';
+import { TextAreaChangeEvent } from './TextAreaChangeEvent';
+import { TextAreaFocusEvent } from './TextAreaFocusEvent';
+/**
+ * Represents the props of the [Kendo UI for Vue TextArea component]({% slug overview_textarea %}).
+ */
+export 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;
+    /**
+     * 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;
+    /**
+     * Sets the value to be submitted ([see example]({% slug controlled_textarea %})).
+     */
+    value?: string | string[] | number;
+    validityStyles?: boolean;
+    /**
+     * 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;
+}

package/dist/npm/textarea/interfaces/TextAreaProps.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-inputs",
   "description": "Kendo UI for Vue Input package",
-  "version": "2.7.0",
+  "version": "2.7.2-dev.202201020746",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -32,20 +32,26 @@
     "framework": "Kendo UI for Vue"
   },
   "peerDependencies": {
+    "@progress/kendo-drawing": "^1.8.0",
     "@progress/kendo-licensing": "^1.1.0",
     "@progress/kendo-vue-intl": "^2.3.0",
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-common": "2.7.0",
-    "@progress/kendo-vue-labels": "2.7.0"
+    "@progress/kendo-vue-common": "2.7.2-dev.202201020746",
+    "@progress/kendo-vue-labels": "2.7.2-dev.202201020746",
+    "@progress/kendo-vue-popup": "2.7.2-dev.202201020746"
   },
   "devDependencies": {
+    "@progress/kendo-data-query": "^1.5.5",
+    "@progress/kendo-date-math": "^1.5.4",
+    "@progress/kendo-drawing": "^1.8.0",
     "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-buttons": "2.7.0",
-    "@progress/kendo-vue-form": "2.7.0",
-    "@progress/kendo-vue-intl": "2.7.0",
-    "@progress/kendo-vue-labels": "2.7.0",
+    "@progress/kendo-vue-buttons": "2.7.2-dev.202201020746",
+    "@progress/kendo-vue-form": "2.7.2-dev.202201020746",
+    "@progress/kendo-vue-intl": "2.7.2-dev.202201020746",
+    "@progress/kendo-vue-labels": "2.7.2-dev.202201020746",
+    "@progress/kendo-vue-tooltip": "2.7.2-dev.202201020746",
     "cldr-core": "^34.0.0",
     "cldr-dates-full": "^34.0.0",
     "cldr-numbers-full": "^34.0.0"