x-next 1.1.0 → 1.2.0

package/dist/es/components/form-switch/Switch.vue2.js

@@ -1,14 +1,14 @@
-import { defineComponent as D, toRefs as I, ref as m, computed as i, watch as M, onMounted as $, nextTick as H } from "vue";
-import K from "../../icons/animation/animation-loading.js";
-import { useFormItem as U } from "../../_hooks/use-form-item.js";
-import { useSize as j } from "../../_hooks/use-size.js";
-import { isUndefined as q, isNull as E, isFunction as G } from "../../_utils/is.js";
-import { getClassNameMixin as J } from "../../_utils/config.js";
-const p = D({
+import { defineComponent as $, toRefs as q, ref as k, computed as r, onBeforeUnmount as H, watch as K, onMounted as j, nextTick as E } from "vue";
+import G from "../../icons/animation/animation-loading.js";
+import { useFormItem as J, useFormItemControl as O } from "../../_hooks/use-form-item.js";
+import { useSize as P } from "../../_hooks/use-size.js";
+import { isUndefined as Q, isNull as W, isFunction as X } from "../../_utils/is.js";
+import { getClassNameMixin as Y } from "../../_utils/config.js";
+const ne = $({
   name: "Switch",
   inheritAttrs: !1,
   components: {
-    IconLoading: K
+    IconLoading: G
   },
   props: {
     /**
@@ -135,7 +135,7 @@ const p = D({
      * @param { boolean | string | number } value
      * @param {Event} ev
      */
-    change: (e, a) => !0,
+    change: (e, n) => !0,
     /**
      * @zh 组件获得焦点时触发
      * @en Triggered when the component gets focus
@@ -154,7 +154,7 @@ const p = D({
      * @param { boolean | string | number } value
      * @param {MouseEvent} ev
      */
-    click: (e, a) => !0
+    click: (e, n) => !0
   },
   /**
    * @zh 打开状态时的文案（`type='line'`时不生效）
@@ -176,100 +176,107 @@ const p = D({
    * @en The icon on the button when closed
    * @slot unchecked-icon
    */
-  setup(e, { emit: a, expose: V, slots: g }) {
-    const { disabled: b, size: S, modelValue: w } = I(e), u = J("switch"), {
-      mergedDisabled: r,
-      mergedSize: x,
+  setup(e, { emit: n, expose: b, slots: g, attrs: S }) {
+    const { disabled: w, size: x, modelValue: B } = q(e), c = Y("switch"), {
+      formItemCtx: z,
+      mergedDisabled: o,
+      mergedSize: A,
       eventHandlers: s
-    } = U({
-      disabled: b,
-      size: S
-    }), { mergedSize: y } = j(x), o = m(e.defaultChecked ? e.checkedValue : e.uncheckedValue), n = i(
-      () => (e.modelValue ?? o.value) === e.checkedValue
-    ), k = m(!1), f = i(() => k.value || e.loading), h = m(), B = i(
+    } = J({
+      disabled: w,
+      size: x
+    }), F = O(z, () => S, { required: !1 }), { mergedSize: y } = P(A), d = k(e.defaultChecked ? e.checkedValue : e.uncheckedValue), a = r(
+      () => (e.modelValue ?? d.value) === e.checkedValue
+    ), m = k(!1);
+    let v = !1;
+    H(() => {
+      v = !0;
+    });
+    const f = r(() => m.value || e.loading), h = k(), N = r(
       () => e.type !== "line" && y.value !== "mini" && (!!e.checkedText || !!e.uncheckedText || !!g.checked || !!g.unchecked)
-    ), v = (t, c) => {
-      var l, d;
-      o.value = t ? e.checkedValue : e.uncheckedValue, a("update:modelValue", o.value), a("change", o.value, c), (d = (l = s.value) == null ? void 0 : l.onChange) == null || d.call(l, c);
-    }, C = async (t, c) => {
-      if (f.value || r.value)
+    ), C = (t, l) => {
+      var u, i;
+      d.value = t ? e.checkedValue : e.uncheckedValue, n("update:modelValue", d.value), n("change", d.value, l), (i = (u = s.value) == null ? void 0 : u.onChange) == null || i.call(u, l);
+    }, V = async (t, l) => {
+      if (f.value || o.value)
         return;
-      const l = t ? e.checkedValue : e.uncheckedValue, d = e.beforeChange;
-      if (G(d)) {
-        k.value = !0;
+      const u = t ? e.checkedValue : e.uncheckedValue, i = e.beforeChange;
+      if (X(i)) {
+        m.value = !0;
         try {
-          (await d(l) ?? !0) && v(t, c);
+          (await i(u) ?? !0) && !o.value && !v && C(t, l);
         } catch {
         } finally {
-          k.value = !1;
+          m.value = !1;
         }
       } else
-        v(t, c);
-    }, z = async (t) => {
-      const c = n.value ? e.uncheckedValue : e.checkedValue;
-      a("click", c, t), await C(!n.value, t);
-    }, N = async (t) => {
+        C(t, l);
+    }, R = async (t) => {
+      const l = a.value ? e.uncheckedValue : e.checkedValue;
+      n("click", l, t), await V(!a.value, t);
+    }, T = async (t) => {
       if (t.key !== "ArrowLeft" && t.key !== "Left" && t.key !== "ArrowRight" && t.key !== "Right")
         return;
       t.preventDefault();
-      const c = t.key === "ArrowRight" || t.key === "Right";
-      c !== n.value && await C(c, t);
-    }, R = (t) => {
-      var c, l;
-      a("focus", t), (l = (c = s.value) == null ? void 0 : c.onFocus) == null || l.call(c, t);
-    }, T = (t) => {
-      var c, l;
-      a("blur", t), (l = (c = s.value) == null ? void 0 : c.onBlur) == null || l.call(c, t);
+      const l = t.key === "ArrowRight" || t.key === "Right";
+      l !== a.value && await V(l, t);
+    }, L = (t) => {
+      var l, u;
+      n("focus", t), (u = (l = s.value) == null ? void 0 : l.onFocus) == null || u.call(l, t);
+    }, _ = (t) => {
+      var l, u;
+      n("blur", t), (u = (l = s.value) == null ? void 0 : l.onBlur) == null || u.call(l, t);
     };
-    M(w, (t) => {
-      (q(t) || E(t)) && (o.value = e.uncheckedValue);
+    K(B, (t) => {
+      (Q(t) || W(t)) && (d.value = e.uncheckedValue);
     });
-    const A = i(() => [
-      u.block,
-      u.modifier(`type-${e.type}`),
-      u.modifier(`size-${y.value}`),
+    const I = r(() => [
+      c.block,
+      c.modifier(`type-${e.type}`),
+      c.modifier(`size-${y.value}`),
       {
-        [u.modifier("checked")]: n.value,
-        [u.modifier("disabled")]: r.value,
-        [u.modifier("loading")]: f.value,
-        [u.modifier("custom-color")]: e.type === "line" && (e.checkedColor || e.uncheckedColor)
+        [c.modifier("checked")]: a.value,
+        [c.modifier("disabled")]: o.value,
+        [c.modifier("loading")]: f.value,
+        [c.modifier("custom-color")]: e.type === "line" && (e.checkedColor || e.uncheckedColor)
       }
-    ]), F = i(() => {
-      if (n.value && e.checkedColor)
+    ]), D = r(() => {
+      if (a.value && e.checkedColor)
         return e.type === "line" ? { "--custom-color": e.checkedColor } : { backgroundColor: e.checkedColor };
-      if (!n.value && e.uncheckedColor)
+      if (!a.value && e.uncheckedColor)
         return e.type === "line" ? { "--custom-color": e.uncheckedColor } : { backgroundColor: e.uncheckedColor };
-    }), L = () => {
+    }), M = () => {
       var t;
       return (t = h.value) == null ? void 0 : t.focus();
-    }, _ = () => {
+    }, U = () => {
       var t;
       return (t = h.value) == null ? void 0 : t.blur();
     };
-    return $(() => {
-      !e.autofocus || r.value || f.value || H(() => {
+    return j(() => {
+      !e.autofocus || o.value || f.value || E(() => {
         var t;
         (t = h.value) == null || t.focus();
       });
-    }), V({
-      focus: L,
-      blur: _
+    }), b({
+      focus: M,
+      blur: U
     }), {
-      className: u,
-      cls: A,
+      formControlAttrs: F,
+      className: c,
+      cls: I,
       switchRef: h,
-      mergedDisabled: r,
-      buttonStyle: F,
-      computedCheck: n,
+      mergedDisabled: o,
+      buttonStyle: D,
+      computedCheck: a,
       computedLoading: f,
-      showText: B,
-      handleClick: z,
-      handleKeydown: N,
-      handleFocus: R,
-      handleBlur: T
+      showText: N,
+      handleClick: R,
+      handleKeydown: T,
+      handleFocus: L,
+      handleBlur: _
     };
   }
 });
 export {
-  p as default
+  ne as default
 };

package/dist/es/components/form-textarea/Textarea.vue2.js

@@ -1,20 +1,20 @@
-import { defineComponent as me, toRefs as ve, ref as s, computed as u, watch as I, onMounted as de, nextTick as D } from "vue";
-import he from "../../_container/resize-observer.js";
-import { useLocale as ge } from "../../locale/index.js";
-import Se from "../_components/icon-hover/index.vue.js";
-import ye from "../../icons/default/close-circle-fill.js";
-import { getSizeStyles as we } from "./utils.js";
-import { isUndefined as xe, isNull as pe, isObject as w, isFunction as be } from "../../_utils/is.js";
-import { omit as U } from "../../_utils/omit.js";
-import { INPUT_EVENTS as W } from "../../_utils/constant.js";
-import ze from "../../_utils/pick.js";
-import { useFormItem as Ce } from "../../_hooks/use-form-item.js";
-import { useSize as Le } from "../../_hooks/use-size.js";
-import { useCursor as Fe } from "../../_hooks/use-cursor.js";
-import { getClassNameMixin as Be } from "../../_utils/config.js";
-const De = me({
+import { defineComponent as de, toRefs as he, ref as s, computed as r, watch as z, onMounted as ge, nextTick as U } from "vue";
+import Se from "../../_container/resize-observer.js";
+import { useLocale as we } from "../../locale/index.js";
+import ye from "../_components/icon-hover/index.vue.js";
+import xe from "../../icons/default/close-circle-fill.js";
+import { getSizeStyles as ze } from "./utils.js";
+import { isUndefined as be, isNull as Ce, isObject as b, isFunction as pe } from "../../_utils/is.js";
+import { omit as W } from "../../_utils/omit.js";
+import { INPUT_EVENTS as P } from "../../_utils/constant.js";
+import Le from "../../_utils/pick.js";
+import { useFormItem as Fe, useFormItemControl as Be } from "../../_hooks/use-form-item.js";
+import { useSize as He } from "../../_hooks/use-size.js";
+import { useCursor as Ie } from "../../_hooks/use-cursor.js";
+import { getClassNameMixin as Ne } from "../../_utils/config.js";
+const Pe = de({
   name: "Textarea",
-  components: { ResizeObserver: he, IconHover: Se, IconClose: ye },
+  components: { ResizeObserver: Se, IconHover: ye, IconClose: xe },
   inheritAttrs: !1,
   props: {
     /**
@@ -123,14 +123,14 @@ const De = me({
      * @param {string} value
      * @param {Event} ev
      */
-    input: (t, c) => !0,
+    input: (t, f) => !0,
     /**
      * @zh 仅在文本框失焦时触发
      * @en Only emitted when the textarea is out of focus
      * @param {string} value
      * @param {Event} ev
      */
-    change: (t, c) => !0,
+    change: (t, f) => !0,
     /**
      * @zh 点击清除按钮时触发
      * @en Emitted when the clear button is clicked
@@ -150,134 +150,149 @@ const De = me({
      */
     blur: (t) => !0
   },
-  setup(t, { emit: c, attrs: d }) {
-    const { disabled: P, error: q, modelValue: x, size: G } = ve(t), f = Be("textarea"), {
+  setup(t, { emit: f, attrs: h }) {
+    const { disabled: q, error: G, modelValue: C, size: J } = he(t), m = Ne("textarea"), {
+      formItemCtx: K,
       mergedDisabled: p,
-      mergedError: J,
-      mergedSize: K,
-      eventHandlers: m
-    } = Ce({ disabled: P, error: q, size: G }), { t: Q } = ge(), { mergedSize: X } = Le(K), r = s(), O = s(), h = s(), T = s(), b = s(t.defaultValue), n = u(() => x.value ?? b.value), [Y, Z] = Fe(r);
-    I(x, (e) => {
-      (xe(e) || pe(e)) && (b.value = "");
+      mergedError: Q,
+      mergedSize: X,
+      eventHandlers: v
+    } = Fe({ disabled: q, error: G, size: J }), { t: Y } = we(), { mergedSize: _ } = He(X), o = s(), L = s(), c = s(), F = s(), B = s(t.defaultValue), n = r(() => C.value ?? B.value), [Z, ee] = Ie(o);
+    z(C, (e) => {
+      (be(e) || Ce(e)) && (B.value = "");
     });
-    const g = u(
-      () => w(t.maxLength) && !!t.maxLength.errorOnly
-    ), o = u(() => w(t.maxLength) ? t.maxLength.length : t.maxLength), S = (e) => be(t.wordLength) ? t.wordLength(e) : Array.from(e).length, E = u(() => S(n.value)), _ = u(
-      () => J.value || !!(o.value && g.value && E.value > o.value)
-    ), v = s(!1), z = s(!1), j = u(
+    const g = r(
+      () => b(t.maxLength) && !!t.maxLength.errorOnly
+    ), u = r(() => b(t.maxLength) ? t.maxLength.length : t.maxLength), S = (e) => pe(t.wordLength) ? t.wordLength(e) : Array.from(e).length, j = r(() => S(n.value)), M = r(
+      () => Q.value || !!(u.value && g.value && j.value > u.value)
+    ), d = s(!1), H = s(!1), $ = r(
       () => t.allowClear && !p.value && n.value
-    ), C = s(!1), L = () => {
-      Y(), D(() => {
-        r.value && n.value !== r.value.value && (r.value.value = n.value, Z());
+    ), I = s(!1), N = () => {
+      Z(), U(() => {
+        o.value && n.value !== o.value.value && (o.value.value = n.value, ee());
       });
-    }, y = (e, l = !0) => {
+    }, w = (e, l = !0) => {
       var a;
-      o.value && !g.value && S(e) > o.value && (e = ((a = t.wordSlice) == null ? void 0 : a.call(t, e, o.value)) ?? Array.from(e).slice(0, o.value).join("")), b.value = e, l && c("update:modelValue", e), L();
+      u.value && !g.value && S(e) > u.value && (e = ((a = t.wordSlice) == null ? void 0 : a.call(t, e, u.value)) ?? Array.from(e).slice(0, u.value).join("")), B.value = e, l && f("update:modelValue", e), N();
     };
-    let F = n.value;
-    const M = (e, l) => {
+    let R = n.value;
+    const k = (e, l) => {
       var a, i;
-      e !== F && (F = e, c("change", e, l), (i = (a = m.value) == null ? void 0 : a.onChange) == null || i.call(a, l));
-    }, ee = (e) => {
-      var l, a;
-      z.value = !0, F = n.value, c("focus", e), (a = (l = m.value) == null ? void 0 : l.onFocus) == null || a.call(l, e);
+      e !== R && (R = e, f("change", e, l), (i = (a = v.value) == null ? void 0 : a.onChange) == null || i.call(a, l));
     }, te = (e) => {
       var l, a;
-      z.value = !1, c("blur", e), (a = (l = m.value) == null ? void 0 : l.onBlur) == null || a.call(l, e), M(n.value, e);
+      H.value = !0, R = n.value, f("focus", e), (a = (l = v.value) == null ? void 0 : l.onFocus) == null || a.call(l, e);
     }, ae = (e) => {
+      var l, a;
+      H.value = !1, f("blur", e), (a = (l = v.value) == null ? void 0 : l.onBlur) == null || a.call(l, e), k(n.value, e);
+    }, le = (e) => {
       var a, i;
       const { value: l } = e.target;
       if (e.type === "compositionend") {
-        if (C.value = !1, o.value && !g.value && n.value.length >= o.value && S(l) > o.value) {
-          L();
+        if (I.value = !1, u.value && !g.value && n.value.length >= u.value && S(l) > u.value) {
+          N();
           return;
         }
-        y(l), c("input", l, e), (i = (a = m.value) == null ? void 0 : a.onInput) == null || i.call(a, e);
+        w(l), f("input", l, e), (i = (a = v.value) == null ? void 0 : a.onInput) == null || i.call(a, e);
       } else
-        C.value = !0;
-    }, le = (e) => {
+        I.value = !0;
+    }, oe = (e) => {
       var a, i;
       const { value: l } = e.target;
-      if (!C.value) {
-        if (o.value && !g.value && n.value.length >= o.value && S(l) > o.value && e.inputType === "insertText") {
-          L();
+      if (!I.value) {
+        if (u.value && !g.value && n.value.length >= u.value && S(l) > u.value && e.inputType === "insertText") {
+          N();
           return;
         }
-        y(l), c("input", l, e), (i = (a = m.value) == null ? void 0 : a.onInput) == null || i.call(a, e);
+        w(l), f("input", l, e), (i = (a = v.value) == null ? void 0 : a.onInput) == null || i.call(a, e);
       }
-    }, oe = (e) => {
-      y(""), M("", e), c("clear", e);
+    }, ue = (e) => {
+      var l, a;
+      w(""), k("", e), (a = (l = v.value) == null ? void 0 : l.onInput) == null || a.call(l, e), f("clear", e);
     };
-    I(x, (e) => {
-      e !== n.value && y(e ?? "", !1);
+    z(C, (e) => {
+      e !== n.value && w(e ?? "", !1);
     });
-    const re = u(() => U(U(d, W), ["class", "style"])), ue = u(() => d.style), ne = u(() => ze(d, W)), ie = u(() => {
+    const re = r(() => W(W(h, P), ["class", "style"])), ne = r(() => h.style), ie = r(() => Le(h, P)), se = Be(K, () => ({
+      ...ie.value,
+      ...t.textareaAttrs
+    })), fe = r(() => {
       const e = {
-        ...ne.value,
-        ...t.textareaAttrs
+        ...se.value
       };
-      return _.value && (e["aria-invalid"] = !0), e;
-    }), se = u(() => [
-      f.element("wrapper"),
-      d.class,
-      f.modifier(`size-${X.value}`),
+      return M.value && (e["aria-invalid"] = !0), e;
+    }), me = r(() => [
+      m.element("wrapper"),
+      h.class,
+      m.modifier(`size-${_.value}`),
       {
-        [f.modifier("focus")]: z.value,
-        [f.modifier("disabled")]: p.value,
-        [f.modifier("error")]: _.value,
-        [f.modifier("scroll")]: v.value,
-        [f.modifier("has-clear")]: j.value,
-        [f.modifier("has-word-limit")]: !!(o.value && t.showWordLimit)
+        [m.modifier("focus")]: H.value,
+        [m.modifier("disabled")]: p.value,
+        [m.modifier("error")]: M.value,
+        [m.modifier("scroll")]: d.value,
+        [m.modifier("has-clear")]: $.value,
+        [m.modifier("has-word-limit")]: !!(u.value && t.showWordLimit)
       }
     ]);
-    let $;
-    const B = s(0), H = s(0), N = u(() => !w(t.autoSize) || !t.autoSize.minRows ? 0 : t.autoSize.minRows * B.value + H.value), R = u(() => !w(t.autoSize) || !t.autoSize.maxRows ? 0 : t.autoSize.maxRows * B.value + H.value), V = () => {
-      const e = we($);
-      B.value = Number.parseFloat(e["line-height"] || "0"), H.value = Number.parseFloat(e["border-top-width"] || "0") + Number.parseFloat(e["border-bottom-width"] || "0") + Number.parseFloat(e["padding-top"] || "0") + Number.parseFloat(e["padding-bottom"] || "0"), T.value = e, D(() => {
-        var k;
-        let a = ((k = h.value) == null ? void 0 : k.offsetHeight) ?? 0, i = "hidden";
-        N.value && a < N.value && (a = N.value), R.value && a > R.value && (a = R.value, i = "auto"), O.value = {
+    let V;
+    const A = s(0), O = s(0), T = r(() => !b(t.autoSize) || !t.autoSize.minRows ? 0 : t.autoSize.minRows * A.value + O.value), E = r(() => !b(t.autoSize) || !t.autoSize.maxRows ? 0 : t.autoSize.maxRows * A.value + O.value), y = () => {
+      if (!o.value || !t.autoSize)
+        return;
+      V = window.getComputedStyle(o.value);
+      const e = ze(V);
+      A.value = Number.parseFloat(e["line-height"] || "0"), O.value = Number.parseFloat(e["border-top-width"] || "0") + Number.parseFloat(e["border-bottom-width"] || "0") + Number.parseFloat(e["padding-top"] || "0") + Number.parseFloat(e["padding-bottom"] || "0"), F.value = e, U(() => {
+        var D;
+        if (!t.autoSize || !c.value)
+          return;
+        let a = ((D = c.value) == null ? void 0 : D.offsetHeight) ?? 0, i = "hidden";
+        T.value && a < T.value && (a = T.value), E.value && a > E.value && (a = E.value, i = "auto"), L.value = {
           height: `${a}px`,
           resize: "none",
           overflow: i
         };
       });
     };
-    de(() => {
-      r.value && ($ = window.getComputedStyle(r.value), t.autoSize && V()), A();
+    ge(() => {
+      o.value && (V = window.getComputedStyle(o.value), t.autoSize && y()), x();
     });
-    const ce = () => {
-      t.autoSize && h.value && V(), A();
-    }, fe = (e) => {
-      r.value && e.target !== r.value && (e.preventDefault(), r.value.focus());
-    }, A = () => {
-      r.value && (r.value.scrollHeight > r.value.offsetHeight ? v.value || (v.value = !0) : v.value && (v.value = !1));
+    const ve = () => {
+      t.autoSize && c.value && y(), x();
+    }, ce = (e) => {
+      o.value && e.target !== o.value && (e.preventDefault(), o.value.focus());
+    }, x = () => {
+      o.value && (o.value.scrollHeight > o.value.offsetHeight ? d.value || (d.value = !0) : d.value && (d.value = !1));
     };
-    return I(n, () => {
-      t.autoSize && h.value && V(), A();
-    }), {
-      t: Q,
-      className: f,
-      wrapperCls: se,
-      textareaRef: r,
-      textareaStyle: O,
-      mirrorRef: h,
-      mirrorStyle: T,
+    return z(n, () => {
+      t.autoSize && c.value && y(), x();
+    }), z(
+      () => [t.autoSize, _.value],
+      () => {
+        t.autoSize ? y() : (L.value = void 0, F.value = void 0), x();
+      },
+      { deep: !0, flush: "post" }
+    ), {
+      t: Y,
+      className: m,
+      wrapperCls: me,
+      textareaRef: o,
+      textareaStyle: L,
+      mirrorRef: c,
+      mirrorStyle: F,
       computedValue: n,
-      showClearBtn: j,
-      valueLength: E,
-      computedMaxLength: o,
+      showClearBtn: $,
+      valueLength: j,
+      computedMaxLength: u,
       mergedDisabled: p,
-      mergeTextareaAttrs: ie,
+      mergeTextareaAttrs: fe,
       wrapperAttrs: re,
-      wrapperStyle: ue,
-      handleInput: le,
-      handleFocus: ee,
-      handleBlur: te,
-      handleComposition: ae,
-      handleClear: oe,
-      handleResize: ce,
-      handleMousedown: fe
+      wrapperStyle: ne,
+      handleInput: oe,
+      handleFocus: te,
+      handleBlur: ae,
+      handleComposition: le,
+      handleClear: ue,
+      handleResize: ve,
+      handleMousedown: ce
     };
   },
   methods: {
@@ -304,5 +319,5 @@ const De = me({
   }
 });
 export {
-  De as default
+  Pe as default
 };