@cloudbase/weda-ui 3.5.3 → 3.6.0

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

@@ -1,5 +1,7 @@
 import { defineConfig, Type, Tuple, } from '../type-utils';
-import { FORM_ITEM_DATA, FORM_ITEM_DATA_TITLE, FORM_ITEM_EVENTS, FORM_ITEM_METHODS, FORM_ITEM_META, getFormItemClasses, ItemData, } from '../type-utils/type-form';
+import { FORM_ITEM_DATA, FORM_ITEM_DATA_TITLE, FORM_ITEM_EVENTS, FORM_ITEM_METHODS, FORM_ITEM_META, ItemData, } from '../type-utils/type-form';
+import { getClasses } from '../type-utils/classes';
+import { templateInitNameWithId } from './common/init-name-with-id';
 // 属性类型定义，同时提供给 url/phone/email 三个组件使用
 const WD_INPUT_DATA = {
     // 通用
@@ -7,7 +9,6 @@ const WD_INPUT_DATA = {
     inputValue: FORM_ITEM_DATA.inputValue,
     placeholder: FORM_ITEM_DATA.placeholder,
     size: FORM_ITEM_DATA.size,
-    block: FORM_ITEM_DATA.block,
     // 标题
     ...FORM_ITEM_DATA_TITLE,
     // 输入框
@@ -24,11 +25,19 @@ const WD_INPUT_DATA = {
     extra: FORM_ITEM_DATA.extra,
     password: FORM_ITEM_DATA.password,
     type: FORM_ITEM_DATA.type,
+    isConvert: Type.Boolean({
+        title: '按输入键盘类型转换输入值',
+        description: '控制是否按输入键盘类型对输入值进行自动转换',
+        'x-index': 191,
+        'x-category': '输入框',
+        'x-runtime-default': true,
+    }),
     counterVisible: FORM_ITEM_DATA.counterVisible,
     focus: FORM_ITEM_DATA.focus,
     borderedH5: FORM_ITEM_DATA.borderedH5,
     borderedPc: FORM_ITEM_DATA.borderedPc,
     // 小程序开放能力
+    cursorSpacing: FORM_ITEM_DATA.cursorSpacing,
     isNickNameType: FORM_ITEM_DATA.isNickNameType,
     // 状态校验
     maxLength: FORM_ITEM_DATA.maxLength,
@@ -37,7 +46,42 @@ const WD_INPUT_DATA = {
     required: FORM_ITEM_DATA.required,
     requiredFlag: FORM_ITEM_DATA.requiredFlag,
     requiredMsg: FORM_ITEM_DATA.requiredMsg,
+    template: FORM_ITEM_DATA.template,
 };
+const containerBodyTemplate = `
+{{#with $self as |$self|}}
+
+{{#if (helper_utils '===' $self.attributes.template 'greySearchBox')}}
+[attributes]
+  placeholder = "搜索"
+  prefixIcon = "search"
+  prefixType = "inner"
+  clearable = true
+  labelVisible = false
+  borderedPc = true
+  borderedH5 = false
+
+{{else if (helper_utils '===' $self.attributes.template 'whiteSearchBox')}}
+[attributes]
+  placeholder = "搜索"
+  prefixIcon = "search"
+  prefixType = "inner"
+  clearable = true
+  labelVisible = false
+  borderedPc = true
+  borderedH5 = false
+
+{{else if (helper_utils '===' $self.attributes.template 'inputBox')}}
+[attributes]
+  placeholder = "请输入"
+  prefixType = ""
+  labelVisible = true
+  borderedPc = true
+  borderedH5 = true
+
+{{/if}}
+{{/with}}
+`;
 const data = Type.Partial(Type.Object(WD_INPUT_DATA));
 const events = Tuple([
     FORM_ITEM_EVENTS.change,
@@ -57,7 +101,24 @@ const properties = Type.Pick(ItemData, [
     'readOnly',
     'value',
 ]);
-const classes = getFormItemClasses('input');
+const CLASSES = getClasses('input');
+const classes = [
+    CLASSES.root,
+    CLASSES.root_h5,
+    CLASSES.root_pc,
+    CLASSES.root_mp,
+    CLASSES.item_label,
+    CLASSES.item_control,
+    CLASSES.input_edit,
+    CLASSES.input_focus,
+    CLASSES.input_placeholder,
+    CLASSES.item_error,
+    CLASSES.item_help,
+    CLASSES.input_disabled,
+    CLASSES.item_readonly,
+    CLASSES.input_addon_left,
+    CLASSES.input_addon_right,
+];
 // 组件配置
 const config = defineConfig({
     $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
@@ -76,7 +137,8 @@ const config = defineConfig({
     events,
     meta: {
         description: '用于单行内容的输入。',
-        icon: '../../icons/Input.svg',
+        figureIcon: '../figureIcons/WdInput.svg',
+        icon: '../icons/Input.svg',
         title: '单行输入',
         name: 'WdInput',
         componentName: 'Input',
@@ -87,6 +149,16 @@ const config = defineConfig({
         shortcut: FORM_ITEM_META.shortcut,
         group: FORM_ITEM_META.group,
         visible: FORM_ITEM_META.visible,
+        inlineStyleForm: FORM_ITEM_META.inlineStyleForm,
+        keyWords: ['search', '搜索', 'SEARCH', 'input', 'INPUT'],
+        templates: [
+            {
+                when: 'template',
+                to: '$children',
+                body: containerBodyTemplate,
+            },
+            templateInitNameWithId,
+        ],
     },
     compConfig: {
         componentType: 'formField',

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

@@ -1,10 +1,10 @@
-/// <reference types="react" />
 import { Static } from '../type-utils';
 import type { Simplify } from 'type-fest';
 declare const data: import("@sinclair/typebox").TObject<{
     headerLeftSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<import("react").ReactNode>>;
     headerRightSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<import("react").ReactNode>>;
     contentSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<import("react").ReactNode>>;
+    template: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
 }>;
 export type DataType = Simplify<Static<typeof data>>;
 declare const config: {
@@ -13,6 +13,7 @@ declare const config: {
         headerLeftSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<import("react").ReactNode>>;
         headerRightSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<import("react").ReactNode>>;
         contentSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<import("react").ReactNode>>;
+        template: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
     }>;
     readonly properties: import("@sinclair/typebox").TObject<{}>;
     readonly classes: readonly [{
@@ -27,6 +28,10 @@ declare const config: {
         readonly name: "H5 端布局组件根元素";
         readonly selector: ".wd-h5-layout-root";
         readonly description: "可以为 H5 端的布局组件编写样式";
+    }, {
+        readonly name: "小程序端布局组件根元素";
+        readonly selector: ".wd-mp-layout-root";
+        readonly description: "可以为小程序端的布局组件编写样式";
     }, {
         readonly name: "布局顶部元素";
         readonly selector: ".wd-layout__header";
@@ -43,21 +48,25 @@ declare const config: {
         readonly title: "布局组件";
         readonly componentName: "Layout";
         readonly description: "用于构建带有顶部导航的页面布局";
-        readonly icon: "../../icons/LayoutContainer.svg";
+        readonly figureIcon: "../figureIcons/WdLayout.svg";
+        readonly icon: "../icons/LayoutContainer.svg";
         readonly category: "布局";
         readonly categoryOrder: 200;
         readonly componentOrder: 101;
-        readonly platform: readonly ["MOBILEWEB", "PCWEB"];
         readonly visible: readonly ["APP"];
         readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/WdLayout";
         readonly templates: readonly [{
             readonly to: "headerLeftSlot";
             readonly when: "$attached";
-            readonly body: "\n        [[template]]\n          component = \"WdIcon\"\n        [template.attributes]\n          type = \"inner\"\n          name = \"chevronleft\"\n          size = \"sm\"\n        [[template.listeners]]\n          eventName = \"tap\"\n          type = \"platform\"\n        [template.listeners.handler]\n          name = \"navigateBack\"\n          module = \"platform\"\n\n        [[template]]\n          component = \"WdText\"\n        [template.attributes]\n          text = \"页面标题\"\n        [template.extra.commonStyle.self]\n          fontSize = \"20px\"\n          fontWeight = \"600\"\n\n        [[template]]\n          component = \"WdText\"\n        [template.attributes]\n          text = \"页面描述\"\n          level= \"body-default\"\n        [template.extra.commonStyle.self]\n          fontSize = \"14px\"\n          marginLeft = \"5px\"\n        ";
+            readonly body: "\n        [[template]]\n          component = \"WdIcon\"\n        [template.attributes]\n          type = \"inner\"\n          name = \"chevronleft\"\n          size = \"sm\"\n          sizeSelfAdaptive=true\n        [template.extra.commonStyle.margin]\n          right = 8\n        [template.extra.commonStyle.self]\n          marginRight = 8\n        [[template.listeners]]\n          eventName = \"tap\"\n          type = \"platform\"\n        [template.listeners.handler]\n          name = \"navigateBack\"\n          module = \"platform\"\n        [[template]]\n          component = \"WdText\"\n        [template.attributes]\n          text = \"布局标题\"\n          level = \"title-7\"\n        ";
         }, {
             readonly to: "headerRightSlot";
             readonly when: "$attached";
-            readonly body: "\n        [[template]]\n          component = \"WdLink\"\n        [template.attributes]\n          content = \"帮助文档\"\n        [template.extra.commonStyle.self]\n          fontSize = \"14px\"\n        ";
+            readonly body: "\n        [[template]]\n          component = \"WdText\"\n        [template.attributes]\n          level = \"body-sm\"\n          text = \"\"\n        [template.extra.commonStyle.text]\n          color = \"var(--wd-color-text-link)\"\n        ";
+        }, {
+            readonly to: "contentSlot";
+            readonly when: "template";
+            readonly body: "\n        {{#if (helper_utils '===' $self.attributes.template 'gray')}}\n        [[template]]\n          component = \"WdCard\"\n        [template.attributes]\n          showHeader = false\n        [[template.items]]\n          id=\"headerSlot\"\n          component=\"\"\n        [[template.items.items]]\n          component=\"WdText\"\n          label=\"标题\"\n        [template.items.items.attributes]\n          text=\"标题\"\n          level = \"title-8\"\n        [[template.items]]\n          id=\"contentSlot\"\n          component=\"\"\n        [[template.items]]\n          id=\"footerSlot\"\n          component=\"\"\n        {{/if}}\n        ";
         }];
         readonly group: {};
         readonly inlineStyleForm: {

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

@@ -1,9 +1,48 @@
-import { defineConfig, Type } from '../type-utils';
+import { defineConfig, Type, Tuple } from '../type-utils';
 // 属性类型定义
 const data = Type.Object({
     headerLeftSlot: Type.Optional(Type.Slot({ title: '头部左侧', 'x-index': 10, 'x-group': '基础属性' })),
     headerRightSlot: Type.Optional(Type.Slot({ title: '头部右侧', 'x-index': 20, 'x-group': '基础属性' })),
     contentSlot: Type.Optional(Type.Slot({ title: '布局内容', 'x-index': 30, 'x-group': '基础属性' })),
+    template: Type.Optional(Type.StringEnum({
+        title: '布局模板',
+        type: 'string',
+        default: 'white',
+        'x-runtime-default': 'white',
+        'x-component': 'data-sources-template-selector',
+        'x-component-props': {
+            options: Tuple([
+                {
+                    label: '白色',
+                    value: 'white',
+                    tooltip: '使用白底模板',
+                    src: 'https://qcloudimg.tencent-cloud.cn/raw/f8451421bf9079834b0c950018af2a2a.png',
+                },
+                {
+                    label: '灰色',
+                    value: 'gray',
+                    tooltip: '使用灰底模板',
+                    src: 'https://qcloudimg.tencent-cloud.cn/raw/ae9433633faa686510b12b5fd98684a8.png',
+                },
+            ]),
+        },
+        enum: [
+            {
+                label: '白色',
+                value: 'white',
+            },
+            {
+                label: '灰色',
+                value: 'gray',
+            },
+        ],
+        description: '布局组件的预设模板',
+        'x-props': {
+            'data-hidebind': true,
+        },
+        'x-group': '基础属性',
+        'x-index': 40,
+    })),
 });
 // 组件对外暴露的只读属性
 // 未来可通过 widget API 开放，应用可以获取到组件的实例属性
@@ -33,6 +72,11 @@ const config = defineConfig({
             selector: '.wd-h5-layout-root',
             description: '可以为 H5 端的布局组件编写样式',
         },
+        {
+            name: '小程序端布局组件根元素',
+            selector: '.wd-mp-layout-root',
+            description: '可以为小程序端的布局组件编写样式',
+        },
         {
             name: '布局顶部元素',
             selector: '.wd-layout__header',
@@ -54,11 +98,11 @@ const config = defineConfig({
         title: '布局组件',
         componentName: 'Layout',
         description: '用于构建带有顶部导航的页面布局',
-        icon: '../../icons/LayoutContainer.svg',
+        figureIcon: '../figureIcons/WdLayout.svg',
+        icon: '../icons/LayoutContainer.svg',
         category: '布局',
         categoryOrder: 200,
         componentOrder: 101,
-        platform: ['MOBILEWEB', 'PCWEB'],
         visible: ['APP'],
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/WdLayout',
         templates: [
@@ -72,41 +116,62 @@ const config = defineConfig({
           type = "inner"
           name = "chevronleft"
           size = "sm"
+          sizeSelfAdaptive=true
+        [template.extra.commonStyle.margin]
+          right = 8
+        [template.extra.commonStyle.self]
+          marginRight = 8
         [[template.listeners]]
           eventName = "tap"
           type = "platform"
         [template.listeners.handler]
           name = "navigateBack"
           module = "platform"
-
         [[template]]
           component = "WdText"
         [template.attributes]
-          text = "页面标题"
-        [template.extra.commonStyle.self]
-          fontSize = "20px"
-          fontWeight = "600"
-
+          text = "布局标题"
+          level = "title-7"
+        `,
+            },
+            {
+                to: 'headerRightSlot',
+                when: '$attached',
+                body: `
         [[template]]
           component = "WdText"
         [template.attributes]
-          text = "页面描述"
-          level= "body-default"
-        [template.extra.commonStyle.self]
-          fontSize = "14px"
-          marginLeft = "5px"
+          level = "body-sm"
+          text = ""
+        [template.extra.commonStyle.text]
+          color = "var(--wd-color-text-link)"
         `,
             },
             {
-                to: 'headerRightSlot',
-                when: '$attached',
+                to: 'contentSlot',
+                when: 'template',
                 body: `
+        {{#if (helper_utils '===' $self.attributes.template 'gray')}}
         [[template]]
-          component = "WdLink"
+          component = "WdCard"
         [template.attributes]
-          content = "帮助文档"
-        [template.extra.commonStyle.self]
-          fontSize = "14px"
+          showHeader = false
+        [[template.items]]
+          id="headerSlot"
+          component=""
+        [[template.items.items]]
+          component="WdText"
+          label="标题"
+        [template.items.items.attributes]
+          text="标题"
+          level = "title-8"
+        [[template.items]]
+          id="contentSlot"
+          component=""
+        [[template.items]]
+          id="footerSlot"
+          component=""
+        {{/if}}
         `,
             },
         ],

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { Static } from '../type-utils';
 import type { Simplify } from 'type-fest';
 declare const data: import("@sinclair/typebox").TObject<{
     content: import("@sinclair/typebox").TString;
+    packageName: import("@sinclair/typebox").TString;
     url: import("@sinclair/typebox").TString;
     isOpenInNewWindow: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
     params: import("@sinclair/typebox").TReadonly<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TObject<{
@@ -23,6 +23,7 @@ declare const config: {
     readonly $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
     readonly data: import("@sinclair/typebox").TObject<{
         content: import("@sinclair/typebox").TString;
+        packageName: import("@sinclair/typebox").TString;
         url: import("@sinclair/typebox").TString;
         isOpenInNewWindow: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
         params: import("@sinclair/typebox").TReadonly<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TObject<{
@@ -87,12 +88,13 @@ declare const config: {
         readonly componentName: "Link";
         readonly title: "链接";
         readonly description: "用于实现超链接点击后跳转。";
-        readonly icon: "../../icons/Link.svg";
+        readonly figureIcon: "../figureIcons/WdLink.svg";
+        readonly icon: "../icons/Link.svg";
         readonly category: "展示";
         readonly categoryOrder: 400;
         readonly componentOrder: 250;
         readonly platform: readonly ["MOBILEWEB", "PCWEB"];
-        readonly visible: readonly ["APP"];
+        readonly visible: readonly [];
         readonly templates: readonly [{
             readonly to: "contentSlot";
             readonly body: "\n[attributes]\nenableSlot = false\n";

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

@@ -14,22 +14,62 @@ const data = Type.Object({
         'x-category': '基础属性',
         'x-index': 10,
     }),
+    packageName: Type.String({
+        title: '子包名称',
+        default: '',
+        'x-runtime-default': '',
+        type: 'string',
+        description: '配置子包id',
+        'x-category': '基础属性',
+        'x-index': 11,
+        display: false,
+        'x-linkages': [
+            {
+                type: 'value:schema',
+                target: '*(url)',
+                schema: {
+                    'x-component-props': {
+                        packageName: '{{$self.value}}',
+                    },
+                },
+            },
+        ],
+    }),
     url: Type.String({
         title: '跳转页面',
         'x-runtime-default': '',
         type: 'string',
-        description: '通过下拉选择应用页面，可以实现内部页面跳转',
+        description: '可以配置页面id, 也可以通过下拉选择应用页面，可以实现内部页面跳转',
         'x-component': 'page-list',
         'x-category': '基础属性',
         'x-component-props': {
             hideAddPlatform: ['MP'],
         },
         'x-index': 20,
+        'x-linkages': [
+            {
+                type: 'value:state',
+                condition: "{{$self.value?.includes('/')}}",
+                state: {
+                    value: "{{$self.value.substring(0, $self.value.lastIndexOf('/'))}}",
+                },
+                target: '*(packageName)',
+            },
+            {
+                type: 'value:state',
+                condition: "{{$self.value?.includes('main/')}}",
+                state: {
+                    value: '',
+                },
+                target: '*(packageName)',
+            },
+        ],
     }),
     isOpenInNewWindow: Type.Optional(Type.Boolean({
         title: '是否打开新窗口',
         'x-runtime-default': false,
         type: 'boolean',
+        'x-helper-text': '仅外部链接生效',
         description: '仅外部链接生效',
         'x-category': '基础属性',
         'x-index': 30,
@@ -41,7 +81,7 @@ const data = Type.Object({
         title: '携带参数',
         'x-runtime-default': [],
         type: 'array',
-        description: '填写跳转页面时携带的参数，用于页面传参',
+        description: '填写跳转页面时携带的参数，用于页面传参，数组对象格式，[{key: params1, value: value1}, {key: params2, value: value2}]',
         'x-category': '基础属性',
         'x-index': 40,
     })),
@@ -210,12 +250,13 @@ const config = defineConfig({
         componentName: 'Link',
         title: '链接',
         description: '用于实现超链接点击后跳转。',
-        icon: '../../icons/Link.svg',
+        figureIcon: '../figureIcons/WdLink.svg',
+        icon: '../icons/Link.svg',
         category: '展示',
         categoryOrder: 400,
         componentOrder: 250,
         platform: ['MOBILEWEB', 'PCWEB'],
-        visible: ['APP'],
+        visible: [],
         templates: [
             {
                 to: 'contentSlot',