feat(VSwitch): add size prop

packages/api-generator/src/locale/en/VSwitch.json

@@ -3,9 +3,10 @@
   "props": {
     "flat": "Display component without elevation. Default elevation for thumb is 4dp, `flat` resets it.",
     "indeterminate": "Sets an indeterminate state for the switch.",
-    "inset": "Controls the track and thumb styling\n- **tonal** (or `true`) enlarges the track to encompass the thumb\n- **material** applies the Material Design 3 treatment: an outlined track that fills when on and a thumb that morphs between states\n- **square** is the **material** variant with less round corners.",
+    "inset": "Controls the track and thumb styling\n- **tonal** (or `true`) enlarges the track to encompass the thumb\n- **material** applies the Material Design 3 treatment: an outlined track that fills when on and a thumb that morphs between states\n- **square** is the **material** variant with less round corners.\n\nNon-boolean values were introduced in v4.1.0.",
     "loading": "Displays circular progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color.",
-    "multiple": "Changes expected model to an array."
+    "multiple": "Changes expected model to an array.",
+    "size": "Scales the track and thumb. Accepts the predefined sizes **x-small**, **small**, **default**, **large**, and **x-large**, or a numeric value for a custom scale."
   },
   "events": {
     "update:indeterminate": "Event that is emitted when the component's indeterminate state changes."

packages/docs/src/data/new-in.json

@@ -526,6 +526,10 @@
     }
   },
   "VSwitch": {
+    "props": {
+      "size": "4.1.0",
+      "thumbColor": "4.1.0"
+    },
     "slots": {
       "thumb": "3.5.0",
       "track-false": "3.5.0",

packages/docs/src/examples/v-switch/prop-colors.vue

@@ -1,129 +1,47 @@
 <template>
   <v-card flat>
     <v-card-text>
-      <v-container fluid>
-        <v-row>
-          <v-col
-            cols="12"
-            md="4"
-            sm="4"
-          >
-            <v-switch
-              v-model="ex11"
-              color="red"
-              label="red"
-              value="red"
-              hide-details
-            ></v-switch>
-            <v-switch
-              v-model="ex11"
-              color="red-darken-3"
-              label="red-darken-3"
-              value="red-darken-3"
-              hide-details
-            ></v-switch>
-          </v-col>
-          <v-col
-            cols="12"
-            md="4"
-            sm="4"
-          >
-            <v-switch
-              v-model="ex11"
-              color="indigo"
-              label="indigo"
-              value="indigo"
-              hide-details
-            ></v-switch>
-            <v-switch
-              v-model="ex11"
-              color="indigo-darken-3"
-              label="indigo-darken-3"
-              value="indigo-darken-3"
-              hide-details
-            ></v-switch>
-          </v-col>
-          <v-col
-            cols="12"
-            md="4"
-            sm="4"
-          >
-            <v-switch
-              v-model="ex11"
-              color="orange"
-              label="orange"
-              value="orange"
-              hide-details
-            ></v-switch>
-            <v-switch
-              v-model="ex11"
-              color="orange-darken-3"
-              label="orange-darken-3"
-              value="orange-darken-3"
-              hide-details
-            ></v-switch>
-          </v-col>
-        </v-row>
+      <div class="d-flex justify-center align-center ga-4 mb-6">
+        <v-btn-toggle
+          v-model="variant"
+          variant="outlined"
+          divided
+          mandatory
+        >
+          <v-btn value="default">Default</v-btn>
+          <v-btn value="inset">Inset</v-btn>
+          <v-btn value="material">Material</v-btn>
+          <v-btn value="square">Square</v-btn>
+        </v-btn-toggle>
 
-        <v-row class="mt-12">
-          <v-col
-            cols="12"
-            md="4"
-            sm="4"
-          >
-            <v-switch
-              v-model="ex11"
-              color="primary"
-              label="primary"
-              value="primary"
-              hide-details
-            ></v-switch>
-            <v-switch
-              v-model="ex11"
-              color="secondary"
-              label="secondary"
-              value="secondary"
-              hide-details
-            ></v-switch>
-          </v-col>
-          <v-col
-            cols="12"
-            md="4"
-            sm="4"
-          >
-            <v-switch
-              v-model="ex11"
-              color="success"
-              label="success"
-              value="success"
-              hide-details
-            ></v-switch>
-            <v-switch
-              v-model="ex11"
-              color="info"
-              label="info"
-              value="info"
-              hide-details
-            ></v-switch>
-          </v-col>
+        <v-checkbox
+          v-model="icons"
+          label="Icons"
+          hide-details
+        ></v-checkbox>
+      </div>
+
+      <v-container fluid>
+        <v-row
+          v-for="(group, i) in groups"
+          :key="i"
+          :class="{ 'mt-12': i > 0 }"
+        >
           <v-col
+            v-for="(pair, j) in group"
+            :key="j"
             cols="12"
             md="4"
             sm="4"
           >
             <v-switch
+              v-for="color in pair"
+              :key="color"
               v-model="ex11"
-              color="warning"
-              label="warning"
-              value="warning"
-              hide-details
-            ></v-switch>
-            <v-switch
-              v-model="ex11"
-              color="error"
-              label="error"
-              value="error"
-              hide-details
+              v-bind="shared"
+              :color="color"
+              :label="color"
+              :value="color"
             ></v-switch>
           </v-col>
         </v-row>
@@ -133,15 +51,54 @@
 </template>
 
 <script setup>
-  const ex11 = ['red', 'indigo', 'orange', 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red-darken-3', 'indigo-darken-3', 'orange-darken-3']
+  const variant = ref('default')
+  const icons = ref(false)
+
+  const shared = computed(() => {
+    return {
+      inset: variant.value === 'default' ? undefined
+        : variant.value === 'inset' ? true
+          : variant.value,
+      'true-icon': icons.value ? 'mdi-check' : undefined,
+      'false-icon': icons.value ? 'mdi-close' : undefined,
+      'hide-details': true,
+    }
+  })
+
+  const groups = [
+    [['red', 'red-darken-3'], ['indigo', 'indigo-darken-3'], ['orange', 'orange-darken-3']],
+    [['primary', 'secondary'], ['success', 'info'], ['warning', 'error']],
+  ]
+
+  const ex11 = ref(groups.flat(2))
 </script>
 
 <script>
   export default {
     data () {
+      const groups = [
+        [['red', 'red-darken-3'], ['indigo', 'indigo-darken-3'], ['orange', 'orange-darken-3']],
+        [['primary', 'secondary'], ['success', 'info'], ['warning', 'error']],
+      ]
+
       return {
-        ex11: ['red', 'indigo', 'orange', 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red-darken-3', 'indigo-darken-3', 'orange-darken-3'],
+        variant: 'default',
+        icons: false,
+        groups,
+        ex11: groups.flat(2),
       }
     },
+    computed: {
+      shared () {
+        return {
+          inset: this.variant === 'default' ? undefined
+            : this.variant === 'inset' ? true
+              : this.variant,
+          'true-icon': this.icons ? 'mdi-check' : undefined,
+          'false-icon': this.icons ? 'mdi-close' : undefined,
+          'hide-details': true,
+        }
+      },
+    },
   }
 </script>