@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/).
292 lines (291 loc) • 9.47 kB
JavaScript
import '../mt-select-selection-list.css';
import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, renderList, normalizeClass, renderSlot, mergeProps, createVNode, withCtx, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, normalizeProps, guardReactiveProps, withModifiers, withKeys } from "vue";
import { useI18n } from "vue-i18n";
import { _ as _sfc_main$1 } from "../mt-label.vue_vue_type_style_index_0_lang-13843d32.mjs";
import MtButton from "./MtButton.js";
import { g as getPropertyValue } from "../object-e11d5dd3.mjs";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import "./MtColorBadge.js";
import "../useIsInsideTooltip-0c3bd290.mjs";
import "./MtLoader.js";
const _sfc_main = defineComponent({
name: "MtSelectSelectionList",
components: {
"mt-label": _sfc_main$1,
"mt-button": MtButton
},
props: {
selections: {
type: Array,
required: false,
default: () => []
},
labelProperty: {
type: [String, Array],
required: false,
default: "label"
},
valueProperty: {
type: String,
required: false,
default: "value"
},
enableSearch: {
type: Boolean,
required: false,
default: true
},
invisibleCount: {
type: Number,
required: false,
default: 0
},
size: {
type: String,
required: false,
default: null
},
alwaysShowPlaceholder: {
type: Boolean,
required: false,
default: true
},
placeholder: {
type: String,
required: false,
default: ""
},
isLoading: {
type: Boolean,
required: false,
default: false
},
searchTerm: {
type: String,
required: false,
default: ""
},
disabled: {
type: Boolean,
required: false,
default: false
},
selectionDisablingMethod: {
type: Function,
required: false,
default: () => false
},
hideLabels: {
type: Boolean,
required: false,
default: false
},
multiSelection: {
type: Boolean,
required: true
},
disableInput: {
type: Boolean,
required: false,
default: false
}
},
setup() {
const { t } = useI18n({
messages: {
de: {
"select-placeholder": "Auswählen..."
},
en: {
"select-placeholder": "Select..."
}
}
});
return {
t,
getKey: getPropertyValue
};
},
data() {
return {
inputInFocus: false
};
},
computed: {
classBindings() {
return {
"mt-select-selection-list--single": !this.multiSelection
};
},
inputWrapperClasses() {
return {
"mt-select-selection-list__input-wrapper--small": this.size === "small"
};
},
showPlaceholder() {
if (this.disabled) {
return "";
}
if (!this.multiSelection && this.selections.length > 0) {
return this.currentValue;
}
return this.alwaysShowPlaceholder ? this.placeholder ? this.placeholder : this.t("select-placeholder") : "";
},
currentValue() {
var _a;
return this.getKey((_a = this.selections) == null ? void 0 : _a[0], this.labelProperty);
},
inputValue() {
if (this.multiSelection) {
return this.searchTerm;
}
if (this.inputInFocus) {
return this.searchTerm;
}
return this.currentValue;
}
},
methods: {
isSelectionDisabled(selection) {
if (!this.multiSelection) {
return true;
}
if (this.disabled) {
return true;
}
if (typeof this.selectionDisablingMethod !== "function") {
return false;
}
return this.selectionDisablingMethod(selection);
},
onClickInvisibleCount() {
this.$emit("total-count-click");
},
onSearchTermChange(event) {
this.$emit("search-term-change", event.target.value, event);
},
async onInputFocus() {
this.inputInFocus = true;
},
clearSearchTerm() {
this.inputInFocus = false;
},
onKeyDownDelete() {
if (this.searchTerm.length < 1 && this.multiSelection) {
this.$emit("last-item-delete");
}
},
onClickDismiss(item) {
this.$emit("item-remove", item);
},
focus() {
if (this.$refs.MtSelectInput) {
this.$refs.MtSelectInput.focus();
}
},
blur() {
if (this.$refs.MtSelectInput) {
this.$refs.MtSelectInput.blur();
}
},
select() {
if (this.$refs.MtSelectInput) {
this.$refs.MtSelectInput.select();
}
},
getFocusEl() {
return this.$refs.MtSelectInput;
}
}
});
const mtSelectSelectionList_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = { class: "mt-select-selection-list" };
const _hoisted_2 = ["data-id"];
const _hoisted_3 = ["title"];
const _hoisted_4 = {
key: 0,
class: "mt-select-selection-list__load-more"
};
const _hoisted_5 = ["disabled", "readonly", "placeholder", "value"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_label = resolveComponent("mt-label");
const _component_mt_button = resolveComponent("mt-button");
return openBlock(), createElementBlock("ul", _hoisted_1, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selections, (selection, index) => {
return openBlock(), createElementBlock(Fragment, {
key: selection[_ctx.valueProperty]
}, [
!_ctx.hideLabels && _ctx.multiSelection ? (openBlock(), createElementBlock("li", {
key: 0,
class: normalizeClass([
"mt-select-selection-list__item-holder--" + index,
"mt-select-selection-list__item-holder",
_ctx.classBindings
]),
"data-id": selection[_ctx.valueProperty]
}, [
renderSlot(_ctx.$slots, "selected-option", mergeProps({ ref_for: true }, { selection, defaultLabel: _ctx.getKey(selection, _ctx.labelProperty), disabled: _ctx.disabled }), () => [
createVNode(_component_mt_label, {
dismissable: !_ctx.isSelectionDisabled(selection),
size: _ctx.size,
onDismiss: ($event) => _ctx.onClickDismiss(selection)
}, {
default: withCtx(() => [
createElementVNode("span", {
class: "mt-select-selection-list__item",
title: _ctx.getKey(selection, _ctx.labelProperty)
}, [
renderSlot(_ctx.$slots, "label-property", mergeProps({ ref_for: true }, { item: selection, index, labelProperty: _ctx.labelProperty, valueProperty: _ctx.valueProperty }), () => [
createTextVNode(toDisplayString(_ctx.getKey(selection, _ctx.labelProperty)), 1)
])
], 8, _hoisted_3)
]),
_: 2
}, 1032, ["dismissable", "size", "onDismiss"])
])
], 10, _hoisted_2)) : createCommentVNode("", true)
], 64);
}), 128)),
_ctx.invisibleCount > 0 && !_ctx.hideLabels ? (openBlock(), createElementBlock("li", _hoisted_4, [
renderSlot(_ctx.$slots, "invisible-count", normalizeProps(guardReactiveProps({ invisibleCount: _ctx.invisibleCount, onClickInvisibleCount: _ctx.onClickInvisibleCount })), () => [
createVNode(_component_mt_button, {
variant: "secondary",
class: "mt-select-selection-list__load-more-button",
onClick: withModifiers(_ctx.onClickInvisibleCount, ["stop"]),
tabindex: "0"
}, {
default: withCtx(() => [
createTextVNode(" +" + toDisplayString(_ctx.invisibleCount), 1)
]),
_: 1
}, 8, ["onClick"])
])
])) : createCommentVNode("", true),
!_ctx.disableInput ? (openBlock(), createElementBlock("li", {
key: 1,
class: normalizeClass(["mt-select-selection-list__input-wrapper", _ctx.inputWrapperClasses])
}, [
renderSlot(_ctx.$slots, "input", normalizeProps(guardReactiveProps({ placeholder: _ctx.placeholder, searchTerm: _ctx.searchTerm, onSearchTermChange: _ctx.onSearchTermChange, onKeyDownDelete: _ctx.onKeyDownDelete })), () => [
createElementVNode("input", {
ref: "MtSelectInput",
class: "mt-select-selection-list__input",
type: "text",
disabled: _ctx.disabled,
readonly: !_ctx.enableSearch,
placeholder: _ctx.showPlaceholder,
value: _ctx.inputValue,
onInput: _cache[0] || (_cache[0] = (...args) => _ctx.onSearchTermChange && _ctx.onSearchTermChange(...args)),
onKeydown: _cache[1] || (_cache[1] = withKeys((...args) => _ctx.onKeyDownDelete && _ctx.onKeyDownDelete(...args), ["delete"])),
onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.clearSearchTerm && _ctx.clearSearchTerm(...args)),
onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.onInputFocus && _ctx.onInputFocus(...args))
}, null, 40, _hoisted_5)
])
], 2)) : createCommentVNode("", true)
]);
}
const MtSelectSelectionList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
MtSelectSelectionList as default
};
//# sourceMappingURL=MtSelectSelectionList.js.map