@shopware-ag/meteor-component-library/dist/esm/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';
import { defineComponent, inject, resolveComponent, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, renderSlot, createVNode, Transition, withCtx, createBlock, createCommentVNode } from "vue";
import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import { M as MtSelectResultAddActiveItemListener, a as MtSelectResultRemoveActiveItemListener, b as MtSelectResultAddItemSelectByKeyboardListener, c as MtSelectResultRemoveItemSelectByKeyboardListener } from "../provideInjectKeys-47aad241.mjs";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
const _sfc_main = defineComponent({
  components: {
    "mt-icon": _sfc_main$1
  },
  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 = inject(MtSelectResultAddActiveItemListener);
    const removeActiveItemListener = inject(MtSelectResultRemoveActiveItemListener);
    const addItemSelectByKeyboardListener = inject(MtSelectResultAddItemSelectByKeyboardListener);
    const removeItemSelectByKeyboardListener = inject(
      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 = resolveComponent("mt-icon");
  return openBlock(), createElementBlock("li", {
    class: normalizeClass(["mt-select-result", _ctx.resultClasses]),
    onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.onMouseEnter && _ctx.onMouseEnter(...args)),
    onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.onClickResult && _ctx.onClickResult(...args), ["stop"])),
    "aria-disabled": _ctx.disabled
  }, [
    createElementVNode("span", _hoisted_2, [
      renderSlot(_ctx.$slots, "preview")
    ]),
    createElementVNode("span", _hoisted_3, [
      renderSlot(_ctx.$slots, "default")
    ]),
    createVNode(Transition, { name: "mt-select-result-appear" }, {
      default: withCtx(() => [
        _ctx.selected ? (openBlock(), createBlock(_component_mt_icon, {
          key: 0,
          name: "regular-checkmark-xs",
          size: "16px"
        })) : createCommentVNode("", true)
      ]),
      _: 1
    }),
    _ctx.hasDescriptionSlot ? (openBlock(), createElementBlock("span", _hoisted_4, [
      renderSlot(_ctx.$slots, "description")
    ])) : createCommentVNode("", true)
  ], 42, _hoisted_1);
}
const MtSelectResult = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  MtSelectResult as default
};
//# sourceMappingURL=MtSelectResult.js.map