bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
145 lines (144 loc) • 4.3 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_useDefaults = require("./useDefaults-DK6Y9lar.js");
const require_useColorVariantClasses = require("./useColorVariantClasses-DVaQDVQC.js");
const require_BLink = require("./BLink-DW7s8W_N.js");
const require_ConditionalWrapper = require("./ConditionalWrapper-ZqZKYsic.js");
let vue = require("vue");
//#endregion
//#region src/components/BBadge/BBadge.vue
var BBadge_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "BBadge",
props: {
dotIndicator: {
type: Boolean,
default: false
},
pill: {
type: Boolean,
default: false
},
placement: { default: void 0 },
tag: { default: "span" },
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 },
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 },
variant: { default: "secondary" },
bgVariant: { default: null },
textVariant: { default: null }
},
setup(__props) {
const props = require_useDefaults.useDefaults(__props, "BBadge");
const { computedLink, computedLinkProps } = require_BLink.useBLinkHelper(props, [
"active",
"activeClass",
"disabled",
"exactActiveClass",
"href",
"icon",
"noRel",
"opacity",
"opacityHover",
"noPrefetch",
"prefetch",
"prefetchOn",
"prefetchedClass",
"rel",
"replace",
"routerComponentName",
"stretched",
"target",
"to",
"underlineOffset",
"underlineOffsetHover",
"underlineOpacity",
"underlineOpacityHover",
"underlineVariant"
]);
const computedTag = (0, vue.computed)(() => computedLink.value ? require_BLink.BLink_default : props.tag);
const placementClasses = (0, vue.computed)(() => {
const pos = props.placement ?? (props.dotIndicator ? "top-end" : void 0);
return [
"position-absolute",
"translate-middle",
{
"start-0 top-0": pos === "top-start",
"start-0 top-50": pos === "start",
"start-0 top-100": pos === "bottom-start",
"start-50 top-0": pos === "top",
"start-50 top-100": pos === "bottom",
"start-100 top-0": pos === "top-end",
"start-100 top-50": pos === "end",
"start-100 top-100": pos === "bottom-end"
}
];
});
const colorClasses = require_useColorVariantClasses.useColorVariantClasses(props);
const computedClasses = (0, vue.computed)(() => [
colorClasses.value,
props.placement !== void 0 || props.dotIndicator === true ? placementClasses.value : void 0,
{
"active": props.active,
"disabled": props.disabled,
"rounded-pill": props.pill,
"p-2 border border-light rounded-circle": props.dotIndicator,
"text-decoration-none": computedLink.value
}
]);
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(computedTag.value), (0, vue.mergeProps)({ class: ["badge", computedClasses.value] }, (0, vue.unref)(computedLinkProps)), {
default: (0, vue.withCtx)(() => [(0, vue.createVNode)(require_ConditionalWrapper.ConditionalWrapper_default, (0, vue.mergeProps)({
skip: (0, vue.unref)(props).dotIndicator !== true,
tag: "span"
}, (0, vue.unref)(props).dotIndicator ? { class: "visually-hidden" } : {}), {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 16, ["skip"])]),
_: 3
}, 16, ["class"]);
};
}
});
//#endregion
Object.defineProperty(exports, "BBadge_default", {
enumerable: true,
get: function() {
return BBadge_default;
}
});
//# sourceMappingURL=BBadge-CKGGd4xB.js.map