@vtj/materials 0.8.145 → 0.8.147

package/src/vant/radio.ts

@@ -0,0 +1,126 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Radio: MaterialDescription[] = [
+  {
+    name: 'VantRadio',
+    alias: 'Radio',
+    label: '单选框',
+    categoryId: 'form',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/radio',
+    props: [
+      {
+        name: 'name',
+        title: '标识符，通常为一个唯一的字符串或数字',
+        setters: 'ExpressionSetter'
+      },
+      {
+        name: 'shape',
+        title: '形状，可选值为 square dot',
+        defaultValue: 'round',
+        setters: 'SelectSetter',
+        options: ['square', 'dot', 'round']
+      },
+      {
+        name: 'disabled',
+        title: '是否为禁用状态',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'label-disabled',
+        title: '是否禁用文本内容点击',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'label-position',
+        title: '文本位置，可选值为 left',
+        defaultValue: 'right',
+        setters: 'SelectSetter',
+        options: ['left', 'right']
+      },
+      {
+        name: 'icon-size',
+        title: '图标大小，默认单位为 px',
+        defaultValue: '20px',
+        setters: ['StringSetter', 'NumberSetter']
+      },
+      {
+        name: 'checked-color',
+        title: '选中状态颜色',
+        defaultValue: '#1989fa',
+        setters: 'StringSetter'
+      }
+    ],
+    events: [{ name: 'click', params: ['event'] }],
+    slots: [{ name: 'default' }, { name: 'icon' }],
+    snippet: {
+      props: {
+        modelValue: 'checked',
+        name: 'checked'
+      },
+      children: '单选框 1'
+    }
+  },
+  {
+    name: 'VantRadioGroup',
+    alias: 'RadioGroup',
+    label: '单选框组',
+    categoryId: 'form',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/radio',
+    props: [
+      {
+        name: 'modelValue',
+        title: '当前选中项的标识符',
+        setters: 'ExpressionSetter'
+      },
+      {
+        name: 'disabled',
+        title: '是否禁用所有单选框',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'direction',
+        title: '排列方向',
+        defaultValue: 'vertical',
+        setters: 'SelectSetter',
+        options: ['horizontal', 'vertical']
+      },
+      {
+        name: 'icon-size  ',
+        title: '所有单选框的图标大小，默认单位为 px',
+        defaultValue: '20px',
+        setters: ['StringSetter', 'NumberSetter']
+      },
+      {
+        name: 'checked-color',
+        title: '所有单选框的选中状态颜色',
+        defaultValue: '#1989fa',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'shape',
+        title: '形状',
+        defaultValue: 'round',
+        setters: 'SelectSetter',
+        options: ['square', 'dot']
+      }
+    ],
+    events: [
+      { name: 'update:modelValue' },
+      { name: 'change', params: ['name'] }
+    ],
+    snippet: {
+      props: {
+        modelValue: ['1', '2']
+      },
+      children: [
+        { name: 'VantRadio', props: { name: '1' }, children: '单选框 1' },
+        { name: 'VantRadio', props: { name: '2' }, children: '单选框 2' }
+      ]
+    }
+  }
+];
+
+export default Radio;

package/src/vant/rate.ts

@@ -0,0 +1,108 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Rate: MaterialDescription = {
+  name: 'VantRate',
+  alias: 'Rate',
+  label: '评分',
+  categoryId: 'form',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/rate',
+  props: [
+    {
+      name: 'modelValue',
+      title: '当前分值',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'count',
+      title: '图标总数',
+      defaultValue: 5,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'size',
+      title: '图标大小，默认单位为px',
+      defaultValue: 20,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'gutter',
+      title: '图标间距，默认单位为px',
+      defaultValue: 4,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'color',
+      title: '选中时的颜色',
+      defaultValue: '#ee0a24',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'void-color',
+      title: '未选中时的颜色',
+      defaultValue: '#c8c9cc',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'disabled-color',
+      title: '禁用时的颜色',
+      defaultValue: '#c8c9cc',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'icon',
+      title: '选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      defaultValue: 'start',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'void-icon',
+      title: '未选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      defaultValue: 'star-o',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'icon-prefix',
+      title: '图标类名前缀，等同于 Icon 组件的 class-prefix 属性',
+      defaultValue: 'van-icon',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'allow-half',
+      title: '是否允许半选',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'clearable',
+      title: '是否允许再次点击后清除',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      title: '是否为只读状态，只读状态下无法修改评分',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用评分',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'touchable',
+      title: '是否可以通过滑动手势选择评分',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['update:modelValue', 'change'],
+  snippet: {
+    props: {
+      modelValue: 3
+    }
+  }
+};
+
+export default Rate;

package/src/vant/rolling-text.ts

@@ -0,0 +1,68 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const RollingText: MaterialDescription = {
+  name: 'VantRollingText',
+  alias: 'RollingText',
+  label: '翻滚文本动效',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/rolling-text',
+  props: [
+    {
+      name: 'start-num',
+      title: '起始数值',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'target-num',
+      title: '目标数值',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'text-list',
+      title: '内容数组，用于翻转非数字内容',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'duration',
+      title: '动画时长，单位为秒',
+      defaultValue: 2,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'direction',
+      title: '文本翻滚方向，值为 down 和 up',
+      defaultValue: 'down',
+      setters: 'SelectSetter',
+      options: ['up', 'down']
+    },
+    {
+      name: 'auto-start',
+      title: '是否自动开始动画',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'stop-order',
+      title: '各个数位动画停止先后顺序，值为 ltr 和 rtl',
+      defaultValue: 'ltr',
+      setters: 'SelectSetter',
+      options: ['ltr', 'rtl']
+    },
+    {
+      name: 'height',
+      title: '数字高度，单位为 px',
+      defaultValue: 40,
+      setters: 'NumberSetter'
+    }
+  ],
+  snippet: {
+    props: {
+      'start-num': 0,
+      'target-num': 123
+    }
+  }
+};
+
+export default RollingText;

package/src/vant/search.ts

@@ -0,0 +1,170 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Search: MaterialDescription = {
+  name: 'VantSearch',
+  alias: 'Search',
+  label: '搜索',
+  categoryId: 'form',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/search',
+  props: [
+    {
+      name: 'modelValue',
+      title: '当前输入的值',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'label',
+      title: '搜索框左侧文本',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'name',
+      title: '名称，作为提交表单时的标识符',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'shape',
+      title: '搜索框形状',
+      defaultValue: 'square',
+      setters: 'SelectSetter',
+      options: ['square', 'round']
+    },
+    {
+      name: 'id',
+      title: '搜索框 id，同时会设置 label 的 for 属性',
+      defaultValue: 'van-search-n-input',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'background',
+      title: '搜索框外部背景色',
+      defaultValue: '	#f2f2f2',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'maxlength',
+      title: '输入的最大字符数',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'placeholder',
+      title: '占位提示文字',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'clearable',
+      title: '是否启用清除图标，点击清除图标后会清空输入框',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'clear-icon',
+      title: '清除图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      defaultValue: 'clear',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'clear-trigger',
+      title:
+        '显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示',
+      defaultValue: 'focus',
+      setters: 'SelectSetter',
+      options: ['focus', 'always']
+    },
+    {
+      name: 'autofocus',
+      title: '是否自动聚焦，iOS 系统不支持该属性',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-action',
+      title: '是否在搜索框右侧显示取消按钮',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'action-text',
+      title: '取消按钮文字',
+      defaultValue: '取消',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用输入框',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      title: '是否将输入框设为只读状态，只读状态下无法输入内容',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'error',
+      title: '是否将输入内容标红',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'error-message',
+      title: '底部错误提示文案，为空时不展示',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'formatter',
+      title: '输入内容格式化函数',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'format-trigger',
+      title: '格式化函数触发的时机',
+      defaultValue: 'onChange',
+      setters: 'SelectSetter',
+      options: ['onChange', 'onBlur']
+    },
+    {
+      name: 'input-align',
+      title: '输入框内容对齐方式',
+      defaultValue: 'left',
+      setters: 'SelectSetter',
+      options: ['left', 'center', 'right']
+    },
+    {
+      name: 'left-icon',
+      title: '输入框左侧图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      defaultValue: 'search',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'right-icon',
+      title: '输入框右侧图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'autocomplete',
+      title: 'input 标签原生的自动完成属性',
+      setters: 'StringSetter'
+    }
+  ],
+  events: [
+    { name: 'search', params: ['value'] },
+    { name: 'update:modelValue', params: ['value'] },
+    { name: 'focus', params: ['event'] },
+    { name: 'blur', params: ['event'] },
+    { name: 'click-input', params: ['event'] },
+    { name: 'click-left-icon', params: ['event'] },
+    { name: 'click-right-icon', params: ['event'] },
+    { name: 'clear', params: ['event'] },
+    { name: 'cancel' }
+  ],
+  slots: ['left', 'action', 'label', 'left-icon', 'right-icon'],
+  snippet: {
+    props: {
+      placeholder: '请输入搜索关键词'
+    }
+  }
+};
+
+export default Search;

package/src/vant/share-sheet.ts

@@ -0,0 +1,146 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const ShareSheet: MaterialDescription = {
+  name: 'VantShareSheet',
+  alias: 'ShareSheet',
+  label: '分享面板',
+  categoryId: 'feedback',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/share-sheet',
+  props: [
+    {
+      name: 'show',
+      title: '是否显示分享面板',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'options',
+      title: '分享选项',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'title',
+      title: '顶部标题',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'cancel-text',
+      title: '取消按钮文字，传入空字符串可以隐藏按钮',
+      defaultValue: '取消',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'description',
+      title: '标题下方的辅助描述文字',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'duration',
+      title: '动画时长，单位秒，设置为 0 可以禁用动画',
+      defaultValue: 0.3,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'z-index',
+      title: '将面板的 z-index 层级设置为一个固定值',
+      defaultValue: '2000+',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'round',
+      title: '是否显示圆角',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'overlay',
+      title: '是否显示遮罩层',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'overlay-class',
+      title: '自定义遮罩层类名',
+      setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+    },
+    {
+      name: 'overlay-style',
+      title: '自定义遮罩层样式',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'lock-scroll',
+      title: '是否锁定背景滚动',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'lazy-render',
+      title: '是否在显示弹层时才渲染内容',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-on-popstate',
+      title: '是否在页面回退时自动关闭',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-on-click-overlay',
+      title: '是否在点击遮罩层后关闭',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'safe-area-inset-bottom',
+      title: '是否开启底部安全区适配',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'teleport',
+      title: '指定挂载的节点，等同于 Teleport 组件的 to 属性',
+      setters: ['StringSetter', 'ExpressionSetter']
+    },
+    {
+      name: 'before-close',
+      title: '关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise',
+      setters: 'FunctionSetter'
+    }
+  ],
+  events: [
+    { name: 'update:show' },
+    { name: 'select', params: ['option', 'index'] },
+    { name: 'cancel' },
+    { name: 'open' },
+    { name: 'close' },
+    { name: 'opened' },
+    { name: 'closed' },
+    { name: 'click-overlay' }
+  ],
+  slots: ['title', 'description', 'cancel'],
+  snippet: {
+    props: {
+      show: true,
+      title: '立即分享给好友',
+      options: [
+        [
+          { name: '微信', icon: 'wechat' },
+          { name: '朋友圈', icon: 'wechat-moments' },
+          { name: '微博', icon: 'weibo' },
+          { name: 'QQ', icon: 'qq' }
+        ],
+        [
+          { name: '复制链接', icon: 'link' },
+          { name: '分享海报', icon: 'poster' },
+          { name: '二维码', icon: 'qrcode' },
+          { name: '小程序码', icon: 'weapp-qrcode' }
+        ]
+      ]
+    }
+  }
+};
+
+export default ShareSheet;

package/src/vant/sidebar.ts

@@ -0,0 +1,92 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Sidebar: MaterialDescription[] = [
+  {
+    name: 'VantSidebar',
+    alias: 'Sidebar',
+    label: '侧边导航',
+    categoryId: 'nav',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/sidebar',
+    props: [
+      {
+        name: 'modelValue',
+        title: '当前导航项的索引',
+        defaultValue: 0,
+        setters: ['NumberSetter', 'StringSetter']
+      }
+    ],
+    events: ['change'],
+    snippet: {
+      props: {
+        active: 0
+      },
+      children: [
+        { name: 'VantSidebarItem', props: { title: '标签名称' } },
+        { name: 'VantSidebarItem', props: { title: '标签名称' } },
+        { name: 'VantSidebarItem', props: { title: '标签名称' } }
+      ]
+    }
+  },
+  {
+    name: 'VantSidebarItem',
+    alias: 'SidebarItem',
+    label: '侧边导航项',
+    categoryId: 'nav',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/sidebar',
+    props: [
+      {
+        name: 'title',
+        title: '内容',
+        defaultValue: '""',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'dot',
+        title: '是否显示右上角小红点',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'badge',
+        title: '图标右上角徽标的内容',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'badge-props',
+        title: '自定义徽标的属性，传入的对象会被透传给 Badge 组件的 props',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'disabled',
+        title: '是否禁用该项',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'url',
+        title: '点击后跳转的链接地址',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'to',
+        title: '点击后跳转的目标路由对象，等同于 Vue Router 的 to 属性',
+        setters: ['StringSetter', 'ObjectSetter']
+      },
+      {
+        name: 'replace',
+        title: '是否在跳转时替换当前页面历史',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['click'],
+    slots: ['title'],
+    snippet: {
+      props: {
+        title: '标签名称'
+      }
+    }
+  }
+];
+
+export default Sidebar;