From e60e5a99261b062aa16a3f4e5e398d94ab49aa70 Mon Sep 17 00:00:00 2001
From: Kareem Dabbeet <42810389+KareemDa@users.noreply.github.com>
Date: Wed, 15 Jun 2022 16:13:56 +0300
Subject: [PATCH] docs(flex): switch examples to plain markup (#14559)

---
 .../src/examples/flex/flex-align-self.vue     | 114 +++++++++++++-----
 .../docs/src/examples/flex/flex-order.vue     |  33 +----
 .../src/examples/flex/margins-align-items.vue |  31 ++---
 packages/docs/src/examples/flex/margins.vue   |  59 +++------
 4 files changed, 112 insertions(+), 125 deletions(-)

diff --git a/packages/docs/src/examples/flex/flex-align-self.vue b/packages/docs/src/examples/flex/flex-align-self.vue
index ff9f8eea557..7d5d6db90dc 100644
--- a/packages/docs/src/examples/flex/flex-align-self.vue
+++ b/packages/docs/src/examples/flex/flex-align-self.vue
@@ -1,39 +1,87 @@
 <template>
   <div>
-    <v-card
-      v-for="j in justify"
-      :key="j"
-      class="d-flex mb-6"
-      color="grey lighten-2"
-      flat
-      height="100"
-      tile
-    >
-      <v-card
-        v-for="n in 3"
-        :key="n"
-        class="pa-2"
-        :class="[n === 2 && `align-self-${j}`]"
-        outlined
-        tile
-      >
-        {{ n === 2 ? 'Aligned flex item' : 'Flex item' }}
+    <v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
+      <v-card class="pa-2" outlined tile>
+        flex item
+      </v-card>
+
+      <v-card class="pa-2 align-self-start" outlined tile>
+        Aligned start
+      </v-card>
+
+      <v-card class="pa-2" outlined tile>
+        flex item
+      </v-card>
+    </v-card>
+
+    <v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
+      <v-card class="pa-2" outlined tile>
+        flex item
+      </v-card>
+
+      <v-card class="pa-2 align-self-center" outlined tile>
+        Aligned center
+      </v-card>
+
+      <v-card class="pa-2" outlined tile>
+        flex item
+      </v-card>
+    </v-card>
+
+    <v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
+      <v-card class="pa-2" outlined tile>
+        flex item
+      </v-card>
+
+      <v-card class="pa-2 align-self-end" outlined tile>
+        Aligned end
+      </v-card>
+
+      <v-card class="pa-2" outlined tile>
+        flex item
+      </v-card>
+    </v-card>
+
+    <v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
+      <v-card class="pa-2" outlined tile>
+        flex item
+      </v-card>
+
+      <v-card class="pa-2 align-self-baseline" outlined tile>
+        Aligned baseline
+      </v-card>
+
+      <v-card class="pa-2" outlined tile>
+        flex item
+      </v-card>
+    </v-card>
+
+    <v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
+      <v-card class="pa-2" outlined tile>
+        flex item
+      </v-card>
+
+      <v-card class="pa-2 align-self-auto" outlined tile>
+        Aligned auto
+      </v-card>
+
+      <v-card class="pa-2" outlined tile>
+        flex item
+      </v-card>
+    </v-card>
+
+    <v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
+      <v-card class="pa-2" outlined tile>
+        flex item
+      </v-card>
+
+      <v-card class="pa-2 align-self-stretch" outlined tile>
+        Aligned stretch
+      </v-card>
+
+      <v-card class="pa-2" outlined tile>
+        flex item
       </v-card>
     </v-card>
   </div>
 </template>
-
-<script>
-  export default {
-    data: () => ({
-      justify: [
-        'start',
-        'end',
-        'center',
-        'baseline',
-        'auto',
-        'stretch',
-      ],
-    }),
-  }
-</script>
diff --git a/packages/docs/src/examples/flex/flex-order.vue b/packages/docs/src/examples/flex/flex-order.vue
index d04da7a8240..fc5bc23bade 100644
--- a/packages/docs/src/examples/flex/flex-order.vue
+++ b/packages/docs/src/examples/flex/flex-order.vue
@@ -1,32 +1,11 @@
 <template>
   <div>
-    <v-card
-      class="d-flex flex-wrap-reverse"
-      color="grey lighten-2"
-      flat
-      tile
-    >
-      <v-card
-        class="order-3 pa-2"
-        outlined
-        tile
-      >
-        First flex item
-      </v-card>
-      <v-card
-        class="order-2 pa-2"
-        outlined
-        tile
-      >
-        Second flex item
-      </v-card>
-      <v-card
-        class="order-1 pa-2"
-        outlined
-        tile
-      >
-        Third flex item
-      </v-card>
+    <v-card class="d-flex flex-wrap-reverse" color="grey lighten-2" flat tile>
+      <v-card class="order-3 pa-2" outlined tile> First flex item </v-card>
+
+      <v-card class="order-2 pa-2" outlined tile> Second flex item </v-card>
+
+      <v-card class="order-1 pa-2" outlined tile> Third flex item </v-card>
     </v-card>
   </div>
 </template>
diff --git a/packages/docs/src/examples/flex/margins-align-items.vue b/packages/docs/src/examples/flex/margins-align-items.vue
index ebf31ca8819..6130fc01728 100644
--- a/packages/docs/src/examples/flex/margins-align-items.vue
+++ b/packages/docs/src/examples/flex/margins-align-items.vue
@@ -7,17 +7,13 @@
       tile
       height="200"
     >
-      <v-card
-        v-for="n in 3"
-        :key="n"
-        :class="n === 1 && 'mb-auto'"
-        class="pa-2"
-        outlined
-        tile
-      >
-        Flex item
-      </v-card>
+      <v-card class="pa-2 mb-auto" outlined tile> Flex item </v-card>
+
+      <v-card class="pa-2" outlined tile> Flex item </v-card>
+
+      <v-card class="pa-2" outlined tile> Flex item </v-card>
     </v-card>
+
     <v-card
       class="d-flex align-end flex-column"
       color="grey lighten-2"
@@ -25,16 +21,11 @@
       tile
       height="200"
     >
-      <v-card
-        v-for="n in 3"
-        :key="n"
-        :class="n === 3 && 'mt-auto'"
-        class="pa-2"
-        outlined
-        tile
-      >
-        Flex item
-      </v-card>
+      <v-card class="pa-2" outlined tile> Flex item </v-card>
+
+      <v-card class="pa-2" outlined tile> Flex item </v-card>
+
+      <v-card class="pa-2 mt-auto" outlined tile> Flex item </v-card>
     </v-card>
   </div>
 </template>
diff --git a/packages/docs/src/examples/flex/margins.vue b/packages/docs/src/examples/flex/margins.vue
index 3023e5659cc..eb2f8ab5bb6 100644
--- a/packages/docs/src/examples/flex/margins.vue
+++ b/packages/docs/src/examples/flex/margins.vue
@@ -1,56 +1,25 @@
 <template>
   <div>
-    <v-card
-      class="d-flex mb-6"
-      color="grey lighten-2"
-      flat
-      tile
-    >
-      <v-card
-        v-for="n in 3"
-        :key="n"
-        class="pa-2"
-        outlined
-        tile
-      >
+    <v-card class="d-flex mb-6" color="grey lighten-2" flat tile>
+      <v-card v-for="n in 3" :key="n" class="pa-2" outlined tile>
         Flex item
       </v-card>
     </v-card>
 
-    <v-card
-      class="d-flex mb-6"
-      color="grey lighten-2"
-      flat
-      tile
-    >
-      <v-card
-        v-for="n in 3"
-        :key="n"
-        :class="n === 1 && 'mr-auto'"
-        class="pa-2"
-        outlined
-        tile
-      >
-        Flex item
-      </v-card>
+    <v-card class="d-flex mb-6" color="grey lighten-2" flat tile>
+      <v-card class="pa-2 mr-auto" outlined tile> Flex item </v-card>
+
+      <v-card class="pa-2" outlined tile> Flex item </v-card>
+
+      <v-card class="pa-2" outlined tile> Flex item </v-card>
     </v-card>
 
-    <v-card
-      class="d-flex mb-6"
-      color="grey lighten-2"
-      flat
-      tile
-    >
-      <v-card
-        v-for="n in 3"
-        :key="n"
-        :class="n === 3 && 'ml-auto'"
-        class="pa-2"
-        outlined
-        tile
-      >
-        Flex item
-      </v-card>
+    <v-card class="d-flex" color="grey lighten-2" flat tile>
+      <v-card class="pa-2" outlined tile> Flex item </v-card>
+
+      <v-card class="pa-2" outlined tile> Flex item </v-card>
+
+      <v-card class="pa-2 ml-auto" outlined tile> Flex item </v-card>
     </v-card>
   </div>
 </template>