bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
303 lines (302 loc) • 11.6 kB
JavaScript
import { t as useDefaults } from "./useDefaults-BKgBaqOV.mjs";
import { t as useId$1 } from "./useId-BKZFSYm8.mjs";
import { t as useShowHide } from "./useShowHide-IPyuuPL0.mjs";
import { t as useColorVariantClasses } from "./useColorVariantClasses-B6Me_Kx6.mjs";
import { r as useBLinkHelper, t as BLink_default } from "./BLink-Cz5YCsnv.mjs";
import { t as BButton_default } from "./BButton-DPCH-g3G.mjs";
import { t as BCloseButton_default } from "./BCloseButton-CjgbR1Ec.mjs";
import { t as BProgress_default } from "./BProgress-D0yfZ2Ze.mjs";
import { n as useCountdown, t as useCountdownHover } from "./useCountdownHover-DqREghQi.mjs";
import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useModel, useSlots, useTemplateRef, vShow, watch, watchEffect, withCtx, withDirectives, withModifiers } from "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__ */ defineComponent({
__name: "BToast",
props: /* @__PURE__ */ 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__ */ 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 = useDefaults(__props, "BToast");
const emit = __emit;
const slots = useSlots();
const element = useTemplateRef("_element");
const modelValue = useModel(__props, "modelValue");
const { computedLink, computedLinkProps } = useBLinkHelper(props);
const computedId = useId$1(() => props.id, "toast");
const { showRef, renderRef, hide, toggle, show, buildTriggerableEvent, computedNoAnimation, isVisible, transitionProps, contentShowing } = useShowHide(modelValue, props, emit, element, computedId);
const { isActive, pause, restart, resume, stop, isPaused, value: remainingMs } = useCountdown(computed(() => typeof modelValue.value === "boolean" ? 0 : modelValue.value), props.interval, { immediate: typeof modelValue.value === "number" && !!modelValue.value });
useCountdownHover(element, {
noHoverPause: () => props.noHoverPause || typeof modelValue.value !== "number",
noResumeOnHoverLeave: () => props.noResumeOnHoverLeave || typeof modelValue.value !== "number",
modelValueIgnoresHover: () => typeof modelValue.value === "boolean"
}, {
pause,
resume
});
watchEffect(() => {
emit("close-countdown", remainingMs.value);
});
const computedTag = computed(() => computedLink.value ? BLink_default : "div");
const isToastVisible = computed(() => showRef.value || isActive.value || props.showOnPause && isPaused.value);
const colorClasses = useColorVariantClasses(props);
const computedClasses = computed(() => [colorClasses.value, {
show: isVisible.value,
fade: !computedNoAnimation.value
}]);
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();
});
watch(isActive, (newValue) => {
if (newValue === false && isPaused.value === false) {
hide();
modelValue.value = 0;
stop();
}
});
const sharedSlots = 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 = BButton_default;
return unref(renderRef) || unref(contentShowing) ? (openBlock(), createBlock(Transition, mergeProps({ key: 0 }, unref(transitionProps), { appear: !!modelValue.value || unref(props).visible }), {
default: withCtx(() => [withDirectives(createElementVNode("div", {
id: unref(props).id,
ref: "_element",
class: normalizeClass(["toast", [unref(props).toastClass, computedClasses.value]]),
tabindex: "0",
style: { "display": "block" },
role: !isToastVisible.value ? void 0 : unref(props).isStatus ? "status" : "alert",
"aria-live": !isToastVisible.value ? void 0 : unref(props).isStatus ? "polite" : "assertive",
"aria-atomic": !isToastVisible.value ? void 0 : true
}, [
unref(contentShowing) && (slots.title || unref(props).title) ? (openBlock(), createBlock(resolveDynamicComponent(unref(props).headerTag), {
key: 0,
class: normalizeClass(["toast-header", unref(props).headerClass])
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "title", normalizeProps(guardReactiveProps(sharedSlots.value)), () => [createElementVNode("strong", null, toDisplayString(unref(props).title), 1)]), !unref(props).noCloseButton ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [slots.close || unref(props).closeContent ? (openBlock(), createBlock(_component_BButton, {
key: 0,
class: normalizeClass([[unref(props).closeClass], "ms-auto"]),
variant: unref(props).closeVariant,
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(hide)("close"), ["stop", "prevent"]))
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "close", normalizeProps(guardReactiveProps(sharedSlots.value)), () => [createTextVNode(toDisplayString(unref(props).closeContent), 1)])]),
_: 3
}, 8, ["class", "variant"])) : (openBlock(), createBlock(BCloseButton_default, {
key: 1,
"aria-label": unref(props).closeLabel,
class: normalizeClass(["ms-auto", [unref(props).closeClass]]),
onClick: _cache[1] || (_cache[1] = withModifiers(($event) => unref(hide)("close"), ["stop", "prevent"]))
}, null, 8, ["aria-label", "class"]))], 64)) : createCommentVNode("", true)]),
_: 3
}, 8, ["class"])) : createCommentVNode("", true),
unref(contentShowing) && (slots.default || unref(props).body) ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(), createBlock(resolveDynamicComponent(computedTag.value), mergeProps({ class: ["toast-body", unref(props).bodyClass] }, unref(computedLinkProps), { onClick: _cache[2] || (_cache[2] = ($event) => unref(computedLink) ? unref(hide)() : () => {}) }), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(sharedSlots.value)), () => [createTextVNode(toDisplayString(unref(props).body), 1)])]),
_: 3
}, 16, ["class"])), !unref(props).noCloseButton && !(slots.title || unref(props).title) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [slots.close || unref(props).closeContent ? (openBlock(), createBlock(_component_BButton, {
key: 0,
class: normalizeClass([[unref(props).closeClass], "ms-auto btn-close-custom"]),
variant: unref(props).closeVariant,
onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(hide)("close"), ["stop", "prevent"]))
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "close", normalizeProps(guardReactiveProps(sharedSlots.value)), () => [createTextVNode(toDisplayString(unref(props).closeContent), 1)])]),
_: 3
}, 8, ["class", "variant"])) : (openBlock(), createBlock(BCloseButton_default, {
key: 1,
"aria-label": unref(props).closeLabel,
class: normalizeClass(["ms-auto btn-close-custom", [unref(props).closeClass]]),
onClick: _cache[4] || (_cache[4] = withModifiers(($event) => unref(hide)("close"), ["stop", "prevent"]))
}, null, 8, ["aria-label", "class"]))], 64)) : createCommentVNode("", true)])) : createCommentVNode("", true),
typeof modelValue.value === "number" && !unref(props).noProgress ? (openBlock(), createBlock(BProgress_default, {
key: 2,
animated: unref(props).progressProps?.animated,
precision: unref(props).progressProps?.precision,
"show-progress": unref(props).progressProps?.showProgress,
"show-value": unref(props).progressProps?.showValue,
striped: unref(props).progressProps?.striped,
variant: unref(props).progressProps?.variant,
max: modelValue.value,
value: unref(remainingMs),
height: "4px"
}, null, 8, [
"animated",
"precision",
"show-progress",
"show-value",
"striped",
"variant",
"max",
"value"
])) : createCommentVNode("", true)
], 10, _hoisted_1), [[vShow, isToastVisible.value]])]),
_: 3
}, 16, ["appear"])) : createCommentVNode("", true);
};
}
});
//#endregion
export { BToast_default as t };
//# sourceMappingURL=BToast-DGcCFzvf.mjs.map