vue-template/LuLeftMenuItem.vue at master · lu-se/vue-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!--
@click.native https://github.com/vuejs/vue-router/issues/800
-->
<template>
  <li v-if="item.children && item.path">
    <router-link
      :to="item.path"
      class="nav-link collapse"
      :class="[expanded ? 'show' : 'collapsed']"
      @click="toggleExpanded"
    >
      <div class="float-end ml-2">
        <fa-icon :icon="['fal', expanded ? 'chevron-down' : 'chevron-right']" />
      </div>
      {{ t(item.label) }}
    </router-link>
    <ul
      class="nav-accordion collapse"
      :class="[expanded ? 'show': '']"
    >
      <lu-left-menu-item
        v-for="subItem in item.children"
        :key="subItem.id"
        :item="subItem"
        @link-selected="childLinkSelected"
      />
    </ul>
  </li>
  <li v-else-if="item.path">
    <router-link
      :to="item.path"
      class="nav-link"
      @click="emit('link-selected')"
    >
      {{ t(item.label) }}
    </router-link>
  </li>
  <li v-else>
    <a
      :href="item.url"
      class="nav-link"
    >
      {{ t(item.label) }}
    </a>
  </li>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'

const props = defineProps({
  item: { type: Object, required: true },
})

const emit = defineEmits(['link-selected'])

const expanded = ref(false)

const route = useRoute()
const { t } = useI18n()

function emitIfActive (path) {
  const targetPath = props.item?.path
  if (targetPath && path === targetPath) {
    emit('link-selected')
  }
}

function toggleExpanded () {
  expanded.value = !expanded.value
}

function childLinkSelected () {
  emit('link-selected')
  expanded.value = true
}

watch(() => route.path, emitIfActive)

onMounted(() => {
  emitIfActive(route.path)
})
</script>