feat(VDivider): add slot support

vuetifyjs · Apr 15, 2024 · 395f157 · 395f157
1 parent 20ffadc
commit 395f157
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 26 deletions.
diff --git a/packages/vuetify/src/components/VDivider/VDivider.sass b/packages/vuetify/src/components/VDivider/VDivider.sass
@@ -31,3 +31,21 @@
       margin-bottom: $divider-vertical-inset-margin-bottom
       margin-top: $divider-vertical-inset-margin-top
       max-height: $divider-vertical-inset-max-height
+
+.v-divider__content
+  padding: $divider-content-padding
+
+  .v-divider__wrapper--vertical &
+    padding: $divider-content-vertical-padding
+
+.v-divider__wrapper
+  display: flex
+  align-items: center
+  justify-content: center
+
+  &--vertical
+    flex-direction: column
+    height: 100%
+
+    .v-divider
+      margin: 0 auto
diff --git a/packages/vuetify/src/components/VDivider/VDivider.tsx b/packages/vuetify/src/components/VDivider/VDivider.tsx
@@ -29,7 +29,7 @@ export const VDivider = genericComponent()({
 
   props: makeVDividerProps(),
 
-  setup (props, { attrs }) {
+  setup (props, { attrs, slots }) {
     const { themeClasses } = provideTheme(props)
     const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))
     const dividerStyles = computed(() => {
@@ -46,31 +46,55 @@ export const VDivider = genericComponent()({
       return styles
     })
 
-    useRender(() => (
-      <hr
-        class={[
-          {
-            'v-divider': true,
-            'v-divider--inset': props.inset,
-            'v-divider--vertical': props.vertical,
-          },
-          themeClasses.value,
-          textColorClasses.value,
-          props.class,
-        ]}
-        style={[
-          dividerStyles.value,
-          textColorStyles.value,
-          props.style,
-        ]}
-        aria-orientation={
-          !attrs.role || attrs.role === 'separator'
-            ? props.vertical ? 'vertical' : 'horizontal'
-            : undefined
-        }
-        role={ `${attrs.role || 'separator'}` }
-      />
-    ))
+    useRender(() => {
+      const divider = (
+        <hr
+          class={[
+            {
+              'v-divider': true,
+              'v-divider--inset': props.inset,
+              'v-divider--vertical': props.vertical,
+            },
+            themeClasses.value,
+            textColorClasses.value,
+            props.class,
+          ]}
+          style={[
+            dividerStyles.value,
+            textColorStyles.value,
+            props.style,
+          ]}
+          aria-orientation={
+            !attrs.role || attrs.role === 'separator'
+              ? props.vertical ? 'vertical' : 'horizontal'
+              : undefined
+          }
+          role={ `${attrs.role || 'separator'}` }
+        />
+      )
+
+      if (!slots.default) return divider
+
+      return (
+        <div
+          class={[
+            'v-divider__wrapper',
+            {
+              'v-divider__wrapper--vertical': props.vertical,
+              'v-divider__wrapper--inset': props.inset,
+            },
+          ]}
+        >
+          { divider }
+
+          <div class="v-divider__content">
+            { slots.default() }
+          </div>
+
+          { divider }
+        </div>
+      )
+    })
 
     return {}
   },

diff --git a/packages/vuetify/src/components/VDivider/_variables.scss b/packages/vuetify/src/components/VDivider/_variables.scss
@@ -4,6 +4,8 @@
 $divider-border-color: null !default;
 $divider-border-style: settings.$border-style-root !default;
 $divider-border-width: thin 0 0 0 !default;
+$divider-content-padding: 0 16px !default;
+$divider-content-vertical-padding: 4px 0 !default;
 $divider-flex: 1 1 100% !default;
 $divider-inset-margin: 72px !default;
 $divider-inset-max-width: calc(100% - #{$divider-inset-margin}) !default;