@vtj/materials 0.8.44 → 0.8.46

package/src/antdv/card.ts

@@ -0,0 +1,175 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const components: MaterialDescription[] = [
+  {
+    name: 'ACard',
+    alias: 'Card',
+    label: '卡片',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/card-cn',
+    props: [
+      {
+        name: 'activeTabKey',
+        label: 'activeTabKey',
+        title: '当前激活页签的 key',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'bodyStyle',
+        label: 'bodyStyle',
+        title: '内容区域自定义样式',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'bordered',
+        label: 'bordered',
+        title: '是否有边框',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'defaultActiveTabKey',
+        label: 'defaultActiveTabKey',
+        title: '初始化选中页签的 key，如果没有设置 activeTabKey',
+        setters: 'StringSetter',
+        defaultValue: '第一个页签'
+      },
+      {
+        name: 'extra',
+        label: 'extra',
+        title: '卡片右上角的操作区域',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'headStyle',
+        label: 'headStyle',
+        title: '自定义标题区域样式',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'hoverable',
+        label: 'hoverable',
+        title: '鼠标移过时可浮起',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'loading',
+        label: 'loading',
+        title: '当卡片内容还在加载中时，可以用 loading 展示一个占位',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'size',
+        label: 'size',
+        title: 'card 的尺寸',
+        setters: 'SelectSetter',
+        options: ['default', 'small'],
+        defaultValue: 'default	'
+      },
+      {
+        name: 'tabList',
+        label: 'tabList',
+        title: '页签标题列表, 可以通过 customTab(v3.0) 插槽自定义 tab',
+        setters: 'ArraySetter'
+      },
+      {
+        name: 'title',
+        label: 'title',
+        title: '卡片标题',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'type',
+        label: 'type',
+        title: '卡片类型，可设置为 inner 或 不设置',
+        setters: 'StringSetter'
+      }
+    ],
+    events: ['tabChange'],
+    slots: [
+      'actions',
+      'cover',
+      'customTab',
+      'extra',
+      'tabBarExtraContent',
+      'title'
+    ],
+    snippet: {
+      props: {
+        title: 'Default size card',
+        style: { width: '300px' }
+      },
+      slot: 'extra',
+      children: [
+        {
+          name: 'a',
+          slot: { name: 'extra' },
+          children: 'more'
+        },
+        { name: 'component', props: { is: 'p' }, children: 'card content' },
+        { name: 'component', props: { is: 'p' }, children: 'card content' },
+        { name: 'component', props: { is: 'p' }, children: 'card content' }
+      ]
+    }
+  },
+  {
+    name: 'ACardGrid',
+    alias: 'Grid',
+    parent: 'Card',
+    label: '网格型内嵌卡片',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/card-cn',
+    snippet: {
+      props: {
+        style: { width: '25%', textAline: 'center' }
+      },
+      children: 'content',
+      directives: [
+        {
+          name: 'vFor',
+          value: {
+            type: 'JSExpression',
+            value: '8'
+          }
+        }
+      ]
+    }
+  },
+  {
+    name: 'ACardMeta',
+    alias: 'Meta',
+    parent: 'Card',
+    label: 'meta卡片',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/card-cn',
+    props: [
+      {
+        name: 'description',
+        label: 'description',
+        title: '描述内容',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'title',
+        label: 'title',
+        title: '标题内容',
+        setters: 'StringSetter'
+      }
+    ],
+    slots: ['avatar', 'description', 'title'],
+    snippet: {
+      props: { title: 'Europe Street beat' },
+      slot: 'description',
+      children: [
+        {
+          name: 'span',
+          slot: { name: 'description' },
+          children: 'www.instagram.com'
+        }
+      ]
+    }
+  }
+];
+export default components;

package/src/antdv/carousel.ts

@@ -0,0 +1,149 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const components: MaterialDescription[] = [
+  {
+    name: 'ACarousel',
+    alias: 'Carousel',
+    label: '走马灯',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/carousel-cn',
+    props: [
+      {
+        name: 'autoplay',
+        label: 'autoplay',
+        title: '是否自动切换',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'dotPosition',
+        label: 'dotPosition',
+        title: '面板指示点位置，可选 top bottom left right',
+        setters: 'SelectSetter',
+        options: ['top', 'bottom', 'left', 'right'],
+        defaultValue: 'bottom'
+      },
+      {
+        name: 'dots',
+        label: 'dots',
+        title: '是否显示面板指示点',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'dotsClass',
+        label: 'dotsClass',
+        title: '面板指示点类名',
+        setters: 'StringSetter',
+        defaultValue: 'slick-dots'
+      },
+      {
+        name: 'easing',
+        label: 'easing',
+        title: '动画效果',
+        setters: 'StringSetter',
+        defaultValue: 'linear'
+      },
+      {
+        name: 'effect',
+        label: 'effect',
+        title: '动画效果函数',
+        setters: 'SelectSetter',
+        options: ['scrollx', 'fade'],
+        defaultValue: 'scrollx'
+      },
+      {
+        name: 'afterChange',
+        label: 'afterChange',
+        title: '切换面板的回调',
+        setters: 'FunctionSetter' //?? function(current)
+      },
+      {
+        name: 'beforeChange',
+        label: 'beforeChange',
+        title: '切换面板的回调',
+        setters: 'FunctionSetter' //?? function(current)
+      }
+    ],
+    snippet: {
+      props: {
+        autoplay: true
+      },
+      children: [
+        {
+          name: 'div',
+          children: [
+            {
+              name: 'h1',
+              children: '1',
+              props: {
+                style: {
+                  backgroundColor: '#364d79',
+                  height: '200px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center'
+                }
+              }
+            }
+          ]
+        },
+        {
+          name: 'div',
+          children: [
+            {
+              name: 'h1',
+              children: '2',
+              props: {
+                style: {
+                  backgroundColor: '#364d79',
+                  height: '200px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center'
+                }
+              }
+            }
+          ]
+        },
+        {
+          name: 'div',
+          children: [
+            {
+              name: 'h1',
+              children: '3',
+              props: {
+                style: {
+                  backgroundColor: '#364d79',
+                  height: '200px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center'
+                }
+              }
+            }
+          ]
+        },
+        {
+          name: 'div',
+          children: [
+            {
+              name: 'h1',
+              children: '4',
+              props: {
+                style: {
+                  backgroundColor: '#364d79',
+                  height: '200px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center'
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+];
+export default components;

package/src/antdv/cascader.ts

@@ -0,0 +1,224 @@
+import type { MaterialDescription } from '@vtj/core';
+import { mockTreeData } from '../shared';
+const components: MaterialDescription[] = [
+  {
+    name: 'ACascader',
+    alias: 'Cascader',
+    label: '级联选择器',
+    categoryId: 'input',
+    doc: 'https://www.antdv.com/components/cascader-cn',
+    props: [
+      {
+        name: 'allowClear',
+        label: 'allowClear',
+        title: '是否支持清除',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'autofocus',
+        label: 'autofocus',
+        title: '自动获取焦点',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'bordered',
+        label: 'bordered',
+        title: '是否有边框',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'changeOnSelect',
+        label: 'changeOnSelect',
+        title:
+          '（单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'defaultValue',
+        label: 'defaultValue',
+        title: '默认的选中项',
+        setters: 'ArraySetter',
+        defaultValue: []
+      },
+      {
+        name: 'disabled',
+        label: 'disabled',
+        title: '禁用',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'displayRender',
+        label: 'displayRender',
+        title:
+          '选择后展示的渲染函数,可使用 #displayRender="{labels, selectedOptions}"',
+        setters: 'FunctionSetter' //?? ({labels, selectedOptions}) => VNode
+      },
+      {
+        name: 'popupClassName',
+        label: 'popupClassName',
+        title: '自定义浮层类名',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'dropdownStyle',
+        label: 'dropdownStyle',
+        title: '自定义浮层样式',
+        setters: 'ObjectSetter',
+        defaultValue: {}
+      },
+      {
+        name: 'expandTrigger',
+        label: 'expandTrigger',
+        title: '次级菜单的展开方式',
+        setters: 'SelectSetter',
+        options: ['click', 'hover'],
+        defaultValue: 'click'
+      },
+      {
+        name: 'fieldNames',
+        label: 'fieldNames',
+        title: '自定义 options 中 label value children 的字段',
+        setters: 'ObjectSetter',
+        defaultValue: { label: 'label', value: 'value', children: 'children' }
+      },
+      {
+        name: 'getPopupContainer',
+        label: 'getPopupContainer',
+        title:
+          '菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位',
+        setters: 'FunctionSetter'
+      },
+      {
+        name: 'loadData',
+        label: 'loadData',
+        title: '用于动态加载选项，无法与 showSearch 一起使用',
+        setters: 'FunctionSetter'
+      },
+      {
+        name: 'maxTagCount',
+        label: 'maxTagCount',
+        title: '最多显示多少个 tag，响应式模式会对性能产生损耗',
+        setters: ['NumberSetter', 'SelectSetter'], //??		number | responsive
+        options: ['responsive']
+      },
+      {
+        name: 'maxTagPlaceholder',
+        label: 'maxTagPlaceholder',
+        title: '隐藏 tag 时显示的内容',
+        setters: 'FunctionSetter'
+      },
+      {
+        name: 'multiple',
+        label: 'multiple',
+        title: '支持多选节点',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'notFoundContent',
+        label: 'notFoundContent',
+        title: '当下拉列表为空时显示的内容',
+        setters: 'StringSetter',
+        defaultValue: 'Not Found'
+      },
+      {
+        name: 'open',
+        label: 'open',
+        title: '控制浮层显隐',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'options',
+        label: 'options',
+        title: '可选项数据源',
+        setters: 'ArraySetter'
+      },
+      {
+        name: 'placeholder',
+        label: 'placeholder',
+        title: '输入框占位文本',
+        setters: 'StringSetter',
+        defaultValue: '请选择'
+      },
+      {
+        name: 'placement',
+        label: 'placement',
+        title: '浮层预设位置',
+        setters: 'SelectSetter',
+        options: ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'],
+        defaultValue: 'bottomLeft'
+      },
+      {
+        name: 'showCheckedStrategy',
+        label: 'showCheckedStrategy',
+        title:
+          '定义选中项回填的方式。Cascader.SHOW_CHILD: 只显示选中的子节点。Cascader.SHOW_PARENT: 只显示父节点（当父节点下所有子节点都选中时）',
+        setters: 'SelectSetter',
+        options: ['Cascader.SHOW_PARENT', 'Cascader.SHOW_PARENT'],
+        defaultValue: 'Cascader.SHOW_PARENT'
+      },
+      {
+        name: 'searchValue',
+        label: 'searchValue',
+        title: '设置搜索的值，需要与 showSearch 配合使用',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'showSearch',
+        label: 'showSearch',
+        title: '在选择框中显示搜索框',
+        setters: ['BooleanSetter', 'ObjectSetter'],
+        defaultValue: false
+      },
+      {
+        name: 'status',
+        label: 'status',
+        title: '设置校验状态',
+        setters: 'SelectSetter',
+        options: ['error', 'warning']
+      },
+      {
+        name: 'size',
+        label: 'size',
+        title: '输入框大小',
+        setters: 'SelectSetter',
+        options: ['larger', 'default', 'small'],
+        defaultValue: 'default'
+      },
+      {
+        name: 'suffixIcon',
+        label: 'suffixIcon',
+        title: '自定义的选择框后缀图标',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'value',
+        label: 'value',
+        title: '指定选中项',
+        setters: 'ArraySetter'
+      }
+    ],
+    events: ['change', 'dropdownVisibleChange', 'search', 'update:value'],
+    slots: [
+      'clearIcon',
+      'expandIcon',
+      'maxTagPlaceholder',
+      'notFoundContent',
+      'removeIcon',
+      'suffixIcon',
+      'tagRender'
+    ],
+    snippet: {
+      props: {
+        options: mockTreeData(),
+        props: {},
+        value: []
+      }
+    }
+  }
+];
+export default components;

package/src/antdv/checkbox.ts

@@ -0,0 +1,101 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const components: MaterialDescription[] = [
+  {
+    name: 'ACheckbox',
+    alias: 'Checkbox',
+    label: '多选框',
+    categoryId: 'input',
+    doc: 'https://www.antdv.com/components/checkbox-cn',
+    props: [
+      {
+        name: 'autofocus',
+        label: 'autofocus',
+        title: '自动获取焦点',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'checked',
+        label: 'checked',
+        title: '指定当前是否选中',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'disabled',
+        label: 'disabled',
+        title: '失效状态',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'indeterminate',
+        label: 'indeterminate',
+        title: '设置 indeterminate 状态，只负责样式控制',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'value',
+        label: 'value',
+        title: '与 CheckboxGroup 组合使用时的值',
+        setters: ['BooleanSetter', 'StringSetter', 'NumberSetter']
+      }
+    ],
+    events: ['change', 'update:checked'],
+    snippet: {
+      children: 'checkbox'
+    }
+  },
+  {
+    name: 'ACheckboxGroup',
+    alias: 'Group',
+    parent: 'Checkbox',
+    label: '多选框组',
+    categoryId: 'input',
+    doc: 'https://www.antdv.com/components/checkbox-cn',
+    props: [
+      {
+        name: 'disabled',
+        label: 'disabled',
+        title: '整组失效',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'name',
+        label: 'name',
+        title: 'CheckboxGroup 下所有 input[type="checkbox"] 的 name 属性',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'options',
+        label: 'options',
+        title:
+          '指定可选项，可以通过 slot="label" slot-scope="option" 定制label',
+        setters: 'ArraySetter',
+        defaultValue: []
+      },
+      {
+        name: 'value',
+        label: 'value',
+        title: '指定选中的选项',
+        setters: 'ArraySetter',
+        defaultValue: []
+      }
+    ],
+    events: ['change', 'update:value'],
+    snippet: {
+      props: {
+        options: [
+          { label: 'Apple', value: 'Apple' },
+          { label: 'Pear', value: 'Pear' },
+          { label: 'Orange', value: 'Orange' }
+        ]
+      }
+    }
+  }
+];
+
+export default components;