blob: 25f9b51f2de65ab9f325f8a54a5609dc7f58f719 (
plain)
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
86
87
88
|
<template>
<div class="c-menu"
:class="[options.menuClass, 'c-super-menu']"
>
<ul v-if="options.actions.length && options.actions[0].length"
class="c-super-menu__menu"
>
<template
v-for="(actionGroups, index) in options.actions"
>
<li
v-for="action in actionGroups"
:key="action.name"
:class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
:title="action.description"
@click="action.onItemClicked"
@mouseover="toggleItemDescription(action)"
@mouseleave="toggleItemDescription()"
>
{{ action.name }}
</li>
<div
v-if="index !== options.actions.length - 1"
:key="index"
class="c-menu__section-separator"
>
</div>
<li
v-if="actionGroups.length === 0"
:key="index"
>
No actions defined.
</li>
</template>
</ul>
<ul v-else
class="c-super-menu__menu"
>
<li
v-for="action in options.actions"
:key="action.name"
:class="action.cssClass"
:title="action.description"
@click="action.onItemClicked"
@mouseover="toggleItemDescription(action)"
@mouseleave="toggleItemDescription()"
>
{{ action.name }}
</li>
<li v-if="options.actions.length === 0">
No actions defined.
</li>
</ul>
<div class="c-super-menu__item-description">
<div :class="['l-item-description__icon', 'bg-' + hoveredItem.cssClass]"></div>
<div class="l-item-description__name">
{{ hoveredItem.name }}
</div>
<div class="l-item-description__description">
{{ hoveredItem.description }}
</div>
</div>
</div>
</template>
<script>
export default {
inject: ['options'],
data: function () {
return {
hoveredItem: {}
};
},
methods: {
toggleItemDescription(action = {}) {
const hoveredItem = {
name: action.name,
description: action.description,
cssClass: action.cssClass
};
this.hoveredItem = Object.assign({}, this.hoveredItem, hoveredItem);
}
}
};
</script>
|
