vft 0.0.71 → 0.0.72

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

@@ -1,6 +1,6 @@
-import { defineComponent as T, useSlots as Y, ref as g, computed as m, h as v, onMounted as F, nextTick as G, getCurrentInstance as J, createVNode as f } from "vue";
+import { defineComponent as E, toRefs as ee, useSlots as te, getCurrentInstance as oe, ref as y, computed as g, h as C, createVNode as f, onMounted as le, nextTick as ne, watch as re, isVNode as ie } from "vue";
 import "../divider/index.js";
-import { VftIcon as K } from "../icon/index.js";
+import { VftIcon as ae } from "../icon/index.js";
 import "../avatar/index.js";
 import "../empty/index.js";
 import "../result/index.js";
@@ -9,8 +9,8 @@ import "../popper/index.js";
 import "../collapse-transition/index.js";
 import "../tooltip/index.js";
 import "../popover/index.js";
-import { VftMenu as Q, VftSubMenu as X, VftMenuItem as R } from "../menu/index.js";
-import { isUrl as Z, addUnit as k, isNullOrUndefined as N, removeUnit as I } from "@vft/utils";
+import { VftMenu as pe, VftSubMenu as ue, VftMenuItem as A } from "../menu/index.js";
+import { isUrl as se, isNullOrUndefined as V, addUnit as j, isNumber as de } from "@vft/utils";
 import "../context-menu/context-menu.vue2.js";
 import "../multiple-tabs/index.js";
 import "../header-layout/index.js";
@@ -19,6 +19,7 @@ import "../iframe-layout/index.js";
 import "../router-view-content/index.js";
 import "../logo/index.js";
 import "../back-top/index.js";
+import "../container/index.js";
 import "../config-provider/index.js";
 import "../descriptions/index.js";
 import "../full-screen/index.js";
@@ -56,6 +57,11 @@ import "../image-viewer/index.js";
 import "../list-cell/index.js";
 import "../dialog/index.js";
 import "../date-time-select/index.js";
+import "../col/index.js";
+import "../row/index.js";
+import "../horizontal-menu/index.js";
+import "../time-picker/index.js";
+import "../date-picker/index.js";
 import "../md-container/index.js";
 import "../md-comment/index.js";
 import "../md-tabs/index.js";
@@ -63,73 +69,92 @@ 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 _ } from "../../hooks/use-namespace/index.js";
+import { useNamespace as ce } from "../../hooks/use-namespace/index.js";
 import "@popperjs/core";
 import "lodash";
 import "../../hooks/use-z-index/index.js";
 import "@vueuse/core";
 import "../../utils/ns-cover.js";
-import { listenerRouteChange as ee, useRouterHelper as te } from "@vft/router";
-import { useSortable as oe } from "@vft/use";
-import { useRouter as le } from "vue-router";
-import { useDragLine as ie } from "./use-drag-line.js";
-const a = (
+import { listenerRouteChange as me, useRouterHelper as fe } from "@vft/router";
+import { useSortable as he } from "@vft/use";
+import { useDragLine as ge } from "./use-drag-line.js";
+const p = (
   /* hoist-static*/
-  _("side-menu")
-), ne = T({
-  name: a.b()
-}), Rt = /* @__PURE__ */ T({
-  ...ne,
+  ce("side-menu")
+);
+function ve(v) {
+  return typeof v == "function" || Object.prototype.toString.call(v) === "[object Object]" && !ie(v);
+}
+const be = E({
+  name: p.b()
+}), Ft = /* @__PURE__ */ E({
+  ...be,
   props: {
-    menus: null,
-    uniqueOpened: {
+    isFixedLeft: {
       type: Boolean,
       default: !0
     },
-    collapse: {
-      type: Boolean,
-      default: !1
+    menus: null,
+    width: {
+      default: 200
+    },
+    height: {
+      default: "100%"
     },
-    defaultActive: null,
-    sideWidth: null,
     collapseWidth: {
       default: 50
     },
     attrMapping: null,
-    extraHeight: {
-      default: 100
-    },
     menuTopBottomHeight: {
-      default: 40
+      default: 0
     },
     showCollapse: {
       type: Boolean,
       default: !1
     },
     dragOption: null,
-    dragWidth: {
+    dragWidthCfg: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    useRouterJump: {
       type: Boolean,
       default: !1
     },
-    useMenuSelect: {
+    openDisabled: {
+      type: Boolean
+    },
+    autoScrollActiveDom: {
+      type: [Boolean, Number],
+      default: !0
+    },
+    openMenuCollapse: {
       type: Boolean,
       default: !0
     },
-    openListenRoute: {
+    collapse: {
       type: Boolean,
       default: !1
     },
-    openDisabled: {
-      type: Boolean
+    uniqueOpened: {
+      type: Boolean,
+      default: !0
     },
+    defaultActive: null,
     defaultOpeneds: null
   },
-  emits: ["update:collapse", "update:sideWidth", "dragEnd", "select", "dragWidthEnd"],
-  setup(t, {
-    expose: A,
-    emit: h
+  emits: ["update:collapse", "update:width", "dragEnd", "dragWidthEnd", "select", "subMenuClick", "menuItemMouseenter", "menuItemMouseleave"],
+  setup(v, {
+    expose: I,
+    emit: m
   }) {
-    const c = Y(), y = g(), i = m(() => ({
+    const t = v, {
+      defaultActive: M,
+      collapse: h,
+      uniqueOpened: q,
+      defaultOpeneds: S,
+      openMenuCollapse: L
+    } = ee(t), i = te(), O = oe(), B = y(), a = g(() => ({
       path: "path",
       children: "children",
       title: "title",
@@ -138,103 +163,135 @@ const a = (
       disabled: "disabled",
       ...t.attrMapping
     }));
-    ee((e) => {
-      var o;
-      !e || (o = e.meta) != null && o.hideSide && !t.openListenRoute || (y.value = e.path);
+    me((e) => {
+      var n;
+      !e || (n = e.meta) != null && n.hideSide && !t.useRouterJump || (B.value = e.path);
     });
-    const C = (e, o) => {
-      const l = e[i.value.path], d = e[i.value.title], r = e == null ? void 0 : e[i.value.children], u = e == null ? void 0 : e[i.value.index], p = e == null ? void 0 : e[i.value.icon], s = !(e != null && e[i.value.disabled]);
-      return r != null && r.length ? v(
+    const P = (e) => {
+      var o;
+      const n = e.e;
+      if (t.autoScrollActiveDom && n) {
+        const u = de(t.autoScrollActiveDom) ? t.autoScrollActiveDom : 0, r = n.target;
+        (o = b.value) != null && o.menu && r && setTimeout(() => {
+          b.value.menu.scrollTop = b.value.menu.scrollTop + (r.getBoundingClientRect().top - b.value.menu.getBoundingClientRect().top) + u;
+        }, 300);
+      }
+      m("subMenuClick", e);
+    }, H = (e) => {
+      m("menuItemMouseenter", e);
+    }, J = (e) => {
+      m("menuItemMouseleave", e);
+    }, _ = (e, n) => {
+      const o = e[a.value.path], u = e[a.value.title], r = e == null ? void 0 : e[a.value.children], s = e == null ? void 0 : e[a.value.index], d = e == null ? void 0 : e[a.value.icon], c = !!(e != null && e[a.value.disabled]);
+      return r != null && r.length ? C(
         // @ts-ignore
-        X,
+        ue,
         {
+          ...e,
           popperAppendToBody: !0,
-          key: u || l,
-          index: u || l,
-          title: d,
-          icon: p,
-          popperClass: a.e("popper")
+          key: s || o,
+          index: s || o,
+          title: u,
+          icon: d,
+          class: s || o,
+          disabled: t.openDisabled && c,
+          popperClass: p.e("popper")
         },
         {
-          default: () => r == null ? void 0 : r.map((n, P) => {
-            var M;
-            const x = n[i.value.path], S = n[i.value.index], $ = n[i.value.icon], j = n[i.value.title], z = n[i.value.disabled];
-            return (M = n == null ? void 0 : n[i.value.children]) != null && M.length ? C(n, P) : (
+          default: () => r == null ? void 0 : r.map((l, G) => {
+            var k;
+            const w = l[a.value.path], N = l[a.value.index], K = l[a.value.icon], Q = l[a.value.title], X = !!l[a.value.disabled];
+            return (k = l == null ? void 0 : l[a.value.children]) != null && k.length ? _(l, G) : (
               // @ts-ignore
-              v(R, {
-                key: S || x,
-                index: S || x,
-                route: x,
-                icon: $,
-                title: j,
-                disabled: t.openDisabled && z
-              })
+              C(A, {
+                ...l,
+                key: N || w,
+                index: N || w,
+                route: w,
+                icon: K,
+                title: Q,
+                disabled: t.openDisabled && X
+              }, i.menuItem ? () => {
+                var W;
+                return (W = i.menuItem) == null ? void 0 : W.call(i, {
+                  item: l
+                });
+              } : "")
             );
           })
         }
-      ) : v(R, {
-        key: u || l,
-        index: u || l,
-        title: d,
-        route: l,
-        icon: p,
-        disabled: t.openDisabled && s
-      }, c.menuItem ? () => {
-        var n;
-        return (n = c.menuItem) == null ? void 0 : n.call(c, {
+      ) : C(A, {
+        ...e,
+        key: s || o,
+        index: s || o,
+        title: u,
+        route: o,
+        icon: d,
+        disabled: t.openDisabled && c,
+        onMouseenter: () => H(e),
+        onMouseleave: () => J(e)
+      }, i.menuItem ? () => {
+        var l;
+        return (l = i.menuItem) == null ? void 0 : l.call(i, {
           item: e,
-          index: o
+          index: n
         });
       } : "");
-    }, D = m(() => {
-      var e, o;
-      return v(Q, {
-        onSelect: t.useMenuSelect ? H : () => {
-        },
-        defaultActive: t.defaultActive || y.value,
-        defaultOpeneds: t.defaultOpeneds,
-        class: [a.e("con"), (e = t.dragOption) != null && e.dragClassName ? a.e((o = t.dragOption) == null ? void 0 : o.dragClassName) : ""],
-        style: {
-          height: `calc(100% - ${t.menuTopBottomHeight}px)`
-        },
-        uniqueOpened: t.uniqueOpened,
-        collapse: t.collapse,
-        "collapse-transition": !1
-      }, () => t.menus.map((l, d) => C(l, d)));
-    }), {
-      go: O
-    } = te(), w = le();
-    async function H(e) {
-      var r, u, p;
-      const o = e.route;
-      let l = e.route;
-      e.indexPath.some((s) => Z(s)) && (l = e.indexPath.slice(-2).join("/"));
-      const d = (p = (u = (r = w.getRoutes().filter((s) => s.path === l)) == null ? void 0 : r[0]) == null ? void 0 : u.meta) == null ? void 0 : p.linkTarget;
-      O(d ? {
-        url: o,
-        winOpenOpt: {
-          target: d
-        }
-      } : o), h("select", e);
+    }, b = y(), U = g(() => ({
+      ...t.collapseWidth === 0 && h.value ? {
+        width: 0
+      } : {},
+      height: `calc(100% - ${t.menuTopBottomHeight}px)`
+    })), F = g(() => {
+      var n, o;
+      let e;
+      return C(f(pe, {
+        ref: b,
+        onSelect: Z,
+        onOpen: P,
+        defaultActive: (M == null ? void 0 : M.value) || B.value,
+        defaultOpeneds: S == null ? void 0 : S.value,
+        class: [p.e("con"), (n = t.dragOption) != null && n.dragClassName ? p.e((o = t.dragOption) == null ? void 0 : o.dragClassName) : ""],
+        style: U.value,
+        collapse: L.value ? h.value : !1,
+        uniqueOpened: q.value,
+        collapseTransition: !1
+      }, ve(e = t.menus.map((u, r) => _(u, r))) ? e : {
+        default: () => [e]
+      }));
+    }), R = O.appContext.config.globalProperties.$router;
+    async function Z(e) {
+      var n, o, u;
+      if (t.useRouterJump) {
+        const {
+          go: r
+        } = fe(R), s = e.route;
+        let d = e.route;
+        e.indexPath.some((l) => se(l)) && (d = e.indexPath.slice(-2).join("/"));
+        const c = (u = (o = (n = R.getRoutes().filter((l) => l.path === d)) == null ? void 0 : n[0]) == null ? void 0 : o.meta) == null ? void 0 : u.linkTarget;
+        r(c ? {
+          url: s,
+          winOpenOpt: {
+            target: c
+          }
+        } : s);
+      }
+      m("select", e);
     }
-    const W = g(), V = m(() => ({
-      width: k(t.sideWidth),
-      height: `calc(100% - ${t.extraHeight}px)`
-    })), q = m(() => [a.b(), a.m("fixed")]);
-    F(() => {
-      G(() => {
-        var e, o, l;
+    le(() => {
+      ne(() => {
+        var e, n, o;
         if ((e = t.dragOption) != null && e.dragClassName) {
-          const d = (l = document.querySelectorAll("." + a.e((o = t.dragOption) == null ? void 0 : o.dragClassName))) == null ? void 0 : l[0], {
+          const u = (o = document.querySelectorAll("." + p.e((n = t.dragOption) == null ? void 0 : n.dragClassName))) == null ? void 0 : o[0], {
             initSortable: r
-          } = oe(d, {
+          } = he(u, {
             draggable: ".vft-menu-item",
-            onEnd: (u) => {
+            onEnd: (s) => {
               const {
-                oldIndex: p,
-                newIndex: s
-              } = u;
-              N(p) || N(s) || p === s || h("dragEnd", p, s);
+                oldIndex: d,
+                newIndex: c
+              } = s;
+              V(d) || V(c) || d === c || m("dragEnd", d, c);
             },
             ...t.dragOption
           });
@@ -242,39 +299,48 @@ const a = (
         }
       });
     });
-    const b = g(), B = g(), E = m(() => ({
-      left: k(t.sideWidth)
+    const x = y(), D = y(), T = y(), $ = g(() => ({
+      ...t.collapseWidth === 0 && h.value ? {
+        borderRight: "none"
+      } : {},
+      width: j(t.width),
+      height: t.height
     }));
-    function U() {
-      t.collapse ? h("update:sideWidth", W.value) : (W.value = t.sideWidth, h("update:sideWidth", t.collapseWidth)), h("update:collapse", !t.collapse);
-    }
-    const L = J();
-    return t.dragWidth && ie(b, B, m(() => I(t.collapseWidth)), L, m(() => t.collapse)), A({
-      sideRef: b
-    }), () => f("div", {
-      ref: b,
-      class: q.value,
-      style: V.value
-    }, [c.top ? f("div", {
-      class: a.e("top")
-    }, [c.top()]) : null, D.value, c.bottom ? f("div", {
-      class: a.e("bottom")
-    }, [c.bottom()]) : t.showCollapse ? f("div", {
-      onClick: U,
-      class: [a.e("bottom"), a.e("collapse")]
-    }, [f(K, {
-      style: {
-        transform: t.collapse ? "rotateY(180deg)" : ""
-      },
-      size: 20,
-      icon: "ico-iconoir:sidebar-collapse"
-    }, null)]) : null, t.dragWidth ? f("div", {
-      ref: B,
-      style: E.value,
-      class: a.e("drag-bar")
-    }, null) : null]);
+    re(() => h.value, (e) => {
+      e ? m("update:width", t.collapseWidth) : m("update:width", T.value || t.width), T.value = t.width;
+    }), t.dragWidthCfg && ge(x, D, O);
+    const z = g(() => ({
+      left: j(t.width)
+    })), Y = g(() => [p.b(), t.isFixedLeft ? p.m("fixed") : ""]);
+    return I({
+      sideRef: x
+    }), () => {
+      var e;
+      return f("div", {
+        ref: x,
+        class: Y.value,
+        style: $.value
+      }, [i.top ? f("div", {
+        class: p.e("top")
+      }, [i.top()]) : null, F.value, i.bottom ? f("div", {
+        class: p.e("bottom")
+      }, [i.bottom()]) : t.showCollapse ? f("div", {
+        onClick: () => m("update:collapse", !h.value),
+        class: [p.e("bottom"), p.e("collapse")]
+      }, [f(ae, {
+        style: {
+          transform: h.value ? "rotateY(180deg)" : ""
+        },
+        size: 20,
+        icon: "ico-iconoir:sidebar-collapse"
+      }, null)]) : null, (e = i.default) == null ? void 0 : e.call(i), t.dragWidthCfg ? f("div", {
+        ref: D,
+        style: z.value,
+        class: p.e("drag-bar")
+      }, null) : null]);
+    };
   }
 });
 export {
-  Rt as default
+  Ft as default
 };

package/es/components/side-menu/use-drag-line.js

@@ -1,47 +1,48 @@
-import { useDebounceFn as v } from "@vft/use";
-import { onMounted as x, nextTick as g, unref as r } from "vue";
-function T(l, f, m, s, d) {
-  x(() => {
-    g(() => {
-      v(w, 100)();
+import { useDebounceFn as v, useThrottleFn as T } from "@vft/use";
+import { onMounted as C, nextTick as M, unref as r } from "vue";
+function L(a, l, i) {
+  var s, f;
+  const h = ((f = (s = i.props) == null ? void 0 : s.dragWidthCfg) == null ? void 0 : f.minWidth) || 200;
+  C(() => {
+    M(() => {
+      v(x, 100)();
     });
   });
-  function i(t) {
-    var n;
+  function c(t) {
+    var e;
     const o = r(t);
-    return o ? Reflect.has(o, "$el") ? (n = r(t)) == null ? void 0 : n.$el : r(t) : null;
+    return o ? Reflect.has(o, "$el") ? (e = r(t)) == null ? void 0 : e.$el : r(t) : null;
   }
-  function p(t, o, n) {
+  function W(t, o, e) {
     document.onmousemove = function(u) {
-      let e = t.left + (u.clientX - n);
+      var m, p;
+      let n = t.left + (u.clientX - e);
       u = u || window.event;
-      const a = 800, c = r(m);
-      return e < 0 && (e = 0), e > a && (e = a), e <= c && (e = c, s.emit("update:sideWidth", c), s.emit("update:collapse", !0)), t.style.left = e + "px", !1;
+      const d = ((p = (m = i.props) == null ? void 0 : m.dragWidthCfg) == null ? void 0 : p.maxWidth) || 800, w = r(h);
+      return n <= w ? void 0 : (n < 0 && (n = 0), n > d && (n = d), t.style.left = n + "px", T(() => {
+        i.emit("update:width", n);
+      }, 150)(), !1);
     };
   }
-  function h(t) {
-    const o = i(f), n = i(l);
+  function g(t) {
     document.onmouseup = function() {
-      var e;
-      document.onmousemove = null, document.onmouseup = null, n.style.transition = "width 0.2s";
-      const u = parseInt(o.style.left);
-      u > r(m) && d.value && s.emit("update:collapse", !1), s.emit("update:sideWidth", u), s.emit("dragWidthEnd"), (e = t.releaseCapture) == null || e.call(t);
+      var o;
+      document.onmousemove = null, document.onmouseup = null, (o = t.releaseCapture) == null || o.call(t);
     };
   }
-  function w() {
-    const t = i(f);
+  function x() {
+    const t = c(l);
     if (!t)
       return;
-    const o = i(l);
-    o && (t.onmousedown = (n) => {
-      var e;
-      o.style.transition = "unset";
-      const u = n == null ? void 0 : n.clientX;
-      return t.left = t.offsetLeft, p(t, o, u), h(t), (e = t.setCapture) == null || e.call(t), !1;
+    const o = c(a);
+    o && (t.onmousedown = (e) => {
+      var n;
+      const u = e == null ? void 0 : e.clientX;
+      return t.left = t.offsetLeft, W(t, o, u), g(t), (n = t.setCapture) == null || n.call(t), !1;
     });
   }
   return {};
 }
 export {
-  T as useDragLine
+  L as useDragLine
 };