From 63b65b74400c4ea8fb1f4faf05e1c12cba6250f1 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Mon, 18 Dec 2023 07:30:38 +0100
Subject: [PATCH] VueUiWheel improved animation

---
 package-lock.json               |  4 ++--
 package.json                    |  2 +-
 src/App.vue                     |  2 +-
 src/Box.vue                     |  9 ++++++++-
 src/components/vue-ui-wheel.vue | 17 +++++++++++++++++
 5 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ad29d445..38764984 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "1.9.27",
+  "version": "1.9.28",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "1.9.27",
+      "version": "1.9.28",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index 83cc0019..c66f7fb2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.28",
+  "version": "1.9.29",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/App.vue b/src/App.vue
index e5eb247c..600819bc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3513,7 +3513,7 @@ const updateStep = ref(0);
         <h4 style="color: #5f8bee">Manual testing arena</h4>
       </div>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_wheel)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_wheel)" open>
         <template #title>VueUiWheel</template>
         <template #dev>
           <WheelTest
diff --git a/src/Box.vue b/src/Box.vue
index d435f563..20c835fa 100644
--- a/src/Box.vue
+++ b/src/Box.vue
@@ -2,6 +2,13 @@
 import { ref } from "vue";
 const showConfig = ref(false);
 
+const props = defineProps({
+    open: {
+        type: Boolean,
+        default: false
+    }
+})
+
 const emit = defineEmits(['copy'])
 
 const isCopying = ref(false);
@@ -18,7 +25,7 @@ function copy() {
 
 <template>
     <div style="width: 100%;margin-top:12px; background: #2A2A2A;">
-        <details>
+        <details :open="open">
             <summary style="user-select:none;cursor:pointer;height:30px;background:linear-gradient(to right, #2A2A2A, #1A1A1A);line-height:24px;font-size:24px;padding:12px;">
                 <span style="color:#42d392">
                     <slot name="title"></slot>
diff --git a/src/components/vue-ui-wheel.vue b/src/components/vue-ui-wheel.vue
index d9a557b3..96c5996f 100644
--- a/src/components/vue-ui-wheel.vue
+++ b/src/components/vue-ui-wheel.vue
@@ -195,6 +195,7 @@ defineExpose({
                 :stroke="tick.color"
                 :stroke-width="5"
                 :stroke-linecap="wheelConfig.style.chart.layout.wheel.ticks.rounded ? 'round' : 'butt'"
+                :class="{ 'vue-ui-tick-animated': wheelConfig.style.chart.animation.use && i <= activeValue }"
             />
             <circle 
                 v-if="wheelConfig.style.chart.layout.innerCircle.show"
@@ -230,4 +231,20 @@ defineExpose({
     user-select: none;
     position: relative;
 }
+.vue-ui-tick-animated {
+    animation: animate-tick 0.3s ease-in;
+    transform-origin: center;
+}
+
+@keyframes animate-tick {
+    0% {
+        stroke-width: 8;
+    }
+    80% {
+        stroke-width: 6;
+    }
+    100% {
+        stroke-width: 5;
+    }
+}
 </style>
\ No newline at end of file