57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import { createVNode as _createVNode } from "vue";
|
|
// Styles
|
|
import "./VDivider.css";
|
|
|
|
// Composables
|
|
import { useTextColor } from "../../composables/color.mjs";
|
|
import { makeComponentProps } from "../../composables/component.mjs";
|
|
import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
|
|
import { computed, toRef } from 'vue';
|
|
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
|
|
export const makeVDividerProps = propsFactory({
|
|
color: String,
|
|
inset: Boolean,
|
|
length: [Number, String],
|
|
thickness: [Number, String],
|
|
vertical: Boolean,
|
|
...makeComponentProps(),
|
|
...makeThemeProps()
|
|
}, 'VDivider');
|
|
export const VDivider = genericComponent()({
|
|
name: 'VDivider',
|
|
props: makeVDividerProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs
|
|
} = _ref;
|
|
const {
|
|
themeClasses
|
|
} = provideTheme(props);
|
|
const {
|
|
textColorClasses,
|
|
textColorStyles
|
|
} = useTextColor(toRef(props, 'color'));
|
|
const dividerStyles = computed(() => {
|
|
const styles = {};
|
|
if (props.length) {
|
|
styles[props.vertical ? 'maxHeight' : 'maxWidth'] = convertToUnit(props.length);
|
|
}
|
|
if (props.thickness) {
|
|
styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness);
|
|
}
|
|
return styles;
|
|
});
|
|
useRender(() => _createVNode("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'}`
|
|
}, null));
|
|
return {};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VDivider.mjs.map
|