feat: add loader prop validator

Author: setaman

src/components/Circle/Circle.vue

@@ -25,26 +25,7 @@
     </circle>
     <fade-in-transition>
       <g v-if="isLoading">
-        <g class="ep-circle--loading__container" :style="{ opacity: `${options.loading ? 1 : 0.45}` }">
-          <circle
-            class="ep-circle--loading animation__loading"
-            :r="radius"
-            :cx="position"
-            :cy="position"
-            fill="transparent"
-            :stroke="computedColor"
-            :stroke-width="thickness"
-            :stroke-linecap="options.line"
-            :stroke-dasharray="circumference"
-            :style="{
-              transitionTimingFunction: styles.transitionTimingFunction,
-              transformOrigin: styles.transformOrigin,
-              '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
-              '--ep-circumference': styles['--ep-circumference'],
-            }"
-          >
-          </circle>
-        </g>
+        <circle-loader :options="options.loader" />
       </g>
     </fade-in-transition>
     <circle
@@ -67,10 +48,11 @@
 <script>
 import CircleMixin from "./circleMixin";
 import FadeInTransition from "../FadeInTransition.vue";
+import CircleLoader from "./CircleLoader.vue";
 
 export default {
   name: "CircleProgress",
-  components: { FadeInTransition },
+  components: { CircleLoader, FadeInTransition },
   mixins: [CircleMixin],
   computed: {
     position() {

src/components/Circle/CircleLoader.vue

@@ -1,7 +1,7 @@
 <template>
-  <g class="ep-circle--loading__container" :style="{ opacity: `${options.loading ? 1 : 0.45}` }">
+  <g class="ep-circle--loader__container" :style="{ opacity: `${options.loading ? 1 : 0.45}` }">
     <circle
-      class="ep-circle--loading animation__loading"
+      class="ep-circle--loader animation__loading"
       :r="radius"
       :cx="position"
       :cy="position"
@@ -25,7 +25,7 @@
 import CircleMixin from "./circleMixin";
 
 export default {
-  name: "CircleProgress",
+  name: "CircleLoader",
   mixins: [CircleMixin],
   computed: {
     position() {

src/components/interface.js

@@ -13,7 +13,10 @@ const colorConfig = (defaultColor = "transparent") => ({
   },
 });
 
-export default {
+const validateLoaderProps = (loaderOptions) =>
+  Object.keys(loaderOptions).every((p) => options[p].validator(loaderOptions[p]));
+
+const options = {
   data: {
     type: Array,
     required: false,
@@ -167,6 +170,17 @@ export default {
   loader: {
     type: Object,
     required: false,
-    default: {},
+    default: () => ({}),
+    validator: (value) => {
+      const propsAllowed = Object.keys(value).every((prop) =>
+        ["thickness", "color", "lineMode", "line", "opacity"].includes(prop)
+      );
+      if (propsAllowed) {
+        return validateLoaderProps(value);
+      }
+      return false;
+    },
   },
 };
+
+export default options;

src/styles/animationsUsage.scss

@@ -17,7 +17,7 @@
   }
 }
 
-.ep-circle--loading {
+.ep-circle--loader {
   &.animation__loading {
     animation-name: ep-progress--loading, ep-progress--loading__rotation;
     animation-iteration-count: infinite !important;