@yeger/vue2-masonry-wall/dist/index.mjs

Responsive masonry layout with SSR support and zero dependencies for Vue 2.

import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
import { useMasonryWall } from "@yeger/vue-masonry-wall-core";

//#region src/masonry-wall.vue?vue&type=script&setup=true&lang.ts
var masonry_wall_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "masonry-wall",
	props: {
		columnWidth: { default: 400 },
		items: null,
		gap: { default: 0 },
		rtl: {
			type: [Boolean, null],
			default: false
		},
		ssrColumns: { default: 0 },
		scrollContainer: { default: null },
		minColumns: { default: 1 },
		maxColumns: { default: void 0 },
		keyMapper: null
	},
	emits: ["redraw", "redraw-skip"],
	setup(__props, { emit }) {
		const props = __props;
		const columns = ref([]);
		const wall = ref();
		const { getColumnWidthTarget } = useMasonryWall({
			columns,
			emit,
			nextTick,
			onBeforeUnmount,
			onMounted,
			vue: 2,
			wall,
			watch,
			...toRefs(props)
		});
		return {
			__sfc: true,
			props,
			emit,
			columns,
			wall,
			getColumnWidthTarget,
			heightStyle: [
				"-webkit-max-content",
				"-moz-max-content",
				"max-content"
			]
		};
	}
});

//#endregion
//#region \0plugin-vue2:normalizer
function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
	var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
	if (render) {
		options.render = render;
		options.staticRenderFns = staticRenderFns;
		options._compiled = true;
	}
	if (functionalTemplate) options.functional = true;
	if (scopeId) options._scopeId = "data-v-" + scopeId;
	var hook;
	if (moduleIdentifier) {
		hook = function(context) {
			context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
			if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") context = __VUE_SSR_CONTEXT__;
			if (injectStyles) injectStyles.call(this, context);
			if (context && context._registeredComponents) context._registeredComponents.add(moduleIdentifier);
		};
		options._ssrRegister = hook;
	} else if (injectStyles) hook = shadowMode ? function() {
		injectStyles.call(this, (options.functional ? this.parent : this).$root.$options.shadowRoot);
	} : injectStyles;
	if (hook) if (options.functional) {
		options._injectStyles = hook;
		var originalRender = options.render;
		options.render = function renderWithStyleInjection(h, context) {
			hook.call(context);
			return originalRender(h, context);
		};
	} else {
		var existing = options.beforeCreate;
		options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
	}
	return {
		exports: scriptExports,
		options
	};
}

//#endregion
//#region src/masonry-wall.vue
var _sfc_render = function render() {
	var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
	return _c("div", {
		ref: "wall",
		staticClass: "masonry-wall",
		style: {
			display: "flex",
			gap: `${_vm.gap}px`
		}
	}, _vm._l(_setup.columns, function(column, columnIndex) {
		return _c("div", {
			key: columnIndex,
			staticClass: "masonry-column",
			style: {
				display: "flex",
				"flex-basis": `${_setup.getColumnWidthTarget(columnIndex)}px`,
				"flex-direction": "column",
				"flex-grow": 1,
				gap: `${_vm.gap}px`,
				height: _setup.heightStyle,
				"min-width": 0
			},
			attrs: { "data-index": columnIndex }
		}, _vm._l(column, function(itemIndex, row) {
			return _c("div", {
				key: _vm.keyMapper?.(_vm.items[itemIndex], columnIndex, row, itemIndex) ?? itemIndex,
				staticClass: "masonry-item"
			}, [_vm._t("default", function() {
				return [_vm._v(" " + _vm._s(_vm.items[itemIndex]) + " ")];
			}, {
				"item": _vm.items[itemIndex],
				"column": columnIndex,
				"columnCount": _setup.columns.length,
				"row": row,
				"index": itemIndex
			})], 2);
		}), 0);
	}), 0);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(masonry_wall_vue_vue_type_script_setup_true_lang_default, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
__component__.options.__file = "masonry-wall.vue";
var masonry_wall_default = __component__.exports;

//#endregion
export { masonry_wall_default as MasonryWall };
//# sourceMappingURL=index.mjs.map