@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/).
193 lines (192 loc) • 7.4 kB
JavaScript
import '../mt-segmented-control.css';
"use strict";
const MtCheckbox = require("./MtCheckbox.js");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const MtPopover = require("./MtPopover.js");
const vue = require("vue");
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("./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({
components: {
"mt-checkbox": MtCheckbox,
"mt-icon": mtIcon_vue_vue_type_style_index_0_lang._sfc_main,
"mt-popover": MtPopover
},
props: {
actions: {
type: Array,
required: true
},
/**
* Activate to hide the padding around the controls.
*/
disableContext: {
type: Boolean,
required: false,
default: false
}
},
emits: [],
setup(props) {
const getActionClass = (action) => {
const classes = [`mt-segmented-control__action-id-${action.id}`];
if (action.isPressed && !action.hasCheckbox) {
classes.push("mt-segmented-control__action--pressed");
}
if (action.isCritical) {
classes.push("mt-segmented-control__action--critical");
}
if (action.disabled) {
classes.push("mt-segmented-control__action--disabled");
}
if (action.minSquare) {
classes.push("mt-segmented-control__action--min-square");
}
return classes;
};
const handleClick = (action, toggleFloatingUi) => {
if (action.disabled) {
return;
}
if (action.hasCheckbox) {
return;
}
if (action.popover) {
toggleFloatingUi();
}
if (action.onClick) {
action.onClick({});
}
};
const handleCheckboxChange = (action, checkboxValue) => {
if (action.disabled) {
return;
}
if (action.onClick) {
action.onClick({ checkboxValue });
}
};
const segmentedControlClasses = vue.computed(() => {
return {
"mt-segmented-control--disabled-context": props.disableContext
};
});
const flatChildViews = (childViews) => {
if (!childViews) {
return [];
}
return childViews.reduce((acc, childView) => {
if (childView.childViews) {
return [...acc, childView, ...flatChildViews(childView.childViews)];
}
return [...acc, childView];
}, []);
};
return {
getActionClass,
handleClick,
handleCheckboxChange,
segmentedControlClasses,
flatChildViews
};
}
});
const mtSegmentedControl_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = ["aria-pressed", "onClick", "disabled"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_icon = vue.resolveComponent("mt-icon");
const _component_mt_checkbox = vue.resolveComponent("mt-checkbox");
const _component_mt_popover = vue.resolveComponent("mt-popover");
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["mt-segmented-control", _ctx.segmentedControlClasses])
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.actions, (action, index) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
typeof action === "string" && !_ctx.disableContext ? (vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "mt-segmented-control__divider"
})) : vue.createCommentVNode("", true),
typeof action !== "string" ? (vue.openBlock(), vue.createBlock(_component_mt_popover, {
key: action.id,
"child-views": action.popover && action.popover.childViews,
title: action.popover && action.popover.title
}, vue.createSlots({
trigger: vue.withCtx(({ toggleFloatingUi }) => [
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass(["mt-segmented-control__action", _ctx.getActionClass(action)]),
"aria-pressed": action.isPressed,
onClick: () => _ctx.handleClick(action, toggleFloatingUi),
disabled: action.disabled
}, [
action.iconName ? (vue.openBlock(), vue.createBlock(_component_mt_icon, {
key: 0,
name: action.iconName,
class: "mt-segmented-control__action-icon"
}, null, 8, ["name"])) : vue.createCommentVNode("", true),
action.hasCheckbox ? (vue.openBlock(), vue.createBlock(_component_mt_checkbox, {
key: 1,
checked: action.checked,
label: action.label,
onChange: (event) => _ctx.handleCheckboxChange(action, event)
}, null, 8, ["checked", "label", "onChange"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
vue.renderSlot(_ctx.$slots, "label__" + action.id),
vue.createTextVNode(" " + vue.toDisplayString(action.label), 1)
], 64)),
action.options ? (vue.openBlock(), vue.createBlock(_component_mt_icon, {
key: 3,
class: "mt-segmented-control__action-options-icon",
name: "regular-chevron-down-xs"
})) : vue.createCommentVNode("", true),
vue.renderSlot(_ctx.$slots, "options__" + action.id)
], 10, _hoisted_1)
]),
"popover-items__base": vue.withCtx(({ toggleFloatingUi, changeView }) => [
vue.renderSlot(_ctx.$slots, action.id + "--popover-items__base", {
toggleFloatingUi,
changeView
})
]),
_: 2
}, [
vue.renderList(_ctx.flatChildViews(action.popover && action.popover.childViews), (childView) => {
return {
name: `popover-items__${childView.name}`,
fn: vue.withCtx(({ toggleFloatingUi, changeView }) => [
vue.renderSlot(_ctx.$slots, action.id + "--popover-items__" + childView.name, {
toggleFloatingUi,
changeView
})
])
};
})
]), 1032, ["child-views", "title"])) : vue.createCommentVNode("", true)
], 64);
}), 256))
], 2);
}
const MtSegmentedControl = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = MtSegmentedControl;
//# sourceMappingURL=MtSegmentedControl.js.map