bootstrap-vue-next/dist/BAvatar-eEIyfQso.js

Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development

require("./chunk-CoQrYLCe.js");
const require_keys = require("./keys-durSVUrO.js");
const require_dist = require("./dist-B_c893QG.js");
const require_dom = require("./dom-Bs6DzM72.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_useColorVariantClasses = require("./useColorVariantClasses-CEfOwjPv.js");
const require_BLink = require("./BLink-uemyYKst.js");
const require_BBadge = require("./BBadge-Cpuk1892.js");
const require_useNumberishToStyle = require("./useNumberishToStyle-DMGqQGfo.js");
const require_useRadiusElementClasses = require("./useRadiusElementClasses-Bi58dhJY.js");
let vue = require("vue");
//#region src/components/BAvatar/BAvatar.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = {
	key: 0,
	class: "b-avatar-custom"
};
var _hoisted_2 = {
	key: 1,
	class: "b-avatar-img"
};
var _hoisted_3 = ["src", "alt"];
var _hoisted_4 = {
	key: 3,
	class: "b-avatar-img"
};
var FONT_SIZE_SCALE = .4;
//#endregion
//#region src/components/BAvatar/BAvatar.vue
var BAvatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
	__name: "BAvatar",
	props: {
		alt: { default: "avatar" },
		badge: {
			type: [Boolean, String],
			default: false
		},
		badgeBgVariant: { default: null },
		badgePlacement: { default: "bottom-end" },
		badgeTextVariant: { default: null },
		badgeVariant: { default: "primary" },
		badgePill: {
			type: Boolean,
			default: false
		},
		badgeDotIndicator: {
			type: Boolean,
			default: false
		},
		button: {
			type: Boolean,
			default: false
		},
		buttonType: { default: "button" },
		size: { default: void 0 },
		square: {
			type: Boolean,
			default: false
		},
		src: { default: void 0 },
		text: { default: void 0 },
		active: {
			type: Boolean,
			default: void 0
		},
		activeClass: { default: void 0 },
		disabled: {
			type: Boolean,
			default: void 0
		},
		exactActiveClass: { default: void 0 },
		href: { 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: {},
		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 },
		rounded: {
			type: [
				Boolean,
				String,
				Number
			],
			default: "circle"
		},
		roundedTop: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		},
		roundedBottom: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		},
		roundedStart: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		},
		roundedEnd: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		}
	},
	emits: ["click", "img-error"],
	setup(__props, { emit: __emit }) {
		const props = require_useDefaults.useDefaults(__props, "BAvatar");
		const emit = __emit;
		const slots = (0, vue.useSlots)();
		const localSrc = (0, vue.ref)(props.src);
		(0, vue.watch)(() => props.src, (value) => {
			localSrc.value = value;
		});
		const { computedLink, computedLinkProps } = require_BLink.useBLinkHelper(props);
		const parentData = (0, vue.inject)(require_keys.avatarGroupInjectionKey, null);
		const SIZES = Object.freeze([null, ...Object.keys({
			lg: null,
			md: null,
			sm: null
		})]);
		const BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * .7;
		const hasDefaultSlot = (0, vue.computed)(() => !require_dom.isEmptySlot(slots.default));
		const hasBadgeSlot = (0, vue.computed)(() => !require_dom.isEmptySlot(slots.badge));
		const showBadge = (0, vue.computed)(() => !!props.badge || props.badge === "" || hasBadgeSlot.value);
		const computedSquare = (0, vue.computed)(() => parentData?.square.value || props.square);
		const computedSize = require_useNumberishToStyle.useNumberishToStyle(() => parentData?.size.value ?? props.size);
		const computedSizeIsLiteralSize = (0, vue.computed)(() => !!computedSize.value && SIZES.includes(computedSize.value));
		const computedVariant = (0, vue.computed)(() => parentData?.variant.value ?? props.variant);
		const computedRounded = (0, vue.computed)(() => parentData?.rounded.value ?? props.rounded);
		const computedRoundedTop = (0, vue.computed)(() => parentData?.roundedTop.value ?? props.roundedTop);
		const computedRoundedBottom = (0, vue.computed)(() => parentData?.roundedBottom.value ?? props.roundedBottom);
		const computedRoundedStart = (0, vue.computed)(() => parentData?.roundedStart.value ?? props.roundedStart);
		const computedRoundedEnd = (0, vue.computed)(() => parentData?.roundedEnd.value ?? props.roundedEnd);
		const radiusElementClasses = require_useRadiusElementClasses.useRadiusElementClasses(() => ({
			rounded: computedRounded.value,
			roundedTop: computedRoundedTop.value,
			roundedBottom: computedRoundedBottom.value,
			roundedStart: computedRoundedStart.value,
			roundedEnd: computedRoundedEnd.value
		}));
		const badgeText = (0, vue.computed)(() => props.badge === true ? "" : props.badge);
		const badgeImplicitlyDot = (0, vue.computed)(() => !badgeText.value && !hasBadgeSlot.value);
		const colorClasses = require_useColorVariantClasses.useColorVariantClasses(() => ({
			bgVariant: parentData?.bgVariant.value ?? props.bgVariant,
			textVariant: parentData?.textVariant.value ?? props.textVariant,
			variant: computedVariant.value
		}));
		const computedClasses = (0, vue.computed)(() => [
			colorClasses.value,
			computedSquare.value === true ? void 0 : radiusElementClasses.value,
			{
				[`b-avatar-${computedSize.value}`]: computedSizeIsLiteralSize.value && computedSize.value !== "md",
				[`btn-${computedVariant.value}`]: props.button ? computedVariant.value !== null : false,
				"badge": !props.button && computedVariant.value !== null && hasDefaultSlot.value,
				"btn": props.button,
				"rounded-0": computedSquare.value === true
			}
		]);
		const badgeStyle = (0, vue.computed)(() => ({ fontSize: (!computedSizeIsLiteralSize.value ? `calc(${computedSize.value} * ${BADGE_FONT_SIZE_SCALE})` : "") || "" }));
		const textFontStyle = (0, vue.computed)(() => {
			const fontSize = !computedSizeIsLiteralSize.value ? `calc(${computedSize.value} * ${FONT_SIZE_SCALE})` : null;
			return fontSize ? { fontSize } : {};
		});
		const marginStyle = (0, vue.computed)(() => {
			const overlapScale = parentData?.overlapScale?.value || 0;
			const value = computedSize.value && overlapScale ? `calc(${computedSize.value} * -${overlapScale})` : null;
			return value ? {
				marginLeft: value,
				marginRight: value
			} : {};
		});
		const computedTag = (0, vue.computed)(() => computedLink.value ? require_BLink.BLink_default : props.button ? "button" : "span");
		const computedStyle = (0, vue.computed)(() => ({
			...marginStyle.value,
			...!computedSizeIsLiteralSize.value ? {
				width: computedSize.value,
				height: computedSize.value
			} : void 0
		}));
		const clicked = (e) => {
			if (!props.disabled && (computedLink.value || props.button)) emit("click", e);
		};
		const onImgError = (e) => {
			localSrc.value = void 0;
			emit("img-error", e);
		};
		return (_ctx, _cache) => {
			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(computedTag.value), (0, vue.mergeProps)({
				class: ["b-avatar", computedClasses.value],
				style: computedStyle.value
			}, (0, vue.unref)(computedLinkProps), {
				type: (0, vue.unref)(props).button && !(0, vue.unref)(computedLink) ? (0, vue.unref)(props).buttonType : void 0,
				disabled: (0, vue.unref)(props).disabled || null,
				variant: null,
				onClick: clicked
			}), {
				default: (0, vue.withCtx)(() => [hasDefaultSlot.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1, [(0, vue.renderSlot)(_ctx.$slots, "default")])) : !!localSrc.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2, [(0, vue.createElementVNode)("img", {
					src: localSrc.value,
					alt: (0, vue.unref)(props).alt,
					onError: onImgError
				}, null, 40, _hoisted_3)])) : !!(0, vue.unref)(props).text ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
					key: 2,
					class: "b-avatar-text",
					style: (0, vue.normalizeStyle)(textFontStyle.value)
				}, (0, vue.toDisplayString)((0, vue.unref)(props).text), 5)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("svg", {
					xmlns: "http://www.w3.org/2000/svg",
					width: "80%",
					height: "80%",
					fill: "currentColor",
					class: "bi bi-person-fill",
					viewBox: "0 0 16 16"
				}, [(0, vue.createElementVNode)("path", { d: "M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" })], -1)])])), showBadge.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_BBadge.BBadge_default, {
					key: 4,
					pill: (0, vue.unref)(props).badgePill,
					"dot-indicator": (0, vue.unref)(props).badgeDotIndicator || badgeImplicitlyDot.value,
					variant: (0, vue.unref)(props).badgeVariant,
					"bg-variant": (0, vue.unref)(props).badgeBgVariant,
					"text-variant": (0, vue.unref)(props).badgeTextVariant,
					style: (0, vue.normalizeStyle)(badgeStyle.value),
					placement: (0, vue.unref)(props).badgePlacement
				}, {
					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "badge", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(badgeText.value), 1)])]),
					_: 3
				}, 8, [
					"pill",
					"dot-indicator",
					"variant",
					"bg-variant",
					"text-variant",
					"style",
					"placement"
				])) : (0, vue.createCommentVNode)("", true)]),
				_: 3
			}, 16, [
				"class",
				"style",
				"type",
				"disabled"
			]);
		};
	}
});
//#endregion
//#region src/components/BAvatar/BAvatarGroup.vue
var BAvatarGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
	__name: "BAvatarGroup",
	props: {
		overlap: { default: .3 },
		size: { default: void 0 },
		square: {
			type: Boolean,
			default: false
		},
		tag: { default: "div" },
		variant: { default: null },
		bgVariant: { default: null },
		textVariant: { default: null },
		rounded: {
			type: [
				Boolean,
				String,
				Number
			],
			default: "circle"
		},
		roundedTop: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		},
		roundedBottom: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		},
		roundedStart: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		},
		roundedEnd: {
			type: [
				Boolean,
				String,
				Number
			],
			default: void 0
		}
	},
	setup(__props) {
		const props = require_useDefaults.useDefaults(__props, "BAvatarGroup");
		const overlapNumber = require_dist.useToNumber(() => props.overlap);
		const computedSize = require_useNumberishToStyle.useNumberishToStyle(() => props.size);
		const overlapScale = (0, vue.computed)(() => Math.min(Math.max(overlapNumber.value, 0), 1) / 2);
		const paddingStyle = (0, vue.computed)(() => {
			const value = computedSize.value ? `calc(${computedSize.value} * ${overlapScale.value})` : null;
			return value ? {
				paddingLeft: value,
				paddingRight: value
			} : {};
		});
		(0, vue.provide)(require_keys.avatarGroupInjectionKey, {
			overlapScale,
			size: (0, vue.toRef)(() => props.size),
			square: (0, vue.toRef)(() => props.square),
			rounded: (0, vue.toRef)(() => props.rounded),
			roundedTop: (0, vue.toRef)(() => props.roundedTop),
			roundedBottom: (0, vue.toRef)(() => props.roundedBottom),
			roundedStart: (0, vue.toRef)(() => props.roundedStart),
			roundedEnd: (0, vue.toRef)(() => props.roundedEnd),
			variant: (0, vue.toRef)(() => props.variant),
			bgVariant: (0, vue.toRef)(() => props.bgVariant),
			textVariant: (0, vue.toRef)(() => props.textVariant)
		});
		return (_ctx, _cache) => {
			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(props).tag), {
				class: "b-avatar-group",
				role: "group"
			}, {
				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
					class: "b-avatar-group-inner",
					style: (0, vue.normalizeStyle)(paddingStyle.value)
				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 4)]),
				_: 3
			});
		};
	}
});
//#endregion
Object.defineProperty(exports, "BAvatarGroup_default", {
	enumerable: true,
	get: function() {
		return BAvatarGroup_default;
	}
});
Object.defineProperty(exports, "BAvatar_default", {
	enumerable: true,
	get: function() {
		return BAvatar_default;
	}
});

//# sourceMappingURL=BAvatar-eEIyfQso.js.map