123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- 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
|