@vtj/materials 0.15.0 → 0.15.2

package/src/element/divider.ts

@@ -10,14 +10,17 @@ const components: MaterialDescription = {
   props: [
     {
       name: 'direction',
+      title: '设置分割线方向',
       defaultValue: 'horizontal',
       setters: 'SelectSetter',
       options: ['horizontal', 'vertical']
     },
     {
       name: 'borderStyle',
+      title: '设置分隔符样式',
       defaultValue: 'solid',
-      setters: 'InputSetter'
+      setters: 'SelectSetter',
+      options: ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']
     },
     {
       name: 'contentPosition',

package/src/element/drawer.ts

@@ -9,31 +9,37 @@ const components: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '是否显示 Drawer',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'appendToBody',
+      title: 'Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'appendTo',
+      title: '挂载到哪个 DOM 元素 将覆盖 append-to-body',
       defaultValue: 'body',
       setters: 'StringSetter'
     },
     {
       name: 'lockScroll',
+      title: '是否在 Drawer 出现时将 body 滚动锁定',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'beforeClose',
+      title: '关闭前的回调，会暂停 Drawer 的关闭',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'closeOnClickModal',
+      title: '是否可以通过点击 modal 关闭 Drawer',
       label: '点击蒙层关闭',
       defaultValue: true,
       setters: 'BooleanSetter'
@@ -41,37 +47,56 @@ const components: MaterialDescription = {
     {
       name: 'closOonPressEscape',
       label: 'ESC键关闭',
+      title: '是否可以通过按下 ESC 关闭 Drawer',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'openDelay',
+      title: 'Drawer 打开的延时时间，单位毫秒',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'closeDelay',
+      title: 'Drawer 关闭的延时时间，单位毫秒',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'destroyOnClose',
+      title: '控制是否在关闭 Drawer 之后将子元素全部销毁',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'modal',
+      title: '是否需要遮罩层',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
+    {
+      name: 'modalPenetrable',
+      title: '是否允许穿透遮罩层。 modal 属性必须为 false',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
     {
       name: 'direction',
+      title: 'Drawer 打开的方向',
       defaultValue: 'rtl',
       setters: 'SelectSetter',
       options: ['rtl', 'ltr', 'ttb', 'btt']
     },
+    {
+      name: 'resizable',
+      title: '为抽屉启用可调整大小的功能',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
     {
       name: 'showClose',
+      title: '是否显示关闭按钮',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
@@ -84,21 +109,43 @@ const components: MaterialDescription = {
     },
     {
       name: 'title',
+      title: 'Drawer 的标题',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'withHeader',
+      title: '控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'modalClass',
+      title: '遮罩层的自定义类名',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'headerClass',
+      title: 'header 部分的自定义 class 名',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'bodyClass',
+      title: 'body 部分的自定义 class 名',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'footerClass',
+      title: 'footer 部分的自定义 class 名',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'zIndex',
+      title: '设置 z-index',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
@@ -109,11 +156,11 @@ const components: MaterialDescription = {
       setters: 'StringSetter',
       defaultValue: 2
     },
-    {
-      name: 'customClass',
-      defaultValue: '',
-      setters: 'InputSetter'
-    }
+    // {
+    //   name: 'customClass',
+    //   defaultValue: '',
+    //   setters: 'InputSetter'
+    // }
   ],
   events: [
     {
@@ -134,6 +181,15 @@ const components: MaterialDescription = {
     {
       name: 'close-auto-focus'
     },
+    {
+      name: 'resize-start'
+    },
+    {
+      name: 'resize'
+    },
+    {
+      name: 'resize-end'
+    },
     {
       name: 'update:modelValue'
     }

package/src/element/dropdown.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { effect, size } from '../shared';
 const Dropdown: MaterialDescription[] = [
   {
     name: 'ElDropdown',
@@ -10,6 +11,7 @@ const Dropdown: MaterialDescription[] = [
     props: [
       {
         name: 'type',
+        title: '菜单按钮类型',
         defaultValue: '',
         options: [
           '',
@@ -23,29 +25,33 @@ const Dropdown: MaterialDescription[] = [
         ],
         setters: 'SelectSetter'
       },
+      size('size'),
       {
-        name: 'size',
-        defaultValue: 'default',
-        setters: 'SelectSetter',
-        options: ['large', 'default', 'small']
+        name: 'buttonProps',
+        title: '按钮组件的 props',
+        setters: 'ObjectSetter',
       },
       {
         name: 'maxHeight',
+        title: '菜单最大高度',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter']
       },
       {
         name: 'splitButton',
+        title: '下拉触发元素呈现为按钮组',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'disabled',
+        title: '是否禁用',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'placement',
+        title: '菜单弹出位置',
         defaultValue: 'bottom',
         setters: 'SelectSetter',
         options: [
@@ -57,8 +63,10 @@ const Dropdown: MaterialDescription[] = [
           'bottom-end'
         ]
       },
+      effect('effect'),
       {
         name: 'trigger',
+        title: '触发下拉的行为',
         defaultValue: 'hover',
         setters: 'SelectSetter',
         options: ['hover', 'click', 'contextmenu']
@@ -69,38 +77,69 @@ const Dropdown: MaterialDescription[] = [
         defaultValue: ['Enter', 'Space', 'ArrowDown', 'NumpadEnter'],
         setters: 'ArraySetter'
       },
+      {
+        name: 'virtualTriggering',
+        title: '是否启用虚拟触发器',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'virtualRef',
+        title: '指示下拉框所依附的参考元素',
+        setters: 'FunctionSetter',
+      },
       {
         name: 'hideOnClick',
+        title: '是否在点击菜单项后隐藏菜单',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'showArrow',
+        title: 'tooltip 的内容是否有箭头',
         defaultValue: true,
         setters: 'BooleanSetter'
       },
       {
         name: 'showTimeout',
+        title: '展开下拉菜单的延时，仅在 trigger 为 hover 时有效',
         defaultValue: 150,
         setters: 'NumberSetter'
       },
       {
         name: 'hideTimeout',
+        title: '收起下拉菜单的延时（仅在 trigger 为 hover 时有效）',
         defaultValue: 150,
         setters: 'NumberSetter'
       },
       {
         name: 'role',
+        title: '下拉菜单的 ARIA 属性',
         defaultValue: 'menu',
-        setters: 'InputSetter'
+        setters: 'SelectSetter',
+        options: ['dialog', 'grid', 'group', 'listbox', 'menu', 'navigation', 'tooltip', 'tree']
       },
       {
         name: 'tabindex',
+        title: 'Dropdown 组件的 tabindex',
         defaultValue: 0,
         setters: ['NumberSetter', 'StringSetter']
       },
       {
         name: 'popperClass',
+        title: '自定义浮层类名',
         defaultValue: '',
-        setters: 'InputSetter'
+        setters: ['InputSetter', 'ObjectSetter']
+      },
+      {
+        name: 'popperStyle',
+        title: '自定义浮层类名',
+        defaultValue: '',
+        setters: ['InputSetter', 'ObjectSetter']
       },
       {
         name: 'popperOptions',
+        title: 'popper.js 参数',
         defaultValue: {
           modifiers: [
             { name: 'computeStyles', options: { gpuAcceleration: false } }
@@ -114,6 +153,17 @@ const Dropdown: MaterialDescription[] = [
         title: '是否将下拉列表插入至 body 元素',
         setters: 'BooleanSetter',
         defaultValue: true
+      },
+      {
+        name: 'append-to',
+        title: 'dropdown 的内容将挂载到哪一个元素上',
+        setters: 'FunctionSetter',
+      },
+      {
+        name: 'persistent',
+        title: '当下拉菜单处于非活动状态且 persistent 为 false 时，下拉菜单将被销毁',
+        setters: 'BooleanSetter',
+        defaultValue: true
       }
     ],
     slots: [
@@ -196,21 +246,25 @@ const Dropdown: MaterialDescription[] = [
     props: [
       {
         name: 'command',
+        title: '派发到command回调函数的指令参数',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter', 'JSONSetter']
       },
       {
         name: 'disabled',
+        title: '是否禁用',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'divided',
+        title: '是否显示分隔符',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'icon',
+        title: '自定义图标',
         defaultValue: '',
         setters: ['InputSetter']
       }

package/src/element/empty.ts

@@ -9,16 +9,19 @@ const Empty: MaterialDescription = {
   props: [
     {
       name: 'image',
+      title: 'empty 组件的图像地址',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'imageSize',
+      title: 'empty 组件的图像尺寸（宽度）',
       defaultValue: '',
       setters: 'NumberSetter'
     },
     {
       name: 'description',
+      title: 'empty 组件的描述信息',
       defaultValue: '',
       setters: 'InputSetter'
     }

package/src/element/form.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const form: MaterialDescription[] = [
   {
     name: 'ElForm',
@@ -16,27 +17,32 @@ const form: MaterialDescription[] = [
       },
       {
         name: 'rules',
+        title: '表单验证规则',
         defaultValue: '',
         setters: 'ExpressionSetter'
       },
       {
         name: 'inline',
+        title: '行内表单模式',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'labelPosition',
+        title: '表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性',
         defaultValue: 'right',
         options: ['left', 'right', 'top'],
         setters: 'SelectSetter'
       },
       {
         name: 'labelWidth',
+        title: '标签的长度，例如 \'50px\'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter']
       },
       {
         name: 'labelSuffix',
+        title: '表单域标签的后缀',
         defaultValue: '',
         setters: 'InputSetter'
       },
@@ -78,23 +84,24 @@ const form: MaterialDescription[] = [
         setters: 'BooleanSetter'
       },
       {
-        name: 'size',
-        defaultValue: '',
-        options: ['large', 'default', 'small'],
-        setters: 'SelectSetter'
+        ...size('size'),
+        title: '用于控制该表单内组件的尺寸',
       },
       {
         name: 'disabled',
+        title: '是否禁用该表单内的所有组件',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'scrollToError',
+        title: '当校验失败时，滚动到第一个错误表单项',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'scrollIntoViewOptions',
+        title: '当校验有失败结果时，滚动到第一个失败的表单项目',
         defaultValue: '',
         setters: ['ExpressionSetter', 'BooleanSetter']
       }
@@ -149,37 +156,44 @@ const form: MaterialDescription[] = [
     props: [
       {
         name: 'prop',
+        title: 'model 的键名。 它可以是属性的路径（如 a.b.0 或 [\'a\', \'b\', \'0\']）。 在使用了 validate、resetFields 的方法时，该属性是必填的',
         defaultValue: '',
         setters: ['InputSetter', 'ArraySetter']
       },
       {
         name: 'label',
+        title: '标签文本',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'labelPosition',
+        title: '表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性 默认会继承 Form的label-position',
         defaultValue: '',
         setters: 'SelectSetter',
         options: ['left', 'right', 'top']
       },
       {
         name: 'labelWidth',
+        title: '标签宽度，例如 \'50px\'。 可以使用 auto',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter']
       },
       {
         name: 'required',
+        title: '是否为必填项，如不设置，则会根据校验规则确认',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'rules',
+        title: '表单验证规则',
         defaultValue: '',
         setters: 'JSONSetter'
       },
       {
         name: 'error',
+        title: '表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息',
         defaultValue: '',
         setters: 'InputSetter'
       },
@@ -198,13 +212,12 @@ const form: MaterialDescription[] = [
         setters: 'BooleanSetter'
       },
       {
-        name: 'size',
-        defaultValue: 'default',
-        options: ['large', 'default', 'small'],
-        setters: 'SelectSetter'
+        ...size('size'),
+        title: '用于控制该表单域下组件的默认尺寸',
       },
       {
         name: 'for',
+        title: '和原生标签相同能力',
         defaultValue: '',
         setters: 'StringSetter'
       },

package/src/element/image.ts

@@ -9,43 +9,51 @@ const Image: MaterialDescription = {
   props: [
     {
       name: 'src',
+      title: '图片源地址，同原生属性一致',
       defaultValue: '',
       setters: ['InputSetter', 'FileSetter']
     },
     {
       name: 'fit',
+      title: '确定图片如何适应容器框，同原生 object-fit',
       defaultValue: '',
       options: ['', 'fill', 'contain', 'cover', 'none', 'scale-down'],
       setters: 'SelectSetter'
     },
     {
       name: 'hideOnClickModal',
+      title: '当开启 preview 功能时，是否可以通过点击遮罩层关闭 preview',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'loading',
+      title: '浏览器加载图像的策略，和 浏览器原生能力一致',
       defaultValue: '',
       options: ['eager', 'lazy'],
       setters: 'SelectSetter'
     },
     {
       name: 'lazy',
+      title: '是否使用懒加载',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'scrollContainer',
+      title: '开启懒加载功能后，监听 scroll 事件的容器 默认情况下，开启懒加载功能后，监听 scroll 事件的容器',
       defaultValue: '',
-      setters: 'InputSetter'
+      setters: ['InputSetter', 'ObjectSetter']
     },
     {
       name: 'alt',
+      title: '原生属性 alt',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'referrerPolicy',
+      title: '原生属性 referrerPolicy',
       defaultValue: '',
       setters: 'InputSetter'
     },
@@ -58,16 +66,19 @@ const Image: MaterialDescription = {
     },
     {
       name: 'previewSrcList',
+      title: '开启图片预览功能',
       defaultValue: '',
       setters: ['ArraySetter', 'JSONSetter']
     },
     {
       name: 'zIndex',
+      title: '设置图片预览的 z-index',
       defaultValue: '',
       setters: 'NumberSetter'
     },
     {
       name: 'initialIndex',
+      title: '初始预览图像索引，小于 url-list 的长度',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
@@ -80,6 +91,7 @@ const Image: MaterialDescription = {
     },
     {
       name: 'previewTeleported',
+      title: 'image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -100,6 +112,12 @@ const Image: MaterialDescription = {
       },
       title: '图像查看器缩放事件的缩放速率'
     },
+    {
+      name: 'scale',
+      defaultValue: 1,
+      title: '预览图像缩放',
+      setters: 'NumberSetter'
+    },
     {
       name: 'minScale',
       defaultValue: 0.2,
@@ -121,7 +139,13 @@ const Image: MaterialDescription = {
         }
       },
       title: '图像查看器缩放事件的最大缩放比例'
-    }
+    },
+    {
+      name: 'showProgress',
+      title: '是否在预览图片时显示进度条',
+      defaultValue: true,
+      setters: 'BooleanSetter',
+    },
   ],
   events: ['load', 'error', 'switch', 'close', 'show'],
   slots: ['placeholder', 'error', 'viewer'],