Addded: ThemeSwitcher button animation.

StaticMania · Oct 18, 2024 · 0202d0f · 0202d0f
1 parent bb31748
commit 0202d0f
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 5 deletions.
diff --git a/components/ThemeSwitcher.vue b/components/ThemeSwitcher.vue
@@ -13,8 +13,11 @@ const toggleTheme = () => {
     <Button
       class="rounded-lg border border-metal-100 bg-white p-2.5 transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900"
       @click="() => toggleTheme()">
-      <PhosphorIconMoon v-if="colorMode.preference === 'dark'" :size="21" />
-      <PhosphorIconSunDim v-else color="black" :size="21" />
+      <PhosphorIconMoon
+        v-if="colorMode.preference === 'dark'"
+        v-motion-slide-top
+        :size="21" />
+      <PhosphorIconSunDim v-else v-motion-slide-top color="black" :size="21" />
     </Button>
   </ClientOnly>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -53,5 +53,6 @@ export default defineNuxtConfig({
     "nuxt-shiki",
     "@nuxtjs/color-mode",
     "nuxt-phosphor-icons",
+    "@vueuse/motion/nuxt",
   ],
 });
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^11.0.1",
+    "@vueuse/motion": "^2.2.6",
     "chart.js": "^4.4.3",
     "clsx": "^2.1.1",
     "deepmerge": "^4.3.1",

diff --git a/yarn.lock b/yarn.lock
@@ -1213,7 +1213,7 @@
     unimport "^3.9.0"
     untyped "^1.4.2"
 
-"@nuxt/kit@^3.13.1":
+"@nuxt/kit@^3.13.0", "@nuxt/kit@^3.13.1":
   version "3.13.2"
   resolved "https://registry.npmjs.org/@nuxt/kit/-/kit-3.13.2.tgz"
   integrity sha512-KvRw21zU//wdz25IeE1E5m/aFSzhJloBRAQtv+evcFeZvuroIxpIQuUqhbzuwznaUwpiWbmwlcsp5uOWmi4vwA==
@@ -2600,7 +2600,7 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz"
   integrity sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg==
 
-"@vueuse/core@10.11.1", "@vueuse/core@^10.11.0", "@vueuse/core@^10.8.0":
+"@vueuse/core@10.11.1", "@vueuse/core@^10.10.0", "@vueuse/core@^10.11.0", "@vueuse/core@^10.8.0":
   version "10.11.1"
   resolved "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz"
   integrity sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==
@@ -2640,6 +2640,20 @@
   resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.0.1.tgz"
   integrity sha512-dTFvuHFAjLYOiSd+t9Sk7xUiuL6jbfay/eX+g+jaipXXlwKur2VCqBCZX+jfu+2vROUGcUsdn3fJR9KkpadIOg==
 
+"@vueuse/motion@^2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@vueuse/motion/-/motion-2.2.6.tgz#26fe7b1f3aefd8159fdfbc1ce32dffa27296946c"
+  integrity sha512-gKFktPtrdypSv44SaW1oBJKLBiP6kE5NcoQ6RsAU3InemESdiAutgQncfPe/rhLSLCtL4jTAhMmFfxoR6gm5LQ==
+  dependencies:
+    "@vueuse/core" "^10.10.0"
+    "@vueuse/shared" "^10.10.0"
+    csstype "^3.1.3"
+    framesync "^6.1.2"
+    popmotion "^11.0.5"
+    style-value-types "^5.1.2"
+  optionalDependencies:
+    "@nuxt/kit" "^3.13.0"
+
 "@vueuse/nuxt@^10.11.0":
   version "10.11.1"
   resolved "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-10.11.1.tgz"
@@ -2662,7 +2676,7 @@
     local-pkg "^0.5.0"
     vue-demi ">=0.14.10"
 
-"@vueuse/shared@10.11.1", "@vueuse/shared@^10.11.0":
+"@vueuse/shared@10.11.1", "@vueuse/shared@^10.10.0", "@vueuse/shared@^10.11.0":
   version "10.11.1"
   resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz"
   integrity sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==
@@ -4565,6 +4579,13 @@ fraction.js@^4.3.7:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framesync@6.1.2, framesync@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.1.2.tgz#755eff2fb5b8f3b4d2b266dd18121b300aefea27"
+  integrity sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==
+  dependencies:
+    tslib "2.4.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
@@ -4971,6 +4992,11 @@ he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 highlight.js@^11.10.0:
   version "11.10.0"
   resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz"
@@ -7226,6 +7252,16 @@ pluralize@^8.0.0:
   resolved "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz"
   integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==
 
+popmotion@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.5.tgz#8e3e014421a0ffa30ecd722564fd2558954e1f7d"
+  integrity sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==
+  dependencies:
+    framesync "6.1.2"
+    hey-listen "^1.0.8"
+    style-value-types "5.1.2"
+    tslib "2.4.0"
+
 postcss-calc@^10.0.0:
   version "10.0.0"
   resolved "https://registry.npmjs.org/postcss-calc/-/postcss-calc-10.0.0.tgz"
@@ -8577,6 +8613,14 @@ strip-literal@^2.1.0:
   dependencies:
     js-tokens "^9.0.0"
 
+style-value-types@5.1.2, style-value-types@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.1.2.tgz#6be66b237bd546048a764883528072ed95713b62"
+  integrity sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "2.4.0"
+
 stylehacks@^7.0.2:
   version "7.0.2"
   resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.2.tgz"
@@ -8858,6 +8902,11 @@ tsc-alias@^1.8.10:
     normalize-path "^3.0.0"
     plimit-lit "^1.2.6"
 
+tslib@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^2.0.0, tslib@^2.0.3, tslib@^2.4.0, tslib@^2.6.2:
   version "2.6.3"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz"