@vtj/materials 0.8.146 → 0.8.147

package/src/vant/picker-group.ts

@@ -0,0 +1,63 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const PickerGroup: MaterialDescription = {
+  name: 'VantPickerGroup',
+  alias: 'PickerGroup',
+  label: '选择器组',
+  categoryId: 'form',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/picker-group',
+  props: [
+    {
+      name: 'active-tab',
+      title: '设置当前选中的标签',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'tabs',
+      title: '设置标签页的标题',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'title',
+      title: '顶部栏标题',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'show-toolbar',
+      title: '是否显示顶部栏',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'next-step-text',
+      title: '下一步按钮的文字',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'confirm-button-text',
+      title: '确认按钮的文字',
+      defaultValue: '确认',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'cancel-button-text',
+      title: '取消按钮的文字',
+      defaultValue: '取消',
+      setters: 'StringSetter'
+    }
+  ],
+  slots: ['default', 'toolbar', 'title', 'confirm', 'cancel'],
+  snippet: {
+    props: {
+      title: '预约日期',
+      tabs: ['选择日期', '选择时间']
+    },
+    children: [{ name: 'VantDatePicker' }, { name: 'VantTimePicker' }]
+  }
+};
+
+export default PickerGroup;

package/src/vant/picker.ts

@@ -0,0 +1,139 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Picker: MaterialDescription = {
+  name: 'VantPicker',
+  alias: 'Picker',
+  label: '选择器',
+  categoryId: 'form',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/picker',
+  props: [
+    {
+      name: 'modelValue',
+      title: '当前选中项对应的值',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'columns',
+      title: '对象数组，配置每一列显示的数据',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'columns-field-names',
+      title: '自定义 columns 结构中的字段',
+      defaultValue: { text: 'text', value: 'value', children: 'children' },
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'title',
+      title: '顶部栏标题',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'confirm-button-text',
+      title: '确认按钮文字，设置为空字符串可以隐藏按钮',
+      defaultValue: '确认',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'cancel-button-text',
+      title: '取消按钮文字，设置为空字符串可以隐藏按钮',
+      defaultValue: '取消',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'toolbar-position',
+      title: '顶部栏位置，可选值为 bottom',
+      defaultValue: 'top',
+      setters: 'SelectSetter',
+      options: ['top', 'bottom']
+    },
+    {
+      name: 'loading',
+      title: '是否显示加载状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      title: '是否为只读状态，只读状态下无法切换选项',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-toolbar',
+      title: '是否显示顶部栏',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'allow-html',
+      title: '是否允许选项内容中渲染 HTML',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'option-height',
+      title: '选项高度，支持 px vw vh rem 单位，默认 px',
+      defaultValue: 44,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'visible-option-num',
+      title: '可见的选项个数',
+      defaultValue: 6,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'swipe-duration',
+      title: '快速滑动时惯性滚动的时长，单位 ms',
+      defaultValue: 1000,
+      setters: ['NumberSetter', 'StringSetter']
+    }
+  ],
+  events: [
+    {
+      name: 'confirm',
+      params: ['data']
+    },
+    {
+      name: 'cancel',
+      params: ['data']
+    },
+    {
+      name: 'change',
+      params: ['data']
+    },
+    {
+      name: 'click-option',
+      params: ['data']
+    },
+    {
+      name: 'scroll-into',
+      params: ['data']
+    }
+  ],
+  slots: [
+    'toolbar',
+    'title',
+    'confirm',
+    'cancel',
+    'option',
+    'columns-top',
+    'columns-bottom'
+  ],
+  snippet: {
+    props: {
+      title: '标题',
+      columns: [
+        { text: '杭州', value: 'Hangzhou' },
+        { text: '宁波', value: 'Ningbo' },
+        { text: '温州', value: 'Wenzhou' },
+        { text: '绍兴', value: 'Shaoxing' },
+        { text: '湖州', value: 'Huzhou' }
+      ]
+    }
+  }
+};
+
+export default Picker;

package/src/vant/popover.ts

@@ -0,0 +1,165 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Popover: MaterialDescription = {
+  name: 'VantPopover',
+  alias: 'Popover',
+  label: '气泡弹出框',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/popover',
+  props: [
+    {
+      name: 'show',
+      title: '是否展示气泡弹出层',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'actions',
+      title: '选项列表',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'actions-direction',
+      title: '选项列表的排列方向，可选值为 horizontal',
+      defaultValue: 'vertical',
+      setters: 'SelectSetter',
+      options: ['vertical', 'horizontal']
+    },
+    {
+      name: 'placement',
+      title: '弹出位置',
+      defaultValue: 'bottom',
+      setters: 'SelectSetter',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end'
+      ]
+    },
+    {
+      name: 'theme',
+      title: '主题风格',
+      defaultValue: 'light',
+      setters: 'SelectSetter',
+      options: ['light', 'dark']
+    },
+    {
+      name: 'trigger',
+      title: '触发方式',
+      defaultValue: 'click',
+      setters: 'SelectSetter',
+      options: ['click', 'manual']
+    },
+    {
+      name: 'duration',
+      title: '动画时长，单位秒，设置为 0 可以禁用动画',
+      defaultValue: 0.3,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'offset',
+      title: '出现位置的偏移量',
+      defaultValue: [0, 8],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'overlay',
+      title: '是否显示遮罩层',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'overlay-class',
+      title: '自定义遮罩层类名',
+      setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+    },
+    {
+      name: 'overlay-style',
+      title: '自定义遮罩层样式',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'show-arrow',
+      title: '是否展示小箭头',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-on-click-action',
+      title: '	是否在点击选项后关闭',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-on-click-outside',
+      title: '是否在点击外部元素后关闭菜单',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-on-click-overlay',
+      title: '是否在点击遮罩层后关闭菜单',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'teleport',
+      title: '	指定挂载的节点，等同于 Teleport 组件的 to 属性',
+      defaultValue: 'body',
+      setters: ['StringSetter', 'ExpressionSetter']
+    },
+    {
+      name: 'icon-prefix',
+      title: '图标类名前缀，等同于 Icon 组件的 class-prefix 属性',
+      defaultValue: 'vant-icon',
+      setters: 'StringSetter'
+    }
+  ],
+  events: [
+    { name: 'update:show' },
+    { name: 'select', params: ['action', 'index'] },
+    { name: 'open' },
+    { name: 'close' },
+    { name: 'opened' },
+    { name: 'closed' },
+    { name: 'click-overlay', params: ['event'] }
+  ],
+  slots: ['default', 'reference', 'action'],
+  snippet: {
+    props: {
+      show: true,
+      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }]
+    },
+    events: {
+      select: {
+        name: 'select',
+        handler: {
+          type: 'JSFunction',
+          value:
+            '(action) => {\r\n    this.$libs.vant.showToast(action.text)\r\n}'
+        },
+        modifiers: {}
+      }
+    },
+    children: [
+      {
+        name: 'VantButton',
+        slot: 'reference',
+        props: { type: 'primary' },
+        children: '浅色风格'
+      }
+    ]
+  }
+};
+
+export default Popover;

package/src/vant/popup.ts

@@ -0,0 +1,164 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Popup: MaterialDescription = {
+  name: 'VantPopup',
+  alias: 'Popup',
+  label: '弹出层',
+  categoryId: 'base',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/popup',
+  props: [
+    {
+      name: 'show',
+      title: '是否显示弹出层',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'overlay',
+      title: '是否显示遮罩层',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'position',
+      title: '弹出位置，可选值为 top bottom right left',
+      defaultValue: 'center',
+      setters: 'SelectSetter',
+      options: ['top', 'bottom', 'right', 'left', 'center']
+    },
+    {
+      name: 'overlay-class',
+      title: '自定义遮罩层类名',
+      setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+    },
+    {
+      name: 'overlay-style',
+      title: '自定义遮罩层样式',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'duration',
+      title: '动画时长，单位秒，设置为 0 可以禁用动画',
+      defaultValue: 0.3,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'z-index',
+      title: '将弹窗的 z-index 层级设置为一个固定值',
+      defaultValue: 2000,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'round',
+      title: '是否显示圆角',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'lock-scroll',
+      title: '是否锁定背景滚动',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'lazy-render',
+      title: '是否在显示弹层时才渲染节点',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-on-popstate',
+      title: '是否在页面回退时自动关闭',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-on-click-overlay',
+      title: '是否在点击遮罩层后关闭',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'closeable',
+      title: '是否显示关闭图标',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-icon',
+      title: '关闭图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      defaultValue: 'cross',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'close-icon-position',
+      title: '关闭图标位置，可选值为 top-left bottom-left bottom-right',
+      defaultValue: 'top-right',
+      setters: 'SelectSetter',
+      options: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+    },
+    {
+      name: 'before-close',
+      title: '关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'icon-prefix',
+      title: '图标类名前缀，等同于 Icon 组件的 class-prefix 属性',
+      defaultValue: 'van-icon',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'transition',
+      title: '动画类名，等价于 transition 的 name 属性',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'transition-appear',
+      title: '是否在初始渲染时启用过渡动画',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'teleport',
+      title: '指定挂载的节点，等同于 Teleport 组件的 to 属性',
+      setters: ['StringSetter', 'ExpressionSetter']
+    },
+    {
+      name: 'safe-area-inset-top',
+      title: '是否开启顶部安全区适配',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'safe-area-inset-bottom',
+      title: '是否开启底部安全区适配',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    'update:show',
+    'click',
+    'click-overlay',
+    'click-close-icon',
+    'open',
+    'close',
+    'opened',
+    'closed'
+  ],
+  slots: ['default', 'overlay-content'],
+  snippet: {
+    props: {
+      position: 'right',
+      show: true,
+      style: {
+        width: '30%',
+        height: '100%'
+      }
+    },
+    children: '内容'
+  }
+};
+
+export default Popup;

package/src/vant/progress.ts

@@ -0,0 +1,71 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Progress: MaterialDescription = {
+  name: 'VantProgress',
+  alias: 'Progress',
+  label: '进度条',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/progress',
+  props: [
+    {
+      name: 'percentage',
+      title: '进度百分比',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'stroke-width',
+      title: '进度条粗细，默认单位为px',
+      defaultValue: 4,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'color',
+      title: '进度条颜色',
+      defaultValue: '#1989fa',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'track-color',
+      title: '轨道颜色',
+      defaultValue: '#e5e5e5',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'pivot-text',
+      title: '进度文字内容',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'pivot-color',
+      title: '进度文字背景色',
+      defaultValue: '#1989fa',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'text-color',
+      title: '进度文字颜色',
+      defaultValue: 'white',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'inactive',
+      title: '是否置灰',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-pivot',
+      title: '是否显示进度文字',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  snippet: {
+    props: {
+      percentage: 50
+    }
+  }
+};
+
+export default Progress;

package/src/vant/pull-refresh.ts

@@ -0,0 +1,83 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const PullRefresh: MaterialDescription = {
+  name: 'VantPullRefresh',
+  alias: 'PullRefresh',
+  label: '下拉刷新',
+  categoryId: 'feedback',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/pull-refresh',
+  props: [
+    {
+      name: 'modelValue',
+      title: '是否处于加载中状态',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'pulling-text',
+      title: '下拉过程提示文案',
+      defaultValue: '下拉即可刷新...',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'loosing-text',
+      title: '释放过程提示文案',
+      defaultValue: '释放即可刷新...',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'loading-text',
+      title: '加载过程提示文案',
+      defaultValue: '加载中...',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'success-text',
+      title: '刷新成功提示文案',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'success-duration',
+      title: '刷新成功提示展示时长(ms)',
+      defaultValue: 500,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'animation-duration',
+      title: '动画时长',
+      defaultValue: 300,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'head-height',
+      title: '顶部内容高度',
+      defaultValue: 50,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'pull-distance',
+      title: '触发下拉刷新的距离',
+      defaultValue: 50,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'disabled',
+      title: '	是否禁用下拉刷新',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    { name: 'update:modelValue' },
+    { name: 'refresh' },
+    { name: 'change', params: ['data'] }
+  ],
+  slots: ['default', 'normal', 'pulling', 'loosing', 'loading', 'success'],
+  snippet: {
+    props: {
+      modelValue: true
+    },
+    children: [{ name: 'p', children: '下拉刷新' }]
+  }
+};
+
+export default PullRefresh;