@jetlinks-web/components 1.0.5 → 2.0.0

package/src/ProLayout/PageContainer/index.tsx

@@ -0,0 +1,441 @@
+import { withInstall } from 'ant-design-vue/es/_util/type';
+import {
+    TabPaneProps,
+    Affix,
+    Spin,
+    PageHeader,
+    Tabs,
+    Button,
+} from 'ant-design-vue';
+import type {
+    ExtractPropTypes,
+    FunctionalComponent,
+    PropType,
+    VNodeChild,
+    CSSProperties,
+} from 'vue';
+import { defineComponent, unref, toRefs, computed } from 'vue';
+import { pageHeaderProps } from 'ant-design-vue/lib/page-header';
+import type { DefaultPropRender, PageHeaderRender } from '../typings';
+import type { AffixProps, TabBarExtraContent } from './typings';
+import { useRouteContext } from '../RouteContext';
+import { getSlotVNode } from '../util';
+import { VueNode } from 'ant-design-vue/lib/_util/type';
+import './index.less';
+
+export const pageHeaderTabConfig = {
+    /**
+     * @name tabs 的列表
+     */
+    tabList: {
+        type: [Object, Function, Array] as PropType<
+            (Omit<TabPaneProps, 'id'> & { key?: string; class: string })[]
+        >,
+        default: () => undefined,
+    },
+    /**
+     * @name 当前选中 tab 的 key
+     */
+    tabActiveKey: String, //PropTypes.string,
+    /**
+     * @name tab 上多余的区域
+     */
+    tabBarExtraContent: {
+        type: [Object, Function] as PropType<TabBarExtraContent>,
+        default: () => undefined,
+    },
+    /**
+     * @name tabs 的其他配置
+     */
+    tabProps: {
+        type: Object, //as PropType<TabsProps>,
+        default: () => undefined,
+    },
+    /**
+     * @name 固定 PageHeader 到页面顶部
+     */
+    fixedHeader: Boolean, //PropTypes.looseBool,
+    // events
+    onTabChange: Function, //PropTypes.func,
+    pure: Boolean,
+};
+export type PageHeaderTabConfig = Partial<
+    ExtractPropTypes<typeof pageHeaderTabConfig>
+>;
+
+export const pageContainerProps = {
+    ...pageHeaderTabConfig,
+    ...pageHeaderProps,
+    prefixCls: {
+        type: String,
+        default: 'ant-pro',
+    }, //PropTypes.string.def('ant-pro'),
+    title: {
+        type: [
+            Object,
+            String,
+            Boolean,
+            Function,
+        ] as PropType<DefaultPropRender>,
+        default: () => null,
+    },
+    subTitle: {
+        type: [
+            Object,
+            String,
+            Boolean,
+            Function,
+        ] as PropType<DefaultPropRender>,
+        default: () => null,
+    },
+    content: {
+        type: [
+            Object,
+            String,
+            Boolean,
+            Function,
+        ] as PropType<DefaultPropRender>,
+        default: () => null,
+    },
+    extra: {
+        type: [
+            Object,
+            String,
+            Boolean,
+            Function,
+        ] as PropType<DefaultPropRender>,
+        default: () => null,
+    },
+    extraContent: {
+        type: [
+            Object,
+            String,
+            Boolean,
+            Function,
+        ] as PropType<DefaultPropRender>,
+        default: () => null,
+    },
+    header: {
+        type: [
+            Object,
+            String,
+            Boolean,
+            Function,
+        ] as PropType<DefaultPropRender>,
+        default: () => null,
+    },
+    pageHeaderRender: {
+        type: [Object, Function, Boolean] as PropType<PageHeaderRender>,
+        default: () => undefined,
+    },
+    affixProps: {
+        type: [Object, Function] as PropType<AffixProps>,
+    },
+    ghost: {
+        type: Boolean,
+        default: () => false,
+    }, //PropTypes.looseBool,
+    loading: {
+        type: Boolean,
+        default: () => undefined,
+    }, //PropTypes.looseBool,
+    childrenFullHeight: {
+        type: Boolean,
+        default: () => true,
+    },
+    pure: {
+        type: Boolean,
+        default: false,
+    },
+    showBack: {
+        type: Boolean,
+        default: false,
+    },
+    contentStyle: {
+        type: Object,
+        default: () => ({}),
+    },
+};
+
+export type PageContainerProps = Partial<
+    ExtractPropTypes<typeof pageContainerProps>
+>;
+
+const renderFooter = (
+    props: Omit<PageContainerProps, 'title'>,
+): VNodeChild | JSX.Element => {
+    const { tabList, tabActiveKey, onTabChange, tabBarExtraContent, tabProps } =
+        props;
+    const tabPane = (item: any) => {
+        return (
+            <span class={item.class || `tab-pane-${item.key}`}>{item.tab}</span>
+        );
+    };
+    if (tabList && tabList.length) {
+        return (
+            <Tabs
+                class={`page-container-tabs`}
+                activeKey={tabActiveKey}
+                onChange={(key: string | number) => {
+                    if (onTabChange) {
+                        onTabChange(key);
+                    }
+                }}
+                tabBarExtraContent={tabBarExtraContent}
+                {...tabProps}
+            >
+                {tabList.map((item) => (
+                    <Tabs.TabPane
+                        {...item}
+                        tab={tabPane(item)}
+                        key={item.key}
+                    />
+                ))}
+            </Tabs>
+        );
+    }
+    return null;
+};
+
+const renderPageHeader = (
+    content: VueNode,
+    extraContent: VueNode | any,
+    prefixedClassName: string,
+): VNodeChild | JSX.Element | null => {
+    if (!content && !extraContent) {
+        return null;
+    }
+    return (
+        <div class={`${prefixedClassName}-detail`}>
+            <div class={`${prefixedClassName}-main`}>
+                <div class={`${prefixedClassName}-row`}>
+                    {content && (
+                        <div class={`${prefixedClassName}-content`}>
+                            {
+                                // @ts-ignore
+                                (typeof content === 'function' && content()) ||
+                                    content
+                            }
+                        </div>
+                    )}
+                    {extraContent && (
+                        <div class={`${prefixedClassName}-extraContent`}>
+                            {
+                                // @ts-ignore
+                                (typeof extraContent === 'function' &&
+                                    extraContent()) ||
+                                    extraContent
+                            }
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const ProPageHeader: FunctionalComponent<
+    PageContainerProps & { prefixedClassName: string }
+> = (props) => {
+    const {
+        title,
+        tabList,
+        tabActiveKey,
+        content,
+        pageHeaderRender,
+        header,
+        extraContent,
+        prefixedClassName,
+        prefixCls,
+        fixedHeader: _,
+        showBack,
+        ...restProps
+    } = props;
+
+    const value = useRouteContext();
+
+    if (pageHeaderRender === false) {
+        return null;
+    }
+
+    if (pageHeaderRender) {
+        return pageHeaderRender({ ...props });
+    }
+    let pageHeaderTitle = title;
+    if (!title && title !== false) {
+        pageHeaderTitle = value.title;
+    }
+
+    const unrefBreadcrumb = unref(value.breadcrumb || {});
+    const breadcrumb = (props as any).breadcrumb || {
+        ...unrefBreadcrumb,
+        routes: unrefBreadcrumb.routes,
+        itemRender: unrefBreadcrumb.itemRender,
+    };
+
+    const backProps: any = {};
+
+    if (showBack) {
+        // @ts-ignore
+        backProps.backIcon = <Button>返回</Button>;
+        backProps.onBack = () => {
+            value.back?.();
+        };
+    }
+
+    return (
+        <div class={`${prefixedClassName}-wrap`}>
+            <PageHeader
+                {...backProps}
+                {...restProps}
+                // {...value}
+                title={pageHeaderTitle}
+                breadcrumb={breadcrumb}
+                footer={renderFooter({
+                    ...restProps,
+                    tabList,
+                    tabActiveKey,
+                })}
+                prefixCls={prefixCls}
+            >
+                {header ||
+                    renderPageHeader(content, extraContent, prefixedClassName)}
+            </PageHeader>
+        </div>
+    );
+};
+
+const PageContainer = defineComponent({
+    name: 'JPageContainer',
+    inheritAttrs: false,
+    props: pageContainerProps,
+    setup(props, { slots, attrs }) {
+        const { loading, affixProps, ghost, childrenFullHeight } =
+            toRefs(props);
+
+        const value = useRouteContext();
+        const { getPrefixCls } = value;
+        const prefixCls = props.prefixCls || getPrefixCls();
+
+        const prefixedClassName = computed(() => `${prefixCls}-page-container`);
+        const classNames = computed(() => {
+            return {
+                [prefixedClassName.value]: true,
+                [`${prefixCls}-page-container-ghost`]: ghost.value,
+            };
+        });
+
+        const headerDom = computed(() => {
+            // const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
+            const headerContent = getSlotVNode<DefaultPropRender>(
+                slots,
+                props,
+                'content',
+            );
+            const extra = getSlotVNode<DefaultPropRender>(
+                slots,
+                props,
+                'extra',
+            );
+            const extraContent = getSlotVNode<DefaultPropRender>(
+                slots,
+                props,
+                'extraContent',
+            );
+            const subTitle = getSlotVNode<DefaultPropRender>(
+                slots,
+                props,
+                'subTitle',
+            );
+            const title = getSlotVNode<DefaultPropRender>(
+                slots,
+                props,
+                'title',
+            );
+
+            // @ts-ignore
+            return (
+                <ProPageHeader
+                    {...props}
+                    prefixCls={undefined}
+                    prefixedClassName={prefixedClassName.value}
+                    ghost={ghost.value}
+                    title={title}
+                    subTitle={subTitle}
+                    content={headerContent}
+                    // tags={tags}
+                    extra={extra}
+                    extraContent={extraContent}
+                />
+            );
+        });
+
+        return () => {
+            const { fixedHeader, pure } = props;
+            return (
+                <>
+                    {pure ? (
+                        <div class={classNames.value}>{slots.default?.()}</div>
+                    ) : (
+                        <div
+                            class={classNames.value}
+                            style={{
+                                ...((attrs.style as CSSProperties) || {}),
+                            }}
+                        >
+                            {fixedHeader && headerDom.value ? (
+                                <Affix
+                                    {...affixProps.value}
+                                    offsetTop={
+                                        value.hasHeader && value.fixedHeader
+                                            ? value.headerHeight
+                                            : 0
+                                    }
+                                >
+                                    {headerDom.value}
+                                </Affix>
+                            ) : (
+                                headerDom.value
+                            )}
+                            <div
+                                class={`${prefixedClassName.value}-grid-content`}
+                            >
+                                {loading.value ? (
+                                    <Spin />
+                                ) : slots.default ? (
+                                    <div>
+                                        <div
+                                            class={`${
+                                                prefixedClassName.value
+                                            }-children-content ${
+                                                childrenFullHeight.value
+                                                    ? 'children-full-height'
+                                                    : ''
+                                            }`}
+                                            style={{
+                                                ...((props.contentStyle as CSSProperties) ||
+                                                    {}),
+                                            }}
+                                        >
+                                            {slots.default()}
+                                        </div>
+                                        {value.hasFooterToolbar && (
+                                            <div
+                                                style={{
+                                                    height: 48,
+                                                    marginTop: 24,
+                                                }}
+                                            />
+                                        )}
+                                    </div>
+                                ) : null}
+                            </div>
+                        </div>
+                    )}
+                </>
+            );
+        };
+    },
+});
+
+export default withInstall(PageContainer);

package/src/ProLayout/PageContainer/typings.ts

@@ -0,0 +1,56 @@
+import type { VNodeChild, CSSProperties, VNode } from 'vue';
+
+export interface Tab {
+    key: string;
+    tab: string | VNode | JSX.Element;
+}
+
+export type TabBarType = 'line' | 'card' | 'editable-card';
+export type TabSize = 'default' | 'large' | 'small';
+export type TabPosition = 'left' | 'right';
+export type TabBarExtraPosition = TabPosition;
+
+export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, VNodeChild>>;
+
+export type TabBarExtraContent = VNodeChild | TabBarExtraMap;
+
+export interface TabsProps {
+    prefixCls?: string;
+    class?: string | string[];
+    style?: CSSProperties;
+    id?: string;
+
+    activeKey?: string;
+    hideAdd?: boolean;
+    // Unchangeable
+    // size?: TabSize;
+    tabBarStyle?: CSSProperties;
+    tabPosition?: TabPosition;
+    type?: TabBarType;
+    tabBarGutter?: number;
+}
+
+export interface AffixProps {
+    offsetBottom: number;
+    offsetTop: number;
+    target?: () => HTMLElement;
+
+    onChange?: (affixed: boolean) => void;
+}
+
+export interface TabPaneProps {
+    tab?: string | VNodeChild | JSX.Element;
+    class?: string | string[];
+    style?: CSSProperties;
+    disabled?: boolean;
+    forceRender?: boolean;
+    closable?: boolean;
+    closeIcon?: VNodeChild | JSX.Element;
+
+    prefixCls?: string;
+    tabKey?: string;
+    id: string;
+    animated?: boolean;
+    active?: boolean;
+    destroyInactiveTabPane?: boolean;
+}

package/src/ProLayout/RouteContext.ts

@@ -0,0 +1,87 @@
+import { provide, reactive } from 'vue';
+import type { InjectionKey, Ref, VNodeChild, ComputedRef } from 'vue';
+import { useContext } from '@jetlinks-web/hooks';
+import type { MenuDataItem, FormatMessage, WithFalse } from './typings';
+import type { DefaultSettingProps } from './defaultSettings';
+
+export interface Route {
+    path: string;
+    breadcrumbName: string;
+    children?: Omit<Route, 'children'>[];
+}
+
+export interface BreadcrumbProps {
+    prefixCls?: string;
+    routes?: Route[];
+    params?: any;
+    separator?: VNodeChild;
+    itemRender?: (opts: {
+        route: Route;
+        params: any;
+        routes: Array<Route>;
+        paths: Array<string>;
+    }) => VNodeChild;
+}
+
+export type BreadcrumbListReturn = Pick<
+    BreadcrumbProps,
+    Extract<keyof BreadcrumbProps, 'routes' | 'itemRender'>
+>;
+
+export interface MenuState {
+    selectedKeys: string[];
+    openKeys: string[];
+}
+
+export interface RouteContextProps
+    extends Partial<DefaultSettingProps>,
+        MenuState {
+    menuData: MenuDataItem[];
+    flatMenuData?: MenuDataItem[];
+
+    getPrefixCls?: (suffixCls?: string, customizePrefixCls?: string) => string;
+    locale?: WithFalse<FormatMessage>;
+    breadcrumb?: BreadcrumbListReturn | ComputedRef<BreadcrumbListReturn>;
+    prefixCls?: string;
+    collapsed?: boolean;
+    hasSideMenu?: boolean;
+    hasHeader?: boolean;
+    siderWidth?: number;
+    headerHeight?: number;
+    hasSide?: boolean;
+    /* 附加属性 */
+    [key: string]: any;
+}
+
+export const defaultPrefixCls = 'ant-pro';
+
+export const getPrefixCls = (
+    suffixCls?: string,
+    customizePrefixCls?: string,
+) => {
+    if (customizePrefixCls) return customizePrefixCls;
+    return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls;
+};
+
+export const defaultRouteContext = reactive({
+    getPrefixCls,
+    locale: (t: string) => t,
+    contentWidth: 'Fluid',
+    hasFooterToolbar: false,
+});
+
+export const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol(
+    'jetlinks-route-context',
+);
+
+export const provideRouteContext = (
+    value: RouteContextProps | Ref<RouteContextProps>,
+) => {
+    provide(routeContextInjectKey, value);
+};
+
+export const useRouteContext = () =>
+    useContext<Required<RouteContextProps>>(
+        routeContextInjectKey,
+        defaultRouteContext,
+    );