vft 0.0.375 → 0.0.376

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

@@ -2,12 +2,12 @@ import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "vue";
-import { withInstall } from "../../utils/vue/install.js";
+import { withInstall as t } from "../../utils/vue/install.js";
 import "lodash-es";
-import _sfc_main from "./side-menu.vue2.js";
+import o from "./side-menu.vue2.js";
 import "vue-router";
-const VftSideMenu = withInstall(_sfc_main);
+const s = t(o);
 export {
-  VftSideMenu,
-  VftSideMenu as default
+  s as VftSideMenu,
+  s as default
 };

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

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

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

@@ -1,29 +1,28 @@
-import { defineComponent, toRefs, useSlots, getCurrentInstance, ref, computed, h, createVNode, onMounted, nextTick, watch, isVNode } from "vue";
-import { listenerRouteChange, useRouterHelper } from "@vft/router";
-import { useSortable } from "@vft/use/sortable";
-import { isUrl, isNullOrUndefined, isNumber } from "@vft/utils";
+import { defineComponent as V, toRefs as oe, useSlots as le, getCurrentInstance as ne, ref as g, computed as m, h as b, createVNode as p, onMounted as ae, nextTick as ue, watch as se, isVNode as ie } from "vue";
+import { listenerRouteChange as de, useRouterHelper as re } from "@vft/router";
+import { useSortable as ce } from "@vft/use/sortable";
+import { isUrl as pe, isNullOrUndefined as A, isNumber as fe } from "@vft/utils";
 import "@vueuse/core";
-import { addUnit } from "../../utils/helper.js";
+import { addUnit as W } from "../../utils/helper.js";
 import "lodash-es";
-import { VftIcon } from "../icon/index.js";
-import { VftMenu, VftSubMenu, VftMenuItem } from "../menu/index.js";
-import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { VftIcon as me } from "../icon/index.js";
+import { VftMenu as he, VftSubMenu as ve, VftMenuItem as I } from "../menu/index.js";
+import { useNamespace as ge } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { useDragLine } from "./use-drag-line.js";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+import { useDragLine as be } from "./use-drag-line.js";
+function ye(h) {
+  return typeof h == "function" || Object.prototype.toString.call(h) === "[object Object]" && !ie(h);
 }
-const __default__ = defineComponent({
+const Ce = V({
   name: "vft-side-menu"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
+}), Ie = /* @__PURE__ */ V({
+  ...Ce,
   props: {
     isFixedLeft: {
       type: Boolean,
-      default: true
+      default: !0
     },
     menus: {},
     width: {
@@ -41,297 +40,227 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     },
     showCollapse: {
       type: Boolean,
-      default: false
+      default: !1
     },
     dragOption: {},
     dragWidthCfg: {
       type: [Boolean, Object],
-      default: false
+      default: !1
     },
     useRouterJump: {
       type: Boolean,
-      default: false
+      default: !1
     },
     openDisabled: {
       type: Boolean
     },
     autoScrollActiveDom: {
       type: [Boolean, Number],
-      default: true
+      default: !0
     },
     openMenuCollapse: {
       type: Boolean,
-      default: true
+      default: !0
     },
     collapse: {
       type: Boolean,
-      default: false
+      default: !1
     },
     uniqueOpened: {
       type: Boolean,
-      default: true
+      default: !0
     },
     disabledJudgeTurnOver: {
       type: Boolean,
-      default: false
+      default: !1
     },
     defaultActive: {},
     defaultOpeneds: {}
   },
   emits: ["update:collapse", "update:width", "dragEnd", "dragWidthEnd", "select", "subMenuClick", "menuItemMouseenter", "menuItemMouseleave"],
-  setup(__props, {
-    expose: __expose,
-    emit: __emit
+  setup(h, {
+    expose: J,
+    emit: j
   }) {
-    const props = __props;
-    const {
-      defaultActive,
-      collapse,
-      uniqueOpened,
-      defaultOpeneds,
-      openMenuCollapse
-    } = toRefs(props);
-    const emit = __emit;
-    const ns = useNamespace("side-menu");
-    const slots = useSlots();
-    const instance = getCurrentInstance();
-    const _defaultActive = ref();
-    const _attrMapping = computed(() => {
-      return {
-        path: "path",
-        children: "children",
-        title: "title",
-        index: "path",
-        icon: "icon",
-        disabled: "disabled",
-        ...props.attrMapping
-      };
-    });
-    listenerRouteChange(({
-      route
+    const t = h, {
+      defaultActive: E,
+      collapse: f,
+      uniqueOpened: q,
+      defaultOpeneds: L,
+      openMenuCollapse: P
+    } = oe(t), r = j, u = ge("side-menu"), s = le(), M = ne(), O = g(), n = m(() => ({
+      path: "path",
+      children: "children",
+      title: "title",
+      index: "path",
+      icon: "icon",
+      disabled: "disabled",
+      ...t.attrMapping
+    }));
+    de(({
+      route: e
     }) => {
-      if (!route || route.meta?.hideSide && !props.useRouterJump) {
-        return;
-      }
-      _defaultActive.value = route.path;
+      !e || e.meta?.hideSide && !t.useRouterJump || (O.value = e.path);
     });
-    const handleSubMenuClick = (data) => {
-      const e = data.e;
-      if (props.autoScrollActiveDom && e) {
-        const customTopNum = isNumber(props.autoScrollActiveDom) ? props.autoScrollActiveDom : 0;
-        const activeDom = e.target;
-        if (menuRef.value?.menu && activeDom) {
-          setTimeout(() => {
-            menuRef.value.menu.scrollTop = menuRef.value.menu.scrollTop + (activeDom.getBoundingClientRect().top - menuRef.value.menu.getBoundingClientRect().top) + customTopNum;
-          }, 300);
-        }
+    const H = (e) => {
+      const a = e.e;
+      if (t.autoScrollActiveDom && a) {
+        const o = fe(t.autoScrollActiveDom) ? t.autoScrollActiveDom : 0, l = a.target;
+        v.value?.menu && l && setTimeout(() => {
+          v.value.menu.scrollTop = v.value.menu.scrollTop + (l.getBoundingClientRect().top - v.value.menu.getBoundingClientRect().top) + o;
+        }, 300);
       }
-      emit("subMenuClick", data);
-    };
-    const handleMenuItemMouseEnter = (item) => {
-      emit("menuItemMouseenter", item);
-    };
-    const handleMenuItemMouseLeave = (item) => {
-      emit("menuItemMouseleave", item);
-    };
-    const vSubMenu = (item, itemIndex) => {
-      const _path = item[_attrMapping.value.path];
-      const _title = item[_attrMapping.value.title];
-      const _children = item?.[_attrMapping.value.children];
-      const _index = item?.[_attrMapping.value.index];
-      const _icon = item?.[_attrMapping.value.icon];
-      const _disabledVal = !!item?.[_attrMapping.value.disabled];
-      const _disabled = props.disabledJudgeTurnOver ? !_disabledVal : _disabledVal;
-      const _key = _index || _path || itemIndex + _title;
-      return _children?.length ? h(
+      r("subMenuClick", e);
+    }, U = (e) => {
+      r("menuItemMouseenter", e);
+    }, F = (e) => {
+      r("menuItemMouseleave", e);
+    }, S = (e, a) => {
+      const o = e[n.value.path], l = e[n.value.title], i = e?.[n.value.children], c = e?.[n.value.index], B = e?.[n.value.icon], T = !!e?.[n.value.disabled], D = t.disabledJudgeTurnOver ? !T : T, R = c || o || a + l;
+      return i?.length ? b(
         // @ts-ignore
-        VftSubMenu,
+        ve,
         {
-          ...item,
-          popperAppendToBody: true,
-          key: _key,
-          index: _key,
-          title: _title,
-          icon: _icon,
-          disabled: props.openDisabled && _disabled,
-          popperClass: ns.e("popper")
+          ...e,
+          popperAppendToBody: !0,
+          key: R,
+          index: R,
+          title: l,
+          icon: B,
+          disabled: t.openDisabled && D,
+          popperClass: u.e("popper")
         },
         {
-          default: () => {
-            return _children?.map((subItem, index) => {
-              const subPath = subItem[_attrMapping.value.path];
-              const subIndex = subItem[_attrMapping.value.index];
-              const subIcon = subItem[_attrMapping.value.icon];
-              const subTitle = subItem[_attrMapping.value.title];
-              const subDisabledVal = !!subItem[_attrMapping.value.disabled];
-              const subDisabled = props.disabledJudgeTurnOver ? !subDisabledVal : subDisabledVal;
-              return subItem?.[_attrMapping.value.children]?.length ? vSubMenu(subItem, index) : (
-                // @ts-ignore
-                h(VftMenuItem, {
-                  ...subItem,
-                  key: subIndex || subPath,
-                  index: subIndex || subPath,
-                  route: subPath,
-                  icon: subIcon,
-                  title: subTitle,
-                  disabled: props.openDisabled && subDisabled
-                }, slots.menuItem ? () => slots.menuItem?.({
-                  item: subItem
-                }) : "")
-              );
-            });
-          }
+          default: () => i?.map((d, Q) => {
+            const C = d[n.value.path], k = d[n.value.index], X = d[n.value.icon], ee = d[n.value.title], N = !!d[n.value.disabled], te = t.disabledJudgeTurnOver ? !N : N;
+            return d?.[n.value.children]?.length ? S(d, Q) : (
+              // @ts-ignore
+              b(I, {
+                ...d,
+                key: k || C,
+                index: k || C,
+                route: C,
+                icon: X,
+                title: ee,
+                disabled: t.openDisabled && te
+              }, s.menuItem ? () => s.menuItem?.({
+                item: d
+              }) : "")
+            );
+          })
         }
-      ) : h(VftMenuItem, {
-        ...item,
-        key: _index || _path,
-        index: _index || _path,
-        title: _title,
-        route: _path,
-        icon: _icon,
-        disabled: props.openDisabled && _disabled,
-        onMouseenter: () => handleMenuItemMouseEnter(item),
-        onMouseleave: () => handleMenuItemMouseLeave(item)
-      }, slots.menuItem ? () => slots.menuItem?.({
-        item,
-        index: itemIndex
+      ) : b(I, {
+        ...e,
+        key: c || o,
+        index: c || o,
+        title: l,
+        route: o,
+        icon: B,
+        disabled: t.openDisabled && D,
+        onMouseenter: () => U(e),
+        onMouseleave: () => F(e)
+      }, s.menuItem ? () => s.menuItem?.({
+        item: e,
+        index: a
       }) : "");
-    };
-    const menuRef = ref();
-    const menuStyle = computed(() => {
-      const widthStyle = props.collapseWidth === 0 && collapse.value ? {
+    }, v = g(), Z = m(() => ({
+      ...t.collapseWidth === 0 && f.value ? {
         width: 0
-      } : {};
-      return {
-        ...widthStyle,
-        height: `calc(100% - ${props.menuTopBottomHeight}px)`
-      };
-    });
-    const vMenu = computed(() => {
-      let _slot;
-      return h(createVNode(VftMenu, {
-        "ref": menuRef.value,
-        "onSelect": handleSelect,
-        "onOpen": handleSubMenuClick,
-        "defaultActive": defaultActive?.value || _defaultActive.value,
-        "defaultOpeneds": defaultOpeneds?.value,
-        "class": [ns.e("con"), props.dragOption?.dragClassName ? ns.e(props.dragOption?.dragClassName) : ""],
-        "style": menuStyle.value,
-        "collapse": openMenuCollapse.value ? collapse.value : false,
-        "uniqueOpened": uniqueOpened.value,
-        "collapseTransition": false
-      }, _isSlot(_slot = props.menus.map((item, index) => {
-        return vSubMenu(item, index);
-      })) ? _slot : {
-        default: () => [_slot]
+      } : {},
+      height: `calc(100% - ${t.menuTopBottomHeight}px)`
+    })), $ = m(() => {
+      let e;
+      return b(p(he, {
+        ref: v.value,
+        onSelect: z,
+        onOpen: H,
+        defaultActive: E?.value || O.value,
+        defaultOpeneds: L?.value,
+        class: [u.e("con"), t.dragOption?.dragClassName ? u.e(t.dragOption?.dragClassName) : ""],
+        style: Z.value,
+        collapse: P.value ? f.value : !1,
+        uniqueOpened: q.value,
+        collapseTransition: !1
+      }, ye(e = t.menus.map((a, o) => S(a, o))) ? e : {
+        default: () => [e]
       }));
-    });
-    const _router = instance.appContext.config.globalProperties.$router;
-    async function handleSelect(data) {
-      if (props.useRouterJump) {
+    }), x = M.appContext.config.globalProperties.$router;
+    async function z(e) {
+      if (t.useRouterJump) {
         const {
-          go
-        } = useRouterHelper(_router);
-        const path = data.route;
-        let _path = data.route;
-        if (data.indexPath.some((item) => isUrl(item))) {
-          _path = data.indexPath.slice(-2).join("/");
-        }
-        const linkTarget = _router.getRoutes().filter((item) => item.path === _path)?.[0]?.meta?.linkTarget;
-        if (linkTarget) {
-          go({
-            url: path,
-            winOpenOpt: {
-              target: linkTarget
-            }
-          });
-        } else {
-          go(path);
-        }
+          go: a
+        } = re(x), o = e.route;
+        let l = e.route;
+        e.indexPath.some((c) => pe(c)) && (l = e.indexPath.slice(-2).join("/"));
+        const i = x.getRoutes().filter((c) => c.path === l)?.[0]?.meta?.linkTarget;
+        a(i ? {
+          url: o,
+          winOpenOpt: {
+            target: i
+          }
+        } : o);
       }
-      emit("select", data);
+      r("select", e);
     }
-    onMounted(() => {
-      nextTick(() => {
-        if (props.dragOption?.dragClassName) {
-          const el = document.querySelectorAll("." + ns.e(props.dragOption?.dragClassName))?.[0];
-          const {
-            initSortable
-          } = useSortable(el, {
+    ae(() => {
+      ue(() => {
+        if (t.dragOption?.dragClassName) {
+          const e = document.querySelectorAll("." + u.e(t.dragOption?.dragClassName))?.[0], {
+            initSortable: a
+          } = ce(e, {
             draggable: ".vft-menu-item",
-            onEnd: (evt) => {
+            onEnd: (o) => {
               const {
-                oldIndex,
-                newIndex
-              } = evt;
-              if (isNullOrUndefined(oldIndex) || isNullOrUndefined(newIndex) || oldIndex === newIndex) {
-                return;
-              }
-              emit("dragEnd", oldIndex, newIndex);
+                oldIndex: l,
+                newIndex: i
+              } = o;
+              A(l) || A(i) || l === i || r("dragEnd", l, i);
             },
-            ...props.dragOption
+            ...t.dragOption
           });
-          initSortable();
+          a();
         }
       });
     });
-    const sideRef = ref();
-    const dragBarRef = ref();
-    const beforeCollapseWidth = ref();
-    const style = computed(() => {
-      const collapseZeroStyle = props.collapseWidth === 0 && collapse.value ? {
+    const y = g(), _ = g(), w = g(), Y = m(() => ({
+      ...t.collapseWidth === 0 && f.value ? {
         borderRight: "none"
-      } : {};
-      return {
-        ...collapseZeroStyle,
-        width: addUnit(props.width),
-        height: props.height
-      };
-    });
-    watch(() => collapse.value, (val) => {
-      if (!val) {
-        emit("update:width", beforeCollapseWidth.value || props.width);
-      } else {
-        emit("update:width", props.collapseWidth);
-      }
-      beforeCollapseWidth.value = props.width;
-    });
-    props.dragWidthCfg && useDragLine(sideRef, dragBarRef, instance);
-    const getDragBarStyle = computed(() => {
-      return {
-        left: addUnit(props.width)
-      };
-    });
-    const menuClass = computed(() => [ns.b(), props.isFixedLeft ? ns.m("fixed") : ""]);
-    __expose({
-      sideRef
-    });
-    return () => {
-      return createVNode("div", {
-        "ref": sideRef,
-        "class": menuClass.value,
-        "style": style.value
-      }, [slots.top ? createVNode("div", {
-        "class": ns.e("top")
-      }, [slots.top()]) : null, vMenu.value, slots.bottom ? createVNode("div", {
-        "class": ns.e("bottom")
-      }, [slots.bottom()]) : props.showCollapse ? createVNode("div", {
-        "onClick": () => emit("update:collapse", !collapse.value),
-        "class": [ns.e("bottom"), ns.e("collapse")]
-      }, [createVNode(VftIcon, {
-        "style": {
-          transform: collapse.value ? "rotateY(180deg)" : ""
-        },
-        "size": 20,
-        "icon": "icon-sidebar-collapse"
-      }, null)]) : null, slots.default?.(), props.dragWidthCfg ? createVNode("div", {
-        "ref": dragBarRef,
-        "style": getDragBarStyle.value,
-        "class": ns.e("drag-bar")
-      }, null) : null]);
-    };
+      } : {},
+      width: W(t.width),
+      height: t.height
+    }));
+    se(() => f.value, (e) => {
+      e ? r("update:width", t.collapseWidth) : r("update:width", w.value || t.width), w.value = t.width;
+    }), t.dragWidthCfg && be(y, _, M);
+    const G = m(() => ({
+      left: W(t.width)
+    })), K = m(() => [u.b(), t.isFixedLeft ? u.m("fixed") : ""]);
+    return J({
+      sideRef: y
+    }), () => p("div", {
+      ref: y,
+      class: K.value,
+      style: Y.value
+    }, [s.top ? p("div", {
+      class: u.e("top")
+    }, [s.top()]) : null, $.value, s.bottom ? p("div", {
+      class: u.e("bottom")
+    }, [s.bottom()]) : t.showCollapse ? p("div", {
+      onClick: () => r("update:collapse", !f.value),
+      class: [u.e("bottom"), u.e("collapse")]
+    }, [p(me, {
+      style: {
+        transform: f.value ? "rotateY(180deg)" : ""
+      },
+      size: 20,
+      icon: "icon-sidebar-collapse"
+    }, null)]) : null, s.default?.(), t.dragWidthCfg ? p("div", {
+      ref: _,
+      style: G.value,
+      class: u.e("drag-bar")
+    }, null) : null]);
   }
 });
 export {
-  _sfc_main as default
+  Ie as default
 };

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

@@ -1,63 +1,42 @@
-import { useDebounceFn, useThrottleFn } from "@vft/use";
-import { onMounted, nextTick, unref } from "vue";
-function useDragLine(siderRef, dragBarRef, instance) {
-  const minWidth = instance.props?.dragWidthCfg?.minWidth || 200;
-  onMounted(() => {
-    nextTick(() => {
-      const exec = useDebounceFn(changeWrapWidth, 100);
-      exec();
+import { useDebounceFn as W, useThrottleFn as g } from "@vft/use";
+import { onMounted as x, nextTick as w, unref as u } from "vue";
+function M(f, d, r) {
+  const l = r.props?.dragWidthCfg?.minWidth || 200;
+  x(() => {
+    w(() => {
+      W(a, 100)();
     });
   });
-  function getEl(elRef) {
-    const el = unref(elRef);
-    if (!el) return null;
-    if (Reflect.has(el, "$el")) {
-      return unref(elRef)?.$el;
-    }
-    return unref(elRef);
+  function c(e) {
+    const n = u(e);
+    return n ? Reflect.has(n, "$el") ? u(e)?.$el : u(e) : null;
   }
-  function handleMouseMove(ele, wrap, clientX) {
-    document.onmousemove = function(innerE) {
-      let iT = ele.left + (innerE.clientX - clientX);
-      innerE = innerE || window.event;
-      const maxT = instance.props?.dragWidthCfg?.maxWidth || 800;
-      const minT = unref(minWidth);
-      if (iT <= minT) {
-        return;
-      }
-      iT < 0 && (iT = 0);
-      iT > maxT && (iT = maxT);
-      ele.style.left = iT + "px";
-      const updateWidth = useThrottleFn(() => {
-        instance.emit("update:width", iT);
-      }, 150);
-      updateWidth();
-      return false;
+  function m(e, n, i) {
+    document.onmousemove = function(o) {
+      let t = e.left + (o.clientX - i);
+      o = o || window.event;
+      const s = r.props?.dragWidthCfg?.maxWidth || 800, h = u(l);
+      return t <= h ? void 0 : (t < 0 && (t = 0), t > s && (t = s), e.style.left = t + "px", g(() => {
+        r.emit("update:width", t);
+      }, 150)(), !1);
     };
   }
-  function removeMouseup(ele) {
+  function p(e) {
     document.onmouseup = function() {
-      document.onmousemove = null;
-      document.onmouseup = null;
-      ele.releaseCapture?.();
+      document.onmousemove = null, document.onmouseup = null, e.releaseCapture?.();
     };
   }
-  function changeWrapWidth() {
-    const ele = getEl(dragBarRef);
-    if (!ele) return;
-    const wrap = getEl(siderRef);
-    if (!wrap) return;
-    ele.onmousedown = (e) => {
-      const clientX = e?.clientX;
-      ele.left = ele.offsetLeft;
-      handleMouseMove(ele, wrap, clientX);
-      removeMouseup(ele);
-      ele.setCapture?.();
-      return false;
-    };
+  function a() {
+    const e = c(d);
+    if (!e) return;
+    const n = c(f);
+    n && (e.onmousedown = (i) => {
+      const o = i?.clientX;
+      return e.left = e.offsetLeft, m(e, n, o), p(e), e.setCapture?.(), !1;
+    });
   }
   return {};
 }
 export {
-  useDragLine
+  M as useDragLine
 };