@shopware-ag/meteor-component-library/dist/common/MtSelectResult.js

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import '../mt-select-result.css';
"use strict";
const vue = require("vue");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const provideInjectKeys = require("../provideInjectKeys-d5eff718.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
const _sfc_main = vue.defineComponent({
  components: {
    "mt-icon": mtIcon_vue_vue_type_style_index_0_lang._sfc_main
  },
  inject: ["setActiveItemIndex"],
  props: {
    index: {
      type: Number,
      required: true
    },
    item: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    selected: {
      type: Boolean,
      required: false,
      default: false
    },
    descriptionPosition: {
      type: String,
      required: false,
      default: "right",
      validator(value) {
        return ["bottom", "right"].includes(value);
      }
    }
  },
  data() {
    return {
      active: false
    };
  },
  computed: {
    resultClasses() {
      return [
        {
          "is--active": this.active,
          "is--disabled": this.disabled,
          "has--description": this.hasDescriptionSlot,
          [`is--description-${this.descriptionPosition}`]: this.hasDescriptionSlot
        },
        `mt-select-option--${this.index}`
      ];
    },
    hasDescriptionSlot() {
      return !!this.$slots.description;
    }
  },
  setup() {
    const addActiveItemListener = vue.inject(provideInjectKeys.MtSelectResultAddActiveItemListener);
    const removeActiveItemListener = vue.inject(provideInjectKeys.MtSelectResultRemoveActiveItemListener);
    const addItemSelectByKeyboardListener = vue.inject(provideInjectKeys.MtSelectResultAddItemSelectByKeyboardListener);
    const removeItemSelectByKeyboardListener = vue.inject(
      provideInjectKeys.MtSelectResultRemoveItemSelectByKeyboardListener
    );
    return {
      addActiveItemListener,
      removeActiveItemListener,
      addItemSelectByKeyboardListener,
      removeItemSelectByKeyboardListener
    };
  },
  created() {
    if (this.addActiveItemListener) {
      this.addActiveItemListener(this.checkIfActive);
    }
    if (this.addItemSelectByKeyboardListener) {
      this.addItemSelectByKeyboardListener(this.checkIfSelected);
    }
  },
  unmounted() {
    if (this.removeActiveItemListener) {
      this.removeActiveItemListener(this.checkIfActive);
    }
    if (this.removeItemSelectByKeyboardListener) {
      this.removeItemSelectByKeyboardListener(this.checkIfSelected);
    }
  },
  methods: {
    checkIfSelected(selectedItemIndex) {
      if (selectedItemIndex === this.index)
        this.onClickResult();
    },
    checkIfActive(activeItemIndex) {
      this.active = this.index === activeItemIndex;
    },
    onClickResult() {
      if (this.disabled) {
        return;
      }
      this.$parent.$parent.$emit("item-select", this.item);
    },
    onMouseEnter() {
      this.setActiveItemIndex(this.index);
    }
  }
});
const mtSelectResult_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = ["aria-disabled"];
const _hoisted_2 = { class: "mt-select-result__result-item-preview" };
const _hoisted_3 = { class: "mt-select-result__result-item-text" };
const _hoisted_4 = {
  key: 0,
  class: "mt-select-result__result-item-description"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_mt_icon = vue.resolveComponent("mt-icon");
  return vue.openBlock(), vue.createElementBlock("li", {
    class: vue.normalizeClass(["mt-select-result", _ctx.resultClasses]),
    onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.onMouseEnter && _ctx.onMouseEnter(...args)),
    onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.onClickResult && _ctx.onClickResult(...args), ["stop"])),
    "aria-disabled": _ctx.disabled
  }, [
    vue.createElementVNode("span", _hoisted_2, [
      vue.renderSlot(_ctx.$slots, "preview")
    ]),
    vue.createElementVNode("span", _hoisted_3, [
      vue.renderSlot(_ctx.$slots, "default")
    ]),
    vue.createVNode(vue.Transition, { name: "mt-select-result-appear" }, {
      default: vue.withCtx(() => [
        _ctx.selected ? (vue.openBlock(), vue.createBlock(_component_mt_icon, {
          key: 0,
          name: "regular-checkmark-xs",
          size: "16px"
        })) : vue.createCommentVNode("", true)
      ]),
      _: 1
    }),
    _ctx.hasDescriptionSlot ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [
      vue.renderSlot(_ctx.$slots, "description")
    ])) : vue.createCommentVNode("", true)
  ], 42, _hoisted_1);
}
const MtSelectResult = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = MtSelectResult;
//# sourceMappingURL=MtSelectResult.js.map