@apptegy/nuxt-navigation 0.1.91 → 0.1.92
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/dist/module.json +1 -1
- package/dist/runtime/components/Nav/HelpArticles.vue +49 -14
- package/dist/runtime/components/Nav/SidebarSection.vue +39 -11
- package/dist/runtime/components/Nav/SidebarSection.vue.d.ts +1 -1
- package/dist/runtime/composables/useSidebar.d.ts +1 -1
- package/package.json +2 -2
package/dist/module.json
CHANGED
|
@@ -1,15 +1,29 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
2
|
+
<div
|
|
3
|
+
class="help-btn-wrapper"
|
|
4
|
+
:class="{ collapsed }"
|
|
5
|
+
>
|
|
3
6
|
<button
|
|
4
7
|
v-if="schoolWebsite"
|
|
5
8
|
:id="'school-website'"
|
|
6
9
|
class="help-articles-btn"
|
|
7
|
-
:class="{
|
|
10
|
+
:class="{ collapsed }"
|
|
8
11
|
:aria-label="$t('navigation.website')"
|
|
9
12
|
@click="goToWebsite"
|
|
10
13
|
>
|
|
11
|
-
<svg
|
|
12
|
-
|
|
14
|
+
<svg
|
|
15
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
16
|
+
width="24"
|
|
17
|
+
height="24"
|
|
18
|
+
viewBox="0 0 24 24"
|
|
19
|
+
fill="none"
|
|
20
|
+
>
|
|
21
|
+
<path
|
|
22
|
+
d="M4 8H6.64922C6.87629 8 7.0966 7.92272 7.27391 7.78087L11.3753 4.49976C11.7405 4.20758 12.2595 4.20758 12.6247 4.49976L16.7261 7.78087C16.9034 7.92272 17.1237 8 17.3508 8H20M4 18H20M5 10V16M19 10V16M9 11V15M12 11V15M15 11V15M12.5 8.5V8.5C12.2239 8.77614 11.7761 8.77614 11.5 8.5V8.5C11.2239 8.22386 11.2239 7.77614 11.5 7.5V7.5C11.7761 7.22386 12.2239 7.22386 12.5 7.5V7.5C12.7761 7.77614 12.7761 8.22386 12.5 8.5Z"
|
|
23
|
+
stroke="currentColor"
|
|
24
|
+
stroke-linecap="round"
|
|
25
|
+
stroke-linejoin="round"
|
|
26
|
+
/>
|
|
13
27
|
</svg>
|
|
14
28
|
</button>
|
|
15
29
|
<button
|
|
@@ -24,8 +38,19 @@
|
|
|
24
38
|
:aria-label="isDropdown ? $t('navigation.helpCenter') : $t('navigation.helpArticles')"
|
|
25
39
|
@click="expandDropdown"
|
|
26
40
|
>
|
|
27
|
-
<svg
|
|
28
|
-
|
|
41
|
+
<svg
|
|
42
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
43
|
+
width="24"
|
|
44
|
+
height="24"
|
|
45
|
+
viewBox="0 0 24 24"
|
|
46
|
+
fill="none"
|
|
47
|
+
>
|
|
48
|
+
<path
|
|
49
|
+
d="M10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10C14 10.7571 13.5793 11.4159 12.959 11.7555C12.4745 12.0207 12 12.4477 12 13V14M12 16V17M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z"
|
|
50
|
+
stroke="currentColor"
|
|
51
|
+
stroke-linecap="round"
|
|
52
|
+
stroke-linejoin="round"
|
|
53
|
+
/>
|
|
29
54
|
</svg>
|
|
30
55
|
</button>
|
|
31
56
|
<button
|
|
@@ -35,9 +60,23 @@
|
|
|
35
60
|
:aria-label="$t('navigation.accountSettings')"
|
|
36
61
|
@click="goToSettings"
|
|
37
62
|
>
|
|
38
|
-
<svg
|
|
39
|
-
|
|
40
|
-
|
|
63
|
+
<svg
|
|
64
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
65
|
+
width="24"
|
|
66
|
+
height="24"
|
|
67
|
+
viewBox="0 0 24 24"
|
|
68
|
+
fill="none"
|
|
69
|
+
>
|
|
70
|
+
<path
|
|
71
|
+
d="M17 18.3153L18.3487 16.958C18.5827 16.7213 18.6067 16.3487 18.4047 16.0833L17.4807 14.8713C17.6547 14.5393 17.798 14.1933 17.9087 13.8367L19.42 13.6387C19.752 13.5953 20 13.3127 20 12.978V11.022C20 10.6873 19.752 10.404 19.42 10.3613L17.9 10.162C17.784 9.796 17.6347 9.44133 17.4533 9.10267L18.3773 7.874C18.578 7.608 18.5513 7.23533 18.3153 7.00067L16.958 5.652C16.72 5.41667 16.3473 5.39333 16.084 5.59333L14.8473 6.536C14.5187 6.36533 14.178 6.22467 13.8267 6.116L13.6393 4.586C13.5987 4.25133 13.3153 4 12.978 4H11.022C10.6867 4 10.404 4.24867 10.3613 4.58067L10.1613 6.11733C9.79533 6.23067 9.442 6.37733 9.10333 6.55667L7.87733 5.624C7.612 5.422 7.23667 5.448 7.00067 5.68533L5.65267 7.042C5.416 7.28133 5.39333 7.658 5.6 7.92333L6.53267 9.11533C6.35133 9.45333 6.204 9.80533 6.08933 10.1693L4.58267 10.3607C4.24933 10.4033 4 10.686 4 11.022V12.978C4 13.3147 4.25067 13.5973 4.584 13.6393L6.07867 13.8253C6.192 14.1933 6.34067 14.55 6.52267 14.8933L5.61667 16.134C5.42267 16.4 5.45133 16.768 5.68533 17.0007L7.04333 18.348C7.27933 18.582 7.65 18.6073 7.91467 18.4073L9.13533 17.486C9.466 17.6593 9.81133 17.8007 10.166 17.9107L10.3607 19.4187C10.4033 19.7513 10.6867 20 11.022 20H12.978C13.312 20 13.5947 19.7527 13.6387 19.4213L13.84 17.9053C14.2027 17.7933 14.5533 17.6473 14.89 17.4687L16.1313 18.382C16.3987 18.5773 16.7667 18.5493 17 18.3153Z"
|
|
72
|
+
stroke="currentColor"
|
|
73
|
+
/>
|
|
74
|
+
<circle
|
|
75
|
+
cx="12"
|
|
76
|
+
cy="12"
|
|
77
|
+
r="3"
|
|
78
|
+
stroke="currentColor"
|
|
79
|
+
/>
|
|
41
80
|
</svg>
|
|
42
81
|
</button>
|
|
43
82
|
</div>
|
|
@@ -46,7 +85,6 @@
|
|
|
46
85
|
<script setup>
|
|
47
86
|
import { useSidebar, navigateTo, useAuth } from "#imports";
|
|
48
87
|
import { ref, computed, onMounted } from "vue";
|
|
49
|
-
;
|
|
50
88
|
const { userProfile } = useAuth();
|
|
51
89
|
const props = defineProps({
|
|
52
90
|
helpArticleOptions: { type: Array, required: true, default: () => [] },
|
|
@@ -75,15 +113,12 @@ function expandDropdown() {
|
|
|
75
113
|
if (!isDropdown.value) return;
|
|
76
114
|
expanded.value = !expanded.value;
|
|
77
115
|
}
|
|
78
|
-
;
|
|
79
116
|
async function goToSettings() {
|
|
80
117
|
await navigateTo(`${props.settingsRoute}`, { external: true });
|
|
81
118
|
}
|
|
82
|
-
;
|
|
83
119
|
async function goToWebsite() {
|
|
84
120
|
await navigateTo(`${props.schoolWebsite}`, { external: true });
|
|
85
121
|
}
|
|
86
|
-
;
|
|
87
122
|
</script>
|
|
88
123
|
|
|
89
124
|
<style scoped>
|
|
@@ -165,7 +200,7 @@ async function goToWebsite() {
|
|
|
165
200
|
}
|
|
166
201
|
.help-btn-wrapper svg {
|
|
167
202
|
border-radius: 4px;
|
|
168
|
-
color: var(--nav-icon-color, #
|
|
203
|
+
color: var(--nav-icon-color, #662e80);
|
|
169
204
|
}
|
|
170
205
|
.help-btn-wrapper span {
|
|
171
206
|
color: var(--nav-text-color, var(--primary-white));
|
|
@@ -1,36 +1,64 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
|
|
2
|
+
<div
|
|
3
|
+
class="a-nav-section"
|
|
4
|
+
:class="{ active }"
|
|
5
|
+
>
|
|
6
|
+
<NuxtLink
|
|
7
|
+
v-if="!collapsed"
|
|
8
|
+
class="a-nav-section--link"
|
|
9
|
+
:to="active ? '' : application.url"
|
|
10
|
+
:aria-label="appText"
|
|
11
|
+
>
|
|
4
12
|
<span v-if="expanded">{{ appText }}</span>
|
|
5
|
-
<a-icon
|
|
6
|
-
|
|
13
|
+
<a-icon
|
|
14
|
+
v-if="expanded && active"
|
|
15
|
+
:class="['caret-icon', { collapse: !isOpen }]"
|
|
16
|
+
icon="16:carret-up"
|
|
17
|
+
@click="isOpen = !isOpen"
|
|
18
|
+
/>
|
|
19
|
+
<a-icon
|
|
20
|
+
v-if="expanded && !active"
|
|
21
|
+
:class="['caret-icon', { collapse: !isOpen }]"
|
|
22
|
+
icon="16:carret-down"
|
|
23
|
+
@click="isOpen = !isOpen"
|
|
24
|
+
/>
|
|
7
25
|
</NuxtLink>
|
|
8
|
-
<div :class="['a-nav-section--content', {
|
|
26
|
+
<div :class="['a-nav-section--content', { collapse: !isOpen }]">
|
|
9
27
|
<slot />
|
|
10
28
|
</div>
|
|
11
29
|
</div>
|
|
12
30
|
</template>
|
|
13
31
|
|
|
14
32
|
<script setup>
|
|
15
|
-
import { useSidebar, computed, ref } from "#imports";
|
|
16
|
-
|
|
33
|
+
import { useSidebar, computed, ref, useNuxtApp } from "#imports";
|
|
34
|
+
const ENGAGE_APP_ID = 12;
|
|
17
35
|
const props = defineProps({
|
|
18
36
|
application: { type: Object, required: true },
|
|
19
37
|
active: { type: Boolean, required: true },
|
|
20
38
|
collapsed: { type: Boolean, required: true }
|
|
21
39
|
});
|
|
22
|
-
const
|
|
40
|
+
const { $ld } = useNuxtApp();
|
|
41
|
+
const isEngageRenameEnabled = computed(() => {
|
|
42
|
+
return Boolean($ld?.flags?.engageToNewslettersNameChange);
|
|
43
|
+
});
|
|
44
|
+
const appText = computed(() => {
|
|
45
|
+
const { id, text } = props.application || {};
|
|
46
|
+
if (id === ENGAGE_APP_ID && isEngageRenameEnabled.value) {
|
|
47
|
+
return "Newsletters";
|
|
48
|
+
}
|
|
49
|
+
return text.replace("_", " ");
|
|
50
|
+
});
|
|
23
51
|
const { state: expanded } = useSidebar();
|
|
24
52
|
const isOpen = ref(true);
|
|
25
53
|
</script>
|
|
26
54
|
|
|
27
55
|
<style scoped>
|
|
28
56
|
.a-nav-section {
|
|
29
|
-
box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, #
|
|
57
|
+
box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, #dfdfdf);
|
|
30
58
|
min-height: 48px;
|
|
31
59
|
}
|
|
32
60
|
.a-nav-section.active {
|
|
33
|
-
box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, #
|
|
61
|
+
box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, #dfdfdf);
|
|
34
62
|
}
|
|
35
63
|
.a-nav-section--content {
|
|
36
64
|
display: flex;
|
|
@@ -56,7 +84,7 @@ const isOpen = ref(true);
|
|
|
56
84
|
user-select: none;
|
|
57
85
|
}
|
|
58
86
|
.a-nav-section--link svg:first-child {
|
|
59
|
-
background: var(--nav-icon-background, #
|
|
87
|
+
background: var(--nav-icon-background, #dfdfdf);
|
|
60
88
|
color: var(--nav-icon-color, var(--eggplant-30));
|
|
61
89
|
border-radius: 4px;
|
|
62
90
|
min-width: 32px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apptegy/nuxt-navigation",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.92",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"vue": "^3.5.13",
|
|
47
47
|
"vue-tsc": "^3.0.3"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "d3176046978ece23e48bb836a7ea1ce4c453b2f8"
|
|
50
50
|
}
|