docs(VChipGroup): clean-up examples

vuetifyjs · Apr 12, 2024 · e54966b · e54966b
1 parent 62a5c3c
commit e54966b
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 160 deletions.
diff --git a/packages/docs/src/examples/v-chip-group/misc-product-card.vue b/packages/docs/src/examples/v-chip-group/misc-product-card.vue
@@ -4,10 +4,10 @@
     max-width="400"
   >
     <v-card-title>
-      <h2 class="text-h4">
-        Shirt Blouse
-      </h2>
+      <h2 class="text-h4">Shirt Blouse</h2>
+
       <v-spacer></v-spacer>
+
       <span class="text-h6">$44.50</span>
     </v-card-title>
 
@@ -28,20 +28,20 @@
         <v-chip
           v-for="size in sizes"
           :key="size"
+          :text="size"
           :value="size"
-        >
-          {{ size }}
-        </v-chip>
+          variant="outlined"
+        ></v-chip>
       </v-chip-group>
     </v-card-text>
 
     <v-card-actions>
       <v-btn
         color="deep-purple-accent-4"
+        text="Add to Cart"
+        variant="flat"
         block
-      >
-        Add to Cart
-      </v-btn>
+      ></v-btn>
     </v-card-actions>
   </v-card>
 </template>

diff --git a/packages/docs/src/examples/v-chip-group/misc-toothbrush-card.vue b/packages/docs/src/examples/v-chip-group/misc-toothbrush-card.vue
@@ -4,10 +4,10 @@
     max-width="400"
   >
     <v-card-title>
-      <h2 class="text-h4">
-        Toothbrush
-      </h2>
+      <h2 class="text-h4">Toothbrush</h2>
+
       <v-spacer></v-spacer>
+
       <span class="text-h6">$4.99</span>
     </v-card-title>
 
@@ -23,31 +23,31 @@
 
       <v-chip-group
         v-model="selection"
-        selected-class="text-deep-purple-accent-4"
+        variant="flat"
         mandatory
       >
-        <v-chip>Extra Soft</v-chip>
-        <v-chip>Soft</v-chip>
-        <v-chip>Medium</v-chip>
-        <v-chip>Hard</v-chip>
+        <v-chip text="Extra Soft" border></v-chip>
+        <v-chip text="Soft" border></v-chip>
+        <v-chip text="Medium" border></v-chip>
+        <v-chip text="Hard" border></v-chip>
       </v-chip-group>
     </v-card-text>
 
     <v-card-actions>
       <v-btn
-        color="deep-purple-accent-4"
+        color="secondary"
+        text="Add to Cart"
+        variant="flat"
         block
-      >
-        Add to Cart
-      </v-btn>
+      ></v-btn>
     </v-card-actions>
   </v-card>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
-  const selection = ref(2)
+  const selection = shallowRef(2)
 </script>
 
 <script>

diff --git a/packages/docs/src/examples/v-chip-group/prop-column.vue b/packages/docs/src/examples/v-chip-group/prop-column.vue
@@ -1,47 +1,36 @@
 <template>
-  <v-row justify="center">
-    <v-col
-      cols="12"
-      lg="5"
-      md="6"
-      sm="7"
+  <v-sheet
+    class="mx-auto"
+    elevation="10"
+    max-width="300"
+    rounded="xl"
+  >
+    <v-sheet
+      class="pa-3 bg-primary text-right"
+      rounded="t-xl"
     >
-      <v-sheet
-        elevation="10"
-        rounded="xl"
-      >
-        <v-sheet
-          class="pa-3 bg-primary text-right"
-          rounded="t-xl"
-        >
-          <v-btn icon>
-            <v-icon>mdi-content-save-cog-outline</v-icon>
-          </v-btn>
+      <v-btn icon="mdi-content-save-cog-outline"></v-btn>
 
-          <v-btn
-            class="ms-2"
-            icon
-          >
-            <v-icon>mdi-check-bold</v-icon>
-          </v-btn>
-        </v-sheet>
+      <v-btn
+        class="ms-2"
+        icon="mdi-check-bold"
+      ></v-btn>
+    </v-sheet>
 
-        <div class="pa-4">
-          <v-chip-group
-            selected-class="text-primary"
-            column
-          >
-            <v-chip
-              v-for="tag in tags"
-              :key="tag"
-            >
-              {{ tag }}
-            </v-chip>
-          </v-chip-group>
-        </div>
-      </v-sheet>
-    </v-col>
-  </v-row>
+    <div class="pa-4">
+      <v-chip-group
+        selected-class="text-primary"
+        column
+      >
+        <v-chip
+          v-for="tag in tags"
+          :key="tag"
+        >
+          {{ tag }}
+        </v-chip>
+      </v-chip-group>
+    </div>
+  </v-sheet>
 </template>
 
 <script setup>

diff --git a/packages/docs/src/examples/v-chip-group/prop-filter.vue b/packages/docs/src/examples/v-chip-group/prop-filter.vue
@@ -3,122 +3,111 @@
     class="mx-auto"
     max-width="400"
   >
-    <v-toolbar
-      color="deep-purple-accent-4"
-      dark
-      flat
-    >
-      <v-btn icon>
-        <v-icon>mdi-close</v-icon>
-      </v-btn>
+    <v-toolbar color="deep-purple-accent-4">
+      <v-btn icon="mdi-close"></v-btn>
+
       <v-toolbar-title>Filter results</v-toolbar-title>
     </v-toolbar>
 
     <v-card-text>
-      <h2 class="text-h6 mb-2">
-        Choose amenities
-      </h2>
+      <h2 class="text-h6 mb-2">Choose amenities</h2>
 
       <v-chip-group
         v-model="amenities"
         column
         multiple
       >
         <v-chip
+          text="Elevator"
           variant="outlined"
           filter
-        >
-          Elevator
-        </v-chip>
+        ></v-chip>
+
         <v-chip
+          text="Washer / Dryer"
           variant="outlined"
           filter
-        >
-          Washer / Dryer
-        </v-chip>
+        ></v-chip>
+
         <v-chip
+          text="Fireplace"
           variant="outlined"
           filter
-        >
-          Fireplace
-        </v-chip>
+        ></v-chip>
+
         <v-chip
+          text="Wheelchair access"
           variant="outlined"
           filter
-        >
-          Wheelchair access
-        </v-chip>
+        ></v-chip>
+
         <v-chip
+          text="Dogs ok"
           variant="outlined"
           filter
-        >
-          Dogs ok
-        </v-chip>
+        ></v-chip>
+
         <v-chip
+          text="Cats ok"
           variant="outlined"
           filter
-        >
-          Cats ok
-        </v-chip>
+        ></v-chip>
       </v-chip-group>
     </v-card-text>
 
     <v-card-text>
-      <h2 class="text-h6 mb-2">
-        Choose neighborhoods
-      </h2>
+      <h2 class="text-h6 mb-2">Choose neighborhoods</h2>
 
       <v-chip-group
         v-model="neighborhoods"
         column
         multiple
       >
         <v-chip
+          text="Snowy Rock Place"
           variant="outlined"
           filter
-        >
-          Snowy Rock Place
-        </v-chip>
+        ></v-chip>
+
         <v-chip
+          text="Honeylane Circle"
           variant="outlined"
           filter
-        >
-          Honeylane Circle
-        </v-chip>
+        ></v-chip>
+
         <v-chip
+          text="Donna Drive"
           variant="outlined"
           filter
-        >
-          Donna Drive
-        </v-chip>
+        ></v-chip>
+
         <v-chip
+          text="Elaine Street"
           variant="outlined"
           filter
-        >
-          Elaine Street
-        </v-chip>
+        ></v-chip>
+
         <v-chip
+          text="Court Street"
           variant="outlined"
           filter
-        >
-          Court Street
-        </v-chip>
+        ></v-chip>
+
         <v-chip
+          text="Kennedy Park"
           variant="outlined"
           filter
-        >
-          Kennedy Park
-        </v-chip>
+        ></v-chip>
       </v-chip-group>
     </v-card-text>
   </v-card>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
-  const amenities = ref([1, 4])
-  const neighborhoods = ref([1])
+  const amenities = shallowRef([1, 4])
+  const neighborhoods = shallowRef([1])
 </script>
 
 <script>

diff --git a/packages/docs/src/examples/v-chip-group/prop-mandatory.vue b/packages/docs/src/examples/v-chip-group/prop-mandatory.vue
@@ -1,24 +1,16 @@
 <template>
-  <v-row justify="space-around">
-    <v-col cols="auto">
-      <v-sheet
-        class="py-4 px-1"
-        elevation="10"
-      >
-        <v-chip-group
-          selected-class="text-primary"
-          mandatory
-        >
-          <v-chip
-            v-for="tag in tags"
-            :key="tag"
-          >
-            {{ tag }}
-          </v-chip>
-        </v-chip-group>
-      </v-sheet>
-    </v-col>
-  </v-row>
+  <v-sheet class="py-4 px-1">
+    <v-chip-group
+      selected-class="text-primary"
+      mandatory
+    >
+      <v-chip
+        v-for="tag in tags"
+        :key="tag"
+        :text="tag"
+      ></v-chip>
+    </v-chip-group>
+  </v-sheet>
 </template>
 
 <script setup>