@vtj/materials 0.9.29 → 0.10.0

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;

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

@@ -0,0 +1,119 @@
+import type {
+  Material,
+  MaterialCategory,
+  MaterialDescription
+} from '@vtj/core';
+import { version } from '../../version';
+import { setPackageName } from '../../shared';
+// container 视图容器
+import view from './view';
+import scrollView from './scrollView';
+import swiper from './swiper';
+import matchMedia from './matchMedia';
+import matchArea from './movableArea';
+import movableView from './movableView';
+import coverView from './coverView';
+import coverImage from './coverImage';
+
+// basic 基础内容
+import icon from './icon';
+import text from './text';
+import richText from './richText';
+import progress from './progress';
+
+//form 表单组件
+import button from './button';
+import checkbox from './checkbox';
+import editor from './editor';
+import form from './form';
+import input from './input';
+import label from './label';
+import picker from './picker';
+import pickerView from './pickerView';
+import radio from './radio';
+import slider from './slider';
+import Switch from './Switch';
+import textarea from './textarea';
+
+// nav
+import navigator from './navigator';
+import audio from './audio';
+import image from './image';
+import video from './video';
+import map from './map';
+import canvas from './canvas';
+import webView from './webView';
+
+const name = '@dcloudio/uni-h5';
+const components: MaterialDescription[] = [
+  // container
+  view,
+  scrollView,
+  swiper,
+  matchMedia,
+  matchArea,
+  movableView,
+  coverView,
+  coverImage,
+  // basic
+  icon,
+  text,
+  richText,
+  progress,
+  // form
+  button,
+  checkbox,
+  editor,
+  form,
+  input,
+  label,
+  picker,
+  pickerView,
+  radio,
+  slider,
+  Switch,
+  textarea,
+  //nav
+  navigator,
+  audio,
+  image,
+  video,
+  map,
+  canvas,
+  webView
+].flat();
+
+const categories: MaterialCategory[] = [
+  {
+    id: 'container',
+    category: '视图组件'
+  },
+  {
+    id: 'basic',
+    category: '基础内容'
+  },
+  {
+    id: 'form',
+    category: '表单'
+  },
+  {
+    id: 'nav',
+    category: '路由与页面跳转'
+  },
+  {
+    id: 'media',
+    category: '媒体'
+  }
+];
+
+const material: Material = {
+  name,
+  version,
+  label: 'UniApp',
+  library: 'UniH5Material',
+  order: 4,
+  categories,
+  components: setPackageName(components, name)
+};
+
+export default material;

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

@@ -0,0 +1,220 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Input',
+  label: '单行输入框',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'value',
+      title: '输入框的初始内容',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'type',
+      title: 'input 的类型 有效值',
+      defaultValue: 'text',
+      setters: 'SelectSetter',
+      options: [
+        'text',
+        'number',
+        'idcard',
+        'digit',
+        'tel',
+        'safe-password',
+        'nickname'
+      ]
+    },
+    {
+      name: 'text-content-type',
+      title: '文本区域的语义，根据类型自动填充 有效值',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'password',
+      title: '是否是密码类型',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'placeholder',
+      title: '输入框为空时占位符',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'placeholder-style',
+      title: '指定 placeholder 的样式',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'placeholder-class',
+      title: '指定 placeholder 的样式类',
+      defaultValue: 'input-placeholder',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'maxlength',
+      title: '最大输入长度，设置为 -1 的时候不限制最大长度',
+      defaultValue: 140,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'cursor-spacing',
+      title: '指定光标与键盘的距离',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'focus',
+      title: '获取焦点',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'confirm-type',
+      title: '设置键盘右下角按钮的文字，仅在 type="text" 时生效。有效值',
+      defaultValue: 'done',
+      setters: 'SelectSetter',
+      options: ['send', 'search', 'next', 'go', 'done']
+    },
+    {
+      name: 'confirm-hold',
+      title: '点击键盘右下角按钮时是否保持键盘不收起',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'cursor',
+      title: '指定focus时的光标位置',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'cursor-color',
+      title: '光标颜色',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'selection-start',
+      title: '光标起始位置，自动聚集时有效，需与selection-end搭配使用',
+      defaultValue: -1,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'selection-end',
+      title: '光标结束位置，自动聚集时有效，需与selection-start搭配使用',
+      defaultValue: -1,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'adjust-position',
+      title: '键盘弹起时，是否自动上推页面',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'auto-blur',
+      title: '键盘收起时，是否自动失去焦点',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'ignoreCompositionEvent',
+      title: '是否忽略组件内对文本合成系统事件的处理',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'always-embed',
+      title:
+        '强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'hold-keyboard',
+      title: 'focus时，点击页面的时候不收起键盘',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'safe-password-cert-path',
+      title: '安全键盘加密公钥的路径，只支持包内路径',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'safe-password-length',
+      title: '安全键盘输入密码长度',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'safe-password-time-stamp',
+      title: '安全键盘加密时间戳',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'safe-password-nonce',
+      title: '安全键盘加密盐值',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'safe-password-salt',
+      title: '安全键盘计算 hash 盐值，若指定custom-hash 则无效',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'safe-password-custom-hash',
+      title: '安全键盘计算 hash 的算法表达式',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'random-number',
+      title: '当 type 为 number, digit, idcard 数字键盘是否随机排列',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'controlled',
+      title: '是否为受控组件。为 true 时，value 内容会完全受 setData 控制',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'always-system',
+      title:
+        '是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'inputmode',
+      title:
+        '是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示',
+      defaultValue: 'text',
+      setters: 'SelectSetter',
+      options: [
+        'none',
+        'text',
+        'decimal',
+        'numeric',
+        'tel',
+        'search',
+        'email',
+        'url'
+      ]
+    }
+  ],
+  events: ['input', 'focus', 'blur', 'confirm'],
+  snippet: {
+    props: {
+      placeholder: '这个是一个输入框'
+    }
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,17 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Label',
+  label: '标签',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'for',
+      title: '绑定控件的 id',
+      setters: 'StringSetter'
+    }
+  ],
+  snippet: {}
+};
+
+export default desc;