@jetlinks-web/components 1.0.5 → 2.0.0

package/src/ProLayout/SiderMenu/index.less

@@ -0,0 +1,212 @@
+@import '../style/default.less';
+
+@pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider';
+
+@nav-header-height: @pro-layout-header-height;
+
+.@{pro-layout-sider-menu-prefix-cls} {
+    position: relative;
+    background-color: @layout-sider-background;
+    border-right: 0;
+    // FIXME: 临时修正(可能不会做兼容)
+    z-index: 20;
+
+    // 这里关掉了动画，不然使用无法兼容
+    .@{ant-prefix}-menu {
+        background: transparent;
+    }
+
+    &.@{ant-prefix}-layout-sider-light {
+        .@{ant-prefix}-menu-item a {
+            color: @heading-color;
+        }
+        .@{ant-prefix}-menu-item-selected a,
+        .@{ant-prefix}-menu-item a:hover {
+            color: @primary-color;
+        }
+    }
+
+    &-logo {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 16px 16px;
+        cursor: pointer;
+        transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+        > a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 32px;
+        }
+
+        img {
+            display: inline-block;
+            height: 32px;
+            vertical-align: middle;
+        }
+
+        h1 {
+            display: inline-block;
+            height: 32px;
+            margin: 0 0 0 12px;
+            color: white;
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 32px;
+            vertical-align: middle;
+            animation: pro-layout-title-hide 0.3s;
+        }
+    }
+
+    &-extra {
+        margin-bottom: 16px;
+        padding: 0 16px;
+        &-no-logo {
+            margin-top: 16px;
+        }
+    }
+
+    &-menu {
+        position: relative;
+        z-index: 10;
+        min-height: 100%;
+        box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    }
+
+    .@{ant-prefix}-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.15);
+            border-radius: 3px;
+            box-shadow: inset 0 0 5px rgba(37, 37, 37, 0.05);
+        }
+
+        /* 滚动条滑块 */
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 3px;
+            box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
+        }
+    }
+
+    &.@{ant-prefix}-layout-sider-collapsed {
+        .@{ant-prefix}-menu-inline-collapsed {
+            width: 48px;
+        }
+        .@{pro-layout-sider-menu-prefix-cls} {
+            &-logo {
+                padding: 16px 8px;
+            }
+        }
+    }
+
+    &.@{ant-prefix}-layout-sider.@{pro-layout-sider-menu-prefix-cls}-fixed {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 99; // react pro-components: z-index: 100;
+        height: 100%;
+        overflow: auto;
+        overflow-x: hidden;
+        box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+        > .@{ant-prefix}-menu-root {
+            :not(.@{pro-layout-sider-menu-prefix-cls}-link-menu) {
+                height: ~'calc(100vh - @{nav-header-height})';
+                overflow-y: auto;
+            }
+        }
+    }
+
+    &-light {
+        background-color: @component-background;
+        box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+        .@{ant-prefix}-layout-sider-children {
+            ::-webkit-scrollbar-track {
+                background: rgba(0, 0, 0, 0.06);
+                border-radius: 3px;
+                box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
+            }
+
+            /* 滚动条滑块 */
+            ::-webkit-scrollbar-thumb {
+                background: rgba(0, 0, 0, 0.12);
+                border-radius: 3px;
+                box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
+            }
+        }
+
+        .@{pro-layout-sider-menu-prefix-cls}-logo {
+            h1 {
+                color: @primary-color;
+            }
+        }
+        .@{ant-prefix}-menu-light {
+            border-right-color: transparent;
+        }
+
+        .@{pro-layout-sider-menu-prefix-cls}-collapsed-button {
+            border-top: @border-width-base @border-style-base
+                @border-color-split;
+        }
+    }
+
+    &-icon {
+        width: 14px;
+        vertical-align: baseline;
+    }
+
+    &-links {
+        width: 100%;
+        ul.@{ant-prefix}-menu-root {
+            height: auto;
+        }
+    }
+
+    &-collapsed-button {
+        border-top: @border-width-base @border-style-base rgba(0, 0, 0, 0.25);
+        .anticon {
+            font-size: 16px;
+        }
+    }
+
+    .top-nav-menu li.@{ant-prefix}-menu-item {
+        height: 100%;
+        line-height: 1;
+    }
+    .drawer .drawer-content {
+        background: @layout-sider-background;
+    }
+}
+
+// 修正菜单 collapsed 时，icon 与 title 的间距
+.@{ant-prefix}-pro-menu-item {
+    .anticon + .@{ant-prefix}-pro-menu-item-title {
+        margin-left: 10px;
+    }
+}
+
+@keyframes pro-layout-title-hide {
+    0% {
+        display: none;
+        opacity: 0;
+    }
+    80% {
+        display: none;
+        opacity: 0;
+    }
+    100% {
+        display: unset;
+        opacity: 1;
+    }
+}

package/src/ProLayout/SiderMenu/index.ts

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

package/src/ProLayout/SiderMenu/typings.ts

@@ -0,0 +1,49 @@
+import type { VNodeChild, CSSProperties, HTMLAttributes } from 'vue';
+import type { Theme } from '../typings';
+
+export type {
+    MenuMode,
+    MenuTheme,
+} from 'ant-design-vue/lib/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;
+}

package/src/ProLayout/TopHeader/index.less

@@ -0,0 +1,174 @@
+@import '../style/default.less';
+
+@top-nav-header-prefix-cls: ~'@{ant-prefix}-pro-top-nav-header';
+@pro-layout-global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';
+
+@pro-layout-header-bg: @component-background;
+@pro-layout-header-hover-bg: @component-background;
+@pro-layout-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+.@{pro-layout-global-header-prefix-cls} {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 16px;
+    background: @pro-layout-header-bg;
+    box-shadow: @pro-layout-header-box-shadow;
+    > * {
+        height: 100%;
+    }
+
+    &-collapsed-button {
+        display: flex;
+        align-items: center;
+        margin-left: 16px;
+        font-size: 20px;
+    }
+
+    &-layout {
+        &-mix {
+            background-color: @layout-sider-background;
+            .@{pro-layout-global-header-prefix-cls}-logo {
+                h1 {
+                    color: @btn-primary-color;
+                }
+            }
+            .anticon {
+                color: @btn-primary-color;
+            }
+        }
+    }
+
+    &-logo {
+        position: relative;
+        overflow: hidden;
+        a {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            img {
+                height: 28px;
+            }
+            h1 {
+                height: 32px;
+                margin: 0 0 0 8px;
+                margin: 0 0 0 12px;
+                color: @primary-color;
+                font-weight: 600;
+                font-size: 18px;
+                line-height: 32px;
+            }
+        }
+    }
+
+    &-menu {
+        .anticon {
+            margin-right: 8px;
+        }
+        .@{ant-prefix}-dropdown-menu-item {
+            min-width: 160px;
+        }
+    }
+
+    .dark {
+        height: @pro-layout-header-height;
+        .action {
+            color: rgba(255, 255, 255, 0.85);
+            > i {
+                color: rgba(255, 255, 255, 0.85);
+            }
+            &:hover,
+            &.opened {
+                background: @primary-color;
+            }
+            .@{ant-prefix}-badge {
+                color: rgba(255, 255, 255, 0.85);
+            }
+        }
+    }
+}
+
+.@{top-nav-header-prefix-cls} {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
+    transition: background 0.3s, width 0.2s;
+
+    .@{ant-prefix}-menu {
+        background: transparent;
+    }
+
+    &.light {
+        background-color: @component-background;
+        .@{top-nav-header-prefix-cls}-logo {
+            h1 {
+                color: @heading-color;
+            }
+        }
+        .anticon {
+            color: inherit;
+        }
+    }
+
+    &-main {
+        display: flex;
+        height: 100%;
+        padding-left: 16px;
+        &-left {
+            display: flex;
+            min-width: 192px;
+        }
+    }
+
+    .anticon {
+        color: @btn-primary-color;
+    }
+
+    &-logo {
+        position: relative;
+        min-width: 165px;
+        height: 100%;
+        overflow: hidden;
+
+        img {
+            display: inline-block;
+            height: 32px;
+            vertical-align: middle;
+        }
+
+        h1 {
+            display: inline-block;
+            margin: 0 0 0 12px;
+            color: @btn-primary-color;
+            font-weight: 600;
+            font-size: 16px;
+            vertical-align: top;
+        }
+    }
+
+    &-menu {
+        min-width: 0;
+
+        .@{ant-prefix}-menu.@{ant-prefix}-menu-horizontal {
+            height: 100%;
+            border: none;
+
+            .@{ant-prefix}-menu-item {
+                height: 100%;
+
+                .@{ant-prefix}-badge {
+                    color: unset;
+                }
+            }
+        }
+    }
+}
+
+// replace sub.item
+.@{ant-prefix}-pro-menu-popup {
+    .@{ant-prefix}-badge {
+        color: unset;
+    }
+}

package/src/ProLayout/TopHeader/index.tsx

@@ -0,0 +1,210 @@
+import { computed, ref } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
+import { default as ResizeObserver } from 'ant-design-vue/lib/vc-resize-observer';
+import type { VueNode } from 'ant-design-vue/lib/_util/type';
+import type { SiderMenuProps } from '../SiderMenu/SiderMenu';
+import {
+    defaultRenderLogoAndTitle,
+    siderMenuProps,
+} from '../SiderMenu/SiderMenu';
+import PropTypes from 'ant-design-vue/lib/_util/vue-types';
+import type {
+    MenuDataItem,
+    ProProps,
+    RightContentRender,
+    WithFalse,
+    Theme,
+} from '../typings';
+import { defaultSettingProps } from '../defaultSettings';
+import type { PropType, FunctionalComponent, ExtractPropTypes } from 'vue';
+import { defaultPrefixCls, useRouteContext } from '../RouteContext';
+import BaseMenu from '../SiderMenu/BaseMenu';
+import { clearMenuItem } from '../util';
+
+export const baseHeaderProps = {
+    ...defaultSettingProps,
+    prefixCls: PropTypes.string.def('ant-pro'),
+    collapsed: PropTypes.looseBool,
+    logo: siderMenuProps.logo,
+    logoStyle: siderMenuProps.logoStyle,
+    headerTheme: {
+        type: String as PropType<Theme>,
+        default: 'dark',
+    },
+    menuData: {
+        type: Array as PropType<MenuDataItem[]>,
+        default: () => [],
+    },
+    splitMenus: siderMenuProps.splitMenus,
+    menuRender: {
+        type: [Object, Function] as PropType<
+            WithFalse<
+                (
+                    props: ProProps /* HeaderViewProps */,
+                    defaultDom: VueNode,
+                ) => VueNode
+            >
+        >,
+        default: () => undefined,
+    },
+    menuHeaderRender: siderMenuProps.menuHeaderRender,
+    menuItemRender: siderMenuProps.menuItemRender,
+    subMenuItemRender: siderMenuProps.subMenuItemRender,
+    rightContentRender: {
+        type: [Object, Function] as PropType<RightContentRender>,
+        default: () => undefined,
+    },
+    collapsedButtonRender: siderMenuProps.collapsedButtonRender,
+    matchMenuKeys: siderMenuProps.matchMenuKeys,
+
+    // events
+    onMenuHeaderClick: PropTypes.func,
+    onCollapse: siderMenuProps.onCollapse,
+    onOpenKeys: siderMenuProps.onOpenKeys,
+    onSelect: siderMenuProps.onSelect,
+};
+
+export type BaseHeaderPropsType = ExtractPropTypes<typeof baseHeaderProps>;
+
+export const topNavHeaderProps = { ...siderMenuProps, ...baseHeaderProps };
+
+export type TopNavHeaderProps = Partial<
+    ExtractPropTypes<typeof topNavHeaderProps>
+> &
+    Partial<SiderMenuProps>;
+
+const RightContent: FunctionalComponent<TopNavHeaderProps> = ({
+    rightContentRender,
+    ...props
+}) => {
+    const rightSize = ref<number | string>('auto');
+
+    return (
+        <div
+            style={{
+                minWidth: rightSize.value,
+            }}
+        >
+            <div
+                style={{
+                    paddingRight: 8,
+                }}
+            >
+                <ResizeObserver
+                    onResize={({ width }: { width: number }) => {
+                        rightSize.value = width;
+                    }}
+                >
+                    {rightContentRender &&
+                    typeof rightContentRender === 'function' ? (
+                        <div>
+                            {rightContentRender({
+                                ...props,
+                            })}
+                        </div>
+                    ) : (
+                        rightContentRender
+                    )}
+                </ResizeObserver>
+            </div>
+        </div>
+    );
+};
+
+export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = (props) => {
+    const headerRef = ref();
+    const {
+        prefixCls: propPrefixCls,
+        onMenuHeaderClick,
+        onOpenKeys,
+        onSelect,
+        contentWidth,
+        rightContentRender,
+        layout,
+        menuData,
+        mode,
+    } = props;
+    const context = useRouteContext();
+    const prefixCls = `${propPrefixCls || defaultPrefixCls}-top-nav-header`;
+    const headerDom = defaultRenderLogoAndTitle(
+        { ...props, collapsed: false } as SiderMenuProps,
+        // REMARK:: Any time render header title
+        // layout === 'mix' ? 'headerTitleRender' : undefined,
+        // layout !== 'side' ? 'headerTitleRender' : undefined,
+        'headerTitleRender',
+    );
+    //
+    let MenusData = props.layout === 'side' ? [] : menuData;
+    if (props.layout === 'mix' && props.splitMenus) {
+        const noChildrenMenuData = (menuData || []).map((item) => ({
+            ...item,
+            children: undefined,
+            component: undefined,
+        })) as RouteRecordRaw[];
+        MenusData = clearMenuItem(noChildrenMenuData);
+    }
+
+    const _mode = computed(() =>
+        props.layout === 'mix' && props.splitMenus ? 'horizontal' : mode,
+    );
+
+    const className = computed(() => {
+        return {
+            [prefixCls]: true,
+            light: props.theme === 'light',
+            dark: props.theme === 'dark',
+        };
+    });
+
+    return (
+        <div class={className.value}>
+            <div
+                ref={headerRef}
+                class={`${prefixCls}-main ${
+                    contentWidth === 'Fixed' ? 'wide' : ''
+                }`}
+            >
+                {headerDom && (
+                    <div
+                        class={`${prefixCls}-main-left`}
+                        onClick={onMenuHeaderClick}
+                    >
+                        <div class={`${prefixCls}-logo`} key="logo" id="logo">
+                            {headerDom}
+                        </div>
+                    </div>
+                )}
+                <div style={{ flex: 1 }} class={`${prefixCls}-menu`}>
+                    <BaseMenu
+                        prefixCls={propPrefixCls}
+                        locale={props.locale || context.locale}
+                        theme={props.theme}
+                        mode={_mode.value}
+                        collapsed={props.collapsed}
+                        iconfontUrl={props.iconfontUrl}
+                        menuData={MenusData}
+                        menuItemRender={props.menuItemRender}
+                        subMenuItemRender={props.subMenuItemRender}
+                        openKeys={context.openKeys}
+                        selectedKeys={context.selectedKeys}
+                        class={{
+                            'top-nav-menu': props.mode === 'horizontal',
+                        }}
+                        {...{
+                            'onUpdate:openKeys': ($event: string[]) =>
+                                onOpenKeys && onOpenKeys($event),
+                            'onUpdate:selectedKeys': ($event: string[]) =>
+                                onSelect && onSelect($event),
+                        }}
+                    />
+                </div>
+                {rightContentRender && (
+                    <RightContent
+                        rightContentRender={rightContentRender}
+                        {...props}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};