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

package/textbox/TextBox.mjs

@@ -0,0 +1,347 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as b, ref as x, h as o, createVNode as a, isVNode as C } from "vue";
+import { validatePackage as _, guid as w, templateRendering as h, getListeners as c, getTemplate as f, Icon as n, kendoThemeMaps as m } from "@progress/kendo-vue-common";
+import { packageMetadata as I } from "../package-metadata.mjs";
+import { FloatingLabel as M } from "@progress/kendo-vue-labels";
+import { checkIcon as B, exclamationCircleIcon as N, xIcon as F } from "@progress/kendo-svg-icons";
+function L(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !C(t);
+}
+const D = /* @__PURE__ */ b({
+  model: {
+    event: "changemodel"
+  },
+  inheritAttrs: !1,
+  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: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    defaultValue: {
+      type: [String, Number],
+      default: ""
+    },
+    value: {
+      type: [String, Number]
+    },
+    label: {
+      type: String
+    },
+    placeholder: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(t) {
+        return [null, "small", "medium", "large"].includes(t);
+      }
+    },
+    rounded: {
+      type: String,
+      default: "medium",
+      validator: function(t) {
+        return [null, "small", "medium", "large", "full"].includes(t);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: "solid",
+      validator: function(t) {
+        return [null, "solid", "flat", "outline"].includes(t);
+      }
+    },
+    dir: {
+      type: String
+    },
+    id: String,
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    validate: {
+      type: Boolean
+    },
+    validationMessage: {
+      type: String
+    },
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    iconName: String,
+    inputPrefix: [String, Function],
+    inputSuffix: [String, Function],
+    showValidationIcon: Boolean,
+    showLoadingIcon: Boolean,
+    showClearButton: Boolean,
+    inputClass: String,
+    wrapperClass: String,
+    tabIndex: Number,
+    role: String,
+    title: String,
+    ariaLabel: String
+  },
+  data: function() {
+    return {
+      hasMounted: !1,
+      autofill: !1,
+      currentValue: "",
+      valueDuringOnChange: "",
+      focused: !1
+    };
+  },
+  created() {
+    _(I), this._input = void 0, this._inputId = w(), this.$data.valueDuringOnChange = void 0, this.$data.currentValue = this.$props.defaultValue;
+  },
+  mounted() {
+    this._input = this.inputRef, this.wrapper = this.wrapperRef, this.$data.hasMounted = !0, this.setValidity();
+  },
+  updated() {
+    this.setValidity(), this.updateValidClass();
+  },
+  setup() {
+    return {
+      inputRef: x(null)
+    };
+  },
+  render() {
+    const t = !this.$props.validityStyles || this.validity().valid, {
+      label: i,
+      id: e,
+      required: l,
+      iconName: d,
+      showValidationIcon: r,
+      showLoadingIcon: g,
+      showClearButton: y
+    } = this.$props, p = e || this._inputId, v = o("input", {
+      ...this.$attrs,
+      "aria-label": this.$props.ariaLabel,
+      role: this.$props.role,
+      title: this.$props.title,
+      tabindex: this.$props.tabIndex,
+      placeholder: this.$props.placeholder,
+      id: p,
+      required: l,
+      disabled: this.$props.disabled,
+      value: this.computedValue,
+      class: this.inputInnerClass,
+      ref: (u) => {
+        this.inputRef = u;
+      },
+      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
+    }), $ = h.call(this, this.$props.inputPrefix, c.call(this)), k = h.call(this, this.$props.inputSuffix, c.call(this)), V = f.call(this, {
+      h: o,
+      template: $,
+      additionalProps: {
+        value: this.computedValue,
+        valid: t
+      }
+    }), S = f.call(this, {
+      h: o,
+      template: k,
+      additionalProps: {
+        value: this.computedValue,
+        valid: t
+      }
+    }), s = a("span", {
+      class: this.inputWrapperClass(),
+      ref: (u) => {
+        this.wrapperRef = u;
+      }
+    }, [d && a(n, {
+      name: d,
+      class: "k-input-icon"
+    }, null), this.$props.inputPrefix && a("span", {
+      class: "k-input-prefix"
+    }, [V]), v, this.$props.inputSuffix && a("span", {
+      class: "k-input-suffix"
+    }, [S]), r && t && a(n, {
+      name: "check",
+      icon: B,
+      class: "k-input-validation-icon"
+    }, null), r && !t && a(n, {
+      name: "exclamation-circle",
+      icon: N,
+      class: "k-input-validation-icon"
+    }, null), g && a(n, {
+      name: "loading",
+      class: "k-input-loading-icon"
+    }, null), y && this.computedValue && a("span", {
+      onClick: this.clearClick,
+      class: "k-clear-value"
+    }, [a(n, {
+      name: "x",
+      icon: F
+    }, null)])]);
+    return i ? a(M, {
+      label: i,
+      editorId: p,
+      editorValue: this.computedValue,
+      editorValid: t,
+      editorDisabled: this.$props.disabled,
+      editorPlaceholder: this.$data.focused ? this.$props.placeholder : "",
+      dir: this.$props.dir
+    }, L(s) ? s : {
+      default: () => [s]
+    }) : s;
+  },
+  methods: {
+    updateValidClass() {
+      this.wrapper.classList.toggle("k-invalid", !this.validity().valid);
+    },
+    emitFocus(t) {
+      this.$emit("focus", t), this.$data.focused = !0;
+    },
+    emitBlur(t) {
+      this.$emit("blur", t), this.$data.focused = !1;
+    },
+    handleKeydown(t) {
+      this.$emit("keydown", t);
+    },
+    handleKeyup(t) {
+      this.$emit("keyup", t);
+    },
+    handleKeypress(t) {
+      this.$emit("keypress", t);
+    },
+    clearClick(t) {
+      this.emitUpdate(t, "change", "");
+    },
+    focus() {
+      this._input && this._input.focus();
+    },
+    validity() {
+      const t = {
+        badTextBox: this._input ? this._input.validity.badTextBox : !1,
+        patternMismatch: this._input ? this._input.validity.patternMismatch : !1,
+        rangeOverflow: this._input ? this._input.validity.rangeOverflow : !1,
+        rangeUnderflow: this._input ? this._input.validity.rangeUnderflow : !1,
+        stepMismatch: this._input ? this._input.validity.stepMismatch : !1,
+        tooLong: this._input ? this._input.validity.tooLong : !1,
+        tooShort: this._input ? this._input.validity.tooShort : !1,
+        typeMismatch: this._input ? this._input.validity.typeMismatch : !1,
+        valueMissing: this._input ? this._input.validity.valueMissing : !1
+      };
+      return {
+        ...t,
+        customError: this.$props.validationMessage !== void 0,
+        valid: this.$props.valid !== void 0 ? this.$props.valid : this._input ? !this.isInvalid(t) : !0
+      };
+    },
+    isInvalid(t) {
+      let i = !1;
+      for (const e in t)
+        t.hasOwnProperty(e) && (i = i || t[e]);
+      return i;
+    },
+    setValidity() {
+      this._input && this._input.setCustomValidity && this._input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || "");
+    },
+    handleInput(t) {
+      this.emitUpdate(t, "input", t.target.value);
+    },
+    handleChange(t) {
+      this.emitUpdate(t, "change", t.target.value);
+    },
+    emitUpdate(t, i, e) {
+      this.disabled || (this.$data.currentValue = e, this.$data.valueDuringOnChange = e, this.$nextTick(() => {
+        this.$emit("changemodel", e), this.$emit("update:modelValue", e), this.$emit(i, {
+          event: t,
+          value: e,
+          component: this,
+          target: t.target,
+          validity: this.validity()
+        }), this.$data.valueDuringOnChange = void 0;
+      }));
+    },
+    handleAutoFill(t) {
+      if (t.animationName === "autoFillStart") {
+        const i = t.target.parentNode;
+        i && i.classList.contains("k-empty") && (this.$data.autofill = !0, i.classList.remove("k-empty"));
+      }
+    },
+    handleAutoFillEnd(t) {
+      t.animationName === "autoFillEnd" && t.target.parentNode && (this.$data.autofill = !1);
+    },
+    name: function() {
+      return this.$props.name;
+    },
+    inputWrapperClass() {
+      const {
+        size: t,
+        fillMode: i,
+        rounded: e
+      } = this.$props, l = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
+      return {
+        "k-textbox": !0,
+        "k-input": !0,
+        [`k-input-${m.sizeMap[t] || t}`]: t,
+        [`k-input-${i}`]: i,
+        [`k-rounded-${m.roundedMap[e] || e}`]: e,
+        "k-invalid": !l,
+        "k-required": this.required,
+        "k-disabled": this.$props.disabled,
+        [this.wrapperClass]: this.wrapperClass
+      };
+    }
+  },
+  computed: {
+    spanClassNames() {
+      const t = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
+      return {
+        "k-floating-label-container": !0,
+        "k-focus": this.$data.focused,
+        "k-empty": !(this.computedValue === 0 || this.computedValue || this.$props.placeholder || this.$data.autofill),
+        "k-autofill": this.$data.autofill,
+        "k-invalid": !t && t !== void 0,
+        "k-rtl": this.$props.dir === "rtl"
+      };
+    },
+    inputInnerClass() {
+      return {
+        "k-input-inner": !0,
+        [this.inputClass]: this.inputClass
+      };
+    },
+    computedValue() {
+      return this.$data.valueDuringOnChange !== void 0 ? this.$data.valueDuringOnChange : this.$props.value !== void 0 ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.$data.currentValue;
+    }
+  }
+});
+export {
+  D as TextBox
+};

package/dist/es/additionalTypes.ts

@@ -1,21 +0,0 @@
-// @ts-ignore
-import { DefineComponent } from 'vue';
-// @ts-ignore
-import * as Vue from 'vue';
-
-/**
- * @hidden
- */
-// @ts-ignore
-type Vue2type = Vue.default;
-
-/**
- * @hidden
- */
-// @ts-ignore
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
-/**
- * @hidden
- */
-// @ts-ignore
-export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

package/dist/es/checkbox/Checkbox.d.ts

@@ -1,79 +0,0 @@
-import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
-declare type DefaultData<V> = object | ((this: V) => {});
-declare type DefaultMethods<V> = {
-    [key: string]: (this: V, ...args: any[]) => any;
-};
-import { LocalizationService } from '@progress/kendo-vue-intl';
-import { CheckboxProps } from './interfaces/CheckboxProps';
-/**
- * @hidden
- */
-export interface CheckboxHandle {
-    element: any;
-    focus: any;
-}
-/**
- * @hidden
- */
-export interface CheckboxData {
-    valueDuringOnChange?: any;
-    currentValue?: any;
-    currentChecked?: boolean;
-    currentDir: string;
-}
-/**
- * @hidden
- */
-export interface CheckboxState {
-    defaultValidationMessage: string;
-    optionalMessage: string;
-    localizationService: LocalizationService;
-    calculatedId: string;
-    input: any;
-    inputRef: any;
-    v3: boolean;
-}
-/**
- * @hidden
- */
-export interface CheckboxMethods {
-    [key: string]: any;
-    localizeMessage: (message: string) => string;
-    focusElement: () => void;
-    setValue: (e: any, val: boolean) => void;
-    onChangeHandler: (e: any) => void;
-    onKeyDownHandler: (e: any) => void;
-    onFocusHandler: (e: any) => void;
-    onBlurHandler: (e: any) => void;
-    setValidity: () => void;
-}
-/**
- * @hidden
- */
-export interface CheckboxComputed {
-    [key: string]: any;
-    valueIsBooleanOrNull: boolean;
-    isCheckedControlled: boolean;
-    isValueControlled: boolean;
-    computedValue: any;
-    computedChecked?: boolean;
-    useValueAsChecked: boolean;
-    checkedProp?: any;
-    valueProp: any;
-    indeterminateProp: any;
-    isValid: boolean;
-}
-/**
- * @hidden
- */
-export interface CheckboxAll extends Vue2type, CheckboxMethods, CheckboxState, CheckboxData, CheckboxComputed {
-}
-/**
- * @hidden
- */
-declare let CheckboxVue2: ComponentOptions<CheckboxAll, DefaultData<CheckboxData>, DefaultMethods<CheckboxAll>, CheckboxComputed, RecordPropsDefinition<CheckboxProps>>;
-/**
- * @hidden
- */
-declare const Checkbox: DefineComponent<CheckboxProps, any, CheckboxData, CheckboxComputed, CheckboxMethods, {}, {}, {}, string, CheckboxProps, CheckboxProps, {}>;
-export { Checkbox, CheckboxVue2 };