bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
298 lines (297 loc) • 12.4 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_useId = require("./useId-DHrBgM7P.js");
const require_useShowHide = require("./useShowHide-BTCaeU5j.js");
const require_BLink = require("./BLink-uemyYKst.js");
const require_BButton = require("./BButton-DBRs8Pz_.js");
const require_BCloseButton = require("./BCloseButton-CN__Jjcj.js");
const require_BProgress = require("./BProgress-Bc3ZSkac.js");
const require_useCountdownHover = require("./useCountdownHover-8bwLWYoN.js");
let vue = require("vue");
//#region src/components/BAlert/BAlert.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = [
"id",
"role",
"aria-live",
"aria-atomic"
];
var _hoisted_2 = {
key: 1,
class: "d-flex gap-2"
};
//#endregion
//#region src/components/BAlert/BAlert.vue
var BAlert_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "BAlert",
props: /* @__PURE__ */ (0, vue.mergeModels)({
alertClass: { default: void 0 },
body: { default: void 0 },
bodyClass: { default: void 0 },
closeClass: { default: void 0 },
closeContent: { default: void 0 },
closeLabel: { default: "Close" },
closeVariant: { default: "secondary" },
dismissible: {
type: Boolean,
default: false
},
headerClass: { default: void 0 },
headerTag: { default: "div" },
id: { default: void 0 },
interval: { default: "requestAnimationFrame" },
isStatus: {
type: Boolean,
default: false
},
noHoverPause: {
type: Boolean,
default: false
},
noResumeOnHoverLeave: {
type: Boolean,
default: false
},
progressProps: { default: void 0 },
showOnPause: {
type: Boolean,
default: true
},
title: { default: void 0 },
variant: { default: "info" },
bgVariant: { default: null },
textVariant: { default: null },
active: {
type: Boolean,
default: void 0
},
activeClass: { default: void 0 },
disabled: {
type: Boolean,
default: void 0
},
exactActiveClass: { default: void 0 },
href: { default: void 0 },
icon: {
type: Boolean,
default: void 0
},
noRel: {
type: Boolean,
default: void 0
},
opacity: { default: void 0 },
opacityHover: { default: void 0 },
prefetch: { type: Boolean },
prefetchOn: {},
noPrefetch: { type: Boolean },
prefetchedClass: {},
rel: { default: void 0 },
replace: {
type: Boolean,
default: void 0
},
routerComponentName: { default: void 0 },
stretched: {
type: Boolean,
default: false
},
target: { default: void 0 },
to: { default: void 0 },
underlineOffset: { default: void 0 },
underlineOffsetHover: { default: void 0 },
underlineOpacity: { default: void 0 },
underlineOpacityHover: { default: void 0 },
underlineVariant: { default: void 0 },
initialAnimation: {
type: Boolean,
default: false
},
noAnimation: { type: Boolean },
noFade: {
type: Boolean,
default: false
},
lazy: {
type: Boolean,
default: false
},
unmountLazy: {
type: Boolean,
default: false
},
show: {
type: Boolean,
default: false
},
transProps: { default: void 0 },
visible: {
type: Boolean,
default: false
}
}, {
"modelValue": {
type: [Boolean, Number],
default: false
},
"modelModifiers": {}
}),
emits: /* @__PURE__ */ (0, vue.mergeModels)([
"close",
"close-countdown",
"hide",
"hide-prevented",
"hidden",
"show",
"show-prevented",
"shown",
"toggle",
"toggle-prevented"
], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = require_useDefaults.useDefaults(__props, "BAlert");
const emit = __emit;
const slots = (0, vue.useSlots)();
const element = (0, vue.useTemplateRef)("_element");
const modelValue = (0, vue.useModel)(__props, "modelValue");
const { computedLink, computedLinkProps } = require_BLink.useBLinkHelper(props);
const computedId = require_useId.useId(() => props.id, "alert");
const { showRef, renderRef, hide, toggle, show, buildTriggerableEvent, computedNoAnimation, isVisible, transitionProps, contentShowing } = require_useShowHide.useShowHide(modelValue, props, emit, element, computedId);
const { isActive, pause, restart, resume, stop, isPaused, value: remainingMs } = require_useCountdownHover.useCountdown((0, vue.computed)(() => typeof modelValue.value === "boolean" ? 0 : modelValue.value), props.interval, { immediate: typeof modelValue.value === "number" && !!modelValue.value });
require_useCountdownHover.useCountdownHover(element, {
noHoverPause: () => props.noHoverPause || typeof modelValue.value !== "number",
noResumeOnHoverLeave: () => props.noResumeOnHoverLeave || typeof modelValue.value !== "number",
modelValueIgnoresHover: () => typeof modelValue.value === "boolean"
}, {
pause,
resume
});
(0, vue.watchEffect)(() => {
emit("close-countdown", remainingMs.value);
});
const computedTag = (0, vue.computed)(() => computedLink.value ? require_BLink.BLink_default : "div");
const isAlertVisible = (0, vue.computed)(() => showRef.value || isActive.value || props.showOnPause && isPaused.value);
const computedClasses = (0, vue.computed)(() => [{
[`alert-${props.variant}`]: props.variant !== null,
"alert-dismissible": props.dismissible && !(slots.close || props.closeContent),
"show": isVisible.value,
"fade": !computedNoAnimation.value
}]);
(0, vue.watch)(modelValue, (newValue) => {
if (typeof newValue === "number") {
const event = buildTriggerableEvent("show", {
cancelable: true,
trigger: "model"
});
emit("show", event);
if (event.defaultPrevented) emit("show-prevented", buildTriggerableEvent("show-prevented"));
else restart();
}
});
(0, vue.watch)(isActive, (newValue) => {
if (newValue === false && isPaused.value === false) {
hide();
modelValue.value = 0;
stop();
}
});
const sharedSlots = (0, vue.computed)(() => ({
toggle,
show,
hide,
id: computedId.value,
visible: showRef.value,
active: isActive.value
}));
__expose({
show,
hide,
toggle,
pause,
restart,
resume,
stop
});
return (_ctx, _cache) => {
const _component_BButton = require_BButton.BButton_default;
return (0, vue.unref)(renderRef) || (0, vue.unref)(contentShowing) ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(transitionProps), { appear: !!modelValue.value || (0, vue.unref)(props).visible }), {
default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createElementVNode)("div", {
id: (0, vue.unref)(props).id,
ref: "_element",
class: (0, vue.normalizeClass)(["alert", [(0, vue.unref)(props).alertClass, computedClasses.value]]),
tabindex: "0",
role: !isAlertVisible.value ? void 0 : (0, vue.unref)(props).isStatus ? "status" : "alert",
"aria-live": !isAlertVisible.value ? void 0 : (0, vue.unref)(props).isStatus ? "polite" : "assertive",
"aria-atomic": !isAlertVisible.value ? void 0 : true
}, [
(0, vue.unref)(contentShowing) && (slots.title || (0, vue.unref)(props).title) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(props).headerTag), {
key: 0,
class: (0, vue.normalizeClass)(["alert-heading d-flex gap-2", (0, vue.unref)(props).headerClass])
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "title", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value)), () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)((0, vue.unref)(props).title), 1)]), (0, vue.unref)(props).dismissible ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [slots.close || (0, vue.unref)(props).closeContent ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_BButton, {
key: 0,
class: (0, vue.normalizeClass)([[(0, vue.unref)(props).closeClass], "ms-auto ps-1 btn-close-custom"]),
variant: (0, vue.unref)(props).closeVariant,
onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)(($event) => (0, vue.unref)(hide)("close"), ["stop", "prevent"]))
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "close", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value)), () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).closeContent), 1)])]),
_: 3
}, 8, ["class", "variant"])) : ((0, vue.openBlock)(), (0, vue.createBlock)(require_BCloseButton.BCloseButton_default, {
key: 1,
"aria-label": (0, vue.unref)(props).closeLabel,
class: (0, vue.normalizeClass)([(0, vue.unref)(props).closeClass]),
onClick: _cache[1] || (_cache[1] = (0, vue.withModifiers)(($event) => (0, vue.unref)(hide)("close"), ["stop", "prevent"]))
}, null, 8, ["aria-label", "class"]))], 64)) : (0, vue.createCommentVNode)("", true)]),
_: 3
}, 8, ["class"])) : (0, vue.createCommentVNode)("", true),
(0, vue.unref)(contentShowing) && (slots.default || (0, vue.unref)(props).body) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(computedTag.value), (0, vue.mergeProps)({ class: ["alert-body", (0, vue.unref)(props).bodyClass] }, (0, vue.unref)(computedLinkProps), { onClick: _cache[2] || (_cache[2] = ($event) => (0, vue.unref)(computedLink) && (0, vue.unref)(props).dismissible ? (0, vue.unref)(hide)() : () => {}) }), {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value)), () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).body), 1)])]),
_: 3
}, 16, ["class"])), (0, vue.unref)(props).dismissible && !(slots.title || (0, vue.unref)(props).title) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [slots.close || (0, vue.unref)(props).closeContent ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_BButton, {
key: 0,
class: (0, vue.normalizeClass)([[(0, vue.unref)(props).closeClass], "ms-auto btn-close-custom"]),
variant: (0, vue.unref)(props).closeVariant,
onClick: _cache[3] || (_cache[3] = (0, vue.withModifiers)(($event) => (0, vue.unref)(hide)("close"), ["stop", "prevent"]))
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "close", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(sharedSlots.value)), () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).closeContent), 1)])]),
_: 3
}, 8, ["class", "variant"])) : ((0, vue.openBlock)(), (0, vue.createBlock)(require_BCloseButton.BCloseButton_default, {
key: 1,
"aria-label": (0, vue.unref)(props).closeLabel,
class: (0, vue.normalizeClass)([(0, vue.unref)(props).closeClass]),
onClick: _cache[4] || (_cache[4] = (0, vue.withModifiers)(($event) => (0, vue.unref)(hide)("close"), ["stop", "prevent"]))
}, null, 8, ["aria-label", "class"]))], 64)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true),
typeof modelValue.value === "number" && (0, vue.unref)(props).progressProps !== void 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_BProgress.BProgress_default, {
key: 2,
animated: (0, vue.unref)(props).progressProps.animated,
precision: (0, vue.unref)(props).progressProps.precision,
"show-progress": (0, vue.unref)(props).progressProps.showProgress,
"show-value": (0, vue.unref)(props).progressProps.showValue,
striped: (0, vue.unref)(props).progressProps.striped,
variant: (0, vue.unref)(props).progressProps.variant,
max: modelValue.value,
value: (0, vue.unref)(remainingMs),
height: "4px"
}, null, 8, [
"animated",
"precision",
"show-progress",
"show-value",
"striped",
"variant",
"max",
"value"
])) : (0, vue.createCommentVNode)("", true)
], 10, _hoisted_1), [[vue.vShow, isAlertVisible.value]])]),
_: 3
}, 16, ["appear"])) : (0, vue.createCommentVNode)("", true);
};
}
});
//#endregion
Object.defineProperty(exports, "BAlert_default", {
enumerable: true,
get: function() {
return BAlert_default;
}
});
//# sourceMappingURL=BAlert-BnT7fF6B.js.map