@cloudbase/weda-ui 3.5.0 → 3.5.1

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

@@ -1,10 +1,105 @@
 import { defineConfig, Tuple, Type, } from '../type-utils';
-const events = [
+import { genericErrorType } from '../type-utils/error';
+const events = Tuple([
     {
         title: '提交',
         name: 'submit',
     },
-];
+    {
+        title: '校验成功',
+        name: 'validateSuccess',
+        detail: Type.Object({
+            errors: Type.Record(Type.String(), Type.String(), {
+                title: '校验错误',
+            }),
+        }),
+    },
+    {
+        title: '校验失败',
+        name: 'validateFail',
+        detail: Type.Object({
+            errors: Type.Record(Type.String(), Type.String(), {
+                title: '校验错误',
+            }),
+        }),
+    },
+    {
+        title: '查询为空',
+        name: 'queryEmpty',
+        detail: Type.Object({
+            data: Type.Record(Type.String(), Type.Any(), {
+                description: '查询结果',
+            }),
+        }),
+    },
+    {
+        title: '查询成功',
+        name: 'querySuccess',
+        detail: Type.Object({
+            data: Type.Record(Type.String(), Type.Any(), {
+                description: '查询结果',
+            }),
+        }),
+    },
+    {
+        title: '查询失败',
+        name: 'queryFail',
+        detail: Type.Object({
+            error: genericErrorType,
+        }),
+    },
+]);
+const formTitleTemplate = `
+[[template]]
+component = "Container"
+
+[template.attributes]
+class = "wd-form-item wd-form-title"
+
+[[template.items]]
+component = "WdText"
+
+[template.items.attributes]
+level = "title-6"
+"text" = "表单标题"
+"class" = "wd-form-title__text"
+
+`;
+/**
+const formTemplateWithoutFields = `
+{{#with $self as |$self|}}
+{{#with (helper_utils '?:' (helper_utils 'isEqual' $self.attributes.dataSourceType 'data-model') $self.attributes.datasource.name $self.attributes.bindConnectMetadata.datasource.name) as |_datasourceName| }}
+  #with (
+    helper_utils '?:'
+    (helper_utils 'isEqual' $self.attributes.dataSourceType 'data-model')
+    {{#switch $self.attributes.formType}}
+      {{#case "create"}}
+        "wedaCreate"
+      {{/case}}
+      {{#case "create"}}
+        "wedaCreate"
+      {{/case}}
+    {{/switch}}
+    ($self.attributes.connectorMethod.name)
+    )
+  as |_methodName|
+}}
+[[template]]
+component = "Container"
+
+[template.attributes]
+class = "wd-form-item wd-form-title"
+
+[[template.items]]
+component = "WdText"
+
+[template.items.attributes]
+level = "title-6"
+"text" = "表单标题"
+"class" = "wd-form-title__text"
+`;
+
+ */
 // const WD_FORM_LABEL_DIRECTION = [
 //   {
 //     label: '水平左对齐',
@@ -62,19 +157,19 @@ const data = Type.Object({
             },
             {
                 type: 'value:visible',
-                target: '*(methodGetItem,paramGetItem,methodUpdate)',
-                condition: "{{ ('edit' === $form.values.formType || $self.value) && ['connector', 'custom-connector'].includes($form.values.datasourceType) }}",
+                target: '*(methodGetItem,paramGetItem)',
+                condition: "{{ (['edit', 'read'].includes($form.values.formType) || $self.value) && ['connector', 'custom-connector'].includes($form.values.datasourceType) }}",
             },
             {
                 type: 'value:visible',
-                target: '*(methodGetItem,paramGetItem)',
-                condition: "{{ ['connector', 'custom-connector'].includes($form.values.datasourceType) && 'read' === $form.values.formType }}",
+                target: 'methodUpdate',
+                condition: "{{ ('edit' === $form.values.formType || $self.value) && ['connector', 'custom-connector'].includes($form.values.datasourceType) }}",
             },
         ],
     }),
     datasourceType: Type.StringEnum({
         title: '数据源',
-        default: 'model',
+        'x-runtime-default': 'model',
         'x-index': 20,
         'x-props': {
             'data-hidebind': true,
@@ -94,7 +189,12 @@ const data = Type.Object({
             },
             {
                 type: 'value:visible',
-                target: '*(methodGetItem,paramGetItem,methodUpdate)',
+                target: '*(methodGetItem,paramGetItem)',
+                condition: "{{ (['edit', 'read'].includes($form.values.formType) || $form.values.formType_bind) && ['connector', 'custom-connector'].includes($self.value) }}",
+            },
+            {
+                type: 'value:visible',
+                target: 'methodUpdate',
                 condition: "{{ ('edit' === $form.values.formType || $form.values.formType_bind) && ['connector', 'custom-connector'].includes($self.value) }}",
             },
             {
@@ -111,7 +211,7 @@ const data = Type.Object({
                         datasourceType: '{{$self.value}}',
                     },
                 },
-                target: '*(dataSourceName,formType,fields,methodCreate,methodUpdate)',
+                target: '*(dataSourceName,formType,fields,methodCreate,methodUpdate,methodGetItem)',
             },
         ],
         'x-component': 'DatasourceTypeSelectorComp',
@@ -155,7 +255,7 @@ const data = Type.Object({
     }),
     formType: Type.StringEnum({
         title: '表单场景',
-        default: 'create',
+        'x-runtime-default': 'create',
         'x-index': 10,
         'x-props': {
             itemClassName: 'form-selector',
@@ -174,7 +274,12 @@ const data = Type.Object({
             },
             {
                 type: 'value:visible',
-                target: '*(methodGetItem,paramGetItem,methodUpdate)',
+                target: '*(methodGetItem,paramGetItem)',
+                condition: "{{ ['edit', 'read'].includes($self.value) && ['connector', 'custom-connector'].includes($form.values.datasourceType) }}",
+            },
+            {
+                type: 'value:visible',
+                target: 'methodUpdate',
                 condition: "{{ 'edit' === $self.value && ['connector', 'custom-connector'].includes($form.values.datasourceType) }}",
             },
             {
@@ -184,7 +289,7 @@ const data = Type.Object({
                         formType: '{{$self.value}}',
                     },
                 },
-                target: '*(dataSourceName,fields,methodCreate,methodUpdate,datasourceType)',
+                target: '*(dataSourceName,fields,methodCreate,methodUpdate,methodGetItem,datasourceType,paramGetItem)',
             },
         ],
         'x-component': 'FormTypeSelectorComp',
@@ -252,8 +357,8 @@ const data = Type.Object({
     layout: Type.StringEnum({
         type: 'string',
         title: '布局方式',
-        default: 'horizontal',
-        remarks: '设置当前容器内表单类组件的标题和输入选择区域为左右布局或上下布局',
+        'x-runtime-default': 'horizontal',
+        description: '设置当前容器内表单类组件的标题和输入选择区域为左右布局或上下布局',
         'x-index': 60,
         'x-category': '基础属性',
         enum: Tuple([
@@ -327,8 +432,16 @@ const data = Type.Object({
     paramGetItem: Type.Record(Type.String(), Type.Unknown(), {
         title: '查询入参',
         default: {},
-        remarks: '直接输入对象字面量, 如 {status: 1}',
+        description: '直接输入对象字面量, 如 {status: 1}',
         'x-index': 52,
+        'x-component': 'property-object-params-field',
+        'x-component-props': {
+            dataSourceKeyName: 'dataSourceName',
+            dataSourceValuePath: 'datasource.name',
+            methodNameKeyName: 'methodGetItem',
+            methodValuePath: 'name',
+            paramsKeyName: 'connectorParams',
+        },
     }),
     methodGetItem: Type.String({
         type: 'string',
@@ -343,12 +456,22 @@ const data = Type.Object({
         'x-component-props': {
             intent: 'get-item',
         },
+        'x-linkages': [
+            {
+                type: 'value:schema',
+                schema: {
+                    'x-component-props': {
+                        methodGetItem: '{{$self.value}}',
+                    },
+                },
+                target: 'fields',
+            },
+        ],
     }),
     initialValues: Type.Record(Type.String(), Type.Unknown(), {
         title: '表单初始值',
         default: {},
         display: false,
-        remarks: '该表单中各字段的初始默认值',
         'x-index': 80,
         'x-category': '高级属性',
         description: '可以用于设置表单的初始值, 表单重置时该值会被清空. 请采用绑定方式为其赋值, 在低码IDE中仅初次渲染能查看到效果, 后续配置变动无效果.',
@@ -358,10 +481,10 @@ const data = Type.Object({
 const properties = Type.Intersect([
     Type.Pick(data, ['formType', 'dataSourceName', 'layout']),
     Type.Object({
-        errors: Type.Record(Type.String(), Type.Object({
-            format: Type.String(),
+        errors: Type.Record(Type.String(), Type.Array(Type.Object({
+            format: Type.Optional(Type.String()),
             message: Type.String(),
-        }), {
+        })), {
             title: '错误信息',
             description: '提交的校验错误信息对象',
         }),
@@ -377,8 +500,14 @@ const properties = Type.Intersect([
             title: '数据源类型信息',
             description: '数据源信息',
         }),
-        // TODO:
-        // clearValidate: Type.Function([], Type.Void()),
+        submitParams: Type.Record(Type.String(), Type.Any(), {
+            title: '数据源方法提交入参',
+            description: '数据源方法提交入参',
+        }),
+        clearValidate: Type.Function([], Type.Void(), {
+            title: '清除校验',
+            description: '清除校验',
+        }),
     }),
 ]);
 //           ^?
@@ -397,28 +526,44 @@ export default defineConfig({
         {
             name: '根元素',
             selector: '.wd-form',
-            description: '分割线组件根元素',
+            description: '表单组件根元素',
         },
         {
-            name: 'PC 端分割线根元素',
+            name: 'PC 端表单根元素',
             selector: '.wd-pc-form',
-            description: '可以为 PC 端的分割线编写样式',
+            description: '可以为 PC 端的表单编写样式',
         },
         {
-            name: 'H5 端分割线根元素',
+            name: 'H5 端表单根元素',
             selector: '.wd-h5-form',
-            description: '可以为 H5 端的分割线编写样式',
+            description: '可以为 H5 端的表单编写样式',
         },
         {
-            name: '小程序端分割线根元素',
+            name: '小程序端表单根元素',
             selector: '.wd-mp-form',
-            description: '可以为小程序端的分割线编写样式',
+            description: '可以为小程序端的表单编写样式',
         },
     ],
     methods: [
         {
             name: 'submit',
             label: '提交',
+            description: '通过 $w.<id>.submit() 触发表单提交',
+        },
+        {
+            name: 'clearValue',
+            label: '置空',
+            description: '通过 $w.<id>.clearValue() 将表单置空',
+        },
+        {
+            name: 'clearValidate',
+            label: '清空校验',
+            description: '通过 $w.<id>.clearValidate() 清空校验',
+        },
+        {
+            name: 'validate',
+            label: '校验',
+            description: '通过 $w.<id>.validate() 触发表单提交',
         },
     ],
     events,
@@ -446,5 +591,18 @@ export default defineConfig({
                 'methodUpdate',
             ],
         },
+        templates: [
+            {
+                /** 暂不打开，只在编辑器选数据源的地方生成 */
+                when: ',',
+                body: formTitleTemplate,
+                to: 'contentSlot',
+            },
+            // {
+            //   when: 'formType, formTypeBind,dataSourceName,datasourceType,methodCreate,methodUpdate',
+            //   to: 'contentSlot',
+            //   body: formTemplateWithoutFields,
+            // },
+        ],
     },
 });

package/dist/configs/components/wd-icon.d.ts

@@ -0,0 +1,71 @@
+import { Static } from '../type-utils';
+import type { Simplify } from 'type-fest';
+declare const data: import("@sinclair/typebox").TObject<{
+    type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+    name: import("@sinclair/typebox").TUnsafe<string>;
+    src: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">>;
+    size: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+    color: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">>;
+}>;
+export type DataType = Simplify<Static<typeof data>>;
+declare const config: {
+    readonly $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
+    readonly data: import("@sinclair/typebox").TObject<{
+        type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+        name: import("@sinclair/typebox").TUnsafe<string>;
+        src: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">>;
+        size: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+        color: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">>;
+    }>;
+    readonly properties: import("@sinclair/typebox").TPick<import("@sinclair/typebox").TObject<{
+        type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+        name: import("@sinclair/typebox").TUnsafe<string>;
+        src: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">>;
+        size: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+        color: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">>;
+    }>, ["type", "name", "src", "size"]>;
+    readonly classes: readonly [{
+        readonly name: "根元素";
+        readonly selector: ".wd-icon";
+        readonly description: "图标组件根元素";
+    }, {
+        readonly name: "PC 端图标根元素";
+        readonly selector: ".wd-pc-icon";
+        readonly description: "可以为 PC 端的图标编写样式";
+    }, {
+        readonly name: "H5 端图标根元素";
+        readonly selector: ".wd-h5-icon";
+        readonly description: "可以为 H5 端的图标编写样式";
+    }, {
+        readonly name: "小程序端图标根元素";
+        readonly selector: ".wd-mp-icon";
+        readonly description: "可以为小程序端的图标编写样式";
+    }];
+    readonly methods: readonly [];
+    readonly events: readonly [{
+        readonly title: "点击";
+        readonly name: "tap";
+    }];
+    readonly meta: {
+        readonly name: "WdIcon";
+        readonly componentName: "Icon";
+        readonly title: "图标";
+        readonly description: "选择预置图标实现图标的展示效果，也支持用户上传自定义图标。";
+        readonly icon: "../../icons/Icon.svg";
+        readonly category: "展示";
+        readonly categoryOrder: 400;
+        readonly componentOrder: 270;
+        readonly visible: readonly ["APP"];
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdIcon";
+        readonly shortcut: {
+            readonly props: readonly ["type", "name", "src", "size"];
+        };
+    };
+    readonly configMeta: {
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdIcon";
+        readonly shortcut: {
+            readonly props: readonly ["type", "name", "src", "size"];
+        };
+    };
+};
+export default config;

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

@@ -5,7 +5,7 @@ const data = Type.Object({
     type: Type.Optional(Type.StringEnum({
         enum: Tuple(WD_ICON_TYPE),
         title: '图标类型',
-        default: 'inner',
+        'x-runtime-default': 'inner',
         description: '选择图标的类型',
         'x-index': 10,
         'x-linkages': [
@@ -31,7 +31,7 @@ const data = Type.Object({
     }),
     src: Type.Optional(Type.String({
         title: '自定义图标',
-        default: '',
+        'x-runtime-default': '',
         'x-component': 'image',
         'x-index': 30,
         'x-rules': [
@@ -46,7 +46,7 @@ const data = Type.Object({
     size: Type.Optional(Type.StringEnum({
         title: '图标尺寸',
         type: 'string',
-        default: 'md',
+        'x-runtime-default': 'md',
         enum: Tuple(WD_ICON_SIZE),
         description: '设置图标的尺寸大小',
         'x-category': '基础属性',
@@ -55,7 +55,7 @@ const data = Type.Object({
     // 去掉图标颜色配置, 兼容旧组件, 属性隐藏, 暂不移除
     color: Type.Optional(Type.String({
         title: '颜色',
-        default: '',
+        'x-runtime-default': '',
         description: '设置图标的颜色，仅对预置图标生效',
         'x-index': 50,
         display: false,

package/dist/configs/components/wd-image-upload.d.ts

@@ -0,0 +1,56 @@
+import { Static } from '../type-utils';
+import type { Simplify } from 'type-fest';
+declare const data: import("@sinclair/typebox").TObject<{
+    after: import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">;
+}>;
+export type DataType = Simplify<Static<typeof data>>;
+declare const config: {
+    readonly $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
+    readonly data: import("@sinclair/typebox").TObject<{
+        after: import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">;
+    }>;
+    readonly properties: import("@sinclair/typebox").TPick<import("@sinclair/typebox").TObject<{
+        after: import("@sinclair/typebox").TString<"string" | "boolean" | "object" | "function" | "tel" | "x-long-text" | "phone" | "datetime" | "array" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">;
+    }>, ["after"]>;
+    readonly classes: readonly [];
+    readonly methods: readonly [];
+    readonly events: readonly [{
+        readonly title: "值改变";
+        readonly name: "change";
+        readonly detail: import("@sinclair/typebox").TObject<{
+            value: import("@sinclair/typebox").TUnion<import("@sinclair/typebox").TLiteral<"string" | "number" | "boolean" | "object" | "array">[]>;
+        }>;
+    }, {
+        readonly title: "上传成功";
+        readonly name: "success";
+        readonly detail: import("@sinclair/typebox").TObject<{
+            file: import("@sinclair/typebox").TUnion<import("@sinclair/typebox").TLiteral<"string" | "number" | "boolean" | "object" | "array">[]>;
+            value: import("@sinclair/typebox").TUnion<import("@sinclair/typebox").TLiteral<"string" | "number" | "boolean" | "object" | "array">[]>;
+        }>;
+    }, {
+        readonly title: "上传失败";
+        readonly name: "error";
+        readonly detail: import("@sinclair/typebox").TObject<{
+            record: import("@sinclair/typebox").TUnion<import("@sinclair/typebox").TLiteral<"string" | "number" | "boolean" | "object" | "array">[]>;
+            rowKey: import("@sinclair/typebox").TUnion<import("@sinclair/typebox").TLiteral<"string" | "number" | "boolean" | "object" | "array">[]>;
+            recordIndex: import("@sinclair/typebox").TUnion<import("@sinclair/typebox").TLiteral<"string" | "number" | "boolean" | "object" | "array">[]>;
+        }>;
+    }];
+    readonly meta: {
+        readonly name: "WdImageUpload";
+        readonly title: "图片上传";
+        readonly description: "用于上传图片、保存图片数据。";
+        readonly icon: "../../icons/Form.svg";
+        readonly category: "展示";
+        readonly categoryOrder: 500;
+        readonly componentOrder: 420;
+        readonly visible: readonly ["APP"];
+        readonly shortcut: {
+            readonly props: readonly ["name", "title"];
+        };
+    };
+    readonly configMeta: {
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormImageUploader";
+    };
+};
+export default config;

package/dist/configs/components/wd-image-upload.js

@@ -0,0 +1,92 @@
+import { defineConfig, Type } from '../type-utils';
+// 属性类型定义
+const data = Type.Object({
+    after: Type.String({
+        title: '文本内容',
+        'x-component': 'textarea',
+        default: '.com',
+        'x-category': '基础属性',
+        'x-index': 10,
+        description: '设置文本的内容',
+    }),
+});
+const properties = Type.Pick(data, ['after']);
+// export default
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    // 属性定义
+    data,
+    // 只读属性定义
+    properties,
+    // 样式API
+    classes: [],
+    // 组件方法
+    methods: [],
+    // 组件对外暴露事件
+    events: [
+        {
+            title: '值改变',
+            name: 'change',
+            detail: Type.Object({
+                value: Type.BasicTypeUnion({
+                    type: 'array|string',
+                    description: '当前值',
+                }),
+            }),
+            // description: '值改变时触发',
+        },
+        {
+            title: '上传成功',
+            name: 'success',
+            detail: Type.Object({
+                file: Type.BasicTypeUnion({
+                    type: 'file',
+                    description: '当前文件',
+                }),
+                value: Type.BasicTypeUnion({
+                    type: 'array|string',
+                    description: '当前值',
+                }),
+            }),
+            // description: '值改变时触发',
+        },
+        {
+            title: '上传失败',
+            name: 'error',
+            detail: Type.Object({
+                record: Type.BasicTypeUnion({
+                    type: 'array',
+                    description: '选中行记录',
+                }),
+                rowKey: Type.BasicTypeUnion({
+                    type: 'string',
+                    description: '选中行记录id',
+                }),
+                recordIndex: Type.BasicTypeUnion({
+                    type: 'number',
+                    description: '选中行index',
+                }),
+            }),
+            // description: '值改变时触发',
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdImageUpload',
+        title: '图片上传',
+        description: '用于上传图片、保存图片数据。',
+        icon: '../../icons/Form.svg',
+        category: '展示',
+        categoryOrder: 500,
+        componentOrder: 420,
+        visible: ['APP'],
+        // 快捷编辑时展示在编辑区的属性
+        shortcut: {
+            props: ['name', 'title'],
+        },
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormImageUploader',
+    },
+});
+export default config;