bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
427 lines (426 loc) • 16.1 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_keys = require("./keys-durSVUrO.js");
const require_dist = require("./dist-BJ15ThEs.js");
const require_dom = require("./dom-Bs6DzM72.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_useId = require("./useId-DHrBgM7P.js");
const require_classes = require("./classes-D5wrmmVs.js");
const require_BImg = require("./BImg-Dyy0N-WQ.js");
let vue = require("vue");
//#region src/utils/getSlotElements.ts
var getSlotElements = (slot, filterBy) => (slot?.() ?? []).reduce((arr, slot) => {
if (typeof slot.type === "symbol") arr = arr.concat(slot.children);
else arr.push(slot);
return arr;
}, []).filter((child) => child.type?.__name === filterBy);
//#endregion
//#region src/components/BCarousel/BCarousel.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1$1 = ["id"];
var _hoisted_2 = ["aria-label", "aria-owns"];
var _hoisted_3 = [
"aria-current",
"aria-label",
"aria-controls",
"aria-describedby",
"onClick"
];
var _hoisted_4 = {
ref: "_relatedTarget",
class: "carousel-inner"
};
var _hoisted_5 = { class: "visually-hidden" };
var _hoisted_6 = { class: "visually-hidden" };
//#endregion
//#region src/components/BCarousel/BCarousel.vue
var BCarousel_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "BCarousel",
props: /* @__PURE__ */ (0, vue.mergeModels)({
background: { default: void 0 },
controls: {
type: Boolean,
default: false
},
controlsNextText: { default: "Next" },
controlsPrevText: { default: "Previous" },
fade: {
type: Boolean,
default: false
},
id: { default: void 0 },
imgHeight: { default: void 0 },
imgWidth: { default: void 0 },
indicators: {
type: Boolean,
default: false
},
indicatorsButtonLabel: { default: "Slide" },
interval: { default: 5e3 },
labelIndicators: { default: "Select a slide to display" },
keyboard: {
type: Boolean,
default: true
},
noAnimation: {
type: Boolean,
default: false
},
noHoverPause: {
type: Boolean,
default: false
},
noTouch: {
type: Boolean,
default: false
},
noWrap: {
type: Boolean,
default: false
},
ride: {
type: [Boolean, String],
default: false
},
rideReverse: {
type: Boolean,
default: false
},
touchThreshold: { default: 50 }
}, {
"modelValue": { default: 0 },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ (0, vue.mergeModels)([
"slide",
"slid",
"prev-click",
"next-click"
], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = require_useDefaults.useDefaults(__props, "BCarousel");
const emit = __emit;
const slots = (0, vue.useSlots)();
const computedId = require_useId.useId(() => props.id, "carousel");
const buttonOwnership = require_useId.useId(void 0, "carousel-button-ownership");
const modelValue = (0, vue.useModel)(__props, "modelValue");
const slideValues = (0, vue.useTemplateRef)("_slideValues");
const touchThresholdNumber = require_dist.useToNumber(() => props.touchThreshold);
const slideInterval = (0, vue.ref)(null);
(0, vue.onMounted)(() => {
slideInterval.value = slideValues.value?.find((slid) => slid.$el.style.display !== "none")?._interval ?? null;
});
const intervalNumber = require_dist.useToNumber(() => slideInterval.value ?? props.interval);
const isTransitioning = (0, vue.ref)(false);
const rideStarted = (0, vue.ref)(false);
const direction = (0, vue.ref)("start");
const relatedTarget = (0, vue.useTemplateRef)("_relatedTarget");
const element = (0, vue.useTemplateRef)("_element");
let previousModelValue = modelValue.value;
let isInternalChange = false;
const isHovering = require_dist.useElementHover(element);
const { pause, resume } = require_dist.useIntervalFn(() => {
if (props.rideReverse) {
prev();
return;
}
next();
}, intervalNumber, { immediate: props.ride === "carousel" });
const isRiding = (0, vue.computed)(() => props.ride === true && rideStarted.value === true || props.ride === "carousel");
const slides = (0, vue.computed)(() => getSlotElements(slots.default, "BCarouselSlide"));
const computedClasses = (0, vue.computed)(() => ({ "carousel-fade": props.fade }));
const buildBvCarouselEvent = (event) => new require_classes.BvCarouselEvent(event, {
componentId: computedId.value,
cancelable: false,
target: element.value,
direction: direction.value === "start" ? "right" : "left",
from: previousModelValue,
to: modelValue.value,
relatedTarget: relatedTarget.value?.children[modelValue.value] ?? null
});
(0, vue.watch)(modelValue, (newValue, oldValue) => {
if (!isInternalChange) {
const lastIndex = slides.value.length - 1;
const wrappedForward = oldValue === lastIndex && newValue === 0;
const wrappedBackward = oldValue === 0 && newValue === lastIndex;
if (wrappedForward) direction.value = "start";
else if (wrappedBackward) direction.value = "end";
else direction.value = newValue > oldValue ? "start" : "end";
}
isInternalChange = false;
isTransitioning.value = true;
});
const slideTo = (value) => {
if (isTransitioning.value === true) return;
if (props.ride === true) rideStarted.value = true;
if (isRiding.value === true) resume();
let nextValue = value;
if (nextValue >= slides.value.length) {
if (props.noWrap) return;
nextValue = 0;
}
if (nextValue < 0) {
if (props.noWrap) return;
nextValue = slides.value.length - 1;
}
if (nextValue === modelValue.value) return;
direction.value = value > modelValue.value ? "start" : "end";
isInternalChange = true;
isTransitioning.value = true;
previousModelValue = modelValue.value;
modelValue.value = nextValue;
};
const prev = () => {
slideTo(modelValue.value - 1);
};
const next = () => {
slideTo(modelValue.value + 1);
};
const { lengthX } = require_dist.useSwipe(element, {
passive: true,
onSwipeStart() {
if (props.noTouch) return;
pause();
},
onSwipeEnd() {
if (props.noTouch) return;
const resumeRiding = () => {
if (isRiding.value === false) return;
resume();
};
if (lengthX.value >= touchThresholdNumber.value) {
next();
resumeRiding();
return;
}
if (lengthX.value <= -touchThresholdNumber.value) {
prev();
resumeRiding();
}
}
});
const onClickPrev = (event) => {
emit("prev-click", event);
if (event.defaultPrevented) return;
prev();
};
const onClickNext = (event) => {
emit("next-click", event);
if (event.defaultPrevented) return;
next();
};
const onMouseEnter = () => {
if (props.noHoverPause) return;
pause();
};
const onMouseLeave = () => {
if (!isRiding.value) return;
resume();
};
(0, vue.watch)(isHovering, (newValue) => {
if (newValue) {
onMouseEnter();
return;
}
onMouseLeave();
});
require_dist.onKeyStroke(["ArrowLeft", "ArrowRight"], (event) => {
if (!props.keyboard) return;
if (event.key === "ArrowLeft") prev();
else next();
}, {
target: element,
passive: true
});
(0, vue.watch)(() => props.ride, () => {
rideStarted.value = false;
});
const enterDirectionClass = (0, vue.computed)(() => `carousel-item-${direction.value === "start" ? "next" : "prev"}`);
const orderDirectionClass = (0, vue.computed)(() => `carousel-item-${direction.value}`);
const transitionGroupProps = (0, vue.computed)(() => ({
enterFromClass: `carousel-item ${enterDirectionClass.value}`,
enterActiveClass: `carousel-item ${enterDirectionClass.value}`,
enterToClass: `carousel-item ${enterDirectionClass.value} ${orderDirectionClass.value}`,
leaveFromClass: "carousel-item active",
leaveActiveClass: "carousel-item active",
leaveToClass: `carousel-item active ${orderDirectionClass.value}`,
onBeforeLeave: () => {
emit("slide", buildBvCarouselEvent("slide"));
},
onAfterLeave: () => {
emit("slid", buildBvCarouselEvent("slid"));
isTransitioning.value = false;
},
onAfterEnter: (el) => {
if (modelValue.value !== 0) el.classList.add("carousel-item");
},
onEnter: (el) => {
slideInterval.value = slideValues.value?.find((slid) => slid.$el === el)?._interval ?? null;
}
}));
__expose({
resume,
pause,
next,
prev,
slideTo
});
(0, vue.provide)(require_keys.carouselInjectionKey, {
background: (0, vue.toRef)(() => props.background),
width: (0, vue.toRef)(() => props.imgWidth),
height: (0, vue.toRef)(() => props.imgHeight)
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
id: (0, vue.unref)(computedId),
ref: "_element",
class: (0, vue.normalizeClass)(["carousel slide pointer-event", computedClasses.value])
}, [
(0, vue.unref)(props).indicators ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 0,
class: "carousel-indicators",
"aria-label": (0, vue.unref)(props).labelIndicators,
"aria-owns": (0, vue.unref)(buttonOwnership)
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(slides.value.length, (_, i) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
key: i,
type: "button",
"data-bs-target": "",
class: (0, vue.normalizeClass)(i === modelValue.value ? "active" : ""),
"aria-current": i === modelValue.value ? true : void 0,
"aria-label": `${(0, vue.unref)(props).indicatorsButtonLabel} ${i}`,
"aria-controls": (0, vue.unref)(buttonOwnership),
"aria-describedby": slideValues.value?.[i]?._id,
onClick: ($event) => slideTo(i)
}, null, 10, _hoisted_3);
}), 128))], 8, _hoisted_2)) : (0, vue.createCommentVNode)("", true),
(0, vue.createElementVNode)("div", _hoisted_4, [(0, vue.createVNode)(vue.TransitionGroup, (0, vue.normalizeProps)((0, vue.guardReactiveProps)(transitionGroupProps.value)), {
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(slides.value, (slide, i) => {
return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(slide), {
key: i,
ref_for: true,
ref: "_slideValues",
class: (0, vue.normalizeClass)({ active: i === modelValue.value && isTransitioning.value === false }),
style: (0, vue.normalizeStyle)((0, vue.unref)(props).noAnimation && { transition: "none" })
}, null, 8, ["class", "style"])), [[vue.vShow, i === modelValue.value]]);
}), 128))]),
_: 1
}, 16)], 512),
(0, vue.unref)(props).controls ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createElementVNode)("button", {
class: "carousel-control-prev",
type: "button",
onClick: onClickPrev
}, [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("span", {
class: "carousel-control-prev-icon",
"aria-hidden": "true"
}, null, -1)), (0, vue.createElementVNode)("span", _hoisted_5, (0, vue.toDisplayString)((0, vue.unref)(props).controlsPrevText), 1)]), (0, vue.createElementVNode)("button", {
class: "carousel-control-next",
type: "button",
onClick: onClickNext
}, [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("span", {
class: "carousel-control-next-icon",
"aria-hidden": "true"
}, null, -1)), (0, vue.createElementVNode)("span", _hoisted_6, (0, vue.toDisplayString)((0, vue.unref)(props).controlsNextText), 1)])], 64)) : (0, vue.createCommentVNode)("", true)
], 10, _hoisted_1$1);
};
}
});
//#endregion
//#region src/components/BCarousel/BCarouselSlide.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["id"];
//#endregion
//#region src/components/BCarousel/BCarouselSlide.vue
var BCarouselSlide_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "BCarouselSlide",
props: {
background: { default: void 0 },
caption: { default: void 0 },
captionTag: { default: "h3" },
contentTag: { default: "div" },
contentVisibleUp: { default: void 0 },
id: { default: void 0 },
imgAlt: { default: void 0 },
imgBlank: {
type: Boolean,
default: false
},
imgBlankColor: { default: "transparent" },
imgHeight: { default: void 0 },
imgSrc: { default: void 0 },
imgSrcset: { default: void 0 },
imgWidth: { default: void 0 },
interval: { default: void 0 },
text: { default: void 0 },
textTag: { default: "p" }
},
setup(__props, { expose: __expose }) {
const props = require_useDefaults.useDefaults(__props, "BCarouselSlide");
const slots = (0, vue.useSlots)();
const computedId = require_useId.useId(() => props.id, "carousel-slide");
const parentData = (0, vue.inject)(require_keys.carouselInjectionKey, null);
const hasText = (0, vue.computed)(() => props.text || !require_dom.isEmptySlot(slots.text));
const hasCaption = (0, vue.computed)(() => props.caption || !require_dom.isEmptySlot(slots.caption));
const hasContent = (0, vue.computed)(() => hasText.value || hasCaption.value || !require_dom.isEmptySlot(slots.default));
const computedStyle = (0, vue.computed)(() => ({ background: `${props.background || parentData?.background.value || "rgb(171, 171, 171)"} none repeat scroll 0% 0%` }));
const computedContentClasses = (0, vue.computed)(() => ({
"d-none": props.contentVisibleUp !== void 0,
[`d-${props.contentVisibleUp}-block`]: props.contentVisibleUp !== void 0
}));
__expose({
_interval: (0, vue.toRef)(() => props.interval),
_id: computedId
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
id: (0, vue.unref)(computedId),
class: "carousel-item",
style: (0, vue.normalizeStyle)(computedStyle.value)
}, [(0, vue.renderSlot)(_ctx.$slots, "img", {}, () => [(0, vue.createVNode)(require_BImg.BImg_default, {
class: "d-block w-100",
alt: (0, vue.unref)(props).imgAlt,
srcset: (0, vue.unref)(props).imgSrcset,
src: (0, vue.unref)(props).imgSrc,
width: (0, vue.unref)(props).imgWidth || (0, vue.unref)(parentData)?.width.value,
height: (0, vue.unref)(props).imgHeight || (0, vue.unref)(parentData)?.height.value,
blank: (0, vue.unref)(props).imgBlank,
"blank-color": (0, vue.unref)(props).imgBlankColor
}, null, 8, [
"alt",
"srcset",
"src",
"width",
"height",
"blank",
"blank-color"
])]), hasContent.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(props).contentTag), {
key: 0,
class: (0, vue.normalizeClass)(["carousel-caption", computedContentClasses.value])
}, {
default: (0, vue.withCtx)(() => [
hasCaption.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(props).captionTag), { key: 0 }, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "caption", {}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.unref)(props).caption), 1)])]),
_: 3
})) : (0, vue.createCommentVNode)("", true),
hasText.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(props).textTag), { key: 1 }, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "text", {}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.unref)(props).text), 1)])]),
_: 3
})) : (0, vue.createCommentVNode)("", true),
(0, vue.renderSlot)(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class"])) : (0, vue.createCommentVNode)("", true)], 12, _hoisted_1);
};
}
});
//#endregion
Object.defineProperty(exports, "BCarouselSlide_default", {
enumerable: true,
get: function() {
return BCarouselSlide_default;
}
});
Object.defineProperty(exports, "BCarousel_default", {
enumerable: true,
get: function() {
return BCarousel_default;
}
});
//# sourceMappingURL=BCarousel-BgT74ryc.js.map