From 1309e56d5122d58059376c83a80e858ae9fc9c67 Mon Sep 17 00:00:00 2001
From: Songyi Kim <sykim@mz.co.kr>
Date: Tue, 25 Oct 2022 14:41:20 +0900
Subject: [PATCH] fix(p-spinner): fix bugs in related components (#105)

* fix(p-spinner): fix bugs in related components

* fix(p-spinner): add validator to spinnerSize
---
 .../cards/list-card/PListCard.vue             |   2 +-
 .../loading/data-loader/PDataLoader.vue       |   6 +-
 src/feedbacks/loading/spinner/PSpinner.vue    | 122 +++++++++---------
 3 files changed, 69 insertions(+), 61 deletions(-)

diff --git a/src/data-display/cards/list-card/PListCard.vue b/src/data-display/cards/list-card/PListCard.vue
index ca3d72e38..043f76f8c 100644
--- a/src/data-display/cards/list-card/PListCard.vue
+++ b/src/data-display/cards/list-card/PListCard.vue
@@ -5,7 +5,7 @@
         <template v-if="$scopedSlots.header" #header>
             <slot name="header" />
         </template>
-        <p-data-loader :data="items" :loading="loading" :spinner-size="1.5"
+        <p-data-loader :data="items" :loading="loading" spinner-size="lg"
                        :disable-empty-case="disableEmptyCase"
         >
             <template #loader>
diff --git a/src/feedbacks/loading/data-loader/PDataLoader.vue b/src/feedbacks/loading/data-loader/PDataLoader.vue
index e88f8050f..8a722fdda 100644
--- a/src/feedbacks/loading/data-loader/PDataLoader.vue
+++ b/src/feedbacks/loading/data-loader/PDataLoader.vue
@@ -51,6 +51,7 @@ import { isEmpty } from 'lodash';
 import { LOADER_TYPES } from '@/feedbacks/loading/data-loader/config';
 import PSkeleton from '@/feedbacks/loading/skeleton/PSkeleton.vue';
 import PSpinner from '@/feedbacks/loading/spinner/PSpinner.vue';
+import type { SpinnerSize } from '@/feedbacks/loading/spinner/type';
 import { SPINNER_SIZE } from '@/feedbacks/loading/spinner/type';
 import { i18n } from '@/translations';
 import { getColor } from '@/util/helpers';
@@ -88,8 +89,11 @@ export default defineComponent<Props>({
             },
         },
         spinnerSize: {
-            type: Number,
+            type: String as PropType<SpinnerSize>,
             default: SPINNER_SIZE.xl,
+            validator(spinnerSize: SpinnerSize) {
+                return Object.values(SPINNER_SIZE).includes(spinnerSize);
+            },
         },
         disableEmptyCase: {
             type: Boolean,
diff --git a/src/feedbacks/loading/spinner/PSpinner.vue b/src/feedbacks/loading/spinner/PSpinner.vue
index 13e5b69d3..dced94b60 100644
--- a/src/feedbacks/loading/spinner/PSpinner.vue
+++ b/src/feedbacks/loading/spinner/PSpinner.vue
@@ -1,6 +1,6 @@
 <template>
-    <span>
-        <svg class="p-spinner"
+    <span class="p-spinner">
+        <svg class="p-spinner-svg"
              :class="[styleType, size]"
              viewBox="0 0 32 32"
              fill="none" xmlns="http://www.w3.org/2000/svg"
@@ -27,6 +27,7 @@ import {
     defineComponent,
 } from 'vue';
 
+import type { SpinnerSize, SpinnerStyleType } from '@/feedbacks/loading/spinner/type';
 import { SPINNER_SIZE, SPINNER_STYLE_TYPE } from '@/feedbacks/loading/spinner/type';
 
 interface Props {
@@ -40,11 +41,11 @@ export default defineComponent<Props>({
     },
     props: {
         size: {
-            type: String as PropType<keyof typeof SPINNER_SIZE>,
+            type: String as PropType<SpinnerSize>,
             default: SPINNER_SIZE.md,
         },
         styleType: {
-            type: String as PropType<keyof typeof SPINNER_STYLE_TYPE>,
+            type: String as PropType<SpinnerStyleType>,
             default: SPINNER_STYLE_TYPE.gray,
         },
     },
@@ -53,71 +54,74 @@ export default defineComponent<Props>({
 
 <style lang="postcss">
 .p-spinner {
-    --spinner-speed: 2s;
-    vertical-align: middle;
-    transform-origin: center;
-    animation: rotate var(--spinner-speed) 0.3s linear infinite;
-    .spinner {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-        stroke-linecap: round;
-        animation: stretch calc(var(--spinner-speed) * 0.75) 0.3s ease-in-out infinite;
-    }
-
-    @keyframes stretch {
-        0% {
+    .p-spinner-svg {
+        --spinner-speed: 2s;
+        vertical-align: middle;
+        transform-origin: center;
+        animation: rotate var(--spinner-speed) 0.3s linear infinite;
+        .spinner {
             stroke-dasharray: 1, 200;
             stroke-dashoffset: 0;
+            stroke-linecap: round;
+            animation: stretch calc(var(--spinner-speed) * 0.75) 0.3s ease-in-out infinite;
         }
-        50% {
-            stroke-dasharray: 90, 200;
-            stroke-dashoffset: -2.1875rem;
-        }
-        100% {
-            stroke-dashoffset: -7.75rem;
-        }
-    }
 
-    @keyframes rotate {
-        100% {
-            transform: rotate(360deg);
+        @keyframes stretch {
+            0% {
+                stroke-dasharray: 1, 200;
+                stroke-dashoffset: 0;
+            }
+            50% {
+                stroke-dasharray: 90, 200;
+                stroke-dashoffset: -2.1875rem;
+            }
+            100% {
+                stroke-dashoffset: -7.75rem;
+            }
         }
-    }
 
-    @define-mixin style-type $bg-color, $spinner-color {
-        .spinner-bg {
-            stroke: $bg-color;
+        @keyframes rotate {
+            100% {
+                transform: rotate(360deg);
+            }
         }
-        .spinner {
-            stroke: $spinner-color;
+
+        @define-mixin style-type $bg-color, $spinner-color {
+            .spinner-bg {
+                stroke: $bg-color;
+            }
+            .spinner {
+                stroke: $spinner-color;
+            }
         }
-    }
 
-    @define-mixin size $spinner-size {
-        width: $spinner-size;
-        height: $spinner-size;
-    }
+        @define-mixin size $spinner-size {
+            width: $spinner-size;
+            height: $spinner-size;
+        }
 
-    &.gray {
-        @mixin style-type #A7A9B2, theme('colors.gray.500');
-    }
-    &.white {
-        @mixin style-type theme('colors.white'), theme('colors.white');
-    }
-    &.xl {
-        @mixin size 2rem;
-    }
-    &.lg {
-        @mixin size 1.5rem;
-    }
-    &.md {
-        @mixin size 1.25rem;
-    }
-    &.sm {
-        @mixin size 1rem;
-    }
-    &.xs {
-        @mixin size 0.75rem;
+        &.gray {
+            @mixin style-type #A7A9B2, theme('colors.gray.500');
+        }
+        &.white {
+            @mixin style-type theme('colors.white'), theme('colors.white');
+        }
+        &.xl {
+            @mixin size 2rem;
+        }
+        &.lg {
+            @mixin size 1.5rem;
+        }
+        &.md {
+            @mixin size 1.25rem;
+        }
+        &.sm {
+            @mixin size 1rem;
+        }
+        &.xs {
+            @mixin size 0.75rem;
+        }
     }
 }
+
 </style>