@vtj/materials 0.9.30 → 0.10.1-alpha.0

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;

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

@@ -0,0 +1,207 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Map',
+  label: '地图组件',
+  categoryId: 'media',
+  props: [
+    {
+      name: 'longitude',
+      title: '中心经度',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'latitude',
+      title: '中心纬度',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'scale',
+      title: '缩放级别，取值范围为3-20',
+      defaultValue: 16,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'theme',
+      title: '主题',
+      defaultValue: 'normal',
+      setters: 'SelectSetter',
+      options: ['satellite', 'normal']
+    },
+    {
+      name: 'min-scale',
+      title: '最小缩放级别',
+      defaultValue: 3,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'max-scale',
+      title: '最大缩放级别',
+      defaultValue: 20,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'layer-style',
+      title: '个性化地图',
+      defaultValue: 1,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'markers',
+      title: '标记点',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'polyline',
+      title: '路线',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'circles',
+      title: '圆',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'controls',
+      title: '控件',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'include-points',
+      title: '缩放视野以包含所有给定的坐标点',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'zIndex',
+      title: '显示层级',
+      defaultValue: false,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'enable-3D',
+      title: '是否显示3D楼块',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-compass',
+      title: '是否显示指南针',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'enable-zoom',
+      title: '是否支持缩放',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'enable-scroll',
+      title: '是否支持拖动',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'enable-rotate',
+      title: '是否支持旋转',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'rotate',
+      title: '旋转角度(范围0-360)地图正北和设备 y 轴角度的夹角',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'skew',
+      title: '倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'enable-overlooking',
+      title: '是否开启俯视',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'enable-satellite',
+      title: '是否开启卫星图',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'enable-traffic',
+      title: '是否开启实时路况',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'enable-poi',
+      title: '是否展示 POI 点',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'enable-building',
+      title: '是否展示建筑物',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-location',
+      title: '显示带有方向的当前定位点',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'polygons',
+      title: '多边形',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'polygon',
+      title: '多边形(支付宝)',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'enable-indoorMap',
+      title: '是否展示室内地图',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    'markertap',
+    'labeltap',
+    'callouttap',
+    'controltap',
+    'regionchange',
+    'tap',
+    'updated',
+    'anchorpointtap',
+    'poitap'
+  ],
+  snippet: {
+    props: {
+      style: {
+        width: '100%',
+        height: '300px'
+      },
+      latitude: '39.909',
+      longitude: '116.39742',
+      markers: [
+        {
+          latitude: 39.909,
+          longitude: 116.39742
+        },
+        {
+          latitude: 39.9,
+          longitude: 116.39
+        }
+      ]
+    }
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,59 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'MatchMedia',
+  label: '适配大屏小屏',
+  categoryId: 'container',
+  props: [
+    {
+      name: 'min-width',
+      title: '页面最小宽度（ px 为单位）',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'max-width',
+      title: '页面最大宽度（ px 为单位）',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'width',
+      title: '页面宽度（ px 为单位）',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'min-height',
+      title: '页面最小高度（ px 为单位）',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'max-height',
+      title: '页面最大高度（ px 为单位）',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'height',
+      title: '页面高度（ px 为单位）',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'orientation',
+      title: '屏幕方向',
+      setters: 'SelectSetter',
+      options: ['landscape', 'portrait']
+    }
+  ],
+  snippet: {
+    props: {
+      'min-width': '375',
+      'max-width': '800'
+    },
+    children: [
+      {
+        name: 'View',
+        children: '当页面最小宽度 375px， 页面宽度最大 800px 时显示'
+      }
+    ]
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,31 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'MovableArea',
+  label: '可拖动区域',
+  categoryId: 'container',
+  props: [
+    {
+      name: 'scale-area',
+      title:
+        '当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'width',
+      title: '宽度 *',
+      defaultValue: '10px',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'height',
+      title: '高度 *',
+      defaultValue: '10px',
+      setters: 'StringSetter'
+    }
+  ],
+  snippet: {}
+};
+
+export default desc;