@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/).
291 lines (290 loc) • 9.48 kB
JavaScript
import '../mt-select-selection-list.css';
"use strict";
const vue = require("vue");
const vueI18n = require("vue-i18n");
const mtLabel_vue_vue_type_style_index_0_lang = require("../mt-label.vue_vue_type_style_index_0_lang-44b4947e.js");
const MtButton = require("./MtButton.js");
const object = require("../object-deb13c0b.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
require("./MtColorBadge.js");
require("../useIsInsideTooltip-f4674e27.js");
require("./MtLoader.js");
const _sfc_main = vue.defineComponent({
name: "MtSelectSelectionList",
components: {
"mt-label": mtLabel_vue_vue_type_style_index_0_lang._sfc_main,
"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 } = vueI18n.useI18n({
messages: {
de: {
"select-placeholder": "Auswählen..."
},
en: {
"select-placeholder": "Select..."
}
}
});
return {
t,
getKey: object.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 = vue.resolveComponent("mt-label");
const _component_mt_button = vue.resolveComponent("mt-button");
return vue.openBlock(), vue.createElementBlock("ul", _hoisted_1, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selections, (selection, index) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: selection[_ctx.valueProperty]
}, [
!_ctx.hideLabels && _ctx.multiSelection ? (vue.openBlock(), vue.createElementBlock("li", {
key: 0,
class: vue.normalizeClass([
"mt-select-selection-list__item-holder--" + index,
"mt-select-selection-list__item-holder",
_ctx.classBindings
]),
"data-id": selection[_ctx.valueProperty]
}, [
vue.renderSlot(_ctx.$slots, "selected-option", vue.mergeProps({ ref_for: true }, { selection, defaultLabel: _ctx.getKey(selection, _ctx.labelProperty), disabled: _ctx.disabled }), () => [
vue.createVNode(_component_mt_label, {
dismissable: !_ctx.isSelectionDisabled(selection),
size: _ctx.size,
onDismiss: ($event) => _ctx.onClickDismiss(selection)
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
class: "mt-select-selection-list__item",
title: _ctx.getKey(selection, _ctx.labelProperty)
}, [
vue.renderSlot(_ctx.$slots, "label-property", vue.mergeProps({ ref_for: true }, { item: selection, index, labelProperty: _ctx.labelProperty, valueProperty: _ctx.valueProperty }), () => [
vue.createTextVNode(vue.toDisplayString(_ctx.getKey(selection, _ctx.labelProperty)), 1)
])
], 8, _hoisted_3)
]),
_: 2
}, 1032, ["dismissable", "size", "onDismiss"])
])
], 10, _hoisted_2)) : vue.createCommentVNode("", true)
], 64);
}), 128)),
_ctx.invisibleCount > 0 && !_ctx.hideLabels ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_4, [
vue.renderSlot(_ctx.$slots, "invisible-count", vue.normalizeProps(vue.guardReactiveProps({ invisibleCount: _ctx.invisibleCount, onClickInvisibleCount: _ctx.onClickInvisibleCount })), () => [
vue.createVNode(_component_mt_button, {
variant: "secondary",
class: "mt-select-selection-list__load-more-button",
onClick: vue.withModifiers(_ctx.onClickInvisibleCount, ["stop"]),
tabindex: "0"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(" +" + vue.toDisplayString(_ctx.invisibleCount), 1)
]),
_: 1
}, 8, ["onClick"])
])
])) : vue.createCommentVNode("", true),
!_ctx.disableInput ? (vue.openBlock(), vue.createElementBlock("li", {
key: 1,
class: vue.normalizeClass(["mt-select-selection-list__input-wrapper", _ctx.inputWrapperClasses])
}, [
vue.renderSlot(_ctx.$slots, "input", vue.normalizeProps(vue.guardReactiveProps({ placeholder: _ctx.placeholder, searchTerm: _ctx.searchTerm, onSearchTermChange: _ctx.onSearchTermChange, onKeyDownDelete: _ctx.onKeyDownDelete })), () => [
vue.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] = vue.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)) : vue.createCommentVNode("", true)
]);
}
const MtSelectSelectionList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = MtSelectSelectionList;
//# sourceMappingURL=MtSelectSelectionList.js.map