bootstrap-vue-next/dist/BImg-BFKDHH7y.js

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

require("./chunk-CoQrYLCe.js");
const require_dist = require("./dist-B_c893QG.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_object = require("./object-BN7QwMcz.js");
const require_useRadiusElementClasses = require("./useRadiusElementClasses-Bi58dhJY.js");
let vue = require("vue");
//#endregion
//#region src/components/BImg/BImg.vue
var BImg_default = /* @__PURE__ */ (0, vue.defineComponent)({
	__name: "BImg",
	props: {
		blank: {
			type: Boolean,
			default: false
		},
		blankColor: { default: "transparent" },
		block: {
			type: Boolean,
			default: false
		},
		fluid: {
			type: Boolean,
			default: false
		},
		fluidGrow: {
			type: Boolean,
			default: false
		},
		height: { default: void 0 },
		tag: { default: "img" },
		lazy: {
			type: Boolean,
			default: false
		},
		sizes: { default: void 0 },
		src: { default: void 0 },
		srcset: { default: void 0 },
		thumbnail: {
			type: Boolean,
			default: false
		},
		width: { default: void 0 },
		placement: { default: void 0 },
		rounded: {
			type: [
				Boolean,
				String,
				Number
			],
			default: false
		},
		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, "BImg");
		const heightNumber = require_dist.useToNumber(() => props.height ?? NaN);
		const widthNumber = require_dist.useToNumber(() => props.width ?? NaN);
		const radiusElementClasses = require_useRadiusElementClasses.useRadiusElementClasses(() => ({
			rounded: props.rounded,
			roundedTop: props.roundedTop,
			roundedBottom: props.roundedBottom,
			roundedStart: props.roundedStart,
			roundedEnd: props.roundedEnd
		}));
		const computedSrcset = (0, vue.computed)(() => typeof props.srcset === "string" ? props.srcset.split(",").filter((x) => x).join(",") : require_object.isReadOnlyArray(props.srcset) ? props.srcset.filter((x) => x).join(",") : void 0);
		const computedSizes = (0, vue.computed)(() => typeof props.sizes === "string" ? props.sizes.split(",").filter((x) => x).join(",") : require_object.isReadOnlyArray(props.sizes) ? props.sizes.filter((x) => x).join(",") : void 0);
		const computedDimentions = (0, vue.computed)(() => {
			const width = Number.isNaN(widthNumber.value) ? void 0 : widthNumber.value;
			const height = Number.isNaN(heightNumber.value) ? void 0 : heightNumber.value;
			if (props.blank) {
				if (width !== void 0 && height === void 0) return {
					height: width,
					width
				};
				if (width === void 0 && height !== void 0) return {
					height,
					width: height
				};
				if (width === void 0 && height === void 0) return {
					height: 1,
					width: 1
				};
			}
			return {
				width,
				height
			};
		});
		const computedBlankImgSrc = (0, vue.computed)(() => makeBlankImgSrc(computedDimentions.value.width, computedDimentions.value.height, props.blankColor));
		const computedAlignment = (0, vue.computed)(() => ({
			"float-start": props.placement === "start",
			"float-end": props.placement === "end",
			"mx-auto": props.placement === "center"
		}));
		const computedClasses = (0, vue.computed)(() => [
			radiusElementClasses.value,
			computedAlignment.value,
			{
				"img-thumbnail": props.thumbnail,
				"img-fluid": props.fluid || props.fluidGrow,
				"w-100": props.fluidGrow,
				"d-block": props.block || props.placement === "center"
			}
		]);
		const makeBlankImgSrc = (width, height, color) => `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
    <rect width="100%" height="100%" style="fill:${color};"></rect>
    </svg>`)}`;
		return (_ctx, _cache) => {
			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(props).tag), {
				class: (0, vue.normalizeClass)([computedClasses.value, "b-img"]),
				src: !(0, vue.unref)(props).blank ? (0, vue.unref)(props).src : computedBlankImgSrc.value,
				width: computedDimentions.value.width || void 0,
				height: computedDimentions.value.height || void 0,
				srcset: !(0, vue.unref)(props).blank ? computedSrcset.value : void 0,
				sizes: !(0, vue.unref)(props).blank ? computedSizes.value : void 0,
				loading: (0, vue.unref)(props).lazy ? "lazy" : "eager"
			}, null, 8, [
				"class",
				"src",
				"width",
				"height",
				"srcset",
				"sizes",
				"loading"
			]);
		};
	}
});
//#endregion
Object.defineProperty(exports, "BImg_default", {
	enumerable: true,
	get: function() {
		return BImg_default;
	}
});

//# sourceMappingURL=BImg-BFKDHH7y.js.map