feat(VDivider): add content-offset prop

Author: J-Sek

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

@@ -1,5 +1,6 @@
 {
   "props": {
+    "contentOffset": "Increases content spacing from the lines. When passed as an array, the second value shifts slot content down (or right in vertical mode).",
     "gradient": "Adds fading effect for both sides.",
     "inset": "Adds indentation (72px) for **normal** dividers, reduces max height for **vertical**.",
     "length": "Sets the dividers length. Default unit is px.",

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

@@ -129,6 +129,7 @@
   "VDivider": {
     "props": {
       "gradient": "3.11.0",
+      "contentOffset": "3.11.0",
       "variant": "3.11.0"
     }
   },

packages/docs/src/examples/v-divider/slot-default.vue

@@ -0,0 +1,10 @@
+<template>
+  <v-container class="d-flex flex-column gr-4">
+    <v-divider content-offset="2rem" opacity=".7" thickness="5" variant="dotted" gradient>CHAPTER 1.4</v-divider>
+    <v-divider :content-offset="[40, -1.5]" opacity=".7" thickness="2" variant="dashed">∞</v-divider>
+    <v-divider :content-offset="[12, 2.5]" opacity=".7">* * *</v-divider>
+    <v-divider color="primary" content-offset="-16" opacity="1" style="color: inherit" thickness="1">
+      <v-avatar class="border border-primary border-opacity-100" icon="mdi-chevron-down" size="36"></v-avatar>
+    </v-divider>
+  </v-container>
+</template>

packages/docs/src/pages/en/components/dividers.md

@@ -69,6 +69,14 @@ Vertical dividers give you more tools for unique layouts.
 
 By using the **thickness** prop, the thickness of the divider can be adjusted to the desired value.
 
+### Slots
+
+#### Default
+
+When you pass any content to be placed in between dividers simply by utilizing the default slot.
+
+<ExamplesExample file="v-divider/slot-default" />
+
 ### Misc
 
 #### Portrait View

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

@@ -7,7 +7,7 @@ import { makeComponentProps } from '@/composables/component'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
-import { computed } from 'vue'
+import { computed, toRef } from 'vue'
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
@@ -21,6 +21,7 @@ type Variant = typeof allowedVariants[number]
 
 export const makeVDividerProps = propsFactory({
   color: String,
+  contentOffset: [Number, String, Array] as PropType<number | string | (string | number)[]>,
   gradient: Boolean,
   inset: Boolean,
   length: [Number, String],
@@ -59,6 +60,19 @@ export const VDivider = genericComponent()({
       return styles
     })
 
+    const contentStyles = toRef(() => {
+      const margin = Array.isArray(props.contentOffset) ? props.contentOffset[0] : props.contentOffset
+      const shift = Array.isArray(props.contentOffset) ? props.contentOffset[1] : 0
+
+      return {
+        marginBlock: props.vertical && margin ? convertToUnit(margin) : undefined,
+        marginInline: !props.vertical && margin ? convertToUnit(margin) : undefined,
+        transform: shift
+          ? `translate${props.vertical ? 'X' : 'Y'}(${convertToUnit(shift)})`
+          : undefined,
+      }
+    })
+
     useRender(() => {
       const divider = (
         <hr
@@ -104,7 +118,10 @@ export const VDivider = genericComponent()({
         >
           { divider }
 
-          <div class="v-divider__content">
+          <div
+            class="v-divider__content"
+            style={ contentStyles.value }
+          >
             { slots.default() }
           </div>