-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #17 from webdevnerdstuff/dev
Dev
- Loading branch information
Showing
5 changed files
with
45 additions
and
218 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,246 +1,57 @@ | ||
|
|
||
| <p align="center"> | ||
| <img alt="Vue Logo" width="100" src="https://webdevnerdstuff.github.io/vue3-easter-egg-trigger/vue.svg"> | ||
| <img alt="Egg" width="100" src="https://raw.githubusercontent.com/webdevnerdstuff/vue-easter-egg-trigger/main/src/assets/egg.png"> | ||
| </p> | ||
|
|
||
| <p> | ||
| <h1 align="center">Vue 3 Easter Egg Trigger</h1> | ||
| <h1 align="center">Vue Easter Egg Trigger</h1> | ||
| </p> | ||
|
|
||
| <p align="center"> | ||
| <a href="https://www.npmjs.com/package/vue3-easter-egg-trigger"> | ||
| <img src="https://img.shields.io/npm/v/vue3-easter-egg-trigger?color=1867c0&logo=npm" alt="NPM Package"> | ||
| <a href="https://www.npmjs.com/package/@wdns/vue-easter-egg-trigger"> | ||
| <img src="https://img.shields.io/npm/v/%40wdns/vue-easter-egg-trigger?color=1867c0&logo=npm" alt="NPM Package"> | ||
| </a> | ||
| | ||
| <a href="https://github.com/webdevnerdstuff/vue3-easter-egg-trigger"> | ||
| <a href="https://github.com/webdevnerdstuff/vue-easter-egg-trigger"> | ||
| <img src="https://img.shields.io/badge/GitHub-WebDevNerdStuff-brightgreen.svg?logo=github" alt="@WebDevNerdStuff"> | ||
| </a> | ||
| </p> | ||
|
|
||
| ## Description | ||
|
|
||
| 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). | ||
|
|
||
| ## Installation | ||
| #### pnpm | ||
| ``` | ||
| pnpm add vue3-easter-egg-trigger | ||
| ``` | ||
| #### npm | ||
| ``` | ||
| npm i vue3-easter-egg-trigger | ||
| ``` | ||
|
|
||
| ## Register | ||
| #### As Plugin (Global) | ||
| ```javascript | ||
| import { createApp } from 'vue'; | ||
| import EasterEggTrigger from 'vue3-easter-egg-trigger'; | ||
| ## Description | ||
|
|
||
| createApp() | ||
| .use(EasterEggTrigger) | ||
| .mount('#app'); | ||
| ``` | ||
|
|
||
| #### As Component (Global) | ||
| ```javascript | ||
| import { createApp } from 'vue'; | ||
| import EasterEggTrigger from 'vue3-easter-egg-trigger'; | ||
| 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. | ||
|
|
||
| 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. | ||
|
|
||
| createApp() | ||
| .component('EasterEggTrigger', EasterEggTrigger) | ||
| .mount('#app'); | ||
| ``` | ||
|
|
||
| #### As Component (Local) | ||
| ##### Composition API | ||
| ```javascript | ||
| <script setup> | ||
| import { EasterEggTrigger } from 'vue3-easter-egg-trigger'; | ||
|
|
||
| function easterEggTriggered() { | ||
| // ...do something | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <EasterEggTrigger @triggered="easterEggTriggered" /> | ||
| </template> | ||
| ``` | ||
| ## Installation | ||
|
|
||
| ```javascript | ||
| <script> | ||
| import { EasterEggTrigger } from 'vue3-easter-egg-trigger'; | ||
|
|
||
| export default { | ||
| components: { | ||
| EasterEggTrigger, | ||
| }, | ||
| setup() { | ||
| function easterEggTriggered() { | ||
| // ...do something | ||
| } | ||
|
|
||
| return { | ||
| easterEggTriggered, | ||
| }; | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <template> | ||
| <EasterEggTrigger @triggered="easterEggTriggered" /> | ||
| </template> | ||
|
|
||
| Using [pnpm](https://pnpm.io/): | ||
| ``` | ||
| ##### Options API | ||
| ```javascript | ||
| <script> | ||
| import { EasterEggTrigger } from 'vue3-easter-egg-trigger'; | ||
|
|
||
| export default { | ||
| components: { | ||
| EasterEggTrigger, | ||
| }, | ||
| data() { | ||
| return {}; | ||
| }, | ||
| methods: { | ||
| easterEggTriggered() { | ||
| // ...do something | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <template> | ||
| <EasterEggTrigger @triggered="easterEggTriggered" /> | ||
| </template>; | ||
| pnpm add @wdns/vue-easter-egg-trigger | ||
| ``` | ||
| ## Usage | ||
|
|
||
| #### Demo | ||
| See it in action on the [Demo Page](https://webdevnerdstuff.github.io/vue3-easter-egg-trigger) | ||
|
|
||
| ### Plugin Props | ||
|
|
||
| Name | Type | Default | Description | ||
| :----- | :------ | :----- | :----- | ||
| callback | Function | null | The callback function | ||
| 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. | ||
| 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. | ||
| target | String | body | Use this to target DOM elements, Id's, or Class Names. Used with click events. | ||
| type | String | keydown | The type of action the trigger will be listening for. Available options: `keydown`, `keyup`, `click`, `dblclick`, `mouseup`, `mousedown` | ||
|
|
||
| ### Events | ||
|
|
||
| Name | Type | Description | ||
| :----- | :------ | :----- | ||
| triggered | [MouseEvent, KeyboardEvent] | Emitted when the easter egg is triggered. | ||
|
|
||
| ## Keyboard Event Examples | ||
|
|
||
| The default key combination to trigger the easter egg is the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code). | ||
|
|
||
| ex. ↑ ↑ ↓ ↓ ← → ← → b a | ||
|
|
||
| ##### Bare Egg Example. | ||
|
|
||
|
|
||
| ```html | ||
| <EasterEggTrigger @triggered="easterEggTriggered" /> | ||
| ``` | ||
|
|
||
| ##### Custom Pattern | ||
|
|
||
| ```html | ||
| <EasterEggTrigger | ||
| :pattern="['m', 'a', 'g', 'i', 'c']" | ||
| @triggered="easterEggTriggered" | ||
| /> | ||
| Using npm: | ||
| ``` | ||
|
|
||
| ##### Delay (longer time to complete pattern) | ||
| ```html | ||
| <EasterEggTrigger | ||
| delay="5000" | ||
| @triggered="easterEggTriggered" | ||
| /> | ||
| npm i @wdns/vue-easter-egg-trigger | ||
| ``` | ||
|
|
||
| ##### Callback | ||
| ## Documentation | ||
|
|
||
| [Documentation & Demo](https://webdevnerdstuff.github.io/vue-easter-egg-trigger/) | ||
|
|
||
| ```html | ||
| <EasterEggTrigger :callback="easterEggTriggered" /> | ||
| ``` | ||
|
|
||
| ## Mouse Event Examples | ||
|
|
||
| First you will need to set the type prop. | ||
| ## Dependencies | ||
|
|
||
| Available types of Mouse Events: `click`, `dblclick`, `mouseup`, `mousedown`. | ||
| When using `dblclick` the pattern will only work with one double click. Ex. pattern: `['dblclick']` | ||
| [Vue 3](https://vuejs.org/) | ||
| [Lodash](https://vueuse.org/) | ||
|
|
||
| ```html | ||
| <EasterEggTrigger | ||
| :pattern="['click']" | ||
| target="#id-target" | ||
| type="click" | ||
| @triggered="easterEggTriggered" | ||
| /> | ||
| ``` | ||
|
|
||
| #### Multiple clicks required | ||
| ```html | ||
| <EasterEggTrigger | ||
| :pattern="['click', 'click']" | ||
| target="#id-target" | ||
| type="click" | ||
| @triggered="easterEggTriggered" | ||
| /> | ||
| ``` | ||
|
|
||
| ##### DOM element target | ||
|
|
||
| ```html | ||
| <EasterEggTrigger | ||
| :pattern="['click']" | ||
| target="h1" | ||
| type="click" | ||
| @triggered="easterEggTriggered" | ||
| /> | ||
| ``` | ||
|
|
||
| ##### ID target | ||
|
|
||
| ```html | ||
| <EasterEggTrigger | ||
| :pattern="['click']" | ||
| target="#id-target" | ||
| type="click" | ||
| @triggered="easterEggTriggered" | ||
| /> | ||
| ``` | ||
| ## Change Log | ||
|
|
||
| ##### Class target | ||
| [CHANGELOG](https://github.com/webdevnerdstuff/vue-easter-egg-trigger/blob/main/CHANGELOG.md) | ||
|
|
||
| ```html | ||
| <EasterEggTrigger | ||
| :pattern="['click']" | ||
| target=".double-click-target" | ||
| type="click" | ||
| @triggered="easterEggTriggered" | ||
| /> | ||
| ``` | ||
|
|
||
| ## Change Log | ||
|
|
||
| [CHANGELOG](https://github.com/webdevnerdstuff/vue3-easter-egg-trigger/blob/main/CHANGELOG.md) | ||
|
|
||
| ## License | ||
|
|
||
| Copyright (c) 2022 WebDevNerdStuff | ||
| Licensed under the MIT license. | ||
|
|
||
| [](https://github.com/webdevnerdstuff/vue3-easter-egg-trigger/blob/main/LICENSE.md) [](https://github.com/webdevnerdstuff) | ||
| Copyright (c) 2024 WebDevNerdStuff | ||
| Licensed under the [MIT license](https://github.com/webdevnerdstuff/vue-easter-egg-trigger/blob/main/LICENSE.md). |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters