@vtj/materials 0.8.44 → 0.8.46

package/src/antdv/tour.ts

@@ -0,0 +1,192 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const components: MaterialDescription[] = [
+  {
+    name: 'ATour',
+    alias: 'Tour',
+    label: '漫游式引导',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/tour-cn',
+    props: [
+      {
+        name: 'arrow',
+        label: 'arrow',
+        title: '是否显示箭头，包含是否指向元素中心的配置',
+        setters: ['BooleanSetter', 'ObjectSetter'],
+        defaultValue: true
+      },
+      {
+        name: 'placement',
+        label: 'placement',
+        title: '引导卡片相对于目标元素的位置',
+        setters: 'SelectSetter',
+        options: [
+          'left',
+          'leftTop',
+          'leftBottom',
+          'right',
+          'rightTop',
+          'rightBottom',
+          'top',
+          'topLeft',
+          'topRight',
+          'bottom',
+          'bottomLeft',
+          'bottomRight'
+        ],
+        defaultValue: 'bottom	'
+      },
+      {
+        name: 'mask',
+        label: 'mask',
+        title: '是否启用蒙层，也可传入配置改变蒙层样式和填充色',
+        setters: ['BooleanSetter', 'ObjectSetter'],
+        defaultValue: true
+      },
+      {
+        name: 'type',
+        label: 'type',
+        title: '类型，影响底色与文字颜色',
+        setters: 'SelectSetter',
+        options: ['default', 'primary'],
+        defaultValue: 'default'
+      },
+      {
+        name: 'open',
+        label: 'open',
+        title: '打开引导',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'scrollIntoViewOptions',
+        label: 'scrollIntoViewOptions',
+        title:
+          '是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数',
+        setters: ['BooleanSetter', 'SelectSetter'], //?? boolean | ScrollIntoViewOptions
+        options: ['ScrollIntoViewOptions'],
+        defaultValue: true
+      },
+      {
+        name: 'zIndex',
+        label: 'zIndex',
+        title: 'Tour 的层级',
+        setters: 'NumberSetter',
+        defaultValue: 1001
+      },
+      {
+        name: 'steps',
+        label: 'steps',
+        title: 'Tour 的数据',
+        setters: 'ArraySetter'
+      }
+    ],
+    events: ['close', 'finish', 'change', 'update:current'],
+    slots: ['indicatorsRender'],
+    snippet: {
+      props: {
+        open: true,
+        current: 1,
+        steps: [
+          {
+            title: 'Center',
+            description: 'Displayed in the center of screen.',
+            target: null
+          },
+          {
+            title: 'Center',
+            description: 'On the right of target.',
+            target: null
+          },
+          {
+            title: 'Center',
+            description: 'On the top of target.',
+            target: null
+          }
+        ]
+      }
+    }
+  },
+  {
+    name: 'ATourSteps ',
+    alias: 'TourSteps',
+    label: '漫游式引导步',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/tour-cn',
+    props: [
+      {
+        name: 'target',
+        label: 'target',
+        title: '获取引导卡片指向的元素，为空时居中于屏幕',
+        setters: ['FunctionSetter', 'StringSetter']
+      },
+      {
+        name: 'arrow',
+        label: 'arrow',
+        title: '是否显示箭头，包含是否指向元素中心的配置',
+        setters: ['BooleanSetter', 'ObjectSetter'],
+        defaultValue: true
+      },
+      {
+        name: 'placement',
+        label: 'placement',
+        title: '引导卡片相对于目标元素的位置',
+        setters: 'SelectSetter',
+        options: [
+          'left',
+          'leftTop',
+          'leftBottom',
+          'right',
+          'rightTop',
+          'rightBottom',
+          'top',
+          'topLeft',
+          'topRight',
+          'bottom',
+          'bottomLeft',
+          'bottomRight',
+          'bottom'
+        ]
+      },
+      {
+        name: 'mask',
+        label: 'mask',
+        title:
+          '是否启用蒙层，也可传入配置改变蒙层样式和填充色，默认跟随 Tour 的 mask 属性',
+        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: 'prevButtonProps',
+        label: 'prevButtonProps',
+        title: '上一步按钮的属性',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'scrollIntoViewOptions',
+        label: 'scrollIntoViewOptions',
+        title:
+          '是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 scrollIntoViewOptions 属性',
+        setters: ['BooleanSetter', 'SelectSetter'], //?? boolean | ScrollIntoViewOptions
+        options: ['ScrollIntoViewOptions'],
+        defaultValue: true
+      }
+    ],
+    events: ['close'],
+    slots: ['cover', 'title', 'description']
+  }
+];
+export default components;

package/src/antdv/transfer.ts

@@ -0,0 +1,166 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const mockData = [];
+for (let i = 0; i < 20; i++) {
+  mockData.push({
+    key: i.toString(),
+    title: `content${i + 1}`,
+    description: `description of content${i + 1}`,
+    disabled: i % 3 < 1
+  });
+}
+
+const components: MaterialDescription[] = [
+  {
+    name: 'ATransfer',
+    alias: 'Transfer',
+    label: '穿梭框',
+    categoryId: 'input',
+    doc: 'https://www.antdv.com/components/transfer-cn',
+    props: [
+      {
+        name: 'dataSource',
+        label: 'dataSource',
+        title:
+          '数据源，其中的数据将会被渲染到左边一栏中，targetKeys 中指定的除外',
+        setters: 'ArraySetter',
+        defaultValue: []
+      },
+      {
+        name: 'disabled',
+        label: 'disabled',
+        title: '是否禁用',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'filterOption',
+        label: 'filterOption',
+        title:
+          '接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false',
+        setters: 'FunctionSetter'
+      },
+      {
+        name: 'footer',
+        label: 'footer',
+        title: '可以设置为一个 作用域插槽'
+      },
+      {
+        name: 'listStyle',
+        label: 'listStyle',
+        title: '两个穿梭框的自定义样式',
+        setters: 'ObjectSetter' //?? 	CSSProperties
+      },
+      {
+        name: 'locale',
+        label: 'locale',
+        title: '各种语言',
+        setters: 'ObjectSetter',
+        defaultValue: {
+          itemUnit: '项',
+          itemsUnit: '项',
+          notFoundContent: '列表为空',
+          searchPlaceholder: '请输入搜索内容'
+        }
+      },
+      {
+        name: 'oneWay',
+        label: 'oneWay',
+        title: '展示为单向样式',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'operations',
+        label: 'operations',
+        title: '操作文案集合，顺序从上至下',
+        setters: 'ArraySetter',
+        defaultValue: ['>', '<']
+      },
+      {
+        name: 'operationStyle',
+        label: 'operationStyle',
+        title: '操作栏的自定义样式',
+        setters: 'ObjectSetter' //?? 	CSSProperties
+      },
+      {
+        name: 'pagination',
+        label: 'pagination',
+        title: '使用分页样式，自定义渲染列表下无效',
+        setters: ['BooleanSetter', 'ObjectSetter'],
+        defaultValue: false
+      },
+      {
+        name: 'render',
+        label: 'render',
+        title:
+          '每行数据渲染函数，该函数的入参为 dataSource 中的项，返回值为 element。或者返回一个普通对象，其中 label 字段为 element，value 字段为 title',
+        setters: 'FunctionSetter'
+      },
+      {
+        name: 'selectAllLabels',
+        label: 'selectAllLabels',
+        title: '自定义顶部多选框标题的集合',
+        setters: 'FunctionSetter' //??	VueNode | ((info: { selectedCount: number; totalCount: number }) => VueNode);
+      },
+      {
+        name: 'selectedKeys',
+        label: 'selectedKeys',
+        title: '设置哪些项应该被选中',
+        setters: 'ArraySetter', //??	string[]
+        defaultValue: []
+      },
+      {
+        name: 'showSearch',
+        label: 'showSearch',
+        title: '是否显示搜索框',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'showSelectAll',
+        label: 'showSelectAll',
+        title: '是否展示全选勾选框',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'status',
+        label: 'status',
+        title: '设置校验状态',
+        setters: 'SelectSetter',
+        options: ['error', 'warning']
+      },
+      {
+        name: 'targetKeys',
+        label: 'targetKeys',
+        title: '显示在右侧框数据的 key 集合',
+        setters: 'ArraySetter',
+        defaultValue: []
+      },
+      {
+        name: 'titles',
+        label: 'titles',
+        title: '标题集合，顺序从左至右',
+        setters: 'ArraySetter',
+        defaultValue: ['', '']
+      }
+    ],
+    events: [
+      'change',
+      'scroll',
+      'search',
+      'selectChange',
+      'update:selectedKeys',
+      'update:targetKeys'
+    ],
+    slots: ['footer', 'render', 'selectAllLabels'],
+    snippet: {
+      props: {
+        dataSource: mockData,
+        titles: "['Source', 'Target']"
+      }
+    }
+  }
+];
+export default components;

package/src/antdv/tree.ts

@@ -0,0 +1,214 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const components: MaterialDescription[] = [
+  {
+    name: 'ATree',
+    alias: 'Tree',
+    label: '树形控件',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/tree-cn',
+    props: [
+      {
+        name: 'allowDrop',
+        label: 'allowDrop',
+        title: '是否允许拖拽时放置在该节点',
+        setters: 'FunctionSetter' //?? 	({ dropNode, dropPosition }) => boolean
+      },
+      {
+        name: 'autoExpandParent',
+        label: 'autoExpandParent',
+        title: '是否自动展开父节点',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'blockNode',
+        label: 'blockNode',
+        title: '是否节点占据一行',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'checkable',
+        label: 'checkable',
+        title: '节点前添加 Checkbox 复选框',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'checkedKeys',
+        label: 'checkedKeys',
+        title:
+          '（受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置checkable和checkStrictly，它是一个有checked和halfChecked属性的对象，并且父子节点的选中与否不再关联',
+        setters: ['ArraySetter', 'ObjectSetter'], //??  string[] | number[] | {checked: string[] | number[], halfChecked: string[] | number[]}
+        defaultValue: []
+      },
+      {
+        name: 'checkStrictly',
+        label: 'checkStrictly',
+        title: 'checkable 状态下节点选择完全受控（父子节点选中状态不再关联）',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'defaultExpandAll',
+        label: 'defaultExpandAll',
+        title:
+          '默认展开所有树节点, 如果是异步数据，需要在数据返回后再实例化，建议用 v-if="data.length"；当有 expandedKeys 时，defaultExpandAll 将失效',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'disabled',
+        label: 'disabled',
+        title: '将树禁用',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'draggable',
+        label: 'draggable',
+        title: '设置节点可拖拽',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'expandedKeys',
+        label: 'expandedKeys',
+        title: '（受控）展开指定的树节点',
+        setters: 'ArraySetter',
+        defaultValue: []
+      },
+      {
+        name: 'fieldNames',
+        label: 'fieldNames',
+        title:
+          '替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段',
+        setters: 'ObjectSetter',
+        defaultValue: { children: 'children', title: 'title', key: 'key' }
+      },
+      {
+        name: 'filterTreeNode',
+        label: 'filterTreeNode',
+        title: '按需筛选树节点（高亮），返回 true',
+        setters: 'FunctionSetter' //?? 	function(node)
+      },
+      {
+        name: 'height',
+        label: 'height',
+        title: '设置虚拟滚动容器高度，设置后内部节点不再支持横向滚动',
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'loadData',
+        label: 'loadData',
+        title: '异步加载数据',
+        setters: 'FunctionSetter' //?? 	function(node)
+      },
+      {
+        name: 'loadedKeys',
+        label: 'loadedKeys',
+        title: '（受控）已经加载的节点，需要配合 loadData 使用',
+        setters: 'ArraySetter',
+        defaultValue: []
+      },
+      {
+        name: 'multiple',
+        label: 'multiple',
+        title: '支持点选多个节点（节点本身）',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'selectable',
+        label: 'selectable',
+        title: '是否可选中',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'selectedKeys',
+        label: 'selectedKeys',
+        title: '（受控）设置选中的树节点',
+        setters: 'ArraySetter'
+      },
+      {
+        name: 'showIcon',
+        label: 'showIcon',
+        title:
+          '是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'showLine',
+        label: 'showLine',
+        title: '是否展示连接线',
+        setters: ['BooleanSetter', 'ObjectSetter'], //?? boolean | {showLeafIcon: boolean}
+        defaultValue: false
+      },
+      {
+        name: 'treeData',
+        label: 'treeData',
+        title:
+          'treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）',
+        setters: 'ArraySetter' //?? TreeNode[]
+      },
+      {
+        name: 'virtual',
+        label: 'virtual',
+        title: '设置 false 时关闭虚拟滚动',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      }
+    ],
+    events: [
+      'check',
+      'dragend',
+      'dragenter',
+      'dragleave',
+      'dragover',
+      'dragstart',
+      'drop',
+      'expand',
+      'load',
+      'rightClick',
+      'select',
+      'update:checkedKeys',
+      'update:expandedKeys',
+      'update:selectedKeys'
+    ],
+    slots: ['switcherIcon', 'title'],
+    snippet: {
+      props: {
+        expandedKeys: ['0-0-0', '0-0-1'],
+        selectedKeys: ['0-0-0', '0-0-1'],
+        checkedKeys: ['0-0-0', '0-0-1'],
+        checkable: true,
+        treeData: [
+          {
+            title: 'parent 1',
+            key: '0-0',
+            children: [
+              {
+                title: 'parent 1-0',
+                key: '0-0-0',
+                disabled: true,
+                children: [
+                  { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
+                  { title: 'leaf', key: '0-0-0-1' }
+                ]
+              },
+              {
+                title: 'parent 1-1',
+                key: '0-0-1',
+                children: [{ key: '0-0-1-0', title: 'sss' }]
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+];
+export default components;