@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/).
316 lines (315 loc) • 11.1 kB
JavaScript
import '../mt-select-base.css';
"use strict";
const vue = require("vue");
const MtBaseField = require("../mt-base-field-6a3a56a0.js");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const MtLoader = require("./MtLoader.js");
const MtFieldError = require("./MtFieldError.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.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("./MtText.js");
const _sfc_main = vue.defineComponent({
name: "MtSelectBase",
components: {
"mt-base-field": MtBaseField.MtBaseField,
"mt-icon": mtIcon_vue_vue_type_style_index_0_lang._sfc_main,
"mt-loader": MtLoader,
"mt-field-error": MtFieldError
},
props: {
/**
* The label for the select field itself.
*/
label: {
type: String,
required: true
},
/**
* Toggles the loading state of the select field.
*/
isLoading: {
type: Boolean,
required: false,
default: false
},
/**
* Disables or enables the select field.
*/
disabled: {
type: Boolean,
required: false,
default: false
},
/**
* Toggles a button to clear all selections.
*/
showClearableButton: {
type: Boolean,
required: false,
default: false
},
/**
* An error in your business logic related to this field.
*
* @example {"code": 500, "detail": "Error while saving"}
*/
error: {
type: Object,
required: false,
default: null
},
/**
* Toggles the inheritance visualization.
*/
isInherited: {
type: Boolean,
required: false,
default: false
},
/**
* Determines if the field is inheritable.
*/
isInheritanceField: {
type: Boolean,
required: false,
default: false
},
/**
* Determines the active state of the inheritance toggle.
*/
disableInheritanceToggle: {
type: Boolean,
required: false,
default: false
}
},
data() {
return {
expanded: false,
suffixWidth: 0
};
},
computed: {
mtFieldClasses() {
return { "has--focus": this.expanded };
},
selectionIndicatorsRight() {
const baseRightPx = 16;
const rightPx = baseRightPx + (this.suffixWidth || 0);
return `${rightPx}px`;
}
},
mounted() {
this.$nextTick(() => this.updateSuffixWidth());
window.addEventListener("resize", this.updateSuffixWidth, { passive: true });
},
beforeUnmount() {
window.removeEventListener("resize", this.updateSuffixWidth);
},
emits: [
"select-expanded",
"select-collapsed",
"clear",
"inheritance-restore",
"inheritance-remove"
],
methods: {
updateSuffixWidth() {
var _a;
const suffixElement = (_a = this.$el) == null ? void 0 : _a.querySelector(
".mt-block-field__block > .mt-field__addition:not(.is--prefix)"
);
if (!suffixElement) {
this.suffixWidth = 0;
return;
}
this.suffixWidth = suffixElement.offsetWidth;
},
toggleExpand() {
if (!this.expanded) {
this.expand();
} else {
this.collapse();
}
},
expand() {
if (this.expanded) {
return;
}
if (this.disabled) {
return;
}
this.expanded = true;
document.addEventListener("click", this.listenToClickOutside);
this.$emit("select-expanded");
},
collapse(event) {
var _a;
document.removeEventListener("click", this.listenToClickOutside);
this.expanded = false;
if (((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.dataset.clearableButton) === void 0) {
this.$emit("select-collapsed");
}
if (event == null ? void 0 : event.shiftKey) {
event.preventDefault();
this.focusPreviousFormElement();
}
},
focusPreviousFormElement() {
const focusableSelector = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
const myFocusable = this.$el.querySelector(focusableSelector);
const keyboardFocusable = [
...document.querySelectorAll(focusableSelector)
// @ts-expect-error - target is set and contains dataset
].filter((el) => !el.hasAttribute("disabled") && el.dataset.clearableButton === void 0);
keyboardFocusable.forEach((element, index) => {
if (index > 0 && element === myFocusable) {
const kbFocusable = keyboardFocusable[index - 1];
kbFocusable.click();
kbFocusable.focus();
}
});
},
listenToClickOutside(event) {
let { path } = event;
if (typeof path === "undefined") {
path = this.computePath(event);
}
if (path.find((element) => {
const containsMtPopoverDeprecated = element.classList.contains("mt-popover-deprecated");
const containsMtPopoverDeprecatedWrapper = element.classList.contains(
"mt-popover-deprecated__wrapper"
);
return containsMtPopoverDeprecated || containsMtPopoverDeprecatedWrapper;
})) {
return;
}
if (!path.find((element) => element === this.$el)) {
this.collapse();
}
},
computePath(event) {
const path = [];
let { target } = event;
while (target) {
path.push(target);
target = target.parentElement;
}
return path;
},
emitClear() {
this.$emit("clear");
},
focusParentSelect(event) {
if (event == null ? void 0 : event.shiftKey) {
this.$refs.selectWrapper.click();
event.preventDefault();
}
}
}
});
const mtSelectBase_vue_vue_type_style_index_0_lang = "";
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_loader = vue.resolveComponent("mt-loader");
const _component_mt_icon = vue.resolveComponent("mt-icon");
const _component_mt_field_error = vue.resolveComponent("mt-field-error");
const _component_mt_base_field = vue.resolveComponent("mt-base-field");
return vue.openBlock(), vue.createBlock(_component_mt_base_field, vue.mergeProps({ class: _ctx.mtFieldClasses }, _ctx.$attrs, {
disabled: _ctx.disabled,
"has-focus": _ctx.expanded,
"is-inherited": _ctx.isInherited,
"is-inheritance-field": _ctx.isInheritanceField,
"disable-inheritance-toggle": _ctx.disableInheritanceToggle,
onInheritanceRestore: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("inheritance-restore", $event)),
onInheritanceRemove: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("inheritance-remove", $event))
}), {
label: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
]),
"field-prefix": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "mt-select-prefix")
]),
element: vue.withCtx(({ identification, error, size }) => [
vue.createElementVNode("div", {
ref: "selectWrapper",
class: "mt-select__selection",
tabindex: "0",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.expand && _ctx.expand(...args)),
onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.expand && _ctx.expand(...args)),
onKeydown: [
_cache[2] || (_cache[2] = vue.withKeys((...args) => _ctx.collapse && _ctx.collapse(...args), ["tab"])),
_cache[3] || (_cache[3] = vue.withKeys((...args) => _ctx.collapse && _ctx.collapse(...args), ["esc"]))
]
}, [
vue.renderSlot(_ctx.$slots, "mt-select-selection", vue.normalizeProps(vue.guardReactiveProps({ identification, error, disabled: _ctx.disabled, size, expand: _ctx.expand, collapse: _ctx.collapse })))
], 544),
vue.createElementVNode("div", {
class: "mt-select__selection-indicators",
style: vue.normalizeStyle({ right: _ctx.selectionIndicatorsRight })
}, [
_ctx.isLoading ? (vue.openBlock(), vue.createBlock(_component_mt_loader, {
key: 0,
class: "mt-select__select-indicator",
size: "16px"
})) : vue.createCommentVNode("", true),
!_ctx.disabled && _ctx.showClearableButton ? (vue.openBlock(), vue.createElementBlock("button", {
key: 1,
class: "mt-select__select-indicator-hitbox",
"data-clearable-button": "",
"data-testid": "select-clear-button",
onClick: _cache[4] || (_cache[4] = vue.withModifiers((...args) => _ctx.emitClear && _ctx.emitClear(...args), ["prevent", "stop"])),
onKeydown: _cache[5] || (_cache[5] = vue.withKeys(vue.withModifiers((...args) => _ctx.focusParentSelect && _ctx.focusParentSelect(...args), ["stop"]), ["tab"]))
}, [
vue.createVNode(_component_mt_icon, {
class: "mt-select__select-indicator mt-select__select-indicator-clear",
name: "regular-times-xxs",
color: "var(--color-icon-primary-default)"
})
], 32)) : vue.createCommentVNode("", true),
vue.createVNode(_component_mt_icon, {
class: vue.normalizeClass(["mt-select__select-indicator", { "mt-select__select-indicator-rotated": _ctx.expanded }]),
"data-testid": "mt-select__select-indicator",
name: "solid-chevron-down-xxs",
color: "var(--color-icon-primary-default)",
onClick: vue.withModifiers(_ctx.toggleExpand, ["stop"])
}, null, 8, ["class", "onClick"])
], 4),
_ctx.expanded ? (vue.openBlock(), vue.createBlock(vue.Transition, {
key: 0,
name: "mt-select-result-list-fade-down"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "results-list", vue.normalizeProps(vue.guardReactiveProps({ collapse: _ctx.collapse })))
]),
_: 3
})) : vue.createCommentVNode("", true)
]),
"field-suffix": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "mt-select-suffix")
]),
"field-hint": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "mt-select-hint")
]),
error: vue.withCtx(() => [
_ctx.error ? (vue.openBlock(), vue.createBlock(_component_mt_field_error, {
key: 0,
error: _ctx.error
}, null, 8, ["error"])) : vue.createCommentVNode("", true)
]),
_: 3
}, 16, ["class", "disabled", "has-focus", "is-inherited", "is-inheritance-field", "disable-inheritance-toggle"]);
}
const MtSelectBase = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = MtSelectBase;
//# sourceMappingURL=MtSelectBase.js.map