@vtj/materials 0.15.1 → 0.16.0

package/src/element/timePicker.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const TimePicker: MaterialDescription = {
   name: 'ElTimePicker',
   label: '时间选择器',
@@ -10,6 +11,7 @@ const TimePicker: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '绑定值',
       defaultValue: '',
       setters: [
         'NumberSetter',
@@ -20,72 +22,118 @@ const TimePicker: MaterialDescription = {
     },
     {
       name: 'readonly',
+      title: '完全只读',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'disabled',
+      title: '禁用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'editable',
+      title: '文本框可输入',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'clearable',
+      title: '是否显示清除按钮',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
-    {
-      name: 'size',
-      defaultValue: 'default',
-      options: ['large', 'default', 'small'],
-      setters: 'SelectSetter'
-    },
+    size('size'),
     {
       name: 'placeholder',
+      title: '非范围选择时的占位内容',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'startPlaceholder',
+      title: '范围选择时开始日期的占位内容',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'endPlaceholder',
+      title: '范围选择时结束日期的占位内容',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'isRange',
+      title: '是否为时间范围选择',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'arrowControl',
+      title: '是否使用箭头进行时间选择',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'popperClass',
+      title: 'TimePicker 下拉框的类名',
       defaultValue: '',
       setters: 'InputSetter'
     },
+    {
+      name: 'popperStyle',
+      title: '为 TimePicke 的下拉菜单自定义样式',
+      defaultValue: '',
+      setters: ['InputSetter', 'ObjectSetter']
+    },
+    {
+      name: 'popperOptions',
+      title: '自定义 popper 选项',
+      defaultValue: '',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'fallbackPlacements',
+      title: 'Tooltip 可用的 positions ',
+      defaultValue: ['bottom', 'top', 'right', 'left'],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'placement',
+      title: '下拉框出现的位置',
+      defaultValue: 'bottom',
+      setters: 'SelectSetter',
+      options: [
+        'top'
+        ,'top-start'
+        ,'top-end'
+        ,'bottom'
+        ,'bottom-start'
+        ,'bottom-end'
+        ,'left'
+        ,'left-start'
+        ,'left-end'
+        ,'right'
+        ,'right-start'
+        ,'right-end'
+      ],
+    },
     {
       name: 'rangeSeparator',
+      title: '选择范围时的分隔符',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'format',
+      title: '显示在输入框中的格式',
       defaultValue: 'HH:mm:ss',
       setters: 'InputSetter'
     },
     {
       name: 'defaultValue',
+      title: '可选，选择器打开时默认显示的时间',
       defaultValue: '',
       setters: ['InputSetter', 'ExpressionSetter']
     },
@@ -97,42 +145,50 @@ const TimePicker: MaterialDescription = {
     },
     {
       name: 'id',
+      title: '等价于原生 input id 属性',
       defaultValue: '',
       setters: ['InputSetter']
     },
     {
       name: 'name',
+      title: '等价于原生 input name 属性',
       defaultValue: '',
       setters: 'InputSetter'
     },
-    { name: 'ariaLabel', defaultValue: '', setters: 'InputSetter' },
+    { name: 'ariaLabel', title: '等价于原生 input aria-label 属性', defaultValue: '', setters: 'InputSetter' },
     {
       name: 'prefixIcon',
+      title: '自定义前缀图标',
       defaultValue: 'Clock',
       setters: 'InputSetter'
     },
     {
       name: 'clearIcon',
+      title: '自定义清除图标',
       defaultValue: 'CircleClose',
       setters: 'InputSetter'
     },
     {
       name: 'disabledHours',
+      title: '禁止选择部分小时选项',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'disabledMinutes',
+      title: '禁止选择部分分钟选项',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'disabledSeconds',
+      title: '禁止选择部分秒选项',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'teleported',
+      title: '是否将 popover 的下拉列表镜像至 body 元素',
       defaultValue: true,
       setters: 'BooleanSetter'
     },

package/src/element/timeSelect.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { effect, size } from '../shared';
 const TimeSelect: MaterialDescription = {
   name: 'ElTimeSelect',
   label: '时间选择',
@@ -10,83 +11,93 @@ const TimeSelect: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '选中项绑定值',
       defaultValue: '',
       setters: ['StringSetter', 'ExpressionSetter']
     },
     {
       name: 'disabled',
+      title: '禁用状态',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'editable',
+      title: '文本框可输入',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'clearable',
+      title: '是否显示清除按钮',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
-      name: 'size',
-      defaultValue: 'default',
-      options: ['large', 'default', 'small'],
-      setters: 'SelectSetter'
+      name: 'include-end-time',
+      title: '是否在选项中包含end',
+      defaultValue: false,
+      setters: 'BooleanSetter'
     },
+    size('size'),
     {
       name: 'placeholder',
+      title: '非范围选择时的占位内容',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'name',
+      title: '原生属性',
       defaultValue: '',
       setters: 'InputSetter'
     },
-    {
-      name: 'effect',
-      defaultValue: 'light',
-      options: ['dark', 'light'],
-      setters: 'SelectSetter'
-    },
+    effect('effect'),
     {
       name: 'prefixIcon',
+      title: '自定义前缀图标',
       defaultValue: 'Clock',
       setters: 'InputSetter'
     },
     {
       name: 'clearIcon',
+      title: '自定义清除图标',
       defaultValue: 'CircleClose',
       setters: 'InputSetter'
     },
     {
       name: 'start',
+      title: '开始时间',
       defaultValue: '09:00',
       setters: 'InputSetter'
     },
     {
       name: 'end',
+      title: '结束时间',
       defaultValue: '18:00',
       setters: 'InputSetter'
     },
     {
       name: 'step',
+      title: '间隔时间',
       defaultValue: '00:30',
       setters: 'InputSetter'
     },
     {
       name: 'minTime',
+      title: '最早时间点，早于该时间的时间段将被禁用',
       defaultValue: '00:00',
       setters: 'InputSetter'
     },
     {
       name: 'maxTime',
+      title: '最晚时间点，晚于该时间的时间段将被禁用',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'format',
+      title: '设置时间格式',
       defaultValue: 'HH:mm',
       setters: 'InputSetter'
     },
@@ -104,7 +115,17 @@ const TimeSelect: MaterialDescription = {
         'BooleanSetter',
         'FunctionSetter'
       ]
-    }
+    },
+    {
+      name: 'popper-class',
+      title: '为 TimeSelect 下拉面板设置自定义类名',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'popper-style',
+      title: '为 TimeSelect 下拉面板设置自定义样式',
+      setters: ['StringSetter', 'ObjectSetter'],
+    },
   ],
   events: ['change', 'blur', 'focus', 'clear', 'update:modelValue']
 };

package/src/element/timeline.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { type } from '../shared';
 const Timeline: MaterialDescription[] = [
   {
     name: 'ElTimeline',
@@ -7,6 +8,22 @@ const Timeline: MaterialDescription[] = [
     doc: 'https://element-plus.org/zh-CN/component/timeline.html',
     categoryId: 'form',
     package: 'element-plus',
+
+    props: [
+      {
+        name: 'reverse',
+        title: '是否逆序排序',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'mode',
+        title: '时间线与内容的相对位置',
+        defaultValue: 'start',
+        setters: 'SelectSetter',
+        options: ['start', 'alternate', 'alternate-reverse', 'end']
+      },
+    ],
     slots: ['default'],
     snippet: {
       name: 'ElTimeline',
@@ -51,50 +68,53 @@ const Timeline: MaterialDescription[] = [
     props: [
       {
         name: 'timestamp',
+        title: '时间戳',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'hide-timestamp',
+        title: '是否隐藏时间戳',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'center',
+        title: '是否垂直居中',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'placement',
+        title: '时间戳位置',
         defaultValue: 'bottom',
         options: ['top', 'bottom'],
         setters: 'SelectSetter'
       },
-      {
-        name: 'type',
-        defaultValue: '',
-        options: ['primary', 'success', 'warning', 'danger', 'info'],
-        setters: 'SelectSetter'
-      },
+      type('type'),
       {
         name: 'color',
+        title: '节点颜色',
         defaultValue: '',
         options: ['hsl', 'hsv', 'hex', 'rgb'],
         setters: 'SelectSetter'
       },
       {
         name: 'size',
+        title: '节点尺寸',
         defaultValue: 'normal',
         options: ['normal', 'large'],
         setters: 'SelectSetter'
       },
       {
         name: 'icon',
+        title: '自定义图标',
         defaultValue: '',
         setters: 'IconSetter'
       },
       {
         name: 'hollow',
+        title: '是否空心点',
         defaultValue: false,
         setters: 'BooleanSetter'
       }

package/src/element/tooltip.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { effect } from '../shared';
 const components: MaterialDescription = {
   name: 'ElTooltip',
   childIncludes: true,
@@ -11,26 +12,26 @@ const components: MaterialDescription = {
   props: [
     {
       name: 'appendTo',
+      title: '指示 Tooltip 的内容将附加在哪一个网页元素上',
       defaultValue: '',
       setters: 'InputSetter'
     },
-    {
-      name: 'effect',
-      defaultValue: 'dark',
-      setters: 'InputSetter'
-    },
+    effect('effect'),
     {
       name: 'content',
+      title: '显示的内容',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'rawContent',
+      title: 'content 中的内容是否作为 HTML 字符串处理',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'placement',
+      title: 'Tooltip 组件出现的位置',
       defaultValue: 'bottom',
       setters: 'SelectSetter',
       options: [
@@ -50,60 +51,84 @@ const components: MaterialDescription = {
     },
     {
       name: 'fallback-placements',
+      title: 'Tooltip 可用的 positions',
       setters: 'ArraySetter'
     },
     {
       name: 'visible',
+      title: 'Tooltip 组件可见性',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'disabled',
+      title: 'Tooltip 组件是否禁用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'offset',
+      title: '出现位置的偏移量',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'transition',
+      title: '动画名称',
       defaultValue: 'el-fade-in-linear',
       setters: 'InputSetter'
     },
     {
       name: 'popperOptions',
+      title: 'popper.js 参数',
       defaultValue: { boundariesElement: 'body', gpuAcceleration: false },
       setters: 'JSONSetter'
     },
+    {
+      name: 'arrowOffset',
+      title: '控制Tooltip的箭头相对于弹出窗口的偏移(添加)',
+      defaultValue: 5,
+      setters: 'NumberSetter'
+    },
     {
       name: 'showAfter',
+      title: '延迟显示时间（以毫秒为单位），在受控模式下无效',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'show-arrow',
+      title: 'tooltip 的内容是否有箭头',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'hide-after',
+      title: '消失延迟时间（以毫秒为单位），在受控模式下无效',
       defaultValue: 200,
       setters: 'NumberSetter'
     },
     {
       name: 'auto-close',
+      title: '隐藏提示框的超时时间（以毫秒为单位），在受控模式下无效',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'popper-class',
+      title: '为 Tooltip 的 popper 添加类名',
       defaultValue: '',
       setters: 'InputSetter'
     },
+    {
+      name: 'popper-style',
+      title: '为 Tooltip 的 popper 添加自定义样式',
+      defaultValue: '',
+      setters: ['StringSetter', 'ObjectSetter']
+    },
     {
       name: 'enterable',
+      title: '鼠标是否可进入到 tooltip 中',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
@@ -117,28 +142,32 @@ const components: MaterialDescription = {
     {
       name: 'trigger',
       label: 'trigger',
-      title: '如何触发 Tooltip',
+      title: '提示框的触发方式（用于显示），在受控模式下无效',
       setters: 'SelectSetter',
       options: ['hover', 'click', 'focus', 'contextmenu'],
       defaultValue: 'hover'
     },
     {
       name: 'virtual-triggering',
+      title: '用来标识虚拟触发是否被启用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'virtual-ref',
+      title: '标识虚拟触发时的触发元素',
       defaultValue: '',
       setters: 'ExpressionSetter'
     },
     {
       name: 'trigger-keys',
+      title: '当通过鼠标点击使触发元素获得焦点时，可以定义一组键盘按键代码，通过键盘控制提示框的显示，在受控模式下无效',
       defaultValue: ['Enter', 'Space'],
       setters: 'ExpressionSetter'
     },
     {
       name: 'persistent',
+      title: '当tooltip未激活且 persistent 为 false 时，tooltip将被销毁',
       setters: 'BooleanSetter'
     },
     {
@@ -146,14 +175,26 @@ const components: MaterialDescription = {
       label: 'ariaLabel',
       title: '和 aria-label 属性保持一致',
       setters: 'StringSetter'
-    }
+    },
+    {
+      name: 'focus-on-target',
+      title: '当通过悬停触发提示时，是否聚焦触发元素，以提升可访问性',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
   ],
   events: [
     {
-      name: 'confirm'
+      name: 'before-show'
+    },
+    {
+      name: 'show'
+    },
+    {
+      name: 'before-hide'
     },
     {
-      name: 'cancel'
+      name: 'hide'
     },
     {
       name: 'update:visible '

package/src/element/tour.ts

@@ -8,6 +8,11 @@ const Tour: MaterialDescription = {
   categoryId: 'data',
   package: 'element-plus',
   props: [
+    {
+      name: 'append-to',
+      title: '挂载到哪个 DOM 元素',
+      setters: ['StringSetter', 'ExpressionSetter'],
+    },
     {
       name: 'showArrow',
       label: 'showArrow',

package/src/element/transfer.ts

@@ -9,56 +9,67 @@ const Transfer: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '选中项绑定值',
       defaultValue: '',
       setters: ['ArraySetter', 'ExpressionSetter']
     },
     {
       name: 'data',
+      title: 'Transfer 的数据源',
       defaultValue: [],
       setters: ['ArraySetter', 'JSONSetter']
     },
     {
       name: 'filterable',
+      title: '是否可搜索',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'filterPlaceholder',
+      title: '搜索框占位符',
       defaultValue: 'Enter keyword',
       setters: 'InputSetter'
     },
     {
       name: 'filterMethod',
+      title: '自定义搜索方法',
       setters: 'FunctionSetter'
     },
     {
       name: 'targetOrder',
+      title: '右侧列表元素的排序策略： 若为 original，则保持与数据源相同的顺序； 若为 push，则新加入的元素排在最后； 若为 unshift，则新加入的元素排在最前',
       defaultValue: 'original',
       options: ['original', 'push', 'unshift'],
       setters: 'SelectSetter'
     },
     {
       name: 'titles',
+      title: '自定义列表标题',
       defaultValue: [],
       setters: ['ArraySetter', 'JSONSetter']
     },
     {
       name: 'buttonTexts',
+      title: '自定义按钮文案',
       defaultValue: [],
       setters: ['ArraySetter', 'JSONSetter']
     },
     {
       name: 'renderContent',
+      title: '自定义数据项渲染函数',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'format',
+      title: '列表顶部勾选状态文案',
       defaultValue: '',
       setters: ['ObjectSetter', 'JSONSetter']
     },
     {
       name: 'props',
+      title: '数据源的字段别名',
       defaultValue: '',
       setters: ['ObjectSetter', 'JSONSetter']
     },
@@ -76,6 +87,7 @@ const Transfer: MaterialDescription = {
     },
     {
       name: 'validateEvent',
+      title: '是否触发表单验证',
       defaultValue: true,
       setters: 'BooleanSetter'
     }