@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/).
200 lines (199 loc) • 7.01 kB
JavaScript
import '../mt-unit-select.css';
;
const vue = require("vue");
const vueI18n = require("vue-i18n");
const MtUnitSelectResult = require("./MtUnitSelectResult.js");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const floatingUi_vue = require("../floating-ui.vue-48d5c774.js");
const index = require("../index-d39b6c26.js");
const floatingUi_dom = require("../floating-ui.dom-fe395b67.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("../index-ab705c2a.js");
const _hoisted_1 = { class: "mt-unit-select__container" };
const _hoisted_2 = ["aria-expanded", "disabled"];
const _hoisted_3 = ["aria-label"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "mt-unit-select",
props: {
modelValue: {},
units: {},
disabled: { type: Boolean },
zIndex: {}
},
emits: ["update:modelValue"],
setup(__props, { emit: __emit }) {
const { t } = vueI18n.useI18n({
messages: {
de: {
units: {
mm: "Millimeter",
cm: "Zentimeter",
m: "Meter",
in: "Zoll",
ft: "Fuß",
yd: "Yard",
g: "Gramm",
kg: "Kilogramm",
oz: "Unze",
lb: "Pfund"
},
"select-unit": "Einheit auswählen"
},
en: {
units: {
mm: "Millimeters",
cm: "Centimeters",
m: "Meters",
in: "Inches",
ft: "Feet",
yd: "Yards",
g: "Grams",
kg: "Kilograms",
oz: "Ounces",
lb: "Pounds"
},
"select-unit": "Select unit"
}
}
});
const props = __props;
const emit = __emit;
const isOpen = vue.ref(false);
const activeIndex = vue.ref(0);
const triggerRef = vue.ref(null);
const dropdownRef = vue.ref(null);
const { floatingStyles, update } = floatingUi_vue.useFloating(triggerRef, dropdownRef, {
middleware: [floatingUi_dom.offset(4), floatingUi_dom.flip(), floatingUi_dom.shift()],
whileElementsMounted: floatingUi_dom.autoUpdate,
placement: "bottom-start"
});
index.onClickOutside(dropdownRef, (event) => {
var _a, _b;
if (!((_a = dropdownRef.value) == null ? void 0 : _a.contains(event.target)) && !((_b = triggerRef.value) == null ? void 0 : _b.contains(event.target))) {
closeDropdown();
}
});
const selectUnit = (value) => {
emit("update:modelValue", value);
activeIndex.value = props.units.findIndex((unit) => unit === value);
isOpen.value = false;
};
const getUnitLabel = (unit) => {
const label = t("units." + unit);
return {
plural: label,
singular: label
};
};
const toggleDropdown = () => {
if (!props.disabled) {
isOpen.value = !isOpen.value;
}
};
const closeDropdown = () => {
isOpen.value = false;
activeIndex.value = props.units.findIndex((unit) => unit === props.modelValue);
};
const navigateWithKeyboard = (event) => {
if (!isOpen.value)
return;
switch (event.key) {
case "ArrowDown":
event.preventDefault();
activeIndex.value = (activeIndex.value + 1) % props.units.length;
break;
case "ArrowUp":
event.preventDefault();
activeIndex.value = activeIndex.value === 0 ? props.units.length - 1 : activeIndex.value - 1;
break;
case "Enter":
event.preventDefault();
if (isOpen.value) {
selectUnit(props.units[activeIndex.value]);
}
break;
case "Escape":
event.preventDefault();
closeDropdown();
break;
}
};
vue.watch(
() => props.modelValue,
(newValue) => {
activeIndex.value = props.units.findIndex((unit) => unit === newValue);
}
);
vue.onMounted(() => {
activeIndex.value = props.units.findIndex((unit) => unit === props.modelValue);
window.addEventListener("keydown", navigateWithKeyboard);
vue.nextTick(() => {
update == null ? void 0 : update();
});
});
vue.onUnmounted(() => {
window.removeEventListener("keydown", navigateWithKeyboard);
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("button", {
ref_key: "triggerRef",
ref: triggerRef,
class: "mt-unit-select__trigger",
type: "button",
role: "combobox",
"aria-controls": "unit-select-listbox",
"aria-expanded": isOpen.value,
"aria-haspopup": "listbox",
disabled: _ctx.disabled,
"data-testid": "unit-select-trigger",
onClick: toggleDropdown
}, [
vue.createTextVNode(vue.toDisplayString(_ctx.modelValue) + " ", 1),
vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
name: "chevron-down-xxs",
size: "var(--scale-size-8)",
"aria-hidden": "true"
})
], 8, _hoisted_2),
(vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
vue.withDirectives(vue.createElementVNode("div", {
ref_key: "dropdownRef",
ref: dropdownRef,
class: "mt-unit-select",
style: vue.normalizeStyle({
...vue.unref(floatingStyles),
...props.zIndex != null ? { zIndex: props.zIndex } : {}
})
}, [
vue.createElementVNode("ul", {
id: "unit-select-listbox",
role: "listbox",
tabindex: "-1",
"aria-label": vue.unref(t)("select-unit")
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.units, (unit, index2) => {
return vue.openBlock(), vue.createBlock(MtUnitSelectResult, {
key: unit,
unit,
"unit-label": getUnitLabel(unit),
class: vue.normalizeClass({
"mt-unit-select-result--selected": unit === _ctx.modelValue,
"mt-unit-select-result--active": index2 === activeIndex.value
}),
onClick: ($event) => selectUnit(unit)
}, null, 8, ["unit", "unit-label", "class", "onClick"]);
}), 128))
], 8, _hoisted_3)
], 4), [
[vue.vShow, isOpen.value]
])
]))
]);
};
}
});
const mtUnitSelect_vue_vue_type_style_index_0_scoped_39787702_lang = "";
const MtUnitSelect = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-39787702"]]);
module.exports = MtUnitSelect;
//# sourceMappingURL=MtUnitSelect.js.map