vft 0.0.482 → 0.0.485

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

@@ -1,7 +1,7 @@
-import { defineComponent as E, useSlots as X, getCurrentInstance as Y, ref as i, computed as Z, watch as y, watchEffect as _, provide as N, reactive as ee, onMounted as te, h as g, nextTick as ne } from "vue";
-import { isNullOrUndefined as R, isMobile as le } from "@vft/utils";
-import { VftIcon as oe } from "../icon/index.js";
-import { useResizeObserver as ue } from "@vueuse/core";
+import { defineComponent as E, useSlots as X, getCurrentInstance as Y, ref as i, computed as Z, watch as x, watchEffect as _, provide as N, reactive as ee, onMounted as te, h as g, nextTick as le } from "vue";
+import { VftIcon as ne } from "../icon/index.js";
+import { useResizeObserver as oe } from "@vueuse/core";
+import { isNullOrUndefined as R, isMobile as ue } from "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
 import { flattedChildren as ae } from "../../utils/vue/vnode.js";
@@ -30,104 +30,108 @@ const de = E({
     ellipsis: { type: Boolean, default: !0 },
     horizontalMenuProps: {},
     persistent: { type: Boolean, default: !0 },
-    disableSubMenuAction: { type: Boolean, default: !1 }
+    disableSubMenuAction: { type: Boolean, default: !1 },
+    backgroundColor: {},
+    textColor: {},
+    activeTextColor: {},
+    collapseType: {}
   },
   emits: ["update:collapse", "sub-menu-click", "select", "close", "open"],
-  setup(n, { expose: W, emit: V }) {
-    const v = V, M = w("menu"), $ = X(), h = Y(), I = h.appContext.config.globalProperties.$router, s = i(), z = w("sub-menu"), f = i(-1), a = i(
-      n.defaultOpeneds && !n.collapse ? n.defaultOpeneds.slice(0) : []
-    ), u = i(n.defaultActive), r = i({}), p = i({}), q = Z(() => n.mode === "horizontal" || n.mode === "vertical" && n.collapse), D = () => {
+  setup(t, { expose: W, emit: $ }) {
+    const v = $, p = w("menu"), V = X(), h = Y(), T = h.appContext.config.globalProperties.$router, s = i(), C = w("sub-menu"), f = i(-1), a = i(
+      t.defaultOpeneds && !t.collapse ? t.defaultOpeneds.slice(0) : []
+    ), u = i(t.defaultActive), r = i({}), M = i({}), q = Z(() => t.mode === "horizontal" || t.mode === "vertical" && t.collapse), D = () => {
       const e = u.value && r.value[u.value];
-      if (!e || n.mode === "horizontal" || n.collapse) return;
-      e.indexPath.forEach((l) => {
-        const o = p.value[l];
-        o && b(l, o.indexPath);
+      if (!e || t.mode === "horizontal" || t.collapse) return;
+      e.indexPath.forEach((n) => {
+        const o = M.value[n];
+        o && b(n, o.indexPath);
       });
-    }, b = (e, t, l) => {
-      a.value.includes(e) || (n.uniqueOpened && (a.value = a.value.filter(
-        (o) => t.includes(o)
-      )), a.value.push(e), v("open", { index: e, indexPath: t, e: l }));
-    }, x = (e, t, l) => {
+    }, b = (e, l, n) => {
+      a.value.includes(e) || (t.uniqueOpened && (a.value = a.value.filter(
+        (o) => l.includes(o)
+      )), a.value.push(e), v("open", { index: e, indexPath: l, e: n }));
+    }, y = (e, l, n) => {
       const o = a.value.indexOf(e);
-      o !== -1 && a.value.splice(o, 1), v("close", { index: e, indexPath: t, event: l });
+      o !== -1 && a.value.splice(o, 1), v("close", { index: e, indexPath: l, event: n });
     }, L = ({
       e,
-      index: t,
-      indexPath: l,
+      index: l,
+      indexPath: n,
       isFirstLevel: o = !1
     }) => {
       if (!o) {
-        const c = a.value.includes(t);
-        u.value = t, n.disableSubMenuAction || (c ? x(t, l, e) : b(t, l, e));
+        const c = a.value.includes(l);
+        u.value = l, t.disableSubMenuAction || (c ? y(l, n, e) : b(l, n, e));
       }
-      v("sub-menu-click", { e, index: t, indexPath: l });
+      v("sub-menu-click", { e, index: l, indexPath: n });
     }, F = (e) => {
-      (n.mode === "horizontal" || n.collapse) && (a.value = []);
-      const { index: t, indexPath: l } = e;
-      if (!(R(t) || R(l))) {
-        if (n.router && I) {
-          const o = e.route || t, c = I.push(o).then((d) => (d || (u.value = t), d));
+      (t.mode === "horizontal" || t.collapse) && (a.value = []);
+      const { index: l, indexPath: n } = e;
+      if (!(R(l) || R(n))) {
+        if (t.router && T) {
+          const o = e.route || l, c = T.push(o).then((d) => (d || (u.value = l), d));
           v("select", e, c);
         } else
-          u.value = t, v("select", e);
-        le() && setTimeout(() => {
+          u.value = l, v("select", e);
+        ue() && setTimeout(() => {
           a.value = [];
         }, 100);
       }
-    }, C = (e) => {
-      const t = r.value, l = t[e] || u.value && t[u.value] || t[n.defaultActive];
-      l ? u.value = l.index : u.value = e;
+    }, I = (e) => {
+      const l = r.value, n = l[e] || u.value && l[u.value] || l[t.defaultActive];
+      n ? u.value = n.index : u.value = e;
     }, U = () => {
       if (!s.value) return -1;
       const e = Array.from(s.value?.childNodes ?? []).filter(
         (S) => S.nodeName !== "#text" || S.nodeValue
-      ), t = 64, l = Number.parseInt(
+      ), l = 64, n = Number.parseInt(
         getComputedStyle(s.value).paddingLeft,
         10
       ), o = Number.parseInt(
         getComputedStyle(s.value).paddingRight,
         10
-      ), c = s.value.clientWidth - l - o;
+      ), c = s.value.clientWidth - n - o;
       let d = 0, m = 0;
       return e.forEach((S, Q) => {
-        d += S.offsetWidth || 0, d <= c - t && (m = Q + 1);
+        d += S.offsetWidth || 0, d <= c - l && (m = Q + 1);
       }), m === e.length ? -1 : m;
-    }, j = (e, t = 33.34) => {
-      let l;
+    }, j = (e, l = 33.34) => {
+      let n;
       return () => {
-        l && clearTimeout(l), l = setTimeout(() => {
+        n && clearTimeout(n), n = setTimeout(() => {
           e();
-        }, t);
+        }, l);
       };
     };
-    let T = !0;
+    let z = !0;
     const O = () => {
       const e = () => {
-        f.value = -1, ne(() => {
+        f.value = -1, le(() => {
           f.value = U();
         });
       };
-      T ? e() : j(e)(), T = !1;
+      z ? e() : j(e)(), z = !1;
     };
-    y(
-      () => n.defaultActive,
+    x(
+      () => t.defaultActive,
       (e) => {
-        r.value[e] || (u.value = ""), C(e);
+        r.value[e] || (u.value = ""), I(e);
       }
-    ), y(
-      () => n.collapse,
+    ), x(
+      () => t.collapse,
       (e) => {
         e && (a.value = []);
       }
-    ), y(r.value, D);
+    ), x(r.value, D);
     let k;
     _(() => {
-      n.mode === "horizontal" && n.ellipsis ? k = ue(s, O).stop : k?.();
+      t.mode === "horizontal" && t.ellipsis ? k = oe(s, O).stop : k?.();
     });
     const A = (e) => {
-      p.value[e.index] = e;
+      M.value[e.index] = e;
     }, B = (e) => {
-      delete p.value[e.index];
+      delete M.value[e.index];
     }, G = (e) => {
       r.value[e.index] = e;
     }, H = (e) => {
@@ -139,7 +143,7 @@ const de = E({
         props: h.props,
         openedMenus: a,
         items: r,
-        subMenus: p,
+        subMenus: M,
         activeIndex: u,
         isMenuPopup: q,
         inSubMenu: P,
@@ -150,7 +154,7 @@ const de = E({
         addSubMenu: A,
         removeSubMenu: B,
         openMenu: b,
-        closeMenu: x,
+        closeMenu: y,
         handleMenuItemClick: F,
         handleSubMenuClick: L
       })
@@ -161,57 +165,58 @@ const de = E({
       // 表示当前是第一级的 sub-menu
       level: 0
     }), te(() => {
-      n.mode === "horizontal" && new re(h.vnode.el, M.namespace.value);
+      t.mode === "horizontal" && new re(h.vnode.el, p.namespace.value);
     }), W({
       open: (e) => {
-        const { indexPath: t } = p.value[e];
-        t.forEach((l) => b(l, t));
+        const { indexPath: l } = M.value[e];
+        l.forEach((n) => b(n, l));
       },
-      close: x,
+      close: y,
       handleResize: O,
       menu: s,
       inSubMenu: P,
-      updateActiveIndex: C,
+      updateActiveIndex: I,
       activeIndex: u
     }), () => {
-      let e = $.default?.() ?? [];
-      const t = [];
-      if (n.mode === "horizontal" && s.value) {
+      let e = V.default?.() ?? [];
+      const l = [];
+      if (t.mode === "horizontal" && s.value) {
         const c = ae(e), d = f.value === -1 ? c : c.slice(0, f.value), m = f.value === -1 ? [] : c.slice(f.value);
-        m?.length && n.ellipsis && (e = d, t.push(
+        m?.length && t.ellipsis && (e = d, l.push(
           g(
             se,
             {
               index: "sub-menu-more",
-              class: z.e("hide-arrow"),
-              ...n.horizontalMenuProps
+              class: C.e("hide-arrow"),
+              ...t.horizontalMenuProps
             },
             {
-              title: () => g(oe, {
+              title: () => g(ne, {
                 icon: "icon-menu-line",
-                class: z.e("icon-more")
+                class: C.e("icon-more")
               }),
               default: () => m
             }
           )
         ));
       }
-      const l = ce(h.props, 0), o = g(
+      const n = ce(h.props, 0), o = g(
         "ul",
         {
-          key: String(n.collapse),
+          key: String(t.collapse),
           role: "menubar",
           ref: s,
-          style: l.value,
+          style: n.value,
           class: {
-            [M.b()]: !0,
-            [M.m(n.mode)]: !0,
-            [M.m("collapse")]: n.collapse
+            [p.b()]: !0,
+            [p.m(t.mode)]: !0,
+            [p.m("collapse")]: t.collapse,
+            [p.m(`collapse-type-${t.collapseType}`)]: t.collapseType
           }
         },
-        [...e, ...t]
+        [...e, ...l]
       );
-      return n.collapseTransition && n.mode === "vertical" ? g(ie, () => o) : o;
+      return t.collapseTransition && t.mode === "vertical" ? g(ie, () => o) : o;
     };
   }
 });

package/es/components/menu/sub-menu.vue.d.ts

@@ -1,22 +1,4 @@
-import type { ToolTipProps } from 'vft/es/components/tooltip';
-import type { IconProps } from 'vft/es/components/icon';
-import type { ClassType } from '../types';
-export interface SubMenuProps {
-    index: string;
-    showTimeout?: number;
-    hideTimeout?: number;
-    popperClass?: ClassType;
-    disabled?: boolean;
-    popperOffset?: number;
-    expandIcon?: string | IconProps;
-    collapseIcon?: string | IconProps;
-    title?: string;
-    icon?: IconProps | string;
-    showArrow?: boolean;
-    toolTipCfg?: ToolTipProps;
-    teleported?: boolean;
-    [key: string]: any;
-}
+import type { SubMenuProps } from './types';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SubMenuProps>>, {
     opened: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/es/components/menu/types.d.ts

@@ -1,5 +1,66 @@
+import type { IconProps } from 'vft/es/components';
 import type { Ref } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
+import type { ToolTipProps } from 'vft/es/components/tooltip';
+import type { ClassType } from '../types';
+export interface MenuProps {
+    /** 菜单展示模式 */
+    mode?: 'horizontal' | 'vertical';
+    /** 页面加载时默认激活菜单的 index（menu-item 的index） */
+    defaultActive?: string;
+    /** 默认打开的 sub-menu 的 index 的数组 */
+    defaultOpeneds?: string[];
+    /** 是否只保持一个子菜单的展开 */
+    uniqueOpened?: boolean;
+    /** 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项 */
+    router?: boolean;
+    /** 子菜单打开的触发方式，只在 mode 为 horizontal 时有效 */
+    menuTrigger?: 'hover' | 'click';
+    /** 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用) */
+    collapse?: boolean;
+    /** 是否开启折叠动画 */
+    collapseTransition?: boolean;
+    /** 是否省略多余的子项（仅在横向模式生效） */
+    ellipsis?: boolean;
+    horizontalMenuProps?: Partial<SubMenuProps>;
+    persistent?: boolean;
+    /** 禁用子菜单的展开收缩行为 */
+    disableSubMenuAction?: boolean;
+}
+export interface SubMenuProps {
+    index: string;
+    showTimeout?: number;
+    hideTimeout?: number;
+    popperClass?: ClassType;
+    disabled?: boolean;
+    popperOffset?: number;
+    expandIcon?: string | IconProps;
+    collapseIcon?: string | IconProps;
+    title?: string;
+    icon?: IconProps | string;
+    showArrow?: boolean;
+    toolTipCfg?: ToolTipProps;
+    teleported?: boolean;
+    [key: string]: any;
+}
+export interface MenuItemGroupProps {
+    title?: string;
+}
+export interface MenuItemProps {
+    /** 唯一标志 */
+    index?: string;
+    /** Vue Router 路径对象 */
+    route?: RouteLocationRaw;
+    /** 是否禁用 */
+    disabled?: boolean;
+    icon?: IconProps | string;
+    title?: string | number;
+    isAloneUse?: boolean;
+    divider?: boolean;
+    className?: string;
+    reverse?: boolean;
+    [key: string]: any;
+}
 export interface MenuItemRegistered {
     index: string;
     indexPath: string[];
@@ -24,6 +85,7 @@ export interface MenuProps {
     router?: boolean;
     /** 子菜单打开的触发方式，只在 mode 为 horizontal 时有效 */
     menuTrigger?: 'hover' | 'click';
+    /** 是否收缩 */
     collapse?: boolean;
     /** 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用) */
     backgroundColor?: string;
@@ -31,6 +93,8 @@ export interface MenuProps {
     activeTextColor?: string;
     /** 是否开启折叠动画 */
     collapseTransition?: boolean;
+    /** 收缩类型 */
+    collapseType?: 'menu-title';
     /** 是否省略多余的子项（仅在横向模式生效） */
     ellipsis?: boolean;
     persistent?: boolean;

package/es/components/side-menu/index.d.ts

@@ -15,20 +15,31 @@ export declare const VftSideMenu: import("vft/es/utils").SFCWithInstall<import("
         type: import("vue").PropType<import("./types").MenuType[]>;
         required: true;
     };
+    tooltipCfg: {
+        type: import("vue").PropType<Partial<import("vft/es/vft").ToolTipProps>>;
+    };
     defaultActive: {
         type: import("vue").PropType<string>;
     };
     defaultOpeneds: {
-        type: import("vue").PropType<(string | number)[]>;
+        type: import("vue").PropType<string[]>;
     };
     uniqueOpened: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    collapseTransition: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     disableSubMenuAction: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    collapseType: {
+        type: import("vue").PropType<"menu-title">;
+        default: undefined;
+    };
     isFixedLeft: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -83,6 +94,18 @@ export declare const VftSideMenu: import("vft/es/utils").SFCWithInstall<import("
         type: import("vue").PropType<number | boolean>;
         default: boolean;
     };
+    enableScroll: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    scrollThreshold: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    scrollMaxHeight: {
+        type: import("vue").PropType<string | number>;
+        default: number;
+    };
 }>, {
     sideRef: import("vue").Ref<any, any>;
     jumpActiveDom: ({ activeDom, offset, delay }?: {
@@ -96,7 +119,7 @@ export declare const VftSideMenu: import("vft/es/utils").SFCWithInstall<import("
     "update:width": (val: string | number) => void;
     dragEnd: (oldIndex: import("sortablejs").SortableEvent, newIndex: import("sortablejs").SortableEvent) => void;
     dragWidthEnd: () => void;
-    select: (val: import("./types").MenuSelectEventData) => void;
+    select: (menuItem: import("vft/es/vft").MenuItemClicked, routerResult?: Promise<void | import("vue-router").NavigationFailure> | undefined) => void;
     subMenuClick: (val: any) => void;
     subMenuOpenClick: (val: any) => void;
     menuItemMouseenter: (val: any) => void;
@@ -118,20 +141,31 @@ export declare const VftSideMenu: import("vft/es/utils").SFCWithInstall<import("
         type: import("vue").PropType<import("./types").MenuType[]>;
         required: true;
     };
+    tooltipCfg: {
+        type: import("vue").PropType<Partial<import("vft/es/vft").ToolTipProps>>;
+    };
     defaultActive: {
         type: import("vue").PropType<string>;
     };
     defaultOpeneds: {
-        type: import("vue").PropType<(string | number)[]>;
+        type: import("vue").PropType<string[]>;
     };
     uniqueOpened: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    collapseTransition: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     disableSubMenuAction: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    collapseType: {
+        type: import("vue").PropType<"menu-title">;
+        default: undefined;
+    };
     isFixedLeft: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -186,8 +220,20 @@ export declare const VftSideMenu: import("vft/es/utils").SFCWithInstall<import("
         type: import("vue").PropType<number | boolean>;
         default: boolean;
     };
+    enableScroll: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    scrollThreshold: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    scrollMaxHeight: {
+        type: import("vue").PropType<string | number>;
+        default: number;
+    };
 }>> & Readonly<{
-    onSelect?: ((val: import("./types").MenuSelectEventData) => any) | undefined;
+    onSelect?: ((menuItem: import("vft/es/vft").MenuItemClicked, routerResult?: Promise<void | import("vue-router").NavigationFailure> | undefined) => any) | undefined;
     "onUpdate:collapse"?: ((val: boolean) => any) | undefined;
     "onUpdate:width"?: ((val: string | number) => any) | undefined;
     onDragEnd?: ((oldIndex: import("sortablejs").SortableEvent, newIndex: import("sortablejs").SortableEvent) => any) | undefined;
@@ -201,7 +247,9 @@ export declare const VftSideMenu: import("vft/es/utils").SFCWithInstall<import("
     width: string | number;
     collapse: boolean;
     uniqueOpened: boolean;
+    collapseTransition: boolean;
     disableSubMenuAction: boolean;
+    collapseType: "menu-title";
     isFixedLeft: boolean;
     collapseWidth: string | number;
     menuTopBottomHeight: number;
@@ -215,6 +263,9 @@ export declare const VftSideMenu: import("vft/es/utils").SFCWithInstall<import("
     openMenuCollapse: boolean;
     disabledJudgeTurnOver: boolean;
     defaultOpenedsLevel: number | boolean;
+    enableScroll: boolean;
+    scrollThreshold: number;
+    scrollMaxHeight: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>> & Record<string, any>;
 export default VftSideMenu;
 export * from './types';

package/es/components/side-menu/side-menu.vue.d.ts

@@ -1,5 +1,7 @@
+import type { MenuItemClicked } from 'vft/es/components/menu';
 import type { SortableEvent } from 'sortablejs';
-import type { MenuSelectEventData, SideMenuProps } from './types';
+import type { NavigationFailure } from 'vue-router';
+import type { SideMenuProps } from './types';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SideMenuProps>, {
     isFixedLeft: boolean;
     autoScrollActiveDom: boolean;
@@ -16,6 +18,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     useRouterJump: boolean;
     disableSubMenuAction: boolean;
     defaultOpenedsLevel: boolean;
+    enableScroll: boolean;
+    scrollThreshold: number;
+    scrollMaxHeight: number;
+    collapseTransition: boolean;
+    collapseType: undefined;
 }>>, {
     sideRef: import("vue").Ref<any, any>;
     jumpActiveDom: ({ activeDom, offset, delay }?: {
@@ -29,7 +36,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "update:width": (val: string | number) => void;
     dragEnd: (oldIndex: SortableEvent, newIndex: SortableEvent) => void;
     dragWidthEnd: () => void;
-    select: (val: MenuSelectEventData) => void;
+    select: (menuItem: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => void;
     subMenuClick: (val: any) => void;
     subMenuOpenClick: (val: any) => void;
     menuItemMouseenter: (val: any) => void;
@@ -50,8 +57,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     useRouterJump: boolean;
     disableSubMenuAction: boolean;
     defaultOpenedsLevel: boolean;
+    enableScroll: boolean;
+    scrollThreshold: number;
+    scrollMaxHeight: number;
+    collapseTransition: boolean;
+    collapseType: undefined;
 }>>> & Readonly<{
-    onSelect?: ((val: MenuSelectEventData) => any) | undefined;
+    onSelect?: ((menuItem: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => any) | undefined;
     "onUpdate:collapse"?: ((val: boolean) => any) | undefined;
     "onUpdate:width"?: ((val: string | number) => any) | undefined;
     onDragEnd?: ((oldIndex: SortableEvent, newIndex: SortableEvent) => any) | undefined;
@@ -65,7 +77,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     width: string | number;
     collapse: boolean;
     uniqueOpened: boolean;
+    collapseTransition: boolean;
     disableSubMenuAction: boolean;
+    collapseType: "menu-title";
     isFixedLeft: boolean;
     collapseWidth: string | number;
     menuTopBottomHeight: number;
@@ -79,6 +93,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     openMenuCollapse: boolean;
     disabledJudgeTurnOver: boolean;
     defaultOpenedsLevel: number | boolean;
+    enableScroll: boolean;
+    scrollThreshold: number;
+    scrollMaxHeight: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;