@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/).
302 lines (301 loc) • 10 kB
JavaScript
import '../mt-popover-item.css';
import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, renderSlot, withKeys, withModifiers, createTextVNode, toDisplayString } from "vue";
import MtCheckbox from "./MtCheckbox.js";
import { _ as _sfc_main$1 } from "../mt-switch.vue_vue_type_style_index_0_lang-d00a496d.mjs";
import { _ as _sfc_main$2 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import { c as createId } from "../id-1e5b8276.mjs";
import { u as useDebounceFn } from "../index-221bad05.mjs";
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 "vue-i18n";
import "./MtFieldCopyable.js";
import "../tooltip.directive-a5042569.mjs";
import "./MtHelpText.js";
import "../useFutureFlags-2be3e179.mjs";
import "./MtFieldError.js";
import "./MtText.js";
import "./MtFieldLabel.js";
const _sfc_main = defineComponent({
name: "MtPopoverItem",
components: {
"mt-checkbox": MtCheckbox,
"mt-switch": _sfc_main$1,
"mt-icon": _sfc_main$2
},
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 = 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 = computed(() => {
return (!!props.onLabelClick || props.showSwitch || props.showCheckbox || props.showOptions || props.isOptionItem) && !props.disabled;
});
const componentClasses = 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 = computed(() => {
return {
"mt-popover-item__label--clickable": (!!props.onLabelClick || props.showSwitch || props.showCheckbox || props.showOptions) && !props.disabled
};
});
const onLabelClickTabIndex = computed(() => {
return props.onLabelClick ? 0 : -1;
});
const handleLabelClick = 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 = computed(() => {
return {
"mt-popover-item__icon--clickable": !!props.onLabelClick
};
});
return {
emitChangeCheckbox,
emitChangeSwitch,
emitVisibilityChange,
emitClickOptions,
componentClasses,
labelClasses,
onLabelClickTabIndex,
handleLabelClick,
isClickable,
iconClasses,
id
};
}
});
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 = resolveComponent("mt-checkbox");
const _component_mt_icon = resolveComponent("mt-icon");
const _component_mt_switch = resolveComponent("mt-switch");
return openBlock(), createElementBlock("div", {
class: normalizeClass(["mt-popover-item", _ctx.componentClasses]),
onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleLabelClick && _ctx.handleLabelClick(...args))
}, [
createElementVNode("div", _hoisted_1, [
_ctx.showCheckbox ? (openBlock(), 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"])) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "extension-logo"),
_ctx.icon ? (openBlock(), createBlock(_component_mt_icon, {
key: 1,
class: normalizeClass(["mt-popover-item__icon", _ctx.iconClasses]),
tabindex: _ctx.onLabelClickTabIndex,
name: _ctx.icon,
onClick: _ctx.handleLabelClick,
onKeyup: withKeys(_ctx.handleLabelClick, ["enter"])
}, null, 8, ["class", "tabindex", "name", "onClick", "onKeyup"])) : createCommentVNode("", true),
createElementVNode("label", {
class: normalizeClass(["mt-popover-item__label", _ctx.labelClasses]),
tabindex: _ctx.onLabelClickTabIndex,
role: _ctx.role,
for: _ctx.id,
onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleLabelClick && _ctx.handleLabelClick(...args), ["stop", "prevent"])),
onKeyup: _cache[1] || (_cache[1] = withKeys((...args) => _ctx.handleLabelClick && _ctx.handleLabelClick(...args), ["enter"]))
}, [
createTextVNode(toDisplayString(_ctx.label) + " ", 1),
_ctx.metaCopy ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(_ctx.metaCopy), 1)) : createCommentVNode("", true)
], 42, _hoisted_2),
createElementVNode("div", _hoisted_4, [
_ctx.contextualDetail ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(_ctx.contextualDetail), 1)) : createCommentVNode("", true),
_ctx.shortcut ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(_ctx.shortcut), 1)) : createCommentVNode("", true),
_ctx.showSwitch ? (openBlock(), createBlock(_component_mt_switch, {
key: 2,
checked: _ctx.switchValue,
class: "mt-popover-item__switch",
onChange: _ctx.handleLabelClick
}, null, 8, ["checked", "onChange"])) : createCommentVNode("", true),
_ctx.showVisibility ? (openBlock(), 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"])) : createCommentVNode("", true),
typeof _ctx.optionsCount === "number" ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(_ctx.optionsCount), 1)) : createCommentVNode("", true),
_ctx.showOptions ? (openBlock(), createBlock(_component_mt_icon, {
key: 5,
class: "mt-popover-item__options",
name: "solid-chevron-right-s",
onClick: _ctx.emitClickOptions
}, null, 8, ["onClick"])) : createCommentVNode("", true)
])
])
], 2);
}
const mtPopoverItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
mtPopoverItem as default
};
//# sourceMappingURL=MtPopoverItem.js.map