@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
190 lines (189 loc) • 6.32 kB
JavaScript
import '../mt-popover-deprecated.css';
;
const vue = require("vue");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
const virtualScrollingElements = /* @__PURE__ */ new Map();
const outsideClasses = {
top: "--placement-top-outside",
right: "--placement-right-outside",
bottom: "--placement-bottom-outside",
left: "--placement-left-outside"
};
const defaultConfig = {
active: false,
targetSelector: "",
resizeWidth: false,
style: {}
};
const customStylingBlacklist = ["width", "position", "top", "left", "right", "bottom"];
function calculateOutsideEdges(el, vnode) {
var _a;
const orientationElement = (_a = vnode.$parent) == null ? void 0 : _a.$el;
const boundingClientRect = orientationElement.getBoundingClientRect();
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
const windowWidth = window.innerWidth || document.documentElement.clientWidth;
const visibleEdges = {
topSpace: boundingClientRect.top,
rightSpace: windowWidth - boundingClientRect.right,
bottomSpace: windowHeight - boundingClientRect.bottom,
leftSpace: boundingClientRect.left
};
el.classList.remove(...Object.values(outsideClasses));
const placementClasses = [
visibleEdges.bottomSpace < visibleEdges.topSpace ? outsideClasses.bottom : outsideClasses.top,
visibleEdges.rightSpace > visibleEdges.leftSpace ? outsideClasses.left : outsideClasses.right
];
el.classList.add(...placementClasses);
}
function setElementPosition(element, refElement, config) {
const originElement = refElement ? refElement : element;
const elementPosition = originElement.getBoundingClientRect();
let targetElement = originElement;
let targetPosition = {
top: 0,
left: 0
};
if (config.targetSelector && config.targetSelector.length > 0) {
targetElement = originElement.closest(config.targetSelector);
targetPosition = targetElement.getBoundingClientRect();
}
Object.entries(config.style).forEach(([key, value]) => {
if (customStylingBlacklist.includes(key)) {
return;
}
element.style[key] = value;
});
element.style.position = "fixed";
element.style.top = `${elementPosition.top - targetPosition.top + originElement.clientHeight}px`;
element.style.left = `${elementPosition.left - targetPosition.left}px`;
}
function startVirtualScrolling() {
window.addEventListener("scroll", virtualScrollingHandler, true);
window.addEventListener("resize", virtualScrollingHandler, true);
}
function stopVirtualScrolling() {
window.removeEventListener("scroll", virtualScrollingHandler, true);
window.removeEventListener("resize", virtualScrollingHandler, true);
}
function virtualScrollingHandler() {
if (virtualScrollingElements.size <= 0) {
stopVirtualScrolling();
return;
}
virtualScrollingElements.forEach((entry) => {
setElementPosition(entry.el, entry.ref, entry.config);
if (entry.config.resizeWidth) {
entry.el.style.width = `${entry.ref.clientWidth}px`;
}
});
}
function registerVirtualScrollingElement(modifiedElement, vnodeContext, config) {
var _a;
const uid = (_a = vnodeContext == null ? void 0 : vnodeContext._) == null ? void 0 : _a.uid;
if (!uid) {
return;
}
if (virtualScrollingElements.size <= 0) {
startVirtualScrolling();
}
virtualScrollingElements.set(uid, {
el: modifiedElement,
// @ts-expect-error - $el exists on the context but is private
ref: vnodeContext.$el,
config
});
}
function unregisterVirtualScrollingElement(uid) {
if (!uid) {
return;
}
virtualScrollingElements.delete(uid);
if (virtualScrollingElements.size <= 0) {
stopVirtualScrolling();
}
}
const PopoverDirective = {
mounted(element, binding) {
var _a, _b;
if (!binding.value) {
return false;
}
const config = { ...defaultConfig, ...binding.value };
if (!config.active) {
return false;
}
let targetElement = document.body;
if (config.targetSelector && config.targetSelector.length > 0) {
targetElement = element.closest(config.targetSelector);
}
targetElement.appendChild(element);
setElementPosition(element, (_a = binding.instance) == null ? void 0 : _a.$el, config);
if (config.resizeWidth) {
element.style.width = `${(_b = binding.instance) == null ? void 0 : _b.$el.clientWidth}px`;
}
calculateOutsideEdges(element, binding.instance);
registerVirtualScrollingElement(element, binding.instance, config);
},
unmounted(element, binding, vnode) {
var _a;
if (element.parentNode) {
element.parentNode.removeChild(element);
}
unregisterVirtualScrollingElement((_a = vnode.context) == null ? void 0 : _a._uid);
}
};
const MtPopoverDirective = PopoverDirective;
const _sfc_main = vue.defineComponent({
name: "MtPopoverDeprecated",
directives: {
popover: MtPopoverDirective
},
props: {
zIndex: {
type: [Number, null],
required: false,
default: null
},
resizeWidth: {
type: Boolean,
required: false,
default: false
},
popoverClass: {
type: [String, Array, Object],
required: false,
default: ""
}
},
computed: {
componentStyle() {
return {
"z-Index": this.zIndex
};
},
popoverConfig() {
return {
active: true,
resizeWidth: this.resizeWidth
};
}
}
});
const mtPopoverDeprecated_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = { class: "mt-popover-deprecated" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _directive_popover = vue.resolveDirective("popover");
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["mt-popover-deprecated__wrapper", _ctx.popoverClass]),
style: vue.normalizeStyle(_ctx.componentStyle)
}, [
vue.renderSlot(_ctx.$slots, "default")
], 6)), [
[_directive_popover, _ctx.popoverConfig]
])
]);
}
const MtPopoverDeprecated = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = MtPopoverDeprecated;
//# sourceMappingURL=MtPopoverDeprecated.js.map