@jetlinks-web/components 2.0.2 → 2.0.3

package/src/ProLayout/TopHeader/index.tsx

@@ -1,210 +0,0 @@
-import { computed, ref } from 'vue';
-import type { RouteRecordRaw } from 'vue-router';
-import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
-import type { VueNode } from 'ant-design-vue/es/_util/type';
-import type { SiderMenuProps } from '../SiderMenu/SiderMenu';
-import {
-    defaultRenderLogoAndTitle,
-    siderMenuProps,
-} from '../SiderMenu/SiderMenu';
-import PropTypes from 'ant-design-vue/es/_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>
-    );
-};

package/src/ProLayout/defaultSettings.ts

@@ -1,106 +0,0 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { Theme, ContentWidth } from './typings';
-
-export interface RenderSetting {
-    headerRender?: false;
-    menuRender?: false;
-    menuHeaderRender?: false;
-}
-
-export interface DefaultSettingProps {
-    theme?: Theme;
-    /**
-     * 自定义页眉高度
-     */
-    headerHeight?: number;
-    /**
-     *
-     */
-    layout: 'side' | 'top' | 'mix';
-
-    contentWidth: ContentWidth;
-    /**
-     * sticky header
-     */
-    fixedHeader: boolean;
-    /**
-     * sticky siderbar
-     */
-    fixSiderbar: boolean;
-    menu: { locale?: boolean; defaultOpenAll?: boolean };
-    title: string;
-    // Your custom iconfont Symbol script Url
-    // eg：//at.alicdn.com/t/font_1039637_btcrd5co4w.js
-    // 注意：如果需要图标多色，Iconfont 图标项目里要进行批量去色处理
-    // Usage: https://github.com/ant-design/ant-design-pro/pull/3517
-    iconfontUrl: string;
-    primaryColor: string;
-    colorWeak?: boolean;
-    splitMenus?: boolean;
-}
-
-export type ProSettings = DefaultSettingProps & RenderSetting;
-
-export const defaultSettings = {
-    theme: 'light',
-    layout: 'mix',
-    contentWidth: 'Fluid',
-    fixedHeader: true,
-    fixSiderbar: true,
-    menu: {
-        locale: true,
-    },
-    headerHeight: 48,
-    title: 'Jetlink UI Components',
-    iconfontUrl: '',
-    primaryColor: '#315EFB',
-};
-
-export const defaultSettingProps = {
-    theme: {
-        type: String as PropType<DefaultSettingProps['theme']>,
-        default: defaultSettings.theme,
-    },
-    layout: {
-        type: String as PropType<DefaultSettingProps['layout']>,
-        default: defaultSettings.layout,
-    },
-    contentWidth: {
-        type: String as PropType<DefaultSettingProps['contentWidth']>,
-        default: defaultSettings.contentWidth,
-    },
-    fixedHeader: {
-        type: Boolean as PropType<DefaultSettingProps['fixedHeader']>,
-        default: defaultSettings.fixedHeader,
-    },
-    fixSiderbar: {
-        type: Boolean as PropType<DefaultSettingProps['fixSiderbar']>,
-        default: defaultSettings.fixSiderbar,
-    },
-    menu: {
-        type: Object as PropType<DefaultSettingProps['menu']>,
-        default: () => {
-            return {
-                locale: true,
-            };
-        },
-    },
-    headerHeight: {
-        type: Number as PropType<DefaultSettingProps['headerHeight']>,
-        default: defaultSettings.headerHeight,
-    },
-    title: {
-        type: String as PropType<DefaultSettingProps['title']>,
-        default: () => defaultSettings.title,
-    },
-    iconfontUrl: {
-        type: String as PropType<DefaultSettingProps['iconfontUrl']>,
-        default: () => defaultSettings.iconfontUrl,
-    },
-    primaryColor: {
-        type: String as PropType<DefaultSettingProps['primaryColor']>,
-        default: () => defaultSettings.primaryColor,
-    },
-};
-
-export type ProSettingsProps = ExtractPropTypes<typeof defaultSettingProps>;

package/src/ProLayout/style/index.ts

@@ -1 +0,0 @@
-import './style.less';

package/src/ProLayout/typings.ts

@@ -1,87 +0,0 @@
-import type { VNode } from 'vue';
-import type { BreadcrumbProps } from './RouteContext';
-import type { VueNode } from 'ant-design-vue/es/_util/type';
-
-export type Theme = 'dark' | 'light';
-export type LayoutType = 'side' | 'top' | 'mix';
-export type TargetType = '_blank' | '_self' | unknown;
-export type ProProps = Record<never, never>;
-export type ContentWidth = 'Fluid' | 'Fixed';
-
-export interface MetaRecord {
-    /**
-     * @name 菜单的icon
-     */
-    icon?: string | VNode;
-    /**
-     * @name 自定义菜单的国际化 key，如果没有则返回自身
-     */
-    title?: string;
-    /**
-     * @name 打开目标位置 '_blank' | '_self' | null | undefined
-     */
-    target?: TargetType;
-    /**
-     * @name 在菜单中隐藏子节点
-     */
-    hideChildInMenu?: boolean;
-    /**
-     * @name 在菜单中隐藏自己和子节点
-     */
-    hideInMenu?: boolean;
-    /**
-     * @name disable 菜单选项
-     */
-    disabled?: boolean;
-    /**
-     * @name 隐藏自己，并且将子节点提升到与自己平级
-     */
-    flatMenu?: boolean;
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [key: string]: any;
-}
-
-export interface MenuDataItem {
-    /**
-     * @name 用于标定选中的值，默认是 path
-     */
-    path: string;
-    name?: string | symbol;
-    meta?: MetaRecord;
-    /**
-     * @name 子菜单
-     */
-    children?: MenuDataItem[];
-}
-
-export type WithFalse<T> = T | false;
-
-export type FormatMessage = (message?: string) => string;
-
-export type BreadcrumbRender = BreadcrumbProps['itemRender'];
-export type HeaderContentRender = WithFalse<() => VueNode>;
-export type HeaderRender = WithFalse<(props: ProProps) => VueNode>;
-export type RightContentRender = WithFalse<(props: ProProps) => VueNode>;
-export type MenuItemRender = WithFalse<
-    (args: {
-        item: MenuDataItem;
-        title?: JSX.Element;
-        icon?: JSX.Element;
-    }) => VueNode
->;
-export type SubMenuItemRender = WithFalse<
-    (args: { item: MenuDataItem; children?: VueNode[] }) => VueNode
->;
-export type MenuHeaderRender = WithFalse<
-    (logo: VueNode, title: VueNode, props?: ProProps) => VueNode
->;
-export type MenuContentRender = WithFalse<
-    (props: ProProps, defaultDom: VueNode) => VueNode
->;
-export type MenuExtraRender = WithFalse<(props?: ProProps) => VueNode>;
-export type LogoRender = WithFalse<VueNode>;
-
-export type CollapsedButtonRender = WithFalse<(collapsed?: boolean) => VueNode>;
-export type DefaultPropRender = WithFalse<VueNode>;
-export type PageHeaderRender = WithFalse<(props?: ProProps) => VueNode>;

package/src/ProLayout/util.ts

@@ -1,64 +0,0 @@
-import type { RouteRecord, RouteRecordRaw } from "vue-router";
-import type { MenuDataItem } from "./typings";
-import type { Slots } from "vue"
-
-export function clearMenuItem(menusData: RouteRecord[] | RouteRecordRaw[]): RouteRecordRaw[] {
-    return menusData
-        .map((item: RouteRecord | RouteRecordRaw) => {
-            const finalItem = {...item};
-            if (finalItem.meta?.hideInMenu) {
-                return null;
-            }
-
-            if (finalItem && finalItem?.children) {
-                if (
-                    !finalItem.meta?.hideChildInMenu &&
-                    finalItem.children.some(
-                        (child: RouteRecord | RouteRecordRaw) => child && child.name && !child.meta?.hideInMenu
-                    )
-                ) {
-                    return {
-                        ...item,
-                        children: clearMenuItem(finalItem.children),
-                    };
-                }
-                delete finalItem.children;
-            }
-            return finalItem;
-        })
-        .filter((item) => item) as RouteRecordRaw[];
-}
-
-export function flatMap(menusData: RouteRecord[]): MenuDataItem[] {
-    return menusData
-        .map((item) => {
-            const finalItem = {...item} as MenuDataItem;
-            if (!finalItem.name || finalItem.meta?.hideInMenu) {
-                return null;
-            }
-            if (finalItem.children) {
-                delete finalItem.children;
-            }
-            return finalItem;
-        })
-        .filter((item) => item) as MenuDataItem[];
-}
-
-export function getMenuFirstChildren(menus: MenuDataItem[], key?: string) {
-    return key === undefined ? [] : (menus[menus.findIndex((menu) => menu.path === key)] || {}).children || [];
-}
-
-export function getSlot<T>(slots: Slots, props: Record<string, unknown>, prop = 'default'): T | false {
-    if (props[prop] === false) {
-        // force not render
-        return false;
-    }
-    return (props[prop] || slots[prop]) as T;
-}
-
-export function getSlotVNode<T>(slots: Slots, props: Record<string, unknown>, prop = 'default'): T | false {
-    if (props[prop] === false) {
-        return false;
-    }
-    return (props[prop] || slots[prop]?.()) as T;
-}

package/src/ProTable/index.md

@@ -1,53 +0,0 @@
----
-category: Components
-subtitle: 表格
-cols: 1
-type: 高阶组件
-title: ProTable
-# cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
----
-
-## API
-
-```html
-<j-pro-table />
-```
-
-### Table
-
-该属性参考 ant-design-vue 的 [Table](https://www.antdv.com/components/table-cn#Table)
-
-| 参数             | 说明                                                                                                                                        | 类型                        | 默认值 | 版本 |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ------ | ---- |
-| request          | 请求数据的 api                                                                                                                              | promise                     | -      |      |
-| loading          | 控制loading                                                                                                                           | boolean                     | undefined     |      |
-| columns          | 表格列的配置描述                                                                                                                            | array                       | -      |      |
-| params           | 搜索参数                                                                                                                                    | object                      | {}     |      |
-| type             | 表格的类型                                                                                                                                  | `TREE`\| `PAGE` | 'PAGE' |      |
-| noPagination     | 是否显示分页                                                                                                                                | boolean                     | trues  |      |
-| rowSelection     | 列表项是否可选择                                                                                                                            | object                      | -      |      |
-| dataSource       | 数据数组                                                                                                                                    | object\[]                   |        |      |
-| gridColumns      | 用于不同分辨率下展示的卡片数量的展示，gridColumns\[0] 1366 ~ 1440 分辨率，gridColumns\[1] 1440 ~ 1600 分辨率, gridColumns\[2] > 1600 分辨率 | number[]                    | -      |      |
-| gridColumn       | 每行展示的卡片数量                                                                                                                          | number                      | -      |      |
-| alertRender      | 是否展示上方选择提示框                                                                                                                      | boolean                     | true   |      |
-| defaultParams    | 默认参数                                                                                                                                    | object                      | {}     |      |
-| bodyStyle        | 内容区域自定义样式                                                                                                                          | object                      | -      |      |
-| card             | 卡片插槽                                                                                                                                    | slot                        | -      |      |
-| headerTitle      | type 为`PAGE`和`TREE`时顶部左边插槽                                                                                                         | slot                        | -      |      |
-| rightExtraRender | type 为`PAGE`和`TREE`时顶部右边插槽                                                                                                         | slot                        | -      |      |
-| paginationRender | 分页插槽                                                                                                                                    | slot                        | -      |      |
-
-### Column
-
-该属性参考 ant-design-vue 的 [Column](https://www.antdv.com/components/table-cn#Column).
-
-| 参数        | 说明             | 类型    | 默认值 | 版本 |
-| ----------- | ---------------- | ------- | ------ | ---- |
-| scopedSlots | 是否为插槽       | boolean | false  |      |
-| hideInTable | 是否在表格中隐藏 | boolean | -      |      |
-
-### 事件
-
-| 事件名称     | 说明     | 回调参数   | 版本 |     |
-| ------------ | -------- | ---------- | ---- | --- |
-| cancelSelect | 取消选择 | () => void | -    |     |