refactor(components): refactor skeleton/skeleton-item (#4264)

packages/components/skeleton/__tests__/skeleton-item.spec.ts

@@ -1,5 +1,5 @@
 import makeMount from '@element-plus/test-utils/make-mount'
-import SkeletonItem from '../src/item.vue'
+import SkeletonItem from '../src/skeleton-item.vue'
 
 describe('<skeleton-item />', () => {
   const mount = makeMount(SkeletonItem, {})

packages/components/skeleton/__tests__/skeleton.spec.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue'
 import makeMount from '@element-plus/test-utils/make-mount'
-import Skeleton from '../src/index.vue'
+import Skeleton from '../src/skeleton.vue'
 const AXIOM = 'AXIOM is the best girl'
 
 jest.useFakeTimers()

packages/components/skeleton/index.ts

@@ -1,7 +1,7 @@
 import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
 
-import Skeleton from './src/index.vue'
-import SkeletonItem from './src/item.vue'
+import Skeleton from './src/skeleton.vue'
+import SkeletonItem from './src/skeleton-item.vue'
 
 export const ElSkeleton = withInstall(Skeleton, {
   SkeletonItem,
@@ -9,4 +9,5 @@ export const ElSkeleton = withInstall(Skeleton, {
 export default ElSkeleton
 export const ElSkeletonItem = withNoopInstall(SkeletonItem)
 
-export * from './src/types'
+export * from './src/skeleton'
+export * from './src/skeleton-item'

packages/components/skeleton/src/skeleton-item.ts

@@ -0,0 +1,24 @@
+import { buildProps } from '@element-plus/utils/props'
+import type SkeletonItem from './skeleton-item.vue'
+import type { ExtractPropTypes } from 'vue'
+
+export const skeletonItemProps = buildProps({
+  variant: {
+    type: String,
+    values: [
+      'circle',
+      'rect',
+      'h1',
+      'h3',
+      'text',
+      'caption',
+      'p',
+      'image',
+      'button',
+    ],
+    default: 'text',
+  },
+} as const)
+export type SkeletonItemProps = ExtractPropTypes<typeof skeletonItemProps>
+
+export type SkeletonItemInstance = InstanceType<typeof SkeletonItem>

packages/components/skeleton/src/skeleton-item.vue

@@ -7,20 +7,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import ImgPlaceholder from './image-placeholder.vue'
-
-import type { PropType } from 'vue'
-import type { Variants } from './types'
+import { skeletonItemProps } from './skeleton-item'
 
 export default defineComponent({
   name: 'ElSkeletonItem',
   components: {
-    [ImgPlaceholder.name]: ImgPlaceholder,
-  },
-  props: {
-    variant: {
-      type: String as PropType<Variants>,
-      default: 'text',
-    },
+    ImgPlaceholder,
   },
+  props: skeletonItemProps,
 })
 </script>

packages/components/skeleton/src/skeleton.ts

@@ -0,0 +1,28 @@
+import { buildProps } from '@element-plus/utils/props'
+import type Skeleton from './skeleton.vue'
+import type { ExtractPropTypes } from 'vue'
+
+export const skeletonProps = buildProps({
+  animated: {
+    type: Boolean,
+    default: false,
+  },
+  count: {
+    type: Number,
+    default: 1,
+  },
+  rows: {
+    type: Number,
+    default: 3,
+  },
+  loading: {
+    type: Boolean,
+    default: true,
+  },
+  throttle: {
+    type: Number,
+  },
+} as const)
+export type SkeletonProps = ExtractPropTypes<typeof skeletonProps>
+
+export type SkeletonInstance = InstanceType<typeof Skeleton>

packages/components/skeleton/src/skeleton.vue

@@ -28,34 +28,15 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { useThrottleRender } from '@element-plus/hooks'
-import SkeletonItem from './item.vue'
+import SkeletonItem from './skeleton-item.vue'
+import { skeletonProps } from './skeleton'
 
 export default defineComponent({
   name: 'ElSkeleton',
   components: {
     [SkeletonItem.name]: SkeletonItem,
   },
-  props: {
-    animated: {
-      type: Boolean,
-      default: false,
-    },
-    count: {
-      type: Number,
-      default: 1,
-    },
-    rows: {
-      type: Number,
-      default: 3,
-    },
-    loading: {
-      type: Boolean,
-      default: true,
-    },
-    throttle: {
-      type: Number,
-    },
-  },
+  props: skeletonProps,
   setup(props) {
     const innerLoading = computed(() => {
       return props.loading

packages/components/skeleton/src/types.ts

@@ -1,10 +0,0 @@
-export type Variants =
-  | 'circle'
-  | 'rect'
-  | 'h1'
-  | 'h3'
-  | 'text'
-  | 'caption'
-  | 'p'
-  | 'image'
-  | 'button'