@vtj/materials 0.15.1 → 0.16.0

package/dist/deps/element-plus/zh-cn.js

@@ -1,4 +1,4 @@
-/*! Element Plus v2.13.1 */
+/*! Element Plus v2.13.2 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vtj/materials",
   "private": false,
-  "version": "0.15.1",
+  "version": "0.16.0",
   "type": "module",
   "keywords": [
     "低代码引擎",
@@ -35,12 +35,12 @@
     "vue": "~3.5.5",
     "vue-i18n": "~11.2.2",
     "vue-router": "~4.6.0",
-    "@vtj/core": "~0.15.1",
-    "@vtj/charts": "~0.15.1",
+    "@vtj/charts": "~0.16.0",
     "@vtj/cli": "~0.12.18",
-    "@vtj/utils": "~0.15.1",
-    "@vtj/icons": "~0.15.1",
-    "@vtj/ui": "~0.15.1"
+    "@vtj/core": "~0.16.0",
+    "@vtj/icons": "~0.16.0",
+    "@vtj/ui": "~0.16.0",
+    "@vtj/utils": "~0.16.0"
   },
   "files": [
     "dist",

package/src/element/affix.ts

@@ -10,17 +10,20 @@ const components: MaterialDescription = {
   props: [
     {
       name: 'offset',
+      title: '偏移距离',
       defaultValue: 0,
       setters: 'NumberSetter'
     },
     {
       name: 'position',
+      title: '固钉位置',
       defaultValue: 'top',
       setters: 'SelectSetter',
       options: ['top', 'bottom']
     },
     {
       name: 'target',
+      title: '通过设置target属性 (CSS 选择器)，让固钉始终保持在容器内， 超过范围则隐藏',
       defaultValue: '',
       setters: 'InputSetter'
     },

package/src/element/alert.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { effect, type } from '../shared';
 const components: MaterialDescription = {
   name: 'ElAlert',
   childIncludes: true,
@@ -10,46 +11,46 @@ const components: MaterialDescription = {
   props: [
     {
       name: 'title',
+      label: '标题',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
-      name: 'type',
+      ...type('type'),
       defaultValue: 'info',
-      setters: 'SelectSetter',
-      options: ['success', 'warning', 'info', 'error']
     },
     {
       name: 'description',
+      label: '描述',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'closable',
+      label: '允许关闭',
       defaultValue: true,
       setters: 'BooleanSetter'
     },
     {
       name: 'center',
+      label: '文字居中',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'closeText',
+      label: '关闭按钮文本',
+      title: '自定义关闭按钮文本',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'showIcon',
+      label: '显示图标',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
-    {
-      name: 'effect',
-      defaultValue: 'light',
-      setters: 'SelectSetter',
-      options: ['light', 'dark']
-    }
+    effect('effect'),
   ],
   events: [
     {

package/src/element/avatar.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 
 const Avatar: MaterialDescription = {
   name: 'ElAvatar',
@@ -10,38 +11,42 @@ const Avatar: MaterialDescription = {
   props: [
     {
       name: 'icon',
+      title: '设置 Avatar 的图标类型',
       defaultValue: '',
       setters: 'IconSetter'
     },
     {
-      name: 'size',
+      ...size('size'),
       setters: ['SelectSetter', 'NumberSetter'],
-      options: ['large', 'default', 'small'],
-      defaultValue: 'default'
     },
     {
       name: 'shape',
+      title: '形状',
       defaultValue: 'circle',
       options: ['circle', 'square'],
       setters: 'SelectSetter'
     },
     {
       name: 'src',
+      title: '图片的源地址',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'srcSet',
+      title: '图片的原生 srcset 属性',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'alt',
+      title: '图片的原生 alt 属性',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'fit',
+      title: '当展示类型为图片的时候，设置图片如何适应容器',
       defaultValue: 'cover',
       options: ['fill', 'contain', 'cover', 'none', 'scale-down'],
       setters: 'SelectSetter'

package/src/element/backtop.ts

@@ -9,21 +9,25 @@ const components: MaterialDescription = {
   props: [
     {
       name: 'target',
+      title: '触发滚动的对象',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'visibilityHeight',
+      title: '滚动高度达到此参数值才出现',
       defaultValue: 200,
       setters: 'NumberSetter'
     },
     {
       name: 'right',
+      title: '控制其显示位置，距离页面右边距',
       defaultValue: 40,
       setters: 'NumberSetter'
     },
     {
       name: 'bottom',
+      title: '控制其显示位置，距离页面底部距离',
       defaultValue: 40,
       setters: 'NumberSetter'
     }

package/src/element/badge.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { type } from '../shared';
 const Badge: MaterialDescription = {
   name: 'ElBadge',
   label: '徽章',
@@ -15,31 +16,29 @@ const Badge: MaterialDescription = {
     },
     {
       name: 'max',
+      title: '最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用',
       defaultValue: 99,
       setters: 'NumberSetter'
     },
     {
       name: 'isDot',
       defaultValue: false,
-      title: '是否显示小圆点。',
+      title: '是否显示小圆点',
       setters: 'BooleanSetter'
     },
     {
       name: 'hidden',
       defaultValue: false,
-      title: '是否隐藏 Badge。',
+      title: '是否隐藏 Badge',
       setters: 'BooleanSetter'
     },
     {
-      name: 'type',
+      ...type('type'),
       defaultValue: 'danger',
-      title: 'badge 类型。',
-      options: ['primary', 'success', 'warning', 'danger', 'info'],
-      setters: 'SelectSetter'
     },
     {
       name: 'showZero',
-      title: '值为零时是否显示 Badge  ',
+      title: '值为零时是否显示 Badge',
       setters: 'BooleanSetter',
       defaultValue: true
     },

package/src/element/breadcrumb.ts

@@ -11,11 +11,13 @@ const Breadcrumb: MaterialDescription[] = [
     props: [
       {
         name: 'separator',
+        title: '分隔符',
         defaultValue: '/',
         setters: 'InputSetter'
       },
       {
         name: 'separatorIcon',
+        title: '图标分隔符的组件或组件名',
         defaultValue: '',
         setters: ['InputSetter']
       }
@@ -47,13 +49,15 @@ const Breadcrumb: MaterialDescription[] = [
     props: [
       {
         name: 'to',
+        title: '路由跳转目标',
         defaultValue: '',
         setters: ['InputSetter', 'JSONSetter']
       },
       {
         name: 'replace',
-        defaultValue: '',
-        setters: 'InputSetter'
+        title: '如果设置该属性为 true, 导航将不会留下历史记录',
+        defaultValue: false,
+        setters: 'BooleanSetter'
       }
     ],
     slots: ['default'],

package/src/element/button.ts

@@ -11,64 +11,76 @@ const button: MaterialDescription = {
     type('type'),
     {
       name: 'plain',
+      title: '是否为朴素按钮',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
-    { name: 'text', defaultValue: false, setters: 'BooleanSetter' },
-    { name: 'bg', defaultValue: false, setters: 'BooleanSetter' },
-    { name: 'link', defaultValue: false, setters: 'BooleanSetter' },
+    { name: 'text', title: '是否为文字按钮', defaultValue: false, setters: 'BooleanSetter' },
+    { name: 'bg', title: '是否显示文字按钮背景颜色',  defaultValue: false, setters: 'BooleanSetter' },
+    { name: 'link', title: '是否为链接按钮',  defaultValue: false, setters: 'BooleanSetter' },
     {
       name: 'round',
+      title: '是否为圆角按钮',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'circle',
+      title: '是否为圆形按钮',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'loading',
+      title: '是否为加载中状态',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
-    { name: 'loadingIcon', defaultValue: undefined, setters: 'IconSetter' }, //??
+    { name: 'loadingIcon', title: '自定义加载中状态图标', defaultValue: undefined, setters: 'IconSetter' }, //??
     {
       name: 'disabled',
+      title: '按钮是否为禁用状态',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'icon',
+      title: '图标组件',
       defaultValue: undefined,
       setters: 'IconSetter'
     },
     {
       name: 'autofocus',
+      title: '原生 autofocus 属性',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'nativeType',
+      title: '原生 type 属性',
       defaultValue: 'button',
       setters: 'SelectSetter',
       options: ['button ', 'submit', 'reset']
     },
     {
       name: 'autoInsertSpace',
+      title: '两个中文字符之间自动插入空格(仅当文本长度为 2 且所有字符均为中文时才生效)',
       setters: 'BooleanSetter'
     },
     {
       name: 'color',
+      title: '自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色',
       setters: 'StringSetter'
     },
     {
       name: 'dark',
+      title: 'dark 模式, 意味着自动设置 color 为 dark 模式的颜色',
       defaultValue: false,
       setters: 'BooleanSetter'
     },
     {
       name: 'tag',
+      title: '自定义元素标签',
       setters: 'StringSetter',
       defaultValue: 'button'
     }

package/src/element/calendar.ts

@@ -14,8 +14,22 @@ const Calendar: MaterialDescription = {
     },
     {
       name: 'range',
+      title: '时间范围，包括开始时间与结束时间。 开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月',
       defaultValue: '',
       setters: ['ArraySetter', 'JSONSetter']
+    },
+    {
+      name: 'controllerType',
+      title: '日历头部的控制器类型',
+      defaultValue: 'button',
+      setters: 'SelectSetter',
+      options: ['button', 'select']
+    },
+    {
+      name: 'formatter',
+      title: '当 controller-type 为“select”时的格式标签',
+      defaultValue: '',
+      setters: 'FunctionSetter' // (value: number, type: 'year' | 'month') => string | number
     }
   ],
   events: ['update:modelValue'],

package/src/element/card.ts

@@ -9,25 +9,40 @@ const Card: MaterialDescription = {
   props: [
     {
       name: 'header',
+      title: '卡片的标题',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'footer',
+      title: '卡片页脚',
       defaultValue: '',
       setters: 'InputSetter'
     },
     {
       name: 'bodyStyle',
+      title: 'body 的 CSS 样式',
       defaultValue: undefined,
       setters: 'JSONSetter'
     },
+    {
+      name: 'headerClass',
+      title: '卡片header 的自定义类名',
+      setters: 'StringSetter'
+    },
     {
       name: 'bodyClass',
+      title: '卡片body 的自定义类名',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'footerClass',
+      title: '卡片footer 的自定义类名',
       setters: 'StringSetter'
     },
     {
       name: 'shadow',
+      title: '卡片阴影显示时机',
       defaultValue: 'always',
       options: ['always', 'hover', 'never'],
       setters: 'SelectSetter'

package/src/element/carousel.ts

@@ -11,32 +11,38 @@ const Carousel: MaterialDescription[] = [
     props: [
       {
         name: 'height',
+        title: 'carousel 的高度',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'initialIndex',
+        title: '初始状态激活的幻灯片的索引，从 0 开始',
         defaultValue: 0,
         setters: 'NumberSetter'
       },
       {
         name: 'trigger',
+        title: '指示器的触发方式',
         defaultValue: 'hover',
         options: ['hover', 'click'],
         setters: 'SelectSetter'
       },
       {
         name: 'autoplay',
+        title: '是否自动切换',
         defaultValue: true,
         setters: 'BooleanSetter'
       },
       {
         name: 'interval',
+        title: '自动切换的时间间隔，单位为毫秒',
         defaultValue: 3000,
         setters: 'NumberSetter'
       },
       {
         name: 'indicatorPosition',
+        title: '指示器的位置',
         defaultValue: '',
         options: ['', 'outside', 'none'],
         label: '指示器',
@@ -44,39 +50,46 @@ const Carousel: MaterialDescription[] = [
       },
       {
         name: 'arrow',
+        title: '切换箭头的显示时机',
         defaultValue: 'hover',
         options: ['always', 'hover', 'never'],
         setters: 'SelectSetter'
       },
       {
         name: 'type',
+        title: 'carousel 的类型',
         defaultValue: '',
         options: ['', 'card'],
         setters: 'SelectSetter'
       },
       {
         name: 'cardScale',
+        title: '当 type 为 card时，二级卡的缩放大小',
         defaultValue: 0.83,
         setters: 'NumberSetter'
       },
       {
         name: 'loop',
+        title: '是否循环显示',
         defaultValue: true,
         setters: 'BooleanSetter'
       },
       {
         name: 'direction',
+        title: '展示的方向',
         defaultValue: 'horizontal',
         options: ['horizontal', 'vertical'],
         setters: 'SelectSetter'
       },
       {
         name: 'pauseOnHover',
+        title: '鼠标悬浮时暂停自动切换',
         defaultValue: true,
         setters: 'BooleanSetter'
       },
       {
         name: 'motionBlur',
+        title: '添加动态模糊以给走马灯注入活力和流畅性',
         defaultValue: false,
         setters: 'BooleanSetter'
       }
@@ -133,11 +146,13 @@ const Carousel: MaterialDescription[] = [
     props: [
       {
         name: 'name',
+        title: '幻灯片的名字',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'label',
+        title: '该幻灯片所对应指示器的文本',
         defaultValue: '',
         setters: 'InputSetter'
       }

package/src/element/cascader.ts

@@ -1,5 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
-import { mockTreeData } from '../shared';
+import { mockTreeData, size } from '../shared';
 const Cascader: MaterialDescription[] = [
   {
     name: 'ElCascader',
@@ -25,13 +25,7 @@ const Cascader: MaterialDescription[] = [
         title: '配置选项',
         setters: ['ObjectSetter', 'JSONSetter']
       },
-      {
-        name: 'size',
-        defaultValue: '',
-        title: '尺寸',
-        options: ['large', 'default', 'small'],
-        setters: 'SelectSetter'
-      },
+      size('size'),
       {
         name: 'placeholder',
         title: '输入框占位文本',

package/src/element/checkbox.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const Checkbox: MaterialDescription[] = [
   {
     name: 'ElCheckbox',
@@ -52,13 +53,7 @@ const Checkbox: MaterialDescription[] = [
         defaultValue: false,
         setters: 'BooleanSetter'
       },
-      {
-        name: 'size',
-        title: 'Checkbox 的尺寸',
-        defaultValue: 'default',
-        options: ['large', 'default', 'small'],
-        setters: 'SelectSetter'
-      },
+      size('size'),
       {
         name: 'name',
         defaultValue: '',
@@ -149,13 +144,7 @@ const Checkbox: MaterialDescription[] = [
         defaultValue: [],
         setters: 'JSONSetter'
       },
-      {
-        name: 'size',
-        title: '多选框组尺寸',
-        defaultValue: '',
-        options: ['large', 'default', 'small'],
-        setters: 'SelectSetter'
-      },
+      size('size'),
       {
         name: 'disabled',
         title: '是否禁用',

package/src/element/collapse.ts

@@ -21,7 +21,20 @@ const Collapse: MaterialDescription[] = [
         defaultValue: false,
         title: '是否手风琴模式',
         setters: 'BooleanSetter'
-      }
+      },
+      {
+        name: 'expandIconPosition',
+        title: '设置展开图标位置',
+        defaultValue: 'right',
+        options: ['left', 'right'],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'beforeCollapse',
+        title: '折叠状态更改之前的回调事件。 返回 false 或者返回 Promise 且被 reject 则停止切换',
+        defaultValue: '',
+        setters: 'FunctionSetter' // () => Promise<boolean> | boolean
+      },
     ],
     events: ['change'],
     slots: ['default'],
@@ -55,21 +68,25 @@ const Collapse: MaterialDescription[] = [
     props: [
       {
         name: 'name',
+        title: '唯一标志符',
         defaultValue: '',
         setters: ['InputSetter', 'NumberSetter']
       },
       {
         name: 'title',
+        title: '面板标题',
         defaultValue: '',
         setters: 'InputSetter'
       },
       {
         name: 'icon',
+        title: '折叠项目的图标',
         defaultValue: 'ArrowRight',
         setters: 'StringSetter'
       },
       {
         name: 'disabled',
+        title: '是否禁用',
         defaultValue: false,
         setters: 'BooleanSetter'
       }

package/src/element/colorPicker.ts

@@ -1,4 +1,5 @@
 import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
 const ColorPicker: MaterialDescription = {
   name: 'ElColorPicker',
   label: '取色器',
@@ -20,12 +21,7 @@ const ColorPicker: MaterialDescription = {
       defaultValue: false,
       setters: 'BooleanSetter'
     },
-    {
-      name: 'size',
-      defaultValue: '',
-      options: ['large', 'default', 'small'],
-      setters: 'SelectSetter'
-    },
+    size('size'),
     {
       name: 'showAlpha',
       title: '是否支持透明度选择',
@@ -84,7 +80,19 @@ const ColorPicker: MaterialDescription = {
       name: 'label',
       title: 'ColorPicker 的 aria-label(deprecated)',
       setters: 'StringSetter'
-    }
+    },
+    {
+      name: 'persistent',
+      title: '当颜色选择器未激活且 persistent 为 false 时，颜色面板将被销毁',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'appendTo',
+      title: '挂载到哪个 DOM 元素',
+      defaultValue: '',
+      setters: 'StringSetter',
+    },
   ],
   events: [
     {