@vtj/materials 0.8.44 → 0.8.46

package/src/element/index.ts

@@ -0,0 +1,193 @@
+import type {
+  Material,
+  MaterialCategory,
+  MaterialDescription
+} from '@vtj/core';
+import { version } from '../version';
+import { setPackageName } from '../shared';
+
+// * base 基础组件
+import button from './button';
+import container from './container';
+import layout from './layout';
+import link from './link';
+import text from './text';
+import scrollbar from './scrollbar';
+import space from './space';
+
+// * form 表单组件
+import autodcomplete from './autodcomplete';
+import cascader from './cascader';
+import checkbox from './checkbox';
+import colorPicker from './colorPicker';
+import datePicker from './datePicker';
+import dateTime from './dateTime';
+import input from './input';
+import inputNumber from './inputNumber';
+import radio from './radio';
+import rate from './rate';
+import select from './select';
+import selectV2 from './selectV2';
+import slider from './slider';
+import Switch from './switch';
+import timePicker from './timePicker';
+import timeSelect from './timeSelect';
+import transfer from './transfer';
+import upload from './upload';
+
+// * data 数据展示
+import avatar from './avatar';
+import badge from './badge';
+import calendar from './calendar';
+import card from './card';
+import carousel from './carousel';
+import collapse from './collapse';
+import descriptions from './descriptions';
+import empty from './empty';
+import image from './image';
+import pagination from './pagination';
+import progress from './progress';
+import result from './result';
+import skeleton from './skeleton';
+import table from './table';
+import virtualizedTable from './virtualizedTable';
+import tag from './tag';
+import timeline from './timeline';
+import tour from './tour';
+import tree from './tree';
+import treeSelect from './treeSelect';
+import treeV2 from './treeV2';
+import statistic from './statistic';
+
+// * nav 导航
+import affix from './affix';
+import anchor from './anchor';
+import backtop from './backtop';
+import breadcrumb from './breadcrumb';
+import dropdown from './dropdown';
+import menu from './menu';
+import pageHeader from './pageHeader';
+import steps from './steps';
+import tabs from './tabs';
+
+// * Feedback 反馈组件
+import alert from './alert';
+import dialog from './dialog';
+import drawer from './drawer';
+import popconfirm from './popconfirm';
+import popover from './popover';
+import tooltip from './tooltip';
+
+// * other
+import divider from './divider';
+import watermark from './watermark';
+
+import configProvider from './configProvider';
+
+const name = 'element-plus';
+const components: MaterialDescription[] = [
+  affix,
+  alert,
+  anchor,
+  autodcomplete,
+  avatar,
+  backtop,
+  badge,
+  breadcrumb,
+  button,
+  calendar,
+  card,
+  carousel,
+  cascader,
+  checkbox,
+  collapse,
+  colorPicker,
+  configProvider,
+  container,
+  datePicker,
+  dateTime,
+  descriptions,
+  dialog,
+  divider,
+  drawer,
+  dropdown,
+  empty,
+  image,
+  input,
+  inputNumber,
+  layout,
+  link,
+  menu,
+  pageHeader,
+  pagination,
+  popconfirm,
+  popover,
+  progress,
+  radio,
+  rate,
+  result,
+  scrollbar,
+  select,
+  selectV2,
+  skeleton,
+  slider,
+  space,
+  statistic,
+  steps,
+  Switch,
+  table,
+  tabs,
+  tag,
+  text,
+  timeline,
+  timePicker,
+  timeSelect,
+  tooltip,
+  tour,
+  transfer,
+  tree,
+  treeSelect,
+  treeV2,
+  upload,
+  virtualizedTable,
+  watermark
+].flat();
+
+const categories: MaterialCategory[] = [
+  {
+    id: 'base',
+    category: '基础组件'
+  },
+  {
+    id: 'layout',
+    category: '排版布局'
+  },
+  {
+    id: 'form',
+    category: '表单组件'
+  },
+  {
+    id: 'data',
+    category: '数据展示'
+  },
+  {
+    id: 'nav',
+    category: '导航'
+  },
+  {
+    id: 'other',
+    category: '其他'
+  }
+];
+
+const material: Material = {
+  name,
+  version: version,
+  label: 'Element+',
+  library: 'ElementPlusMaterial',
+  order: 2,
+  categories,
+  components: setPackageName(components, name)
+};
+
+export default material;

package/src/element/input.ts

@@ -0,0 +1,184 @@
+import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
+
+const Input: MaterialDescription = {
+  name: 'ElInput',
+  label: '输入框',
+  categoryId: 'form',
+  doc: 'https://element-plus.org/zh-CN/component/input.html',
+  props: [
+    {
+      name: 'type',
+      defaultValue: 'text',
+      options: ['text', 'textarea'],
+      setters: ['SelectSetter', 'InputSetter']
+    },
+    {
+      name: 'modelValue',
+      defaultValue: '',
+      setters: ['InputSetter', 'NumberSetter']
+    },
+    {
+      name: 'maxlength',
+      defaultValue: '',
+      setters: ['InputSetter', 'NumberSetter']
+    },
+    {
+      name: 'minlength',
+      defaultValue: '',
+      setters: ['InputSetter', 'NumberSetter']
+    },
+    {
+      name: 'showWordLimit',
+      defaultValue: false,
+      title:
+        '是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效',
+      label: '字数统计',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'placeholder',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'clearable',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'formatter',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'parser',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'showPassword',
+      defaultValue: false,
+      title: '是否显示切换密码图标',
+      label: '密码图标',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    size('size'),
+    {
+      name: 'prefix-icon',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'suffix-icon',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'rows',
+      defaultValue: 2,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'autosize',
+      defaultValue: false,
+      setters: ['BooleanSetter', 'JSONStter']
+    },
+    {
+      name: 'autocomplete',
+      defaultValue: 'off',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'name',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'readonly',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'max',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'min',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'step',
+      defaultValue: '',
+      setters: ['InputSetter', 'NumberSetter']
+    },
+    {
+      name: 'resize',
+      defaultValue: '',
+      options: ['none', 'both', 'horizontal', 'vertical'],
+      setters: 'InputSetter'
+    },
+    {
+      name: 'autofocus',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'form',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'label',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'tabindex',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'validateEvent',
+      defaultValue: true,
+      title: '输入时是否触发表单的校验',
+      label: '表单校验',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'inputStyle',
+      defaultValue: {},
+      setters: ['JSONSetter']
+    }
+  ],
+  events: [
+    {
+      name: 'blur'
+    },
+    {
+      name: 'focus'
+    },
+    {
+      name: 'change'
+    },
+    {
+      name: 'input'
+    },
+    {
+      name: 'clear'
+    },
+    {
+      name: 'update:modelValue'
+    }
+  ],
+  slots: ['prefix', 'suffix', 'prepend', 'append']
+};
+
+export default Input;

package/src/element/inputNumber.ts

@@ -0,0 +1,114 @@
+import type { MaterialDescription } from '@vtj/core';
+const InputNumber: MaterialDescription = {
+  name: 'ElInputNumber',
+  label: '数字输入框',
+
+  categoryId: 'form',
+  doc: 'https://element-plus.org/zh-CN/component/input-number.html',
+  childIncludes: false,
+  package: 'element-plus',
+  props: [
+    {
+      name: 'modelValue',
+      defaultValue: '',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'min',
+      defaultValue: '',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'max',
+      defaultValue: '',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'step',
+      defaultValue: 1,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'stepStrictly',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'precision',
+      defaultValue: '',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'size',
+      defaultValue: 'default',
+      options: ['large', 'small'],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'readonly',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'controls',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'controlsPosition',
+      defaultValue: '',
+      title: '控制按钮位置',
+      label: '按钮位置',
+      options: ['', 'right'],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'name',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'label',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'placeholder',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'valueOnClear',
+      defaultValue: '',
+      options: ['min', 'max'],
+      setters: ['InputSetter', 'NumberSetter']
+    },
+    {
+      name: 'validateEvent',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  slots: ['decrease-icon', 'increase-icon'],
+  events: [
+    {
+      name: 'change'
+    },
+    {
+      name: 'blur'
+    },
+    {
+      name: 'focus'
+    },
+    {
+      name: 'update:modelValue'
+    }
+  ]
+};
+
+export default InputNumber;

package/src/element/layout.ts

@@ -0,0 +1,164 @@
+import type { MaterialDescription } from '@vtj/core';
+const components: MaterialDescription[] = [
+  {
+    name: 'ElRow',
+    label: '布局行',
+
+    categoryId: 'layout',
+    doc: 'https://element-plus.org/zh-CN/component/layout.html',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'gutter',
+        defaultValue: 0,
+        label: '栅格间隔',
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'justify',
+        defaultValue: 'start',
+        title: 'flex 布局下的水平排列方式',
+        options: [
+          'start',
+          'end',
+          'center',
+          'space-around',
+          'space-between',
+          'space-evenly'
+        ],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'align',
+        defaultValue: 'top',
+        title: 'flex 布局下的垂直排列方式',
+        options: ['top', 'middle', 'bottom'],
+        setters: 'SelectSetter'
+      },
+      {
+        name: 'tag',
+        defaultValue: 'div',
+        title: '自定义元素标签',
+        setters: 'InputSetter'
+      }
+    ],
+    slots: ['default'],
+    snippet: {
+      props: {
+        gutter: 10
+      },
+      children: [
+        {
+          name: 'ElCol',
+
+          props: {
+            span: 6
+          },
+          children: [
+            {
+              name: 'component',
+              props: {
+                is: 'div',
+                style: {
+                  height: '50px',
+                  background: '#ecf5ff'
+                }
+              }
+            }
+          ],
+          directives: [
+            {
+              name: 'vFor',
+              value: {
+                type: 'JSExpression',
+                value: '4'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'ElCol',
+    label: '布局列',
+
+    categoryId: 'layout',
+    package: 'element-plus',
+    parentIncludes: ['ElRow'],
+    props: [
+      {
+        name: 'span',
+        defaultValue: 24,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'offset',
+        defaultValue: 0,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'push',
+        defaultValue: 0,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'pull',
+        defaultValue: 0,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'xs',
+        defaultValue: undefined,
+        setters: ['JSONSetter', 'NumberSetter']
+      },
+      {
+        name: 'sm',
+        defaultValue: undefined,
+        setters: ['JSONSetter', 'NumberSetter']
+      },
+      {
+        name: 'md',
+        defaultValue: undefined,
+        setters: ['JSONSetter', 'NumberSetter']
+      },
+      {
+        name: 'lg',
+        defaultValue: undefined,
+        setters: ['JSONSetter', 'NumberSetter']
+      },
+      {
+        name: 'xl',
+        defaultValue: undefined,
+        setters: ['JSONSetter', 'NumberSetter']
+      },
+      {
+        name: 'tag',
+        defaultValue: 'div',
+        title: '自定义元素标签',
+        setters: 'InputSetter'
+      }
+    ],
+    slots: ['default'],
+    snippet: {
+      props: {
+        span: 6
+      },
+      children: [
+        {
+          name: 'component',
+          props: {
+            is: 'div',
+            style: {
+              height: '50px',
+              background: '#ecf5ff'
+            }
+          },
+          children: 'Col'
+        }
+      ]
+    }
+  }
+];
+
+export default components;

package/src/element/link.ts

@@ -0,0 +1,54 @@
+import type { MaterialDescription } from '@vtj/core';
+import { type } from '../shared';
+
+const link: MaterialDescription = {
+  name: 'ElLink',
+  label: '链接',
+  categoryId: 'base',
+  doc: 'https://element-plus.org/zh-CN/component/link.html',
+  props: [
+    type('type'),
+    {
+      name: 'underline',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'href',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'target',
+      label: 'target',
+      title: '同原生 target 属性',
+      setters: 'SelectSetter',
+      options: ['_blank', '_parent', '_self', '_top'],
+      defaultValue: '_self'
+    },
+    {
+      name: 'icon',
+      defaultValue: '',
+      setters: 'IconSetter'
+    }
+  ],
+  events: [],
+  slots: [
+    {
+      name: 'default'
+    },
+    {
+      name: 'icon'
+    }
+  ],
+  snippet: {
+    children: '链接文本'
+  }
+};
+
+export default link;