feat: add animation to legend toggle

setaman · Jul 15, 2021 · 885fbda · 885fbda
1 parent 74f40f1
commit 885fbda
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 16 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -3,7 +3,7 @@
     <div class="ep-test-card" :style="{ maxHeight: size.height + 2000 + 'px' }">
       <div>
         <label for="progress"> Progress </label>
-        <input v-model="progress" max="100" min="-100" type="number" id="progress" />
+        <input v-model.number="progress" max="100" min="-100" type="number" id="progress" />
         <button @click="updateProgress">Update</button>
         <button @click="updateTasksDone">Update Tasks</button>
         <label for="size"> Size </label>
@@ -32,7 +32,7 @@
         </label>
         <label for="line-mode">
           Line mode
-          <select v-model="lineMode">
+          <select id="line-mode" v-model="lineMode">
             <option v-for="option in lineModes" :key="option" :value="option">{{ option }}</option>
           </select>
         </label>
@@ -51,8 +51,11 @@
           :determinate="determinate"
           :size="size"
           :line-mode="lineMode"
+          :loading="loading"
           animation="default 1500 1000"
+          :hide-legend="lineMode === 'in'"
           :legend="-123.1"
+          font-size="2rem"
         >
           <template #legend-caption>
             <p>hello</p>

diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
@@ -10,23 +10,26 @@
       <circle-container v-for="(options, i) in normalizedCircles" :key="i" :options="options" />
       <div class="ep-legend--container" :style="{ maxWidth: `${size}px` }">
         <div
+          v-if="!isMultiple"
           class="ep-legend--value"
-          v-if="!hideLegend && !isMultiple"
           :class="[legendClass, { 'ep-hidden': shouldHideLegendValue }]"
-          :style="{ fontSize, color: fontColor }"
+          :style="{ height: `${legendHeight}px`, fontSize, color: fontColor }"
+          style="transition: 0.3s"
         >
-          <counter :value="computedLegend" :animation="normalizedCircles[0].animation" :loading="loading">
-            <template #default="{ counterTick }">
-              <template v-if="legendFormatter">
-                <span v-if="isHTML" v-html="legendFormatter(counterTick)"></span>
-                <span v-else>{{ legendFormatter(counterTick) }}</span>
+          <div ref="legend">
+            <counter :value="computedLegend" :animation="normalizedCircles[0].animation" :loading="loading">
+              <template #default="{ counterTick }">
+                <template v-if="legendFormatter">
+                  <span v-if="isHTML" v-html="legendFormatter(counterTick)"></span>
+                  <span v-else>{{ legendFormatter(counterTick) }}</span>
+                </template>
+                <slot v-else :counterTick="counterTick">
+                  <span>{{ counterTick.currentFormattedValue }}</span>
+                </slot>
               </template>
-              <slot v-else :counterTick="counterTick">
-                <span>{{ counterTick.currentFormattedValue }}</span>
-              </slot>
-            </template>
-          </counter>
-          <slot name="legend"></slot>
+            </counter>
+            <slot name="legend"></slot>
+          </div>
         </div>
         <slot name="legend-caption"></slot>
       </div>
@@ -45,6 +48,16 @@ export default {
   name: "VueEllipseProgress",
   components: { Counter, CircleContainer },
   props,
+  data: () => ({
+    legendHeight: null,
+  }),
+  watch: {
+    hideLegend() {
+      this.$nextTick(() => {
+        this.legendHeight = this.hideLegend ? 0 : this.$refs.legend.clientHeight;
+      });
+    },
+  },
   computed: {
     computedLegend() {
       if (this.loading || this.noData) {
@@ -53,7 +66,7 @@ export default {
       return this.legend ? this.legend : getNumberIfValid(this.progress) || 0;
     },
     shouldHideLegendValue() {
-      return !this.isDataAvailable || this.loading;
+      return !this.isDataAvailable || this.loading || this.hideLegend;
     },
     isDataAvailable() {
       return isValidNumber(this.progress) && !this.noData;
@@ -98,6 +111,12 @@ export default {
       return normalizedCircles;
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      console.log(this.$refs.legend.clientHeight);
+      this.legendHeight = this.$refs.legend.clientHeight;
+    });
+  },
 };
 </script>