@cloudbase/weda-ui 3.4.2 → 3.4.4

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;

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

@@ -0,0 +1,89 @@
+import { defineConfig, Tuple, Type } from '../type-utils';
+import { WD_DIVIDER_TYPE } from '../../enum';
+// 属性类型定义
+const data = Type.Object({
+    type: Type.StringEnum({
+        title: '风格',
+        type: 'string',
+        'x-index': 10,
+        default: 'solid',
+        enum: Tuple(WD_DIVIDER_TYPE),
+        'x-category': '基础属性',
+    }),
+    // 规范化新增
+    // diriction: Type.StringEnum({
+    //   title: '方向',
+    //   type: 'string',
+    //   'x-index': 30,
+    //   default: 'horizontal',
+    //   enum: Tuple([
+    //     {
+    //       label: '水平',
+    //       value: 'horizontal',
+    //     },
+    //     {
+    //       label: '垂直',
+    //       value: 'vertical',
+    //     },
+    //   ] as const),
+    //   'x-category': '基础属性',
+    // }),
+});
+// 组件对外暴露的只读属性
+// 未来可通过 widget API 开放，应用可以获取到组件的实例属性
+// 组件对外先规范定义，暂时不对外开放
+const properties = Type.Pick(data, ['type']);
+// 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-divider',
+            description: '分割线组件根元素',
+        },
+        {
+            name: 'PC 端分割线根元素',
+            selector: '.wd-pc-divider',
+            description: '可以为 PC 端的分割线编写样式',
+        },
+        {
+            name: 'H5 端分割线根元素',
+            selector: '.wd-h5-divider',
+            description: '可以为 H5 端的分割线编写样式',
+        },
+        {
+            name: '小程序端分割线根元素',
+            selector: '.wd-mp-divider',
+            description: '可以为小程序端的分割线编写样式',
+        },
+    ],
+    // 组件方法
+    methods: [],
+    // 组件对外暴露事件
+    events: [],
+    // 组件元信息
+    meta: {
+        name: 'WdDivider',
+        title: '分割线',
+        description: '用于显示分割线。',
+        icon: '../../icons/Divider.svg',
+        category: '展示',
+        categoryOrder: 1,
+        componentOrder: 1,
+        visible: ['APP'],
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdDivider',
+        // 快捷编辑时展示在编辑区的属性
+        shortcut: {
+            props: ['type'],
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,126 @@
+import { defineConfig, Tuple, Type } from '../type-utils';
+import { WD_ICON_ENUM, WD_ICON_TYPE, WD_ICON_SIZE } from '../../enum';
+// 属性类型定义
+const data = Type.Object({
+    type: Type.Optional(Type.StringEnum({
+        enum: Tuple(WD_ICON_TYPE),
+        title: '图标类型',
+        default: 'inner',
+        description: '选择图标的类型',
+        'x-index': 10,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(name)',
+                condition: "{{$self.value=='inner'}}",
+            },
+            {
+                type: 'value:visible',
+                target: '*(src)',
+                condition: "{{$self.value=='custom'}}",
+            },
+        ],
+    })),
+    name: Type.StringEnum({
+        enum: Tuple(WD_ICON_ENUM.map((item) => ({ label: item, value: item }))),
+        title: '图标样式',
+        default: 'success',
+        'x-index': 20,
+        'x-component': 'icon2',
+        description: '选择预置图标',
+    }),
+    src: Type.Optional(Type.FormatTypeUnion({
+        title: '自定义图标',
+        default: '',
+        type: 'image',
+        'x-index': 30,
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+            },
+        ],
+        description: '设置自定义图标地址',
+    })),
+    // 规范化从数字改为字符串枚举
+    size: Type.Optional(Type.StringEnum({
+        title: '图标尺寸',
+        type: 'string',
+        default: 'md',
+        enum: Tuple(WD_ICON_SIZE),
+        description: '设置图标的尺寸大小',
+        'x-category': '基础属性',
+        'x-index': 40,
+    })),
+    // 去掉图标颜色配置, 兼容旧组件, 属性隐藏, 暂不移除
+    color: Type.Optional(Type.String({
+        title: '颜色',
+        default: '',
+        description: '设置图标的颜色，仅对预置图标生效',
+        'x-index': 50,
+        display: false,
+    })),
+});
+// 组件对外暴露的只读属性
+// 未来可通过 widget API 开放，应用可以获取到组件的实例属性
+// 组件对外先规范定义，暂时不对外开放
+const properties = Type.Pick(data, ['type', 'name', 'src', 'size']);
+// 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-icon',
+            description: '图标组件根元素',
+        },
+        {
+            name: 'PC 端图标根元素',
+            selector: '.wd-pc-icon',
+            description: '可以为 PC 端的图标编写样式',
+        },
+        {
+            name: 'H5 端图标根元素',
+            selector: '.wd-h5-icon',
+            description: '可以为 H5 端的图标编写样式',
+        },
+        {
+            name: '小程序端图标根元素',
+            selector: '.wd-mp-icon',
+            description: '可以为小程序端的图标编写样式',
+        },
+    ],
+    // 组件方法
+    methods: [],
+    // 组件对外暴露事件
+    events: [
+        {
+            title: '点击',
+            name: 'tap',
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdIcon',
+        title: '图标',
+        description: '可以通过在图标组件的配置区中选择微搭提供的预置图标实现图标的展示效果并调整图标颜色等参数，同时图标组件也支持用户对图标进行自定义的上传。',
+        icon: '../../icons/Icon.svg',
+        category: '展示',
+        categoryOrder: 400,
+        componentOrder: 100,
+        visible: ['APP'],
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdIcon',
+        // 快捷编辑时展示在编辑区的属性
+        shortcut: {
+            props: ['type', 'name', 'src', 'size'],
+        },
+    },
+});
+export default config;