@vtj/materials 0.8.44 → 0.8.45

package/src/antdv/drawer.ts

@@ -0,0 +1,200 @@
+import type { MaterialDescription } from '@vtj/core';
+const components: MaterialDescription[] = [
+  {
+    name: 'ADrawer',
+    alias: 'Drawer',
+    label: '抽屉',
+    categoryId: 'feedback',
+    doc: 'https://www.antdv.com/components/drawer-cn',
+    props: [
+      {
+        name: 'autofocus',
+        label: 'autofocus',
+        title: '抽屉展开后是否将焦点切换至其 Dom 节点',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'bodyStyle',
+        label: 'bodyStyle',
+        title: '可用于设置 Drawer 内容部分的样式',
+        setters: 'ObjectSetter' //?? CSSProperties
+      },
+      {
+        name: 'class',
+        label: 'class',
+        title:
+          'Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'closable',
+        label: 'closable',
+        title: '是否显示左上角的关闭按钮',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'contentWrapperStyle',
+        label: 'contentWrapperStyle',
+        title: '可用于设置 Drawer 包裹内容部分的样式',
+        setters: 'ObjectSetter' //?? 	CSSProperties
+      },
+      {
+        name: 'destroyOnClose',
+        label: 'destroyOnClose',
+        title: '关闭时销毁 Drawer 里的子元素',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'footerStyle',
+        label: 'footerStyle',
+        title: '抽屉页脚部件的样式',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'forceRender',
+        label: 'forceRender',
+        title: '预渲染 Drawer 内元素',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'getContainer',
+        label: 'getContainer',
+        title:
+          '指定 Drawer 挂载的节点，并在容器内展现 | () => HTMLElement | Selectors',
+        setters: 'StringSetter', //?? 'body'
+        defaultValue: 'body'
+      },
+      {
+        name: 'headerStyle',
+        label: 'headerStyle',
+        title: '用于设置 Drawer 头部的样式',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'height',
+        label: 'height',
+        title: '高度, 在 placement 为 top 或 bottom 时使用',
+        setters: ['StringSetter', 'NumberSetter'],
+        defaultValue: 378
+      },
+      {
+        name: 'keyboard',
+        label: 'keyboard',
+        title: '是否支持键盘 esc 关闭',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'mask',
+        label: 'mask',
+        title: '是否展示遮罩',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'maskClosable',
+        label: 'maskClosable',
+        title: '点击蒙层是否允许关闭',
+        setters: 'BooleanSetter',
+        defaultValue: true
+      },
+      {
+        name: 'maskStyle',
+        label: 'maskStyle',
+        title: '遮罩样式',
+        setters: 'ObjectSetter', //?? CSSProperties
+        defaultValue: {}
+      },
+      {
+        name: 'placement',
+        label: 'placement',
+        title: '抽屉的方向',
+        setters: 'SelectSetter',
+        options: ['top', 'right', 'bottom', 'left'],
+        defaultValue: 'right'
+      },
+      {
+        name: 'push',
+        label: 'push',
+        title: '用于设置多层 Drawer 的推动行为',
+        setters: ['BooleanSetter', 'ObjectSetter'], //?? 	boolean | {distance: string | number}
+        defaultValue: { distance: 180 }
+      },
+      {
+        name: 'rootClassName',
+        label: 'rootClassName',
+        title: '对话框外层容器的类名',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'rootStyle',
+        label: 'rootStyle',
+        title:
+          '可用于设置 Drawer 最外层容器的样式，和 style 的区别是作用节点包括 mask',
+        setters: 'ObjectSetter' //?? CSSProperties
+      },
+      {
+        name: 'size',
+        label: 'size',
+        title: '预设抽屉宽度（或高度），default 378px 和 large 736px',
+        setters: 'SelectSetter',
+        options: ['default', 'large'],
+        defaultValue: 'default'
+      },
+      {
+        name: 'style',
+        label: 'style',
+        title: '设计 Drawer 容器样式，如果你只需要设置内容部分请使用 bodyStyle',
+        setters: 'ObjectSetter' //?? CSSProperties
+      },
+      {
+        name: 'title',
+        label: 'title',
+        title: '标题',
+        setters: 'StringSetter' //?? string | slot
+      },
+      {
+        name: 'open',
+        label: 'open',
+        title: 'Drawer 是否可见',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'width',
+        label: 'width',
+        title: '宽度',
+        setters: ['StringSetter', 'NumberSetter'],
+        defaultValue: 378
+      },
+      {
+        name: 'zIndex',
+        label: 'zIndex',
+        title: '设置 Drawer 的 z-index',
+        setters: 'NumberSetter',
+        defaultValue: 1000
+      }
+    ],
+    events: ['afterOpenChange', 'close', 'update:open'],
+    slots: ['closeIcon', 'extra', 'footer', 'title'],
+    snippet: {
+      props: {
+        open: true,
+        style: {
+          color: 'red'
+        },
+        title: 'Basic Drawer',
+        placement: 'right'
+      },
+      children: [
+        { name: 'p', children: 'Some contents...' },
+        { name: 'p', children: 'Some contents...' },
+        { name: 'p', children: 'Some contents...' }
+      ]
+    }
+  }
+];
+export default components;

package/src/antdv/dropdown.ts

@@ -0,0 +1,216 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const components: MaterialDescription[] = [
+  {
+    name: 'ADropdown',
+    alias: 'Dropdown',
+    label: '下拉菜单',
+    categoryId: 'nav',
+    doc: 'https://www.antdv.com/components/button-cn',
+    props: [
+      {
+        name: 'align',
+        label: 'align',
+        title: '该值将合并到 placement 的配置中',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'arrow',
+        label: 'arrow',
+        title: '下拉框箭头是否显示',
+        setters: ['BooleanSetter', 'ObjectSetter'],
+        defaultValue: false
+      },
+      {
+        name: 'destroyPopupOnHide',
+        label: 'destroyPopupOnHide',
+        title: '关闭后是否销毁 Dropdown',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'disabled',
+        label: 'disabled',
+        title: '菜单是否禁用',
+        defaultValue: false
+      },
+      {
+        name: 'getPopupContainer',
+        label: 'getPopupContainer',
+        title:
+          '菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位',
+        setters: 'FunctionSetter'
+      },
+      {
+        name: 'overlayClassName',
+        label: 'overlayClassName',
+        title: '下拉根元素的类名称',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'overlayStyle',
+        label: 'overlayStyle',
+        title: '下拉根元素的样式',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'placement',
+        label: 'placement',
+        title: '菜单弹出位置',
+        setters: 'SelectSetter',
+        options: [
+          'bottomLeft',
+          'bottom',
+          'bottomRight',
+          'topLeft',
+          'top',
+          'topRight'
+        ],
+        defaultValue: 'bottomLeft	'
+      },
+      {
+        name: 'trigger',
+        label: 'trigger',
+        title: '触发下拉的行为, 移动端不支持 hover',
+        setters: 'ArraySetter', // ?? Array<click|hover|contextmenu>
+        defaultValue: ['hover']
+      },
+      {
+        name: 'open',
+        label: 'open',
+        title: '菜单是否显示',
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['openChange', 'update:open'],
+    slots: ['overlay'],
+    snippet: {
+      name: 'ADropdownButton',
+      children: [
+        {
+          name: 'AButton',
+          children: [
+            {
+              name: 'component',
+              props: {
+                is: 'span'
+              },
+              children: '下拉菜单'
+            },
+            {
+              name: 'component',
+              props: {
+                is: 'span'
+              },
+              children: ' V'
+            }
+          ]
+        },
+        {
+          name: 'AMenu',
+          slot: 'overlay',
+          children: [
+            {
+              name: 'AMenuItem',
+              children: 'Action 1'
+            },
+            {
+              name: 'AMenuItem',
+              children: 'Action 2'
+            },
+            {
+              name: 'AMenuItem',
+              children: 'Action 3'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'ADropdownButton',
+    alias: 'Button',
+    parent: 'Dropdown',
+    label: '下拉菜单按钮',
+    categoryId: 'nav',
+    doc: 'https://www.antdv.com/components/button-cn',
+    props: [
+      {
+        name: 'disabled',
+        label: 'disabled',
+        title: '菜单是否禁用',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'loading',
+        label: 'loading',
+        title: '设置按钮载入状态',
+        setters: ['BooleanSetter', 'ObjectSetter'],
+        defaultValue: false
+      },
+      {
+        name: 'placement',
+        label: 'placement',
+        title: '菜单弹出位置',
+        setters: 'SelectSetter',
+        options: [
+          'bottomLeft',
+          'bottom',
+          'bottomRight',
+          'topLeft',
+          'top',
+          'topRight'
+        ],
+        defaultValue: 'bottomLeft'
+      },
+      {
+        name: 'size',
+        label: 'size',
+        title: '按钮大小，和 Button 一致',
+        setters: 'StringSetter',
+        defaultValue: 'default'
+      },
+      {
+        name: 'trigger',
+        label: 'trigger',
+        title: '触发下拉的行为',
+        setters: 'ArraySetter',
+        defaultValue: ['hover']
+      },
+      {
+        name: 'type',
+        label: 'type',
+        title: '按钮类型，和 Button 一致',
+        setters: 'StringSetter',
+        defaultValue: 'default'
+      },
+      {
+        name: 'open',
+        label: 'open',
+        title: '菜单是否显示',
+        setters: ['BooleanSetter']
+      }
+    ],
+    events: ['click', 'openChange', 'update:open'],
+    slots: ['icon', 'overlay'],
+    snippet: {
+      name: 'button',
+      children: [
+        { name: 'a', children: 'Dropdown' },
+        {
+          name: 'AMenu',
+          slot: 'overlay',
+          props: {
+            mode: 'vertical'
+          },
+          children: [
+            { name: 'AMenuItem', children: '1st menu item' },
+            { name: 'AMenuItem', children: '2nd menu item' },
+            { name: 'AMenuItem', children: '3rd menu item' }
+          ]
+        }
+      ]
+    }
+  }
+];
+export default components;

package/src/antdv/empty.ts

@@ -0,0 +1,34 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const components: MaterialDescription[] = [
+  {
+    name: 'AEmpty',
+    alias: 'Empty',
+    label: '空状态',
+    categoryId: 'data',
+    doc: 'https://www.antdv.com/components/empty-cn',
+    props: [
+      {
+        name: 'description',
+        label: 'description',
+        title: '自定义描述内容',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'image',
+        label: 'image',
+        title: '设置显示图片，为 string 时表示自定义图片地址',
+        setters: 'StringSetter',
+        defaultValue: false
+      },
+      {
+        name: 'imageStyle',
+        label: 'imageStyle',
+        title: '图片样式',
+        setters: 'ObjectSetter'
+      }
+    ],
+    slots: ['description', 'image']
+  }
+];
+export default components;

package/src/antdv/flex.ts

@@ -0,0 +1,190 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const components: MaterialDescription[] = [
+  {
+    name: 'AFlex',
+    alias: 'Flex',
+    label: '弹性布局',
+    categoryId: 'layout',
+    doc: 'https://www.antdv.com/components/flex-cn',
+    props: [
+      {
+        name: 'vertical',
+        label: 'vertical',
+        title: 'flex 主轴的方向是否垂直，使用 flex-direction: column',
+        setters: 'BooleanSetter',
+        defaultValue: false
+      },
+      {
+        name: 'wrap',
+        label: 'wrap',
+        title: '设置元素单行显示还是多行显示',
+        setters: 'SelectSetter',
+        options: [
+          'nowrap ',
+          'wrap',
+          'wrap-reverse',
+          'inherit',
+          'initial',
+          'revert',
+          'unset'
+        ],
+        defaultValue: 'nowrap'
+      },
+      {
+        name: 'justify	',
+        label: 'justify	',
+        title: '设置元素在主轴方向上的对齐方式',
+        setters: 'SelectSetter',
+        options: [
+          'start ',
+          'center',
+          'end',
+          'flex-start',
+          'flex-end',
+          'left',
+          'right',
+          'baseline',
+          'first baseline',
+          'last baseline',
+          'space-between',
+          'space-around',
+          'space-evenly',
+          'stretch',
+          'safe center',
+          'unsafe center',
+          'inherit',
+          'initial',
+          'unset'
+        ],
+        defaultValue: 'normal'
+      },
+      {
+        name: 'align',
+        label: 'align',
+        title: '设置元素在交叉轴方向上的对齐方式',
+        setters: 'SelectSetter',
+        options: [
+          /* 基本关键字 */
+          'normal',
+          'stretch',
+          /* 定位对齐 */
+          /* align-items 不能设置为 left 和 right */
+          'center',
+          'start ',
+          'end',
+          'flex-start',
+          'flex-end',
+          'self-start',
+          'self-end',
+          /* 基线对齐 */
+          'baseline',
+          'first baseline',
+          'last baseline' /* 溢出对齐（仅用于位置对齐） */,
+          'safe center',
+          'unsafe center',
+          /* 全局值 */
+          'inherit',
+          'initial',
+          'revert',
+          'revert-layer',
+          'unset'
+        ],
+        defaultValue: 'normal'
+      },
+      {
+        name: 'flex',
+        label: 'flex',
+        title: 'flex CSS 简写属性',
+        setters: ['SelectSetter', 'NumberSetter', 'StringSetter'],
+        options: [
+          /* 关键字值 */
+          'auto',
+          'initial',
+          'none',
+          /* 全局值 */
+          'inherit',
+          'initial',
+          'revert',
+          'revert-layer',
+          'unset'
+        ],
+        defaultValue: 'normal'
+      },
+      {
+        name: 'gap',
+        label: 'gap',
+        title: '设置网格之间的间隙',
+        setters: ['SelectSetter', 'NumberSetter', 'StringSetter'],
+        options: ['small', 'middle', 'large'],
+        defaultValue: 'normal'
+      }
+    ],
+    slots: ['component'],
+    snippet: {
+      props: {
+        vertical: false,
+        gap: 'middle',
+        style: {
+          width: '100%'
+        }
+      },
+      children: [
+        {
+          name: 'component',
+          props: {
+            is: 'div',
+            style: {
+              width: '25%',
+              height: '54px',
+              color: '#fff',
+              background: '#1677ff'
+            }
+          },
+          children: 'flex item111'
+        },
+        {
+          name: 'component',
+          props: {
+            is: 'div',
+            style: {
+              width: '25%',
+              height: '54px',
+              color: '#fff',
+              background: '#1677ffbf'
+            }
+          },
+          children: 'flex item222'
+        },
+        {
+          name: 'component',
+          props: {
+            is: 'div',
+            style: {
+              width: '25%',
+              height: '54px',
+              color: '#fff',
+              background: '#1677ff'
+            }
+          },
+          children: 'flex item333'
+        },
+        {
+          name: 'component',
+          props: {
+            is: 'div',
+            style: {
+              width: '25%',
+              height: '54px',
+              color: '#fff',
+              background: '#1677ffbf'
+            }
+          },
+          children: 'flex item444'
+        }
+      ]
+    }
+  }
+];
+
+export default components;