@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/).
246 lines (245 loc) • 8.05 kB
JavaScript
import '../mt-popover.css';
;
const vue = require("vue");
const MtCheckbox = require("./MtCheckbox.js");
const mtSwitch_vue_vue_type_style_index_0_lang = require("../mt-switch.vue_vue_type_style_index_0_lang-fb6defc7.js");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const MtPopoverItem = require("./MtPopoverItem.js");
const MtButton = require("./MtButton.js");
const MtSmoothReflow = require("./MtSmoothReflow.js");
const mtFloatingUi_vue_vue_type_style_index_0_lang = require("../mt-floating-ui.vue_vue_type_style_index_0_lang-1a484bca.js");
const MtText = require("./MtText.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("../mt-base-field-6a3a56a0.js");
require("./MtInheritanceSwitch.js");
require("./MtTooltip.js");
require("../floating-ui.vue-48d5c774.js");
require("../floating-ui.dom-fe395b67.js");
require("../useIsInsideTooltip-f4674e27.js");
require("../index-ab705c2a.js");
require("vue-i18n");
require("./MtFieldCopyable.js");
require("../tooltip.directive-7b51326d.js");
require("../id-8e80f112.js");
require("./MtHelpText.js");
require("../useFutureFlags-35232480.js");
require("./MtFieldError.js");
require("./MtFieldLabel.js");
require("./MtLoader.js");
require("../_commonjsHelpers-2cbbddc8.js");
const _sfc_main = vue.defineComponent({
components: {
"mt-text": MtText,
"mt-checkbox": MtCheckbox,
"mt-switch": mtSwitch_vue_vue_type_style_index_0_lang._sfc_main,
"mt-icon": mtIcon_vue_vue_type_style_index_0_lang._sfc_main,
"mt-popover-item": MtPopoverItem,
"mt-button": MtButton,
"mt-smooth-reflow": MtSmoothReflow,
"mt-floating-ui": mtFloatingUi_vue_vue_type_style_index_0_lang._sfc_main
},
props: {
title: {
type: String,
required: false,
default: ""
},
childViews: {
type: Array,
required: false,
default: () => []
},
disableFloat: {
type: Boolean,
required: false,
default: false
},
width: {
type: String,
required: false,
default: "dynamic",
validator: (value) => {
return ["dynamic", "large", "medium", "small"].includes(value);
}
}
},
emits: ["update:isOpened"],
setup(props, { emit }) {
const MtPopover = vue.ref(null);
const activeView = vue.ref("base");
const viewTransition = vue.ref("slideIn");
const isOpened = vue.ref(false);
vue.watch(isOpened, (value) => {
emit("update:isOpened", value);
});
const mainComponentTag = vue.computed(() => {
return props.disableFloat ? "div" : "mt-floating-ui";
});
const goViewBack = () => {
viewTransition.value = "slideOut";
const previousView = allViews.value.find(
(view) => {
var _a;
return (_a = view.childViews) == null ? void 0 : _a.some((v) => v.name === activeView.value);
}
);
if (previousView) {
activeView.value = previousView.name;
} else {
activeView.value = "base";
}
if (MtPopover.value) {
MtPopover.value.scrollTop = 0;
}
};
const changeView = (view) => {
viewTransition.value = "slideIn";
activeView.value = view;
if (MtPopover.value) {
MtPopover.value.scrollTop = 0;
}
};
const getAllViews = (views) => {
if (!views) {
return [];
}
return views.reduce((acc, view) => {
return [...acc, view, ...getAllViews(view.childViews)];
}, []);
};
const allViews = vue.computed(() => {
return [
{
name: "base",
title: props.title
},
...getAllViews(props.childViews)
];
});
const currentView = vue.computed(() => {
const currentView2 = allViews.value.find((view) => {
return view.name === activeView.value;
});
if (currentView2) {
return {
...currentView2,
title: currentView2.title ?? props.title
};
}
return { name: "base", title: props.title };
});
const closeFloatingUi = () => {
isOpened.value = false;
};
const toggleFloatingUi = () => {
isOpened.value = !isOpened.value;
};
const showHeader = vue.computed(() => {
return !!currentView.value.title || currentView.value.name !== "base";
});
const componentClasses = vue.computed(() => {
const classes = {
"mt-popover--float": !props.disableFloat,
"is--open": isOpened.value,
"has--header": showHeader.value,
[`mt-popover--width-${props.width}`]: true
};
return classes;
});
return {
goViewBack,
currentView,
activeView,
changeView,
allViews,
viewTransition,
MtPopover,
closeFloatingUi,
toggleFloatingUi,
isOpened,
mainComponentTag,
componentClasses,
showHeader
};
}
});
const mtPopover_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = {
ref: "MtPopover",
role: "dialog",
class: "mt-popover__content"
};
const _hoisted_2 = {
key: 0,
class: "mt-popover__header"
};
const _hoisted_3 = {
key: 1,
class: "mt-popover__header-placeholder-right"
};
const _hoisted_4 = { class: "mt-popover__items" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_icon = vue.resolveComponent("mt-icon");
const _component_mt_button = vue.resolveComponent("mt-button");
const _component_mt_text = vue.resolveComponent("mt-text");
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.mainComponentTag), {
"is-opened": _ctx.isOpened,
class: vue.normalizeClass(["mt-popover", _ctx.componentClasses]),
onClose: _ctx.closeFloatingUi
}, {
trigger: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "trigger", {
isOpened: _ctx.isOpened,
toggleFloatingUi: _ctx.toggleFloatingUi
})
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
_ctx.showHeader ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
_ctx.currentView.name !== "base" ? (vue.openBlock(), vue.createBlock(_component_mt_button, {
key: 0,
class: "mt-popover__back-button",
variant: "secondary",
onClick: _ctx.goViewBack
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_mt_icon, { name: "solid-long-arrow-left" })
]),
_: 1
}, 8, ["onClick"])) : vue.createCommentVNode("", true),
vue.createVNode(_component_mt_text, {
as: "h3",
class: "mt-popover__title",
size: "s",
weight: "semibold"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.currentView.title), 1)
]),
_: 1
}),
_ctx.currentView.name !== "base" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3)) : vue.createCommentVNode("", true)
])) : vue.createCommentVNode("", true),
vue.createElementVNode("div", _hoisted_4, [
vue.createVNode(vue.Transition, { name: _ctx.viewTransition }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createElementBlock("div", {
key: _ctx.currentView.name.toString()
}, [
vue.renderSlot(_ctx.$slots, "popover-items__" + _ctx.currentView.name, {
changeView: _ctx.changeView,
toggleFloatingUi: _ctx.toggleFloatingUi
})
]))
]),
_: 3
}, 8, ["name"])
])
], 512)
]),
_: 3
}, 40, ["is-opened", "class", "onClose"]);
}
const mtPopover = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = mtPopover;
//# sourceMappingURL=MtPopover.js.map