@vtj/materials 0.8.44 → 0.8.46

package/src/shared/mock.ts

@@ -0,0 +1,307 @@
+export function mockTreeData() {
+  return [
+    {
+      value: 'guide',
+      label: 'Guide',
+      children: [
+        {
+          value: 'disciplines',
+          label: 'Disciplines',
+          children: [
+            {
+              value: 'consistency',
+              label: 'Consistency'
+            },
+            {
+              value: 'feedback',
+              label: 'Feedback'
+            },
+            {
+              value: 'efficiency',
+              label: 'Efficiency'
+            },
+            {
+              value: 'controllability',
+              label: 'Controllability'
+            }
+          ]
+        },
+        {
+          value: 'navigation',
+          label: 'Navigation',
+          children: [
+            {
+              value: 'side nav',
+              label: 'Side Navigation'
+            },
+            {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 'component',
+      label: 'Component',
+      children: [
+        {
+          value: 'basic',
+          label: 'Basic',
+          children: [
+            {
+              value: 'layout',
+              label: 'Layout'
+            },
+            {
+              value: 'color',
+              label: 'Color'
+            },
+            {
+              value: 'typography',
+              label: 'Typography'
+            },
+            {
+              value: 'icon',
+              label: 'Icon'
+            },
+            {
+              value: 'button',
+              label: 'Button'
+            }
+          ]
+        },
+        {
+          value: 'form',
+          label: 'Form',
+          children: [
+            {
+              value: 'radio',
+              label: 'Radio'
+            },
+            {
+              value: 'checkbox',
+              label: 'Checkbox'
+            },
+            {
+              value: 'input',
+              label: 'Input'
+            },
+            {
+              value: 'input-number',
+              label: 'InputNumber'
+            },
+            {
+              value: 'select',
+              label: 'Select'
+            },
+            {
+              value: 'cascader',
+              label: 'Cascader'
+            },
+            {
+              value: 'switch',
+              label: 'Switch'
+            },
+            {
+              value: 'slider',
+              label: 'Slider'
+            },
+            {
+              value: 'time-picker',
+              label: 'TimePicker'
+            },
+            {
+              value: 'date-picker',
+              label: 'DatePicker'
+            },
+            {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            },
+            {
+              value: 'upload',
+              label: 'Upload'
+            },
+            {
+              value: 'rate',
+              label: 'Rate'
+            },
+            {
+              value: 'form',
+              label: 'Form'
+            }
+          ]
+        },
+        {
+          value: 'data',
+          label: 'Data',
+          children: [
+            {
+              value: 'table',
+              label: 'Table'
+            },
+            {
+              value: 'tag',
+              label: 'Tag'
+            },
+            {
+              value: 'progress',
+              label: 'Progress'
+            },
+            {
+              value: 'tree',
+              label: 'Tree'
+            },
+            {
+              value: 'pagination',
+              label: 'Pagination'
+            },
+            {
+              value: 'badge',
+              label: 'Badge'
+            }
+          ]
+        },
+        {
+          value: 'notice',
+          label: 'Notice',
+          children: [
+            {
+              value: 'alert',
+              label: 'Alert'
+            },
+            {
+              value: 'loading',
+              label: 'Loading'
+            },
+            {
+              value: 'message',
+              label: 'Message'
+            },
+            {
+              value: 'message-box',
+              label: 'MessageBox'
+            },
+            {
+              value: 'notification',
+              label: 'Notification'
+            }
+          ]
+        },
+        {
+          value: 'navigation',
+          label: 'Navigation',
+          children: [
+            {
+              value: 'menu',
+              label: 'Menu'
+            },
+            {
+              value: 'tabs',
+              label: 'Tabs'
+            },
+            {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            },
+            {
+              value: 'dropdown',
+              label: 'Dropdown'
+            },
+            {
+              value: 'steps',
+              label: 'Steps'
+            }
+          ]
+        },
+        {
+          value: 'others',
+          label: 'Others',
+          children: [
+            {
+              value: 'dialog',
+              label: 'Dialog'
+            },
+            {
+              value: 'tooltip',
+              label: 'Tooltip'
+            },
+            {
+              value: 'popover',
+              label: 'Popover'
+            },
+            {
+              value: 'card',
+              label: 'Card'
+            },
+            {
+              value: 'carousel',
+              label: 'Carousel'
+            },
+            {
+              value: 'collapse',
+              label: 'Collapse'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 'resource',
+      label: 'Resource',
+      children: [
+        {
+          value: 'axure',
+          label: 'Axure Components'
+        },
+        {
+          value: 'sketch',
+          label: 'Sketch Templates'
+        },
+        {
+          value: 'docs',
+          label: 'Design Documentation'
+        }
+      ]
+    }
+  ];
+}
+
+export function mockTableData() {
+  return [
+    {
+      date: '2016-05-03',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles'
+    },
+    {
+      date: '2016-05-02',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles'
+    },
+    {
+      date: '2016-05-04',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles'
+    },
+    {
+      date: '2016-05-01',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles'
+    }
+  ];
+}
+
+export function mockSuggestion() {
+  return [
+    { value: 'vue', link: 'https://github.com/vuejs/vue' },
+    { value: 'element', link: 'https://github.com/ElemeFE/element' },
+    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+    { value: 'babel', link: 'https://github.com/babel/babel' }
+  ];
+}

package/src/shared/props.ts

@@ -0,0 +1,19 @@
+import type { MaterialProp } from '@vtj/core';
+
+export function size(name: string = 'size'): MaterialProp {
+  return {
+    name,
+    defaultValue: 'default',
+    setters: 'SelectSetter',
+    options: ['default', 'large', 'small']
+  };
+}
+
+export function type(name: string = 'type'): MaterialProp {
+  return {
+    name,
+    defaultValue: 'default',
+    setters: 'SelectSetter',
+    options: ['default', 'primary', 'success', 'warning', 'danger', 'info']
+  };
+}

package/src/shared/style.ts

@@ -0,0 +1,31 @@
+const headerStyle = {
+  textAlign: 'center',
+  color: '#fff',
+  height: 64,
+  paddingInline: 50,
+  lineHeight: '64px',
+  backgroundColor: '#7dbcea'
+};
+
+const contentStyle = {
+  textAlign: 'center',
+  minHeight: 120,
+  lineHeight: '120px',
+  color: '#fff',
+  backgroundColor: '#108ee9'
+};
+
+const siderStyle = {
+  textAlign: 'center',
+  lineHeight: '120px',
+  color: '#fff',
+  backgroundColor: '#3ba0e9'
+};
+
+const footerStyle = {
+  textAlign: 'center',
+  color: '#fff',
+  backgroundColor: '#7dbcea'
+};
+
+export { headerStyle, contentStyle, siderStyle, footerStyle };

package/src/shared/utils.ts

@@ -0,0 +1,17 @@
+import type { MaterialDescription, MaterialProp } from '@vtj/core';
+
+export function setPackageName(
+  components: MaterialDescription[],
+  name: string
+) {
+  return components.map((n) => {
+    return {
+      ...n,
+      package: name
+    } as MaterialDescription;
+  });
+}
+
+export function omitPropItem(props: MaterialProp[] = [], names: string[] = []) {
+  return props.filter((n) => !names.includes(n.name));
+}

package/src/ui/action-bar.ts

@@ -0,0 +1,81 @@
+import type { MaterialDescription } from '@vtj/core';
+import { size, type } from '../shared';
+const desc: MaterialDescription = {
+  name: 'XActionBar',
+  label: '操作按钮集',
+  categoryId: 'base',
+  props: [
+    {
+      name: 'items',
+      title: '动作项',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'mode',
+      label: '模式',
+      setters: 'SelectSetter',
+      options: ['button', 'text', 'icon'],
+      defaultValue: 'button'
+    },
+    size(),
+    type(),
+    {
+      name: 'tooltip',
+      label: 'Tooltip配置',
+      setters: ['StringSetter', 'JsonSetter']
+    },
+    {
+      name: 'badge',
+      label: 'Badge配置',
+      setters: ['StringSetter', 'NumberSetter', 'JsonSetter']
+    },
+    {
+      name: 'dropdown',
+      label: 'Dropdown配置',
+      setters: 'JsonSetter'
+    },
+    {
+      name: 'button',
+      label: 'Button配置',
+      setters: 'JsonSetter',
+      title: 'mode为button时有效'
+    },
+    {
+      name: 'disabled',
+      label: '禁用',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'background',
+      label: '背景',
+      setters: 'SelectSetter',
+      options: ['always', 'hover', 'none']
+    },
+    {
+      name: 'circle',
+      label: '圆形',
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['click', 'command'],
+  snippet: {
+    props: {
+      items: [
+        {
+          label: '操作一',
+          value: 1
+        },
+        {
+          label: '操作二',
+          value: 2
+        },
+        {
+          label: '操作三',
+          value: 3
+        }
+      ]
+    }
+  }
+};
+
+export default desc;

package/src/ui/action.ts

@@ -0,0 +1,98 @@
+import type { MaterialDescription } from '@vtj/core';
+import { size, type } from '../shared';
+const desc: MaterialDescription = {
+  name: 'XAction',
+  label: '操作按钮',
+  categoryId: 'base',
+  props: [
+    {
+      name: 'name',
+      label: '名称标识',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'label',
+      label: '标题文本',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'value',
+      label: '动作值',
+      setters: 'StringSetter',
+      title: '用来传输数据'
+    },
+    {
+      name: 'icon',
+      label: '图标配置',
+      setters: 'IconSetter'
+    },
+    {
+      name: 'mode',
+      label: '模式',
+      setters: 'SelectSetter',
+      options: ['button', 'text', 'icon'],
+      defaultValue: 'button'
+    },
+    size(),
+    type(),
+    {
+      name: 'menus',
+      label: '菜单配置',
+      setters: 'JsonSetter'
+    },
+    {
+      name: 'tooltip',
+      label: 'Tooltip配置',
+      setters: ['StringSetter', 'JsonSetter']
+    },
+    {
+      name: 'badge',
+      label: 'Badge配置',
+      setters: ['StringSetter', 'NumberSetter', 'JsonSetter']
+    },
+    {
+      name: 'dropdown',
+      label: 'Dropdown配置',
+      setters: 'JsonSetter'
+    },
+    {
+      name: 'button',
+      label: 'Button配置',
+      setters: 'JsonSetter',
+      title: 'mode为button时有效'
+    },
+    {
+      name: 'disabled',
+      label: '禁用',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'background',
+      label: '背景',
+      setters: 'SelectSetter',
+      options: ['always', 'hover', 'none']
+    },
+    {
+      name: 'circle',
+      label: '圆形',
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['click', 'command'],
+  slots: [
+    {
+      name: 'item',
+      params: ['item', 'index']
+    },
+    {
+      name: 'default'
+    }
+  ],
+  snippet: {
+    props: {
+      label: '操作按钮'
+    }
+  }
+};
+
+export default desc;

package/src/ui/attachment.ts

@@ -0,0 +1,125 @@
+import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
+
+const desc: MaterialDescription = {
+  name: 'XAttachment',
+  label: '附件',
+  categoryId: 'data',
+  props: [
+    {
+      name: 'modelValue',
+      label: 'modelValue',
+      title: '列表显示的文件',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'selectValue',
+      label: 'selectValue',
+      title: '选中值，开启 selectable 有效',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'uploader',
+      label: 'uploader',
+      title: '文件上传方法',
+      setters: 'FunctionsSetter'
+    },
+    {
+      name: 'multiple',
+      label: 'multiple',
+      title: '支持多文件上传, 同时在selectable时控制多选',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'limit',
+      label: 'limit',
+      title: '允许上传文件的最大数量',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'accept',
+      label: 'accept',
+      title: ' 接受上传的文件类型, 如：image/png, image/jpeg, .pptx',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'disabled',
+      label: 'disabled',
+      title: '禁止更改文件，不能上传和删除',
+      setters: 'NumberSetter'
+    },
+    size(),
+    {
+      name: 'thumbnail',
+      label: 'thumbnail',
+      title: '缩略图生成方法',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'addable',
+      label: 'addable',
+      title: '可增加',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'removable',
+      label: 'removable',
+      title: '可删除',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'downloadable',
+      label: 'downloadable',
+      title: '可下载',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'previewable',
+      label: 'previewable',
+      title: '可预览',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'selectable',
+      label: 'selectable',
+      title: '可选择',
+      setters: 'BooleanSetter',
+      defaultValue: false
+    },
+    {
+      name: 'clickable',
+      label: 'clickable',
+      title: '可点击',
+      setters: 'BooleanSetter',
+      defaultValue: false
+    },
+    {
+      name: 'listType',
+      label: 'listType',
+      title: '列表类型',
+      setters: 'SelectSetter',
+      options: ['card', 'list'],
+      defaultValue: 'card'
+    }
+  ],
+  events: [
+    'click',
+    'preview',
+    'remove',
+    'download',
+    'select',
+    'change',
+    'update:modelValue',
+    'update:selectValue'
+  ],
+  slots: ['tip'],
+  snippet: {
+    props: {}
+  }
+};
+
+export default desc;