@vtj/materials 0.8.44 → 0.8.46

package/src/element/autodcomplete.ts

@@ -0,0 +1,170 @@
+import type { MaterialDescription } from '@vtj/core';
+const Autodcomplete: MaterialDescription = {
+  name: 'ElAutocomplete',
+  label: '自动补全输入框',
+
+  categoryId: 'form',
+  doc: 'https://element-plus.org/zh-CN/component/autocomplete.html',
+  package: 'element-plus',
+  props: [
+    {
+      name: 'placeholder',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'clearable',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'valueKey',
+      defaultValue: 'value',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'modelValue',
+      defaultValue: '',
+      title: '选中项绑定值',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'debounce',
+      defaultValue: 300,
+      title: '获取输入建议的防抖延时',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'placement',
+      defaultValue: 'bottom-start',
+      title: '菜单弹出位置',
+      options: [
+        'top ',
+        'top-start',
+        'top-end',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end'
+      ],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'fetchSuggestions',
+      defaultValue: '',
+      title: '获取输入建议的方法',
+      label: '建议方法',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'popperClass',
+      defaultValue: '',
+      title: '下拉列表的类名',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'triggerOnFocus',
+      defaultValue: true,
+      title: '是否在输入框focus时显示建议列表',
+      label: 'focus触发',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'name',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'selectWhenUnmatched',
+      defaultValue: false,
+      title: '在输入没有任何匹配建议的情况下，按下回车是否触发select事件',
+      label: '回车触发',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'label',
+      defaultValue: '',
+      title: '标签文本',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'hideLoading',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'popperAppendToBody',
+      defaultValue: false,
+      title: '是否将下拉列表插入至body元素',
+      label: '下拉列表',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'teleported',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'highlightFirstItem',
+      defaultValue: false,
+      title: '是否默认突出显示远程搜索建议中的第一项',
+      label: '高亮第一项',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'fit-input-width',
+      defaultValue: false,
+      title: '下拉框是否与输入框同宽',
+      label: '适配宽度',
+      setters: 'BooleanSetter'
+    }
+  ],
+  slots: [
+    {
+      name: 'default',
+      params: ['item']
+    },
+    {
+      name: 'prefix'
+    },
+    {
+      name: 'suffix'
+    },
+    {
+      name: 'prepend'
+    },
+    {
+      name: 'append'
+    },
+    {
+      name: 'loading'
+    }
+  ],
+  events: [
+    {
+      name: 'update:modelValue'
+    },
+    {
+      name: 'select'
+    },
+    {
+      name: 'change'
+    }
+  ],
+  snippet: {
+    props: {
+      fetchSuggestions: {
+        type: 'JSFunction',
+        value:
+          "(function (queryString, cb) {\r\n\r\n    const list = [\r\n        { value: 'vue', link: 'https://github.com/vuejs/vue' },\r\n        { value: 'element', link: 'https://github.com/ElemeFE/element' },\r\n        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },\r\n        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },\r\n        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },\r\n        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },\r\n        { value: 'babel', link: 'https://github.com/babel/babel' }\r\n    ];\r\n\r\n    const results = list.filter(n => n.value.startsWith(queryString));\r\n\r\n    cb(results);\r\n\r\n})"
+      }
+    }
+  }
+};
+
+export default Autodcomplete;

package/src/element/avatar.ts

@@ -0,0 +1,59 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Avatar: MaterialDescription = {
+  name: 'ElAvatar',
+  label: '头像',
+
+  categoryId: 'data',
+  doc: 'https://element-plus.org/zh-CN/component/avatar.html',
+  package: 'element-plus',
+  props: [
+    {
+      name: 'icon',
+      defaultValue: '',
+      setters: 'IconSetter' //!
+    },
+    {
+      name: 'size',
+      setters: ['SelectSetter', 'NumberSetter'],
+      options: ['large', 'default', 'small'],
+      defaultValue: 'default'
+    },
+    {
+      name: 'shape',
+      defaultValue: 'circle',
+      options: ['circle', 'square'],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'src',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'srcSet',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'alt',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'fit',
+      defaultValue: 'cover',
+      options: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+      setters: 'SelectSetter'
+    }
+  ],
+  events: ['error'],
+  slots: ['default'],
+  snippet: {
+    props: {
+      src: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
+    }
+  }
+};
+
+export default Avatar;

package/src/element/backtop.ts

@@ -0,0 +1,58 @@
+import type { MaterialDescription } from '@vtj/core';
+const components: MaterialDescription = {
+  name: 'ElBacktop',
+  label: '回到顶部',
+
+  categoryId: 'nav',
+  doc: 'https://element-plus.org/zh-CN/component/backtop.html',
+  package: 'element-plus',
+  props: [
+    {
+      name: 'target',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'visibilityHeight',
+      defaultValue: 200,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'right',
+      defaultValue: 40,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'bottom',
+      defaultValue: 40,
+      setters: 'NumberSetter'
+    }
+  ],
+  events: [
+    {
+      name: 'click'
+    }
+  ],
+  slots: ['default'],
+  snippet: {
+    name: 'ElBacktop',
+    children: [
+      {
+        name: 'component',
+        props: {
+          is: 'div',
+          style: {
+            height: '100%',
+            textAlign: 'center',
+            width: '100px',
+            lineHeight: '40px',
+            color: '#1989fa'
+          }
+        },
+        children: 'UP'
+      }
+    ]
+  }
+};
+
+export default components;

package/src/element/badge.ts

@@ -0,0 +1,66 @@
+import type { MaterialDescription } from '@vtj/core';
+const Badge: MaterialDescription = {
+  name: 'ElBadge',
+  label: '徽章',
+
+  categoryId: 'data',
+  doc: 'https://element-plus.org/zh-CN/component/badge.html',
+  package: 'element-plus',
+  props: [
+    {
+      name: 'value',
+      defaultValue: '',
+      title: '显示值',
+      setters: ['InputSetter', 'NumberSetter']
+    },
+    {
+      name: 'max',
+      defaultValue: 99,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'isDot',
+      defaultValue: false,
+      title: '是否显示小圆点。',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'hidden',
+      defaultValue: false,
+      title: '是否隐藏 Badge。',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'type',
+      defaultValue: 'danger',
+      title: 'badge 类型。',
+      options: ['primary', 'success', 'warning', 'danger', 'info'],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'showZero',
+      title: '值为零时是否显示 Badge  ',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'color',
+      title: '背景色',
+      setters: 'ColorSetter'
+    }
+  ],
+  slots: ['default'],
+  snippet: {
+    props: {
+      value: 12
+    },
+    children: [
+      {
+        name: 'ElButton',
+        children: '评论'
+      }
+    ]
+  }
+};
+
+export default Badge;

package/src/element/breadcrumb.ts

@@ -0,0 +1,67 @@
+import type { MaterialDescription } from '@vtj/core';
+const Breadcrumb: MaterialDescription[] = [
+  {
+    name: 'ElBreadcrumb',
+    childIncludes: ['ElBreadcrumbItem'],
+    label: '面包屑',
+
+    categoryId: 'nav',
+    doc: 'https://element-plus.org/zh-CN/component/breadcrumb.html',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'separator',
+        defaultValue: '',
+        setters: 'InputSetter'
+      },
+      {
+        name: 'separatorIcon',
+        defaultValue: '',
+        setters: ['InputSetter']
+      }
+    ],
+    slots: ['default'],
+    snippet: {
+      children: [
+        {
+          name: 'ElBreadcrumbItem',
+          children: '主页'
+        },
+        {
+          name: 'ElBreadcrumbItem',
+          children: '列表'
+        },
+        {
+          name: 'ElBreadcrumbItem',
+          children: '详情'
+        }
+      ]
+    }
+  },
+  {
+    name: 'ElBreadcrumbItem',
+    label: '面包屑项',
+
+    categoryId: 'nav',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'to',
+        defaultValue: '',
+        setters: ['InputSetter', 'JSONSetter']
+      },
+      {
+        name: 'replace',
+        defaultValue: '',
+        setters: 'InputSetter'
+      }
+    ],
+    slots: ['default'],
+    snippet: {
+      name: 'ElBreadcrumbItem',
+      children: 'BreadcrumbItem'
+    }
+  }
+];
+
+export default Breadcrumb;

package/src/element/button.ts

@@ -0,0 +1,113 @@
+import type { MaterialDescription } from '@vtj/core';
+import { size, type } from '../shared';
+
+const button: MaterialDescription = {
+  name: 'ElButton',
+  label: '按钮',
+  categoryId: 'base',
+  doc: 'https://element-plus.org/zh-CN/component/button.html',
+  props: [
+    size('size'),
+    type('type'),
+    {
+      name: 'plain',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    { name: 'text', defaultValue: false, setters: 'BooleanSetter' },
+    { name: 'bg', defaultValue: false, setters: 'BooleanSetter' },
+    { name: 'link', defaultValue: false, setters: 'BooleanSetter' },
+    {
+      name: 'round',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'circle',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'loading',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    { name: 'loadingIcon', defaultValue: undefined, setters: 'IconSetter' }, //??
+    {
+      name: 'disabled',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'icon',
+      defaultValue: undefined,
+      setters: 'IconSetter'
+    },
+    {
+      name: 'autofocus',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'nativeType',
+      defaultValue: 'button',
+      setters: 'SelectSetter',
+      options: ['button ', 'submit', 'reset']
+    },
+    {
+      name: 'autoInsertSpace',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'color',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'dark',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'tag',
+      setters: 'StringSetter',
+      defaultValue: 'button'
+    }
+  ],
+  events: ['click'],
+  slots: ['default', 'loading', 'icon', 'loading', 'icon', 'tag'],
+  snippet: {
+    name: 'ElButton',
+    children: '按钮',
+    props: {
+      type: 'primary'
+    }
+  }
+};
+
+const buttonGroup: MaterialDescription = {
+  name: 'ElButtonGroup',
+  childIncludes: ['ElButton'],
+  label: '按钮组',
+  categoryId: 'base',
+  props: [size('size'), type('type')],
+  slots: ['default'],
+  snippet: {
+    name: 'ElButtonGroup',
+    children: [
+      {
+        name: 'ElButton',
+        children: 'Button1'
+      },
+      {
+        name: 'ElButton',
+        children: 'Button2'
+      },
+      {
+        name: 'ElButton',
+        children: 'Button3'
+      }
+    ]
+  }
+};
+
+export default [button, buttonGroup];

package/src/element/calendar.ts

@@ -0,0 +1,32 @@
+import type { MaterialDescription } from '@vtj/core';
+const Calendar: MaterialDescription = {
+  name: 'ElCalendar',
+  label: '日历',
+
+  categoryId: 'data',
+  doc: 'https://element-plus.org/zh-CN/component/calendar.html',
+  package: 'element-plus',
+  props: [
+    {
+      name: 'modelValue',
+      defaultValue: '',
+      setters: 'ExpressionSetter'
+    },
+    {
+      name: 'range',
+      defaultValue: '',
+      setters: 'JSONSetter'
+    }
+  ],
+  events: ['update:modelValue'],
+  slots: [
+    {
+      name: 'date-cell'
+    },
+    {
+      name: 'header'
+    }
+  ]
+};
+
+export default Calendar;

package/src/element/card.ts

@@ -0,0 +1,55 @@
+import type { MaterialDescription } from '@vtj/core';
+const Card: MaterialDescription = {
+  name: 'ElCard',
+  label: '卡片',
+
+  categoryId: 'data',
+  package: 'element-plus',
+  doc: 'https://element-plus.org/zh-CN/component/card.html',
+  props: [
+    {
+      name: 'header',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'footer',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'bodyStyle',
+      defaultValue: undefined,
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'bodyClass',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'shadow',
+      defaultValue: 'always',
+      options: ['always', 'hover', 'never'],
+      setters: 'SelectSetter'
+    }
+  ],
+  slots: [
+    {
+      name: 'default'
+    },
+    {
+      name: 'header'
+    },
+    {
+      name: 'footer'
+    }
+  ],
+  snippet: {
+    props: {
+      header: '标题'
+    },
+    children: '内容文本'
+  }
+};
+
+export default Card;