80 lines
2.8 KiB
JavaScript
80 lines
2.8 KiB
JavaScript
|
import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
|
||
|
|
// Components
|
||
|
|
import { VTimelineDivider } from "./VTimelineDivider.mjs"; // Composables
|
||
|
|
import { makeComponentProps } from "../../composables/component.mjs";
|
||
|
|
import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
|
||
|
|
import { makeElevationProps } from "../../composables/elevation.mjs";
|
||
|
|
import { IconValue } from "../../composables/icons.mjs";
|
||
|
|
import { makeRoundedProps } from "../../composables/rounded.mjs";
|
||
|
|
import { makeSizeProps } from "../../composables/size.mjs";
|
||
|
|
import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
|
||
|
|
import { ref, shallowRef, watch } from 'vue';
|
||
|
|
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
||
|
|
// Types
|
||
|
|
export const makeVTimelineItemProps = propsFactory({
|
||
|
|
density: String,
|
||
|
|
dotColor: String,
|
||
|
|
fillDot: Boolean,
|
||
|
|
hideDot: Boolean,
|
||
|
|
hideOpposite: {
|
||
|
|
type: Boolean,
|
||
|
|
default: undefined
|
||
|
|
},
|
||
|
|
icon: IconValue,
|
||
|
|
iconColor: String,
|
||
|
|
lineInset: [Number, String],
|
||
|
|
...makeComponentProps(),
|
||
|
|
...makeDimensionProps(),
|
||
|
|
...makeElevationProps(),
|
||
|
|
...makeRoundedProps(),
|
||
|
|
...makeSizeProps(),
|
||
|
|
...makeTagProps()
|
||
|
|
}, 'VTimelineItem');
|
||
|
|
export const VTimelineItem = genericComponent()({
|
||
|
|
name: 'VTimelineItem',
|
||
|
|
props: makeVTimelineItemProps(),
|
||
|
|
setup(props, _ref) {
|
||
|
|
let {
|
||
|
|
slots
|
||
|
|
} = _ref;
|
||
|
|
const {
|
||
|
|
dimensionStyles
|
||
|
|
} = useDimension(props);
|
||
|
|
const dotSize = shallowRef(0);
|
||
|
|
const dotRef = ref();
|
||
|
|
watch(dotRef, newValue => {
|
||
|
|
if (!newValue) return;
|
||
|
|
dotSize.value = newValue.$el.querySelector('.v-timeline-divider__dot')?.getBoundingClientRect().width ?? 0;
|
||
|
|
}, {
|
||
|
|
flush: 'post'
|
||
|
|
});
|
||
|
|
useRender(() => _createVNode("div", {
|
||
|
|
"class": ['v-timeline-item', {
|
||
|
|
'v-timeline-item--fill-dot': props.fillDot
|
||
|
|
}, props.class],
|
||
|
|
"style": [{
|
||
|
|
'--v-timeline-dot-size': convertToUnit(dotSize.value),
|
||
|
|
'--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0)
|
||
|
|
}, props.style]
|
||
|
|
}, [_createVNode("div", {
|
||
|
|
"class": "v-timeline-item__body",
|
||
|
|
"style": dimensionStyles.value
|
||
|
|
}, [slots.default?.()]), _createVNode(VTimelineDivider, {
|
||
|
|
"ref": dotRef,
|
||
|
|
"hideDot": props.hideDot,
|
||
|
|
"icon": props.icon,
|
||
|
|
"iconColor": props.iconColor,
|
||
|
|
"size": props.size,
|
||
|
|
"elevation": props.elevation,
|
||
|
|
"dotColor": props.dotColor,
|
||
|
|
"fillDot": props.fillDot,
|
||
|
|
"rounded": props.rounded
|
||
|
|
}, {
|
||
|
|
default: slots.icon
|
||
|
|
}), props.density !== 'compact' && _createVNode("div", {
|
||
|
|
"class": "v-timeline-item__opposite"
|
||
|
|
}, [!props.hideOpposite && slots.opposite?.()])]));
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=VTimelineItem.mjs.map
|