@cloudbase/weda-ui 3.4.8 → 3.4.9

package/dist/configs/components/form-image-uploader.js

@@ -0,0 +1,326 @@
+import { defineConfig, Tuple, Type, } from '../type-utils';
+const data = Type.Object({
+    name: Type.String({
+        type: 'string',
+        title: '绑定字段',
+        default: 'images',
+        'x-group': '基础属性',
+        'x-index': 5,
+        'x-rules': [
+            {
+                message: '该字段必填',
+                required: true,
+            },
+            {
+                message: '必须以字母开头，仅能输入字母或下划线或数字',
+                pattern: '^[a-zA-Z][0-9a-zA-Z_]*$',
+            },
+        ],
+        required: true,
+        description: '表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。图片上传后，所有人可通过图片http地址下载查看。如需限制所有文件/图片资源仅文件上传用户可下载，请在微搭环境的云开发-云存储模块中调整存储桶访问权限为「仅创建者及管理员可读写」',
+        'x-helper-text': '表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。图片上传后，所有人可通过图片http地址下载查看。如需限制所有文件/图片资源仅文件上传用户可下载，请在微搭环境的云开发-云存储模块中调整存储桶访问权限为「仅创建者及管理员可读写」',
+    }),
+    title: Type.String({
+        type: 'string',
+        title: '字段标题',
+        default: '上传图片',
+        remarks: '组件标题位置的显示内容',
+        'x-group': '基础属性',
+        'x-index': 10,
+    }),
+    labelVisible: Type.Boolean({
+        type: 'boolean',
+        title: '显示标题',
+        default: true,
+        'x-group': '基础属性',
+        'x-index': 15,
+    }),
+    required: Type.Boolean({
+        type: 'boolean',
+        title: '必填',
+        default: false,
+        remarks: '启用后该组件强制必填，值不可为空',
+        'x-group': '基础属性',
+        'x-index': 30,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(requiredFlag,requiredMsg)',
+                condition: '{{$self.value}}',
+            },
+        ],
+    }),
+    requiredFlag: Type.Boolean({
+        type: 'boolean',
+        title: '必填标识',
+        default: true,
+        remarks: '启用后，组件若要求必填，则会显示必填星号标记',
+        'x-group': '基础属性',
+        'x-index': 35,
+    }),
+    requiredMsg: Type.String({
+        type: 'string',
+        title: '必填校验提示',
+        default: '该项为必填项',
+        remarks: '启用必填，但组件值为空时的提示信息',
+        'x-group': '基础属性',
+        'x-index': 40,
+    }),
+    acceptTypes: Type.Array(Type.StringEnum({
+        enum: Tuple([
+            {
+                label: '全部',
+                value: 'image/*',
+            },
+            {
+                label: 'JPG/JPEG',
+                value: 'image/jpeg',
+            },
+            {
+                label: 'PNG',
+                value: 'image/png',
+            },
+            {
+                label: 'BMP',
+                value: 'image/bmp',
+            },
+            {
+                label: 'GIF',
+                value: 'image/gif',
+            },
+            {
+                label: 'TIF',
+                value: 'image/tif',
+            },
+            {
+                label: 'TIFF',
+                value: 'image/tiff',
+            },
+        ]),
+        type: 'string',
+    }), {
+        title: '图片类型',
+        default: ['image/*'],
+        remarks: '支持上传的图片类型格式',
+        'x-group': '基础属性',
+        'x-index': 50,
+        'x-component': 'checkbox',
+        'x-platforms': ['WEB'],
+        'x-component-props': {
+            options: [
+                {
+                    label: '全部',
+                    value: 'image/*',
+                },
+                {
+                    label: 'JPG/JPEG',
+                    value: 'image/jpeg',
+                },
+                {
+                    label: 'PNG',
+                    value: 'image/png',
+                },
+                {
+                    label: 'BMP',
+                    value: 'image/bmp',
+                },
+                {
+                    label: 'GIF',
+                    value: 'image/gif',
+                },
+                {
+                    label: 'TIF',
+                    value: 'image/tif',
+                },
+                {
+                    label: 'TIFF',
+                    value: 'image/tiff',
+                },
+            ],
+        },
+    }),
+    maxSize: Type.Number({
+        type: 'number',
+        title: '单张大小(M)',
+        default: 10,
+        remarks: '单张图片的大小上限',
+        'x-group': '基础属性',
+        'x-index': 55,
+    }),
+    single: Type.Boolean({
+        type: 'boolean',
+        title: '上传单张图片',
+        default: false,
+        'x-group': '基础属性',
+        'x-index': 60,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: 'maxUploadCount',
+                condition: '{{ !$self.value}}',
+            },
+        ],
+        description: '在高级属性中开启小程序端获取微信头像后，仅能上传1张图片',
+    }),
+    maxUploadCount: Type.Number({
+        type: 'number',
+        title: '图片数量上限',
+        default: 9,
+        remarks: '允许上传的最大图片数量',
+        'x-group': '基础属性',
+        'x-index': 65,
+    }),
+    value: Type.Array(Type.String(), {
+        type: 'array',
+        title: '初始值',
+        'x-group': '基础属性',
+        'x-index': 66,
+        inputProp: {
+            changeEvent: 'change',
+            valueFromEvent: 'event.detail.value',
+        },
+        'x-component': 'jsontext',
+    }),
+    showShape: Type.StringEnum({
+        enum: Tuple([
+            {
+                label: '直角矩形',
+                value: 'ectangle',
+            },
+            {
+                label: '圆角矩形',
+                value: 'roundedTectangle',
+            },
+            {
+                label: '圆形',
+                value: 'circular',
+            },
+        ]),
+        type: 'string',
+        title: '图片显示形状',
+        default: 'ectangle',
+        'x-group': '高级属性',
+        'x-index': 104,
+        description: '只影响图片的展示效果，不会对图片进行裁剪',
+    }),
+    layout: Type.StringEnum({
+        enum: Tuple([
+            {
+                label: '自动',
+                value: '',
+            },
+            {
+                label: '水平',
+                value: 'horizontal',
+            },
+            {
+                label: '垂直',
+                value: 'vertical',
+            },
+        ]),
+        type: 'string',
+        title: '布局方式',
+        default: '',
+        remarks: '设置当前组件的标题和输入选择区域为左右布局或上下布局，如选择“自动”，则跟随父级表单容器的配置',
+        'x-group': '高级属性',
+        'x-index': 105,
+    }),
+    disabled: Type.Boolean({
+        type: 'boolean',
+        title: '禁用',
+        default: false,
+        'x-group': '高级属性',
+        'x-index': 110,
+    }),
+    isChooseAvatar: Type.Boolean({
+        type: 'boolean',
+        title: '小程序端获取微信头像',
+        default: false,
+        'x-group': '小程序开放能力',
+        'x-index': 201,
+        'x-linkages': [
+            {
+                type: 'value:state',
+                state: {
+                    value: true,
+                    disabled: true,
+                },
+                target: 'single',
+                condition: '{{$self.value}}',
+            },
+            {
+                type: 'value:state',
+                state: {
+                    disabled: false,
+                },
+                target: 'single',
+                condition: '{{!$self.value}}',
+            },
+        ],
+        description: '开启后小程序用户可选择直接上传微信头像',
+    }),
+    disableMultiSwitch: Type.Boolean({
+        type: 'boolean',
+        title: '单/多图片切换开启',
+        default: false,
+        display: false,
+        'x-group': '基础属性',
+        'x-index': 250,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: 'value',
+                condition: '{{ !$self.value}}',
+            },
+        ],
+    }),
+});
+const events = [
+    {
+        title: '值改变',
+        name: 'change',
+    },
+    {
+        title: '上传成功',
+        name: 'success',
+    },
+    {
+        title: '上传失败',
+        name: 'error',
+    },
+];
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    data,
+    compConfig: {
+        componentType: 'formField',
+    },
+    events,
+    meta: {
+        name: 'FormImageUploader',
+        componentName: 'ImageUploader',
+        title: '图片上传',
+        description: '用于上传图片、保存图片数据。',
+        category: '表单',
+        icon: '../icons/FormImageUploader.svg',
+        categoryOrder: 500,
+        componentOrder: 420,
+        visible: ['APP'],
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormImageUploader',
+        shortcut: {
+            props: ['name', 'title'],
+        },
+        recommendTypes: {
+            name: [
+                {
+                    text: '图片',
+                    type: 'string',
+                    format: 'x-image',
+                },
+            ],
+        },
+    },
+});
+export default config;