@vtj/materials 0.9.29 → 0.10.0

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;

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

@@ -0,0 +1,97 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'MovableView',
+  label: '可移动的视图容器',
+  categoryId: 'container',
+  parentIncludes: ['MovableArea'],
+  props: [
+    {
+      name: 'direction',
+      title: 'movable-view的移动方向',
+      defaultValue: 'none',
+      setters: 'SelectSetter',
+      options: ['all', 'vertical', 'horizontal', 'none']
+    },
+    {
+      name: 'inertia',
+      title: 'movable-view是否带有惯性',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'out-of-bounds',
+      title: '超过可移动区域后，movable-view是否还可以移动',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'x',
+      title: '定义x轴方向的偏移',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'y',
+      title: '定义y轴方向的偏移',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'damping',
+      title: '阻尼系数',
+      defaultValue: 20,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'friction',
+      title: '摩擦系数',
+      defaultValue: 2,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'scale',
+      title: '是否支持双指缩放',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'scale-min',
+      title: '定义缩放倍数最小值',
+      defaultValue: 0.1 / 0.5,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'scale-max',
+      title: '定义缩放倍数最大值',
+      defaultValue: 10,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'scale-value',
+      title: '定义缩放倍数，取值范围为 0.1/0.5 - 10',
+      defaultValue: 1,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'animation',
+      title: '是否使用动画',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['change', 'scale'],
+  snippet: {
+    props: {
+      x: 0,
+      y: 0,
+      direction: 'all'
+    }
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,90 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Navigator',
+  label: '页面跳转',
+  categoryId: 'nav',
+  props: [
+    {
+      name: 'url',
+      title: '应用内的跳转链接，值为相对路径或绝对路径',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'open-type',
+      title: '跳转方式',
+      defaultValue: 'navigate',
+      setters: 'SelectSetter',
+      options: [
+        'navigate',
+        'redirect',
+        'switchTab',
+        'reLaunch',
+        'navigateBack',
+        'exit'
+      ]
+    },
+    {
+      name: 'delta',
+      title: '当 open-type 为 "navigateBack" 时有效，表示回退的层数',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'animation-type',
+      title:
+        '当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果',
+      defaultValue: 'pop-in/out',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'animation-duration',
+      title:
+        '当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间',
+      defaultValue: 300,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'render-link',
+      title: '是否给 navigator 组件加一层 a 标签控制 ssr 渲染',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'hover-class',
+      title: '指定点击时的样式类，当hover-class="none"时，没有点击态效果',
+      defaultValue: 'navigator-hover',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'hover-stop-propagation',
+      title: '指定是否阻止本节点的祖先节点出现点击态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'hover-start-time',
+      title: '按住后多久出现点击态，单位毫秒',
+      defaultValue: 50,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'hover-stay-time',
+      title: '手指松开后点击态保留时间，单位毫秒',
+      defaultValue: 600,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'target',
+      title: '在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram',
+      defaultValue: 'self',
+      setters: 'StringSetter'
+    }
+  ],
+  snippet: {
+    children: [
+      { name: 'Button', props: { type: 'default' }, children: '跳转到新页面' }
+    ]
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,81 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'Picker',
+  label: '选择器',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'mode',
+      title: '模式',
+      defaultValue: 'selector',
+      setters: 'SelectSetter',
+      options: ['selector', 'multiSelector', 'time', 'date', 'region']
+    },
+    {
+      name: 'range',
+      title: 'mode为 selector 或 multiSelector 时，range 有效',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'range-key',
+      title:
+        '当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'value',
+      title: 'value 的值表示选择了 range 中的第几个（下标从 0 开始）',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'selector-type',
+      title:
+        'UI类型,仅大屏时该属性生效，支持 picker、select、auto，默认在 iPad 以 picker 样式展示而在 PC 以 select 样式展示',
+      defaultValue: 'auto',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'start',
+      title: '表示有效时间范围的开始，字符串格式为"hh:mm"',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'end',
+      title: '表示有效时间范围的结束，字符串格式为"hh:mm"',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'fields',
+      title:
+        '有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI',
+      defaultValue: 'day',
+      setters: 'SelectSetter',
+      options: ['year', 'month', 'day']
+    },
+    {
+      name: 'custom-item',
+      title: '可为每一列的顶部添加一个自定义的项',
+      setters: 'StringSetter'
+    }
+  ],
+  events: ['change', 'cancel', 'columnchange'],
+  snippet: {
+    props: {
+      mode: 'selector',
+      range: ['中国', '美国', '巴西', '日本'],
+      value: 0,
+      children: [{ name: 'View', children: '中国' }]
+    }
+  }
+};
+
+export default desc;