@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/).
194 lines (193 loc) • 7.3 kB
JavaScript
import '../mt-segmented-control.css';
import MtCheckbox from "./MtCheckbox.js";
import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import mtPopover from "./MtPopover.js";
import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createCommentVNode, createBlock, createSlots, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
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 "./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({
components: {
"mt-checkbox": MtCheckbox,
"mt-icon": _sfc_main$1,
"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 = 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 = resolveComponent("mt-icon");
const _component_mt_checkbox = resolveComponent("mt-checkbox");
const _component_mt_popover = resolveComponent("mt-popover");
return openBlock(), createElementBlock("div", {
class: normalizeClass(["mt-segmented-control", _ctx.segmentedControlClasses])
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.actions, (action, index) => {
return openBlock(), createElementBlock(Fragment, null, [
typeof action === "string" && !_ctx.disableContext ? (openBlock(), createElementBlock("div", {
key: index,
class: "mt-segmented-control__divider"
})) : createCommentVNode("", true),
typeof action !== "string" ? (openBlock(), createBlock(_component_mt_popover, {
key: action.id,
"child-views": action.popover && action.popover.childViews,
title: action.popover && action.popover.title
}, createSlots({
trigger: withCtx(({ toggleFloatingUi }) => [
createElementVNode("button", {
type: "button",
class: normalizeClass(["mt-segmented-control__action", _ctx.getActionClass(action)]),
"aria-pressed": action.isPressed,
onClick: () => _ctx.handleClick(action, toggleFloatingUi),
disabled: action.disabled
}, [
action.iconName ? (openBlock(), createBlock(_component_mt_icon, {
key: 0,
name: action.iconName,
class: "mt-segmented-control__action-icon"
}, null, 8, ["name"])) : createCommentVNode("", true),
action.hasCheckbox ? (openBlock(), createBlock(_component_mt_checkbox, {
key: 1,
checked: action.checked,
label: action.label,
onChange: (event) => _ctx.handleCheckboxChange(action, event)
}, null, 8, ["checked", "label", "onChange"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
renderSlot(_ctx.$slots, "label__" + action.id),
createTextVNode(" " + toDisplayString(action.label), 1)
], 64)),
action.options ? (openBlock(), createBlock(_component_mt_icon, {
key: 3,
class: "mt-segmented-control__action-options-icon",
name: "regular-chevron-down-xs"
})) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "options__" + action.id)
], 10, _hoisted_1)
]),
"popover-items__base": withCtx(({ toggleFloatingUi, changeView }) => [
renderSlot(_ctx.$slots, action.id + "--popover-items__base", {
toggleFloatingUi,
changeView
})
]),
_: 2
}, [
renderList(_ctx.flatChildViews(action.popover && action.popover.childViews), (childView) => {
return {
name: `popover-items__${childView.name}`,
fn: withCtx(({ toggleFloatingUi, changeView }) => [
renderSlot(_ctx.$slots, action.id + "--popover-items__" + childView.name, {
toggleFloatingUi,
changeView
})
])
};
})
]), 1032, ["child-views", "title"])) : createCommentVNode("", true)
], 64);
}), 256))
], 2);
}
const MtSegmentedControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
MtSegmentedControl as default
};
//# sourceMappingURL=MtSegmentedControl.js.map