@cloudbase/weda-ui 3.4.16 → 3.5.1

package/dist/configs/components/grid/col.d.ts

@@ -0,0 +1,102 @@
+import { Simplify, Static, StaticEventsType } from '../../type-utils';
+declare const data: import("@sinclair/typebox").TObject<{
+    addRowCol: import("@sinclair/typebox").TNever;
+    widthType: import("@sinclair/typebox").TUnsafe<"fit-content" | "auto-fill">;
+    lgWidthType: import("@sinclair/typebox").TUnsafe<"fit-content" | "auto-fill">;
+    alignSelf: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+}>;
+import type { ConditionalExcept, Except } from 'type-fest';
+type StrOrNum<T extends number> = T | `${T}`;
+type Add12Col<T> = T | StrOrNum<1> | StrOrNum<2> | StrOrNum<3> | StrOrNum<4> | StrOrNum<5> | StrOrNum<6> | StrOrNum<7> | StrOrNum<8> | StrOrNum<9> | StrOrNum<10> | StrOrNum<11> | StrOrNum<12>;
+type EnumDataType = Simplify<Static<typeof data>>;
+export type DataType = Simplify<ConditionalExcept<Except<EnumDataType, 'widthType' | 'lgWidthType'> & {
+    widthType: Add12Col<EnumDataType['widthType']> | {
+        type: string;
+        value: string;
+    };
+    lgWidthType: Add12Col<EnumDataType['lgWidthType']> | {
+        type: string;
+        value: string;
+    };
+}, never>>;
+declare const events: readonly [{
+    readonly name: "tap";
+    readonly title: "点击";
+}];
+export type EventsType = Simplify<StaticEventsType<typeof events>>;
+declare const _default: {
+    readonly $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
+    readonly data: import("@sinclair/typebox").TObject<{
+        addRowCol: import("@sinclair/typebox").TNever;
+        widthType: import("@sinclair/typebox").TUnsafe<"fit-content" | "auto-fill">;
+        lgWidthType: import("@sinclair/typebox").TUnsafe<"fit-content" | "auto-fill">;
+        alignSelf: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+    }>;
+    readonly properties: import("@sinclair/typebox").TPick<import("@sinclair/typebox").TObject<{
+        addRowCol: import("@sinclair/typebox").TNever;
+        widthType: import("@sinclair/typebox").TUnsafe<"fit-content" | "auto-fill">;
+        lgWidthType: import("@sinclair/typebox").TUnsafe<"fit-content" | "auto-fill">;
+        alignSelf: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+    }>, ["widthType", "lgWidthType"]>;
+    readonly events: readonly [{
+        readonly name: "tap";
+        readonly title: "点击";
+    }];
+    readonly isContainer: true;
+    readonly compConfig: {
+        readonly componentType: "Col";
+    };
+    readonly classes: readonly [{
+        readonly name: "根元素";
+        readonly selector: ".wd-grid-col";
+        readonly description: "列组件根元素";
+    }, {
+        readonly name: "PC端根元素";
+        readonly selector: ".wd-pc-grid-col";
+        readonly description: "列组件PC端根元素";
+    }, {
+        readonly name: "H5端根元素";
+        readonly selector: ".wd-h5-grid-col";
+        readonly description: "列组件H5端根元素";
+    }, {
+        readonly name: "小程序端根元素";
+        readonly selector: ".wd-mp-grid-col";
+        readonly description: "列组件小程序端根元素";
+    }];
+    readonly meta: {
+        readonly title: "列";
+        readonly category: "布局容器";
+        readonly description: "网格布局组件的最小单元格，可分别设置移动和桌面端列宽";
+        readonly componentOrder: 1000;
+        readonly visible: readonly [];
+        readonly icon: "../../icons/Container.svg";
+        readonly positionConstraint: {
+            readonly allowParent: readonly [{
+                readonly componentType: "Row";
+                readonly recursive: false;
+                readonly tip: "行只能放在 Grid 或 Repeater 内";
+            }, {
+                readonly componentType: "Repeater";
+                readonly recursive: false;
+                readonly tip: "行只能放在 Grid 或 Repeater 内";
+            }];
+        };
+        readonly shortcut: {
+            readonly props: readonly ["widthType", "lgWidthType", "alignSelf"];
+        };
+    };
+    readonly configMeta: {
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/Grid";
+        readonly group: {
+            readonly 行和列: {
+                readonly 'x-index': 1;
+                readonly expand: true;
+            };
+            readonly 列宽: {
+                readonly 'x-index': 2;
+                readonly expand: true;
+            };
+        };
+    };
+};
+export default _default;

package/dist/configs/components/grid/col.js

@@ -10,7 +10,7 @@ const colWidthEnum = [
     },
 ];
 // 所有端列宽默认为 自动填充，您可在上方换端进行多端设置。 移动端设置后将对小程序和H5生效。
-const colWidthType = '列宽度';
+// const colWidthType = '列宽度' as const;
 const data = Type.Object({
     addRowCol: Type.Never({
         title: '添加行和列',
@@ -22,36 +22,40 @@ const data = Type.Object({
         'x-component-props': {
             enableInsertSide: true,
         },
+        'x-group': '行和列',
     }),
     widthType: Type.StringEnum({
-        title: colWidthType,
+        title: '移动端列宽',
         default: 'auto-fill',
         'x-index': 20,
         'x-valid-breakpoint': Type.BreakPoint({
-            breakpoint: 'xs',
+            breakpoint: null,
             description: '所有端列宽默认为 自动填充，您可在上方换端进行多端设置。 移动端设置后将对小程序和H5生效。',
         }),
-        'x-platforms': ['MOBILEWEB', 'MP'],
+        'x-platforms': ['MOBILEWEB', 'PCWEB', 'MP'],
         enum: Tuple(colWidthEnum),
         'x-component': 'grid-col-width',
         'x-component-props': {
             enableExactAdjust: true,
         },
+        'x-group': '列宽',
     }),
     lgWidthType: Type.StringEnum({
-        title: colWidthType,
+        title: 'PC端列宽',
         'x-component': 'grid-col-width',
-        default: 'auto-fill',
+        'x-runtime-default': 'auto-fill',
         'x-index': 30,
         'x-valid-breakpoint': Type.BreakPoint({
-            breakpoint: 'lg',
+            breakpoint: null,
             description: '所有端列宽默认为 自动填充，您可在上方换端进行多端设置。 移动端设置后将对小程序和H5生效。',
         }),
-        'x-platforms': ['PCWEB'],
+        'x-platforms': ['MOBILEWEB', 'PCWEB', 'MP'],
         enum: Tuple(colWidthEnum),
         'x-component-props': {
             enableExactAdjust: true,
         },
+        'x-helper-text': '配置多端的宽度，编辑区左上角切换端可预览效果。详见[多端样式适配指引](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/Grid#%E8%AE%BE%E7%BD%AE%E5%88%97%E5%AE%BD%E5%A4%9A%E7%AB%AF%E9%80%82%E9%85%8D)',
+        'x-group': '列宽',
     }),
     alignSelf: Type.Optional(Type.StringEnum({
         title: '垂直对齐方式',
@@ -62,6 +66,7 @@ const data = Type.Object({
         'x-component-props': {
             direction: 'crossAxis',
         },
+        'x-group': '列宽',
         enum: [
             {
                 label: 'flex-start',
@@ -84,14 +89,39 @@ const events = [
         title: '点击',
     },
 ];
+const properties = Type.Pick(data, ['widthType', 'lgWidthType']);
 export default defineConfig({
     $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
     data,
+    properties,
     events,
     isContainer: true,
     compConfig: {
         componentType: 'Col',
     },
+    // 样式API
+    classes: [
+        {
+            name: '根元素',
+            selector: '.wd-grid-col',
+            description: '列组件根元素',
+        },
+        {
+            name: 'PC端根元素',
+            selector: '.wd-pc-grid-col',
+            description: '列组件PC端根元素',
+        },
+        {
+            name: 'H5端根元素',
+            selector: '.wd-h5-grid-col',
+            description: '列组件H5端根元素',
+        },
+        {
+            name: '小程序端根元素',
+            selector: '.wd-mp-grid-col',
+            description: '列组件小程序端根元素',
+        },
+    ],
     meta: {
         title: '列',
         category: '布局容器',
@@ -113,22 +143,21 @@ export default defineConfig({
                 },
             ],
         },
-        editorLifecycle: {
-            destroy: {
-                action: 'deleteParent',
-                params: {
-                    conditions: {
-                        emptyChild: true,
-                        parentComponentType: 'Row',
-                    },
-                },
-            },
-        },
         shortcut: {
             props: ['widthType', 'lgWidthType', 'alignSelf'],
         },
     },
     configMeta: {
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/Grid',
+        group: {
+            行和列: {
+                'x-index': 1,
+                expand: true,
+            },
+            列宽: {
+                'x-index': 2,
+                expand: true,
+            },
+        },
     },
 });

package/dist/configs/components/grid/grid.d.ts

@@ -0,0 +1,92 @@
+import type { ConditionalExcept } from 'type-fest';
+import { Simplify, Static, StaticEventsType } from '../../type-utils';
+declare const data: import("@sinclair/typebox").TObject<{
+    addRow: import("@sinclair/typebox").TNever;
+    colCountOfNewRow: import("@sinclair/typebox").TNever;
+    gutterX: import("@sinclair/typebox").TUnsafe<string>;
+    gutterY: import("@sinclair/typebox").TUnsafe<string>;
+}>;
+export type DataType = Simplify<ConditionalExcept<Static<typeof data>, never>>;
+declare const events: readonly [{
+    readonly name: "tap";
+    readonly title: "点击";
+}];
+export type EventsType = Simplify<StaticEventsType<typeof events>>;
+declare const config: {
+    readonly $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
+    readonly data: import("@sinclair/typebox").TObject<{
+        addRow: import("@sinclair/typebox").TNever;
+        colCountOfNewRow: import("@sinclair/typebox").TNever;
+        gutterX: import("@sinclair/typebox").TUnsafe<string>;
+        gutterY: import("@sinclair/typebox").TUnsafe<string>;
+    }>;
+    readonly events: readonly [{
+        readonly name: "tap";
+        readonly title: "点击";
+    }];
+    readonly properties: import("@sinclair/typebox").TPick<import("@sinclair/typebox").TObject<{
+        addRow: import("@sinclair/typebox").TNever;
+        colCountOfNewRow: import("@sinclair/typebox").TNever;
+        gutterX: import("@sinclair/typebox").TUnsafe<string>;
+        gutterY: import("@sinclair/typebox").TUnsafe<string>;
+    }>, ["gutterX", "gutterY"]>;
+    readonly isContainer: true;
+    readonly compConfig: {
+        readonly componentType: "Grid";
+    };
+    readonly classes: readonly [{
+        readonly name: "根元素";
+        readonly selector: ".wd-grid";
+        readonly description: "网格布局组件根元素";
+    }, {
+        readonly name: "PC端根元素";
+        readonly selector: ".wd-pc-grid";
+        readonly description: "网格布局组件PC端根元素";
+    }, {
+        readonly name: "H5端根元素";
+        readonly selector: ".wd-h5-grid";
+        readonly description: "网格布局组件H5端根元素";
+    }, {
+        readonly name: "小程序端根元素";
+        readonly selector: ".wd-mp-grid";
+        readonly description: "网格布局组件小程序端根元素";
+    }];
+    readonly meta: {
+        readonly title: "网格布局";
+        readonly category: "布局";
+        readonly description: "将页面划分为多行、多列的网格，可分别设置移动端和桌面端列宽";
+        readonly componentOrder: 60;
+        readonly icon: "../../icons/Grid.svg";
+        readonly positionConstraint: {
+            readonly allowChildren: readonly [{
+                readonly componentType: "Row";
+            }, {
+                readonly componentType: "Repeater";
+            }];
+        };
+        readonly inlineStyleForm: {
+            readonly justifyContent: {
+                readonly visible: false;
+            };
+            readonly alignItems: {
+                readonly visible: false;
+            };
+            readonly flexDirection: {
+                readonly visible: false;
+            };
+        };
+        readonly visible: readonly ["APP", "COMPONENT"];
+        readonly templates: readonly [{
+            readonly to: "$children";
+            readonly autoSelectPath: "template[0]";
+            readonly body: "\n[[template]]\ncomponent = 'Row'\n\n{{#repeat 3}}\n[[template.items]]\ncomponent = 'Col'\n\n{{/repeat}}\n";
+        }];
+    };
+    readonly configMeta: {
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/Grid";
+        readonly shortcut: {
+            readonly props: readonly ["gutterX", "gutterY"];
+        };
+    };
+};
+export default config;

package/dist/configs/components/grid/grid.js

@@ -1,4 +1,5 @@
 import { defineConfig, Tuple, Type, } from '../../type-utils';
+import { GUTTER_ENUM } from '../../../enum';
 const gridTemplate = `
 [[template]]
 component = 'Row'
@@ -9,42 +10,6 @@ component = 'Col'
 
 {{/repeat}}
 `;
-const gutterEnum = [
-    { label: '0px（无）', value: 0 },
-    { label: '8px（超小）', value: 2 },
-    {
-        label: '16px（超小）',
-        value: 3,
-    },
-    {
-        label: '24px（小）',
-        value: 4,
-    },
-    {
-        label: '32px（中）',
-        value: 5,
-    },
-    {
-        label: '48px（大）',
-        value: 6,
-    },
-    {
-        label: '60px（超大）',
-        value: 7,
-    },
-    {
-        label: '80px（超大）',
-        value: 9,
-    },
-    {
-        label: '100px（超大）',
-        value: 9,
-    },
-    {
-        label: '128px（超大）',
-        value: 10,
-    },
-];
 const data = Type.Object({
     addRow: Type.Never({
         title: '添加行和列',
@@ -70,23 +35,23 @@ const data = Type.Object({
             })),
         },
         'x-index': 20,
-        default: 3,
+        'x-runtime-default': 3,
     }),
     // 8 16 24 对应 scss中的 gutters map
-    gutterX: Type.NumberEnum({
+    gutterX: Type.StringEnum({
         title: '列间距',
-        default: 2,
+        'x-runtime-default': '8px',
         'x-component': 'string',
-        enum: Tuple(gutterEnum),
+        enum: Tuple(GUTTER_ENUM),
         'x-index': 30,
         'x-helper-text': '默认对所有列生效，若某行单独配置了列间距，此属性将被覆盖。',
     }),
-    gutterY: Type.NumberEnum({
+    gutterY: Type.StringEnum({
         title: '行间距',
-        default: 2,
+        'x-runtime-default': '8px',
         'x-component': 'string',
         'x-index': 40,
-        enum: Tuple(gutterEnum),
+        enum: Tuple(GUTTER_ENUM),
     }),
 });
 const events = [
@@ -95,14 +60,39 @@ const events = [
         title: '点击',
     },
 ];
+const properties = Type.Pick(data, ['gutterX', 'gutterY']);
 const config = defineConfig({
     $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
     data,
     events,
+    properties,
     isContainer: true,
     compConfig: {
         componentType: 'Grid',
     },
+    // 样式API
+    classes: [
+        {
+            name: '根元素',
+            selector: '.wd-grid',
+            description: '网格布局组件根元素',
+        },
+        {
+            name: 'PC端根元素',
+            selector: '.wd-pc-grid',
+            description: '网格布局组件PC端根元素',
+        },
+        {
+            name: 'H5端根元素',
+            selector: '.wd-h5-grid',
+            description: '网格布局组件H5端根元素',
+        },
+        {
+            name: '小程序端根元素',
+            selector: '.wd-mp-grid',
+            description: '网格布局组件小程序端根元素',
+        },
+    ],
     meta: {
         title: '网格布局',
         category: '布局',

package/dist/configs/components/grid/row.d.ts

@@ -0,0 +1,97 @@
+import type { ConditionalExcept } from 'type-fest';
+import { Simplify, Static, StaticEventsType } from '../../type-utils';
+declare const data: import("@sinclair/typebox").TObject<{
+    addRowCol: import("@sinclair/typebox").TNever;
+    colCount: import("@sinclair/typebox").TNever;
+    gutterX: import("@sinclair/typebox").TUnsafe<string>;
+    alignItems: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"center" | "end" | "start">>;
+}>;
+export type DataType = Simplify<ConditionalExcept<Static<typeof data>, never>>;
+declare const events: readonly [{
+    readonly name: "tap";
+    readonly title: "点击";
+}];
+export type EventsType = Simplify<StaticEventsType<typeof events>>;
+declare const config: {
+    readonly $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
+    readonly data: import("@sinclair/typebox").TObject<{
+        addRowCol: import("@sinclair/typebox").TNever;
+        colCount: import("@sinclair/typebox").TNever;
+        gutterX: import("@sinclair/typebox").TUnsafe<string>;
+        alignItems: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"center" | "end" | "start">>;
+    }>;
+    readonly events: readonly [{
+        readonly name: "tap";
+        readonly title: "点击";
+    }];
+    readonly properties: import("@sinclair/typebox").TPick<import("@sinclair/typebox").TObject<{
+        addRowCol: import("@sinclair/typebox").TNever;
+        colCount: import("@sinclair/typebox").TNever;
+        gutterX: import("@sinclair/typebox").TUnsafe<string>;
+        alignItems: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"center" | "end" | "start">>;
+    }>, ["colCount", "gutterX", "alignItems"]>;
+    readonly isContainer: true;
+    readonly compConfig: {
+        readonly componentType: "Row";
+    };
+    readonly classes: readonly [{
+        readonly name: "根元素";
+        readonly selector: ".wd-grid-row";
+        readonly description: "行组件根元素";
+    }, {
+        readonly name: "PC端根元素";
+        readonly selector: ".wd-pc-grid-row";
+        readonly description: "行组件PC端根元素";
+    }, {
+        readonly name: "H5端根元素";
+        readonly selector: ".wd-h5-grid-row";
+        readonly description: "行组件H5端根元素";
+    }, {
+        readonly name: "小程序端根元素";
+        readonly selector: ".wd-mp-grid-row";
+        readonly description: "行组件小程序端根元素";
+    }];
+    readonly meta: {
+        readonly title: "行";
+        readonly category: "布局容器";
+        readonly description: "水平的行，宽度超出屏幕会自动换行";
+        readonly componentOrder: 1000;
+        readonly visible: readonly [];
+        readonly icon: "../../icons/Container.svg";
+        readonly positionConstraint: {
+            readonly allowParent: readonly [{
+                readonly componentType: "Grid";
+                readonly recursive: false;
+            }, {
+                readonly componentType: "Col";
+                readonly recursive: false;
+            }, {
+                readonly componentType: "Repeater";
+                readonly recursive: false;
+            }];
+            readonly allowChildren: readonly [{
+                readonly componentType: "Col";
+            }, {
+                readonly componentType: "Repeater";
+            }];
+        };
+        readonly inlineStyleForm: {
+            readonly justifyContent: {
+                readonly visible: false;
+            };
+            readonly alignItems: {
+                readonly visible: false;
+            };
+            readonly flexDirection: {
+                readonly visible: false;
+            };
+        };
+        readonly shortcut: {
+            readonly props: readonly ["colCount"];
+        };
+    };
+    readonly configMeta: {
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/Grid";
+    };
+};
+export default config;

package/dist/configs/components/grid/row.js

@@ -1,41 +1,5 @@
 import { defineConfig, Tuple, Type, } from '../../type-utils';
-const gutterEnum = [
-    { label: '默认继承网格布局', value: -1 },
-    { label: '0px（无）', value: 0 },
-    { label: '8px（超小）', value: 2 },
-    {
-        label: '16px（超小）',
-        value: 3,
-    },
-    {
-        label: '24px（小）',
-        value: 4,
-    },
-    {
-        label: '32px（中）',
-        value: 5,
-    },
-    {
-        label: '48px（大）',
-        value: 6,
-    },
-    {
-        label: '60px（超大）',
-        value: 7,
-    },
-    {
-        label: '80px（超大）',
-        value: 9,
-    },
-    {
-        label: '100px（超大）',
-        value: 9,
-    },
-    {
-        label: '128px（超大）',
-        value: 10,
-    },
-];
+import { ROW_GUTTER_ENUM } from '../../../enum';
 const data = Type.Object({
     addRowCol: Type.Never({
         title: '添加行',
@@ -60,12 +24,13 @@ const data = Type.Object({
                 value: i + 1,
             })),
         },
+        'x-runtime-default': 3,
     }),
-    gutterX: Type.NumberEnum({
+    gutterX: Type.StringEnum({
         title: '列间距',
-        default: -1,
+        'x-runtime-default': 'auto',
         'x-component': 'string',
-        enum: Tuple(gutterEnum),
+        enum: Tuple(ROW_GUTTER_ENUM),
         'x-index': 30,
         description: '对当前行的所有列生效。配置后，将会覆盖父层网格布局的属性。',
     }),
@@ -141,14 +106,39 @@ const events = [
         title: '点击',
     },
 ];
+const properties = Type.Pick(data, ['colCount', 'gutterX', 'alignItems']);
 const config = defineConfig({
     $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
     data,
     events,
+    properties,
     isContainer: true,
     compConfig: {
         componentType: 'Row',
     },
+    // 样式API
+    classes: [
+        {
+            name: '根元素',
+            selector: '.wd-grid-row',
+            description: '行组件根元素',
+        },
+        {
+            name: 'PC端根元素',
+            selector: '.wd-pc-grid-row',
+            description: '行组件PC端根元素',
+        },
+        {
+            name: 'H5端根元素',
+            selector: '.wd-h5-grid-row',
+            description: '行组件H5端根元素',
+        },
+        {
+            name: '小程序端根元素',
+            selector: '.wd-mp-grid-row',
+            description: '行组件小程序端根元素',
+        },
+    ],
     meta: {
         title: '行',
         category: '布局容器',
@@ -164,17 +154,6 @@ const config = defineConfig({
             ],
             allowChildren: [{ componentType: 'Col' }, { componentType: 'Repeater' }],
         },
-        editorLifecycle: {
-            destroy: {
-                action: 'deleteParent',
-                params: {
-                    conditions: {
-                        emptyChild: true,
-                        parentComponentType: 'Grid',
-                    },
-                },
-            },
-        },
         inlineStyleForm: {
             justifyContent: { visible: false },
             alignItems: { visible: false },