@vtj/materials 0.15.1 → 0.16.0

package/src/element/menu.ts

@@ -10,17 +10,20 @@ const Menu: MaterialDescription[] = [
     props: [
       {
         name: 'mode',
+        title: '菜单展示模式',
         defaultValue: 'vertical',
         setters: 'SelectSetter',
         options: ['horizontal', 'vertical']
       },
       {
         name: 'collapse',
+        title: '是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'ellipsis',
+        title: '是否省略多余的子项（仅在横向模式生效）',
         defaultValue: true,
         setters: 'BooleanSetter'
       },
@@ -39,32 +42,38 @@ const Menu: MaterialDescription[] = [
       },
       {
         name: 'defaultActive',
+        title: '页面加载时默认激活菜单的 index',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'defaultOpeneds',
+        title: '默认打开的 sub-menu 的 index 的数组',
         defaultValue: [],
         setters: 'ArraySetter'
       },
       {
         name: 'uniqueOpened',
+        title: '是否只保持一个子菜单的展开',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'menuTrigger',
+        title: '子菜单打开的触发方式，只在 mode 为 horizontal 时有效',
         defaultValue: 'hover',
         setters: 'SelectSetter',
         options: ['hover', 'click']
       },
       {
         name: 'router',
+        title: '是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'collapseTransition',
+        title: '是否开启折叠动画',
         defaultValue: true,
         setters: 'BooleanSetter'
       },
@@ -89,6 +98,11 @@ const Menu: MaterialDescription[] = [
         title: '为 popper 添加类名',
         setters: 'StringSetter'
       },
+      {
+        name: 'popperStyle',
+        title: '用于所有弹出菜单和标题提示的自定义样式',
+        setters: ['StringSetter', 'ObjectSetter'],
+      },
       {
         name: 'showTimeout',
         label: 'showTimeout',
@@ -117,7 +131,13 @@ const Menu: MaterialDescription[] = [
         name: 'activeTextColor',
         defaultValue: '#409EFF',
         setters: 'ColorSetter'
-      }
+      },
+      {
+        name: 'persistent',
+        title: '当菜单处于非活动状态且 persistent 为 false 时，下拉菜单将被销毁',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
     ],
     events: [
       {
@@ -192,55 +212,72 @@ const Menu: MaterialDescription[] = [
     props: [
       {
         name: 'index',
+        title: '唯一标志',
         label: 'index *',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'popperClass',
+        title: '为 popper 添加类名',
         defaultValue: '',
         setters: 'InputSetter'
       },
+      {
+        name: 'popperStyle',
+        title: '为 popper 添加自定义样式',
+        defaultValue: '',
+        setters: ['InputSetter', 'ObjectSetter'],
+      },
       {
         name: 'showTimeout',
+        title: '子菜单出现之前的延迟，(继承 menu 的 show-timeout 配置)',
         setters: 'NumberSetter'
       },
       {
         name: 'hideTimeout',
+        title: '子菜单消失之前的延迟，(继承 menu 的 hide-timeout 配置)',
         setters: 'NumberSetter'
       },
       {
         name: 'disabled',
+        title: '是否禁用',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'teleported',
+        title: '是否将弹出菜单挂载到 body 上，第一级SubMenu默认值为 true，其他SubMenus 的值为 false',
         defaultValue: undefined,
         setters: 'BooleanSetter'
       },
       {
         name: 'popperOffset',
+        title: '弹出窗口的偏移量 (覆盖 popper的菜单)',
         defaultValue: 6,
         setters: 'NumberSetter'
       },
       {
         name: 'expandCloseIcon',
+        title: '父菜单展开且子菜单关闭时的图标， expand-close-icon 和 expand-open-icon 需要一起配置才能生效',
         defaultValue: '',
         setters: ['InputSetter']
       },
       {
         name: 'expandOpenIcon',
+        title: '父菜单展开且子菜单打开时的图标， expand-open-icon 和 expand-close-icon 需要一起配置才能生效',
         defaultValue: '',
         setters: ['InputSetter']
       },
       {
         name: 'collapseCloseIcon',
+        title: '父菜单收起且子菜单关闭时的图标， collapse-close-icon 和 collapse-open-icon 需要一起配置才能生效',
         defaultValue: '',
         setters: ['InputSetter']
       },
       {
         name: 'collapseOpenIcon',
+        title: '父菜单收起且子菜单打开时的图标， collapse-open-icon 和 collapse-close-icon 需要一起配置才能生效',
         defaultValue: '',
         setters: ['InputSetter']
       }
@@ -279,16 +316,19 @@ const Menu: MaterialDescription[] = [
     props: [
       {
         name: 'index',
+        title: '唯一标志',
         defaultValue: null,
         setters: 'InputSetter'
       },
       {
         name: 'route',
+        title: 'Vue Route 路由位置参数',
         defaultValue: '',
         setters: ['StringSetter', 'JSONSetter']
       },
       {
         name: 'disabled',
+        title: '是否禁用',
         defaultValue: false,
         setters: 'BooleanSetter'
       }
@@ -319,6 +359,7 @@ const Menu: MaterialDescription[] = [
     props: [
       {
         name: 'title',
+        title: '组标题',
         defaultValue: '',
         setters: 'InputSetter'
       }

package/src/element/pageHeader.ts

@@ -10,16 +10,19 @@ const components: MaterialDescription = {
   props: [
     {
       name: 'icon',
+      title: '图标',
       defaultValue: 'Back',
       setters: 'InputSetter'
     },
     {
       name: 'title',
+      title: '主标题',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'content',
+      title: '内容',
       defaultValue: '',
       setters: 'InputSetter'
     }

package/src/element/pagination.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const Pagination: MaterialDescription = {
   name: 'ElPagination',
   label: '分页',
@@ -7,24 +8,22 @@ const Pagination: MaterialDescription = {
   doc: 'https://element-plus.org/zh-CN/component/pagination.html',
   package: 'element-plus',
   props: [
-    {
-      name: 'size',
-      defaultValue: 'default',
-      options: ['large', 'default', 'small'],
-      setters: 'SelectSetter'
-    },
+    size('size'),
     {
       name: 'background',
+      title: '是否为分页按钮添加背景色',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'pageSize',
+      title: '每页显示条目个数',
       defaultValue: 10,
       setters: 'NumberSetter'
     },
     {
       name: 'defaultPageSize',
+      title: '每页默认的条目个数',
       label: '默认页大小',
       defaultValue: undefined,
       setters: 'NumberSetter'
@@ -37,32 +36,37 @@ const Pagination: MaterialDescription = {
     },
     {
       name: 'pageCount',
+      title: '总页数',
       defaultValue: undefined,
       setters: 'NumberSetter'
     },
     {
       name: 'pagerCount',
+      title: '设置最大页码按钮数',
       defaultValue: 7,
       setters: 'NumberSetter'
     },
     {
       name: 'currentPage',
+      title: '当前页数',
       defaultValue: 1,
       setters: 'NumberSetter'
     },
     {
       name: 'defaultCurrentPage',
-      label: '默认当前页',
+      label: '当前页数的默认初始值',
       defaultValue: undefined,
       setters: 'NumberSetter'
     },
     {
       name: 'layout',
+      title: '组件布局',
       defaultValue: 'prev, pager, next, jumper, ->, total',
       setters: 'InputSetter'
     },
     {
       name: 'pageSizes',
+      title: '每页显示个数选择器的选项设置',
       defaultValue: [10, 20, 30, 40, 50, 100],
       setters: ['ArraySetter', 'JSONSetter']
     },
@@ -73,31 +77,43 @@ const Pagination: MaterialDescription = {
     },
     {
       name: 'popperClass',
+      title: '每页显示个数选择器的下拉框类名',
       defaultValue: '',
       setters: 'InputSetter'
     },
+    {
+      name: 'popperStyle',
+      title: '\t每页显示个数选择器的下拉框样式',
+      defaultValue: '',
+      setters: ['InputSetter', 'ObjectSetter']
+    },
     {
       name: 'prevText',
+      title: '替代图标显示的上一页文字',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'prevIcon',
+      title: '上一页的图标， 比 prev-text 优先级更高',
       defaultValue: 'ArrowLeft',
       setters: 'InputSetter'
     },
     {
       name: 'nextText',
+      title: '替代图标显示的下一页文字',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'nextIcon',
+      title: '下一页的图标， 比 next-text 优先级更低',
       defaultValue: 'ArrowRight',
       setters: 'InputSetter'
     },
     {
       name: 'disabled',
+      title: '是否禁用分页',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -109,11 +125,13 @@ const Pagination: MaterialDescription = {
     },
     {
       name: 'hideOnSinglePage',
+      title: '只有一页时是否隐藏',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'small',
+      title: '是否使用小型分页样式',
       defaultValue: false,
       setters: 'BooleanSetter'
     }
@@ -127,7 +145,7 @@ const Pagination: MaterialDescription = {
     'update:pageSize',
     'update:currentPage'
   ],
-  slots: ['default', 'prevIcon', 'nextIcon'],
+  slots: ['default'],
   snippet: {
     props: {
       total: 1000,

package/src/element/popconfirm.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { effect } from '../shared';
 const components: MaterialDescription = {
   name: 'ElPopconfirm',
   label: '气泡确认框',
@@ -9,63 +10,76 @@ const components: MaterialDescription = {
   props: [
     {
       name: 'title',
+      title: '标题',
       defaultValue: '',
       setters: 'InputSetter'
     },
+    effect('effect'),
     {
       name: 'confirmButtonText',
+      title: '确认按钮文字',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'cancelButtonText',
+      title: '取消按钮文字',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'confirmButtonType',
+      title: '确认按钮类型',
       defaultValue: 'primary',
       setters: 'SelectSetter',
       options: ['primary', 'success', 'warning', 'danger', 'info', 'text']
     },
     {
       name: 'confirmButtonType',
+      title: '取消按钮类型',
       defaultValue: 'text',
       setters: 'SelectSetter',
       options: ['primary', 'success', 'warning', 'danger', 'info', 'text']
     },
     {
       name: 'icon',
+      title: '自定义图标',
       defaultValue: 'QuestionFilled',
       setters: ['InputSetter']
     },
     {
       name: 'iconColor',
+      title: 'Icon 颜色',
       defaultValue: '#f90',
       setters: 'ColorSetter'
     },
     {
       name: 'hideIcon',
+      title: '是否隐藏 Icon',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'hideAfter',
+      title: '关闭时的延迟',
       defaultValue: 200,
       setters: 'NumberSetter'
     },
     {
       name: 'teleported',
+      title: '是否将 popover 的下拉列表插入至 body 元素',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'persistent',
+      title: '当 popover 组件长时间不触发且 persistent 属性设置为 false 时, popover 将会被删除',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'width',
+      title: '弹层宽度，最小宽度 150px',
       defaultValue: '150',
       setters: ['NumberSetter', 'InputSetter']
     }

package/src/element/popover.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { effect } from '../shared';
 const components: MaterialDescription = {
   name: 'ElPopover',
   label: '气泡卡片',
@@ -9,33 +10,39 @@ const components: MaterialDescription = {
   props: [
     {
       name: 'trigger',
+      title: '触发方式，在受控模式下无效',
       defaultValue: 'primary',
-      setters: 'click',
+      setters: 'SelectSetter',
       options: ['click', 'focus', 'hover', 'contextmenu']
     },
+    {
+      name: 'triggerKeys',
+      title: '当通过鼠标点击使触发元素获得焦点时，可以定义一组键盘按键代码，通过键盘控制气泡框的显示，在受控模式下无效',
+      defaultValue: ['Enter','Space'],
+      setters: 'ArraySetter',
+    },
     {
       name: 'title',
+      title: '标题',
       defaultValue: '',
       setters: 'InputSetter'
     },
-    {
-      name: 'effect',
-      defaultValue: 'light',
-      options: ['dark', 'light'],
-      setters: 'SelectSetter'
-    },
+    effect('effect'),
     {
       name: 'content',
+      title: '显示的内容',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'width',
+      title: '宽度',
       defaultValue: 150,
       setters: ['NumberSetter', 'InputSetter']
     },
     {
       name: 'placement',
+      title: '出现位置',
       defaultValue: 'bottom',
       setters: 'SelectSetter',
       options: [
@@ -55,72 +62,101 @@ const components: MaterialDescription = {
     },
     {
       name: 'disabled',
+      title: 'Popover 是否可用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'visible',
+      title: 'Popover 是否显示',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'offset',
+      title: '浮层偏移量',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'transition',
+      title: '定义渐变动画',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'showArrow',
+      title: '是否显示 Tooltip 箭头',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'popperOptions',
+      title: 'popper.js 的参数',
       defaultValue: undefined,
       setters: 'JSONSetter'
     },
     {
       name: 'popperClass',
+      title: '为 popper 添加类名',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'popperStyle',
+      title: '为 popper 自定义样式',
       setters: ['InputSetter', 'ObjectSetter']
     },
     {
       name: 'showAfter',
+      title: '延迟显示时间（以毫秒为单位），在受控模式下无效',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'hideAfter',
+      title: '消失延迟时间（以毫秒为单位），在受控模式下无效',
       defaultValue: 200,
       setters: 'NumberSetter'
     },
     {
       name: 'autoClose',
+      title: '隐藏提示框的超时时间（以毫秒为单位），在受控模式下无效',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'tabindex',
-      defaultValue: '',
+      title: 'Popover 组件的 tabindex',
+      defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'teleported',
+      title: '是否将 popover 的下拉列表插入至 body 元素',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
+    {
+      name: 'appendTo',
+      title: '指示 Tooltip 的内容将附加在哪一个网页元素上',
+      setters: 'StringSetter'
+    },
     {
       name: 'persistent',
+      title: '当 popover 组件长时间不触发且 persistent 属性设置为 false 时, popover 将会被删除',
       defaultValue: true,
       setters: 'BooleanSetter'
+    },
+    {
+      name: 'virtualTriggering',
+      title: '是否启用虚拟触发器',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'virtualRef',
+      title: '代表 tooltip 所要附加的参照元素',
+      setters: 'ExpressionSetter'
     }
   ],
   events: [

package/src/element/progress.ts

@@ -21,59 +21,70 @@ const Progress: MaterialDescription = {
     },
     {
       name: 'type',
+      title: '进度条类型',
       defaultValue: 'line',
       options: ['line', 'circle', 'dashboard'],
       setters: 'SelectSetter'
     },
     {
       name: 'strokeWidth',
+      title: '进度条的宽度',
       defaultValue: 6,
       setters: 'NumberSetter'
     },
     {
       name: 'textInside',
+      title: '进度条显示文字内置在进度条内（仅 type 为 \'line\' 时可用）',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'status',
+      title: '进度条当前状态',
       defaultValue: '',
       options: ['success', 'exception', 'warning'],
       setters: 'SelectSetter'
     },
     {
       name: 'indeterminate',
+      title: '是否为动画进度条',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'duration',
+      title: '控制动画进度条速度和条纹进度条流动速度',
       defaultValue: 3,
       setters: 'NumberSetter'
     },
     {
       name: 'color',
+      title: '进度条背景色 （会覆盖 status 状态颜色）',
       defaultValue: '',
       setters: ['ColorSetter', 'FunctionSetter', 'ArraySetter', 'JSONSetter']
     },
     {
       name: 'width',
+      title: '环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）',
       defaultValue: 126,
       setters: 'NumberSetter'
     },
     {
       name: 'showText',
+      title: '是否显示进度条文字内容',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'strokeLinecap',
+      title: 'circle/dashboard 类型路径两端的形状',
       defaultValue: 'round',
       options: ['butt', 'round', 'square'],
       setters: 'SelectSetter'
     },
     {
       name: 'format',
+      title: '指定进度条文字内容',
       defaultValue: '',
       setters: 'FunctionSetter'
     },