@vtj/materials 0.9.29 → 0.10.0

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;

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

@@ -0,0 +1,276 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Video',
+  label: '视频播放组件',
+  categoryId: 'media',
+  props: [
+    {
+      name: 'src',
+      title: '要播放视频的资源地址',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'autoplay',
+      title: '是否自动播放',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'loop',
+      title: '是否循环播放',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'muted',
+      title: '是否静音播放',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'initial-time',
+      title: '指定视频初始播放位置，单位为秒（s）',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'duration',
+      title: '指定视频时长，单位为秒（s）',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'controls',
+      title: '是否显示默认播放控件（播放/暂停按钮、播放进度、时间）',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'danmu-list',
+      title: '弹幕列表',
+      setters: 'ExpressionSetter'
+    },
+    {
+      name: 'danmu-btn',
+      title: '是否显示弹幕按钮，只在初始化时有效，不能动态变更',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'enable-danmu',
+      title: '是否展示弹幕，只在初始化时有效，不能动态变更',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'page-gesture',
+      title: '在非全屏模式下，是否开启亮度与音量调节手势',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'direction',
+      title: '设置全屏时视频的方向，不指定则根据宽高比自动判断',
+      setters: 'SelectSetter',
+      options: [
+        { label: '0', value: 0 },
+        { label: '90', value: 90 },
+        { label: '-90', value: -90 }
+      ]
+    },
+    {
+      name: 'show-progress',
+      title: '若不设置，宽度大于240时才会显示',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-fullscreen-btn',
+      title: '是否显示全屏按钮',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-play-btn',
+      title: '是否显示视频底部控制栏的播放按钮',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-center-play-btn',
+      title: '是否显示视频中间的播放按钮',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-loading',
+      title: '是否显示loading控件',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'enable-progress-gesture',
+      title: '是否开启控制进度的手势',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'object-fit',
+      title: '视频的表现形式',
+      defaultValue: 'contain',
+      setters: 'SelectSetter',
+      options: ['contain', 'fill', 'cover']
+    },
+    {
+      name: 'poster',
+      title:
+        '视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效	',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'show-mute-btn',
+      title: '是否显示静音按钮',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'title',
+      title: '视频的标题，全屏时在顶部展示',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'play-btn-position',
+      title: '播放按钮的位置',
+      defaultValue: 'bottom',
+      setters: 'SelectSetter',
+      options: ['bottom', 'center']
+    },
+    {
+      name: 'mobilenet-hint-type',
+      title: '移动网络提醒样式：0是不提醒，1是提醒，默认值为1',
+      defaultValue: 1,
+      setters: 'SelectSetter',
+      options: [
+        { label: '0', value: 0 },
+        { label: '1', value: 1 }
+      ]
+    },
+    {
+      name: 'enable-play-gesture',
+      title: '是否开启播放手势，即双击切换播放/暂停',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'auto-pause-if-navigate',
+      title: '当跳转到其它小程序页面时，是否自动暂停本页面的视频',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'auto-pause-if-open-native',
+      title: '当跳转到其它微信原生页面时，是否自动暂停本页面的视频',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'vslide-gesture',
+      title: '在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'vslide-gesture-in-fullscreen',
+      title: '在全屏模式下，是否开启亮度与音量调节手势',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'ad-unit-id',
+      title: '视频前贴广告单元ID',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'poster-for-crawler',
+      title: '用于给搜索等场景作为视频封面展示',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'codec',
+      title: '解码器选择',
+      defaultValue: 'hardware',
+      setters: 'SelectSetter',
+      options: ['hardware', 'software']
+    },
+    {
+      name: 'http-cache',
+      title: '是否对 http、https 视频源开启本地缓存',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'play-strategy',
+      title: '播放策略',
+      defaultValue: 0,
+      setters: 'SelectSetter',
+      options: [
+        { label: '0', value: 0 },
+        { label: '1', value: 1 },
+        { label: '2', value: 2 }
+      ]
+    },
+    {
+      name: 'header',
+      title: 'HTTP 请求 Header',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'is-live',
+      title: '是否为直播源',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    'play',
+    'pause',
+    'ended',
+    'timeupdate',
+    'fullscreenchange',
+    'waiting',
+    'error',
+    'progress',
+    'loadeddata',
+    'loadstart',
+    'seeked',
+    'seeking',
+    'loadedmetadata',
+    'fullscreenclick',
+    'controlstoggle'
+  ],
+  snippet: {
+    props: {
+      style: {
+        width: '300px',
+        height: '225px'
+      },
+      src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
+      'enable-danmu': true,
+      'danmu-btn': true,
+      controls: true,
+      danmuList: [
+        {
+          text: '第 1s 出现的弹幕',
+          color: '#ff0000',
+          time: 1
+        },
+        {
+          text: '第 3s 出现的弹幕',
+          color: '#ff00ff',
+          time: 3
+        }
+      ]
+    }
+  }
+};
+
+export default desc;