@vtj/materials 0.9.29 → 0.10.0

package/src/uni-h5/components/pickerView.ts

@@ -0,0 +1,163 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription[] = [
+  {
+    name: 'PickerView',
+    label: '选择器',
+    categoryId: 'form',
+    props: [
+      {
+        name: 'value',
+        title: '选中的项',
+        defaultValue: [],
+        setters: 'ArraySetter'
+      },
+      {
+        name: 'indicator-style',
+        title: '设置选择器中间选中框的样式',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'indicator-class',
+        title: '设置选择器中间选中框的类名',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'mask-style',
+        title: '设置蒙层的样式',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'mask-top-style',
+        title: '设置蒙层上半部分的样式',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'mask-bottom-style',
+        title: '设置蒙层下半部分的样式',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'mask-class',
+        title: '设置蒙层的类名',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'immediate-change',
+        title:
+          '是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。',
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['change', 'pickstart', 'pickend'],
+    snippet: {
+      props: {
+        value: [9999, 10, 10],
+        'indicator-style': `height: 50px;`,
+        style: { width: ' 100%', height: '300px', marginTop: '20px' }
+      },
+      children: [
+        {
+          name: 'PickerViewColumn',
+          children: [
+            {
+              name: 'View',
+              props: {
+                style: { 'text-align': 'center' }
+              },
+              children: {
+                type: 'JSExpression',
+                value: 'this.context.item'
+              },
+              directives: [
+                {
+                  name: 'vFor',
+                  value: {
+                    type: 'JSExpression',
+                    value: '["2021年","2022年","2023年","2024年"]'
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          name: 'PickerViewColumn',
+          children: [
+            {
+              name: 'View',
+              props: {
+                style: { 'text-align': 'center' }
+              },
+              children: {
+                type: 'JSExpression',
+                value: 'this.context.item'
+              },
+              directives: [
+                {
+                  name: 'vFor',
+                  value: {
+                    type: 'JSExpression',
+                    value: '["3月","4月","5月","6月", "7月"]'
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          name: 'PickerViewColumn',
+          children: [
+            {
+              name: 'View',
+              props: {
+                style: { 'text-align': 'center' }
+              },
+              children: {
+                type: 'JSExpression',
+                value: 'this.context.item'
+              },
+              directives: [
+                {
+                  name: 'vFor',
+                  value: {
+                    type: 'JSExpression',
+                    value: '["3号","4号","5号","6号", "7号"]'
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'PickerViewColumn',
+    label: '选择器列',
+    parentIncludes: ['PickerView'],
+    categoryId: 'form',
+    snippet: {
+      children: [
+        {
+          name: 'View',
+          children: {
+            type: 'JSExpression',
+            value: 'this.context.item'
+          },
+          directives: [
+            {
+              name: 'vFor',
+              value: {
+                type: 'JSExpression',
+                value: '["2021年","2022年","2023年","2024年"]'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+];
+
+export default desc;

package/src/uni-h5/components/progress.ts

@@ -0,0 +1,71 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Progress',
+  label: '进度条',
+  categoryId: 'basic',
+  props: [
+    { name: 'percent', title: '百分比0~100', setters: 'NumberSetter' },
+    {
+      name: 'show-info',
+      title: '在进度条右侧显示百分比',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'border-radius',
+      title: '圆角大小',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'font-size',
+      title: '右侧百分比字体大小',
+      defaultValue: 16,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'stroke-width',
+      title: '进度条线的宽度，单位px',
+      defaultValue: 6,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'activeColor',
+      title: '已选择的进度条的颜色',
+      defaultValue: '#09BB07',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'backgroundColor',
+      title: '未选择的进度条的颜色',
+      defaultValue: '#EBEBEB',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'active',
+      title: '进度条从左往右的动画',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'active-mode',
+      title: 'backwards: 动画从头播；forwards：动画从上次结束点接着播',
+      defaultValue: 'backwards',
+      setters: 'SelectSetter',
+      options: ['backwards', 'forwards']
+    },
+    {
+      name: 'duration',
+      title: '进度增加1%所需毫秒数',
+      defaultValue: 30,
+      setters: 'NumberSetter'
+    }
+  ],
+  events: ['activeend'],
+  snippet: {
+    props: { percent: 10, 'show-info': true, 'stroke-width': '3' }
+  }
+};
+
+export default desc;

package/src/uni-h5/components/radio.ts

@@ -0,0 +1,127 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription[] = [
+  {
+    name: 'RadioGroup',
+    label: '单项选择器',
+    categoryId: 'form',
+    events: ['change'],
+    snippet: {
+      props: {},
+      children: [
+        {
+          name: 'Label',
+          props: {
+            key: {
+              type: 'JSExpression',
+              value: 'this.context.item.value'
+            },
+            style: { display: 'flex', flexDirection: 'row' }
+          },
+
+          children: [
+            {
+              name: 'View',
+              children: [
+                {
+                  name: 'Radio',
+                  props: {
+                    value: {
+                      type: 'JSExpression',
+                      value: 'this.context.item.value'
+                    },
+                    checked: 'this.context.index === 0'
+                  }
+                }
+              ]
+            },
+            {
+              name: 'View',
+              children: {
+                type: 'JSExpression',
+                value: 'this.context.item.name'
+              }
+            }
+          ],
+          directives: [
+            {
+              name: 'vFor',
+              value: {
+                type: 'JSExpression',
+                value:
+                  "[{value: 'USA',name: '美国',checked: 'true'},{value: 'CHN',name:'中国'},{value: 'BRA',	name: '巴西'},{value: 'JPN',name: '日本'},{value: 'ENG',name: '英国'},{value: 'FRA',name: '法国'}]"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'Radio',
+    label: '单选项目',
+    categoryId: 'form',
+    props: [
+      {
+        name: 'value',
+        title:
+          '<radio> 标识。当该 <radio> 选中时，<radio-group> 的 change 事件会携带 <radio> 的 value',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'checked',
+        title: '当前是否选中',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'disabled',
+        title: '是否禁用',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'color',
+        title: 'radio的颜色，同css的color',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'backgroundColor',
+        title: 'radio默认的背景颜色',
+        defaultValue: '#ffffff',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'borderColor',
+        title: 'radio默认的边框颜色',
+        defaultValue: '#d1d1d1',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'activeBackgroundColor',
+        title: 'radio选中时的背景颜色，优先级大于color属性',
+        defaultValue: '#007AFF',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'activeBorderColor',
+        title: 'radio选中时的边框颜色',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'iconColor',
+        title: 'radio的图标颜色',
+        defaultValue: '#ffffff',
+        setters: 'ColorSetter'
+      }
+    ],
+    snippet: {
+      props: {
+        checked: false
+      },
+      children: '选项'
+    }
+  }
+];
+
+export default desc;

package/src/uni-h5/components/richText.ts

@@ -0,0 +1,67 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'RichText',
+  label: '文本',
+  categoryId: 'basic',
+  props: [
+    {
+      name: 'nodes',
+      title: '节点列表 / HTML String',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'space',
+      title: '显示连续空格',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'selectable',
+      title: '富文本是否可以长按选中，可用于复制，粘贴等场景',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'image-menu-prevent',
+      title: '阻止长按图片时弹起默认菜单',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'preview',
+      title: '富文本中的图片是否可点击预览',
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    'click',
+    'touchstart',
+    'touchmove',
+    'touchcancel',
+    'touchend',
+    'longpress',
+    'itemclick'
+  ],
+  snippet: {
+    props: {
+      nodes: [
+        {
+          name: 'div',
+          attrs: {
+            class: 'div-class',
+            style: 'line-height: 60px; color: red; text-align:center;'
+          },
+          children: [
+            {
+              type: 'text',
+              text: 'Hello uni-app!'
+            }
+          ]
+        }
+      ]
+    }
+  }
+};
+
+export default desc;

package/src/uni-h5/components/scrollView.ts

@@ -0,0 +1,157 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'ScrollView',
+  label: '滚动视图',
+  categoryId: 'container',
+  props: [
+    {
+      name: 'scroll-x',
+      title: '允许横向滚动',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'scroll-y',
+      title: '允许纵向滚动',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'upper-threshold',
+      title: '距顶部/左边多远时（单位px），触发 scrolltoupper 事件',
+      defaultValue: 50,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'lower-threshold',
+      title: '距底部/右边多远时（单位px），触发 scrolltolower 事件',
+      defaultValue: 50,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'scroll-top',
+      title: '设置竖向滚动条位置',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'scroll-left',
+      title: '设置横向滚动条位置',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'scroll-into-view',
+      title:
+        '值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'scroll-with-animation',
+      title: '在设置滚动条位置时使用动画过渡',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'enable-back-to-top',
+      title: 'iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-scrollbar',
+      title: '控制是否出现滚动条',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'refresher-enabled',
+      title: '开启自定义下拉刷新',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'refresher-threshold',
+      title: '设置自定义下拉刷新阈值',
+      defaultValue: 45,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'refresher-default-style',
+      title: '设置自定义下拉刷新默认样式',
+      defaultValue: 'black',
+      setters: 'SelectSetter',
+      options: ['black', 'white', 'none', 'none']
+    },
+    {
+      name: 'refresher-background',
+      title: '设置自定义下拉刷新区域背景颜色',
+      defaultValue: '#FFF',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'refresher-triggered',
+      title: '设置当前下拉刷新状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'enable-flex',
+      title: '启用 flexbox 布局',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'scroll-anchoring',
+      title: '开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    'scrolltoupper',
+    'scrolltolower',
+    'scroll',
+    'refresherpulling',
+    'refresherrefresh',
+    'refresherrestore',
+    'refresherabort'
+  ],
+  snippet: {
+    props: {
+      'scroll-y': true,
+      'scroll-top': 0,
+      style: { height: '300px' }
+    },
+    children: [
+      {
+        name: 'view',
+        props: {
+          id: 'demo1',
+          class: 'scroll-view-item uni-bg-red',
+          style: { 'min-height': '300px', background: 'red' }
+        },
+        children: 'A'
+      },
+      {
+        name: 'view',
+        props: {
+          id: 'demo2',
+          class: 'scroll-view-item uni-bg-green',
+          style: { 'min-height': '300px', background: 'green' }
+        },
+        children: 'B'
+      },
+      {
+        name: 'view',
+        props: {
+          id: 'demo3',
+          class: 'scroll-view-item uni-bg-blue',
+          style: { 'min-height': '300px', background: 'blue' }
+        },
+        children: 'C'
+      }
+    ]
+  }
+};
+
+export default desc;

package/src/uni-h5/components/slider.ts

@@ -0,0 +1,75 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Slider',
+  label: '滑动选择器',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'min',
+      title: '最小值',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'max',
+      title: '最大值',
+      defaultValue: '100',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'step',
+      title: '步长，取值必须大于 0，并且可被(max - min)整除',
+      defaultValue: 1,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'value',
+      title: '当前取值',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'activeColor',
+      title: '滑块左侧已选择部分的线条颜色',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'backgroundColor',
+      title: '滑块右侧背景条的颜色',
+      defaultValue: '#e9e9e9',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'block-size',
+      title: '滑块的大小，取值范围为 12 - 28',
+      defaultValue: 28,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'block-color',
+      title: '滑块的颜色',
+      defaultValue: '#ffffff',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'show-value',
+      title: '是否显示当前 value',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['change', 'changing'],
+  snippet: {
+    props: {
+      value: 60
+    }
+  }
+};
+export default desc;