@vtj/materials 0.8.145 → 0.8.147

package/src/vant/tabbar.ts

@@ -0,0 +1,174 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Tabbar: MaterialDescription[] = [
+  {
+    name: 'VantTabbar',
+    alias: 'Tabbar',
+    label: '标签栏',
+    categoryId: 'nav',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/tabbar',
+    props: [
+      {
+        name: 'modelValue',
+        title: '当前选中标签的名称或索引值',
+        defaultValue: 0,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'fixed',
+        title: '是否固定在底部',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'border',
+        title: '是否显示外边框',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'z-index',
+        title: '元素 z-index',
+        defaultValue: 1,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'active-color',
+        title: '选中标签的颜色',
+        defaultValue: '#1989fa',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'inactive-color',
+        title: '未选中标签的颜色',
+        defaultValue: '#7d7e80',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'route',
+        title: '是否开启路由模式',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'placeholder',
+        title: '固定在底部时，是否在标签位置生成一个等高的占位元素',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'safe-area-inset-bottom',
+        title: '是否开启底部安全区适配，设置 fixed 时默认开启',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'before-change',
+        title: '切换标签前的回调函数，返回 false 可阻止切换，支持返回 Promise',
+        setters: 'FunctionSetter'
+      }
+    ],
+    events: ['change'],
+    snippet: {
+      props: {
+        modelValue: 0
+      },
+      children: [
+        {
+          name: 'VantTabbarItem',
+          props: {
+            icon: 'home-o'
+          },
+          children: 'home'
+        },
+        {
+          name: 'VantTabbarItem',
+          props: {
+            icon: 'search'
+          },
+          children: 'search'
+        },
+        {
+          name: 'VantTabbarItem',
+          props: {
+            icon: 'friends-o'
+          },
+          children: 'friends'
+        },
+        {
+          name: 'VantTabbarItem',
+          props: {
+            icon: 'setting-o'
+          },
+          children: 'setting'
+        }
+      ]
+    }
+  },
+  {
+    name: 'VantTabbarItem',
+    alias: 'TabbarItem',
+    label: '标签栏项',
+    categoryId: 'nav',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/tabbar',
+    props: [
+      {
+        name: 'name',
+        title: '标签名称，作为匹配的标识符',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'icon',
+        title: '图标名称或图片链接，等同于 Icon 组件的 name 属性',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'icon-prefix',
+        title: '图标类名前缀，等同于 Icon 组件的 class-prefix 属性',
+        defaultValue: 'van-icon',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'dot',
+        title: '是否显示图标右上角小红点',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'badge',
+        title: '图标右上角徽标的内容',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'badge-props',
+        title: '自定义徽标的属性，传入的对象会被透传给 Badge 组件的 props',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'url',
+        title: '点击后跳转的链接地址',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'to',
+        title: '点击后跳转的目标路由对象，等同于 Vue Router 的 to 属性',
+        setters: ['StringSetter', 'ObjectSetter']
+      },
+      {
+        name: 'replace',
+        title: '是否在跳转时替换当前页面历史',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    slots: ['icon'],
+    snippet: {
+      props: {
+        icon: 'home-o'
+      },
+      children: 'home'
+    }
+  }
+];
+
+export default Tabbar;

package/src/vant/tag.ts

@@ -0,0 +1,78 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Tag: MaterialDescription = {
+  name: 'VantTag',
+  alias: 'Tag',
+  label: '标签',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/tag',
+  props: [
+    {
+      name: 'type',
+      title: '类型',
+      defaultValue: 'default',
+      setters: 'SelectSetter',
+      options: ['primary', 'success', 'danger', 'warning', 'default']
+    },
+    {
+      name: 'size',
+      title: '大小',
+      setters: 'SelectSetter',
+      options: ['large', 'medium']
+    },
+    {
+      name: 'color',
+      title: '标签颜色',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'show',
+      title: '是否展示标签',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'plain',
+      title: '是否为空心样式',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'round',
+      title: '是否为圆角样式',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'mark',
+      title: '是否为标记样式',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'text-color',
+      title: '文本颜色，优先级高于 color 属性',
+      defaultValue: 'white',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'closeable',
+      title: '是否为可关闭标签',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  slots: ['default'],
+  events: [
+    { name: 'click', params: ['event'] },
+    { name: 'close', params: ['event'] }
+  ],
+  snippet: {
+    props: {
+      type: 'primary'
+    },
+    children: '标签'
+  }
+};
+
+export default Tag;

package/src/vant/text-ellipsis.ts

@@ -0,0 +1,54 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const TextEllipsis: MaterialDescription = {
+  name: 'VantTextEllipsis',
+  alias: 'TextEllipsis',
+  label: '文本省略',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/text-ellipsis',
+  props: [
+    {
+      name: 'rows',
+      title: '展示的行数',
+      defaultValue: 1,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'content',
+      title: '需要展示的文本',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'expand-text',
+      title: '展开操作的文案',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'collapse-text',
+      title: '收起操作的文案',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'dots',
+      title: '省略号的文本内容',
+      defaultValue: '...',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'position',
+      title: '省略位置',
+      defaultValue: 'end',
+      setters: 'SelectSetter',
+      options: ['start', 'middle', 'end']
+    }
+  ],
+  events: [{ name: 'lick-action', params: ['event'] }],
+  slots: ['action'],
+  snippet: {
+    props: {
+      content: '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。'
+    }
+  }
+};
+
+export default TextEllipsis;

package/src/vant/time-picker.ts

@@ -0,0 +1,158 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const TimePicker: MaterialDescription = {
+  name: 'VantTimePicker',
+  alias: 'TimePicker',
+  label: '时间选择',
+  categoryId: 'form',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/time-picker',
+  props: [
+    {
+      name: 'modelValue',
+      title: '当前选中的时间',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'columns-type',
+      title: '选项类型，由 hour、minute 和 second 组成的数组',
+      defaultValue: ['hour', 'minute'],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'min-hour',
+      title: '可选的最小小时',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'max-hour',
+      title: '可选的最大小时',
+      defaultValue: 23,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'min-minute',
+      title: '可选的最小分钟',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'max-minute',
+      title: '可选的最大分钟',
+      defaultValue: 59,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'min-second',
+      title: '可选的最小秒数',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'max-second',
+      title: '可选的最大秒数',
+      defaultValue: 59,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'min-time',
+      title:
+        '可选的最小时间，格式参考 07:40:00，使用时 min-hour min-minute min-second 不会生效',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'max-time',
+      title:
+        '可选的最大时间，格式参考 10:20:00，使用时 max-hour max-minute max-second 不会生效',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'title',
+      title: '顶部栏标题',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'confirm-button-text',
+      title: '确认按钮文字',
+      defaultValue: '确认',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'cancel-button-text',
+      title: '取消按钮文字',
+      defaultValue: '取消',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'show-toolbar',
+      title: '是否显示顶部栏',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'loading',
+      title: '是否显示加载状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      title: '是否为只读状态，只读状态下无法切换选项',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'filter',
+      title: '选项过滤函数',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'formatter',
+      title: '选项格式化函数',
+      setters: 'FunctionSetter'
+    },
+    {
+      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'] }
+  ],
+  slots: [
+    { name: 'toolbar' },
+    { name: 'title' },
+    { name: 'confirm' },
+    { name: 'cancel' },
+    { name: 'toolbar' },
+    { name: 'option', params: ['option', 'index'] },
+    { name: 'toolbar' },
+    { name: 'columns-top' },
+    { name: 'columns-bottom' }
+  ],
+  snippet: {
+    props: {
+      title: '选择时间',
+      columnsType: ['hour', 'minute', 'second']
+    }
+  }
+};
+
+export default TimePicker;

package/src/vant/toast.ts

@@ -0,0 +1,155 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Toast: MaterialDescription = {
+  name: 'VantToast',
+  alias: 'Toast',
+  label: '轻提示',
+  categoryId: 'base',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/toast',
+  props: [
+    {
+      name: 'show',
+      title: '是否显示',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'type',
+      title: '提示类型',
+      defaultValue: 'text',
+      setters: 'SelectSetter',
+      options: ['loading', 'success', 'fail', 'html', 'text']
+    },
+    {
+      name: 'position',
+      title: '位置',
+      defaultValue: 'middle',
+      setters: 'SelectSetter',
+      options: ['top', 'middle', 'bottom']
+    },
+    {
+      name: 'message',
+      title: '文本内容，支持通过\n换行',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'word-break',
+      title: '文本内容的换行方式',
+      defaultValue: 'break-all',
+      setters: '',
+      options: ['normal', 'break-all', 'break-word']
+    },
+    {
+      name: 'icon',
+      title:
+        '自定义图标，支持传入图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'icon-size',
+      title: '图标大小，如 20px 2em，默认单位为 px',
+      defaultValue: '36px',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'icon-prefix',
+      title: '图标类名前缀，等同于 Icon 组件的 class-prefix 属性',
+      defaultValue: 'van-icon',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'overlay',
+      title: '是否显示背景遮罩层',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'forbid-click',
+      title: '是否禁止背景点击',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-on-click',
+      title: '是否在点击后关闭',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-on-click-overlay',
+      title: '是否在点击遮罩层后关闭',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'loading-type',
+      title: '加载图标类型, 可选值为 spinner',
+      defaultValue: 'circular',
+      setters: 'SelectSetter',
+      options: ['circular', 'spinner']
+    },
+    {
+      name: 'duration',
+      title: '展示时长(ms)，值为 0 时，toast 不会消失',
+      defaultValue: 2000,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'class-name',
+      title: '自定义类名',
+      setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+    },
+
+    {
+      name: 'overlay-class',
+      title: '自定义遮罩层类名',
+      setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+    },
+    {
+      name: 'overlay-style',
+      title: '自定义遮罩层样式',
+      setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+    },
+    {
+      name: 'transition',
+      title: '动画类名，等价于 transition 的name属性',
+      defaultValue: 'van-fade',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'teleport',
+      title: '指定挂载的节点，等同于 Teleport 组件的 to 属性',
+      defaultValue: 'body',
+      setters: ['StringSetter', 'ExpressionSetter']
+    },
+    {
+      name: 'z-index',
+      title: '将组件的 z-index 层级设置为一个固定值',
+      defaultValue: '2000',
+      setters: ['StringSetter', 'NumberSetter']
+    }
+  ],
+  events: ['close', 'opened', 'update:show'],
+  slots: ['message'],
+  snippet: {
+    props: {
+      show: true
+    },
+    children: [
+      {
+        name: 'VantImage',
+        slot: 'message',
+        props: {
+          src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+          style: {
+            height: '100px',
+            width: '100px'
+          }
+        }
+      }
+    ]
+  }
+};
+
+export default Toast;

package/src/vant/tree-select.ts

@@ -0,0 +1,80 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const TreeSelect: MaterialDescription = {
+  name: 'VantTreeSelect',
+  alias: 'TreeSelect',
+  label: '分类选择',
+  categoryId: 'nav',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/tree-select',
+  props: [
+    {
+      name: 'main-active-index',
+      title: '左侧选中项的索引',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'active-id',
+      title: '右侧选中项的 id，支持传入数组',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter', 'ArraySetter']
+    },
+    {
+      name: 'items',
+      title: '分类显示所需的数据',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'height',
+      title: '高度，默认单位为px',
+      defaultValue: 300,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'max',
+      title: '右侧项最大选中个数',
+      defaultValue: Infinity,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'selected-icon',
+      title: '自定义右侧栏选中状态的图标',
+      defaultValue: 'success',
+      setters: 'StringSetter'
+    }
+  ],
+  events: [
+    { name: 'update:main-active-index' },
+    { name: 'update:active-id' },
+    { name: 'click-nav', params: ['index'] },
+    { name: 'click-item', params: ['item'] }
+  ],
+  slots: ['nav-text', 'content'],
+  snippet: {
+    props: {
+      'active-id': 1,
+      items: [
+        {
+          text: '浙江',
+          children: [
+            { text: '杭州', id: 1 },
+            { text: '温州', id: 2 },
+            { text: '宁波', id: 3, disabled: true }
+          ]
+        },
+        {
+          text: '江苏',
+          children: [
+            { text: '南京', id: 4 },
+            { text: '无锡', id: 5 },
+            { text: '徐州', id: 6 }
+          ]
+        },
+        { text: '福建', disabled: true }
+      ]
+    }
+  }
+};
+
+export default TreeSelect;