@cloudbase/weda-ui 3.4.8 → 3.4.9-alpha.1024

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

@@ -0,0 +1,478 @@
+import { defineConfig, Tuple, Type } from '../type-utils';
+import { commonRequiredDataForm } from './common/form-input-required';
+const data = Type.Object({
+    name: Type.String({
+        title: '绑定字段',
+        default: 'formInput',
+        remarks: '提交表单时会将组件值提交保存到所配置的字段中',
+        'x-index': 1,
+        'x-rules': [
+            {
+                message: '该字段必填',
+                required: true,
+            },
+            {
+                message: '必须以字母开头，仅能输入字母或下划线或数字',
+                pattern: '^[a-zA-Z][0-9a-zA-Z_]*$',
+            },
+        ],
+        required: true,
+        'x-group': '基础属性',
+        description: '表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。',
+    }),
+    label: Type.String({
+        type: 'string',
+        title: '字段标题',
+        default: '标题',
+        remarks: '组件标题位置的显示内容',
+        'x-index': 2,
+        'x-group': '基础属性',
+    }),
+    labelVisible: Type.Boolean({
+        type: 'boolean',
+        title: '显示标题',
+        default: true,
+        remarks: '显示组件的标题',
+        'x-index': 3,
+        'x-group': '基础属性',
+    }),
+    placeholder: Type.String({
+        type: 'string',
+        title: '提示文字',
+        default: '请输入',
+        remarks: '用于说明组件用途或注意事项的提示文字',
+        'x-index': 4,
+        'x-group': '基础属性',
+    }),
+    size: Type.StringEnum({
+        enum: Tuple([
+            {
+                label: '大',
+                value: 'l',
+            },
+            {
+                label: '中',
+                value: 'm',
+            },
+            {
+                label: '小',
+                value: 's',
+            },
+            {
+                label: '占满',
+                value: 'full',
+            },
+        ]),
+        type: 'string',
+        title: '组件宽度',
+        default: 'full',
+        'x-index': 70,
+        'x-group': '高级属性',
+        'x-platforms': ['PCWEB'],
+    }),
+    type: Type.StringEnum({
+        enum: Tuple([
+            {
+                label: '文本输入键盘',
+                value: 'text',
+            },
+            {
+                label: '数字输入键盘',
+                value: 'number',
+            },
+            {
+                label: '身份证输入键盘',
+                value: 'idcard',
+            },
+            {
+                label: '带小数点的数字键盘',
+                value: 'digit',
+            },
+        ]),
+        type: 'string',
+        title: '输入类型',
+        default: 'text',
+        remarks: '移动端输入时的键盘类型',
+        'x-index': 110,
+        'x-group': '高级属性',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(confirmType)',
+                condition: "{{$self.value === 'text'}}",
+            },
+        ],
+    }),
+    maxLength: Type.Number({
+        type: 'number',
+        title: '最大输入长度',
+        default: 140,
+        remarks: '允许输入的最大字符数量',
+        'x-index': 115,
+        'x-group': '高级属性',
+    }),
+    password: Type.Boolean({
+        type: 'boolean',
+        title: '密码',
+        default: false,
+        remarks: '启用后，输入框显示为暗文，适合于密码录入等场景',
+        'x-index': 120,
+        'x-group': '高级属性',
+    }),
+    focus: Type.Boolean({
+        type: 'boolean',
+        title: '自动获取焦点',
+        default: false,
+        remarks: '启用后，打开页面时，该组件的输入框将自动获取焦点（多组件启用时，仅最下方的组件生效）',
+        'x-index': 125,
+        syncProp: [
+            {
+                changeEvent: 'focus',
+                valueFromEvent: 'true',
+            },
+            {
+                changeEvent: 'blur',
+                valueFromEvent: 'false',
+            },
+        ],
+        'x-group': '高级属性',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: 'disabled',
+                condition: '{{!$self.value}}',
+            },
+        ],
+    }),
+    clearable: Type.Boolean({
+        type: 'boolean',
+        title: '显示清空按钮',
+        default: true,
+        remarks: '启用后，输入框有值时，右侧将显示清空按钮，点击后可清空输入框中的值',
+        'x-index': 130,
+        'x-group': '高级属性',
+    }),
+    disabled: Type.Boolean({
+        type: 'boolean',
+        title: '禁用',
+        default: false,
+        remarks: '是否禁用输入/选择，启用后组件强制显示为只读效果',
+        'x-index': 135,
+        'x-group': '高级属性',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(focus)',
+                condition: '{{!$self.value}}',
+            },
+        ],
+    }),
+    ...commonRequiredDataForm,
+    rules: Type.Array(Type.Object({
+        // 这里的编辑器不支持标准json schema
+        format: Type.String({
+            enum: Tuple([
+                {
+                    label: '自定义',
+                    value: '',
+                },
+                {
+                    label: '身份证',
+                    value: 'id',
+                },
+                {
+                    label: '银行卡',
+                    value: 'bankCard',
+                },
+                {
+                    label: '邮箱',
+                    value: 'email',
+                },
+                {
+                    label: '数字',
+                    value: 'num',
+                },
+                {
+                    label: '中文',
+                    value: 'cn',
+                },
+                {
+                    label: '手机号',
+                    value: 'mobile',
+                },
+                {
+                    label: '固定电话',
+                    value: 'tel',
+                },
+                {
+                    label: '网址',
+                    value: 'url',
+                },
+                {
+                    label: '车牌',
+                    value: 'carId',
+                },
+                {
+                    label: '中文名',
+                    value: 'cnName',
+                },
+                {
+                    label: '英文名',
+                    value: 'enName',
+                },
+                {
+                    label: '用户名',
+                    value: 'userName',
+                },
+                {
+                    label: '地址',
+                    value: 'address',
+                },
+                {
+                    label: '日期',
+                    value: 'date',
+                },
+                {
+                    label: '数字验证码(4-8位)',
+                    value: 'numVcode',
+                },
+                {
+                    label: '其他验证码(4位以上的中英文字符)',
+                    value: 'vcode',
+                },
+                {
+                    label: '编码',
+                    value: 'code',
+                },
+                {
+                    label: '港澳通行证',
+                    value: 'hkMc',
+                },
+                {
+                    label: '台湾通行证',
+                    value: 'taiWan',
+                },
+                {
+                    label: '护照',
+                    value: 'passport',
+                },
+                {
+                    label: '金额',
+                    value: 'money',
+                },
+            ]),
+            type: 'string',
+            title: '校验规则',
+            default: '',
+            'x-linkages': [
+                {
+                    type: 'value:state',
+                    state: {
+                        value: "{{ '请输入正确格式的'+($self.value === '' ? '内容' :  $self.props.enum.find(item => { return item.value === $self.value }) && $self.props.enum.find(item => { return item.value === $self.value }).label )}}",
+                    },
+                    target: 'dataForm.message',
+                    condition: '{{$self.inputed}}',
+                },
+                {
+                    type: 'value:state',
+                    state: {
+                        value: "{{ {'':'', 'id':'/^[1-9]\\\\d{5}(18|19|([23]\\\\d))\\\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\\\d{3}[0-9Xx]$/', 'bankCard':'/^([1-9]{1})(\\d{7,29})$/' , 'email':'/^\\\\w{6,18}@\\\\w{2,4}\\\\.(com)|(net)$/', 'num':'/^-?\\\\d*\\\\.?\\\\d+$/', 'cn':'/^[/u4e00-/u9fa5]$/', 'mobile':'/^[1][3,4,5,6,7,8,9][0-9]{9}$/', 'tel':'/^(0\\\\d{2,3}-)?(\\\\d{7,8})$/', 'url': '/http://([\\\\w-]+\\\\.)+[\\\\w-]+(/[\\\\w- ./?%&=]*)?/', 'carId':'/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/', 'cnName':'/^[/u4e00-/u9fa5]$/', 'enName':'/^[A-Za-z]+$/', 'userName':'/^[a-zA-Z0-9_-]{4,16}$/', 'address': '/.*/', 'date':'/^\\\\d{4}(\\\\-)\\\\d{1,2}\\\\1\\\\d{1,2}$/', 'numVcode':'/^[0-9]{4,8}$/', 'vcode':'/^.{4,}$/', 'hkMc':'/^[LTlt]{1}[0-9]{8}$/', 'code': '/^[1-9][0-9]{5}$/', 'taiWan':'/^[0-9]{8,10}$/', 'passport':'/^((1[45]\\\\d{7})|(G\\\\d{8})|(P\\\\d{7})|(S\\\\d{7,8})|(E\\\\d{8}))?$/', 'money':'/^([1-9][\\\\d]{0,7}|0)(\\\\.[\\\\d]{1,2})?$/'}[$self.value] }}",
+                    },
+                    target: 'dataForm.pattern',
+                    condition: '{{$self.inputed}}',
+                },
+            ],
+        }),
+        message: Type.String({
+            type: 'string',
+            title: '提示信息',
+            default: '请输入正确格式的内容',
+        }),
+        pattern: Type.String({
+            type: 'string',
+            title: '正则',
+            'x-component': 'textarea',
+        }),
+    }, {
+        title: 'tabs',
+        default: {
+            icon: '自定义',
+            title: '自定义',
+            message: '请输入正确格式的内容',
+        },
+        'x-display': "({'':'自定义','id':'身份证','bankCard':'银行卡','email':'邮箱','num':'数字','cn':'中文','mobile':'手机号','tel':'固定电话','url':'网址','carId':'车牌','cnName':'中文名','enName':'英文名','userName':'用户名','address':'地址', 'date':'日期','numVcode':'数字验证码(4-8位)', 'vcode':'其他验证码(4位以上的中英文字符)', 'code':'编码', 'hkMc':'港澳通行证', 'taiWan':'台湾通行证', 'passport':'护照', 'money':'金额'})[this.format] || '自定义'",
+    }), {
+        title: '校验规则',
+        default: [],
+        remarks: '仅符合校验规则的数据才允许被提交；不符合规则时会展示错误提示信息',
+        'x-index': 10,
+        'x-group': '基础属性',
+        'x-component': 'list',
+    }),
+    value: Type.String({
+        type: 'string',
+        title: '输入值',
+        default: '',
+        remarks: '组件输入框中的默认值',
+        'x-index': 5,
+        dataType: 'string',
+        inputProp: [
+            {
+                changeEvent: 'change',
+                valueFromEvent: 'event.detail.value',
+            },
+            {
+                changeEvent: 'clear',
+                valueFromEvent: 'event.detail.value',
+            },
+        ],
+        'x-group': '基础属性',
+    }),
+    layout: Type.StringEnum({
+        enum: Tuple([
+            {
+                label: '自动',
+                value: '',
+            },
+            {
+                label: '水平',
+                value: 'horizontal',
+            },
+            {
+                label: '垂直',
+                value: 'vertical',
+            },
+        ]),
+        type: 'string',
+        title: '布局方式',
+        default: '',
+        remarks: '设置当前组件的标题和输入选择区域为左右布局或上下布局，如选择“自动”，则跟随父级表单容器的配置',
+        'x-index': 60,
+        'x-group': '高级属性',
+    }),
+    validateStatus: Type.StringEnum({
+        enum: Tuple([
+            {
+                label: 'success',
+                value: 'success',
+            },
+            {
+                label: 'warn',
+                value: 'warn',
+            },
+            {
+                label: 'error',
+                value: 'error',
+            },
+        ]),
+        type: 'string',
+        title: '校验状态',
+        default: 'success',
+        'x-index': 140,
+        'x-group': '高级属性',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: 'help',
+                condition: "{{$self.value !== 'success'}}",
+            },
+        ],
+    }),
+    isNickNameType: Type.Boolean({
+        type: 'boolean',
+        title: '小程序端获取微信昵称',
+        default: false,
+        'x-group': '小程序开放能力',
+        'x-index': 258,
+        'x-linkages': [
+            {
+                type: 'value:state',
+                state: {
+                    value: 'text',
+                    disabled: true,
+                },
+                target: 'type',
+                condition: '{{$self.value}}',
+            },
+            {
+                type: 'value:state',
+                state: {
+                    disabled: false,
+                },
+                target: 'type',
+                condition: '{{!$self.value}}',
+            },
+            {
+                type: 'value:state',
+                state: {
+                    value: false,
+                    disabled: true,
+                },
+                target: 'password',
+                condition: '{{$self.value}}',
+            },
+            {
+                type: 'value:state',
+                state: {
+                    disabled: false,
+                },
+                target: 'password',
+                condition: '{{!$self.value}}',
+            },
+        ],
+        description: '开启后小程序用户可选择直接填写微信昵称',
+    }),
+});
+export default defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    data,
+    compConfig: {
+        componentType: 'formField',
+    },
+    events: [
+        {
+            name: 'change',
+            title: '值改变',
+        },
+        {
+            title: '失去焦点',
+            name: 'blur',
+        },
+        {
+            title: '获取焦点',
+            name: 'focus',
+        },
+        {
+            title: '清空内容',
+            name: 'clear',
+        },
+        {
+            title: '确认内容',
+            name: 'confirm',
+        },
+    ],
+    meta: {
+        title: '单行输入',
+        name: 'FormInput',
+        description: '用于输入/查看较短文本内容。',
+        category: '表单',
+        categoryOrder: 500,
+        componentOrder: 350,
+        icon: '../icons/FormInput.svg',
+        visible: ['APP', 'COMPONENT'],
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormInput',
+        shortcut: {
+            props: ['name', 'label'],
+        },
+        recommendTypes: {
+            name: [
+                {
+                    text: '文本',
+                    type: 'string',
+                },
+            ],
+        },
+    },
+});