@jetlinks-web/components 2.0.2 → 2.0.3

package/src/ProLayout/SiderMenu/BaseMenu.tsx

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

package/src/ProLayout/SiderMenu/SiderMenu.tsx

@@ -1,320 +0,0 @@
-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/es/_util/vue-types';
-import type {
-    CSSProperties,
-    ExtractPropTypes,
-    PropType,
-    FunctionalComponent,
-} from 'vue';
-import type { VueNode } from 'ant-design-vue/es/_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;

package/src/ProLayout/SiderMenu/index.ts

@@ -1,2 +0,0 @@
-export { default as BaseMenu } from './BaseMenu'
-export { default as SiderMenu } from './SiderMenu'

package/src/ProLayout/SiderMenu/typings.ts

@@ -1,49 +0,0 @@
-import type { VNodeChild, CSSProperties, HTMLAttributes } from 'vue';
-import type { Theme } from '../typings';
-
-export type {
-    MenuMode,
-    MenuTheme,
-} from 'ant-design-vue/es/menu/src/interface';
-
-export interface MenuInfo {
-    key: string | number;
-    keyPath: string[] | number[];
-    item: VNodeChild;
-    domEvent: MouseEvent;
-}
-
-export interface SelectInfo extends MenuInfo {
-    selectedKeys: string[];
-}
-
-export type OpenEventHandler = (
-    keys:
-        | string[]
-        | {
-              key: string;
-              item: VNodeChild;
-              trigger: string;
-              open: boolean;
-          },
-) => void;
-
-export type SiderTheme = Theme;
-
-export type CollapseType = 'clickTrigger' | 'responsive';
-
-export interface SiderProps extends HTMLAttributes {
-    prefixCls?: string;
-    collapsible?: boolean;
-    collapsed?: boolean;
-    defaultCollapsed?: boolean;
-    reverseArrow?: boolean;
-    onCollapse?: (collapsed: boolean, type: CollapseType) => void;
-    zeroWidthTriggerStyle?: CSSProperties;
-    trigger?: VNodeChild | JSX.Element;
-    width?: number | string;
-    collapsedWidth?: number | string;
-    breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-    theme?: SiderTheme;
-    onBreakpoint?: (broken: boolean) => void;
-}