@vtj/materials 0.9.7 → 0.9.9

package/src/element/mention.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 
 const Mention: MaterialDescription = {
   name: 'ElMention',
@@ -80,9 +81,156 @@ const Mention: MaterialDescription = {
       title: '参数',
       setters: ['ObjectSetter', 'JSONSetter']
     },
+    //
     {
-      name: 'inputProps',
-      setters: ['JSONSetter', 'ExpressionSetter']
+      name: 'type',
+      defaultValue: 'text',
+      options: ['text', 'textarea'],
+      setters: ['SelectSetter', 'InputSetter']
+    },
+    {
+      name: 'modelValue',
+      defaultValue: '',
+      setters: ['InputSetter', 'NumberSetter']
+    },
+    {
+      name: 'maxlength',
+      defaultValue: '',
+      setters: ['InputSetter', 'NumberSetter']
+    },
+    {
+      name: 'minlength',
+      defaultValue: '',
+      setters: ['InputSetter', 'NumberSetter']
+    },
+    {
+      name: 'showWordLimit',
+      defaultValue: false,
+      title:
+        '是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效',
+      label: '字数统计',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'placeholder',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'clearable',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'formatter',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'parser',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'showPassword',
+      defaultValue: false,
+      title: '是否显示切换密码图标',
+      label: '密码图标',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    size('size'),
+    {
+      name: 'prefix-icon',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'suffix-icon',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'rows',
+      defaultValue: 2,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'autosize',
+      defaultValue: false,
+      setters: ['BooleanSetter', 'JSONStter']
+    },
+    {
+      name: 'autocomplete',
+      defaultValue: 'off',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'name',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'readonly',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'max',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'min',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'step',
+      defaultValue: '',
+      setters: ['InputSetter', 'NumberSetter']
+    },
+    {
+      name: 'resize',
+      defaultValue: '',
+      options: ['none', 'both', 'horizontal', 'vertical'],
+      setters: 'InputSetter'
+    },
+    {
+      name: 'autofocus',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'form',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'aria-label',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'tabindex',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'validateEvent',
+      defaultValue: true,
+      title: '输入时是否触发表单的校验',
+      label: '表单校验',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'inputStyle',
+      defaultValue: {},
+      setters: ['JSONSetter']
     }
   ],
   events: [
@@ -97,6 +245,18 @@ const Mention: MaterialDescription = {
     },
     {
       name: 'input'
+    },
+    {
+      name: 'blur'
+    },
+    {
+      name: 'focus'
+    },
+    {
+      name: 'change'
+    },
+    {
+      name: 'clear'
     }
   ],
   slots: [

package/src/element/menu.ts

@@ -28,7 +28,7 @@ const Menu: MaterialDescription[] = [
         name: 'ellipsisIcon',
         label: 'ellipsisIcon',
         title: '自定义省略图标 (仅在水平模式下可用)',
-        setters: 'StringSetter' //?? component
+        setters: 'StringSetter'
       },
       {
         name: 'popperOffset',
@@ -37,21 +37,6 @@ const Menu: MaterialDescription[] = [
         setters: 'NumberSetter',
         defaultValue: 6
       },
-      {
-        name: 'backgroundColor',
-        defaultValue: '#ffffff',
-        setters: 'ColorSetter'
-      },
-      {
-        name: 'textColor',
-        defaultValue: '#303133',
-        setters: 'ColorSetter'
-      },
-      {
-        name: 'activeTextColor',
-        defaultValue: '#409EFF',
-        setters: 'ColorSetter'
-      },
       {
         name: 'defaultActive',
         defaultValue: '',
@@ -99,8 +84,8 @@ const Menu: MaterialDescription[] = [
         defaultValue: false
       },
       {
-        name: 'popperClass ',
-        label: 'popperClass ',
+        name: 'popperClass',
+        label: 'popperClass',
         title: '为 popper 添加类名',
         setters: 'StringSetter'
       },
@@ -117,6 +102,21 @@ const Menu: MaterialDescription[] = [
         title: '菜单消失前的延迟',
         setters: 'NumberSetter',
         defaultValue: 300
+      },
+      {
+        name: 'backgroundColor',
+        defaultValue: '#ffffff',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'textColor',
+        defaultValue: '#303133',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'activeTextColor',
+        defaultValue: '#409EFF',
+        setters: 'ColorSetter'
       }
     ],
     events: [
@@ -130,7 +130,7 @@ const Menu: MaterialDescription[] = [
         name: 'close'
       }
     ],
-    slots: ['default'],
+    slots: ['default', 'ellipsis-icon'],
     snippet: {
       props: {
         mode: 'horizontal'
@@ -192,6 +192,7 @@ const Menu: MaterialDescription[] = [
     props: [
       {
         name: 'index',
+        label: 'index *',
         defaultValue: '',
         setters: 'InputSetter'
       },
@@ -202,12 +203,10 @@ const Menu: MaterialDescription[] = [
       },
       {
         name: 'showTimeout',
-        defaultValue: 300,
         setters: 'NumberSetter'
       },
       {
         name: 'hideTimeout',
-        defaultValue: 300,
         setters: 'NumberSetter'
       },
       {
@@ -215,6 +214,11 @@ const Menu: MaterialDescription[] = [
         defaultValue: false,
         setters: 'BooleanSetter'
       },
+      {
+        name: 'teleported',
+        defaultValue: undefined,
+        setters: 'BooleanSetter'
+      },
       {
         name: 'popperOffset',
         defaultValue: 6,
@@ -281,7 +285,7 @@ const Menu: MaterialDescription[] = [
       {
         name: 'route',
         defaultValue: '',
-        setters: 'JSONSetter'
+        setters: ['StringSetter', 'JSONSetter']
       },
       {
         name: 'disabled',

package/src/element/pageHeader.ts

@@ -10,12 +10,12 @@ const components: MaterialDescription = {
   props: [
     {
       name: 'icon',
-      defaultValue: undefined,
+      defaultValue: 'Back',
       setters: 'InputSetter'
     },
     {
       name: 'title',
-      defaultValue: 'Back',
+      defaultValue: '',
       setters: 'InputSetter'
     },
     {

package/src/element/pagination.ts

@@ -8,9 +8,10 @@ const Pagination: MaterialDescription = {
   package: 'element-plus',
   props: [
     {
-      name: 'small',
-      defaultValue: false,
-      setters: 'BooleanSetter'
+      name: 'size',
+      defaultValue: 'default',
+      options: ['large', 'default', 'small'],
+      setters: 'SelectSetter'
     },
     {
       name: 'background',
@@ -45,7 +46,6 @@ const Pagination: MaterialDescription = {
       setters: 'NumberSetter'
     },
     {
-      // name: 'current-page',
       name: 'currentPage',
       defaultValue: 1,
       setters: 'NumberSetter'
@@ -58,13 +58,18 @@ const Pagination: MaterialDescription = {
     },
     {
       name: 'layout',
-      defaultValue: undefined,
+      defaultValue: 'prev, pager, next, jumper, ->, total',
       setters: 'InputSetter'
     },
     {
       name: 'pageSizes',
       defaultValue: [10, 20, 30, 40, 50, 100],
-      setters: 'JSONSetter'
+      setters: ['ArraySetter', 'JSONSetter']
+    },
+    {
+      name: 'appendSizeTo',
+      title: '下拉框挂载到哪个 DOM 元素',
+      setters: 'StringSetter'
     },
     {
       name: 'popperClass',
@@ -78,7 +83,7 @@ const Pagination: MaterialDescription = {
     },
     {
       name: 'prevIcon',
-      defaultValue: '',
+      defaultValue: 'ArrowLeft',
       setters: 'InputSetter'
     },
     {
@@ -88,7 +93,7 @@ const Pagination: MaterialDescription = {
     },
     {
       name: 'nextIcon',
-      defaultValue: '',
+      defaultValue: 'ArrowRight',
       setters: 'InputSetter'
     },
     {
@@ -98,15 +103,18 @@ const Pagination: MaterialDescription = {
     },
     {
       name: 'teleported ',
-      label: 'teleported ',
       title: '是否将下拉菜单teleport至 body',
       setters: 'BooleanSetter',
       defaultValue: true
     },
     {
       name: 'hideOnSinglePage',
-      defaultValue: '',
-      label: '只有一页隐藏',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'small',
+      defaultValue: false,
       setters: 'BooleanSetter'
     }
   ],
@@ -119,7 +127,7 @@ const Pagination: MaterialDescription = {
     'update:pageSize',
     'update:currentPage'
   ],
-  slots: ['default'],
+  slots: ['default', 'prevIcon', 'nextIcon'],
   snippet: {
     props: {
       total: 1000,

package/src/element/popconfirm.ts

@@ -36,7 +36,7 @@ const components: MaterialDescription = {
     },
     {
       name: 'icon',
-      defaultValue: '',
+      defaultValue: 'QuestionFilled',
       setters: ['InputSetter']
     },
     {
@@ -49,6 +49,11 @@ const components: MaterialDescription = {
       defaultValue: false,
       setters: 'BooleanSetter'
     },
+    {
+      name: 'hideAfter',
+      defaultValue: 200,
+      setters: 'NumberSetter'
+    },
     {
       name: 'teleported',
       defaultValue: true,
@@ -76,6 +81,9 @@ const components: MaterialDescription = {
   slots: [
     {
       name: 'reference'
+    },
+    {
+      name: 'actions'
     }
   ],
   snippet: {

package/src/element/popover.ts

@@ -31,7 +31,7 @@ const components: MaterialDescription = {
     },
     {
       name: 'width',
-      defaultValue: '',
+      defaultValue: 150,
       setters: ['NumberSetter', 'InputSetter']
     },
     {
@@ -88,6 +88,10 @@ const components: MaterialDescription = {
       defaultValue: '',
       setters: 'InputSetter'
     },
+    {
+      name: 'popperStyle',
+      setters: ['InputSetter', 'ObjectSetter']
+    },
     {
       name: 'showAfter',
       defaultValue: 0,

package/src/element/progress.ts

@@ -21,7 +21,7 @@ const Progress: MaterialDescription = {
     },
     {
       name: 'type',
-      defaultValue: 0,
+      defaultValue: 'line',
       options: ['line', 'circle', 'dashboard'],
       setters: 'SelectSetter'
     },
@@ -54,7 +54,7 @@ const Progress: MaterialDescription = {
     {
       name: 'color',
       defaultValue: '',
-      setters: ['ColorSetter', 'FunctionSetter', 'JSONSetter']
+      setters: ['ColorSetter', 'FunctionSetter', 'ArraySetter', 'JSONSetter']
     },
     {
       name: 'width',
@@ -70,7 +70,7 @@ const Progress: MaterialDescription = {
       name: 'strokeLinecap',
       defaultValue: 'round',
       options: ['butt', 'round', 'square'],
-      setters: 'BooleanSetter'
+      setters: 'SelectSetter'
     },
     {
       name: 'format',

package/src/element/radio.ts

@@ -58,6 +58,7 @@ const Radio: MaterialDescription[] = [
         name: 'update:modelValue'
       }
     ],
+    slots: ['default'],
     snippet: {
       props: {
         label: '选项一',
@@ -137,6 +138,7 @@ const Radio: MaterialDescription[] = [
         name: 'update:modelValue'
       }
     ],
+    slots: ['default'],
     snippet: {
       name: 'ElRadioGroup',
       children: [

package/src/element/rate.ts

@@ -38,20 +38,18 @@ const Rate: MaterialDescription = {
       name: 'lowThreshold',
       defaultValue: 2,
       title: '低分和中等分数的界限值， 值本身被划分在低分中',
-      label: '低分界限',
       setters: 'NumberSetter'
     },
     {
       name: 'highThreshold',
       defaultValue: 4,
       title: '高分和中等分数的界限值， 值本身被划分在高分中',
-      label: '高分界限',
       setters: 'NumberSetter'
     },
     {
       name: 'colors',
       defaultValue: ['#F7BA2A', '#F7BA2A', '#F7BA2A'],
-      setters: 'JSONSetter'
+      setters: ['ArraySetter', 'JSONSetter']
     },
     {
       name: 'voidColor',
@@ -67,7 +65,7 @@ const Rate: MaterialDescription = {
     {
       name: 'icons',
       defaultValue: ['StarFilled', 'StarFilled', 'StarFilled'],
-      setters: 'JSONSetter'
+      setters: ['ArraySetter', 'JSONSetter']
     },
     {
       name: 'voidIcon',
@@ -104,7 +102,7 @@ const Rate: MaterialDescription = {
         'Satisfied',
         'Surprise'
       ],
-      setters: 'JSONSetter'
+      setters: ['ArraySetter', 'JSONSetter']
     },
     {
       name: 'scoreTemplate',
@@ -124,6 +122,11 @@ const Rate: MaterialDescription = {
       title: '原生 id 属性',
       setters: 'StringSetter'
     },
+    {
+      name: 'ariaLabel',
+      title: '和 Rate 的 aria-label 属性保持一致',
+      setters: 'StringSetter'
+    },
     {
       name: 'label',
       label: 'label',

package/src/element/segmented.ts

@@ -0,0 +1,68 @@
+import type { MaterialDescription } from '@vtj/core';
+const Segmented: MaterialDescription[] = [
+  {
+    name: 'ElSegmented',
+    label: '分段控制器',
+
+    doc: 'https://element-plus.org/zh-CN/component/segmented.html',
+    categoryId: 'data',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'modelValue',
+        title: '绑定值',
+        setters: ['StringSetter', 'NumberSetter', 'BooleanSetter']
+      },
+      {
+        name: 'options',
+        title: '选项的数据',
+        defaultValue: [],
+        setters: 'ArraySetter'
+      },
+      {
+        name: 'size',
+        defaultValue: '',
+        options: ['', 'large', 'default', 'small'],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'disabled',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'validate-event',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'name',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'id',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'ariaLabel',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'direction',
+        defaultValue: 'horizontal',
+        options: ['horizontal', 'vertical'],
+        setters: 'SelectSetter'
+      }
+    ],
+    events: ['change', 'update:modelValue'],
+    slots: ['default'],
+    snippet: {
+      props: {
+        modelValue: 'Mom',
+        options: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      }
+    }
+  }
+];
+
+export default Segmented;