@vtj/materials 0.8.43 → 0.8.45

package/src/element/colorPicker.ts

@@ -0,0 +1,92 @@
+import type { MaterialDescription } from '@vtj/core';
+const ColorPicker: MaterialDescription = {
+  name: 'ElColorPicker',
+  label: '取色器',
+
+  categoryId: 'form',
+  childIncludes: false,
+  doc: 'https://element-plus.org/zh-CN/component/color-picker.html',
+  package: 'element-plus',
+  props: [
+    {
+      name: 'modelValue',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'disabled',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'size',
+      defaultValue: '',
+      options: ['large', 'default', 'small'],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'showAlpha',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'colorFormat',
+      defaultValue: '',
+      options: ['hsl', 'hsv', 'hex', 'rgb'],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'popperClass',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'predefine',
+      defaultValue: '',
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'validateEvent',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'tabindex',
+      label: 'tabindex',
+      title: 'ColorPicker 的 tabindex',
+      setters: ['StringSetter', 'NumberSetter'],
+      defaultValue: 0
+    },
+    {
+      name: 'label',
+      label: 'label',
+      title: 'ColorPicker 的 aria-label',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'id',
+      label: 'id',
+      title: 'ColorPicker 的 id',
+      setters: 'StringSetter'
+    }
+  ],
+  events: [
+    {
+      name: 'change'
+    },
+    {
+      name: 'active-change'
+    },
+    {
+      name: 'update:modelValue'
+    },
+    {
+      name: 'focus'
+    },
+    {
+      name: 'blur'
+    }
+  ]
+};
+
+export default ColorPicker;

package/src/element/configProvider.ts

@@ -0,0 +1,59 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const configProvider: MaterialDescription = {
+  name: 'ElConfigProvider',
+  label: '全局配置',
+  categoryId: 'other',
+  doc: 'https://element-plus.org/zh-CN/component/config-provider.html',
+  props: [
+    {
+      name: 'locale',
+      label: 'locale',
+      title: '翻译文本对象',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'size',
+      label: 'size',
+      title: '全局组件大小',
+      setters: 'SelectSetter',
+      options: ['large', 'default', 'small'],
+      defaultValue: 'default'
+    },
+    {
+      name: 'zIndex',
+      label: 'zIndex',
+      title: '全局初始化 zIndex 的值',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'namespace',
+      label: 'namespace',
+      title: '全局组件类名称前缀',
+      setters: 'StringSetter',
+      defaultValue: 'el'
+    },
+    {
+      name: 'button',
+      label: 'button',
+      title: '按钮相关配置',
+      setters: 'ObjectSetter',
+      defaultValue: { autoInsertSpace: false }
+    },
+    {
+      name: 'message',
+      label: 'message',
+      title: '消息相关配置',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'experimentalFeatures',
+      label: 'experimentalFeatures',
+      title: '将要添加的实验阶段的功能，所有功能都是默认设置为 false',
+      setters: 'ObjectSetter'
+    }
+  ],
+  slots: ['default']
+};
+
+export default configProvider;

package/src/element/container.ts

@@ -0,0 +1,85 @@
+import type { MaterialDescription } from '@vtj/core';
+const components: MaterialDescription[] = [
+  {
+    name: 'ElContainer',
+    label: '布局容器',
+
+    categoryId: 'layout',
+    doc: 'https://element-plus.org/zh-CN/component/container.html',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'direction',
+        defaultValue: '',
+        setters: 'SelectSetter',
+        options: ['horizontal', 'vertical']
+      }
+    ],
+    slots: ['default'],
+    snippet: {
+      props: {
+        style: {
+          width: '100%',
+          height: '100%'
+        }
+      }
+    }
+  },
+  {
+    name: 'ElHeader',
+    parentIncludes: ['ElContainer'],
+    label: '顶栏容器',
+
+    categoryId: 'layout',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'height',
+        defaultValue: '60px',
+        setters: ['InputSetter']
+      }
+    ]
+  },
+  {
+    name: 'ElAside',
+    parentIncludes: ['ElContainer'],
+    label: '侧边栏容器',
+
+    categoryId: 'layout',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'width',
+        defaultValue: '300px',
+        setters: ['InputSetter']
+      }
+    ],
+    slots: ['default']
+  },
+  {
+    name: 'ElMain',
+    parentIncludes: ['ElContainer'],
+    label: '主要区域容器',
+
+    categoryId: 'layout',
+    package: 'element-plus'
+  },
+  {
+    name: 'ElFooter',
+    parentIncludes: ['ElContainer'],
+    label: '底栏容器',
+
+    categoryId: 'layout',
+    package: 'element-plus',
+    props: [
+      {
+        name: 'height',
+        defaultValue: '60px',
+        setters: ['InputSetter']
+      }
+    ],
+    slots: ['default']
+  }
+];
+
+export default components;

package/src/element/datePicker.ts

@@ -0,0 +1,211 @@
+import type { MaterialDescription } from '@vtj/core';
+const DatePicker: MaterialDescription = {
+  name: 'ElDatePicker',
+  label: '日期选择器',
+
+  categoryId: 'form',
+  doc: 'https://element-plus.org/zh-CN/component/date-picker.html',
+  package: 'element-plus',
+  props: [
+    {
+      name: 'modelValue',
+      defaultValue: '',
+      setters: 'ExpressionSetter'
+    },
+    {
+      name: 'readonly',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'size',
+      defaultValue: 'default',
+      options: ['large', 'default', 'small'],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'editable',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'clearable',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'placeholder',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'startPlaceholder',
+      defaultValue: '',
+      title: '范围选择时开始日期的占位内容',
+      label: '开始日期',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'endPlaceholder',
+      defaultValue: '',
+      title: '范围选择时结束日期的占位内容',
+      label: '结束日期',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'type',
+      defaultValue: 'date',
+      title: '显示类型',
+      options: [
+        'year',
+        'month',
+        'date',
+        'dates',
+        'datetime',
+        'week',
+        'datetimerange',
+        'daterange',
+        'monthrange'
+      ],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'format',
+      defaultValue: 'YYYY-MM-DD',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'popperClass',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'rangeSeparator',
+      defaultValue: '-',
+      title: '选择范围时的分隔符',
+      label: '分隔符',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'defaultValue',
+      defaultValue: '',
+      setters: 'ExpressionSetter'
+    },
+    {
+      name: 'defaultTime',
+      defaultValue: '',
+      setters: 'ExpressionSetter'
+    },
+    {
+      name: 'valueFormat',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'dateFormat',
+      defaultValue: '',
+      setters: 'InputSetter',
+      title: '时间选择器下拉列表中显示的日期格式'
+    },
+    {
+      name: 'timeFormat',
+      defaultValue: '',
+      setters: 'InputSetter',
+      title: '时间选择器下拉列表中显示的时间格式'
+    },
+    {
+      name: 'id',
+      defaultValue: '',
+      setters: ['InputSetter']
+    },
+    {
+      name: 'name',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'unlinkPanels',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'prefixIcon',
+      defaultValue: 'Date',
+      title: '自定义前缀图标',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'clearIcon',
+      defaultValue: 'CircleClose',
+      title: '自定义清除图标',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'validateEvent',
+      defaultValue: true,
+      title: '输入时是否触发表单的校验',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabledDate',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'shortcuts',
+      defaultValue: '',
+      title: '设置快捷选项，需要传入数组对象',
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'cellClassName',
+      defaultValue: '',
+      title: '设置自定义类名',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'teleported',
+      defaultValue: true,
+      title: '设置自定义类名',
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    {
+      name: 'change'
+    },
+    {
+      name: 'blur'
+    },
+    {
+      name: 'focus'
+    },
+    {
+      name: 'calendar-change'
+    },
+    {
+      name: 'panel-change'
+    },
+    {
+      name: 'visible-change'
+    },
+    {
+      name: 'update:modelValue'
+    }
+  ],
+  slots: [
+    {
+      name: 'default'
+    },
+    {
+      name: 'range-separator'
+    }
+  ]
+};
+
+export default DatePicker;

package/src/element/dateTime.ts

@@ -0,0 +1,217 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const dateTime: MaterialDescription = {
+  name: 'ElDateTimePicker',
+  label: '日期时间选择器',
+  alias: 'ElDatePicker',
+  categoryId: 'form',
+  doc: 'https://element-plus.org/zh-CN/component/datetime-picker.html',
+  package: 'element-plus',
+  props: [
+    {
+      name: 'modelValue',
+      defaultValue: '',
+      setters: 'ExpressionSetter'
+    },
+    {
+      name: 'readonly',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'editable',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'clearable',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'size',
+      defaultValue: 'default',
+      options: ['large', 'default', 'small'],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'placeholder',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'startPlaceholder',
+      defaultValue: '',
+      title: '范围选择时开始日期的占位内容',
+      label: '开始日期',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'endPlaceholder',
+      defaultValue: '',
+      title: '范围选择时结束日期的占位内容',
+      label: '结束日期',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'arrowControl',
+      label: 'arrowControl',
+      title: '是否使用箭头进行时间选择',
+      setters: 'BooleanSetter',
+      defaultValue: false
+    },
+    {
+      name: 'type',
+      defaultValue: 'date',
+      title: '显示类型',
+      options: [
+        'year',
+        'month',
+        'date',
+        'dates',
+        'datetime',
+        'week',
+        'datetimerange',
+        'daterange',
+        'monthrange'
+      ],
+      setters: 'SelectSetter'
+    },
+    {
+      name: 'format',
+      defaultValue: 'YYYY-MM-DD HH:mm:ss',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'popperClass',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'rangeSeparator',
+      defaultValue: '-',
+      title: '选择范围时的分隔符',
+      label: '分隔符',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'defaultValue',
+      defaultValue: '',
+      setters: 'ExpressionSetter'
+    },
+    {
+      name: 'defaultTime',
+      defaultValue: '',
+      setters: 'ExpressionSetter'
+    },
+    {
+      name: 'valueFormat',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'dateFormat',
+      defaultValue: '',
+      setters: 'InputSetter',
+      title: '时间选择器下拉列表中显示的日期格式'
+    },
+    {
+      name: 'timeFormat',
+      defaultValue: '',
+      setters: 'InputSetter',
+      title: '时间选择器下拉列表中显示的时间格式'
+    },
+    {
+      name: 'id',
+      defaultValue: '',
+      setters: ['InputSetter']
+    },
+    {
+      name: 'name',
+      defaultValue: '',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'unlinkPanels',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'prefixIcon',
+      defaultValue: 'Date',
+      title: '自定义前缀图标',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'clearIcon',
+      defaultValue: 'CircleClose',
+      title: '自定义清除图标',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'shortcuts',
+      defaultValue: '',
+      title: '设置快捷选项，需要传入数组对象',
+      setters: 'JSONSetter'
+    },
+    {
+      name: 'disabledDate',
+      defaultValue: '',
+      setters: 'FunctionSetter'
+    },
+
+    {
+      name: 'cellClassName',
+      defaultValue: '',
+      title: '设置自定义类名',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'teleported',
+      defaultValue: true,
+      title: '设置自定义类名',
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    {
+      name: 'change'
+    },
+    {
+      name: 'blur'
+    },
+    {
+      name: 'focus'
+    },
+    {
+      name: 'calendar-change'
+    },
+    {
+      name: 'visible-change'
+    },
+    {
+      name: 'update:modelValue'
+    }
+  ],
+  slots: [
+    {
+      name: 'default'
+    },
+    {
+      name: 'range-separator'
+    }
+  ],
+  snippet: {
+    props: {
+      type: 'datetime',
+      placeholder: 'Select date and time'
+    }
+  }
+};
+
+export default dateTime;