@vtj/materials 0.8.43 → 0.8.45

package/src/element/tour.ts

@@ -0,0 +1,269 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Tour: MaterialDescription = {
+  name: 'ElTour',
+  label: '漫游式引导',
+
+  doc: 'https://element-plus.org/zh-CN/component/tour.html',
+  categoryId: 'data',
+  package: 'element-plus',
+  props: [
+    {
+      name: 'showArrow',
+      label: 'showArrow',
+      title: '是否显示箭头',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'placement',
+      label: 'placement',
+      title: '引导卡片相对于目标元素的位置',
+      setters: 'SelectSetter',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end'
+      ],
+      defaultValue: 'bottom'
+    },
+    {
+      name: 'contentStyle',
+      label: 'contentStyle',
+      title: '为content自定义样式',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'mask',
+      label: 'mask',
+      title: '是否启用遮罩，通过自定义属性改变遮罩样式以及填充的颜色',
+      setters: ['BooleanSetter', 'ObjectSetter'],
+      defaultValue: true
+    },
+    {
+      name: 'type',
+      label: 'type',
+      title: '类型，影响底色与文字颜色',
+      setters: 'SelectSetter',
+      options: ['default', 'primary'],
+      defaultValue: 'default'
+    },
+    {
+      name: 'modelValue',
+      label: 'modelValue',
+      title: '打开引导',
+      setters: 'BooleanSetter',
+      defaultValue: false
+    },
+    {
+      name: 'current',
+      label: 'current',
+      title: '当前值',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'scroll-into-view-options',
+      label: 'scroll-into-view-options',
+      title: '是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数',
+      setters: ['BooleanSetter', 'ObjectSetter'],
+      defaultValue: { block: 'center' }
+    },
+    {
+      name: 'z-index',
+      label: 'z-index',
+      title: 'Tour 的层级',
+      setters: 'NumberSetter',
+      defaultValue: 2001
+    },
+    {
+      name: 'show-close',
+      label: 'show-close',
+      title: '是否显示关闭按钮',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'close-icon',
+      label: 'close-icon',
+      title: '自定义关闭图标',
+      setters: 'IconSetter',
+      defaultValue: ''
+    },
+    {
+      name: 'close-on-press-escape',
+      label: 'close-on-press-escape',
+      title: '是否可以通过按下 ESC 关闭引导',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'target-area-clickable',
+      label: 'target-area-clickable',
+      title: '启用蒙层时，target 元素区域是否可以点击。',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    }
+  ],
+  slots: [
+    { name: 'default' },
+    { name: 'indicators', params: ['current', 'total'] }
+  ],
+  events: ['close', 'finish', 'change', 'update:modelValue', 'update:current'],
+  snippet: {
+    props: {
+      modelValue: true
+    },
+    children: [
+      {
+        name: 'ElTourStep',
+        props: {
+          title: 'Center',
+          description: 'Displayed in the center of screen.'
+        }
+      },
+      {
+        name: 'ElTourStep',
+        props: {
+          title: 'Center',
+          description: 'Displayed in the center of screen.'
+        }
+      },
+      {
+        name: 'ElTourStep',
+        props: {
+          title: 'Center',
+          description: 'Displayed in the center of screen.'
+        }
+      }
+    ]
+  }
+};
+
+const TourStep: MaterialDescription = {
+  name: 'ElTourStep',
+  label: '漫游式引导步',
+  parentIncludes: ['ElTour'],
+  doc: 'https://element-plus.org/zh-CN/component/tour.html',
+  categoryId: 'data',
+  package: 'element-plus',
+  props: [
+    {
+      name: 'target',
+      label: 'target',
+      title: '获取引导卡片指向的元素， 为空时居中于屏幕。',
+      setters: ['StringSetter', 'FunctionSetter'] //??
+    },
+    {
+      name: 'showArrow',
+      label: 'showArrow',
+      title: '是否显示箭头',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'title',
+      label: 'title',
+      title: '标题',
+      setters: 'StringSetter',
+      defaultValue: '*'
+    },
+    {
+      name: 'description',
+      label: 'description',
+      title: '主要描述部分',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'placement',
+      label: 'placement',
+      title: '引导卡片相对于目标元素的位置',
+      setters: 'SelectSetter',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end'
+      ],
+      defaultValue: 'bottom'
+    },
+    {
+      name: 'contentStyle',
+      label: 'contentStyle',
+      title: '为content自定义样式',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'mask',
+      label: 'mask',
+      title: '是否启用蒙层，也可传入配置改变蒙层样式和填充色',
+      setters: ['BooleanSetter', 'ObjectSetter'],
+      defaultValue: true
+    },
+    {
+      name: 'type',
+      label: 'type',
+      title: '类型，影响底色与文字颜色',
+      setters: 'SelectSetter',
+      options: ['default', 'primary'],
+      defaultValue: 'default'
+    },
+    {
+      name: 'nextButtonProps',
+      label: 'nextButtonProps',
+      title: '“下一步”按钮的属性',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'prev-button-props',
+      label: 'prev-button-props',
+      title: '“上一步”按钮的属性',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'scrollIntoViewOptions',
+      label: 'scrollIntoViewOptions',
+      title: '是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数',
+      setters: ['BooleanSetter', 'ObjectSetter'] //??
+    },
+    {
+      name: 'showClose',
+      label: 'showClose',
+      title: '是否显示关闭按钮',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'closeIcon',
+      label: 'closeIcon',
+      title: '自定义关闭图标',
+      setters: ['IconSetter']
+    }
+  ],
+  slots: [{ name: 'default' }, { name: 'header' }],
+  events: ['close'],
+  snippet: {
+    props: {
+      title: 'Center',
+      description: 'Displayed in the center of screen.'
+    }
+  }
+};
+
+export default [Tour, TourStep];

package/src/element/transfer.ts

@@ -0,0 +1,113 @@
+import type { MaterialDescription } from '@vtj/core';
+const Transfer: MaterialDescription = {
+  name: 'ElTransfer',
+  label: '穿梭框',
+
+  categoryId: 'form',
+  doc: 'https://element-plus.org/zh-CN/component/transfer.html',
+  childIncludes: false,
+  package: 'element-plus',
+  props: [
+    {
+      name: 'modelValue',
+      defaultValue: '',
+      setters: 'ExpressionSetter'
+    },
+    {
+      name: 'data',
+      defaultValue: [],
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'filterable',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'filterPlaceholder',
+      defaultValue: 'Enter keyword',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'filterMethod',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'targetOrder',
+      defaultValue: 'original',
+      options: ['original', 'push', 'unshift'],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'titles',
+      defaultValue: ['List 1', 'List 2'],
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'buttonTexts',
+      defaultValue: [],
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'renderContent',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'format',
+      defaultValue: '',
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'props',
+      defaultValue: '',
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'leftDefaultChecked',
+      defaultValue: [],
+      title: '初始状态下左侧列表的已勾选项的 key 数组',
+      label: '左侧勾选',
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'rightDefaultChecked',
+      defaultValue: [],
+      title: '初始状态下右侧列表的已勾选项的 key 数组',
+      label: '右侧勾选',
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'validateEvent',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  slots: [
+    {
+      name: 'default'
+    },
+    {
+      name: 'left-footer'
+    },
+    {
+      name: 'right-footer'
+    }
+  ],
+  events: [
+    {
+      name: 'change'
+    },
+    {
+      name: 'left-check-change'
+    },
+    {
+      name: 'right-check-change'
+    },
+    {
+      name: 'update:modelValue'
+    }
+  ]
+};
+
+export default Transfer;

package/src/element/tree.ts

@@ -0,0 +1,182 @@
+import type { MaterialDescription } from '@vtj/core';
+import { mockTreeData } from '../shared';
+const Tree: MaterialDescription = {
+  name: 'ElTree',
+  label: '树形控件',
+  doc: 'https://element-plus.org/zh-CN/component/tree.html',
+
+  categoryId: 'data',
+  package: 'element-plus',
+  props: [
+    {
+      name: 'data',
+      defaultValue: '',
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'empty-text',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'node-key',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'props',
+      defaultValue: '',
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'render-after-expand',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'load',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'render-content',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'highlight-current',
+      defaultValue: false,
+      label: '高亮当前节点',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'default-expand-all',
+      defaultValue: false,
+      label: '展开所有节点',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'expand-on-click-node',
+      defaultValue: true,
+      title:
+        '是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。',
+      label: '点击展开',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'check-on-click-node',
+      defaultValue: false,
+      title:
+        '是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。',
+      label: '点击选中',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'auto-expand-parent',
+      defaultValue: true,
+      title: '展开子节点的时候是否自动展开父节点',
+      label: '自动展开',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'default-expanded-keys',
+      defaultValue: '',
+      title: '默认展开的节点的 key 的数组',
+      label: '默认展开',
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'show-checkbox',
+      defaultValue: false,
+      label: '显示checkbox',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'check-strictly',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'default-checked-keys',
+      defaultValue: '',
+      title: '默认勾选的节点的 key 的数组',
+      label: '默认勾选',
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'current-node-key',
+      defaultValue: '',
+      label: '当前节点key',
+      setters: ['InputSetter', 'NumberSetter']
+    },
+    {
+      name: 'filter-node-method',
+      defaultValue: '',
+      title:
+        'filter-node-method 对树节点进行筛选时执行的方法， 返回 false 则表示这个节点会被隐藏',
+      label: '筛选节点函数',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'accordion',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'indent',
+      defaultValue: 16,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'icon',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'lazy',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'draggable',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'allow-drag',
+      defaultValue: '',
+      title: '判断节点能否被拖拽 如果返回 false ，节点不能被拖动',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'allow-drop',
+      defaultValue: '',
+      title:
+        '拖拽时判定目标节点能否成为拖动目标位置。 如果返回 false ，拖动节点不能被拖放到目标节点。 type 参数有三种情况：prev、inner 和 next，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后',
+      setters: 'FunctionSetter'
+    }
+  ],
+  events: [
+    'node-click',
+    'node-contextmenu',
+    'check-change',
+    'check',
+    'current-change',
+    'node-expand',
+    'node-collapse',
+    'node-drag-start',
+    'node-drag-enter',
+    'node-drag-leave',
+    'node-drag-over',
+    'node-drop',
+    'node-drag-end'
+  ],
+  slots: [{ name: 'default', params: ['node', 'data'] }, { name: 'empty' }],
+  snippet: {
+    props: {
+      data: mockTreeData()
+    }
+  }
+};
+
+export default Tree;