mwl-components 0.1.2 → 0.1.4

package/dist/index.es.js

@@ -0,0 +1,999 @@
+import { defineComponent as E, useAttrs as ee, ref as w, resolveComponent as y, createBlock as g, openBlock as s, mergeProps as P, withCtx as h, renderSlot as M, useSlots as F, normalizeClass as te, createSlots as U, createElementVNode as D, createElementBlock as b, createCommentVNode as I, toDisplayString as Y, watch as ne, nextTick as oe, computed as T, unref as B, normalizeStyle as V, createTextVNode as X, createVNode as N, mergeModels as ae, useModel as le, getCurrentInstance as K, Fragment as H, renderList as z, resolveDynamicComponent as L, h as O, inject as se, onMounted as G, onUnmounted as re, withDirectives as J, vShow as Q, normalizeProps as ie, guardReactiveProps as ue, withModifiers as ce } from "vue";
+import { configProviderContextKey as de } from "element-plus";
+const me = /* @__PURE__ */ E({
+  name: "EasyButton",
+  inheritAttrs: !1,
+  __name: "index",
+  setup(e) {
+    const { onClick: n, ...t } = ee(), l = w(!1), i = async () => {
+      console.log("Button clicked"), l.value = !0;
+      try {
+        await n?.();
+      } catch (u) {
+        console.error("Error in button onClick handler:", u);
+      } finally {
+        l.value = !1;
+      }
+    };
+    return (u, c) => {
+      const a = y("el-button");
+      return s(), g(a, P(t, {
+        loading: l.value,
+        onClick: i
+      }), {
+        default: h(() => [
+          M(u.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["loading"]);
+    };
+  }
+}), pe = { class: "card-header" }, he = {
+  key: 0,
+  class: "card-header__message"
+}, fe = /* @__PURE__ */ E({
+  name: "ContentWarp",
+  __name: "index",
+  props: {
+    title: String,
+    message: String
+  },
+  setup(e) {
+    const n = F(), t = w("content-wrap");
+    return (l, i) => {
+      const u = y("ElCard");
+      return s(), g(u, {
+        class: te([t.value]),
+        shadow: "never"
+      }, U({
+        default: h(() => [
+          M(l.$slots, "default", {}, void 0, !0)
+        ]),
+        _: 2
+      }, [
+        e.title ? {
+          name: "header",
+          fn: h(() => [
+            D("div", pe, [
+              D("span", null, Y(e.title), 1),
+              e.message ? (s(), b("span", he, Y(e.message), 1)) : I("", !0)
+            ])
+          ]),
+          key: "0"
+        } : void 0,
+        n.footer ? {
+          name: "footer",
+          fn: h(() => [
+            M(l.$slots, "footer", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["class"]);
+    };
+  }
+}), W = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [l, i] of n)
+    t[l] = i;
+  return t;
+}, ye = /* @__PURE__ */ W(fe, [["__scopeId", "data-v-fdaaba5e"]]), ge = { class: "dialog-header" }, ve = /* @__PURE__ */ E({
+  name: "Dialog",
+  __name: "index",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    fullscreen: {
+      type: Boolean,
+      default: !1
+    },
+    scroll: {
+      type: Boolean,
+      default: !1
+    },
+    width: {
+      type: String,
+      default: "61.8%"
+    },
+    maxHeight: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  setup(e) {
+    const n = F(), t = e, l = w(t.fullscreen), i = () => {
+      l.value = !B(l);
+    }, u = w(t.maxHeight);
+    ne(
+      () => l.value,
+      async (a) => {
+        if (await oe(), a) {
+          const o = document.documentElement.offsetHeight;
+          u.value = `${o - 55 - 40 - (n.footer ? 63 : 0)}px`;
+        } else
+          u.value = t.maxHeight;
+      },
+      {
+        immediate: !0
+      }
+    );
+    const c = T(() => {
+      if (t.maxHeight)
+        return {
+          height: B(u)
+        };
+    });
+    return (a, o) => {
+      const m = y("FullScreen"), d = y("el-icon"), f = y("ElScrollbar"), v = y("ElDialog");
+      return s(), g(v, P({
+        "close-on-click-modal": !1,
+        "destroy-on-close": "",
+        draggable: "",
+        "lock-scroll": "",
+        class: "custom-dialog",
+        "append-to-body": ""
+      }, a.$attrs, {
+        fullscreen: l.value,
+        width: e.width
+      }), U({
+        default: h(() => [
+          e.scroll ? (s(), g(f, {
+            key: 0,
+            style: V(c.value)
+          }, {
+            default: h(() => [
+              M(a.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["style"])) : M(a.$slots, "default", { key: 1 })
+        ]),
+        _: 2
+      }, [
+        e.title ? {
+          name: "header",
+          fn: h(() => [
+            D("div", ge, [
+              M(a.$slots, "title", {}, () => [
+                X(Y(e.title), 1)
+              ]),
+              D("div", { onClick: i }, [
+                N(d, { class: "fullScreen" }, {
+                  default: h(() => [
+                    N(m)
+                  ]),
+                  _: 1
+                })
+              ])
+            ])
+          ]),
+          key: "0"
+        } : void 0,
+        n.footer ? {
+          name: "footer",
+          fn: h(() => [
+            M(a.$slots, "footer")
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040, ["fullscreen", "width"]);
+    };
+  }
+}), be = { key: 1 }, xe = (e) => {
+  let n = e.label;
+  if (e.label && typeof e.label == "function" && (n = e.label()), e.type.indexOf("select") > -1 || e.type.indexOf("cascader") > -1 || e.type.indexOf("date") > -1)
+    return `请选择${n}`;
+  if (e.type.indexOf("text") > -1 || e.type.indexOf("number") > -1)
+    return `请输入${n}`;
+}, R = {
+  valueFormat: "YYYY-MM-DD HH:mm:ss",
+  format: "YYYY-MM-DD HH:mm:ss"
+}, ke = (e) => {
+  const { options: n } = e;
+  return {
+    default: () => n?.map((t) => O(y("el-option"), {
+      label: t.label,
+      value: t.value,
+      key: t.value
+    }))
+  };
+}, A = {
+  clearable: !0
+}, Ce = [
+  {
+    type: "slider",
+    component: "el-slider"
+  },
+  {
+    type: "text",
+    component: "el-input",
+    attrs: {
+      ...A
+    }
+  },
+  {
+    type: "textarea",
+    component: "el-input",
+    attrs: {
+      ...A
+    }
+  },
+  {
+    type: "number",
+    component: "el-input-number",
+    attrs: {
+      controlsPosition: "right"
+    }
+  },
+  {
+    type: "switch",
+    component: "el-switch"
+  },
+  {
+    type: "checkbox",
+    component: "el-checkbox-group",
+    slots: (e) => {
+      const { options: n } = e;
+      return {
+        default: () => n?.map((t) => O(
+          y("el-checkbox"),
+          {
+            value: t.value
+          },
+          {
+            default: () => t.label
+          }
+        ))
+      };
+    }
+  },
+  {
+    type: "radio",
+    component: "el-radio-group",
+    slots: (e) => {
+      const { options: n } = e;
+      return {
+        default: () => n?.map((t) => O(
+          y("el-radio"),
+          {
+            value: t.value
+          },
+          {
+            default: () => t.label
+          }
+        ))
+      };
+    }
+  },
+  {
+    type: "select",
+    component: "el-select",
+    slots: ke
+  },
+  {
+    type: "select-v2",
+    component: "el-select-v2"
+  },
+  {
+    type: "tree-select",
+    component: "el-tree-select",
+    attrs: {
+      ...A,
+      checkStrictly: !0,
+      //是否严格的遵循父子不互相关联的做法，默认为 false
+      renderAfterExpand: !0
+      // 是否在第一次展开时即渲染子节点，默认为 false
+    }
+  },
+  {
+    type: "date,dates",
+    component: "el-date-picker",
+    attrs: {
+      showConfirm: !1,
+      valueFormat: "YYYY-MM-DD",
+      format: "YYYY-MM-DD"
+    }
+  },
+  {
+    type: "datetime,week",
+    component: "el-date-picker",
+    attrs: {
+      showConfirm: !1,
+      ...R
+    }
+  },
+  {
+    type: "month,months",
+    component: "el-date-picker",
+    attrs: {
+      showConfirm: !1,
+      valueFormat: "YYYY-MM",
+      format: "YYYY-MM"
+    }
+  },
+  {
+    type: "year,years",
+    component: "el-date-picker",
+    attrs: {
+      showConfirm: !1,
+      valueFormat: "YYYY",
+      format: "YYYY"
+    }
+  },
+  {
+    type: "datetimerange,daterange,monthrange,yearrange",
+    component: "el-date-picker",
+    attrs: {
+      showConfirm: !1,
+      rangeSeparator: "至",
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期",
+      ...R
+    }
+  },
+  {
+    type: "cascader",
+    component: "el-cascader",
+    attrs: {
+      clearable: !0
+    }
+  },
+  {
+    type: "upload",
+    component: "el-upload"
+  },
+  {
+    type: "custom",
+    component: "el-form-item"
+  }
+], we = /* @__PURE__ */ E({
+  name: "EasyForm",
+  __name: "index",
+  props: /* @__PURE__ */ ae({
+    inline: {
+      type: Boolean,
+      default: !0
+    },
+    // // 表单数据对象
+    // formData: {
+    //   type: Object as PropType<Record<string, any>>,
+    //   required: true,
+    // },
+    // 表单项配置数组
+    formItems: {
+      type: Array,
+      default: () => []
+    },
+    // 表单标签宽度
+    labelWidth: {
+      type: [String, Number],
+      default: "120px"
+    },
+    // 表单项宽度
+    itemWidth: {
+      type: [String],
+      default: "200px"
+    }
+  }, {
+    modelValue: {
+      default: {},
+      type: Object
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const n = le(e, "modelValue"), t = K(), l = (a) => {
+      i(a, "formRef");
+    }, i = (a, o) => {
+      if (!a) {
+        delete t?.exposeProxy?.[o], delete t?.exposed?.[o];
+        return;
+      }
+      t.exposeProxy = {
+        ...t?.exposed,
+        [o]: a
+      }, t.exposed = {
+        ...t?.exposed,
+        [o]: a
+      };
+    }, u = F(), c = (a, o, m) => {
+      const { value: d, component: f, ...v } = o, p = Ce.find(
+        (k) => !!a && k.type.indexOf(a) > -1
+      ), _ = p?.component === "el-select" && o.props, x = o.options && !_ ? p?.slots?.(o) : {};
+      if (!p && !o.component)
+        return new Error(`未找到type为${a}的组件且当前也未传递component`);
+      const r = L(p?.component || f);
+      if (r)
+        return O(
+          r,
+          {
+            ...p?.attrs,
+            // 这里的ref还是从配置注入吧。不是每次都要用到ref
+            // ref: (el: any) => {
+            //   setRefs(el, formItem.prop)
+            // },
+            ...v,
+            //外部传入的 优先级最高
+            placeholder: v.placeholder || xe(o)
+          },
+          { ...x, ...m }
+        );
+    };
+    return (a, o) => {
+      const m = y("el-form-item"), d = y("el-form");
+      return s(), g(d, P({
+        model: n.value,
+        "label-width": e.labelWidth,
+        inline: e.inline,
+        "scroll-to-error": !0
+      }, { ...a.$attrs }, {
+        ref: l,
+        class: "easy-form"
+      }), {
+        default: h(() => [
+          (s(!0), b(H, null, z(e.formItems, ({ id: f, type: v, rule: p, width: _, slots: x, ...r }, k) => (s(), b(H, null, [
+            v != "custom" && !r.hidden ? (s(), g(m, {
+              prop: r.prop,
+              key: k,
+              "label-width": r.labelWidth,
+              rules: p,
+              required: r.required
+            }, {
+              label: h(() => [
+                r.label && typeof r.label == "function" ? (s(), g(L(r.label), { key: 0 })) : (s(), b("span", be, Y(r.label), 1))
+              ]),
+              default: h(() => [
+                u[r.prop] ? M(a.$slots, r.prop, {
+                  key: 0,
+                  item: r
+                }, void 0, !0) : (s(), g(L(c(v, { ...r, type: v }, x)), {
+                  key: 1,
+                  modelValue: n.value[r.prop],
+                  "onUpdate:modelValue": (C) => n.value[r.prop] = C,
+                  modelModifiers: { trim: !0 },
+                  style: V({ width: _ || e.itemWidth })
+                }, null, 8, ["modelValue", "onUpdate:modelValue", "style"]))
+              ]),
+              _: 2
+            }, 1032, ["prop", "label-width", "rules", "required"])) : I("", !0),
+            v == "custom" ? (s(), b(H, { key: 1 }, [
+              x?.[r.prop] ? (s(), g(L(x[r.prop]), { key: 0 })) : M(a.$slots, r.prop, {
+                key: 1,
+                item: { width: _, rule: p, ...r }
+              }, void 0, !0)
+            ], 64)) : I("", !0)
+          ], 64))), 256)),
+          u.append ? (s(), g(m, { key: 0 }, {
+            default: h(() => [
+              M(a.$slots, "append", {}, void 0, !0)
+            ]),
+            _: 3
+          })) : I("", !0)
+        ]),
+        _: 3
+      }, 16, ["model", "label-width", "inline"]);
+    };
+  }
+}), _e = /* @__PURE__ */ W(we, [["__scopeId", "data-v-ebcd5674"]]), Se = /* @__PURE__ */ E({
+  name: "EasyTable",
+  __name: "index",
+  props: {
+    data: {
+      type: Array,
+      required: !0,
+      default: () => []
+    },
+    tableColumns: {
+      type: Array,
+      default: () => []
+    },
+    buttons: {
+      type: Array,
+      default: () => []
+    },
+    buttonWidth: {
+      type: [Number, String],
+      default: 120
+    },
+    align: {
+      type: String,
+      default: "center"
+    },
+    height: {
+      type: Number || String,
+      default: void 0
+    },
+    maxHeight: {
+      type: String || Number,
+      default: void 0
+    },
+    footerHeight: {
+      type: Number,
+      default: 65
+    }
+  },
+  setup(e) {
+    const n = se(de), t = e, l = T(() => t.buttonWidth.toString().indexOf("px") > -1 ? t.buttonWidth.toString().slice(0, -2) : t.buttonWidth), i = w(), u = w("auto");
+    let c = K();
+    const a = () => {
+      let p = "auto";
+      if (c?.parent?.attrs?.class?.indexOf("content-wrap") > -1) {
+        let r = t.footerHeight;
+        n?.value?.size === "small" ? r = r - 8 : n?.value?.size === "large" && (r = r + 8);
+        try {
+          const k = c?.refs.tableRef, { top: C } = k?.getBoundingClientRect();
+          p = document.documentElement.clientHeight - C - r - 20;
+        } catch {
+        }
+        return p;
+      }
+      return p;
+    }, o = w(), m = () => {
+      o.value && clearTimeout(o.value), o.value = setTimeout(() => {
+        u.value = a(), o.value = null;
+      }, 100);
+    };
+    G(() => {
+      u.value = a(), window.addEventListener("resize", m);
+    }), re(() => {
+      window.removeEventListener("resize", m);
+    });
+    const d = y("el-table-column"), f = F(), v = (p) => {
+      const { slots: _ = {}, children: x = [], ...r } = p;
+      if (x && x.length > 0) {
+        const k = x.map((C) => v(C));
+        return O(
+          d,
+          {
+            align: t.align,
+            ...r
+          },
+          // default 插槽默认使用 childrenNode 不能被slots 覆盖
+          { ..._, default: () => k }
+        );
+      }
+      return O(
+        d,
+        {
+          align: t.align,
+          ...r
+        },
+        // 最里层的表格列 default 插槽  slots传递的优先级最高 模版直接传递的可被 slots 覆盖
+        {
+          default: (k) => f[p.prop] && f[p.prop](k),
+          ..._
+        }
+      );
+    };
+    return (p, _) => {
+      const x = y("el-button"), r = y("el-table-column"), k = y("el-table");
+      return s(), b("div", {
+        ref_key: "tableRef",
+        ref: i
+      }, [
+        N(k, P({ style: { width: "100%" } }, p.$attrs, {
+          data: e.data,
+          height: e.height,
+          maxHeight: e.maxHeight ? e.maxHeight : u.value
+        }), {
+          default: h(() => [
+            (s(!0), b(H, null, z(e.tableColumns, (C, $) => (s(), g(L(v(C)), { key: $ }))), 128)),
+            e.buttons && e.buttons.length ? (s(), g(r, {
+              key: 0,
+              align: "center",
+              fixed: "right",
+              label: "操作",
+              width: l.value
+            }, {
+              default: h((C) => [
+                (s(!0), b(H, null, z(e.buttons, ($, Z) => J((s(), g(x, P({ ref_for: !0 }, { ...$ }, {
+                  key: Z,
+                  type: $.type.includes("del") ? "danger" : "primary",
+                  onClick: () => {
+                    $.click?.(C.row);
+                  },
+                  disabled: $.disabled?.(C.row) || !1,
+                  link: $.link?.(C.row) || !0
+                }), {
+                  default: h(() => [
+                    X(Y($.label), 1)
+                  ]),
+                  _: 2
+                }, 1040, ["type", "onClick", "disabled", "link"])), [
+                  [Q, $.show?.(C.row) || !0]
+                ])), 128))
+              ]),
+              _: 1
+            }, 8, ["width"])) : I("", !0)
+          ]),
+          _: 1
+        }, 16, ["data", "height", "maxHeight"])
+      ], 512);
+    };
+  }
+}), Me = /* @__PURE__ */ W(Se, [["__scopeId", "data-v-1c87357b"]]), $e = {
+  name: "",
+  components: {},
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    }
+  }
+};
+function Ee(e, n, t, l, i, u) {
+  return t.icon ? (s(), g(L(t.icon), {
+    key: 0,
+    class: "menu_icon"
+  })) : I("", !0);
+}
+const j = /* @__PURE__ */ W($e, [["render", Ee], ["__scopeId", "data-v-261ce99a"]]), He = /* @__PURE__ */ E({
+  name: "subMenu",
+  __name: "subMenu",
+  props: {
+    routeData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["handleMenuItemClick"],
+  setup(e, { emit: n }) {
+    const t = n;
+    function l(i) {
+      t("handleMenuItemClick", i);
+    }
+    return (i, u) => {
+      const c = y("subMenu", !0), a = y("el-sub-menu"), o = y("el-menu-item");
+      return e.routeData.children && e.routeData.children.length > 0 ? (s(), g(a, {
+        key: 0,
+        index: e.routeData.path
+      }, {
+        title: h(() => [
+          N(j, {
+            icon: e.routeData.meta.icon
+          }, null, 8, ["icon"]),
+          D("span", null, Y(e.routeData.meta.title), 1)
+        ]),
+        default: h(() => [
+          (s(!0), b(H, null, z(e.routeData.children, (m, d) => (s(), g(c, {
+            onHandleMenuItemClick: l,
+            routeData: m,
+            key: d
+          }, null, 8, ["routeData"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["index"])) : (s(), b("div", {
+        key: 1,
+        onClick: u[0] || (u[0] = (m) => l(e.routeData))
+      }, [
+        N(o, {
+          index: e.routeData.path
+        }, {
+          title: h(() => [
+            D("span", null, Y(e.routeData.meta.title), 1)
+          ]),
+          default: h(() => [
+            N(j, {
+              icon: e.routeData.meta.icon
+            }, null, 8, ["icon"])
+          ]),
+          _: 1
+        }, 8, ["index"])
+      ]));
+    };
+  }
+}), Ye = /* @__PURE__ */ E({
+  name: "MenuTree",
+  __name: "index",
+  props: {
+    menuList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["handleMenuItemClick"],
+  setup(e, { emit: n }) {
+    const t = n, l = (i) => {
+      t("handleMenuItemClick", i);
+    };
+    return (i, u) => {
+      const c = y("el-menu");
+      return s(), g(c, ie(ue(i.$attrs)), {
+        default: h(() => [
+          (s(!0), b(H, null, z(e.menuList, (a) => (s(), g(He, {
+            routeData: a,
+            onHandleMenuItemClick: l
+          }, null, 8, ["routeData"]))), 256))
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+}), De = /* @__PURE__ */ E({
+  name: "Pagination",
+  __name: "index",
+  props: {
+    // 总条目数
+    total: {
+      required: !0,
+      type: Number
+    },
+    // 当前页数：pageNo
+    page: {
+      type: Number,
+      default: 1
+    },
+    // 每页显示条目个数：pageSize
+    limit: {
+      type: Number,
+      default: 20
+    },
+    // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
+    // 移动端页码按钮的数量端默认值 5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    onPagination: { type: Function }
+  },
+  emits: ["update:page", "update:limit", "pagination"],
+  setup(e, { emit: n }) {
+    const t = e, l = n, i = T({
+      get() {
+        return t.page;
+      },
+      set(o) {
+        l("update:page", o);
+      }
+    }), u = T({
+      get() {
+        return t.limit;
+      },
+      set(o) {
+        l("update:limit", o);
+      }
+    }), c = (o) => {
+      i.value * o > t.total && (i.value = 1), l("pagination", { page: i.value, limit: o });
+    }, a = (o) => {
+      l("pagination", { page: o, limit: u.value });
+    };
+    return (o, m) => {
+      const d = y("el-pagination");
+      return J((s(), g(d, {
+        "current-page": i.value,
+        "onUpdate:currentPage": m[0] || (m[0] = (f) => i.value = f),
+        "page-size": u.value,
+        "onUpdate:pageSize": m[1] || (m[1] = (f) => u.value = f),
+        background: !0,
+        "page-sizes": [10, 20, 30, 50, 100],
+        "pager-count": e.pagerCount,
+        total: e.total,
+        class: "pagination",
+        layout: "total, sizes, prev, pager, next, jumper",
+        onSizeChange: c,
+        onCurrentChange: a
+      }, null, 8, ["current-page", "page-size", "pager-count", "total"])), [
+        [Q, e.total > 0]
+      ]);
+    };
+  }
+}), Le = /* @__PURE__ */ W(De, [["__scopeId", "data-v-1e34e383"]]), Ie = ["onClick", "onMouseover"], Ne = /* @__PURE__ */ E({
+  name: "EasyContextMenu",
+  __name: "index",
+  props: {
+    // 菜单列表
+    menuList: {
+      type: Array,
+      default: () => []
+    },
+    // 菜单最大高度
+    maxHeight: {
+      type: [String, Number],
+      default: 200
+    },
+    // 菜单背景颜色
+    backgroundColor: {
+      type: String,
+      default: "#fff"
+    },
+    // 当前hover的菜单样式
+    hoverItemStyle: {
+      type: Object,
+      default: () => ({
+        backgroundColor: "#ddd"
+      })
+    },
+    // 菜单显示动画曲线
+    animationCurve: {
+      type: String,
+      default: "linear"
+    }
+  },
+  setup(e) {
+    const n = e, t = w(-1), l = w(!1), i = w({ x: 0, y: 0 }), u = (d) => {
+      l.value = !1, d.preventDefault(), d.stopPropagation(), setTimeout(() => {
+        l.value = !0;
+        const { clientX: f, clientY: v } = d;
+        i.value = { x: f, y: v }, c.value?.scrollTo(0, 0);
+      }, 0);
+    }, c = w(null), a = w(null);
+    G(() => {
+      const d = a.value?.parentElement;
+      d?.addEventListener("contextmenu", u), document.addEventListener("click", () => {
+        l.value = !1;
+      }), d?.addEventListener("blur", () => {
+        console.log("blur"), l.value = !1;
+      });
+    });
+    const o = T(() => n.maxHeight == "auto" ? "auto" : n.maxHeight.toString().indexOf("px") > -1 ? n.maxHeight : `${n.maxHeight}px`), m = T(() => ({
+      backgroundColor: n.backgroundColor,
+      left: `${i.value.x}px`,
+      top: `${i.value.y}px`,
+      maxHeight: l.value ? o.value : "0px",
+      transition: l.value ? `max-height .2s ${n.animationCurve}` : "none"
+    }));
+    return (d, f) => (s(), b("div", {
+      ref_key: "contextMenu",
+      ref: a
+    }, [
+      D("div", P({ class: "easy-context-menu" }, d.$attrs, {
+        style: { ...B(m) },
+        ref_key: "menuListRef",
+        ref: c
+      }), [
+        (s(!0), b(H, null, z(e.menuList, (v, p) => (s(), b("div", {
+          key: p,
+          onContextmenu: f[0] || (f[0] = ce(() => {
+          }, ["stop"])),
+          onClick: v.onClick,
+          onMouseover: (_) => t.value = p,
+          onMouseout: f[1] || (f[1] = (_) => t.value = -1),
+          style: V(B(t) === p ? n.hoverItemStyle : "")
+        }, Y(v.label), 45, Ie))), 128))
+      ], 16)
+    ], 512));
+  }
+}), Pe = /* @__PURE__ */ W(Ne, [["__scopeId", "data-v-f9f5bc05"]]);
+class S {
+  // 右键菜单的节点
+  vnode = null;
+  // 右键菜单的配置
+  #e = {
+    bindEvent: !0
+    //初始化绑定事件
+  };
+  // 右键菜单的默认样式
+  defaultStyle = {
+    position: "fixed",
+    "z-index": 1e3,
+    "border-radius": "4px",
+    color: "#666",
+    "font-size": "14px",
+    "min-width": "100px",
+    "box-shadow": "1px 1px 11px 0px #a6b5ba",
+    "background-color": "#fff",
+    padding: "4px",
+    overflow: "hidden"
+  };
+  // 右键菜单hover的样式
+  hoverStyle = {
+    "background-color": "#8f9f80ff"
+  };
+  // 当前右键菜单的dom节点
+  menu = null;
+  // 实例
+  static #t = null;
+  static getInstance() {
+    return S.#t || (S.#t = new S()), S.#t;
+  }
+  constructor() {
+    S.#t || (S.#t = this);
+  }
+  create(n) {
+    const t = S.getInstance();
+    return t.vnode !== n.target && t.destroy(), t.vnode = n.target || null, t.#e = { ...t.#e, ...n }, t.#o(), t;
+  }
+  // 初始化
+  #o() {
+    this.defaultStyle = { ...this.defaultStyle, ...this.#e.style }, this.hoverStyle = { ...this.hoverStyle, ...this.#e.hoverStyle }, this.vnode && this.vnode?.addEventListener(this.#e.event || "contextmenu", this.showMenu), document.addEventListener("click", this.hideMenu), document.addEventListener("keydown", this.hideMenu);
+  }
+  // 销毁右键菜单
+  destroy() {
+    this.vnode?.removeEventListener(this.#e.event || "contextmenu", this.showMenu), document.removeEventListener("click", this.hideMenu), document.removeEventListener("keydown", this.hideMenu), this.resetContextMenu();
+  }
+  // 重置右键菜单
+  resetContextMenu() {
+    this.#e.appendToBody ? this.menu && document.body.removeChild(this.menu) : this.vnode?.contains(this.menu) && this.menu && this.vnode?.removeChild(this.menu), this.menu = null;
+  }
+  // 隐藏右键菜单
+  #n() {
+    this.menu && (this.menu.style.transition = "none", this.menu.style.maxHeight = "0", this.menu.style.display = "none");
+  }
+  /**
+   * 这个函数的用途写在这里
+   * @param {menuList Array<MenuItem> } 右键菜单的列表
+   */
+  setMenuList(n) {
+    this.#e.menuList = n;
+  }
+  /**
+   * 手动显示右键菜单 需要传入一个事件对象
+   */
+  showMenu(n) {
+    S.#t.#a(n);
+  }
+  /**
+   * 隐藏右键菜单
+   */
+  hideMenu() {
+    S.#t.#n();
+  }
+  // 显示右键菜单
+  #a(n) {
+    if (n.preventDefault(), n.stopPropagation(), this.#e.menuList.length === 0)
+      return;
+    if (this.vnode || (this.vnode = n.target), console.log(this, "this"), this.#n(), !this.menu) {
+      const c = document.createElement("div");
+      c.className = this.#e.classNames || "", this.menu = c, this.#e.menuList.forEach((a) => {
+        const o = document.createElement("div");
+        if (!a.label && a.divider) {
+          o.style = "padding: 0; margin: 5px 0; border-top: 1px solid #e6e6e6;", c.appendChild(o);
+          return;
+        }
+        const m = ";padding: 5px 10px; cursor: pointer;";
+        if (o.style = m, o.innerText = a.label, a.disabled) {
+          o.style.cssText += "color: #ccc; cursor: not-allowed;", c.appendChild(o);
+          return;
+        }
+        c.appendChild(o), o.addEventListener("click", (d) => {
+          n.stopPropagation(), a.onClick && a.onClick(d), this.#n();
+        }), o.addEventListener("mouseover", () => {
+          o.style.cssText = Object.entries(this.hoverStyle).map(([d, f]) => `${d}:${f}`).join(";") + m;
+        }), o.addEventListener("mouseout", () => {
+          o.style = m;
+        });
+      }), this.#e.appendToBody ? document.body.appendChild(c) : this.vnode?.appendChild(c);
+    }
+    const { clientX: t, clientY: l } = n, i = {
+      display: "block",
+      ...this.defaultStyle,
+      left: `${t}px`,
+      top: `${l}px`
+    };
+    let u = Object.entries(i).map(([c, a]) => `${c}:${a}`).join(";");
+    this.menu.style.cssText = u, this.menu.style.transition = "none", this.menu.style.maxHeight = "0", setTimeout(() => {
+      this.menu && (this.menu.style.maxHeight = `${this.#e.style?.["max-height"] || "200px"}`, this.menu.style.transition = `${this.#e.style?.transition || "max-height 0.1s ease-in-out"}`);
+    }, 0), this.menu.scrollTo(0, 0);
+  }
+}
+const Be = S.getInstance(), Te = [
+  me,
+  ye,
+  ve,
+  _e,
+  // EasyFormH,
+  Me,
+  Ye,
+  Le,
+  Pe
+], q = [], ze = (e, n) => {
+  Te.forEach((t) => {
+    q.push(t.name), e.component(t.name, t);
+  }), console.log("mwl-components", q);
+}, Fe = { install: ze };
+export {
+  ye as ContentWarp,
+  Be as ContextMenu,
+  ve as Dialog,
+  me as EasyButton,
+  Pe as EasyContextMenu,
+  _e as EasyForm,
+  Me as EasyTable,
+  Ye as MenuTree,
+  Le as Pagination,
+  Ce as componentsMap,
+  Fe as default,
+  xe as getPlaceholder,
+  ze as install
+};