@vtj/materials 0.8.146 → 0.8.148

package/src/vant/signature.ts

@@ -0,0 +1,60 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Signature: MaterialDescription = {
+  name: 'VantSignature',
+  alias: 'Signature',
+  label: '签名',
+  categoryId: 'form',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/signature',
+  props: [
+    {
+      name: 'type',
+      title: '导出图片类型',
+      defaultValue: 'png',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'pen-color',
+      title: '笔触颜色，默认黑色',
+      defaultValue: '#000000',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'line-width',
+      title: '线条宽度',
+      defaultValue: 3,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'background-color',
+      title: '背景颜色',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'tips',
+      title: '当不支持 Canvas 的时候出现的提示文案',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'clear-button-text',
+      title: '清除按钮文案',
+      defaultValue: '清空',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'confirm-button-text',
+      title: '	确认按钮文案',
+      defaultValue: '确认',
+      setters: 'StringSetter'
+    }
+  ],
+  events: [
+    { name: 'start' },
+    { name: 'end' },
+    { name: 'signing', params: ['event'] },
+    { name: 'submit', params: ['data'] },
+    { name: 'clear' }
+  ]
+};
+
+export default Signature;

package/src/vant/skeleton.ts

@@ -0,0 +1,170 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Skeleton: MaterialDescription[] = [
+  {
+    name: 'VantSkeleton',
+    alias: 'Skeleton',
+    label: '骨架屏',
+    categoryId: 'view',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/skeleton',
+    props: [
+      {
+        name: 'row',
+        title: '段落占位图行数',
+        defaultValue: 0,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'row-width',
+        title: '段落占位图宽度，可传数组来设置每一行的宽度',
+        defaultValue: '100%',
+        setters: ['StringSetter', 'NumberSetter', 'ArraySetter']
+      },
+      {
+        name: 'title',
+        title: '是否显示标题占位图',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'avatar',
+        title: '是否显示头像占位图',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'loading',
+        title: '是否显示骨架屏，传 false 时会展示子组件内容',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'animate',
+        title: '是否开启动画',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'round',
+        title: '是否将标题和段落显示为圆角风格',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'title-width',
+        title: '标题占位图宽度',
+        defaultValue: '40%',
+        setters: ['StringSetter', 'NumberSetter']
+      },
+      {
+        name: 'avatar-size',
+        title: '头像占位图大小',
+        defaultValue: 32,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'avatar-shape',
+        title: '头像占位图形状',
+        defaultValue: 'round',
+        setters: 'SelectSetter',
+        options: ['round', 'square']
+      }
+    ],
+    slots: ['default', 'template'],
+    snippet: {
+      props: {
+        title: true,
+        avatar: true,
+        row: 3
+      }
+    }
+  },
+  {
+    name: 'VantSkeletonParagraph',
+    alias: 'SkeletonParagraph',
+    label: '骨架屏文本',
+    categoryId: 'view',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/skeleton',
+    props: [
+      {
+        name: 'round',
+        title: '是否将段落显示为圆角风格',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'row-width',
+        title: '段落占位图宽度',
+        defaultValue: '100%',
+        setters: 'StringSetter'
+      }
+    ]
+  },
+  {
+    name: 'VantSkeletonTitle',
+    alias: 'SkeletonTitle',
+    label: '骨架屏标题',
+    categoryId: 'view',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/skeleton',
+    props: [
+      {
+        name: 'round',
+        title: '是否将段落显示为圆角风格',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'row-width',
+        title: '段落占位图宽度',
+        defaultValue: '40%',
+        setters: ['StringSetter', 'NumberSetter']
+      }
+    ]
+  },
+  {
+    name: 'VantSkeletonAvatar',
+    alias: 'SkeletonAvatar',
+    label: '骨架屏头像',
+    categoryId: 'view',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/skeleton',
+    props: [
+      {
+        name: 'avatar-size',
+        title: '头像占位图大小',
+        defaultValue: '32px',
+        setters: ['StringSetter', 'NumberSetter']
+      },
+      {
+        name: 'avatar-shape',
+        title: '头像占位图形状',
+        defaultValue: 'round',
+        setters: 'SelectSetter',
+        options: ['round', 'square']
+      }
+    ]
+  },
+  {
+    name: 'VantSkeletonImage',
+    alias: 'SkeletonImage',
+    label: '骨架屏图片',
+    categoryId: 'view',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/skeleton',
+    props: [
+      {
+        name: 'image-size',
+        title: '图片占位图大小',
+        defaultValue: '32px',
+        setters: ['StringSetter', 'NumberSetter']
+      },
+      {
+        name: 'image-shape',
+        title: '图片占位图形状',
+        defaultValue: 'round',
+        setters: 'SelectSetter',
+        options: ['round', 'square']
+      }
+    ]
+  }
+];
+
+export default Skeleton;

package/src/vant/slider.ts

@@ -0,0 +1,103 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Slider: MaterialDescription = {
+  name: 'VantSlider',
+  alias: 'Slider',
+  label: '滑块',
+  categoryId: 'form',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/slider',
+  props: [
+    {
+      name: 'modelValue',
+      title: '当前进度百分比，在双滑块模式下为数组格式',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'ArraySetter']
+    },
+    {
+      name: 'max',
+      title: '最大值',
+      defaultValue: 100,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'min',
+      title: '最小值',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'step',
+      title: '步长',
+      defaultValue: 1,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'bar-height',
+      title: '进度条高度，默认单位为 px',
+      defaultValue: 2,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'button-size',
+      title: '滑块按钮大小，默认单位为 px',
+      defaultValue: 24,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'active-color',
+      title: '进度条激活态颜色',
+      defaultValue: '#1989fa',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'inactive-color',
+      title: '进度条非激活态颜色',
+      defaultValue: '#e5e5e5',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'range',
+      title: '是否开启双滑块模式',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'reverse',
+      title: '是否将进度条反转',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用滑块',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      title: '是否为只读状态，只读状态下无法修改滑块的值',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'vertical',
+      title: 'vertical',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    { name: 'update:modelValue', params: ['value'] },
+    { name: 'change', params: ['value'] },
+    { name: 'drag-start', params: ['event'] },
+    { name: 'drag-end', params: ['event'] }
+  ],
+  slots: ['button', 'left-button', 'right-button'],
+  snippet: {
+    props: {
+      modelValue: 50
+    }
+  }
+};
+
+export default Slider;

package/src/vant/space.ts

@@ -0,0 +1,63 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Space: MaterialDescription = {
+  name: 'VantSpace',
+  alias: 'Space',
+  label: '间距',
+  categoryId: 'base',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/space',
+  props: [
+    {
+      name: 'direction',
+      title: '间距方向',
+      defaultValue: 'horizontal',
+      setters: 'SelectSetter',
+      options: ['vertical', 'horizontal']
+    },
+    {
+      name: 'size',
+      title:
+        '间距大小，如 20px 2em，默认单位为 px，支持数组形式来分别设置横向和纵向间距',
+      defaultValue: '8px',
+      setters: ['NumberSetter', 'StringSetter', 'ArraySetter']
+    },
+    {
+      name: 'align',
+      title: '设置子元素的对齐方式',
+      setters: 'SelectSetter',
+      options: ['start', 'end', 'center', 'baseline']
+    },
+    {
+      name: 'wrap',
+      title: '是否自动换行，仅适用于水平方向排列',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'fill',
+      title: '是否让 Space 变为一个块级元素，填充整个父元素',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  slots: ['default'],
+  snippet: {
+    props: {},
+    children: [
+      { name: 'VantButton', props: { type: 'primary' }, children: '按钮' },
+      { name: 'VantButton', props: { type: 'primary' }, children: '按钮' },
+      {
+        name: 'VantButton',
+        props: {
+          type: 'primary',
+          style: {
+            padding: '30px'
+          }
+        },
+        children: '按钮'
+      }
+    ]
+  }
+};
+
+export default Space;

package/src/vant/stepper.ts

@@ -0,0 +1,162 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Stepper: MaterialDescription = {
+  name: 'VantStepper',
+  alias: 'Stepper',
+  label: '步进器',
+  categoryId: 'form',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/stepper',
+  props: [
+    {
+      name: 'modelValue',
+      title: '当前输入的值',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'min',
+      title: '最小值',
+      defaultValue: 1,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'max',
+      title: '最大值',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'auto-fixed',
+      title:
+        '是否自动校正超出限制范围的数值，设置为 false 后输入超过限制范围的数值将不会自动校正',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'default-value',
+      title: '初始值，当 v-model 为空时生效',
+      defaultValue: 1,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'step',
+      title: '步长，每次点击时改变的值',
+      defaultValue: 1,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'name',
+      title:
+        '标识符，通常为一个唯一的字符串或数字，可以在 change 事件回调参数中获取',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'input-width',
+      title: '输入框宽度，默认单位为 px',
+      defaultValue: 32,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'button-size',
+      title: '按钮大小以及输入框高度，默认单位为 px',
+      defaultValue: 28,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'decimal-length',
+      title: '固定显示的小数位数',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'theme',
+      title: '样式风格',
+      setters: 'SelectSetter',
+      options: ['round']
+    },
+    {
+      name: 'placeholder',
+      title: '输入框占位提示文字',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'integer',
+      title: '是否只允许输入整数',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用步进器',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disable-plus',
+      title: '是否禁用增加按钮',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disable-minus',
+      title: '是否禁用减少按钮',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disable-input',
+      title: '是否禁用输入框',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'before-change',
+      title: '输入值变化前的回调函数，返回 false 可阻止输入，支持返回 Promise',
+      defaultValue: false,
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'show-plus',
+      title: '是否显示增加按钮',
+      defaultValue: true,
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'show-minus',
+      title: '是否显示减少按钮',
+      defaultValue: true,
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'show-input',
+      title: '是否显示输入框',
+      defaultValue: true,
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'long-press',
+      title: '是否开启长按手势，开启后可以长按增加和减少按钮',
+      defaultValue: true,
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'allow-empty',
+      title: '是否允许输入的值为空，设置为 true 后允许传入空字符串',
+      defaultValue: false,
+      setters: 'FunctionSetter'
+    }
+  ],
+  events: [
+    { name: 'update:modelValue' },
+    { name: 'change', params: ['value', 'details'] },
+    { name: 'overlimit' },
+    { name: 'plus' },
+    { name: 'minus' },
+    { name: 'focus', params: ['event'] },
+    { name: 'blur', params: ['event'] }
+  ],
+  snippet: {
+    props: {
+      modelValue: 1
+    }
+  }
+};
+
+export default Stepper;

package/src/vant/steps.ts

@@ -0,0 +1,85 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Steps: MaterialDescription[] = [
+  {
+    name: 'VantSteps',
+    alias: 'Steps',
+    label: '步骤条',
+    categoryId: 'view',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/steps',
+    props: [
+      {
+        name: 'active',
+        title: '当前步骤对应的索引值',
+        defaultValue: 0,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'direction',
+        title: '步骤条方向',
+        defaultValue: 'horizontal',
+        setters: 'SelectSetter',
+        options: ['horizontal', 'vertical']
+      },
+      {
+        name: 'active-icon',
+        title: '当前步骤对应的底部图标',
+        defaultValue: 'checked',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'inactive-icon',
+        title: '非当前步骤对应的底部图标',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'finish-icon',
+        title: '已完成步骤对应的底部图标，优先级高于 inactive-icon',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'active-color',
+        title: '当前步骤和已完成步骤的颜色',
+        defaultValue: '#1989fa',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'inactive-color',
+        title: '未激活步骤的颜色',
+        defaultValue: '#969799',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'icon-prefix',
+        title: '图标类名前缀',
+        defaultValue: 'van-icon',
+        setters: 'StringSetter'
+      }
+    ],
+    events: [{ name: 'click-step', params: ['index'] }],
+    snippet: {
+      props: {
+        active: 1
+      },
+      children: [
+        { name: 'VantStep', children: '买家下单' },
+        { name: 'VantStep', children: '商家接单' },
+        { name: 'VantStep', children: '买家提货' },
+        { name: 'VantStep', children: '交易完成' }
+      ]
+    }
+  },
+  {
+    name: 'VantStep',
+    alias: 'Step',
+    label: '步骤条项',
+    categoryId: 'view',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/steps',
+    slots: ['default', 'active-icon', 'inactive-icon', 'finish-icon'],
+    snippet: {
+      children: '步骤条项'
+    }
+  }
+];
+
+export default Steps;

package/src/vant/sticky.ts

@@ -0,0 +1,52 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Sticky: MaterialDescription = {
+  name: 'VantSticky',
+  alias: 'Sticky',
+  label: '粘性布局',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/sticky',
+  props: [
+    {
+      name: 'position',
+      title: '吸附位置',
+      defaultValue: 'top',
+      setters: 'SelectSetter',
+      options: ['top', 'bottom']
+    },
+    {
+      name: 'offset-top',
+      title: '吸顶时与顶部的距离，支持 px vw vh rem 单位，默认 px',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'offset-bottom',
+      title: '吸底时与底部的距离，支持 px vw vh rem 单位，默认 px',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'z-index',
+      title: '吸顶时的 z-index',
+      defaultValue: 99,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'container',
+      title: '容器对应的 HTML 节点',
+      setters: 'ExpressionSetter'
+    }
+  ],
+  events: [
+    { name: 'change', params: ['isFixed'] },
+    { name: 'scroll', params: ['data'] } // { scrollTop: number, isFixed: boolean }
+  ],
+  snippet: {
+    children: [
+      { name: 'VantButton', props: { type: 'primary' }, children: '基础用法' }
+    ]
+  }
+};
+
+export default Sticky;