bootstrap-vue-next/dist/BOverlay-DOfvBAZb.mjs

Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development

import { t as useDefaults } from "./useDefaults-CCWS15M8.mjs";
import { t as useColorVariantClasses } from "./useColorVariantClasses-GuDw8a_O.mjs";
import { t as BSpinner_default } from "./BSpinner-DlLxrIkh.mjs";
import { t as ConditionalWrapper_default } from "./ConditionalWrapper-BR9CKZNU.mjs";
import { t as useRadiusElementClasses } from "./useRadiusElementClasses-CyDq8RO7.mjs";
import { Transition, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, toValue, unref, withCtx } from "vue";
//#region src/composables/useTransitions.ts
var NO_FADE_PROPS = {
	name: "",
	enterActiveClass: "",
	enterToClass: "",
	leaveActiveClass: "",
	leaveToClass: "showing",
	enterFromClass: "showing",
	leaveFromClass: ""
};
var FADE_PROPS = {
	...NO_FADE_PROPS,
	enterActiveClass: "fade showing",
	leaveActiveClass: "fade showing"
};
var useFadeTransition = (fade) => computed(() => toValue(fade) ? FADE_PROPS : NO_FADE_PROPS);
//#endregion
//#region src/components/BOverlay/BOverlay.vue
var BOverlay_default = /* @__PURE__ */ defineComponent({
	__name: "BOverlay",
	props: {
		bgColor: { default: void 0 },
		blur: { default: "2px" },
		fixed: {
			type: Boolean,
			default: false
		},
		noCenter: {
			type: Boolean,
			default: false
		},
		noFade: {
			type: Boolean,
			default: false
		},
		noSpinner: {
			type: Boolean,
			default: false
		},
		noWrap: {
			type: Boolean,
			default: false
		},
		opacity: { default: .85 },
		overlayTag: { default: "div" },
		show: {
			type: Boolean,
			default: false
		},
		spinnerSmall: {
			type: Boolean,
			default: false
		},
		spinnerType: { default: "border" },
		spinnerVariant: { default: void 0 },
		variant: { default: "light" },
		wrapTag: { default: "div" },
		zIndex: { default: 10 },
		rounded: {
			type: [
				Boolean,
				String,
				Number
			],
			default: false
		},
		roundedTop: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		},
		roundedBottom: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		},
		roundedStart: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		},
		roundedEnd: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		}
	},
	emits: [
		"click",
		"hidden",
		"shown"
	],
	setup(__props, { emit: __emit }) {
		const props = useDefaults(__props, "BOverlay");
		const emit = __emit;
		const positionStyles = {
			top: 0,
			left: 0,
			bottom: 0,
			right: 0
		};
		const fadeTransitions = useFadeTransition(() => !props.noFade);
		const radiusElementClasses = useRadiusElementClasses(() => ({
			rounded: props.rounded,
			roundedTop: props.roundedTop,
			roundedBottom: props.roundedBottom,
			roundedStart: props.roundedStart,
			roundedEnd: props.roundedEnd
		}));
		const computedAriaBusy = computed(() => props.show ? true : null);
		const spinnerAttrs = computed(() => ({
			type: props.spinnerType,
			variant: props.spinnerVariant,
			small: props.spinnerSmall
		}));
		const overlayStyles = computed(() => ({
			...positionStyles,
			zIndex: props.zIndex || 10
		}));
		const overlayClasses = computed(() => ({
			"position-absolute": !props.noWrap || !props.fixed,
			"position-fixed": props.noWrap && props.fixed
		}));
		const colorClasses = useColorVariantClasses(computed(() => ({ bgVariant: props.variant !== null && !props.bgColor ? props.variant : null })));
		const blurClasses = computed(() => [colorClasses.value, radiusElementClasses.value]);
		const blurStyles = computed(() => ({
			...positionStyles,
			opacity: props.opacity,
			backgroundColor: props.bgColor || void 0,
			backdropFilter: props.blur && !props.bgColor && (props.variant === "white" || props.variant === "transparent") ? `blur(${props.blur})` : void 0
		}));
		const spinWrapperStyles = computed(() => props.noCenter ? positionStyles : {
			top: "50%",
			left: "50%",
			transform: "translateX(-50%) translateY(-50%)"
		});
		return (_ctx, _cache) => {
			return openBlock(), createBlock(ConditionalWrapper_default, {
				tag: unref(props).wrapTag,
				class: "b-overlay-wrap position-relative",
				"aria-busy": computedAriaBusy.value,
				skip: unref(props).noWrap
			}, {
				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createVNode(Transition, mergeProps(unref(fadeTransitions), {
					"enter-to-class": "show",
					name: "fade",
					onAfterEnter: _cache[1] || (_cache[1] = ($event) => emit("shown")),
					onAfterLeave: _cache[2] || (_cache[2] = ($event) => emit("hidden"))
				}), {
					default: withCtx(() => [unref(props).show ? (openBlock(), createBlock(resolveDynamicComponent(unref(props).overlayTag), {
						key: 0,
						class: normalizeClass(["b-overlay", overlayClasses.value]),
						style: normalizeStyle(overlayStyles.value),
						onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
					}, {
						default: withCtx(() => [createElementVNode("div", {
							class: normalizeClass(["position-absolute", blurClasses.value]),
							style: normalizeStyle(blurStyles.value)
						}, null, 6), createElementVNode("div", {
							class: "position-absolute",
							style: normalizeStyle(spinWrapperStyles.value)
						}, [renderSlot(_ctx.$slots, "overlay", normalizeProps(guardReactiveProps(spinnerAttrs.value)), () => [!unref(props).noSpinner ? (openBlock(), createBlock(BSpinner_default, normalizeProps(mergeProps({ key: 0 }, spinnerAttrs.value)), null, 16)) : createCommentVNode("", true)])], 4)]),
						_: 3
					}, 8, ["class", "style"])) : createCommentVNode("", true)]),
					_: 3
				}, 16)]),
				_: 3
			}, 8, [
				"tag",
				"aria-busy",
				"skip"
			]);
		};
	}
});
//#endregion
export { BOverlay_default as t };

//# sourceMappingURL=BOverlay-DOfvBAZb.mjs.map