@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/).
301 lines (300 loc) • 10.2 kB
JavaScript
import '../mt-popover-item.css';
;
const vue = require("vue");
const MtCheckbox = require("./MtCheckbox.js");
const mtSwitch_vue_vue_type_style_index_0_lang = require("../mt-switch.vue_vue_type_style_index_0_lang-fb6defc7.js");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const id = require("../id-8e80f112.js");
const index = require("../index-ab705c2a.js");
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("vue-i18n");
require("./MtFieldCopyable.js");
require("../tooltip.directive-7b51326d.js");
require("./MtHelpText.js");
require("../useFutureFlags-35232480.js");
require("./MtFieldError.js");
require("./MtText.js");
require("./MtFieldLabel.js");
const _sfc_main = vue.defineComponent({
name: "MtPopoverItem",
components: {
"mt-checkbox": MtCheckbox,
"mt-switch": mtSwitch_vue_vue_type_style_index_0_lang._sfc_main,
"mt-icon": mtIcon_vue_vue_type_style_index_0_lang._sfc_main
},
props: {
label: {
type: String,
required: true
},
type: {
type: String,
required: false,
default: "default",
validator: (value) => {
return ["default", "critical", "active"].includes(value);
}
},
showCheckbox: {
type: Boolean,
required: false,
default: false
},
checkboxChecked: {
type: Boolean,
required: false,
default: false
},
checkboxPartial: {
type: Boolean,
required: false,
default: false
},
icon: {
type: String,
required: false,
default: ""
},
onLabelClick: {
type: Function,
required: false,
default: void 0
},
metaCopy: {
type: String,
required: false,
default: ""
},
contextualDetail: {
type: String,
required: false,
default: ""
},
shortcut: {
type: String,
required: false,
default: ""
},
showSwitch: {
type: Boolean,
required: false,
default: false
},
switchValue: {
type: Boolean,
required: false,
default: false
},
showVisibility: {
type: Boolean,
required: false,
default: false
},
visible: {
type: Boolean,
required: false,
default: false
},
disabled: {
type: Boolean,
required: false,
default: false
},
showOptions: {
type: Boolean,
required: false,
default: false
},
optionsCount: {
type: Number,
required: false,
default: void 0
},
borderTop: {
type: Boolean,
required: false,
default: false
},
borderBottom: {
type: Boolean,
required: false,
default: false
},
role: {
type: String,
required: false,
default: "menuitem"
},
isOptionItem: {
type: Boolean,
required: false,
default: false
}
},
emits: ["change-checkbox", "change-switch", "change-visibility", "click-options", "close"],
setup(props, { emit }) {
const id$1 = id.createId();
const emitChangeCheckbox = (changeValue) => {
emit("change-checkbox", changeValue);
};
const emitChangeSwitch = (changeValue) => {
emit("change-switch", changeValue);
};
const emitVisibilityChange = (changeValue) => {
emit("change-visibility", changeValue);
};
const emitClickOptions = (e) => {
emit("click-options", e);
};
const isClickable = vue.computed(() => {
return (!!props.onLabelClick || props.showSwitch || props.showCheckbox || props.showOptions || props.isOptionItem) && !props.disabled;
});
const componentClasses = vue.computed(() => {
return {
"mt-popover-item--default": props.type === "default",
"mt-popover-item--critical": props.type === "critical",
"mt-popover-item--active": props.type === "active",
"mt-popover-item--disabled": props.disabled,
"mt-popover-item--border-top": props.borderTop,
"mt-popover-item--border-bottom": props.borderBottom,
"mt-popover-item--clickable": !!isClickable.value
};
});
const labelClasses = vue.computed(() => {
return {
"mt-popover-item__label--clickable": (!!props.onLabelClick || props.showSwitch || props.showCheckbox || props.showOptions) && !props.disabled
};
});
const onLabelClickTabIndex = vue.computed(() => {
return props.onLabelClick ? 0 : -1;
});
const handleLabelClick = index.useDebounceFn((e) => {
if (props.onLabelClick) {
props.onLabelClick(e);
return;
}
if (props.showOptions) {
emitClickOptions(e);
return;
}
if (props.showSwitch) {
emitChangeSwitch(!props.switchValue);
return;
}
if (props.showCheckbox) {
emitChangeCheckbox(!props.checkboxChecked);
return;
}
}, 16);
const iconClasses = vue.computed(() => {
return {
"mt-popover-item__icon--clickable": !!props.onLabelClick
};
});
return {
emitChangeCheckbox,
emitChangeSwitch,
emitVisibilityChange,
emitClickOptions,
componentClasses,
labelClasses,
onLabelClickTabIndex,
handleLabelClick,
isClickable,
iconClasses,
id: id$1
};
}
});
const mtPopoverItem_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = { class: "mt-popover-item__top-row" };
const _hoisted_2 = ["tabindex", "role", "for"];
const _hoisted_3 = {
key: 0,
class: "mt-popover-item__meta-copy"
};
const _hoisted_4 = { class: "mt-popover-item__align-right" };
const _hoisted_5 = {
key: 0,
class: "mt-popover-item__contextual-detail"
};
const _hoisted_6 = {
key: 1,
class: "mt-popover-item__shortcut"
};
const _hoisted_7 = {
key: 4,
class: "mt-popover-item__options-count"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_checkbox = vue.resolveComponent("mt-checkbox");
const _component_mt_icon = vue.resolveComponent("mt-icon");
const _component_mt_switch = vue.resolveComponent("mt-switch");
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["mt-popover-item", _ctx.componentClasses]),
onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleLabelClick && _ctx.handleLabelClick(...args))
}, [
vue.createElementVNode("div", _hoisted_1, [
_ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(_component_mt_checkbox, {
key: 0,
id: _ctx.id,
class: "mt-popover-item__checkbox",
checked: _ctx.checkboxChecked,
partial: _ctx.checkboxPartial,
onChange: _ctx.handleLabelClick
}, null, 8, ["id", "checked", "partial", "onChange"])) : vue.createCommentVNode("", true),
vue.renderSlot(_ctx.$slots, "extension-logo"),
_ctx.icon ? (vue.openBlock(), vue.createBlock(_component_mt_icon, {
key: 1,
class: vue.normalizeClass(["mt-popover-item__icon", _ctx.iconClasses]),
tabindex: _ctx.onLabelClickTabIndex,
name: _ctx.icon,
onClick: _ctx.handleLabelClick,
onKeyup: vue.withKeys(_ctx.handleLabelClick, ["enter"])
}, null, 8, ["class", "tabindex", "name", "onClick", "onKeyup"])) : vue.createCommentVNode("", true),
vue.createElementVNode("label", {
class: vue.normalizeClass(["mt-popover-item__label", _ctx.labelClasses]),
tabindex: _ctx.onLabelClickTabIndex,
role: _ctx.role,
for: _ctx.id,
onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.handleLabelClick && _ctx.handleLabelClick(...args), ["stop", "prevent"])),
onKeyup: _cache[1] || (_cache[1] = vue.withKeys((...args) => _ctx.handleLabelClick && _ctx.handleLabelClick(...args), ["enter"]))
}, [
vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
_ctx.metaCopy ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString(_ctx.metaCopy), 1)) : vue.createCommentVNode("", true)
], 42, _hoisted_2),
vue.createElementVNode("div", _hoisted_4, [
_ctx.contextualDetail ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, vue.toDisplayString(_ctx.contextualDetail), 1)) : vue.createCommentVNode("", true),
_ctx.shortcut ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, vue.toDisplayString(_ctx.shortcut), 1)) : vue.createCommentVNode("", true),
_ctx.showSwitch ? (vue.openBlock(), vue.createBlock(_component_mt_switch, {
key: 2,
checked: _ctx.switchValue,
class: "mt-popover-item__switch",
onChange: _ctx.handleLabelClick
}, null, 8, ["checked", "onChange"])) : vue.createCommentVNode("", true),
_ctx.showVisibility ? (vue.openBlock(), vue.createBlock(_component_mt_icon, {
key: 3,
class: "mt-popover-item__visibility",
name: _ctx.visible ? "solid-eye" : "solid-eye-slash",
onClick: _cache[2] || (_cache[2] = () => _ctx.emitVisibilityChange(!_ctx.visible))
}, null, 8, ["name"])) : vue.createCommentVNode("", true),
typeof _ctx.optionsCount === "number" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, vue.toDisplayString(_ctx.optionsCount), 1)) : vue.createCommentVNode("", true),
_ctx.showOptions ? (vue.openBlock(), vue.createBlock(_component_mt_icon, {
key: 5,
class: "mt-popover-item__options",
name: "solid-chevron-right-s",
onClick: _ctx.emitClickOptions
}, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
])
])
], 2);
}
const mtPopoverItem = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = mtPopoverItem;
//# sourceMappingURL=MtPopoverItem.js.map