bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
309 lines (308 loc) • 12.8 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_useId = require("./useId-DTrBK9CE.js");
const require_useDefaults = require("./useDefaults-DK6Y9lar.js");
const require_useShowHide = require("./useShowHide-BFr32vgn.js");
const require_useColorVariantClasses = require("./useColorVariantClasses-DVaQDVQC.js");
const require_BLink = require("./BLink-DW7s8W_N.js");
const require_BButton = require("./BButton-BID3NrxE.js");
const require_BCloseButton = require("./BCloseButton-CgIVNv2g.js");
const require_BProgress = require("./BProgress-CeEIdt1a.js");
const require_useCountdownHover = require("./useCountdownHover-CaF8_TRT.js");
let vue = require("vue");
//#region src/components/BToast/BToast.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"
};
//#endregion
//#region src/components/BToast/BToast.vue
var BToast_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "BToast",
props: /* @__PURE__ */ (0, vue.mergeModels)({
body: { default: void 0 },
bodyClass: { default: void 0 },
closeClass: { default: void 0 },
closeContent: { default: void 0 },
closeLabel: { default: "Close" },
closeVariant: { default: "secondary" },
headerClass: { default: void 0 },
headerTag: { default: "div" },
id: { default: void 0 },
interval: { default: "requestAnimationFrame" },
isStatus: {
type: Boolean,
default: false
},
noCloseButton: {
type: Boolean,
default: false
},
noHoverPause: {
type: Boolean,
default: false
},
noProgress: {
type: Boolean,
default: false
},
noResumeOnHoverLeave: {
type: Boolean,
default: false
},
progressProps: { default: void 0 },
showOnPause: {
type: Boolean,
default: true
},
solid: {
type: Boolean,
default: false
},
title: { default: void 0 },
toastClass: { default: void 0 },
variant: { default: void 0 },
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, "BToast");
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, "toast");
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 isToastVisible = (0, vue.computed)(() => showRef.value || isActive.value || props.showOnPause && isPaused.value);
const colorClasses = require_useColorVariantClasses.useColorVariantClasses(props);
const computedClasses = (0, vue.computed)(() => [colorClasses.value, {
show: isVisible.value,
fade: !computedNoAnimation.value
}]);
(0, vue.watch)(modelValue, (newValue, oldValue) => {
if (typeof newValue === "number" && newValue > 0) {
const event = buildTriggerableEvent("show", {
cancelable: true,
trigger: "model"
});
emit("show", event);
if (event.defaultPrevented) emit("show-prevented", buildTriggerableEvent("show-prevented"));
else restart();
}
if (typeof newValue === "number" && newValue === 0) stop();
if (newValue === false && typeof oldValue === "number" && oldValue > 0) stop();
});
(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)(["toast", [(0, vue.unref)(props).toastClass, computedClasses.value]]),
tabindex: "0",
style: { "display": "block" },
role: !isToastVisible.value ? void 0 : (0, vue.unref)(props).isStatus ? "status" : "alert",
"aria-live": !isToastVisible.value ? void 0 : (0, vue.unref)(props).isStatus ? "polite" : "assertive",
"aria-atomic": !isToastVisible.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)(["toast-header", (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)("strong", null, (0, vue.toDisplayString)((0, vue.unref)(props).title), 1)]), !(0, vue.unref)(props).noCloseButton ? ((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"]),
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)(["ms-auto", [(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: ["toast-body", (0, vue.unref)(props).bodyClass] }, (0, vue.unref)(computedLinkProps), { onClick: _cache[2] || (_cache[2] = ($event) => (0, vue.unref)(computedLink) ? (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).noCloseButton && !(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)(["ms-auto btn-close-custom", [(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).noProgress ? ((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, isToastVisible.value]])]),
_: 3
}, 16, ["appear"])) : (0, vue.createCommentVNode)("", true);
};
}
});
//#endregion
Object.defineProperty(exports, "BToast_default", {
enumerable: true,
get: function() {
return BToast_default;
}
});
//# sourceMappingURL=BToast-BraVbf4N.js.map