@vtj/materials 0.15.1 → 0.16.0

package/src/element/configProvider.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 
 const configProvider: MaterialDescription = {
   name: 'ElConfigProvider',
@@ -13,12 +14,8 @@ const configProvider: MaterialDescription = {
       setters: 'ObjectSetter'
     },
     {
-      name: 'size',
-      label: 'size',
+      ...size('size'),
       title: '全局组件大小',
-      setters: 'SelectSetter',
-      options: ['large', 'default', 'small'],
-      defaultValue: 'default'
     },
     {
       name: 'zIndex',
@@ -38,7 +35,41 @@ const configProvider: MaterialDescription = {
       label: 'button',
       title: '按钮相关配置',
       setters: 'ObjectSetter',
-      defaultValue: { autoInsertSpace: false }
+      defaultValue: {
+        type: null,
+        autoInsertSpace: false,
+        plain: false,
+        text: false,
+        round: false,
+      }
+    },
+    {
+      name: 'link',
+      title: '链接相关的配置',
+      setters: 'ObjectSetter',
+      defaultValue: {
+        type: 'default',
+        underline: 'hover'
+      }
+    },
+    {
+      name: 'card',
+      title: 'card 相关的配置',
+      setters: 'ObjectSetter',
+      defaultValue: {
+        shadow: null,
+      }
+    },
+    {
+      name: 'dialog',
+      title: 'dialog 相关的配置',
+      setters: 'ObjectSetter',
+      defaultValue: {
+        alignCenter: false,
+        draggable: false,
+        overflow: false,
+        transition: null
+      }
     },
     {
       name: 'message',
@@ -51,6 +82,18 @@ const configProvider: MaterialDescription = {
       label: 'experimentalFeatures',
       title: '将要添加的实验阶段的功能，所有功能都是默认设置为 false',
       setters: 'ObjectSetter'
+    },
+    {
+      name: 'emptyValues',
+      label: 'emptyValues',
+      title: '输入类组件空值',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'valueOnClear',
+      label: 'valueOnClear',
+      title: '输入类组件清空值',
+      setters: ['InputSetter', 'NumberSetter', 'BooleanSetter', 'FunctionSetter']
     }
   ],
   slots: ['default']

package/src/element/container.ts

@@ -10,6 +10,7 @@ const components: MaterialDescription[] = [
     props: [
       {
         name: 'direction',
+        title: '子元素的排列方向',
         defaultValue: '',
         setters: 'SelectSetter',
         options: ['horizontal', 'vertical']
@@ -35,6 +36,7 @@ const components: MaterialDescription[] = [
     props: [
       {
         name: 'height',
+        title: '顶栏高度',
         defaultValue: '60px',
         setters: ['InputSetter']
       }
@@ -50,6 +52,7 @@ const components: MaterialDescription[] = [
     props: [
       {
         name: 'width',
+        title: '侧边栏宽度',
         defaultValue: '300px',
         setters: ['InputSetter']
       }
@@ -74,6 +77,7 @@ const components: MaterialDescription[] = [
     props: [
       {
         name: 'height',
+        title: '底栏高度',
         defaultValue: '60px',
         setters: ['InputSetter']
       }

package/src/element/datePicker.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const DatePicker: MaterialDescription = {
   name: 'ElDatePicker',
   label: '日期选择器',
@@ -20,20 +21,17 @@ const DatePicker: MaterialDescription = {
     },
     {
       name: 'readonly',
+      title: '只读',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'disabled',
+      title: '禁用',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
-    {
-      name: 'size',
-      defaultValue: 'default',
-      options: ['large', 'default', 'small'],
-      setters: 'SelectSetter'
-    },
+    size('size'),
     {
       name: 'editable',
       title: '文本框可输入',
@@ -42,11 +40,13 @@ const DatePicker: MaterialDescription = {
     },
     {
       name: 'clearable',
+      title: '是否显示清除按钮',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'placeholder',
+      title: '非范围选择时的占位内容',
       defaultValue: '',
       setters: 'InputSetter'
     },
@@ -94,6 +94,12 @@ const DatePicker: MaterialDescription = {
       defaultValue: '',
       setters: 'InputSetter'
     },
+    {
+      name: 'popperStyle',
+      title: '弹出内容的自定义样式',
+      defaultValue: '',
+      setters: ['InputSetter', 'ObjectSetter']
+    },
     {
       name: 'popper-options',
       title: '自定义 popper 选项',
@@ -126,11 +132,13 @@ const DatePicker: MaterialDescription = {
     },
     {
       name: 'id',
+      title: '等价于原生 input id 属性',
       defaultValue: '',
       setters: ['InputSetter']
     },
     {
       name: 'name',
+      title: '等价于原生 input name 属性',
       defaultValue: '',
       setters: 'InputSetter'
     },
@@ -222,6 +230,30 @@ const DatePicker: MaterialDescription = {
         'right-start',
         'right-end'
       ]
+    },
+    {
+      name: 'show-footer',
+      title: '是否显示 footer',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-confirm',
+      title: '是否显示确定按钮',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-week-number',
+      title: '显示周数(除周外)',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'automatic-dropdown',
+      title: '该属性决定在输入框获得焦点时日期选择面板是否弹出',
+      defaultValue: true,
+      setters: 'BooleanSetter'
     }
   ],
   events: [

package/src/element/dateTime.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 
 const dateTime: MaterialDescription = {
   name: 'ElDateTimePicker',
@@ -10,37 +11,38 @@ const dateTime: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '绑定值',
       defaultValue: '',
       setters: ['NumberSetter', 'StringSetter', 'ExpressionSetter']
     },
     {
       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: 'StringSetter'
     },
@@ -70,12 +72,12 @@ const dateTime: MaterialDescription = {
         'year',
         'month',
         'date',
-        'dates',
+        // 'dates',
         'datetime',
         'week',
         'datetimerange',
         'daterange',
-        'monthrange'
+        // 'monthrange'
       ],
       setters: 'SelectSetter'
     },
@@ -91,6 +93,44 @@ const dateTime: MaterialDescription = {
       defaultValue: '',
       setters: 'StringSetter'
     },
+    {
+      name: 'popperStyle',
+      title: '弹出内容的自定义样式',
+      defaultValue: '',
+      setters: ['StringSetter', 'ObjectSetter']
+    },
+    {
+      name: 'popper-options',
+      title: '自定义 popper 选项',
+      defaultValue: '',
+      setters: ['ObjectSetter', 'JSONSetter']
+    },
+    {
+      name: 'fallback-placements',
+      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',
       defaultValue: '-',
@@ -117,23 +157,25 @@ const dateTime: MaterialDescription = {
     },
     {
       name: 'dateFormat',
-      defaultValue: '',
+      defaultValue: 'YYYY-MM-DD',
       setters: 'StringSetter',
-      title: '时间选择器下拉列表中显示的日期格式'
+      title: '输入框内部面板中显示的日期格式'
     },
     {
       name: 'timeFormat',
-      defaultValue: '',
+      defaultValue: '\tHH:mm:ss',
       setters: 'StringSetter',
-      title: '时间选择器下拉列表中显示的时间格式'
+      title: '输入框内部面板中显示的时间格式'
     },
     {
       name: 'id',
+      title: '等价于原生 input id 属性',
       defaultValue: '',
       setters: ['StringSetter', 'ArraySetter', 'ExpressionSetter']
     },
     {
       name: 'name',
+      title: '等价于原生 input name 属性',
       defaultValue: '',
       setters: 'StringSetter'
     },
@@ -163,10 +205,28 @@ const dateTime: MaterialDescription = {
     },
     {
       name: 'disabledDate',
+      title: '一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'disabled-hours',
+      title: '禁止选择部分小时选项',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'disabled-minutes',
+      title: '禁止选择部分分钟选项',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'disabled-seconds',
+      title: '禁止选择部分秒选项',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
-
     {
       name: 'cellClassName',
       defaultValue: '',
@@ -176,7 +236,7 @@ const dateTime: MaterialDescription = {
     {
       name: 'teleported',
       defaultValue: true,
-      title: '设置自定义类名',
+      title: '是否将 datetime-picker 的下拉列表插入至 body 元素',
       setters: 'BooleanSetter'
     },
     {
@@ -199,7 +259,25 @@ const dateTime: MaterialDescription = {
       title: '是否显示 now 按钮',
       defaultValue: true,
       setters: 'BooleanSetter'
-    }
+    },
+    {
+      name: 'show-footer',
+      title: '是否显示 footer',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-confirm',
+      title: '是否显示确定按钮',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-week-number',
+      title: '显示周数(除周外)',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
   ],
   events: [
     {

package/src/element/descriptions.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const Descriptions: MaterialDescription[] = [
   {
     name: 'ElDescriptions',
@@ -10,38 +11,39 @@ const Descriptions: MaterialDescription[] = [
     props: [
       {
         name: 'border',
+        title: '是否带有边框',
         defaultValue: false,
         setters: 'BooleanSetter'
       },
       {
         name: 'column',
+        title: '一行 Descriptions Item 的数量',
         defaultValue: 3,
         setters: 'NumberSetter'
       },
       {
         name: 'direction',
+        title: '排列的方向',
         defaultValue: 'horizontal',
         options: ['vertical', 'horizontal'],
         setters: 'SelectSetter'
       },
-      {
-        name: 'size',
-        defaultValue: '',
-        options: ['', 'large', 'default', 'small'],
-        setters: 'SelectSetter'
-      },
+      size('size'),
       {
         name: 'title',
+        title: '标题文本，显示在左上方',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'extra',
+        title: '操作区文本，显示在右上方',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'labelWidth',
+        title: '每一列的标签宽度',
         defaultValue: '',
         setters: ['StringSetter', 'NumberSetter']
       }
@@ -94,53 +96,63 @@ const Descriptions: MaterialDescription[] = [
     props: [
       {
         name: 'label',
+        title: '标签文本',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'span',
+        title: '列的数量',
         defaultValue: 1,
         setters: 'NumberSetter'
       },
       {
         name: 'rowspan',
+        title: '单元格应该跨越的行数',
         defaultValue: 1,
         setters: 'NumberSetter'
       },
       {
         name: 'width',
+        title: '列的宽度，不同行相同列的宽度按最大值设定（如无 border ，宽度包含标签与内容）',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter']
       },
       {
         name: 'min-width',
+        title: '列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列（如无 border，宽度包含标签与内容）',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter']
       },
       {
         name: 'labelWidth',
+        title: '列标签宽，如果未设置，它将与列宽度相同。 比 Descriptions 的 label-width 优先级高',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter']
       },
       {
         name: 'align',
+        title: '列的内容对齐方式（如无 border，对标签和内容均生效）',
         defaultValue: 'left',
         options: ['left', 'center', 'right'],
         setters: 'SelectSetter'
       },
       {
         name: 'label-align',
+        title: '列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 border，请使用 align 参数）',
         defaultValue: '',
         options: ['left', 'center', 'right'],
         setters: 'SelectSetter'
       },
       {
         name: 'class-name',
+        title: '列的内容自定义类名',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'label-class-name',
+        title: 'column label custom class name',
         defaultValue: '',
         label: '标题类名',
         setters: 'InputSetter'

package/src/element/dialog.ts

@@ -9,42 +9,73 @@ const components: MaterialDescription = {
   props: [
     {
       name: 'modelValue',
+      title: '是否显示 Dialog',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'title',
+      title: 'Dialog 对话框 Dialog 的标题',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'width',
+      title: '对话框的宽度',
       defaultValue: '',
       setters: ['InputSetter', 'NumberSetter']
     },
     {
       name: 'fullscreen',
+      title: '是否为全屏 Dialog',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'top',
+      title: 'dialog CSS 中的 margin-top 值',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'modal',
+      title: '是否需要遮罩层',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
+    {
+      name: 'modalPenetrable',
+      title: '是否允许穿透遮罩层',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
     {
       name: 'modalClass',
       label: 'modalClass',
       title: '遮罩的自定义类名',
       setters: 'StringSetter'
     },
+    {
+      name: 'headerClass',
+      label: 'headerClass',
+      title: 'header 部分的自定义 class 名',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'bodyClass',
+      label: 'bodyClass',
+      title: 'body 部分的自定义 class 名',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'footerClass',
+      label: 'footerClass',
+      title: 'footer 部分的自定义 class 名',
+      setters: 'StringSetter'
+    },
     {
       name: 'appendToBody',
+      title: 'Dialog 自身是否插入至 body 元素上',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -57,21 +88,25 @@ const components: MaterialDescription = {
     },
     {
       name: 'lockScroll',
+      title: '是否在 Dialog 出现时将 body 滚动锁定',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'openDelay',
+      title: 'dialog 打开的延时时间，单位毫秒',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'closeDelay',
+      title: 'dialog 关闭的延时时间，单位毫秒',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'closeOnClickModal',
+      title: '是否可以通过点击 modal 关闭 Dialog',
       label: '点击关闭',
       defaultValue: true,
       setters: 'BooleanSetter'
@@ -79,21 +114,25 @@ const components: MaterialDescription = {
     {
       name: 'closeOnPressEscape',
       label: 'ESC键关闭',
+      title: '是否可以通过按下 ESC 关闭 Dialog',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'showClose',
+      title: '是否显示关闭按钮',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'beforeClose',
+      title: '关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候',
       defaultValue: '',
       setters: 'FunctionSetter'
     },
     {
       name: 'draggable',
+      title: '为 Dialog 启用可拖拽功能',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -106,16 +145,19 @@ const components: MaterialDescription = {
     },
     {
       name: 'center',
+      title: '是否让 Dialog 的 header 和 footer 部分居中排列',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'alignCenter',
+      title: '是否水平垂直对齐对话框',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'destroyOnClose',
+      title: '当关闭 Dialog 时，销毁其中的元素',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
@@ -139,10 +181,15 @@ const components: MaterialDescription = {
       defaultValue: 2
     },
     {
-      name: 'customClass',
-      defaultValue: '',
-      setters: 'InputSetter'
-    }
+      name: 'transition',
+      title: '对话框动画的自定义过渡配置',
+      setters: ['StringSetter', 'ObjectSetter']
+    },
+    // {
+    //   name: 'customClass',
+    //   defaultValue: '',
+    //   setters: 'InputSetter'
+    // }
   ],
   events: [
     {