am-ui-package 3.1.0 → 3.1.1
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/package.json
CHANGED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from "vue";
|
|
3
|
+
import FilterButton from "../Buttons/FilterButton.vue";
|
|
4
|
+
import FiltersSelected from "../PickLists/FiltersSelect.vue";
|
|
5
|
+
import { getTranslation } from "@/shared/getTranslation";
|
|
6
|
+
const props = defineProps({
|
|
7
|
+
filters: Array,
|
|
8
|
+
filtersSelected: Array,
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
const emit = defineEmits(["handlerFiltersSelect", "deleteFilter"]);
|
|
12
|
+
const filtersElement = ref(null);
|
|
13
|
+
|
|
14
|
+
defineExpose({
|
|
15
|
+
filtersElement,
|
|
16
|
+
});
|
|
17
|
+
</script>
|
|
18
|
+
<template>
|
|
19
|
+
<section class="text-white mt-[30px]">
|
|
20
|
+
<div>
|
|
21
|
+
<p
|
|
22
|
+
class="text-xs md:text-sm font-GarnettSemibold flex items-center gap-1 select-none text-white text-opacity-75"
|
|
23
|
+
>
|
|
24
|
+
{{ getTranslation("search.filters") }}
|
|
25
|
+
<span
|
|
26
|
+
class="font-GarnettSemibold text-white text-opacity-100"
|
|
27
|
+
>{{ filtersSelected.length }}</span
|
|
28
|
+
>
|
|
29
|
+
</p>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="flex justify-between relative pt-5">
|
|
32
|
+
<div
|
|
33
|
+
class="flex flex-col md:flex-row gap-[14px] md:gap-5 flex-wrap"
|
|
34
|
+
>
|
|
35
|
+
<FilterButton
|
|
36
|
+
v-for="filterSelected in filtersSelected"
|
|
37
|
+
:name="filterSelected.label"
|
|
38
|
+
@deleteFilter="() => $emit('deleteFilter', filterSelected)"
|
|
39
|
+
/>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<FiltersSelected
|
|
43
|
+
ref="filtersElement"
|
|
44
|
+
@handleSelect="
|
|
45
|
+
(filter) => $emit('handlerFiltersSelect', filter)
|
|
46
|
+
"
|
|
47
|
+
:filters="filters"
|
|
48
|
+
:filtersSelected="filtersSelected"
|
|
49
|
+
/>
|
|
50
|
+
</div>
|
|
51
|
+
</section>
|
|
52
|
+
</template>
|
|
@@ -1,443 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { computed, ref, onMounted } from 'vue';
|
|
3
|
-
import NeedHelpModal from './Modals/NeedHelpModal.vue';
|
|
4
|
-
// import { useNavbar } from '@/composables/useNavbar';
|
|
5
|
-
// import { useUserPreferencesStore } from '@/store/userPreferencesStore';
|
|
6
|
-
|
|
7
|
-
const toggleNeedHelp = () => {}
|
|
8
|
-
const isNeedHelpModalOpen = true
|
|
9
|
-
|
|
10
|
-
// const props = defineProps<{ jsonData: any }>();
|
|
11
|
-
|
|
12
|
-
// const navbar = useNavbar(props.jsonData);
|
|
13
|
-
|
|
14
|
-
// // store (si necesitas acceso directo en template)
|
|
15
|
-
// const prefs = useUserPreferencesStore();
|
|
16
|
-
|
|
17
|
-
// const {
|
|
18
|
-
// isMobileMenuOpen,
|
|
19
|
-
// showSelectMobile,
|
|
20
|
-
// isModalOpen,
|
|
21
|
-
// isNeedHelpModalOpen,
|
|
22
|
-
|
|
23
|
-
// // estado derivado del store
|
|
24
|
-
// userLocation,
|
|
25
|
-
// suggestions,
|
|
26
|
-
// flag,
|
|
27
|
-
// lang,
|
|
28
|
-
// locations,
|
|
29
|
-
|
|
30
|
-
// // sesión
|
|
31
|
-
// session,
|
|
32
|
-
// username,
|
|
33
|
-
// nameInitials,
|
|
34
|
-
// isAdmin,
|
|
35
|
-
|
|
36
|
-
// // acciones
|
|
37
|
-
// toggleMobileMenu,
|
|
38
|
-
// toggleNeedHelp,
|
|
39
|
-
// handleCloseMenu,
|
|
40
|
-
// handleLocationSelect,
|
|
41
|
-
// trackAndNavigate,
|
|
42
|
-
// logoutHandler,
|
|
43
|
-
// closeLocationModal,
|
|
44
|
-
|
|
45
|
-
// // helpers
|
|
46
|
-
// getTranslation,
|
|
47
|
-
// status,
|
|
48
|
-
// } = navbar;
|
|
49
|
-
|
|
50
|
-
// import { useErrorReport } from "@/store/errorReportStore";
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
// import { useEventTracker } from "../composable/useEventTracker.ts";
|
|
54
|
-
// const { track } = useEventTracker()
|
|
55
|
-
|
|
56
|
-
const trads = {
|
|
57
|
-
wrongData: "Información incorrecta",
|
|
58
|
-
tryAgain: "Intenta de nuevo",
|
|
59
|
-
thanksReport:"Gracias",
|
|
60
|
-
accept: "Aceptar",
|
|
61
|
-
feedback: "Fue útil",
|
|
62
|
-
download: "descargar",
|
|
63
|
-
report: "Reportar",
|
|
64
|
-
create: "Crear",
|
|
65
|
-
needHelp: "¿Necesitas ayuda?",
|
|
66
|
-
form: "Fromulario",
|
|
67
|
-
thanks: "Gracias"
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
// const ErrorReportStore = useErrorReport();
|
|
71
|
-
const accordionReset = ref(null);
|
|
72
|
-
const iconValue = ref("grid");
|
|
73
|
-
const step = ref(1);
|
|
74
|
-
const isLoading = ref(true);
|
|
75
|
-
// const page = usePage();
|
|
76
|
-
// const { currentLang } = page.props;
|
|
77
|
-
const lang = "es";
|
|
78
|
-
|
|
79
|
-
// const steps = [
|
|
80
|
-
// {
|
|
81
|
-
// headerTitle: getTranslation("navbar.common.need-help"),
|
|
82
|
-
// step: 1,
|
|
83
|
-
// },
|
|
84
|
-
// {
|
|
85
|
-
// headerTitle: getTranslation("navbar.common.form"),
|
|
86
|
-
// step: 2,
|
|
87
|
-
// },
|
|
88
|
-
// {
|
|
89
|
-
// headerTitle: getTranslation("navbar.common.thanks-report"),
|
|
90
|
-
// step: 3,
|
|
91
|
-
// },
|
|
92
|
-
// ];
|
|
93
|
-
|
|
94
|
-
const documentation = ref();
|
|
95
|
-
|
|
96
|
-
const changeIcon = (value) => {
|
|
97
|
-
iconValue.value = value;
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
const handleBack = () => {
|
|
101
|
-
accordionReset.value = -1;
|
|
102
|
-
iconValue.value = "grid";
|
|
103
|
-
setTimeout(() => {
|
|
104
|
-
accordionReset.value = null;
|
|
105
|
-
}, 0);
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
const handleClose = () => {
|
|
109
|
-
emit("closeModal");
|
|
110
|
-
step.value = 1;
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
const handleStep = (value) => {
|
|
114
|
-
step.value = value;
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
const getDocumentation = () => {
|
|
118
|
-
const questions = [];
|
|
119
|
-
const answers = [];
|
|
120
|
-
let manual = "";
|
|
121
|
-
let manualLink = "";
|
|
122
|
-
// const routeUrl = route("getReport", {
|
|
123
|
-
// componentName: props.tool,
|
|
124
|
-
// lang: lang,
|
|
125
|
-
// });
|
|
126
|
-
const routeUrl = "getReport";
|
|
127
|
-
// axios.get(routeUrl).then((res) => {
|
|
128
|
-
// res.data.articles.records.forEach((element) => {
|
|
129
|
-
// if (
|
|
130
|
-
// element.Knowledge_Article__r.DocumentType__c ===
|
|
131
|
-
// "Pregunta / respuesta" ||
|
|
132
|
-
// element.Knowledge_Article__r.DocumentType__c === null
|
|
133
|
-
// ) {
|
|
134
|
-
// questions.push(
|
|
135
|
-
// element.Knowledge_Article__r.Short_content__c
|
|
136
|
-
// );
|
|
137
|
-
// answers.push(element.Knowledge_Article__r.Article__c);
|
|
138
|
-
// } else if (
|
|
139
|
-
// element.Knowledge_Article__r.DocumentType__c ===
|
|
140
|
-
// "Manual técnico"
|
|
141
|
-
// ) {
|
|
142
|
-
// manual = element.Knowledge_Article__r.Short_content__c;
|
|
143
|
-
// manualLink =
|
|
144
|
-
// lang === "es"
|
|
145
|
-
// ? element.Knowledge_Article__r
|
|
146
|
-
// .Url_of_all_files__c
|
|
147
|
-
// : element.Knowledge_Article__r.Url_Slider__c;
|
|
148
|
-
// }
|
|
149
|
-
// });
|
|
150
|
-
// documentation.value = {
|
|
151
|
-
// questions: questions,
|
|
152
|
-
// answers: answers,
|
|
153
|
-
// manual: manual,
|
|
154
|
-
// manualLink: manualLink,
|
|
155
|
-
// };
|
|
156
|
-
// isLoading.value = false;
|
|
157
|
-
// });
|
|
158
|
-
};
|
|
159
|
-
|
|
160
|
-
onMounted(() => {
|
|
161
|
-
getDocumentation();
|
|
162
|
-
});
|
|
163
|
-
|
|
164
|
-
</script>
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<template>
|
|
168
|
-
<header
|
|
169
|
-
class="w-full bg-amBluePremium h-[60px] flex items-center pl-4 md:px-6 justify-between md:justify-normal"
|
|
170
|
-
>
|
|
171
|
-
<NeedHelpModal
|
|
172
|
-
headTitle="Necesitas ayuda"
|
|
173
|
-
:isOpen="isNeedHelpModalOpen"
|
|
174
|
-
@closeModal="toggleNeedHelp"
|
|
175
|
-
tool="Login"
|
|
176
|
-
:manual="null"
|
|
177
|
-
:trads="trads"
|
|
178
|
-
></NeedHelpModal>
|
|
179
|
-
<div v-if="userLocation">
|
|
180
|
-
<LocationModal
|
|
181
|
-
:isOpen="isModalOpen"
|
|
182
|
-
:onClose="closeLocationModal"
|
|
183
|
-
:locationsData="locations"
|
|
184
|
-
@locationEvent="handleLocationSelect"
|
|
185
|
-
:userLocation="userLocation"
|
|
186
|
-
:suggestions="suggestions"
|
|
187
|
-
/>
|
|
188
|
-
</div>
|
|
189
|
-
<div class="flex items-center pr-4">
|
|
190
|
-
|
|
191
|
-
<a href="/" :locale="language" class="hidden xl:flex">
|
|
192
|
-
<img
|
|
193
|
-
src="/new_aeromexico_business.svg"
|
|
194
|
-
alt="Aeromexico bussines"
|
|
195
|
-
width="150"
|
|
196
|
-
height="17"
|
|
197
|
-
class="object-center min-w-[150px]"
|
|
198
|
-
/>
|
|
199
|
-
</a>
|
|
200
|
-
|
|
201
|
-
<a
|
|
202
|
-
href="/"
|
|
203
|
-
:locale="language"
|
|
204
|
-
data-cy="am-logo"
|
|
205
|
-
class="xl:hidden absolute left-5"
|
|
206
|
-
>
|
|
207
|
-
<img
|
|
208
|
-
src="/new_caballero_aguila_alone.svg"
|
|
209
|
-
alt="Aeromexico bussines"
|
|
210
|
-
width="30"
|
|
211
|
-
height="23"
|
|
212
|
-
/>
|
|
213
|
-
</a>
|
|
214
|
-
</div>
|
|
215
|
-
<div
|
|
216
|
-
class="hidden pl-[10px] xl:pl-0 md:flex w-full mr-3 text-white items-center"
|
|
217
|
-
>
|
|
218
|
-
<div
|
|
219
|
-
v-if="status != 404"
|
|
220
|
-
v-for="value in translatedNavigationLinks"
|
|
221
|
-
class="cursor-pointer text-center no-underline lg:mx-2"
|
|
222
|
-
>
|
|
223
|
-
<a @click="trackEvent(value)">
|
|
224
|
-
<h2
|
|
225
|
-
:class="
|
|
226
|
-
currentView === value.link
|
|
227
|
-
? ' bg-amRoseMexican'
|
|
228
|
-
: ''
|
|
229
|
-
"
|
|
230
|
-
class="no-underline text-xs py-2 px-3 rounded text-white font-bold hover:text-white hover:no-underline hover:bg-searchBorder"
|
|
231
|
-
>
|
|
232
|
-
{{ value.translatedLabel }}
|
|
233
|
-
</h2>
|
|
234
|
-
</a>
|
|
235
|
-
</div>
|
|
236
|
-
<div
|
|
237
|
-
v-if="status === 404"
|
|
238
|
-
v-for="value in translatedNavigationLinks"
|
|
239
|
-
class="cursor-pointer text-center no-underline lg:mx-2"
|
|
240
|
-
>
|
|
241
|
-
<a @click="trackEvent(value)">
|
|
242
|
-
<h2
|
|
243
|
-
:class="
|
|
244
|
-
currentView === value.link
|
|
245
|
-
? ' bg-amRoseMexican'
|
|
246
|
-
: ''
|
|
247
|
-
"
|
|
248
|
-
class="no-underline text-xs xl:text-sm py-2 px-3 rounded text-white font-bold hover:text-white hover:no-underline hover:bg-searchBorder"
|
|
249
|
-
>
|
|
250
|
-
{{ value.translatedLabel }}
|
|
251
|
-
</h2>
|
|
252
|
-
</a>
|
|
253
|
-
</div>
|
|
254
|
-
</div>
|
|
255
|
-
<div class="flex flex-row items-center z-20 h-full">
|
|
256
|
-
<div>
|
|
257
|
-
<SearchTrigger :lang="language" :data="searchData" />
|
|
258
|
-
</div>
|
|
259
|
-
|
|
260
|
-
<div class="border-r ml-4 mr-1 h-full border-separator"></div>
|
|
261
|
-
|
|
262
|
-
<!-- SelectLocationMenu -->
|
|
263
|
-
|
|
264
|
-
<div
|
|
265
|
-
v-if="userLocation"
|
|
266
|
-
class="hidden md:flex text-white text-[14px] space-x-2 py-[7px] px-[10px] items-center w-[90px] cursor-pointer select-none rounded hover:bg-[#FFFFFF26]"
|
|
267
|
-
@click="handleSelectLocation"
|
|
268
|
-
>
|
|
269
|
-
<img
|
|
270
|
-
:src="flag1"
|
|
271
|
-
alt=""
|
|
272
|
-
width="16"
|
|
273
|
-
height="16"
|
|
274
|
-
class="min-w-[16px] min-h-[16px]"
|
|
275
|
-
/>
|
|
276
|
-
<div
|
|
277
|
-
class="text-xs cursor-pointer font-semibold uppercase tracking-wider"
|
|
278
|
-
>
|
|
279
|
-
{{ lang }}
|
|
280
|
-
</div>
|
|
281
|
-
|
|
282
|
-
<img
|
|
283
|
-
class=""
|
|
284
|
-
:src="`/images/newIconography/${
|
|
285
|
-
isModalOpen ? 'Vectorarrow' : 'caret-down'
|
|
286
|
-
}.svg`"
|
|
287
|
-
alt="search"
|
|
288
|
-
width="12"
|
|
289
|
-
height="12"
|
|
290
|
-
/>
|
|
291
|
-
</div>
|
|
292
|
-
|
|
293
|
-
<div
|
|
294
|
-
v-if="!session"
|
|
295
|
-
class="flex md:w-11 xl:w-auto items-center md:flex-row flex-row"
|
|
296
|
-
>
|
|
297
|
-
<LoginTrigger
|
|
298
|
-
:lang="language"
|
|
299
|
-
:data="loginData"
|
|
300
|
-
:isMobileMenuOpen="isMobileMenuOpen"
|
|
301
|
-
:closeMenu="handleCloseMenu"
|
|
302
|
-
@openingToggle="openingToggle"
|
|
303
|
-
/>
|
|
304
|
-
</div>
|
|
305
|
-
|
|
306
|
-
<div v-else class="flex">
|
|
307
|
-
<div
|
|
308
|
-
class="px-2 flex flex-row-reverse md:flex-row items-center"
|
|
309
|
-
>
|
|
310
|
-
<DropdownMenuRoot>
|
|
311
|
-
<DropdownMenuTrigger asChild>
|
|
312
|
-
<button
|
|
313
|
-
data-cy="logged-session-button"
|
|
314
|
-
class="text-white text-[14px] uppercase rounded-full bg-green-600 pointer flex justify-center items-center w-10 h-10 shrink-0"
|
|
315
|
-
>
|
|
316
|
-
{{ nameInitials }}
|
|
317
|
-
</button>
|
|
318
|
-
</DropdownMenuTrigger>
|
|
319
|
-
|
|
320
|
-
<DropdownMenuContent
|
|
321
|
-
class="bg-white w-52 text-amBrandBlue"
|
|
322
|
-
>
|
|
323
|
-
<template
|
|
324
|
-
v-if="isAdmin === true || isAdmin === '1'"
|
|
325
|
-
>
|
|
326
|
-
<DropdownMenuLabel
|
|
327
|
-
class="text-amLightGray p-4 uppercase"
|
|
328
|
-
>
|
|
329
|
-
{{ navbarTranslations.yourProfile }}
|
|
330
|
-
</DropdownMenuLabel>
|
|
331
|
-
<a
|
|
332
|
-
@click="
|
|
333
|
-
trackEvent({
|
|
334
|
-
link: route('users'),
|
|
335
|
-
label: getTranslation(
|
|
336
|
-
'navbar.admin'
|
|
337
|
-
),
|
|
338
|
-
})
|
|
339
|
-
"
|
|
340
|
-
class="py-4 space-x-4 flex items-center border-t p-4 flex-row cursor-pointer"
|
|
341
|
-
>
|
|
342
|
-
<div>
|
|
343
|
-
<img
|
|
344
|
-
:src="`/images/man_woman.svg`"
|
|
345
|
-
alt="flag"
|
|
346
|
-
width="32"
|
|
347
|
-
height="32"
|
|
348
|
-
/>
|
|
349
|
-
</div>
|
|
350
|
-
|
|
351
|
-
<span class="">{{
|
|
352
|
-
navbarTranslations.admin
|
|
353
|
-
}}</span>
|
|
354
|
-
</a>
|
|
355
|
-
</template>
|
|
356
|
-
|
|
357
|
-
<div
|
|
358
|
-
data-cy="logout-trigger"
|
|
359
|
-
@click="
|
|
360
|
-
() => {
|
|
361
|
-
this.$inertia.visit('/loaderpage');
|
|
362
|
-
}
|
|
363
|
-
"
|
|
364
|
-
class="py-4 space-x-4 flex items-center border-t p-4 flex-row cursor-pointer"
|
|
365
|
-
>
|
|
366
|
-
<div>
|
|
367
|
-
<img
|
|
368
|
-
:src="`/images/logout.svg`"
|
|
369
|
-
alt="flag"
|
|
370
|
-
width="32"
|
|
371
|
-
height="32"
|
|
372
|
-
/>
|
|
373
|
-
</div>
|
|
374
|
-
<span>{{ navbarTranslations.logOut }}</span>
|
|
375
|
-
</div>
|
|
376
|
-
|
|
377
|
-
<DropdownMenuArrow
|
|
378
|
-
width="28"
|
|
379
|
-
height="16"
|
|
380
|
-
class="fill-current"
|
|
381
|
-
/>
|
|
382
|
-
</DropdownMenuContent>
|
|
383
|
-
</DropdownMenuRoot>
|
|
384
|
-
|
|
385
|
-
<h2
|
|
386
|
-
class="md:hidden lg:flex no-underline py-1 px-2 rounded-full text-white text-sm 2xl:text-nowrap"
|
|
387
|
-
>
|
|
388
|
-
{{ fullGreeting }}
|
|
389
|
-
</h2>
|
|
390
|
-
</div>
|
|
391
|
-
</div>
|
|
392
|
-
|
|
393
|
-
<div
|
|
394
|
-
class="flex items-center md:flex-row flex-row-reverse cursor-pointer"
|
|
395
|
-
@click="handleSideBar"
|
|
396
|
-
>
|
|
397
|
-
<div
|
|
398
|
-
class="flex w-[60px] h-[60px] justify-center md:hidden items-center select-none"
|
|
399
|
-
:class="{
|
|
400
|
-
'bg-amMediumBlue': isMobileMenuOpen,
|
|
401
|
-
'bg-amBluePremium': !isMobileMenuOpen,
|
|
402
|
-
}"
|
|
403
|
-
>
|
|
404
|
-
<img
|
|
405
|
-
:src="`/images/${
|
|
406
|
-
isMobileMenuOpen ? 'close-white' : 'hamburger'
|
|
407
|
-
}.svg`"
|
|
408
|
-
alt="search"
|
|
409
|
-
width="28"
|
|
410
|
-
height="28"
|
|
411
|
-
/>
|
|
412
|
-
</div>
|
|
413
|
-
</div>
|
|
414
|
-
|
|
415
|
-
<div
|
|
416
|
-
:style="{
|
|
417
|
-
transform: isMobileMenuOpen
|
|
418
|
-
? 'translateX(0)'
|
|
419
|
-
: 'translateX(130%)',
|
|
420
|
-
}"
|
|
421
|
-
class="fixed top-[60px] right-0 h-full bg-[#fff] text-white transition-transform duration-700 z-50 md:hidden"
|
|
422
|
-
style="width: 100%"
|
|
423
|
-
>
|
|
424
|
-
<MainMobileMenu
|
|
425
|
-
v-if="!showSelectMobile"
|
|
426
|
-
@showSelectMobileMenu="handleMobileLocation"
|
|
427
|
-
:links="translatedNavigationLinks"
|
|
428
|
-
:currentView="currentView"
|
|
429
|
-
/>
|
|
430
|
-
|
|
431
|
-
<LocationMobileMenu
|
|
432
|
-
v-if="showSelectMobile"
|
|
433
|
-
@showSelectMobileMenu="handleMobileLocation"
|
|
434
|
-
:locationsData="newLocationsData"
|
|
435
|
-
:suggestions="suggestions"
|
|
436
|
-
:userLocation="userLocation"
|
|
437
|
-
@locationEvent="handleLocation"
|
|
438
|
-
:onClose="handleSideBar"
|
|
439
|
-
/>
|
|
440
|
-
</div>
|
|
441
|
-
</div>
|
|
442
|
-
</header>
|
|
443
|
-
</template>
|
|
File without changes
|