Untitled

<template>
  <q-list>
    <menu-item
      v-for="(item, index) in addUniqueKeys(items)"
      :key="index"
      :item="item"
      :sub-menu-open="activeItem.includes(item.key)"
      :active-item="activeItem"
      @sub-menu-opened="open"
    />
  </q-list>
</template>

<script setup>
import MenuItem from './NewNestedMenuItem.vue';
import { ref, toRaw } from 'vue';

defineProps({
  items: {
    type: Array,
    required: true,
  },
});

const activeItem = ref([]);

function open(item) {
  const nestedLevel = item.key.split('-').length;

  const currentMaxNestedLevel = Math.max(
    ...toRaw(activeItem.value).map((key) => key.split('-').length),
  );

  if (nestedLevel > currentMaxNestedLevel) {
    activeItem.value.push(item.key);
  } else {
    activeItem.value = activeItem.value
      .filter((key) => key.split('-').length < nestedLevel)
      .concat(item.key);
  }
}

function addUniqueKeys(items, parentKey = '') {
  return items.map((item, index) => {
    const uniqueKey = `${parentKey}${index}`;

    const newItem = {
      ...item,
      key: uniqueKey,
    };

    if (newItem.subItems) {
      newItem.subItems = addUniqueKeys(newItem.subItems, `${uniqueKey}-`);
    }

    return newItem;
  });
}
</script>



<template>
  <q-item
    v-bind="{ ...$attrs }"
    clickable
    :disable="item.disable"
    :data-cy="baseSelector(item.label)"
    @mouseenter="onMouseEnterParent(item)"
    @click="item.onClick"
  >
    <q-item-section>
      <q-item-label>{{ item.label }}</q-item-label>
    </q-item-section>
    <q-item-section v-if="item.subItems" side>
      <q-icon name="fal fa-angle-right" />
    </q-item-section>
    <q-menu :model-value="subMenuOpen" anchor="top end" self="top start">
      <q-list>
        <new-nested-menu-item
          v-for="(subItem, index) in item.subItems"
          :key="index"
          :item="subItem"
          :sub-menu-open="activeItem.includes(subItem.key)"
          :active-item="activeItem"
          @sub-menu-opened="onMouseEnterParent"
        />
      </q-list>
    </q-menu>
  </q-item>
</template>

<script setup>
import { baseSelector } from 'utils/selectors';

defineProps({
  item: {
    type: Object,
    required: true,
  },
  subMenuOpen: {
    type: Boolean,
    default: true,
  },
  activeItem: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(['subMenuOpened', 'subMenuClosed']);

const onMouseEnterParent = (item) => {
  emit('subMenuOpened', item);
};
</script>