refactor(components): [col] use type-based definitions (#23438)

packages/components/col/src/col.ts

@@ -1,6 +1,6 @@
 import { buildProps, definePropType, mutable } from '@element-plus/utils'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 import type Col from './col.vue'
 
 export type ColSizeObject = {
@@ -11,6 +11,52 @@ export type ColSizeObject = {
 }
 export type ColSize = number | ColSizeObject
 
+export interface ColProps {
+  /**
+   * @description custom element tag
+   */
+  tag?: string
+  /**
+   * @description number of column the grid spans
+   */
+  span?: number
+  /**
+   * @description number of spacing on the left side of the grid
+   */
+  offset?: number
+  /**
+   * @description number of columns that grid moves to the left
+   */
+  pull?: number
+  /**
+   * @description number of columns that grid moves to the right
+   */
+  push?: number
+  /**
+   * @description `<768px` Responsive columns or column props object
+   */
+  xs?: ColSize
+  /**
+   * @description `≥768px` Responsive columns or column props object
+   */
+  sm?: ColSize
+  /**
+   * @description `≥992px` Responsive columns or column props object
+   */
+  md?: ColSize
+  /**
+   * @description `≥1200px` Responsive columns or column props object
+   */
+  lg?: ColSize
+  /**
+   * @description `≥1920px` Responsive columns or column props object
+   */
+  xl?: ColSize
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `ColProps` instead.
+ */
 export const colProps = buildProps({
   /**
    * @description custom element tag
@@ -83,6 +129,9 @@ export const colProps = buildProps({
     default: () => mutable({} as const),
   },
 } as const)
-export type ColProps = ExtractPropTypes<typeof colProps>
+
+/**
+ * @deprecated Removed after 3.0.0, Use `ColProps` instead.
+ */
 export type ColPropsPublic = ExtractPublicPropTypes<typeof colProps>
 export type ColInstance = InstanceType<typeof Col> & unknown

packages/components/col/src/col.vue

@@ -9,15 +9,26 @@ import { computed, inject } from 'vue'
 import { isNumber, isObject } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import { rowContextKey } from '@element-plus/components/row'
-import { colProps } from './col'
 
 import type { CSSProperties } from 'vue'
+import type { ColProps } from './col'
 
 defineOptions({
   name: 'ElCol',
 })
 
-const props = defineProps(colProps)
+const props = withDefaults(defineProps<ColProps>(), {
+  tag: 'div',
+  span: 24,
+  offset: 0,
+  pull: 0,
+  push: 0,
+  xs: () => ({}),
+  sm: () => ({}),
+  md: () => ({}),
+  lg: () => ({}),
+  xl: () => ({}),
+})
 
 const { gutter } = inject(rowContextKey, { gutter: computed(() => 0) })
 const ns = useNamespace('col')