docs(transitions): update todo example

vuetifyjs · May 26, 2023 · ff91b6c · ff91b6c
1 parent 85c36e4
commit ff91b6c
Showing 1 changed file with 22 additions and 33 deletions.
diff --git a/packages/docs/src/examples/transitions/misc-todo.vue b/packages/docs/src/examples/transitions/misc-todo.vue
@@ -6,14 +6,14 @@
       variant="solo"
       @keydown.enter="create"
     >
-      <template v-slot:append>
+      <template v-slot:append-inner>
         <v-fade-transition>
-          <v-icon
-            v-if="newTask"
+          <v-btn
+            v-show="newTask"
+            icon="mdi-plus-circle"
+            variant="text"
             @click="create"
-          >
-            mdi-plus-circle
-          </v-icon>
+          ></v-btn>
         </v-fade-transition>
       </template>
     </v-text-field>
@@ -65,39 +65,28 @@
             :key="`${i}-divider`"
           ></v-divider>
 
-          <v-list-item>
-            <v-list-item-action>
-              <v-checkbox
-                v-model="task.done"
-                :color="task.done && 'grey' || 'primary'"
-              >
-                <template v-slot:label>
-                  <div
-                    :class="task.done && 'text-grey' || 'text-primary'"
-                    class="ms-4"
-                    v-text="task.text"
-                  ></div>
-                </template>
-              </v-checkbox>
-            </v-list-item-action>
-
-            <v-spacer></v-spacer>
-
-            <v-scroll-x-transition>
-              <v-icon
-                v-if="task.done"
-                color="success"
-              >
-                mdi-check
-              </v-icon>
-            </v-scroll-x-transition>
+          <v-list-item @click="task.done = !task.done">
+            <template v-slot:prepend>
+              <v-checkbox-btn v-model="task.done" color="grey"></v-checkbox-btn>
+            </template>
+
+            <v-list-item-title>
+              <span :class="task.done ? 'text-grey' : 'text-primary'">{{ task.text }}</span>
+            </v-list-item-title>
+
+            <template v-slot:append>
+              <v-expand-x-transition>
+                <v-icon v-if="task.done" color="success">
+                  mdi-check
+                </v-icon>
+              </v-expand-x-transition>
+            </template>
           </v-list-item>
         </template>
       </v-slide-y-transition>
     </v-card>
   </v-container>
 </template>
-
 <script>
   export default {
     data: () => ({