feat(VDivider): add border/dimension composables

vuetifyjs · Jan 22, 2021 · c8b6ea6 · c8b6ea6
1 parent 5c370bd
commit c8b6ea6
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 29 deletions.
diff --git a/packages/vuetify/src/components/VDivider/VDivider.sass b/packages/vuetify/src/components/VDivider/VDivider.sass
@@ -1,8 +1,8 @@
 @import './_variables.scss'
 
 .v-divider
-  border-style: $divider-border-style
-  border-width: $divider-border-width
+  @include border($divider-border-query)
+
   display: block
   flex: 1 1 100%
   height: 0px

diff --git a/packages/vuetify/src/components/VDivider/VDivider.ts b/packages/vuetify/src/components/VDivider/VDivider.ts
@@ -2,45 +2,57 @@
 import './VDivider.sass'
 
 // Utilities
-import { defineComponent, h, mergeProps } from 'vue'
+import { defineComponent, h } from 'vue'
 import makeProps from '@/util/makeProps'
 
 // Composables
-import { useTheme } from '@/composables'
+import {
+  makeBorderProps,
+  makeDimensionProps,
+  useBorder,
+  useDimension,
+  useTheme,
+} from '@/composables'
 
 export default defineComponent({
   name: 'VDivider',
 
-  inheritAttrs: false,
-
-  props: makeProps({
-    inset: Boolean,
-    vertical: Boolean,
-  }),
+  props: {
+    ...makeBorderProps(),
+    ...makeDimensionProps({
+      height: undefined,
+      maxHeight: undefined,
+      maxWidth: undefined,
+      width: undefined,
+    }),
+    ...makeProps({
+      inset: Boolean,
+      vertical: Boolean,
+    }),
+  },
 
   setup (props, { attrs }) {
+    const { borderClasses } = useBorder(props)
+    const { dimensionStyles } = useDimension(props)
     const { themeClasses } = useTheme()
 
     return () => (
-      h('hr', mergeProps(
-        {
-          class: [
-            'v-divider',
-            {
-              'v-divider--inset': props.inset,
-              'v-divider--vertical': props.vertical,
-            },
-            themeClasses.value,
-          ],
-        },
-        attrs,
-        {
-          ariaOrientation: !attrs.role || attrs.role === 'separator'
-            ? props.vertical ? 'vertical' : 'horizontal'
-            : undefined,
-          role: attrs.role || 'separator',
-        }
-      ))
+      h('hr', {
+        ariaOrientation: attrs.role === 'separator'
+          ? props.vertical ? 'vertical' : 'horizontal'
+          : undefined,
+        class: [
+          'v-divider',
+          {
+            'v-divider--inset': props.inset,
+            'v-divider--vertical': props.vertical,
+          },
+          themeClasses.value,
+          borderClasses.value,
+        ],
+        role: attrs.role || 'separator',
+        style: [dimensionStyles.value],
+      })
     )
   },
 })
diff --git a/packages/vuetify/src/components/VDivider/_variables.scss b/packages/vuetify/src/components/VDivider/_variables.scss
@@ -1,9 +1,20 @@
 @import '../../styles/styles.sass';
 
 // Defaults
+$divider-border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
 $divider-border-style: solid !default;
 $divider-border-width: thin 0 0 0 !default;
 
+$divider-border-query: () !default;
+$divider-border-query: map-deep-merge(
+  (
+    'border-color': $divider-border-color,
+    'border-style': $divider-border-style,
+    'border-width': $divider-border-width
+  ),
+  $divider-border-query
+);
+
 // Inset
 $divider-inset-margin: 8px !default;
 $divider-inset-margin-left: $divider-inset-margin !default;