@vtj/materials 0.15.1 → 0.16.0

package/src/element/radio.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const Radio: MaterialDescription[] = [
   {
     name: 'ElRadio',
@@ -10,6 +11,7 @@ const Radio: MaterialDescription[] = [
     props: [
       {
         name: 'modelValue',
+        title: '选中项绑定值',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter', 'BooleanSetter']
       },
@@ -36,13 +38,7 @@ const Radio: MaterialDescription[] = [
         defaultValue: false,
         setters: 'BooleanSetter'
       },
-      {
-        name: 'size',
-        title: '单选框的尺寸',
-        defaultValue: '',
-        options: ['large', 'default', 'small'],
-        setters: 'SelectSetter'
-      },
+      size('size'),
       {
         name: 'name',
         title: '原始 name 属性',
@@ -80,11 +76,8 @@ const Radio: MaterialDescription[] = [
         setters: ['InputSetter', 'NumberSetter', 'BooleanSetter']
       },
       {
-        name: 'size',
+        ...size('size'),
         title: '单选框按钮或边框按钮的大小',
-        defaultValue: '',
-        options: ['large', 'default', 'small'],
-        setters: 'SelectSetter'
       },
       {
         name: 'disabled',
@@ -92,26 +85,24 @@ const Radio: MaterialDescription[] = [
         defaultValue: false,
         setters: 'BooleanSetter'
       },
+      {
+        name: 'validateEvent',
+        title: '输入时是否触发表单的校验',
+        defaultValue: true,
+        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: 'aria-label',
         title: '与 RadioGroup 中的 aria-label 属性相同',
@@ -128,7 +119,24 @@ const Radio: MaterialDescription[] = [
         label: 'id',
         title: '原生 id 属性',
         setters: 'StringSetter'
-      }
+      },
+      {
+        name: 'options',
+        title: '选项的数据源， value 的 key 和 label 和  disabled可以通过 props自定义.',
+        setters: 'ArraySetter'
+      },
+      {
+        name: 'props',
+        title: 'options 的配置',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'type',
+        title: '\t用于渲染选项的组件类型（例如 \'button\'）',
+        defaultValue: 'radio',
+        options: ['radio', 'button'],
+        setters: 'SelectSetter'
+      },
     ],
     events: [
       {

package/src/element/rate.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const Rate: MaterialDescription = {
   name: 'ElRate',
   label: '评分',
@@ -10,27 +11,26 @@ const Rate: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '选中项绑定值',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'max',
+      title: '最大分值',
       defaultValue: 5,
       setters: 'NumberSetter'
     },
-    {
-      name: 'size',
-      defaultValue: 'default',
-      options: ['large', 'default', 'small'],
-      setters: 'SelectSetter'
-    },
+    size('size'),
     {
       name: 'disabled',
+      title: '是否为只读',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'allowHalf',
+      title: '是否允许半选',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -48,53 +48,63 @@ const Rate: MaterialDescription = {
     },
     {
       name: 'colors',
+      title: 'icon 的颜色',
       defaultValue: ['#F7BA2A', '#F7BA2A', '#F7BA2A'],
       setters: ['ArraySetter', 'JSONSetter']
     },
     {
       name: 'voidColor',
+      title: '未选中 icon 的颜色',
       defaultValue: '#C6D1DE',
       setters: 'ColorSetter'
     },
     {
       name: 'disabledVoidColor',
+      title: '只读时未选中 icon 的颜色',
       defaultValue: '#EFF2F7',
       label: 'disabledColor',
       setters: 'ColorSetter'
     },
     {
       name: 'icons',
+      title: '图标组件',
       defaultValue: ['StarFilled', 'StarFilled', 'StarFilled'],
       setters: ['ArraySetter', 'JSONSetter']
     },
     {
       name: 'voidIcon',
+      title: '未被选中的图标组件',
       defaultValue: 'Star',
       setters: 'InputSetter'
     },
     {
       name: 'disabledVoidIcon',
+      title: '禁用状态的未选择图标',
       defaultValue: 'StarFilled',
       label: 'disabledIcon',
       setters: 'InputSetter'
     },
     {
       name: 'showText',
+      title: '是否显示辅助文字',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'showScore',
+      title: '是否显示当前分数， show-score 和 show-text 不能同时为真',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'textColor',
+      title: '辅助文字的颜色',
       defaultValue: '#1F2D3D',
       setters: 'ColorSetter'
     },
     {
       name: 'texts',
+      title: '辅助文字数组',
       defaultValue: [
         'Extremely bad',
         'Disappointed',
@@ -106,6 +116,7 @@ const Rate: MaterialDescription = {
     },
     {
       name: 'scoreTemplate',
+      title: '分数显示模板',
       defaultValue: '',
       setters: 'InputSetter'
     },

package/src/element/result.ts

@@ -9,16 +9,19 @@ const Result: MaterialDescription = {
   props: [
     {
       name: 'title',
+      title: '标题',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'subTitle',
+      title: '副标题',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'icon',
+      title: '图标类型',
       defaultValue: 'info',
       options: ['success', 'warning', 'info', 'error'],
       setters: 'SelectSetter'

package/src/element/scrollbar.ts

@@ -9,56 +9,67 @@ const Scrollbar: MaterialDescription = {
   props: [
     {
       name: 'height',
+      title: '滚动条高度',
       defaultValue: '',
       setters: ['NumberSetter', 'InputSetter']
     },
     {
       name: 'maxHeight',
+      title: '滚动条最大高度',
       defaultValue: '',
       setters: ['NumberSetter', 'InputSetter']
     },
     {
       name: 'native',
+      title: '是否使用原生滚动条样式',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'wrapStyle',
+      title: '包裹容器的自定义样式',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'wrapClass',
+      title: '包裹容器的自定义类名',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'viewStyle',
+      title: '视图的自定义样式',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'viewClass',
+      title: '视图的自定义类名',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'noresize',
+      title: '不响应容器尺寸变化，如果容器尺寸不会发生变化，最好设置它可以优化性能',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'tag',
+      title: '视图的元素标签',
       defaultValue: 'div',
       setters: 'InputSetter'
     },
     {
       name: 'always',
+      title: '滚动条总是显示',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'minSize',
+      title: '滚动条最小尺寸',
       defaultValue: 20,
       setters: 'NumberSetter'
     },
@@ -86,13 +97,28 @@ const Scrollbar: MaterialDescription = {
       title: '视图的 aria-orientation',
       setters: 'SelectSetter',
       options: ['horizontal', 'vertical']
-    }
+    },
+    {
+      name: 'tabindex',
+      title: '容器的tabindex',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'distance',
+      title: '触发到达底部事件的距离（像素）',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
   ],
   events: [
     {
       name: 'scroll'
-    }
+    },
+    {
+      name: 'end-reached'
+    },
   ],
+  slots: ['default'],
   snippet: {
     props: {
       style: {

package/src/element/segmented.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const Segmented: MaterialDescription[] = [
   {
     name: 'ElSegmented',
@@ -20,40 +21,47 @@ const Segmented: MaterialDescription[] = [
         setters: 'ArraySetter'
       },
       {
-        name: 'size',
-        defaultValue: '',
-        options: ['', 'large', 'default', 'small'],
-        setters: 'SelectSetter'
+        name: 'props',
+        title: '配置选项',
+        setters: 'ObjectSetter'
       },
+      size('size'),
       {
         name: 'block',
+        title: '撑满父元素宽度',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'disabled',
+        title: '是否禁用',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'validate-event',
+        title: '是否触发表单验证',
         defaultValue: true,
         setters: 'BooleanSetter'
       },
       {
         name: 'name',
+        title: '原生 name 属性',
         setters: 'StringSetter'
       },
       {
         name: 'id',
+        title: '原生 id 属性',
         setters: 'StringSetter'
       },
       {
         name: 'ariaLabel',
+        title: '原生 aria-label 属性',
         setters: 'StringSetter'
       },
       {
         name: 'direction',
+        title: '展示的方向',
         defaultValue: 'horizontal',
         options: ['horizontal', 'vertical'],
         setters: 'SelectSetter'

package/src/element/select.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { effect, size } from '../shared';
 const Select: MaterialDescription[] = [
   {
     name: 'ElSelect',
@@ -10,37 +11,48 @@ const Select: MaterialDescription[] = [
     props: [
       {
         name: 'modelValue',
+        title: '选中项绑定值',
         defaultValue: '',
         setters: ['NumberSetter', 'InputSetter', 'BooleanSetter']
       },
       {
         name: 'multiple',
+        title: '是否多选',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
+      {
+        name: 'options',
+        title: '选项的数据源',
+        setters: 'ArraySetter'
+      },
+      {
+        name: 'props',
+        title: 'options 的配置',
+        setters: 'ObjectSetter'
+      },
       {
         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'
       },
@@ -53,97 +65,128 @@ const Select: 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: 'teleported',
+        title: '是否使用 teleport。设置成 true则会被追加到 append-to 的位置',
         defaultValue: true,
         setters: 'BooleanSetter'
       },
@@ -155,53 +198,63 @@ const Select: MaterialDescription[] = [
       },
       {
         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'
       },
@@ -288,6 +341,7 @@ const Select: MaterialDescription[] = [
       'clear',
       'blur',
       'focus',
+      'popup-scroll',
       'update:modelValue'
     ],
     slots: [
@@ -349,11 +403,13 @@ const Select: MaterialDescription[] = [
     props: [
       {
         name: 'label',
+        title: '分组的名称',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'disabled',
+        title: '是否将该分组下所有选项置为禁用',
         defaultValue: false,
         setters: 'BooleanSetter'
       }
@@ -375,16 +431,19 @@ const Select: MaterialDescription[] = [
     props: [
       {
         name: 'value',
+        title: '选项的值',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter', 'BooleanSetter', 'JSONSetter']
       },
       {
         name: 'label',
+        title: '选项的标签，若不设置则默认与value相同',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter']
       },
       {
         name: 'disabled',
+        title: '是否禁用该选项',
         defaultValue: false,
         setters: 'BooleanSetter'
       }