Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue-easter-egg-trigger

Package Overview
Dependencies
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-easter-egg-trigger - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

src/assets/style.css
src/components/EasterEggComponent.vue
src/components/HelloWorld.vue
src/plugin/EasterEggTriggerCore.js
src/plugin/index.js

13

CHANGELOG.md
# Change Log
All notable changes to the "vue-easter-egg-trigger" plugin will be documented in this file.
## v0.1.24
## v1.0.0
April 27, 2021
[main] Initial release (webdevnerdstuff)
Initial release
## v2.0.0
February 11, 2022
1. Updating plugin to support both usage as a component as well as an instance method.
2. Removed the `key` option as it was using depreciated key events.
3. Fixed some minor bugs.
4. Added a demo page.

76

package.json
{
"name": "vue-easter-egg-trigger",
"version": "1.0.0",
"version": "2.0.0",
"description": "This packages makes it nice and easy to add Easter Egg triggers to your Vue site.",

@@ -8,10 +8,10 @@ "private": false,

"scripts": {
"serve": "npm run development",
"watch": "npm run development",
"dev": "npm run development",
"serve": "pnpm development",
"watch": "pnpm development",
"dev": "pnpm development",
"development": "cross-env NODE_ENV=development webpack serve --config ./build/webpack.dev.config.js",
"build:release": "webpack --config ./build/webpack.release.config.js --progress",
"build": "npm run build:release",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
"build:docs": "webpack --config ./build/webpack.docs.config.js --progress",
"build": "pnpm build:release",
"deploy": "gh-pages -d docs"
},

@@ -57,45 +57,45 @@ "author": "WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)",

"dependencies": {
"cross-env": "^7.0.3",
"vue": "^2.6.12"
"lodash": "^4.17.21",
"vue": "^2.7.3"
},
"devDependencies": {
"@babel/core": "^7.13.16",
"@babel/eslint-parser": "^7.13.14",
"@babel/eslint-plugin": "^7.13.16",
"@babel/plugin-proposal-optional-chaining": "^7.10.3",
"@babel/plugin-transform-runtime": "^7.13.15",
"@babel/preset-env": "^7.13.15",
"@babel/runtime": "^7.13.17",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/test-utils": "1.0.0-beta.31",
"babel-loader": "^8.2.2",
"babel-plugin-module-resolver": "^4.1.0",
"@babel/core": "^7.20.12",
"@babel/eslint-parser": "^7.19.1",
"@babel/eslint-plugin": "^7.19.1",
"@babel/plugin-transform-runtime": "^7.19.6",
"@babel/preset-env": "^7.20.2",
"@babel/runtime": "^7.20.13",
"@vue/eslint-config-prettier": "^7.0.0",
"babel-loader": "^9.1.2",
"babel-plugin-module-resolver": "^5.0.0",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.3.0",
"eslint": "^7.25.0",
"eslint-config-airbnb-base": "^14.2.1",
"cross-env": "^7.0.3",
"css-loader": "^6.7.3",
"eslint": "^8.33.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-babel-module": "^5.3.0",
"eslint-import-resolver-babel-module": "^5.3.1",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^7.9.0",
"eslint-webpack-plugin": "^2.5.4",
"file-loader": "^0.9.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.9.0",
"eslint-webpack-plugin": "^4.0.0",
"file-loader": "^6.2.0",
"gh-pages": "^5.0.0",
"html-webpack-plugin": "^5.3.1",
"ts-loader": "^6.2.2",
"prettier": "^2.8.3",
"terser-webpack-plugin": "^5.3.6",
"vue-hot-reload-api": "^2.0.8",
"vue-jest": "^3.0.1",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.12",
"vue-test-utils": "^1.0.0-beta.11",
"vuepress": "^2.0.0-beta.10",
"webpack": "^5.35.1",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"vue-loader": "^15.10.0",
"vue-style-loader": "^4.1.3",
"vue-template-babel-compiler": "^1.2.0",
"vue-template-compiler": "^2.7.3",
"webpack": "^5.73.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.7.3"
}
}

411

README.md
Vue Easter Egg Trigger
-------
<p align="center">
<img alt="Vue Logo" width="100" src="https://webdevnerdstuff.github.io/vue3-easter-egg-trigger/vue.svg">
</p>
![GitHub package.json version](https://img.shields.io/github/package-json/v/webdevnerdstuff/vue-easter-egg-trigger) [![NPM_PACKAGE](https://img.shields.io/badge/NPM%20-Package-%23cb3837)](https://www.npmjs.com/package/vue-easter-egg-trigger) [![GitHub license](https://img.shields.io/github/license/webdevnerdstuff/vue-easter-egg-trigger)](https://github.com/webdevnerdstuff/vue-easter-egg-trigger/blob/main/LICENSE.md)
<p>
<h1 align="center">Vue Easter Egg Trigger</h1>
</p>
This packages makes it nice and easy to add Easter Egg triggers to your Vue site.
<p align="center">
<a href="https://www.npmjs.com/package/vue-easter-egg-trigger">
<img src="https://img.shields.io/npm/v/vue-easter-egg-trigger?color=1867c0&logo=npm" alt="NPM Package">
</a>
&nbsp;
<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
### Installation
The `vue-easter-egg-trigger` component makes it nice and easy to add Easter Egg triggers to your Vue site. Also available for Vue 3 at [vue3-easter-egg-trigger](https://github.com/webdevnerdstuff/vue3-easter-egg-trigger).
## Installation
#### pnpm
```
pnpm add vue-easter-egg-trigger
```
#### npm
```
npm i vue-easter-egg-trigger
```
## Usage
## Register
### Plugin Registration
```javascript

@@ -24,13 +43,20 @@ import Vue from 'vue';

```
### Plugin Options
### Component Registration
```javascript
import { EasterEggTrigger } from 'vue-easter-egg-trigger';
```
## Usage
#### Demo
See it in action on the [Demo Page](https://webdevnerdstuff.github.io/vue-easter-egg-trigger)
## Options
### Plugin Global Options
Name | Type | Default | Description
:----- | :------ | :----- | :-----
delay | Integer | 500 | Determines the timeout before the event lister resets.
keys | 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.
pattern | Array | [38, 38, 40, 40, 37, 39, 37, 39, 66, 65] | The key combination a user does to trigger easter egg. (fallback for keys)
type | String | keydown | The type of action the trigger will be listening for.
##### Overriding the plugin default options
##### Overriding the plugin default delay option

@@ -43,5 +69,2 @@ ```javascript

delay: 1000,
keys: ['ArrowUp', 'ArrowDown'],
pattern: [38, 40],
type: 'keyup'
});

@@ -52,15 +75,296 @@ ```

Name | Type | Default | Description
:----- | :------ | :----- | :-----
callback | Function | null | The callback function
destroyBus | Boolean | false | Determines if a bus $on event is destroyed automatically
keys | Array | false | The key/click combination a user does to trigger easter egg.
name | String | easter-egg | Identifier & used for even bus callback
pattern | Array | false | The key combination a user does to trigger easter egg. (fallback for keys)
target | String | div | Use this to target DOM elements, Id's, or Class Names. Used with click events.
withBus | Boolean | true | Determines if a bus event is emitted
<br>
<table>
<thead>
<tr>
<th align="left">Name</th>
<th align="left">Type</th>
<th align="left">Default</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">callback</td>
<td align="left">Function</td>
<td align="left">null</td>
<td align="left">The callback function.</td>
</tr>
<tr>
<td align="left">destroyBus</td>
<td align="left">Boolean</td>
<td align="left">true</td>
<td align="left">Determines if a bus $on event is destroyed automatically.</td>
</tr>
<tr>
<td align="left">name</td>
<td align="left">String</td>
<td align="left">easter-egg</td>
<td align="left">Identifier &amp; used for even bus callback.</td>
</tr>
<tr>
<td align="left">pattern</td>
<td align="left">Array</td>
<td align="left">['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft',
'ArrowRight', 'b',
'a']</td>
<td align="left">The key/click combination a user does to trigger easter egg. The default combination is the
konami code.</td>
</tr>
<tr>
<td align="left">target</td>
<td align="left">String</td>
<td align="left">div</td>
<td align="left">Use this to target DOM elements, Id's, or Class Names. Used with click events.</td>
</tr>
<tr>
<td align="left">triggered</td>
<td align="left">Function</td>
<td align="left">null</td>
<td align="left">Same functionality as the callback option.</td>
</tr>
<tr>
<td align="left">type</td>
<td align="left">String</td>
<td align="left">keydown</td>
<td align="left">The type of action the trigger will be listening for.</td>
</tr>
<tr>
<td align="left">withBus</td>
<td align="left">Boolean</td>
<td align="left">false</td>
<td align="left">Determines if a bus event is emitted.</td>
</tr>
</tbody>
</table>
### Events Handlers (component only)
### Instance Methods
<table>
<thead>
<tr>
<th align="left">Name</th>
<th align="left">Response</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">callback</td>
<td align="left">$event</td>
<td align="left">The callback event handler. If you use $event it will return the easter egg options object.</td>
</tr>
<tr>
<td align="left">triggered</td>
<td align="left">$event</td>
<td align="left">Same functionality as the callback event handler.</td>
</tr>
</tbody>
</table>
##### Example
```html
<EasterEggComponent
@callback="callbackEvent($event)"
/>
```
## Component
When using the component you will setup `VueEasterEggTrigger` using the Component Registration.
### Events
Instead of using `:callback` and `:triggered` as an option you can use the `@callback` and `@triggered` event handlers.
### Examples
#### Key Event Examples
The default key combination to trigger the easter egg is the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code).
##### Bare Egg Example.
```html
<template>
<EasterEggComponent
type="click"
@callback="callbackEvent('using-component')"
/>
</template>
```
##### Key Event with Callback & Bus Emit
```html
<EasterEggComponent
:withBus"true"
type="keydown"
@callback="callbackEvent('using-component')"
/>
<script>
this.$bus.$on('easter-egg', () => {
// also do something...
});
export default {
methods: {
callbackEvent(name) {
// do something ...
},
},
};
</script>
```
##### Key Event with Callback only
```html
<EasterEggComponent
type="keydown"
@callback="callbackEvent('using-component')"
/>
<script>
export default {
methods: {
callbackEvent(name) {
// do something ...
},
},
};
</script>
```
##### Key Event with Triggered only
```html
<EasterEggComponent
type="keydown"
@triggered="triggeredEvent('using-component')"
/>
<script>
export default {
methods: {
triggeredEvent(name) {
// do something ...
},
},
};
</script>
```
#### Mouse Event Examples
First you will need to set the type in the plugin options.
Available types of Mouse Events: `click`, `dblclick`, `mouseup`, `mousedown`.
When using `dblclick` the pattern will only work with one double click. Ex. pattern: `['dblclick']`
```html
<EasterEggComponent
type="click"
@callback="callbackEvent('using-component')"
/>
<script>
export default {
methods: {
callbackEvent(name) {
// do something ...
},
},
};
</script>
```
##### Mouse Event with Callback & Bus Emit
```html
<EasterEggComponent
type="click"
@callback="callbackEvent('using-component')"
/>
<script>
this.$bus.$on('easter-egg', () => {
// also do something...
});
export default {
methods: {
callbackEvent(name) {
// do something ...
},
},
};
</script>
```
##### Mouse Event using a DOM element target
```html
<EasterEggComponent
type="click"
target="h1"
@callback="callbackEvent('using-component')"
/>
<script>
export default {
methods: {
callbackEvent(name) {
// do something ...
},
},
};
</script>
```
##### Mouse Event using an ID target
```html
<EasterEggComponent
type="click"
target="#foo"
pattern="['click', 'click']"
@callback="callbackEvent('using-component')"
/>
<script>
export default {
methods: {
callbackEvent(name) {
// do something ...
},
},
};
</script>
```
##### Mouse Event using an Class target
```html
<EasterEggComponent
type="click"
target=".foo"
pattern="['click', 'click', 'click']"
@callback="callbackEvent('using-component')"
/>
<script>
export default {
methods: {
callbackEvent(name) {
// do something ...
},
},
};
</script>
```
## Instance Methods
There are two instance methods available to use.

@@ -70,7 +374,7 @@ `$easterEgg`

## Key Event Examples
When using an instance method you will setup `VueEasterEggTrigger` using the Plugin Registration.
### Examples
#### Key Event Examples
The default key combination to trigger the easter egg is the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code).
ex. &#x2191; &#x2191; &#x2193; &#x2193; &#x2190; &#x2192; &#x2190; &#x2192; b a

@@ -85,3 +389,5 @@ ##### Bare Egg Example.

this.$easterEgg();
this.$easterEgg({
withBus: true,
});
```

@@ -102,2 +408,3 @@

},
withBus: true,
});

@@ -115,8 +422,19 @@ ```

},
withBus: false,
});
```
##### Key Event with Triggered only
## Mouse Event Examples
```javascript
this.$easterEgg({
name: 'easter-egg',
triggered() {
// do something ...
},
});
```
#### Mouse Event Examples
First you will need to set the type in the plugin options.

@@ -132,3 +450,6 @@

Vue.use(EasterEggTrigger, {
type: 'click'
type: 'click',
callback() {
// do something ...
},
});

@@ -151,2 +472,3 @@ ```

},
withBus: true,
});

@@ -162,2 +484,5 @@ ```

target: 'h1',
callback() {
// do something ...
},
});

@@ -173,2 +498,5 @@ ```

target: '#foo',
callback() {
// do something ...
},
});

@@ -184,13 +512,12 @@ ```

target: '.foo',
callback() {
// do something ...
},
});
```
## More Examples
## Practical Usage Example
You can find more examples in the [EasterEgg.vue](https://github.com/webdevnerdstuff/vue-easter-egg-trigger/blob/main/src/components/EasterEgg.vue) file.
You can find a real world example on how to use the plugin in the [HelloWorld.vue](https://github.com/webdevnerdstuff/vue-easter-egg-trigger/blob/main/src/components/HelloWorld.vue) file.
## Demo
Coming soon to an animal santuary near you.
## Change Log

@@ -203,5 +530,5 @@

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

30

src/index.js

@@ -1,5 +0,31 @@

import EasterEggTrigger from '@plugins/EasterEggTrigger';
import EasterEggComponent from './components/EasterEggComponent.vue';
import EasterEggTriggerCore from './plugin/index';
export const version = '__VERSION__';
const globalOptions = {
delay: 500,
};
const EasterEggTrigger = {
install(Vue, options = {}) {
if (Vue.prototype.$easterEgg || Vue.prototype.$easterEgg) {
return;
}
// Set the Global options //
globalOptions.delay = options.delay || globalOptions.delay;
// Add Component //
Vue.component(EasterEggComponent.name, EasterEggComponent);
// Add Instance Methods //
Vue.prototype.$easterEgg = function(methodOptions) {
EasterEggTriggerCore.init(Vue, globalOptions, methodOptions);
};
Vue.prototype.$easterEggTrigger = function(methodOptions) {
EasterEggTriggerCore.init(Vue, globalOptions, methodOptions);
};
},
};
// Automatic installation if Vue has been added to the global scope.

@@ -6,0 +32,0 @@ if (typeof window !== 'undefined' && window.Vue) {

4

src/main.js
import Vue from 'vue';
import App from './App.vue';
import './assets/style.css';
import EasterEggTrigger from './index';
Vue.use(EasterEggTrigger);
Vue.config.productionTip = false;

@@ -5,0 +9,0 @@ 

src/assets/lodash.custom.js
src/assets/lodash.custom.min.js
src/plugins/EasterEggTrigger.js
src/plugins/EasterEggTriggerCore.js
dist/vue-easter-egg-trigger.js

Sorry, the diff of this file is too big to display

src/App.vue

Sorry, the diff of this file is not supported yet

src/components/EasterEgg.vue

Sorry, the diff of this file is not supported yet

src/templates/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc