@jetlinks-web/components 1.0.4 → 2.0.0

package/src/ProLayout/defaultSettings.ts

@@ -0,0 +1,106 @@
+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/index.ts

@@ -0,0 +1,6 @@
+import ProLayout from './Basic/BasicLayout';
+import PageContainer from './PageContainer';
+
+export { PageContainer };
+export default ProLayout;
+

package/src/ProLayout/style/default.less

@@ -0,0 +1,4 @@
+@import '../../style/variable.less';
+
+@basicLayout-prefix-cls: ~'@{ant-prefix}-pro-basicLayout';
+@pro-layout-header-height: 48px;

package/src/ProLayout/style/index.ts

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

package/src/ProLayout/style/style.less

@@ -0,0 +1,7 @@
+@import './default.less';
+
+@import '../Basic/BasicLayout.less';
+@import '../Basic/Header.less';
+@import '../PageContainer/index.less';
+@import '../SiderMenu/index.less';
+@import '../TopHeader/index.less';

package/src/ProLayout/typings.ts

@@ -0,0 +1,87 @@
+import type { VNode } from 'vue';
+import type { BreadcrumbProps } from './RouteContext';
+import type { VueNode } from 'ant-design-vue/lib/_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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,53 @@
+---
+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 | -    |     |