vuestic-ui
Version:
Vue 3 UI Framework
89 lines (88 loc) • 4.13 kB
JavaScript
import { h, Fragment } from "vue";
import { u as useComponentPresetProp } from "../../composables/useComponentPreset.js";
import { _ as _export_sfc } from "../../../plugin-vue_export-helper.js";
const _style_0 = ":root,\n:host {\n --va-timeline-display: flex;\n --va-timeline-flex-wrap: nowrap;\n /* Vertical */\n --va-timeline-vertical-flex-direction: column;\n --va-timeline-vertical-padding-left: 0.25rem;\n --va-timeline-vertical-padding-right: 0.25rem;\n}\n.va-timeline {\n display: var(--va-timeline-display);\n flex-wrap: var(--va-timeline-flex-wrap);\n font-family: var(--va-font-family);\n}\n.va-timeline--vertical {\n flex-direction: var(--va-timeline-vertical-flex-direction);\n padding-left: var(--va-timeline-vertical-padding-left);\n padding-right: var(--va-timeline-vertical-padding-right);\n}\n.va-timeline--align-top .va-timeline-item__before,\n.va-timeline--align-top .va-timeline-item__after {\n flex: 0;\n}\n.va-timeline .va-timeline-item {\n flex: 1;\n}\n.va-timeline .va-timeline-item--vertical .va-timeline-separator--vertical .va-timeline-separator__line:first-child {\n flex: 0 0 1rem;\n}\n.va-timeline .va-timeline-item--vertical.va-timeline-item--is-first .va-timeline-separator--vertical .va-timeline-separator__line:first-child {\n flex-basis: 2rem;\n}\n.va-timeline .va-timeline-item--vertical.va-timeline-item--is-first .va-timeline-item__after,\n.va-timeline .va-timeline-item--vertical.va-timeline-item--is-first .va-timeline-item__before {\n padding-top: 2rem;\n}\n.va-timeline .va-timeline-item--vertical.va-timeline-item--vertical.va-timeline-item--is-last .va-timeline-item__after,\n.va-timeline .va-timeline-item--vertical.va-timeline-item--vertical.va-timeline-item--is-last .va-timeline-item__before {\n padding-bottom: 2rem;\n}";
const getPropsData = (slot) => slot == null ? void 0 : slot.props;
const getIsActive = (slot) => {
var _a;
return !!((_a = slot == null ? void 0 : slot.props) == null ? void 0 : _a.active) || false;
};
const isVueFragment = (slot) => slot.type === Fragment;
const isEmptyArray = (arr) => arr && arr.length === 0;
function getSlots(slots) {
var _a;
const defaultSlots = (_a = slots.default) == null ? void 0 : _a.call(slots);
if (!defaultSlots || isEmptyArray(defaultSlots)) {
return [];
}
if (isVueFragment(defaultSlots[0])) {
return defaultSlots[0].children;
}
return defaultSlots;
}
const processSlots = (context) => {
const slots = getSlots(context.slots);
slots.forEach((slot, index) => {
if (!getPropsData(slot)) {
slot.props = {};
}
const propsData = getPropsData(slot);
propsData.vertical = context.props.vertical;
if (context.props.centered) {
propsData.inverted = !!(index % 2);
}
if (index === 0) {
propsData.isFirst = true;
}
if (index === slots.length - 1) {
propsData.isLast = true;
}
const currentSlotActive = propsData.active;
if (!currentSlotActive) {
return;
}
if (index === 0) {
propsData.activePrevious = currentSlotActive;
}
if (index === slots.length - 1) {
propsData.activeNext = currentSlotActive;
}
const previousSlotActive = getIsActive(slots[index - 1]);
if (previousSlotActive) {
propsData.activePrevious = true;
}
const nextSlotActive = getIsActive(slots[index + 1]);
if (nextSlotActive) {
propsData.activeNext = true;
}
});
return slots;
};
const COMPONENT_NAME = "va-timeline";
const _sfc_main = {
name: COMPONENT_NAME,
props: {
...useComponentPresetProp,
vertical: { type: Boolean },
centered: { type: Boolean },
alignTop: { type: Boolean }
},
setup(props, { slots }) {
return () => h(
"div",
{
class: {
[COMPONENT_NAME]: true,
[`${COMPONENT_NAME}--vertical`]: props.vertical,
[`${COMPONENT_NAME}--align-top`]: props.alignTop
}
},
processSlots({ props, slots })
);
}
};
const _VaTimeline = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]);
export {
_VaTimeline as _
};
//# sourceMappingURL=VaTimeline.js.map