Skip to content

Commit f08fde0

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updating docs and playground
1 parent ed994ac commit f08fde0

File tree

8 files changed

+262
-16
lines changed

8 files changed

+262
-16
lines changed

‎public/egg-cracked.png‎

41.2 KB
Loading

‎public/egg.png‎

16.1 KB
Loading

‎src/assets/egg-cracked.png‎

41.2 KB
Loading

‎src/assets/egg.png‎

16.1 KB
Loading

‎src/components/EasterEgg.vue‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,23 @@
1717

1818
<script setup lang="ts">
1919
import { onMounted, ref } from 'vue';
20+
import { useDisplay } from 'vuetify';
2021
2122
const containerClass = ref('');
2223
const emit = defineEmits(['closeEasterEgg']);
2324
2425
onMounted(() => {
2526
setTimeout(() => {
2627
containerClass.value = 'active';
28+
29+
if (mdAndDown.value) {
30+
containerClass.value += ' mobile';
31+
}
2732
}, 0);
2833
});
2934
35+
const { mdAndDown } = useDisplay();
36+
3037
function closeEasterEgg() {
3138
containerClass.value = '';
3239
@@ -36,7 +43,7 @@ function closeEasterEgg() {
3643
}
3744
</script>
3845

39-
<style scoped>
46+
<style lang="scss" scoped>
4047
#easter-egg-container {
4148
background-color: hsl(0deg 0% 0% / 80%);
4249
display: flex;
@@ -49,17 +56,30 @@ function closeEasterEgg() {
4956
transition: opacity 1s ease;
5057
width: 100vw;
5158
z-index: 999999;
52-
}
5359
54-
#easter-egg-container.active {
55-
opacity: 1;
56-
}
60+
&.active {
61+
opacity: 1;
62+
}
63+
64+
&.mobile {
65+
.unicorn-container {
66+
animation: none;
67+
bottom: initial;
68+
top: 50%;
69+
}
70+
71+
.unicorn {
72+
left: 50%;
73+
transform: rotate(0deg) translate(-50%, -50%);
74+
}
75+
}
5776
58-
#easter-egg-container .title {
59-
color: #fff;
60-
font-size: 1rem;
61-
font-weight: bold;
62-
padding-top: 1em;
77+
.title {
78+
color: #fff;
79+
font-size: 1rem;
80+
font-weight: bold;
81+
padding-top: 1em;
82+
}
6383
}
6484
6585
.unicorn-container {

‎src/documentation/DocsPage.vue‎

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,33 @@
11
<template>
22
<v-row class="text-center">
3-
<v-col cols="12">
3+
<v-col
4+
class="my-3"
5+
cols="12"
6+
style="height: 200px; position: relative; width: 100%;"
7+
>
48
<v-img
5-
class="my-3"
6-
contain
9+
class="header-egg"
10+
:class="{ active: eggCracked }"
711
height="200"
812
src="../assets/egg.png"
13+
title="Vue Easter Egg Trigger"
14+
width="200"
15+
/>
16+
<v-img
17+
v-if="eggCracked"
18+
class="header-egg"
19+
:class="{ active: eggCracked }"
20+
height="200"
21+
src="../assets/egg-cracked.png"
22+
title="Vue Easter Egg Trigger"
23+
width="200"
24+
/>
25+
26+
<VEasterEggTrigger
27+
:pattern="['dblclick']"
28+
target=".header-egg"
29+
type="dblclick"
30+
@triggered="eggClicked"
931
/>
1032
</v-col>
1133

@@ -94,6 +116,11 @@
94116

95117
<!-- Legal -->
96118
<LegalSection />
119+
120+
<component
121+
:is="activeEasterEgg"
122+
@close-easter-egg="closeEasterEgg"
123+
/>
97124
</template>
98125

99126
<script setup>
@@ -110,6 +137,7 @@ import {
110137
PropsSection,
111138
UsageSection,
112139
} from '@/documentation/sections';
140+
import EasterEgg from '@/components/EasterEgg.vue';
113141
114142
115143
const props = defineProps({
@@ -131,6 +159,18 @@ const classes = reactive({
131159
const componentVersion = ref(packageInfo.version);
132160
133161
provide('classes', classes);
162+
163+
const eggCracked = ref(false);
164+
const activeEasterEgg = ref(null);
165+
166+
function eggClicked() {
167+
activeEasterEgg.value = markRaw(EasterEgg);
168+
eggCracked.value = true;
169+
}
170+
171+
function closeEasterEgg() {
172+
activeEasterEgg.value = null;
173+
}
134174
</script>
135175

136176
<style lang="scss" scoped>
@@ -144,6 +184,19 @@ provide('classes', classes);
144184
padding: 0.2em 0.4em;
145185
}
146186
}
187+
188+
.header-egg {
189+
cursor: pointer;
190+
height: 200px;
191+
left: 50%;
192+
position: absolute;
193+
transform: translateX(-50%);
194+
width: 200px;
195+
196+
&.active {
197+
cursor: default;
198+
}
199+
}
147200
</style>
148201

149202
<style lang="scss">

‎src/playground/configs/playground.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,14 @@ import { createVEasterEggTrigger } from '../../plugin/index';
99

1010
const app = createApp(PlaygroundApp);
1111

12-
app.use(createVEasterEggTrigger());
12+
app.use(createVEasterEggTrigger({
13+
// callback: () => {
14+
// console.log('global callback');
15+
// }
16+
// delay: 5000,
17+
// pattern: ['ArrowUp', 'ArrowUp', 'ArrowUp', 'ArrowUp'],
18+
// type: 'dblclick'
19+
}));
1320
app.use(createPinia());
1421
app.component('font-awesome-icon', FontAwesomeIcon);
1522

‎src/playground/configs/templates/PlaygroundPage.vue‎

Lines changed: 168 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,180 @@
33
class="offset-4 mt-15 pt-15"
44
cols="4"
55
>
6-
<v-card elevation="5">
6+
<v-card
7+
class="pt-5"
8+
elevation="5"
9+
>
710
<v-container>
8-
Hello World
11+
<v-row>
12+
<v-col
13+
class="text-center mb-4"
14+
cols="12"
15+
>
16+
<v-btn
17+
id="id-target"
18+
color="primary"
19+
:disabled="clickIdTriggered"
20+
>
21+
Click Target Element by ID
22+
</v-btn>
23+
24+
<VEasterEggTrigger
25+
:pattern="['click']"
26+
target="#id-target"
27+
type="click"
28+
@triggered="triggered('clicked-id')"
29+
/>
30+
</v-col>
31+
32+
<v-col
33+
class="text-center"
34+
cols="12"
35+
>
36+
<v-btn
37+
class="class-target"
38+
color="primary"
39+
:disabled="clickClassTriggered"
40+
>
41+
Triggered by Class
42+
</v-btn>
43+
44+
<VEasterEggTrigger
45+
:callback="callback"
46+
:pattern="['click', 'click', 'click']"
47+
target=".class-target"
48+
type="click"
49+
@triggered="triggered('clicked-class')"
50+
/>
51+
52+
<div
53+
class="callback-triggered"
54+
:class="callbackTriggeredClass"
55+
>
56+
Class element clicked
57+
</div>
58+
</v-col>
59+
60+
<v-col
61+
class="text-center"
62+
cols="12"
63+
>
64+
<v-btn
65+
class="double-click-target"
66+
color="primary"
67+
:disabled="dblclickTriggered"
68+
>
69+
Double Click Target Element by Class
70+
</v-btn>
71+
72+
<VEasterEggTrigger
73+
:pattern="['dblclick']"
74+
target=".double-click-target"
75+
type="dblclick"
76+
@triggered="triggered('dblclick')"
77+
/>
78+
</v-col>
79+
80+
<v-col
81+
class="text-center"
82+
cols="12"
83+
>
84+
Konami Code ↑ ↑ ↓ ↓ ← → ← → b a
85+
<div
86+
class="konami-triggered"
87+
:class="konamiTriggeredClass"
88+
>
89+
Konami Code Triggered
90+
</div>
91+
92+
<VEasterEggTrigger @triggered="triggered('konami')" />
93+
</v-col>
94+
95+
<v-col
96+
class="text-center"
97+
cols="12"
98+
>
99+
Pattern ↓ ↓ ↓ ↓
100+
<div
101+
class="pattern-triggered"
102+
:class="patternTriggeredClass"
103+
>
104+
Pattern Triggered
105+
</div>
106+
107+
<VEasterEggTrigger
108+
:pattern="['ArrowDown', 'ArrowDown', 'ArrowDown', 'ArrowDown']"
109+
@triggered="triggered('pattern')"
110+
/>
111+
</v-col>
112+
</v-row>
9113
</v-container>
10114
</v-card>
11115
</v-col>
116+
117+
<component
118+
:is="activeEasterEgg"
119+
@close-easter-egg="closeEasterEgg"
120+
/>
12121
</template>
13122

14123
<script setup lang="ts">
124+
import EasterEgg from '@/components/EasterEgg.vue';
15125
126+
const activeEasterEgg = ref<object | null>(null);
127+
const callbackTriggeredClass = ref('');
128+
const clickClassTriggered = ref(false);
129+
const clickIdTriggered = ref(false);
130+
const dblclickTriggered = ref(false);
131+
const konamiTriggeredClass = ref('');
132+
const patternTriggeredClass = ref('');
133+
134+
function triggered(el) {
135+
if (el === 'clicked-id') {
136+
clickIdTriggered.value = true;
137+
}
138+
139+
if (el === 'clicked-class') {
140+
clickClassTriggered.value = true;
141+
}
142+
143+
if (el === 'dblclick') {
144+
dblclickTriggered.value = true;
145+
}
146+
147+
if (el === 'konami') {
148+
konamiTriggeredClass.value = 'active';
149+
}
150+
151+
if (el === 'pattern') {
152+
patternTriggeredClass.value = 'active';
153+
}
154+
155+
activeEasterEgg.value = markRaw(EasterEgg);
156+
}
157+
158+
function callback() {
159+
callbackTriggeredClass.value = 'active';
160+
}
161+
162+
function closeEasterEgg() {
163+
activeEasterEgg.value = null;
164+
}
16165
</script>
166+
167+
<style scoped lang="scss">
168+
.callback-triggered {
169+
font-size: 0.8rem;
170+
}
171+
172+
.callback-triggered,
173+
.konami-triggered,
174+
.pattern-triggered {
175+
opacity: 0;
176+
transition: opacity 0.5s ease;
177+
178+
&.active {
179+
opacity: 1;
180+
}
181+
}
182+
</style>

0 commit comments

Comments
 (0)