Skip to content

Commit 47c3556

Browse files
author
olgakup
committed
feat: header as web componenent
1 parent 3cef276 commit 47c3556

8 files changed

+81
-53
lines changed

‎index.html

+16-11
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + Vue + TS</title>
8-
</head>
9-
<body>
10-
<div id="app"></div>
11-
<script type="module" src="/src/main.ts"></script>
12-
</body>
13-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Vite + Vue + TS</title>
9+
</head>
10+
11+
<body>
12+
<div id="app"></div>
13+
14+
<script type="module" src="/src/main.ts"></script>
15+
16+
</body>
17+
18+
</html>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@myetherwallet/vue-common-components",
3-
"version": "0.0.3",
3+
"version": "0.0.4",
44
"type": "module",
55
"files": [
66
"dist"

‎src/App.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
3-
<MewHeader :curr-project="PROJECTS.PORTFOLIO" :bg-visible="true" :link-component="RouterLink"
4-
:user-consent="userConsent" @update:consent="onUserConsentChange" :amplitude="{ track }" />
3+
<MewHeader :curr-project="PROJECTS.BLOG" :bg-visible="true" :link-component="RouterLink" :user-consent="userConsent"
4+
@update:consent="onUserConsentChange" :amplitude="{ track }" />
55
<p class="mx-auto max-w-[1400px] py-[140px] bg-info px-5">
66
Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc. Feugiat scelerisque varius morbi enim nunc
77
faucibus. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Elementum sagittis vitae

‎src/libs/layouts/MewFooter.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ const props = defineProps({
195195
},
196196
linkComponent: {
197197
type: Object as PropType<typeof RouterLink>,
198-
required: true,
198+
default: RouterLink
199199
},
200200
userConsent: {
201201
required: true,

‎src/libs/layouts/MewHeader.vue

+26-19
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
2-
<div>
3-
<header v-if="!isOpenMobileMenu" class="fixed w-full z-10 h-[72px] md-header:h-[104px] md-header:py-5">
2+
<div id="myetherwallet-core-header">
3+
<header v-if="!isOpenMobileMenu"
4+
class="fixed w-full z-10 h-[72px] md-header:h-[104px] md-header:py-5 inset-x-0 top-0">
45
<div :class="[
56
'max-w-[1392px] h-full md-header:mx-6 2xl:mx-auto md-header:rounded-[52px] transition-all duration-500',
67
{
@@ -134,7 +135,7 @@
134135
</div>
135136
</header>
136137
<mew-mobile-menu :is-open="isOpenMobileMenu" :amplitude="$amplitude" :link-component="props.linkComponent"
137-
:curr-project="props.currProject" :user-consent="props.userConsent"
138+
:curr-project="props.currProject" :user-consent="props.userConsent" :curr-url="ampUrl"
138139
@update:consent="(val) => emit('update:consent', val)" @close-mobile-menu="isOpenMobileMenu = false" />
139140
</div>
140141
</template>
@@ -149,10 +150,10 @@ import amplitudeConfigs from "@/helpers/amplitudeConfigs";
149150
import MewAppDropdownMenu from "./MewAppDropdownMenu.vue";
150151
import MewMobileMenu from "./MewMobileMenu.vue";
151152
import MewLink from "./MewLink.vue";
152-
import { ref, PropType } from "vue";
153+
import { ref, PropType, computed } from "vue";
153154
import { AmplitudePropType } from "@/libs/types";
154-
import { useRoute } from "vue-router";
155155
import { RouterLink } from "vue-router";
156+
import { useRoute } from "vue-router";
156157
import { PROJECT_LINKS, PROJECTS } from "@/helpers/links";
157158
158159
const emit = defineEmits<{
@@ -171,7 +172,7 @@ const props = defineProps({
171172
},
172173
linkComponent: {
173174
type: Object as PropType<typeof RouterLink>,
174-
required: true,
175+
default: RouterLink
175176
},
176177
userConsent: {
177178
required: true,
@@ -181,6 +182,9 @@ const props = defineProps({
181182
required: true,
182183
type: String as PropType<PROJECTS>
183184
},
185+
currUrl: {
186+
type: String,
187+
}
184188
});
185189
186190
/**
@@ -193,50 +197,53 @@ interface itemType {
193197
const $amplitude = props.amplitude;
194198
const route = useRoute();
195199
200+
const ampUrl = computed<string>(() => {
201+
return props.currUrl ? props.currUrl : route.fullPath || ''
202+
})
196203
const trackLogo = () => {
197-
$amplitude.track(amplitudeConfigs.headerLogo, { route: route.fullPath });
204+
$amplitude.track(amplitudeConfigs.headerLogo, { route: ampUrl.value });
198205
};
199206
const trackSwap = () => {
200-
$amplitude.track(amplitudeConfigs.headerSwap, { route: route.fullPath });
207+
$amplitude.track(amplitudeConfigs.headerSwap, { route: ampUrl.value });
201208
};
202209
const trackBuy = () => {
203-
$amplitude.track(amplitudeConfigs.headerBuy, { route: route.fullPath });
210+
$amplitude.track(amplitudeConfigs.headerBuy, { route: ampUrl.value });
204211
};
205212
const trackNft = () => {
206-
$amplitude.track(amplitudeConfigs.headerNft, { route: route.fullPath });
213+
$amplitude.track(amplitudeConfigs.headerNft, { route: ampUrl.value });
207214
};
208215
const trackDapps = () => {
209-
$amplitude.track(amplitudeConfigs.headerDapps, { route: route.fullPath });
216+
$amplitude.track(amplitudeConfigs.headerDapps, { route: ampUrl.value });
210217
};
211218
const trackMewtopia = () => {
212-
$amplitude.track(amplitudeConfigs.headerMewtopia, { route: route.fullPath });
219+
$amplitude.track(amplitudeConfigs.headerMewtopia, { route: ampUrl.value });
213220
};
214221
const trackHelpCenter = () => {
215222
$amplitude.track(amplitudeConfigs.headerHelpCenter, {
216-
route: route.fullPath,
223+
route: ampUrl.value,
217224
});
218225
};
219226
const trackCustomerSupport = () => {
220227
$amplitude.track(amplitudeConfigs.headerCustomerSupport, {
221-
route: route.fullPath,
228+
route: ampUrl.value,
222229
});
223230
};
224231
const trackAccessWallet = () => {
225232
$amplitude.track(amplitudeConfigs.headerAccessWallet, {
226-
route: route.fullPath,
233+
route: ampUrl.value,
227234
});
228235
};
229236
const trackProduct = (obj: itemType) => {
230237
$amplitude.track(amplitudeConfigs.headerProduct, {
231238
...obj,
232-
route: route.fullPath,
239+
route: ampUrl.value,
233240
});
234241
};
235242
const trackFAQ = () => {
236-
$amplitude.track(amplitudeConfigs.headerFAQ, { route: route.fullPath });
243+
$amplitude.track(amplitudeConfigs.headerFAQ, { route: ampUrl.value });
237244
};
238245
const trackStaking = () => {
239-
$amplitude.track(amplitudeConfigs.headerStaking, { route: route.fullPath });
246+
$amplitude.track(amplitudeConfigs.headerStaking, { route: ampUrl.value });
240247
};
241248
242249
/**
@@ -246,7 +253,7 @@ const isOpenMobileMenu = ref(false);
246253
247254
const openMobileMenu = () => {
248255
isOpenMobileMenu.value = true;
249-
$amplitude.track(amplitudeConfigs.openMobileMenu, { route: route.fullPath });
256+
$amplitude.track(amplitudeConfigs.openMobileMenu, { route: ampUrl.value });
250257
};
251258
</script>
252259
<style>

‎src/libs/layouts/MewMobileMenu.vue

+24-17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<Transition name="expand-app-mobile-menu">
3-
<div v-if="isOpen" class="bg-white h-screen w-screen z-40 fixed overflow-y-auto" role="dialog">
3+
<div v-if="isOpen" class="bg-white h-screen w-screen z-40 fixed overflow-y-auto top-0" role="dialog">
44
<div class="flex items-center justify-end pt-4 pr-4 pb-3">
55
<MewAppBtnIconClose @close="closeMobileMenu" />
66
</div>
@@ -122,7 +122,7 @@
122122
</div>
123123
<!-- Consent Button -->
124124
<MewSwitchDataTracking id="consent-switch-mobile-menu" :user-consent="userConsent"
125-
@update:consent="(val) => emit('update:consent', val)" />
125+
@update:consent="emitConsentUpdate" />
126126
</div>
127127
</div>
128128
</Transition>
@@ -140,10 +140,9 @@ import MewSwitchDataTracking from "./MewSwitchDataTracking.vue";
140140
import MewAppBtnIconClose from "./MewAppBtnIconClose.vue";
141141
import MewLink from "./MewLink.vue";
142142
import { PROJECT_LINKS, PROJECTS } from "@/helpers/links";
143-
import { RouterLink, useRoute } from "vue-router";
143+
import { RouterLink } from "vue-router";
144144
import { AmplitudePropType } from "../types";
145145
146-
const route = useRoute();
147146
interface itemType {
148147
item: string;
149148
}
@@ -176,60 +175,68 @@ const props = defineProps({
176175
required: true,
177176
type: String as PropType<PROJECTS>
178177
},
178+
currUrl: {
179+
type: String,
180+
required: true
181+
}
179182
});
180183
const $amplitude = props.amplitude;
181184
const emit = defineEmits<{
182185
(e: "update:consent", newval: boolean): void;
183186
(e: "closeMobileMenu"): void;
184187
}>();
185188
189+
const emitConsentUpdate = (val: boolean) => {
190+
emit('update:consent', val)
191+
}
192+
186193
const trackHome = () => {
187-
$amplitude.track(amplitudeConfigs.headerHome, { route: route.fullPath });
194+
$amplitude.track(amplitudeConfigs.headerHome, { route: props.currUrl });
188195
emit("closeMobileMenu");
189196
};
190197
const trackSwap = () => {
191-
$amplitude.track(amplitudeConfigs.headerSwap, { route: route.fullPath });
198+
$amplitude.track(amplitudeConfigs.headerSwap, { route: props.currUrl });
192199
};
193200
const trackBuy = () => {
194-
$amplitude.track(amplitudeConfigs.headerBuy, { route: route.fullPath });
201+
$amplitude.track(amplitudeConfigs.headerBuy, { route: props.currUrl });
195202
};
196203
197204
const trackNft = () => {
198-
$amplitude.track(amplitudeConfigs.headerNft, { route: route.fullPath });
205+
$amplitude.track(amplitudeConfigs.headerNft, { route: props.currUrl });
199206
};
200207
const trackDapps = () => {
201-
$amplitude.track(amplitudeConfigs.headerDapps, { route: route.fullPath });
208+
$amplitude.track(amplitudeConfigs.headerDapps, { route: props.currUrl });
202209
};
203210
const trackMewtopia = () => {
204-
$amplitude.track(amplitudeConfigs.headerMewtopia, { route: route.fullPath });
211+
$amplitude.track(amplitudeConfigs.headerMewtopia, { route: props.currUrl });
205212
};
206213
const trackHelpCenter = () => {
207214
$amplitude.track(amplitudeConfigs.headerHelpCenter, {
208-
route: route.fullPath,
215+
route: props.currUrl,
209216
});
210217
};
211218
const trackCustomerSupport = () => {
212219
$amplitude.track(amplitudeConfigs.headerCustomerSupport, {
213-
route: route.fullPath,
220+
route: props.currUrl,
214221
});
215222
};
216223
const trackAccessWallet = () => {
217224
$amplitude.track(amplitudeConfigs.headerAccessWallet, {
218-
route: route.fullPath,
225+
route: props.currUrl,
219226
});
220227
};
221228
const trackProduct = (obj: itemType) => {
222229
$amplitude.track(amplitudeConfigs.headerProduct, {
223230
...obj,
224-
route: route.fullPath,
231+
route: props.currUrl,
225232
});
226233
};
227234
const trackFAQ = () => {
228-
$amplitude.track(amplitudeConfigs.headerFAQ, { route: route.fullPath });
235+
$amplitude.track(amplitudeConfigs.headerFAQ, { route: props.currUrl });
229236
emit("closeMobileMenu");
230237
};
231238
const trackStaking = () => {
232-
$amplitude.track(amplitudeConfigs.headerStaking, { route: route.fullPath });
239+
$amplitude.track(amplitudeConfigs.headerStaking, { route: props.currUrl });
233240
emit("closeMobileMenu");
234241
};
235242
@@ -247,7 +254,7 @@ const productsToggle = () => {
247254
248255
const closeMobileMenu = () => {
249256
emit("closeMobileMenu");
250-
$amplitude.track(amplitudeConfigs.closeMobileMenu, { route: route.fullPath });
257+
$amplitude.track(amplitudeConfigs.closeMobileMenu, { route: props.currUrl });
251258
};
252259
</script>
253260
<style>

‎src/libs/main.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
11
import MewHeader from "./layouts/MewHeader.vue";
22
import MewFooter from "./layouts/MewFooter.vue";
3-
export { MewHeader, MewFooter };
3+
import { defineCustomElement } from 'vue'
4+
5+
const MewHeaderWebComponent = defineCustomElement(MewHeader)
6+
7+
const registerMewHeader = () => {
8+
customElements.define('mew-header-web-component', MewHeaderWebComponent)
9+
}
10+
11+
export { MewHeader, MewFooter, MewHeaderWebComponent, registerMewHeader };
12+

‎src/style.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@
1212
}
1313
.hoverOpacityHasBG {
1414
@apply hover:opacity-75 transition-opacity duration-300 ease-in-out;
15-
}
15+
}

0 commit comments

Comments
 (0)