@progress/kendo-vue-inputs 3.9.1 → 3.9.2-dev.202304050903

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1680001650,
+    publishDate: 1680684691,
     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/esm/textbox/TextBox.d.ts

@@ -0,0 +1,208 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+import { FormComponentProps } from '@progress/kendo-vue-common';
+declare type DefaultData<V> = object | ((this: V) => TextBoxData);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * Represents the props of the [Kendo UI for Vue TextBox component]({% slug overview_textbox %}).
+ * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextBoxElement).
+ */
+export interface TextBoxProps extends FormComponentProps {
+    /**
+     * Renders a floating label for the TextBox component.
+     */
+    id?: string;
+    label?: string;
+    value?: string | string[] | number;
+    modelValue?: string | number;
+    defaultValue?: string | string[] | number | undefined;
+    disabled?: boolean;
+    validate?: boolean;
+    /**
+     * Configures the `size` of the TextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the TextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the TextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline' | string;
+    dir?: string;
+    /**
+     * Fires when the `change` event of the input is triggered.
+     */
+    onChange?: (event: any) => void;
+    /**
+     * Fires when the `input` event of the input is triggered.
+     */
+    onTextBox?: (event: any) => void;
+    /**
+     * Fires when the input is focused.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Fires when the input is blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires when the 'keyup' input event is triggered.
+     */
+    onKeyup?: (event: any) => void;
+    /**
+     * Fires when the 'keydown' input event is triggered.
+     */
+    onKeydown?: (event: any) => void;
+    /**
+     * Fires when the 'keypress' input event is triggered.
+     */
+    onKeypress?: (event: any) => void;
+    /**
+     * Specifies the placeholder of an `input` element. Used to define if the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * Defines a string prop that controls the input icon.
+     */
+    iconName?: String;
+    /**
+     * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputPrefix?: Boolean | String | Object | Function;
+    /**
+     * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputSuffix?: Boolean | String | Object | Function;
+    /**
+     * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
+     */
+    showValidationIcon?: Boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
+     */
+    showLoadingIcon?: Boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
+     */
+    showClearButton?: Boolean;
+    /**
+     * Defines additional class to the wrapper element.
+     */
+    wrapperClass?: String;
+    /**
+     * Defines tabindex to the input element.
+     */
+    tabIndex?: Number;
+    /**
+     * Defines additional class to the input element.
+     */
+    inputClass?: String;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs.
+     * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario.
+     */
+    minlength?: string;
+    /**
+     * Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs.
+     * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario.
+     */
+    maxlength?: string;
+}
+/**
+ * @hidden
+ */
+export interface TextBoxData {
+    hasMounted?: boolean;
+    autofill?: boolean;
+    currentValue?: string | string[] | number;
+    valueDuringOnChange?: string;
+    focused?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface TextBoxState {
+    inputRef: any;
+    _input: any;
+    wrapper: any;
+    _inputId?: string;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface TextBoxMethods {
+    [key: string]: any;
+    emitBlur?: (_: any) => void;
+    emitFocus?: (_: any) => void;
+    focus?: () => void;
+    validity: () => any;
+    isInvalid: (state: any) => any;
+    setValidity: () => void;
+    handleTextBox?: () => void;
+    handleChange: (event: any) => void;
+    handleKeyup?: (event: any) => void;
+    handleKeydown?: (event: any) => void;
+    handleKeypress?: (event: any) => void;
+    handleAutoFill?: (e: any) => void;
+    handleAutoFillEnd?: (e: any) => void;
+    inputWrapperClass: () => any;
+}
+/**
+ * @hidden
+ */
+export interface TextBoxComputed {
+    [key: string]: any;
+    computedValue?: any;
+    spanClassNames?: any;
+}
+/**
+ * @hidden
+ */
+export interface TextBoxAllMethods extends Vue2type, TextBoxMethods, TextBoxComputed, TextBoxState {
+}
+/**
+ * @hidden
+ */
+declare let TextBoxVue2: ComponentOptions<TextBoxAllMethods, DefaultData<TextBoxData>, DefaultMethods<TextBoxAllMethods>, TextBoxComputed, RecordPropsDefinition<TextBoxProps>>;
+/**
+ * @hidden
+ */
+declare const TextBox: DefineComponent<TextBoxProps, any, TextBoxData, TextBoxComputed, TextBoxMethods, {}, {}, {}, string, TextBoxProps, TextBoxProps, {}>;
+export { TextBox, TextBoxVue2 };

package/dist/esm/textbox/TextBox.js

@@ -0,0 +1,449 @@
+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';
+var ref = allVue.ref;
+import { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+import { FloatingLabel } from '@progress/kendo-vue-labels';
+import { checkIcon, exclamationCircleIcon, xIcon } from '@progress/kendo-svg-icons';
+/**
+ * @hidden
+ */
+var TextBoxVue2 = {
+  model: {
+    event: 'changemodel'
+  },
+  // @ts-ignore
+  emits: {
+    'input': null,
+    'change': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'focus': null,
+    'blur': null,
+    'keyup': null,
+    'keydown': null,
+    'keypress': null
+  },
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: undefined
+    },
+    disabled: Boolean,
+    defaultValue: {
+      type: [String, Number],
+      default: ''
+    },
+    value: {
+      type: [String, Number]
+    },
+    label: {
+      type: String
+    },
+    placeholder: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    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);
+      }
+    },
+    dir: {
+      type: String
+    },
+    id: String,
+    valid: {
+      type: Boolean,
+      default: undefined
+    },
+    validate: {
+      type: Boolean
+    },
+    validationMessage: {
+      type: String
+    },
+    validityStyles: {
+      type: Boolean,
+      default: true
+    },
+    iconName: String,
+    inputPrefix: templateDefinition,
+    inputSuffix: templateDefinition,
+    showValidationIcon: Boolean,
+    showLoadingIcon: Boolean,
+    showClearButton: Boolean,
+    inputClass: String,
+    wrapperClass: String,
+    tabIndex: Number,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String
+  },
+  data: function data() {
+    return {
+      hasMounted: false,
+      autofill: false,
+      currentValue: '',
+      valueDuringOnChange: '',
+      focused: false
+    };
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this._input = undefined;
+    this._inputId = guid();
+    this.$data.valueDuringOnChange = undefined;
+    this.$data.currentValue = this.$props.defaultValue;
+  },
+  mounted: function mounted() {
+    this._input = this.v3 ? this.inputRef : this.$refs.input;
+    this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
+    this.$data.hasMounted = true;
+    this.setValidity();
+  },
+  updated: function updated() {
+    this.setValidity();
+    this.updateValidClass();
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    return {
+      v3: v3,
+      inputRef: inputRef
+    };
+  },
+  render: function render(createElement) {
+    var _this = this;
+    var h = gh || createElement;
+    var isValid = !this.$props.validityStyles || this.validity().valid;
+    var _a = this.$props,
+      label = _a.label,
+      id = _a.id,
+      required = _a.required,
+      iconName = _a.iconName,
+      showValidationIcon = _a.showValidationIcon,
+      showLoadingIcon = _a.showLoadingIcon,
+      showClearButton = _a.showClearButton,
+      tabIndex = _a.tabIndex,
+      ariaLabelledBy = _a.ariaLabelledBy,
+      ariaDescribedBy = _a.ariaDescribedBy;
+    var inputId = id || this._inputId;
+    var textbox = h('input', __assign(__assign({
+      domProps: this.v3 ? null : __assign(__assign({}, this.$attrs), {
+        placeholder: this.$props.placeholder,
+        id: inputId,
+        required: required,
+        value: this.computedValue
+      }),
+      attrs: this.v3 ? undefined : __assign(__assign({}, this.$attrs), {
+        tabindex: tabIndex
+      })
+    }, this.$attrs), {
+      placeholder: this.$props.placeholder,
+      id: inputId,
+      tabindex: tabIndex,
+      required: required,
+      ariaLabelledby: ariaLabelledBy,
+      ariaDescribedby: ariaDescribedBy,
+      ariaDisabled: this.$props.disabled,
+      value: this.computedValue,
+      class: this.inputInnerClass,
+      ref: this.v3 ? function (el) {
+        _this.inputRef = el;
+      } : 'input',
+      on: this.v3 ? null : {
+        change: this.handleChange,
+        focus: this.emitFocus,
+        blur: this.emitBlur,
+        keydown: this.handleKeydown,
+        keyup: this.handleKeyup,
+        keypress: this.handleKeypress,
+        input: this.handleTextBox,
+        animationstart: this.handleAutoFill,
+        animationend: this.handleAutoFillEnd
+      },
+      onKeydown: this.handleKeydown,
+      onKeyup: this.handleKeyup,
+      onKeypress: this.handleKeypress,
+      onChange: this.handleChange,
+      onFocus: this.emitFocus,
+      onBlur: this.emitBlur,
+      onTextBox: this.handleTextBox,
+      onAnimationstart: this.handleAutoFill,
+      onAnimationend: this.handleAutoFillEnd
+    }));
+    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: isValid
+      }
+    });
+    var inputSuffix = getTemplate.call(this, {
+      h: h,
+      template: inputSuffixTemplate,
+      additionalProps: {
+        value: this.computedValue,
+        valid: isValid
+      }
+    });
+    var inputWrapper = h("span", {
+      "class": this.inputWrapperClass(),
+      ref: this.v3 ? function (el) {
+        _this.wrapperRef = el;
+      } : 'wrapper'
+    }, [iconName && h(Icon, {
+      name: iconName,
+      attrs: this.v3 ? undefined : {
+        name: iconName
+      },
+      "class": "k-input-icon"
+    }), this.$props.inputPrefix && h("span", {
+      "class": "k-input-prefix"
+    }, [inputPrefix]), textbox, this.$props.inputSuffix && h("span", {
+      "class": "k-input-suffix"
+    }, [inputSuffix]), showValidationIcon && isValid && h(Icon, {
+      name: 'check',
+      attrs: this.v3 ? undefined : {
+        name: 'check',
+        icon: checkIcon
+      },
+      icon: checkIcon,
+      "class": "k-input-validation-icon"
+    }), showValidationIcon && !isValid && h(Icon, {
+      name: 'exclamation-circle',
+      attrs: this.v3 ? undefined : {
+        name: 'exclamation-circle',
+        icon: exclamationCircleIcon
+      },
+      icon: exclamationCircleIcon,
+      "class": "k-input-validation-icon"
+    }), showLoadingIcon && h("span", {
+      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showClearButton && this.computedValue && h("span", {
+      onClick: this.clearClick,
+      on: this.v3 ? undefined : {
+        "click": this.clearClick
+      },
+      "class": "k-clear-value"
+    }, [h(Icon, {
+      name: 'x',
+      attrs: this.v3 ? undefined : {
+        name: 'x',
+        icon: xIcon
+      },
+      icon: xIcon
+    })])]);
+    return label ?
+    // @ts-ignore function children
+    h(FloatingLabel, {
+      label: label,
+      attrs: this.v3 ? undefined : {
+        label: label,
+        editorId: inputId,
+        editorValue: this.computedValue,
+        editorValid: isValid,
+        editorDisabled: this.$props.disabled,
+        editorPlaceholder: this.$data.focused ? this.$props.placeholder : '',
+        dir: this.$props.dir
+      },
+      editorId: inputId,
+      editorValue: this.computedValue,
+      editorValid: isValid,
+      editorDisabled: this.$props.disabled,
+      editorPlaceholder: this.$data.focused ? this.$props.placeholder : '',
+      dir: this.$props.dir
+    }, this.v3 ? function () {
+      return [inputWrapper];
+    } : [inputWrapper]) : inputWrapper;
+  },
+  methods: {
+    updateValidClass: function updateValidClass() {
+      this.wrapper.classList.toggle('k-invalid', !this.validity().valid);
+    },
+    emitFocus: function emitFocus(e) {
+      this.$emit('focus', e);
+      this.$data.focused = true;
+    },
+    emitBlur: function emitBlur(e) {
+      this.$emit('blur', e);
+      this.$data.focused = false;
+    },
+    handleKeydown: function handleKeydown(e) {
+      this.$emit('keydown', e);
+    },
+    handleKeyup: function handleKeyup(e) {
+      this.$emit('keyup', e);
+    },
+    handleKeypress: function handleKeypress(e) {
+      this.$emit('keypress', e);
+    },
+    clearClick: function clearClick(event) {
+      this.emitUpdate(event, 'change', '');
+    },
+    focus: function focus() {
+      if (this._input) {
+        this._input.focus();
+      }
+    },
+    validity: function validity() {
+      var result = {
+        badTextBox: this._input ? this._input.validity.badTextBox : false,
+        patternMismatch: this._input ? this._input.validity.patternMismatch : false,
+        rangeOverflow: this._input ? this._input.validity.rangeOverflow : false,
+        rangeUnderflow: this._input ? this._input.validity.rangeUnderflow : false,
+        stepMismatch: this._input ? this._input.validity.stepMismatch : false,
+        tooLong: this._input ? this._input.validity.tooLong : false,
+        tooShort: this._input ? this._input.validity.tooShort : false,
+        typeMismatch: this._input ? this._input.validity.typeMismatch : false,
+        valueMissing: this._input ? this._input.validity.valueMissing : false
+      };
+      return __assign(__assign({}, result), {
+        customError: this.$props.validationMessage !== undefined,
+        valid: this.$props.valid !== undefined ? this.$props.valid : this._input ? !this.isInvalid(result) : true
+      });
+    },
+    isInvalid: function isInvalid(state) {
+      var result = false;
+      for (var prop in state) {
+        if (state.hasOwnProperty(prop)) {
+          result = result || state[prop];
+        }
+      }
+      return result;
+    },
+    setValidity: function setValidity() {
+      if (this._input && this._input.setCustomValidity) {
+        this._input.setCustomValidity(this.validity().valid ? '' : this.$props.validationMessage || '');
+      }
+    },
+    handleTextBox: function handleTextBox(event) {
+      this.emitUpdate(event, 'input', event.target.value);
+    },
+    handleChange: function handleChange(event) {
+      this.emitUpdate(event, 'change', event.target.value);
+    },
+    emitUpdate: function emitUpdate(event, eventName, value) {
+      var that = this;
+      if (this.disabled) {
+        return;
+      }
+      this.$data.currentValue = value;
+      this.$data.valueDuringOnChange = value;
+      this.$nextTick(function () {
+        that.$emit('changemodel', value);
+        that.$emit('update:modelValue', value);
+        that.$emit(eventName, {
+          event: event,
+          value: value,
+          component: that,
+          target: event.target,
+          validity: that.validity()
+        });
+        that.$data.valueDuringOnChange = undefined;
+      });
+    },
+    handleAutoFill: function handleAutoFill(e) {
+      if (e.animationName === 'autoFillStart') {
+        var parent_1 = e.target.parentNode;
+        if (parent_1 && parent_1.classList.contains('k-empty')) {
+          this.$data.autofill = true;
+          parent_1.classList.remove('k-empty');
+        }
+      }
+    },
+    handleAutoFillEnd: function handleAutoFillEnd(e) {
+      if (e.animationName === 'autoFillEnd') {
+        var parent_2 = e.target.parentNode;
+        if (parent_2) {
+          this.$data.autofill = false;
+        }
+      }
+    },
+    name: function name() {
+      return this.$props.name;
+    },
+    inputWrapperClass: function inputWrapperClass() {
+      var _a;
+      var _b = this.$props,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded;
+      var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
+      return _a = {
+        'k-textbox': true,
+        'k-input': 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-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.wrapperClass] = this.wrapperClass, _a;
+    }
+  },
+  computed: {
+    spanClassNames: {
+      get: function get() {
+        var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
+        return {
+          'k-floating-label-container': true,
+          'k-focus': this.$data.focused,
+          'k-empty': !((this.computedValue === 0 ? true : this.computedValue) || this.$props.placeholder || this.$data.autofill),
+          'k-autofill': this.$data.autofill,
+          'k-invalid': !isValid && isValid !== undefined,
+          'k-rtl': this.$props.dir === 'rtl'
+        };
+      }
+    },
+    inputInnerClass: function inputInnerClass() {
+      var _a;
+      return _a = {
+        'k-input-inner': true
+      }, _a[this.inputClass] = this.inputClass, _a;
+    },
+    computedValue: {
+      get: function get() {
+        return this.$data.valueDuringOnChange !== undefined ? this.$data.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$data.currentValue;
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+var TextBox = TextBoxVue2;
+export { TextBox, TextBoxVue2 };

package/dist/npm/main.d.ts

@@ -15,6 +15,7 @@ export * from './colors/FlatColorPicker';
 export { Switch, SwitchVue2, SwitchProps, SwitchState, SwitchChangeEvent } from './switch/Switch';
 export * from './input-separator/InputSeparator';
 export * from './input/Input';
+export * from './textbox/TextBox';
 export * from './numerictextbox/NumericTextBox';
 export * from './maskedtextbox/MaskedTextBox';
 export * from './maskedtextbox/MaskedTextBoxProps';

package/dist/npm/main.js

@@ -34,6 +34,7 @@ Object.defineProperty(exports, "Switch", { enumerable: true, get: function () {
 Object.defineProperty(exports, "SwitchVue2", { enumerable: true, get: function () { return Switch_1.SwitchVue2; } });
 __exportStar(require("./input-separator/InputSeparator"), exports);
 __exportStar(require("./input/Input"), exports);
+__exportStar(require("./textbox/TextBox"), exports);
 __exportStar(require("./numerictextbox/NumericTextBox"), exports);
 __exportStar(require("./maskedtextbox/MaskedTextBox"), exports);
 __exportStar(require("./maskedtextbox/MaskedTextBoxProps"), 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: 1680001650,
+    publishDate: 1680684691,
     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'
 };