types: Form类型调整

src/components/ConfigGlobal/src/ConfigGlobal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { provide, computed, watch, onMounted } from 'vue'
 import { propTypes } from '@/utils/propTypes'
-import { ElConfigProvider } from 'element-plus'
+import { ComponentSize, ElConfigProvider } from 'element-plus'
 import { useLocaleStore } from '@/store/modules/locale'
 import { useWindowSize } from '@vueuse/core'
 import { useAppStore } from '@/store/modules/app'
@@ -13,7 +13,7 @@ const { variables } = useDesign()
 const appStore = useAppStore()
 
 const props = defineProps({
-  size: propTypes.oneOf<ElementPlusSize>(['default', 'small', 'large']).def('default')
+  size: propTypes.oneOf<ComponentSize>(['default', 'small', 'large']).def('default')
 })
 
 provide('configGlobal', props)

src/components/ConfigGlobal/src/types/index.ts

@@ -1,3 +1,5 @@
+import { ComponentSize } from 'element-plus'
+
 export interface ConfigGlobalTypes {
-  size?: ElementPlusSize
+  size?: ComponentSize
 }

src/components/Form/src/Form.vue

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue'
-import { ElForm, ElFormItem, ElRow, ElCol, FormItemProp } from 'element-plus'
+import { ElForm, ElFormItem, ElRow, ElCol, FormItemRule } from 'element-plus'
 import { componentMap } from './helper/componentMap'
 import { propTypes } from '@/utils/propTypes'
 import { getSlot } from '@/utils/tsxHelper'
@@ -55,9 +55,26 @@ export default defineComponent({
     // 是否自定义内容
     isCustom: propTypes.bool.def(false),
     // 表单label宽度
-    labelWidth: propTypes.oneOfType([String, Number]).def('auto')
+    labelWidth: propTypes.oneOfType([String, Number]).def('auto'),
+    rules: {
+      type: Object as PropType<FormItemRule>,
+      default: () => undefined
     },
-  emits: ['register', 'validate'],
+    inline: propTypes.bool.def(false),
+    labelPosition: propTypes.oneOf(['left', 'right', 'top']).def('right'),
+    labelSuffix: propTypes.string.def(''),
+    hideRequiredAsterisk: propTypes.bool.def(false),
+    requireAsteriskPosition: propTypes.oneOf(['left', 'right']).def('left'),
+    showMessage: propTypes.bool.def(true),
+    inlineMessage: propTypes.bool.def(false),
+    statusIcon: propTypes.bool.def(false),
+    validateOnRuleChange: propTypes.bool.def(true),
+    size: propTypes.oneOf(['default', 'small', 'large']).def('default'),
+    disabled: propTypes.bool.def(false),
+    scrollToError: propTypes.bool.def(false),
+    scrollIntoViewOptions: propTypes.oneOfType([Object, Boolean]).def(false)
+  },
+  emits: ['register'],
   setup(props, { slots, expose, emit }) {
     // element form 实例
     const elFormRef = ref<ComponentRef<typeof ElForm>>()
@@ -336,11 +353,7 @@ export default defineComponent({
           delete props[key]
         }
       }
-      return props
+      return props as any
-    }
-
-    const onValidate = (prop: FormItemProp, isValid: boolean, message: string) => {
-      emit('validate', prop, isValid, message)
     }
 
     return () => (
@@ -349,7 +362,6 @@ export default defineComponent({
         {...getFormBindValue()}
         model={unref(getProps).isCustom ? unref(getProps).model : formModel}
         class={prefixCls}
-        onValidate={onValidate}
       >
         {{
           // 如果需要自定义，就什么都不渲染，而是提供默认插槽

src/components/Form/src/types/index.ts

@@ -6,7 +6,8 @@ import {
   CascaderProps,
   CascaderNode,
   CascaderValue,
-  FormItemRule
+  FormItemRule,
+  ComponentSize
 } from 'element-plus'
 import { IEditorConfig } from '@wangeditor/editor'
 
@@ -62,7 +63,7 @@ export interface InputComponentProps {
   parser?: (value: string) => string
   showPassword?: boolean
   disabled?: boolean
-  size?: ElementPlusSize
+  size?: ComponentSize
   prefixIcon?: string | JSX.Element
   suffixIcon?: string | JSX.Element
   type?: InputProps['type']
@@ -135,7 +136,7 @@ export interface InputNumberComponentProps {
   step?: number
   stepStrictly?: boolean
   precision?: number
-  size?: ElementPlusSize
+  size?: ComponentSize
   readonly?: boolean
   disabled?: boolean
   controls?: boolean
@@ -167,7 +168,7 @@ export interface SelectComponentProps {
   multiple?: boolean
   disabled?: boolean
   valueKey?: string
-  size?: ElementPlusSize
+  size?: ComponentSize
   clearable?: boolean
   collapseTags?: boolean
   collapseTagsTooltip?: number
@@ -244,7 +245,7 @@ export interface SelectV2ComponentProps {
   multiple?: boolean
   disabled?: boolean
   valueKey?: string
-  size?: ElementPlusSize
+  size?: ComponentSize
   clearable?: boolean
   clearIcon?: string | JSX.Element | null
   collapseTags?: boolean
@@ -287,7 +288,7 @@ export interface SelectV2ComponentProps {
 export interface CascaderComponentProps {
   options?: Record<string, unknown>[]
   props?: CascaderProps
-  size?: ElementPlusSize
+  size?: ComponentSize
   placeholder?: string
   disabled?: boolean
   clearable?: boolean
@@ -321,7 +322,7 @@ export interface CascaderComponentProps {
 export interface SwitchComponentProps {
   disabled?: boolean
   loading?: boolean
-  size?: ElementPlusSize
+  size?: ComponentSize
   width?: number | string
   inlinePrompt?: boolean
   activeIcon?: string | JSX.Element | null
@@ -341,7 +342,7 @@ export interface SwitchComponentProps {
 
 export interface RateComponentProps {
   max?: number
-  size?: ElementPlusSize
+  size?: ComponentSize
   disabled?: boolean
   allowHalf?: boolean
   lowThreshold?: number
@@ -368,7 +369,7 @@ export interface RateComponentProps {
 
 export interface ColorPickerComponentProps {
   disabled?: boolean
-  size?: ElementPlusSize
+  size?: ComponentSize
   showAlpha?: boolean
   colorFormat?: 'hsl' | 'hsv' | 'hex' | 'rgb' | 'hex' | 'rgb'
   predefine?: string[]
@@ -429,12 +430,12 @@ export interface RadioOption {
   value?: string | number | boolean
   disabled?: boolean
   border?: boolean
-  size?: ElementPlusSize
+  size?: ComponentSize
   name?: string
   [key: string]: any
 }
 export interface RadioGroupComponentProps {
-  size?: ElementPlusSize
+  size?: ComponentSize
   disabled?: boolean
   textColor?: string
   fill?: string
@@ -461,7 +462,7 @@ export interface RadioGroupComponentProps {
 }
 
 export interface RadioButtonComponentProps {
-  size?: ElementPlusSize
+  size?: ComponentSize
   disabled?: boolean
   textColor?: string
   fill?: string
@@ -494,7 +495,7 @@ export interface CheckboxOption {
   trueLabel?: string | number
   falseLabel?: string | number
   border?: boolean
-  size?: ElementPlusSize
+  size?: ComponentSize
   name?: string
   checked?: boolean
   indeterminate?: boolean
@@ -506,7 +507,7 @@ export interface CheckboxOption {
 }
 
 export interface CheckboxGroupComponentProps {
-  size?: ElementPlusSize
+  size?: ComponentSize
   disabled?: boolean
   min?: number
   max?: number
@@ -540,8 +541,8 @@ export interface DividerComponentProps {
   step?: number
   showInput?: boolean
   showInputControls?: boolean
-  size?: ElementPlusSize
+  size?: ComponentSize
-  inputSize?: ElementPlusSize
+  inputSize?: ComponentSize
   showStops?: boolean
   showTooltip?: boolean
   formatTooltip?: (value: number) => string
@@ -567,7 +568,7 @@ export interface DividerComponentProps {
 export interface DatePickerComponentProps {
   readonly?: boolean
   disabled?: boolean
-  size?: ElementPlusSize
+  size?: ComponentSize
   editable?: boolean
   clearable?: boolean
   placeholder?: string
@@ -620,7 +621,7 @@ export interface DateTimePickerComponentProps {
   disabled?: boolean
   editable?: boolean
   clearable?: boolean
-  size?: ElementPlusSize
+  size?: ComponentSize
   placeholder?: string
   startPlaceholder?: string
   endPlaceholder?: string
@@ -660,7 +661,7 @@ export interface TimePickerComponentProps {
   disabled?: boolean
   editable?: boolean
   clearable?: boolean
-  size?: ElementPlusSize
+  size?: ComponentSize
   placeholder?: string
   startPlaceholder?: string
   endPlaceholder?: string
@@ -695,7 +696,7 @@ export interface TimeSelectComponentProps {
   disabled?: boolean
   editable?: boolean
   clearable?: boolean
-  size?: ElementPlusSize
+  size?: ComponentSize
   placeholder?: string
   name?: string
   effect?: string
@@ -743,7 +744,7 @@ export interface FormItemProps {
   error?: string
   showMessage?: boolean
   inlineMessage?: boolean
-  size?: ElementPlusSize
+  size?: ComponentSize
   for?: string
   validateStatus?: '' | 'error' | 'validating' | 'success'
   style?: CSSProperties
@@ -831,5 +832,19 @@ export interface FormProps {
   autoSetPlaceholder?: boolean
   isCustom?: boolean
   labelWidth?: string | number
+  rules?: FormItemRule
+  inline?: boolean
+  labelPosition?: 'left' | 'right' | 'top'
+  labelSuffix?: string
+  hideRequiredAsterisk?: boolean
+  requireAsteriskPosition?: 'left' | 'right'
+  showMessage?: boolean
+  inlineMessage?: boolean
+  statusIcon?: boolean
+  validateOnRuleChange?: boolean
+  size?: ComponentSize
+  disabled?: boolean
+  scrollToError?: boolean
+  scrollIntoViewOptions?: Record<string, any> | boolean
   [key: string]: any
 }

src/components/SizeDropdown/src/SizeDropdown.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
+import { ElDropdown, ElDropdownMenu, ElDropdownItem, ComponentSize } from 'element-plus'
 import { useAppStore } from '@/store/modules/app'
 import { useI18n } from '@/hooks/web/useI18n'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
-import { ElementPlusSize } from '@/types/elementPlus'
 
 const { getPrefixCls } = useDesign()
 
@@ -21,7 +20,7 @@ const appStore = useAppStore()
 
 const sizeMap = computed(() => appStore.sizeMap)
 
-const setCurrentSize = (size: ElementPlusSize) => {
+const setCurrentSize = (size: ComponentSize) => {
   appStore.setCurrentSize(size)
 }
 </script>

src/store/modules/app.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { store } from '../index'
 import { setCssVar, humpToUnderline } from '@/utils'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ComponentSize } from 'element-plus'
 import { useCache } from '@/hooks/web/useCache'
 
 const { wsCache } = useCache()
@@ -26,8 +26,8 @@ interface AppState {
   title: string
   userInfo: string
   isDark: boolean
-  currentSize: ElementPlusSize
+  currentSize: ComponentSize
-  sizeMap: ElementPlusSize[]
+  sizeMap: ComponentSize[]
   mobile: boolean
   footer: boolean
   theme: ThemeTypes
@@ -156,10 +156,10 @@ export const useAppStore = defineStore('app', {
     getIsDark(): boolean {
       return this.isDark
     },
-    getCurrentSize(): ElementPlusSize {
+    getCurrentSize(): ComponentSize {
       return this.currentSize
     },
-    getSizeMap(): ElementPlusSize[] {
+    getSizeMap(): ComponentSize[] {
       return this.sizeMap
     },
     getMobile(): boolean {
@@ -245,7 +245,7 @@ export const useAppStore = defineStore('app', {
       }
       wsCache.set('isDark', this.isDark)
     },
-    setCurrentSize(currentSize: ElementPlusSize) {
+    setCurrentSize(currentSize: ComponentSize) {
       this.currentSize = currentSize
       wsCache.set('currentSize', this.currentSize)
     },

src/views/Components/Form/UseFormDemo.vue

@@ -4,7 +4,7 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useForm } from '@/hooks/web/useForm'
 import { reactive, unref, ref } from 'vue'
-import { ElButton, ElInput, FormItemProp } from 'element-plus'
+import { ElButton, ElInput, FormItemProp, ComponentSize } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
 import { getDictOneApi } from '@/api/common'
 
@@ -113,7 +113,7 @@ const changeLabelWidth = (width: number | string) => {
   })
 }
 
-const changeSize = (size: string) => {
+const changeSize = (size: ComponentSize) => {
   setProps({
     size
   })

types/global.d.ts

@@ -17,8 +17,6 @@ declare global {
   declare type TimeoutHandle = ReturnType<typeof setTimeout>
   declare type IntervalHandle = ReturnType<typeof setInterval>
 
-  declare type ElementPlusSize = 'default' | 'small' | 'large'
-
   declare type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger'
 
   declare type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'