@cloudbase/weda-ui 0.2.17 → 0.2.21-alpha.1

package/dist/configs/components/wd-menu-layout.js

@@ -0,0 +1,323 @@
+import { defineConfig, Type, Tuple } from '../type-utils';
+import { Node } from './wd-menu-list';
+import { HEAD_TPL, HEAD_RIGHT_TPL, CONTENT_TPL, FOOT_TPL, BODY_TPL, getItems, } from '../utils/layout';
+const TYPE = Tuple([
+    {
+        label: '顶部导航',
+        value: 'horizontal',
+    },
+    {
+        label: '左侧导航',
+        value: 'vertical',
+    },
+    {
+        label: '厂字导航',
+        value: 'plant',
+    },
+    {
+        label: 'Tab栏导航',
+        value: 'tab',
+    },
+    {
+        label: '顶部导航栏',
+        value: 'nav',
+    },
+    {
+        label: '工字导航',
+        value: 'navTab',
+    },
+]);
+const TYPE_LINKS = [
+    {
+        type: 'value:visible',
+        target: '*(menu,defaultOpened)',
+        condition: "{{$self.value!=='tab' && $self.value!=='nav' && $self.value!=='navTab'}}",
+    },
+    {
+        type: 'value:state',
+        state: {
+            value: '{{$self.value}}',
+        },
+        target: 'type',
+        condition: '{{!!$self.value}}',
+    },
+];
+// 属性类型定义
+const data = Type.Object({
+    headSlot: Type.Slot({
+        title: '品牌信息',
+        description: '品牌信息',
+        'x-switch': {
+            default: true,
+        },
+        'x-index': 10,
+        'x-category': '高级属性',
+    }),
+    headRightSlot: Type.Slot({
+        title: '页面顶部',
+        description: '页面顶部',
+        'x-switch': {
+            default: true,
+        },
+        'x-index': 20,
+        'x-category': '高级属性',
+    }),
+    contentSlot: Type.Slot({
+        title: '页面内容区',
+        description: '页面内容区',
+        'x-switch': {
+            default: true,
+        },
+        'x-index': 30,
+        'x-category': '高级属性',
+    }),
+    footerSlot: Type.Slot({
+        title: '导航底部',
+        description: '导航底部',
+        'x-switch': {
+            default: true,
+        },
+        'x-index': 40,
+        'x-category': '高级属性',
+    }),
+    template: Type.StringEnum({
+        title: '布局模板',
+        type: 'string',
+        default: 'horizontal',
+        'x-index': 50,
+        enum: TYPE,
+        'x-category': '基础属性',
+        'x-linkages': TYPE_LINKS,
+    }),
+    menu: Type.Object({
+        isMultiTerminal: Type.Boolean({
+            title: '是否开启多端独立菜单',
+            default: false,
+        }),
+        menuData: Type.Array(Node, {
+            title: 'PC 端菜单',
+            default: [],
+        }),
+        mobileMenuData: Type.Array(Node, {
+            title: '移动端菜单',
+            default: [],
+        }),
+    }, {
+        title: '菜单',
+        description: '菜单',
+        default: [],
+        'x-index': 60,
+        'x-component': 'menu-config',
+        'x-component-props': {
+            maxDepth: 3,
+            enableNavigateToSubPackage: true,
+            enableConfigSelectedIcon: true,
+        },
+        'x-category': '基础属性',
+    }),
+    type: Type.StringEnum({
+        title: '布局类型',
+        type: 'string',
+        default: 'horizontal',
+        'x-index': 70,
+        enum: TYPE,
+        display: false,
+        'x-category': '基础属性',
+        'x-linkages': TYPE_LINKS.slice(0, 1),
+    }),
+    defaultOpened: Type.Boolean({
+        title: '侧边菜单展开',
+        description: 'PC端左侧菜单和移动端侧边栏菜单是否默认展开',
+        default: true,
+        'x-index': 80,
+        'x-category': '基础属性',
+    }),
+    outerClickClosable: Type.Boolean({
+        title: '点击外部收起菜单',
+        description: '移动端点击侧边栏菜单外部是否收起菜单',
+        default: true,
+        'x-index': 90,
+        'x-category': '基础属性',
+    }),
+    selectedMenuKey: Type.String({
+        title: '选中的菜单key',
+        default: '',
+        'x-index': 100,
+        'x-category': '基础属性',
+    }),
+});
+// 组件对外暴露的只读属性
+// 未来可通过 widget API 开放，应用可以获取到组件的实例属性
+// 组件对外先规范定义，暂时不对外开放
+const properties = Type.Pick(data, []);
+export const configInfo = {
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    // 属性定义
+    data,
+    // 只读属性定义
+    properties,
+    // 样式API
+    classes: [
+        {
+            name: '根元素',
+            selector: '.wd-menulayout',
+            description: '组件根元素',
+        },
+        {
+            name: 'PC 端文本根元素',
+            selector: '.wd-pc-menulayout',
+            description: '可以为 PC 端的组件编写样式',
+        },
+        {
+            name: 'H5 端文本根元素',
+            selector: '.wd-h5-menulayout',
+            description: '可以为 H5 端的组件编写样式',
+        },
+        {
+            name: '小程序端文本根元素',
+            selector: '.wd-mp-menulayout',
+            description: '可以为小程序端的组件编写样式',
+        },
+        {
+            name: '布局导航头部',
+            selector: '.wd-menulayout-header',
+            description: '可以为布局导航头部编写样式',
+        },
+        {
+            name: '布局导航品牌插槽',
+            selector: '.wd-menulayout-header__logo-wrap',
+            description: '可以为布局导航品牌插槽编写样式',
+        },
+        {
+            name: '布局导航主体',
+            selector: '.wd-menulayout-body',
+            description: '可以为布局导航主体编写样式',
+        },
+        {
+            name: '布局导航左侧内容',
+            selector: '.wd-menulayout-body__left',
+            description: '可以为厂字或左侧布局导航的菜单主体编写样式',
+        },
+        {
+            name: '布局导航底部内容',
+            selector: '.wd-menulayout-body__footer',
+            description: '可以为布局导航的底部编写样式',
+        },
+        {
+            name: '布局导航页面内容',
+            selector: '.wd-menulayout-body__content',
+            description: '可以为布局导航页面内容编写样式',
+        },
+        {
+            name: 'Tab栏布局导航根元素',
+            selector: '.wd-menulayout--tab',
+            description: '可以为Tab栏布局导航根元素编写样式',
+        },
+    ],
+    // 组件方法
+    methods: [
+        {
+            name: 'setSelectedInfo',
+            label: '设置选中菜单项',
+            'x-platforms': ['MOBILEWEB', 'PCWEB'],
+            description: '设置选中菜单项',
+            params: {
+                properties: {
+                    params: Type.Object({
+                        key: Type.Optional(Type.String({ title: '选中菜单key值' })),
+                        item: Type.Optional(Object.assign({}, Node, { title: '选中菜单项' })),
+                    }, { title: '选中项信息' }),
+                    isNavigate: Type.Boolean({ title: '是否跳转菜单链接' }),
+                },
+            },
+        },
+    ],
+    // 组件对外暴露事件
+    events: [
+        {
+            title: '点击菜单项',
+            name: 'menuClick',
+            description: '用户点击菜单选项，对Tab栏布局、顶部导航栏布局无效',
+            detail: Type.Object({
+                item: Object.assign({}, Node, { title: '选中菜单项' }),
+            }),
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdMenuLayout',
+        // 组件别名，用于生成组件 id，例如 Icon1
+        componentName: 'MenuLayout',
+        title: '布局导航',
+        description: '布局导航',
+        figureIcon: '../figureIcons/WdMenuLayout.svg',
+        icon: '../icons/MenuLayout.svg',
+        category: '导航',
+        categoryOrder: 300,
+        componentOrder: 210,
+        visible: ['APP'],
+        group: {
+            ['基础属性']: {
+                'x-index': 1,
+                expand: true,
+            },
+            ['高级属性']: {
+                'x-index': 2,
+                expand: false,
+            },
+        },
+        templates: [
+            {
+                when: '$attached',
+                to: '$children',
+                body: BODY_TPL,
+            },
+            {
+                when: '$attached',
+                to: 'headSlot',
+                body: HEAD_TPL,
+            },
+            {
+                when: '$attached',
+                to: 'headRightSlot',
+                body: HEAD_RIGHT_TPL,
+            },
+            {
+                when: '$attached',
+                to: 'contentSlot',
+                body: CONTENT_TPL,
+            },
+            {
+                when: '$attached',
+                to: 'footerSlot',
+                body: FOOT_TPL,
+            },
+            {
+                when: 'template',
+                to: '$children',
+                body: BODY_TPL,
+            },
+            {
+                when: 'template',
+                to: 'headSlot',
+                body: HEAD_TPL,
+            },
+            {
+                when: 'template',
+                to: 'headRightSlot',
+                body: HEAD_RIGHT_TPL,
+            },
+            {
+                when: 'template',
+                to: 'footerSlot',
+                body: FOOT_TPL,
+            },
+        ],
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/navmenu/WdMenuLayout',
+    },
+    configMeta: {},
+    items: getItems(),
+};
+// export default
+const config = defineConfig(configInfo);
+export default config;

package/dist/configs/components/wd-menu-list.d.ts

@@ -0,0 +1,218 @@
+import { Static } from '../type-utils';
+import type { Simplify } from 'type-fest';
+export declare const menu: {
+    isMultiTerminal: boolean;
+    menuData: ({
+        title: string;
+        key: string;
+        iconUrl: string;
+        children: {
+            title: string;
+            iconUrl: string;
+            key: string;
+            children: ({
+                title: string;
+                iconUrl: string;
+                key: string;
+                type: string;
+                linkTargetBlank: boolean;
+                linkUrl: string;
+                path?: undefined;
+            } | {
+                title: string;
+                key: string;
+                iconUrl: string;
+                type: string;
+                path: string;
+                linkTargetBlank?: undefined;
+                linkUrl?: undefined;
+            })[];
+        }[];
+    } | {
+        title: string;
+        iconUrl: string;
+        key: string;
+        children?: undefined;
+    })[];
+    mobileMenuData: any[];
+};
+export declare const Node: import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+    title: import("@sinclair/typebox").TString;
+    key: import("@sinclair/typebox").TString;
+    iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    disabled: import("@sinclair/typebox").TBoolean;
+    visible: import("@sinclair/typebox").TBoolean;
+    type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+    path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+    subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+}>>;
+declare const data: import("@sinclair/typebox").TObject<{
+    menu: import("@sinclair/typebox").TObject<{
+        isMultiTerminal: import("@sinclair/typebox").TBoolean;
+        menuData: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+            title: import("@sinclair/typebox").TString;
+            key: import("@sinclair/typebox").TString;
+            iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            disabled: import("@sinclair/typebox").TBoolean;
+            visible: import("@sinclair/typebox").TBoolean;
+            type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+            path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+            children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+            subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        }>>>;
+        mobileMenuData: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+            title: import("@sinclair/typebox").TString;
+            key: import("@sinclair/typebox").TString;
+            iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            disabled: import("@sinclair/typebox").TBoolean;
+            visible: import("@sinclair/typebox").TBoolean;
+            type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+            path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+            children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+            subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        }>>>;
+    }>;
+    template: import("@sinclair/typebox").TUnsafe<"horizontal" | "vertical" | "plant">;
+    defaultOpened: import("@sinclair/typebox").TBoolean;
+    selectedMenuKey: import("@sinclair/typebox").TString;
+}>;
+export type DataType = Simplify<Static<typeof data>>;
+declare const config: {
+    readonly $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
+    readonly data: import("@sinclair/typebox").TObject<{
+        menu: import("@sinclair/typebox").TObject<{
+            isMultiTerminal: import("@sinclair/typebox").TBoolean;
+            menuData: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+                title: import("@sinclair/typebox").TString;
+                key: import("@sinclair/typebox").TString;
+                iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                disabled: import("@sinclair/typebox").TBoolean;
+                visible: import("@sinclair/typebox").TBoolean;
+                type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+                path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+                subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            }>>>;
+            mobileMenuData: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+                title: import("@sinclair/typebox").TString;
+                key: import("@sinclair/typebox").TString;
+                iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                disabled: import("@sinclair/typebox").TBoolean;
+                visible: import("@sinclair/typebox").TBoolean;
+                type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+                path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+                subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            }>>>;
+        }>;
+        template: import("@sinclair/typebox").TUnsafe<"horizontal" | "vertical" | "plant">;
+        defaultOpened: import("@sinclair/typebox").TBoolean;
+        selectedMenuKey: import("@sinclair/typebox").TString;
+    }>;
+    readonly properties: import("@sinclair/typebox").TObject<{}>;
+    readonly classes: readonly [{
+        readonly name: "根元素";
+        readonly selector: ".wd-menulist";
+        readonly description: "组件根元素";
+    }, {
+        readonly name: "PC 端根元素";
+        readonly selector: ".wd-pc-menulist";
+        readonly description: "可以为 PC 端的组件编写样式";
+    }, {
+        readonly name: "H5 端根元素";
+        readonly selector: ".wd-h5-menulist";
+        readonly description: "可以为 H5 端的组件编写样式";
+    }, {
+        readonly name: "小程序端根元素";
+        readonly selector: ".wd-mp-menulist";
+        readonly description: "可以为小程序端的组件编写样式";
+    }];
+    readonly methods: readonly [{
+        readonly name: "setSelectedInfo";
+        readonly label: "设置选中菜单项";
+        readonly 'x-platforms': readonly ["MOBILEWEB", "PCWEB"];
+        readonly description: "设置选中菜单项";
+        readonly params: import("@sinclair/typebox").TObject<{
+            params: import("@sinclair/typebox").TObject<{
+                key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                item: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+                    title: import("@sinclair/typebox").TString;
+                    key: import("@sinclair/typebox").TString;
+                    iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                    iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                    selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                    disabled: import("@sinclair/typebox").TBoolean;
+                    visible: import("@sinclair/typebox").TBoolean;
+                    type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+                    path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                    linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                    linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                    children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+                    subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                }>> & {
+                    title: string;
+                }>;
+            }>;
+            isNavigate: import("@sinclair/typebox").TBoolean;
+        }>;
+    }];
+    readonly events: readonly [{
+        readonly title: "点击菜单项";
+        readonly name: "menuClick";
+        readonly description: "用户点击菜单选项";
+        readonly detail: import("@sinclair/typebox").TObject<{
+            item: import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+                title: import("@sinclair/typebox").TString;
+                key: import("@sinclair/typebox").TString;
+                iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                disabled: import("@sinclair/typebox").TBoolean;
+                visible: import("@sinclair/typebox").TBoolean;
+                type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+                path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+                subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            }>> & {
+                title: string;
+            };
+        }>;
+    }];
+    readonly meta: {
+        readonly name: "WdMenuList";
+        readonly componentName: "MenuList";
+        readonly title: "布局导航菜单";
+        readonly description: "布局导航菜单";
+        readonly icon: "../icons/MenuLayout.svg";
+        readonly category: "展示";
+        readonly categoryOrder: 400;
+        readonly componentOrder: 210;
+        readonly visible: readonly [];
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdMenuList";
+    };
+    readonly configMeta: {};
+};
+export default config;