@pisell/materials 6.0.13 → 6.0.15

package/lowcode/pisell-content/meta.ts

@@ -2,10 +2,11 @@ import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
 
 const PisellContentMeta: ComponentMetadata = {
   componentName: 'PisellContent',
-  title: 'PisellContent',
+  title: '内容',
   docUrl: '',
-  screenshot: '',
+  screenshot: require('./__screenshots__/content.png'),
   devMode: 'proCode',
+  category: "布局",
   npm: {
     package: '@pisell/materials',
     version: '1.0.3',
@@ -26,6 +27,17 @@ const PisellContentMeta: ComponentMetadata = {
       name: 'className',
       setter: 'StringSetter',
     },
+    {
+      title: {
+        label: {
+          type: 'i18n',
+          'en-US': 'height',
+          'zh-CN': '高度',
+        },
+      },
+      name: 'height',
+      setter: 'NumberSetter',
+    },
     {
       title: {
         label: {
@@ -37,6 +49,17 @@ const PisellContentMeta: ComponentMetadata = {
       name: 'children',
       setter: ['SlotSetter'],
     },
+    {
+      title: {
+        label: {
+          type: 'i18n',
+          'en-US': 'Content scrolling',
+          'zh-CN': '内容滚动',
+        },
+      },
+      name: 'scroll',
+      setter: 'BoolSetter',
+    },
     {
       title: {
         label: {
@@ -62,8 +85,8 @@ const PisellContentMeta: ComponentMetadata = {
 
 const snippets: Snippet[] = [
   {
-    title: 'PisellContent',
-    screenshot: '',
+    title: '内容',
+    screenshot: require('./__screenshots__/content.png'),
     schema: {
       componentName: 'PisellContent',
       props: {
@@ -74,7 +97,7 @@ const snippets: Snippet[] = [
           lineHeight: '120px',
           textAlign: 'center',
         },
-
+        scroll: true,
       },
     },
   },

package/lowcode/pisell-drop-sort/meta.ts

@@ -0,0 +1,362 @@
+import {
+  IPublicTypeComponentMetadata,
+  IPublicTypeSnippet,
+} from '@alilc/lowcode-types';
+
+const PisellDropSortMeta: IPublicTypeComponentMetadata = {
+  componentName: 'PisellDropSort',
+  title: '拖拽排序',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellDropSort',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [
+    {
+      name: 'value',
+      propType: 'object',
+    },
+    {
+      name: 'allowDrag',
+      propType: 'bool',
+      description: '允许拖拽',
+      defaultValue: true,
+    },
+    {
+      name: 'allowDelete',
+      propType: 'bool',
+      description: '允许删除',
+      defaultValue: true,
+    },
+    {
+      name: 'allowAddChild',
+      propType: 'bool',
+      description: '允许添加子节点',
+      defaultValue: true,
+    },
+    {
+      name: 'allowAddRoot',
+      propType: 'bool',
+      description: '允许添加根节点',
+      defaultValue: true,
+    },
+    {
+      name: 'disabled',
+      propType: 'bool',
+      description: '是否禁用',
+      defaultValue: false,
+    },
+    {
+      name: 'spacing',
+      propType: 'number',
+      description: '间距',
+      defaultValue: 8,
+    },
+    {
+      name: 'maxLevel',
+      propType: 'number',
+      description: '最大层级数',
+      defaultValue: 3,
+    },
+    {
+      name: 'showBorder',
+      propType: 'bool',
+      description: '显示边框',
+      defaultValue: true,
+    },
+    {
+      name: 'className',
+      propType: 'string',
+      description: '类名',
+    },
+    {
+      name: 'style',
+      propType: 'object',
+      description: '样式',
+    },
+    {
+      name: 'onDragEnd',
+      propType: 'func',
+      description: '拖拽完成回调',
+    },
+    {
+      name: 'onDelete',
+      propType: 'func',
+      description: '删除节点回调',
+    },
+    {
+      name: 'onAdd',
+      propType: 'func',
+      description: '添加节点回调',
+    },
+    {
+      name: 'renderItem',
+      propType: {
+        type: 'func',
+      },
+      setter: [
+        {
+          componentName: 'SlotSetter',
+          title: '渲染函数插槽',
+          initialValue: {
+            type: 'JSSlot',
+            params: ['option'],
+          },
+        },
+        {
+          componentName: 'FunctionSetter',
+          props: {
+            template:
+              'renderItem(item,${extParams}){\n// 自定义渲染\nreturn `item`;\n}',
+          },
+        },
+        'VariableSetter',
+      ],
+    },
+    {
+      name: 'leftContent',
+      propType: {
+        type: 'func',
+      },
+      description: '左侧自定义内容',
+    },
+    {
+      name: 'rightContent',
+      propType: {
+        type: 'func',
+      },
+      description: '右侧自定义内容',
+    },
+  ],
+  configure: {
+    props: [
+      {
+        name: 'value',
+        setter: 'JsonSetter',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Data source',
+            'zh-CN': '数据源',
+          },
+        },
+      },
+      {
+        name: 'allowDrag',
+        setter: 'BoolSetter',
+        defaultValue: true,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Allow drag',
+            'zh-CN': '允许拖拽',
+          },
+        },
+      },
+      {
+        name: 'allowDelete',
+        setter: 'BoolSetter',
+        defaultValue: true,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Allow delete',
+            'zh-CN': '允许删除',
+          },
+        },
+      },
+      {
+        name: 'allowAddChild',
+        setter: 'BoolSetter',
+        defaultValue: true,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Allow add child',
+            'zh-CN': '允许添加子节点',
+          },
+        },
+      },
+      {
+        name: 'allowAddRoot',
+        setter: 'BoolSetter',
+        defaultValue: true,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Allow add root',
+            'zh-CN': '允许添加根节点',
+          },
+        },
+      },
+      {
+        name: 'disabled',
+        setter: 'BoolSetter',
+        defaultValue: false,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Disabled',
+            'zh-CN': '是否禁用',
+          },
+        },
+      },
+      {
+        name: 'spacing',
+        setter: 'NumberSetter',
+        defaultValue: 8,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Spacing',
+            'zh-CN': '间距',
+          },
+        },
+      },
+      {
+        name: 'maxLevel',
+        setter: 'NumberSetter',
+        defaultValue: 3,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Max level',
+            'zh-CN': '最大层级数',
+          },
+        },
+      },
+      {
+        name: 'showBorder',
+        setter: 'BoolSetter',
+        defaultValue: true,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Show border',
+            'zh-CN': '显示边框',
+          },
+        },
+      },
+      {
+        name: 'renderItem',
+        title: { label: '自定义渲染', tip: '自定义渲染选项内容' },
+        setter: [
+          {
+            componentName: 'SlotSetter',
+            title: '渲染函数插槽',
+            initialValue: {
+              type: 'JSSlot',
+              params: ['item'],
+            },
+          },
+          {
+            componentName: 'FunctionSetter',
+            props: {
+              template:
+                'renderItem(item,${extParams}){\n// 自定义渲染\nreturn `item`;\n}',
+            },
+          },
+          'VariableSetter',
+        ],
+      },
+      {
+        name: 'leftContent',
+        title: { label: '左侧自定义内容', tip: '左侧自定义内容' },
+        setter: {
+          componentName: 'SlotSetter',
+          title: '左侧自定义内容',
+          initialValue: {
+            type: 'JSSlot',
+          },
+        },
+      },
+      {
+        name: 'rightContent',
+        title: { label: '右侧自定义内容', tip: '右侧自定义内容' },
+        setter: {
+          componentName: 'SlotSetter',
+          title: '右侧自定义内容',
+          initialValue: {
+            type: 'JSSlot',
+          },
+        },
+      },
+    ],
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        {
+          name: 'onChange',
+          template: "onChange(item,${extParams}){\n// 节点变化回调\nconsole.log('onChange',item);}",
+        },
+        {
+          name: 'onDelete',
+          template: "onDelete(item,${extParams}){\n// 删除节点回调\nconsole.log('onDelete',item);}",
+        },
+        {
+          name: 'onAdd',
+          template: "onAdd(item,${extParams}){\n// 添加节点回调\nconsole.log('onAdd',item);}",
+        },
+        {
+          name: 'onDragEnd',
+          template: "onDragEnd(item,${extParams}){\n// 拖拽完成回调\nconsole.log('onDragEnd',item);}",
+        },
+        {
+          name: 'onAddRoot',
+          template: "onAddRoot(item,${extParams}){\n// 添加根节点回调\nconsole.log('onAddRoot',item);}",
+        }
+      ],
+    },
+  },
+};
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: '拖拽排序',
+    screenshot: '',
+    schema: {
+      title: "拖拽排序",
+      componentName: 'PisellDropSort',
+      props: {
+        renderItem: {
+          type: 'JSSlot',
+          params: ['item'],
+        },
+        leftContent: {
+          type: 'JSSlot',
+        },
+        value: [
+          {
+            id: '1',
+            title: '节点1',
+            children: [
+              {
+                id: '1-1',
+                title: '节点1-1',
+              },
+            ],
+          },
+          {
+            id: '2',
+            title: '节点2',
+          },
+        ],
+      },
+    },
+  },
+];
+
+export default {
+  ...PisellDropSortMeta,
+  snippets,
+};

package/lowcode/pisell-footer/meta.ts

@@ -2,10 +2,11 @@ import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
 
 const PisellFooterMeta: ComponentMetadata = {
   componentName: 'PisellFooter',
-  title: 'PisellFooter',
+  title: '底部',
   docUrl: '',
-  screenshot: '',
+  screenshot: require('./__screenshots__/footer.png'),
   devMode: 'proCode',
+  category: "布局",
   npm: {
     package: '@pisell/materials',
     version: '1.0.3',
@@ -26,6 +27,17 @@ const PisellFooterMeta: ComponentMetadata = {
       name: 'className',
       setter: 'StringSetter',
     },
+    {
+      title: {
+        label: {
+          type: 'i18n',
+          'en-US': 'height',
+          'zh-CN': '高度',
+        },
+      },
+      name: 'height',
+      setter: 'NumberSetter',
+    },
     {
       title: {
         label: {
@@ -51,8 +63,8 @@ const PisellFooterMeta: ComponentMetadata = {
 
 const snippets: Snippet[] = [
   {
-    title: 'PisellFooter',
-    screenshot: '',
+    title: '底部',
+    screenshot: require('./__screenshots__/footer.png'),
     schema: {
       componentName: 'PisellFooter',
       props: {
@@ -61,6 +73,7 @@ const snippets: Snippet[] = [
           color: '#fff',
           textAlign: 'center',
         },
+        height: 80,
       },
       children: [{
         componentName: 'PisellText',

package/lowcode/pisell-header/meta.ts

@@ -2,10 +2,11 @@ import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
 
 const PisellHeaderMeta: ComponentMetadata = {
   componentName: 'PisellHeader',
-  title: 'PisellHeader',
+  title: '头部',
   docUrl: '',
-  screenshot: '',
+  screenshot: require('./__screenshots__/header.png'),
   devMode: 'proCode',
+  category: "布局",
   npm: {
     package: '@pisell/materials',
     version: '1.0.3',
@@ -26,6 +27,28 @@ const PisellHeaderMeta: ComponentMetadata = {
       name: 'className',
       setter: 'StringSetter',
     },
+    {
+      title: {
+        label: {
+          type: 'i18n',
+          'en-US': 'height',
+          'zh-CN': '高度',
+        },
+      },
+      name: 'height',
+      setter: 'NumberSetter',
+    },
+    {
+      title: {
+        label: {
+          type: 'i18n',
+          'en-US': 'Fixed header',
+          'zh-CN': '固定头部',
+        },
+      },
+      name: 'fixed',
+      setter: 'BoolSetter',
+    },
     {
       title: {
         label: {
@@ -51,18 +74,19 @@ const PisellHeaderMeta: ComponentMetadata = {
 
 const snippets: Snippet[] = [
   {
-    title: 'PisellHeader',
-    screenshot: '',
+    title: '头部',
+    screenshot: require('./__screenshots__/header.png'),
     schema: {
       componentName: 'PisellHeader',
       props: {
         style: {
           backgroundColor: '#1890ff',
           color: '#fff',
-          height: 64,
           lineHeight: '64px',
           textAlign: 'center',
         },
+        height: 64,
+        fixed: true,
       },
       children: [{
         componentName: 'PisellText',

package/lowcode/pisell-layout/meta.ts

@@ -2,9 +2,10 @@ import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode
 
 const PisellLayoutMeta: IPublicTypeComponentMetadata = {
   componentName: 'PisellLayout',
-  title: 'PisellLayout',
+  title: 'Layout布局容器',
   docUrl: '',
-  screenshot: '',
+  screenshot: require('./__screenshots__/layout.png'),
+  category: "布局",
   devMode: 'proCode',
   npm: {
     package: '@pisell/materials',
@@ -63,8 +64,8 @@ const PisellLayoutMeta: IPublicTypeComponentMetadata = {
 
 const snippets: IPublicTypeSnippet[] = [
   {
-    title: 'PisellLayout',
-    screenshot: '',
+    title: 'Layout布局容器',
+    screenshot: require('./__screenshots__/layout.png'),
     schema: {
       componentName: 'PisellLayout',
       props: {
@@ -79,10 +80,11 @@ const snippets: IPublicTypeSnippet[] = [
             style: {
               backgroundColor: '#1890ff',
               color: '#fff',
-              height: 64,
               lineHeight: '64px',
               textAlign: 'center',
             },
+            height: 64,
+            fixed: true,
           },
           children: [{
             componentName: 'PisellText',
@@ -131,6 +133,7 @@ const snippets: IPublicTypeSnippet[] = [
                   lineHeight: '120px',
                   textAlign: 'center',
                 },
+                scroll: true,
               },
               // children: [{
               //   componentName: 'PisellText',
@@ -152,6 +155,7 @@ const snippets: IPublicTypeSnippet[] = [
               color: '#fff',
               textAlign: 'center',
             },
+            height: 80
           },
           children: [{
             componentName: 'PisellText',
@@ -161,6 +165,7 @@ const snippets: IPublicTypeSnippet[] = [
               },
             },
             children: 'Footer',
+
           },],
         },
       ],