@cloudbase/weda-ui 3.4.16 → 3.5.1

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

@@ -1,5 +1,5 @@
 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';
+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, WD_DATE_MODE, WD_DATE_FORMAT, WD_TIME_MODE, } from '../../enum';
 const WD_ICON_OPTIONS = WD_ICON_ENUM.map((item) => ({
     label: item,
     value: item,
@@ -26,14 +26,27 @@ export const pick = (obj, fields) => {
     }
     return result;
 };
+/**
+ * 批量更改分类
+ */
+export const pickWithXCategory = (obj, fields, xCategory) => {
+    const result = {};
+    if (Array.isArray(fields)) {
+        fields.forEach((k) => {
+            obj[k] && (result[k] = { ...obj[k], 'x-category': xCategory });
+        });
+    }
+    return result;
+};
 // 属性分类
-const X_CATEGORY = {
+export const X_CATEGORY = {
     COMMON: '通用',
     TITLE: '标题',
     INPUT_BOX: '输入框',
     MP: '小程序能力',
     VERIFY: '状态/校验',
     PRIVATE: '不对外展示',
+    SELECT: '选择框',
 };
 // 表单组件属性集合
 export const FORM_ITEM_DATA = {
@@ -41,9 +54,8 @@ export const FORM_ITEM_DATA = {
     name: Type.String({
         title: '绑定字段',
         type: 'string',
-        default: 'formInput',
         required: true,
-        description: '表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。',
+        description: '表单字段的Key值，用于提交数据时，匹配数据模型字段标识。表单内需保证唯一。',
         'x-index': 10,
         'x-category': X_CATEGORY.COMMON,
         'x-rules': [
@@ -57,6 +69,64 @@ export const FORM_ITEM_DATA = {
             },
         ],
     }),
+    mode: Type.StringEnum({
+        title: '时间模式',
+        type: 'string',
+        default: 'datetime',
+        enum: Tuple(WD_DATE_MODE),
+        'x-index': 11,
+        'x-props': { 'data-hidebind': true },
+        'x-category': X_CATEGORY.COMMON,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: 'dateFormat',
+                condition: '{{$self.value === "month" || $self.value === "day" || $self.value === "datetime" || $self.value === "datetimeMinute" }}',
+            },
+            {
+                type: 'value:schema',
+                target: '*(value,start,end)',
+                schema: {
+                    format: '{{$value}}',
+                    'x-component': "{{$value === 'day' || $value === 'datetime' || $value === 'datetimeMinute' ? 'date' : $value}}",
+                    'x-component-props': {
+                        format: "{{ {'year': 'YYYY', 'month': 'YYYY-MM', 'day': 'YYYY-MM-DD', 'datetime': 'YYYY-MM-DD HH:mm:ss', 'datetimeMinute': 'YYYY-MM-DD HH:mm'}[$value] }}",
+                        showTime: "{{ $value === 'datetime' || $value === 'datetimeMinute'}}",
+                    },
+                },
+            },
+        ],
+    }),
+    _modeInTime: Type.StringEnum({
+        title: '时间模式',
+        type: 'string',
+        default: 'minute',
+        enum: Tuple(WD_TIME_MODE),
+        'x-index': 11,
+        'x-props': { 'data-hidebind': true },
+        'x-category': X_CATEGORY.COMMON,
+        'x-linkages': [
+            {
+                type: 'value:schema',
+                target: '*(value,start,end)',
+                schema: {
+                    'x-component': 'time',
+                    'x-component-props': {
+                        format: "{{ {'minute': 'HH:mm', 'second': 'HH:mm:ss'}[$value] }}",
+                    },
+                },
+            },
+        ],
+    }),
+    dateFormat: Type.StringEnum({
+        title: '时间展示形式',
+        type: 'string',
+        'x-runtime-default': 'YYYY-MM-DD HH:mm:ss',
+        enum: Tuple(WD_DATE_FORMAT),
+        'x-helper-text': '时间模式属性不包含某项时间信息时，运行态将不支持展示该信息，例如：时间模式为「年-月-日」时，不展示时分秒信息（HH:mm:ss）',
+        'x-index': 12,
+        'x-category': X_CATEGORY.COMMON,
+    }),
     value: Type.String({
         title: '输入值',
         type: 'string',
@@ -64,6 +134,51 @@ export const FORM_ITEM_DATA = {
         'x-category': X_CATEGORY.COMMON,
         'x-index': 20,
     }),
+    _valueInDate: Type.Any({
+        title: '选中时间',
+        format: 'date',
+        'x-category': X_CATEGORY.COMMON,
+        'x-index': 20,
+        'x-component': 'date',
+        'x-component-props': {
+            format: 'YYYY-MM-DD',
+            showTime: false,
+            placeholder: '请选择时间',
+        },
+    }),
+    _valueInTime: Type.Any({
+        title: '选中时间',
+        format: 'time',
+        'x-category': X_CATEGORY.COMMON,
+        'x-index': 20,
+        'x-runtime-default': '',
+        description: '默认选中的时间',
+        dataType: 'number',
+        'x-component': 'time',
+        'x-component-props': { format: 'HH:mm' },
+    }),
+    start: Type.Any({
+        title: '最早可选时间',
+        'x-index': 22,
+        'x-category': X_CATEGORY.COMMON,
+        'x-component': 'date',
+        'x-component-props': {
+            format: 'YYYY-MM-DD',
+            showTime: false,
+            placeholder: '请选择时间',
+        },
+    }),
+    end: Type.Any({
+        title: '最晚可选时间',
+        'x-index': 23,
+        'x-category': X_CATEGORY.COMMON,
+        'x-component': 'date',
+        'x-component-props': {
+            format: 'YYYY-MM-DD',
+            showTime: false,
+            placeholder: '请选择时间',
+        },
+    }),
     inputValue: Type.String({
         title: '输入值',
         type: 'string',
@@ -85,15 +200,15 @@ export const FORM_ITEM_DATA = {
         default: '',
         description: '尺寸配置仅对PC端生效，表单场景下默认会跟随表单容器的组件尺寸配置',
         'x-index': 40,
-        'x-platforms': ['PCWEB'],
+        'x-helper-text': '仅PC端生效',
         'x-category': X_CATEGORY.COMMON,
     }),
     block: Type.Boolean({
         title: '横向占满',
         type: 'boolean',
-        default: true,
+        default: false,
         'x-index': 41,
-        'x-platforms': ['PCWEB'],
+        'x-helper-text': '仅PC端生效',
         'x-category': X_CATEGORY.COMMON,
     }),
     /** 标题 */
@@ -156,8 +271,7 @@ export const FORM_ITEM_DATA = {
         title: '标题提示',
         type: 'string',
         description: '配置标题的工具提示内容',
-        'x-platforms': ['MOBILEWEB', 'PCWEB', 'WEB'],
-        'x-helper-text': '标题的提示语暂不支持小程序端',
+        'x-helper-text': 'PC/H5端生效',
         'x-index': 110,
         'x-category': X_CATEGORY.TITLE,
     }),
@@ -165,8 +279,8 @@ export const FORM_ITEM_DATA = {
     clearable: Type.Boolean({
         title: '显示清空按钮',
         type: 'boolean',
-        default: true,
         description: '开启后提供快捷清空按钮',
+        'x-runtime-default': false,
         'x-index': 120,
         'x-category': X_CATEGORY.INPUT_BOX,
     }),
@@ -184,6 +298,13 @@ export const FORM_ITEM_DATA = {
         'x-index': 140,
         'x-category': X_CATEGORY.INPUT_BOX,
     }),
+    isUnionValue: Type.Boolean({
+        title: '组件值包含前后缀文字',
+        description: '获取组件值时，该值是否包含前缀和后缀文字内容',
+        default: true,
+        'x-index': 141,
+        'x-category': X_CATEGORY.INPUT_BOX,
+    }),
     prefixType: Type.StringEnum({
         enum: Tuple(WD_INPUT_ICON_TYPE),
         title: '前缀图标类型',
@@ -332,7 +453,7 @@ export const FORM_ITEM_DATA = {
         title: '小程序端获取微信昵称',
         type: 'boolean',
         default: false,
-        'x-platforms': ['MP'],
+        description: '仅小程序端生效',
         'x-index': 240,
         'x-category': X_CATEGORY.MP,
     }),
@@ -360,12 +481,9 @@ export const FORM_ITEM_DATA = {
                     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] }}",
-                    },
+                    type: 'value:visible',
                     target: 'dataForm.pattern',
-                    condition: '{{$self.inputed}}',
+                    condition: "{{$self.value === ''}}",
                 },
             ],
         }),
@@ -455,6 +573,11 @@ export const FORM_ITEM_DATA = {
         description: '组件是否只读',
         'x-platforms': [],
     }),
+    selectedLabel: Type.String({
+        title: '选中项名称',
+        description: '选中项对应的文本名称(label)',
+        'x-platforms': [],
+    }),
 };
 // 各组件标题一致，统一导出，x-index 从 50-110
 export const FORM_ITEM_DATA_TITLE = pick(FORM_ITEM_DATA, [
@@ -467,11 +590,16 @@ export const FORM_ITEM_DATA_TITLE = pick(FORM_ITEM_DATA, [
     'labelTips',
 ]);
 // 表单组件事件集合
-const DEFAULT_DETAIL = { value: Type.String({ description: '输入值' }) };
+export const DEFAULT_DETAIL = Type.Object({
+    value: Type.String({ description: '输入值' }),
+});
+export const DEFAULT_DETAIL_NUMBER = Type.Object({
+    value: Type.Number({ description: '输入值' }),
+});
 export const FORM_ITEM_EVENTS = {
     change: {
         name: 'change',
-        title: '输入改变',
+        title: '值改变',
         detail: DEFAULT_DETAIL,
     },
     focus: {
@@ -486,13 +614,19 @@ export const FORM_ITEM_EVENTS = {
     },
     confirm: {
         name: 'confirm',
-        title: '回车',
+        title: '确认',
         detail: DEFAULT_DETAIL,
     },
     clear: {
         name: 'clear',
         title: '清除内容',
-        detail: { originValue: Type.String({ description: '输入被清除前的值' }) },
+        detail: Type.Object({
+            originValue: Type.String({ description: '输入被清除前的值' }),
+        }),
+    },
+    cancel: {
+        name: 'cancel',
+        title: '取消',
     },
 };
 // 表单方法集合
@@ -667,13 +801,40 @@ export const getFormItemClasses = (classRoot) => {
 export const FORM_ITEM_META = {
     group: {
         通用: {
-            'x-index': -1,
+            'x-index': 1,
             expand: true,
         },
+        标题: {
+            'x-index': 3,
+            expand: false,
+        },
+        输入框: {
+            'x-index': 5,
+            expand: false,
+        },
+        选择框: {
+            'x-index': 5,
+            expand: false,
+        },
+        选项: {
+            'x-index': 5,
+            expand: false,
+        },
+        开关按钮: {
+            'x-index': 5,
+            expand: false,
+        },
+        小程序能力: {
+            'x-index': 7,
+            expand: false,
+        },
+        '状态/校验': {
+            'x-index': 9,
+            expand: false,
+        },
     },
     shortcut: {
         props: ['name', 'label'],
-        formauto: true,
     },
     visible: ['APP'],
     category: '表单',

package/dist/enum/index.d.ts

@@ -0,0 +1,125 @@
+export const WD_TEXT_LEVEL: {
+    label: string;
+    value: string;
+}[];
+export const WD_TEXT_MAX_LINES: {
+    label: string;
+    value: string;
+}[];
+export const WD_ICON_ENUM: string[];
+export const WD_ICON_TYPE: {
+    label: string;
+    value: string;
+}[];
+export const WD_ICON_SIZE: {
+    label: string;
+    value: string;
+}[];
+export const WD_BUTTON_THEME: {
+    label: string;
+    value: string;
+}[];
+export const WD_BUTTON_VARIANT: {
+    label: string;
+    value: string;
+}[];
+export const WD_BUTTON_SIZE: {
+    label: string;
+    value: string;
+}[];
+export const WD_BUTTON_ICON_TYPE: {
+    label: string;
+    value: string;
+}[];
+export const WD_DIVIDER_TYPE: {
+    label: string;
+    value: string;
+}[];
+export const WD_BUTTON_ICON_POSITION: {
+    label: string;
+    value: string;
+}[];
+export const WD_BUTTON_TYPE: {
+    label: string;
+    value: string;
+}[];
+export const WD_LINK_ICON_TYPE: {
+    label: string;
+    value: string;
+}[];
+export const WD_LINK_ICON_POSITION: {
+    label: string;
+    value: string;
+}[];
+export const WD_FORM_DETAIL_VIEW_TYPE: {
+    label: string;
+    value: string;
+}[];
+export const WD_TABLE_PAGE_SIZE: {
+    label: string;
+    value: number;
+}[];
+export const WD_TABLE_SELECT_COLUMN: {
+    label: string;
+    value: string;
+}[];
+export const WD_INPUT_SIZE: {
+    label: string;
+    value: string;
+}[];
+export const WD_INPUT_LABEL_ALIGN: {
+    label: string;
+    value: string;
+}[];
+export const WD_INPUT_LAYOUT: {
+    label: string;
+    value: string;
+}[];
+export const WD_INPUT_TYPE: {
+    label: string;
+    value: string;
+}[];
+export const WD_INPUT_STATUS: {
+    label: string;
+    value: string;
+}[];
+export const WD_INPUT_RULES: {
+    label: string;
+    value: string;
+}[];
+export const WD_INPUT_VALIDATE_STATUS: {
+    label: string;
+    value: string;
+}[];
+export const WD_INPUT_ICON_TYPE: {
+    label: string;
+    value: string;
+}[];
+export const ROW_GUTTER_ENUM: {
+    label: string;
+    value: string;
+}[];
+export const GUTTER_ENUM: {
+    label: string;
+    value: string;
+}[];
+export const GUTTER_VALUE: {
+    gutterValue: string;
+    styleValue: number;
+}[];
+export const WD_DATE_MODE: {
+    label: string;
+    value: string;
+}[];
+export const WD_TIME_MODE: {
+    label: string;
+    value: string;
+}[];
+export const WD_DATE_FORMAT: {
+    label: string;
+    value: string;
+    year: string;
+    month: string;
+    day: string;
+    datetimeMinute: string;
+}[];

package/dist/enum/index.js

@@ -534,27 +534,27 @@ export const WD_FORM_DETAIL_VIEW_TYPE = [
 export const WD_TABLE_PAGE_SIZE = [
     {
         label: '10',
-        value: '10',
+        value: 10,
     },
     {
         label: '20',
-        value: '20',
+        value: 20,
     },
     {
         label: '30',
-        value: '30',
+        value: 30,
     },
     {
         label: '50',
-        value: '50',
+        value: 50,
     },
     {
         label: '100',
-        value: '100',
+        value: 100,
     },
     {
         label: '200',
-        value: '200',
+        value: 200,
     },
 ];
 // 表格选择列
@@ -768,3 +768,159 @@ export const WD_INPUT_ICON_TYPE = [
     },
     ...WD_ICON_TYPE,
 ];
+// 网格布局间距
+export const ROW_GUTTER_ENUM = [
+    { label: 'auto(默认继承网格布局)', value: 'auto' },
+    { label: '0px(无)', value: '0px' },
+    { label: '8px(超小)', value: '8px' },
+    {
+        label: '16px(超小)',
+        value: '16px',
+    },
+    {
+        label: '24px(小)',
+        value: '24px',
+    },
+    {
+        label: '32px(中)',
+        value: '32px',
+    },
+    {
+        label: '48px(大)',
+        value: '48px',
+    },
+    {
+        label: '60px(超大)',
+        value: '60px',
+    },
+    {
+        label: '80px(超大)',
+        value: '80px',
+    },
+    {
+        label: '100px(超大)',
+        value: '100px',
+    },
+    {
+        label: '128px(超大)',
+        value: '128px',
+    },
+];
+export const GUTTER_ENUM = [
+    { label: '0px(无)', value: '0px' },
+    { label: '8px(超小)', value: '8px' },
+    {
+        label: '16px(超小)',
+        value: '16px',
+    },
+    {
+        label: '24px(小)',
+        value: '24px',
+    },
+    {
+        label: '32px(中)',
+        value: '32px',
+    },
+    {
+        label: '48px(大)',
+        value: '48px',
+    },
+    {
+        label: '60px(超大)',
+        value: '60px',
+    },
+    {
+        label: '80px(超大)',
+        value: '80px',
+    },
+    {
+        label: '100px(超大)',
+        value: '100px',
+    },
+    {
+        label: '128px(超大)',
+        value: '128px',
+    },
+];
+export const GUTTER_VALUE = [
+    { gutterValue: 'auto', styleValue: -1 },
+    { gutterValue: '0px', styleValue: 0 },
+    { gutterValue: '8px', styleValue: 2 },
+    { gutterValue: '16px', styleValue: 3 },
+    { gutterValue: '24px', styleValue: 4 },
+    { gutterValue: '32px', styleValue: 5 },
+    { gutterValue: '48px', styleValue: 6 },
+    { gutterValue: '60px', styleValue: 7 },
+    { gutterValue: '80px', styleValue: 8 },
+    { gutterValue: '100px', styleValue: 9 },
+    { gutterValue: '128px', styleValue: 10 },
+];
+// 日期时间模式
+export const WD_DATE_MODE = [
+    {
+        label: '年',
+        value: 'year',
+    },
+    {
+        label: '年-月',
+        value: 'month',
+    },
+    {
+        label: '年-月-日',
+        value: 'day',
+    },
+    {
+        label: '年-月-日 时:分',
+        value: 'datetimeMinute',
+    },
+    {
+        label: '年-月-日 时:分:秒',
+        value: 'datetime',
+    },
+];
+// 时间模式
+export const WD_TIME_MODE = [
+    {
+        label: '时分',
+        value: 'minute',
+    },
+    {
+        label: '时分秒',
+        value: 'second',
+    },
+];
+// 日期展示形式
+export const WD_DATE_FORMAT = [
+    {
+        label: 'YYYY-MM-DD HH:mm:ss',
+        value: 'YYYY-MM-DD HH:mm:ss',
+        year: 'YYYY',
+        month: 'YYYY-MM',
+        day: 'YYYY-MM-DD',
+        datetimeMinute: 'YYYY-MM-DD HH:mm',
+    },
+    {
+        label: 'YYYY/MM/DD HH:mm:ss',
+        value: 'YYYY/MM/DD HH:mm:ss',
+        year: 'YYYY',
+        month: 'YYYY/MM',
+        day: 'YYYY/MM/DD',
+        datetimeMinute: 'YYYY/MM/DD HH:mm',
+    },
+    {
+        label: 'YYYY年MM月DD日 HH:mm:ss',
+        value: 'YYYY年MM月DD日 HH:mm:ss',
+        year: 'YYYY年',
+        month: 'YYYY年MM月',
+        day: 'YYYY年MM月DD日',
+        datetimeMinute: 'YYYY年MM月DD日 HH:mm',
+    },
+    {
+        label: 'MMM d, YYYY HH:mm:ss',
+        value: 'MMM d, YYYY HH:mm:ss',
+        year: 'YYYY',
+        month: 'MMM, YYYY',
+        day: 'MMM d, YYYY',
+        datetimeMinute: 'MMM d, YYYY HH:mm',
+    },
+];

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./web/index";
+export { default } from "./web/index";
+export { useFormInputTrait } from "./web/components/form-input-hooks/index";

package/dist/index.js

@@ -1,3 +1,4 @@
 /* eslint-disable import/export, rulesdir/no-export-all */
 export * from './web/index';
 export { default as default } from './web/index';
+export { useFormInputTrait } from './web/components/form-input-hooks/index';

package/dist/setupTests.d.ts

@@ -0,0 +1,2 @@
+import 'regenerator-runtime';
+import '@testing-library/jest-dom';