@jetlinks-web/components 2.0.1 → 2.0.2-2

package/src/ProLayout/SiderMenu/BaseMenu.tsx

@@ -1,296 +1,296 @@
-import { defaultSettingProps } from '../defaultSettings';
-import {
-    defineComponent,
-    getCurrentInstance,
-    isVNode,
-    resolveComponent,
-    watchEffect,
-    withCtx,
-} from 'vue';
-import type {
-    ExtractPropTypes,
-    FunctionalComponent,
-    PropType,
-    VNodeChild,
-    ComponentInternalInstance,
-    ConcreteComponent,
-    VNode,
-} from 'vue';
-import type {
-    SelectEventHandler,
-    MenuClickEventHandler,
-    SelectInfo,
-    MenuInfo,
-} from 'ant-design-vue/lib/menu/src/interface';
-import type {
-    FormatMessage,
-    MenuDataItem,
-    WithFalse,
-    Theme,
-    MenuItemRender,
-    SubMenuItemRender,
-} from '../typings';
-import type { MenuMode } from 'ant-design-vue';
-import type { Key } from 'ant-design-vue/lib/_util/type';
-import { defaultPrefixCls } from '../RouteContext';
-import { AIcon as IconFont } from '../../../';
-import { regular } from '@jetlinks-web/utils';
-import { Menu } from 'ant-design-vue';
-import { createFromIconfontCN } from '@ant-design/icons-vue';
-
-export const baseMenuProps = {
-    ...defaultSettingProps,
-    prefixCls: {
-        type: String as PropType<string | undefined>,
-        default: () => defaultPrefixCls,
-    },
-    locale: {
-        type: [Function, Boolean] as PropType<WithFalse<FormatMessage>>,
-        default: (t: string): string => t,
-    },
-    menuData: {
-        type: Array as PropType<MenuDataItem[]>,
-        default: () => [],
-    },
-    mode: {
-        type: String as PropType<MenuMode>,
-        default: 'inline',
-    },
-    theme: {
-        type: String as PropType<Theme>,
-        default: 'dark',
-    },
-    collapsed: {
-        type: Boolean as PropType<boolean | undefined>,
-        default: () => false,
-    },
-    openKeys: {
-        type: Array as PropType<WithFalse<string[]>>,
-        default: () => undefined,
-    },
-    selectedKeys: {
-        type: Array as PropType<WithFalse<string[]>>,
-        default: () => undefined,
-    },
-    menuProps: {
-        type: Object as PropType<Record<string, any>>,
-        default: () => null,
-    },
-    menuItemRender: {
-        type: [Object, Function, Boolean] as PropType<MenuItemRender>,
-        default: () => undefined,
-    },
-    subMenuItemRender: {
-        type: [Object, Function, Boolean] as PropType<SubMenuItemRender>,
-        default: () => undefined,
-    },
-
-    onClick: [Function, Object] as PropType<(...args: any) => void>,
-};
-
-export type BaseMenuProps = ExtractPropTypes<typeof baseMenuProps>;
-
-type IconFontProps = {
-    icon: VNodeChild | string;
-    iconUrl: string;
-    prefixCls?: string;
-};
-
-let AntdIconFont = createFromIconfontCN({
-    scriptUrl: '',
-});
-
-const LazyIcon: FunctionalComponent<IconFontProps> = (props) => {
-    const {icon, iconUrl, prefixCls = defaultPrefixCls} = props;
-    if (!icon) return null;
-    if (isVNode(icon)) {
-        return icon;
-    }
-    if (typeof icon === 'string' && icon !== '') {
-        if (regular.isUrl(icon) || regular.isImg(icon)) {
-            return (
-                <img
-                    src={icon}
-                    alt="icon"
-                    class={`${prefixCls}-sider-menu-icon`}
-                />
-            );
-        }
-        return iconUrl ? (
-            <AntdIconFont type={icon}/>
-        ) : (
-            <IconFont type={icon}/>
-        );
-    }
-};
-
-class MenuUtil {
-    props: BaseMenuProps;
-
-    ctx: ComponentInternalInstance | null;
-
-    RouterLink: ConcreteComponent;
-
-    constructor(props: BaseMenuProps, ctx: ComponentInternalInstance | null) {
-        this.props = props;
-        this.ctx = ctx;
-        this.RouterLink = resolveComponent('router-link') as ConcreteComponent;
-    }
-
-    getNavMenuItems = (menusData: MenuDataItem[] = []) => {
-        return menusData
-            .map((item) => this.getSubMenuOrItem(item))
-            .filter((item) => item);
-    };
-
-    getSubMenuOrItem = (item: MenuDataItem): VNode => {
-        if (
-            Array.isArray(item.children) &&
-            item.children.length > 0 &&
-            !item?.meta?.hideInMenu &&
-            !item?.meta?.hideChildrenInMenu
-        ) {
-            if (this.props.subMenuItemRender) {
-                const subMenuItemRender = withCtx(
-                    this.props.subMenuItemRender,
-                    this.ctx,
-                );
-                return subMenuItemRender({
-                    item,
-                    children: this.getNavMenuItems(item.children),
-                }) as VNode;
-            }
-            const {prefixCls, locale} = this.props;
-            const menuTitle =
-                (locale && locale(item.meta?.title)) || item.meta?.title;
-            const defaultTitle = item.meta?.icon ? (
-                <span class={`${prefixCls}-menu-item`}>
-                    <span class={`${prefixCls}-menu-item-title`}>
-                        {menuTitle}
-                    </span>
-                </span>
-            ) : (
-                <span class={`${prefixCls}-menu-item`}>{menuTitle}</span>
-            );
-
-            return (
-                <Menu.SubMenu
-                    title={defaultTitle}
-                    key={item.path}
-                    popupClassName={`${prefixCls}-menu-popup`}
-                    icon={
-                        <LazyIcon
-                            iconUrl={this.props.iconfontUrl}
-                            icon={item.meta?.icon}
-                        />
-                    }
-                >
-                    {this.getNavMenuItems(item.children)}
-                </Menu.SubMenu>
-            );
-        }
-
-        const menuItemRender =
-            this.props.menuItemRender &&
-            withCtx(this.props.menuItemRender, this.ctx);
-
-        const [title, icon] = this.getMenuItem(item);
-
-        return (
-            (menuItemRender &&
-                (menuItemRender({item, title, icon}) as VNode)) || (
-                <Menu.Item
-                    disabled={item.meta?.disabled}
-                    danger={item.meta?.danger}
-                    key={item.path}
-                >
-                    {title}
-                </Menu.Item>
-            )
-        );
-    };
-
-    getMenuItem = (item: MenuDataItem) => {
-        const meta = {...item.meta};
-        const target = (meta.target || null) as string | null;
-        const hasUrl = regular.isUrl(item.path);
-        const CustomTag: any = (target && 'a') || this.RouterLink;
-        const props = {to: {name: item.name, ...item.meta}};
-        const attrs =
-            hasUrl || target ? {...item.meta, href: item.path, target} : {};
-
-        const {prefixCls, locale} = this.props;
-        const icon =
-            (item.meta?.icon && (
-                <LazyIcon
-                    iconUrl={this.props.iconfontUrl}
-                    icon={item.meta?.icon}
-                />
-            )) ||
-            undefined;
-        const menuTitle =
-            (locale && locale(item.meta?.title)) || item.meta?.title;
-
-        const defaultTitle = item.meta?.icon ? (
-            <CustomTag {...attrs} {...props} class={`${prefixCls}-menu-item`}>
-                {icon}
-                <span class={`${prefixCls}-menu-item-title`}>{menuTitle}</span>
-            </CustomTag>
-        ) : (
-            <CustomTag {...attrs} {...props} class={`${prefixCls}-menu-item`}>
-                <span>{menuTitle}</span>
-            </CustomTag>
-        );
-
-        return [defaultTitle, icon];
-    };
-}
-
-export default defineComponent({
-    name: 'BaseMenu',
-    props: baseMenuProps,
-    emits: ['update:openKeys', 'update:selectedKeys', 'click'],
-    setup(props, {emit}) {
-        const ctx = getCurrentInstance();
-        const menuUtil = new MenuUtil(props, ctx);
-
-        watchEffect(() => {
-            if (props.iconfontUrl) {
-                AntdIconFont = createFromIconfontCN({
-                    scriptUrl: props.iconfontUrl,
-                });
-            }
-        });
-
-        const handleOpenChange = (openKeys: Key[]): void => {
-            emit('update:openKeys', openKeys);
-        };
-        const handleSelect: SelectEventHandler = (args: SelectInfo): void => {
-            // ignore https? link handle selectkeys
-            if (regular.isUrl(args.key as string)) {
-                return;
-            }
-            emit('update:selectedKeys', args.selectedKeys);
-        };
-        const handleClick: MenuClickEventHandler = (args: MenuInfo) => {
-            emit('click', args);
-        };
-
-        return () => (
-            <Menu
-                key="Menu"
-                inlineIndent={16}
-                mode={props.mode}
-                theme={props.theme}
-                openKeys={props.openKeys === false ? [] : props.openKeys}
-                selectedKeys={props.selectedKeys || []}
-                onOpenChange={handleOpenChange}
-                onSelect={handleSelect}
-                onClick={handleClick}
-                {...props.menuProps}
-            >
-                {menuUtil.getNavMenuItems(props.menuData)}
-            </Menu>
-        );
-    },
-});
+import { defaultSettingProps } from '../defaultSettings';
+import {
+    defineComponent,
+    getCurrentInstance,
+    isVNode,
+    resolveComponent,
+    watchEffect,
+    withCtx,
+} from 'vue';
+import type {
+    ExtractPropTypes,
+    FunctionalComponent,
+    PropType,
+    VNodeChild,
+    ComponentInternalInstance,
+    ConcreteComponent,
+    VNode,
+} from 'vue';
+import type {
+    SelectEventHandler,
+    MenuClickEventHandler,
+    SelectInfo,
+    MenuInfo,
+} from 'ant-design-vue/es/menu/src/interface';
+import type {
+    FormatMessage,
+    MenuDataItem,
+    WithFalse,
+    Theme,
+    MenuItemRender,
+    SubMenuItemRender,
+} from '../typings';
+import type { MenuMode } from 'ant-design-vue';
+import type { Key } from 'ant-design-vue/es/_util/type';
+import { defaultPrefixCls } from '../RouteContext';
+import { AIcon as IconFont } from '../../../';
+import { regular } from '@jetlinks-web/utils';
+import { Menu } from 'ant-design-vue';
+import { createFromIconfontCN } from '@ant-design/icons-vue';
+
+export const baseMenuProps = {
+    ...defaultSettingProps,
+    prefixCls: {
+        type: String as PropType<string | undefined>,
+        default: () => defaultPrefixCls,
+    },
+    locale: {
+        type: [Function, Boolean] as PropType<WithFalse<FormatMessage>>,
+        default: (t: string): string => t,
+    },
+    menuData: {
+        type: Array as PropType<MenuDataItem[]>,
+        default: () => [],
+    },
+    mode: {
+        type: String as PropType<MenuMode>,
+        default: 'inline',
+    },
+    theme: {
+        type: String as PropType<Theme>,
+        default: 'dark',
+    },
+    collapsed: {
+        type: Boolean as PropType<boolean | undefined>,
+        default: () => false,
+    },
+    openKeys: {
+        type: Array as PropType<WithFalse<string[]>>,
+        default: () => undefined,
+    },
+    selectedKeys: {
+        type: Array as PropType<WithFalse<string[]>>,
+        default: () => undefined,
+    },
+    menuProps: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => null,
+    },
+    menuItemRender: {
+        type: [Object, Function, Boolean] as PropType<MenuItemRender>,
+        default: () => undefined,
+    },
+    subMenuItemRender: {
+        type: [Object, Function, Boolean] as PropType<SubMenuItemRender>,
+        default: () => undefined,
+    },
+
+    onClick: [Function, Object] as PropType<(...args: any) => void>,
+};
+
+export type BaseMenuProps = ExtractPropTypes<typeof baseMenuProps>;
+
+type IconFontProps = {
+    icon: VNodeChild | string;
+    iconUrl: string;
+    prefixCls?: string;
+};
+
+let AntdIconFont = createFromIconfontCN({
+    scriptUrl: '',
+});
+
+const LazyIcon: FunctionalComponent<IconFontProps> = (props) => {
+    const {icon, iconUrl, prefixCls = defaultPrefixCls} = props;
+    if (!icon) return null;
+    if (isVNode(icon)) {
+        return icon;
+    }
+    if (typeof icon === 'string' && icon !== '') {
+        if (regular.isUrl(icon) || regular.isImg(icon)) {
+            return (
+                <img
+                    src={icon}
+                    alt="icon"
+                    class={`${prefixCls}-sider-menu-icon`}
+                />
+            );
+        }
+        return iconUrl ? (
+            <AntdIconFont type={icon}/>
+        ) : (
+            <IconFont type={icon}/>
+        );
+    }
+};
+
+class MenuUtil {
+    props: BaseMenuProps;
+
+    ctx: ComponentInternalInstance | null;
+
+    RouterLink: ConcreteComponent;
+
+    constructor(props: BaseMenuProps, ctx: ComponentInternalInstance | null) {
+        this.props = props;
+        this.ctx = ctx;
+        this.RouterLink = resolveComponent('router-link') as ConcreteComponent;
+    }
+
+    getNavMenuItems = (menusData: MenuDataItem[] = []) => {
+        return menusData
+            .map((item) => this.getSubMenuOrItem(item))
+            .filter((item) => item);
+    };
+
+    getSubMenuOrItem = (item: MenuDataItem): VNode => {
+        if (
+            Array.isArray(item.children) &&
+            item.children.length > 0 &&
+            !item?.meta?.hideInMenu &&
+            !item?.meta?.hideChildrenInMenu
+        ) {
+            if (this.props.subMenuItemRender) {
+                const subMenuItemRender = withCtx(
+                    this.props.subMenuItemRender,
+                    this.ctx,
+                );
+                return subMenuItemRender({
+                    item,
+                    children: this.getNavMenuItems(item.children),
+                }) as VNode;
+            }
+            const {prefixCls, locale} = this.props;
+            const menuTitle =
+                (locale && locale(item.meta?.title)) || item.meta?.title;
+            const defaultTitle = item.meta?.icon ? (
+                <span class={`${prefixCls}-menu-item`}>
+                    <span class={`${prefixCls}-menu-item-title`}>
+                        {menuTitle}
+                    </span>
+                </span>
+            ) : (
+                <span class={`${prefixCls}-menu-item`}>{menuTitle}</span>
+            );
+
+            return (
+                <Menu.SubMenu
+                    title={defaultTitle}
+                    key={item.path}
+                    popupClassName={`${prefixCls}-menu-popup`}
+                    icon={
+                        <LazyIcon
+                            iconUrl={this.props.iconfontUrl}
+                            icon={item.meta?.icon}
+                        />
+                    }
+                >
+                    {this.getNavMenuItems(item.children)}
+                </Menu.SubMenu>
+            );
+        }
+
+        const menuItemRender =
+            this.props.menuItemRender &&
+            withCtx(this.props.menuItemRender, this.ctx);
+
+        const [title, icon] = this.getMenuItem(item);
+
+        return (
+            (menuItemRender &&
+                (menuItemRender({item, title, icon}) as VNode)) || (
+                <Menu.Item
+                    disabled={item.meta?.disabled}
+                    danger={item.meta?.danger}
+                    key={item.path}
+                >
+                    {title}
+                </Menu.Item>
+            )
+        );
+    };
+
+    getMenuItem = (item: MenuDataItem) => {
+        const meta = {...item.meta};
+        const target = (meta.target || null) as string | null;
+        const hasUrl = regular.isUrl(item.path);
+        const CustomTag: any = (target && 'a') || this.RouterLink;
+        const props = {to: {name: item.name, ...item.meta}};
+        const attrs =
+            hasUrl || target ? {...item.meta, href: item.path, target} : {};
+
+        const {prefixCls, locale} = this.props;
+        const icon =
+            (item.meta?.icon && (
+                <LazyIcon
+                    iconUrl={this.props.iconfontUrl}
+                    icon={item.meta?.icon}
+                />
+            )) ||
+            undefined;
+        const menuTitle =
+            (locale && locale(item.meta?.title)) || item.meta?.title;
+
+        const defaultTitle = item.meta?.icon ? (
+            <CustomTag {...attrs} {...props} class={`${prefixCls}-menu-item`}>
+                {icon}
+                <span class={`${prefixCls}-menu-item-title`}>{menuTitle}</span>
+            </CustomTag>
+        ) : (
+            <CustomTag {...attrs} {...props} class={`${prefixCls}-menu-item`}>
+                <span>{menuTitle}</span>
+            </CustomTag>
+        );
+
+        return [defaultTitle, icon];
+    };
+}
+
+export default defineComponent({
+    name: 'BaseMenu',
+    props: baseMenuProps,
+    emits: ['update:openKeys', 'update:selectedKeys', 'click'],
+    setup(props, {emit}) {
+        const ctx = getCurrentInstance();
+        const menuUtil = new MenuUtil(props, ctx);
+
+        watchEffect(() => {
+            if (props.iconfontUrl) {
+                AntdIconFont = createFromIconfontCN({
+                    scriptUrl: props.iconfontUrl,
+                });
+            }
+        });
+
+        const handleOpenChange = (openKeys: Key[]): void => {
+            emit('update:openKeys', openKeys);
+        };
+        const handleSelect: SelectEventHandler = (args: SelectInfo): void => {
+            // ignore https? link handle selectkeys
+            if (regular.isUrl(args.key as string)) {
+                return;
+            }
+            emit('update:selectedKeys', args.selectedKeys);
+        };
+        const handleClick: MenuClickEventHandler = (args: MenuInfo) => {
+            emit('click', args);
+        };
+
+        return () => (
+            <Menu
+                key="Menu"
+                inlineIndent={16}
+                mode={props.mode}
+                theme={props.theme}
+                openKeys={props.openKeys === false ? [] : props.openKeys}
+                selectedKeys={props.selectedKeys || []}
+                onOpenChange={handleOpenChange}
+                onSelect={handleSelect}
+                onClick={handleClick}
+                {...props.menuProps}
+            >
+                {menuUtil.getNavMenuItems(props.menuData)}
+            </Menu>
+        );
+    },
+});