@jetlinks-web/components 1.0.5 → 2.0.1

package/src/ProLayout/SiderMenu/BaseMenu.tsx

@@ -0,0 +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>
+        );
+    },
+});

package/src/ProLayout/SiderMenu/SiderMenu.tsx

@@ -0,0 +1,320 @@
+import type {
+    MenuHeaderRender,
+    MenuContentRender,
+    MenuExtraRender,
+    CollapsedButtonRender,
+    LogoRender,
+    WithFalse,
+} from '../typings';
+import type { SiderProps } from './typings';
+import { LayoutSider as Sider, Menu } from 'ant-design-vue';
+import BaseMenu, { baseMenuProps } from './BaseMenu';
+import { defaultSettingProps } from '../defaultSettings';
+import PropTypes from 'ant-design-vue/lib/_util/vue-types';
+import type {
+    CSSProperties,
+    ExtractPropTypes,
+    PropType,
+    FunctionalComponent,
+} from 'vue';
+import type { VueNode } from 'ant-design-vue/lib/_util/type';
+import { AIcon as IconFont } from '../../../';
+import { useRouteContext } from '../RouteContext';
+import { computed, unref } from 'vue';
+
+export type PrivateSiderMenuProps = {
+    matchMenuKeys?: string[];
+};
+
+export const siderMenuProps = {
+    ...defaultSettingProps,
+    ...baseMenuProps,
+    logo: {
+        type: [Object, String, Function] as PropType<LogoRender>,
+        default: () => undefined,
+    },
+    logoStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => undefined,
+    },
+    siderWidth: PropTypes.number.def(208),
+    headerHeight: PropTypes.number.def(48),
+    collapsedWidth: PropTypes.number.def(48),
+    menuHeaderRender: {
+        type: [Function, Object, Boolean] as PropType<MenuHeaderRender>,
+        default: () => undefined,
+    },
+    menuContentRender: {
+        type: [Function, Object, Boolean] as PropType<MenuContentRender>,
+        default: () => undefined,
+    },
+    menuExtraRender: {
+        type: [Function, Object, Boolean] as PropType<MenuExtraRender>,
+        default: () => undefined,
+    },
+    collapsedButtonRender: {
+        type: [Function, Object, Boolean] as PropType<CollapsedButtonRender>,
+        default: () => undefined,
+    },
+    breakpoint: {
+        type: [Object, Boolean] as PropType<SiderProps['breakpoint'] | false>,
+        default: () => false,
+    },
+    splitMenus: PropTypes.looseBool,
+    fixed: PropTypes.looseBool,
+    hide: PropTypes.looseBool,
+    matchMenuKeys: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+    },
+
+    // events
+    onMenuHeaderClick: PropTypes.func,
+    onMenuClick: PropTypes.func,
+    onCollapse: {
+        type: Function as PropType<(collapsed: boolean) => void>,
+    },
+    onOpenKeys: {
+        type: Function as PropType<(openKeys: WithFalse<string[]>) => void>,
+    },
+    onSelect: {
+        type: Function as PropType<(selectedKeys: WithFalse<string[]>) => void>,
+    },
+};
+
+export type SiderMenuProps = Partial<ExtractPropTypes<typeof siderMenuProps>>;
+
+export const defaultRenderLogo = (
+    logo?: VueNode,
+    logoStyle?: CSSProperties,
+): VueNode => {
+    if (!logo) {
+        return null;
+    }
+    if (typeof logo === 'string') {
+        return <img src={logo} alt="logo" style={logoStyle}/>;
+    }
+    if (typeof logo === 'function') {
+        // @ts-ignore
+        return logo();
+    }
+    return logo;
+};
+
+export const defaultRenderLogoAndTitle = (
+    props: SiderMenuProps,
+    renderKey: string | undefined = 'menuHeaderRender',
+): VueNode | null => {
+    const {
+        logo = 'http://demo.jetlinks.cn/static/logo.760eb65c.png',
+        logoStyle,
+        title,
+        layout,
+    } = props;
+    const renderFunction = (props as Record<string, VueNode>)[renderKey || ''];
+    if (layout === 'mix' && renderFunction === false) {
+        return null;
+    }
+    const logoDom = defaultRenderLogo(logo, logoStyle);
+    const titleDom = <h1>{title}</h1>;
+    if (renderKey === 'menuHeaderRender') {
+        return null;
+    }
+    // call menuHeaderRender
+    if (typeof renderFunction === 'function') {
+        // @ts-ignore
+        return renderFunction(
+            logoDom,
+            props.collapsed ? null : titleDom,
+            props,
+        );
+    }
+    if (Array.isArray(renderFunction)) {
+        return <>{renderFunction}</>;
+    }
+
+    return (
+        <a>
+            {logoDom}
+            {props.collapsed ? null : titleDom}
+        </a>
+    );
+};
+
+export const defaultRenderCollapsedButton = (collapsed?: boolean): VueNode =>
+    collapsed ? (
+        <IconFont type={'MenuUnfoldOutlined'}/>
+    ) : (
+        <IconFont type={'MenuFoldOutlined'}/>
+    );
+
+const SiderMenu: FunctionalComponent<SiderMenuProps> = (
+    props: SiderMenuProps,
+) => {
+    const {
+        collapsed,
+        siderWidth,
+        breakpoint,
+        collapsedWidth = 48,
+        menuExtraRender = false,
+        menuContentRender = false,
+        collapsedButtonRender = defaultRenderCollapsedButton,
+        theme,
+    } = props;
+
+    const context = useRouteContext();
+    const {getPrefixCls} = context;
+    const baseClassName = getPrefixCls('sider');
+    const hasSplitMenu = computed(
+        () => props.layout === 'mix' && props.splitMenus,
+    );
+    const sSideWidth = computed(() =>
+        props.collapsed ? props.collapsedWidth : props.siderWidth,
+    );
+
+    const classNames = computed(() => {
+        return {
+            [baseClassName]: true,
+            [`${baseClassName}-fixed`]: context.fixSiderbar,
+            [`${baseClassName}-${theme}`]: true, // theme !== 'dark'
+            [`${baseClassName}-layout-${props.layout}`]: props.layout,
+        };
+    });
+
+    const handleSelect = ($event: string[]) => {
+        if (props.onSelect) {
+            if (unref(hasSplitMenu)) {
+                props.onSelect([context.selectedKeys[0], ...$event]);
+                return;
+            }
+            props.onSelect($event);
+        }
+    };
+
+    const headerDom = defaultRenderLogoAndTitle(props);
+    const extraDom = menuExtraRender && menuExtraRender(props);
+
+    if (hasSplitMenu.value && unref(context.flatMenuData).length === 0) {
+        return null;
+    }
+
+    const defaultMenuDom = (
+        <BaseMenu
+            prefixCls={getPrefixCls()}
+            locale={props.locale || context.locale}
+            theme={theme}
+            mode="inline"
+            menuData={
+                hasSplitMenu.value ? context.flatMenuData : context.menuData
+            }
+            collapsed={props.collapsed}
+            openKeys={context.openKeys}
+            selectedKeys={context.selectedKeys}
+            menuItemRender={props.menuItemRender}
+            subMenuItemRender={props.subMenuItemRender}
+            iconfontUrl={props.iconfontUrl}
+            onClick={props.onMenuClick}
+            style={{width: '100%'}}
+            class={`${baseClassName}-menu`}
+            {...{
+                'onUpdate:openKeys': ($event: string[]) =>
+                    props.onOpenKeys && props.onOpenKeys($event),
+                'onUpdate:selectedKeys': handleSelect,
+            }}
+        />
+    );
+
+    return (
+        <>
+            {context.fixSiderbar && (
+                <div
+                    style={{
+                        width: `${sSideWidth.value}px`,
+                        overflow: 'hidden',
+                        flex: `0 0 ${sSideWidth.value}px`,
+                        maxWidth: `${sSideWidth.value}px`,
+                        minWidth: `${sSideWidth.value}px`,
+                        transition: `background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)`,
+                    }}
+                />
+            )}
+            <Sider
+                collapsible
+                trigger={null}
+                collapsed={collapsed}
+                breakpoint={breakpoint || undefined}
+                onCollapse={(collapse: boolean) => {
+                    props.onCollapse?.(collapse);
+                }}
+                collapsedWidth={collapsedWidth}
+                style={{
+                    overflow: 'hidden',
+                    paddingTop: `${props.headerHeight}px`,
+                }}
+                width={siderWidth}
+                theme={theme}
+                class={classNames.value}
+            >
+                {headerDom && (
+                    <div
+                        class={`${baseClassName}-logo`}
+                        onClick={
+                            props.layout !== 'mix'
+                                ? props.onMenuHeaderClick
+                                : undefined
+                        }
+                        id="logo"
+                        style={props?.logoStyle}
+                    >
+                        {headerDom}
+                    </div>
+                )}
+                {extraDom && !props.collapsed && (
+                    <div
+                        class={{
+                            [`${baseClassName}-extra`]: true,
+                            [`${baseClassName}-extra-no-logo`]: !headerDom,
+                        }}
+                    >
+                        {extraDom}
+                    </div>
+                )}
+                <div style="flex: 1; overflow: hidden auto;">
+                    {(menuContentRender &&
+                            menuContentRender(props, defaultMenuDom)) ||
+                        defaultMenuDom}
+                </div>
+                <div class={`${baseClassName}-links`}>
+                    {collapsedButtonRender !== false ? (
+                        <Menu
+                            class={`${baseClassName}-link-menu`}
+                            inlineIndent={16}
+                            theme={theme}
+                            selectedKeys={[]}
+                            openKeys={[]}
+                            mode="inline"
+                            onClick={() => {
+                                if (props.onCollapse) {
+                                    props.onCollapse(!props.collapsed);
+                                }
+                            }}
+                        >
+                            <Menu.Item
+                                key={'collapsed-button'}
+                                class={`${baseClassName}-collapsed-button`}
+                                title={false}
+                            >
+                                {collapsedButtonRender &&
+                                typeof collapsedButtonRender === 'function'
+                                    ? collapsedButtonRender(collapsed)
+                                    : collapsedButtonRender}
+                            </Menu.Item>
+                        </Menu>
+                    ) : null}
+                </div>
+            </Sider>
+        </>
+    );
+};
+
+export default SiderMenu;