@icvdeveloper/common-module 0.0.123 → 0.0.124
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/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 +259 -259
- package/dist/runtime/components/agenda/AgendaTabbed.vue +305 -305
- package/dist/runtime/components/agenda/components/AgendaListAccordion.vue +67 -67
- package/dist/runtime/components/agenda/components/Calendar.vue +67 -67
- 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 +129 -129
- package/dist/runtime/components/core/Accordion.vue +97 -97
- package/dist/runtime/components/core/CountdownTimer.vue +336 -336
- 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 +157 -157
- 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 +554 -554
- 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/media/ArchivePlayerAndContentContainer.vue +160 -160
- package/dist/runtime/components/media/ArchiveVideoPlayer.vue +186 -186
- package/dist/runtime/components/media/PlayerAndContentContainer.vue +178 -178
- package/dist/runtime/components/media/WebcastVideoPlayer.vue +140 -140
- package/dist/runtime/components/media/components/AgendaPanel.vue +43 -43
- package/dist/runtime/components/media/components/ArchiveMediaContainer.vue +91 -91
- package/dist/runtime/components/media/components/CeCreditNotification.vue +95 -95
- package/dist/runtime/components/media/components/ContentAccordion.vue +63 -63
- package/dist/runtime/components/media/components/ContentArea.vue +158 -158
- package/dist/runtime/components/media/components/ContentTabs.vue +231 -231
- package/dist/runtime/components/media/components/DocumentsPanel.vue +31 -31
- package/dist/runtime/components/media/components/JsonApi.vue +31 -31
- package/dist/runtime/components/media/components/MediaContainer.vue +63 -63
- package/dist/runtime/components/media/components/OverviewPanel.vue +52 -52
- package/dist/runtime/components/media/components/PresentersPanel.vue +52 -52
- package/dist/runtime/components/media/components/SessionReporting.vue +101 -95
- package/dist/runtime/components/media/components/SponsorsPanel.vue +71 -71
- package/dist/runtime/components/media/components/WindowContent.vue +92 -92
- package/dist/runtime/components/media/components/WindowSlide.vue +72 -72
- 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 +140 -140
- package/dist/runtime/composables/useUcc.mjs +0 -14
- package/dist/runtime/store/auth.mjs +0 -3
- package/package.json +1 -1
- package/dist/runtime/components/media/components/SessionReporting.vue.d.ts +0 -35
|
@@ -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>
|