diff --git a/packages/vuetify/src/components/VDivider/VDivider.sass b/packages/vuetify/src/components/VDivider/VDivider.sass index 3a6b760f88ce..1c5e59e79dbd 100644 --- 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 index 2827657472c8..350219a01567 100644 --- 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 index 000207359319..6f4dd3624a1c 100644 --- 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;