@das-fed/ui 6.4.0-test.10 → 6.4.0-test.11

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

@@ -1,18 +1,20 @@
 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 fe, mergeModels as Q, useCssVars as me, ref as l, computed as v, useModel as be, watch as V, onMounted as he, onBeforeUnmount as ye, openBlock as b, createElementBlock as L, normalizeClass as Le, createCommentVNode as $, createVNode as X, unref as Y, withCtx as Ee, mergeProps as Be, Fragment as ee, createElementVNode as I, normalizeStyle as E, toDisplayString as P, createBlock as ge, Teleport as Me, nextTick as te } from "vue";
+import { withInstall as Se } from "@das-fed/utils/with-install/index";
+import { getVarValue as oe, setThemeRule as Te } from "@das-fed/web/packages/theme/index";
+import { ElInputNumber as xe } from "element-plus";
 import "element-plus/es/components/input-number/style/css";
-const Le = {
+import { DasTooltip as Ve } from "@das-fed/ui/packages/components/tooltip/index";
+import { calcTextWidth as Ie } from "@das-fed/utils/common-tools";
+const ke = {
   key: 0,
   class: "das-input-number-error-label-content"
-}, Ee = {
+}, _e = {
   inheritAttrs: !1
-}, ge = /* @__PURE__ */ ne({
-  ...Ee,
+}, we = /* @__PURE__ */ fe({
+  ..._e,
   __name: "App",
-  props: /* @__PURE__ */ K({
+  props: /* @__PURE__ */ Q({
     modelValue: { default: 0 },
     placeholder: {},
     size: { default: "default" },
@@ -26,188 +28,236 @@ 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
+  emits: /* @__PURE__ */ Q(["update:modelValue", "input", "change"], ["update:modelValue"]),
+  setup(h, { expose: k, emit: B }) {
+    me((e) => ({
+      "15e871e2": ne.value,
+      dac3be04: re.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 = h, y = B, n = l(null), u = l(null), z = l(null), g = v(() => o.isView || o.disabled), r = be(h, "modelValue"), M = v(() => g.value ? o.noSetDefaultVal ? "" : "-" : o.placeholder ?? ""), ne = v(() => o.width ? o.width : o.controlsPosition ? o.baseLine ? "230px" : "80px" : "100px"), re = v(() => {
+      if (o.size === "default")
+        return o.controlsPosition === "right" && o.baseLine ? "25px" : "28px";
+      if (o.size === "table") return "30px";
+    }), c = l(!1), le = v(
+      () => !r.value && typeof r.value != "number" ? M.value : r.value
+    ), S = v(() => {
+      var e;
+      return u.value ? (e = u.value.$el) == null ? void 0 : e.querySelector(".el-input__inner") : null;
+    }), N = () => {
+      const e = o.size === "table" ? 12 : 14;
+      return Ie(M.value, e);
+    }, p = l(0), f = l(0);
+    V(
+      () => S.value,
+      (e) => {
+        setTimeout(() => {
+          const t = e;
+          t && (p.value = (t == null ? void 0 : t.offsetWidth) ?? 0, f.value = !r.value && typeof r.value != "number" ? N() : t == null ? void 0 : t.scrollWidth);
+        }, 200);
+      }
+    ), V(() => [r.value, M.value], () => {
+      te(() => {
+        var e, t;
+        S.value && (p.value = ((e = S.value) == null ? void 0 : e.offsetWidth) ?? 0, f.value = !r.value && typeof r.value != "number" ? N() : (t = S.value) == null ? void 0 : t.scrollWidth, (p.value === f.value || f.value - p.value < 1) && (c.value = !1));
+      });
+    }), V(
+      () => {
+        var e;
+        return (e = z.value) == null ? void 0 : e.$tooltipRef.popperRef.contentRef;
+      },
+      (e) => {
+        e && (e.addEventListener("mouseenter", function() {
+          c.value = !0, m.value && clearTimeout(m.value);
+        }), e.addEventListener("mouseleave", function() {
+          m.value = setTimeout(() => {
+            c.value = !1;
+          }, 200);
+        }));
+      }
+    );
+    const ae = (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");
-    }, P = () => {
-      o.value.classList.contains("increase-btn-hover") && o.value.classList.remove("increase-btn-hover");
-    }, L = i(!1), E = i({
+    }, ue = (e) => {
+      !e && e !== 0 && (r.value = e), y("input", e);
+    }, se = (e, t) => {
+      y("change", e, t);
+    }, _ = l(r.value), ie = () => {
+      _.value !== r.value && (y("change", r.value, _.value), _.value = r.value);
+    }, D = () => {
+      o.error || n.value.classList.add("input-inner-hover");
+    }, W = () => {
+      n.value.classList.contains("input-inner-hover") && n.value.classList.remove("input-inner-hover");
+    }, q = () => {
+      o.error || n.value.classList.add("decrease-btn-hover");
+    }, C = () => {
+      n.value.classList.contains("decrease-btn-hover") && n.value.classList.remove("decrease-btn-hover");
+    }, R = () => {
+      o.error || n.value.classList.add("increase-btn-hover");
+    }, A = () => {
+      n.value.classList.contains("increase-btn-hover") && n.value.classList.remove("increase-btn-hover");
+    }, T = l(!1), x = l({
       x: 0,
       y: 0
-    }), N = i(0), $ = c(() => ({
+    }), H = l(0), F = v(() => ({
       "font-size": "12px",
-      "background-color": O("--das-ui-input-number-overlay-error-bg-color").value,
+      "background-color": oe("--das-ui-color-overlay-error").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
+      "z-index": o.errorModelZIndex
       // 'word-break': 'break-all',
-    })), te = c(() => ({
-      ...$.value,
-      width: N.value + "px",
+    })), de = v(() => ({
+      ...F.value,
+      width: H.value + "px",
       position: "fixed",
       visibility: "visible",
-      top: E.value.y + "px",
-      left: E.value.x + "px"
-    })), x = i({
+      top: x.value.y + "px",
+      left: x.value.x + "px"
+    })), w = l({
       display: "block",
-      color: O("--das-ui-input-error-color").value,
+      color: oe("--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;
-    }, D = () => {
-      L.value = !1;
-    }, q = () => {
+    }), ve = () => {
+      var s, i, d, j, G, J;
+      H.value = (i = (s = u.value) == null ? void 0 : s.$el) == null ? void 0 : i.clientWidth;
+      const { top: e = 0, left: t = 0 } = ((j = (d = u.value) == null ? void 0 : d.$el) == null ? void 0 : j.getBoundingClientRect()) ?? {}, a = (J = (G = u.value) == null ? void 0 : G.$el) == null ? void 0 : J.clientHeight;
+      x.value.x = t, x.value.y = e + a;
+    }, m = l(), K = () => {
+      p.value === f.value || f.value - p.value < 1 ? c.value = !1 : (c.value = !0, m.value && clearTimeout(m.value)), o.errorMode === "overlay" && (ve(), T.value = !0);
+    }, U = () => {
+      m.value = setTimeout(() => {
+        c.value = !1;
+      }, 200), o.errorMode === "overlay" && (T.value = !1);
+    }, ce = () => {
       var e, t;
-      (e = l.value) == null || e.$el.addEventListener("mouseenter", z), (t = l.value) == null || t.$el.addEventListener("mouseleave", D);
-    }, C = () => {
+      (e = u.value) == null || e.$el.addEventListener("mouseenter", K), (t = u.value) == null || t.$el.addEventListener("mouseleave", U);
+    }, pe = () => {
       var e, t;
-      (e = l.value) == null || e.$el.removeEventListener("mouseenter", z), (t = l.value) == null || t.$el.removeEventListener("mouseleave", D);
-    }, 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));
+      (e = u.value) == null || e.$el.removeEventListener("mouseenter", K), (t = u.value) == null || t.$el.removeEventListener("mouseleave", U);
+    }, Z = () => {
+      g.value || te(() => {
+        var s, i, d;
+        const e = (s = n.value) == null ? void 0 : s.querySelector(".el-input__inner");
+        e && (e.addEventListener("mouseenter", D), e.addEventListener("mouseleave", W));
+        const t = (i = n.value) == null ? void 0 : i.querySelector(".el-input-number__decrease");
+        t && (t.addEventListener("mouseenter", q), t.addEventListener("mouseleave", C));
+        const a = (d = n.value) == null ? void 0 : d.querySelector(".el-input-number__increase");
+        a && (a.addEventListener("mouseenter", R), a.addEventListener("mouseleave", A));
       });
-    }, 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));
+    }, O = () => {
+      var s, i, d;
+      const e = (s = n.value) == null ? void 0 : s.querySelector(".el-input__inner");
+      e && (e.removeEventListener("mouseenter", D), e.removeEventListener("mouseleave", W));
+      const t = (i = n.value) == null ? void 0 : i.querySelector(".el-input-number__decrease");
+      t && (t.removeEventListener("mouseenter", q), t.removeEventListener("mouseleave", C));
+      const a = (d = n.value) == null ? void 0 : d.querySelector(".el-input-number__increase");
+      a && (a.removeEventListener("mouseenter", R), a.removeEventListener("mouseleave", A));
     };
-    return U(
-      () => h.value,
+    return V(
+      () => g.value,
       (e) => {
         if (e) {
-          if (r.controlsPosition === "right") return;
-          T();
+          if (o.controlsPosition === "right") return;
+          O();
         } else {
-          if (r.controlsPosition === "right") return;
-          F();
+          if (o.controlsPosition === "right") return;
+          Z();
         }
       }
-    ), U(
-      () => r.errorMode,
-      (e) => {
-        e === "overlay" && q(), e === "default" && C();
-      }
-    ), ae(() => {
-      r.errorMode === "overlay" && q(), r.controlsPosition !== "right" && F();
-    }), ue(() => {
-      r.errorMode === "overlay" && C(), r.controlsPosition !== "right" && T();
-    }), M({
-      $elInputNumber: l
-    }), (e, t) => (v(), m(
+    ), he(() => {
+      ce(), o.controlsPosition !== "right" && Z();
+    }), ye(() => {
+      pe(), o.controlsPosition !== "right" && O();
+    }), k({
+      $elInputNumber: u
+    }), (e, t) => (b(), L(
       "div",
       {
         ref_key: "$inputNumber",
-        ref: o,
-        class: ie([
+        ref: n,
+        class: Le([
           "das-ui-input-number",
           e.controlsPosition === "" ? "default" : e.baseLine ? "base-line" : "controls-right",
           e.isView ? "is-view" : "",
           e.disabled ? "is-disabled" : "",
-          e.noSetDefaultVal ? "nodefault" : ""
+          e.noSetDefaultVal ? "nodefault" : "",
+          `size-${e.size}`
         ])
       },
       [
-        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,
+        $(" 这里tooltip不能使用v-model:visible 有响应问题 "),
+        X(Y(Ve), {
+          ref_key: "inputTooltipRef",
+          ref: z,
+          effect: "light",
+          placement: "top",
+          manual: !0,
+          visible: c.value,
+          disabled: e.disabledTooltip,
+          content: le.value
+        }, {
+          default: Ee(() => [
+            X(Y(xe), Be({
+              ref_key: "$elInputNumber",
+              ref: u,
+              class: { "das-input-number-error": e.error },
+              modelValue: r.value,
+              "onUpdate:modelValue": t[0] || (t[0] = (a) => r.value = a),
+              readonly: g.value,
+              "controls-position": e.controlsPosition,
+              placeholder: M.value
+            }, e.$attrs, {
+              onKeydown: ae,
+              onInput: ue,
+              onBlur: ie,
+              onChange: se
+            }), null, 16, ["class", "modelValue", "readonly", "controls-position", "placeholder"])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["visible", "disabled", "content"]),
+        e.error && e.errorLabel ? (b(), L(
+          ee,
           { key: 0 },
           [
-            e.errorMode === "default" ? (v(), m("div", Le, [
-              g(
+            e.errorMode === "default" ? (b(), L("div", ke, [
+              I(
                 "span",
                 {
-                  style: b(x.value)
+                  style: E(w.value)
                 },
-                V(e.errorLabel),
+                P(e.errorLabel),
                 5
                 /* TEXT, STYLE */
               )
-            ])) : L.value ? (v(), m(
-              W,
+            ])) : T.value ? (b(), L(
+              ee,
               { key: 1 },
               [
-                L.value ? (v(), pe(fe, {
+                T.value ? (b(), ge(Me, {
                   key: 0,
                   to: "body"
                 }, [
-                  g(
+                  I(
                     "div",
                     {
-                      style: b(te.value)
+                      style: E(de.value)
                     },
                     [
-                      g(
+                      I(
                         "span",
                         {
-                          style: b(x.value)
+                          style: E(w.value)
                         },
-                        V(e.errorLabel),
+                        P(e.errorLabel),
                         5
                         /* TEXT, STYLE */
                       )
@@ -215,20 +265,20 @@ const Le = {
                     4
                     /* STYLE */
                   )
-                ])) : (v(), m(
+                ])) : (b(), L(
                   "div",
                   {
                     key: 1,
-                    style: b($.value),
+                    style: E(F.value),
                     class: "das-input-number-overlay-error-label-content"
                   },
                   [
-                    g(
+                    I(
                       "span",
                       {
-                        style: b(x.value)
+                        style: E(w.value)
                       },
-                      V(e.errorLabel),
+                      P(e.errorLabel),
                       5
                       /* TEXT, STYLE */
                     )
@@ -239,22 +289,22 @@ const Le = {
               ],
               64
               /* STABLE_FRAGMENT */
-            )) : Z("v-if", !0)
+            )) : $("v-if", !0)
           ],
           64
           /* STABLE_FRAGMENT */
-        )) : Z("v-if", !0)
+        )) : $("v-if", !0)
       ],
       2
       /* CLASS */
     ));
   }
-}), 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 = {
+}), $e = (h, k) => {
+  const B = h.__vccOpts || h;
+  for (const [o, y] of k)
+    B[o] = y;
+  return B;
+}, Pe = /* @__PURE__ */ $e(we, [["__scopeId", "data-v-547b3093"]]), ze = {
   "--das-ui-input-number-border-view-color": "#E5E5E5",
   "--das-ui-input-number-color": "#212121",
   "--das-ui-input-number-border-color": "#D9D9D9",
@@ -263,12 +313,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 步进器" };
+Te(ze);
+const Fe = Se(Pe), Ke = () => l(null), Ue = { name: "input-number 步进器" };
 export {
-  _e as DasInputNumber,
-  Pe as DasInputNumberRef,
-  Ne as default
+  Fe as DasInputNumber,
+  Ke as DasInputNumberRef,
+  Ue as default
 };