72 lines
2.4 KiB
JavaScript
72 lines
2.4 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],
|
|
opacity: [Number, String],
|
|
thickness: [Number, String],
|
|
vertical: Boolean,
|
|
...makeComponentProps(),
|
|
...makeThemeProps()
|
|
}, 'VDivider');
|
|
export const VDivider = genericComponent()({
|
|
name: 'VDivider',
|
|
props: makeVDividerProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
themeClasses
|
|
} = provideTheme(props);
|
|
const {
|
|
textColorClasses,
|
|
textColorStyles
|
|
} = useTextColor(toRef(props, 'color'));
|
|
const dividerStyles = computed(() => {
|
|
const styles = {};
|
|
if (props.length) {
|
|
styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length);
|
|
}
|
|
if (props.thickness) {
|
|
styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness);
|
|
}
|
|
return styles;
|
|
});
|
|
useRender(() => {
|
|
const divider = _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, {
|
|
'--v-border-opacity': props.opacity
|
|
}, props.style],
|
|
"aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
|
|
"role": `${attrs.role || 'separator'}`
|
|
}, null);
|
|
if (!slots.default) return divider;
|
|
return _createVNode("div", {
|
|
"class": ['v-divider__wrapper', {
|
|
'v-divider__wrapper--vertical': props.vertical,
|
|
'v-divider__wrapper--inset': props.inset
|
|
}]
|
|
}, [divider, _createVNode("div", {
|
|
"class": "v-divider__content"
|
|
}, [slots.default()]), divider]);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VDivider.mjs.map
|