@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/).
317 lines (316 loc) • 11 kB
JavaScript
import '../mt-select-base.css';
import { defineComponent, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createTextVNode, toDisplayString, renderSlot, createElementVNode, withKeys, normalizeProps, guardReactiveProps, normalizeStyle, createCommentVNode, createElementBlock, withModifiers, createVNode, normalizeClass, Transition } from "vue";
import { M as MtBaseField } from "../mt-base-field-7a978dcf.mjs";
import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import MtLoader from "./MtLoader.js";
import MtFieldError from "./MtFieldError.js";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.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 "./MtText.js";
const _sfc_main = defineComponent({
name: "MtSelectBase",
components: {
"mt-base-field": MtBaseField,
"mt-icon": _sfc_main$1,
"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 = resolveComponent("mt-loader");
const _component_mt_icon = resolveComponent("mt-icon");
const _component_mt_field_error = resolveComponent("mt-field-error");
const _component_mt_base_field = resolveComponent("mt-base-field");
return openBlock(), createBlock(_component_mt_base_field, 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: withCtx(() => [
createTextVNode(toDisplayString(_ctx.label), 1)
]),
"field-prefix": withCtx(() => [
renderSlot(_ctx.$slots, "mt-select-prefix")
]),
element: withCtx(({ identification, error, size }) => [
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] = withKeys((...args) => _ctx.collapse && _ctx.collapse(...args), ["tab"])),
_cache[3] || (_cache[3] = withKeys((...args) => _ctx.collapse && _ctx.collapse(...args), ["esc"]))
]
}, [
renderSlot(_ctx.$slots, "mt-select-selection", normalizeProps(guardReactiveProps({ identification, error, disabled: _ctx.disabled, size, expand: _ctx.expand, collapse: _ctx.collapse })))
], 544),
createElementVNode("div", {
class: "mt-select__selection-indicators",
style: normalizeStyle({ right: _ctx.selectionIndicatorsRight })
}, [
_ctx.isLoading ? (openBlock(), createBlock(_component_mt_loader, {
key: 0,
class: "mt-select__select-indicator",
size: "16px"
})) : createCommentVNode("", true),
!_ctx.disabled && _ctx.showClearableButton ? (openBlock(), createElementBlock("button", {
key: 1,
class: "mt-select__select-indicator-hitbox",
"data-clearable-button": "",
"data-testid": "select-clear-button",
onClick: _cache[4] || (_cache[4] = withModifiers((...args) => _ctx.emitClear && _ctx.emitClear(...args), ["prevent", "stop"])),
onKeydown: _cache[5] || (_cache[5] = withKeys(withModifiers((...args) => _ctx.focusParentSelect && _ctx.focusParentSelect(...args), ["stop"]), ["tab"]))
}, [
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)) : createCommentVNode("", true),
createVNode(_component_mt_icon, {
class: 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: withModifiers(_ctx.toggleExpand, ["stop"])
}, null, 8, ["class", "onClick"])
], 4),
_ctx.expanded ? (openBlock(), createBlock(Transition, {
key: 0,
name: "mt-select-result-list-fade-down"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "results-list", normalizeProps(guardReactiveProps({ collapse: _ctx.collapse })))
]),
_: 3
})) : createCommentVNode("", true)
]),
"field-suffix": withCtx(() => [
renderSlot(_ctx.$slots, "mt-select-suffix")
]),
"field-hint": withCtx(() => [
renderSlot(_ctx.$slots, "mt-select-hint")
]),
error: withCtx(() => [
_ctx.error ? (openBlock(), createBlock(_component_mt_field_error, {
key: 0,
error: _ctx.error
}, null, 8, ["error"])) : createCommentVNode("", true)
]),
_: 3
}, 16, ["class", "disabled", "has-focus", "is-inherited", "is-inheritance-field", "disable-inheritance-toggle"]);
}
const MtSelectBase = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
MtSelectBase as default
};
//# sourceMappingURL=MtSelectBase.js.map