vft 0.0.43 → 0.0.44

package/es/components/menu/menu.vue2.js

@@ -0,0 +1,206 @@
+import { defineComponent as B, useSlots as J, getCurrentInstance as K, ref as d, computed as Q, watch as O, watchEffect as U, provide as A, reactive as X, onMounted as Y, h as I, nextTick as Z } from "vue";
+import { useResizeObserver as _ } from "@vueuse/core";
+import "@vft/utils";
+import { flattedChildren as ee } from "../../utils/vue/vnode.js";
+import "../../utils/ns-cover.js";
+import { useNamespace as N } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import te from "./utils/menu-bar.js";
+import le from "./menu-collapse-transition.vue.js";
+import ne from "./sub-menu.vue2.js";
+import { useMenuCssVar as oe } from "./use-menu-css-var.js";
+import { VftIcon as ue } from "../icon/index.js";
+const M = (
+  /* hoist-static*/
+  N("menu")
+), ae = B({
+  name: M.b()
+}), Ie = /* @__PURE__ */ B({
+  ...ae,
+  props: {
+    mode: { default: "vertical" },
+    defaultActive: { default: "" },
+    defaultOpeneds: { default: [] },
+    uniqueOpened: { type: Boolean },
+    router: { type: Boolean },
+    menuTrigger: { default: "hover" },
+    collapse: { type: Boolean },
+    backgroundColor: null,
+    textColor: null,
+    activeTextColor: null,
+    collapseTransition: { type: Boolean, default: !0 },
+    ellipsis: { type: Boolean, default: !0 }
+  },
+  emits: [
+    "close",
+    "open",
+    "select"
+  ],
+  setup(l, { expose: W, emit: b }) {
+    const y = J(), v = K(), T = v.appContext.config.globalProperties.$router, s = d(), z = N("sub-menu"), f = d(-1), o = d(
+      l.defaultOpeneds && !l.collapse ? l.defaultOpeneds.slice(0) : []
+    ), u = d(l.defaultActive), c = d({}), h = d({}), E = Q(() => l.mode === "horizontal" || l.mode === "vertical" && l.collapse), V = () => {
+      const e = u.value && c.value[u.value];
+      if (!e || l.mode === "horizontal" || l.collapse)
+        return;
+      e.indexPath.forEach((n) => {
+        const a = h.value[n];
+        a && g(n, a.indexPath);
+      });
+    }, g = (e, t) => {
+      o.value.includes(e) || (l.uniqueOpened && (o.value = o.value.filter((n) => t.includes(n))), o.value.push(e), b("open", e, t));
+    }, S = (e, t) => {
+      const n = o.value.indexOf(e);
+      n !== -1 && o.value.splice(n, 1), b("close", e, t);
+    }, $ = ({ index: e, indexPath: t }) => {
+      o.value.includes(e) ? S(e, t) : g(e, t);
+    }, q = (e) => {
+      (l.mode === "horizontal" || l.collapse) && (o.value = []);
+      const { index: t, indexPath: n } = e;
+      if (!(t === void 0 || n === void 0))
+        if (l.router && T) {
+          const a = e.route || t, m = T.push(a).then((i) => (i || (u.value = t), i));
+          b("select", e, m);
+        } else
+          u.value = t, b("select", e);
+    }, D = (e) => {
+      const t = c.value, n = t[e] || u.value && t[u.value] || t[l.defaultActive];
+      n ? u.value = n.index : u.value = e;
+    }, L = () => {
+      var r;
+      if (!s.value)
+        return -1;
+      const e = Array.from(((r = s.value) == null ? void 0 : r.childNodes) ?? []).filter(
+        (C) => C.nodeName !== "#text" || C.nodeValue
+      ), t = 64, n = Number.parseInt(getComputedStyle(s.value).paddingLeft, 10), a = Number.parseInt(getComputedStyle(s.value).paddingRight, 10), m = s.value.clientWidth - n - a;
+      let i = 0, p = 0;
+      return e.forEach((C, H) => {
+        i += C.offsetWidth || 0, i <= m - t && (p = H + 1);
+      }), p === e.length ? -1 : p;
+    }, F = (e, t = 33.34) => {
+      let n;
+      return () => {
+        n && clearTimeout(n), n = setTimeout(() => {
+          e();
+        }, t);
+      };
+    };
+    let k = !0;
+    const P = () => {
+      const e = () => {
+        f.value = -1, Z(() => {
+          f.value = L();
+        });
+      };
+      k ? e() : F(e)(), k = !1;
+    };
+    O(
+      () => l.defaultActive,
+      (e) => {
+        c.value[e] || (u.value = ""), D(e);
+      }
+    ), O(
+      () => l.collapse,
+      (e) => {
+        e && (o.value = []);
+      }
+    ), O(c.value, V);
+    let x;
+    U(() => {
+      l.mode === "horizontal" && l.ellipsis ? x = _(s, P).stop : x == null || x();
+    });
+    const R = (e) => {
+      h.value[e.index] = e;
+    }, w = (e) => {
+      delete h.value[e.index];
+    }, j = (e) => {
+      c.value[e.index] = e;
+    }, G = (e) => {
+      delete c.value[e.index];
+    };
+    return A(
+      "rootMenu",
+      X({
+        props: v.props,
+        openedMenus: o,
+        items: c,
+        subMenus: h,
+        activeIndex: u,
+        isMenuPopup: E,
+        addMenuItem: j,
+        removeMenuItem: G,
+        addSubMenu: R,
+        removeSubMenu: w,
+        openMenu: g,
+        closeMenu: S,
+        handleMenuItemClick: q,
+        handleSubMenuClick: $
+      })
+    ), A(`subMenu:${v.uid}`, {
+      addSubMenu: R,
+      removeSubMenu: w,
+      mouseInChild: d(!1),
+      // 表示当前是第一级的 sub-menu
+      level: 0
+    }), Y(() => {
+      l.mode === "horizontal" && new te(v.vnode.el, M.namespace.value);
+    }), W({
+      open: (e) => {
+        const { indexPath: t } = h.value[e];
+        t.forEach((n) => g(n, t));
+      },
+      close: S,
+      handleResize: P
+    }), () => {
+      var m;
+      let e = ((m = y.default) == null ? void 0 : m.call(y)) ?? [];
+      const t = [];
+      if (l.mode === "horizontal" && s.value) {
+        const i = ee(e), p = f.value === -1 ? i : i.slice(
+          0,
+          f.value
+        ), r = f.value === -1 ? [] : i.slice(f.value);
+        r != null && r.length && l.ellipsis && (e = p, t.push(
+          I(
+            ne,
+            {
+              index: "sub-menu-more",
+              class: z.e("hide-arrow")
+            },
+            {
+              title: () => I(
+                ue,
+                {
+                  icon: "i-line-md:menu",
+                  class: z.e("icon-more")
+                }
+              ),
+              default: () => r
+            }
+          )
+        ));
+      }
+      const n = oe(v.props, 0), a = I(
+        "ul",
+        {
+          key: String(l.collapse),
+          role: "menubar",
+          ref: s,
+          style: n.value,
+          class: {
+            [M.b()]: !0,
+            [M.m(l.mode)]: !0,
+            [M.m("collapse")]: l.collapse
+          }
+        },
+        [...e, ...t]
+      );
+      return l.collapseTransition && l.mode === "vertical" ? I(le, () => a) : a;
+    };
+  }
+});
+export {
+  Ie as default
+};

package/es/components/menu/sub-menu.vue.js

@@ -0,0 +1,4 @@
+import f from "./sub-menu.vue2.js";
+export {
+  f as default
+};

package/es/components/menu/sub-menu.vue2.js

@@ -0,0 +1,265 @@
+import { defineComponent as Z, getCurrentInstance as Y, computed as n, inject as D, ref as x, reactive as _, watch as ee, provide as oe, onMounted as te, onBeforeUnmount as ne, useSlots as re, h as a, Fragment as le, withDirectives as ae, vShow as ie } from "vue";
+import "../divider/index.js";
+import { VftIcon as H } from "../icon/index.js";
+import "../avatar/index.js";
+import "../empty/index.js";
+import "../result/index.js";
+import "../tabs/index.js";
+import "../popper/index.js";
+import { VftCollapseTransition as ue } from "../collapse-transition/index.js";
+import { VftTooltip as se } from "../tooltip/index.js";
+import "../popover/index.js";
+import "./index.js";
+import { singleAttrToObj as pe, renderTNode as ce } from "@vft/utils";
+import "@vft/use";
+import "../multiple-tabs/multiple-tabs.vue2.js";
+import "@vft/router";
+import "@vft/store";
+import "vue-router";
+import "../header-layout/index.js";
+import "../footer-layout/index.js";
+import "../iframe-layout/index.js";
+import "../router-view-content/index.js";
+import "../logo/index.js";
+import "../back-top/index.js";
+import "../config-provider/index.js";
+import "../descriptions/index.js";
+import "../full-screen/index.js";
+import "../icon-text/index.js";
+import "../image/index.js";
+import "../input/index.js";
+import "../link/index.js";
+import "../pagination/index.js";
+import "../tag/index.js";
+import "../side-menu/index.js";
+import "../qrcode/index.js";
+import "../overlay/index.js";
+import "../clamp/index.js";
+import "../clamp-toggle/index.js";
+import "../page-wrapper/index.js";
+import "../exception/index.js";
+import "../search/index.js";
+import "../md-container/index.js";
+import "../md-comment/index.js";
+import "../md-tabs/index.js";
+import "../md-vue-playground/index.js";
+import "../md-code-demo/index.js";
+import "../md-code-tabs/index.js";
+import "../message/index.js";
+import { useNamespace as I } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import { useTimeoutFn as L } from "@vueuse/core";
+import { throwError as U } from "../../utils/error.js";
+import "../../utils/ns-cover.js";
+import me from "./use-menu.js";
+import { useMenuCssVar as de } from "./use-menu-css-var.js";
+const S = (
+  /* hoist-static*/
+  I("sub-menu")
+), ve = Z({
+  name: S.b()
+}), Co = /* @__PURE__ */ Z({
+  ...ve,
+  props: {
+    index: null,
+    showTimeout: {
+      default: 300
+    },
+    hideTimeout: {
+      default: 300
+    },
+    popperClass: null,
+    disabled: {
+      type: Boolean
+    },
+    popperAppendToBody: {
+      type: Boolean,
+      default: void 0
+    },
+    popperOffset: {
+      default: 6
+    },
+    expandIcon: {
+      default: {}
+    },
+    collapseIcon: {
+      default: {}
+    },
+    title: null,
+    icon: null,
+    showArrow: {
+      type: Boolean,
+      default: !0
+    },
+    toolTipCfg: null
+  },
+  setup(o, {
+    expose: q
+  }) {
+    const v = Y(), {
+      indexPath: h,
+      parentMenu: z
+    } = me(v, n(() => o.index)), u = I("menu"), s = I("sub-menu"), e = D("rootMenu");
+    e || U(S.b(), "can not inject root menu");
+    const i = D(`subMenu:${z.value.uid}`);
+    i || U(S.b(), "can not inject sub menu");
+    const T = x({});
+    let p;
+    const B = x(!1), G = x(), A = x(null), P = n(() => m.value === "horizontal" && M.value ? "bottom-start" : "right-start"), M = n(() => i.level === 0), w = n(() => o.popperAppendToBody === void 0 ? M.value : Boolean(o.popperAppendToBody)), J = n(() => e.props.collapse ? `${u.namespace.value}-zoom-in-left` : `${u.namespace.value}-zoom-in-top`), K = n(() => m.value === "horizontal" && M.value ? ["bottom-start", "bottom-end", "top-start", "top-end", "right-start", "left-start"] : ["right-start", "left-start", "bottom-start", "bottom-end", "top-start", "top-end"]), c = n(() => e.openedMenus.includes(o.index)), f = n(() => {
+      let t = !1;
+      return Object.values(T.value).forEach((l) => {
+        l.active && (t = !0);
+      }), o.index === e.activeIndex && (t = !0), t;
+    }), j = n(() => e.props.backgroundColor || ""), E = n(() => e.props.activeTextColor || ""), F = n(() => e.props.textColor || ""), m = n(() => e.props.mode), C = _({
+      index: o.index,
+      indexPath: h,
+      active: f
+    }), $ = n(() => m.value !== "horizontal" ? {
+      color: F.value
+    } : {
+      borderBottomColor: f.value ? e.props.activeTextColor ? E.value : "" : "transparent",
+      color: f.value ? E.value : F.value
+    }), Q = () => {
+      var t, l, r;
+      return (r = (l = (t = A.value) == null ? void 0 : t.popperRef) == null ? void 0 : l.popperInstanceRef) == null ? void 0 : r.destroy();
+    }, W = (t) => {
+      t || Q();
+    }, O = () => {
+      e.props.menuTrigger === "hover" && e.props.mode === "horizontal" || e.props.collapse && e.props.mode === "vertical" || o.disabled || e.handleSubMenuClick({
+        index: o.index,
+        indexPath: h.value,
+        active: f.value
+      });
+    }, g = (t, l = o.showTimeout) => {
+      var r;
+      t.type !== "focus" && (e.props.menuTrigger === "click" && e.props.mode === "horizontal" || !e.props.collapse && e.props.mode === "vertical" || o.disabled || (i.mouseInChild.value = !0, p == null || p(), {
+        stop: p
+      } = L(() => {
+        e.openMenu(o.index, h.value);
+      }, l), w.value && ((r = z.value.vnode.el) == null || r.dispatchEvent(new MouseEvent("mouseenter")))));
+    }, y = (t = !1) => {
+      var l, r;
+      e.props.menuTrigger === "click" && e.props.mode === "horizontal" || !e.props.collapse && e.props.mode === "vertical" || (p == null || p(), i.mouseInChild.value = !1, {
+        stop: p
+      } = L(() => !B.value && e.closeMenu(o.index, h.value), o.hideTimeout), w.value && t && ((l = v.parent) == null ? void 0 : l.type.name) === "vft-sub-menu" && ((r = i.handleMouseleave) == null || r.call(i, !0)));
+    };
+    ee(() => e.props.collapse, (t) => W(Boolean(t)));
+    {
+      const t = (r) => {
+        T.value[r.index] = r;
+      }, l = (r) => {
+        delete T.value[r.index];
+      };
+      oe(`subMenu:${v.uid}`, {
+        addSubMenu: t,
+        removeSubMenu: l,
+        handleMouseleave: y,
+        mouseInChild: B,
+        level: i.level + 1
+      });
+    }
+    q({
+      opened: c
+    }), te(() => {
+      e.addSubMenu(C), i.addSubMenu(C);
+    }), ne(() => {
+      i.removeSubMenu(C), e.removeSubMenu(C);
+    });
+    const d = re(), X = n(() => m.value === "horizontal" && M.value || m.value === "vertical" && !e.props.collapse ? {
+      icon: "i-ep:arrow-down",
+      size: 20,
+      ...o.expandIcon
+    } : {
+      icon: "i-ep:arrow-right",
+      size: 18,
+      ...o.collapseIcon
+    }), V = n(() => pe(o.icon, "icon")), N = n(() => ce(v, "title"));
+    return () => {
+      var R;
+      const t = [(R = V.value) != null && R.icon ? a(H, {
+        ...V.value
+      }) : null, a("span", {
+        class: o.showArrow ? s.e("text") : "",
+        title: v.props.title
+      }, N.value), o.showArrow ? a(H, {
+        class: s.e("icon-arrow"),
+        ...X.value,
+        style: {
+          transform: c.value ? "rotateZ(180deg)" : "none"
+        }
+      }) : !1], l = de(e.props, i.level + 1), r = e.isMenuPopup ? a(se, {
+        ref: A,
+        visible: c.value,
+        effect: "light",
+        pure: !0,
+        offset: o.popperOffset,
+        showArrow: !1,
+        persistent: !0,
+        popperClass: o.popperClass,
+        placement: P.value,
+        teleported: w.value,
+        fallbackPlacements: K.value,
+        transition: J.value,
+        gpuAcceleration: !1,
+        ...o.toolTipCfg
+      }, {
+        content: () => {
+          var b;
+          return a("div", {
+            class: [u.m(m.value), u.m("popup-container"), o.popperClass],
+            onMouseenter: (k) => g(k, 100),
+            onMouseleave: () => y(!0),
+            onFocus: (k) => g(k, 100)
+          }, [a("ul", {
+            class: [u.b(), u.m("popup"), u.m(`popup-${P.value}`)],
+            style: l.value
+          }, [(b = d.default) == null ? void 0 : b.call(d)])]);
+        },
+        default: () => a("div", {
+          class: s.e("title"),
+          style: [$.value, {
+            backgroundColor: j.value
+          }],
+          onClick: O
+        }, t)
+      }) : (
+        /**
+         *  Fragment 碎片化节点，可以让 dom 没有根节点
+         *
+         *  以下是无需 tooltip 渲染的组件，通常是侧边栏没有折叠的时候
+         */
+        a(le, {}, [N.value ? a("div", {
+          class: s.e("title"),
+          style: [$.value, {
+            backgroundColor: j.value
+          }],
+          ref: G,
+          onClick: O
+        }, t) : null, a(ue, {}, {
+          default: () => {
+            var b;
+            return ae(a("ul", {
+              role: "menu",
+              class: [u.b(), u.m("inline")],
+              style: l.value
+            }, [(b = d.default) == null ? void 0 : b.call(d)]), [[ie, c.value]]);
+          }
+        })])
+      );
+      return a("li", {
+        class: [s.b(), s.is("active", f.value), s.is("opened", c.value), s.is("disabled", o.disabled)],
+        role: "menuitem",
+        ariaHaspopup: !0,
+        ariaExpanded: c.value,
+        onMouseenter: g,
+        onMouseleave: () => y(!0),
+        onFocus: g
+      }, [r]);
+    };
+  }
+});
+export {
+  Co as default
+};

package/es/components/menu/use-menu-css-var.js

@@ -0,0 +1,17 @@
+import { computed as t } from "vue";
+import { useNamespace as m } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+const f = (p, r) => {
+  const o = m("menu");
+  return t(() => o.cssVarBlock({
+    level: `${r}`
+  }));
+};
+export {
+  f as useMenuCssVar
+};

package/es/components/menu/utils/menu-bar.js

@@ -0,0 +1,15 @@
+import i from "./menu-item.js";
+class s {
+  constructor(o, e) {
+    this.domNode = o, this.init(e);
+  }
+  init(o) {
+    const e = this.domNode.childNodes;
+    Array.from(e).forEach((t) => {
+      t.nodeType === 1 && new i(t, o);
+    });
+  }
+}
+export {
+  s as default
+};

package/es/components/menu/utils/menu-item.js

@@ -0,0 +1,41 @@
+import { triggerEvent as u } from "@vft/utils";
+import { EVENT_CODE as s } from "@vft/constants";
+import r from "./submenu.js";
+class m {
+  constructor(e, t) {
+    this.domNode = e, this.submenu = null, this.submenu = null, this.init(t);
+  }
+  init(e) {
+    this.domNode.setAttribute("tabindex", "0");
+    const t = this.domNode.querySelector(`.${e}-menu`);
+    t && (this.submenu = new r(this, t)), this.addListeners();
+  }
+  addListeners() {
+    this.domNode.addEventListener("keydown", (e) => {
+      let t = !1;
+      switch (e.code) {
+        case s.down: {
+          u(e.currentTarget, "mouseenter"), this.submenu && this.submenu.gotoSubIndex(0), t = !0;
+          break;
+        }
+        case s.up: {
+          u(e.currentTarget, "mouseenter"), this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1), t = !0;
+          break;
+        }
+        case s.tab: {
+          u(e.currentTarget, "mouseleave");
+          break;
+        }
+        case s.enter:
+        case s.space: {
+          t = !0, e.currentTarget.click();
+          break;
+        }
+      }
+      t && e.preventDefault();
+    });
+  }
+}
+export {
+  m as default
+};

package/es/components/message/index.js

@@ -0,0 +1,14 @@
+import { withInstallFunction as s } from "../../utils/vue/install.js";
+import "vue";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import e from "./method.js";
+import { messageDefaults as g, messageTypes as l } from "./types.js";
+const p = s(e, "$message");
+export {
+  p as Message,
+  p as VftMessage,
+  p as default,
+  g as messageDefaults,
+  l as messageTypes
+};

package/es/components/message/message.vue.js

@@ -0,0 +1,4 @@
+import f from "./message.vue2.js";
+export {
+  f as default
+};