@cloudbase/weda-ui 3.4.11 → 3.4.12

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

@@ -0,0 +1,464 @@
+import { defineConfig, Type, Tuple } from '../type-utils';
+import { FORM_ITEM_DATA_TITLE, FORM_ITEM_METHODS, FORM_ITEM_META, ItemData, } from '../type-utils/type-form';
+const WD_CHECKBOX_DIRECTION = [
+    {
+        label: '纵向',
+        value: 'vertical',
+    },
+    {
+        label: '横向',
+        value: 'inline',
+    },
+];
+const WD_CKECKBOX_SIZE = [
+    {
+        label: '默认',
+        value: '',
+    },
+    {
+        label: '大',
+        value: 'lg',
+    },
+    {
+        label: '中',
+        value: 'md',
+    },
+    {
+        label: '小',
+        value: 'sm',
+    },
+];
+// 输入组件状态
+export const WD_CHECKBOX_STATUS = [
+    {
+        label: '编辑',
+        value: 'edit',
+    },
+    {
+        label: '禁用',
+        value: 'disabled',
+    },
+    {
+        label: '只读',
+        value: 'readOnly',
+    },
+];
+// 属性分类
+const X_CATEGORY = {
+    COMMON: '通用',
+    TITLE: '标题',
+    OPTION: '选项',
+    VERIFY: '状态/校验',
+};
+// 属性类型定义
+const data = Type.Object({
+    name: Type.String({
+        title: '绑定字段',
+        type: 'string',
+        'x-index': 10,
+        default: 'formCheckbox',
+        remarks: '提交表单时会将组件值提交保存到所配置的字段中',
+        'x-category': X_CATEGORY.COMMON,
+        'x-rules': [
+            {
+                message: '该字段必填',
+                required: true,
+            },
+            {
+                message: '必须以字母开头，仅能输入字母或下划线或数字',
+                pattern: '^[a-zA-Z][0-9a-zA-Z_]*$',
+            },
+        ],
+        required: true,
+        description: '表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。',
+    }),
+    range: Type.Array(Type.Object({
+        label: Type.String({
+            type: 'string',
+            title: '选项名称',
+            default: '选项1',
+        }),
+        value: Type.String({
+            type: 'string',
+            title: '选项值',
+            default: '1',
+        }),
+    }, {
+        type: 'object',
+        default: {
+            label: '选项1',
+            value: '1',
+        },
+        display: 'label',
+    }), {
+        type: 'array',
+        title: '选项',
+        default: [
+            {
+                label: '选项1',
+                value: '1',
+            },
+            {
+                label: '选项2',
+                value: '2',
+            },
+        ],
+        remarks: '供用户进行选择的选项列表',
+        'x-category': X_CATEGORY.COMMON,
+        'x-index': 20,
+        'x-props': {
+            'data-withBindMeta': true,
+        },
+        'x-component': 'list',
+        'x-linkages': [
+            {
+                type: 'value:schema',
+                schema: {
+                    items: {
+                        path: 'range.*',
+                        type: 'object',
+                        default: {
+                            label: "{{'选项' + ($self.value.length+1)}}",
+                            value: "{{($self.value.length+1) + ''}}",
+                        },
+                        display: 'label',
+                        properties: {
+                            label: {
+                                type: 'string',
+                                title: '选项名称',
+                                default: '选项1',
+                            },
+                            value: {
+                                type: 'string',
+                                title: '选项值',
+                                default: '1',
+                            },
+                        },
+                    },
+                },
+                target: 'range',
+            },
+        ],
+    }),
+    value: Type.Array(Type.String({
+        title: 'value',
+    }), {
+        title: '选中值',
+        'x-index': 30,
+        default: [],
+        remarks: '默认选中的选项',
+        'x-category': X_CATEGORY.COMMON,
+    }),
+    size: Type.StringEnum({
+        title: '组件尺寸',
+        type: 'string',
+        'x-index': 40,
+        default: '',
+        description: '多选组件的尺寸宽度，仅在PC端生效',
+        enum: Tuple(WD_CKECKBOX_SIZE),
+        'x-category': X_CATEGORY.COMMON,
+        'x-platforms': ['PCWEB'],
+    }),
+    ...FORM_ITEM_DATA_TITLE,
+    extra: Type.String({
+        title: '下方提示',
+        type: 'string',
+        description: '配置后提示内容常显在组件下方',
+        'x-index': 120,
+        'x-category': X_CATEGORY.OPTION,
+    }),
+    direction: Type.StringEnum({
+        title: '选项排列方式',
+        type: 'string',
+        'x-index': 130,
+        default: 'vertical',
+        enum: Tuple(WD_CHECKBOX_DIRECTION),
+        'x-category': X_CATEGORY.OPTION,
+    }),
+    borderedH5: Type.Boolean({
+        title: '移动端显示下划线',
+        type: 'boolean',
+        default: true,
+        description: '关闭后移动端不显示底部下划线',
+        'x-index': 140,
+        'x-category': X_CATEGORY.OPTION,
+    }),
+    // 新增且需兼容 disabled
+    status: Type.StringEnum({
+        title: '状态',
+        enum: Tuple(WD_CHECKBOX_STATUS),
+        default: 'edit',
+        type: 'string',
+        'x-index': 170,
+        'x-category': X_CATEGORY.VERIFY,
+    }),
+    required: Type.Boolean({
+        title: '必填',
+        type: 'boolean',
+        'x-index': 180,
+        default: false,
+        remarks: '启用后该组件强制必填，值不可为空',
+        'x-category': X_CATEGORY.VERIFY,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(requiredFlag,requiredMsg)',
+                condition: '{{$self.value}}',
+            },
+        ],
+    }),
+    requiredFlag: Type.Boolean({
+        title: '必填标识',
+        type: 'boolean',
+        'x-index': 190,
+        default: true,
+        remarks: '启用后，组件若要求必填，则会显示必填星号标记',
+        'x-category': X_CATEGORY.VERIFY,
+    }),
+    requiredMsg: Type.String({
+        title: '必填校验提示',
+        type: 'string',
+        'x-index': 200,
+        default: '该项为必填项',
+        'x-category': X_CATEGORY.VERIFY,
+        remarks: '启用必填，但组件值为空时的提示信息',
+    }),
+    format: Type.String({
+        title: '字段类型',
+        type: 'string',
+        'x-index': 210,
+        default: '',
+        display: false,
+        'x-category': X_CATEGORY.COMMON,
+        'x-platforms': [],
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: 'range',
+                condition: "{{$self.value!='x-enum'}}",
+            },
+            {
+                type: 'value:visible',
+                target: 'tipBlock',
+                condition: "{{$self.value=='x-enum'}}",
+            },
+        ],
+    }),
+    enumName: Type.String({
+        title: '通用选项集名称',
+        type: 'string',
+        'x-index': 220,
+        default: '',
+        'x-category': X_CATEGORY.COMMON,
+        display: false,
+        'x-platforms': [],
+    }),
+    tipBlock: Type.String({
+        title: '选项',
+        type: 'string',
+        'x-index': 230,
+        default: '',
+        'x-category': X_CATEGORY.COMMON,
+        'x-props': {
+            'data-hidebind': true,
+        },
+        'x-component': 'selection-tip',
+    }),
+});
+const properties = Type.Pick(ItemData, [
+    'name',
+    'value',
+    'label',
+    'required',
+    'visible',
+    'disabled',
+    'readOnly',
+]);
+// 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-checkbox-root`,
+            description: '组件最外层元素',
+        },
+        {
+            name: 'H5 端根元素',
+            selector: `.wd-h5-checkbox-root`,
+            description: '可设定 H5 端的根元素样式',
+        },
+        {
+            name: 'PC 端根元素',
+            selector: `.wd-pc-checkbox-root`,
+            description: '可设定 PC 端的根元素样式',
+        },
+        {
+            name: '小程序端根元素',
+            selector: `.wd-mp-checkbox-root`,
+            description: '可设定小程序端的根元素样式',
+        },
+        {
+            name: '无边框状态',
+            selector: `.wd-checkbox-root.is-borderless`,
+            description: '设置组件无边框状态样式',
+        },
+        {
+            name: '必填状态',
+            selector: `.wd-checkbox-root.is-required`,
+            description: '设置组件必填状态样式',
+        },
+        {
+            name: '标题',
+            selector: `.wd-checkbox__label`,
+            description: '组件标题元素',
+        },
+        {
+            name: '标题禁用状态',
+            selector: `.wd-checkbox__label.is-disabled`,
+            description: '设置组件标题禁用状态样式',
+        },
+        {
+            name: '标题不换行',
+            selector: `.wd-checkbox__label.is-nowrap`,
+            description: '设置组件标题不换行时状态样式',
+        },
+        {
+            name: '提示文字',
+            selector: `.wd-checkbox__help`,
+            description: '设置组件提示文字样式',
+        },
+        {
+            name: '校验信息',
+            selector: `.wd-checkbox__error`,
+            description: '设置组件校验信息样式',
+        },
+        {
+            name: '组件本身',
+            selector: '.wd-checkbox-group',
+            description: '组件本身元素',
+        },
+        {
+            name: '行内排版',
+            selector: '.wd-checkbox-group--inline',
+            description: '组件行内排版样式',
+        },
+        {
+            name: '选项样式',
+            selector: '.wd-checkbox-wrap',
+            description: '选项样式',
+        },
+        {
+            name: '选项禁用状态',
+            selector: '.wd-checkbox-wrap.is-disabled',
+            description: '选项禁用状态',
+        },
+        {
+            name: '选项只读状态',
+            selector: '.wd-checkbox-wrap.is-disabled',
+            description: '选项只读状态',
+        },
+        {
+            name: '小尺寸',
+            selector: '.wd-checkbox-wrap.size-sm',
+            description: '小尺寸样式（仅PC端有效）',
+        },
+        {
+            name: '默认尺寸',
+            selector: '.wd-checkbox-wrap.size-md',
+            description: '默认、中尺寸样式（仅PC端有效）',
+        },
+        {
+            name: '大尺寸',
+            selector: '.wd-checkbox-wrap.size-lg',
+            description: '大尺寸样式',
+        },
+        {
+            name: '勾选状态',
+            selector: '.wd-checkbox-wrap.is-checked',
+            description: '选项勾选状态',
+        },
+        {
+            name: '所有状态',
+            selector: '.wd-checkbox-wrap.is-indeterminate',
+            description: '选项所有状态',
+        },
+        {
+            name: '按钮背景样式',
+            selector: '.wd-checkbox-inner',
+            description: '选项按钮背景样式',
+        },
+        {
+            name: '按钮样式',
+            selector: '.wd-checkbox-inner::after',
+            description: '选项按钮样式',
+        },
+        {
+            name: '文本样式',
+            selector: '.wd-checkbox-label',
+            description: '选项内部文本样式',
+        },
+    ],
+    // 组件方法
+    methods: [
+        {
+            ...FORM_ITEM_METHODS.setValue,
+            params: {
+                properties: {
+                    value: Type.Array(Type.String({
+                        title: 'value',
+                    }), {
+                        title: '值',
+                        default: [],
+                        description: '使用多选组件的设置值方法时，值需要为数组格式。示例：[1,2]，其中1和2对应多选组件的选项值',
+                        'x-helper-text': '使用多选组件的设置值方法时，值需要为数组格式。示例：[1,2]，其中1和2对应多选组件的选项值',
+                    }),
+                },
+            },
+        },
+        FORM_ITEM_METHODS.setVisible,
+        FORM_ITEM_METHODS.setDisabled,
+        FORM_ITEM_METHODS.clearValue,
+        FORM_ITEM_METHODS.setReadOnly,
+        FORM_ITEM_METHODS.handleValidate,
+        FORM_ITEM_METHODS.clearValidate,
+    ],
+    // 组件对外暴露事件
+    events: [
+        {
+            title: '值改变',
+            name: 'change',
+            detail: {
+                value: Type.BasicTypeUnion({
+                    type: 'array',
+                    description: '多选组件选中值',
+                }),
+            },
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdCheckboxList',
+        title: '多选',
+        // 组件别名，用于生成组件 id，例如 Icon1
+        componentName: 'Checkbox',
+        description: '用于在页面中平铺展示多个可选项，由用户进行多项选择的场景',
+        icon: '../../icons/Checkbox.svg',
+        categoryOrder: 500,
+        componentOrder: 390,
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdCheckbox',
+        category: FORM_ITEM_META.category,
+        shortcut: FORM_ITEM_META.shortcut,
+        group: FORM_ITEM_META.group,
+        visible: FORM_ITEM_META.visible,
+    },
+    compConfig: {
+        componentType: 'formField',
+    },
+});
+export default config;

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

@@ -1,4 +1,28 @@
-import { defineConfig, Tuple, Type } from '../type-utils';
+import { defineConfig, Tuple, Type, } from '../type-utils';
+const events = [
+    {
+        title: '提交',
+        name: 'submit',
+    },
+];
+// const WD_FORM_LABEL_DIRECTION = [
+//   {
+//     label: '水平左对齐',
+//     value: 'horizontal-left',
+//   },
+//   {
+//     label: '水平右对齐',
+//     value: 'horizontal-right',
+//   },
+//   {
+//     label: '垂直左对齐',
+//     value: 'vertical-left',
+//   },
+//   {
+//     label: '垂直右对齐',
+//     value: 'vertical-right',
+//   },
+// ];
 const data = Type.Object({
     contentSlot: Type.Slot({
         description: '内容插槽',
@@ -243,6 +267,14 @@ const data = Type.Object({
             },
         ]),
     }),
+    // labelPosition: Type.StringEnum({
+    //   title: '标题位置',
+    //   type: 'string',
+    //   'x-index': 62,
+    //   default: 'vertical-left',
+    //   enum: Tuple(WD_FORM_LABEL_DIRECTION),
+    //   'x-category': '基础属性',
+    // }),
     methodCreate: Type.String({
         type: 'string',
         title: '新增方法',
@@ -330,15 +362,21 @@ const properties = Type.Intersect([
             format: Type.String(),
             message: Type.String(),
         }), {
+            title: '错误信息',
             description: '提交的校验错误信息对象',
         }),
         remoteValue: Type.Record(Type.String(), Type.Any(), {
+            title: '数据源初始值',
             description: '数据源初始化请求的初始值',
         }),
         value: Type.Record(Type.String(), Type.Any(), {
+            title: '表单前端值',
             description: '当前前端表单状态值',
         }),
-        dataSourceProfile: Type.Any({ description: '数据源信息' }),
+        dataSourceProfile: Type.Any({
+            title: '数据源类型信息',
+            description: '数据源信息',
+        }),
         // TODO:
         // clearValidate: Type.Function([], Type.Void()),
     }),
@@ -351,21 +389,39 @@ export default defineConfig({
         isDataContainer: true,
         componentType: 'form',
     },
-    methods: [
+    defaultStyles: {
+        display: 'block',
+    },
+    properties,
+    classes: [
         {
-            name: 'submit',
-            label: '提交',
+            name: '根元素',
+            selector: '.wd-form',
+            description: '分割线组件根元素',
+        },
+        {
+            name: 'PC 端分割线根元素',
+            selector: '.wd-pc-form',
+            description: '可以为 PC 端的分割线编写样式',
+        },
+        {
+            name: 'H5 端分割线根元素',
+            selector: '.wd-h5-form',
+            description: '可以为 H5 端的分割线编写样式',
+        },
+        {
+            name: '小程序端分割线根元素',
+            selector: '.wd-mp-form',
+            description: '可以为小程序端的分割线编写样式',
         },
     ],
-    events: [
+    methods: [
         {
-            title: '提交',
             name: 'submit',
+            label: '提交',
         },
     ],
-    defaultStyles: {
-        display: 'block',
-    },
+    events,
     meta: {
         description: '作为单行输入、下拉选择等各项表单类组件的父级容器，实现数据提交。',
         title: '表单容器',

package/dist/configs/components/wd-input-email.js

@@ -0,0 +1,37 @@
+import { defineConfig, Type } from '../type-utils';
+import { omit, getFormItemClasses, FORM_ITEM_META, } from '../type-utils/type-form';
+import wdInputConfig, { WD_INPUT_DATA } from './wd-input';
+// 属性类型定义
+const data = Type.Partial(Type.Object(Object.assign(omit(WD_INPUT_DATA, ['password', 'type', 'isNickNameType', 'rules']), {
+    name: { ...WD_INPUT_DATA.name, default: 'formEmail' },
+    label: { ...WD_INPUT_DATA.label, default: '邮箱' },
+    placeholder: { ...WD_INPUT_DATA.placeholder, default: '请输入邮箱' },
+})));
+const classes = getFormItemClasses('input-email');
+// export default
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    data,
+    properties: wdInputConfig.properties,
+    classes,
+    methods: wdInputConfig.methods,
+    events: wdInputConfig.events,
+    meta: {
+        description: '用于输入邮箱地址，会强制校验输入内容是否符合邮箱格式。',
+        icon: '../../icons/OfficialAccount.svg',
+        title: '邮箱输入',
+        name: 'WdInputEmail',
+        componentName: 'InputEmail',
+        categoryOrder: 500,
+        componentOrder: 520,
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdInputEmail',
+        category: FORM_ITEM_META.category,
+        shortcut: FORM_ITEM_META.shortcut,
+        group: FORM_ITEM_META.group,
+        visible: FORM_ITEM_META.visible,
+    },
+    compConfig: {
+        componentType: 'formField',
+    },
+});
+export default config;

package/dist/configs/components/wd-input-phone.js

@@ -0,0 +1,43 @@
+import { defineConfig, Type } from '../type-utils';
+import { getFormItemClasses, omit, FORM_ITEM_META, } from '../type-utils/type-form';
+import wdInputConfig, { WD_INPUT_DATA } from './wd-input';
+// 属性类型定义
+const data = Type.Partial(Type.Object(Object.assign(omit(WD_INPUT_DATA, [
+    'password',
+    'type',
+    'isNickNameType',
+    'rules',
+    'maxLength',
+]), {
+    name: { ...WD_INPUT_DATA.name, default: 'formPhone' },
+    label: { ...WD_INPUT_DATA.label, default: '手机' },
+    placeholder: { ...WD_INPUT_DATA.placeholder, default: '请输入手机号' },
+})));
+const classes = getFormItemClasses('input-phone');
+// export default
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    data,
+    properties: wdInputConfig.properties,
+    classes,
+    methods: wdInputConfig.methods,
+    events: wdInputConfig.events,
+    meta: {
+        description: '用于输入电话号码，会强制校验输入内容是否符合电话格式。',
+        icon: '../../icons/PhoneCode.svg',
+        title: '电话输入',
+        name: 'WdInputPhone',
+        componentName: 'InputPhone',
+        categoryOrder: 500,
+        componentOrder: 500,
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdInputPhone',
+        category: FORM_ITEM_META.category,
+        shortcut: FORM_ITEM_META.shortcut,
+        group: FORM_ITEM_META.group,
+        visible: FORM_ITEM_META.visible,
+    },
+    compConfig: {
+        componentType: 'formField',
+    },
+});
+export default config;

package/dist/configs/components/wd-input-url.js

@@ -0,0 +1,37 @@
+import { defineConfig, Type } from '../type-utils';
+import { getFormItemClasses, omit, FORM_ITEM_META, } from '../type-utils/type-form';
+import wdInputConfig, { WD_INPUT_DATA } from './wd-input';
+// 属性类型定义
+const data = Type.Partial(Type.Object(Object.assign(omit(WD_INPUT_DATA, ['password', 'type', 'isNickNameType', 'rules']), {
+    name: { ...WD_INPUT_DATA.name, default: 'formUrl' },
+    label: { ...WD_INPUT_DATA.label, default: '网址' },
+    placeholder: { ...WD_INPUT_DATA.placeholder, default: '请输入网址' },
+})));
+const classes = getFormItemClasses('input-url');
+// export default
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    data,
+    properties: wdInputConfig.properties,
+    classes,
+    methods: wdInputConfig.methods,
+    events: wdInputConfig.events,
+    meta: {
+        description: '用于输入URL地址，会强制校验输入内容是否符合URL格式。',
+        icon: '../../icons/Badge.svg',
+        title: 'URL输入',
+        name: 'WdInputUrl',
+        componentName: 'InputUrl',
+        categoryOrder: 500,
+        componentOrder: 510,
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdInputUrl',
+        category: FORM_ITEM_META.category,
+        shortcut: FORM_ITEM_META.shortcut,
+        group: FORM_ITEM_META.group,
+        visible: FORM_ITEM_META.visible,
+    },
+    compConfig: {
+        componentType: 'formField',
+    },
+});
+export default config;