@cloudbase/weda-ui 3.5.3 → 3.6.1

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

@@ -1,16 +1,311 @@
 import { defineConfig, Tuple, Type, } from '../../type-utils';
 import { GUTTER_ENUM } from '../../../enum';
-const gridTemplate = `
+const template_6v6 = `
+[[template]]
+component = 'Row'
+
+{{#repeat 2}}
+[[template.items]]
+component = 'Col'
+{{/repeat}}
+`;
+const template_3v9 = `
 [[template]]
 component = 'Row'
 
+[[template.items]]
+component = 'Col'
+[template.items.attributes.lgWidthType]
+type = 'twelve-adjust'
+value = '3'
+unit = 'px'
+[template.items.attributes.widthType]
+type = 'twelve-adjust'
+value = '3'
+unit = 'px'
+[[template.items]]
+component = 'Col'
+[template.items.attributes.lgWidthType]
+type = 'twelve-adjust'
+value = '9'
+unit = 'px'
+[template.items.attributes.widthType]
+type = 'twelve-adjust'
+value = '9'
+unit = 'px'
+`;
+const template_9v3 = `
+[[template]]
+component = 'Row'
+
+[[template.items]]
+component = 'Col'
+[template.items.attributes.lgWidthType]
+type = 'twelve-adjust'
+value = '9'
+unit = 'px'
+[template.items.attributes.widthType]
+type = 'twelve-adjust'
+value = '9'
+unit = 'px'
+[[template.items]]
+component = 'Col'
+[template.items.attributes.lgWidthType]
+type = 'twelve-adjust'
+value = '3'
+unit = 'px'
+[template.items.attributes.widthType]
+type = 'twelve-adjust'
+value = '3'
+unit = 'px'
+`;
+const template_4v4v4 = `
+[[template]]
+component = 'Row'
+
+{{#repeat 3}}
+[[template.items]]
+component = 'Col'
+{{/repeat}}
+`;
+const template_3v3v3v3 = `
+[[template]]
+component = 'Row'
+
+{{#repeat 4}}
+[[template.items]]
+component = 'Col'
+{{/repeat}}
+`;
+const template_3v6v3 = `
+[[template]]
+component = 'Row'
+[[template.items]]
+component = 'Col'
+[template.items.attributes.lgWidthType]
+type = 'twelve-adjust'
+value = '3'
+unit = 'px'
+[template.items.attributes.widthType]
+type = 'twelve-adjust'
+value = '3'
+unit = 'px'
+
+[[template.items]]
+component = 'Col'
+[template.items.attributes.lgWidthType]
+type = 'twelve-adjust'
+value = '6'
+unit = 'px'
+[template.items.attributes.widthType]
+type = 'twelve-adjust'
+value = '6'
+unit = 'px'
+
+[[template.items]]
+component = 'Col'
+[template.items.attributes.lgWidthType]
+type = 'twelve-adjust'
+value = '3'
+unit = 'px'
+[template.items.attributes.widthType]
+type = 'twelve-adjust'
+value = '3'
+unit = 'px'
+`;
+const template_1_1 = `
+{{#repeat 2}}
+[[template]]
+component = 'Row'
+[[template.items]]
+component = 'Col'
+{{/repeat}}
+`;
+const template_2_2 = `
+{{#repeat 2}}
+[[template]]
+component = 'Row'
+{{#repeat 2}}
+[[template.items]]
+component = 'Col'
+{{/repeat}}
+{{/repeat}}
+`;
+const template_1_3 = `
+[[template]]
+component = 'Row'
+[[template.items]]
+component = 'Col'
+
+[[template]]
+component = 'Row'
+{{#repeat 3}}
+[[template.items]]
+component = 'Col'
+{{/repeat}}
+`;
+const template_1_1_1 = `
+{{#repeat 3}}
+[[template]]
+component = 'Row'
+[[template.items]]
+component = 'Col'
+{{/repeat}}
+`;
+const template_2_2_2 = `
 {{#repeat 3}}
+[[template]]
+component = 'Row'
+{{#repeat 2}}
+[[template.items]]
+component = 'Col'
+{{/repeat}}
+{{/repeat}}
+`;
+const template_1_4_1 = `
+[[template]]
+component = 'Row'
 [[template.items]]
 component = 'Col'
 
+[[template]]
+component = 'Row'
+{{#repeat 4}}
+[[template.items]]
+component = 'Col'
 {{/repeat}}
+
+[[template]]
+component = 'Row'
+[[template.items]]
+component = 'Col'
 `;
+// 模板集合
+const gridTemplate = `
+{{#if (helper_utils '===' $self.attributes.template '[1,2]')}}
+${template_6v6}
+{{/if}}
+
+{{#if (helper_utils '===' $self.attributes.template '[1,4]')}}
+${template_3v3v3v3}
+{{/if}}
+
+{{#if (helper_utils '===' $self.attributes.template '[2,1]')}}
+${template_1_1}
+{{/if}}
+
+{{#if (helper_utils '===' $self.attributes.template '[3,1]')}}
+${template_1_1_1}
+{{/if}}
+
+{{#if (helper_utils '===' $self.attributes.template '[1,[[2,[3,9]]]]')}}
+${template_3v9}
+{{/if}}
+
+{{#if (helper_utils '===' $self.attributes.template '[1,[[2,[9,3]]]]')}}
+${template_9v3}
+{{/if}}
+
+{{#if (helper_utils '===' $self.attributes.template '[1,3]')}}
+${template_4v4v4}
+{{/if}}
+
+{{#if (helper_utils '===' $self.attributes.template '[1,[[3,[3,6,3]]]]')}}
+${template_3v6v3}
+{{/if}}
+
+{{#if (helper_utils '===' $self.attributes.template '[2,2]')}}
+${template_2_2}
+{{/if}}
+
+{{#if (helper_utils '===' $self.attributes.template '[2,[1,3]]')}}
+${template_1_3}
+{{/if}}
+
+{{#if (helper_utils '===' $self.attributes.template '[3,2]')}}
+${template_2_2_2}
+{{/if}}
+
+{{#if (helper_utils '===' $self.attributes.template '[3,[1,4,1]]')}}
+${template_1_4_1}
+{{/if}}
+
+`;
+// value 取值规则参考编辑器 src/pages/editor/utils/grid-template
+const templateEnum = [
+    {
+        label: '6:6',
+        value: '[1,2]',
+        icon: 'grid-column-six-six',
+    },
+    {
+        label: '3:3:3:3',
+        value: '[1,4]',
+        icon: 'grid-column-three-three-three-three',
+    },
+    {
+        label: '1+1',
+        value: '[2,1]',
+        icon: 'grid-row-one-one',
+    },
+    {
+        label: '1+1+1',
+        value: '[3,1]',
+        icon: 'grid-row-one-one-one',
+    },
+    {
+        label: '3:9',
+        value: '[1,[[2,[3,9]]]]',
+        icon: 'grid-column-three-nine',
+    },
+    {
+        label: '9:3',
+        value: '[1,[[2,[9,3]]]]',
+        icon: 'grid-column-nine-three',
+    },
+    {
+        label: '4:4:4',
+        value: '[1,3]',
+        icon: 'grid-column-four-four-four',
+    },
+    {
+        label: '3:6:3',
+        value: '[1,[[3,[3,6,3]]]]',
+        icon: 'grid-column-three-six-three',
+    },
+    {
+        label: '2+2',
+        value: '[2,2]',
+        icon: 'grid-row-two-two',
+    },
+    {
+        label: '1+3',
+        value: '[2,[1,3]]',
+        icon: 'grid-row-one-three',
+    },
+    {
+        label: '2+2+2',
+        value: '[3,2]',
+        icon: 'grid-row-two-two-two',
+    },
+    {
+        label: '1+4+1',
+        value: '[3,[1,4,1]]',
+        icon: 'grid-row-one-four-one',
+    },
+];
 const data = Type.Object({
+    template: Type.StringEnum({
+        title: '常用布局',
+        enum: Tuple(templateEnum),
+        default: '[1,3]',
+        'x-index': 5,
+        'x-props': { 'data-hidebind': true },
+        'x-component': 'icon-label-list',
+        'x-component-props': {
+            options: Tuple(templateEnum),
+        },
+    }),
     addRow: Type.Never({
         title: '添加行和列',
         'x-component': 'grid-row-col',
@@ -40,7 +335,8 @@ const data = Type.Object({
     // 8 16 24 对应 scss中的 gutters map
     gutterX: Type.StringEnum({
         title: '列间距',
-        'x-runtime-default': '8px',
+        'x-runtime-default': '0px',
+        default: '8px',
         'x-component': 'string',
         enum: Tuple(GUTTER_ENUM),
         'x-index': 30,
@@ -48,11 +344,19 @@ const data = Type.Object({
     }),
     gutterY: Type.StringEnum({
         title: '行间距',
-        'x-runtime-default': '8px',
+        'x-runtime-default': '0px',
+        default: '8px',
         'x-component': 'string',
         'x-index': 40,
         enum: Tuple(GUTTER_ENUM),
     }),
+    avoidScrollbar: Type.Boolean({
+        title: '防止出现滚动条',
+        'x-runtime-default': true,
+        'x-index': 50,
+        'x-category': '高级',
+        'x-helper-text': '开启后可以防止网格布局导致页面出现滚动条',
+    }),
 });
 const events = [
     {
@@ -98,6 +402,7 @@ const config = defineConfig({
         category: '布局',
         description: '将页面划分为多行、多列的网格，可分别设置移动端和桌面端列宽',
         componentOrder: 60,
+        figureIcon: '../../figureIcons/Grid.svg',
         icon: '../../icons/Grid.svg',
         positionConstraint: {
             allowChildren: [{ componentType: 'Row' }, { componentType: 'Repeater' }],
@@ -111,16 +416,21 @@ const config = defineConfig({
         templates: [
             {
                 to: '$children',
-                autoSelectPath: 'template[0]',
+                body: template_4v4v4,
+            },
+            {
+                when: 'template',
                 body: gridTemplate,
+                remain: 'Row Col *',
             },
         ],
-    },
-    configMeta: {
-        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/Grid',
         shortcut: {
             props: ['gutterX', 'gutterY'],
+            gridHotTemplates: ['[1,2]', '[1,4]', '[2,1]', '[3,1]'],
         },
     },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/',
+    },
 });
 export default config;

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

@@ -25,9 +25,9 @@ declare const config: {
         readonly title: "点击";
     }];
     readonly properties: import("@sinclair/typebox").TObject<{
+        alignItems: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"center" | "end" | "start">>;
         colCount: import("@sinclair/typebox").TNever;
         gutterX: import("@sinclair/typebox").TUnsafe<string>;
-        alignItems: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"center" | "end" | "start">>;
     }>;
     readonly isContainer: true;
     readonly compConfig: {

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

@@ -42,6 +42,17 @@ declare const _default: {
         readonly componentOrder: 230;
         readonly visible: readonly [];
         readonly deprecated: true;
+        readonly inlineStyleForm: {
+            readonly justifyContent: {
+                readonly visible: false;
+            };
+            readonly flexDirection: {
+                readonly visible: false;
+            };
+            readonly alignItems: {
+                readonly visible: false;
+            };
+        };
         readonly renderMode: readonly [{
             readonly component: "WdImage";
             readonly props: {};

package/dist/configs/components/image.js

@@ -184,6 +184,17 @@ export default defineConfig({
         componentOrder: 230,
         visible: [],
         deprecated: true,
+        inlineStyleForm: {
+            justifyContent: {
+                visible: false,
+            },
+            flexDirection: {
+                visible: false,
+            },
+            alignItems: {
+                visible: false,
+            },
+        },
         renderMode: [
             {
                 component: 'WdImage',

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

@@ -0,0 +1,155 @@
+declare const _default: {
+    $schema: string;
+    data: {
+        type: string;
+        properties: {
+            jsxCode: {
+                title: string;
+                'x-helper-text': string;
+                type: string;
+                'x-index': number;
+                'x-props': {
+                    'data-hidebind': boolean;
+                };
+                'x-component': string;
+                'x-group': string;
+            };
+            slotList: {
+                title: string;
+                'x-helper-text': string;
+                type: string;
+                default: any[];
+                items: {
+                    type: string;
+                    properties: {
+                        value: {
+                            type: string;
+                            title: string;
+                            'x-helper-text': string;
+                            'x-props': {
+                                'data-hidebind': boolean;
+                            };
+                        };
+                        label: {
+                            type: string;
+                            title: string;
+                            'x-props': {
+                                'data-hidebind': boolean;
+                            };
+                        };
+                    };
+                    display: string;
+                };
+                'x-index': number;
+                'x-group': string;
+                'x-props': {
+                    'data-hidebind': boolean;
+                };
+                'x-component': string;
+                'x-component-props': {
+                    demoData: {
+                        value: string;
+                        label: string;
+                    };
+                };
+                'x-linkages': {
+                    type: string;
+                    schema: {
+                        'x-component-props': {
+                            demoData: {
+                                label: string;
+                                value: string;
+                            };
+                        };
+                    };
+                    target: string;
+                }[];
+            };
+            jsCode: {
+                title: string;
+                description: string;
+                type: string;
+                'x-index': number;
+                display: boolean;
+                'x-group': string;
+            };
+            template: {
+                'x-index': number;
+                title: string;
+                description: string;
+                type: string;
+                default: string;
+                'x-helper-text': string;
+                enum: {
+                    label: string;
+                    value: string;
+                    tooltip: string;
+                }[];
+                'x-group': string;
+            };
+        };
+    };
+    events: any[];
+    meta: {
+        name: string;
+        title: string;
+        description: string;
+        figureIcon: string;
+        icon: string;
+        docsUrl: string;
+        category: string;
+        categoryOrder: number;
+        componentOrder: number;
+        templates: {
+            when: string;
+            to: string;
+            body: string;
+        }[];
+        visible: string[];
+        platform: string[];
+        group: {
+            代码块: {
+                'x-index': number;
+                expand: boolean;
+            };
+            高级属性: {
+                'x-index': number;
+                expand: boolean;
+            };
+        };
+        inlineStyleForm: {
+            fontSize: {
+                visible: boolean;
+            };
+            color: {
+                visible: boolean;
+            };
+            fontWeight: {
+                visible: boolean;
+            };
+            lineHeight: {
+                visible: boolean;
+            };
+            justifyContent: {
+                visible: boolean;
+            };
+            flexDirection: {
+                visible: boolean;
+            };
+            textAlign: {
+                visible: boolean;
+            };
+            alignItems: {
+                visible: boolean;
+            };
+        };
+    };
+    configMeta: {
+        docsUrl: string;
+    };
+    properties: {
+        type: string;
+        properties: {};
+    };
+};
+export default _default;