@das-fed/ui 6.4.0-hot.32 → 6.4.0-hot.34

package/packages/components/input-number/index.js

@@ -1,16 +1,19 @@
 import '@das-fed/ui/packages/components/input-number/style.css';
-import { defineComponent as ne, mergeModels as K, useCssVars as le, ref as i, computed as c, useModel as se, watch as U, onMounted as ae, onBeforeUnmount as ue, openBlock as v, createElementBlock as m, normalizeClass as ie, createVNode as de, unref as ce, mergeProps as ve, Fragment as W, createElementVNode as g, normalizeStyle as b, toDisplayString as V, createBlock as pe, Teleport as fe, createCommentVNode as Z, nextTick as me } from "vue";
-import { withInstall as be } from "@das-fed/utils/with-install/index";
-import { getVarValue as O, setThemeRule as ye } from "@das-fed/web/packages/theme/index";
-import { ElInputNumber as he } from "element-plus";
+import { defineComponent as oe, mergeModels as K, useCssVars as re, ref as l, computed as c, useModel as ne, watch as g, onMounted as le, onBeforeUnmount as ue, openBlock as V, createElementBlock as T, normalizeClass as ae, createVNode as O, unref as _, withCtx as se, mergeProps as ie, Fragment as de, createElementVNode as ve, normalizeStyle as ce, toDisplayString as fe, createCommentVNode as k, createBlock as pe, nextTick as U } from "vue";
+import { withInstall as me } from "@das-fed/utils/with-install/index";
+import { getVarValue as be, setThemeRule as he } from "@das-fed/web/packages/theme/index";
+import { ElInputNumber as Le } from "element-plus";
 import "element-plus/es/components/input-number/style/css";
-const Le = {
+import { DasTooltip as ye } from "@das-fed/ui/packages/components/tooltip/index";
+import { DasErrorOverlayModel as Ee } from "@das-fed/ui/packages/components/error-overlay-model/index";
+import { calcTextWidth as Be } from "@das-fed/utils/common-tools";
+const ge = {
   key: 0,
   class: "das-input-number-error-label-content"
-}, Ee = {
+}, Ve = {
   inheritAttrs: !1
-}, ge = /* @__PURE__ */ ne({
-  ...Ee,
+}, Me = /* @__PURE__ */ oe({
+  ...Ve,
   __name: "App",
   props: /* @__PURE__ */ K({
     modelValue: { default: 0 },
@@ -26,235 +29,195 @@ const Le = {
     errorLabel: { default: "" },
     teleported: { type: Boolean, default: !0 },
     errorModelZIndex: { default: 2e3 },
-    noSetDefaultVal: { type: Boolean }
+    noSetDefaultVal: { type: Boolean },
+    disabledTooltip: { type: Boolean }
   }, {
     modelValue: { type: Number, default: 0 },
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ K(["update:modelValue", "input", "change"], ["update:modelValue"]),
-  setup(p, { expose: M, emit: y }) {
-    le((e) => ({
-      b6ffc00e: Q.value,
-      "3b199946": G.value,
-      "52243e70": J.value
+  setup(f, { expose: M, emit: L }) {
+    re((e) => ({
+      "03ee5f88": x.value,
+      ad7b851e: Z.value
     }));
-    const r = p, f = y, o = i(null), l = i(null), h = c(() => r.isView || r.disabled), d = se(p, "modelValue"), j = c(() => h.value ? r.noSetDefaultVal ? "" : "-" : r.placeholder ?? ""), G = c(() => r.width ? r.width : r.controlsPosition ? r.baseLine ? "230px" : "80px" : "100px"), J = c(() => {
-      if (r.size === "default")
-        return r.controlsPosition === "right" && r.baseLine ? "25px" : "28px";
-      if (r.size === "table") return "30px";
-    }), Q = c(() => {
-      if (r.size === "default") return "14px";
-      if (r.size === "table") return "12px";
-    }), X = (e) => {
+    const o = f, p = L, r = l(null), a = l(null), w = l(null), y = c(() => o.isView || o.disabled), n = ne(f, "modelValue"), E = c(() => y.value ? o.noSetDefaultVal ? "" : "-" : o.placeholder ?? ""), x = c(() => o.width ? o.width : o.controlsPosition ? o.baseLine ? "230px" : "80px" : "100px"), Z = c(() => {
+      if (o.size === "default")
+        return o.controlsPosition === "right" && o.baseLine ? "25px" : "28px";
+      if (o.size === "table") return "30px";
+    }), s = l(!1), j = c(
+      () => !n.value && typeof n.value != "number" ? E.value : n.value
+    ), B = c(() => {
+      var e;
+      return a.value ? (e = a.value.$el) == null ? void 0 : e.querySelector(".el-input__inner") : null;
+    }), $ = () => {
+      const e = o.size === "table" ? 12 : 14;
+      return Be(E.value, e);
+    }, i = l(0), d = l(0);
+    g(
+      () => B.value,
+      (e) => {
+        setTimeout(() => {
+          const t = e;
+          t && (i.value = (t == null ? void 0 : t.offsetWidth) ?? 0, d.value = !n.value && typeof n.value != "number" ? $() : t == null ? void 0 : t.scrollWidth);
+        }, 200);
+      }
+    );
+    const N = () => {
+      U(() => {
+        var e, t;
+        B.value && (i.value = ((e = B.value) == null ? void 0 : e.offsetWidth) ?? 0, d.value = !n.value && typeof n.value != "number" ? $() : (t = B.value) == null ? void 0 : t.scrollWidth, (i.value === d.value || d.value - i.value < 1) && (s.value = !1));
+      });
+    };
+    g(() => [n.value, E.value], N), g(
+      () => {
+        var e;
+        return (e = w.value) == null ? void 0 : e.$tooltipRef.popperRef.contentRef;
+      },
+      (e) => {
+        e && (e.addEventListener("mouseenter", function() {
+          s.value = !0, v.value && clearTimeout(v.value);
+        }), e.addEventListener("mouseleave", function() {
+          v.value = setTimeout(() => {
+            s.value = !1;
+          }, 200);
+        }));
+      }
+    );
+    const G = (e) => {
       const t = e.code;
       return ["KeyE", "Equal", "Minus"].includes(t) ? (e.returnValue = !1, !1) : !0;
-    }, Y = (e) => {
-      !e && e !== 0 && (d.value = e), f("input", e);
-    }, ee = (e, t) => {
-      f("change", e, t);
-    }, B = i(d.value), re = () => {
-      B.value !== d.value && (f("change", d.value, B.value), B.value = d.value);
-    }, I = () => {
-      r.error || o.value.classList.add("input-inner-hover");
-    }, S = () => {
-      o.value.classList.contains("input-inner-hover") && o.value.classList.remove("input-inner-hover");
-    }, k = () => {
-      r.error || o.value.classList.add("decrease-btn-hover");
-    }, w = () => {
-      o.value.classList.contains("decrease-btn-hover") && o.value.classList.remove("decrease-btn-hover");
-    }, _ = () => {
-      r.error || o.value.classList.add("increase-btn-hover");
+    }, J = (e) => {
+      !e && e !== 0 && (n.value = e), p("input", e);
+    }, Q = (e, t) => {
+      p("change", e, t);
+    }, I = l(n.value), X = () => {
+      I.value !== n.value && (p("change", n.value, I.value), I.value = n.value);
     }, P = () => {
-      o.value.classList.contains("increase-btn-hover") && o.value.classList.remove("increase-btn-hover");
-    }, L = i(!1), E = i({
-      x: 0,
-      y: 0
-    }), N = i(0), $ = c(() => ({
-      "font-size": "12px",
-      "background-color": O("--das-ui-input-number-overlay-error-bg-color").value,
-      "box-shadow": "0px 4px 10px 0px rgba(0, 0, 0, 0.2)",
-      "border-radius": "1px",
-      padding: "2px 8px",
-      "box-sizing": "border-box",
-      "z-index": r.errorModelZIndex
-      // 'word-break': 'break-all',
-    })), te = c(() => ({
-      ...$.value,
-      width: N.value + "px",
-      position: "fixed",
-      visibility: "visible",
-      top: E.value.y + "px",
-      left: E.value.x + "px"
-    })), x = i({
-      display: "block",
-      color: O("--das-ui-input-error-color").value,
-      "white-space": "break-spaces"
-    }), oe = () => {
-      var s, a, u, A, R, H;
-      N.value = (a = (s = l.value) == null ? void 0 : s.$el) == null ? void 0 : a.clientWidth;
-      const { top: e = 0, left: t = 0 } = ((A = (u = l.value) == null ? void 0 : u.$el) == null ? void 0 : A.getBoundingClientRect()) ?? {}, n = (H = (R = l.value) == null ? void 0 : R.$el) == null ? void 0 : H.clientHeight;
-      E.value.x = t, E.value.y = e + n;
-    }, z = () => {
-      oe(), L.value = !0;
+      o.error || r.value.classList.add("input-inner-hover");
     }, D = () => {
-      L.value = !1;
+      r.value.classList.contains("input-inner-hover") && r.value.classList.remove("input-inner-hover");
+    }, z = () => {
+      o.error || r.value.classList.add("decrease-btn-hover");
     }, q = () => {
-      var e, t;
-      (e = l.value) == null || e.$el.addEventListener("mouseenter", z), (t = l.value) == null || t.$el.addEventListener("mouseleave", D);
+      r.value.classList.contains("decrease-btn-hover") && r.value.classList.remove("decrease-btn-hover");
+    }, W = () => {
+      o.error || r.value.classList.add("increase-btn-hover");
     }, C = () => {
+      r.value.classList.contains("increase-btn-hover") && r.value.classList.remove("increase-btn-hover");
+    }, S = l(!1), Y = l({
+      display: "block",
+      color: be("--das-ui-input-error-color").value,
+      "white-space": "break-spaces"
+    }), v = l(), R = () => {
+      N(), i.value === d.value || d.value - i.value < 1 ? s.value = !1 : (s.value = !0, v.value && clearTimeout(v.value)), o.errorMode === "overlay" && (S.value = !0);
+    }, A = () => {
+      v.value = setTimeout(() => {
+        o.errorMode === "overlay" ? S.value = !1 : s.value = !1;
+      }, 200);
+    }, ee = () => {
       var e, t;
-      (e = l.value) == null || e.$el.removeEventListener("mouseenter", z), (t = l.value) == null || t.$el.removeEventListener("mouseleave", D);
+      (e = a.value) == null || e.$el.addEventListener("mouseenter", R), (t = a.value) == null || t.$el.addEventListener("mouseleave", A);
+    }, te = () => {
+      var e, t;
+      (e = a.value) == null || e.$el.removeEventListener("mouseenter", R), (t = a.value) == null || t.$el.removeEventListener("mouseleave", A);
     }, F = () => {
-      h.value || me(() => {
-        var s, a, u;
-        const e = (s = o.value) == null ? void 0 : s.querySelector(".el-input__inner");
-        e && (e.addEventListener("mouseenter", I), e.addEventListener("mouseleave", S));
-        const t = (a = o.value) == null ? void 0 : a.querySelector(".el-input-number__decrease");
-        t && (t.addEventListener("mouseenter", k), t.addEventListener("mouseleave", w));
-        const n = (u = o.value) == null ? void 0 : u.querySelector(".el-input-number__increase");
-        n && (n.addEventListener("mouseenter", _), n.addEventListener("mouseleave", P));
+      y.value || U(() => {
+        var m, b, h;
+        const e = (m = r.value) == null ? void 0 : m.querySelector(".el-input__inner");
+        e && (e.addEventListener("mouseenter", P), e.addEventListener("mouseleave", D));
+        const t = (b = r.value) == null ? void 0 : b.querySelector(".el-input-number__decrease");
+        t && (t.addEventListener("mouseenter", z), t.addEventListener("mouseleave", q));
+        const u = (h = r.value) == null ? void 0 : h.querySelector(".el-input-number__increase");
+        u && (u.addEventListener("mouseenter", W), u.addEventListener("mouseleave", C));
       });
-    }, T = () => {
-      var s, a, u;
-      const e = (s = o.value) == null ? void 0 : s.querySelector(".el-input__inner");
-      e && (e.removeEventListener("mouseenter", I), e.removeEventListener("mouseleave", S));
-      const t = (a = o.value) == null ? void 0 : a.querySelector(".el-input-number__decrease");
-      t && (t.removeEventListener("mouseenter", k), t.removeEventListener("mouseleave", w));
-      const n = (u = o.value) == null ? void 0 : u.querySelector(".el-input-number__increase");
-      n && (n.removeEventListener("mouseenter", _), n.removeEventListener("mouseleave", P));
+    }, H = () => {
+      var m, b, h;
+      const e = (m = r.value) == null ? void 0 : m.querySelector(".el-input__inner");
+      e && (e.removeEventListener("mouseenter", P), e.removeEventListener("mouseleave", D));
+      const t = (b = r.value) == null ? void 0 : b.querySelector(".el-input-number__decrease");
+      t && (t.removeEventListener("mouseenter", z), t.removeEventListener("mouseleave", q));
+      const u = (h = r.value) == null ? void 0 : h.querySelector(".el-input-number__increase");
+      u && (u.removeEventListener("mouseenter", W), u.removeEventListener("mouseleave", C));
     };
-    return U(
-      () => h.value,
+    return g(
+      () => y.value,
       (e) => {
         if (e) {
-          if (r.controlsPosition === "right") return;
-          T();
+          if (o.controlsPosition === "right") return;
+          H();
         } else {
-          if (r.controlsPosition === "right") return;
+          if (o.controlsPosition === "right") return;
           F();
         }
       }
-    ), U(
-      () => r.errorMode,
-      (e) => {
-        e === "overlay" && q(), e === "default" && C();
-      }
-    ), ae(() => {
-      r.errorMode === "overlay" && q(), r.controlsPosition !== "right" && F();
+    ), le(() => {
+      ee(), o.controlsPosition !== "right" && F();
     }), ue(() => {
-      r.errorMode === "overlay" && C(), r.controlsPosition !== "right" && T();
+      te(), o.controlsPosition !== "right" && H();
     }), M({
-      $elInputNumber: l
-    }), (e, t) => (v(), m(
-      "div",
-      {
-        ref_key: "$inputNumber",
-        ref: o,
-        class: ie([
-          "das-ui-input-number",
-          e.controlsPosition === "" ? "default" : e.baseLine ? "base-line" : "controls-right",
-          e.isView ? "is-view" : "",
-          e.disabled ? "is-disabled" : "",
-          e.noSetDefaultVal ? "nodefault" : ""
-        ])
-      },
-      [
-        de(ce(he), ve({
-          ref_key: "$elInputNumber",
-          ref: l,
-          class: { "das-input-number-error": e.error },
-          modelValue: d.value,
-          "onUpdate:modelValue": t[0] || (t[0] = (n) => d.value = n),
-          readonly: h.value,
-          "controls-position": e.controlsPosition,
-          placeholder: j.value
-        }, e.$attrs, {
-          onKeydown: X,
-          onInput: Y,
-          onBlur: re,
-          onChange: ee
-        }), null, 16, ["class", "modelValue", "readonly", "controls-position", "placeholder"]),
-        e.error && e.errorLabel ? (v(), m(
-          W,
-          { key: 0 },
-          [
-            e.errorMode === "default" ? (v(), m("div", Le, [
-              g(
-                "span",
-                {
-                  style: b(x.value)
-                },
-                V(e.errorLabel),
-                5
-                /* TEXT, STYLE */
-              )
-            ])) : L.value ? (v(), m(
-              W,
-              { key: 1 },
-              [
-                L.value ? (v(), pe(fe, {
-                  key: 0,
-                  to: "body"
-                }, [
-                  g(
-                    "div",
-                    {
-                      style: b(te.value)
-                    },
-                    [
-                      g(
-                        "span",
-                        {
-                          style: b(x.value)
-                        },
-                        V(e.errorLabel),
-                        5
-                        /* TEXT, STYLE */
-                      )
-                    ],
-                    4
-                    /* STYLE */
-                  )
-                ])) : (v(), m(
-                  "div",
-                  {
-                    key: 1,
-                    style: b($.value),
-                    class: "das-input-number-overlay-error-label-content"
-                  },
-                  [
-                    g(
-                      "span",
-                      {
-                        style: b(x.value)
-                      },
-                      V(e.errorLabel),
-                      5
-                      /* TEXT, STYLE */
-                    )
-                  ],
-                  4
-                  /* STYLE */
-                ))
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            )) : Z("v-if", !0)
-          ],
-          64
-          /* STABLE_FRAGMENT */
-        )) : Z("v-if", !0)
-      ],
-      2
-      /* CLASS */
-    ));
+      $elInputNumber: a
+    }), (e, t) => (V(), T("div", {
+      ref_key: "$inputNumber",
+      ref: r,
+      class: ae([
+        "das-ui-input-number",
+        e.controlsPosition === "" ? "default" : e.baseLine ? "base-line" : "controls-right",
+        e.isView ? "is-view" : "",
+        e.disabled ? "is-disabled" : "",
+        e.noSetDefaultVal ? "nodefault" : "",
+        `size-${e.size}`
+      ])
+    }, [
+      O(_(ye), {
+        ref_key: "inputTooltipRef",
+        ref: w,
+        effect: "light",
+        placement: "top",
+        manual: !0,
+        visible: s.value,
+        disabled: e.disabledTooltip,
+        content: j.value
+      }, {
+        default: se(() => [
+          O(_(Le), ie({
+            ref_key: "$elInputNumber",
+            ref: a,
+            class: { "das-input-number-error": e.error },
+            modelValue: n.value,
+            "onUpdate:modelValue": t[0] || (t[0] = (u) => n.value = u),
+            readonly: y.value,
+            "controls-position": e.controlsPosition,
+            placeholder: E.value
+          }, e.$attrs, {
+            onKeydown: G,
+            onInput: J,
+            onBlur: X,
+            onChange: Q
+          }), null, 16, ["class", "modelValue", "readonly", "controls-position", "placeholder"])
+        ]),
+        _: 1
+      }, 8, ["visible", "disabled", "content"]),
+      e.error && e.errorLabel ? (V(), T(de, { key: 0 }, [
+        e.errorMode === "default" ? (V(), T("div", ge, [
+          ve("span", {
+            style: ce(Y.value)
+          }, fe(e.errorLabel), 5)
+        ])) : k("", !0),
+        e.errorMode === "overlay" && S.value ? (V(), pe(_(Ee), {
+          key: 1,
+          errorLabel: e.errorLabel,
+          getEl: () => a.value.$el
+        }, null, 8, ["errorLabel", "getEl"])) : k("", !0)
+      ], 64)) : k("", !0)
+    ], 2));
   }
-}), Me = (p, M) => {
-  const y = p.__vccOpts || p;
-  for (const [r, f] of M)
-    y[r] = f;
-  return y;
-}, Be = /* @__PURE__ */ Me(ge, [["__scopeId", "data-v-99afc0cd"]]), xe = {
+}), Ie = (f, M) => {
+  const L = f.__vccOpts || f;
+  for (const [o, p] of M)
+    L[o] = p;
+  return L;
+}, Se = /* @__PURE__ */ Ie(Me, [["__scopeId", "data-v-9144fbdd"]]), Te = {
   "--das-ui-input-number-border-view-color": "#E5E5E5",
   "--das-ui-input-number-color": "#212121",
   "--das-ui-input-number-border-color": "#D9D9D9",
@@ -263,12 +226,12 @@ const Le = {
   "--das-ui-input-number-active-color": "#5582F3",
   "--das-ui-input-number-disabled-color": "#B2B2B2",
   "--das-ui-input-number-overlay-error-color": "#FB2323",
-  "--das-ui-input-number-overlay-error-bg-color": "#FFDBE0"
+  "--das-ui-input-number-default-placeholder-color": "#B2B2B2"
 };
-ye(xe);
-const _e = be(Be), Pe = () => i(null), Ne = { name: "input-number 步进器" };
+he(Te);
+const qe = me(Se), We = () => l(null), Ce = { name: "input-number 步进器" };
 export {
-  _e as DasInputNumber,
-  Pe as DasInputNumberRef,
-  Ne as default
+  qe as DasInputNumber,
+  We as DasInputNumberRef,
+  Ce as default
 };