@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/).
333 lines (332 loc) • 12.1 kB
JavaScript
import '../mt-tabs.css';
import { defineComponent, computed, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, normalizeStyle, createElementBlock, Fragment, renderList, withKeys, createTextVNode, toDisplayString, createCommentVNode } from "vue";
import { _ as _sfc_main$1 } from "../mt-context-button.vue_vue_type_style_index_0_lang-08ff766e.mjs";
import MtContextMenuItem from "./MtContextMenuItem.js";
import MtColorBadge from "./MtColorBadge.js";
import { _ as _sfc_main$2 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import PriorityPlus from "./MtPriorityPlusNavigation.js";
import { u as useFutureFlags } from "../useFutureFlags-2be3e179.mjs";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "./MtPopover.js";
import "./MtCheckbox.js";
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 "./MtFieldError.js";
import "./MtText.js";
import "../mt-switch.vue_vue_type_style_index_0_lang-e05ec27a.mjs";
import "./MtFieldLabel.js";
import "./MtPopoverItem.js";
import "./MtButton.js";
import "./MtLoader.js";
import "./MtSmoothReflow.js";
import "../_commonjsHelpers-7a77ea84.mjs";
import "../mt-floating-ui.vue_vue_type_style_index_0_lang-c9aba54c.mjs";
const _sfc_main = defineComponent({
name: "MtTabs",
components: {
"mt-context-button": _sfc_main$1,
"mt-context-menu-item": MtContextMenuItem,
"priority-plus": PriorityPlus,
"mt-color-badge": MtColorBadge,
"mt-icon": _sfc_main$2
},
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();
const tabClasses = 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 = resolveComponent("mt-icon");
const _component_mt_color_badge = resolveComponent("mt-color-badge");
const _component_mt_context_menu_item = resolveComponent("mt-context-menu-item");
const _component_mt_context_button = resolveComponent("mt-context-button");
const _component_priority_plus = resolveComponent("priority-plus");
return openBlock(), createBlock(_component_priority_plus, {
ref: "priorityPlus",
list: _ctx.items
}, {
default: withCtx(({ mainItems, moreItems }) => [
createElementVNode("div", {
class: normalizeClass(_ctx.tabClasses),
role: "tablist"
}, [
createElementVNode("span", {
class: normalizeClass(["mt-tabs__slider", _ctx.sliderClasses]),
style: normalizeStyle(_ctx.sliderStyle)
}, null, 6),
!_ctx.vertical ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
(openBlock(true), createElementBlock(Fragment, null, renderList(mainItems, (item) => {
return openBlock(), createElementBlock("button", {
type: "button",
key: item.name,
"data-priority-plus": item.name,
ref_for: true,
ref: "items",
class: 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: withKeys(($event) => _ctx.handleClick(item.name), ["enter"])
}, [
createTextVNode(toDisplayString(item.label) + " ", 1),
item.hasError ? (openBlock(), 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)"
})) : createCommentVNode("", true),
item.badge ? (openBlock(), createBlock(_component_mt_color_badge, {
key: 1,
variant: item.badge,
rounded: ""
}, null, 8, ["variant"])) : createCommentVNode("", true)
], 42, _hoisted_1);
}), 128)),
moreItems.length ? (openBlock(), createBlock(_component_mt_context_button, {
key: 0,
ref: "more-items-button",
"has-error": moreItems.some((i) => i.hasError)
}, {
"button-text": withCtx(() => _cache[0] || (_cache[0] = [
createTextVNode(" More ")
])),
default: withCtx(({ toggleFloatingUi }) => [
(openBlock(true), createElementBlock(Fragment, null, renderList(moreItems, (moreItem) => {
return openBlock(), 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: withKeys(($event) => _ctx.handleClick(moreItem.name), ["enter"])
}, null, 8, ["type", "aria-selected", "label", "onClick", "onKeyup"]);
}), 128))
]),
_: 2
}, 1032, ["has-error"])) : createCommentVNode("", true)
], 64)) : createCommentVNode("", true),
_ctx.vertical ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList([...mainItems, ...moreItems], (item) => {
return openBlock(), createElementBlock("li", {
key: item.name,
ref_for: true,
ref: "items",
class: normalizeClass(["mt-tabs__item", _ctx.getItemClasses(item)]),
"data-item-name": item.name,
onClick: ($event) => _ctx.handleClick(item.name)
}, toDisplayString(item.label), 11, _hoisted_2);
}), 128)) : createCommentVNode("", true)
], 2)
]),
_: 1
}, 8, ["list"]);
}
const mtTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-8f1019f3"]]);
export {
mtTabs as default
};
//# sourceMappingURL=MtTabs.js.map