@vtj/materials 0.15.1 → 0.16.0

package/src/element/tree.ts

@@ -10,47 +10,56 @@ const Tree: MaterialDescription = {
   props: [
     {
       name: 'data',
+      title: '展示数据',
       defaultValue: '',
       setters: 'JSONSetter'
     },
     {
       name: 'empty-text',
+      title: '内容为空的时候展示的文本',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'node-key',
+      title: '每个树节点用来作为唯一标识的属性，整棵树应该是唯一的',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'props',
+      title: '配置选项',
       defaultValue: '',
       setters: 'JSONSetter'
     },
     {
       name: 'render-after-expand',
+      title: '是否在第一次展开某个树节点后才渲染其子节点',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'load',
+      title: '加载子树数据的方法，仅当 lazy 属性为true 时生效',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'render-content',
+      title: '树节点的内容区的渲染 Function',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'highlight-current',
+      title: '是否高亮当前选中节点',
       defaultValue: false,
       label: '高亮当前节点',
       setters: 'BooleanSetter'
     },
     {
       name: 'default-expand-all',
+      title: '是否默认展开所有节点',
       defaultValue: false,
       label: '展开所有节点',
       setters: 'BooleanSetter'
@@ -87,12 +96,14 @@ const Tree: MaterialDescription = {
     },
     {
       name: 'show-checkbox',
+      title: '节点是否可被选择',
       defaultValue: false,
       label: '显示checkbox',
       setters: 'BooleanSetter'
     },
     {
       name: 'check-strictly',
+      title: '在显示复选框的情况下，是否严格的遵循父子不互相关联的做法',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -105,6 +116,7 @@ const Tree: MaterialDescription = {
     },
     {
       name: 'current-node-key',
+      title: '当前选中的节点',
       defaultValue: '',
       label: '当前节点key',
       setters: ['InputSetter', 'NumberSetter']
@@ -119,26 +131,31 @@ const Tree: MaterialDescription = {
     },
     {
       name: 'accordion',
+      title: '是否每次只打开一个同级树节点展开',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'indent',
+      title: '相邻级节点间的水平缩进，单位为像素',
       defaultValue: 16,
       setters: 'NumberSetter'
     },
     {
       name: 'icon',
+      title: '自定义树节点图标组件',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'lazy',
+      title: '是否懒加载子节点，需与 load 方法结合使用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'draggable',
+      title: '是否开启拖拽节点功能',
       defaultValue: false,
       setters: 'BooleanSetter'
     },

package/src/element/treeSelect.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { effect, size } from '../shared';
 
 const TreeSelect: MaterialDescription = {
   name: 'ElTreeSelect',
@@ -18,46 +19,55 @@ const TreeSelect: MaterialDescription = {
     // tree
     {
       name: 'data',
+      title: '展示数据',
       defaultValue: '',
       setters: 'JSONSetter'
     },
     {
       name: 'empty-text',
+      title: '内容为空的时候展示的文本',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'node-key',
+      title: '每个树节点用来作为唯一标识的属性，整棵树应该是唯一的',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'props',
+      title: '配置选项',
       defaultValue: '',
       setters: 'JSONSetter'
     },
     {
       name: 'renderAfterExpand',
+      title: '是否在第一次展开某个树节点后才渲染其子节点',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'load',
+      title: '加载子树数据的方法，仅当 lazy 属性为true 时生效',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'renderContent',
+      title: '树节点的内容区的渲染 Function',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'highlightCurrent',
+      title: '是否高亮当前选中节点',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'defaultExpandAll',
+      title: '是否默认展开所有节点',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -90,12 +100,14 @@ const TreeSelect: MaterialDescription = {
     },
     {
       name: 'showCheckbox',
+      title: '节点是否可被选择',
       defaultValue: false,
       label: '显示checkbox',
       setters: 'BooleanSetter'
     },
     {
       name: 'checkStrictly',
+      title: '在显示复选框的情况下，是否严格的遵循父子不互相关联的做法',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -108,6 +120,7 @@ const TreeSelect: MaterialDescription = {
     },
     {
       name: 'currentNodeKey',
+      title: '当前选中的节点',
       defaultValue: '',
       label: '当前节点key',
       setters: ['InputSetter', 'NumberSetter']
@@ -122,26 +135,31 @@ const TreeSelect: MaterialDescription = {
     },
     {
       name: 'accordion',
+      title: '是否每次只打开一个同级树节点展开',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'indent',
+      title: '相邻级节点间的水平缩进，单位为像素',
       defaultValue: 16,
       setters: 'NumberSetter'
     },
     {
       name: 'icon',
+      title: '自定义树节点图标组件',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'lazy',
+      title: '是否懒加载子节点，需与 load 方法结合使用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'draggable',
+      title: '是否开启拖拽节点功能',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -161,6 +179,7 @@ const TreeSelect: MaterialDescription = {
     // select
     {
       name: 'modelValue',
+      title: '选中项绑定值',
       defaultValue: '',
       setters: [
         'StringSetter',
@@ -172,32 +191,32 @@ const TreeSelect: MaterialDescription = {
     },
     {
       name: 'multiple',
+      title: '是否多选',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'disabled',
+      title: '是否禁用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'valueKey',
+      title: '作为 value 唯一标识的键名，绑定值为对象类型时必填',
       defaultValue: 'value',
       setters: 'InputSetter'
     },
-    {
-      name: 'size',
-      defaultValue: 'default',
-      options: ['large', 'default', 'small'],
-      setters: 'SelectSetter'
-    },
+    size('size'),
     {
       name: 'clearable',
+      title: '是否可以清空选项',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'collapseTags',
+      title: '多选时是否将选中值按文字的形式展示',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -211,158 +230,196 @@ const TreeSelect: MaterialDescription = {
     },
     {
       name: 'multipleLimit',
+      title: 'multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
-      name: 'name',
+      name: 'id',
+      title: '原生 input 的 id',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
-      name: 'effect',
-      defaultValue: 'light',
-      options: ['dark', 'light'],
-      setters: 'SelectSetter'
+      name: 'name',
+      title: 'Select 输入框的原生 name 属性',
+      defaultValue: '',
+      setters: 'InputSetter'
     },
+    effect('effect'),
     {
       name: 'autocomplete',
+      title: 'Select 输入框的原生 autocomplete 属性',
       defaultValue: 'off',
       setters: 'InputSetter'
     },
     {
       name: 'placeholder',
+      title: '占位符',
       defaultValue: 'Select',
       setters: 'InputSetter'
     },
     {
       name: 'filterable',
+      title: 'Select 组件是否可筛选',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'allowCreate',
+      title: '是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'filterMethod',
+      title: '自定义筛选方法的第一个参数是当前输入的值。 当filterable设置为 true 时才会生效',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'remote',
+      title: '其中的选项是否从服务器远程加载',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
+    {
+      name: 'debounce',
+      title: '远程搜索时的防抖延迟（以毫秒为单位）',
+      defaultValue: 300,
+      setters: 'NumberSetter'
+    },
     {
       name: 'remoteMethod',
+      title: '当输入值发生变化时触发的函数。 它的参数就是当前的输入值。 当filterable设置为 true 时才会生效',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'remoteShowSuffix',
+      title: '远程搜索方法显示后缀图标',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'loading',
+      title: '是否正在从远程获取数据',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'loadingText',
+      title: '从服务器加载数据时显示的文本',
       defaultValue: 'Loading',
       setters: 'InputSetter'
     },
     {
       name: 'noMatchText',
+      title: '搜索条件无匹配时显示的文字',
       defaultValue: 'No matching data',
       setters: 'InputSetter'
     },
     {
       name: 'noDataText',
+      title: '无选项时显示的文字',
       defaultValue: 'No data',
       setters: 'InputSetter'
     },
     {
       name: 'popperClass',
+      title: '为 Select 下拉菜单和标签提示设置自定义类名',
       defaultValue: '',
       setters: 'InputSetter'
     },
+    {
+      name: 'popperStyle',
+      title: '为 Select 下拉菜单和标签提示设置自定义样式',
+      defaultValue: '',
+      setters: ['StringSetter', 'ObjectSetter']
+    },
     {
       name: 'reserveKeyword',
+      title: '当 multiple 和 filterable被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'defaultFirstOption',
+      title: '是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
-    {
-      name: 'popperAppendToBody',
-      defaultValue: true,
-      setters: 'BooleanSetter'
-    },
     {
       name: 'teleported',
+      title: '是否使用 teleport。设置成 true则会被追加到 append-to 的位置',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'appendTo',
+      title: '下拉框挂载到哪个 DOM 元素',
+      defaultValue: '',
       setters: 'StringSetter'
     },
     {
       name: 'persistent',
+      title: '当下拉选择器未被激活并且persistent设置为false，选择器会被删除',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'automaticDropdown',
+      title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'clearIcon',
+      title: '自定义清除图标',
       defaultValue: 'CircleClose',
       setters: 'InputSetter'
     },
     {
       name: 'fitInputWidth',
+      title: '下拉框的宽度是否与输入框相同',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'suffixIcon',
+      title: '自定义后缀图标组件',
       defaultValue: 'ArrowUp',
       setters: 'InputSetter'
     },
     {
       name: 'tagType',
+      title: '标签类型',
       defaultValue: 'info',
       options: ['success', 'info', 'warning', 'danger'],
       setters: 'SelectSetter'
     },
     {
       name: 'tagEffect',
+      title: '标签效果',
       defaultValue: 'light',
       options: ['', 'light', 'dark', 'plain'],
       setters: 'SelectSetter'
     },
     {
       name: 'validateEvent',
+      title: '是否触发表单验证',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'offset',
+      title: '下拉面板偏移量',
       defaultValue: 12,
       setters: 'NumberSetter'
     },
     {
       name: 'showArrow',
+      title: '下拉菜单的内容是否有箭头',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
@@ -417,10 +474,12 @@ const TreeSelect: MaterialDescription = {
     },
     {
       name: 'emptyValues',
+      title: '组件的空值配置',
       setters: 'ArraySetter'
     },
     {
       name: 'valueOnClear',
+      title: '清空选项的值 ',
       setters: [
         'StringSetter',
         'NumberSetter',
@@ -436,6 +495,7 @@ const TreeSelect: MaterialDescription = {
     },
     {
       name: 'tabindex',
+      title: 'input 的 tabindex',
       setters: ['StringSetter', 'NumberSetter']
     }
   ],
@@ -461,6 +521,7 @@ const TreeSelect: MaterialDescription = {
     'clear',
     'blur',
     'focus',
+    'popup-scroll',
     'update:modelValue'
   ],
   slots: [

package/src/element/treeV2.ts

@@ -9,21 +9,31 @@ const TreeV2: MaterialDescription = {
   props: [
     {
       name: 'data',
+      title: '展示数据',
       defaultValue: '',
       setters: ['ArraySetter', 'JSONSetter']
     },
     {
       name: 'empty-text',
+      title: '内容为空的时候展示的文本',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'props',
-      defaultValue: '',
+      title: '配置选项',
+      defaultValue: {
+        value: 'id',
+        label: 'label',
+        children: 'children',
+        disabled: 'disabled',
+        class : '',
+      },
       setters: ['ObjectSetter', 'JSONSetter']
     },
     {
       name: 'highlight-current',
+      title: '是否高亮当前选中节点',
       defaultValue: false,
       label: '高亮选中节点',
       setters: 'BooleanSetter'
@@ -44,6 +54,13 @@ const TreeV2: MaterialDescription = {
       label: 'check-on',
       setters: 'BooleanSetter'
     },
+    {
+      name: 'check-on-click-leaf',
+      title:
+        '点击叶节点(最后一个子节点)时是否检查或取消节点',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
     {
       name: 'default-expanded-keys',
       defaultValue: '',
@@ -60,6 +77,7 @@ const TreeV2: MaterialDescription = {
     },
     {
       name: 'check-strictly',
+      title: '在显示复选框的情况下，是否严格的遵循父子不互相关联的做法',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -72,6 +90,7 @@ const TreeV2: MaterialDescription = {
     },
     {
       name: 'current-node-key',
+      title: '当前选中的节点',
       defaultValue: '',
       label: '选中的节点',
       setters: ['InputSetter', 'NumberSetter']
@@ -101,7 +120,19 @@ const TreeV2: MaterialDescription = {
       title: '自定义树节点的高度',
       setters: 'NumberSetter',
       defaultValue: 26
-    }
+    },
+    {
+      name: 'scrollbar-always-on',
+      title: '总是显示滚动条',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'height',
+      title: 'tree 的高度',
+      defaultValue: 200,
+      setters: 'NumberSetter'
+    },
   ],
   events: [
     'node-click',
@@ -113,7 +144,7 @@ const TreeV2: MaterialDescription = {
     'node-expand',
     'node-collapse'
   ],
-  slots: [{ name: 'default', params: ['node', 'data'] }]
+  slots: [{ name: 'default', params: ['node', 'data'] }, { name: 'empty' }]
 };
 
 export default TreeV2;