@cloudbase/weda-ui 3.4.3 → 3.4.5

package/dist/configs/components/wd-bubble.js

@@ -0,0 +1,204 @@
+import { defineConfig, Tuple, Type } from '../type-utils';
+// 属性类型定义
+const data = Type.Object({
+    trigger: Type.StringEnum({
+        title: '触发行为',
+        type: 'string',
+        default: 'hover',
+        enum: Tuple([
+            {
+                label: '鼠标悬浮',
+                value: 'hover',
+            },
+            {
+                label: '鼠标点击',
+                value: 'click',
+            },
+        ]),
+        'x-index': 10,
+        'x-category': '基础属性',
+        description: '触发气泡提示的行为',
+    }),
+    placement: Type.StringEnum({
+        type: 'string',
+        title: '弹出方向',
+        default: 'top',
+        'x-index': 20,
+        'x-category': '基础属性',
+        description: '气泡提示的弹出方向',
+        enum: Tuple([
+            {
+                label: '上',
+                value: 'top',
+            },
+            {
+                label: '上左',
+                value: 'top-start',
+            },
+            {
+                label: '上右',
+                value: 'top-end',
+            },
+            {
+                label: '左',
+                value: 'left',
+            },
+            {
+                label: '左上',
+                value: 'left-start',
+            },
+            {
+                label: '左下',
+                value: 'left-end',
+            },
+            {
+                label: '下',
+                value: 'bottom',
+            },
+            {
+                label: '下左',
+                value: 'bottom-start',
+            },
+            {
+                label: '下右',
+                value: 'bottom-end',
+            },
+            {
+                label: '右',
+                value: 'right',
+            },
+            {
+                label: '右上',
+                value: 'right-start',
+            },
+            {
+                label: '右下',
+                value: 'right-end',
+            },
+        ]),
+    }),
+    promptTheme: Type.StringEnum({
+        title: '气泡风格',
+        type: 'string',
+        default: 'default',
+        enum: Tuple([
+            {
+                label: '默认',
+                value: 'default',
+            },
+            {
+                label: '警告',
+                value: 'error',
+            },
+            {
+                label: '反色',
+                value: 'dark',
+            },
+        ]),
+        'x-index': 30,
+        'x-category': '基础属性',
+        description: '气泡提示的风格',
+    }),
+    openDelay: Type.Number({
+        title: '打开时延(毫秒)',
+        default: 0,
+        type: 'number',
+        description: '气泡提示的打开时延(毫秒)',
+        'x-category': '高级属性',
+        'x-index': 40,
+    }),
+    closeDelay: Type.Number({
+        title: '关闭时延(毫秒)',
+        default: 0,
+        type: 'number',
+        description: '气泡提示的关闭时延(毫秒)',
+        'x-category': '高级属性',
+        'x-index': 50,
+    }),
+    arrowPointAtCenter: Type.Boolean({
+        title: '箭头是否指向中心',
+        default: false,
+        type: 'boolean',
+        description: '气泡提示的箭头是否指向中心',
+        'x-category': '高级属性',
+        'x-index': 60,
+    }),
+    bubbleContent: Type.Optional(Type.Slot({
+        title: '气泡插槽',
+        'x-index': 70,
+    })),
+    bubbleChildren: Type.Optional(Type.Slot({
+        title: '触发内容',
+        'x-index': 80,
+    })),
+});
+// 组件对外暴露的只读属性
+// 未来可通过 widget API 开放，应用可以获取到组件的实例属性
+// 组件对外先规范定义，暂时不对外开放
+const properties = Type.Pick(data, ['trigger', 'placement', 'promptTheme']);
+// export default
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    // 属性定义
+    data,
+    // 只读属性定义
+    properties,
+    // 样式API
+    classes: [
+        {
+            name: '根元素',
+            selector: '.wd-bubble',
+            description: '气泡组件根元素',
+        },
+        {
+            name: '触发内容父元素',
+            selector: '.wd-bubble-child',
+            description: '气泡插槽触发内容的父级元素，可以设置内容内部样式',
+        },
+        {
+            name: 'PC 端气泡根元素',
+            selector: '.wd-pc-bubble',
+            description: '可以为 PC 端的气泡编写样式',
+        },
+        {
+            name: 'H5 端气泡根元素',
+            selector: '.wd-h5-bubble',
+            description: '可以为 H5 端的气泡编写样式',
+        },
+    ],
+    // 组件方法
+    methods: [],
+    // 组件对外暴露事件
+    events: [
+        {
+            name: 'open',
+            title: '打开气泡',
+            'x-platforms': ['WEB'],
+        },
+        {
+            name: 'close',
+            title: '关闭气泡',
+            'x-platforms': ['WEB'],
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdBubble',
+        title: '气泡提示',
+        description: '用于显示气泡的提示。',
+        icon: '../../icons/Bubble.svg',
+        category: '展示',
+        categoryOrder: 1,
+        componentOrder: 1,
+        platform: ['MOBILEWEB', 'PCWEB'],
+        visible: ['APP'],
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdBubble',
+        // 快捷编辑时展示在编辑区的属性
+        shortcut: {
+            props: ['trigger', 'placement'],
+        },
+    },
+});
+export default config;

package/dist/configs/components/wd-button.js

@@ -0,0 +1,417 @@
+import { defineConfig, Tuple, Type } from '../type-utils';
+import { WD_ICON_ENUM, WD_ICON_TYPE, WD_BUTTON_THEME, WD_BUTTON_VARIANT, WD_BUTTON_SIZE, WD_BUTTON_ICON_TYPE, WD_BUTTON_ICON_POSITION, WD_BUTTON_TYPE, } from '../../enum';
+// 属性类型定义
+const data = Type.Object({
+    text: Type.Optional(Type.String({
+        title: '内容',
+        default: '按钮',
+        type: 'string',
+        description: '设置按钮的文本内容',
+        'x-category': '基础属性',
+        'x-index': 10,
+    })),
+    theme: Type.Optional(Type.StringEnum({
+        title: '颜色',
+        'x-index': 20,
+        default: 'primary',
+        enum: Tuple(WD_BUTTON_THEME),
+        'x-category': '基础属性',
+        description: '设置按钮的颜色',
+    })),
+    // 规范化新增
+    variant: Type.Optional(Type.StringEnum({
+        title: '类型',
+        type: 'string',
+        'x-index': 30,
+        default: 'base',
+        enum: Tuple(WD_BUTTON_VARIANT),
+        description: '设置按钮的类型',
+        'x-category': '基础属性',
+    })),
+    size: Type.Optional(Type.StringEnum({
+        title: '尺寸',
+        type: 'string',
+        default: 'md',
+        enum: Tuple(WD_BUTTON_SIZE),
+        'x-category': '基础属性',
+        description: '设置按钮的尺寸大小',
+        'x-index': 40,
+    })),
+    // 规范化新增,是否通栏
+    block: Type.Optional(Type.Boolean({
+        title: '是否通栏',
+        default: false,
+        'x-category': '基础属性',
+        'x-index': 50,
+        description: '开启后按钮将撑满父容器',
+    })),
+    loading: Type.Optional(Type.Boolean({
+        title: '加载中',
+        type: 'boolean',
+        default: false,
+        'x-category': '高级属性',
+        'x-index': 60,
+        'x-linkages': [
+            {
+                type: 'value:state',
+                target: '*(iconType)',
+                condition: '{{$self.value===true}}',
+                state: {
+                    value: 'text-with-icon',
+                },
+            },
+            {
+                type: 'value:state',
+                target: '*(iconSource)',
+                condition: '{{$self.value===true}}',
+                state: {
+                    value: 'inner',
+                },
+            },
+            {
+                type: 'value:state',
+                target: '*(icon)',
+                condition: '{{$self.value==true}}',
+                state: {
+                    value: 'td:loading',
+                },
+            },
+            {
+                type: 'value:visible',
+                target: '*(iconSource,icon,iconPosition,iconType)',
+                condition: '{{$self.value !== true}}',
+            },
+            {
+                type: 'value:state',
+                target: '*(iconType)',
+                condition: '{{$self.value === false && $form.values.icon==="td:loading"}}',
+                state: {
+                    value: 'none',
+                },
+            },
+        ],
+        description: '开启后按钮为加载中状态,展示文字加loading图标',
+    })),
+    // 规范化新增，展示图标
+    iconType: Type.Optional(Type.StringEnum({
+        title: '展示图标',
+        'x-index': 70,
+        default: 'none',
+        enum: Tuple(WD_BUTTON_ICON_TYPE),
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(iconSource)',
+                condition: "{{$self.value!=='none' && !$form.values.loading}}",
+            },
+            {
+                type: 'value:visible',
+                target: '*(icon)',
+                condition: "{{$self.value!=='none' && !$form.values.loading}}",
+            },
+            {
+                type: 'value:visible',
+                target: '*(iconPosition)',
+                condition: "{{$self.value =='text-with-icon' && !$form.values.loading}}",
+            },
+        ],
+        description: '设置图标按钮',
+        'x-category': '高级属性',
+    })),
+    // 规范化新增，图标类型
+    iconSource: Type.Optional(Type.StringEnum({
+        enum: Tuple(WD_ICON_TYPE),
+        title: '图标类型',
+        default: 'inner',
+        description: '选择图标的类型',
+        'x-index': 80,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(icon)',
+                condition: "{{$self.value=='inner'&&$form.values.loading!==true}}",
+            },
+            {
+                type: 'value:visible',
+                target: '*(iconSrc)',
+                condition: "{{$self.value=='custom'}}",
+            },
+        ],
+        'x-category': '高级属性',
+    })),
+    // 规范化新增，图标样式
+    icon: Type.Optional(Type.StringEnum({
+        enum: Tuple(WD_ICON_ENUM.map((item) => ({ label: item, value: item }))),
+        title: '图标样式',
+        default: 'success',
+        description: '选择预置图标',
+        'x-index': 90,
+        'x-component': 'icon2',
+        'x-category': '高级属性',
+    })),
+    // 规范化新增，图标样式 支持自定义图片
+    iconSrc: Type.Optional(Type.FormatTypeUnion({
+        type: 'image',
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+            },
+        ],
+        title: '自定义图标',
+        default: '',
+        description: '设置自定义图标地址',
+        'x-index': 100,
+        'x-category': '高级属性',
+    })),
+    // 规范化新增，图标位置
+    iconPosition: Type.Optional(Type.StringEnum({
+        title: '图标位置',
+        'x-index': 110,
+        default: 'before',
+        enum: Tuple(WD_BUTTON_ICON_POSITION),
+        description: '设置图标位置',
+        'x-category': '高级属性',
+    })),
+    disabled: Type.Optional(Type.Boolean({
+        type: 'boolean',
+        title: '是否禁用',
+        default: false,
+        description: '开启后按钮将无法进行点击',
+        'x-category': '高级属性',
+        'x-index': 120,
+    })),
+    formType: Type.Optional(Type.StringEnum({
+        title: '表单类型',
+        type: 'string',
+        default: 'button',
+        'x-index': 130,
+        enum: Tuple(WD_BUTTON_TYPE),
+        description: ' 按钮: 适用于常见的按钮点击使用场景，可在事件配置区中对按钮组件配置点击事件并触发相应的执行动作;重置: 需配合表单容器组件使用，将按钮放置在表单容器中，点击后即可重置表单容器中表单组件的输入信息;提交: 需配合表单容器组件使用，将按钮放置在表单容器中，点击后即可对表单容器中的数据进行提交',
+        'x-category': '高级属性',
+    })),
+    openType: Type.Optional(Type.StringEnum({
+        title: '微信开放能力',
+        type: 'string',
+        default: '',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(sessionFrom,sendMessageTitle,sendMessageImg,sendMessagePath,showMessageCard)',
+                condition: "{{ $self.value === 'contact' }}",
+            },
+            {
+                type: 'value:visible',
+                target: 'appParameter',
+                condition: "{{ $self.value === 'launchApp' }}",
+            },
+            {
+                type: 'value:visible',
+                target: 'categoryId',
+                condition: "{{ $self.value === 'getRealnameAuthInfo' }}",
+            },
+        ],
+        enum: Tuple([
+            {
+                label: '无',
+                value: '',
+            },
+            {
+                label: '打开客服会话',
+                value: 'contact',
+            },
+            {
+                label: '转发',
+                value: 'share',
+            },
+            {
+                label: '打开App',
+                value: 'launchApp',
+            },
+            {
+                label: '打开授权设置',
+                value: 'openSetting',
+            },
+            {
+                label: '打开意见反馈',
+                value: 'feedback',
+            },
+        ]),
+        'x-index': 140,
+        'x-platforms': ['MP'],
+        description: '仅支持在小程序构建时使用，为按钮配置小程序能力相关的各项按钮属性，用于相关微信能力的调用',
+        'x-category': '高级属性',
+    })),
+    sessionFrom: Type.Optional(Type.String({
+        'x-index': 150,
+        title: '会话来源',
+        default: '',
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+    sendMessageTitle: Type.Optional(Type.String({
+        'x-index': 160,
+        title: '会话内消息卡片标题',
+        default: '',
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+    sendMessagePath: Type.Optional(Type.String({
+        'x-index': 170,
+        title: '会话内消息卡片点击跳转小程序路径',
+        default: '',
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+    sendMessageImg: Type.Optional(Type.String({
+        'x-index': 180,
+        title: '会话内消息卡片图片',
+        'x-component': 'image',
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+            },
+        ],
+        default: '',
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+    showMessageCard: Type.Optional(Type.Boolean({
+        'x-index': 190,
+        title: '是否显示会话内消息卡片',
+        default: false,
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+    appParameter: Type.Optional(Type.String({
+        'x-index': 200,
+        title: '打开APP时,向APP传递的参数',
+        default: '',
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+});
+// 组件对外暴露的只读属性
+// 未来可通过 widget API 开放，应用可以获取到组件的实例属性
+// 组件对外先规范定义，暂时不对外开放
+const properties = Type.Pick(data, [
+    'text',
+    'theme',
+    'variant',
+    'size',
+    'block',
+    'disabled',
+    'formType',
+    'openType',
+]);
+// export default
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    // 属性定义
+    data,
+    // 只读属性定义
+    properties,
+    // 样式API
+    classes: [
+        {
+            name: '根元素',
+            selector: '.wd-btn',
+            description: '按钮组件根元素',
+        },
+        {
+            name: '图标',
+            selector: '.wd-btn__icon',
+            description: '按钮的图标元素（共享样式）',
+        },
+        {
+            name: '前置图标',
+            selector: '.wd-btn__before-icon',
+            description: '按钮内的前置图标',
+        },
+        {
+            name: '后置图标',
+            selector: '.wd-btn__after-icon',
+            description: '按钮内的后置图标',
+        },
+        {
+            name: '禁用状态',
+            selector: '.wd-btn__icon.is-disabled',
+            description: '按钮禁用状态',
+        },
+        {
+            name: '文本',
+            selector: '.wd-btn__text',
+            description: '按钮内显示的文本',
+        },
+        {
+            name: 'PC 端按钮根元素',
+            selector: '.wd-pc-btn',
+            description: '可以为 PC 端的按钮编写样式',
+        },
+        {
+            name: 'H5 端按钮根元素',
+            selector: '.wd-h5-btn',
+            description: '可以为 H5 端的按钮编写样式',
+        },
+        {
+            name: '小程序端按钮根元素',
+            selector: '.wd-mp-btn',
+            description: '可以为小程序端的按钮编写样式',
+        },
+    ],
+    // 组件方法
+    methods: [],
+    // 组件对外暴露事件
+    events: [
+        {
+            title: '点击',
+            name: 'tap',
+        },
+        {
+            title: '客服会话',
+            name: 'contact',
+            'x-platforms': ['MP'],
+            detail: {
+                errMsg: Type.String({
+                    description: '错误信息',
+                }),
+                path: Type.String({
+                    description: '小程序消息指定的路径',
+                }),
+                query: Type.Object({}, {
+                    description: '小程序消息指定的查询参数',
+                }),
+            },
+        },
+        {
+            title: '打开App',
+            name: 'launchApp',
+            'x-platforms': ['MP'],
+        },
+        {
+            title: '打开授权设置',
+            name: 'openSetting',
+            'x-platforms': ['MP'],
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdButton',
+        title: '按钮',
+        description: '当操作命令需要用户点击，用以触发特定事件的发生，如点击事件、信息提交等',
+        icon: '../../icons/Button.svg',
+        category: '展示',
+        categoryOrder: 400,
+        componentOrder: 240,
+        visible: ['APP'],
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdButton',
+        // 快捷编辑时展示在编辑区的属性
+        shortcut: {
+            props: ['text', 'theme', 'size'],
+        },
+    },
+});
+export default config;