@icvdeveloper/common-module 0.0.68 → 0.0.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -6
- package/dist/module.json +1 -1
- package/dist/runtime/@types/components.d.ts +1 -0
- package/dist/runtime/assets/svg/answer.svg +14 -14
- package/dist/runtime/assets/svg/avatar.svg +1 -1
- package/dist/runtime/assets/svg/bell-icon.svg +3 -3
- package/dist/runtime/assets/svg/checkmark-icon.svg +1 -1
- package/dist/runtime/assets/svg/close-icon.svg +1 -1
- package/dist/runtime/assets/svg/icon-avatar.svg +1 -1
- package/dist/runtime/assets/svg/icon-chevron.svg +4 -4
- package/dist/runtime/assets/svg/icon-circle-plus.svg +1 -1
- package/dist/runtime/assets/svg/icon-close.svg +1 -1
- package/dist/runtime/assets/svg/icon-info.svg +2 -2
- package/dist/runtime/assets/svg/icon-new-window.svg +11 -11
- package/dist/runtime/assets/svg/icon-offline.svg +3 -3
- package/dist/runtime/assets/svg/icon-online.svg +3 -3
- package/dist/runtime/assets/svg/icon-person.svg +2 -2
- package/dist/runtime/assets/svg/icon-play.svg +2 -2
- package/dist/runtime/assets/svg/icon-star-filled.svg +29 -29
- package/dist/runtime/assets/svg/icon-star.svg +24 -24
- package/dist/runtime/assets/svg/icon-video-chat.svg +14 -14
- package/dist/runtime/assets/svg/icon-website.svg +2 -2
- package/dist/runtime/assets/svg/icon-zoom.svg +10 -10
- package/dist/runtime/assets/svg/notification-icon.svg +32 -32
- package/dist/runtime/assets/svg/offline-icon.svg +1 -1
- package/dist/runtime/assets/svg/online-icon.svg +3 -3
- package/dist/runtime/assets/svg/peer2peer.svg +3 -3
- package/dist/runtime/assets/svg/phone.svg +1 -1
- package/dist/runtime/assets/svg/plus-icon.svg +1 -1
- package/dist/runtime/assets/svg/red-icon.svg +3 -3
- package/dist/runtime/assets/svg/reject.svg +14 -14
- package/dist/runtime/assets/svg/search-icon.svg +3 -3
- package/dist/runtime/components/affiliates/AffiliatePage.vue +17 -17
- package/dist/runtime/components/agenda/AgendaList.vue +104 -104
- package/dist/runtime/components/agenda/AgendaTabbed.vue +300 -300
- package/dist/runtime/components/agenda/components/AgendaListAccordion.vue +26 -26
- package/dist/runtime/components/agenda/components/InfoLink.vue +56 -56
- package/dist/runtime/components/agenda/components/PlayIcon.vue +49 -49
- package/dist/runtime/components/agenda/components/PresentationLink.vue +137 -137
- package/dist/runtime/components/agenda/components/Sponsor.vue +132 -132
- package/dist/runtime/components/auth/LoginFullWidth.vue +78 -78
- package/dist/runtime/components/auth/PasswordReset.vue +60 -60
- package/dist/runtime/components/auth/Registration.vue +27 -27
- package/dist/runtime/components/auth/Ucc.vue +52 -52
- package/dist/runtime/components/core/Accordion.vue +97 -97
- package/dist/runtime/components/core/CountdownTimer.vue +308 -308
- package/dist/runtime/components/core/DynamicHtml.vue +1 -1
- package/dist/runtime/components/core/Modal.vue +111 -111
- package/dist/runtime/components/core/Navbar.vue +154 -154
- package/dist/runtime/components/core/SvgIcon.vue +151 -151
- package/dist/runtime/components/core/ZoomModal.vue +37 -37
- package/dist/runtime/components/events/EventHeader.vue +133 -133
- package/dist/runtime/components/events/ListEvents.vue +507 -482
- package/dist/runtime/components/forms/AlertBox.vue +21 -21
- package/dist/runtime/components/forms/ErrorField.vue +17 -17
- package/dist/runtime/components/forms/Message.vue +27 -27
- package/dist/runtime/components/forms/SearchInput.vue +38 -38
- package/dist/runtime/components/forms/SupportForm.vue +112 -112
- package/dist/runtime/components/forms/SwitchInput.vue +42 -42
- package/dist/runtime/components/forms/TextArea.vue +26 -26
- package/dist/runtime/components/forms/TextInput.vue +28 -28
- package/dist/runtime/components/layouts/Accordion.vue +78 -78
- package/dist/runtime/components/presenters/PresenterListing.vue +164 -164
- package/dist/runtime/components/presenters/PresenterModal.vue +223 -223
- package/dist/runtime/components/profile/Profile.vue +149 -149
- package/dist/runtime/components/profile/components/Sidebar.vue +27 -27
- package/dist/runtime/components/profile/components/SidebarNavItem.vue +39 -39
- package/dist/runtime/components/profile/tabs/Favorites.vue +21 -21
- package/dist/runtime/components/profile/tabs/GeneralInformation.vue +122 -122
- package/dist/runtime/components/profile/tabs/ProfileImage.vue +75 -75
- package/dist/runtime/components/support/FAQAccordion.vue +137 -137
- package/package.json +59 -59
|
@@ -1,113 +1,113 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { ref, toRefs, computed } from "vue";
|
|
3
|
-
import { useClassBinding } from "../../composables/useClassBinding";
|
|
4
|
-
import {
|
|
5
|
-
modalClassObj,
|
|
6
|
-
modalCompObj,
|
|
7
|
-
svgIconClassObj,
|
|
8
|
-
} from "../../@types/components";
|
|
9
|
-
|
|
10
|
-
type Props = {
|
|
11
|
-
visible?: boolean;
|
|
12
|
-
modalSize?: string;
|
|
13
|
-
noScroll?: boolean;
|
|
14
|
-
showClose?: boolean;
|
|
15
|
-
usePadding?: boolean;
|
|
16
|
-
classObject?: modalClassObj;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
// classObject.components.svgIcon is not functioning properly and cannot be passed to svgIcon component
|
|
20
|
-
const props = withDefaults(defineProps<Props>(), {
|
|
21
|
-
visible: false,
|
|
22
|
-
modalSize: "50",
|
|
23
|
-
noScroll: false,
|
|
24
|
-
showClose: true,
|
|
25
|
-
usePadding: true,
|
|
26
|
-
classObject: () => {
|
|
27
|
-
return {
|
|
28
|
-
container: "",
|
|
29
|
-
modalPositionContainer: "",
|
|
30
|
-
modalContainer: "",
|
|
31
|
-
modalCloseContainer: "",
|
|
32
|
-
modalButton: "",
|
|
33
|
-
modalButtonIcon: "",
|
|
34
|
-
components: ref<modalCompObj>({
|
|
35
|
-
svgIcon: ref<svgIconClassObj>({}),
|
|
36
|
-
}),
|
|
37
|
-
};
|
|
38
|
-
},
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
const emit = defineEmits(["trigger", "clicked"]);
|
|
42
|
-
|
|
43
|
-
const { visible, modalSize, noScroll, showClose, usePadding, classObject } =
|
|
44
|
-
toRefs(props);
|
|
45
|
-
const { classBinding } = useClassBinding();
|
|
46
|
-
|
|
47
|
-
const modalClass = computed(() => {
|
|
48
|
-
const padding = usePadding.value ? "p-6" : "";
|
|
49
|
-
const classes = `relative w-full ${padding} m-auto flex-col flex rounded shadow bg-white modal-box`;
|
|
50
|
-
if (noScroll.value) {
|
|
51
|
-
return classes + ` max-h-full overflow-hidden`;
|
|
52
|
-
} else {
|
|
53
|
-
return classes + ` overflow-y-auto`;
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
const closeModal = () => {
|
|
58
|
-
emit("trigger");
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
const clicked = () => {
|
|
62
|
-
emit("clicked");
|
|
63
|
-
};
|
|
64
|
-
</script>
|
|
65
|
-
|
|
66
|
-
<template>
|
|
67
|
-
<Transition>
|
|
68
|
-
<div
|
|
69
|
-
v-if="visible"
|
|
70
|
-
:class="
|
|
71
|
-
classBinding(
|
|
72
|
-
classObject,
|
|
73
|
-
'modalPositionContainer',
|
|
74
|
-
'fixed top-0 bottom-0 left-0 right-0 z-50 flex bg-smoke-light p-3'
|
|
75
|
-
)
|
|
76
|
-
"
|
|
77
|
-
@click="clicked"
|
|
78
|
-
>
|
|
79
|
-
<div
|
|
80
|
-
class="custom-max-width max-h-full"
|
|
81
|
-
:class="classBinding(classObject, 'modalContainer', modalClass)"
|
|
82
|
-
:style="'--maxw: ' + modalSize + '%;'"
|
|
83
|
-
>
|
|
84
|
-
<span
|
|
85
|
-
v-if="showClose"
|
|
86
|
-
:class="
|
|
87
|
-
classBinding(
|
|
88
|
-
classObject,
|
|
89
|
-
'modalCloseContainer',
|
|
90
|
-
'absolute top-0 bottom-0 right-0 z-30 max-h-1em'
|
|
91
|
-
)
|
|
92
|
-
"
|
|
93
|
-
>
|
|
94
|
-
<button
|
|
95
|
-
:class="classBinding(classObject, 'modalButton', 'p-3')"
|
|
96
|
-
@click="closeModal()"
|
|
97
|
-
>
|
|
98
|
-
<span :class="classBinding(classObject, 'modalButtonIcon', '')"
|
|
99
|
-
><CommonSvgIcon icon="close" width=".7rem"
|
|
100
|
-
/></span>
|
|
101
|
-
</button>
|
|
102
|
-
</span>
|
|
103
|
-
|
|
104
|
-
<slot name="modal-title" />
|
|
105
|
-
<slot name="modal-body" />
|
|
106
|
-
</div>
|
|
107
|
-
</div>
|
|
108
|
-
</Transition>
|
|
109
|
-
</template>
|
|
110
|
-
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref, toRefs, computed } from "vue";
|
|
3
|
+
import { useClassBinding } from "../../composables/useClassBinding";
|
|
4
|
+
import {
|
|
5
|
+
modalClassObj,
|
|
6
|
+
modalCompObj,
|
|
7
|
+
svgIconClassObj,
|
|
8
|
+
} from "../../@types/components";
|
|
9
|
+
|
|
10
|
+
type Props = {
|
|
11
|
+
visible?: boolean;
|
|
12
|
+
modalSize?: string;
|
|
13
|
+
noScroll?: boolean;
|
|
14
|
+
showClose?: boolean;
|
|
15
|
+
usePadding?: boolean;
|
|
16
|
+
classObject?: modalClassObj;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
// classObject.components.svgIcon is not functioning properly and cannot be passed to svgIcon component
|
|
20
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
21
|
+
visible: false,
|
|
22
|
+
modalSize: "50",
|
|
23
|
+
noScroll: false,
|
|
24
|
+
showClose: true,
|
|
25
|
+
usePadding: true,
|
|
26
|
+
classObject: () => {
|
|
27
|
+
return {
|
|
28
|
+
container: "",
|
|
29
|
+
modalPositionContainer: "",
|
|
30
|
+
modalContainer: "",
|
|
31
|
+
modalCloseContainer: "",
|
|
32
|
+
modalButton: "",
|
|
33
|
+
modalButtonIcon: "",
|
|
34
|
+
components: ref<modalCompObj>({
|
|
35
|
+
svgIcon: ref<svgIconClassObj>({}),
|
|
36
|
+
}),
|
|
37
|
+
};
|
|
38
|
+
},
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
const emit = defineEmits(["trigger", "clicked"]);
|
|
42
|
+
|
|
43
|
+
const { visible, modalSize, noScroll, showClose, usePadding, classObject } =
|
|
44
|
+
toRefs(props);
|
|
45
|
+
const { classBinding } = useClassBinding();
|
|
46
|
+
|
|
47
|
+
const modalClass = computed(() => {
|
|
48
|
+
const padding = usePadding.value ? "p-6" : "";
|
|
49
|
+
const classes = `relative w-full ${padding} m-auto flex-col flex rounded shadow bg-white modal-box`;
|
|
50
|
+
if (noScroll.value) {
|
|
51
|
+
return classes + ` max-h-full overflow-hidden`;
|
|
52
|
+
} else {
|
|
53
|
+
return classes + ` overflow-y-auto`;
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
const closeModal = () => {
|
|
58
|
+
emit("trigger");
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const clicked = () => {
|
|
62
|
+
emit("clicked");
|
|
63
|
+
};
|
|
64
|
+
</script>
|
|
65
|
+
|
|
66
|
+
<template>
|
|
67
|
+
<Transition>
|
|
68
|
+
<div
|
|
69
|
+
v-if="visible"
|
|
70
|
+
:class="
|
|
71
|
+
classBinding(
|
|
72
|
+
classObject,
|
|
73
|
+
'modalPositionContainer',
|
|
74
|
+
'fixed top-0 bottom-0 left-0 right-0 z-50 flex bg-smoke-light p-3'
|
|
75
|
+
)
|
|
76
|
+
"
|
|
77
|
+
@click="clicked"
|
|
78
|
+
>
|
|
79
|
+
<div
|
|
80
|
+
class="custom-max-width max-h-full"
|
|
81
|
+
:class="classBinding(classObject, 'modalContainer', modalClass)"
|
|
82
|
+
:style="'--maxw: ' + modalSize + '%;'"
|
|
83
|
+
>
|
|
84
|
+
<span
|
|
85
|
+
v-if="showClose"
|
|
86
|
+
:class="
|
|
87
|
+
classBinding(
|
|
88
|
+
classObject,
|
|
89
|
+
'modalCloseContainer',
|
|
90
|
+
'absolute top-0 bottom-0 right-0 z-30 max-h-1em'
|
|
91
|
+
)
|
|
92
|
+
"
|
|
93
|
+
>
|
|
94
|
+
<button
|
|
95
|
+
:class="classBinding(classObject, 'modalButton', 'p-3')"
|
|
96
|
+
@click="closeModal()"
|
|
97
|
+
>
|
|
98
|
+
<span :class="classBinding(classObject, 'modalButtonIcon', '')"
|
|
99
|
+
><CommonSvgIcon icon="close" width=".7rem"
|
|
100
|
+
/></span>
|
|
101
|
+
</button>
|
|
102
|
+
</span>
|
|
103
|
+
|
|
104
|
+
<slot name="modal-title" />
|
|
105
|
+
<slot name="modal-body" />
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
</Transition>
|
|
109
|
+
</template>
|
|
110
|
+
|
|
111
111
|
<style scoped>
|
|
112
112
|
.max-h-1em {
|
|
113
113
|
max-height: 1em;
|
|
@@ -130,4 +130,4 @@ const clicked = () => {
|
|
|
130
130
|
max-width: var(--maxw);
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
|
-
</style>
|
|
133
|
+
</style>
|
|
@@ -1,154 +1,154 @@
|
|
|
1
|
-
<script lang="ts" setup>
|
|
2
|
-
import { ref, toRefs, computed } from "vue";
|
|
3
|
-
import { cloneDeep } from "lodash-es";
|
|
4
|
-
import { useNavigationConfigStore } from "../../store/navigationConfig";
|
|
5
|
-
import { useTemplateConfigsStore } from "../../store/templateConfigs";
|
|
6
|
-
import { useNavigation } from "../../composables/useNavigation";
|
|
7
|
-
|
|
8
|
-
type AdditionalItems = {
|
|
9
|
-
[index: number]: Array<{
|
|
10
|
-
name: string;
|
|
11
|
-
url: string;
|
|
12
|
-
}>;
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
// props
|
|
16
|
-
type Props = {
|
|
17
|
-
additionalItems?: AdditionalItems;
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
const props = withDefaults(defineProps<Props>(), {
|
|
21
|
-
additionalItems: () => {
|
|
22
|
-
return {};
|
|
23
|
-
},
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
const { getEnabled } = useNavigationConfigStore();
|
|
27
|
-
const { globalConfigValue } = useTemplateConfigsStore();
|
|
28
|
-
|
|
29
|
-
// data
|
|
30
|
-
const { additionalItems } = toRefs(props);
|
|
31
|
-
const navItems = getEnabled();
|
|
32
|
-
const htmlHeader = globalConfigValue("html_header");
|
|
33
|
-
const open = ref<boolean>(false);
|
|
34
|
-
|
|
35
|
-
// methods
|
|
36
|
-
const { isExternalLink, formatLink } = useNavigation();
|
|
37
|
-
const toggle = () => {
|
|
38
|
-
open.value = !open.value;
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
// computed
|
|
42
|
-
const combinedNavItems = computed(() => {
|
|
43
|
-
const items = cloneDeep(navItems);
|
|
44
|
-
|
|
45
|
-
if (Object.keys(additionalItems.value).length > 0) {
|
|
46
|
-
// get index to insert items at.
|
|
47
|
-
Object.keys(additionalItems.value).forEach((index) => {
|
|
48
|
-
if (items[index] !== "undefined") {
|
|
49
|
-
for (let i = 0; i < additionalItems.value[index].length; i++) {
|
|
50
|
-
items.splice(index + i, 0, additionalItems.value[index][i]);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
return items;
|
|
57
|
-
});
|
|
58
|
-
</script>
|
|
59
|
-
|
|
60
|
-
<template>
|
|
61
|
-
<div>
|
|
62
|
-
<div class="flex flex-col">
|
|
63
|
-
<header class="min-w-full flex sticky pin-t z-50">
|
|
64
|
-
<!-- Standard Screen Nav -->
|
|
65
|
-
<div
|
|
66
|
-
class="hidden flex-1 flex-col mx-auto min-w-full"
|
|
67
|
-
:class="combinedNavItems.length < 7 ? 'md:flex' : 'lg:flex'"
|
|
68
|
-
>
|
|
69
|
-
<CommonDynamicHtml
|
|
70
|
-
v-if="htmlHeader.length"
|
|
71
|
-
class="flex-initial mb-0"
|
|
72
|
-
:template="htmlHeader"
|
|
73
|
-
></CommonDynamicHtml>
|
|
74
|
-
|
|
75
|
-
<nav class="flex flex-1 min-h-8 content-center">
|
|
76
|
-
<ul class="list-reset h-full">
|
|
77
|
-
<li v-for="(item, index) in combinedNavItems" :key="index">
|
|
78
|
-
<nuxt-link
|
|
79
|
-
v-if="!isExternalLink(item)"
|
|
80
|
-
:to="formatLink(item)"
|
|
81
|
-
exact
|
|
82
|
-
class="inline-block"
|
|
83
|
-
>
|
|
84
|
-
{{ item.label || item.name }}
|
|
85
|
-
</nuxt-link>
|
|
86
|
-
<a
|
|
87
|
-
v-else
|
|
88
|
-
:href="formatLink(item)"
|
|
89
|
-
:target="isExternalLink(item) ? '_blank' : ''"
|
|
90
|
-
>
|
|
91
|
-
{{ item.label || item.name }}
|
|
92
|
-
</a>
|
|
93
|
-
</li>
|
|
94
|
-
</ul>
|
|
95
|
-
</nav>
|
|
96
|
-
</div>
|
|
97
|
-
|
|
98
|
-
<!-- Mobile Nav -->
|
|
99
|
-
<div
|
|
100
|
-
class="flex flex-col content-start mx-auto min-w-full"
|
|
101
|
-
:class="combinedNavItems.length >= 7 ? 'lg:hidden' : 'md:hidden'"
|
|
102
|
-
>
|
|
103
|
-
<div class="mobile-nav flex flex-row justify-between">
|
|
104
|
-
<CommonDynamicHtml
|
|
105
|
-
v-if="htmlHeader.length"
|
|
106
|
-
class="flex-1"
|
|
107
|
-
:template="htmlHeader"
|
|
108
|
-
></CommonDynamicHtml>
|
|
109
|
-
|
|
110
|
-
<div class="float-right p-2">
|
|
111
|
-
<button class="flex items-center px-3 py-2" @click="toggle">
|
|
112
|
-
<svg
|
|
113
|
-
class="fill-current h-3 w-3"
|
|
114
|
-
viewBox="0 0 20 20"
|
|
115
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
116
|
-
>
|
|
117
|
-
<title>Menu</title>
|
|
118
|
-
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
|
|
119
|
-
</svg>
|
|
120
|
-
</button>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
|
|
124
|
-
<div class="flex">
|
|
125
|
-
<nav :class="open ? 'flex' : 'hidden'" class="w-full">
|
|
126
|
-
<ul class="flex-col self-center list-reset mx-auto">
|
|
127
|
-
<li v-for="(item, index) in combinedNavItems" :key="index">
|
|
128
|
-
<nuxt-link
|
|
129
|
-
v-if="!isExternalLink(item)"
|
|
130
|
-
:to="formatLink(item)"
|
|
131
|
-
exact
|
|
132
|
-
class="block w-full text-center"
|
|
133
|
-
@click.native="toggle"
|
|
134
|
-
>
|
|
135
|
-
{{ item.label || item.name }}
|
|
136
|
-
</nuxt-link>
|
|
137
|
-
|
|
138
|
-
<a
|
|
139
|
-
v-if="isExternalLink(item)"
|
|
140
|
-
:href="formatLink(item)"
|
|
141
|
-
target="_blank"
|
|
142
|
-
@click.native="toggle"
|
|
143
|
-
>
|
|
144
|
-
{{ item.label || item.name }}
|
|
145
|
-
</a>
|
|
146
|
-
</li>
|
|
147
|
-
</ul>
|
|
148
|
-
</nav>
|
|
149
|
-
</div>
|
|
150
|
-
</div>
|
|
151
|
-
</header>
|
|
152
|
-
</div>
|
|
153
|
-
</div>
|
|
154
|
-
</template>
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { ref, toRefs, computed } from "vue";
|
|
3
|
+
import { cloneDeep } from "lodash-es";
|
|
4
|
+
import { useNavigationConfigStore } from "../../store/navigationConfig";
|
|
5
|
+
import { useTemplateConfigsStore } from "../../store/templateConfigs";
|
|
6
|
+
import { useNavigation } from "../../composables/useNavigation";
|
|
7
|
+
|
|
8
|
+
type AdditionalItems = {
|
|
9
|
+
[index: number]: Array<{
|
|
10
|
+
name: string;
|
|
11
|
+
url: string;
|
|
12
|
+
}>;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
// props
|
|
16
|
+
type Props = {
|
|
17
|
+
additionalItems?: AdditionalItems;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
21
|
+
additionalItems: () => {
|
|
22
|
+
return {};
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
const { getEnabled } = useNavigationConfigStore();
|
|
27
|
+
const { globalConfigValue } = useTemplateConfigsStore();
|
|
28
|
+
|
|
29
|
+
// data
|
|
30
|
+
const { additionalItems } = toRefs(props);
|
|
31
|
+
const navItems = getEnabled();
|
|
32
|
+
const htmlHeader = globalConfigValue("html_header");
|
|
33
|
+
const open = ref<boolean>(false);
|
|
34
|
+
|
|
35
|
+
// methods
|
|
36
|
+
const { isExternalLink, formatLink } = useNavigation();
|
|
37
|
+
const toggle = () => {
|
|
38
|
+
open.value = !open.value;
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
// computed
|
|
42
|
+
const combinedNavItems = computed(() => {
|
|
43
|
+
const items = cloneDeep(navItems);
|
|
44
|
+
|
|
45
|
+
if (Object.keys(additionalItems.value).length > 0) {
|
|
46
|
+
// get index to insert items at.
|
|
47
|
+
Object.keys(additionalItems.value).forEach((index) => {
|
|
48
|
+
if (items[index] !== "undefined") {
|
|
49
|
+
for (let i = 0; i < additionalItems.value[index].length; i++) {
|
|
50
|
+
items.splice(index + i, 0, additionalItems.value[index][i]);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
return items;
|
|
57
|
+
});
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
<template>
|
|
61
|
+
<div>
|
|
62
|
+
<div class="flex flex-col">
|
|
63
|
+
<header class="min-w-full flex sticky pin-t z-50">
|
|
64
|
+
<!-- Standard Screen Nav -->
|
|
65
|
+
<div
|
|
66
|
+
class="hidden flex-1 flex-col mx-auto min-w-full"
|
|
67
|
+
:class="combinedNavItems.length < 7 ? 'md:flex' : 'lg:flex'"
|
|
68
|
+
>
|
|
69
|
+
<CommonDynamicHtml
|
|
70
|
+
v-if="htmlHeader.length"
|
|
71
|
+
class="flex-initial mb-0"
|
|
72
|
+
:template="htmlHeader"
|
|
73
|
+
></CommonDynamicHtml>
|
|
74
|
+
|
|
75
|
+
<nav class="flex flex-1 min-h-8 content-center">
|
|
76
|
+
<ul class="list-reset h-full">
|
|
77
|
+
<li v-for="(item, index) in combinedNavItems" :key="index">
|
|
78
|
+
<nuxt-link
|
|
79
|
+
v-if="!isExternalLink(item)"
|
|
80
|
+
:to="formatLink(item)"
|
|
81
|
+
exact
|
|
82
|
+
class="inline-block"
|
|
83
|
+
>
|
|
84
|
+
{{ item.label || item.name }}
|
|
85
|
+
</nuxt-link>
|
|
86
|
+
<a
|
|
87
|
+
v-else
|
|
88
|
+
:href="formatLink(item)"
|
|
89
|
+
:target="isExternalLink(item) ? '_blank' : ''"
|
|
90
|
+
>
|
|
91
|
+
{{ item.label || item.name }}
|
|
92
|
+
</a>
|
|
93
|
+
</li>
|
|
94
|
+
</ul>
|
|
95
|
+
</nav>
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
<!-- Mobile Nav -->
|
|
99
|
+
<div
|
|
100
|
+
class="flex flex-col content-start mx-auto min-w-full"
|
|
101
|
+
:class="combinedNavItems.length >= 7 ? 'lg:hidden' : 'md:hidden'"
|
|
102
|
+
>
|
|
103
|
+
<div class="mobile-nav flex flex-row justify-between">
|
|
104
|
+
<CommonDynamicHtml
|
|
105
|
+
v-if="htmlHeader.length"
|
|
106
|
+
class="flex-1"
|
|
107
|
+
:template="htmlHeader"
|
|
108
|
+
></CommonDynamicHtml>
|
|
109
|
+
|
|
110
|
+
<div class="float-right p-2">
|
|
111
|
+
<button class="flex items-center px-3 py-2" @click="toggle">
|
|
112
|
+
<svg
|
|
113
|
+
class="fill-current h-3 w-3"
|
|
114
|
+
viewBox="0 0 20 20"
|
|
115
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
116
|
+
>
|
|
117
|
+
<title>Menu</title>
|
|
118
|
+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
|
|
119
|
+
</svg>
|
|
120
|
+
</button>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<div class="flex">
|
|
125
|
+
<nav :class="open ? 'flex' : 'hidden'" class="w-full">
|
|
126
|
+
<ul class="flex-col self-center list-reset mx-auto">
|
|
127
|
+
<li v-for="(item, index) in combinedNavItems" :key="index">
|
|
128
|
+
<nuxt-link
|
|
129
|
+
v-if="!isExternalLink(item)"
|
|
130
|
+
:to="formatLink(item)"
|
|
131
|
+
exact
|
|
132
|
+
class="block w-full text-center"
|
|
133
|
+
@click.native="toggle"
|
|
134
|
+
>
|
|
135
|
+
{{ item.label || item.name }}
|
|
136
|
+
</nuxt-link>
|
|
137
|
+
|
|
138
|
+
<a
|
|
139
|
+
v-if="isExternalLink(item)"
|
|
140
|
+
:href="formatLink(item)"
|
|
141
|
+
target="_blank"
|
|
142
|
+
@click.native="toggle"
|
|
143
|
+
>
|
|
144
|
+
{{ item.label || item.name }}
|
|
145
|
+
</a>
|
|
146
|
+
</li>
|
|
147
|
+
</ul>
|
|
148
|
+
</nav>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
</header>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</template>
|