@jetlinks-web/components 2.0.2 → 2.0.3

package/src/ProLayout/Basic/BasicLayout.tsx

@@ -1,392 +0,0 @@
-import type {
-    BreadcrumbRender,
-    FormatMessage,
-    HeaderContentRender,
-    WithFalse,
-    HeaderRender,
-    RightContentRender,
-    CollapsedButtonRender,
-    MenuExtraRender,
-    SubMenuItemRender,
-    MenuContentRender,
-    MenuItemRender,
-    MenuHeaderRender,
-} from '../typings';
-import SiderMenu, { siderMenuProps } from '../SiderMenu/SiderMenu';
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
-import {
-    computed,
-    defineComponent,
-    provide,
-    reactive,
-    watchEffect,
-    toRefs,
-} from 'vue';
-import { defaultSettingProps } from '../defaultSettings';
-import { baseHeaderProps } from '../TopHeader';
-import Header, { headerViewProps } from './Header';
-import type { VueNode } from 'ant-design-vue/es/_util/type';
-import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject';
-import type { BreadcrumbProps, RouteContextProps } from '../RouteContext';
-import { pick } from 'lodash-es';
-import { defaultRouteContext, routeContextInjectKey } from '../RouteContext';
-import { getMenuFirstChildren, getSlot } from '../util';
-import { Layout, LayoutContent } from 'ant-design-vue';
-
-export const basicLayoutProps = {
-    ...defaultSettingProps,
-    ...siderMenuProps,
-    ...baseHeaderProps,
-    ...headerViewProps,
-
-    pure: Boolean,
-    loading: Boolean,
-    locale: {
-        type: [Function, Boolean] as PropType<WithFalse<FormatMessage>>,
-        default() {
-            return (s: string) => s;
-        },
-    },
-    /**
-     * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
-     */
-    disableMobile: {
-        type: Boolean,
-        required: false,
-    },
-    isChildrenLayout: {
-        type: Boolean,
-        required: false,
-    },
-    /**
-     * 兼用 content 的 margin
-     */
-    disableContentMargin: {
-        type: Boolean,
-        required: false,
-    },
-    colSize: {
-        type: Number,
-        required: false,
-    },
-    contentStyle: {
-        type: [String, Object] as PropType<CSSProperties>,
-        default: () => {
-            return null;
-        },
-    },
-    breadcrumb: {
-        type: [Object, Function] as PropType<BreadcrumbProps>,
-        default: () => null,
-    },
-    collapsedButtonRender: {
-        type: [Function, Object, Boolean] as PropType<
-            WithFalse<(collapsed?: boolean) => VueNode>
-        >,
-        default: () => undefined,
-    },
-    breadcrumbRender: {
-        type: [Object, Function, Boolean] as PropType<BreadcrumbRender>,
-        default() {
-            return null;
-        },
-    },
-    headerContentRender: {
-        type: [Function, Object, Boolean] as PropType<HeaderContentRender>,
-        default: () => undefined,
-    },
-    headerRender: {
-        type: [Object, Function, Boolean] as PropType<HeaderRender>,
-        default: () => undefined,
-    },
-};
-
-export type BasicLayoutProps = Partial<
-    ExtractPropTypes<typeof basicLayoutProps>
->;
-
-export default defineComponent({
-    name: 'JProLayout',
-    inheritAttrs: false,
-    props: basicLayoutProps,
-    emits: [
-        'update:collapsed',
-        'update:open-keys',
-        'update:selected-keys',
-        'collapse',
-        'openKeys',
-        'select',
-        'menuHeaderClick',
-        'menuClick',
-        'backClick',
-    ],
-    setup(props, { emit, attrs, slots }) {
-        const { prefixCls } = useConfigInject('layout', {});
-        const isTop = computed(() => props.layout === 'top');
-        const hasSide = computed(
-            () => props.layout === 'mix' || props.layout === 'side' || false,
-        );
-        const hasSplitMenu = computed(
-            () => props.layout === 'mix' && props.splitMenus,
-        );
-        const hasFlatMenu = computed(() => {
-            return hasSide.value && hasSplitMenu.value;
-        });
-        const siderWidth = computed(() =>
-            props.collapsed ? props.collapsedWidth : props.siderWidth,
-        );
-
-        const onCollapse = (collapsed: boolean) => {
-            emit('update:collapsed', collapsed);
-            emit('collapse', collapsed);
-        };
-        const onOpenKeys = (openKeys: string[] | false) => {
-            emit('update:open-keys', openKeys);
-            emit('openKeys', openKeys);
-        };
-        const onSelect = (selectedKeys: string[] | false) => {
-            emit('update:selected-keys', selectedKeys);
-            emit('select', selectedKeys);
-        };
-        const onMenuHeaderClick = (e: MouseEvent) => {
-            emit('menuHeaderClick', e);
-        };
-        const onMenuClick = (args: any) => {
-            emit('menuClick', args);
-        };
-        const onBack = (args: any) => {
-            emit('backClick', args);
-        };
-
-        const baseClassName = computed(() => `${props.prefixCls}-basicLayout`);
-
-        const className = computed(() => {
-            return {
-                [baseClassName.value]: true,
-                [`${baseClassName.value}-top-menu`]: isTop.value,
-                [`${baseClassName.value}-is-children`]: props.isChildrenLayout,
-                [`${baseClassName.value}-fix-siderbar`]: props.fixSiderbar,
-                [`${baseClassName.value}-${props.layout}`]: props.layout,
-            };
-        });
-
-        const genLayoutStyle = reactive<CSSProperties>({
-            position: 'relative',
-        });
-
-        watchEffect(() => {
-            if (
-                props.isChildrenLayout ||
-                (props.contentStyle && props.contentStyle.minHeight)
-            ) {
-                genLayoutStyle.minHeight = 0;
-            }
-        });
-
-        const headerRender = (
-            p: BasicLayoutProps & {
-                hasSiderMenu: boolean;
-                headerRender: HeaderRender;
-                rightContentRender: RightContentRender;
-            },
-            matchMenuKeys?: string[],
-        ): VueNode | null => {
-            if (p.headerRender === false || p.pure) {
-                return null;
-            }
-            return <Header {...p} matchMenuKeys={matchMenuKeys || []} />;
-        };
-
-        const breadcrumb = computed<BreadcrumbProps>(() => ({
-            ...props.breadcrumb,
-            itemRender: getSlot<BreadcrumbRender>(
-                slots,
-                props,
-                'breadcrumbRender',
-            ) as BreadcrumbRender,
-        }));
-
-        const flatMenuData = computed(
-            () =>
-                (hasFlatMenu.value &&
-                    props.selectedKeys &&
-                    getMenuFirstChildren(
-                        props.menuData,
-                        props.selectedKeys[0],
-                    )) ||
-                [],
-        );
-
-        const routeContext = reactive<RouteContextProps>({
-            ...defaultRouteContext,
-            ...(pick(toRefs(props), [
-                'pure',
-                'locale',
-                'menuData',
-                'openKeys',
-                'selectedKeys',
-                'contentWidth',
-                'disableMobile',
-                'fixSiderbar',
-                'fixedHeader',
-                'headerHeight',
-            ]) as any),
-            siderWidth,
-            breadcrumb,
-            flatMenuData,
-            hasSide,
-            back: onBack,
-            hasHeader: true,
-            flatMenu: hasFlatMenu,
-        });
-        provide(routeContextInjectKey, routeContext);
-
-        return () => {
-            const {
-                pure,
-                onCollapse: propsOnCollapse,
-                onOpenKeys: propsOnOpenKeys,
-                onSelect: propsOnSelect,
-                onMenuClick: propsOnMenuClick,
-                ...restProps
-            } = props;
-
-            const collapsedButtonRender = getSlot<CollapsedButtonRender>(
-                slots,
-                props,
-                'collapsedButtonRender',
-            );
-            const headerContentRender = getSlot<HeaderContentRender>(
-                slots,
-                props,
-                'headerContentRender',
-            );
-            const rightContentRender = getSlot<RightContentRender>(
-                slots,
-                props,
-                'rightContentRender',
-            );
-            const customHeaderRender = getSlot<HeaderRender>(
-                slots,
-                props,
-                'headerRender',
-            );
-
-            // menu
-            const menuHeaderRender = getSlot<MenuHeaderRender>(
-                slots,
-                props,
-                'menuHeaderRender',
-            );
-            const menuExtraRender = getSlot<MenuExtraRender>(
-                slots,
-                props,
-                'menuExtraRender',
-            );
-            const menuContentRender = getSlot<MenuContentRender>(
-                slots,
-                props,
-                'menuContentRender',
-            );
-            const menuItemRender = getSlot<MenuItemRender>(
-                slots,
-                props,
-                'menuItemRender',
-            );
-            const subMenuItemRender = getSlot<SubMenuItemRender>(
-                slots,
-                props,
-                'subMenuItemRender',
-            );
-
-            const headerDom = computed(() =>
-                headerRender(
-                    {
-                        ...props,
-                        menuItemRender,
-                        subMenuItemRender,
-                        hasSiderMenu: !isTop.value,
-                        menuData: props.menuData,
-                        onCollapse,
-                        onOpenKeys,
-                        onSelect,
-                        onMenuHeaderClick,
-                        rightContentRender,
-                        collapsedButtonRender,
-                        headerTitleRender: menuHeaderRender,
-                        menuExtraRender,
-                        menuContentRender,
-                        headerContentRender,
-                        headerRender: customHeaderRender,
-                        theme: (props.theme || 'dark')
-                            .toLocaleLowerCase()
-                            .includes('dark')
-                            ? 'dark'
-                            : 'light',
-                    },
-                    props.matchMenuKeys,
-                ),
-            );
-            routeContext.hasHeader = !!headerDom.value;
-
-            const contentClassName = computed(() => {
-                return {
-                    [`${baseClassName.value}-content`]: true,
-                    [`${baseClassName.value}-has-header`]: headerDom,
-                    [`${baseClassName.value}-content-disable-margin`]:
-                        props.disableContentMargin,
-                };
-            });
-
-            return (
-                <>
-                    {pure ? (
-                        slots.default?.()
-                    ) : (
-                        <div class={className.value}>
-                            <Layout
-                                style={{
-                                    minHeight: '100vh',
-                                    ...((attrs.style as CSSProperties) || {}),
-                                }}
-                            >
-                                {headerDom.value}
-                                <Layout
-                                    style={genLayoutStyle}
-                                    class={prefixCls.value}
-                                >
-                                    {!isTop.value && (
-                                        <SiderMenu
-                                            {...restProps}
-                                            menuHeaderRender={menuHeaderRender}
-                                            menuExtraRender={menuExtraRender}
-                                            menuContentRender={
-                                                menuContentRender
-                                            }
-                                            menuItemRender={menuItemRender}
-                                            subMenuItemRender={
-                                                subMenuItemRender
-                                            }
-                                            collapsedButtonRender={
-                                                collapsedButtonRender
-                                            }
-                                            onCollapse={onCollapse}
-                                            onSelect={onSelect}
-                                            onOpenKeys={onOpenKeys}
-                                            onMenuClick={onMenuClick}
-                                        />
-                                    )}
-                                    <Layout>
-                                        <LayoutContent>
-                                            {slots.default?.()}
-                                        </LayoutContent>
-                                    </Layout>
-                                </Layout>
-                            </Layout>
-                        </div>
-                    )}
-                </>
-            );
-        };
-    },
-});

package/src/ProLayout/Basic/Header.tsx

@@ -1,115 +0,0 @@
-import { baseHeaderProps, TopNavHeader } from '../TopHeader';
-import type { BaseHeaderPropsType } from '../TopHeader';
-import PropTypes from 'ant-design-vue/es/_util/vue-types';
-import type { VueNode } from 'ant-design-vue/es/_util/type';
-import type { ExtractPropTypes, PropType } from 'vue';
-import { defineComponent, computed, toRefs } from 'vue';
-import type { WithFalse } from '../typings';
-import { useRouteContext } from '../RouteContext';
-import { Layout } from 'ant-design-vue';
-
-export const headerViewProps = {
-    ...baseHeaderProps,
-    headerRender: {
-        type: [Object, Function, Boolean] as PropType<
-            WithFalse<(props: any, defaultDom: VueNode) => VueNode>
-        >,
-        default: () => undefined,
-    },
-    headerTitleRender: {
-        type: [Object, Function, Boolean] as PropType<
-            WithFalse<(props: any, defaultDom: VueNode) => VueNode>
-        >,
-        default: () => undefined,
-    },
-    headerContentRender: {
-        type: [Object, Function, Boolean] as PropType<
-            WithFalse<(props: any) => VueNode>
-        >,
-        default: () => undefined,
-    },
-    hasSiderMenu: PropTypes.looseBool,
-    siderWidth: PropTypes.number.def(208),
-};
-
-export type HeaderViewProps = Partial<
-    ExtractPropTypes<typeof headerViewProps> & BaseHeaderPropsType
->;
-
-export default defineComponent({
-    name: 'HeaderView',
-    inheritAttrs: false,
-    props: headerViewProps,
-    setup(props) {
-        const {
-            prefixCls,
-            fixedHeader,
-            hasSiderMenu,
-            headerHeight,
-            layout,
-            theme,
-            onCollapse,
-        } = toRefs(props);
-        const context = useRouteContext();
-        const needFixedHeader = computed(
-            () => fixedHeader.value || context.fixedHeader,
-        );
-        const isMix = computed(() => layout.value === 'mix');
-        const isTop = computed(() => layout.value === 'top');
-        const needSettingWidth = computed(
-            () => needFixedHeader.value && hasSiderMenu.value && !isTop.value,
-        );
-
-        const className = computed(() => {
-            return {
-                [`${prefixCls.value}-fixed-header`]: needFixedHeader.value,
-                [`${prefixCls.value}-top-menu`]: isTop.value,
-            };
-        });
-
-        const renderContent = () => {
-            const defaultDom = (
-                <TopNavHeader
-                    theme={theme.value}
-                    mode="horizontal"
-                    {...props}
-                    onCollapse={onCollapse.value}
-                    menuData={context.menuData}
-                />
-            );
-            if (props.headerRender) {
-                return props.headerRender(props, defaultDom);
-            }
-            return defaultDom;
-        };
-
-        const right = computed(() => (needFixedHeader.value ? 0 : undefined));
-
-        return () => (
-            <>
-                {needFixedHeader.value && (
-                    <Layout.Header
-                        style={{
-                            height: `${headerHeight.value}px`,
-                            lineHeight: `${headerHeight.value}px`,
-                            background: 'transparent',
-                        }}
-                    />
-                )}
-                <Layout.Header
-                    style={{
-                        padding: 0,
-                        height: `${headerHeight.value}px`,
-                        lineHeight: `${headerHeight.value}px`,
-                        width: '100%',
-                        zIndex: 100,
-                        right: right.value,
-                    }}
-                    class={className.value}
-                >
-                    {renderContent()}
-                </Layout.Header>
-            </>
-        );
-    },
-});