@vtj/materials 0.8.146 → 0.8.147

package/src/vant/form.ts

@@ -0,0 +1,140 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Form: MaterialDescription = {
+  name: 'VantForm',
+  alias: 'Form',
+  label: '表单',
+  categoryId: 'form',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/form',
+  props: [
+    {
+      name: 'label-width',
+      title: '表单项 label 宽度，默认单位为px',
+      defaultValue: '6.2em',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'label-align',
+      title: '表单项 label 对齐方式，可选值为 center right top',
+      defaultValue: 'left',
+      setters: 'SelectSetter',
+      options: ['left', 'center', 'right', 'top']
+    },
+    {
+      name: 'input-align',
+      title: '输入框对齐方式，可选值为 center right',
+      defaultValue: 'left',
+      setters: 'SelectSetter',
+      options: ['left', 'center', 'right']
+    },
+    {
+      name: 'error-message-align',
+      title: '错误提示文案对齐方式，可选值为 center right',
+      defaultValue: 'left',
+      setters: 'SelectSetter',
+      options: ['left', 'center', 'right']
+    },
+    {
+      name: 'validate-trigger',
+      title:
+        '表单校验触发时机，可选值为 onChange、onSubmit 支持通过数组同时设置多个值',
+      defaultValue: 'onBlur',
+      setters: ['StringSetter', 'ArraySetter']
+    },
+    {
+      name: 'colon',
+      title: '是否在 label 后面添加冒号',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用表单中的所有输入框',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      title: '是否将表单中的所有输入框设置为只读状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'required',
+      title: '是否显示表单必填星号',
+      defaultValue: null,
+      setters: ['BooleanSetter', 'StringSetter']
+    },
+    {
+      name: 'validate-first',
+      title: '是否在某一项校验不通过时停止校验',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'scroll-to-error',
+      title: '是否在提交表单且校验不通过时滚动至错误的表单项',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'scroll-to-error-position',
+      title:
+        '滚动至错误的表单项时的位置，可选值为 center | end | nearest | start',
+      setters: 'SelectSetter',
+      options: ['center', 'end', 'nearest', 'start']
+    },
+    {
+      name: 'show-error',
+      title: '是否在校验不通过时标红输入框',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-error-message',
+      title: '是否在校验不通过时在输入框下方展示错误提示',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'submit-on-enter',
+      title: '是否在按下回车键时提交表单',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['submit', 'failed'],
+  slots: ['default'],
+  snippet: {
+    children: [
+      {
+        name: 'VantCellGroup',
+        props: {
+          inset: true
+        },
+        children: [
+          {
+            name: 'VantField',
+            props: {
+              modelValue: '用户名',
+              name: '用户名',
+              label: '用户名',
+              placeholder: '用户名'
+            }
+          },
+          {
+            name: 'VantField',
+            props: {
+              modelValue: '密码',
+              name: '密码',
+              label: '密码',
+              placeholder: '密码'
+            }
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default Form;

package/src/vant/grid.ts

@@ -0,0 +1,160 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Grid: MaterialDescription[] = [
+  {
+    name: 'VantGrid',
+    alias: 'Grid',
+    label: '宫格',
+    categoryId: 'nav',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/grid',
+    props: [
+      {
+        name: 'column-num',
+        title: '列数',
+        defaultValue: 4,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'icon-size',
+        title: '图标大小，默认单位为px',
+        defaultValue: 28,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'gutter',
+        title: '格子之间的间距，默认单位为px',
+        defaultValue: 0,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'border',
+        title: '是否显示边框',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'center',
+        title: '是否将格子内容居中显示',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'square',
+        title: '是否将格子固定为正方形',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'clickable',
+        title: '是否开启格子点击反馈',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'direction',
+        title: '格子内容排列的方向',
+        defaultValue: 'vertical',
+        setters: 'SelectSetter',
+        options: ['vertical', 'horizontal']
+      },
+      {
+        name: 'reverse',
+        title: '是否调换图标和文本的位置',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    snippet: {
+      children: [
+        {
+          name: 'VantGridItem',
+          props: {
+            icon: 'photo-o',
+            text: '文字'
+          },
+          directives: [
+            {
+              name: 'vFor',
+              value: {
+                type: 'JSExpression',
+                value: '8'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'VantGridItem',
+    alias: 'GridItem',
+    label: '宫格项',
+    categoryId: 'nav',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/grid',
+    props: [
+      {
+        name: 'text',
+        title: '文字',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'icon',
+        title: '图标名称或图片链接，等同于 Icon 组件的 name 属性',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'icon-prefix',
+        title: '图标类名前缀，等同于 Icon 组件的 class-prefix 属性',
+        defaultValue: 'van-icon',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'icon-color',
+        title: '图标颜色，等同于 Icon 组件的 color 属性',
+        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'
+      }
+    ],
+    events: [{ name: 'click', params: ['event'] }],
+    slots: ['default', 'icon', 'text'],
+    snippet: {
+      props: {
+        icon: 'photo-o',
+        text: '文字'
+      }
+    }
+  }
+];
+
+export default Grid;

package/src/vant/highlight.ts

@@ -0,0 +1,70 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Highlight: MaterialDescription = {
+  name: 'VantHighlight',
+  alias: 'Highlight',
+  label: '高亮文本',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/highlight',
+  props: [
+    {
+      name: 'auto-escape',
+      title: '是否自动转义',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'case-sensitive',
+      title: '是否区分大小写',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'highlight-class',
+      title: '高亮元素的类名',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'highlight-tag',
+      title: '高亮元素对应的 HTML 标签名',
+      defaultValue: 'span',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'keywords',
+      title: '期望高亮的文本',
+      setters: ['StringSetter', 'ArraySetter']
+    },
+    {
+      name: 'source-string',
+      title: '源文本',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'tag',
+      title: '根节点对应的 HTML 标签名',
+      defaultValue: 'div',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'unhighlight-class',
+      title: '非高亮元素的类名',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'unhighlight-tag',
+      title: '非高亮元素对应的 HTML 标签名',
+      defaultValue: 'span',
+      setters: 'StringSetter'
+    }
+  ],
+  snippet: {
+    props: {
+      'source-string':
+        '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。',
+      keywords: '难题'
+    }
+  }
+};
+
+export default Highlight;

package/src/vant/icon.ts

@@ -0,0 +1,65 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Icon: MaterialDescription = {
+  name: 'VantIcon',
+  alias: 'Icon',
+  label: '图标',
+  categoryId: 'base',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/icon',
+  props: [
+    {
+      name: 'name',
+      title: '图标名称或图片链接',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'dot',
+      title: '是否显示图标右上角小红点',
+      setters: 'BooleanSetter',
+      defaultValue: false
+    },
+    {
+      name: 'badge',
+      title: '图标右上角徽标的内容',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'badge-props',
+      title: '自定义徽标的属性，传入的对象会被透传给 Badge 组件的 props',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'color',
+      title: '图标颜色',
+      defaultValue: 'inherit',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'size',
+      title: '图标大小，如 20px 2em，默认单位为 px',
+      defaultValue: 'inherit',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'class-prefix',
+      title: '类名前缀，用于使用自定义图标',
+      defaultValue: 'van-icon',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'tag',
+      title: '根节点对应的 HTML 标签名',
+      defaultValue: 'i',
+      setters: 'StringSetter'
+    }
+  ],
+  events: ['click'],
+  snippet: {
+    props: {
+      name: 'https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png',
+      size: 30
+    }
+  }
+};
+
+export default Icon;

package/src/vant/image-preview.ts

@@ -0,0 +1,166 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const ImagePreview: MaterialDescription = {
+  name: 'VantImagePreview',
+  alias: 'ImagePreview',
+  label: '图片预览',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/image-preview',
+  props: [
+    {
+      name: 'show',
+      title: '是否展示图片预览',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'images',
+      title: '需要预览的图片 URL 数组',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'start-position',
+      title: '图片预览起始位置索引',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'swipe-duration',
+      title: '动画时长，单位为 ms',
+      defaultValue: 300,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'show-index',
+      title: '是否显示页码',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-indicators',
+      title: '是否显示轮播指示器',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'loop',
+      title: '是否开启循环播放',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'double-scale',
+      title: '是否启用双击缩放手势，禁用后，点击时会立即关闭图片预览',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'before-close',
+      title: '关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'close-on-popstate',
+      title: '是否在页面回退时自动关闭',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-on-click-image',
+      title: '是否在点击图片后关闭图片预览',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-on-click-overlay',
+      title: '是否在点击遮罩层后关闭图片预览',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'vertical',
+      title: '是否开启纵向手势滑动',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'class-name',
+      title: '自定义类名',
+      setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+    },
+    {
+      name: 'max-zoom',
+      title: '手势缩放时，最大缩放比例',
+      defaultValue: 3,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'min-zoom',
+      title: '手势缩放时，最小缩放比例',
+      defaultValue: 1 / 3,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'closeable',
+      title: '是否显示关闭图标',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'close-icon',
+      title: '关闭图标名称或图片链接',
+      defaultValue: 'clear',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'close-icon-position',
+      title: '关闭图标位置',
+      defaultValue: 'top-right',
+      setters: 'SelectSetter',
+      options: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+    },
+    {
+      name: 'transition',
+      title: '动画类名，等价于 transition 的 name 属性',
+      defaultValue: 'van-fade',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'overlay-class',
+      title: '自定义遮罩层类名',
+      setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+    },
+    {
+      name: 'overlay-style',
+      title: '自定义遮罩层样式',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'teleport',
+      title: '指定挂载的节点，等同于 Teleport 组件的 to 属性',
+      setters: ['StringSetter', 'ExpressionSetter']
+    }
+  ],
+  events: [
+    { name: 'update:show' },
+    { name: 'close', params: ['data'] },
+    { name: 'closed' },
+    { name: 'change', params: ['index'] },
+    { name: 'scale', params: ['data'] },
+    { name: 'long-press', params: ['data'] }
+  ],
+  slots: ['index', 'cover', 'image'],
+  snippet: {
+    props: {
+      show: true,
+      images: [
+        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
+        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'
+      ]
+    },
+    children: [{ name: 'template', slot: 'index' }]
+  }
+};
+
+export default ImagePreview;