@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/input.js

@@ -1,11 +1,11 @@
-import { DESCRIPTION_SIZE_TYPES as x, VALIDATION_MESSAGE_TYPES as L } from "./constants.js";
-import { hasSlotContent as _, getUniqueString as y, getValidationState as I } from "./utils.js";
-import { M as z } from "../chunks/input-4UQWegUk.js";
-import { resolveComponent as E, openBlock as a, createElementBlock as l, normalizeClass as u, createElementVNode as v, renderSlot as c, toDisplayString as m, createCommentVNode as d, createTextVNode as M, mergeProps as f, toHandlers as C, createVNode as T } from "vue";
-import { _ as V } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtValidationMessages as w } from "./validation-messages.js";
-import "./validators.js";
-const g = {
+import { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from "../common/constants.js";
+import { hasSlotContent, getUniqueString, getValidationState } from "../common/utils.js";
+import { MessagesMixin } from "../chunks/input-NmYDD5bn.js";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, toDisplayString, createCommentVNode, createTextVNode, mergeProps, toHandlers, createVNode } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtValidationMessages } from "./validation-messages.js";
+import "../common/validators.js";
+const INPUT_TYPES = {
   TEXT: "text",
   TEXTAREA: "textarea",
   PASSWORD: "password",
@@ -14,17 +14,19 @@ const g = {
   DATE: "date",
   TIME: "time",
   FILE: "file"
-}, h = {
+};
+const INPUT_SIZES = {
   EXTRA_SMALL: "xs",
   SMALL: "sm",
   DEFAULT: "md",
   LARGE: "lg",
   EXTRA_LARGE: "xl"
-}, A = {
+};
+const _sfc_main = {
   name: "DtInput",
-  components: { DtValidationMessages: w },
-  mixins: [z],
-  inheritAttrs: !1,
+  components: { DtValidationMessages },
+  mixins: [MessagesMixin],
+  inheritAttrs: false,
   props: {
     /**
      * Name property of the input element
@@ -40,8 +42,8 @@ const g = {
      */
     type: {
       type: String,
-      default: g.TEXT,
-      validator: (t) => Object.values(g).includes(t)
+      default: INPUT_TYPES.TEXT,
+      validator: (t) => Object.values(INPUT_TYPES).includes(t)
     },
     /**
      * Value of the input
@@ -56,7 +58,7 @@ const g = {
      */
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Label for the input
@@ -71,7 +73,7 @@ const g = {
      */
     labelVisible: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Description for the input
@@ -87,7 +89,7 @@ const g = {
     size: {
       type: String,
       default: null,
-      validator: (t) => Object.values(h).includes(t)
+      validator: (t) => Object.values(INPUT_SIZES).includes(t)
     },
     /**
      * Size of the icon. One of `xs`, `sm`, `md`, `lg`, `xl`. If you do not set this the icon will size relative
@@ -97,7 +99,7 @@ const g = {
     iconSize: {
       type: String,
       default: null,
-      validator: (t) => Object.values(h).includes(t)
+      validator: (t) => Object.values(INPUT_SIZES).includes(t)
     },
     /**
      * Additional class name for the input element.
@@ -133,7 +135,7 @@ const g = {
      */
     retainWarning: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Validation for the input. Supports maximum length validation with the structure:
@@ -149,7 +151,7 @@ const g = {
      */
     hidden: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   emits: [
@@ -227,73 +229,86 @@ const g = {
         lg: "d-label--lg",
         xl: "d-label--xl"
       },
-      isInputFocused: !1,
-      isInvalid: !1,
+      isInputFocused: false,
+      isInvalid: false,
       defaultLength: 0,
-      hasSlotContent: _
+      hasSlotContent
     };
   },
   computed: {
     isTextarea() {
-      return this.type === g.TEXTAREA;
+      return this.type === INPUT_TYPES.TEXTAREA;
     },
     isDefaultSize() {
-      return this.size === h.DEFAULT;
+      return this.size === INPUT_SIZES.DEFAULT;
     },
     isDefaultIconSize() {
-      return this.iconSizeComputed === h.DEFAULT;
+      return this.iconSizeComputed === INPUT_SIZES.DEFAULT;
     },
     iconSizeComputed() {
       return this.iconSize ? this.iconSize : this.size;
     },
     isValidSize() {
-      return Object.values(h).includes(this.size);
+      return Object.values(INPUT_SIZES).includes(this.size);
     },
     isValidDescriptionSize() {
-      return Object.values(x).includes(this.size);
+      return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);
     },
     inputComponent() {
-      return this.isTextarea ? "textarea" : "input";
+      if (this.isTextarea) {
+        return "textarea";
+      }
+      return "input";
     },
     inputListeners() {
       return {
-        input: async (t) => {
-          let s = t.target.value;
-          this.type === g.FILE && (s = Array.from(t.target.files).map((o) => o.name)), this.$emit("input", s), this.$emit("update:modelValue", s);
+        input: async (event) => {
+          let val = event.target.value;
+          if (this.type === INPUT_TYPES.FILE) {
+            const files = Array.from(event.target.files);
+            val = files.map((file) => file.name);
+          }
+          this.$emit("input", val);
+          this.$emit("update:modelValue", val);
         },
-        blur: (t) => {
-          this.isInputFocused = !1, this.onBlur(t);
+        blur: (event) => {
+          this.isInputFocused = false;
+          this.onBlur(event);
         },
-        focus: (t) => {
-          this.isInputFocused = !0, this.$emit("focus", t);
+        focus: (event) => {
+          this.isInputFocused = true;
+          this.$emit("focus", event);
         },
-        focusin: (t) => this.$emit("focusin", t),
-        focusout: (t) => this.$emit("focusout", t)
+        focusin: (event) => this.$emit("focusin", event),
+        focusout: (event) => this.$emit("focusout", event)
       };
     },
     descriptionKey() {
-      return `input-description-${y()}`;
+      return `input-description-${getUniqueString()}`;
     },
     inputState() {
-      return I(this.validationMessages);
+      return getValidationState(this.validationMessages);
     },
     defaultLengthCalculation() {
       return this.calculateLength(this.modelValue);
     },
     validationProps() {
-      var t, s, i, o, n, e, p, r, S, b;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
       return {
         length: {
-          description: (s = (t = this == null ? void 0 : this.validate) == null ? void 0 : t.length) == null ? void 0 : s.description,
-          max: (o = (i = this == null ? void 0 : this.validate) == null ? void 0 : i.length) == null ? void 0 : o.max,
-          warn: (e = (n = this == null ? void 0 : this.validate) == null ? void 0 : n.length) == null ? void 0 : e.warn,
-          message: (r = (p = this == null ? void 0 : this.validate) == null ? void 0 : p.length) == null ? void 0 : r.message,
-          limitMaxLength: (b = (S = this == null ? void 0 : this.validate) == null ? void 0 : S.length) != null && b.limitMaxLength ? this.validate.length.limitMaxLength : !1
+          description: (_b = (_a = this == null ? void 0 : this.validate) == null ? void 0 : _a.length) == null ? void 0 : _b.description,
+          max: (_d = (_c = this == null ? void 0 : this.validate) == null ? void 0 : _c.length) == null ? void 0 : _d.max,
+          warn: (_f = (_e = this == null ? void 0 : this.validate) == null ? void 0 : _e.length) == null ? void 0 : _f.warn,
+          message: (_h = (_g = this == null ? void 0 : this.validate) == null ? void 0 : _g.length) == null ? void 0 : _h.message,
+          limitMaxLength: ((_j = (_i = this == null ? void 0 : this.validate) == null ? void 0 : _i.length) == null ? void 0 : _j.limitMaxLength) ? this.validate.length.limitMaxLength : false
         }
       };
     },
     validationMessages() {
-      return this.showLengthLimitValidation ? this.formattedMessages.concat([this.inputLengthErrorMessage()]) : this.formattedMessages;
+      if (this.showLengthLimitValidation) {
+        return this.formattedMessages.concat([this.inputLengthErrorMessage()]);
+      }
+      return this.formattedMessages;
     },
     showInputState() {
       return this.showMessages && this.inputState;
@@ -302,7 +317,13 @@ const g = {
       return this.currentLength ? this.currentLength : this.defaultLengthCalculation;
     },
     inputLengthState() {
-      return this.inputLength < this.validationProps.length.warn ? null : this.inputLength <= this.validationProps.length.max ? this.validationProps.length.warn ? L.WARNING : null : L.ERROR;
+      if (this.inputLength < this.validationProps.length.warn) {
+        return null;
+      } else if (this.inputLength <= this.validationProps.length.max) {
+        return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;
+      } else {
+        return VALIDATION_MESSAGE_TYPES.ERROR;
+      }
     },
     shouldValidateLength() {
       return !!(this.validationProps.length.description && this.validationProps.length.max);
@@ -315,7 +336,10 @@ const g = {
       return this.shouldValidateLength && this.inputLengthState !== null && this.validationProps.length.message && (this.retainWarning || this.isInputFocused || this.isInvalid);
     },
     sizeModifierClass() {
-      return this.isDefaultSize || !this.isValidSize ? "" : {
+      if (this.isDefaultSize || !this.isValidSize) {
+        return "";
+      }
+      const sizeClasses = {
         input: {
           xs: "d-input--xs",
           sm: "d-input--sm",
@@ -328,10 +352,11 @@ const g = {
           lg: "d-textarea--lg",
           xl: "d-textarea--xl"
         }
-      }[this.inputComponent][this.size];
+      };
+      return sizeClasses[this.inputComponent][this.size];
     },
     stateClass() {
-      return [{
+      const inputStateClasses = {
         input: {
           error: "d-input--error base-input__input--error",
           warning: "d-input--warning base-input__input--warning",
@@ -342,17 +367,23 @@ const g = {
           warning: "d-textarea--warning base-input__input--warning",
           success: "d-textarea--success base-input__input--success"
         }
-      }[this.inputComponent][this.inputState]];
+      };
+      return [inputStateClasses[this.inputComponent][this.inputState]];
     }
   },
   watch: {
-    isInvalid(t) {
-      this.$emit("update:invalid", t);
+    isInvalid(val) {
+      this.$emit("update:invalid", val);
     },
     modelValue: {
-      immediate: !0,
-      handler(t) {
-        this.shouldValidateLength && this.validateLength(this.inputLength), this.currentLength == null && this.$emit("update:length", this.calculateLength(t));
+      immediate: true,
+      handler(newValue) {
+        if (this.shouldValidateLength) {
+          this.validateLength(this.inputLength);
+        }
+        if (this.currentLength == null) {
+          this.$emit("update:length", this.calculateLength(newValue));
+        }
       }
     }
   },
@@ -371,14 +402,20 @@ const g = {
       ];
     },
     inputWrapperClasses() {
-      return this.hidden ? [] : [
+      if (this.hidden) {
+        return [];
+      }
+      return [
         "d-input__wrapper",
         { [this.stateClass]: this.showInputState },
         this.inputWrapperClass
       ];
     },
-    calculateLength(t) {
-      return typeof t != "string" ? 0 : [...t].length;
+    calculateLength(value) {
+      if (typeof value !== "string") {
+        return 0;
+      }
+      return [...value].length;
     },
     inputLengthErrorMessage() {
       return {
@@ -386,29 +423,33 @@ const g = {
         type: this.inputLengthState
       };
     },
-    inputIconClasses(t) {
-      const s = {
+    inputIconClasses(side) {
+      const iconSizeClasses = {
         xs: "d-input-icon--xs",
         sm: "d-input-icon--sm",
         lg: "d-input-icon--lg",
         xl: "d-input-icon--xl"
       };
+      const iconOrientationClasses = {
+        left: "base-input__icon--left d-input-icon--left",
+        right: "base-input__icon--right d-input-icon--right"
+      };
       return [
-        {
-          left: "base-input__icon--left d-input-icon--left",
-          right: "base-input__icon--right d-input-icon--right"
-        }[t],
+        iconOrientationClasses[side],
         "d-input-icon",
-        { [s[this.iconSizeComputed]]: !this.isDefaultIconSize },
+        { [iconSizeClasses[this.iconSizeComputed]]: !this.isDefaultIconSize },
         this.sizeModifierClass
       ];
     },
-    onBlur(t) {
-      var s;
-      (s = this.$refs.container) != null && s.contains(t.relatedTarget) || this.$emit("blur", t);
+    onBlur(e) {
+      var _a;
+      if (!((_a = this.$refs.container) == null ? void 0 : _a.contains(e.relatedTarget))) {
+        this.$emit("blur", e);
+      }
     },
     clear() {
-      this.$emit("input", ""), this.$emit("clear");
+      this.$emit("input", "");
+      this.$emit("clear");
     },
     blur() {
       this.$refs.input.blur();
@@ -419,113 +460,120 @@ const g = {
     select() {
       this.$refs.input.select();
     },
-    getMessageKey(t, s) {
-      return `message-${t}-${s}`;
+    getMessageKey(type, index) {
+      return `message-${type}-${index}`;
     },
-    validateLength(t) {
-      this.isInvalid = t > this.validationProps.length.max;
+    validateLength(length) {
+      this.isInvalid = length > this.validationProps.length.max;
     }
   }
-}, P = ["aria-details"], D = ["id"], O = { key: 0 }, B = {
+};
+const _hoisted_1 = ["aria-details"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = {
   key: 1,
   "data-qa": "dt-input-length-description",
   class: "d-input__length-description"
-}, N = ["read-only"], R = ["value", "name", "disabled", "maxlength"], q = ["value", "name", "type", "disabled", "maxlength"];
-function F(t, s, i, o, n, e) {
-  const p = E("dt-validation-messages");
-  return a(), l("div", {
+};
+const _hoisted_5 = ["read-only"];
+const _hoisted_6 = ["value", "name", "disabled", "maxlength"];
+const _hoisted_7 = ["value", "name", "type", "disabled", "maxlength"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_validation_messages = resolveComponent("dt-validation-messages");
+  return openBlock(), createElementBlock("div", {
     ref: "container",
-    class: u(["base-input", { "d-vi-hidden": i.hidden }]),
+    class: normalizeClass(["base-input", { "d-vi-hidden": $props.hidden }]),
     "data-qa": "dt-input"
   }, [
-    v("label", {
+    createElementVNode("label", {
       class: "base-input__label",
-      "aria-details": t.$slots.description || i.description ? e.descriptionKey : void 0,
+      "aria-details": _ctx.$slots.description || $props.description ? $options.descriptionKey : void 0,
       "data-qa": "dt-input-label-wrapper"
     }, [
-      c(t.$slots, "labelSlot", {}, () => [
-        i.labelVisible && i.label ? (a(), l("div", {
+      renderSlot(_ctx.$slots, "labelSlot", {}, () => [
+        $props.labelVisible && $props.label ? (openBlock(), createElementBlock("div", {
           key: 0,
           ref: "label",
           "data-qa": "dt-input-label",
-          class: u([
+          class: normalizeClass([
             "base-input__label-text",
             "d-label",
-            n.labelSizeClasses[i.size]
+            $data.labelSizeClasses[$props.size]
           ])
-        }, m(i.label), 3)) : d("", !0)
+        }, toDisplayString($props.label), 3)) : createCommentVNode("", true)
       ]),
-      n.hasSlotContent(t.$slots.description) || i.description || e.shouldValidateLength ? (a(), l("div", {
+      $data.hasSlotContent(_ctx.$slots.description) || $props.description || $options.shouldValidateLength ? (openBlock(), createElementBlock("div", {
         key: 0,
-        id: e.descriptionKey,
+        id: $options.descriptionKey,
         ref: "description",
-        class: u([
+        class: normalizeClass([
           "base-input__description",
           "d-description",
-          n.descriptionSizeClasses[i.size]
+          $data.descriptionSizeClasses[$props.size]
         ]),
         "data-qa": "dt-input-description"
       }, [
-        n.hasSlotContent(t.$slots.description) || i.description ? (a(), l("div", O, [
-          c(t.$slots, "description", {}, () => [
-            M(m(i.description), 1)
+        $data.hasSlotContent(_ctx.$slots.description) || $props.description ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "description", {}, () => [
+            createTextVNode(toDisplayString($props.description), 1)
           ])
-        ])) : d("", !0),
-        e.shouldValidateLength ? (a(), l("div", B, m(e.validationProps.length.description), 1)) : d("", !0)
-      ], 10, D)) : d("", !0),
-      v("div", {
-        class: u(e.inputWrapperClasses()),
-        "read-only": i.disabled === !0 ? !0 : void 0
+        ])) : createCommentVNode("", true),
+        $options.shouldValidateLength ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString($options.validationProps.length.description), 1)) : createCommentVNode("", true)
+      ], 10, _hoisted_2)) : createCommentVNode("", true),
+      createElementVNode("div", {
+        class: normalizeClass($options.inputWrapperClasses()),
+        "read-only": $props.disabled === true ? true : void 0
       }, [
-        n.hasSlotContent(t.$slots.leftIcon) ? (a(), l("span", {
+        $data.hasSlotContent(_ctx.$slots.leftIcon) ? (openBlock(), createElementBlock("span", {
           key: 0,
-          class: u(e.inputIconClasses("left")),
+          class: normalizeClass($options.inputIconClasses("left")),
           "data-qa": "dt-input-left-icon-wrapper",
-          onFocusout: s[0] || (s[0] = (...r) => e.onBlur && e.onBlur(...r))
+          onFocusout: _cache[0] || (_cache[0] = (...args) => $options.onBlur && $options.onBlur(...args))
         }, [
-          c(t.$slots, "leftIcon")
-        ], 34)) : d("", !0),
-        e.isTextarea ? (a(), l("textarea", f({
+          renderSlot(_ctx.$slots, "leftIcon")
+        ], 34)) : createCommentVNode("", true),
+        $options.isTextarea ? (openBlock(), createElementBlock("textarea", mergeProps({
           key: 1,
           ref: "input",
-          value: i.modelValue,
-          name: i.name,
-          disabled: i.disabled,
-          class: e.inputClasses(),
-          maxlength: e.shouldLimitMaxLength ? e.validationProps.length.max : null,
+          value: $props.modelValue,
+          name: $props.name,
+          disabled: $props.disabled,
+          class: $options.inputClasses(),
+          maxlength: $options.shouldLimitMaxLength ? $options.validationProps.length.max : null,
           "data-qa": "dt-input-input"
-        }, t.$attrs, C(e.inputListeners, !0)), null, 16, R)) : (a(), l("input", f({
+        }, _ctx.$attrs, toHandlers($options.inputListeners, true)), null, 16, _hoisted_6)) : (openBlock(), createElementBlock("input", mergeProps({
           key: 2,
           ref: "input",
-          value: i.modelValue,
-          name: i.name,
-          type: i.type,
-          disabled: i.disabled,
-          class: e.inputClasses(),
-          maxlength: e.shouldLimitMaxLength ? e.validationProps.length.max : null,
+          value: $props.modelValue,
+          name: $props.name,
+          type: $props.type,
+          disabled: $props.disabled,
+          class: $options.inputClasses(),
+          maxlength: $options.shouldLimitMaxLength ? $options.validationProps.length.max : null,
           "data-qa": "dt-input-input"
-        }, t.$attrs, C(e.inputListeners, !0)), null, 16, q)),
-        n.hasSlotContent(t.$slots.rightIcon) ? (a(), l("span", {
+        }, _ctx.$attrs, toHandlers($options.inputListeners, true)), null, 16, _hoisted_7)),
+        $data.hasSlotContent(_ctx.$slots.rightIcon) ? (openBlock(), createElementBlock("span", {
           key: 3,
-          class: u(e.inputIconClasses("right")),
+          class: normalizeClass($options.inputIconClasses("right")),
           "data-qa": "dt-input-right-icon-wrapper",
-          onFocusout: s[1] || (s[1] = (...r) => e.onBlur && e.onBlur(...r))
+          onFocusout: _cache[1] || (_cache[1] = (...args) => $options.onBlur && $options.onBlur(...args))
         }, [
-          c(t.$slots, "rightIcon")
-        ], 34)) : d("", !0)
-      ], 10, N)
-    ], 8, P),
-    T(p, f({
-      "validation-messages": e.validationMessages,
-      "show-messages": t.showMessages,
-      class: t.messagesClass
-    }, t.messagesChildProps, { "data-qa": "dt-input-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
+          renderSlot(_ctx.$slots, "rightIcon")
+        ], 34)) : createCommentVNode("", true)
+      ], 10, _hoisted_5)
+    ], 8, _hoisted_1),
+    createVNode(_component_dt_validation_messages, mergeProps({
+      "validation-messages": $options.validationMessages,
+      "show-messages": _ctx.showMessages,
+      class: _ctx.messagesClass
+    }, _ctx.messagesChildProps, { "data-qa": "dt-input-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
   ], 2);
 }
-const Y = /* @__PURE__ */ V(A, [["render", F]]);
+const DtInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  Y as DtInput,
-  h as INPUT_SIZES,
-  g as INPUT_TYPES
+  DtInput,
+  INPUT_SIZES,
+  INPUT_TYPES
 };
 //# sourceMappingURL=input.js.map