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

package/dist/index.js

@@ -1,70 +1,188 @@
-import { defineComponent as P, createElementBlock as N, openBlock as p, createElementVNode as J, computed as f, withDirectives as Q, createCommentVNode as ae, createBlock as I, unref as V, withCtx as b, Fragment as Z, renderList as B, mergeProps as D, createTextVNode as se, toDisplayString as ie, resolveDynamicComponent as F, vShow as ee, mergeModels as W, useModel as ce, ref as L, watch as G, watchEffect as ue, normalizeProps as te, guardReactiveProps as oe, createSlots as K, renderSlot as me, nextTick as H, useAttrs as fe, useSlots as de, withModifiers as pe, createVNode as q } from "vue";
-import { checkCondition as X } from "@iswangh/element-plus-kit-core";
-import { ElTreeSelect as ve, ElTransfer as ge, ElTimeSelect as he, ElTimePicker as Ce, ElSwitch as Ee, ElSlider as Ie, ElSelectV2 as ye, ElSelect as Ae, ElRate as be, ElRadioGroup as Se, ElMention as we, ElInputTag as Oe, ElInputNumber as ke, ElInput as De, ElDatePicker as Fe, ElDatePickerPanel as Te, ElColorPicker as Me, ElColorPickerPanel as Ve, ElCheckboxGroup as Pe, ElCascader as xe, ElAutocomplete as _e, ElFormItem as ne, ElButton as Be, ElCol as Ne, ElRow as Ue, ElForm as Re } from "element-plus";
-var $e = /* @__PURE__ */ P({
+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 (n, t) => (p(), N("svg", {
+    return (s, t) => (v(), M("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 1024 1024"
     }, [
-      J("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"
       })
     ]));
   }
-}), je = $e, Le = /* @__PURE__ */ P({
+}), ct = ut, ft = /* @__PURE__ */ L({
   name: "Search",
   __name: "search",
   setup(e) {
-    return (n, t) => (p(), N("svg", {
+    return (s, t) => (v(), M("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 1024 1024"
     }, [
-      J("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"
       })
     ]));
   }
-}), ze = Le;
-const We = ["comp", "compAttrs", "vIf", "vShow"], Ge = {
+}), 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"
-}, Ke = {
-  autocomplete: _e,
-  cascader: xe,
-  checkbox: Pe,
-  "color-picker-panel": Ve,
-  "color-picker": Me,
-  "date-picker-panel": Te,
-  "date-picker": Fe,
-  input: De,
-  "input-number": ke,
-  "input-tag": Oe,
-  mention: we,
-  radio: Se,
-  rate: be,
-  select: Ae,
-  "select-v2": ye,
-  slider: Ie,
-  switch: Ee,
-  "time-picker": Ce,
-  "time-select": he,
-  transfer: ge,
-  "tree-select": ve
-}, He = {
-  ...Ke,
-  ...Ge
-}, qe = {
+}, 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: n, compAttrs: t = {} } = e, s = this.getComponentType(n);
+    const { comp: s, compAttrs: t = {} } = e, i = this.getComponentType(s);
     return {
-      ...this.buildComponentAttrs(e, s),
+      ...this.buildComponentAttrs(e, i),
       ...t
       // 用户配置最后合并，优先级最高
     };
@@ -73,178 +191,163 @@ const We = ["comp", "compAttrs", "vIf", "vShow"], Ge = {
    * 判断组件类型
    */
   getComponentType(e) {
-    const n = ["autocomplete", "input", "input-number", "input-tag", "mention"], t = ["cascader", "select", "select-v2", "tree-select"], s = ["date-picker", "time-select", "time-picker"];
-    return n.includes(e) ? "input" : t.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, n) {
-    const { label: t, comp: s } = e, l = t ? `${t}` : "";
-    return n === "input" ? s === "input-number" ? "请输入" : `请输入${l}` : ["select", "picker"].includes(n) ? `请选择${l}` : "";
+  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, n) {
+  buildComponentAttrs(e, s) {
     const t = {};
-    return ["input", "select", "picker"].includes(n) && (t.placeholder = this.generatePlaceholder(e, n), t.clearable = !0), ["select"].includes(n) && (t.filterable = !0), t;
+    return ["input", "select", "picker"].includes(s) && (t.placeholder = this.generatePlaceholder(e, s), t.clearable = !0), ["select"].includes(s) && (t.filterable = !0), t;
   }
-}, Xe = {
+}, Ct = {
   showMessage: !0,
   scrollToError: !0,
-  scrollIntoViewOptions: {
-    behavior: "smooth",
-    // 平滑滚动
-    block: "center",
-    // 垂直居中，让错误项在视窗中间
-    inline: "nearest"
-    // 水平方向保持最近位置
-  }
-}, Ye = {
-  search: { label: "搜索", icon: ze, type: "primary" },
-  reset: { label: "重置", icon: je },
-  submit: { label: "确认", type: "primary" },
-  cancel: { label: "取消" }
-}, Je = {
-  getDefaults(e, n) {
-    return {
-      ...this.buildActionAttrs(e),
-      ...n
-    };
-  },
-  generateActionButtons(e) {
-    return e ? ["search", "reset"] : ["submit", "cancel"];
-  },
-  buildActionAttrs(e) {
-    return {
-      buttons: this.generateActionButtons(e),
-      vIf: e,
-      vShow: !0
-    };
-  }
-}, Qe = /* @__PURE__ */ P({
+  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 n = e, t = f(() => ({
-      ...n,
-      config: { ...Je.getDefaults(n.inline, n.config) }
-    })), s = f(() => {
-      const { buttons: d } = t.value.config;
-      return d.map((m) => {
+  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 v = Ye[m];
-        return v ? { ...v, eventName: m } : { label: m.toUpperCase(), eventName: m };
+        const h = dt[m];
+        return h ? { ...h, eventName: m } : { label: m.toUpperCase(), eventName: m };
       });
-    }), l = (d) => {
-      const { label: m, eventName: v, ...g } = d;
-      return g;
-    };
-    return (d, m) => t.value.config.vIf ? Q((p(), I(V(ne), {
+    });
+    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: b(() => [
-        e.actionSlot ? (p(), I(F(e.actionSlot), {
+      default: w(() => [
+        e.actionSlot ? (v(), y(D(e.actionSlot), {
           key: 1,
           prop: "action"
-        })) : (p(!0), N(Z, { key: 0 }, B(s.value, (v, g) => (p(), I(V(Be), D({
-          key: `${v.label}-${g}`
-        }, { ref_for: !0 }, l(v), {
-          onClick: (T) => d.$emit("action", { eventName: v.eventName })
-        }), {
-          default: b(() => [
-            se(ie(v.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)), [
-      [ee, t.value.config.vShow]
-    ]) : ae("", !0);
+      [oe, r.value.config.vShow]
+    ]) : Ae("", !0);
   }
-});
-function Ze() {
-  let e = !1, n = !1, t = null, s = !1;
-  return {
-    /** 是否正在清理 */
-    get isClearing() {
-      return e;
-    },
-    /** 是否用户交互 */
-    get isUserInteraction() {
-      return n;
-    },
-    /**
-     * 开始清理操作
-     * @param value - 清理前的值
-     */
-    startClearing(l) {
-      e = !0, t = l, s = !0;
-    },
-    /**
-     * 结束清理操作（在 nextTick 中调用）
-     */
-    endClearing() {
-      e = !1, t = null, s = !1;
-    },
-    /**
-     * 开始用户交互
-     */
-    startUserInteraction() {
-      n = !0;
-    },
-    /**
-     * 结束用户交互（在 nextTick 中调用）
-     */
-    endUserInteraction() {
-      n = !1;
-    },
-    /**
-     * 判断是否是清理操作
-     * @param oldValue - 旧值
-     * @param newValue - 新值
-     * @param isEmpty - 检查值是否为空的函数
-     */
-    isClearingOperation(l, d, m) {
-      return !!(e || s || !m(l) && m(d) && l === t);
-    }
+}), 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 re(e, n) {
+function he(e, s) {
   if (!e || e.length === 0)
     return [];
   const t = Array.from(new Set(e));
-  return n ? t.filter((s) => s !== n) : t;
+  return s ? t.filter((i) => i !== s) : t;
 }
-function Y(e, n, t) {
-  const s = re(e, t), l = {};
-  for (const d of s)
-    l[d] = n[d];
-  return l;
+function ie(e, s, t) {
+  const i = he(e, t), r = {};
+  for (const g of i)
+    r[g] = s[g];
+  return r;
 }
-function $(e) {
+function ee(e) {
   return e && typeof e == "object" && typeof e.loader == "function";
 }
-function z(e) {
+function re(e) {
   return e == null || e === "";
 }
-function j(e, n) {
-  return n.length === 0 ? !1 : z(e) ? !0 : n.some((t) => (typeof t == "object" && t !== null ? t.value : t) === 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 et = /* @__PURE__ */ P({
+const ue = /* @__PURE__ */ L({
   name: "ElementPlusKitFormItem",
   __name: "FormItem",
-  props: /* @__PURE__ */ W({
+  props: /* @__PURE__ */ J({
     formItem: {},
     index: {},
     formData: { default: () => ({}) },
@@ -254,171 +357,174 @@ const et = /* @__PURE__ */ P({
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ W(["change"], ["update:modelValue"]),
-  setup(e, { emit: n }) {
-    const t = e, s = n, l = ce(e, "modelValue"), d = f(() => {
-      const o = new Set(We);
+  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(t.formItem).filter(([i]) => !o.has(i))
+        Object.entries(t.formItem).filter(([u]) => !a.has(u))
       );
-    }), m = f(() => t.formSlots.formItemSlots), v = f(() => He[t.formItem.comp] || "div"), g = f(() => ({ prop: t.formItem.prop, formItem: t.formItem, index: t.index })), T = f(() => Object.fromEntries(
-      Object.entries(t.dynamicCompEvents).map(([o, i]) => [
-        o,
-        (...c) => i(g.value, ...c)
+    }), 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)
       ])
-    )), S = L([]), w = L(!1), E = Ze();
-    function O() {
-      if (!z(l.value)) {
-        if (E.isClearing)
+    )), A = Y([]), f = Y(!1), m = lt();
+    function h() {
+      if (!re(r.value)) {
+        if (m.isClearing)
           return;
-        E.startClearing(l.value), l.value = void 0, s("change", g.value, void 0), H(() => {
-          E.endClearing();
+        m.startClearing(r.value), r.value = void 0, i("change", E.value, void 0), q(() => {
+          m.endClearing();
         });
       }
     }
-    function x(o) {
-      E.isClearing || (E.startUserInteraction(), s("change", g.value, o), H(() => {
-        E.endUserInteraction();
+    function F(a) {
+      m.isClearing || (m.startUserInteraction(), i("change", E.value, a), q(() => {
+        m.endUserInteraction();
       }));
     }
-    const h = f(() => {
-      const o = qe.getDefaults(t.formItem), i = t.formItem.compAttrs ?? {}, c = "options" in i;
+    const d = p(() => {
+      const a = Et.getDefaults(t.formItem), u = t.formItem.compAttrs ?? {}, c = "options" in u;
       return {
-        ...o,
-        ...i,
-        ...T.value,
+        ...a,
+        ...u,
+        ...I.value,
         ...c && {
-          options: S.value,
-          loading: w.value
+          options: A.value,
+          loading: f.value
         }
       };
-    }), U = (o) => t.formSlots.dynamicComponentSlots.get(o);
-    async function r(o, i) {
+    });
+    function z(a) {
+      return t.formSlots.dynamicComponentSlots.get(a);
+    }
+    async function V(a, u) {
       try {
-        const c = await o(i);
+        const c = await a(u);
         return Array.isArray(c) ? c : [];
       } catch (c) {
         return console.error(`[FormItem] 加载字段 "${t.formItem.prop}" 的选项失败:`, c), [];
       }
     }
-    function a() {
-      const o = t.formItem.compAttrs?.options;
-      return $(o) ? o : null;
+    function B() {
+      const a = t.formItem.compAttrs?.options;
+      return ee(a) ? a : null;
     }
-    async function u() {
-      const o = t.formItem.compAttrs?.options;
-      if (o && !Array.isArray(o)) {
-        w.value = !0;
+    async function P() {
+      const a = t.formItem.compAttrs?.options;
+      if (a && !Array.isArray(a)) {
+        f.value = !0;
         try {
-          if (typeof o == "function") {
-            const i = await r(o, t.formData ?? {});
-            S.value = i, j(l.value, i) || O();
-          } else if ($(o)) {
-            const { loader: i, deps: c = [] } = o, k = t.formData ?? {}, A = Y(c, k, t.formItem.prop), _ = await r(i, { ...k, ...A });
-            S.value = _, j(l.value, _) || O();
+          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 {
-          w.value = !1;
+          f.value = !1;
         }
       }
     }
-    function C(o) {
-      S.value = o, j(l.value, o) || O();
+    function H(a) {
+      A.value = a, te(r.value, a) || h();
     }
-    function y() {
-      u();
+    function G() {
+      P();
     }
-    function M(o) {
-      const { immediate: i = !1, deps: c = [], loader: k } = o;
+    function W(a) {
+      const { immediate: u = !1, deps: c = [], loader: b } = a;
       if (c.length > 0) {
-        const A = t.formData ?? {}, _ = Y(c, A, t.formItem.prop);
+        const O = t.formData ?? {}, R = ie(c, O, t.formItem.prop);
         try {
-          k({ ...A, ..._ });
+          b({ ...O, ...R });
         } catch {
         }
-        i && u();
+        u && P();
         return;
       }
-      i && u();
+      u && P();
     }
-    const R = f(() => {
-      const o = a();
-      return o ? re(o.deps ?? [], t.formItem.prop) : [];
-    }), le = f(() => {
-      const o = a();
-      return o ? o.immediate ?? !1 : !1;
+    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 G(
+    return Q(
       () => {
-        const o = R.value, i = {};
-        for (const c of o)
-          i[c] = t.formData?.[c];
-        return i;
+        const a = K.value, u = {};
+        for (const c of a)
+          u[c] = t.formData?.[c];
+        return u;
       },
       () => {
-        a() && u();
+        B() && P();
       },
-      { deep: !0, immediate: le.value }
-    ), ue(() => {
-      const o = t.formItem.compAttrs?.options;
-      if (o) {
-        if (Array.isArray(o)) {
-          C(o);
+      { deep: !0, immediate: N.value }
+    ), be(() => {
+      const a = t.formItem.compAttrs?.options;
+      if (a) {
+        if (Array.isArray(a)) {
+          H(a);
           return;
         }
-        if (typeof o == "function") {
-          y();
+        if (typeof a == "function") {
+          G();
           return;
         }
-        $(o) && M(o);
+        ee(a) && W(a);
       }
-    }), G(
-      () => l.value,
-      (o, i) => {
-        E.isClearingOperation(i, o, z) || E.isUserInteraction || o !== i && s("change", g.value, o);
+    }), Q(
+      () => r.value,
+      (a, u) => {
+        m.isClearingOperation(u, a, re) || m.isUserInteraction || a !== u && i("change", E.value, a);
       }
-    ), (o, i) => (p(), I(V(ne), te(oe(d.value)), K({
-      default: b(() => [
-        e.formItem.comp !== "custom" ? (p(), I(F(v.value), D({ key: 0 }, h.value, {
-          modelValue: l.value,
-          "onUpdate:modelValue": i[0] || (i[0] = (c) => l.value = c),
-          onChange: x
-        }), K({ _: 2 }, [
-          B(U(e.formItem.prop) ?? [], (c, k) => ({
+    ), (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: b((A) => [
-              (p(), I(F(c.slotFn), D({
-                value: l.value,
+            fn: w((O) => [
+              (v(), y(D(c.slotFn), _({
+                value: r.value,
                 form: e.formData,
                 "form-item": e.formItem
-              }, A), null, 16, ["value", "form", "form-item"]))
+              }, O), null, 16, ["value", "form", "form-item"]))
             ])
           }))
-        ]), 1040, ["modelValue"])) : me(o.$slots, e.formItem.prop, {
+        ]), 1040, ["modelValue"])) : ce(a.$slots, e.formItem.prop, {
           key: 1,
-          value: l.value,
+          value: r.value,
           form: e.formData,
           formItem: e.formItem
         })
       ]),
       _: 2
     }, [
-      B(m.value, (c, k) => ({
+      j(x.value, (c, b) => ({
         name: c.slotName,
-        fn: b((A) => [
-          (p(), I(F(c.slotFn), D({
-            value: l.value,
+        fn: w((O) => [
+          (v(), y(D(c.slotFn), _({
+            value: r.value,
             form: e.formData,
             "form-item": e.formItem
-          }, A), null, 16, ["value", "form", "form-item"]))
+          }, O), null, 16, ["value", "form", "form-item"]))
         ])
       }))
     ]), 1040));
   }
-}), rt = /* @__PURE__ */ P({
+}), St = /* @__PURE__ */ L({
   name: "WForm",
   __name: "Form",
-  props: {
+  props: /* @__PURE__ */ J({
     formItems: {},
     rowAttrs: { default: () => ({}) },
     actionConfig: { default: () => ({}) },
@@ -437,99 +543,223 @@ const et = /* @__PURE__ */ P({
     validateOnRuleChange: { type: Boolean },
     scrollToError: { type: Boolean },
     scrollIntoViewOptions: {}
-  },
-  emits: ["validate", "change", "action", "search", "reset", "submit", "cancel"],
-  setup(e, { expose: n, emit: t }) {
-    const s = e, l = t, d = fe();
-    function m(r, a) {
-      return r.startsWith("on") && typeof a == "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 v = f(() => Object.fromEntries(
-      Object.entries(d).filter(([r, a]) => m(r, a))
-    )), g = f(() => {
-      const { formItems: r, actionConfig: a, rowAttrs: u, ...C } = s, y = Object.fromEntries(
-        Object.entries(d).filter(([M, R]) => !m(M, R))
+    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 { ...C, ...Xe, ...y };
-    }), T = f(() => {
-      const { span: r } = s?.rowAttrs ?? {};
-      return s.formItems.filter((a) => X({ condition: a.vIf, data: s.model, defaultValue: !0 })).map((a) => {
-        const { colAttrs: u = {} } = a ?? {};
-        return { ...a, colAttrs: { ...u, span: u.span ?? r } };
+      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);
       });
-    }), S = de();
-    function w(r) {
-      return Object.keys(S).filter((a) => a.startsWith(r)).map((a) => ({
-        rawSlotName: a,
-        slotName: a.replace(r, ""),
-        slotFn: S[a]
+    }
+    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 E = f(() => {
-      const r = w("form-item-"), a = /* @__PURE__ */ new Map();
-      for (const u of T.value) {
-        const C = w(`${u.prop}-`);
-        C.length > 0 && a.set(u.prop, C);
+    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: 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 { formItemSlots: r, dynamicComponentSlots: a };
-    }), O = f(() => Object.keys(s.rowAttrs ?? {}).length > 0), x = f(() => ({
-      row: g.value.inline || O.value ? Ue : "div",
-      col: O.value ? Ne : "div"
-    })), h = L();
-    async function U({ eventName: r }) {
-      const a = ["submit", "search"], u = ["cancel", "reset"];
-      if (![...a, ...u].includes(r))
-        return l("action", r);
-      a.includes(r) && await h.value?.validate?.(), u.includes(r) && h.value?.resetFields?.(), l(r), l("action", r);
+      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);
     }
-    return 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 s({
       // element-plus form exposes
       get fields() {
-        return h.value?.fields;
+        return d.value?.fields;
       },
-      getField: (r) => h.value?.getField?.(r),
-      validate: () => h.value?.validate?.(),
-      validateField: (r) => h.value?.validateField?.(r),
-      resetFields: (r) => h.value?.resetFields?.(r),
-      clearValidate: (r) => h.value?.clearValidate?.(r),
-      scrollToField: (r) => h.value?.scrollToField?.(r)
-    }), (r, a) => (p(), I(V(Re), D({
+      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: h
-    }, g.value, {
+      ref: d
+    }, E.value, {
       model: e.model,
-      onValidate: a[1] || (a[1] = (u, C, y) => l("validate", u, C, y)),
-      onSubmit: a[2] || (a[2] = pe(() => {
+      onValidate: Ee,
+      onSubmit: o[2] || (o[2] = Me(() => {
       }, ["prevent"]))
     }), {
-      default: b(() => [
-        (p(), I(F(x.value.row), te(oe(e.rowAttrs)), {
-          default: b(() => [
-            (p(!0), N(Z, null, B(T.value, (u, C) => Q((p(), I(F(x.value.col), D({
-              key: `${u.prop}-${C}`
-            }, { ref_for: !0 }, u.colAttrs), {
-              default: b(() => [
-                q(et, {
-                  modelValue: e.model[u.prop],
-                  "onUpdate:modelValue": (y) => e.model[u.prop] = y,
-                  "form-item": u,
+      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": v.value,
-                  "form-slots": E.value,
-                  index: C,
-                  onChange: a[0] || (a[0] = (y, M) => l("change", y, M))
+                  "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)), [
-              [ee, V(X)({ condition: u.vShow, data: s.model, defaultValue: !0 })]
+              [oe, S(Z)({ condition: l.vShow, data: i.model, defaultValue: !0 })]
             ])), 128)),
-            q(Qe, {
-              inline: g.value.inline,
-              "action-slot": r.$slots.action,
+            X(At, {
+              inline: E.value.inline,
+              "action-slot": n.$slots.action,
               config: e.actionConfig,
-              onAction: U
-            }, 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))
@@ -537,8 +767,8 @@ const et = /* @__PURE__ */ P({
       _: 1
     }, 16, ["model"]));
   }
-});
+}), Ft = /* @__PURE__ */ ge(St, [["__scopeId", "data-v-b241f6ca"]]);
 export {
-  rt as WForm,
-  rt as default
+  Ft as WForm,
+  Ft as default
 };