@vtj/materials 0.8.145 → 0.8.147

package/src/vant/checkbox.ts

@@ -0,0 +1,156 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Checkbox: MaterialDescription[] = [
+  {
+    name: 'VantCheckbox',
+    alias: 'Checkbox',
+    label: '复选框',
+    categoryId: 'form',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/checkbox',
+    props: [
+      {
+        name: 'modelValue',
+        title: '是否为选中状态',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'name',
+        title: '标识符，通常为一个唯一的字符串或数字',
+        setters: 'ExpressionSetter'
+      },
+      {
+        name: 'shape',
+        title: '形状，可选值为 square',
+        defaultValue: 'round',
+        setters: 'SelectSetter',
+        options: ['round', 'square']
+      },
+      {
+        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'
+      },
+      {
+        name: 'bind-group',
+        title: '是否与复选框组绑定',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'indeterminate',
+        title: '是否为不确定状态',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['change', 'click'],
+    slots: ['default', 'icon'],
+    snippet: {
+      children: '复选框'
+    }
+  },
+  {
+    name: 'VantCheckboxGroup',
+    alias: 'CheckboxGroup',
+    label: '复选框组',
+    categoryId: 'form',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/checkbox',
+    props: [
+      {
+        name: 'modelValue',
+        title: '所有选中项的标识符',
+        setters: 'ArraySetter'
+      },
+      {
+        name: 'disabled',
+        title: '是否禁用所有复选框',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'max',
+        title: '最大可选数，0 为无限制',
+        defaultValue: 0,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'direction',
+        title: '排列方向，可选值为 horizontal',
+        defaultValue: 'vertical',
+        setters: 'SelectSetter',
+        options: ['vertical', 'horizontal']
+      },
+      {
+        name: 'icon-size',
+        title: '所有复选框的图标大小，默认单位为 px',
+        defaultValue: '20px',
+        setters: ['StringSetter', 'NumberSetter']
+      },
+      {
+        name: 'checked-color',
+        title: '所有复选框的选中状态颜色',
+        defaultValue: '#1989fa',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'shape',
+        title: '形状，可选值为 square',
+        defaultValue: 'round',
+        setters: 'SelectSetter',
+        options: ['round', 'square']
+      }
+    ],
+    events: ['change'],
+    slots: ['default', 'toggleAll'],
+    snippet: {
+      props: {
+        modelValue: ['a', 'b']
+      },
+      children: [
+        {
+          name: 'VantCheckbox',
+          props: {
+            name: 'a'
+          },
+          children: '复选框 a'
+        },
+        {
+          name: 'VantCheckbox',
+          props: {
+            name: 'b'
+          },
+          children: '复选框 b'
+        }
+      ]
+    }
+  }
+];
+
+export default Checkbox;

package/src/vant/circle.ts

@@ -0,0 +1,94 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Circle: MaterialDescription = {
+  name: 'VantCircle',
+  alias: 'Circle',
+  label: '环形进度条',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/circle',
+  props: [
+    {
+      name: 'currentRate',
+      title: '当前进度',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'rate',
+      title: '目标进度',
+      defaultValue: 100,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'size',
+      title: '圆环直径，默认单位为 px',
+      defaultValue: '100px',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'color',
+      title: '进度条颜色，传入对象格式可以定义渐变色',
+      defaultValue: '#1989fa',
+      setters: ['StringSetter', 'ObjectSetter', 'StringSetter']
+    },
+    {
+      name: 'layer-color',
+      title: '轨道颜色',
+      defaultValue: 'white',
+      setters: ['StringSetter', 'StringSetter']
+    },
+    {
+      name: 'fill',
+      title: '填充颜色',
+      defaultValue: 'none',
+      setters: ['StringSetter', 'StringSetter']
+    },
+    {
+      name: 'speed',
+      title: '动画速度（单位为 rate/s）',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'text',
+      title: '文字',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'stroke-width',
+      title: '进度条宽度',
+      defaultValue: 40,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'stroke-linecap',
+      title: '进度条端点的形状，可选值为 square butt',
+      defaultValue: 'round',
+      setters: 'SelectSetter',
+      options: ['round', 'square', 'butt']
+    },
+    {
+      name: 'clockwise',
+      title: '是否顺时针增加',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'start-position',
+      title: '进度起始位置',
+      defaultValue: 'top',
+      setters: 'SelectSetter',
+      options: ['left', 'right', 'top', 'bottom']
+    }
+  ],
+  events: ['update:currentRate'],
+  slots: ['default'],
+  snippet: {
+    props: {
+      currentRate: 30,
+      rate: 100,
+      text: '30%'
+    }
+  }
+};
+
+export default Circle;

package/src/vant/collapse.ts

@@ -0,0 +1,157 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Collapse: MaterialDescription[] = [
+  {
+    name: 'VantCollapse',
+    alias: 'Collapse',
+    label: '折叠面板',
+    categoryId: 'view',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/collapse',
+    props: [
+      {
+        name: 'modelValue',
+        title: '当前展开面板的 name',
+        setters: ['NumberSetter', 'StringSetter', 'ArraySetter']
+      },
+      {
+        name: 'accordion',
+        title: '是否开启手风琴模式',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'border	',
+        title: '是否显示外边框',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['change'],
+    snippet: {
+      props: {
+        modelValue: ['1']
+      },
+      children: [
+        {
+          name: 'VantCollapseItem',
+          props: {
+            title: '标题1',
+            name: '1'
+          },
+          children: '代码是写出来给人看的，附带能在机器上运行。'
+        },
+        {
+          name: 'VantCollapseItem',
+          props: {
+            title: '标题2',
+            name: '2'
+          },
+          children: '技术无非就是那些开发它的人的共同灵魂。。'
+        },
+        {
+          name: 'VantCollapseItem',
+          props: {
+            title: '标题3',
+            name: '3'
+          },
+          children: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。'
+        }
+      ]
+    }
+  },
+  {
+    name: 'VantCollapseItem',
+    alias: 'CollapseItem',
+    label: '折叠面板',
+    categoryId: 'view',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/collapse',
+    props: [
+      {
+        name: 'name',
+        title: '唯一标识符，默认为索引值',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'icon',
+        title: '标题栏左侧图标名称或图片链接，等同于 Icon 组件的 name 属性',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'size',
+        title: '标题栏大小，可选值为 large',
+        setters: 'SelectSetter',
+        options: ['large']
+      },
+      {
+        name: 'title',
+        title: '标题栏左侧内容',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'value',
+        title: '标题栏右侧内容',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'label',
+        title: '标题栏描述信息',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'border',
+        title: '是否显示内边框',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'is-link',
+        title: '是否展示标题栏右侧箭头并开启点击反馈',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'disabled',
+        title: '是否禁用面板',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'readonly',
+        title: '是否为只读状态，只读状态下无法操作面板',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'lazy-render',
+        title: '是否在首次展开时才渲染面板内容',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'title-class',
+        title: '左侧标题额外类名',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'value-class',
+        title: '右侧内容额外类名',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'label-class',
+        title: 'label-class',
+        setters: 'StringSetter'
+      }
+    ],
+    events: ['toggle'],
+    slots: ['default', 'title', 'value', 'label', 'icon', 'right-icon'],
+    snippet: {
+      props: {
+        title: '这是个标题'
+      },
+      children: '代码是写出来给人看的，附带能在机器上运行。'
+    }
+  }
+];
+
+export default Collapse;

package/src/vant/contact-card.ts

@@ -0,0 +1,44 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const ContactCard: MaterialDescription = {
+  name: 'VantContactCard',
+  alias: 'ContactCard',
+  label: '联系人卡片',
+  categoryId: 'business',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/contact-card',
+  props: [
+    {
+      name: 'type',
+      title: '卡片类型',
+      defaultValue: 'add',
+      setters: 'SelectSetter',
+      options: ['add', 'edit']
+    },
+    {
+      name: 'name',
+      title: '联系人姓名',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'tel',
+      title: '联系人手机号',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'add-text',
+      title: '添加时的文案提示',
+      defaultValue: '添加联系人',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'editable',
+      title: '是否可以编辑联系人',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [{ name: 'click', params: ['event'] }],
+  snippet: {}
+};
+
+export default ContactCard;

package/src/vant/contact-edit.ts

@@ -0,0 +1,69 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const ContactEdit: MaterialDescription = {
+  name: 'VantContactCard',
+  alias: 'ContactEdit',
+  label: '联系人编辑',
+  categoryId: 'business',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/contact-edit',
+  props: [
+    {
+      name: 'contact-info',
+      title: '联系人信息',
+      defaultValue: {},
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'is-edit',
+      title: '是否为编辑联系人',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'is-saving',
+      title: '是否显示保存按钮加载动画',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'is-deleting',
+      title: '是否显示删除按钮加载动画',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'tel-validator',
+      title: '手机号格式校验函数',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'show-set-default',
+      title: '是否显示默认联系人栏',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'set-default-label',
+      title: '默认联系人栏文案',
+      setters: 'StringSetter'
+    }
+  ],
+  events: [
+    { name: 'save', params: ['content'] },
+    { name: 'delete', params: ['content'] },
+    { name: 'change-default', params: ['checked'] }
+  ],
+  snippet: {
+    props: {
+      'is-edit': true,
+      'show-set-default': true,
+      'contact-info': {
+        tel: '',
+        name: ''
+      },
+      'set-default-label': '设为默认联系人'
+    }
+  }
+};
+
+export default ContactEdit;

package/src/vant/contact-list.ts

@@ -0,0 +1,59 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const ContactList: MaterialDescription = {
+  name: 'VantContactList',
+  alias: 'ContactList',
+  label: '联系人列表',
+  categoryId: 'business',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/contact-list',
+  props: [
+    {
+      name: 'modelValue',
+      title: '当前选中联系人的 id',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'list',
+      title: '联系人列表',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'add-text',
+      title: '新建按钮文案',
+      defaultValue: '新建联系人',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'default-tag-text',
+      title: '默认联系人标签文案',
+      setters: 'StringSetter'
+    }
+  ],
+  events: [
+    { name: 'add' },
+    { name: 'edit', params: ['contact', 'index'] },
+    { name: 'select', params: ['contact', 'index'] }
+  ],
+  snippet: {
+    props: {
+      modelValue: '1',
+      list: [
+        {
+          id: '1',
+          name: '张三',
+          tel: '13000000000',
+          isDefault: true
+        },
+        {
+          id: '2',
+          name: '李四',
+          tel: '1310000000'
+        }
+      ],
+      'default-tag-text': '默认'
+    }
+  }
+};
+
+export default ContactList;

package/src/vant/count-down.ts

@@ -0,0 +1,44 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const CountDown: MaterialDescription = {
+  name: 'VantCountDown',
+  alias: 'CountDown',
+  label: '倒计时',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/count-down',
+  props: [
+    {
+      name: 'time',
+      title: '倒计时时长，单位毫秒',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'format',
+      title: '时间格式',
+      defaultValue: 'HH:ss:mm',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'auto-start',
+      title: '是否自动开始倒计时',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'millisecond',
+      title: '是否开启毫秒级渲染',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [{ name: 'finish' }, { name: 'change', params: ['currentTime'] }],
+  slots: ['default'],
+  snippet: {
+    props: {
+      time: 30 * 60 * 60 * 1000
+    }
+  }
+};
+
+export default CountDown;