@pisell/materials 1.0.982 → 1.0.987

package/lowcode/pisell-scroll-view/meta.ts

@@ -0,0 +1,654 @@
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const PisellScrollViewMeta: IPublicTypeComponentMetadata = {
+  componentName: 'PisellScrollView',
+  title: 'PisellScrollView',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellScrollView',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      /* ==================== 基础属性 ==================== */
+      {
+        name: 'children',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Children',
+            'zh-CN': '子元素',
+          },
+        },
+        setter: 'SlotSetter',
+      },
+      {
+        name: 'className',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'ClassName',
+            'zh-CN': '类名',
+          },
+        },
+        setter: ['PisellI18nSetter', 'StringSetter'],
+      },
+      {
+        name: 'style',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Style',
+            'zh-CN': '样式',
+          },
+        },
+        setter: 'StyleSetter',
+      },
+
+      /* ==================== 滚动方向控制 ==================== */
+      {
+        name: 'overflow',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Overflow',
+            'zh-CN': '滚动方向',
+          },
+          tip: '控制滚动的方向',
+        },
+        setter: {
+          componentName: 'SelectSetter',
+          props: {
+            options: [
+              { title: '自动 (auto)', value: 'auto' },
+              { title: '滚动 (scroll)', value: 'scroll' },
+              { title: '隐藏 (hidden)', value: 'hidden' },
+              { title: '水平 (x)', value: 'x' },
+              { title: '垂直 (y)', value: 'y' },
+              { title: '双向 (both)', value: 'both' },
+            ],
+          },
+        },
+        defaultValue: 'auto',
+      },
+
+      /* ==================== 滚动条样式 ==================== */
+      {
+        name: 'scrollbarStyle',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Scrollbar Style',
+            'zh-CN': '滚动条样式',
+          },
+        },
+        setter: {
+          componentName: 'SelectSetter',
+          props: {
+            options: [
+              { title: '默认', value: 'default' },
+              { title: '细条', value: 'thin' },
+              { title: '极简', value: 'minimal' },
+              { title: '圆角', value: 'rounded' },
+              { title: '悬浮', value: 'overlay' },
+              { title: '自定义', value: 'custom' },
+              { title: '无', value: 'none' },
+            ],
+          },
+        },
+        defaultValue: 'default',
+      },
+      {
+        name: 'scrollbarClassName',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Scrollbar ClassName',
+            'zh-CN': '自定义滚动条类名',
+          },
+          tip: '当 scrollbarStyle 为 custom 时使用',
+        },
+        setter: ['PisellI18nSetter', 'StringSetter'],
+        condition: (target) => target.getProps().getPropValue('scrollbarStyle') === 'custom',
+      },
+
+      /* ==================== 滚动控制按钮 ==================== */
+      {
+        type: 'group',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Scroll Actions',
+            'zh-CN': '滚动按钮',
+          },
+        },
+        display: 'accordion',
+        items: [
+          {
+            name: 'showScrollButtons',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Show Scroll Buttons',
+                'zh-CN': '显示滚动按钮',
+              },
+            },
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+          {
+            name: 'scrollActionsConfig.show',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Enable Actions',
+                'zh-CN': '启用操作按钮',
+              },
+            },
+            setter: 'BoolSetter',
+            condition: (target) => target.getProps().getPropValue('showScrollButtons'),
+          },
+          {
+            name: 'scrollActionsConfig.type',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Button Type',
+                'zh-CN': '按钮类型',
+              },
+            },
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  { title: '返回顶部', value: 'backTop' },
+                  { title: '右箭头', value: 'rArrows' },
+                  { title: '左右箭头', value: 'lrArrows' },
+                  { title: '上下箭头', value: 'tbArrows' },
+                  { title: '自定义', value: 'custom' },
+                ],
+              },
+            },
+            condition: (target) => target.getProps().getPropValue('showScrollButtons'),
+          },
+          {
+            name: 'scrollActionsConfig.scrollDistance',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Scroll Distance',
+                'zh-CN': '滚动距离',
+              },
+              tip: '每次点击按钮滚动的距离（像素）',
+            },
+            setter: 'NumberSetter',
+            condition: (target) => target.getProps().getPropValue('showScrollButtons'),
+          },
+        ],
+      },
+
+      /* ==================== 滚动事件 ==================== */
+      {
+        type: 'group',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Scroll Events',
+            'zh-CN': '滚动事件',
+          },
+        },
+        display: 'accordion',
+        items: [
+          {
+            name: 'onScroll',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Scroll',
+                'zh-CN': '滚动时触发',
+              },
+            },
+            setter: 'FunctionSetter',
+          },
+          {
+            name: 'onScrollStart',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Scroll Start',
+                'zh-CN': '开始滚动时触发',
+              },
+            },
+            setter: 'FunctionSetter',
+          },
+          {
+            name: 'onScrollEnd',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Scroll End',
+                'zh-CN': '滚动结束时触发',
+              },
+            },
+            setter: 'FunctionSetter',
+          },
+          {
+            name: 'scrollEndDelay',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Scroll End Delay',
+                'zh-CN': '滚动结束延迟',
+              },
+              tip: '滚动结束防抖延迟时间（ms），默认 150ms',
+            },
+            setter: 'NumberSetter',
+            defaultValue: 150,
+          },
+          {
+            name: 'onReachTop',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Reach Top',
+                'zh-CN': '到达顶部时触发',
+              },
+            },
+            setter: 'FunctionSetter',
+          },
+          {
+            name: 'onReachBottom',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Reach Bottom',
+                'zh-CN': '到达底部时触发',
+              },
+            },
+            setter: 'FunctionSetter',
+          },
+          {
+            name: 'onReachLeft',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Reach Left',
+                'zh-CN': '到达左边时触发',
+              },
+            },
+            setter: 'FunctionSetter',
+          },
+          {
+            name: 'onReachRight',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Reach Right',
+                'zh-CN': '到达右边时触发',
+              },
+            },
+            setter: 'FunctionSetter',
+          },
+          {
+            name: 'reachThreshold',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Reach Threshold',
+                'zh-CN': '边界阈值',
+              },
+              tip: '到达边界的像素阈值',
+            },
+            setter: 'NumberSetter',
+            defaultValue: 0,
+          },
+        ],
+      },
+
+      /* ==================== 视图监听 ==================== */
+      {
+        type: 'group',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Intersection Observer',
+            'zh-CN': '视图监听',
+          },
+        },
+        display: 'accordion',
+        items: [
+          {
+            name: 'intersection.enabled',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Enable',
+                'zh-CN': '启用视图监听',
+              },
+            },
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+          {
+            name: 'intersection.threshold',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Threshold',
+                'zh-CN': '交叉阈值',
+              },
+              tip: '取值范围 0-1，或者数组',
+            },
+            setter: ['NumberSetter', 'JsonSetter'],
+            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
+          },
+          {
+            name: 'intersection.rootMargin',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Root Margin',
+                'zh-CN': '根边距',
+              },
+              tip: '例如："10px 20px 30px 40px"',
+            },
+            setter: ['PisellI18nSetter', 'StringSetter'],
+            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
+          },
+          {
+            name: 'intersection.targetSelector',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Target Selector',
+                'zh-CN': '目标元素选择器',
+              },
+              tip: '需要监听的元素选择器',
+            },
+            setter: ['PisellI18nSetter', 'StringSetter'],
+            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
+          },
+          {
+            name: 'intersection.onEnterViewport',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Enter Viewport',
+                'zh-CN': '进入视图回调',
+              },
+            },
+            setter: 'FunctionSetter',
+            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
+          },
+          {
+            name: 'intersection.onLeaveViewport',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Leave Viewport',
+                'zh-CN': '离开视图回调',
+              },
+            },
+            setter: 'FunctionSetter',
+            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
+          },
+          {
+            name: 'intersection.onVisibilityChange',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Visibility Change',
+                'zh-CN': '可见度变化回调',
+              },
+            },
+            setter: 'FunctionSetter',
+            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
+          },
+        ],
+      },
+
+      /* ==================== 吸附滚动 ==================== */
+      {
+        type: 'group',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Snap Scroll',
+            'zh-CN': '吸附滚动',
+          },
+        },
+        display: 'accordion',
+        items: [
+          {
+            name: 'snapScroll.enabled',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Enable',
+                'zh-CN': '启用吸附滚动',
+              },
+            },
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+          {
+            name: 'snapScroll.type',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Type',
+                'zh-CN': '吸附类型',
+              },
+            },
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  { title: '强制吸附', value: 'mandatory' },
+                  { title: '就近吸附', value: 'proximity' },
+                ],
+              },
+            },
+            condition: (target) => target.getProps().getPropValue('snapScroll.enabled'),
+          },
+          {
+            name: 'snapScroll.align',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Align',
+                'zh-CN': '吸附对齐方式',
+              },
+            },
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  { title: '起始', value: 'start' },
+                  { title: '居中', value: 'center' },
+                  { title: '结束', value: 'end' },
+                ],
+              },
+            },
+            condition: (target) => target.getProps().getPropValue('snapScroll.enabled'),
+          },
+          {
+            name: 'snapScroll.onSnapStart',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Snap Start',
+                'zh-CN': '吸附开始回调',
+              },
+            },
+            setter: 'FunctionSetter',
+            condition: (target) => target.getProps().getPropValue('snapScroll.enabled'),
+          },
+          {
+            name: 'snapScroll.onSnapEnd',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'On Snap End',
+                'zh-CN': '吸附结束回调',
+              },
+            },
+            setter: 'FunctionSetter',
+            condition: (target) => target.getProps().getPropValue('snapScroll.enabled'),
+          },
+        ],
+      },
+
+      /* ==================== 尺寸 ==================== */
+      {
+        type: 'group',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Size',
+            'zh-CN': '尺寸',
+          },
+        },
+        display: 'accordion',
+        items: [
+          {
+            name: 'width',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Width',
+                'zh-CN': '宽度',
+              },
+            },
+            setter: ['NumberSetter', 'StringSetter'],
+          },
+          {
+            name: 'height',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Height',
+                'zh-CN': '高度',
+              },
+            },
+            setter: ['NumberSetter', 'StringSetter'],
+          },
+          {
+            name: 'maxWidth',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Max Width',
+                'zh-CN': '最大宽度',
+              },
+            },
+            setter: ['NumberSetter', 'StringSetter'],
+          },
+          {
+            name: 'maxHeight',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Max Height',
+                'zh-CN': '最大高度',
+              },
+            },
+            setter: ['NumberSetter', 'StringSetter'],
+          },
+          {
+            name: 'minWidth',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Min Width',
+                'zh-CN': '最小宽度',
+              },
+            },
+            setter: ['NumberSetter', 'StringSetter'],
+          },
+          {
+            name: 'minHeight',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Min Height',
+                'zh-CN': '最小高度',
+              },
+            },
+            setter: ['NumberSetter', 'StringSetter'],
+          },
+        ],
+      },
+    ],
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        'onScroll',
+        'onScrollStart',
+        'onScrollEnd',
+        'onReachTop',
+        'onReachBottom',
+        'onReachLeft',
+        'onReachRight',
+      ],
+    },
+  },
+};
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: '滚动容器',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellScrollView',
+      props: {
+        width: '100%',
+        height: '300px',
+        overflow: 'y',
+        scrollbarStyle: 'thin',
+      },
+      children: [
+        {
+          componentName: 'Text',
+          props: {
+            children: '这是滚动内容',
+          },
+        },
+      ],
+    },
+  },
+  {
+    title: '吸附滚动容器',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellScrollView',
+      props: {
+        width: '100%',
+        height: '400px',
+        overflow: 'y',
+        scrollbarStyle: 'minimal',
+        snapScroll: {
+          enabled: true,
+          type: 'mandatory',
+          align: 'start',
+        },
+      },
+    },
+  },
+];
+
+export default {
+  ...PisellScrollViewMeta,
+  snippets,
+};
+