@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/).
332 lines (331 loc) • 12.3 kB
JavaScript
import '../mt-tabs.css';
"use strict";
const vue = require("vue");
const mtContextButton_vue_vue_type_style_index_0_lang = require("../mt-context-button.vue_vue_type_style_index_0_lang-8afa3ed1.js");
const MtContextMenuItem = require("./MtContextMenuItem.js");
const MtColorBadge = require("./MtColorBadge.js");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const MtPriorityPlusNavigation = require("./MtPriorityPlusNavigation.js");
const useFutureFlags = require("../useFutureFlags-35232480.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("./MtPopover.js");
require("./MtCheckbox.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("./MtFieldError.js");
require("./MtText.js");
require("../mt-switch.vue_vue_type_style_index_0_lang-fb6defc7.js");
require("./MtFieldLabel.js");
require("./MtPopoverItem.js");
require("./MtButton.js");
require("./MtLoader.js");
require("./MtSmoothReflow.js");
require("../_commonjsHelpers-2cbbddc8.js");
require("../mt-floating-ui.vue_vue_type_style_index_0_lang-1a484bca.js");
const _sfc_main = vue.defineComponent({
name: "MtTabs",
components: {
"mt-context-button": mtContextButton_vue_vue_type_style_index_0_lang._sfc_main,
"mt-context-menu-item": MtContextMenuItem,
"priority-plus": MtPriorityPlusNavigation,
"mt-color-badge": MtColorBadge,
"mt-icon": mtIcon_vue_vue_type_style_index_0_lang._sfc_main
},
emits: ["new-item-active"],
props: {
items: {
type: Array,
required: true
},
vertical: {
type: Boolean,
required: false,
default: false
},
/**
* @deprecated v4.0.0 - Set max-width through parent container element
*/
small: {
type: Boolean,
required: false,
default: false
},
defaultItem: {
type: String,
required: false,
default: ""
}
},
data() {
return {
// refreshKey is for recalculating specific computed properties
refreshKey: true,
activeItemName: "",
showMoreItems: false,
passedFirstRender: false
};
},
computed: {
activeDomItem() {
this.refreshKey;
const activeItemName = this.activeItemName;
const domItems = this.$refs.items ? this.$refs.items : [];
const activeDomItem = domItems.find((item) => {
return item.getAttribute("data-item-name") === activeItemName;
});
return activeDomItem;
},
sliderPosition() {
var _a;
this.refreshKey;
if (!this.activeItem) {
return 0;
}
if (!this.activeDomItem && this.$refs["more-items-button"]) {
return (_a = this.$refs["more-items-button"].$el) == null ? void 0 : _a.offsetLeft;
}
const leftPaddingOfActiveDomItem = parseFloat(
getComputedStyle(this.activeDomItem).paddingLeft
);
return this.vertical ? this.activeDomItem.offsetTop : this.activeDomItem.offsetLeft + leftPaddingOfActiveDomItem;
},
sliderLength() {
var _a, _b, _c;
this.refreshKey;
if (!this.activeItem) {
return 0;
}
if (!this.activeDomItem && this.$refs["more-items-button"]) {
return (_a = this.$refs["more-items-button"].$el) == null ? void 0 : _a.offsetWidth;
}
if (((_b = this.activeItem) == null ? void 0 : _b.hidden) && this.$refs["more-items-button"]) {
return (_c = this.$refs["more-items-button"].$el) == null ? void 0 : _c.offsetWidth;
}
const stylesOfActiveDomItem = getComputedStyle(this.activeDomItem);
const widthWithoutPadding = this.activeDomItem.clientWidth - parseFloat(stylesOfActiveDomItem.paddingLeft) - parseFloat(stylesOfActiveDomItem.paddingRight);
return this.vertical ? this.activeDomItem.offsetHeight : widthWithoutPadding;
},
activeItem() {
this.refreshKey;
return this.items.find((item) => {
return item.name === this.activeItemName;
});
},
sliderClasses() {
var _a;
this.refreshKey;
return {
"mt-tabs__slider--error": ((_a = this.activeItem) == null ? void 0 : _a.hasError) ?? false,
"mt-tabs__slider--animated": this.passedFirstRender
};
},
sliderStyle() {
this.refreshKey;
if (this.vertical) {
return `
transform: translate(0, ${this.sliderPosition}px) rotate(90deg);
width: ${this.sliderLength}px;
`;
}
return `
transform: translate(${this.sliderPosition}px, 0) rotate(0deg);
width: ${this.sliderLength}px;
`;
}
},
setup(props) {
const futureFlags = useFutureFlags.useFutureFlags();
const tabClasses = vue.computed(() => {
return [
"mt-tabs",
{
"mt-tabs--vertical": props.vertical,
"mt-tabs--small": props.small,
"mt-tabs--future-remove-default-margin": futureFlags.removeDefaultMargin
}
];
});
return {
tabClasses
};
},
watch: {
items: "handleResize",
vertical: "handleResize",
small: "handleResize",
defaultItem: "setDefault"
},
mounted() {
this.setActiveItem(this.defaultItem);
this.$nextTick(() => {
this.handleResize();
this.passedFirstRender = true;
});
this.$device.onResize({
listener() {
this.handleResize();
},
component: this,
scope: this
});
},
beforeUnmount() {
this.$device.removeResizeListener(this);
},
methods: {
setDefault() {
this.setActiveItem(this.defaultItem);
},
handleClick(itemName) {
this.setActiveItem(itemName);
this.$emit("new-item-active", itemName);
const matchingItem = this.items.find((item) => item.name === itemName);
if (!(matchingItem == null ? void 0 : matchingItem.onClick)) {
return;
}
matchingItem.onClick(itemName);
},
getItemClasses(item) {
return {
"mt-tabs__item--error": item.hasError,
"mt-tabs__item--active": item.name === this.activeItemName
};
},
getContextMenuItemVariant(item) {
if (item.hasError) {
return "critical";
}
if (item.name === this.activeItemName) {
return "active";
}
if (item.badge === "critical") {
return "critical";
}
return "default";
},
setActiveItem(itemName) {
this.activeItemName = `${itemName}`;
this.refreshKey = !this.refreshKey;
},
handleResize() {
if (this.$refs.priorityPlus) {
this.refreshKey = !this.refreshKey;
this.$refs.priorityPlus.handleResize().then(() => {
this.refreshKey = !this.refreshKey;
});
}
},
toggleMoreTabItems() {
this.showMoreItems = !this.showMoreItems;
}
}
});
const mtTabs_vue_vue_type_style_index_0_scoped_8f1019f3_lang = "";
const _hoisted_1 = ["data-priority-plus", "data-text", "data-item-name", "aria-selected", "disabled", "onClick", "onKeyup"];
const _hoisted_2 = ["data-item-name", "onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_icon = vue.resolveComponent("mt-icon");
const _component_mt_color_badge = vue.resolveComponent("mt-color-badge");
const _component_mt_context_menu_item = vue.resolveComponent("mt-context-menu-item");
const _component_mt_context_button = vue.resolveComponent("mt-context-button");
const _component_priority_plus = vue.resolveComponent("priority-plus");
return vue.openBlock(), vue.createBlock(_component_priority_plus, {
ref: "priorityPlus",
list: _ctx.items
}, {
default: vue.withCtx(({ mainItems, moreItems }) => [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.tabClasses),
role: "tablist"
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(["mt-tabs__slider", _ctx.sliderClasses]),
style: vue.normalizeStyle(_ctx.sliderStyle)
}, null, 6),
!_ctx.vertical ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(mainItems, (item) => {
return vue.openBlock(), vue.createElementBlock("button", {
type: "button",
key: item.name,
"data-priority-plus": item.name,
ref_for: true,
ref: "items",
class: vue.normalizeClass(["mt-tabs__item", _ctx.getItemClasses(item)]),
"data-text": item.label,
"data-item-name": item.name,
role: "tab",
"aria-selected": item.name === _ctx.activeItemName,
disabled: item.disabled,
onClick: ($event) => _ctx.handleClick(item.name),
onKeyup: vue.withKeys(($event) => _ctx.handleClick(item.name), ["enter"])
}, [
vue.createTextVNode(vue.toDisplayString(item.label) + " ", 1),
item.hasError ? (vue.openBlock(), vue.createBlock(_component_mt_icon, {
key: 0,
class: "mt-tabs__error-badge",
name: "solid-exclamation-circle",
size: "var(--scale-size-12)",
color: "var(--color-icon-critical-default)"
})) : vue.createCommentVNode("", true),
item.badge ? (vue.openBlock(), vue.createBlock(_component_mt_color_badge, {
key: 1,
variant: item.badge,
rounded: ""
}, null, 8, ["variant"])) : vue.createCommentVNode("", true)
], 42, _hoisted_1);
}), 128)),
moreItems.length ? (vue.openBlock(), vue.createBlock(_component_mt_context_button, {
key: 0,
ref: "more-items-button",
"has-error": moreItems.some((i) => i.hasError)
}, {
"button-text": vue.withCtx(() => _cache[0] || (_cache[0] = [
vue.createTextVNode(" More ")
])),
default: vue.withCtx(({ toggleFloatingUi }) => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(moreItems, (moreItem) => {
return vue.openBlock(), vue.createBlock(_component_mt_context_menu_item, {
key: moreItem.name,
type: _ctx.getContextMenuItemVariant(moreItem),
role: "tab",
"aria-selected": moreItem.name === _ctx.activeItemName,
label: moreItem.label,
onClick: ($event) => {
_ctx.handleClick(moreItem.name);
toggleFloatingUi();
},
onKeyup: vue.withKeys(($event) => _ctx.handleClick(moreItem.name), ["enter"])
}, null, 8, ["type", "aria-selected", "label", "onClick", "onKeyup"]);
}), 128))
]),
_: 2
}, 1032, ["has-error"])) : vue.createCommentVNode("", true)
], 64)) : vue.createCommentVNode("", true),
_ctx.vertical ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList([...mainItems, ...moreItems], (item) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: item.name,
ref_for: true,
ref: "items",
class: vue.normalizeClass(["mt-tabs__item", _ctx.getItemClasses(item)]),
"data-item-name": item.name,
onClick: ($event) => _ctx.handleClick(item.name)
}, vue.toDisplayString(item.label), 11, _hoisted_2);
}), 128)) : vue.createCommentVNode("", true)
], 2)
]),
_: 1
}, 8, ["list"]);
}
const mtTabs = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-8f1019f3"]]);
module.exports = mtTabs;
//# sourceMappingURL=MtTabs.js.map