@pisell/materials 1.0.89 → 1.0.90

package/lowcode/record-view/meta.ts

@@ -0,0 +1,696 @@
+import { ComponentMetadata, Snippet } from "@alilc/lowcode-types";
+import button from "../button/meta";
+
+const DivMeta: ComponentMetadata = {
+  componentName: "RecordView",
+  title: "RecordView",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.3",
+    exportName: "RecordView",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: "dataSource",
+      title: { label: "列表数据源", tip: "列表数据源" },
+      propType: { type: "arrayOf", value: "any" },
+      setter: ["JsonSetter", "VariableSetter"],
+    },
+    {
+      name: "header",
+      title: {
+        label: "头部区域",
+        tip: "header | 头部区域",
+      },
+      propType: "node",
+      setter: {
+        componentName: "SlotSetter",
+        initialValue: {
+          type: "JSSlot",
+          value: [
+            {
+              componentName: "Typography.Text",
+              props: {
+                children: "List Title",
+                style: {
+                  color: "var(--gray-900, #101828)",
+                  fontSize: "20px",
+                  fontWeight: 600,
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: "renderItem",
+      title: {
+        label: "渲染函数",
+        tip: "renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项",
+      },
+      propType: "func",
+      setter: [
+        {
+          componentName: "SlotSetter",
+          title: "渲染函数插槽",
+          initialValue: {
+            type: "JSSlot",
+            params: ["item"],
+            value: [
+              {
+                componentName: "List.Item",
+                props: {},
+                children: {
+                  componentName: "Typography.Text",
+                  props: {
+                    children: {
+                      type: "JSExpression",
+                      value: "this.item.text",
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        },
+        {
+          componentName: "FunctionSetter",
+          props: {
+            template:
+              "renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}",
+          },
+        },
+        "VariableSetter",
+      ],
+    },
+    {
+      name: "leftSpan",
+      title: {
+        label: "左侧比例",
+        tip: "leftSpan | 左侧比例",
+      },
+      propType: "number",
+      setter: {
+        componentName: "NumberSetter",
+        props: {
+          min: 0,
+          max: 24,
+        },
+      },
+    },
+    {
+      name: "rightSpan",
+      title: {
+        label: "右侧比例",
+        tip: "rightSpan | 右侧比例",
+      },
+      propType: "number",
+      setter: {
+        componentName: "NumberSetter",
+        props: {
+          min: 0,
+          max: 24,
+        },
+      },
+    },
+    {
+      name: "h-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("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("gutter");
+          if (Array.isArray(gutter)) {
+            gutter[0] = value;
+            node.setPropValue("gutter", gutter);
+          } else {
+            node.setPropValue("gutter", [value, 0]);
+          }
+        },
+      },
+    },
+    {
+      name: "footer",
+      title: {
+        label: "底部区域",
+        tip: "footer | 底部区域",
+      },
+      propType: "node",
+      setter: {
+        componentName: "SlotSetter",
+      },
+    },
+    {
+      name: "listGap",
+      title: {
+        label: "列表间距",
+        tip: "listGap | 列表间距",
+      },
+      propType: "number",
+      setter: {
+        componentName: "NumberSetter",
+      },
+      defaultValue: 16,
+    },
+    {
+      name: "detail",
+      title: {
+        label: "详情区域",
+        tip: "detail | 详情区域",
+      },
+      propType: "node",
+      setter: {
+        componentName: "SlotSetter",
+        initialValue: {
+          type: "JSSlot",
+          value: [
+            {
+              componentName: "Typography.Text",
+              props: {
+                children: "我是详情区域",
+                style: {
+                  color: "var(--gray-900, #101828)",
+                  fontSize: "20px",
+                  fontWeight: 600,
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: "search",
+      title: {
+        label: "搜索功能",
+        tip: "search | 搜索功能",
+      },
+      propType: "bool",
+    },
+    {
+      name: "pcDetailModalDisplay",
+      title: {
+        label: "详情弹窗展示（PC端）",
+        tip: "detailModalDisplay | 详情弹窗展示",
+      },
+      propType: "bool",
+    },
+    {
+      name: "padDetailModalDisplay",
+      title: {
+        label: "详情弹窗展示（Pad端）",
+        tip: "detailModalDisplay | 详情弹窗展示",
+      },
+      propType: "bool",
+    },
+    {
+      name: "mobilePadDetailModalDisplay",
+      title: {
+        label: "详情弹窗展示（Modal端）",
+        tip: "detailModalDisplay | 详情弹窗展示",
+      },
+      propType: "bool",
+    },
+    /*{
+      name: 'split',
+      title: { label: '展示分割线', tip: 'split | 是否展示分割线' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+    },*/
+    {
+      title: "分页",
+      display: "block",
+      type: "group",
+      items: [
+        {
+          name: "paginationType",
+          title: {
+            label: "分页类型",
+            tip: "paginationType | 分页类型 ",
+          },
+          propType: { type: "oneOf", value: ["default", "scroll"] },
+          setter: [
+            {
+              componentName: "RadioGroupSetter",
+              props: {
+                options: [
+                  {
+                    title: "分页器",
+                    value: "default",
+                  },
+                  {
+                    title: "滑动加载",
+                    value: "scroll",
+                  },
+                ],
+              },
+            },
+            "VariableSetter",
+          ],
+          extraProps: {
+            setValue: (target, value) => {
+              if (value === "scroll") {
+                target.parent.setPropValue("pagination", {
+                  pageSize: 5,
+                  current: 1,
+                  size: "default",
+                });
+              }
+            },
+          },
+          defaultValue: "default",
+        },
+        {
+          name: "listHeight",
+          title: {
+            label: "列表高度",
+            tip: "listHeight | 列表高度",
+          },
+          propType: "string",
+          setter: "StringSetter",
+          condition: {
+            type: "JSFunction",
+            value:
+              'target => target.getProps().getPropValue("paginationType") === "scroll"',
+          },
+          defaultValue: 400,
+        },
+        {
+          name: "pagination",
+          title: { label: "显示分页", tip: "pagination | 显示分页" },
+          propType: "object",
+          setter: "BoolSetter",
+          extraProps: {
+            setValue: (target, value) => {
+              if (value) {
+                target.parent.setPropValue("pagination", {
+                  pageSize: 5,
+                  current: 1,
+                  size: "default",
+                });
+              }
+            },
+          },
+          condition: {
+            type: "JSFunction",
+            value:
+              'target => target.getProps().getPropValue("paginationType") === "default"',
+          },
+        },
+        {
+          name: "pagination.pageSize",
+          title: { label: "每页条数", tip: "pagination.pageSize | 每页条数" },
+          setter: "NumberSetter",
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: "pagination.total",
+          title: { label: "数据总数", tip: "pagination.total | 数据总数" },
+          setter: "NumberSetter",
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        // {
+        //   name: 'pagination.defaultCurrent',
+        //   title: {
+        //     label: '默认当前页',
+        //     tip: 'pagination.defaultCurrent | 默认的当前页数',
+        //   },
+        //   setter: [
+        //     {
+        //       componentName: 'NumberSetter',
+        //       props: {
+        //         initialValue: 1,
+        //       },
+        //     },
+        //     'VariableSetter',
+        //   ],
+        //   condition: {
+        //     type: 'JSFunction',
+        //     value: 'target => !!target.getProps().getPropValue("pagination")',
+        //   },
+        // },
+        {
+          name: "pagination.current",
+          title: { label: "当前页数", tip: "pagination.current | 当前页数" },
+          setter: "NumberSetter",
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        /*{
+          name: 'pagination.showTotal',
+          title: {
+            label: '显示总数',
+            tip: 'pagination.showTotal | 用于显示数据总量和当前数据顺序',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'showTotal(total,range,${extParams}){\n// 用于格式化显示表格数据总量\nreturn `共 ${total} 条`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },*/
+        /*{
+          name: 'pagination.showSizeChanger',
+          title: {
+            label: '页数切换',
+            tip: 'pagination.showSizeChanger | 是否展示 pageSize 切换器',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.showQuickJumper',
+          title: {
+            label: '快速跳转',
+            tip: 'pagination.showQuickJumper | 是否可以快速跳转至某页',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.simple',
+          title: { label: '简单分页', tip: 'pagination.simple | 简单分页' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },*/
+        /*{
+          name: 'pagination.size',
+          title: { label: '分页尺寸', tip: 'pagination.size | 分页尺寸' },
+          propType: {
+            type: 'oneOf',
+            value: ['default', 'small'],
+          },
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  {
+                    title: '默认',
+                    value: 'default',
+                  },
+                  {
+                    title: '小',
+                    value: 'small',
+                  },
+                ],
+              },
+            },
+            'VariableSetter',
+          ],
+          defaultValue: 'default',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },*/
+        {
+          name: "pagination.onChange",
+          title: {
+            label: "分页改变事件",
+            tip: "pagination.onChange | 分页改变事件",
+          },
+          setter: {
+            componentName: "FunctionSetter",
+            props: {
+              template:
+                'onPaginationChange(page,pageSize){console.log(page,pageSize,"page,pageSize")}',
+            },
+          },
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+
+        {
+          name: "pagination.position",
+          title: { label: "分页位置", tip: "pagination.position | 分页位置" },
+          setter: {
+            componentName: "SelectSetter",
+            props: {
+              options: [
+                {
+                  title: "上",
+                  value: "top",
+                },
+                {
+                  title: "下",
+                  value: "bottom",
+                },
+                {
+                  title: "上下",
+                  value: "both",
+                },
+              ],
+            },
+            initialValue: "bottomRight",
+          },
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+      ],
+    },
+    {
+      title: "数据为空时",
+      display: "block",
+      type: "group",
+      items: [
+        {
+          name: "locale.emptyText",
+          title: {
+            label: "提示文本",
+            tip: "emptyText | 提示文本",
+          },
+          setter: "StringSetter",
+          defaultValue: "暂无数据",
+        },
+        {
+          name: "emptyButtons",
+          title: { label: "按钮项", tip: "右侧按钮项" },
+          setter: {
+            componentName: "ArraySetter",
+            props: {
+              itemSetter: {
+                componentName: "ObjectSetter",
+                props: {
+                  config: {
+                    items: [
+                      {
+                        name: "title",
+                        title: { label: "按钮名称", tip: "按钮名称" },
+                        propType: "string",
+                        setter: "PisellI18nSetter",
+                        isRequired: true,
+                      },
+                      ...button.configure.props,
+                      {
+                        name: "onClick",
+                        title: { label: "点击事件", tip: "点击事件" },
+                        propType: "func",
+                        setter: "FunctionSetter",
+                      },
+                      {
+                        name: "action",
+                        title: { label: "功能", tip: "按钮的功能" },
+                        propType: "string",
+                        setter: [
+                          {
+                            componentName: "SelectSetter",
+                            mode: "single",
+                            defaultValue: "add",
+                            props: {
+                              options: [
+                                {
+                                  title: "Add",
+                                  value: "add",
+                                },
+                                {
+                                  title: "Reset",
+                                  value: "reset",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+
+                      {
+                        name: "other",
+                        title: {
+                          label: "其他拓展属性",
+                          tip: "其他拓展属性",
+                        },
+                        propType: "object",
+                        setter: "JsonSetter",
+                      },
+                    ],
+                  },
+                },
+                initialValue: { title: "按钮" },
+              },
+            },
+          },
+        },
+      ],
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: "onRowClick",
+          template:
+            "onRowClick(item,${extParams}){\n// 点击行时的回调\nconsole.log('onRowClick', item);}",
+        },
+        {
+          name: "loadMoreData",
+          template: "loadMoreData(){\n// \nconsole.log('loadMoreData');}",
+        },
+      ],
+    },
+    component: {
+      isContainer: true,
+    },
+  },
+};
+const snippets: Snippet[] = [
+  {
+    title: "RecordView",
+    screenshot: "",
+    schema: {
+      componentName: "RecordView",
+      props: {
+        dataSource: [
+          {
+            id: 1,
+            text: "Racing car sprays burning fuel into crowd.",
+          },
+          {
+            id: 2,
+            text: "Japanese princess to wed commoner.",
+          },
+          {
+            id: 3,
+            text: "Australian walks 100km after outback crash.",
+          },
+          {
+            id: 4,
+            text: "Man charged over missing wedding girl.",
+          },
+          {
+            id: 5,
+            text: "Los Angeles battles huge wildfires.",
+          },
+        ],
+        renderItem: {
+          type: "JSSlot",
+          params: ["item"],
+          value: [
+            {
+              componentName: "List.Item",
+              props: {
+                style: {
+                  border: "1px solid var(--gray-300, #D0D5DD)",
+                  borderRadius: "12px",
+                  padding: "16px 20px",
+                  fontWeight: 600,
+                  cursor: "pointer",
+                },
+              },
+              children: {
+                componentName: "Typography.Text",
+                props: {
+                  children: {
+                    type: "JSExpression",
+                    value: "this.item.text",
+                  },
+                },
+              },
+            },
+          ],
+        },
+        pagination: {
+          position: "bottomRight",
+          size: "default",
+          showSizeChanger: false,
+        },
+        leftSpan: 12,
+        rightSpan: 12,
+        gutter: [40, 0],
+        style: {
+          padding: 20,
+        },
+      },
+    },
+  },
+];
+
+export default {
+  ...DivMeta,
+  snippets,
+};