bootstrap-vue-3
Version:
Early (but lovely) implementation of Vue 3, Bootstrap 5 and Typescript
1,316 lines • 274 kB
JavaScript
import { computed, defineComponent, provide, openBlock, createElementBlock, unref, normalizeClass, renderSlot, onMounted, onBeforeUnmount, ref, watch, createBlock, resolveDynamicComponent, withCtx, Comment, inject, createElementVNode, withDirectives, createTextVNode, toDisplayString, createVNode, createCommentVNode, normalizeStyle, useSlots, mergeProps, getCurrentInstance, reactive, Fragment, renderList, resolveComponent, isReactive, h, useAttrs, withModifiers, isRef, vModelCheckbox, nextTick, onActivated, vModelRadio, vModelSelect, normalizeProps, guardReactiveProps, Teleport, createSlots, Transition, onUnmounted } from "vue";
import Collapse from "bootstrap/js/dist/collapse";
import Alert from "bootstrap/js/dist/alert";
import Carousel from "bootstrap/js/dist/carousel";
import Dropdown from "bootstrap/js/dist/dropdown";
import Modal from "bootstrap/js/dist/modal";
import Offcanvas from "bootstrap/js/dist/offcanvas";
import Popover from "bootstrap/js/dist/popover";
import Tooltip from "bootstrap/js/dist/tooltip";
function getID(suffix = "") {
return `__BVID__${Math.random().toString().slice(2, 8)}___BV_${suffix}__`;
}
function useId(id, suffix) {
return computed(() => id || getID(suffix));
}
const _hoisted_1$J = ["id"];
const injectionKey$5 = Symbol();
const _sfc_main$1p = defineComponent({
__name: "BAccordion",
props: {
flush: { type: Boolean, default: false },
free: { type: Boolean, default: false },
id: { default: void 0 }
},
setup(__props) {
const props = __props;
const computedId = useId(props.id, "accordion");
const classes = computed(() => ({
"accordion-flush": props.flush
}));
if (!props.free) {
provide(injectionKey$5, computedId.value.toString());
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
id: unref(computedId),
class: normalizeClass(["accordion", unref(classes)])
}, [
renderSlot(_ctx.$slots, "default")
], 10, _hoisted_1$J);
};
}
});
function useEventListener(element, event, callback) {
onMounted(() => {
var _a;
(_a = element == null ? void 0 : element.value) == null ? void 0 : _a.addEventListener(event, callback);
});
onBeforeUnmount(() => {
var _a;
(_a = element == null ? void 0 : element.value) == null ? void 0 : _a.removeEventListener(event, callback);
});
}
const _sfc_main$1o = /* @__PURE__ */ defineComponent({
__name: "BCollapse",
props: {
accordion: null,
id: { default: getID() },
modelValue: { type: Boolean, default: false },
tag: { default: "div" },
toggle: { type: Boolean, default: false },
visible: { type: Boolean, default: false }
},
emits: ["update:modelValue", "show", "shown", "hide", "hidden"],
setup(__props, { emit }) {
const props = __props;
const element = ref();
const instance = ref();
const classes = computed(() => ({
show: props.modelValue
}));
const close = () => emit("update:modelValue", false);
useEventListener(element, "show.bs.collapse", () => {
emit("show");
emit("update:modelValue", true);
});
useEventListener(element, "hide.bs.collapse", () => {
emit("hide");
emit("update:modelValue", false);
});
useEventListener(element, "shown.bs.collapse", () => emit("shown"));
useEventListener(element, "hidden.bs.collapse", () => emit("hidden"));
onMounted(() => {
var _a;
instance.value = new Collapse(element.value, {
parent: props.accordion ? `#${props.accordion}` : void 0,
toggle: props.toggle
});
if (props.visible || props.modelValue) {
emit("update:modelValue", true);
(_a = instance.value) == null ? void 0 : _a.show();
}
});
watch(() => props.modelValue, (value) => {
var _a, _b;
if (value) {
(_a = instance.value) == null ? void 0 : _a.show();
} else {
(_b = instance.value) == null ? void 0 : _b.hide();
}
});
watch(() => props.visible, (value) => {
var _a, _b;
if (value) {
emit("update:modelValue", !!value);
(_a = instance.value) == null ? void 0 : _a.show();
} else {
emit("update:modelValue", !!value);
(_b = instance.value) == null ? void 0 : _b.hide();
}
});
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
id: __props.id,
ref_key: "element",
ref: element,
class: normalizeClass(["collapse", unref(classes)]),
"data-bs-parent": __props.accordion || null
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", {
visible: __props.modelValue,
close
})
]),
_: 3
}, 8, ["id", "class", "data-bs-parent"]);
};
}
});
const RX_UNDERSCORE = /_/g;
const RX_LOWER_UPPER = /([a-z])([A-Z])/g;
const RX_FIRST_START_SPACE_WORD = /(\s|^)(\w)/;
const RX_SPACE_SPLIT = /\s+/;
const RX_HASH = /^#/;
const RX_HASH_ID = /^#[A-Za-z]+[\w\-:.]*$/;
const arrayIncludes = (array, value) => array.indexOf(value) !== -1;
const from = (...args) => Array.from([...args]);
const concat = (...args) => Array.prototype.concat.apply([], args);
const HAS_WINDOW_SUPPORT = typeof window !== "undefined";
const HAS_DOCUMENT_SUPPORT = typeof document !== "undefined";
const HAS_NAVIGATOR_SUPPORT = typeof navigator !== "undefined";
const IS_BROWSER = HAS_WINDOW_SUPPORT && HAS_DOCUMENT_SUPPORT && HAS_NAVIGATOR_SUPPORT;
const DOCUMENT = HAS_DOCUMENT_SUPPORT ? document : {};
const RX_NUMBER = /^[0-9]*\.?[0-9]+$/;
const isBoolean = (value) => toType(value) === "boolean";
const isObject = (obj) => obj !== null && typeof obj === "object";
const isString = (value) => typeof value === "string";
const isUndefined = (value) => value === void 0;
const isNull = (value) => value === null;
const isUndefinedOrNull = (value) => isUndefined(value) || isNull(value);
const isNumeric = (value) => RX_NUMBER.test(String(value));
const isNumber = (value) => typeof value === "number";
const toType = (value) => typeof value;
const isFunction = (value) => toType(value) === "function";
const isPlainObject = (obj) => Object.prototype.toString.call(obj) === "[object Object]";
const isArray = (value) => Array.isArray(value);
const toString = (val, spaces = 2) => isUndefinedOrNull(val) ? "" : isArray(val) || isPlainObject(val) && val.toString === Object.prototype.toString ? JSON.stringify(val, null, spaces) : String(val);
const startCase = (str) => str.replace(RX_UNDERSCORE, " ").replace(RX_LOWER_UPPER, (str2, $1, $2) => `${$1} ${$2}`).replace(RX_FIRST_START_SPACE_WORD, (str2, $1, $2) => $1 + $2.toUpperCase());
const upperFirst = (str) => {
str = isString(str) ? str.trim() : String(str);
return str.charAt(0).toUpperCase() + str.slice(1);
};
const isElement = (el) => !!(el && el.nodeType === Node.ELEMENT_NODE);
const getBCR = (el) => isElement(el) ? el.getBoundingClientRect() : null;
const getActiveElement = (excludes = []) => {
const { activeElement } = document;
return activeElement && !excludes.some((el) => el === activeElement) ? activeElement : null;
};
const isActiveElement = (el) => isElement(el) && el === getActiveElement();
const attemptFocus = (el, options = {}) => {
try {
el.focus(options);
} catch (e) {
console.error(e);
}
return isActiveElement(el);
};
const getStyle = (el, prop) => prop && isElement(el) ? el.getAttribute(prop) || null : null;
const isVisible = (el) => {
if (getStyle(el, "display") === "none") {
return false;
}
const bcr = getBCR(el);
return !!(bcr && bcr.height > 0 && bcr.width > 0);
};
const isEmptySlot = (slot, data) => !slot || slot(data).filter((vnode) => vnode.type !== Comment).length < 1;
const select = (selector, root) => (isElement(root) ? root : DOCUMENT).querySelector(selector) || null;
const selectAll = (selector, root) => from((isElement(root) ? root : DOCUMENT).querySelectorAll(selector));
const getAttr = (el, attr) => attr && isElement(el) ? el.getAttribute(attr) : null;
const setAttr = (el, attr, value) => {
if (attr && isElement(el)) {
el.setAttribute(attr, value);
}
};
const removeAttr = (el, attr) => {
if (attr && isElement(el)) {
el.removeAttribute(attr);
}
};
const isTag = (tag, name) => toString(tag).toLowerCase() === toString(name).toLowerCase();
const requestAF = HAS_WINDOW_SUPPORT ? window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || ((cb) => setTimeout(cb, 16)) : (cb) => setTimeout(cb, 0);
function resolveToggleType(el) {
if (el.classList.contains("offcanvas")) {
return "offcanvas";
}
if (el.classList.contains("collapse")) {
return "collapse";
}
throw Error("Couldn't resolve toggle type");
}
const getTargets = (binding, el) => {
const { modifiers, arg, value } = binding;
const targets = Object.keys(modifiers || {});
const localValue = isString(value) ? value.split(RX_SPACE_SPLIT) : value;
if (isTag(el.tagName, "a")) {
const href = getAttr(el, "href") || "";
if (RX_HASH_ID.test(href)) {
targets.push(href.replace(RX_HASH, ""));
}
}
concat(arg, localValue).forEach((t) => isString(t) && targets.push(t));
return targets.filter((t, index, arr) => t && arr.indexOf(t) === index);
};
const BToggle = {
mounted(el, binding) {
const targetIds = getTargets(binding, el);
const targetAttrs = [];
let targetAttr = "data-bs-target";
if (el.tagName === "a") {
targetAttr = "href";
}
for (let index = 0; index < targetIds.length; index++) {
const targetId = targetIds[index];
const target = document.getElementById(targetId);
if (target) {
el.setAttribute("data-bs-toggle", resolveToggleType(target));
targetAttrs.push(`#${targetId}`);
}
}
if (targetAttrs.length > 0) {
el.setAttribute(targetAttr, targetAttrs.join(","));
}
}
};
const _hoisted_1$I = { class: "accordion-item" };
const _hoisted_2$n = ["id"];
const _hoisted_3$9 = ["aria-expanded", "aria-controls"];
const _hoisted_4$6 = { class: "accordion-body" };
const _sfc_main$1n = /* @__PURE__ */ defineComponent({
__name: "BAccordionItem",
props: {
id: null,
title: null,
visible: { type: Boolean, default: false }
},
setup(__props) {
const props = __props;
const computedId = useId(props.id, "accordion_item");
const parent = inject(injectionKey$5, "");
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1$I, [
createElementVNode("h2", {
id: `${unref(computedId)}heading`,
class: "accordion-header"
}, [
withDirectives((openBlock(), createElementBlock("button", {
class: normalizeClass(["accordion-button", { collapsed: !__props.visible }]),
type: "button",
"aria-expanded": __props.visible ? "true" : "false",
"aria-controls": unref(computedId)
}, [
renderSlot(_ctx.$slots, "title", {}, () => [
createTextVNode(toDisplayString(__props.title), 1)
])
], 10, _hoisted_3$9)), [
[unref(BToggle), void 0, unref(computedId)]
])
], 8, _hoisted_2$n),
createVNode(_sfc_main$1o, {
id: unref(computedId),
class: "accordion-collapse",
visible: __props.visible,
accordion: unref(parent),
"aria-labelledby": `heading${unref(computedId)}`
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_4$6, [
renderSlot(_ctx.$slots, "default")
])
]),
_: 3
}, 8, ["id", "visible", "accordion", "aria-labelledby"])
]);
};
}
});
const toInteger = (value, defaultValue = NaN) => {
return Number.isInteger(value) ? value : defaultValue;
};
const stringToInteger = (value, defaultValue = NaN) => {
const integer = parseInt(value, 10);
return isNaN(integer) ? defaultValue : integer;
};
const toFloat = (value, defaultValue = NaN) => {
const float = parseFloat(value.toString());
return isNaN(float) ? defaultValue : float;
};
const _hoisted_1$H = ["aria-label"];
const _sfc_main$1m = /* @__PURE__ */ defineComponent({
__name: "BAlert",
props: {
dismissLabel: { default: "Close" },
dismissible: { type: Boolean, default: false },
fade: { type: Boolean, default: false },
modelValue: { type: [Boolean, Number], default: false },
show: { type: Boolean, default: false },
variant: { default: "info" }
},
emits: ["dismissed", "dismiss-count-down", "update:modelValue"],
setup(__props, { emit }) {
const props = __props;
const element = ref();
const instance = ref();
const classes = computed(() => ({
[`alert-${props.variant}`]: props.variant,
"show": props.modelValue,
"alert-dismissible": props.dismissible,
"fade": props.modelValue
}));
let _countDownTimeout;
const parseCountDown = (value) => {
if (typeof value === "boolean") {
return 0;
}
const numberValue = toInteger(value, 0);
return numberValue > 0 ? numberValue : 0;
};
const clearCountDownInterval = () => {
if (_countDownTimeout === void 0)
return;
clearTimeout(_countDownTimeout);
_countDownTimeout = void 0;
};
const countDown = ref(parseCountDown(props.modelValue));
const isAlertVisible = computed(() => !!props.modelValue || props.show);
onBeforeUnmount(() => {
var _a;
clearCountDownInterval();
(_a = instance.value) == null ? void 0 : _a.dispose();
instance.value = void 0;
});
const parsedModelValue = computed(() => {
if (props.modelValue === true) {
return true;
}
if (props.modelValue === false)
return false;
if (toInteger(props.modelValue, 0) < 1) {
return false;
}
return !!props.modelValue;
});
const handleShowAndModelChanged = () => {
countDown.value = parseCountDown(props.modelValue);
if ((parsedModelValue.value || props.show) && !instance.value)
instance.value = new Alert(element.value);
};
const dismissClicked = () => {
if (typeof props.modelValue === "boolean") {
emit("update:modelValue", false);
} else {
emit("update:modelValue", 0);
}
emit("dismissed");
};
watch(() => props.modelValue, handleShowAndModelChanged);
watch(() => props.show, handleShowAndModelChanged);
watch(countDown, (newValue) => {
clearCountDownInterval();
if (typeof props.modelValue === "boolean")
return;
emit("dismiss-count-down", newValue);
if (newValue === 0 && props.modelValue > 0)
emit("dismissed");
if (props.modelValue !== newValue)
emit("update:modelValue", newValue);
if (newValue > 0) {
_countDownTimeout = setTimeout(() => {
countDown.value--;
}, 1e3);
}
});
return (_ctx, _cache) => {
return unref(isAlertVisible) ? (openBlock(), createElementBlock("div", {
key: 0,
ref_key: "element",
ref: element,
class: normalizeClass(["alert", unref(classes)]),
role: "alert"
}, [
renderSlot(_ctx.$slots, "default"),
__props.dismissible ? (openBlock(), createElementBlock("button", {
key: 0,
type: "button",
class: "btn-close",
"data-bs-dismiss": "alert",
"aria-label": __props.dismissLabel,
onClick: dismissClicked
}, null, 8, _hoisted_1$H)) : createCommentVNode("", true)
], 2)) : createCommentVNode("", true);
};
}
});
const mathMin = Math.min;
const mathMax = Math.max;
const injectionKey$4 = Symbol();
const _sfc_main$1l = defineComponent({
__name: "BAvatarGroup",
props: {
overlap: { default: 0.3 },
rounded: { type: [Boolean, String], default: false },
size: null,
square: { type: Boolean, default: false },
tag: { default: "div" },
variant: null
},
setup(__props) {
const props = __props;
const computedSize = computed(() => computeSize(props.size));
const computeOverlap = (value) => isString(value) && isNumeric(value) ? toFloat(value, 0) : value || 0;
const overlapScale = computed(() => mathMin(mathMax(computeOverlap(props.overlap), 0), 1) / 2);
const paddingStyle = computed(() => {
let { value } = computedSize;
value = value ? `calc(${value} * ${overlapScale.value})` : null;
return value ? { paddingLeft: value, paddingRight: value } : {};
});
provide(injectionKey$4, {
overlapScale,
size: props.size,
square: props.square,
rounded: props.rounded,
variant: props.variant
});
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
class: "b-avatar-group",
role: "group"
}, {
default: withCtx(() => [
createElementVNode("div", {
class: "b-avatar-group-inner",
style: normalizeStyle(unref(paddingStyle))
}, [
renderSlot(_ctx.$slots, "default")
], 4)
]),
_: 3
});
};
}
});
const _hoisted_1$G = {
key: 0,
class: "b-avatar-custom"
};
const _hoisted_2$m = {
key: 1,
class: "b-avatar-img"
};
const _hoisted_3$8 = ["src", "alt"];
const computeSize = (value) => {
const calcValue = isString(value) && isNumeric(value) ? toFloat(value, 0) : value;
return isNumber(calcValue) ? `${calcValue}px` : calcValue || null;
};
const _sfc_main$1k = defineComponent({
__name: "BAvatar",
props: {
alt: { default: "avatar" },
ariaLabel: null,
badge: { type: [Boolean, String], default: false },
badgeLeft: { type: Boolean, default: false },
badgeOffset: null,
badgeTop: { type: Boolean, default: false },
badgeVariant: { default: "primary" },
button: { type: Boolean, default: false },
buttonType: { default: "button" },
disabled: { type: Boolean, default: false },
icon: null,
rounded: { type: [Boolean, String], default: "circle" },
size: null,
square: { type: Boolean, default: false },
src: null,
text: null,
textVariant: { default: void 0 },
variant: { default: "secondary" }
},
emits: ["click", "img-error"],
setup(__props, { emit }) {
const props = __props;
const slots = useSlots();
const SIZES = ["sm", null, "lg"];
const FONT_SIZE_SCALE = 0.4;
const BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7;
const parentData = inject(injectionKey$4, null);
const computeContrastVariant = (colorVariant) => {
const variant = colorVariant;
if (variant === "light")
return "dark";
if (variant === "warning")
return "dark";
return "light";
};
const hasDefaultSlot = computed(() => !isEmptySlot(slots.default));
const hasBadgeSlot = computed(() => !isEmptySlot(slots.badge));
const showBadge = computed(() => props.badge || props.badge === "" || hasBadgeSlot.value);
const computedSize = computed(() => (parentData == null ? void 0 : parentData.size) ? parentData.size : computeSize(props.size));
const computedVariant = computed(() => (parentData == null ? void 0 : parentData.variant) ? parentData.variant : props.variant);
const computedRounded = computed(() => (parentData == null ? void 0 : parentData.rounded) ? parentData.rounded : props.rounded);
const attrs = computed(() => ({
"aria-label": props.ariaLabel || null,
"disabled": props.disabled || null
}));
const badgeClasses = computed(() => ({
[`bg-${props.badgeVariant}`]: props.badgeVariant
}));
const badgeText = computed(() => props.badge === true ? "" : props.badge);
const badgeTextClasses = computed(() => {
const textVariant = computeContrastVariant(props.badgeVariant);
return `text-${textVariant}`;
});
const classes = computed(() => ({
[`b-avatar-${props.size}`]: props.size && SIZES.indexOf(computeSize(props.size)) !== -1,
[`bg-${computedVariant.value}`]: computedVariant.value,
[`badge`]: !props.button && computedVariant.value && hasDefaultSlot.value,
rounded: computedRounded.value === "" || computedRounded.value === true,
[`rounded-circle`]: !props.square && computedRounded.value === "circle",
[`rounded-0`]: props.square || computedRounded.value === "0",
[`rounded-1`]: !props.square && computedRounded.value === "sm",
[`rounded-3`]: !props.square && computedRounded.value === "lg",
[`rounded-top`]: !props.square && computedRounded.value === "top",
[`rounded-bottom`]: !props.square && computedRounded.value === "bottom",
[`rounded-start`]: !props.square && computedRounded.value === "left",
[`rounded-end`]: !props.square && computedRounded.value === "right",
btn: props.button,
[`btn-${computedVariant.value}`]: props.button ? computedVariant.value : null
}));
const textClasses = computed(() => {
const textVariant = props.textVariant || computeContrastVariant(computedVariant.value);
return `text-${textVariant}`;
});
computed(() => {
if (props.icon)
return props.icon;
if (!props.text && !props.src)
return "person-fill";
return void 0;
});
const badgeStyle = computed(() => {
const offset = props.badgeOffset || "0px";
const fontSize = SIZES.indexOf(computedSize.value || null) === -1 ? `calc(${computedSize.value} * ${BADGE_FONT_SIZE_SCALE})` : "";
return {
fontSize: fontSize || "",
top: props.badgeTop ? offset : "",
bottom: props.badgeTop ? "" : offset,
left: props.badgeLeft ? offset : "",
right: props.badgeLeft ? "" : offset
};
});
const fontStyle = computed(() => {
const fontSize = SIZES.indexOf(computedSize.value || null) === -1 ? `calc(${computedSize.value} * ${FONT_SIZE_SCALE})` : null;
return fontSize ? { fontSize } : {};
});
const marginStyle = computed(() => {
var _a;
const overlapScale = ((_a = parentData == null ? void 0 : parentData.overlapScale) == null ? void 0 : _a.value) || 0;
const value = computedSize.value && overlapScale ? `calc(${computedSize.value} * -${overlapScale})` : null;
return value ? { marginLeft: value, marginRight: value } : {};
});
const tag = computed(() => props.button ? props.buttonType : "span");
const tagStyle = computed(() => ({
...marginStyle.value,
width: computedSize.value,
height: computedSize.value
}));
const clicked = (e) => {
if (!props.disabled && props.button)
emit("click", e);
};
const onImgError = (e) => emit("img-error", e);
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
class: ["b-avatar", unref(classes)],
style: unref(tagStyle)
}, unref(attrs), { onClick: clicked }), {
default: withCtx(() => [
unref(hasDefaultSlot) ? (openBlock(), createElementBlock("span", _hoisted_1$G, [
renderSlot(_ctx.$slots, "default")
])) : __props.src ? (openBlock(), createElementBlock("span", _hoisted_2$m, [
createElementVNode("img", {
src: __props.src,
alt: __props.alt,
onError: onImgError
}, null, 40, _hoisted_3$8)
])) : __props.text ? (openBlock(), createElementBlock("span", {
key: 2,
class: normalizeClass(["b-avatar-text", unref(textClasses)]),
style: normalizeStyle(unref(fontStyle))
}, toDisplayString(__props.text), 7)) : createCommentVNode("", true),
unref(showBadge) ? (openBlock(), createElementBlock("span", {
key: 3,
class: normalizeClass(["b-avatar-badge", unref(badgeClasses)]),
style: normalizeStyle(unref(badgeStyle))
}, [
unref(hasBadgeSlot) ? renderSlot(_ctx.$slots, "badge", { key: 0 }) : (openBlock(), createElementBlock("span", {
key: 1,
class: normalizeClass(unref(badgeTextClasses))
}, toDisplayString(unref(badgeText)), 3))
], 6)) : createCommentVNode("", true)
]),
_: 3
}, 16, ["class", "style"]);
};
}
});
const assign = (target, ...args) => Object.assign(target, ...args);
const defineProperties = (obj, props) => Object.defineProperties(obj, props);
const defineProperty = (obj, prop, descriptor) => Object.defineProperty(obj, prop, descriptor);
const omit = (obj, props) => Object.keys(obj).filter((key) => props.indexOf(key) === -1).reduce((result, key) => ({ ...result, [key]: obj[key] }), {});
const readonlyDescriptor = () => ({ enumerable: true, configurable: false, writable: false });
var _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const BLINK_PROPS = {
active: { type: Boolean, default: false },
activeClass: { type: String, default: "router-link-active" },
append: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
event: { type: [String, Array], default: "click" },
exact: { type: Boolean, default: false },
exactActiveClass: { type: String, default: "router-link-exact-active" },
href: { type: String },
rel: { type: String, default: null },
replace: { type: Boolean, default: false },
routerComponentName: { type: String, default: "router-link" },
routerTag: { type: String, default: "a" },
target: { type: String, default: "_self" },
to: { type: [String, Object], default: null }
};
const _sfc_main$1j = defineComponent({
name: "BLink",
props: BLINK_PROPS,
emits: ["click"],
setup(props, { emit, attrs }) {
const instance = getCurrentInstance();
const link = ref(null);
const tag = computed(() => {
const routerName = props.routerComponentName.split("-").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("");
const hasRouter = (instance == null ? void 0 : instance.appContext.app.component(routerName)) !== void 0;
if (!hasRouter || props.disabled || !props.to) {
return "a";
}
return props.routerComponentName;
});
const computedHref = computed(() => {
const toFallback = "#";
if (props.href)
return props.href;
if (typeof props.to === "string")
return props.to || toFallback;
const to = props.to;
if (Object.prototype.toString.call(to) === "[object Object]" && (to.path || to.query || to.hash)) {
const path = to.path || "";
const query = to.query ? `?${Object.keys(to.query).map((e) => `${e}=${to.query[e]}`).join("=")}` : "";
const hash = !to.hash || to.hash.charAt(0) === "#" ? to.hash || "" : `#${to.hash}`;
return `${path}${query}${hash}` || toFallback;
}
return toFallback;
});
const routerAttr = computed(() => ({
"to": props.to,
"href": computedHref.value,
"target": props.target,
"rel": props.target === "_blank" && props.rel === null ? "noopener" : props.rel || null,
"tabindex": props.disabled ? "-1" : typeof attrs.tabindex === "undefined" ? null : attrs.tabindex,
"aria-disabled": props.disabled ? "true" : null
}));
const clicked = (e) => {
if (props.disabled) {
e.preventDefault();
e.stopImmediatePropagation();
return;
}
emit("click", e);
};
return {
tag,
routerAttr,
link,
clicked
};
}
});
function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
return _ctx.tag === "router-link" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps({ key: 0 }, _ctx.routerAttr, { custom: "" }), {
default: withCtx(({ href, navigate, isActive, isExactActive }) => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.routerTag), mergeProps({
ref: "link",
href,
class: [isActive && _ctx.activeClass, isExactActive && _ctx.exactActiveClass]
}, _ctx.$attrs, { onClick: navigate }), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 2
}, 1040, ["href", "class", "onClick"]))
]),
_: 3
}, 16)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps({
key: 1,
ref: "link",
class: { active: _ctx.active, disabled: _ctx.disabled }
}, _ctx.routerAttr, { onClick: _ctx.clicked }), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["class", "onClick"]));
}
var BLink = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$b]]);
const isLink = (props) => !!(props.href || props.to);
const suffixPropName = (suffix, value) => value + (suffix ? upperFirst(suffix) : "");
const pluckProps = (keysToPluck, objToPluck, transformFn = (x) => x) => (isArray(keysToPluck) ? keysToPluck.slice() : Object.keys(keysToPluck)).reduce((memo, prop) => {
memo[transformFn(prop)] = objToPluck[prop];
return memo;
}, {});
const linkProps = omit(BLINK_PROPS, ["event", "routerTag"]);
const _sfc_main$1i = defineComponent({
name: "BBadge",
props: {
pill: { type: Boolean, default: false },
tag: { type: String, default: "span" },
variant: { type: String, default: "secondary" },
textIndicator: { type: Boolean, default: false },
dotIndicator: { type: Boolean, default: false },
...linkProps
},
setup(props) {
const link = computed(() => isLink(props));
const computedTag = computed(() => link.value ? "b-link" : props.tag);
const classes = computed(() => ({
[`bg-${props.variant}`]: props.variant,
"active": props.active,
"disabled": props.disabled,
"text-dark": ["warning", "info", "light"].includes(props.variant),
"rounded-pill": props.pill,
"position-absolute top-0 start-100 translate-middle": props.textIndicator || props.dotIndicator,
"p-2 border border-light rounded-circle": props.dotIndicator,
"text-decoration-none": link
}));
return {
classes,
props: link.value ? pluckProps(linkProps, props) : {},
computedTag
};
}
});
function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock(resolveDynamicComponent(_ctx.computedTag), mergeProps({
class: ["badge", _ctx.classes]
}, _ctx.props), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["class"]);
}
var BBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$a]]);
const BREADCRUMB_SYMBOL = Symbol();
const BREADCRUMB_OBJECT = {
items: reactive([]),
reset() {
this.items = reactive([]);
}
};
function createBreadcrumb(app) {
app.provide(BREADCRUMB_SYMBOL, BREADCRUMB_OBJECT);
}
function useBreadcrumb() {
const context = inject(BREADCRUMB_SYMBOL);
if (!context) {
return BREADCRUMB_OBJECT;
}
return context;
}
const _sfc_main$1h = defineComponent({
name: "BBreadcrumbItem",
props: {
...omit(BLINK_PROPS, ["event", "routerTag"]),
active: { type: Boolean, default: false },
ariaCurrent: { type: String, default: "location" },
disabled: { type: Boolean, default: false },
text: { type: String, required: false }
},
emits: ["click"],
setup(props, { emit }) {
const liClasses = computed(() => ({
active: props.active
}));
const computedTag = computed(() => props.active ? "span" : "b-link");
const computedAriaCurrent = computed(() => ({
"aria-current": props.active ? props.ariaCurrent : void 0
}));
const clicked = (e) => {
if (props.disabled || props.active) {
e.preventDefault();
e.stopImmediatePropagation();
return;
}
if (!props.disabled)
emit("click", e);
};
return {
liClasses,
computedTag,
computedAriaCurrent,
clicked
};
}
});
function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("li", {
class: normalizeClass(["breadcrumb-item", _ctx.liClasses])
}, [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.computedTag), mergeProps({ "aria-current": _ctx.computedAriaCurrent }, _ctx.$props, { onClick: _ctx.clicked }), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["aria-current", "onClick"]))
], 2);
}
var BBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["render", _sfc_render$9]]);
const _hoisted_1$F = { "aria-label": "breadcrumb" };
const _hoisted_2$l = { class: "breadcrumb" };
const _sfc_main$1g = /* @__PURE__ */ defineComponent({
__name: "BBreadcrumb",
props: {
items: null
},
setup(__props) {
const props = __props;
const breadcrumb = useBreadcrumb();
const breadcrumbItemObjects = computed(() => {
const localItems = props.items || (breadcrumb == null ? void 0 : breadcrumb.items) || [];
let activeDefined = false;
const items = localItems.map((item, idx) => {
if (typeof item === "string") {
item = { text: item };
if (idx < localItems.length - 1)
item.href = "#";
}
if (item.active)
activeDefined = true;
if (!item.active && !activeDefined) {
item.active = idx + 1 === localItems.length;
}
return item;
});
return items;
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("nav", _hoisted_1$F, [
createElementVNode("ol", _hoisted_2$l, [
renderSlot(_ctx.$slots, "prepend"),
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(breadcrumbItemObjects), (item, i) => {
return openBlock(), createBlock(BBreadcrumbItem, mergeProps({ key: i }, item), {
default: withCtx(() => [
createTextVNode(toDisplayString(item.text), 1)
]),
_: 2
}, 1040);
}), 128)),
renderSlot(_ctx.$slots, "default"),
renderSlot(_ctx.$slots, "append")
])
]);
};
}
});
const _sfc_main$1f = defineComponent({
name: "BButton",
props: {
...BLINK_PROPS,
active: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
href: { type: String, required: false },
pill: { type: Boolean, default: false },
pressed: { type: Boolean, default: null },
rel: { type: String, default: null },
size: { type: String },
squared: { type: Boolean, default: false },
tag: { type: String, default: "button" },
target: { type: String, default: "_self" },
type: { type: String, default: "button" },
variant: { type: String, default: "secondary" }
},
emits: ["click", "update:pressed"],
setup(props, { emit }) {
const isToggle = props.pressed !== null;
const isButton = props.tag === "button" && !props.href && !props.to;
const isLink2 = !!(props.href || props.to);
const isBLink = !!props.to;
const nonStandardTag = props.href ? false : !isButton;
const classes = computed(() => ({
[`btn-${props.variant}`]: props.variant,
[`btn-${props.size}`]: props.size,
"active": props.active || props.pressed,
"rounded-pill": props.pill,
"rounded-0": props.squared,
"disabled": props.disabled
}));
const attrs = computed(() => ({
"aria-disabled": nonStandardTag ? String(props.disabled) : null,
"aria-pressed": isToggle ? String(props.pressed) : null,
"autocomplete": isToggle ? "off" : null,
"disabled": isButton ? props.disabled : null,
"href": props.href,
"rel": isLink2 ? props.rel : null,
"role": nonStandardTag || isLink2 ? "button" : null,
"target": isLink2 ? props.target : null,
"type": isButton ? props.type : null,
"to": !isButton ? props.to : null,
"append": isLink2 ? props.append : null,
"activeClass": isBLink ? props.activeClass : null,
"event": isBLink ? props.event : null,
"exact": isBLink ? props.exact : null,
"exactActiveClass": isBLink ? props.exactActiveClass : null,
"replace": isBLink ? props.replace : null,
"routerComponentName": isBLink ? props.routerComponentName : null,
"routerTag": isBLink ? props.routerTag : null
}));
const computedTag = computed(() => {
if (isBLink)
return "b-link";
return props.href ? "a" : props.tag;
});
const clicked = (e) => {
if (props.disabled) {
e.preventDefault();
e.stopPropagation();
return;
}
emit("click", e);
if (isToggle) {
emit("update:pressed", !props.pressed);
}
};
return {
classes,
attrs,
computedTag,
clicked
};
}
});
function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock(resolveDynamicComponent(_ctx.computedTag), mergeProps({
class: ["btn", _ctx.classes]
}, _ctx.attrs, { onClick: _ctx.clicked }), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["class", "onClick"]);
}
var BButton = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$8]]);
const _sfc_main$1e = /* @__PURE__ */ defineComponent({
__name: "BButtonGroup",
props: {
ariaRole: { default: "group" },
size: null,
tag: { default: "div" },
vertical: { type: Boolean, default: false }
},
setup(__props) {
const props = __props;
const classes = computed(() => ({
"btn-group": !props.vertical,
"btn-group-vertical": props.vertical,
[`btn-group-${props.size}`]: props.size
}));
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
class: normalizeClass(unref(classes)),
role: "group",
"aria-role": __props.ariaRole
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class", "aria-role"]);
};
}
});
const _hoisted_1$E = ["aria-label"];
const _sfc_main$1d = /* @__PURE__ */ defineComponent({
__name: "BButtonToolbar",
props: {
ariaRole: { default: "group" },
justify: { type: Boolean, default: false }
},
setup(__props) {
const props = __props;
const classes = computed(() => ({
"justify-content-between": props.justify
}));
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass([unref(classes), "btn-toolbar"]),
role: "toolbar",
"aria-label": __props.ariaRole
}, [
renderSlot(_ctx.$slots, "default")
], 10, _hoisted_1$E);
};
}
});
const _hoisted_1$D = ["innerHTML"];
const _hoisted_2$k = ["innerHTML"];
const _sfc_main$1c = /* @__PURE__ */ defineComponent({
__name: "BCard",
props: {
align: null,
bgVariant: null,
bodyBgVariant: null,
bodyClass: null,
bodyTag: { default: "div" },
bodyTextVariant: null,
borderVariant: null,
footer: null,
footerBgVariant: null,
footerBorderVariant: null,
footerClass: null,
footerHtml: { default: "" },
footerTag: { default: "div" },
footerTextVariant: null,
header: null,
headerBgVariant: null,
headerBorderVariant: null,
headerClass: null,
headerHtml: { default: "" },
headerTag: { default: "div" },
headerTextVariant: null,
imgAlt: null,
imgBottom: { type: Boolean, default: false },
imgEnd: { type: Boolean, default: false },
imgHeight: null,
imgLeft: { type: Boolean, default: false },
imgRight: { type: Boolean, default: false },
imgSrc: null,
imgStart: { type: Boolean, default: false },
imgTop: { type: Boolean, default: false },
imgWidth: null,
noBody: { type: Boolean, default: false },
overlay: { type: Boolean, default: false },
subTitle: null,
subTitleTag: { default: "h6" },
subTitleTextVariant: { default: "muted" },
tag: { default: "div" },
textVariant: null,
title: null,
titleTag: { default: "h4" }
},
setup(__props) {
const props = __props;
const classes = computed(() => ({
[`text-${props.align}`]: props.align,
[`text-${props.textVariant}`]: props.textVariant,
[`bg-${props.bgVariant}`]: props.bgVariant,
[`border-${props.borderVariant}`]: props.borderVariant,
"flex-row": props.imgLeft || props.imgStart,
"flex-row-reverse": props.imgEnd || props.imgRight
}));
const bodyClasses = computed(() => ({
"card-body": !props.noBody,
"card-img-overlay": props.overlay,
[`bg-${props.bodyBgVariant}`]: props.bodyBgVariant,
[`text-${props.bodyTextVariant}`]: props.bodyTextVariant
}));
const footerClasses = computed(() => ({
[`bg-${props.footerBgVariant}`]: props.footerBgVariant,
[`border-${props.footerBorderVariant}`]: props.footerBorderVariant,
[`text-${props.footerTextVariant}`]: props.footerTextVariant
}));
const headerClasses = computed(() => ({
[`bg-${props.headerBgVariant}`]: props.headerBgVariant,
[`border-${props.headerBorderVariant}`]: props.headerBorderVariant,
[`text-${props.headerTextVariant}`]: props.headerTextVariant
}));
const imgClasses = computed(() => ({
"card-img": !props.imgEnd && !props.imgRight && !props.imgStart && !props.imgLeft && !props.imgTop && !props.imgTop,
"card-img-right": props.imgEnd || props.imgRight,
"card-img-left": props.imgStart || props.imgLeft,
"card-img-top": props.imgTop,
"card-img-bottom": props.imgBottom
}));
const imgAttr = computed(() => ({
src: props.imgSrc,
alt: props.imgAlt,
height: props.imgHeight,
width: props.imgWidth
}));
const subTitleClasses = computed(() => ({
[`text-${props.subTitleTextVariant}`]: props.subTitleTextVariant
}));
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
class: normalizeClass(["card", unref(classes)])
}, {
default: withCtx(() => [
__props.imgSrc && !__props.imgBottom ? (openBlock(), createElementBlock("img", mergeProps({ key: 0 }, unref(imgAttr), { class: unref(imgClasses) }), null, 16)) : createCommentVNode("", true),
__props.header || _ctx.$slots.header || __props.headerHtml ? (openBlock(), createBlock(resolveDynamicComponent(__props.headerTag), {
key: 1,
class: normalizeClass(["card-header", [__props.headerClass, unref(headerClasses)]])
}, {
default: withCtx(() => [
!!__props.headerHtml ? (openBlock(), createElementBlock("div", {
key: 0,
innerHTML: __props.headerHtml
}, null, 8, _hoisted_1$D)) : renderSlot(_ctx.$slots, "header", { key: 1 }, () => [
createTextVNode(toDisplayString(__props.header), 1)
])
]),
_: 3
}, 8, ["class"])) : createCommentVNode("", true),
!__props.noBody ? (openBlock(), createBlock(resolveDynamicComponent(__props.bodyTag), {
key: 2,
class: normalizeClass([__props.bodyClass, unref(bodyClasses)])
}, {
default: withCtx(() => [
__props.title && !__props.noBody ? (openBlock(), createBlock(resolveDynamicComponent(__props.titleTag), {
key: 0,
class: "card-title"
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(__props.title), 1)
]),
_: 1
})) : createCommentVNode("", true),
__props.subTitle && !__props.noBody ? (openBlock(), createBlock(resolveDynamicComponent(__props.subTitleTag), {
key: 1,
class: normalizeClass(["card-subtitle mb-2", unref(subTitleClasses)])
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(__props.subTitle), 1)
]),
_: 1
}, 8, ["class"])) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class"])) : createCommentVNode("", true),
__props.noBody ? renderSlot(_ctx.$slots, "default", { key: 3 }) : createCommentVNode("", true),
__props.footer || _ctx.$slots.footer || __props.footerHtml ? (openBlock(), createBlock(resolveDynamicComponent(__props.footerTag), {
key: 4,
class: normalizeClass(["card-footer", [__props.footerClass, unref(footerClasses)]])
}, {
default: withCtx(() => [
!!__props.footerHtml ? (openBlock(), createElementBlock("div", {
key: 0,
innerHTML: __props.footerHtml
}, null, 8, _hoisted_2$k)) : renderSlot(_ctx.$slots, "footer", { key: 1 }, () => [
createTextVNode(toDisplayString(__props.footer), 1)
])
]),
_: 3
}, 8, ["class"])) : createCommentVNode("", true),
__props.imgSrc && __props.imgBottom ? (openBlock(), createElementBlock("img", mergeProps({ key: 5 }, unref(imgAttr), { class: unref(imgClasses) }), null, 16)) : createCommentVNode("", true)
]),
_: 3
}, 8, ["class"]);
};
}
});
const _sfc_main$1b = /* @__PURE__ */ defineComponent({
__name: "BCardTitle",
props: {
title: null,
titleTag: { default: "h4" }
},
setup(__props) {
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(__props.titleTag), { class: "card-title" }, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(__props.title), 1)
])
]),
_: 3
});
};
}
});
const _sfc_main$1a = /* @__PURE__ */ defineComponent({
__name: "BCardSubTitle",
props: {
subTitle: null,
subTitleTag: { default: "h6" },
subTitleTextVariant: { default: "muted" }
},
setup(__props) {
const props = __props;
const classes = computed(() => ({
[`text-${props.subTitleTextVariant}`]: props.subTitleTextVariant
}));
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(__props.subTitleTag), {
class: normalizeClass(["card-subtitle mb-2", unref(classes)])
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(__props.subTitle), 1)
])
]),
_: 3
}, 8, ["class"]);
};
}
});
const _sfc_main$19 = /* @__PURE__ */ defineComponent({
__name: "BCardBody",
props: {
bodyBgVariant: null,
bodyClass: null,
bodyTag: { default: "div" },
bodyTextVariant: null,
overlay: { type: Boolean, default: false },
subTitle: { default: "h4" },
subTitleTag: null,
subTitleTextVariant: null,
title: null,
titleTag: { default: "h4" }
},
setup(__props) {
const props = __props;
const classes = computed(() => ({
[`text-${props.bodyTextVariant}`]: props.bodyTextVariant,
[`bg-${props.bodyBgVariant}`]: props.bodyBgVariant
}));
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(__props.bodyTag), {
class: normalizeClass(["card-body", unref(classes)])
}, {
default: withCtx(() => [
__props.title ? (openBlock(), createBlock(_sfc_main$1b, {
key: 0,
"title-tag": __props.titleTag,
title: __props.title
}, null, 8, ["title-tag", "title"])) : createCommentVNode("", true),
__props.subTitle ? (openBlock(), createBlock(_sfc_main$1a, {
key: 1,
"sub-title-tag": __props.subTitleTag,
"sub-title": __props.subTitle,
"sub-title-text-variant": __props.subTitleTextVariant
}, null, 8, ["sub-title-tag", "sub-title", "sub-title-text-variant"])) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class"]);
};
}
});
const _hoisted_1$C = ["innerHTML"];
const _sfc_main$18 = /* @__PURE__ */ defineComponent({
__name: "BCardFooter",
props: {
footer: null,
footerBgVariant: null,
footerBorderVariant: null,
footerClass: null,
footerHtml: null,
footerTag: { default: "div" },
footerTextVariant: null
},
setup(__props) {
const props = __props;
const classes = computed(() => ({
[`text-${props.footerTextVariant}`]: props.footerTextVariant,
[`bg-${props.footerBgVariant}`]: props.footerBgVariant,
[`border-${props.footerBorderVariant}`]: props.footerBorderVariant
}));
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(__props.footerTag), {
class: normalizeClass(["card-footer", [__props.footerClass, unref(classes)]])
}, {
default: withCtx(() => [
!!__props.footerHtml ? (openBlock(), createElementBlock("div", {
key: 0,
innerHTML: __props.footerHtml
}, null, 8, _hoisted_1$C)) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
createTextVNode(toDisplayString(__props.footer), 1)
])
]),
_: 3
}, 8, ["class"]);
};
}
});
const _sfc_main$17 = /* @__PURE__ */ defineComponent({
__name: "B