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

package/dist/es/switch/Switch.js

@@ -0,0 +1,307 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { guid, noop, Keys, getTabIndex, validatePackage, isRtl } from '@progress/kendo-vue-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, switchValidation } from './../messages';
+import { packageMetadata } from '../package-metadata';
+var SWITCH_CONTAINER = 'k-switch-container';
+var SWITCH_HANDLE = 'k-switch-handle';
+var SWITCH_LABEL_ON = 'k-switch-label-on';
+var SWITCH_LABEL_OFF = 'k-switch-label-off'; // tslint:enable:max-line-length
+
+var Switch = {
+  name: 'KendoSwitch',
+  model: {
+    event: 'changemodel'
+  },
+  // @ts-ignore
+  emits: {
+    'change': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'focus': null,
+    'blur': null
+  },
+  props: {
+    accessKey: String,
+    checked: {
+      type: Boolean,
+      default: undefined
+    },
+    className: String,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    defaultChecked: {
+      type: Boolean,
+      default: false
+    },
+    dir: String,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    offLabel: {
+      type: String,
+      default: 'OFF'
+    },
+    onLabel: {
+      type: String,
+      default: 'ON'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    tabIndex: Number,
+    valid: Boolean,
+    // validate: {
+    //     type: Boolean,
+    //     default: false
+    // },
+    validityStyles: {
+      type: Boolean,
+      default: false
+    },
+    validationMessage: String,
+    value: {
+      type: [String, Number, Boolean],
+      default: undefined
+    },
+    modelValue: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this._id = guid();
+    this.defaultValidationMessage = provideLocalizationService(this);
+  },
+  data: function data() {
+    return {
+      currentChecked: this.$props.defaultChecked,
+      valueDuringOnChange: undefined,
+      focused: false,
+      currentDir: undefined
+    };
+  },
+  computed: {
+    computedValue: function computedValue() {
+      return this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.checked !== undefined ? this.$props.checked : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentChecked;
+    },
+    switchClassName: function switchClassName() {
+      var isValid = !this.validityStyles || this.validity().valid;
+      return {
+        'k-widget': true,
+        'k-switch': true,
+        'k-switch-on': this.computedValue,
+        'k-switch-off': !this.computedValue,
+        'k-state-focused': this.focused,
+        'k-state-disabled': this.$props.disabled,
+        'k-state-invalid': !isValid
+      };
+    }
+  },
+  mounted: function mounted() {
+    this._element = this.v3 ? this.elementRef : this.$refs.element;
+    this.input = this.v3 ? this.inputRef : this.$refs.input;
+    this.currentDir = this.$props.dir !== undefined ? this.$props.dir : isRtl(this.$el) ? 'rtl' : 'ltr';
+    this.setValidity();
+  },
+  updated: function updated() {
+    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,
+        disabled = _a.disabled,
+        id = _a.id,
+        offLabel = _a.offLabel,
+        onLabel = _a.onLabel,
+        tabIndex = _a.tabIndex;
+    return h("span", {
+      "class": this.switchClassName,
+      dir: this.currentDir,
+      attrs: this.v3 ? undefined : {
+        dir: this.currentDir
+      },
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown,
+        "click": this.handleClick,
+        "focusout": this.handleWrapperBlur,
+        "focusin": this.handleWrapperFocus
+      },
+      onClick: this.handleClick,
+      onFocusout: this.handleWrapperBlur,
+      onFocusin: this.handleWrapperFocus
+    }, [h("span", {
+      "class": SWITCH_CONTAINER,
+      id: id || this._id,
+      attrs: this.v3 ? undefined : {
+        id: id || this._id,
+        role: 'switch',
+        "aria-checked": this.computedValue,
+        "aria-disabled": disabled || undefined,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        tabIndex: getTabIndex(tabIndex, disabled, undefined),
+        accessKey: this.$props.accessKey
+      },
+      role: 'switch',
+      "aria-checked": this.computedValue,
+      "aria-disabled": disabled || undefined,
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      ref: this.v3 ? function (el) {
+        _this.elementRef = el;
+      } : 'element',
+      tabIndex: getTabIndex(tabIndex, disabled, undefined),
+      accessKey: this.$props.accessKey
+    }, [h("input", {
+      type: "checkbox",
+      attrs: this.v3 ? undefined : {
+        type: "checkbox",
+        tabIndex: -1,
+        "aria-hidden": true
+      },
+      checked: this.v3 ? this.$props.checked : null,
+      domProps: this.v3 ? undefined : {
+        "checked": this.$props.checked,
+        "value": this.computedValue
+      },
+      ref: this.v3 ? function (el) {
+        _this.inputRef = el;
+      } : 'input',
+      tabIndex: -1,
+      "aria-hidden": true,
+      value: this.v3 ? this.computedValue : null,
+      style: {
+        opacity: 0,
+        width: 1,
+        border: 0,
+        zIndex: -1,
+        position: 'absolute',
+        left: '50%'
+      },
+      onChange: noop,
+      on: this.v3 ? undefined : {
+        "change": noop
+      }
+    }), h("span", {
+      "class": SWITCH_LABEL_ON
+    }, [onLabel]), h("span", {
+      "class": SWITCH_LABEL_OFF
+    }, [offLabel]), h("span", {
+      "class": SWITCH_HANDLE
+    })])]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this._element) {
+        this._element.focus();
+      }
+    },
+    element: function element() {
+      return this._element;
+    },
+    name: function name() {
+      return this.$props.name;
+    },
+    validity: function validity() {
+      var customError = this.$props.validationMessage !== undefined;
+      var isValid = this.$props.valid !== undefined ? this.$props.valid : !this.$props.required ? true : this.computedValue ? true : false;
+      var valid = this.$props.valid !== undefined ? this.$props.valid : isValid;
+      return {
+        customError: customError,
+        valid: valid,
+        valueMissing: this.computedValue === null
+      };
+    },
+    setValidity: function setValidity() {
+      if (this.input && this.input.setCustomValidity) {
+        this.input.setCustomValidity(this.validity().valid ? '' : this.$props.validationMessage || this.defaultValidationMessage.toLanguageString(switchValidation, messages[switchValidation]));
+      }
+    },
+    limit: function limit(offset, drag, wrapper) {
+      var wrapperWidth = wrapper.offsetWidth;
+      var margin = drag.offsetWidth;
+
+      if (offset < 0) {
+        return 0;
+      } else if (offset > wrapperWidth - margin) {
+        return wrapperWidth - margin;
+      }
+
+      return offset;
+    },
+    toggle: function toggle(value, event) {
+      this.currentChecked = value;
+      this.valueDuringOnChange = value;
+      this.$emit('change', {
+        event: event,
+        component: this,
+        target: {
+          value: value
+        },
+        name: this.$props.name,
+        value: value,
+        validity: this.validity()
+      });
+      this.$emit('changemodel', value);
+      this.$emit('update:modelValue', value);
+      this.valueDuringOnChange = undefined;
+    },
+    handleClick: function handleClick(event) {
+      if (this.eventTimeStamp === event.timeStamp) {
+        // This is guard against the case when wrapped in label, click event is emmited twice
+        return;
+      }
+
+      this.eventTimeStamp = event.timeStamp;
+      this.toggle(!this.computedValue, event);
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      var keyCode = event.keyCode;
+
+      if (keyCode === Keys.space || keyCode === Keys.enter) {
+        this.toggle(!this.computedValue, event);
+      }
+    },
+    handleWrapperFocus: function handleWrapperFocus(event) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.focused = true;
+      this.$emit('focus', event);
+    },
+    handleWrapperBlur: function handleWrapperBlur(event) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.focused = false;
+      this.$emit('blur', event);
+    }
+  }
+};
+var SwitchVue3 = Switch;
+export { Switch, SwitchVue3 };

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

@@ -0,0 +1,46 @@
+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 { 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 Vue, TextAreaMethods, TextAreaData, TextAreaComputed, TextAreaState {
+}
+declare let TextArea: ComponentOptions<TextAreaAll, DefaultData<TextAreaData>, DefaultMethods<TextAreaAll>, TextAreaComputed, RecordPropsDefinition<TextAreaProps>>;
+declare const TextAreaVue3: DefineComponent<TextAreaProps, any, TextAreaData, TextAreaComputed, TextAreaMethods, {}, {}, {}, string, TextAreaProps, TextAreaProps, {}>;
+export { TextArea, TextAreaVue3 };

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 {
+}