@vtj/materials 0.8.44 → 0.8.45

package/src/antdv/table.ts

@@ -0,0 +1,392 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const components: MaterialDescription[] = [
+  {
+    name: 'ATable',
+    alias: 'Table',
+    label: '表格',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/table-cn',
+    props: [
+      {
+        name: 'bordered',
+        label: 'bordered',
+        title: '是否展示外边框和列边框',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'childrenColumnName',
+        label: 'childrenColumnName',
+        title: '指定树形结构的列名',
+        setters: 'StringSetter',
+        defaultValue: 'children'
+      },
+      {
+        name: 'columns',
+        label: 'columns',
+        title: '表格列的配置描述',
+        setters: 'ArraySetter' //?? 	array
+      },
+      {
+        name: 'components',
+        label: 'components',
+        title: '覆盖默认的 table 元素',
+        setters: 'ObjectSetter' //?? object
+      },
+      {
+        name: 'customHeaderRow',
+        label: 'customHeaderRow',
+        title: '设置头部行属性',
+        setters: 'FunctionSetter' //?? Function(columns, index)
+      },
+      {
+        name: 'customRow',
+        label: 'customRow',
+        title: '设置行属性',
+        setters: 'FunctionSetter' //?? Function(record, index)
+      },
+      {
+        name: 'dataSource',
+        label: 'dataSource',
+        title: '数据数组',
+        setters: 'ArraySetter' //?? 	object[]
+      },
+      {
+        name: 'defaultExpandAllRows',
+        label: 'defaultExpandAllRows',
+        title: '初始时，是否展开所有行',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'defaultExpandedRowKeys',
+        label: 'defaultExpandedRowKeys',
+        title: '默认展开的行',
+        setters: 'ArraySetter' //?? 	string[]
+      },
+      {
+        name: 'expandedRowKeys',
+        label: 'expandedRowKeys',
+        title: '展开的行，控制属性',
+        setters: 'ArraySetter' //?? string[]
+      },
+      {
+        name: 'expandedRowRender',
+        label: 'expandedRowRender',
+        title: '额外的展开行',
+        setters: 'FunctionSetter' //?? <= 	Function(record, index, indent, expanded):VNode | v-slot:expandedRowRender="{record, index, indent, expanded}"
+      },
+      {
+        name: 'expandFixed',
+        label: 'expandFixed',
+        title: '控制展开图标是否固定，可选 true left right',
+        setters: ['BooleanSetter', 'StringSetter'], //?? boolean | string
+        defaultValue: false
+      },
+      {
+        name: 'expandIcon',
+        label: 'expandIcon',
+        title: '自定义展开图标',
+        setters: 'FunctionSetter' //?? Function(props):VNode | v-slot:expandIcon="props"
+      },
+      {
+        name: 'expandRowByClick',
+        label: 'expandRowByClick',
+        title: '通过点击行来展开子行',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'footer',
+        label: 'footer',
+        title: '表格尾部',
+        setters: 'FunctionSetter' //?? Function(currentPageData)|v-slot:footer="currentPageData"
+      },
+      {
+        name: 'getPopupContainer',
+        label: 'getPopupContainer',
+        title: '设置表格内各类浮层的渲染节点，如筛选菜单',
+        setters: 'FunctionSetter'
+      },
+      {
+        name: 'indentSize',
+        label: 'indentSize',
+        title: '展示树形数据时，每层缩进的宽度，以 px 为单位',
+        setters: 'NumberSetter',
+        defaultValue: 15
+      },
+      {
+        name: 'loading',
+        label: 'loading',
+        title: '页面是否加载中',
+        setters: ['BooleanSetter', 'ObjectSetter'], //?? 	boolean|object
+        defaultValue: false
+      },
+      {
+        name: 'locale',
+        label: 'locale',
+        title: '默认文案设置，目前包括排序、过滤、空数据文案',
+        setters: 'ObjectSetter',
+        defaultValue: {
+          filterConfirm: '确定',
+          filterReset: '重置',
+          emptyText: '暂无数据'
+        }
+      },
+      {
+        name: 'pagination',
+        label: 'pagination',
+        title:
+          '分页器，参考配置项或 pagination文档，设为 false 时不展示和进行分页',
+        setters: ['ObjectSetter', 'BooleanSetter'] //?? 	object | false
+      },
+      {
+        name: 'rowClassName',
+        label: 'rowClassName',
+        title: '表格行的类名',
+        setters: 'FunctionSetter' //?? Function(record, index):string
+      },
+      {
+        name: 'rowExpandable',
+        label: 'rowExpandable',
+        title: '设置是否允许行展开',
+        setters: 'FunctionSetter' //?? (record) => boolean
+      },
+      {
+        name: 'rowKey',
+        label: 'rowKey',
+        title: '表格行 key 的取值，可以是字符串或一个函数',
+        setters: ['StringSetter', 'FunctionSetter'], //?? string|Function(record):string
+        defaultValue: 'key'
+      },
+      {
+        name: 'rowSelection',
+        label: 'rowSelection',
+        title: '列表项是否可选择',
+        setters: 'ObjectSetter',
+        defaultValue: null
+      },
+      {
+        name: 'scroll',
+        label: 'scroll',
+        title: '表格是否可滚动，也可以指定滚动区域的宽、高',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'showExpandColumn',
+        label: 'showExpandColumn',
+        title: '设置是否展示行展开列',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'showHeader',
+        label: 'showHeader',
+        title: '是否显示表头',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'showSorterTooltip',
+        label: 'showSorterTooltip',
+        title:
+          '表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性',
+        setters: ['BooleanSetter', 'ObjectSetter'], //?? boolean | Tooltip props
+        defaultValue: true
+      },
+      {
+        name: 'size',
+        label: 'size',
+        title: '表格大小',
+        setters: 'SelectSetter',
+        options: ['large', 'middle', 'small'],
+        defaultValue: 'large'
+      },
+      {
+        name: 'sortDirections',
+        label: 'sortDirections',
+        title: '支持的排序方式，取值为 ascend descend',
+        setters: 'ArraySetter',
+        defaultValue: ['ascend', 'descend']
+      },
+      {
+        name: 'sticky',
+        label: 'sticky',
+        title: '设置粘性头部和滚动条',
+        setters: ['BooleanSetter', 'ObjectSetter'] //?? 	boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}
+      },
+      {
+        name: 'tableLayout',
+        label: 'tableLayout',
+        title:
+          '表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局',
+        setters: 'SelectSetter', //?? 	- | 'auto' | 'fixed'
+        options: ['-', 'auto', 'fixed']
+      },
+      {
+        name: 'title',
+        label: 'title',
+        title: '表格标题',
+        setters: 'FunctionSetter'
+      },
+      {
+        name: 'transformCellText',
+        label: 'transformCellText',
+        title:
+          '数据渲染前可以再次改变，一般用于空数据的默认配置，可以通过 ConfigProvider 全局统一配置',
+        setters: 'FunctionSetter' //?? Function({ text, column, record, index }) => any，此处的 text 是经过其它定义单元格 api 处理后的数据，有可能是 VNode | string | number 类型
+      },
+      {
+        name: 'transformCellText',
+        label: 'transformCellText',
+        title:
+          '数据渲染前可以再次改变，一般用于空数据的默认配置，可以通过 ConfigProvider 全局统一配置',
+        setters: 'FunctionSetter' //??Function({ text, column, record, index }) => any，此处的 text 是经过其它定义单元格 api 处理后的数据，有可能是 VNode | string | number 类型
+      }
+    ],
+    events: [
+      'change',
+      'expand',
+      'expandedRowsChange',
+      'resizeColumn',
+      'update:expandedRowKeys'
+    ],
+    slots: [
+      { name: 'bodyCell', params: ['text', 'record', 'index', 'column'] },
+      { name: 'customFilterDropdown' },
+      { name: 'customFilterIcon', params: ['filtered', 'column'] },
+      { name: 'emptyText' },
+      {
+        name: 'expandedRowRender',
+        params: ['record', 'index', 'indent', 'expanded']
+      },
+      {
+        name: 'expandColumnTitle'
+      },
+      { name: 'expandIcon', params: ['props'] },
+      { name: 'expandIcon', params: ['currentPageData'] },
+      {
+        name: 'headerCell',
+        params: ['title', 'column']
+      },
+      {
+        name: 'summary'
+      },
+      { name: 'title', params: ['currentPageData'] }
+    ],
+    snippet: {
+      props: {
+        columns: [
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name'
+          },
+          {
+            title: 'Age',
+            dataIndex: 'age',
+            key: 'age'
+          },
+          {
+            title: 'Address',
+            dataIndex: 'address',
+            key: 'address'
+          },
+          {
+            title: 'Tags',
+            key: 'tags',
+            dataIndex: 'tags'
+          },
+          {
+            title: 'Action',
+            key: 'action'
+          }
+        ],
+        dataSource: [
+          {
+            key: '1',
+            name: 'John Brown',
+            age: 32,
+            address: 'New York No. 1 Lake Park',
+            tags: ['nice', 'developer']
+          },
+          {
+            key: '2',
+            name: 'Jim Green',
+            age: 42,
+            address: 'London No. 1 Lake Park',
+            tags: ['loser']
+          },
+          {
+            key: '3',
+            name: 'Joe Black',
+            age: 32,
+            address: 'Sidney No. 1 Lake Park',
+            tags: ['cool', 'teacher']
+          }
+        ]
+      }
+      // children: [
+      //   {
+      //     name: 'div',
+      //     slot: { name: 'headerCell', params: ['column'] },
+      //     children: [{ name: 'span', children: 'Name??' }]
+      //   },
+      //   {
+      //     name: 'div',
+      //     slot: { name: 'bodyCell', params: ['column', 'record'] },
+      //     children: [
+      //       { name: 'a', children: 'record.name' },
+      //       {
+      //         name: 'template',
+      //         children: [
+      //           {
+      //             name: 'span',
+      //             children: [
+      //               {
+      //                 name: 'ATag',
+      //                 props: { color: 'volcano' },
+      //                 children: 'tag.toUpperCase()'
+      //               }
+      //             ]
+      //           }
+      //         ]
+      //       },
+      //       {
+      //         name: 'template',
+      //         children: [
+      //           {
+      //             name: 'span',
+      //             children: [
+      //               {
+      //                 name: 'a',
+      //                 children: 'Invite 一 {{ record.name }}'
+      //               },
+      //               {
+      //                 name: 'ADivider',
+      //                 props: { type: 'vertical' }
+      //               },
+      //               {
+      //                 name: 'a',
+      //                 children: 'Delete'
+      //               },
+      //               {
+      //                 name: 'ADivider',
+      //                 props: { type: 'vertical' }
+      //               },
+      //               {
+      //                 name: 'a',
+      //                 children: 'More actions'
+      //               }
+      //             ]
+      //           }
+      //         ]
+      //       }
+      //     ]
+      //   }
+      // ]
+    }
+  }
+];
+export default components;

package/src/antdv/tabs.ts

@@ -0,0 +1,157 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const components: MaterialDescription[] = [
+  {
+    name: 'ATabs',
+    alias: 'Tabs',
+    childIncludes: ['ATabPane'],
+    label: '标签页',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/tabs-cn',
+    props: [
+      {
+        name: 'activeKey',
+        label: 'activeKey',
+        title: '当前激活 tab 面板的 key',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'animated',
+        label: 'animated',
+        title: '是否使用动画切换 Tabs，在 tabPosition="top" | "bottom" 时有效',
+        setters: ['BooleanSetter', 'ObjectSetter'], //?? 	boolean | {inkBar:boolean, tabPane:boolean}
+        defaultValue: true //?? true, 当 type="card" 时为 false
+      },
+      {
+        name: 'centered',
+        label: 'centered',
+        title: '标签居中展示',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'destroyInactiveTabPane',
+        label: 'destroyInactiveTabPane',
+        title: '被隐藏时是否销毁 DOM 结构',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'hideAdd',
+        label: 'hideAdd',
+        title: '是否隐藏加号图标，在 type="editable-card" 时有效',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'size',
+        label: 'size',
+        title: '大小，提供 large middle 和 small 三种大小',
+        setters: 'SelectSetter',
+        options: ['large', 'middle', 'small'],
+        defaultValue: 'middle'
+      },
+      {
+        name: 'tabBarGutter',
+        label: 'tabBarGutter',
+        title: 'tabs 之间的间隙',
+        setters: 'NumberSetter'
+        // defaultValue: 0 //?? 无
+      },
+      {
+        name: 'tabBarStyle',
+        label: 'tabBarStyle',
+        title: 'tab bar 的样式对象',
+        setters: 'ObjectSetter' //?? cssProperties
+      },
+      {
+        name: 'tabPosition',
+        label: 'tabPosition',
+        title: '页签位置，可选值有 top right bottom left',
+        setters: 'SelectSetter',
+        options: ['top', 'right', 'bottom', 'left'],
+        defaultValue: 'top'
+      },
+      {
+        name: 'type',
+        label: 'type',
+        title: '页签的基本样式，可选 line、card editable-card 类型',
+        setters: 'SelectSetter',
+        options: ['line', 'card', 'editable-card'],
+        defaultValue: 'line'
+      }
+    ],
+    events: ['change', 'edit', 'tabClick', 'tabScroll', 'update:activeKey'],
+    slots: ['addIcon', 'leftExtra', 'moreIcon', 'renderTabBar', 'rightExtra'],
+    snippet: {
+      props: {
+        activeKey: '1',
+        centered: true
+      },
+      children: [
+        {
+          name: 'ATabPane',
+          props: {
+            key: '1',
+            tab: 'Tab 1'
+          },
+          children: 'Content of Tab Pane 1'
+        },
+        {
+          name: 'ATabPane',
+          props: {
+            key: '2',
+            tab: 'Tab 2'
+          },
+          children: 'Content of Tab Pane 2'
+        },
+        {
+          name: 'ATabPane',
+          props: {
+            key: '3',
+            tab: 'Tab 3'
+          },
+          children: 'Content of Tab Pane 3'
+        }
+      ]
+    }
+  },
+  {
+    name: 'ATabPane',
+    alias: 'TabPane',
+    parent: 'Tabs',
+    label: '标签页签',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/tabs-cn',
+    props: [
+      {
+        name: 'forceRender',
+        label: 'forceRender',
+        title: '被隐藏时是否渲染 DOM 结构',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'key',
+        label: 'key',
+        title: '对应 activeKey',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'tab',
+        label: 'tab',
+        title: '选项卡头显示文字',
+        setters: 'StringSetter'
+      }
+    ],
+    slots: ['closeIcon', 'tab'],
+    snippet: {
+      props: {
+        key: '1',
+        tab: 'Tab 1'
+      },
+      children: 'Content of Tab Pane 1'
+    }
+  }
+];
+export default components;

package/src/antdv/tag.ts

@@ -0,0 +1,72 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const components: MaterialDescription[] = [
+  {
+    name: 'ATag',
+    alias: 'Tag',
+    label: '标签',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/tag-cn',
+    props: [
+      {
+        name: 'closable',
+        label: 'closable',
+        title: '标签是否可以关闭',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'color',
+        label: 'color',
+        title: '标签色',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'bordered',
+        label: 'bordered',
+        title: '是否有边框',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      }
+    ],
+    events: ['close'],
+    slots: ['closeIcon', 'icon'],
+    snippet: {
+      children: 'Tag'
+    }
+  },
+  {
+    name: 'ACheckableTag',
+    alias: 'CheckableTag',
+    parent: 'Tag',
+    label: '可选择标签',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/tag-cn',
+    props: [
+      {
+        name: 'checked',
+        label: 'checked',
+        title: '设置标签的选中状态',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      }
+    ],
+    events: ['change', 'update:checked'],
+    snippet: {
+      children: 'checkTag',
+      props: {
+        checked: true
+      },
+      directives: [
+        {
+          name: 'vFor',
+          value: {
+            type: 'JSExpression',
+            value: '4'
+          }
+        }
+      ]
+    }
+  }
+];
+export default components;