@vtj/materials 0.9.5 → 0.9.7

package/src/element/checkbox.ts

@@ -10,51 +10,51 @@ const Checkbox: MaterialDescription[] = [
     props: [
       {
         name: 'modelValue',
+        title: '选中项绑定值',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter', 'BooleanSetter']
       },
       {
         name: 'label',
+        title:
+          '选中状态的值，只有在绑定对象类型为 array 时有效。 如果没有 value， label则作为value使用',
         defaultValue: '',
         setters: ['InputSetter']
       },
       {
         name: 'value',
+        title:
+          '选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter', 'BooleanSetter', 'JSONSetter']
       },
       {
         name: 'trueValue',
+        title: '选中时的值',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter']
       },
       {
         name: 'falseValue',
-        defaultValue: '',
-        setters: ['InputSetter', 'NumberSetter']
-      },
-      {
-        name: 'trueLabel',
-        defaultValue: '',
-        setters: ['InputSetter', 'NumberSetter']
-      },
-      {
-        name: 'falseLabel',
+        title: '没有选中时的值',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter']
       },
       {
         name: 'disabled',
+        title: '是否禁用',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'border',
+        title: '是否显示边框',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'size',
+        title: 'Checkbox 的尺寸',
         defaultValue: 'default',
         options: ['large', 'default', 'small'],
         setters: 'SelectSetter'
@@ -66,6 +66,7 @@ const Checkbox: MaterialDescription[] = [
       },
       {
         name: 'checked',
+        title: '当前是否勾选',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
@@ -73,14 +74,14 @@ const Checkbox: MaterialDescription[] = [
         name: 'indeterminate',
         defaultValue: false,
         title: '设置 indeterminate 状态，只负责样式控制',
-        label: '半选',
+        // label: '半选',
         setters: 'BooleanSetter'
       },
       {
         name: 'validateEvent',
         defaultValue: true,
         title: '输入时是否触发表单的校验',
-        label: '表单校验',
+        // label: '表单校验',
         setters: 'BooleanSetter'
       },
       {
@@ -96,8 +97,24 @@ const Checkbox: MaterialDescription[] = [
         setters: 'StringSetter'
       },
       {
-        name: 'controls',
-        label: 'controls',
+        name: 'aria-controls',
+        title: '与 aria-control一致, 当 indeterminate为 true时生效',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'trueLabel',
+        title: '选中时的值(deprecated)',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter']
+      },
+      {
+        name: 'falseLabel',
+        title: '没有选中时的值(deprecated)',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter']
+      },
+      {
+        name: 'controls(deprecated)',
         title: '与 aria-control一致, 当 indeterminate为 true时生效',
         setters: 'BooleanSetter'
       }
@@ -128,42 +145,44 @@ const Checkbox: MaterialDescription[] = [
     props: [
       {
         name: 'modelValue',
+        title: '绑定值',
         defaultValue: [],
         setters: 'JSONSetter'
       },
       {
         name: 'size',
+        title: '多选框组尺寸',
         defaultValue: '',
         options: ['large', 'default', 'small'],
         setters: 'SelectSetter'
       },
       {
         name: 'disabled',
+        title: '是否禁用',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'min',
+        title: '可被勾选的 checkbox 的最小数量',
         defaultValue: '',
         setters: 'NumberSetter'
       },
       {
         name: 'max',
+        title: '可被勾选的 checkbox 的最大数量',
         defaultValue: '',
         setters: 'NumberSetter'
       },
       {
-        name: 'label',
+        name: 'aria-label',
+        title: '原生 aria-label属性',
         defaultValue: '',
         setters: 'InputSetter'
       },
-      {
-        name: 'value',
-        defaultValue: '',
-        setters: ['InputSetter', 'NumberSetter', 'BooleanSetter', 'JSONSetter']
-      },
       {
         name: 'textColor',
+        title: '当按钮为活跃状态时的字体颜色',
         defaultValue: '#ffffff',
         setters: 'ColorSetter'
       },
@@ -173,12 +192,23 @@ const Checkbox: MaterialDescription[] = [
         title: '当按钮为活跃状态时的边框和背景颜色',
         setters: 'ColorSetter'
       },
+      {
+        name: 'tag',
+        defaultValue: 'div',
+        title: '复选框组元素标签',
+        setters: 'StringSetter'
+      },
       {
         name: 'validateEvent',
         defaultValue: true,
         title: '输入时是否触发表单的校验',
-        label: '表单校验',
         setters: 'BooleanSetter'
+      },
+      {
+        name: 'label',
+        title: '原生 aria-label属性',
+        defaultValue: '',
+        setters: 'StringSetter'
       }
     ],
     events: ['change', 'update:modelValue'],
@@ -216,37 +246,62 @@ const Checkbox: MaterialDescription[] = [
     categoryId: 'form',
     package: 'element-plus',
     props: [
+      {
+        name: 'modelValue',
+        title: '选中状态的值，只有在绑定对象类型为 array 时有效。',
+        defaultValue: [],
+        setters: ['StringSetter', 'NumberSetter', 'BooleanSetter', 'JSONSetter']
+      },
       {
         name: 'label',
+        title:
+          '选中状态的值，只有在绑定对象类型为 array 时有效。 如果没有 value， label则作为value使用',
         defaultValue: '',
-        setters: ['JSONSetter', 'InputSetter', 'NumberSetter', 'BooleanSetter']
+        setters: ['StringSetter', 'NumberSetter', 'BooleanSetter', 'JSONSetter']
       },
       {
-        name: 'trueLabel',
+        name: 'trueValue',
+        title: '选中时的值',
         defaultValue: '',
-        setters: ['InputSetter', 'NumberSetter']
+        setters: ['StringSetter', 'NumberSetter']
       },
       {
-        name: 'falseLabel',
+        name: 'falseValue',
+        title: '没有选中时的值',
         defaultValue: '',
-        setters: ['InputSetter', 'NumberSetter']
+        setters: ['StringSetter', 'NumberSetter']
       },
       {
         name: 'disabled',
+        title: '是否禁用',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'name',
+        title: '原生 name 属性',
         defaultValue: '',
-        setters: 'InputSetter'
+        setters: 'StringSetter'
       },
       {
         name: 'checked',
         defaultValue: false,
         setters: 'BooleanSetter'
+      },
+      {
+        name: 'trueLabel',
+        title: '选中时的值',
+        defaultValue: '',
+        setters: ['StringSetter', 'NumberSetter']
+      },
+      {
+        name: 'falseLabel',
+        title: '没有选中时的值',
+        defaultValue: '',
+        setters: ['StringSetter', 'NumberSetter']
       }
     ],
+    slots: ['default'],
     snippet: {
       props: {
         label: '按钮选项'

package/src/element/colorPicker.ts

@@ -10,11 +10,13 @@ const ColorPicker: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '选中项绑定值',
       defaultValue: '',
-      setters: 'InputSetter'
+      setters: 'StringSetter'
     },
     {
       name: 'disabled',
+      title: '是否禁用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -26,27 +28,32 @@ const ColorPicker: MaterialDescription = {
     },
     {
       name: 'showAlpha',
+      title: '是否支持透明度选择',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'colorFormat',
+      title: '写入 v-model 的颜色的格式',
       defaultValue: '',
       options: ['hsl', 'hsv', 'hex', 'rgb'],
       setters: 'SelectSetter'
     },
     {
       name: 'popperClass',
+      title: 'ColorPicker 下拉框的类名',
       defaultValue: '',
-      setters: 'InputSetter'
+      setters: 'StringSetter'
     },
     {
       name: 'predefine',
+      title: '预定义颜色',
       defaultValue: '',
       setters: 'JSONSetter'
     },
     {
       name: 'validateEvent',
+      title: '输入时是否触发表单的校验',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
@@ -58,16 +65,25 @@ const ColorPicker: MaterialDescription = {
       defaultValue: 0
     },
     {
-      name: 'label',
-      label: 'label',
+      name: 'aria-label',
       title: 'ColorPicker 的 aria-label',
       setters: 'StringSetter'
     },
     {
       name: 'id',
-      label: 'id',
       title: 'ColorPicker 的 id',
       setters: 'StringSetter'
+    },
+    {
+      name: 'teleported',
+      title: '是否将 popover 的下拉列表渲染至 body 下',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'label',
+      title: 'ColorPicker 的 aria-label(deprecated)',
+      setters: 'StringSetter'
     }
   ],
   events: [

package/src/element/datePicker.ts

@@ -9,8 +9,14 @@ const DatePicker: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '绑定值，如果它是数组，长度应该是 2',
       defaultValue: '',
-      setters: 'ExpressionSetter'
+      setters: [
+        'NumberSetter',
+        'StringSetter',
+        'ArraySetter',
+        'ExpressionSetter'
+      ]
     },
     {
       name: 'readonly',
@@ -30,6 +36,7 @@ const DatePicker: MaterialDescription = {
     },
     {
       name: 'editable',
+      title: '文本框可输入',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
@@ -47,14 +54,12 @@ const DatePicker: MaterialDescription = {
       name: 'startPlaceholder',
       defaultValue: '',
       title: '范围选择时开始日期的占位内容',
-      label: '开始日期',
       setters: 'InputSetter'
     },
     {
       name: 'endPlaceholder',
       defaultValue: '',
       title: '范围选择时结束日期的占位内容',
-      label: '结束日期',
       setters: 'InputSetter'
     },
     {
@@ -76,48 +81,46 @@ const DatePicker: MaterialDescription = {
     },
     {
       name: 'format',
+      title: '显示在输入框中的格式',
       defaultValue: 'YYYY-MM-DD',
       setters: 'InputSetter'
     },
     {
       name: 'popperClass',
+      title: 'DatePicker 下拉框的类名',
       defaultValue: '',
       setters: 'InputSetter'
     },
+    {
+      name: 'popper-options',
+      title: '自定义 popper 选项',
+      defaultValue: '',
+      setters: ['ObjectSetter', 'JSONSetter']
+    },
     {
       name: 'rangeSeparator',
       defaultValue: '-',
       title: '选择范围时的分隔符',
-      label: '分隔符',
       setters: 'InputSetter'
     },
     {
       name: 'defaultValue',
+      title: '可选，选择器打开时默认显示的时间',
       defaultValue: '',
       setters: 'ExpressionSetter'
     },
     {
       name: 'defaultTime',
+      title: '范围选择时选中日期所使用的当日内具体时刻',
       defaultValue: '',
       setters: 'ExpressionSetter'
     },
     {
       name: 'valueFormat',
+      title: '可选，绑定值的格式。 不指定则绑定值为 Date 对象',
       defaultValue: '',
       setters: 'InputSetter'
     },
-    {
-      name: 'dateFormat',
-      defaultValue: '',
-      setters: 'InputSetter',
-      title: '时间选择器下拉列表中显示的日期格式'
-    },
-    {
-      name: 'timeFormat',
-      defaultValue: '',
-      setters: 'InputSetter',
-      title: '时间选择器下拉列表中显示的时间格式'
-    },
     {
       name: 'id',
       defaultValue: '',
@@ -130,6 +133,7 @@ const DatePicker: MaterialDescription = {
     },
     {
       name: 'unlinkPanels',
+      title: '在范围选择器里取消两个日期面板之间的联动',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -153,6 +157,8 @@ const DatePicker: MaterialDescription = {
     },
     {
       name: 'disabledDate',
+      title:
+        '一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
@@ -171,8 +177,48 @@ const DatePicker: MaterialDescription = {
     {
       name: 'teleported',
       defaultValue: true,
-      title: '设置自定义类名',
+      title: '是否将 date-picker 的下拉列表插入至 body 元素',
       setters: 'BooleanSetter'
+    },
+    {
+      name: 'empty-values',
+      title: '组件的空值配置',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'value-on-clear',
+      title: '清空选项的值',
+      setters: [
+        'StringSetter',
+        'NumberSetter',
+        'BooleanSetter',
+        'FunctionSetter'
+      ]
+    },
+    {
+      name: 'fallback-placements',
+      title: 'Tooltip 可用的 positions',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'placement',
+      title: '下拉框出现的位置',
+      defaultValue: 'bottom',
+      setters: 'SelectSetter',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end'
+      ]
     }
   ],
   events: [
@@ -185,6 +231,9 @@ const DatePicker: MaterialDescription = {
     {
       name: 'focus'
     },
+    {
+      name: 'clear'
+    },
     {
       name: 'calendar-change'
     },
@@ -204,6 +253,18 @@ const DatePicker: MaterialDescription = {
     },
     {
       name: 'range-separator'
+    },
+    {
+      name: 'prev-month'
+    },
+    {
+      name: 'next-month'
+    },
+    {
+      name: 'prev-year'
+    },
+    {
+      name: 'next-year'
     }
   ]
 };

package/src/element/dateTime.ts

@@ -11,7 +11,7 @@ const dateTime: MaterialDescription = {
     {
       name: 'modelValue',
       defaultValue: '',
-      setters: 'ExpressionSetter'
+      setters: ['NumberSetter', 'StringSetter', 'ExpressionSetter']
     },
     {
       name: 'readonly',
@@ -42,25 +42,22 @@ const dateTime: MaterialDescription = {
     {
       name: 'placeholder',
       defaultValue: '',
-      setters: 'InputSetter'
+      setters: 'StringSetter'
     },
     {
       name: 'startPlaceholder',
       defaultValue: '',
       title: '范围选择时开始日期的占位内容',
-      label: '开始日期',
-      setters: 'InputSetter'
+      setters: 'StringSetter'
     },
     {
       name: 'endPlaceholder',
       defaultValue: '',
       title: '范围选择时结束日期的占位内容',
-      label: '结束日期',
       setters: 'InputSetter'
     },
     {
       name: 'arrowControl',
-      label: 'arrowControl',
       title: '是否使用箭头进行时间选择',
       setters: 'BooleanSetter',
       defaultValue: false
@@ -84,60 +81,65 @@ const dateTime: MaterialDescription = {
     },
     {
       name: 'format',
+      title: '显示在输入框中的格式',
       defaultValue: 'YYYY-MM-DD HH:mm:ss',
-      setters: 'InputSetter'
+      setters: 'StringSetter'
     },
     {
       name: 'popperClass',
+      title: 'DateTimePicker 下拉框的类名',
       defaultValue: '',
-      setters: 'InputSetter'
+      setters: 'StringSetter'
     },
     {
       name: 'rangeSeparator',
       defaultValue: '-',
       title: '选择范围时的分隔符',
-      label: '分隔符',
-      setters: 'InputSetter'
+      setters: 'StringSetter'
     },
     {
       name: 'defaultValue',
+      title: '可选，选择器打开时默认显示的时间',
       defaultValue: '',
       setters: 'ExpressionSetter'
     },
     {
       name: 'defaultTime',
+      title: '选择日期后的默认时间值。 如未指定则默认时间值为 00:00:00',
       defaultValue: '',
       setters: 'ExpressionSetter'
     },
     {
       name: 'valueFormat',
+      title: '可选，绑定值的格式。 不指定则绑定值为 Date 对象',
       defaultValue: '',
-      setters: 'InputSetter'
+      setters: 'StringSetter'
     },
     {
       name: 'dateFormat',
       defaultValue: '',
-      setters: 'InputSetter',
+      setters: 'StringSetter',
       title: '时间选择器下拉列表中显示的日期格式'
     },
     {
       name: 'timeFormat',
       defaultValue: '',
-      setters: 'InputSetter',
+      setters: 'StringSetter',
       title: '时间选择器下拉列表中显示的时间格式'
     },
     {
       name: 'id',
       defaultValue: '',
-      setters: ['InputSetter']
+      setters: ['StringSetter', 'ArraySetter', 'ExpressionSetter']
     },
     {
       name: 'name',
       defaultValue: '',
-      setters: 'InputSetter'
+      setters: 'StringSetter'
     },
     {
       name: 'unlinkPanels',
+      title: '在范围选择器里取消两个日期面板之间的联动',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -176,6 +178,27 @@ const dateTime: MaterialDescription = {
       defaultValue: true,
       title: '设置自定义类名',
       setters: 'BooleanSetter'
+    },
+    {
+      name: 'emptyValues',
+      title: '组件的空值配置',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'valueOnClear',
+      title: '清空选项的值',
+      setters: [
+        'StringSetter',
+        'NumberSetter',
+        'BooleanSetter',
+        'FunctionSetter'
+      ]
+    },
+    {
+      name: 'showNow',
+      title: '是否显示 now 按钮',
+      defaultValue: true,
+      setters: 'BooleanSetter'
     }
   ],
   events: [
@@ -188,6 +211,9 @@ const dateTime: MaterialDescription = {
     {
       name: 'focus'
     },
+    {
+      name: 'clear'
+    },
     {
       name: 'calendar-change'
     },
@@ -204,6 +230,18 @@ const dateTime: MaterialDescription = {
     },
     {
       name: 'range-separator'
+    },
+    {
+      name: 'prev-month'
+    },
+    {
+      name: 'next-month'
+    },
+    {
+      name: 'prev-year'
+    },
+    {
+      name: 'next-year'
     }
   ],
   snippet: {