@progress/kendo-vue-inputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

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

@@ -1,31 +0,0 @@
-/**
- * Specifies the resize direction of the TextArea sections.
- *
- * The possible values are:
- * `vertical`(Default) —TextArea can be resized only vertically.
- * `horizontal`—TextArea can be resized only horizontally.
- * `both`—TextArea can be resized both vertically and horizontally.
- * `none`—TextArea can not be manually resized.
- */
-export declare type TextAreaResize = 'both' | 'horizontal' | 'vertical' | 'none';
-/**
- * Specifies the enum options for resize direction of the TextArea sections.
- */
-export declare enum TextAreaResizeEnum {
-    /**
-     * `both`—TextArea can be resized both vertically and horizontally.
-     */
-    both = "both",
-    /**
-     * `horizontal`—TextArea can be resized only horizontally.
-     */
-    horizontal = "horizontal",
-    /**
-     * `vertical`(Default) —TextArea can be resized only vertically.
-     */
-    vertical = "vertical",
-    /**
-     * `none`—TextArea can not be manually resized.
-     */
-    none = "none"
-}

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

@@ -1,22 +0,0 @@
-/**
- * Specifies the enum options for resize direction of the TextArea sections.
- */
-export var TextAreaResizeEnum;
-(function (TextAreaResizeEnum) {
-    /**
-     * `both`—TextArea can be resized both vertically and horizontally.
-     */
-    TextAreaResizeEnum["both"] = "both";
-    /**
-     * `horizontal`—TextArea can be resized only horizontally.
-     */
-    TextAreaResizeEnum["horizontal"] = "horizontal";
-    /**
-     * `vertical`(Default) —TextArea can be resized only vertically.
-     */
-    TextAreaResizeEnum["vertical"] = "vertical";
-    /**
-     * `none`—TextArea can not be manually resized.
-     */
-    TextAreaResizeEnum["none"] = "none";
-})(TextAreaResizeEnum || (TextAreaResizeEnum = {}));

package/dist/esm/textbox/TextBox.d.ts

@@ -1,211 +0,0 @@
-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;
-};
-export interface TextBoxChangeEvent {
-    /**
-     * A reference to the native event.
-     */
-    event: any;
-    /**
-     * The name of the event that is triggred. The value of this prop is `change`.
-     */
-    eventName: string;
-    /**
-     * The current value of the TextBox.
-     */
-    value: string | string[] | number;
-}
-/**
- * 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: TextBoxChangeEvent) => 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. This property works only with the Kendo UI for Vue FontIcons.
-     * Check the [Icons]({% slug icons %}) article for more information about how the Font Icon can be loaded to your project.
-     */
-    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 additional class to the input element.
-     */
-    inputClass?: 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;
-    handleInput?: () => 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

@@ -1,447 +0,0 @@
-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'
-  },
-  inheritAttrs: false,
-  // @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: {
-      type: Boolean,
-      default: undefined
-    },
-    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
-  },
-  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;
-    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,
-        disabled: this.$props.disabled,
-        value: this.computedValue
-      }),
-      attrs: this.v3 ? undefined : __assign({}, this.$attrs)
-    }, this.$attrs), {
-      placeholder: this.$props.placeholder,
-      id: inputId,
-      required: required,
-      disabled: 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.handleInput,
-        animationstart: this.handleAutoFill,
-        animationend: this.handleAutoFillEnd
-      },
-      onKeydown: this.handleKeydown,
-      onKeyup: this.handleKeyup,
-      onKeypress: this.handleKeypress,
-      onChange: this.handleChange,
-      onFocus: this.emitFocus,
-      onBlur: this.emitBlur,
-      onInput: this.handleInput,
-      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(Icon, {
-      name: 'loading',
-      attrs: this.v3 ? undefined : {
-        name: 'loading'
-      },
-      "class": 'k-input-loading-icon'
-    }), 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 || '');
-      }
-    },
-    handleInput: function handleInput(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 };