feat(VDivider): add variant prop

Author: J-Sek

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

@@ -4,6 +4,7 @@
     "inset": "Adds indentation (72px) for **normal** dividers, reduces max height for **vertical**.",
     "length": "Sets the dividers length. Default unit is px.",
     "thickness": "Sets the dividers thickness. Default unit is px.",
+    "variant": "Applies `border-style`.",
     "vertical": "Displays dividers vertically."
   }
 }

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

@@ -128,7 +128,8 @@
   },
   "VDivider": {
     "props": {
-      "gradient": "3.11.0"
+      "gradient": "3.11.0",
+      "variant": "3.11.0"
     }
   },
   "VExpansionPanels": {

packages/docs/src/examples/v-divider/prop-gradient.vue

@@ -1,24 +1,26 @@
 <template>
   <v-container class="d-flex">
     <div class="d-flex flex-column gr-4 py-8 flex-grow-1">
-      <v-divider class="my-3" color="red" style="height: 300px;" thickness="3" gradient></v-divider>
-      <v-divider thickness="3" gradient>OR</v-divider>
+      <v-divider color="red" opacity=".7" thickness="3" gradient></v-divider>
+      <v-divider opacity=".7" thickness="3" gradient>OR</v-divider>
       <v-divider
         color="primary"
-        style="border-style: double"
+        opacity=".7"
         thickness="12"
+        variant="double"
         gradient
       >
         AND
       </v-divider>
     </div>
     <div class="d-flex gc-8 px-8">
-      <v-divider color="red" thickness="3" gradient vertical></v-divider>
-      <v-divider thickness="3" gradient vertical>OR</v-divider>
+      <v-divider color="red" opacity=".7" thickness="3" gradient vertical></v-divider>
+      <v-divider opacity=".7" thickness="3" gradient vertical>OR</v-divider>
       <v-divider
         color="primary"
-        style="border-style: double"
+        opacity=".7"
         thickness="12"
+        variant="double"
         gradient
         vertical
       >

packages/vuetify/src/components/VDivider/VDivider.tsx

@@ -10,9 +10,15 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { computed } from 'vue'
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
+// Types
+import type { PropType } from 'vue'
+
 type DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'height' | 'width'
 type DividerStyles = Partial<Record<DividerKey, string>>
 
+const allowedVariants = ['dotted', 'dashed', 'solid', 'double'] as const
+type Variant = typeof allowedVariants[number]
+
 export const makeVDividerProps = propsFactory({
   color: String,
   gradient: Boolean,
@@ -21,6 +27,11 @@ export const makeVDividerProps = propsFactory({
   opacity: [Number, String],
   thickness: [Number, String],
   vertical: Boolean,
+  variant: {
+    type: String as PropType<Variant>,
+    default: 'solid',
+    validator: (v: any) => allowedVariants.includes(v),
+  },
 
   ...makeComponentProps(),
   ...makeThemeProps(),
@@ -66,6 +77,7 @@ export const VDivider = genericComponent()({
             dividerStyles.value,
             textColorStyles.value,
             { '--v-border-opacity': props.opacity },
+            { 'border-style': props.variant },
             props.style,
           ]}
           aria-orientation={