@apptegy/nuxt-navigation 1.0.0-alpha.0 → 1.0.0

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.
Files changed (71) hide show
  1. package/README.md +70 -5
  2. package/dist/module.cjs +5 -0
  3. package/dist/module.d.mts +2 -3
  4. package/dist/module.d.ts +7 -0
  5. package/dist/module.json +2 -5
  6. package/dist/module.mjs +3 -7
  7. package/dist/runtime/assets/icons/24/Minus.svg +5 -0
  8. package/dist/runtime/assets/icons/24/Plus.svg +5 -0
  9. package/dist/runtime/assets/thrillshare-logo-white.svg +1 -22
  10. package/dist/runtime/components/Nav/Avatar.vue +23 -46
  11. package/dist/runtime/components/Nav/Header.vue +159 -161
  12. package/dist/runtime/components/Nav/HelpArticles.vue +61 -119
  13. package/dist/runtime/components/Nav/ImpersonateInfoPanel.vue +32 -45
  14. package/dist/runtime/components/Nav/OrgSelect.vue +117 -162
  15. package/dist/runtime/components/Nav/Sidebar.vue +109 -216
  16. package/dist/runtime/components/Nav/SidebarItem.vue +17 -44
  17. package/dist/runtime/components/Nav/SidebarSection.vue +38 -88
  18. package/dist/runtime/components/Nav/SubMenu.vue +4 -0
  19. package/dist/runtime/components/Nav/SubMenuItem.vue +7 -6
  20. package/dist/runtime/composables/accessibleActions.d.ts +33 -0
  21. package/dist/runtime/composables/accessibleActions.js +195 -0
  22. package/dist/types.d.mts +1 -3
  23. package/dist/types.d.ts +1 -0
  24. package/package.json +27 -26
  25. package/dist/runtime/api/brand.d.ts +0 -3
  26. package/dist/runtime/api/brand.js +0 -8
  27. package/dist/runtime/assets/checkmark.svg +0 -3
  28. package/dist/runtime/assets/hamburger.svg +0 -3
  29. package/dist/runtime/assets/iconPaths.json +0 -13
  30. package/dist/runtime/assets/icons/24/Metadata.svg +0 -4
  31. package/dist/runtime/assets/impersonation.svg +0 -6
  32. package/dist/runtime/assets/poweredby-icon.svg +0 -3
  33. package/dist/runtime/assets/poweredby.svg +0 -19
  34. package/dist/runtime/components/Nav/Avatar.vue.d.ts +0 -16
  35. package/dist/runtime/components/Nav/Breadcrumb.vue.d.ts +0 -12
  36. package/dist/runtime/components/Nav/Header.vue.d.ts +0 -39
  37. package/dist/runtime/components/Nav/HelpArticles.vue.d.ts +0 -14
  38. package/dist/runtime/components/Nav/Icons/ApptegyLogo.vue +0 -30
  39. package/dist/runtime/components/Nav/Icons/ApptegyLogo.vue.d.ts +0 -14
  40. package/dist/runtime/components/Nav/Icons/Pinned.vue +0 -9
  41. package/dist/runtime/components/Nav/Icons/Pinned.vue.d.ts +0 -2
  42. package/dist/runtime/components/Nav/Icons/SidebarToggle.vue +0 -15
  43. package/dist/runtime/components/Nav/Icons/SidebarToggle.vue.d.ts +0 -2
  44. package/dist/runtime/components/Nav/Icons/ThrillshareLogo.vue +0 -25
  45. package/dist/runtime/components/Nav/Icons/ThrillshareLogo.vue.d.ts +0 -2
  46. package/dist/runtime/components/Nav/Icons/Unpinned.vue +0 -9
  47. package/dist/runtime/components/Nav/Icons/Unpinned.vue.d.ts +0 -2
  48. package/dist/runtime/components/Nav/Icons/UserDropdownMenu.vue +0 -5
  49. package/dist/runtime/components/Nav/Icons/UserDropdownMenu.vue.d.ts +0 -2
  50. package/dist/runtime/components/Nav/ImpersonateInfoPanel.vue.d.ts +0 -12
  51. package/dist/runtime/components/Nav/OrgSelect.vue.d.ts +0 -16
  52. package/dist/runtime/components/Nav/Sidebar.vue.d.ts +0 -53
  53. package/dist/runtime/components/Nav/SidebarItem.vue.d.ts +0 -20
  54. package/dist/runtime/components/Nav/SidebarSection.vue.d.ts +0 -18
  55. package/dist/runtime/components/Nav/SidebarToggle.vue +0 -28
  56. package/dist/runtime/components/Nav/SidebarToggle.vue.d.ts +0 -2
  57. package/dist/runtime/components/Nav/SubMenu.vue.d.ts +0 -12
  58. package/dist/runtime/components/Nav/SubMenuItem.vue.d.ts +0 -22
  59. package/dist/runtime/components/Nav/UserDropdown.vue +0 -178
  60. package/dist/runtime/components/Nav/UserDropdown.vue.d.ts +0 -19
  61. package/dist/runtime/composables/useBranding.d.ts +0 -22
  62. package/dist/runtime/composables/useBranding.js +0 -35
  63. package/dist/runtime/composables/useDropdown.d.ts +0 -19
  64. package/dist/runtime/composables/useDropdown.js +0 -236
  65. package/dist/runtime/composables/useSidebar.d.ts +0 -5
  66. package/dist/runtime/composables/useSidebar.js +0 -13
  67. package/dist/runtime/types/index.d.ts +0 -13
  68. package/dist/runtime/types/index.js +0 -0
  69. package/locale/en.json +0 -20
  70. package/locale/index.js +0 -7
  71. /package/dist/runtime/assets/{icon.svg → thrillshare-icon-white.svg} +0 -0
@@ -1,236 +0,0 @@
1
- import { useDebounceFn } from "@vueuse/core";
2
- import { ref, nextTick } from "#imports";
3
- export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, config = { searchable: false, trackBy: "name" }) {
4
- const active = ref(false);
5
- const searchQuery = ref("");
6
- const highlightedIndex = ref(-1);
7
- async function toggleDropdown($event) {
8
- active.value = !active.value;
9
- if ($event instanceof KeyboardEvent && active.value && $event.key === "ArrowDown") {
10
- await nextTick(() => {
11
- dropdownOptionsRef.value[0].focus();
12
- });
13
- }
14
- }
15
- function openDropdown() {
16
- active.value = true;
17
- }
18
- function closeDropdown() {
19
- active.value = false;
20
- searchQuery.value = "";
21
- highlightedIndex.value = -1;
22
- }
23
- function onClickOutsideHandler() {
24
- if (!active.value) return;
25
- closeDropdown();
26
- }
27
- function keydownActionsOnTrigger(event) {
28
- if (event.ctrlKey || event.metaKey || event.shiftKey) return;
29
- if (config.searchable && active.value && (event.key.length === 1 || event.key === "Backspace")) {
30
- } else if (event.key !== "Tab") {
31
- event.preventDefault();
32
- }
33
- switch (event.key) {
34
- case "Tab":
35
- if (!active.value) return;
36
- closeDropdown();
37
- break;
38
- case "ArrowDown":
39
- if (active.value && event.key === "ArrowDown") {
40
- event.preventDefault();
41
- nextTick(() => {
42
- const targetIndex = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
43
- dropdownOptionsRef.value[targetIndex]?.focus();
44
- openDropdown();
45
- });
46
- }
47
- break;
48
- case "ArrowUp":
49
- event.preventDefault();
50
- openDropdown();
51
- if (config.searchable) {
52
- nextTick(() => {
53
- const targetIndex = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
54
- dropdownOptionsRef.value[targetIndex]?.focus();
55
- });
56
- }
57
- break;
58
- case "ArrowLeft":
59
- case "ArrowRight":
60
- break;
61
- case " ":
62
- if (config.searchable && active.value) {
63
- return;
64
- }
65
- if (active.value) {
66
- closeDropdown();
67
- nextTick(() => {
68
- dropdownTriggerRef.value.focus();
69
- });
70
- } else {
71
- openDropdown();
72
- }
73
- break;
74
- case "Enter":
75
- if (active.value) {
76
- if (highlightedIndex.value >= 0 && highlightedIndex.value < options.length) {
77
- nextTick(() => {
78
- dropdownOptionsRef.value[highlightedIndex.value]?.focus();
79
- });
80
- } else {
81
- closeDropdown();
82
- nextTick(() => {
83
- dropdownTriggerRef.value.focus();
84
- });
85
- }
86
- } else {
87
- searchQuery.value = "";
88
- highlightedIndex.value = -1;
89
- openDropdown();
90
- }
91
- break;
92
- case "Escape":
93
- closeDropdown();
94
- dropdownTriggerRef.value.focus();
95
- break;
96
- case "Home":
97
- event.preventDefault();
98
- openDropdown();
99
- nextTick(() => {
100
- const targetIndex = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
101
- dropdownOptionsRef.value[targetIndex]?.focus();
102
- });
103
- break;
104
- case "End":
105
- openDropdown();
106
- nextTick(() => {
107
- dropdownOptionsRef.value[options.length - 1]?.focus();
108
- });
109
- break;
110
- default:
111
- break;
112
- }
113
- }
114
- function handleKeydown(event, index) {
115
- if (event.ctrlKey || event.metaKey || event.shiftKey) return;
116
- if (event.altKey && event.key === "ArrowUp") {
117
- closeDropdown();
118
- dropdownTriggerRef.value.focus();
119
- return index;
120
- }
121
- switch (event.key) {
122
- case "Enter":
123
- nextTick(() => {
124
- closeDropdown();
125
- dropdownTriggerRef.value.focus();
126
- return index;
127
- });
128
- break;
129
- case " ":
130
- nextTick(() => {
131
- closeDropdown();
132
- dropdownTriggerRef.value.focus();
133
- return index;
134
- });
135
- break;
136
- case "Tab":
137
- nextTick(() => {
138
- closeDropdown();
139
- return index;
140
- });
141
- break;
142
- case "Escape":
143
- nextTick(() => {
144
- closeDropdown();
145
- dropdownTriggerRef.value.focus();
146
- });
147
- break;
148
- case "ArrowDown":
149
- if (index === options.length - 1) break;
150
- nextTick(() => {
151
- dropdownOptionsRef.value[index + 1]?.focus();
152
- });
153
- return index;
154
- case "ArrowUp":
155
- if (index === 0) break;
156
- nextTick(() => {
157
- dropdownOptionsRef.value[index - 1]?.focus();
158
- });
159
- return index;
160
- case "ArrowLeft":
161
- case "ArrowRight":
162
- break;
163
- case "Home":
164
- nextTick(() => {
165
- dropdownOptionsRef.value[0]?.focus();
166
- });
167
- return index;
168
- case "End":
169
- nextTick(() => {
170
- dropdownOptionsRef.value[options.length - 1]?.focus();
171
- });
172
- return index;
173
- case "PageDown": {
174
- const pageDownIndexToJump = index + 10 > options.length ? index + 10 : options.length - 1;
175
- dropdownOptionsRef.value[pageDownIndexToJump]?.focus();
176
- return index;
177
- }
178
- case "PageUp": {
179
- const pageUpIndexToJump = index - 10 < 0 ? index - 10 : 0;
180
- dropdownOptionsRef.value[pageUpIndexToJump]?.focus();
181
- return index;
182
- }
183
- default:
184
- handleDropdownSearch(event);
185
- break;
186
- }
187
- }
188
- const debouncedFocus = useDebounceFn((idx) => {
189
- dropdownOptionsRef.value[idx]?.focus();
190
- }, 500);
191
- function handleDropdownSearch(inputValue) {
192
- if (!config.searchable) return;
193
- if (inputValue.target && "value" in inputValue.target) {
194
- searchQuery.value = inputValue.target.value;
195
- updateHighlightedIndex();
196
- }
197
- }
198
- function updateHighlightedIndex() {
199
- const searchIndex = options.findIndex((option) => {
200
- if (!searchQuery.value) return false;
201
- if (!config.trackBy) {
202
- return typeof option === "string" && option.toLowerCase().includes(searchQuery.value.toLowerCase());
203
- } else if (typeof option === "object" && option !== null && config.trackBy in option) {
204
- const value = option[config.trackBy];
205
- if (typeof value === "string") {
206
- return value.toLowerCase().includes(searchQuery.value.toLowerCase());
207
- } else if (value !== null && value !== void 0) {
208
- return String(value).toLowerCase().includes(searchQuery.value.toLowerCase());
209
- }
210
- }
211
- return false;
212
- });
213
- highlightedIndex.value = searchIndex;
214
- if (searchIndex >= 0 && dropdownOptionsRef.value[searchIndex]) {
215
- nextTick(() => {
216
- dropdownOptionsRef.value[searchIndex]?.scrollIntoView({
217
- block: "nearest",
218
- behavior: "smooth"
219
- });
220
- });
221
- }
222
- }
223
- return {
224
- active,
225
- searchQuery,
226
- highlightedIndex,
227
- toggleDropdown,
228
- openDropdown,
229
- closeDropdown,
230
- onClickOutsideHandler,
231
- keydownActionsOnTrigger,
232
- handleKeydown,
233
- handleDropdownSearch,
234
- debouncedFocus
235
- };
236
- }
@@ -1,5 +0,0 @@
1
- export declare function useSidebar(): {
2
- state: import("vue").Ref<boolean, boolean>;
3
- toggleSidebar: () => void;
4
- sidebarWidth: import("vue").ComputedRef<"264px" | "0px">;
5
- };
@@ -1,13 +0,0 @@
1
- import { useState, ref, computed } from "#imports";
2
- export function useSidebar() {
3
- const state = useState("navigation:sidebar", () => ref(true));
4
- function toggleSidebar() {
5
- state.value = !state.value;
6
- }
7
- const sidebarWidth = computed(() => state.value ? "264px" : "0px");
8
- return {
9
- state,
10
- toggleSidebar,
11
- sidebarWidth
12
- };
13
- }
@@ -1,13 +0,0 @@
1
- export interface IApplication {
2
- id: number;
3
- text: string;
4
- url: string;
5
- img_src: string;
6
- }
7
- export interface IUser {
8
- show: boolean;
9
- email: string;
10
- phone_number: string;
11
- client: string;
12
- admin_email: string;
13
- }
File without changes
package/locale/en.json DELETED
@@ -1,20 +0,0 @@
1
- {
2
- "navigation": {
3
- "logout": "Logout",
4
- "accountSettings": "Account settings",
5
- "helpCenter": "Help center",
6
- "helpArticles": "Help articles",
7
- "impersonating": "Impersonating",
8
- "clientName": "Client name",
9
- "authenticatedAs": "Authenticated as",
10
- "skipToContent": "Skip to content",
11
- "orgDropdown": "Organization options",
12
- "orgPlaceholder": "Start typing to search",
13
- "orgBadge": "Intranet",
14
- "sidebarToggle": "Menu",
15
- "userDropdown": "User settings",
16
- "logoAlt": "Thrillshare - Return Home",
17
- "brandLogoAlt": "Logo",
18
- "website": "School Website"
19
- }
20
- }
package/locale/index.js DELETED
@@ -1,7 +0,0 @@
1
- import navigationLocale from './en.json';
2
-
3
- export default {
4
- dscl: {
5
- ...navigationLocale
6
- }
7
- }