chore: fix usage + minor tweaks after rebase

Author: J-Sek

packages/docs/src/examples/v-morphing-icon/prop-dark.vue

@@ -1,37 +1,42 @@
 <template>
-  <v-row align="center" justify="center">
-    <v-col cols="auto">
-      <v-sheet class="pa-8 d-flex align-center justify-center" color="white" rounded>
-        <v-morphing-icon :color="color" :icon="icon" size="40"></v-morphing-icon>
-      </v-sheet>
+  <div>
+    <div class="d-flex align-center justify-center ga-6">
+      <div>
+        <div class="text-center text-body-small my-2">Light background</div>
+        <v-sheet class="px-12 py-6" color="white">
+          <v-morphing-icon
+            :color="color"
+            :icon="icon"
+            size="40"
+          ></v-morphing-icon>
+        </v-sheet>
+      </div>
 
-      <div class="text-center text-caption mt-2">Light background</div>
-    </v-col>
+      <div>
+        <div class="text-center text-body-small my-2">Dark background</div>
+        <v-sheet class="px-12 py-6" color="grey-darken-4">
+          <v-morphing-icon
+            :color="color"
+            :icon="icon"
+            size="40"
+            dark
+          ></v-morphing-icon>
+        </v-sheet>
+      </div>
+    </div>
 
-    <v-col cols="auto">
-      <v-sheet class="pa-8 d-flex align-center justify-center" color="grey-darken-4" rounded>
-        <v-morphing-icon :color="color" :icon="icon" size="40" dark></v-morphing-icon>
-      </v-sheet>
-
-      <div class="text-center text-caption mt-2">Dark background</div>
-    </v-col>
-
-    <v-col class="text-center" cols="12">
-      <v-btn text="Change Icon" @click="toggle"></v-btn>
-    </v-col>
-  </v-row>
+    <div class="text-center my-6">
+      <v-btn text="Change Icon" @click="index++"></v-btn>
+    </div>
+  </div>
 </template>
 
 <script setup>
-  import { computed, shallowRef } from 'vue'
+  import { shallowRef, toRef } from 'vue'
 
   const icons = ['mdi-heart', 'mdi-star', 'mdi-account', 'mdi-home', 'mdi-bell']
   const colors = [null, 'primary', 'red', 'purple', '#fc3']
   const index = shallowRef(0)
-  const icon = computed(() => icons[index.value % icons.length])
-  const color = computed(() => colors[index.value % icons.length])
-
-  function toggle () {
-    index.value++
-  }
+  const icon = toRef(() => icons[index.value % icons.length])
+  const color = toRef(() => colors[index.value % icons.length])
 </script>

packages/docs/src/examples/v-morphing-icon/usage.vue

@@ -7,16 +7,19 @@
     :script="script"
   >
     <div class="d-flex flex-column justify-center align-center ga-3">
-      <v-btn :color="color" icon @click="next">
+      <v-btn :color="color" size="x-large" icon @click="next">
         <v-morphing-icon :icon="icon" v-bind="props"></v-morphing-icon>
       </v-btn>
-      <span class="text-caption">Click to change icon</span>
+      <span>☝️</span>
+      <span class="text-body-medium">Click to change icon</span>
     </div>
 
     <template v-slot:configuration>
       <v-select
         v-model="color"
         :items="colors"
+        item-title="title"
+        item-value="hex"
         label="Color"
         clearable
       ></v-select>
@@ -29,19 +32,22 @@
   const name = 'v-morphing-icon'
   const model = shallowRef('default')
   const options = []
-  import { getForeground, parseColor } from 'vuetify/lib/util/colorUtils'
-  import { useTheme } from 'vuetify'
-
-  const theme = useTheme()
-  const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'surface-variant']
+  const colors = [
+    { title: 'Red', hex: '#f44336', isDark: true },
+    { title: 'Purple', hex: '#9c27b0', isDark: true },
+    { title: 'Blue', hex: '#2196f3', isDark: true },
+    { title: 'Lime', hex: '#cddc39', isDark: false },
+    { title: 'Orange', hex: '#ff9800', isDark: false },
+  ]
   const color = shallowRef()
   const dark = shallowRef(false)
 
   watch(color, val => {
-    if (!val) return
-    const hex = theme.current.value.colors[color.value]
-    if (!hex) return
-    dark.value = getForeground(parseColor(hex)) === '#fff'
+    if (!val) {
+      dark.value = false
+      return
+    }
+    dark.value = colors.find(c => c.hex === val)?.isDark ?? false
   })
 
   const icons = [
@@ -55,7 +61,7 @@
 
   const props = computed(() => {
     return {
-      dark: dark.value || undefined,
+      dark: dark.value || (color.value ? false : undefined),
     }
   })
 
@@ -84,7 +90,7 @@
 
   const code = computed(() => {
     const btnProps = color.value ? ` color="${color.value}"` : ''
-    return `<v-btn${btnProps} icon @click="next">
+    return `<v-btn${btnProps} size="x-large" icon @click="next">
   <${name} :icon="icon"${propsToString(props.value)}></${name}>
 </v-btn>`
   })

packages/docs/src/pages/en/components/morphing-icons.md

@@ -22,7 +22,7 @@ The `v-morphing-icon` component provides smooth animated transitions between ico
 
 ::: warning
 
-This feature requires [v4.0.0](/getting-started/release-notes/?version=v4.0.0)
+This feature requires [v4.0.1](/getting-started/release-notes/?version=v4.0.1)
 
 :::
 

packages/vuetify/src/labs/VMorphingIcon/VMorphingIcon.scss

@@ -16,6 +16,7 @@
     &__stack {
       overflow: hidden;
       filter: contrast(200) blur(0.2px);
+      margin: -.5px; // hides glow bleading when zoomed in
       isolation: isolate;
       display: grid;
       place-items: center;