bootstrap-vue-next/dist/BPlaceholder-DYYYuNgR.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-BJ15ThEs.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_useColorVariantClasses = require("./useColorVariantClasses-CEfOwjPv.js");
const require_BCard = require("./BCard-CgbTFn3S.js");
const require_BTableSimple = require("./BTableSimple-BcdizuDm.js");
let vue = require("vue");
//#endregion
//#region src/components/BPlaceholder/BPlaceholder.vue
var BPlaceholder_default = /* @__PURE__ */ (0, vue.defineComponent)({
	inheritAttrs: false,
	__name: "BPlaceholder",
	props: {
		animation: { default: void 0 },
		cols: { default: 12 },
		size: { default: "md" },
		tag: { default: "span" },
		variant: { default: null },
		width: { default: void 0 },
		wrapperTag: { default: "span" }
	},
	setup(__props) {
		const props = require_useDefaults.useDefaults(__props, "BPlaceholder");
		const widthString = (0, vue.computed)(() => props.width === void 0 ? void 0 : typeof props.width === "number" ? props.width.toString() : props.width.replace("%", ""));
		const colsString = (0, vue.computed)(() => props.cols === void 0 ? void 0 : typeof props.cols === "number" ? props.cols.toString() : props.cols);
		const colorClasses = require_useColorVariantClasses.useColorVariantClasses((0, vue.computed)(() => ({ bgVariant: props.variant })));
		const computedClasses = (0, vue.computed)(() => [colorClasses.value, {
			[`col-${colsString.value}`]: colsString.value !== void 0 && widthString.value === void 0,
			[`placeholder-${props.size}`]: props.size !== "md"
		}]);
		const wrapperClasses = (0, vue.computed)(() => ({ [`placeholder-${props.animation}`]: props.animation !== void 0 }));
		const computedStyle = (0, vue.computed)(() => ({ width: widthString.value === void 0 ? void 0 : `${widthString.value}%` }));
		return (_ctx, _cache) => {
			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(props).wrapperTag), { class: (0, vue.normalizeClass)(wrapperClasses.value) }, {
				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.tag), (0, vue.mergeProps)(_ctx.$attrs, {
					class: ["placeholder", computedClasses.value],
					style: computedStyle.value
				}), null, 16, ["class", "style"]))]),
				_: 1
			}, 8, ["class"]);
		};
	}
});
//#endregion
//#region src/components/BPlaceholder/BPlaceholderButton.vue
var BPlaceholderButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
	__name: "BPlaceholderButton",
	props: {
		animation: { default: void 0 },
		cols: { default: void 0 },
		tag: { default: "div" },
		variant: { default: "primary" },
		width: { default: void 0 }
	},
	setup(__props) {
		const props = require_useDefaults.useDefaults(__props, "BPlaceholderButton");
		const computedClasses = (0, vue.computed)(() => ({ [`btn-${props.variant}`]: props.variant !== null }));
		return (_ctx, _cache) => {
			return (0, vue.openBlock)(), (0, vue.createBlock)(BPlaceholder_default, {
				class: (0, vue.normalizeClass)(["btn disabled", computedClasses.value]),
				animation: (0, vue.unref)(props).animation,
				width: (0, vue.unref)(props).width,
				cols: (0, vue.unref)(props).cols,
				tag: (0, vue.unref)(props).tag,
				style: {
					"cursor": "wait",
					"pointer-events": "auto"
				}
			}, null, 8, [
				"class",
				"animation",
				"width",
				"cols",
				"tag"
			]);
		};
	}
});
//#endregion
//#region src/components/BPlaceholder/BPlaceholderCard.vue
var BPlaceholderCard_default = /* @__PURE__ */ (0, vue.defineComponent)({
	__name: "BPlaceholderCard",
	props: {
		animation: { default: void 0 },
		footerAnimation: { default: void 0 },
		footerSize: { default: "md" },
		footerVariant: { default: void 0 },
		footerWidth: { default: 100 },
		headerAnimation: { default: void 0 },
		headerSize: { default: "md" },
		headerVariant: { default: void 0 },
		headerWidth: { default: 100 },
		imgBlankColor: { default: "#868e96" },
		imgPlacement: { default: "top" },
		imgHeight: { default: 100 },
		imgSrc: { default: void 0 },
		noButton: {
			type: Boolean,
			default: false
		},
		noFooter: {
			type: Boolean,
			default: false
		},
		noHeader: {
			type: Boolean,
			default: false
		},
		noImg: {
			type: Boolean,
			default: false
		},
		size: { default: "md" },
		variant: { default: void 0 }
	},
	setup(__props) {
		const props = require_useDefaults.useDefaults(__props, "BPlaceholderCard");
		const defaultAttrs = (0, vue.computed)(() => ({
			animation: props.animation,
			size: props.size,
			variant: props.variant
		}));
		const footerComponent = (0, vue.computed)(() => !props.noButton ? BPlaceholderButton_default : BPlaceholder_default);
		return (_ctx, _cache) => {
			return (0, vue.openBlock)(), (0, vue.createBlock)(require_BCard.BCard_default, { "img-placement": (0, vue.unref)(props).imgPlacement }, (0, vue.createSlots)({
				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [
					(0, vue.createVNode)(BPlaceholder_default, (0, vue.mergeProps)({ cols: "7" }, defaultAttrs.value), null, 16),
					(0, vue.createVNode)(BPlaceholder_default, (0, vue.mergeProps)({ cols: "4" }, defaultAttrs.value), null, 16),
					(0, vue.createVNode)(BPlaceholder_default, (0, vue.mergeProps)({ cols: "4" }, defaultAttrs.value), null, 16),
					(0, vue.createVNode)(BPlaceholder_default, (0, vue.mergeProps)({ cols: "6" }, defaultAttrs.value), null, 16),
					(0, vue.createVNode)(BPlaceholder_default, (0, vue.mergeProps)({ cols: "8" }, defaultAttrs.value), null, 16)
				])]),
				_: 2
			}, [
				!(0, vue.unref)(props).noImg ? {
					name: "img",
					fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "img", {}, () => [(0, vue.createVNode)(require_BCard.BCardImg_default, {
						blank: !(0, vue.unref)(props).imgSrc ? true : false,
						"blank-color": (0, vue.unref)(props).imgBlankColor,
						height: !(0, vue.unref)(props).imgSrc ? (0, vue.unref)(props).imgHeight : void 0,
						src: (0, vue.unref)(props).imgSrc,
						"img-placement": (0, vue.unref)(props).imgPlacement,
						style: { cursor: "wait" }
					}, null, 8, [
						"blank",
						"blank-color",
						"height",
						"src",
						"img-placement"
					])])]),
					key: "0"
				} : void 0,
				!(0, vue.unref)(props).noHeader ? {
					name: "header",
					fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "header", {}, () => [(0, vue.createVNode)(BPlaceholder_default, {
						width: (0, vue.unref)(props).headerWidth,
						variant: (0, vue.unref)(props).headerVariant,
						animation: (0, vue.unref)(props).headerAnimation,
						size: (0, vue.unref)(props).headerSize
					}, null, 8, [
						"width",
						"variant",
						"animation",
						"size"
					])])]),
					key: "1"
				} : void 0,
				!(0, vue.unref)(props).noFooter ? {
					name: "footer",
					fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "footer", {}, () => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(footerComponent.value), {
						width: (0, vue.unref)(props).footerWidth,
						animation: (0, vue.unref)(props).footerAnimation,
						size: (0, vue.unref)(props).noButton ? (0, vue.unref)(props).footerSize : void 0,
						variant: (0, vue.unref)(props).footerVariant
					}, null, 8, [
						"width",
						"animation",
						"size",
						"variant"
					]))])]),
					key: "2"
				} : void 0
			]), 1032, ["img-placement"]);
		};
	}
});
//#endregion
//#region src/components/BPlaceholder/BPlaceholderTable.vue
var BPlaceholderTable_default = /* @__PURE__ */ (0, vue.defineComponent)({
	__name: "BPlaceholderTable",
	props: {
		animation: { default: void 0 },
		cellWidth: { default: 100 },
		columns: { default: 5 },
		footerAnimation: { default: void 0 },
		footerCellWidth: { default: 100 },
		footerColumns: { default: void 0 },
		footerSize: { default: "md" },
		footerVariant: { default: void 0 },
		headerAnimation: { default: void 0 },
		headerCellWidth: { default: 100 },
		headerColumns: { default: void 0 },
		headerSize: { default: "md" },
		headerVariant: { default: void 0 },
		noHeader: {
			type: Boolean,
			default: false
		},
		rows: { default: 3 },
		showFooter: {
			type: Boolean,
			default: false
		},
		size: { default: "md" },
		variant: { default: void 0 }
	},
	setup(__props) {
		const props = require_useDefaults.useDefaults(__props, "BPlaceholderTable");
		const columnsToNumber = require_dist.useToNumber(() => props.columns);
		const rowsToNumber = require_dist.useToNumber(() => props.rows);
		const computedHeaderColumns = (0, vue.computed)(() => props.headerColumns ?? NaN);
		const computedFooterColumns = (0, vue.computed)(() => props.footerColumns ?? NaN);
		const headerColumnsNumber = require_dist.useToNumber(computedHeaderColumns);
		const footerColumnsNumber = require_dist.useToNumber(computedFooterColumns);
		const columnsNumber = (0, vue.computed)(() => columnsToNumber.value || 5);
		const rowsNumber = (0, vue.computed)(() => rowsToNumber.value || 3);
		const computedHeaderColumnsLength = (0, vue.computed)(() => props.headerColumns === void 0 ? columnsNumber.value : Number.isNaN(headerColumnsNumber.value) ? columnsNumber.value : headerColumnsNumber.value);
		const computedFooterColumnsLength = (0, vue.computed)(() => props.footerColumns === void 0 ? columnsNumber.value : Number.isNaN(footerColumnsNumber.value) ? columnsNumber.value : footerColumnsNumber.value);
		return (_ctx, _cache) => {
			return (0, vue.openBlock)(), (0, vue.createBlock)(require_BTableSimple.BTableSimple_default, null, {
				default: (0, vue.withCtx)(() => [
					!(0, vue.unref)(props).noHeader ? (0, vue.renderSlot)(_ctx.$slots, "thead", { key: 0 }, () => [(0, vue.createElementVNode)("thead", null, [(0, vue.createElementVNode)("tr", null, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(computedHeaderColumnsLength.value, (_, i) => {
						return (0, vue.openBlock)(), (0, vue.createElementBlock)("th", { key: i }, [(0, vue.createVNode)(BPlaceholder_default, {
							size: (0, vue.unref)(props).headerSize,
							variant: (0, vue.unref)(props).headerVariant,
							animation: (0, vue.unref)(props).headerAnimation,
							width: (0, vue.unref)(props).headerCellWidth
						}, null, 8, [
							"size",
							"variant",
							"animation",
							"width"
						])]);
					}), 128))])])]) : (0, vue.createCommentVNode)("", true),
					(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createElementVNode)("tbody", null, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(rowsNumber.value, (_, j) => {
						return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", { key: j }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(columnsNumber.value, (__, k) => {
							return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", { key: k }, [(0, vue.createVNode)(BPlaceholder_default, {
								size: (0, vue.unref)(props).size,
								variant: (0, vue.unref)(props).variant,
								animation: (0, vue.unref)(props).animation,
								width: (0, vue.unref)(props).cellWidth
							}, null, 8, [
								"size",
								"variant",
								"animation",
								"width"
							])]);
						}), 128))]);
					}), 128))])]),
					(0, vue.unref)(props).showFooter ? (0, vue.renderSlot)(_ctx.$slots, "tfoot", { key: 1 }, () => [(0, vue.createElementVNode)("tfoot", null, [(0, vue.createElementVNode)("tr", null, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(computedFooterColumnsLength.value, (_, l) => {
						return (0, vue.openBlock)(), (0, vue.createElementBlock)("th", { key: l }, [(0, vue.createVNode)(BPlaceholder_default, {
							size: (0, vue.unref)(props).footerSize,
							variant: (0, vue.unref)(props).footerVariant,
							animation: (0, vue.unref)(props).footerAnimation,
							width: (0, vue.unref)(props).footerCellWidth
						}, null, 8, [
							"size",
							"variant",
							"animation",
							"width"
						])]);
					}), 128))])])]) : (0, vue.createCommentVNode)("", true)
				]),
				_: 3
			});
		};
	}
});
//#endregion
//#region src/components/BPlaceholder/BPlaceholderWrapper.vue
var BPlaceholderWrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
	__name: "BPlaceholderWrapper",
	props: { loading: {
		type: Boolean,
		default: false
	} },
	setup(__props) {
		const props = require_useDefaults.useDefaults(__props, "BPlaceholderWrapper");
		return (_ctx, _cache) => {
			return (0, vue.unref)(props).loading ? (0, vue.renderSlot)(_ctx.$slots, "loading", { key: 0 }) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 });
		};
	}
});
//#endregion
Object.defineProperty(exports, "BPlaceholderButton_default", {
	enumerable: true,
	get: function() {
		return BPlaceholderButton_default;
	}
});
Object.defineProperty(exports, "BPlaceholderCard_default", {
	enumerable: true,
	get: function() {
		return BPlaceholderCard_default;
	}
});
Object.defineProperty(exports, "BPlaceholderTable_default", {
	enumerable: true,
	get: function() {
		return BPlaceholderTable_default;
	}
});
Object.defineProperty(exports, "BPlaceholderWrapper_default", {
	enumerable: true,
	get: function() {
		return BPlaceholderWrapper_default;
	}
});
Object.defineProperty(exports, "BPlaceholder_default", {
	enumerable: true,
	get: function() {
		return BPlaceholder_default;
	}
});

//# sourceMappingURL=BPlaceholder-DYYYuNgR.js.map