@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/).
247 lines (246 loc) • 7.85 kB
JavaScript
import '../mt-popover.css';
import { defineComponent, ref, watch, computed, resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot, createElementVNode, createElementBlock, createVNode, createCommentVNode, createTextVNode, toDisplayString, Transition } from "vue";
import MtCheckbox from "./MtCheckbox.js";
import { _ as _sfc_main$1 } from "../mt-switch.vue_vue_type_style_index_0_lang-e05ec27a.mjs";
import { _ as _sfc_main$2 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import mtPopoverItem from "./MtPopoverItem.js";
import MtButton from "./MtButton.js";
import MtSmoothReflow from "./MtSmoothReflow.js";
import { _ as _sfc_main$3 } from "../mt-floating-ui.vue_vue_type_style_index_0_lang-c9aba54c.mjs";
import MtText from "./MtText.js";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "../mt-base-field-7a978dcf.mjs";
import "./MtInheritanceSwitch.js";
import "./MtTooltip.js";
import "../floating-ui.vue-fe27ebef.mjs";
import "../floating-ui.dom-f450fda4.mjs";
import "../useIsInsideTooltip-0c3bd290.mjs";
import "../index-221bad05.mjs";
import "vue-i18n";
import "./MtFieldCopyable.js";
import "../tooltip.directive-a5042569.mjs";
import "../id-1e5b8276.mjs";
import "./MtHelpText.js";
import "../useFutureFlags-2be3e179.mjs";
import "./MtFieldError.js";
import "./MtFieldLabel.js";
import "./MtLoader.js";
import "../_commonjsHelpers-7a77ea84.mjs";
const _sfc_main = defineComponent({
components: {
"mt-text": MtText,
"mt-checkbox": MtCheckbox,
"mt-switch": _sfc_main$1,
"mt-icon": _sfc_main$2,
"mt-popover-item": mtPopoverItem,
"mt-button": MtButton,
"mt-smooth-reflow": MtSmoothReflow,
"mt-floating-ui": _sfc_main$3
},
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 = ref(null);
const activeView = ref("base");
const viewTransition = ref("slideIn");
const isOpened = ref(false);
watch(isOpened, (value) => {
emit("update:isOpened", value);
});
const mainComponentTag = 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 = computed(() => {
return [
{
name: "base",
title: props.title
},
...getAllViews(props.childViews)
];
});
const currentView = 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 = computed(() => {
return !!currentView.value.title || currentView.value.name !== "base";
});
const componentClasses = 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 = resolveComponent("mt-icon");
const _component_mt_button = resolveComponent("mt-button");
const _component_mt_text = resolveComponent("mt-text");
return openBlock(), createBlock(resolveDynamicComponent(_ctx.mainComponentTag), {
"is-opened": _ctx.isOpened,
class: normalizeClass(["mt-popover", _ctx.componentClasses]),
onClose: _ctx.closeFloatingUi
}, {
trigger: withCtx(() => [
renderSlot(_ctx.$slots, "trigger", {
isOpened: _ctx.isOpened,
toggleFloatingUi: _ctx.toggleFloatingUi
})
]),
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
_ctx.showHeader ? (openBlock(), createElementBlock("div", _hoisted_2, [
_ctx.currentView.name !== "base" ? (openBlock(), createBlock(_component_mt_button, {
key: 0,
class: "mt-popover__back-button",
variant: "secondary",
onClick: _ctx.goViewBack
}, {
default: withCtx(() => [
createVNode(_component_mt_icon, { name: "solid-long-arrow-left" })
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true),
createVNode(_component_mt_text, {
as: "h3",
class: "mt-popover__title",
size: "s",
weight: "semibold"
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.currentView.title), 1)
]),
_: 1
}),
_ctx.currentView.name !== "base" ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true)
])) : createCommentVNode("", true),
createElementVNode("div", _hoisted_4, [
createVNode(Transition, { name: _ctx.viewTransition }, {
default: withCtx(() => [
(openBlock(), createElementBlock("div", {
key: _ctx.currentView.name.toString()
}, [
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__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
mtPopover as default
};
//# sourceMappingURL=MtPopover.js.map