@pisell/materials 1.0.111 → 1.0.112

package/lowcode/classic-layout/meta.ts

@@ -0,0 +1,115 @@
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "ClassicLayout",
+  title: "layout布局组件",
+  category: "布局",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "ClassicLayout",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: "className",
+      title: { label: "容器 className", tip: "容器 className" },
+      setter: "StringSetter",
+    },
+    {
+      name: "fixedHeader",
+      title: { label: "固定顶部", tip: "是否固定顶部｜fixedHeader" },
+      setter: "BoolSetter",
+    },
+    {
+      name: "fixedFooter",
+      title: { label: "固定底部", tip: "是否固定底部｜fixedFooter" },
+      setter: "BoolSetter",
+    },
+    {
+      name: "header",
+      title: {
+        label: "顶部渲染函数",
+        tip: "顶部渲染函数 ｜header",
+      },
+      propType: "func",
+      setter: [
+        {
+          componentName: "SlotSetter",
+          title: "顶部渲染函数插槽",
+        },
+        {
+          componentName: "FunctionSetter",
+          props: {
+            template: "header(){\n// 自定义渲染顶部\nreturn `Header`;\n}",
+          },
+        },
+        "VariableSetter",
+      ],
+    },
+    {
+      name: "content",
+      title: {
+        label: "内容渲染函数",
+        tip: "内容渲染函数 ｜content",
+      },
+      propType: "func",
+      setter: [
+        {
+          componentName: "SlotSetter",
+          title: "内容渲染插槽",
+        },
+        {
+          componentName: "FunctionSetter",
+          props: {
+            template: "content(){\n// 自定义渲染内容\nreturn `Content`;\n}",
+          },
+        },
+        "VariableSetter",
+      ],
+    },
+    {
+      name: "footer",
+      title: {
+        label: "底部渲染函数",
+        tip: "底部渲染函数 ｜footer",
+      },
+      propType: "func",
+      setter: [
+        {
+          componentName: "SlotSetter",
+          title: "底部函数插槽",
+          initialValue: {
+            type: "JSSlot",
+            value: [],
+          },
+        },
+        {
+          componentName: "FunctionSetter",
+          props: {
+            template: "footer(){\n// 自定义渲染底部\nreturn `Footer`;\n}",
+          },
+        },
+        "VariableSetter",
+      ],
+    },
+  ],
+  configure: {
+    component: {
+      // isContainer: true,
+      // nestingRule: {
+      //   childWhitelist: [],
+      //   parentWhitelist: [],
+      // },
+    },
+    supports: {
+      style: true,
+    },
+  },
+};

package/lowcode/classic-layout/snippets.ts

@@ -0,0 +1,65 @@
+export default [
+  {
+    title: "layout布局组件",
+    schema: {
+      componentName: "ClassicLayout",
+      props: {
+        header: {
+          type: "JSSlot",
+          value: [
+            {
+              componentName: "Div",
+              props: {
+                style: {
+                  textAlign: 'center',
+                  color: '#fff',
+                  height: 64,
+                  paddingInline: 50,
+                  lineHeight: '64px',
+                  backgroundColor: '#7dbcea',
+                },
+                children: "Header",
+              },
+            },
+          ],
+        },
+        content: {
+          type: "JSSlot",
+          value: [
+            {
+              componentName: "Div",
+              props: {
+                style: {
+                  textAlign: 'center',
+                  minHeight: 120,
+                  lineHeight: '120px',
+                  color: '#fff',
+                  backgroundColor: '#108ee9',
+                },
+                children: "Content",
+              },
+            },
+          ],
+        },
+        footer: {
+          type: "JSSlot",
+          value: [
+            {
+              componentName: "Div",
+              props: {
+                style: {
+                  textAlign: 'center',
+                  color: '#fff',
+                  backgroundColor: '#7dbcea',
+                  height: 70,
+                  lineHeight: '70px',
+                },
+                children: "Footer",
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+];

package/lowcode/list/meta.ts

@@ -156,7 +156,8 @@ export default {
                 node.setPropValue('grid', false);
                 return
               }
-              target.node.setPropValue('grid.column',4)
+              target.node.setPropValue('grid.column',4);
+              target.node.setPropValue('grid.oneLine',false);
             },
           },
         },
@@ -171,14 +172,98 @@ export default {
           },
         },
         {
-          name: 'grid.gutter',
-          title: { label: '间隔', tip: 'grid.gutter | 栅格的间隔' },
+          name: 'h-gutter',
+          title: {
+            label: '水平间隔',
+            tip: '栅格水平间隔，单位为像素(px)',
+          },
           propType: 'number',
-          setter: 'NumberSetter',
+          setter: {
+            componentName: 'NumberSetter',
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 0,
+          extraProps: {
+            getValue(target) {
+              const { node } = target;
+              const gutter = node.getPropValue('grid.gutter');
+              if (typeof gutter === 'number') {
+                return gutter;
+              } else if (Array.isArray(gutter)) {
+                return gutter[0];
+              }
+              return 0;
+            },
+            setValue(target, value) {
+              const { node } = target;
+              const gutter = node.getPropValue('grid.gutter');
+              if (Array.isArray(gutter)) {
+                gutter[0] = value;
+                node.setPropValue('grid.gutter', gutter);
+              } else {
+                node.setPropValue('grid.gutter', [value, 0]);
+              }
+            },
+          },
+        },
+        {
+          name: 'v-gutter',
+          title: {
+            label: '垂直间隔',
+            tip: '栅格垂直间隔，单位为像素(px)',
+          },
+          propType: 'number',
+          setter: {
+            componentName: 'NumberSetter',
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 0,
+          extraProps: {
+            getValue(target) {
+              const { node } = target;
+              const gutter = node.getPropValue('grid.gutter');
+              if (typeof gutter === 'number') {
+                return 0;
+              } else if (Array.isArray(gutter)) {
+                return gutter[1];
+              }
+              return 0;
+            },
+            setValue(target, value) {
+              const { node } = target;
+              const gutter = node.getPropValue('grid.gutter');
+              if (Array.isArray(gutter)) {
+                gutter[1] = value;
+                node.setPropValue('grid.gutter', gutter);
+              } else {
+                node.setPropValue('grid.gutter', [gutter, value]);
+              }
+            },
+          },
+        },
+        // {
+        //   name: 'grid.gutter',
+        //   title: { label: '间隔', tip: 'grid.gutter | 栅格的间隔' },
+        //   propType: 'number',
+        //   setter: 'NumberSetter',
+        //   condition: {
+        //     type: 'JSFunction',
+        //     value: 'target => !!target.getProps().getPropValue("gridEnable")',
+        //   },
+        // },
+        {
+          name: 'grid.oneLine',
+          title: { label: '一行展示', tip: 'grid.oneLine | 一行展示' },
+          propType: 'boolean',
           condition: {
             type: 'JSFunction',
             value: 'target => !!target.getProps().getPropValue("gridEnable")',
           },
+          setter: 'BoolSetter',
         },
       ],
     },