@vtj/materials 0.9.5 → 0.9.7

package/src/element/form.ts

@@ -10,6 +10,7 @@ const form: MaterialDescription[] = [
     props: [
       {
         name: 'model',
+        title: '表单数据对象',
         defaultValue: '',
         setters: 'ExpressionSetter'
       },
@@ -43,14 +44,12 @@ const form: MaterialDescription[] = [
         name: 'hideRequiredAsterisk',
         defaultValue: false,
         title: '是否显示必填字段的标签旁边的红色星号',
-        label: '隐藏必填星号',
         setters: 'BooleanSetter'
       },
       {
         name: 'requireAsteriskPosition',
         defaultValue: 'left',
         title: '星号的位置',
-        label: '星号位置',
         options: ['left', 'right'],
         setters: 'SelectSetter'
       },
@@ -58,7 +57,6 @@ const form: MaterialDescription[] = [
         name: 'showMessage',
         defaultValue: true,
         title: '是否显示校验错误信息',
-        label: '显示错误',
         setters: 'BooleanSetter'
       },
       {
@@ -77,7 +75,6 @@ const form: MaterialDescription[] = [
         name: 'validateOnRuleChange',
         defaultValue: true,
         title: '是否在 rules 属性改变后立即触发一次验证',
-        label: 'validate',
         setters: 'BooleanSetter'
       },
       {
@@ -95,6 +92,11 @@ const form: MaterialDescription[] = [
         name: 'scrollToError',
         defaultValue: false,
         setters: 'BooleanSetter'
+      },
+      {
+        name: 'scrollIntoViewOptions',
+        defaultValue: '',
+        setters: ['ExpressionSetter', 'BooleanSetter']
       }
     ],
     events: [
@@ -102,6 +104,7 @@ const form: MaterialDescription[] = [
         name: 'validate'
       }
     ],
+    slots: ['default'],
     snippet: {
       name: 'ElForm',
       props: {
@@ -154,6 +157,12 @@ const form: MaterialDescription[] = [
         defaultValue: '',
         setters: 'InputSetter'
       },
+      {
+        name: 'labelPosition',
+        defaultValue: '',
+        setters: 'SelectSetter',
+        options: ['left', 'right', 'top']
+      },
       {
         name: 'labelWidth',
         defaultValue: '',
@@ -193,6 +202,17 @@ const form: MaterialDescription[] = [
         defaultValue: 'default',
         options: ['large', 'default', 'small'],
         setters: 'SelectSetter'
+      },
+      {
+        name: 'for',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'validateStatus',
+        title: 'formitem 校验的状态',
+        options: ['', 'error', 'validating', 'success'],
+        setters: 'SelectSetter'
       }
     ],
     slots: ['default', 'label', 'error'],

package/src/element/index.ts

@@ -24,6 +24,8 @@ import datePicker from './datePicker';
 import dateTime from './dateTime';
 import input from './input';
 import inputNumber from './inputNumber';
+import inputTag from './inputTag';
+import Mention from './mention';
 import radio from './radio';
 import rate from './rate';
 import select from './select';
@@ -115,6 +117,8 @@ const components: MaterialDescription[] = [
   image,
   input,
   inputNumber,
+  inputTag,
+  Mention,
   layout,
   link,
   menu,

package/src/element/input.ts

@@ -136,7 +136,7 @@ const Input: MaterialDescription = {
       setters: 'InputSetter'
     },
     {
-      name: 'label',
+      name: 'aria-label',
       defaultValue: '',
       setters: 'InputSetter'
     },

package/src/element/inputNumber.ts

@@ -41,7 +41,7 @@ const InputNumber: MaterialDescription = {
     {
       name: 'size',
       defaultValue: 'default',
-      options: ['large', 'small'],
+      options: ['large', 'default', 'small'],
       setters: 'SelectSetter'
     },
     {
@@ -73,7 +73,7 @@ const InputNumber: MaterialDescription = {
       setters: 'InputSetter'
     },
     {
-      name: 'label',
+      name: 'ariaLabel',
       defaultValue: '',
       setters: 'InputSetter'
     },
@@ -94,7 +94,7 @@ const InputNumber: MaterialDescription = {
       setters: 'BooleanSetter'
     }
   ],
-  slots: ['decrease-icon', 'increase-icon'],
+  slots: ['decrease-icon', 'increase-icon', 'prefix', 'suffix'],
   events: [
     {
       name: 'change'

package/src/element/inputTag.ts

@@ -0,0 +1,135 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const InputTag: MaterialDescription = {
+  name: 'ElInputTag',
+  label: '标签输入框',
+  categoryId: 'form',
+  doc: 'https://element-plus.org/zh-CN/component/input-tag.html',
+  props: [
+    {
+      name: 'modelValue',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'max',
+      title: '可添加标签的最大数量',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'tagType',
+      title: '标签类型',
+      defaultValue: 'info',
+      setters: 'SelectSetter',
+      options: ['', 'success', 'info', 'warning', 'danger']
+    },
+    {
+      name: 'tagEffect',
+      title: '标签效果',
+      defaultValue: 'light',
+      setters: 'SelectSetter',
+      options: ['', 'light', 'dark', 'plain']
+    },
+    {
+      name: 'draggable',
+      title: '是否可以拖动标签',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'size',
+      setters: 'SelectSetter',
+      options: ['large', 'default', 'small']
+    },
+    {
+      name: 'clearable',
+      title: '是否显示清除按钮',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'validateEvent',
+      title: '是否触发表单验证',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'autofocus',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'id',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'tabindex',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'maxlength',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'minlength',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'placeholder',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'autocomplete',
+      defaultValue: 'off',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'ariaLabel',
+      setters: 'StringSetter'
+    }
+  ],
+  events: [
+    {
+      name: 'change'
+    },
+    {
+      name: 'input'
+    },
+    {
+      name: 'add-tag'
+    },
+    {
+      name: 'remove-tag'
+    },
+    {
+      name: 'focus'
+    },
+    {
+      name: 'blur'
+    },
+    {
+      name: 'clear'
+    },
+    {
+      name: 'update:modelValue'
+    }
+  ],
+  slots: ['tag', 'prefix', 'suffix'],
+  snippet: {
+    props: {
+      modelValue: ['1', '2']
+    }
+  }
+};
+
+export default InputTag;

package/src/element/mention.ts

@@ -0,0 +1,137 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Mention: MaterialDescription = {
+  name: 'ElMention',
+  label: '提及',
+  categoryId: 'form',
+  doc: 'https://element-plus.org/zh-CN/component/mention.html#api',
+  props: [
+    {
+      name: 'options',
+      title: '提及选项列表',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'prefix',
+      title: '触发字段的前缀。 字符串长度必须且只能为 1',
+      defaultValue: '@',
+      setters: ['StringSetter', 'ArraySetter']
+    },
+    {
+      name: 'split',
+      title: '用于拆分提及的字符。 字符串长度必须且只能为 1	',
+      defaultValue: ' ',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'filterOption',
+      title: '定制筛选器选项逻辑',
+      setters: ['BooleanSetter', 'FunctionSetter']
+    },
+    {
+      name: 'placement',
+      title: '设置弹出位置',
+      defaultValue: 'bottom',
+      options: ['top', 'bottom'],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'showArrow',
+      title: '下拉菜单的内容是否有箭头',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'offset',
+      title: '下拉面板偏移量',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'whole',
+      title: '当退格键被按下做删除操作时，是否将提及部分作为整体删除',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'checkIsWhole',
+      title: '当退格键被按下做删除操作时，检查是否将提及部分作为整体删除',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'loading',
+      title: '提及的下拉面板是否处于加载状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'modelValue',
+      title: '输入值',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'popperClass',
+      title: '自定义浮层类名',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'popperOptions',
+      title: '参数',
+      setters: ['ObjectSetter', 'JSONSetter']
+    },
+    {
+      name: 'inputProps',
+      setters: ['JSONSetter', 'ExpressionSetter']
+    }
+  ],
+  events: [
+    {
+      name: 'update:modelValue'
+    },
+    {
+      name: 'search'
+    },
+    {
+      name: 'select'
+    },
+    {
+      name: 'input'
+    }
+  ],
+  slots: [
+    'label',
+    'loading',
+    'header',
+    'footer',
+    'prefix',
+    'suffix',
+    'prepend',
+    'append'
+  ],
+  snippet: {
+    props: {
+      options: [
+        {
+          label: 'Fuphoenixes',
+          value: 'Fuphoenixes'
+        },
+        {
+          label: 'kooriookami',
+          value: 'kooriookami'
+        },
+        {
+          label: 'Jeremy',
+          value: 'Jeremy'
+        },
+        {
+          label: 'btea',
+          value: 'btea'
+        }
+      ],
+      modelValue: '@'
+    }
+  }
+};
+
+export default Mention;

package/src/element/radio.ts

@@ -15,40 +15,39 @@ const Radio: MaterialDescription[] = [
       },
       {
         name: 'value',
-        label: 'value',
         title: '单选框的值',
-        setters: ['InputSetter', 'NumberSetter', 'BooleanSetter']
+        setters: ['StringSetter', 'NumberSetter', 'BooleanSetter']
       },
       {
         name: 'label',
         defaultValue: '',
-        setters: ['InputSetter']
-      },
-      {
-        name: 'value',
-        defaultValue: '',
-        setters: ['InputSetter', 'NumberSetter', 'BooleanSetter']
+        title: '单选框的 label 如果value没有值， label则作为value使用',
+        setters: ['StringSetter', 'NumberSetter', 'BooleanSetter']
       },
       {
         name: 'disabled',
+        title: '是否禁用单选框',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'border',
+        title: '是否显示边框',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'size',
+        title: '单选框的尺寸',
         defaultValue: '',
         options: ['large', 'default', 'small'],
         setters: 'SelectSetter'
       },
       {
         name: 'name',
+        title: '原始 name 属性',
         defaultValue: '',
-        setters: 'BooleanSetter'
+        setters: 'StringSetter'
       }
     ],
     events: [
@@ -75,40 +74,45 @@ const Radio: MaterialDescription[] = [
     props: [
       {
         name: 'modelValue',
+        title: '绑定值',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter', 'BooleanSetter']
       },
       {
         name: 'size',
+        title: '单选框按钮或边框按钮的大小',
         defaultValue: '',
         options: ['large', 'default', 'small'],
         setters: 'SelectSetter'
       },
       {
         name: 'disabled',
+        title: '是否禁用',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'textColor',
+        title: '按钮形式的 Radio 激活时的文本颜色',
         defaultValue: '#ffffff',
         setters: 'ColorSetter'
       },
 
       {
         name: 'fill',
+        title: '按钮形式的 Radio 激活时的填充色和边框色',
         defaultValue: '#409EFF',
         setters: 'ColorSetter'
       },
 
       {
         name: 'validateEvent',
+        title: '输入时是否触发表单的校验',
         defaultValue: true,
         setters: 'BooleanSetter'
       },
       {
-        name: 'label',
-        label: 'label',
+        name: 'aria-label',
         title: '与 RadioGroup 中的 aria-label 属性相同',
         setters: 'StringSetter'
       },
@@ -169,23 +173,27 @@ const Radio: MaterialDescription[] = [
     props: [
       {
         name: 'label',
+        title: '单选框的label,如果没有value,label则作为value使用',
         defaultValue: '',
-        setters: ['InputSetter', 'NumberSetter']
+        setters: ['StringSetter', 'NumberSetter']
       },
       {
         name: 'value',
+        title: '单选框的值',
         defaultValue: '',
-        setters: ['InputSetter', 'NumberSetter', 'BooleanSetter']
+        setters: ['StringSetter', 'NumberSetter', 'BooleanSetter']
       },
       {
         name: 'disabled',
+        title: '是否禁用单选框',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'name',
+        title: '原生 name 属性',
         defaultValue: '',
-        setters: 'InputSetter'
+        setters: 'StringSetter'
       }
     ],
     slots: ['default'],

package/src/element/slider.ts

@@ -10,49 +10,57 @@ const Slider: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '选中项绑定值',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'min',
+      title: '最小值',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'max',
+      title: '最大值',
       defaultValue: 100,
       setters: 'NumberSetter'
     },
     {
       name: 'disabled',
+      title: '是否禁用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'step',
+      title: '步长',
       defaultValue: 1,
       setters: 'NumberSetter'
     },
     {
       name: 'showInput',
+      title: '是否显示输入框，仅在非范围选择时有效',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'showInputControls',
+      title: '在显示输入框的情况下，是否显示输入框的控制按钮',
       defaultValue: true,
-      label: '输入框按钮',
+      // label: '输入框按钮',
       setters: 'BooleanSetter'
     },
     {
       name: 'size',
       defaultValue: 'default',
-      title: '滑块的大小',
+      title: 'slider 包装器的大小，垂直模式下该属性不可用',
       options: ['large', 'default', 'small'],
       setters: 'SelectSetter'
     },
     {
       name: 'inputSize',
+      title: '输入框的大小，如果设置了 size 属性，默认值自动取 size',
       defaultValue: 'default',
       options: ['large', 'default', 'small'],
       setters: 'SelectSetter'
@@ -67,18 +75,17 @@ const Slider: MaterialDescription = {
       name: 'showTooltip',
       defaultValue: true,
       title: '是否显示提示信息',
-      label: '显示提示',
       setters: 'BooleanSetter'
     },
     {
       name: 'formatTooltip',
       defaultValue: '',
       title: '格式化提示信息',
-      label: '格式化信息',
-      setters: 'JSONSetter'
+      setters: 'FunctionSetter'
     },
     {
       name: 'range',
+      title: '是否开启选择范围',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -95,7 +102,8 @@ const Slider: MaterialDescription = {
       setters: 'InputSetter'
     },
     {
-      name: 'label',
+      name: 'aria-label',
+      title: '原生 aria-label属性',
       defaultValue: '',
       setters: 'InputSetter'
     },
@@ -103,18 +111,17 @@ const Slider: MaterialDescription = {
       name: 'rangeStartLabel',
       defaultValue: '',
       title: '当 range 为true时，屏幕阅读器标签开始的标记',
-      label: '开始的标记',
       setters: 'InputSetter'
     },
     {
       name: 'rangeEndLabel',
       defaultValue: '',
       title: '当 range 为true时，屏幕阅读器标签结尾的标记',
-      label: '结尾的标记',
       setters: 'InputSetter'
     },
     {
       name: 'formatValueText',
+      title: '显示屏幕阅读器的 aria-valuenow 属性的格式',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
@@ -126,11 +133,13 @@ const Slider: MaterialDescription = {
     },
     {
       name: 'tooltipClass',
+      title: 'tooltip 的自定义类名',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'placement',
+      title: 'Tooltip 出现的位置',
       defaultValue: 'top',
       options: [
         'top',
@@ -150,11 +159,14 @@ const Slider: MaterialDescription = {
     },
     {
       name: 'marks',
+      title:
+        '标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式',
       defaultValue: '',
       setters: 'JSONSetter'
     },
     {
       name: 'validateEvent',
+      title: '输入时是否触发表单的校验',
       defaultValue: true,
       setters: 'BooleanSetter'
     }