@vtj/materials 0.9.30 → 0.10.0

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

@@ -0,0 +1,97 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'MovableView',
+  label: '可移动的视图容器',
+  categoryId: 'container',
+  parentIncludes: ['MovableArea'],
+  props: [
+    {
+      name: 'direction',
+      title: 'movable-view的移动方向',
+      defaultValue: 'none',
+      setters: 'SelectSetter',
+      options: ['all', 'vertical', 'horizontal', 'none']
+    },
+    {
+      name: 'inertia',
+      title: 'movable-view是否带有惯性',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'out-of-bounds',
+      title: '超过可移动区域后，movable-view是否还可以移动',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'x',
+      title: '定义x轴方向的偏移',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'y',
+      title: '定义y轴方向的偏移',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'damping',
+      title: '阻尼系数',
+      defaultValue: 20,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'friction',
+      title: '摩擦系数',
+      defaultValue: 2,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'scale',
+      title: '是否支持双指缩放',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'scale-min',
+      title: '定义缩放倍数最小值',
+      defaultValue: 0.1 / 0.5,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'scale-max',
+      title: '定义缩放倍数最大值',
+      defaultValue: 10,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'scale-value',
+      title: '定义缩放倍数，取值范围为 0.1/0.5 - 10',
+      defaultValue: 1,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'animation',
+      title: '是否使用动画',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['change', 'scale'],
+  snippet: {
+    props: {
+      x: 0,
+      y: 0,
+      direction: 'all'
+    }
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,90 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Navigator',
+  label: '页面跳转',
+  categoryId: 'nav',
+  props: [
+    {
+      name: 'url',
+      title: '应用内的跳转链接，值为相对路径或绝对路径',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'open-type',
+      title: '跳转方式',
+      defaultValue: 'navigate',
+      setters: 'SelectSetter',
+      options: [
+        'navigate',
+        'redirect',
+        'switchTab',
+        'reLaunch',
+        'navigateBack',
+        'exit'
+      ]
+    },
+    {
+      name: 'delta',
+      title: '当 open-type 为 "navigateBack" 时有效，表示回退的层数',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'animation-type',
+      title:
+        '当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果',
+      defaultValue: 'pop-in/out',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'animation-duration',
+      title:
+        '当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间',
+      defaultValue: 300,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'render-link',
+      title: '是否给 navigator 组件加一层 a 标签控制 ssr 渲染',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'hover-class',
+      title: '指定点击时的样式类，当hover-class="none"时，没有点击态效果',
+      defaultValue: 'navigator-hover',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'hover-stop-propagation',
+      title: '指定是否阻止本节点的祖先节点出现点击态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'hover-start-time',
+      title: '按住后多久出现点击态，单位毫秒',
+      defaultValue: 50,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'hover-stay-time',
+      title: '手指松开后点击态保留时间，单位毫秒',
+      defaultValue: 600,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'target',
+      title: '在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram',
+      defaultValue: 'self',
+      setters: 'StringSetter'
+    }
+  ],
+  snippet: {
+    children: [
+      { name: 'Button', props: { type: 'default' }, children: '跳转到新页面' }
+    ]
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,81 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Picker',
+  label: '选择器',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'mode',
+      title: '模式',
+      defaultValue: 'selector',
+      setters: 'SelectSetter',
+      options: ['selector', 'multiSelector', 'time', 'date', 'region']
+    },
+    {
+      name: 'range',
+      title: 'mode为 selector 或 multiSelector 时，range 有效',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'range-key',
+      title:
+        '当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'value',
+      title: 'value 的值表示选择了 range 中的第几个（下标从 0 开始）',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'selector-type',
+      title:
+        'UI类型,仅大屏时该属性生效，支持 picker、select、auto，默认在 iPad 以 picker 样式展示而在 PC 以 select 样式展示',
+      defaultValue: 'auto',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'start',
+      title: '表示有效时间范围的开始，字符串格式为"hh:mm"',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'end',
+      title: '表示有效时间范围的结束，字符串格式为"hh:mm"',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'fields',
+      title:
+        '有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI',
+      defaultValue: 'day',
+      setters: 'SelectSetter',
+      options: ['year', 'month', 'day']
+    },
+    {
+      name: 'custom-item',
+      title: '可为每一列的顶部添加一个自定义的项',
+      setters: 'StringSetter'
+    }
+  ],
+  events: ['change', 'cancel', 'columnchange'],
+  snippet: {
+    props: {
+      mode: 'selector',
+      range: ['中国', '美国', '巴西', '日本'],
+      value: 0,
+      children: [{ name: 'View', children: '中国' }]
+    }
+  }
+};
+
+export default desc;

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;