@vtj/materials 0.9.30 → 0.10.1-alpha.0

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

@@ -0,0 +1,206 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Button',
+  label: '按钮',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'size',
+      title: '按钮的大小',
+      defaultValue: 'default',
+      setters: 'SelectSetter',
+      options: ['default', 'mini']
+    },
+    {
+      name: 'type',
+      title: '按钮的样式类型',
+      defaultValue: 'default',
+      setters: 'SelectSetter',
+      options: ['primary', 'default', 'warn']
+    },
+    {
+      name: 'plain',
+      title: '按钮是否镂空，背景色透明',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'loading',
+      title: '名称前是否带 loading 图标',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'form-type',
+      title: '用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件',
+      setters: 'SelectSetter',
+      options: ['submit', 'reset']
+    },
+    {
+      name: 'open-type',
+      title: '开放能力',
+      setters: 'SelectSetter',
+      options: [
+        'feedback',
+        'share',
+        'getUserInfo',
+        'contact',
+        'getPhoneNumber',
+        'launchApp',
+        'openSetting',
+        'chooseAvatar',
+        'agreePrivacyAuthorization',
+        'uploadDouyinVideo',
+        'im',
+        'getAuthorize',
+        'lifestyle',
+        'contactShare',
+        'openGroupProfile',
+        'openGuildProfile',
+        'openPublicProfile',
+        'shareMessageToFriend',
+        'addFriend',
+        'addColorSign',
+        'addGroupApp',
+        'addToFavorites',
+        'chooseAddress',
+        'chooseInvoiceTitle',
+        'login',
+        'subscribe',
+        'favorite',
+        'watchLater',
+        'openProfile'
+      ]
+    },
+    {
+      name: 'hover-class',
+      title: '指定按钮按下去的样式类',
+      defaultValue: 'button-hover',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'hover-start-time',
+      title: '按住后多久出现点击态，单位毫秒',
+      defaultValue: 20,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'hover-stay-time',
+      title: '手指松开后点击态保留时间，单位毫秒',
+      defaultValue: 70,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'app-parameter',
+      title: '打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'hover-stop-propagation',
+      title: '指定是否阻止本节点的祖先节点出现点击态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'lang',
+      title: '指定返回用户信息的语言',
+      defaultValue: 'en',
+      setters: 'SelectSetter',
+      options: ['en', 'zh_CN', 'zh_TW']
+    },
+    {
+      name: 'session-from',
+      title: '会话来源，open-type="contact"时有效',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'send-message-title',
+      title: '会话内消息卡片标题，open-type="contact"时有效',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'send-message-path',
+      title: '会话内消息卡片点击跳转小程序路径，open-type="contact"时有效',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'send-message-img',
+      title: '会话内消息卡片图片，open-type="contact"时有效',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'show-message-card',
+      title: '是否显示会话内消息卡片',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'group-id',
+      title: '打开群资料卡时，传递的群号',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'guild-id',
+      title: '打开频道页面时，传递的频道号',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'public-id',
+      title: '打开公众号资料卡时，传递的号码',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'data-im-id',
+      title: '客服的抖音号',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'data-im-type',
+      title: 'IM卡片类型',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'data-goods-id',
+      title: '商品的id',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'data-order-id',
+      title: '订单的id，仅支持交易2.0订单',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'data-biz-line',
+      title: '商品类型，“1”代表生活服务，“2”代表泛知识。',
+      setters: 'StringSetter'
+    }
+  ],
+  events: [
+    'getphonenumber',
+    'getuserinfo',
+    'error',
+    'opensetting',
+    'launchapp',
+    'contact',
+    'chooseavatar',
+    'agreeprivacyauthorization',
+    'addgroupapp',
+    'chooseaddress',
+    'chooseinvoicetitle',
+    'subscribe',
+    'login',
+    'im'
+  ],
+  snippet: {
+    children: 'Button'
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,50 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Canvas',
+  label: '画布',
+  categoryId: 'media',
+  props: [
+    {
+      name: 'type',
+      title: '指定 canvas 类型，支持 2d (2.9.0) 和 webgl',
+      defaultValue: '',
+      setters: 'SelectSetter',
+      options: ['2d', 'webgl']
+    },
+    {
+      name: 'canvas-id',
+      title: 'canvas 组件的唯一标识符',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'disable-scroll',
+      title: '当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'hidpi',
+      title: '是否启用高清处理',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    'touchstart',
+    'touchmove',
+    'touchend',
+    'touchcancel',
+    'longtap',
+    'error'
+  ],
+  snippet: {
+    props: {
+      style: { width: '300px', height: '200px' },
+      'canvas-id': 'firstCanvas',
+      id: 'firstCanvas'
+    }
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,81 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription[] = [
+  {
+    name: 'CheckboxGroup',
+    label: '多选框组',
+    categoryId: 'form',
+    events: ['change'],
+    snippet: {
+      children: [
+        { name: 'Checkbox', props: { checked: true }, children: '选中' },
+        { name: 'Checkbox', props: { checked: false }, children: '未选中' }
+      ]
+    }
+  },
+  {
+    name: 'Checkbox',
+    label: '多选项',
+    categoryId: 'form',
+    props: [
+      {
+        name: 'value',
+        title:
+          '<checkbox> 标识，选中时触发 <checkbox-group> 的 change 事件，并携带 <checkbox> 的 value。',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'disabled',
+        title: '是否禁用',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'checked',
+        title: '当前是否选中，可用来设置默认选中',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'color',
+        title: 'checkbox的颜色，同css的color',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'backgroundColor',
+        title: 'checkbox默认的背景颜色',
+        defaultValue: '#ffffff',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'borderColor',
+        title: 'checkbox默认的边框颜色',
+        defaultValue: '#d1d1d1',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'activeBackgroundColor',
+        title: 'checkbox选中时的背景颜色，优先级大于color属性',
+        defaultValue: '#ffffff',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'activeBorderColor',
+        title: 'checkbox选中时的边框颜色',
+        defaultValue: '#d1d1d1',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'iconColor',
+        title: 'checkbox的图标颜色',
+        defaultValue: '#007aff',
+        setters: 'ColorSetter'
+      }
+    ],
+    snippet: {
+      children: '选项'
+    }
+  }
+];
+
+export default desc;

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

@@ -0,0 +1,18 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'CoverImage',
+  label: '图片视图',
+  categoryId: 'container',
+  props: [
+    {
+      name: 'src',
+      title: '图标路径。支持本地路径、网络路径。不支持 base64 格式。',
+      setters: 'StringSetter'
+    }
+  ],
+  events: ['load', 'error', 'click'],
+  snippet: {}
+};
+
+export default desc;

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

@@ -0,0 +1,19 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'CoverView',
+  label: '文本视图',
+  categoryId: 'container',
+  props: [
+    {
+      name: 'scroll-top',
+      title:
+        '设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效',
+      setters: ['NumberSetter', 'StringSetter']
+    }
+  ],
+  events: ['click'],
+  snippet: {}
+};
+
+export default desc;

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

@@ -0,0 +1,49 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Editor',
+  label: '富文本编辑器',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'read-only',
+      title: '设置编辑器为只读',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'placeholder',
+      title: '提示信息',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-img-size',
+      title: '点击图片时显示图片大小控件',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-img-toolbar',
+      title: '点击图片时显示工具栏控件',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-img-resize',
+      title: '点击图片时显示修改尺寸控件',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['ready', 'focus', 'blur', 'input', 'statuschange'],
+  snippet: {
+    props: {
+      placeholder: '开始输入...',
+      'show-img-size': true,
+      'show-img-toolbar': true,
+      'show-img-resize': true
+    }
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,53 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Form',
+  label: '表单',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'report-submit',
+      title: '是否返回 formId 用于发送模板消息',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'report-submit-timeout',
+      title: '等待一段时间（毫秒数）以确认 formId 是否生效',
+      setters: 'NumberSetter'
+    }
+  ],
+  events: ['submit', 'reset'],
+  snippet: {
+    children: [
+      {
+        name: 'Label',
+        children: [
+          { name: 'View', children: '用户名' },
+          {
+            name: 'Input',
+            props: {
+              style: { height: '40px', backgroundColor: '#f0f0f0' },
+              placeholder: '请输入用户名'
+            }
+          }
+        ]
+      },
+      {
+        name: 'Label',
+        children: [
+          { name: 'View', children: '密码' },
+          {
+            name: 'Input',
+            props: {
+              style: { height: '40px', backgroundColor: '#f0f0f0' },
+              placeholder: '请输入密码'
+            }
+          }
+        ]
+      },
+      { name: 'Button', children: '提交' }
+    ]
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,44 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Icon',
+  label: '图标',
+  categoryId: 'basic',
+  props: [
+    {
+      name: 'type',
+      title: 'icon的类型',
+      setters: 'SelectSetter',
+      options: [
+        'success',
+        'success_no_circle',
+        'info',
+        'warn',
+        'waiting',
+        'cancel',
+        'download',
+        'search',
+        'clear'
+      ]
+    },
+    {
+      name: 'size',
+      title: 'icon的大小， 单位px',
+      defaultValue: 23,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'color',
+      title: 'icon的颜色，同css的color',
+      setters: 'ColorSetter'
+    }
+  ],
+  snippet: {
+    props: {
+      type: 'success',
+      size: 26
+    }
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,80 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Image',
+  label: '图片',
+  categoryId: 'media',
+  props: [
+    {
+      name: 'src',
+      title: '图片资源地址',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'mode',
+      title: '图片裁剪、缩放的模式',
+      defaultValue: 'scaleToFill',
+      setters: 'SelectSetter',
+      options: [
+        'scaleToFill',
+        'aspectFit',
+        'aspectFill',
+        'widthFix',
+        'heightFix',
+        'top',
+        'bottom',
+        'center',
+        'left',
+        'right',
+        'top left',
+        'top right',
+        'bottom left',
+        'bottom right'
+      ]
+    },
+    {
+      name: 'lazy-load',
+      title: '图片懒加载',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'fade-show',
+      title: '图片显示动画效果',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'webp',
+      title:
+        '在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-menu-by-longpress',
+      title: '开启长按图片显示识别小程序码菜单',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'draggable',
+      title: '是否能拖动图片',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['error', 'load'],
+  snippet: {
+    props: {
+      src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+      style: {
+        width: '200px',
+        height: '200px',
+        backgroundColor: '#eeeeee'
+      }
+    }
+  }
+};
+
+export default desc;