@progress/kendo-vue-inputs 2.7.0 → 2.7.1-dev.202112201049

package/dist/es/textarea/TextArea.js

@@ -0,0 +1,251 @@
+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;
+import { guid, isRtl, getTabIndex, validatePackage // useDir,
+} from '@progress/kendo-vue-common';
+import { packageMetadata } from '../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() {
+    validatePackage(packageMetadata);
+    this.calculatedId = 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 : 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: 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
+        });
+      }
+    }
+  }
+};
+var TextAreaVue3 = TextArea;
+export { TextArea, TextAreaVue3 };

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

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

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

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

package/dist/es/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/main.d.ts

@@ -1,5 +1,6 @@
 import { FormComponentValidity } from '@progress/kendo-vue-common';
 export { FormComponentValidity };
+export { Switch, SwitchProps, SwitchState, SwitchChangeEvent } from './switch/Switch';
 export * from './input/Input';
 export * from './numerictextbox/NumericTextBox';
 export * from './maskedtextbox/MaskedTextBox';
@@ -18,3 +19,7 @@ export * from './radiobutton/RadioButton';
 export * from './radiobutton/interfaces/RadioButtonProps';
 export * from './radiobutton/interfaces/RadioButtonChangeEvent';
 export * from './radiobutton/interfaces/RadioButtonFocusEvent';
+export * from './textarea/TextArea';
+export * from './textarea/interfaces/TextAreaProps';
+export * from './textarea/interfaces/TextAreaChangeEvent';
+export * from './textarea/interfaces/TextAreaFocusEvent';

package/dist/npm/main.js

@@ -10,6 +10,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var Switch_1 = require("./switch/Switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });
 __exportStar(require("./input/Input"), exports);
 __exportStar(require("./numerictextbox/NumericTextBox"), exports);
 __exportStar(require("./maskedtextbox/MaskedTextBox"), exports);
@@ -28,3 +30,7 @@ __exportStar(require("./radiobutton/RadioButton"), exports);
 __exportStar(require("./radiobutton/interfaces/RadioButtonProps"), exports);
 __exportStar(require("./radiobutton/interfaces/RadioButtonChangeEvent"), exports);
 __exportStar(require("./radiobutton/interfaces/RadioButtonFocusEvent"), exports);
+__exportStar(require("./textarea/TextArea"), exports);
+__exportStar(require("./textarea/interfaces/TextAreaProps"), exports);
+__exportStar(require("./textarea/interfaces/TextAreaChangeEvent"), exports);
+__exportStar(require("./textarea/interfaces/TextAreaFocusEvent"), exports);

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1638944812,
+    publishDate: 1639996959,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/switch/Switch.d.ts

@@ -0,0 +1,131 @@
+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 { FormComponentProps } from '@progress/kendo-vue-common';
+import { ToggleBaseProps } from '../interfaces/ToggleBaseProps';
+import { LocalizationService } from '@progress/kendo-vue-intl';
+/**
+ * The arguments for the `onChange` Switch event.
+ */
+export 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 interface SwitchProps extends ToggleBaseProps, FormComponentProps {
+    /**
+     * 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;
+    /**
+     * 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
+ */
+export interface SwitchState {
+    _element: HTMLSpanElement | null;
+    _input: HTMLInputElement | null;
+    _id: string;
+    dir?: string;
+    defaultValidationMessage: LocalizationService;
+    eventTimeStamp?: number;
+}
+/**
+ * @hidden
+ */
+export interface SwitchComputed {
+}
+/**
+ * @hidden
+ */
+export interface SwitchMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SwitchData {
+    valueDuringOnChange?: boolean;
+    currentChecked: boolean;
+    focused: boolean;
+}
+/**
+ * @hidden
+ */
+export interface SwitchAll extends Vue, SwitchMethods, SwitchData, SwitchComputed, SwitchState {
+}
+declare let Switch: ComponentOptions<SwitchAll, DefaultData<SwitchData>, DefaultMethods<SwitchAll>, SwitchComputed, RecordPropsDefinition<SwitchProps>>;
+declare const SwitchVue3: DefineComponent<SwitchProps, any, SwitchData, SwitchComputed, SwitchMethods, {}, {}, {}, string, SwitchProps, SwitchProps, {}>;
+export { Switch, SwitchVue3 };