bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
375 lines (374 loc) • 12 kB
JavaScript
import { n as avatarGroupInjectionKey } from "./keys-CQKrwmvN.mjs";
import { z as useToNumber } from "./dist-B10a-gZ8.mjs";
import { o as isEmptySlot } from "./dom-AhkaSoh8.mjs";
import { t as useDefaults } from "./useDefaults-BKgBaqOV.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 BBadge_default } from "./BBadge-D5ra3W5R.mjs";
import { t as useNumberishToStyle } from "./useNumberishToStyle-DEqGK1UH.mjs";
import { t as useRadiusElementClasses } from "./useRadiusElementClasses-BlrN-T6U.mjs";
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, mergeProps, normalizeStyle, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, toRef, unref, useSlots, watch, withCtx } from "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__ */ 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 = useDefaults(__props, "BAvatar");
const emit = __emit;
const slots = useSlots();
const localSrc = ref(props.src);
watch(() => props.src, (value) => {
localSrc.value = value;
});
const { computedLink, computedLinkProps } = useBLinkHelper(props);
const parentData = inject(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 = computed(() => !isEmptySlot(slots.default));
const hasBadgeSlot = computed(() => !isEmptySlot(slots.badge));
const showBadge = computed(() => !!props.badge || props.badge === "" || hasBadgeSlot.value);
const computedSquare = computed(() => parentData?.square.value || props.square);
const computedSize = useNumberishToStyle(() => parentData?.size.value ?? props.size);
const computedSizeIsLiteralSize = computed(() => !!computedSize.value && SIZES.includes(computedSize.value));
const computedVariant = computed(() => parentData?.variant.value ?? props.variant);
const computedRounded = computed(() => parentData?.rounded.value ?? props.rounded);
const computedRoundedTop = computed(() => parentData?.roundedTop.value ?? props.roundedTop);
const computedRoundedBottom = computed(() => parentData?.roundedBottom.value ?? props.roundedBottom);
const computedRoundedStart = computed(() => parentData?.roundedStart.value ?? props.roundedStart);
const computedRoundedEnd = computed(() => parentData?.roundedEnd.value ?? props.roundedEnd);
const radiusElementClasses = useRadiusElementClasses(() => ({
rounded: computedRounded.value,
roundedTop: computedRoundedTop.value,
roundedBottom: computedRoundedBottom.value,
roundedStart: computedRoundedStart.value,
roundedEnd: computedRoundedEnd.value
}));
const badgeText = computed(() => props.badge === true ? "" : props.badge);
const badgeImplicitlyDot = computed(() => !badgeText.value && !hasBadgeSlot.value);
const colorClasses = useColorVariantClasses(() => ({
bgVariant: parentData?.bgVariant.value ?? props.bgVariant,
textVariant: parentData?.textVariant.value ?? props.textVariant,
variant: computedVariant.value
}));
const computedClasses = 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 = computed(() => ({ fontSize: (!computedSizeIsLiteralSize.value ? `calc(${computedSize.value} * ${BADGE_FONT_SIZE_SCALE})` : "") || "" }));
const textFontStyle = computed(() => {
const fontSize = !computedSizeIsLiteralSize.value ? `calc(${computedSize.value} * ${FONT_SIZE_SCALE})` : null;
return fontSize ? { fontSize } : {};
});
const marginStyle = 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 = computed(() => computedLink.value ? BLink_default : props.button ? "button" : "span");
const computedStyle = 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 openBlock(), createBlock(resolveDynamicComponent(computedTag.value), mergeProps({
class: ["b-avatar", computedClasses.value],
style: computedStyle.value
}, unref(computedLinkProps), {
type: unref(props).button && !unref(computedLink) ? unref(props).buttonType : void 0,
disabled: unref(props).disabled || null,
variant: null,
onClick: clicked
}), {
default: withCtx(() => [hasDefaultSlot.value ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "default")])) : !!localSrc.value ? (openBlock(), createElementBlock("span", _hoisted_2, [createElementVNode("img", {
src: localSrc.value,
alt: unref(props).alt,
onError: onImgError
}, null, 40, _hoisted_3)])) : !!unref(props).text ? (openBlock(), createElementBlock("span", {
key: 2,
class: "b-avatar-text",
style: normalizeStyle(textFontStyle.value)
}, toDisplayString(unref(props).text), 5)) : (openBlock(), createElementBlock("span", _hoisted_4, [..._cache[0] || (_cache[0] = [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"
}, [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 ? (openBlock(), createBlock(BBadge_default, {
key: 4,
pill: unref(props).badgePill,
"dot-indicator": unref(props).badgeDotIndicator || badgeImplicitlyDot.value,
variant: unref(props).badgeVariant,
"bg-variant": unref(props).badgeBgVariant,
"text-variant": unref(props).badgeTextVariant,
style: normalizeStyle(badgeStyle.value),
placement: unref(props).badgePlacement
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "badge", {}, () => [createTextVNode(toDisplayString(badgeText.value), 1)])]),
_: 3
}, 8, [
"pill",
"dot-indicator",
"variant",
"bg-variant",
"text-variant",
"style",
"placement"
])) : createCommentVNode("", true)]),
_: 3
}, 16, [
"class",
"style",
"type",
"disabled"
]);
};
}
});
//#endregion
//#region src/components/BAvatar/BAvatarGroup.vue
var BAvatarGroup_default = /* @__PURE__ */ 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 = useDefaults(__props, "BAvatarGroup");
const overlapNumber = useToNumber(() => props.overlap);
const computedSize = useNumberishToStyle(() => props.size);
const overlapScale = computed(() => Math.min(Math.max(overlapNumber.value, 0), 1) / 2);
const paddingStyle = computed(() => {
const value = computedSize.value ? `calc(${computedSize.value} * ${overlapScale.value})` : null;
return value ? {
paddingLeft: value,
paddingRight: value
} : {};
});
provide(avatarGroupInjectionKey, {
overlapScale,
size: toRef(() => props.size),
square: toRef(() => props.square),
rounded: toRef(() => props.rounded),
roundedTop: toRef(() => props.roundedTop),
roundedBottom: toRef(() => props.roundedBottom),
roundedStart: toRef(() => props.roundedStart),
roundedEnd: toRef(() => props.roundedEnd),
variant: toRef(() => props.variant),
bgVariant: toRef(() => props.bgVariant),
textVariant: toRef(() => props.textVariant)
});
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(unref(props).tag), {
class: "b-avatar-group",
role: "group"
}, {
default: withCtx(() => [createElementVNode("div", {
class: "b-avatar-group-inner",
style: normalizeStyle(paddingStyle.value)
}, [renderSlot(_ctx.$slots, "default")], 4)]),
_: 3
});
};
}
});
//#endregion
export { BAvatar_default as n, BAvatarGroup_default as t };
//# sourceMappingURL=BAvatar-D7aFEXLH.mjs.map