@vtj/materials 0.8.145 → 0.8.147

package/src/vant/submit-bar.ts

@@ -0,0 +1,101 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const SubmitBar: MaterialDescription = {
+  name: 'VantSubmitBar',
+  alias: 'SubmitBar',
+  label: '提交订单栏',
+  categoryId: 'business',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/submit-bar',
+  props: [
+    {
+      name: 'price',
+      title: '金额（单位分）',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'decimal-length',
+      title: '金额小数点位数',
+      defaultValue: 2,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'label',
+      title: '金额左侧文案',
+      defaultValue: '	合计：',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'suffix-label',
+      title: '金额右侧文案',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'text-align',
+      title: '金额文案对齐方向，可选值为 left',
+      defaultValue: 'right',
+      setters: 'SelectSetter',
+      options: ['left', 'right']
+    },
+    {
+      name: 'button-text',
+      title: '按钮文字',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'button-type',
+      title: '按钮类型',
+      defaultValue: 'danger',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'button-color',
+      title: '自定义按钮颜色',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'tip-icon',
+      title: '提示文案左侧的图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'currency',
+      title: '货币符号',
+      defaultValue: '￥',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用按钮',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'loading',
+      title: '是否显示将按钮显示为加载中状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'safe-area-inset-bottom',
+      title: '是否开启底部安全区适配',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'placeholder',
+      title: '是否在标签位置生成一个等高的占位元素',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['submit'],
+  slots: ['default', 'button', 'top', 'tip'],
+  snippet: {
+    props: {
+      price: 3050,
+      'button-text': '提交订单'
+    }
+  }
+};
+
+export default SubmitBar;

package/src/vant/swipe-cell.ts

@@ -0,0 +1,85 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const SwipeCell: MaterialDescription = {
+  name: 'VantSwipeCell',
+  alias: 'SwipeCell',
+  label: '滑动单元格',
+  categoryId: 'feedback',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/swipe-cell',
+  props: [
+    {
+      name: 'name',
+      title: '标识符，通常为一个唯一的字符串或数字，可以在事件参数中获取到',
+      defaultValue: '""',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'left-width',
+      title: '指定左侧滑动区域宽度，单位为 px',
+      defaultValue: 'auto',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'right-width',
+      title: '指定右侧滑动区域宽度，单位为 px',
+      defaultValue: 'auto',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'before-close',
+      title: '关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用滑动',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'stop-propagation',
+      title: '是否阻止滑动事件冒泡',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    { name: 'click', params: ['position'] },
+    { name: 'open', params: ['name', 'position'] },
+    { name: 'close', params: ['name', 'position'] }
+  ],
+  slots: ['default', 'left', 'right'],
+  snippet: {
+    children: [
+      {
+        name: 'VantButton',
+        slot: 'left',
+        props: { square: true, type: 'primary', text: '选择' }
+      },
+      {
+        name: 'VantCell',
+        props: {
+          border: false,
+          title: '单元格',
+          value: '内容'
+        }
+      },
+      {
+        name: 'template',
+        slot: 'right',
+        children: [
+          {
+            name: 'VantButton',
+            props: { square: true, type: 'danger', text: '删除' }
+          },
+          {
+            name: 'VantButton',
+            props: { square: true, type: 'primary', text: '收藏' }
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default SwipeCell;

package/src/vant/swipe.ts

@@ -0,0 +1,128 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Swipe: MaterialDescription[] = [
+  {
+    name: 'VantSwipe',
+    alias: 'Swipe',
+    label: '轮播',
+    categoryId: 'view',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/swipe',
+    props: [
+      {
+        name: 'autoplay',
+        title: '自动轮播间隔，单位为 ms',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'duration',
+        title: '动画时长，单位为 ms',
+        defaultValue: 500,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'initial-swipe',
+        title: '初始位置索引值',
+        defaultValue: 0,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'width',
+        title: '滑块宽度，单位为 px',
+        defaultValue: 'auto',
+        setters: ['StringSetter', 'NumberSetter']
+      },
+      {
+        name: 'height',
+        title: '滑块高度，单位为 px',
+        defaultValue: 'auto',
+        setters: ['StringSetter', 'NumberSetter']
+      },
+      {
+        name: 'loop',
+        title: '是否开启循环播放',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'show-indicators',
+        title: '是否显示指示器',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'vertical',
+        title: '是否为纵向滚动',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'touchable',
+        title: '是否可以通过手势滑动',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'stop-propagation',
+        title: '是否阻止滑动事件冒泡',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'lazy-render',
+        title: '是否延迟渲染未展示的轮播',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'indicator-color',
+        title: '指示器颜色',
+        defaultValue: '#1989fa',
+        setters: 'StringSetter'
+      }
+    ],
+    events: [
+      { name: 'change', params: ['index'] },
+      { name: 'drag-start', params: ['data'] },
+      { name: 'drag-end', params: ['data'] }
+    ],
+    snippet: {
+      props: {
+        autoplay: '3000',
+        'indicator-color': 'white',
+        style: {
+          color: '#fff',
+          fontSize: '20px',
+          lineHeight: '150px',
+          textAlign: 'center',
+          backgroundColor: '#39a9ed'
+        }
+      },
+      children: [
+        { name: 'VantSwipeItem', children: '1' },
+        { name: 'VantSwipeItem', children: '2' },
+        { name: 'VantSwipeItem', children: '3' }
+      ]
+    }
+  },
+  {
+    name: 'VantSwipeItem',
+    alias: 'SwipeItem',
+    label: '轮播项',
+    categoryId: 'view',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/swipe',
+    snippet: {
+      props: {
+        style: {
+          color: '#fff',
+          fontSize: '20px',
+          lineHeight: '150px',
+          textAlign: 'center',
+          backgroundColor: '#39a9ed'
+        }
+      },
+      children: '1'
+    }
+  }
+];
+
+export default Swipe;

package/src/vant/switch.ts

@@ -0,0 +1,68 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Switch: MaterialDescription = {
+  name: 'VantSwitch',
+  alias: 'Switch',
+  label: '开关',
+  categoryId: 'form',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/switch',
+  props: [
+    {
+      name: 'modelValue',
+      title: '开关选中状态',
+      defaultValue: false,
+      setters: 'ExpressionSetter'
+    },
+    {
+      name: 'loading',
+      title: '是否为加载状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否为禁用状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'size',
+      title: '开关按钮的尺寸，默认单位为 px',
+      defaultValue: 26,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'active-color',
+      title: '打开时的背景色',
+      defaultValue: '#1989fa',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'inactive-color',
+      title: '关闭时的背景色',
+      defaultValue: 'rgba(120, 120, 128, 0.16)',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'active-value',
+      title: '打开时对应的值',
+      defaultValue: true,
+      setters: 'ExpressionSetter'
+    },
+    {
+      name: 'inactive-value',
+      title: '关闭时对应的值',
+      defaultValue: false,
+      setters: 'ExpressionSetter'
+    }
+  ],
+  events: [
+    { name: 'update:modelValue' },
+    { name: 'change', params: ['value'] },
+    { name: 'click', params: ['event'] }
+  ],
+  slots: ['node', 'background'],
+  snippet: {}
+};
+
+export default Switch;

package/src/vant/tab.ts

@@ -0,0 +1,236 @@
+import type { MaterialDescription } from '@vtj/core';
+
+// todo tabs 内部元素拖动 ？？
+
+const Tab: MaterialDescription[] = [
+  {
+    name: 'VantTabs',
+    alias: 'Tabs',
+    label: '标签页',
+    categoryId: 'nav',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/tap',
+    props: [
+      {
+        name: 'active',
+        title: '绑定当前选中标签的标识符',
+        defaultValue: 0,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'type',
+        title: '样式风格类型，可选值为 card',
+        defaultValue: 'line',
+        setters: 'SelectSetter',
+        options: ['line', 'card']
+      },
+      {
+        name: 'color',
+        title: '标签主题色',
+        defaultValue: '#1989fa',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'background',
+        title: '标签栏背景色',
+        defaultValue: 'white',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'duration',
+        title: '动画时间，单位秒，设置为 0 可以禁用动画',
+        defaultValue: 0.3,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'line-width',
+        title: '底部条宽度，默认单位 px',
+        defaultValue: 40,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'line-height',
+        title: '底部条高度，默认单位 px',
+        defaultValue: 3,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'animated',
+        title:
+          '是否开启切换标签内容时的转场动画（开启该属性后，内容区如果有粘性布局将会不达预期）',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'border',
+        title: '是否显示标签栏外边框，仅在 type="line" 时有效',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'ellipsis',
+        title:
+          '是否省略过长的标题文字（仅在 shrink 为 false 且 tab 数量小于等于 swipe-threshold 时生效）',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'sticky',
+        title: '是否使用粘性布局',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'shrink',
+        title: '是否开启左侧收缩布局',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'swipeable',
+        title:
+          '是否开启手势左右滑动切换（开启该属性后，内容区如果有粘性布局将会不达预期）',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'lazy-render',
+        title: '是否开启延迟渲染（首次切换到标签时才触发内容渲染）',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'scrollspy',
+        title: '是否开启滚动导航',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'show-header',
+        title: '是否显示标题栏',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'offset-top',
+        title: '粘性布局下吸顶时与顶部的距离，支持 px vw vh rem 单位，默认 px',
+        defaultValue: 0,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'swipe-threshold',
+        title:
+          '滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动（仅在 shrink 为 false 且 ellipsis 为 true 时生效）',
+        defaultValue: 0,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'title-active-color',
+        title: '标题选中态颜色',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'title-inactive-color',
+        title: '标题默认态颜色',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'before-change',
+        title: '切换标签前的回调函数，返回 false 可阻止切换，支持返回 Promise',
+        setters: 'FunctionSetter'
+      }
+    ],
+    events: [
+      { name: 'update:active' },
+      { name: 'click-tab', params: ['data'] },
+      { name: 'change', params: ['name', 'title'] },
+      { name: 'rendered', params: ['name', 'title'] },
+      { name: 'scroll', params: ['data'] }
+    ],
+    slots: ['default', 'nav-left', 'nav-right', 'nav-bottom'], // todo default 文档中没有
+    snippet: {
+      props: {
+        active: 0
+      },
+      children: [
+        { name: 'VantTab', props: { title: '内容1' }, children: '标题1' },
+        { name: 'VantTab', props: { title: '内容2' }, children: '标题2' },
+        { name: 'VantTab', props: { title: '内容3' }, children: '标题3' }
+      ]
+    }
+  },
+  {
+    name: 'VantTab',
+    alias: 'Tab',
+    label: '标签页项',
+    categoryId: 'nav',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/tap',
+    props: [
+      {
+        name: 'title',
+        title: '标题',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'disabled',
+        title: '是否禁用标签',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'dot',
+        title: '是否在标题右上角显示小红点',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'badge',
+        title: '图标右上角徽标的内容（dot 为 fasle 时生效）',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'name',
+        title: '标签名称，作为匹配的标识符',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'url',
+        title: '点击后跳转的链接地址',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'to',
+        title: '点击后跳转的目标路由对象，等同于 Vue Router 的 to 属性',
+        setters: ['StringSetter', 'ObjectSetter']
+      },
+      {
+        name: 'replace',
+        title: '是否在跳转时替换当前页面历史',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'title-style',
+        title: '自定义标题样式',
+        setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+      },
+      {
+        name: 'title-class',
+        title: '自定义标题类名',
+        setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+      },
+      {
+        name: 'show-zero-badge',
+        title: '当 badge 为数字 0 时，是否展示徽标',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      }
+    ],
+    slots: ['default', 'title'],
+    snippet: {
+      props: { title: '内容-标题项' },
+      children: '内容-标题项'
+    }
+  }
+];
+
+export default Tab;