@vtj/materials 0.8.44 → 0.8.45

package/src/element/carousel.ts

@@ -0,0 +1,162 @@
+import type { MaterialDescription } from '@vtj/core';
+const Carousel: MaterialDescription[] = [
+  {
+    name: 'ElCarousel',
+    label: '走马灯',
+
+    categoryId: 'data',
+    doc: 'https://element-plus.org/zh-CN/component/carousel.html',
+    childIncludes: ['ElCarouselItem'],
+    package: 'element-plus',
+    props: [
+      {
+        name: 'height',
+        defaultValue: '',
+        setters: 'InputSetter'
+      },
+      {
+        name: 'initialIndex',
+        defaultValue: 0,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'trigger',
+        defaultValue: 'hover',
+        options: ['hover', 'click'],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'autoplay',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'interval',
+        defaultValue: 3000,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'indicatorPosition',
+        defaultValue: '',
+        options: ['outside', 'none'],
+        label: '指示器',
+        setters: 'InputSetter'
+      },
+      {
+        name: 'arrow',
+        defaultValue: 'hover',
+        options: ['always', 'hover', 'never'],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'type',
+        defaultValue: '',
+        options: ['', 'card'],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'loop',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'direction',
+        defaultValue: 'horizontal',
+        options: ['horizontal', 'vertical'],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'pauseOnHover',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'motionBlur',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['change'],
+    snippet: {
+      props: {
+        height: '300px',
+        style: {
+          width: '100%'
+        }
+      },
+      children: [
+        {
+          name: 'ElCarouselItem',
+          props: {
+            style: {
+              width: '100%'
+            }
+          },
+          children: [
+            {
+              name: 'component',
+              props: {
+                is: 'img',
+                style: {
+                  width: '100%',
+                  height: '300px'
+                },
+                src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+              }
+            }
+          ],
+          directives: [
+            {
+              name: 'vFor',
+              value: {
+                type: 'JSExpression',
+                value: '3'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'ElCarouselItem',
+    label: '走马灯子项',
+
+    categoryId: 'data',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'name',
+        defaultValue: '',
+        setters: 'InputSetter'
+      },
+      {
+        name: 'label',
+        defaultValue: '',
+        setters: 'InputSetter'
+      }
+    ],
+    snippet: {
+      props: {
+        style: {
+          width: '100%'
+        }
+      },
+      children: [
+        {
+          name: 'component',
+          props: {
+            is: 'img',
+            style: {
+              width: '100%',
+              height: '300px'
+            },
+            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+          }
+        }
+      ]
+    }
+  }
+];
+
+export default Carousel;

package/src/element/cascader.ts

@@ -0,0 +1,208 @@
+import type { MaterialDescription } from '@vtj/core';
+import { mockTreeData } from '../shared';
+const Cascader: MaterialDescription[] = [
+  {
+    name: 'ElCascader',
+    label: '级联选择器',
+
+    categoryId: 'form',
+    doc: 'https://element-plus.org/zh-CN/component/cascader.html',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'modelValue',
+        setters: 'JSONSetter'
+      },
+      {
+        name: 'options',
+        defaultValue: [],
+        setters: 'JSONSetter'
+      },
+      {
+        name: 'props',
+        defaultValue: '',
+        setters: 'JSONSetter'
+      },
+      {
+        name: 'size',
+        defaultValue: '',
+        title: '尺寸',
+        options: ['large', 'default', 'small'],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'placeholder',
+        defaultValue: 'Select',
+        setters: 'InputSetter'
+      },
+      {
+        name: 'disabled',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'clearable',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'showAllLevels',
+        defaultValue: true,
+        title: '输入框中是否显示选中值的完整路径',
+        label: '完整路径',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'collapseTags',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'collapseTagsTooltip',
+        defaultValue: false,
+        title:
+          '当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapseTags属性必须设定为 true',
+        label: '显示所有',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'separator',
+        defaultValue: '/',
+        setters: 'InputSetter'
+      },
+      {
+        name: 'filterable',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'filterMethod',
+        defaultValue: '',
+        setters: 'ExpressionSetter'
+      },
+      {
+        name: 'debounce',
+        defaultValue: 300,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'beforeFilter',
+        defaultValue: '',
+        setters: 'ExpressionSetter'
+      },
+      {
+        name: 'popperClass',
+        defaultValue: '',
+        setters: 'InputSetter'
+      },
+      {
+        name: 'teleported',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'popperAppendToBody',
+        defaultValue: true,
+        title:
+          '是否将弹出的内容直接插入到 body 元素。 在弹出内容的边框定位出现问题时，可将该属性设置为 false',
+        label: 'popperAppend',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'tagType',
+        defaultValue: 'info',
+        options: ['success', 'info', 'warning', 'danger'],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'validateEvent',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      { name: 'maxCollapseTags', setters: 'NumberSetter', defaultValue: 1 }
+    ],
+    events: [
+      {
+        name: 'change'
+      },
+      {
+        name: 'expand-change'
+      },
+      {
+        name: 'blur'
+      },
+      {
+        name: 'focus'
+      },
+      {
+        name: 'visible-change'
+      },
+      {
+        name: 'remove-tag'
+      },
+      {
+        name: 'update:modelValue'
+      }
+    ],
+    slots: [
+      {
+        name: 'default'
+      },
+      {
+        name: 'empty'
+      }
+    ],
+    snippet: {
+      props: {
+        options: mockTreeData(),
+        props: {},
+        modelValue: []
+      }
+    }
+  },
+  {
+    name: 'ElCascaderPanel',
+    label: '级联面板',
+
+    categoryId: 'form',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'modelValue',
+        defaultValue: '',
+        setters: 'JSONSetter'
+      },
+      {
+        name: 'options',
+        defaultValue: '',
+        setters: 'JSONSetter'
+      },
+      {
+        name: 'props',
+        defaultValue: '',
+        setters: 'JSONSetter'
+      }
+    ],
+    events: [
+      {
+        name: 'change'
+      },
+      {
+        name: 'expand-change'
+      },
+      {
+        name: 'close'
+      }
+    ],
+    slots: ['default'],
+    snippet: {
+      props: {
+        options: mockTreeData(),
+        props: {},
+        modelValue: []
+      }
+    }
+  }
+];
+
+export default Cascader;

package/src/element/checkbox.ts

@@ -0,0 +1,258 @@
+import type { MaterialDescription } from '@vtj/core';
+const Checkbox: MaterialDescription[] = [
+  {
+    name: 'ElCheckbox',
+    label: '多选框',
+
+    categoryId: 'form',
+    doc: 'https://element-plus.org/zh-CN/component/checkbox.html',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'modelValue',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter', 'BooleanSetter']
+      },
+      {
+        name: 'label',
+        defaultValue: '',
+        setters: ['InputSetter']
+      },
+      {
+        name: 'value',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter', 'BooleanSetter', 'JSONSetter']
+      },
+      {
+        name: 'trueValue',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter']
+      },
+      {
+        name: 'falseValue',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter']
+      },
+      {
+        name: 'trueLabel',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter']
+      },
+      {
+        name: 'falseLabel',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter']
+      },
+      {
+        name: 'disabled',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'border',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'size',
+        defaultValue: 'default',
+        options: ['large', 'default', 'small'],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'name',
+        defaultValue: '',
+        setters: 'InputSetter'
+      },
+      {
+        name: 'checked',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'indeterminate',
+        defaultValue: false,
+        title: '设置 indeterminate 状态，只负责样式控制',
+        label: '半选',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'validateEvent',
+        defaultValue: true,
+        title: '输入时是否触发表单的校验',
+        label: '表单校验',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'tabindex',
+        label: 'tabindex',
+        title: '输入框的 tabindex',
+        setters: ['StringSetter', 'NumberSetter']
+      },
+      {
+        name: 'id',
+        label: 'id',
+        title: 'input id',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'controls',
+        label: 'controls',
+        title: '与 aria-control一致, 当 indeterminate为 true时生效',
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: [
+      {
+        name: 'change'
+      },
+      {
+        name: 'update:modelValue'
+      }
+    ],
+    slots: ['default'],
+    snippet: {
+      props: {
+        label: '选项一',
+        value: 1
+      }
+    }
+  },
+  {
+    name: 'ElCheckboxGroup',
+    label: '多选框组',
+
+    childIncludes: ['ElCheckbox', 'ElCheckboxButton'],
+    categoryId: 'form',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'modelValue',
+        defaultValue: [],
+        setters: 'JSONSetter'
+      },
+      {
+        name: 'size',
+        defaultValue: '',
+        options: ['large', 'default', 'small'],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'disabled',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'min',
+        defaultValue: '',
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'max',
+        defaultValue: '',
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'label',
+        defaultValue: '',
+        setters: 'InputSetter'
+      },
+      {
+        name: 'value',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter', 'BooleanSetter', 'JSONSetter']
+      },
+      {
+        name: 'textColor',
+        defaultValue: '#ffffff',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'fill',
+        defaultValue: '#409EFF',
+        title: '当按钮为活跃状态时的边框和背景颜色',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'validateEvent',
+        defaultValue: true,
+        title: '输入时是否触发表单的校验',
+        label: '表单校验',
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['change', 'update:modelValue'],
+    slots: ['default'],
+    snippet: {
+      children: [
+        {
+          name: 'ElCheckbox',
+          props: {
+            label: '选项一',
+            value: '1'
+          }
+        },
+        {
+          name: 'ElCheckbox',
+          props: {
+            label: '选项二',
+            value: '2'
+          }
+        },
+        {
+          name: 'ElCheckbox',
+          props: {
+            label: '选项三',
+            value: '3'
+          }
+        }
+      ]
+    }
+  },
+  {
+    name: 'ElCheckboxButton',
+    label: '按钮样式的多选组合',
+
+    categoryId: 'form',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'label',
+        defaultValue: '',
+        setters: ['JSONSetter', 'InputSetter', 'NumberSetter', 'BooleanSetter']
+      },
+      {
+        name: 'trueLabel',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter']
+      },
+      {
+        name: 'falseLabel',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter']
+      },
+      {
+        name: 'disabled',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'name',
+        defaultValue: '',
+        setters: 'InputSetter'
+      },
+      {
+        name: 'checked',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    snippet: {
+      props: {
+        label: '按钮选项'
+      }
+    }
+  }
+];
+
+export default Checkbox;

package/src/element/collapse.ts

@@ -0,0 +1,90 @@
+import type { MaterialDescription } from '@vtj/core';
+const Collapse: MaterialDescription[] = [
+  {
+    name: 'ElCollapse',
+    label: '折叠面板',
+
+    categoryId: 'data',
+    doc: 'https://element-plus.org/zh-CN/component/collapse.html',
+    childIncludes: ['ElCollapseItem'],
+    package: 'element-plus',
+    props: [
+      {
+        name: 'modelValue',
+        defaultValue: '',
+        title:
+          '当前激活的面板(如果是手风琴模式，绑定值类型需要为string，否则为array)',
+        setters: ['InputSetter', 'JSONSetter']
+      },
+      {
+        name: 'accordion',
+        defaultValue: false,
+        title: '是否手风琴模式',
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['change'],
+    slots: ['default'],
+    snippet: {
+      children: [
+        {
+          name: 'ElCollapseItem',
+          children: '面板内容',
+          props: {
+            title: '面板标题'
+          },
+          directives: [
+            {
+              name: 'vFor',
+              value: {
+                type: 'JSExpression',
+                value: '3'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'ElCollapseItem',
+    label: '折叠面板子项',
+
+    categoryId: 'data',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'name',
+        defaultValue: '',
+        setters: ['InputSetter', 'NumberSetter']
+      },
+      {
+        name: 'title',
+        defaultValue: '',
+        setters: 'InputSetter'
+      },
+      {
+        name: 'disabled',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['change'],
+    slots: [
+      {
+        name: 'default'
+      },
+      {
+        name: 'title'
+      }
+    ],
+    snippet: {
+      children: '面板内容',
+      props: {
+        title: '面板标题'
+      }
+    }
+  }
+];
+
+export default Collapse;