@iswangh/element-plus-kit-form 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,71 +1,189 @@
-import { defineComponent as k, createElementBlock as M, openBlock as u, createElementVNode as x, computed as i, withDirectives as _, createCommentVNode as W, createBlock as h, unref as w, withCtx as C, Fragment as $, renderList as P, mergeProps as I, createTextVNode as G, toDisplayString as H, resolveDynamicComponent as b, vShow as R, mergeModels as O, useModel as K, normalizeProps as U, guardReactiveProps as j, createSlots as V, renderSlot as X, useAttrs as q, useSlots as Y, ref as J, withModifiers as Q, createVNode as B } from "vue";
-import { checkCondition as N } from "@iswangh/element-plus-kit-core";
-import { ElTreeSelect as Z, ElTransfer as ee, ElTimeSelect as te, ElTimePicker as oe, ElSwitch as ne, ElSlider as le, ElSelectV2 as re, ElSelect as ae, ElRate as se, ElRadioGroup as ie, ElMention as ce, ElInputTag as me, ElInputNumber as ue, ElInput as fe, ElDatePicker as de, ElDatePickerPanel as pe, ElColorPicker as ve, ElColorPickerPanel as he, ElCheckboxGroup as Ee, ElCascader as ge, ElAutocomplete as Ce, ElFormItem as L, ElButton as Ae, ElCol as Ie, ElRow as be, ElForm as ye } from "element-plus";
-var Se = /* @__PURE__ */ k({
+import { onBeforeUnmount as ye, nextTick as q, defineComponent as L, createElementBlock as M, openBlock as v, createElementVNode as ae, computed as p, withDirectives as ne, createCommentVNode as Ae, createBlock as y, unref as S, withCtx as w, Fragment as $, renderSlot as ce, renderList as j, mergeProps as _, normalizeClass as we, createVNode as X, createTextVNode as Oe, toDisplayString as Se, resolveDynamicComponent as D, vShow as oe, mergeModels as J, useModel as fe, ref as Y, watch as Q, watchEffect as be, normalizeProps as me, guardReactiveProps as de, createSlots as le, useAttrs as Te, useSlots as ke, onMounted as Fe, withModifiers as Me, TransitionGroup as _e } from "vue";
+import { checkCondition as Z } from "@iswangh/element-plus-kit-core";
+import { ElTreeSelect as De, ElTransfer as Ve, ElTimeSelect as Be, ElTimePicker as Pe, ElSwitch as Re, ElSlider as Le, ElSelectV2 as Ne, ElSelect as Ue, ElRate as $e, ElRadioGroup as je, ElMention as ze, ElInputTag as He, ElInputNumber as Ge, ElInput as We, ElDatePicker as Ke, ElDatePickerPanel as Xe, ElColorPicker as qe, ElColorPickerPanel as Je, ElCheckboxGroup as Ye, ElCascader as Qe, ElAutocomplete as Ze, ElFormItem as pe, ElButton as et, ElIcon as tt, ElCol as nt, ElRow as ot, ElForm as rt } from "element-plus";
+function at(e, s, t) {
+  let i = !1, r = null, g = null;
+  function x() {
+    r && (clearTimeout(r), r = null), g && (clearTimeout(g), g = null);
+  }
+  function k() {
+    !s.value || i || (r && clearTimeout(r), r = setTimeout(() => {
+      !e.value && !i && t(!0);
+    }, 500));
+  }
+  function E() {
+    r && (clearTimeout(r), r = null), g && clearTimeout(g), q(() => {
+      g = setTimeout(() => {
+        i = !1, g = null;
+      }, 100);
+    });
+  }
+  function I() {
+    s.value && (i = !0, x());
+  }
+  return ye(x), {
+    onMouseEnter: k,
+    onMouseLeave: E,
+    recordManualToggle: I
+  };
+}
+function lt() {
+  let e = !1, s = !1, t = null, i = !1;
+  return {
+    /** 是否正在清理 */
+    get isClearing() {
+      return e;
+    },
+    /** 是否用户交互 */
+    get isUserInteraction() {
+      return s;
+    },
+    /**
+     * 开始清理操作
+     * @param value - 清理前的值
+     */
+    startClearing(r) {
+      e = !0, t = r, i = !0;
+    },
+    /**
+     * 结束清理操作（在 nextTick 中调用）
+     */
+    endClearing() {
+      e = !1, t = null, i = !1;
+    },
+    /**
+     * 开始用户交互
+     */
+    startUserInteraction() {
+      s = !0;
+    },
+    /**
+     * 结束用户交互（在 nextTick 中调用）
+     */
+    endUserInteraction() {
+      s = !1;
+    },
+    /**
+     * 判断是否是清理操作
+     * @param oldValue - 旧值
+     * @param newValue - 新值
+     * @param isEmpty - 检查值是否为空的函数
+     */
+    isClearingOperation(r, g, x) {
+      return !!(e || i || !x(r) && x(g) && r === t);
+    }
+  };
+}
+var it = /* @__PURE__ */ L({
+  name: "ArrowDown",
+  __name: "arrow-down",
+  setup(e) {
+    return (s, t) => (v(), M("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 1024 1024"
+    }, [
+      ae("path", {
+        fill: "currentColor",
+        d: "M831.872 340.864 512 652.672 192.128 340.864a30.59 30.59 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.59 30.59 0 0 0-42.752 0z"
+      })
+    ]));
+  }
+}), st = it, ut = /* @__PURE__ */ L({
   name: "Refresh",
   __name: "refresh",
   setup(e) {
-    return (o, n) => (u(), M("svg", {
+    return (s, t) => (v(), M("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 1024 1024"
     }, [
-      x("path", {
+      ae("path", {
         fill: "currentColor",
         d: "M771.776 794.88A384 384 0 0 1 128 512h64a320 320 0 0 0 555.712 216.448H654.72a32 32 0 1 1 0-64h149.056a32 32 0 0 1 32 32v148.928a32 32 0 1 1-64 0v-50.56zM276.288 295.616h92.992a32 32 0 0 1 0 64H220.16a32 32 0 0 1-32-32V178.56a32 32 0 0 1 64 0v50.56A384 384 0 0 1 896.128 512h-64a320 320 0 0 0-555.776-216.384z"
       })
     ]));
   }
-}), we = Se, ke = /* @__PURE__ */ k({
+}), ct = ut, ft = /* @__PURE__ */ L({
   name: "Search",
   __name: "search",
   setup(e) {
-    return (o, n) => (u(), M("svg", {
+    return (s, t) => (v(), M("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 1024 1024"
     }, [
-      x("path", {
+      ae("path", {
         fill: "currentColor",
         d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"
       })
     ]));
   }
-}), Fe = ke;
-const Pe = ["comp", "compAttrs", "vIf", "vShow"], Me = {
+}), mt = ft;
+const ve = {
+  behavior: "smooth",
+  // 平滑滚动
+  block: "center",
+  // 垂直居中，让错误项在视窗中间
+  inline: "nearest"
+  // 水平方向保持最近位置
+}, dt = {
+  search: { label: "搜索", icon: mt, type: "primary" },
+  reset: { label: "重置", icon: ct },
+  submit: { label: "确认", type: "primary" },
+  cancel: { label: "取消" },
+  expand: { type: "text" }
+}, pt = ve, vt = {
+  getDefaults(e, s) {
+    return {
+      ...this.buildActionAttrs(e),
+      ...s
+    };
+  },
+  generateActionButtons(e) {
+    return e ? ["search", "reset"] : ["submit", "cancel"];
+  },
+  buildActionAttrs(e) {
+    return {
+      buttons: this.generateActionButtons(e),
+      vIf: e,
+      autoExpandOnError: !0,
+      vShow: !0
+    };
+  }
+}, gt = ["comp", "compAttrs", "vIf", "vShow"], ht = {
   custom: "div"
-}, Te = {
-  autocomplete: Ce,
-  cascader: ge,
-  checkbox: Ee,
-  "color-picker-panel": he,
-  "color-picker": ve,
-  "date-picker-panel": pe,
-  "date-picker": de,
-  input: fe,
-  "input-number": ue,
-  "input-tag": me,
-  mention: ce,
-  radio: ie,
-  rate: se,
-  select: ae,
-  "select-v2": re,
-  slider: le,
-  switch: ne,
-  "time-picker": oe,
-  "time-select": te,
-  transfer: ee,
-  "tree-select": Z
-}, De = {
-  ...Te,
-  ...Me
-}, Oe = {
+}, xt = {
+  autocomplete: Ze,
+  cascader: Qe,
+  checkbox: Ye,
+  "color-picker-panel": Je,
+  "color-picker": qe,
+  "date-picker-panel": Xe,
+  "date-picker": Ke,
+  input: We,
+  "input-number": Ge,
+  "input-tag": He,
+  mention: ze,
+  radio: je,
+  rate: $e,
+  select: Ue,
+  "select-v2": Ne,
+  slider: Le,
+  switch: Re,
+  "time-picker": Pe,
+  "time-select": Be,
+  transfer: Ve,
+  "tree-select": De
+}, It = {
+  ...xt,
+  ...ht
+}, Et = {
   /**
    * 获取组件默认属性
    */
   getDefaults(e) {
-    const { comp: o, compAttrs: n = {} } = e, s = this.getComponentType(o);
+    const { comp: s, compAttrs: t = {} } = e, i = this.getComponentType(s);
     return {
-      ...this.buildComponentAttrs(e, s),
-      ...n
+      ...this.buildComponentAttrs(e, i),
+      ...t
       // 用户配置最后合并，优先级最高
     };
   },
@@ -73,107 +191,163 @@ const Pe = ["comp", "compAttrs", "vIf", "vShow"], Me = {
    * 判断组件类型
    */
   getComponentType(e) {
-    const o = ["autocomplete", "input", "input-number", "input-tag", "mention"], n = ["cascader", "select", "select-v2", "tree-select"], s = ["date-picker", "time-select", "time-picker"];
-    return o.includes(e) ? "input" : n.includes(e) ? "select" : s.includes(e) ? "picker" : "other";
+    const s = ["autocomplete", "input", "input-number", "input-tag", "mention"], t = ["cascader", "select", "select-v2", "tree-select"], i = ["date-picker", "time-select", "time-picker"];
+    return s.includes(e) ? "input" : t.includes(e) ? "select" : i.includes(e) ? "picker" : "other";
   },
   /**
    * 动态生成 placeholder
    */
-  generatePlaceholder(e, o) {
-    const { label: n, comp: s } = e, p = n ? `${n}` : "";
-    return o === "input" ? s === "input-number" ? "请输入" : `请输入${p}` : ["select", "picker"].includes(o) ? `请选择${p}` : "";
+  generatePlaceholder(e, s) {
+    const { label: t, comp: i } = e, r = t ? `${t}` : "";
+    return s === "input" ? i === "input-number" ? "请输入" : `请输入${r}` : ["select", "picker"].includes(s) ? `请选择${r}` : "";
   },
   /**
    * 构建组件属性
    */
-  buildComponentAttrs(e, o) {
-    const n = {};
-    return ["input", "select", "picker"].includes(o) && (n.placeholder = this.generatePlaceholder(e, o), n.clearable = !0), ["select"].includes(o) && (n.filterable = !0), n;
+  buildComponentAttrs(e, s) {
+    const t = {};
+    return ["input", "select", "picker"].includes(s) && (t.placeholder = this.generatePlaceholder(e, s), t.clearable = !0), ["select"].includes(s) && (t.filterable = !0), t;
   }
-}, Ve = {
+}, Ct = {
   showMessage: !0,
   scrollToError: !0,
-  scrollIntoViewOptions: {
-    behavior: "smooth",
-    // 平滑滚动
-    block: "center",
-    // 垂直居中，让错误项在视窗中间
-    inline: "nearest"
-    // 水平方向保持最近位置
-  }
-}, Be = {
-  search: { label: "搜索", icon: Fe, type: "primary" },
-  reset: { label: "重置", icon: we },
-  submit: { label: "确认", type: "primary" },
-  cancel: { label: "取消" }
-}, Ne = {
-  getDefaults(e, o) {
-    return {
-      ...this.buildActionAttrs(e),
-      ...o
-    };
-  },
-  generateActionButtons(e) {
-    return e ? ["search", "reset"] : ["submit", "cancel"];
-  },
-  buildActionAttrs(e) {
-    return {
-      buttons: this.generateActionButtons(e),
-      vIf: e,
-      vShow: !0
-    };
-  }
-}, xe = /* @__PURE__ */ k({
+  scrollIntoViewOptions: ve
+}, yt = /* @__PURE__ */ L({
   name: "ElementPlusKitFormItemAction",
   __name: "FormAction",
   props: {
     inline: { type: Boolean, default: !1 },
     actionSlot: {},
-    config: { default: () => ({}) }
+    config: { default: () => ({}) },
+    expanded: { type: Boolean, default: !1 },
+    autoExpandOnHover: { type: Boolean },
+    onMouseEnter: {},
+    onMouseLeave: {}
   },
   emits: ["action"],
-  setup(e) {
-    const o = e, n = i(() => ({ ...o, config: { ...Ne.getDefaults(o.inline, o.config) } })), s = i(() => {
-      const { buttons: v } = n.value.config;
-      return v.map((d) => {
-        if (typeof d == "string") {
-          const c = Be[d];
-          return c ? { ...c, eventName: d } : { label: d.toUpperCase(), eventName: d };
-        }
-        return d;
+  setup(e, { emit: s }) {
+    const t = e, i = s, r = p(() => ({
+      ...t,
+      config: { ...vt.getDefaults(t.inline, t.config) }
+    })), g = p(() => {
+      const { buttons: f } = r.value.config;
+      return f.map((m) => {
+        if (typeof m != "string")
+          return m;
+        const h = dt[m];
+        return h ? { ...h, eventName: m } : { label: m.toUpperCase(), eventName: m };
       });
-    }), p = i(() => (v) => {
-      const { label: d, eventName: c, ...g } = v;
-      return { ...g };
     });
-    return (v, d) => n.value.config.vIf ? _((u(), h(w(L), {
+    function x(f) {
+      return f.eventName === "expand";
+    }
+    function k(f) {
+      const { label: m, eventName: h, ...F } = f;
+      if (x(f)) {
+        const d = t.expanded ? "收起" : "展开";
+        return {
+          ...F,
+          title: d,
+          "aria-label": d,
+          "aria-expanded": t.expanded
+        };
+      }
+      return F;
+    }
+    function E(f) {
+      const m = f.eventName, h = x(f) ? t.expanded : void 0;
+      i("action", { eventName: m, data: h });
+    }
+    function I(f) {
+      x(f) && t.autoExpandOnHover && t.onMouseEnter?.();
+    }
+    function A(f) {
+      x(f) && t.autoExpandOnHover && t.onMouseLeave?.();
+    }
+    return (f, m) => r.value.config.vIf ? ne((v(), y(S(pe), {
       key: 0,
       prop: "action"
     }, {
-      default: C(() => [
-        e.actionSlot ? (u(), h(b(e.actionSlot), {
+      default: w(() => [
+        e.actionSlot ? (v(), y(D(e.actionSlot), {
           key: 1,
           prop: "action"
-        })) : (u(!0), M($, { key: 0 }, P(s.value, (c, g) => (u(), h(w(Ae), I({
-          key: `${c.label}-${g}`
-        }, { ref_for: !0 }, p.value(c), {
-          onClick: (y) => v.$emit("action", { eventName: c.eventName })
-        }), {
-          default: C(() => [
-            G(H(c.label ?? ""), 1)
-          ]),
-          _: 2
-        }, 1040, ["onClick"]))), 128))
+        })) : (v(), M($, { key: 0 }, [
+          (v(!0), M($, null, j(g.value, (h, F) => (v(), y(S(et), _({
+            key: `${h.eventName}-${F}`
+          }, { ref_for: !0 }, k(h), {
+            onMouseenter: (d) => I(h),
+            onMouseleave: (d) => A(h),
+            onClick: (d) => E(h)
+          }), {
+            default: w(() => [
+              x(h) && e.inline ? (v(), y(S(tt), {
+                key: 0,
+                class: we(["expand-toggle-icon", { "is-expanded": e.expanded }])
+              }, {
+                default: w(() => [
+                  X(S(st))
+                ]),
+                _: 1
+              }, 8, ["class"])) : (v(), M($, { key: 1 }, [
+                Oe(Se(h.label ?? ""), 1)
+              ], 64))
+            ]),
+            _: 2
+          }, 1040, ["onMouseenter", "onMouseleave", "onClick"]))), 128)),
+          ce(f.$slots, "default", {}, void 0, !0)
+        ], 64))
       ]),
-      _: 1
+      _: 3
     }, 512)), [
-      [R, n.value.config.vShow]
-    ]) : W("", !0);
+      [oe, r.value.config.vShow]
+    ]) : Ae("", !0);
   }
-}), _e = /* @__PURE__ */ k({
+}), ge = (e, s) => {
+  const t = e.__vccOpts || e;
+  for (const [i, r] of s)
+    t[i] = r;
+  return t;
+}, At = /* @__PURE__ */ ge(yt, [["__scopeId", "data-v-dd21a872"]]);
+function wt(e, s) {
+  return e ? e.some((t) => typeof t == "string" ? t === s : t.eventName === s) : !1;
+}
+function Ot(e, s = 100) {
+  let t = null;
+  return function(...i) {
+    t && clearTimeout(t), t = setTimeout(() => {
+      e.apply(this, i), t = null;
+    }, s);
+  };
+}
+function he(e, s) {
+  if (!e || e.length === 0)
+    return [];
+  const t = Array.from(new Set(e));
+  return s ? t.filter((i) => i !== s) : t;
+}
+function ie(e, s, t) {
+  const i = he(e, t), r = {};
+  for (const g of i)
+    r[g] = s[g];
+  return r;
+}
+function ee(e) {
+  return e && typeof e == "object" && typeof e.loader == "function";
+}
+function re(e) {
+  return e == null || e === "";
+}
+function te(e, s) {
+  return s.length === 0 ? !1 : re(e) ? !0 : s.some((t) => (typeof t == "object" && t !== null ? t.value : t) === e);
+}
+function se(e) {
+  return e == null ? e : typeof e == "object" ? JSON.parse(JSON.stringify(e)) : e;
+}
+const ue = /* @__PURE__ */ L({
   name: "ElementPlusKitFormItem",
   __name: "FormItem",
-  props: /* @__PURE__ */ O({
+  props: /* @__PURE__ */ J({
     formItem: {},
     index: {},
     formData: { default: () => ({}) },
@@ -183,68 +357,174 @@ const Pe = ["comp", "compAttrs", "vIf", "vShow"], Me = {
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ O(["change"], ["update:modelValue"]),
-  setup(e) {
-    const o = e, n = K(e, "modelValue");
-    function s() {
-      const m = new Set(Pe);
+  emits: /* @__PURE__ */ J(["change"], ["update:modelValue"]),
+  setup(e, { emit: s }) {
+    const t = e, i = s, r = fe(e, "modelValue"), g = p(() => {
+      const a = new Set(gt);
       return Object.fromEntries(
-        Object.entries(o.formItem).filter(([f]) => !m.has(f))
+        Object.entries(t.formItem).filter(([u]) => !a.has(u))
       );
+    }), x = p(() => t.formSlots.formItemSlots), k = p(() => It[t.formItem.comp] || "div"), E = p(() => ({ prop: t.formItem.prop, formItem: t.formItem, index: t.index })), I = p(() => Object.fromEntries(
+      Object.entries(t.dynamicCompEvents).map(([a, u]) => [
+        a,
+        (...c) => u(E.value, ...c)
+      ])
+    )), A = Y([]), f = Y(!1), m = lt();
+    function h() {
+      if (!re(r.value)) {
+        if (m.isClearing)
+          return;
+        m.startClearing(r.value), r.value = void 0, i("change", E.value, void 0), q(() => {
+          m.endClearing();
+        });
+      }
     }
-    const p = i(() => s()), v = i(() => o.formSlots.formItemSlots), d = i(() => De[o.formItem.comp] || "div"), c = i(() => {
-      const { formItem: m, index: f } = o;
-      return { prop: m.prop, formItem: m, index: f };
+    function F(a) {
+      m.isClearing || (m.startUserInteraction(), i("change", E.value, a), q(() => {
+        m.endUserInteraction();
+      }));
+    }
+    const d = p(() => {
+      const a = Et.getDefaults(t.formItem), u = t.formItem.compAttrs ?? {}, c = "options" in u;
+      return {
+        ...a,
+        ...u,
+        ...I.value,
+        ...c && {
+          options: A.value,
+          loading: f.value
+        }
+      };
     });
-    function g() {
-      const m = {};
-      for (const [f, a] of Object.entries(o.dynamicCompEvents))
-        m[f] = (...S) => a(c.value, ...S);
-      return m;
+    function z(a) {
+      return t.formSlots.dynamicComponentSlots.get(a);
+    }
+    async function V(a, u) {
+      try {
+        const c = await a(u);
+        return Array.isArray(c) ? c : [];
+      } catch (c) {
+        return console.error(`[FormItem] 加载字段 "${t.formItem.prop}" 的选项失败:`, c), [];
+      }
+    }
+    function B() {
+      const a = t.formItem.compAttrs?.options;
+      return ee(a) ? a : null;
     }
-    const y = i(() => g()), F = i(() => ({ ...Oe.getDefaults(o.formItem), ...y.value })), T = i(() => (m) => o.formSlots.dynamicComponentSlots.get(m));
-    return (m, f) => (u(), h(w(L), U(j(p.value)), V({
-      default: C(() => [
-        e.formItem.comp !== "custom" ? (u(), h(b(d.value), I({ key: 0 }, F.value, {
-          modelValue: n.value,
-          "onUpdate:modelValue": f[0] || (f[0] = (a) => n.value = a),
-          onChange: f[1] || (f[1] = (a) => m.$emit("change", c.value, a))
-        }), V({ _: 2 }, [
-          P(T.value(e.formItem.prop), (a, S) => ({
-            name: a.slotName,
-            fn: C((t) => [
-              (u(), h(b(a.slotFn), I({
-                value: n.value,
+    async function P() {
+      const a = t.formItem.compAttrs?.options;
+      if (a && !Array.isArray(a)) {
+        f.value = !0;
+        try {
+          if (typeof a == "function") {
+            const u = await V(a, t.formData ?? {});
+            A.value = u, te(r.value, u) || h();
+          } else if (ee(a)) {
+            const { loader: u, deps: c = [] } = a, b = t.formData ?? {}, O = ie(c, b, t.formItem.prop), R = await V(u, { ...b, ...O });
+            A.value = R, te(r.value, R) || h();
+          }
+        } finally {
+          f.value = !1;
+        }
+      }
+    }
+    function H(a) {
+      A.value = a, te(r.value, a) || h();
+    }
+    function G() {
+      P();
+    }
+    function W(a) {
+      const { immediate: u = !1, deps: c = [], loader: b } = a;
+      if (c.length > 0) {
+        const O = t.formData ?? {}, R = ie(c, O, t.formItem.prop);
+        try {
+          b({ ...O, ...R });
+        } catch {
+        }
+        u && P();
+        return;
+      }
+      u && P();
+    }
+    const K = p(() => {
+      const a = B();
+      return a ? he(a.deps ?? [], t.formItem.prop) : [];
+    }), N = p(() => {
+      const a = B();
+      return a ? a.immediate ?? !1 : !1;
+    });
+    return Q(
+      () => {
+        const a = K.value, u = {};
+        for (const c of a)
+          u[c] = t.formData?.[c];
+        return u;
+      },
+      () => {
+        B() && P();
+      },
+      { deep: !0, immediate: N.value }
+    ), be(() => {
+      const a = t.formItem.compAttrs?.options;
+      if (a) {
+        if (Array.isArray(a)) {
+          H(a);
+          return;
+        }
+        if (typeof a == "function") {
+          G();
+          return;
+        }
+        ee(a) && W(a);
+      }
+    }), Q(
+      () => r.value,
+      (a, u) => {
+        m.isClearingOperation(u, a, re) || m.isUserInteraction || a !== u && i("change", E.value, a);
+      }
+    ), (a, u) => (v(), y(S(pe), me(de(g.value)), le({
+      default: w(() => [
+        e.formItem.comp !== "custom" ? (v(), y(D(k.value), _({ key: 0 }, d.value, {
+          modelValue: r.value,
+          "onUpdate:modelValue": u[0] || (u[0] = (c) => r.value = c),
+          onChange: F
+        }), le({ _: 2 }, [
+          j(z(e.formItem.prop) ?? [], (c, b) => ({
+            name: c.slotName,
+            fn: w((O) => [
+              (v(), y(D(c.slotFn), _({
+                value: r.value,
                 form: e.formData,
                 "form-item": e.formItem
-              }, t), null, 16, ["value", "form", "form-item"]))
+              }, O), null, 16, ["value", "form", "form-item"]))
             ])
           }))
-        ]), 1040, ["modelValue"])) : X(m.$slots, e.formItem.prop, {
+        ]), 1040, ["modelValue"])) : ce(a.$slots, e.formItem.prop, {
           key: 1,
-          value: n.value,
+          value: r.value,
           form: e.formData,
           formItem: e.formItem
         })
       ]),
       _: 2
     }, [
-      P(v.value, (a, S) => ({
-        name: a.slotName,
-        fn: C((t) => [
-          (u(), h(b(a.slotFn), I({
-            value: n.value,
+      j(x.value, (c, b) => ({
+        name: c.slotName,
+        fn: w((O) => [
+          (v(), y(D(c.slotFn), _({
+            value: r.value,
             form: e.formData,
             "form-item": e.formItem
-          }, t), null, 16, ["value", "form", "form-item"]))
+          }, O), null, 16, ["value", "form", "form-item"]))
         ])
       }))
     ]), 1040));
   }
-}), je = /* @__PURE__ */ k({
+}), St = /* @__PURE__ */ L({
   name: "WForm",
   __name: "Form",
-  props: {
+  props: /* @__PURE__ */ J({
     formItems: {},
     rowAttrs: { default: () => ({}) },
     actionConfig: { default: () => ({}) },
@@ -263,100 +543,223 @@ const Pe = ["comp", "compAttrs", "vIf", "vShow"], Me = {
     validateOnRuleChange: { type: Boolean },
     scrollToError: { type: Boolean },
     scrollIntoViewOptions: {}
-  },
-  emits: ["validate", "change", "action", "search", "reset", "submit", "cancel"],
-  setup(e, { expose: o, emit: n }) {
-    const s = e, p = n, v = q(), d = i(() => Object.fromEntries(
-      Object.entries(v).filter(
-        ([t, l]) => t.startsWith("on") && typeof l == "function"
-      )
-    )), c = i(() => {
-      const { formItems: t, actionConfig: l, rowAttrs: r, ...E } = s, A = Object.fromEntries(
-        Object.entries(v).filter(
-          ([D, z]) => !(D.startsWith("on") && typeof z == "function")
-        )
+  }, {
+    expanded: { type: Boolean, default: !1 },
+    expandedModifiers: {}
+  }),
+  emits: /* @__PURE__ */ J(["validate", "change", "action", "search", "reset", "submit", "cancel", "expand"], ["update:expanded"]),
+  setup(e, { expose: s, emit: t }) {
+    const i = e, r = t, g = Te();
+    function x(n, o) {
+      return n.startsWith("on") && typeof o == "function";
+    }
+    const k = p(() => Object.fromEntries(
+      Object.entries(g).filter(([n, o]) => x(n, o))
+    )), E = p(() => {
+      const { formItems: n, actionConfig: o, rowAttrs: l, ...C } = i, T = Object.fromEntries(
+        Object.entries(g).filter(([U, Ce]) => !x(U, Ce))
       );
-      return { ...E, ...Ve, ...A };
-    }), g = i(() => {
-      const { span: t } = s?.rowAttrs ?? {};
-      return s.formItems.filter((l) => N({ condition: l.vIf, data: s.model, defaultValue: !0 })).map((l) => {
-        const { colAttrs: r = {} } = l ?? {};
-        return { ...l, colAttrs: { ...r, span: r.span ?? t } };
+      return { ...C, ...Ct, ...T };
+    }), I = fe(e, "expanded");
+    Q(
+      I,
+      (n) => {
+        r("expand", n);
+      }
+    );
+    const A = p(() => E.value.inline ? wt(i.actionConfig?.buttons, "expand") : !1), f = p(() => {
+      if (!A.value)
+        return !1;
+      const n = i.actionConfig?.expand;
+      return n ? n.autoExpandOnHover === !0 : !1;
+    }), { onMouseEnter: m, onMouseLeave: h, recordManualToggle: F } = at(
+      I,
+      f,
+      (n) => {
+        I.value = n;
+      }
+    ), d = Y();
+    function z(n) {
+      const o = n ?? !I.value;
+      I.value = o, F();
+      const l = i.actionConfig?.expand;
+      l?.scrollOnToggle && q(() => {
+        setTimeout(() => d.value?.$el?.scrollIntoView?.(l.scrollIntoViewOptions ?? pt), 250);
       });
-    }), y = Y();
-    function F(t) {
-      const l = [];
-      for (const r in y)
-        r.startsWith(t) && l.push({
-          rawSlotName: r,
-          slotName: r.replace(t, ""),
-          slotFn: y[r]
-        });
-      return l;
     }
-    const T = i(() => {
-      const t = F("form-item-"), l = /* @__PURE__ */ new Map();
-      for (const r of g.value) {
-        const E = F(`${r.prop}-`);
-        E.length > 0 && l.set(r.prop, E);
+    const V = p(() => {
+      const { span: n } = i.rowAttrs;
+      return i.formItems.filter((o) => Z({ condition: o.vIf, data: i.model, defaultValue: !0 })).map((o) => {
+        const { colAttrs: l = {} } = o ?? {};
+        return { ...o, colAttrs: { ...l, span: l.span ?? n } };
+      });
+    }), B = p(() => V.value.map((n, o) => ({ ...n, _originalIndex: o })).filter((n) => {
+      const o = n._originalIndex;
+      return A.value ? !P(n, o) : !0;
+    }));
+    function P(n, o) {
+      if (!A.value || I.value)
+        return !1;
+      const l = i.actionConfig?.expand;
+      return l ? !!("exclude" in l && l.exclude.length > 0 && l.exclude.includes(n.prop) || "include" in l && l.include.length > 0 && !l.include.includes(n.prop) || "count" in l && o >= l.count) : !1;
+    }
+    const H = ke();
+    function G(n) {
+      return Object.keys(H).filter((o) => o.startsWith(n)).map((o) => ({
+        rawSlotName: o,
+        slotName: o.replace(n, ""),
+        slotFn: H[o]
+      }));
+    }
+    const W = p(() => {
+      const n = G("form-item-"), o = /* @__PURE__ */ new Map();
+      for (const l of V.value) {
+        const C = G(`${l.prop}-`);
+        C.length > 0 && o.set(l.prop, C);
       }
-      return { formItemSlots: t, dynamicComponentSlots: l };
-    }), m = i(() => s.rowAttrs && Object.keys(s.rowAttrs).length > 0), f = i(() => ({
-      row: c.value.inline || m.value ? be : "div",
-      col: m.value ? Ie : "div"
-    })), a = J();
-    async function S({ eventName: t }) {
-      const l = ["submit", "search"], r = ["cancel", "reset"];
-      [...l, ...r].includes(t) && (l.includes(t) && await a.value?.validate?.(), r.includes(t) && a.value?.resetFields?.(), p(t)), p("action", t);
+      return { formItemSlots: n, dynamicComponentSlots: o };
+    }), K = p(() => Object.keys(i.rowAttrs ?? {}).length > 0), N = p(() => ({
+      row: E.value.inline || K.value ? ot : "div",
+      col: K.value ? nt : "div"
+    })), a = p(() => i.formItems.map((n) => n.prop)), u = p(() => {
+      if (!A.value)
+        return [];
+      const n = i.actionConfig?.expand;
+      return n ? V.value.map((o, l) => ({ field: o, index: l })).filter(({ field: o, index: l }) => !!("exclude" in n && n.exclude.includes(o.prop) || "include" in n && !n.include.includes(o.prop) || "count" in n && l >= n.count)).map(({ field: o }) => o.prop) : [];
+    }), c = Y({});
+    function b() {
+      c.value = {};
+      for (const n of u.value) {
+        const o = i.model[n];
+        c.value[n] = se(o);
+      }
+    }
+    const O = Ot(b, 100);
+    function R() {
+      const n = {};
+      for (const o of u.value) {
+        const l = c.value[o];
+        n[o] = l != null ? se(l) : void 0;
+      }
+      return n;
+    }
+    function xe() {
+      d.value?.clearValidate?.(u.value);
+      const n = a.value.filter((o) => !u.value.includes(o));
+      n.length > 0 && d.value?.resetFields?.(n);
+    }
+    async function Ie({ eventName: n }) {
+      const o = ["submit", "search"], l = ["cancel", "reset"];
+      if (n === "expand") {
+        z(), r("action", n, I.value);
+        return;
+      }
+      if (o.includes(n) && await d.value?.validate?.(), l.includes(n)) {
+        if (n === "reset") {
+          const C = R();
+          xe(), r("reset", C), r("action", n, C);
+          return;
+        }
+        d.value?.resetFields?.();
+      }
+      r(n), r("action", n);
+    }
+    function Ee(n, o, l) {
+      r("validate", n, o, l);
     }
-    return o({
+    return s({
       // element-plus form exposes
       get fields() {
-        return a.value?.fields;
+        return d.value?.fields;
       },
-      getField: (t) => a.value?.getField?.(t),
-      validate: () => a.value?.validate?.(),
-      validateField: (t) => a.value?.validateField?.(t),
-      resetFields: (t) => a.value?.resetFields?.(t),
-      clearValidate: (t) => a.value?.clearValidate?.(t),
-      scrollToField: (t) => a.value?.scrollToField?.(t)
-    }), (t, l) => (u(), h(w(ye), I({
+      getField: (n) => d.value?.getField?.(n),
+      validate: () => d.value?.validate?.(),
+      validateField: (n) => d.value?.validateField?.(n),
+      resetFields: (n) => d.value?.resetFields?.(n),
+      clearValidate: (n) => d.value?.clearValidate?.(n),
+      scrollToField: (n) => d.value?.scrollToField?.(n),
+      // 展开/折叠控制方法
+      get expanded() {
+        return I.value;
+      },
+      toggleExpand: z
+    }), Fe(() => {
+      b();
+    }), Q(
+      [() => i.formItems, () => i.actionConfig?.expand],
+      () => {
+        O();
+      },
+      { deep: !0 }
+    ), (n, o) => (v(), y(S(rt), _({
       ref_key: "formRef",
-      ref: a
-    }, c.value, {
+      ref: d
+    }, E.value, {
       model: e.model,
-      onValidate: l[1] || (l[1] = (r, E, A) => t.$emit("validate", r, E, A)),
-      onSubmit: l[2] || (l[2] = Q(() => {
+      onValidate: Ee,
+      onSubmit: o[2] || (o[2] = Me(() => {
       }, ["prevent"]))
     }), {
-      default: C(() => [
-        (u(), h(b(f.value.row), U(j(e.rowAttrs)), {
-          default: C(() => [
-            (u(!0), M($, null, P(g.value, (r, E) => _((u(), h(b(f.value.col), I({
-              key: `${r.prop}-${E}`
-            }, { ref_for: !0 }, r.colAttrs), {
-              default: C(() => [
-                B(_e, {
-                  modelValue: e.model[r.prop],
-                  "onUpdate:modelValue": (A) => e.model[r.prop] = A,
-                  "form-item": r,
+      default: w(() => [
+        (v(), y(D(N.value.row), me(de(e.rowAttrs)), {
+          default: w(() => [
+            A.value ? (v(), y(_e, {
+              key: 0,
+              name: "form-item",
+              tag: "div",
+              class: "form-items-transition"
+            }, {
+              default: w(() => [
+                (v(!0), M($, null, j(B.value, (l, C) => ne((v(), y(D(N.value.col), _({
+                  key: `${l.prop}-${l._originalIndex ?? C}`
+                }, { ref_for: !0 }, l.colAttrs), {
+                  default: w(() => [
+                    X(ue, {
+                      modelValue: e.model[l.prop],
+                      "onUpdate:modelValue": (T) => e.model[l.prop] = T,
+                      "form-item": l,
+                      "form-data": e.model,
+                      "dynamic-comp-events": k.value,
+                      "form-slots": W.value,
+                      index: l._originalIndex ?? C,
+                      onChange: o[0] || (o[0] = (T, U) => r("change", T, U))
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "form-item", "form-data", "dynamic-comp-events", "form-slots", "index"])
+                  ]),
+                  _: 2
+                }, 1040)), [
+                  [oe, S(Z)({ condition: l.vShow, data: i.model, defaultValue: !0 })]
+                ])), 128))
+              ]),
+              _: 1
+            })) : (v(!0), M($, { key: 1 }, j(B.value, (l, C) => ne((v(), y(D(N.value.col), _({
+              key: `${l.prop}-${l._originalIndex ?? C}`
+            }, { ref_for: !0 }, l.colAttrs), {
+              default: w(() => [
+                X(ue, {
+                  modelValue: e.model[l.prop],
+                  "onUpdate:modelValue": (T) => e.model[l.prop] = T,
+                  "form-item": l,
                   "form-data": e.model,
-                  "dynamic-comp-events": d.value,
-                  "form-slots": T.value,
-                  index: E,
-                  onChange: l[0] || (l[0] = (A, D) => t.$emit("change", A, D))
+                  "dynamic-comp-events": k.value,
+                  "form-slots": W.value,
+                  index: l._originalIndex ?? C,
+                  onChange: o[1] || (o[1] = (T, U) => r("change", T, U))
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "form-item", "form-data", "dynamic-comp-events", "form-slots", "index"])
               ]),
               _: 2
             }, 1040)), [
-              [R, w(N)({ condition: r.vShow, data: s.model, defaultValue: !0 })]
+              [oe, S(Z)({ condition: l.vShow, data: i.model, defaultValue: !0 })]
             ])), 128)),
-            B(xe, {
-              inline: c.value.inline,
-              "action-slot": t.$slots.action,
+            X(At, {
+              inline: E.value.inline,
+              "action-slot": n.$slots.action,
               config: e.actionConfig,
-              onAction: S
-            }, null, 8, ["inline", "action-slot", "config"])
+              expanded: I.value,
+              "auto-expand-on-hover": f.value,
+              "on-mouse-enter": S(m),
+              "on-mouse-leave": S(h),
+              onAction: Ie
+            }, null, 8, ["inline", "action-slot", "config", "expanded", "auto-expand-on-hover", "on-mouse-enter", "on-mouse-leave"])
           ]),
           _: 1
         }, 16))
@@ -364,8 +767,8 @@ const Pe = ["comp", "compAttrs", "vIf", "vShow"], Me = {
       _: 1
     }, 16, ["model"]));
   }
-});
+}), Ft = /* @__PURE__ */ ge(St, [["__scopeId", "data-v-b241f6ca"]]);
 export {
-  je as WForm,
-  je as default
+  Ft as WForm,
+  Ft as default
 };