chore: mark broken code in Vue 3 for further fixes

Author: setaman

src/App.vue

@@ -38,7 +38,7 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
-        <vue-ellipse-progress
+        <!--<vue-ellipse-progress
           :size="200"
           :progress="progress"
           :legendValue="1315.56"
@@ -59,7 +59,7 @@
               {{ formattedPrice(counterTick.currentValue) }}
             </span>
           </template>
-        </vue-ellipse-progress>
+        </vue-ellipse-progress>-->
       </div>
       <vue-ellipse-progress
         dot="20 green"

src/components/Circle/CircleContainer.vue

@@ -3,15 +3,15 @@
     <svg class="ep-svg" :height="size" :width="size" xmlns="http://www.w3.org/2000/svg">
       <g class="ep-circle--container">
         <defs>
-          <gradient v-if="isColorGradient" :color="color" type="progress" :id="_uid" />
-          <gradient v-if="isColorFillGradient" :color="colorFill" type="progress-fill" :id="_uid" />
-          <gradient v-if="isEmptyColorGradient" :color="emptyColor" type="empty" :id="_uid" />
-          <gradient v-if="isEmptyColorFillGradient" :color="emptyColorFill" type="empty-fill" :id="_uid" />
+          <gradient v-if="isColorGradient" :color="color" type="progress" :id="id" />
+          <gradient v-if="isColorFillGradient" :color="colorFill" type="progress-fill" :id="id" />
+          <gradient v-if="isEmptyColorGradient" :color="emptyColor" type="empty" :id="id" />
+          <gradient v-if="isEmptyColorFillGradient" :color="emptyColorFill" type="empty-fill" :id="id" />
         </defs>
-        <component :is="circleType" v-bind="$props" :id="_uid" />
+        <component :is="circleType" v-bind="$props" :id="id" />
       </g>
     </svg>
-    <circle-dot v-if="dot" v-bind="$props" :id="_uid" />
+    <circle-dot v-if="dot" v-bind="$props" :id="id" />
   </div>
 </template>
 
@@ -48,6 +48,8 @@ export default {
       type: [Number, String, Object],
       required: false,
     },
+    // Temp Fix
+    id: Number,
   },
   computed: {
     circleType() {

src/components/Circle/CircleDot.vue

@@ -62,7 +62,9 @@ export default {
         borderRadius: `${this.dotSize / 2}px`,
         width: `${this.dotSize}px`,
         backgroundColor: this.dotColor,
-        ...this.dot,
+        // eslint-disable-next-line max-len
+        // FIXME: this is passed as String (e.g "20 green") and destructed ({0:2, 0:0...}), causing CSSStyleDeclaration Error
+        // ...this.dot,
         transitionDuration: this.loading || !this.dataIsAvailable ? "0s" : this.animationDuration,
         height: `${this.dotSize}px`,
       };

src/components/Counter.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="ep-legend--value__counter">
     <slot :counterTick="counterProps"> </slot>
-    <span v-if="!$scopedSlots.default">{{ formattedValue }}</span>
+    <!--<span v-if="!$scopedSlots.default">{{ formattedValue }}</span>-->
   </span>
 </template>
 

src/components/VueEllipseProgress.vue

@@ -10,6 +10,7 @@
       <circle-container
         v-for="(options, i) in circlesData"
         :key="i"
+        :id="i"
         v-bind="options"
         :multiple="isMultiple"
         :index="i"
@@ -25,14 +26,15 @@
           :style="{ fontSize, color: fontColor }"
         >
           <counter :value="legendVal" :animation="animation" :loading="loading">
-            <template v-slot:default="{ counterTick }">
+            <!--FIXME: This is completely broken in Vue 3-->
+            <!--<template v-slot:default="{ counterTick }">
               <slot v-if="$scopedSlots.default" :counterTick="counterTick"></slot>
               <span v-if="legendFormatter">
                 <span v-if="isHTML" v-html="legendFormatter(counterTick)"></span>
                 <span v-else>{{ legendFormatter(counterTick) }}</span>
               </span>
               <span v-else-if="!$scopedSlots.default">{{ counterTick.currentFormattedValue }}</span>
-            </template>
+            </template>-->
           </counter>
           <slot name="legend-value"></slot>
         </div>
@@ -91,6 +93,9 @@ export default {
       return [this.$props];
     },
   },
+  beforeCreate() {
+    console.log(this)
+  }
 };
 </script>