@pisell/materials 1.0.1 → 1.0.2

package/lowcode/breadcrumb/meta.ts

@@ -0,0 +1,136 @@
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "Breadcrumb",
+  title: "面包屑",
+  category: "导航",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Breadcrumb",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        title: "基础",
+        display: "block",
+        type: "group",
+        items: [
+          {
+            name: "routes",
+            title: { label: "路由栈信息", tip: "router 的路由栈信息" },
+            propType: {
+              type: "arrayOf",
+              value: {
+                type: "shape",
+                value: [
+                  { name: "path", propType: "string" },
+                  { name: "breadcrumbName", propType: "string" },
+                ],
+              },
+            },
+            setter: {
+              componentName: "ArraySetter",
+              props: {
+                itemSetter: {
+                  componentName: "ObjectSetter",
+                  props: {
+                    config: {
+                      items: [
+                        {
+                          name: "path",
+                          title: { label: "路由路径", tip: "path | 路由路径" },
+                          propType: "string",
+                          setter: "StringSetter",
+                          isRequired: true,
+                        },
+                        {
+                          name: "breadcrumbName",
+                          title: {
+                            label: "路由名称",
+                            tip: "breadcrumbName | 路由名称",
+                          },
+                          propType: "string",
+                          setter: "StringSetter",
+                          isRequired: true,
+                        },
+                      ],
+                    },
+                  },
+                  initialValue: {
+                    path: "path",
+                    breadcrumbName: "breadcrumbName",
+                  },
+                },
+              },
+            },
+          },
+          {
+            name: "params",
+            title: { label: "路由的参数", tip: "路由的参数" },
+            propType: "object",
+            setter: "JsonSetter",
+          },
+          {
+            name: "separator",
+            title: { label: "分隔符自定义", tip: "分隔符自定义" },
+            propType: { type: "oneOfType", value: ["string", "node"] },
+            setter: [
+              "StringSetter",
+              {
+                componentName: "SlotSetter",
+                initialValue: {
+                  type: "JSSlot",
+                  value: [],
+                },
+              },
+              "VariableSetter",
+            ],
+          },
+        ],
+      },
+      {
+        title: "扩展",
+        display: "block",
+        type: "group",
+        items: [
+          {
+            name: "itemRender",
+            title: {
+              label: "自定义渲染",
+              tip: "itemRender | 自定义渲染",
+            },
+            propType: { type: "oneOfType", value: ["func", "node"] },
+            setter: [
+              {
+                componentName: "SlotSetter",
+                title: "自定义渲染插槽",
+                initialValue: {
+                  type: "JSSlot",
+                  params: ["route", "params", "routes", "paths"],
+                  value: [],
+                },
+              },
+              {
+                componentName: "FunctionSetter",
+                props: {
+                  template:
+                    "itemRender(route, params, routes, paths,${extParams}){\n// 自定义渲染\nreturn `${route.breadcrumbName}`}",
+                },
+              },
+              "VariableSetter",
+            ],
+          },
+        ],
+      },
+    ],
+    supports: { style: true },
+  },
+};

package/lowcode/breadcrumb/snippets.ts

@@ -0,0 +1,44 @@
+export default [
+  {
+    title: '面包屑',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/breadcrumb-1.jpg',
+    schema: {
+      componentName: 'Breadcrumb',
+      props: {
+        routes: [
+          {
+            path: 'a',
+            breadcrumbName: 'Home',
+          },
+          {
+            path: 'center',
+            breadcrumbName: 'Application Center',
+          },
+          {
+            path: 'app',
+            breadcrumbName: 'An Application',
+          },
+        ],
+        itemRender: {
+          type: 'JSSlot',
+          params: ['route', 'params', 'routes', 'paths'],
+          value: [
+            {
+              componentName: 'Typography.Link',
+              props: {
+                href: {
+                  type: 'JSExpression',
+                  value: 'this.route.path',
+                },
+                children: {
+                  type: 'JSExpression',
+                  value: 'this.route.breadcrumbName',
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+];

package/lowcode/button/meta.ts

@@ -0,0 +1,510 @@
+import { ComponentMetadata, Snippet } from "@alilc/lowcode-types";
+import snippets from "./snippets";
+
+const ButtonMeta: ComponentMetadata = {
+  componentName: "Button",
+  title: "Button",
+  /** todo: category属性的多语言不生效 后续组件面板自己实现时加入 */
+  category: "通用",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Button",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: "i18n",
+            "en-US": "Feature",
+            "zh-CN": "功能",
+          },
+        },
+        display: "block",
+        type: "group",
+        items: [
+          {
+            name: "children",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "content",
+                "zh-CN": "内容",
+              },
+              tip: "children",
+            },
+            propType: {
+              type: "oneOfType",
+              value: ["node", "string"],
+            },
+            setter: ["SlotSetter", "StringSetter", "VariableSetter"],
+          },
+          {
+            name: "htmlType",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "native type",
+                "zh-CN": "原生类型",
+              },
+              tip: {
+                type: "i18n",
+                "en-US": "htmlType | Set the native `type` value of `button`",
+                "zh-CN": "htmlType | 设置 `button` 原生的 `type` 值",
+              },
+            },
+            propType: {
+              type: "oneOf",
+              value: ["submit", "reset", "button"],
+            },
+            setter: [
+              {
+                componentName: "RadioGroupSetter",
+                props: {
+                  options: [
+                    {
+                      title: "Submit",
+                      value: "submit",
+                    },
+                    {
+                      title: "Reset",
+                      value: "reset",
+                    },
+                    {
+                      title: "Button",
+                      value: "button",
+                    },
+                  ],
+                },
+              },
+              "VariableSetter",
+            ],
+            defaultValue: "button",
+          },
+          {
+            name: "href",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "jump address",
+                "zh-CN": "跳转地址",
+              },
+              tip: {
+                type: "i18n",
+                "en-US":
+                  "href | click to jump to the address, specify this attribute button behavior is consistent with a link",
+                "zh-CN":
+                  "href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致",
+              },
+            },
+            propType: "string",
+            setter: ["StringSetter", "VariableSetter"],
+          },
+          {
+            name: "target",
+            title: {
+              label: "Target",
+              tip: {
+                type: "i18n",
+                "en-US":
+                  "target | Equivalent to the target attribute of a link, effective when href exists",
+                "zh-CN":
+                  "target | 相当于 a 链接的 target 属性，href 存在时生效",
+              },
+            },
+            propType: {
+              type: "oneOf",
+              value: ["_self", "_blank", "_parent", "_top"],
+            },
+            setter: [
+              {
+                componentName: "SelectSetter",
+                props: {
+                  options: [
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "Jump to this window",
+                        "zh-CN": "本窗口跳转",
+                      },
+                      value: "_self",
+                    },
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "open a new tab",
+                        "zh-CN": "打开新标签页",
+                      },
+                      value: "_blank",
+                    },
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "parent window jump",
+                        "zh-CN": "父窗口跳转",
+                      },
+                      value: "_parent",
+                    },
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "Top-level window jump",
+                        "zh-CN": "顶层窗口跳转",
+                      },
+                      value: "_top",
+                    },
+                  ],
+                },
+              },
+              "StringSetter",
+              "VariableSetter",
+            ],
+            condition: {
+              type: "JSFunction",
+              value:
+                'target => !!target.getProps().getPropValue("href")?.trim()',
+            },
+          },
+        ],
+      },
+      {
+        title: {
+          type: "i18n",
+          "en-US": "exterior",
+          "zh-CN": "外观",
+        },
+        display: "block",
+        type: "group",
+        items: [
+          {
+            name: "type",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "type",
+                "zh-CN": "类型",
+              },
+              tip: {
+                type: "i18n",
+                "en-US": "type | set button type",
+                "zh-CN": "type | 设置按钮类型",
+              },
+            },
+            propType: {
+              type: "oneOf",
+              value: ["primary", "ghost", "dashed", "danger", "link", "text"],
+            },
+            setter: [
+              {
+                componentName: "SelectSetter",
+                props: {
+                  options: [
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "primary button",
+                        "zh-CN": "主按钮",
+                      },
+                      value: "primary",
+                    },
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "dashed button",
+                        "zh-CN": "虚线框按钮",
+                      },
+                      value: "dashed",
+                    },
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "danger button",
+                        "zh-CN": "危险按钮",
+                      },
+                      value: "danger",
+                    },
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "link button",
+                        "zh-CN": "链接按钮",
+                      },
+                      value: "link",
+                    },
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "text button",
+                        "zh-CN": "类文本按钮",
+                      },
+                      value: "text",
+                    },
+                  ],
+                },
+              },
+              "VariableSetter",
+            ],
+          },
+          {
+            name: "size",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "size",
+                "zh-CN": "尺寸",
+              },
+              tip: {
+                type: "i18n",
+                "en-US": "size | set button size",
+                "zh-CN": "size | 设置按钮大小",
+              },
+            },
+            propType: { type: "oneOf", value: ["large", "middle", "small"] },
+            setter: [
+              {
+                componentName: "RadioGroupSetter",
+                props: {
+                  options: [
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "large",
+                        "zh-CN": "大",
+                      },
+                      value: "large",
+                    },
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "middle",
+                        "zh-CN": "中",
+                      },
+                      value: "middle",
+                    },
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "small",
+                        "zh-CN": "小",
+                      },
+                      value: "small",
+                    },
+                  ],
+                },
+              },
+              "VariableSetter",
+            ],
+            defaultValue: "middle",
+          },
+          {
+            name: "shape",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "shape",
+                "zh-CN": "形状",
+              },
+              tip: {
+                type: "i18n",
+                "en-US":
+                  "shape | Set button shape, optional value is `circle`, `round` or not set",
+                "zh-CN":
+                  "shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设",
+              },
+            },
+            propType: { type: "oneOf", value: ["default", "circle", "round"] },
+            defaultValue: "default",
+            setter: [
+              {
+                componentName: "RadioGroupSetter",
+                props: {
+                  options: [
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "default",
+                        "zh-CN": "默认",
+                      },
+                      value: "default",
+                    },
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "circle",
+                        "zh-CN": "圆形",
+                      },
+                      value: "circle",
+                    },
+                    {
+                      title: {
+                        type: "i18n",
+                        "en-US": "round",
+                        "zh-CN": "圆角",
+                      },
+                      value: "round",
+                    },
+                  ],
+                },
+              },
+              "VariableSetter",
+            ],
+          },
+          {
+            name: "icon",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "icon",
+                "zh-CN": "图标",
+              },
+              tip: "icon | Set the icon component of the button",
+            },
+            propType: "node",
+            setter: {
+              componentName: "SlotSetter",
+              initialValue: {
+                type: "JSSlot",
+                value: [
+                  {
+                    componentName: "Icon",
+                    props: {
+                      type: "SmileOutlined",
+                      size: 20,
+                      rotate: 0,
+                      spin: false,
+                    },
+                  },
+                ],
+              },
+            },
+          },
+          {
+            name: "block",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "adaptive",
+                "zh-CN": "自适应",
+              },
+              tip: {
+                type: "i18n",
+                "en-US":
+                  "block | Option to adjust button width to its parent width",
+                "zh-CN": "block | 将按钮宽度调整为其父宽度的选项",
+              },
+            },
+            propType: "bool",
+            setter: "BoolSetter",
+            defaultValue: false,
+          },
+          {
+            name: "danger",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "danger button",
+                "zh-CN": "危险按钮",
+              },
+              tip: {
+                type: "i18n",
+                "en-US": "danger | set hazard button",
+                "zh-CN": "danger | 设置危险按钮",
+              },
+            },
+            propType: "bool",
+            setter: "BoolSetter",
+            defaultValue: false,
+          },
+          {
+            name: "ghost",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "ghost attribute",
+                "zh-CN": "幽灵属性",
+              },
+              tip: {
+                type: "i18n",
+                "en-US":
+                  "ghost | Ghost property to make button background transparent",
+                "zh-CN": "ghost | 幽灵属性，使按钮背景透明",
+              },
+            },
+            propType: "bool",
+            setter: "BoolSetter",
+            defaultValue: false,
+          },
+        ],
+      },
+      {
+        title: {
+          type: "i18n",
+          "en-US": "state",
+          "zh-CN": "状态",
+        },
+        display: "block",
+        type: "group",
+        items: [
+          {
+            name: "loading",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "loading status",
+                "zh-CN": "载入状态",
+              },
+              tip: {
+                type: "i18n",
+                "en-US": "loading | Set button loading state",
+                "zh-CN": "loading | 设置按钮载入状态",
+              },
+            },
+            propType: "bool",
+            setter: ["BoolSetter", "VariableSetter"],
+          },
+          {
+            name: "disabled",
+            title: {
+              label: {
+                type: "i18n",
+                "en-US": "Whether to disable",
+                "zh-CN": "是否禁用",
+              },
+              tip: {
+                type: "i18n",
+                "en-US": "disabled | Is it disabled",
+                "zh-CN": "disabled | 是否为禁用状态",
+              },
+            },
+            propType: "bool",
+            setter: ["BoolSetter", "VariableSetter"],
+            defaultValue: false,
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: "onClick",
+          template:
+            "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}",
+        },
+      ],
+    },
+    component: {},
+  },
+};
+
+export default {
+  ...ButtonMeta,
+  snippets,
+};