refactor: skeleton (#6224)

* refactor: skeleton

* refactor: skeleton style

* chore: modify skeleton demo style

Author: aibayanyu20

components/skeleton/Avatar.tsx

@@ -4,6 +4,7 @@ import classNames from '../_util/classNames';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import Element, { skeletonElementProps } from './Element';
+import useStyle from './style';
 
 export const avatarProps = () => {
   return {
@@ -23,16 +24,22 @@ const SkeletonAvatar = defineComponent({
   }),
   setup(props) {
     const { prefixCls } = useConfigInject('skeleton', props);
+    const [wrapSSR, hashId] = useStyle(prefixCls);
     const cls = computed(() =>
-      classNames(prefixCls.value, `${prefixCls.value}-element`, {
-        [`${prefixCls.value}-active`]: props.active,
-      }),
+      classNames(
+        prefixCls.value,
+        `${prefixCls.value}-element`,
+        {
+          [`${prefixCls.value}-active`]: props.active,
+        },
+        hashId.value,
+      ),
     );
     return () => {
-      return (
+      return wrapSSR(
         <div class={cls.value}>
           <Element {...props} prefixCls={`${prefixCls.value}-avatar`} />
-        </div>
+        </div>,
       );
     };
   },

components/skeleton/Button.tsx

@@ -4,6 +4,7 @@ import classNames from '../_util/classNames';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import { initDefaultProps } from '../_util/props-util';
 import Element, { skeletonElementProps } from './Element';
+import useStyle from './style';
 
 export const skeletonButtonProps = () => {
   return {
@@ -23,17 +24,23 @@ const SkeletonButton = defineComponent({
   }),
   setup(props) {
     const { prefixCls } = useConfigInject('skeleton', props);
+    const [wrapSSR, hashId] = useStyle(prefixCls);
     const cls = computed(() =>
-      classNames(prefixCls.value, `${prefixCls.value}-element`, {
-        [`${prefixCls.value}-active`]: props.active,
-        [`${prefixCls.value}-block`]: props.block,
-      }),
+      classNames(
+        prefixCls.value,
+        `${prefixCls.value}-element`,
+        {
+          [`${prefixCls.value}-active`]: props.active,
+          [`${prefixCls.value}-block`]: props.block,
+        },
+        hashId.value,
+      ),
     );
     return () => {
-      return (
+      return wrapSSR(
         <div class={cls.value}>
           <Element {...props} prefixCls={`${prefixCls.value}-button`} />
-        </div>
+        </div>,
       );
     };
   },

components/skeleton/Image.tsx

@@ -4,6 +4,7 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
 import omit from '../_util/omit';
 import type { SkeletonElementProps } from './Element';
 import { skeletonElementProps } from './Element';
+import useStyle from './style';
 
 export type SkeletonImageProps = Omit<SkeletonElementProps, 'size' | 'shape' | 'active'>;
 
@@ -16,9 +17,12 @@ const SkeletonImage = defineComponent({
   props: omit(skeletonElementProps(), ['size', 'shape', 'active']),
   setup(props) {
     const { prefixCls } = useConfigInject('skeleton', props);
-    const cls = computed(() => classNames(prefixCls.value, `${prefixCls.value}-element`));
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const cls = computed(() =>
+      classNames(prefixCls.value, `${prefixCls.value}-element`, hashId.value),
+    );
     return () => {
-      return (
+      return wrapSSR(
         <div class={cls.value}>
           <div class={`${prefixCls.value}-image`}>
             <svg
@@ -29,7 +33,7 @@ const SkeletonImage = defineComponent({
               <path d={path} class={`${prefixCls.value}-image-path`} />
             </svg>
           </div>
-        </div>
+        </div>,
       );
     };
   },

components/skeleton/Input.tsx

@@ -5,6 +5,7 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
 import type { SkeletonElementProps } from './Element';
 import Element, { skeletonElementProps } from './Element';
 import omit from '../_util/omit';
+import useStyle from './style';
 
 export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
   size?: 'large' | 'small' | 'default';
@@ -21,17 +22,23 @@ const SkeletonInput = defineComponent({
   },
   setup(props) {
     const { prefixCls } = useConfigInject('skeleton', props);
+    const [wrapSSR, hashId] = useStyle(prefixCls);
     const cls = computed(() =>
-      classNames(prefixCls.value, `${prefixCls.value}-element`, {
-        [`${prefixCls.value}-active`]: props.active,
-        [`${prefixCls.value}-block`]: props.block,
-      }),
+      classNames(
+        prefixCls.value,
+        `${prefixCls.value}-element`,
+        {
+          [`${prefixCls.value}-active`]: props.active,
+          [`${prefixCls.value}-block`]: props.block,
+        },
+        hashId.value,
+      ),
     );
     return () => {
-      return (
+      return wrapSSR(
         <div class={cls.value}>
           <Element {...props} prefixCls={`${prefixCls.value}-input`} />
-        </div>
+        </div>,
       );
     };
   },

components/skeleton/Skeleton.tsx

@@ -9,6 +9,7 @@ import type { SkeletonParagraphProps } from './Paragraph';
 import Paragraph from './Paragraph';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import Element from './Element';
+import useStyle from './style';
 
 /* This only for skeleton internal. */
 type SkeletonAvatarProps = Omit<AvatarProps, 'active'>;
@@ -89,6 +90,8 @@ const Skeleton = defineComponent({
   }),
   setup(props, { slots }) {
     const { prefixCls, direction } = useConfigInject('skeleton', props);
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     return () => {
       const { loading, avatar, title, paragraph, active, round } = props;
       const pre = prefixCls.value;
@@ -152,13 +155,14 @@ const Skeleton = defineComponent({
           [`${pre}-active`]: active,
           [`${pre}-rtl`]: direction.value === 'rtl',
           [`${pre}-round`]: round,
+          [hashId.value]: true,
         });
 
-        return (
+        return wrapSSR(
           <div class={cls}>
             {avatarNode}
             {contentNode}
-          </div>
+          </div>,
         );
       }
       return slots.default?.();

components/skeleton/demo/children.vue

@@ -17,7 +17,7 @@ Skeleton contains sub component.
 </docs>
 
 <template>
-  <div class="article">
+  <a-space direction="vertical" style="width: 100%" :size="16">
     <a-skeleton :loading="loading">
       <div>
         <h4>Ant Design Vue, a design language</h4>
@@ -29,7 +29,7 @@ Skeleton contains sub component.
       </div>
     </a-skeleton>
     <a-button :disabled="loading" @click="showSkeleton">Show Skeleton</a-button>
-  </div>
+  </a-space>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
@@ -50,11 +50,3 @@ export default defineComponent({
   },
 });
 </script>
-<style scoped>
-.article h4 {
-  margin-bottom: 16px;
-}
-.article button {
-  margin-top: 16px;
-}
-</style>