@vtj/materials 0.9.30 → 0.10.1-alpha.0

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;

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

@@ -0,0 +1,220 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription[] = [
+  {
+    name: 'Swiper',
+    label: '滑块视图容器',
+    categoryId: 'container',
+    props: [
+      {
+        name: 'indicator-dots',
+        title: '是否显示面板指示点',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'indicator-color',
+        title: '指示点颜色',
+        defaultValue: 'rgba(0, 0, 0, .3)',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'indicator-active-color',
+        title: '当前选中的指示点颜色',
+        defaultValue: '#000000',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'active-class',
+        title: 'swiper-item 可见时的 class',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'changing-class',
+        title:
+          'acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'autoplay',
+        title: '是否自动切换',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'current',
+        title: '当前所在滑块的 index',
+        defaultValue: 0,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'current-item-id',
+        title: '当前所在滑块的 item-id ，不能与 current 被同时指定',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'interval',
+        title: '自动切换时间间隔',
+        defaultValue: 5000,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'duration',
+        title: '滑动动画时长',
+        defaultValue: 500,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'circular',
+        title: '是否采用衔接滑动，即播放到末尾后重新回到开头',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'vertical',
+        title: '滑动方向是否为纵向',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'previous-margin',
+        title: '前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值',
+        defaultValue: '0px',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'next-margin',
+        title: '后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值',
+        defaultValue: '0px',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'acceleration',
+        title: '当开启时，会根据滑动速度，连续滑动多屏',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'disable-programmatic-animation',
+        title: '是否禁用代码变动触发 swiper 切换时使用动画',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'display-multiple-items',
+        title: '同时显示的滑块数量',
+        defaultValue: 1,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'skip-hidden-item-layout',
+        title:
+          '是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'disable-touch',
+        title: '是否禁止用户 touch 操作',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'touchable',
+        title: '是否监听用户的触摸事件，只在初始化时有效，不能动态变更',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'easing-function',
+        title: '指定 swiper 切换缓动动画类型',
+        defaultValue: 'default',
+        setters: 'SelectSetter',
+        options: [
+          'default',
+          'linear',
+          'easeInCubic',
+          'easeOutCubic',
+          'easeInOutCubic'
+        ]
+      }
+    ],
+    events: ['change', 'transition', 'animationfinish'],
+    snippet: {
+      props: {
+        autoplay: true,
+        indicatorDots: true,
+        circular: true,
+        style: {
+          color: '#fff',
+          height: '200px'
+        }
+      },
+      children: [
+        {
+          name: 'SwiperItem',
+          props: {
+            style: {
+              background: '#f76260',
+              textAlign: 'center',
+              color: '#fff',
+              height: '200px',
+              lineHeight: '200px'
+            }
+          },
+          children: 'A'
+        },
+        {
+          name: 'SwiperItem',
+          props: {
+            style: {
+              background: '#09bb07',
+              textAlign: 'center',
+              color: '#fff',
+              height: '200px',
+              lineHeight: '200px'
+            }
+          },
+          children: 'B'
+        },
+        {
+          name: 'SwiperItem',
+          props: {
+            style: {
+              background: '#007aff',
+              textAlign: 'center',
+              color: '#fff',
+              height: '200px',
+              lineHeight: '200px'
+            }
+          },
+          children: 'C'
+        }
+      ]
+    }
+  },
+  {
+    name: 'SwiperItem',
+    label: '滑块视图容器',
+    parentIncludes: ['Swiper'],
+    categoryId: 'container',
+    props: [
+      {
+        name: 'item-id',
+        title: '该 swiper-item 的标识符',
+        setters: 'InputSetter'
+      }
+    ],
+    snippet: {
+      children: [
+        {
+          name: 'View',
+          props: { style: { height: '300px', background: 'green' } },
+          children: 'A'
+        }
+      ]
+    }
+  }
+];
+
+export default desc;

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

@@ -0,0 +1,38 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Text',
+  label: '文本',
+  categoryId: 'basic',
+  props: [
+    {
+      name: 'selectable',
+      title: '文本是否可选',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'user-select',
+      title: '文本是否可选',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'space',
+      title: '显示连续空格',
+      setters: ['SelectSetter', 'StringSetter'],
+      options: ['ensp', 'emsp', 'nbsp']
+    },
+    {
+      name: 'decode',
+      title: '是否解码',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  snippet: {
+    children: 'VTJ'
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,169 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Textarea',
+  label: '多行输入框',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'value',
+      title: '输入框的内容',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'placeholder',
+      title: '输入框为空时占位符',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'placeholder-style',
+      title: '指定 placeholder 的样式',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'placeholder-class',
+      title: '指定 placeholder 的样式类',
+      defaultValue: 'textarea-placeholder',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'maxlength',
+      title: '最大输入长度，设置为 -1 的时候不限制最大长度',
+      defaultValue: 140,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'focus',
+      title: '获取焦点',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'auto-focus',
+      title: '自动聚焦，拉起键盘',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'auto-height',
+      title: '是否自动增高，设置auto-height时，style.height不生效',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'fixed',
+      title:
+        '如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'cursor-spacing',
+      title: '指定光标与键盘的距离，单位 px',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'cursor',
+      title: '指定focus时的光标位置',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'cursor-color',
+      title: '光标颜色',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'confirm-type',
+      title: '设置键盘右下角按钮的文字',
+      defaultValue: 'done',
+      setters: 'SelectSetter',
+      options: ['send', 'search', 'next', 'go', 'done']
+    },
+    {
+      name: 'confirm-hold',
+      title: '点击键盘右下角按钮时是否保持键盘不收起',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-confirm-bar',
+      title: '是否显示键盘上方带有”完成“按钮那一栏',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'selection-start',
+      title: '光标起始位置，自动聚焦时有效，需与selection-end搭配使用',
+      defaultValue: -1,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'selection-end',
+      title: '光标结束位置，自动聚焦时有效，需与selection-end搭配使用',
+      defaultValue: -1,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'adjust-position',
+      title: '键盘弹起时，是否自动上推页面',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disable-default-padding',
+      title: '是否去掉 iOS 下的默认内边距',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'hold-keyboard',
+      title: 'focus时，点击页面的时候不收起键盘',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'auto-blur',
+      title: '键盘收起时，是否自动失去焦点',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'ignoreCompositionEvent',
+      title: '是否忽略组件内对文本合成系统事件的处理',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'inputmode',
+      title: '提供了用户在编辑元素或其内容时可能输入的数据类型的提示',
+      defaultValue: 'text',
+      setters: 'SelectSetter',
+      options: [
+        'none',
+        'text',
+        'decimal',
+        'numeric',
+        'tel',
+        'search',
+        'email',
+        'url'
+      ]
+    }
+  ],
+  events: ['confirm', 'input', 'linechange', 'blur', 'focus'],
+  snippet: {
+    props: {
+      style: { backgroundColor: '#999' },
+      placeholder: '输入区域'
+    }
+  }
+};
+
+export default desc;