@vtj/materials 0.9.6 → 0.9.8

package/src/element/inputTag.ts

@@ -0,0 +1,135 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const InputTag: MaterialDescription = {
+  name: 'ElInputTag',
+  label: '标签输入框',
+  categoryId: 'form',
+  doc: 'https://element-plus.org/zh-CN/component/input-tag.html',
+  props: [
+    {
+      name: 'modelValue',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'max',
+      title: '可添加标签的最大数量',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'tagType',
+      title: '标签类型',
+      defaultValue: 'info',
+      setters: 'SelectSetter',
+      options: ['', 'success', 'info', 'warning', 'danger']
+    },
+    {
+      name: 'tagEffect',
+      title: '标签效果',
+      defaultValue: 'light',
+      setters: 'SelectSetter',
+      options: ['', 'light', 'dark', 'plain']
+    },
+    {
+      name: 'draggable',
+      title: '是否可以拖动标签',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'size',
+      setters: 'SelectSetter',
+      options: ['large', 'default', 'small']
+    },
+    {
+      name: 'clearable',
+      title: '是否显示清除按钮',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'validateEvent',
+      title: '是否触发表单验证',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'autofocus',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'id',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'tabindex',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'maxlength',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'minlength',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'placeholder',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'autocomplete',
+      defaultValue: 'off',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'ariaLabel',
+      setters: 'StringSetter'
+    }
+  ],
+  events: [
+    {
+      name: 'change'
+    },
+    {
+      name: 'input'
+    },
+    {
+      name: 'add-tag'
+    },
+    {
+      name: 'remove-tag'
+    },
+    {
+      name: 'focus'
+    },
+    {
+      name: 'blur'
+    },
+    {
+      name: 'clear'
+    },
+    {
+      name: 'update:modelValue'
+    }
+  ],
+  slots: ['tag', 'prefix', 'suffix'],
+  snippet: {
+    props: {
+      modelValue: ['1', '2']
+    }
+  }
+};
+
+export default InputTag;

package/src/element/mention.ts

@@ -0,0 +1,137 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Mention: MaterialDescription = {
+  name: 'ElMention',
+  label: '提及',
+  categoryId: 'form',
+  doc: 'https://element-plus.org/zh-CN/component/mention.html#api',
+  props: [
+    {
+      name: 'options',
+      title: '提及选项列表',
+      defaultValue: [],
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'prefix',
+      title: '触发字段的前缀。 字符串长度必须且只能为 1',
+      defaultValue: '@',
+      setters: ['StringSetter', 'ArraySetter']
+    },
+    {
+      name: 'split',
+      title: '用于拆分提及的字符。 字符串长度必须且只能为 1	',
+      defaultValue: ' ',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'filterOption',
+      title: '定制筛选器选项逻辑',
+      setters: ['BooleanSetter', 'FunctionSetter']
+    },
+    {
+      name: 'placement',
+      title: '设置弹出位置',
+      defaultValue: 'bottom',
+      options: ['top', 'bottom'],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'showArrow',
+      title: '下拉菜单的内容是否有箭头',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'offset',
+      title: '下拉面板偏移量',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'whole',
+      title: '当退格键被按下做删除操作时，是否将提及部分作为整体删除',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'checkIsWhole',
+      title: '当退格键被按下做删除操作时，检查是否将提及部分作为整体删除',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'loading',
+      title: '提及的下拉面板是否处于加载状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'modelValue',
+      title: '输入值',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'popperClass',
+      title: '自定义浮层类名',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'popperOptions',
+      title: '参数',
+      setters: ['ObjectSetter', 'JSONSetter']
+    },
+    {
+      name: 'inputProps',
+      setters: ['JSONSetter', 'ExpressionSetter']
+    }
+  ],
+  events: [
+    {
+      name: 'update:modelValue'
+    },
+    {
+      name: 'search'
+    },
+    {
+      name: 'select'
+    },
+    {
+      name: 'input'
+    }
+  ],
+  slots: [
+    'label',
+    'loading',
+    'header',
+    'footer',
+    'prefix',
+    'suffix',
+    'prepend',
+    'append'
+  ],
+  snippet: {
+    props: {
+      options: [
+        {
+          label: 'Fuphoenixes',
+          value: 'Fuphoenixes'
+        },
+        {
+          label: 'kooriookami',
+          value: 'kooriookami'
+        },
+        {
+          label: 'Jeremy',
+          value: 'Jeremy'
+        },
+        {
+          label: 'btea',
+          value: 'btea'
+        }
+      ],
+      modelValue: '@'
+    }
+  }
+};
+
+export default Mention;

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;