@vtj/materials 0.8.146 → 0.8.148

package/src/vant/dropdown-menu.ts

@@ -0,0 +1,162 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const DropdownMenu: MaterialDescription[] = [
+  {
+    name: 'VantDropdownMenu',
+    alias: 'DropdownMenu',
+    label: '下拉菜单',
+    categoryId: 'feedback',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/dropdown-menu',
+    props: [
+      {
+        name: 'active-color',
+        title: '菜单标题和选项的选中态颜色',
+        defaultValue: '#1989fa',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'direction',
+        title: '菜单展开方向，可选值为up',
+        defaultValue: 'down',
+        setters: 'SelectSetter',
+        options: ['up', 'down']
+      },
+      {
+        name: 'z-index',
+        title: '菜单栏 z-index 层级',
+        defaultValue: 10,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'duration',
+        title: '动画时长，单位秒，设置为 0 可以禁用动画',
+        defaultValue: 0.2,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'overlay',
+        title: '是否显示遮罩层',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'close-on-click-overlay',
+        title: '是否在点击遮罩层后关闭菜单',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'close-on-click-outside',
+        title: '是否在点击外部元素后关闭菜单',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'swipe-threshold',
+        title:
+          '滚动阈值，选项数量超过阈值且总宽度超过菜单栏宽度时，可以横向滚动',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'auto-locate',
+        title: '当祖先元素设置了 transform 时，自动调整下拉菜单的位置',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    snippet: {
+      children: [
+        {
+          name: 'VantDropdownItem',
+          props: {
+            modelValue: 0,
+            options: [
+              { text: '全部商品', value: 0 },
+              { text: '新款商品', value: 1 },
+              { text: '活动商品', value: 2 }
+            ]
+          }
+        },
+        {
+          name: 'VantDropdownItem',
+          props: {
+            modelValue: 'a',
+            options: [
+              { text: '默认排序', value: 'a' },
+              { text: '好评排序', value: 'b' },
+              { text: '销量排序', value: 'c' }
+            ]
+          }
+        }
+      ]
+    }
+  },
+  {
+    name: 'VantDropdownItem',
+    alias: 'DropdownItem',
+    label: '下拉菜单项',
+    categoryId: 'feedback',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/dropdown-menu',
+    props: [
+      {
+        name: 'modelValue',
+        title: '当前选中项对应的 value',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'title',
+        title: '菜单项标题',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'options',
+        title: '选项数组',
+        defaultValue: [],
+        setters: 'ArraySetter'
+      },
+      {
+        name: 'disabled',
+        title: '是否禁用菜单',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'lazy-render',
+        title: '是否在首次展开时才渲染菜单内容',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'title-class',
+        title: '标题额外类名',
+        setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+      },
+      {
+        name: 'teleport',
+        title: '指定挂载的节点，等同于 Teleport 组件的 to 属性',
+        setters: ['StringSetter', 'ExpressionSetter']
+      }
+    ],
+    events: [
+      { name: 'update:modelValue' },
+      { name: 'change', params: ['value'] },
+      { name: 'open' },
+      { name: 'close' },
+      { name: 'opened' },
+      { name: 'closed' }
+    ],
+    slots: ['default', 'title'],
+    snippet: {
+      props: {
+        modelValue: 'a',
+        options: [
+          { text: '默认排序', value: 'a' },
+          { text: '好评排序', value: 'b' },
+          { text: '销量排序', value: 'c' }
+        ]
+      }
+    }
+  }
+];
+
+export default DropdownMenu;

package/src/vant/empty.ts

@@ -0,0 +1,36 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Empty: MaterialDescription = {
+  name: 'VantEmpty',
+  alias: 'Empty',
+  label: '空状态',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/empty',
+  props: [
+    {
+      name: 'image',
+      title: '图片类型, 支持传入图片 URL',
+      defaultValue: 'default',
+      setters: 'SelectSetter',
+      options: ['error', 'network', 'search', 'default']
+    },
+    {
+      name: 'image-size',
+      title: '图片大小，默认单位为 px',
+      setters: ['NumberSetter', 'StringSetter', 'ArraySetter']
+    },
+    {
+      name: 'description',
+      title: '图片下方的描述文字',
+      setters: 'StringSetter'
+    }
+  ],
+  slots: ['default', 'image', 'description'],
+  snippet: {
+    props: {
+      description: '描述文字'
+    }
+  }
+};
+
+export default Empty;

package/src/vant/field.ts

@@ -0,0 +1,282 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Field: MaterialDescription = {
+  name: 'VantField',
+  alias: 'Field',
+  label: '输入框',
+  categoryId: 'form',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/field',
+  props: [
+    {
+      name: 'modelValue',
+      title: '当前输入的值',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'label',
+      title: '输入框左侧文本',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'name',
+      title: '名称，作为提交表单时的标识符',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'id',
+      title: '输入框 id，同时会设置 label 的 for 属性',
+      defaultValue: 'van-field-n-input',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'type',
+      title:
+        '输入框类型, 支持原生 input 标签的所有 type 属性，额外支持了 digit 类型',
+      defaultValue: 'text',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'size',
+      title: '大小，可选值为 large normal',
+      setters: 'SelectSetter',
+      options: ['large', 'normal']
+    },
+    {
+      name: 'maxlength',
+      title: '输入的最大字符数',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'placeholder',
+      title: '输入框占位提示文字',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'border',
+      title: '是否显示内边框',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用输入框',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      title: '是否为只读状态，只读状态下无法输入内容',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'colon',
+      title: '是否在 label 后面添加冒号',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'required',
+      title: '是否显示表单必填星号',
+      defaultValue: null,
+      setters: ['BooleanSetter', 'StringSetter']
+    },
+    {
+      name: 'center',
+      title: '是否使内容垂直居中',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'clearable',
+      title: '是否启用清除图标，点击清除图标后会清空输入框',
+      defaultValue: false,
+      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: 'clickable',
+      title: '是否开启点击反馈',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'is-link',
+      title: '是否展示右侧箭头并开启点击反馈',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'autofocus',
+      title: '是否自动聚焦，iOS 系统不支持该属性',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-word-limit',
+      title: '是否显示字数统计，需要设置 maxlength 属性',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'error',
+      title: '是否将输入内容标红',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'error-message',
+      title: '底部错误提示文案，为空时不展示',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'error-message-align',
+      title: '错误提示文案对齐方式，可选值为 center right',
+      defaultValue: 'left',
+      setters: 'SelectSetter',
+      options: ['left', 'center', 'right']
+    },
+    {
+      name: 'formatter',
+      title: '输入内容格式化函数',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'format-trigger',
+      title: '格式化函数触发的时机，可选值为 onBlur',
+      defaultValue: 'onChange',
+      setters: 'SelectSetter',
+      options: ['onChange', 'onBlur']
+    },
+    {
+      name: 'arrow-direction',
+      title: '箭头方向，可选值为 left up down',
+      defaultValue: 'right',
+      setters: 'SelectSetter',
+      options: ['left', 'right', 'up', 'down']
+    },
+    {
+      name: 'label-class',
+      title: '左侧文本额外类名',
+      setters: ['StringSetter', 'ArraySetter', 'ObjectSetter']
+    },
+    {
+      name: 'label-width',
+      title: '左侧文本宽度，默认单位为 px',
+      defaultValue: '6.2em',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'label-align',
+      title: '左侧文本对齐方式，可选值为 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: 'autosize',
+      title:
+        '	是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px',
+      defaultValue: false,
+      setters: ['BooleanSetter', 'ObjectSetter']
+    },
+    {
+      name: 'left-icon',
+      title: '左侧图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'right-icon',
+      title: '右侧图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'icon-prefix',
+      title: '图标类名前缀，等同于 Icon 组件的 class-prefix 属性',
+      defaultValue: 'van-icon',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'rules',
+      title: '表单校验规则，详见 Form 组件',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'autocomplete',
+      title: 'HTML 原生属性，用于控制自动完成功能，详见 MDN - autocomplete',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'autocapitalize',
+      title:
+        'HTML 原生属性，用于控制文本输入时是否自动大写，此 API 仅在部分浏览器支持，详见 MDN - autocapitalize',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'enterkeyhint',
+      title:
+        'HTML 原生属性，用于控制回车键样式，此 API 仅在部分浏览器支持，详见 MDN - enterkeyhint',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'spellcheck ',
+      title:
+        'HTML 原生属性，用于检查元素的拼写错误，此 API 仅在部分浏览器支持，详见 MDN - spellcheck',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'autocorrect ',
+      title: '仅 Safari 适用，用于自动更正输入的文本，详见 MDN - autocorrect',
+      setters: 'StringSetter'
+    }
+  ],
+  events: [
+    'update:modelValue',
+    'focus',
+    'blur',
+    'clear',
+    'click',
+    'click-input',
+    'click-left-icon',
+    'click-right-icon',
+    'start-validate',
+    'end-validate'
+  ],
+  slots: [
+    'label',
+    'input',
+    'left-icon',
+    'right-icon',
+    'button',
+    'error-message',
+    'extra'
+  ],
+  snippet: {
+    props: {
+      label: '文本',
+      placeholder: '请输入用户名'
+    }
+  }
+};
+
+export default Field;

package/src/vant/floating-bubble.ts

@@ -0,0 +1,59 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const FloatingBubble: MaterialDescription = {
+  name: 'VantFloatingBubble',
+  alias: 'FloatingBubble',
+  label: '浮动气泡',
+  categoryId: 'feedback',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/floating-bubble',
+  props: [
+    {
+      name: 'offset',
+      title: '控制气泡位置',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'axis',
+      title: '拖拽的方向',
+      defaultValue: 'y',
+      setters: 'SelectSetter',
+      options: ['x', 'y', 'xy', 'lock']
+    },
+    {
+      name: 'magnetic',
+      title: '自动磁吸的方向',
+      setters: 'SelectSetter',
+      options: ['x', 'y']
+    },
+    {
+      name: 'icon',
+      title: '气泡图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'gap',
+      title: '气泡与窗口的最小间距，单位为 px',
+      defaultValue: 24,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'teleport',
+      title: '指定挂载的节点，等同于 Teleport 组件的 to 属性',
+      defaultValue: 'body',
+      setters: ['StringSetter', 'ExpressionSetter']
+    }
+  ],
+  events: [
+    { name: 'update:offset' },
+    { name: 'click', params: ['event'] },
+    { name: 'offset-change', params: ['data'] }
+  ],
+  slots: ['default'],
+  snippet: {
+    props: {
+      icon: 'chat'
+    }
+  }
+};
+
+export default FloatingBubble;

package/src/vant/floating-panel.ts

@@ -0,0 +1,86 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const FloatingPanel: MaterialDescription = {
+  name: 'VantFloatingPanel',
+  alias: 'FloatingPanel',
+  label: '浮动面板',
+  categoryId: 'feedback',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/floating-panel',
+  props: [
+    {
+      name: 'height',
+      title: '当前面板的显示高度',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'anchors',
+      title: '设置自定义锚点, 单位 px',
+      defaultValue: [100, window.innerWidth * 0.6],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'duration',
+      title: '动画时长，单位秒，设置为 0 可以禁用动画',
+      defaultValue: 0.3,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'content-draggable',
+      title: '允许拖拽内容容器',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'lock-scroll',
+      title: '当不拖拽时，是否锁定背景滚动',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'safe-area-inset-bottom',
+      title: '是否开启底部安全区适配',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [{ name: 'height-change', params: ['height'] }],
+  slots: ['default', 'header'],
+  snippet: {
+    children: [
+      {
+        name: 'VantCellGroup',
+        children: [
+          {
+            name: 'VantCell',
+            props: {
+              size: 'large',
+              title: {
+                type: 'JSExpression',
+                value: 'this.context.index'
+              }
+            },
+            directives: [
+              {
+                name: 'vFor',
+                value: {
+                  type: 'JSExpression',
+                  value: '20'
+                }
+              },
+              {
+                name: 'vBind',
+                value: {
+                  type: 'JSExpression',
+                  value: 'this.context.index'
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default FloatingPanel;