@vtj/materials 0.8.43 → 0.8.45

package/src/ui/container.ts

@@ -0,0 +1,140 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'XContainer',
+  label: '容器',
+  categoryId: 'base',
+  props: [
+    {
+      name: 'tag',
+      label: '标签名',
+      setters: 'StringSetter',
+      defaultValue: 'div'
+    },
+    {
+      name: 'fit',
+      label: '高度自适应',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'width',
+      label: '宽度',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'height',
+      label: '高度',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'flex',
+      label: 'flex布局',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'inline',
+      label: 'inline-flex',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'direction',
+      label: '排版方向',
+      setters: 'SelectSetter',
+      options: ['row', 'row-reverse', 'column', 'column-reverse'],
+      defaultValue: 'row'
+    },
+    {
+      name: 'wrap',
+      label: '换行',
+      setters: 'SelectSetter',
+      options: ['nowrap', 'wrap', 'wrap-reverse'],
+      defaultValue: 'nowrap'
+    },
+    {
+      name: 'justify',
+      label: '主轴对齐',
+      setters: 'SelectSetter',
+      options: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around'
+      ],
+      defaultValue: 'flex-start'
+    },
+    {
+      name: 'align',
+      label: '交叉轴对齐',
+      setters: 'SelectSetter',
+      options: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+      defaultValue: 'flex-start'
+    },
+    {
+      name: 'alignContent',
+      label: '多轴线对齐',
+      title: '多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用',
+      setters: 'SelectSetter',
+      options: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'stretch'
+      ],
+      defaultValue: 'stretch'
+    },
+    {
+      name: 'grow',
+      label: '自动放大',
+      setters: 'BooleanSetter',
+      defaultValue: false
+    },
+    {
+      name: 'shrink',
+      label: '自动缩小',
+      setters: 'BooleanSetter',
+      defaultValue: false
+    },
+    {
+      name: 'alignSelf',
+      label: 'alignSelf',
+      title:
+        '单个项目有与其他项目不一样的对齐方式。可覆盖容器的align-items属性',
+      setters: 'SelectSetter',
+      options: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+      defaultValue: 'auto'
+    },
+    {
+      name: 'overflow',
+      label: 'overflow',
+      setters: 'SelectSetter',
+      options: ['auto', 'hidden', 'visible']
+    },
+    {
+      name: 'padding',
+      label: '内边距',
+      setters: 'BooleanSetter',
+      defaultValue: false
+    },
+    {
+      name: 'gap',
+      label: '子组件间隔',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'autoPointer',
+      label: 'autoPointer',
+      setters: 'BooleanSetter'
+    }
+  ],
+  snippet: {
+    props: {
+      padding: true
+    }
+  }
+};
+
+export default desc;

package/src/ui/data-item.ts

@@ -0,0 +1,102 @@
+import type { MaterialDescription } from '@vtj/core';
+import container from './container';
+import { omitPropItem } from '../shared';
+
+const desc: MaterialDescription = {
+  name: 'XDataItem',
+  label: '数据项',
+  categoryId: 'data',
+  props: [
+    {
+      name: 'direction',
+      title: '排版方向',
+      setters: 'SelectSetter',
+      options: ['row', 'column'],
+      defaultValue: 'column'
+    },
+    {
+      name: 'imageSrc',
+      title: '图片URL',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'imageWidth',
+      title: '图片宽度',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'imageHeight',
+      title: '图片高度',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'icon',
+      title: '图片高度',
+      setters: ['IconSetter']
+    },
+    {
+      name: 'title',
+      setters: ['StringSetter']
+    },
+    {
+      name: 'description',
+      setters: ['StringSetter']
+    },
+    {
+      name: 'actions',
+      title: '动作按钮 ActionBarItems',
+      setters: ['ArraySetter']
+    },
+    {
+      name: 'actionBarProps',
+      title: '动作条组件配置 ActionBarProps',
+      setters: ['ObjectSetter']
+    },
+    {
+      name: 'split',
+      setters: ['BooleanSetter']
+    },
+    ...omitPropItem(container.props, ['direction'])
+  ],
+  events: [
+    {
+      name: 'imageClick'
+    },
+    {
+      name: 'titleClick'
+    },
+    {
+      name: 'actionClick',
+      params: ['action']
+    },
+    {
+      name: 'actionCommand',
+      params: ['action', 'menu']
+    }
+  ],
+  slots: [
+    {
+      name: 'image'
+    },
+    {
+      name: 'title'
+    },
+    {
+      name: 'description'
+    },
+    {
+      name: 'actions'
+    },
+    {
+      name: 'default'
+    }
+  ],
+  snippet: {
+    props: {
+      title: '标题文本',
+      description: '描述文本示例内容'
+    }
+  }
+};
+
+export default desc;

package/src/ui/dialog-form.ts

@@ -0,0 +1,54 @@
+import type { MaterialDescription } from '@vtj/core';
+import dialog from './dialog';
+import { omitPropItem, size } from '../shared';
+
+const desc: MaterialDescription = {
+  name: 'XDialogForm',
+  label: '弹窗表单',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'modelValue',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    size(),
+    {
+      name: 'submit',
+      setters: ['StringSetter', 'BooleanSetter'],
+      defaultValue: '确定'
+    },
+    {
+      name: 'cancel',
+      setters: ['StringSetter', 'BooleanSetter'],
+      defaultValue: '取消'
+    },
+    {
+      name: 'model',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'rules',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'submitMethod',
+      title: '表单提交处理方法, return true 关闭弹窗',
+      setters: 'FunctionSetter'
+    },
+    ...omitPropItem(dialog.props, ['modelValue', 'size', 'submit', 'cancel'])
+  ],
+  events: [
+    { name: 'update:modelValue', params: ['modelValue'] },
+    { name: 'submit', params: ['model'] },
+    { name: 'close' }
+  ],
+  slots: ['default', 'extra', 'handle', 'footer'],
+  snippet: {
+    props: {
+      title: '弹窗表单'
+    }
+  }
+};
+
+export default desc;

package/src/ui/dialog.ts

@@ -0,0 +1,192 @@
+import type { MaterialDescription } from '@vtj/core';
+import panel from './panel';
+import { omitPropItem, size } from '../shared';
+
+const desc: MaterialDescription = {
+  name: 'XDialog',
+  label: '弹窗',
+  categoryId: 'layout',
+  props: [
+    {
+      name: 'modelValue',
+      title: '控制是否显示弹窗',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'title',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'subtitle',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'icon',
+      setters: 'IconSetter'
+    },
+    size(),
+    {
+      name: 'width',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'height',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'left',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'top',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'modal',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'draggable',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'resizable',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'closable',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'maximizable',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'minimizable',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'mode',
+      setters: 'SelectSetter',
+      options: ['normal', 'maximized', 'minimized'],
+      defaultValue: 'normal'
+    },
+    {
+      name: 'src',
+      title: '加载页码url',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'beforeClose',
+      title: '关闭弹窗回调函数，return true 阻止关闭',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'submit',
+      setters: ['Boolean', 'StringSetter']
+    },
+    {
+      name: 'cancel',
+      setters: ['Boolean', 'StringSetter']
+    },
+    {
+      name: 'bodyPadding',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'primary',
+      setters: 'BooleanSetter'
+    },
+    ...omitPropItem(panel.props, ['size'])
+  ],
+  events: [
+    {
+      name: 'update:modelValue',
+      params: ['modelValue']
+    },
+    {
+      name: 'open',
+      params: ['instance']
+    },
+    {
+      name: 'close'
+    },
+    {
+      name: 'destroy'
+    },
+    {
+      name: 'maximized'
+    },
+    {
+      name: 'minimized'
+    },
+    {
+      name: 'normal'
+    },
+    {
+      name: 'modeChange',
+      params: ['mode']
+    },
+    {
+      name: 'dragStart',
+      params: ['position']
+    },
+    {
+      name: 'dragging',
+      params: ['position']
+    },
+    {
+      name: 'dragEnd',
+      params: ['position']
+    },
+    {
+      name: 'resizeStart',
+      params: ['dir', 'mie']
+    },
+    {
+      name: 'resizeEnd',
+      params: ['dir', 'mie']
+    },
+    {
+      name: 'resizing',
+      params: ['dir', 'mie']
+    },
+    {
+      name: 'submit'
+    },
+    {
+      name: 'cancel'
+    }
+  ],
+  slots: [
+    {
+      name: 'title'
+    },
+    {
+      name: 'actions'
+    },
+    {
+      name: 'default'
+    },
+    {
+      name: 'footer'
+    },
+    {
+      name: 'extra'
+    },
+    {
+      name: 'handle'
+    }
+  ],
+  snippet: {
+    props: {
+      title: '弹窗标题'
+    }
+  }
+};
+
+export default desc;

package/src/ui/field.ts

@@ -0,0 +1,134 @@
+import type { MaterialDescription } from '@vtj/core';
+import elForm from '../element/form';
+import { omitPropItem, size } from '../shared';
+
+const desc: MaterialDescription = {
+  name: 'XField',
+  label: '字段',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'name',
+      title: '字段名称',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'label',
+      title: '字段标题文本',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'editor',
+      title: '编辑器组件',
+      setters: 'SelectSetter',
+      options: [
+        'none',
+        'text',
+        'textarea',
+        'select',
+        'checkbox',
+        'radio',
+        'number',
+        'date',
+        'time',
+        'datetime',
+        'switch',
+        'slider',
+        'rate',
+        'cascader',
+        'picker'
+      ]
+    },
+    {
+      name: 'props',
+      title: '编辑器组件参数',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'modelValue',
+      setters: 'StringSetter'
+    },
+    size(),
+    {
+      name: 'width',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'tooltipMessage',
+      title: '是否在tooltip显示校验信息',
+      setters: ['BooleanSetter', 'ObjectSetter']
+    },
+    {
+      name: 'tooltipPosition',
+      setters: ['SelectSetter', 'NumberSetter'],
+      options: ['inner', 'outer'],
+      defaultValue: 'outer'
+    },
+    {
+      name: 'placeholder',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'disabled',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'options',
+      setters: ['ArraySetter', 'FunctionSetter']
+    },
+    {
+      name: 'visible',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'cascader',
+      title: '级联字段，根据字段值变化刷新options',
+      setters: ['StringSetter', 'ArraySetter']
+    },
+    {
+      name: 'error',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'tip',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'inline',
+      title: '表单项内容采用inline布局',
+      setters: 'BooleanSetter'
+    },
+    ...omitPropItem(elForm[1].props, ['prop', 'size', 'label'])
+  ],
+  events: ['update:modelValue', 'change', 'focus', 'blur'],
+  slots: [
+    {
+      name: 'label'
+    },
+    {
+      name: 'error',
+      params: ['error']
+    },
+    {
+      name: 'editor',
+      params: ['editor']
+    },
+    {
+      name: 'tip'
+    },
+    {
+      name: 'default'
+    }
+  ],
+  snippet: {
+    props: {
+      label: '字段名称'
+    }
+  }
+};
+
+export default desc;

package/src/ui/form.ts

@@ -0,0 +1,78 @@
+import type { MaterialDescription } from '@vtj/core';
+import elForm from '../element/form';
+import { omitPropItem } from '../shared';
+
+const desc: MaterialDescription = {
+  name: 'XForm',
+  label: '表单',
+  categoryId: 'form',
+  props: [
+    {
+      name: 'model',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'inline',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'inlineColumns',
+      title: 'inline模式显示列数',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'footer',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'submitText',
+      setters: 'StringSetter',
+      defaultValue: '提交'
+    },
+    {
+      name: 'resetText',
+      setters: 'StringSetter',
+      defaultValue: '重置'
+    },
+    {
+      name: 'submitMethod',
+      title: '表单提交处理方法',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'tooltipMessage',
+      title: '是否在tooltip显示校验信息',
+      setters: ['BooleanSetter', 'ObjectSetter']
+    },
+    ...omitPropItem(elForm[1].props, ['model', 'inline'])
+  ],
+  events: [
+    {
+      name: 'change',
+      params: ['model']
+    },
+    {
+      name: 'submit',
+      params: ['model']
+    },
+    {
+      name: 'reset'
+    }
+  ],
+  slots: ['default', 'footer', 'action'],
+  snippet: {
+    props: {
+      labelWidth: '100px'
+    },
+    children: [
+      {
+        name: 'XField',
+        props: {
+          label: '字段名称'
+        }
+      }
+    ]
+  }
+};
+
+export default desc;