@vtj/materials 0.15.1 → 0.16.0

package/src/element/selectV2.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { effect, size } from '../shared';
 const SelectV2: MaterialDescription = {
   name: 'ElSelectV2',
   label: '虚拟列表选择器',
@@ -9,6 +10,7 @@ const SelectV2: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '选中项绑定值',
       defaultValue: '',
       setters: ['InputSetter', 'NumberSetter', 'BooleanSetter', 'JSONSetter']
     },
@@ -21,32 +23,31 @@ const SelectV2: MaterialDescription = {
     {
       name: 'props',
       label: 'props',
-      title: '配置选项，具体看下表',
+      title: '配置选项',
       setters: 'ObjectSetter'
     },
     {
       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: '',
-      options: ['', 'large', 'default', 'small'],
-      setters: 'SelectSetter'
-    },
+    size('size'),
     {
       name: 'clearable',
+      title: '是否可以清空选项',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -59,6 +60,7 @@ const SelectV2: MaterialDescription = {
     },
     {
       name: 'collapseTags',
+      title: '多选时是否将选中值按文字的形式展示',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -70,40 +72,46 @@ const SelectV2: MaterialDescription = {
       defaultValue: 0
     },
     {
-      name: 'name',
+      name: 'id',
+      title: '原生 input 的 id',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
-      name: 'effect',
-      defaultValue: 'light',
-      options: ['dark', 'light'],
-      setters: ['SelectSetter', 'StringSetter']
+      name: 'name',
+      title: '选择器的原生name属性',
+      defaultValue: '',
+      setters: 'InputSetter'
     },
+    effect('effect'),
     {
       name: 'autocomplete',
+      title: '自动完成选择输入',
       defaultValue: 'off',
       setters: 'InputSetter'
     },
     {
       name: 'placeholder',
+      title: '占位文字',
       defaultValue: 'Please select',
       setters: 'InputSetter'
     },
     {
       name: 'filterable',
+      title: 'Select 组件是否可筛选',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'allowCreate',
+      title: '是否允许创建新条目， 当使用该属性时，filterable必须设置为true',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'filterMethod',
       label: 'filterMethod',
-      title: '自定义筛选方法',
+      title: '自定义筛选方法的第一个参数是当前输入的值。 当filterable设置为 true 时才会生效',
       setters: 'FunctionSetter'
     },
     {
@@ -148,6 +156,11 @@ const SelectV2: MaterialDescription = {
       setters: 'StringSetter',
       defaultValue: ''
     },
+    {
+      name: 'popperStyle',
+      title: 'Select 下拉菜单和标签提示的自定义样式',
+      setters: ['StringSetter', 'ObjectSetter'],
+    },
     {
       name: 'teleported',
       label: 'teleported',
@@ -162,6 +175,7 @@ const SelectV2: MaterialDescription = {
     },
     {
       name: 'persistent',
+      title: '当下拉选择器未被激活并且persistent设置为false，选择器会被删除',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
@@ -173,16 +187,24 @@ const SelectV2: MaterialDescription = {
     },
     {
       name: 'automaticDropdown',
+      title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'fitInputWidth',
+      title: '无论下拉框的宽度是否与输入框相同，如果值为number，则宽度是固定的',
       defaultValue: true,
       setters: ['BooleanSetter', 'NumberSetter']
     },
+    {
+      name: 'suffixIcon',
+      title: '自定义后缀图标组件',
+      setters: 'StringSetter'
+    },
     {
       name: 'height',
+      title: '下拉菜单的高度',
       defaultValue: 274,
       setters: 'NumberSetter'
     },
@@ -195,21 +217,31 @@ const SelectV2: MaterialDescription = {
     },
     {
       name: 'scrollbarAlwaysOn',
+      title: '是否总是展示滚动条',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'remote',
+      title: '是否从服务器获取数据',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
+    {
+      name: 'debounce',
+      title: '远程搜索时的防抖延迟（以毫秒为单位）',
+      defaultValue: 300,
+      setters: 'NumberSetter'
+    },
     {
       name: 'remoteMethod',
+      title: '当输入值发生变化时触发的函数。 它的参数就是当前的输入值。 当filterable设置为 true 时才会生效',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'validateEvent',
+      title: '是否触发表单验证',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
@@ -248,16 +280,19 @@ const SelectV2: MaterialDescription = {
     },
     {
       name: 'fallbackPlacements',
+      title: 'dropdown 可用的 positions',
       setters: 'ArraySetter',
       defaultValue: ['bottom-start', 'top-start', 'right', 'left']
     },
     {
       name: 'collapseTagsTooltip',
+      title: '当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此功能，collapse-tags的值必须为true',
       setters: 'BooleanSetter',
       defaultValue: false
     },
     {
       name: 'maxCollapseTags',
+      title: '需要显示的 Tag 的最大数量。 只有当 collapse-tags 设置为 true 时才会生效',
       setters: 'NumberSetter',
       defaultValue: 1
     },

package/src/element/skeleton.ts

@@ -9,26 +9,31 @@ const Skeleton: MaterialDescription = {
   props: [
     {
       name: 'animated',
+      title: '是否使用动画',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'count',
+      title: '渲染多少个 template, 建议使用尽可能小的数字',
       defaultValue: 1,
       setters: 'NumberSetter'
     },
     {
       name: 'loading',
+      title: '是否显示加载结束后的 DOM 结构',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'rows',
+      title: '骨架屏段落数量',
       defaultValue: 3,
       setters: 'NumberSetter'
     },
     {
       name: 'throttle',
+      title: '渲染延迟（以毫秒为单位） 数字代表延迟显示, 也可以设置为延迟隐藏, 例如 { leading: 500, trailing: 500 } 当需要控制初始加载值时，您可以设置 { initVal: true }',
       defaultValue: 0,
       setters: ['NumberSetter', 'ObjectSetter']
     }
@@ -55,6 +60,7 @@ const SkeletonItem: MaterialDescription = {
   props: [
     {
       name: 'variant',
+      title: '当前渲染 skeleton 类型',
       setters: 'SelectSetter',
       options: [
         'p',

package/src/element/slider.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const Slider: MaterialDescription = {
   name: 'ElSlider',
   label: '滑块',
@@ -52,11 +53,8 @@ const Slider: MaterialDescription = {
       setters: 'BooleanSetter'
     },
     {
-      name: 'size',
-      defaultValue: 'default',
+      ...size('size'),
       title: 'slider 包装器的大小，垂直模式下该属性不可用',
-      options: ['large', 'default', 'small'],
-      setters: 'SelectSetter'
     },
     {
       name: 'inputSize',
@@ -168,7 +166,18 @@ const Slider: MaterialDescription = {
       title: '输入时是否触发表单的校验',
       defaultValue: true,
       setters: 'BooleanSetter'
-    }
+    },
+    {
+      name: 'persistent',
+      title: '当 slider 的 tooltip 处于非活动状态且 persistent 为 false 时，tooltip 将被销毁。 当 show-tooltip 为 false 时，persistent 将始终为 false',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'label',
+      title: '原生 aria-label属性',
+      setters: 'StringSetter'
+    },
   ],
   events: ['change', 'input', 'update:modelValue']
 };

package/src/element/space.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const Space: MaterialDescription = {
   name: 'ElSpace',
   label: '间距',
@@ -64,11 +65,10 @@ const Space: MaterialDescription = {
       setters: ['StringSetter', 'NumberSetter']
     },
     {
-      name: 'size',
+      ...size('size'),
       title: '间隔大小',
       defaultValue: 'small',
       setters: ['SelectSetter', 'NumberSetter', 'ArraySetter'],
-      options: ['large', 'default', 'small']
     },
     {
       name: 'wrap',

package/src/element/steps.ts

@@ -10,39 +10,46 @@ const Steps: MaterialDescription[] = [
     props: [
       {
         name: 'space',
+        title: '每个 step 的间距，不填写将自适应间距。 支持百分比;',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter']
       },
       {
         name: 'direction',
+        title: '显示方向',
         defaultValue: 'horizontal',
         setters: 'SelectSetter',
         options: ['vertical', 'horizontal']
       },
       {
         name: 'active',
+        title: '设置当前激活步骤',
         defaultValue: 0,
         setters: 'NumberSetter'
       },
       {
         name: 'processStatus',
+        title: '设置当前步骤的状态',
         defaultValue: 'process',
         setters: 'SelectSetter',
         options: ['wait', 'process', 'finish', 'error', 'success']
       },
       {
         name: 'finishStatus',
+        title: '设置结束步骤的状态',
         defaultValue: 'finish',
         setters: 'SelectSetter',
         options: ['wait', 'process', 'finish', 'error', 'success']
       },
       {
         name: 'alignCenter',
+        title: '进行居中对齐',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'simple',
+        title: '是否应用简洁风格',
         defaultValue: false,
         setters: 'BooleanSetter'
       }
@@ -85,21 +92,25 @@ const Steps: MaterialDescription[] = [
     props: [
       {
         name: 'title',
+        title: '标题',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'description',
+        title: '描述文案',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'icon',
+        title: 'Step 组件的自定义图标',
         defaultValue: '',
         setters: ['InputSetter']
       },
       {
         name: 'status',
+        title: '设置当前步骤的状态， 不设置则根据 steps 确定状态',
         defaultValue: '',
         setters: 'SelectSetter',
         options: ['wait', 'process', 'finish', 'error', 'success']

package/src/element/switch.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const Switch: MaterialDescription = {
   name: 'ElSwitch',
   label: '开关',
@@ -9,115 +10,130 @@ const Switch: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '绑定值',
       defaultValue: false,
       setters: ['BooleanSetter', 'NumberSetter', 'InputSetter']
     },
     {
       name: 'disabled',
+      title: '是否禁用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'loading',
+      title: '是否显示加载中',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
-    {
-      name: 'size',
-      defaultValue: 'default',
-      options: ['large', 'default', 'small'],
-      setters: 'SelectSetter'
-    },
+    size('size'),
     {
       name: 'width',
+      title: 'switch 的宽度',
       defaultValue: '',
       setters: ['InputSetter', 'NumberSetter']
     },
     {
       name: 'inlinePrompt',
+      title: '无论图标或文本是否显示在点内，只会呈现文本的第一个字符',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'activeIcon',
+      title: 'switch 状态为 on 时所显示图标，设置此项会忽略 active-text',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'inactiveIcon',
+      title: 'switch 状态为 off 时所显示图标，设置此项会忽略 inactive-text',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'activeActionIcon',
+      title: 'on状态下显示的图标',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'inactiveActionIcon',
+      title: 'off状态下显示的图标',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'activeText',
+      title: 'switch 打开时的文字描述',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'inactiveText',
+      title: 'switch 的状态为 off 时的文字描述',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'activeValue',
+      title: 'switch 状态为 on 时的值',
       defaultValue: true,
       setters: ['BooleanSetter', 'InputSetter', 'NumberSetter']
     },
     {
       name: 'inactiveValue',
+      title: 'switch的状态为 off 时的值',
       defaultValue: false,
       setters: ['BooleanSetter', 'InputSetter', 'NumberSetter']
     },
     {
       name: 'name',
+      title: 'switch 对应的 name 属性',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'validateEvent',
+      title: '是否触发表单验证',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'beforeChange',
+      title: 'switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换',
       setters: ['BooleanSetter', 'FunctionSetter']
     },
-    { name: 'id', defaultValue: '', setters: 'StringSetter' },
+    { name: 'id', title: 'input 的 id', defaultValue: '', setters: 'StringSetter' },
     {
       name: 'tabindex',
+      title: 'input 的 tabindex',
       defaultValue: '',
       setters: ['StringSetter', 'NumberSetter']
     },
-    { name: 'ariaLabel', defaultValue: '', setters: 'StringSetter' },
+    { name: 'ariaLabel', title: '等价于原生 input aria-label 属性', defaultValue: '', setters: 'StringSetter' },
     {
       name: 'activeColor',
+      title: '当在 on 状态时的背景颜色',
       defaultValue: '',
       setters: 'ColorSetter'
     },
     {
       name: 'inactiveColor',
+      title: 'off 状态时的背景颜色',
       defaultValue: '',
       setters: 'ColorSetter'
     },
     {
       name: 'borderColor',
+      title: '开关的边框颜色 ',
       defaultValue: '',
       setters: 'ColorSetter'
     },
-    { name: 'label', defaultValue: '', setters: 'StringSetter' }
+    { name: 'label', title: '等价于原生 input aria-label 属性', defaultValue: '', setters: 'StringSetter' }
   ],
   events: ['change', 'update:modelValue'],
-  slots: ['active-action', 'inactive-action']
+  slots: ['active-action', 'inactive-action', 'active', 'inactive'],
 };
 
 export default Switch;