bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
203 lines (202 loc) • 6.26 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_useColorVariantClasses = require("./useColorVariantClasses-CEfOwjPv.js");
const require_BSpinner = require("./BSpinner-8UMAINYb.js");
const require_ConditionalWrapper = require("./ConditionalWrapper-Cc7EIszd.js");
const require_useRadiusElementClasses = require("./useRadiusElementClasses-C13_PhPM.js");
let vue = require("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) => (0, vue.computed)(() => (0, vue.toValue)(fade) ? FADE_PROPS : NO_FADE_PROPS);
//#endregion
//#region src/components/BOverlay/BOverlay.vue
var BOverlay_default = /* @__PURE__ */ (0, vue.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 = require_useDefaults.useDefaults(__props, "BOverlay");
const emit = __emit;
const positionStyles = {
top: 0,
left: 0,
bottom: 0,
right: 0
};
const fadeTransitions = useFadeTransition(() => !props.noFade);
const radiusElementClasses = require_useRadiusElementClasses.useRadiusElementClasses(() => ({
rounded: props.rounded,
roundedTop: props.roundedTop,
roundedBottom: props.roundedBottom,
roundedStart: props.roundedStart,
roundedEnd: props.roundedEnd
}));
const computedAriaBusy = (0, vue.computed)(() => props.show ? true : null);
const spinnerAttrs = (0, vue.computed)(() => ({
type: props.spinnerType,
variant: props.spinnerVariant,
small: props.spinnerSmall
}));
const overlayStyles = (0, vue.computed)(() => ({
...positionStyles,
zIndex: props.zIndex || 10
}));
const overlayClasses = (0, vue.computed)(() => ({
"position-absolute": !props.noWrap || !props.fixed,
"position-fixed": props.noWrap && props.fixed
}));
const colorClasses = require_useColorVariantClasses.useColorVariantClasses((0, vue.computed)(() => ({ bgVariant: props.variant !== null && !props.bgColor ? props.variant : null })));
const blurClasses = (0, vue.computed)(() => [colorClasses.value, radiusElementClasses.value]);
const blurStyles = (0, vue.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 = (0, vue.computed)(() => props.noCenter ? positionStyles : {
top: "50%",
left: "50%",
transform: "translateX(-50%) translateY(-50%)"
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)(require_ConditionalWrapper.ConditionalWrapper_default, {
tag: (0, vue.unref)(props).wrapTag,
class: "b-overlay-wrap position-relative",
"aria-busy": computedAriaBusy.value,
skip: (0, vue.unref)(props).noWrap
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createVNode)(vue.Transition, (0, vue.mergeProps)((0, vue.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: (0, vue.withCtx)(() => [(0, vue.unref)(props).show ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(props).overlayTag), {
key: 0,
class: (0, vue.normalizeClass)(["b-overlay", overlayClasses.value]),
style: (0, vue.normalizeStyle)(overlayStyles.value),
onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
}, {
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
class: (0, vue.normalizeClass)(["position-absolute", blurClasses.value]),
style: (0, vue.normalizeStyle)(blurStyles.value)
}, null, 6), (0, vue.createElementVNode)("div", {
class: "position-absolute",
style: (0, vue.normalizeStyle)(spinWrapperStyles.value)
}, [(0, vue.renderSlot)(_ctx.$slots, "overlay", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(spinnerAttrs.value)), () => [!(0, vue.unref)(props).noSpinner ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_BSpinner.BSpinner_default, (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, spinnerAttrs.value)), null, 16)) : (0, vue.createCommentVNode)("", true)])], 4)]),
_: 3
}, 8, ["class", "style"])) : (0, vue.createCommentVNode)("", true)]),
_: 3
}, 16)]),
_: 3
}, 8, [
"tag",
"aria-busy",
"skip"
]);
};
}
});
//#endregion
Object.defineProperty(exports, "BOverlay_default", {
enumerable: true,
get: function() {
return BOverlay_default;
}
});
//# sourceMappingURL=BOverlay-B7vJAdHO.js.map