@vtj/materials 0.8.146 → 0.8.148

package/src/vant/area.ts

@@ -0,0 +1,120 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Area: MaterialDescription = {
+  name: 'VantArea',
+  alias: 'Area',
+  label: '省市区选择',
+  categoryId: 'business',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/area',
+  props: [
+    {
+      name: 'modelValue',
+      title: '当前选中项对应的地区码',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'title',
+      title: '顶部栏标题',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'confirm-button-text',
+      title: '确认按钮文字',
+      defaultValue: '确认',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'cancel-button-text',
+      title: '取消按钮文字',
+      defaultValue: '取消',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'area-list',
+      title: '省市区数据',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'columns-placeholder',
+      title: '列占位提示文字',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'loading',
+      title: '是否显示加载状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      title: '是否为只读状态，只读状态下无法切换选项',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'option-height',
+      title: '选项高度，支持 px vw vh rem 单位，默认 px',
+      defaultValue: 44,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'columns-num',
+      title: '显示列数，3-省市区，2-省市，1-省',
+      defaultValue: 3,
+      setters: 'SelectSetter',
+      options: [
+        { label: '1', value: 1 },
+        { label: '2', value: 2 },
+        { label: '3', value: 3 }
+      ]
+    },
+    {
+      name: 'visible-option-num',
+      title: '可见的选项个数',
+      defaultValue: 6,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'swipe-duration',
+      title: '快速滑动时惯性滚动的时长，单位 ms',
+      defaultValue: 1000,
+      setters: ['NumberSetter', 'StringSetter']
+    }
+  ],
+  events: [
+    { name: 'update:modelValue' },
+    { name: 'confirm', params: ['data'] },
+    { name: 'cancel', params: ['data'] },
+    { name: 'change', params: ['data'] }
+  ],
+  slots: [
+    'toolbar',
+    'title',
+    'confirm',
+    'cancel',
+    'columns-top',
+    'columns-bottom'
+  ],
+  snippet: {
+    props: {
+      title: '标题',
+      'area-list': {
+        province_list: {
+          110000: '北京市',
+          120000: '天津市'
+        },
+        city_list: {
+          110100: '北京市',
+          120100: '天津市'
+        },
+        county_list: {
+          110101: '东城区',
+          110102: '西城区'
+        }
+      }
+    }
+  }
+};
+
+export default Area;

package/src/vant/back-top.ts

@@ -0,0 +1,57 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const BackTop: MaterialDescription = {
+  name: 'VantBackTop',
+  alias: 'BackTop',
+  label: '回到顶部',
+  categoryId: 'nav',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/back-top',
+  props: [
+    {
+      name: 'target',
+      title:
+        '触发滚动的目标对象，支持传入选择器或 DOM 元素，默认最近的父级滚动容器',
+      setters: ['StringSetter', 'ExpressionSetter']
+    },
+    {
+      name: 'right',
+      title: '距离页面右侧的距离，默认单位为 px',
+      defaultValue: 30,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'bottom',
+      title: '距离页面底部的距离，默认单位为 px',
+      defaultValue: 40,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'offset',
+      title: '滚动高度达到此参数值时才显示组件',
+      defaultValue: 200,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'teleport',
+      title: '指定挂载的节点，等同于 Teleport 组件的 to 属性',
+      defaultValue: 'body',
+      setters: ['StringSetter', 'ExpressionSetter']
+    },
+    {
+      name: 'immediate',
+      title: '是否瞬间滚动到顶部',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'z-index',
+      title: '设置组件的 z-index 层级',
+      defaultValue: 100,
+      setters: ['NumberSetter', 'StringSetter']
+    }
+  ],
+  events: [{ name: 'click', params: ['event'] }],
+  slots: ['default']
+};
+
+export default BackTop;

package/src/vant/badge.ts

@@ -0,0 +1,74 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Badge: MaterialDescription = {
+  name: 'VantBadge',
+  alias: 'Badge',
+  label: '徽标',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/button',
+  props: [
+    {
+      name: 'content',
+      title: '徽标内容（dot 为 fasle 时生效）',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'color',
+      title: '徽标背景颜色',
+      defaultValue: '#ee0a24',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'dot',
+      title: '是否展示为小红点',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'max',
+      title: '最大值，超过最大值会显示 {max}+，仅当 content 为数字时有效',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'offset',
+      title:
+        '设置徽标的偏移量，数组的两项分别对应水平向右和垂直向下方向的偏移量，默认单位为 px',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'show-zero',
+      title: '当 content 为数字 0 或字符串 "0" 时，是否展示徽标',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'position',
+      title: '徽标位置',
+      defaultValue: 'top-right',
+      setters: 'SelectSetter',
+      options: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+    }
+  ],
+  slots: ['default', 'content'],
+  snippet: {
+    props: {
+      content: '5'
+    },
+    children: [
+      {
+        name: 'div',
+        props: {
+          style: {
+            width: '40px',
+            height: '40px',
+            background: '#f2f3f5',
+            borderRadius: '4px'
+          }
+        }
+      }
+    ]
+  }
+};
+
+export default Badge;

package/src/vant/barrage.ts

@@ -0,0 +1,65 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Barrage: MaterialDescription = {
+  name: 'VantBarrage',
+  alias: 'Barrage',
+  label: '弹幕',
+  categoryId: 'feedback',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/barrage',
+  props: [
+    {
+      name: 'modelValue',
+      title: '弹幕数据',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'auto-play',
+      title: '是否自动播放弹幕',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'rows',
+      title: '弹幕文字行数',
+      defaultValue: 4,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'top',
+      title: '弹幕文字区域顶部间距，单位 px',
+      defaultValue: 10,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'duration',
+      title: '弹幕文字滑过容器的时间，单位 ms',
+      defaultValue: 4000,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'delay',
+      title: '弹幕动画延时，单位 ms',
+      defaultValue: 300,
+      setters: 'NumberSetter'
+    }
+  ],
+  slots: ['default'],
+  snippet: {
+    props: {
+      modelValue: [
+        { id: 100, text: '轻量' },
+        { id: 101, text: '可定制的' },
+        { id: 102, text: '移动端' },
+        { id: 103, text: 'Vue' },
+        { id: 104, text: '组件库' },
+        { id: 105, text: 'VantUI' },
+        { id: 106, text: '666' }
+      ]
+    },
+    children: [
+      { name: 'div', props: { style: { width: '100%', height: '150px' } } }
+    ]
+  }
+};
+
+export default Barrage;

package/src/vant/button.ts

@@ -0,0 +1,132 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Button: MaterialDescription = {
+  name: 'VantButton',
+  alias: 'Button',
+  label: '按钮',
+  categoryId: 'base',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/button',
+  props: [
+    {
+      name: 'type',
+      title: '类型，可选值为 primary success warning danger',
+      defaultValue: 'default',
+      setters: 'SelectSetter',
+      options: ['primary', 'success', 'warning', 'danger', 'default']
+    },
+    {
+      name: 'size',
+      title: '尺寸，可选值为 large small mini',
+      defaultValue: 'normal',
+      setters: 'SelectSetter',
+      options: ['large', 'small', 'mini', 'normal']
+    },
+    {
+      name: 'text',
+      title: '按钮文字',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'color',
+      title: '按钮颜色，支持传入 linear-gradient 渐变色',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'icon',
+      title: '左侧图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'icon-prefix',
+      title: '图标类名前缀，等同于 Icon 组件的 class-prefix 属性',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'icon-position',
+      title: '图标展示位置，可选值为 right',
+      setters: 'SelectSetter',
+      defaultValue: 'left',
+      options: ['right', 'left']
+    },
+    {
+      name: 'tag',
+      title: '按钮根节点的 HTML 标签',
+      defaultValue: 'button',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'native-type',
+      title: '原生 button 标签的 type 属性',
+      defaultValue: 'button',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'block',
+      title: '是否为块级元素',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'plain',
+      title: '是否为朴素按钮',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'square',
+      title: '是否为方形按钮',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'round',
+      title: '是否为圆形按钮',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用按钮',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'hairline',
+      title: '是否使用 0.5px 边框',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'loading',
+      title: '是否显示为加载状态',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'loading-text',
+      title: '加载状态提示文字',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'loading-size',
+      title: '加载图标大小，默认单位为 px',
+      defaultValue: '20px',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'url',
+      title: '点击后跳转的链接地址',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'to',
+      title: '点击后跳转的目标路由对象，等同于 Vue Router 的 to 属性',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'replace',
+      title: '是否在跳转时替换当前页面历史',
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['click', 'touchstart'],
+  slots: ['default', 'icon', 'loading'],
+  snippet: {
+    children: '按钮'
+  }
+};
+
+export default Button;