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, };