Skip to content

Commit 7be98d4

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Update copy
1 parent f6ba03e commit 7be98d4

File tree

1 file changed

+23
-212
lines changed

1 file changed

+23
-212
lines changed

‎README.md‎

Lines changed: 23 additions & 212 deletions
Original file line numberDiff line numberDiff line change
@@ -1,246 +1,57 @@
1-
21
<p align="center">
3-
<img alt="Vue Logo" width="100" src="https://webdevnerdstuff.github.io/vue3-easter-egg-trigger/vue.svg">
2+
<img alt="Egg" width="100" src="https://raw.githubusercontent.com/webdevnerdstuff/vue-easter-egg-trigger/main/src/assets/egg.png">
43
</p>
54

65
<p>
7-
<h1 align="center">Vue 3 Easter Egg Trigger</h1>
6+
<h1 align="center">Vue Easter Egg Trigger</h1>
87
</p>
98

109
<p align="center">
11-
<a href="https://www.npmjs.com/package/vue3-easter-egg-trigger">
12-
<img src="https://img.shields.io/npm/v/vue3-easter-egg-trigger?color=1867c0&logo=npm" alt="NPM Package">
10+
<a href="https://www.npmjs.com/package/@wdns/vue-easter-egg-trigger">
11+
<img src="https://img.shields.io/npm/v/%40wdns/vue-easter-egg-trigger?color=1867c0&logo=npm" alt="NPM Package">
1312
</a>
1413
&nbsp;
15-
<a href="https://github.com/webdevnerdstuff/vue3-easter-egg-trigger">
14+
<a href="https://github.com/webdevnerdstuff/vue-easter-egg-trigger">
1615
<img src="https://img.shields.io/badge/GitHub-WebDevNerdStuff-brightgreen.svg?logo=github" alt="@WebDevNerdStuff">
1716
</a>
1817
</p>
1918

20-
## Description
2119

22-
The `vue3-easter-egg-trigger` component makes it nice and easy to add Easter Egg triggers to your Vue site. Also available for Vue 2 at [vue2-easter-egg-trigger](https://github.com/webdevnerdstuff/vue-easter-egg-trigger).
23-
24-
## Installation
25-
#### pnpm
26-
```
27-
pnpm add vue3-easter-egg-trigger
28-
```
29-
#### npm
30-
```
31-
npm i vue3-easter-egg-trigger
32-
```
33-
34-
## Register
35-
#### As Plugin (Global)
36-
```javascript
37-
import { createApp } from 'vue';
38-
import EasterEggTrigger from 'vue3-easter-egg-trigger';
20+
## Description
3921

40-
createApp()
41-
.use(EasterEggTrigger)
42-
.mount('#app');
43-
```
44-
45-
#### As Component (Global)
46-
```javascript
47-
import { createApp } from 'vue';
48-
import EasterEggTrigger from 'vue3-easter-egg-trigger';
22+
Presenting the Vue Easter Egg Trigger, a tool that discreetly injects a touch of unexpectedness into Vue.js projects. This unassuming plugin, which operates on both keystrokes (with click events also available), brings hidden surprises to your applications.
23+
24+
Picture users navigating through your Vue.js application, tapping out secret combinations akin to the infamous <a :href="links.konamiCode" target="_blank">Konami code</a>. Suddenly, a magical farting unicorn appears. While we must issue a PSA that this majestic creature isn't included, the plugin serves as an invitation for developers to infuse similar unexpected elements into their projects.
4925

50-
createApp()
51-
.component('EasterEggTrigger', EasterEggTrigger)
52-
.mount('#app');
53-
```
54-
55-
#### As Component (Local)
56-
##### Composition API
57-
```javascript
58-
<script setup>
59-
import { EasterEggTrigger } from 'vue3-easter-egg-trigger';
6026

61-
function easterEggTriggered() {
62-
// ...do something
63-
}
64-
</script>
65-
66-
<template>
67-
<EasterEggTrigger @triggered="easterEggTriggered" />
68-
</template>
69-
```
27+
## Installation
7028

71-
```javascript
72-
<script>
73-
import { EasterEggTrigger } from 'vue3-easter-egg-trigger';
74-
75-
export default {
76-
components: {
77-
EasterEggTrigger,
78-
},
79-
setup() {
80-
function easterEggTriggered() {
81-
// ...do something
82-
}
83-
84-
return {
85-
easterEggTriggered,
86-
};
87-
},
88-
};
89-
</script>
90-
91-
<template>
92-
<EasterEggTrigger @triggered="easterEggTriggered" />
93-
</template>
94-
29+
Using [pnpm](https://pnpm.io/):
9530
```
96-
##### Options API
97-
```javascript
98-
<script>
99-
import { EasterEggTrigger } from 'vue3-easter-egg-trigger';
100-
101-
export default {
102-
components: {
103-
EasterEggTrigger,
104-
},
105-
data() {
106-
return {};
107-
},
108-
methods: {
109-
easterEggTriggered() {
110-
// ...do something
111-
},
112-
},
113-
};
114-
</script>
115-
116-
<template>
117-
<EasterEggTrigger @triggered="easterEggTriggered" />
118-
</template>;
31+
pnpm add @wdns/vue-easter-egg-trigger
11932
```
120-
## Usage
121-
122-
#### Demo
123-
See it in action on the [Demo Page](https://webdevnerdstuff.github.io/vue3-easter-egg-trigger)
124-
125-
### Plugin Props
126-
127-
Name | Type | Default | Description
128-
:----- | :------ | :----- | :-----
129-
callback | Function | null | The callback function
130-
delay | String, Integer | 500 | Determines the timeout before the event listener resets. The longer the delay, the more time a user has to complete the pattern.
131-
pattern | Array | ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'] | The key/click combination a user does to trigger easter egg. The default combination is the konami code.
132-
target | String | body | Use this to target DOM elements, Id's, or Class Names. Used with click events.
133-
type | String | keydown | The type of action the trigger will be listening for. Available options: `keydown`, `keyup`, `click`, `dblclick`, `mouseup`, `mousedown`
134-
135-
### Events
136-
137-
Name | Type | Description
138-
:----- | :------ | :-----
139-
triggered | [MouseEvent, KeyboardEvent] | Emitted when the easter egg is triggered.
140-
141-
## Keyboard Event Examples
142-
143-
The default key combination to trigger the easter egg is the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code).
144-
145-
ex. &#x2191; &#x2191; &#x2193; &#x2193; &#x2190; &#x2192; &#x2190; &#x2192; b a
14633

147-
##### Bare Egg Example.
148-
149-
150-
```html
151-
<EasterEggTrigger @triggered="easterEggTriggered" />
152-
```
153-
154-
##### Custom Pattern
155-
156-
```html
157-
<EasterEggTrigger
158-
:pattern="['m', 'a', 'g', 'i', 'c']"
159-
@triggered="easterEggTriggered"
160-
/>
34+
Using npm:
16135
```
162-
163-
##### Delay (longer time to complete pattern)
164-
```html
165-
<EasterEggTrigger
166-
delay="5000"
167-
@triggered="easterEggTriggered"
168-
/>
36+
npm i @wdns/vue-easter-egg-trigger
16937
```
17038

171-
##### Callback
39+
## Documentation
17240

41+
[Documentation & Demo](https://webdevnerdstuff.github.io/vue-easter-egg-trigger/)
17342

174-
```html
175-
<EasterEggTrigger :callback="easterEggTriggered" />
176-
```
177-
178-
## Mouse Event Examples
179-
180-
First you will need to set the type prop.
43+
## Dependencies
18144

182-
Available types of Mouse Events: `click`, `dblclick`, `mouseup`, `mousedown`.
183-
When using `dblclick` the pattern will only work with one double click. Ex. pattern: `['dblclick']`
45+
[Vue 3](https://vuejs.org/)
46+
[Lodash](https://vueuse.org/)
18447

185-
```html
186-
<EasterEggTrigger
187-
:pattern="['click']"
188-
target="#id-target"
189-
type="click"
190-
@triggered="easterEggTriggered"
191-
/>
192-
```
193-
194-
#### Multiple clicks required
195-
```html
196-
<EasterEggTrigger
197-
:pattern="['click', 'click']"
198-
target="#id-target"
199-
type="click"
200-
@triggered="easterEggTriggered"
201-
/>
202-
```
203-
204-
##### DOM element target
20548

206-
```html
207-
<EasterEggTrigger
208-
:pattern="['click']"
209-
target="h1"
210-
type="click"
211-
@triggered="easterEggTriggered"
212-
/>
213-
```
214-
215-
##### ID target
216-
217-
```html
218-
<EasterEggTrigger
219-
:pattern="['click']"
220-
target="#id-target"
221-
type="click"
222-
@triggered="easterEggTriggered"
223-
/>
224-
```
49+
## Change Log
22550

226-
##### Class target
51+
[CHANGELOG](https://github.com/webdevnerdstuff/vue-easter-egg-trigger/blob/main/CHANGELOG.md)
22752

228-
```html
229-
<EasterEggTrigger
230-
:pattern="['click']"
231-
target=".double-click-target"
232-
type="click"
233-
@triggered="easterEggTriggered"
234-
/>
235-
```
236-
237-
## Change Log
23853

239-
[CHANGELOG](https://github.com/webdevnerdstuff/vue3-easter-egg-trigger/blob/main/CHANGELOG.md)
240-
24154
## License
24255

243-
Copyright (c) 2022 WebDevNerdStuff
244-
Licensed under the MIT license.
245-
246-
[![GitHub license](https://img.shields.io/github/license/webdevnerdstuff/vue3-easter-egg-trigger)](https://github.com/webdevnerdstuff/vue3-easter-egg-trigger/blob/main/LICENSE.md) [![@WebDevNerdStuff](https://img.shields.io/badge/github-webdevnerdstuff-brightgreen.svg)](https://github.com/webdevnerdstuff)
56+
Copyright (c) 2024 WebDevNerdStuff
57+
Licensed under the [MIT license](https://github.com/webdevnerdstuff/vue-easter-egg-trigger/blob/main/LICENSE.md).

0 commit comments

Comments
 (0)