refactor(components): [col] switch to script-setup syntax (#7971)

packages/components/col/__tests__/layout.test.tsx

@@ -2,7 +2,7 @@ import { defineComponent, nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, test } from 'vitest'
 import Row from '@element-plus/components/row'
-import Col from '../src/col'
+import Col from '../src/col.vue'
 
 describe('Col', () => {
   it('create', () => {

packages/components/col/index.ts

@@ -1,6 +1,6 @@
 import { withInstall } from '@element-plus/utils'
 
-import Col from './src/col'
+import Col from './src/col.vue'
 
 export const ElCol = withInstall(Col)
 export default ElCol

packages/components/col/src/col.ts

@@ -0,0 +1,56 @@
+import { buildProps, definePropType, mutable } from '@element-plus/utils'
+import type { ExtractPropTypes } from 'vue'
+import type Col from './col.vue'
+
+export type ColSizeObject = {
+  span?: number
+  offset?: number
+  pull?: number
+  push?: number
+}
+export type ColSize = number | ColSizeObject
+
+export const colProps = buildProps({
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  span: {
+    type: Number,
+    default: 24,
+  },
+  offset: {
+    type: Number,
+    default: 0,
+  },
+  pull: {
+    type: Number,
+    default: 0,
+  },
+  push: {
+    type: Number,
+    default: 0,
+  },
+  xs: {
+    type: definePropType<ColSize>([Number, Object]),
+    default: () => mutable({} as const),
+  },
+  sm: {
+    type: definePropType<ColSize>([Number, Object]),
+    default: () => mutable({} as const),
+  },
+  md: {
+    type: definePropType<ColSize>([Number, Object]),
+    default: () => mutable({} as const),
+  },
+  lg: {
+    type: definePropType<ColSize>([Number, Object]),
+    default: () => mutable({} as const),
+  },
+  xl: {
+    type: definePropType<ColSize>([Number, Object]),
+    default: () => mutable({} as const),
+  },
+} as const)
+export type ColProps = ExtractPropTypes<typeof colProps>
+export type ColInstance = InstanceType<typeof Col>

packages/components/col/src/col.tsx

@@ -1,120 +0,0 @@
-import { computed, defineComponent, inject } from 'vue'
-import { buildProps, definePropType, mutable } from '@element-plus/utils'
-import { useNamespace } from '@element-plus/hooks'
-import { rowContextKey } from '@element-plus/tokens'
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-
-export type ColSizeObject = {
-  span?: number
-  offset?: number
-  pull?: number
-  push?: number
-}
-export type ColSize = number | ColSizeObject
-
-export const colProps = buildProps({
-  tag: {
-    type: String,
-    default: 'div',
-  },
-  span: {
-    type: Number,
-    default: 24,
-  },
-  offset: {
-    type: Number,
-    default: 0,
-  },
-  pull: {
-    type: Number,
-    default: 0,
-  },
-  push: {
-    type: Number,
-    default: 0,
-  },
-  xs: {
-    type: definePropType<ColSize>([Number, Object]),
-    default: () => mutable({} as const),
-  },
-  sm: {
-    type: definePropType<ColSize>([Number, Object]),
-    default: () => mutable({} as const),
-  },
-  md: {
-    type: definePropType<ColSize>([Number, Object]),
-    default: () => mutable({} as const),
-  },
-  lg: {
-    type: definePropType<ColSize>([Number, Object]),
-    default: () => mutable({} as const),
-  },
-  xl: {
-    type: definePropType<ColSize>([Number, Object]),
-    default: () => mutable({} as const),
-  },
-} as const)
-export type ColProps = ExtractPropTypes<typeof colProps>
-
-export default defineComponent({
-  name: 'ElCol',
-  props: colProps,
-
-  setup(props, { slots }) {
-    const { gutter } = inject(rowContextKey, { gutter: computed(() => 0) })
-    const ns = useNamespace('col')
-
-    const style = computed<CSSProperties>(() => {
-      if (gutter.value) {
-        return {
-          paddingLeft: `${gutter.value / 2}px`,
-          paddingRight: `${gutter.value / 2}px`,
-        }
-      }
-      return {}
-    })
-
-    const classes = computed(() => {
-      const classes: string[] = []
-
-      const pos = ['span', 'offset', 'pull', 'push'] as const
-      pos.forEach((prop) => {
-        const size = props[prop]
-        if (typeof size === 'number') {
-          if (prop === 'span') classes.push(ns.b(`${props[prop]}`))
-          else if (size > 0) classes.push(ns.b(`${prop}-${props[prop]}`))
-        }
-      })
-
-      const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
-      sizes.forEach((size) => {
-        if (typeof props[size] === 'number') {
-          classes.push(ns.b(`${size}-${props[size]}`))
-        } else if (typeof props[size] === 'object') {
-          const sizeProps = props[size]
-          Object.keys(sizeProps).forEach((prop) => {
-            classes.push(
-              prop !== 'span'
-                ? ns.b(`${size}-${prop}-${sizeProps[prop]}`)
-                : ns.b(`${size}-${sizeProps[prop]}`)
-            )
-          })
-        }
-      })
-      // this is for the fix
-      if (gutter.value) {
-        classes.push(ns.is('guttered'))
-      }
-
-      return classes
-    })
-
-    return () => (
-      <props.tag
-        v-slots={slots}
-        class={[ns.b(), classes.value]}
-        style={style.value}
-      />
-    )
-  },
-})

packages/components/col/src/col.vue

@@ -0,0 +1,65 @@
+<template>
+  <component :is="tag" :class="[ns.b(), classes]" :style="style">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { isNumber, isObject } from '@element-plus/utils'
+import { useNamespace } from '@element-plus/hooks'
+import { rowContextKey } from '@element-plus/tokens'
+import { colProps } from './col'
+import type { CSSProperties } from 'vue'
+
+defineOptions({
+  name: 'ElCol',
+})
+
+const props = defineProps(colProps)
+
+const { gutter } = inject(rowContextKey, { gutter: computed(() => 0) })
+const ns = useNamespace('col')
+
+const style = computed(() => {
+  const styles: CSSProperties = {}
+  if (gutter.value) {
+    styles.paddingLeft = styles.paddingRight = `${gutter.value / 2}px`
+  }
+  return styles
+})
+
+const classes = computed(() => {
+  const classes: string[] = []
+  const pos = ['span', 'offset', 'pull', 'push'] as const
+
+  pos.forEach((prop) => {
+    const size = props[prop]
+    if (isNumber(size)) {
+      if (prop === 'span') classes.push(ns.b(`${props[prop]}`))
+      else if (size > 0) classes.push(ns.b(`${prop}-${props[prop]}`))
+    }
+  })
+
+  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+  sizes.forEach((size) => {
+    if (isNumber(props[size])) {
+      classes.push(ns.b(`${size}-${props[size]}`))
+    } else if (isObject(props[size])) {
+      Object.entries(props[size]).forEach(([prop, sizeProp]) => {
+        classes.push(
+          prop !== 'span'
+            ? ns.b(`${size}-${prop}-${sizeProp}`)
+            : ns.b(`${size}-${sizeProp}`)
+        )
+      })
+    }
+  })
+
+  // this is for the fix
+  if (gutter.value) {
+    classes.push(ns.is('guttered'))
+  }
+  return classes
+})
+</script>