@cloudbase/weda-ui 3.4.11 → 3.4.12

package/dist/configs/type-utils/type-form.js

@@ -0,0 +1,681 @@
+import { Type, Tuple } from './index';
+import { WD_INPUT_SIZE, WD_INPUT_LABEL_ALIGN, WD_INPUT_LAYOUT, WD_INPUT_TYPE, WD_INPUT_STATUS, WD_INPUT_RULES, WD_INPUT_VALIDATE_STATUS, WD_INPUT_ICON_TYPE, WD_ICON_ENUM, } from '../../enum';
+const WD_ICON_OPTIONS = WD_ICON_ENUM.map((item) => ({
+    label: item,
+    value: item,
+}));
+/**
+ * 去掉某些属性
+ */
+export const omit = (obj, fields) => {
+    const clone = { ...obj };
+    if (Array.isArray(fields)) {
+        fields.forEach((k) => delete clone[k]);
+    }
+    return clone;
+};
+/**
+ * 包含某些属性
+ */
+export const pick = (obj, fields) => {
+    const result = {};
+    if (Array.isArray(fields)) {
+        fields.forEach((k) => {
+            obj[k] && (result[k] = obj[k]);
+        });
+    }
+    return result;
+};
+// 属性分类
+const X_CATEGORY = {
+    COMMON: '通用',
+    TITLE: '标题',
+    INPUT_BOX: '输入框',
+    MP: '小程序能力',
+    VERIFY: '状态/校验',
+    PRIVATE: '不对外展示',
+};
+// 表单组件属性集合
+export const FORM_ITEM_DATA = {
+    /** 通用 */
+    name: Type.String({
+        title: '绑定字段',
+        type: 'string',
+        default: 'formInput',
+        required: true,
+        description: '表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。',
+        'x-index': 10,
+        'x-category': X_CATEGORY.COMMON,
+        'x-rules': [
+            {
+                message: '该字段必填',
+                required: true,
+            },
+            {
+                message: '必须以字母开头，仅能输入字母或下划线或数字',
+                pattern: '^[a-zA-Z][0-9a-zA-Z_]*$',
+            },
+        ],
+    }),
+    value: Type.String({
+        title: '输入值',
+        type: 'string',
+        default: '',
+        'x-category': X_CATEGORY.COMMON,
+        'x-index': 20,
+    }),
+    inputValue: Type.String({
+        title: '输入值',
+        type: 'string',
+        default: '',
+        'x-category': X_CATEGORY.COMMON,
+        'x-index': 21,
+    }),
+    placeholder: Type.String({
+        title: '占位文字',
+        type: 'string',
+        default: '请输入',
+        'x-index': 30,
+        'x-category': X_CATEGORY.COMMON,
+    }),
+    size: Type.StringEnum({
+        title: '组件尺寸',
+        enum: Tuple(WD_INPUT_SIZE),
+        type: 'string',
+        default: '',
+        description: '尺寸配置仅对PC端生效，表单场景下默认会跟随表单容器的组件尺寸配置',
+        'x-index': 40,
+        'x-platforms': ['PCWEB'],
+        'x-category': X_CATEGORY.COMMON,
+    }),
+    block: Type.Boolean({
+        title: '横向占满',
+        type: 'boolean',
+        default: true,
+        'x-index': 41,
+        'x-platforms': ['PCWEB'],
+        'x-category': X_CATEGORY.COMMON,
+    }),
+    /** 标题 */
+    label: Type.String({
+        title: '标题内容',
+        type: 'string',
+        default: '标题',
+        'x-index': 50,
+        'x-category': X_CATEGORY.TITLE,
+    }),
+    labelVisible: Type.Boolean({
+        title: '显示标题',
+        type: 'boolean',
+        default: true,
+        'x-index': 60,
+        'x-category': X_CATEGORY.TITLE,
+    }),
+    labelAlign: Type.StringEnum({
+        title: '标题对齐',
+        enum: Tuple(WD_INPUT_LABEL_ALIGN),
+        type: 'string',
+        default: '',
+        description: '表单场景下默认会跟随表单容器的标题对齐配置',
+        'x-index': 70,
+        'x-category': X_CATEGORY.TITLE,
+    }),
+    labelWrap: Type.Boolean({
+        title: '标题换行',
+        type: 'boolean',
+        default: false,
+        description: '如果标题内容过长关闭时只显示一行、溢出省略；开启时换行展示。表单场景下默认会跟随表单容器的标题换行配置',
+        'x-index': 80,
+        'x-category': X_CATEGORY.TITLE,
+    }),
+    layout: Type.StringEnum({
+        title: '标题位置',
+        enum: Tuple(WD_INPUT_LAYOUT),
+        type: 'string',
+        default: '',
+        description: '设置标题在表单组件的展示位置，表单场景下默认会跟随表单容器的标题的位置配置',
+        'x-index': 90,
+        'x-category': X_CATEGORY.TITLE,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: 'labelWidth',
+                condition: '{{$self.value !== "vertical"}}',
+            },
+        ],
+    }),
+    labelWidth: Type.String({
+        title: '标题宽度',
+        type: 'string',
+        description: '表单场景下默认会跟随表单容器的标题宽度配置',
+        'x-index': 100,
+        'x-category': X_CATEGORY.TITLE,
+        'x-helper-text': '您可以输入数值 + px、%等单位，示例：200px',
+    }),
+    labelTips: Type.String({
+        title: '标题提示',
+        type: 'string',
+        description: '配置标题的工具提示内容',
+        'x-platforms': ['MOBILEWEB', 'PCWEB', 'WEB'],
+        'x-helper-text': '标题的提示语暂不支持小程序端',
+        'x-index': 110,
+        'x-category': X_CATEGORY.TITLE,
+    }),
+    /** 输入 */
+    clearable: Type.Boolean({
+        title: '显示清空按钮',
+        type: 'boolean',
+        default: true,
+        description: '开启后提供快捷清空按钮',
+        'x-index': 120,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    before: Type.String({
+        title: '前缀文字',
+        type: 'string',
+        description: '表单输入框显示前缀文字，表单提交场景下前缀文字会作为表单内容一起提交到数据模型中',
+        'x-index': 130,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    after: Type.String({
+        title: '后缀文字',
+        type: 'string',
+        description: '表单输入框显示后缀文字，表单提交场景下后缀文字会作为表单内容一起提交到数据模型中',
+        'x-index': 140,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    prefixType: Type.StringEnum({
+        enum: Tuple(WD_INPUT_ICON_TYPE),
+        title: '前缀图标类型',
+        default: '',
+        description: '选择图标的类型',
+        'x-index': 150,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(prefixIcon)',
+                condition: "{{$self.value === 'inner'}}",
+            },
+            {
+                type: 'value:visible',
+                target: '*(prefixSrc)',
+                condition: "{{$self.value ==='custom'}}",
+            },
+        ],
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    prefixIcon: Type.StringEnum({
+        title: '前缀图标',
+        type: 'string',
+        enum: Tuple(WD_ICON_OPTIONS),
+        description: '表单输入框中展示前图标',
+        default: 'success',
+        'x-index': 151,
+        'x-category': X_CATEGORY.INPUT_BOX,
+        'x-component': 'icon2',
+    }),
+    prefixSrc: Type.String({
+        'x-component': 'image',
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+            },
+        ],
+        title: '前缀图标',
+        default: '',
+        description: '设置自定义图标地址',
+        'x-index': 152,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    suffixType: Type.StringEnum({
+        enum: Tuple(WD_INPUT_ICON_TYPE),
+        title: '后缀图标类型',
+        default: '',
+        description: '选择图标的类型',
+        'x-index': 160,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(suffixIcon)',
+                condition: "{{$self.value === 'inner'}}",
+            },
+            {
+                type: 'value:visible',
+                target: '*(suffixSrc)',
+                condition: "{{$self.value ==='custom'}}",
+            },
+        ],
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    suffixIcon: Type.StringEnum({
+        title: '后缀图标',
+        type: 'string',
+        enum: Tuple(WD_ICON_OPTIONS),
+        default: 'success',
+        description: '表单输入框中展示后图标',
+        'x-index': 161,
+        'x-category': X_CATEGORY.INPUT_BOX,
+        'x-component': 'icon2',
+    }),
+    suffixSrc: Type.String({
+        'x-component': 'image',
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+            },
+        ],
+        title: '后缀图标',
+        default: '',
+        description: '设置自定义图标地址',
+        'x-index': 162,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    extra: Type.String({
+        title: '下方提示',
+        type: 'string',
+        description: '配置后提示内容常显在输入框下方',
+        'x-index': 170,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    password: Type.Boolean({
+        title: '展示为密码',
+        type: 'boolean',
+        default: false,
+        description: '输入内容以密码的形式展示',
+        'x-index': 180,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    type: Type.StringEnum({
+        title: '输入键盘类型',
+        enum: Tuple(WD_INPUT_TYPE),
+        default: 'text',
+        type: 'string',
+        description: '控制移动端输入键盘的展示形式',
+        'x-index': 190,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    counterVisible: Type.Boolean({
+        title: '显示字数',
+        type: 'boolean',
+        default: false,
+        'x-index': 200,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    focus: Type.Boolean({
+        title: '自动获取焦点',
+        type: 'boolean',
+        default: false,
+        description: '开启后页面加载后光标自动定位到该输入框',
+        'x-index': 210,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    borderedH5: Type.Boolean({
+        title: '移动端显示下划线',
+        type: 'boolean',
+        default: true,
+        description: '关闭后移动端不显示底部下划线',
+        'x-index': 220,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    borderedPc: Type.Boolean({
+        title: 'PC端显示输入边框',
+        type: 'boolean',
+        default: true,
+        description: '关闭后PC端不显示输入边框',
+        'x-index': 230,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
+    /** 小程序能力 */
+    isNickNameType: Type.Boolean({
+        title: '小程序端获取微信昵称',
+        type: 'boolean',
+        default: false,
+        'x-platforms': ['MP'],
+        'x-index': 240,
+        'x-category': X_CATEGORY.MP,
+    }),
+    /** 状态/校验 */
+    maxLength: Type.Number({
+        title: '最大长度',
+        type: 'number',
+        default: 140,
+        'x-index': 250,
+        'x-category': X_CATEGORY.VERIFY,
+    }),
+    rules: Type.Array(Type.Object({
+        format: Type.String({
+            enum: Tuple(WD_INPUT_RULES),
+            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({
+            title: '提示信息',
+            default: '请输入正确格式的内容',
+        }),
+        pattern: Type.Optional(Type.String({
+            title: '正则',
+            'x-component': 'textarea',
+            'x-helper-text': '支持匹配正则字面量如 /^weda$/i，或匹配字符串如 ^weda$',
+        })),
+    }, {
+        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: [],
+        type: 'string',
+        'x-index': 260,
+        'x-category': X_CATEGORY.VERIFY,
+        'x-component': 'list',
+    }),
+    validateStatus: Type.StringEnum({
+        title: '校验状态',
+        enum: Tuple(WD_INPUT_VALIDATE_STATUS),
+        type: 'string',
+        default: 'success',
+        'x-index': 270,
+        'x-category': X_CATEGORY.VERIFY,
+    }),
+    status: Type.StringEnum({
+        title: '状态',
+        enum: Tuple(WD_INPUT_STATUS),
+        default: 'edit',
+        type: 'string',
+        'x-index': 280,
+        'x-category': X_CATEGORY.VERIFY,
+    }),
+    required: Type.Boolean({
+        title: '必填',
+        type: 'boolean',
+        default: false,
+        'x-index': 290,
+        'x-category': X_CATEGORY.VERIFY,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(requiredFlag,requiredMsg)',
+                condition: '{{$self.value}}',
+            },
+        ],
+    }),
+    requiredFlag: Type.Boolean({
+        type: 'boolean',
+        title: '必填标识',
+        default: true,
+        remarks: '启用后，组件若要求必填，则会显示必填星号标记',
+        'x-index': 300,
+        'x-category': X_CATEGORY.VERIFY,
+    }),
+    requiredMsg: Type.String({
+        type: 'string',
+        title: '必填校验提示',
+        default: '该项为必填项',
+        'x-index': 310,
+        'x-category': X_CATEGORY.VERIFY,
+    }),
+    /** 提供给widget挂载的属性 */
+    visible: Type.Boolean({
+        title: '是否展示',
+        description: '组件是否展示',
+        'x-platforms': [],
+    }),
+    disabled: Type.Boolean({
+        title: '是否禁用',
+        description: '组件是否禁用',
+        'x-platforms': [],
+    }),
+    readOnly: Type.Boolean({
+        title: '是否只读',
+        description: '组件是否只读',
+        'x-platforms': [],
+    }),
+};
+// 各组件标题一致，统一导出，x-index 从 50-110
+export const FORM_ITEM_DATA_TITLE = pick(FORM_ITEM_DATA, [
+    'label',
+    'labelVisible',
+    'labelAlign',
+    'labelWrap',
+    'layout',
+    'labelWidth',
+    'labelTips',
+]);
+// 表单组件事件集合
+const DEFAULT_DETAIL = { value: Type.String({ description: '输入值' }) };
+export const FORM_ITEM_EVENTS = {
+    change: {
+        name: 'change',
+        title: '输入改变',
+        detail: DEFAULT_DETAIL,
+    },
+    focus: {
+        name: 'focus',
+        title: '聚焦',
+        detail: DEFAULT_DETAIL,
+    },
+    blur: {
+        name: 'blur',
+        title: '失焦',
+        detail: DEFAULT_DETAIL,
+    },
+    confirm: {
+        name: 'confirm',
+        title: '回车',
+        detail: DEFAULT_DETAIL,
+    },
+    clear: {
+        name: 'clear',
+        title: '清除内容',
+        detail: { originValue: Type.String({ description: '输入被清除前的值' }) },
+    },
+};
+// 表单方法集合
+export const FORM_ITEM_METHODS = {
+    setValue: {
+        name: 'setValue',
+        label: '设置值',
+        params: {
+            properties: {
+                value: {
+                    title: '值',
+                    type: 'string',
+                },
+            },
+        },
+        description: '通过 $w.id1.setValue("weda") 设置组件值',
+    },
+    setVisible: {
+        name: 'setVisible',
+        label: '设置显隐',
+        params: {
+            properties: {
+                value: {
+                    title: '显示',
+                    type: 'boolean',
+                },
+            },
+        },
+        description: '通过 $w.id1.setVisible(false) 设置组件为隐藏',
+    },
+    setDisabled: {
+        name: 'setDisabled',
+        label: '设置禁用',
+        params: {
+            properties: {
+                value: {
+                    title: '禁用',
+                    type: 'boolean',
+                },
+            },
+        },
+        description: '通过 $w.id1.setDisabled(true) 设置组件为禁用',
+    },
+    setReadOnly: {
+        name: 'setReadOnly',
+        label: '设置只读',
+        params: {
+            properties: {
+                value: {
+                    title: '只读',
+                    type: 'boolean',
+                },
+            },
+        },
+        description: '通过 $w.id1.setReadOnly(true) 设置组件为只读',
+    },
+    clearValue: {
+        name: 'clearValue',
+        label: '清空值',
+        description: '通过 $w.id1.clearValue() 清空组件值',
+    },
+    resetValue: {
+        name: 'resetValue',
+        label: '重置值',
+        description: '通过 $w.id1.resetValue() 重置组件为初始值',
+    },
+    clearValidate: {
+        name: 'clearValidate',
+        label: '清除校验',
+        description: '通过 $w.id1.clearValidate() 清除组件校验',
+    },
+    handleValidate: {
+        name: 'handleValidate',
+        label: '触发校验',
+        description: '通过 $w.id1.handleValidate() 校验组件值',
+    },
+};
+// 表单样式集合
+export const getFormItemClasses = (classRoot) => {
+    if (classRoot.startsWith('wd-')) {
+        classRoot = classRoot.slice(3);
+    }
+    return [
+        {
+            name: '根元素',
+            selector: `.wd-${classRoot}-root`,
+            description: '组件最外层元素',
+        },
+        {
+            name: 'H5 端根元素',
+            selector: `.wd-h5-${classRoot}-root`,
+            description: '可设定 H5 端的根元素样式',
+        },
+        {
+            name: 'PC 端根元素',
+            selector: `.wd-pc-${classRoot}-root`,
+            description: '可设定 PC 端的根元素样式',
+        },
+        {
+            name: '小程序端根元素',
+            selector: `.wd-mp-${classRoot}-root`,
+            description: '可设定小程序端的根元素样式',
+        },
+        {
+            name: '无边框状态',
+            selector: `.wd-${classRoot}-root.is-borderless`,
+            description: '设置组件无边框状态样式',
+        },
+        {
+            name: '必填状态',
+            selector: `.wd-${classRoot}-root.is-required`,
+            description: '设置组件必填状态样式',
+        },
+        {
+            name: '标题',
+            selector: `.wd-${classRoot}__label`,
+            description: '组件标题元素',
+        },
+        {
+            name: '标题禁用状态',
+            selector: `.wd-${classRoot}__label.is-disabled`,
+            description: '设置组件标题禁用状态样式',
+        },
+        {
+            name: '标题不换行',
+            selector: `.wd-${classRoot}__label.is-nowrap`,
+            description: '设置组件标题不换行时状态样式',
+        },
+        {
+            name: '前缀文字',
+            selector: `.wd-${classRoot}__text-before`,
+            description: '设置组件前缀文字样式',
+        },
+        {
+            name: '后缀文字',
+            selector: `.wd-${classRoot}__text-after`,
+            description: '设置组件后缀文字样式',
+        },
+        {
+            name: '前缀图标',
+            selector: `.wd-${classRoot}__icon-before`,
+            description: '设置组件前缀图标样式',
+        },
+        {
+            name: '后缀图标',
+            selector: `.wd-${classRoot}__icon-after`,
+            description: '设置组件后缀图标样式',
+        },
+        {
+            name: '提示文字',
+            selector: `.wd-${classRoot}__help`,
+            description: '设置组件提示文字样式',
+        },
+        {
+            name: '校验信息',
+            selector: `.wd-${classRoot}__error`,
+            description: '设置组件校验信息样式',
+        },
+        {
+            name: '组件本身',
+            selector: `.wd-${classRoot}-${classRoot}`,
+            description: '组件本身元素',
+        },
+        {
+            name: '组件输入禁用状态',
+            selector: `.wd-${classRoot}-${classRoot}.is-disabled`,
+            description: '组件本身元素',
+        },
+    ];
+};
+// 表单配置集合
+export const FORM_ITEM_META = {
+    group: {
+        通用: {
+            'x-index': -1,
+            expand: true,
+        },
+    },
+    shortcut: {
+        props: ['name', 'label'],
+        formauto: true,
+    },
+    visible: ['APP'],
+    category: '表单',
+};
+export const ItemData = Type.Partial(Type.Object(FORM_ITEM_DATA));

package/dist/docs/common/components/json-schema-view.js

@@ -8,7 +8,7 @@ export default function JsonSchemaView({ schema, }) {
     }
     if (properties) {
         return (_jsx("ul", { children: Object.entries(properties).map(([name, config]) => {
-                return (_jsxs("li", { children: [_jsx("b", { children: name }), ":", _jsx("code", { children: config.type }), config.description] }, name));
+                return (_jsxs("li", { children: [_jsx("b", { children: name }), ":", _jsx("code", { children: config.type }), (config === null || config === void 0 ? void 0 : config.description) || (config === null || config === void 0 ? void 0 : config.title)] }, name));
             }) }));
     }
 }