diff --git a/CHANGELOG.md b/CHANGELOG.md index a8338e6..7a11618 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,19 @@ # Change Log All notable changes to the "vue3-easter-egg-trigger" plugin will be documented in this file. +## v3.0.1 +2024-01-17 +[main] (@webdevnerdstuff) +* README and CHANGELOG updates + +## v3.0.0 +2024-01-17 +[main] (@webdevnerdstuff) +* Updating typescript support +* Refactoring +* Updating packages +* Moving V3 version to this repo + ## v1.0.2 2023-07-20 [main] (@webdevnerdstuff) diff --git a/README.md b/README.md index 6870609..d42e27d 100644 --- a/README.md +++ b/README.md @@ -1,246 +1,57 @@ -

- Vue Logo + Egg

-

Vue 3 Easter Egg Trigger

+

Vue Easter Egg Trigger

- - NPM Package + + NPM Package   - + @WebDevNerdStuff

-## 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 Konami code. 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 - - - -``` +## Installation -```javascript - - - - +Using [pnpm](https://pnpm.io/): ``` -##### Options API -```javascript - - -; +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 - -``` - -##### Custom Pattern - -```html - +Using npm: ``` - -##### Delay (longer time to complete pattern) -```html - +npm i @wdns/vue-easter-egg-trigger ``` -##### Callback +## Documentation +[Documentation & Demo](https://webdevnerdstuff.github.io/vue-easter-egg-trigger/) -```html - -``` - -## 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 - -``` - -#### Multiple clicks required -```html - -``` - -##### DOM element target -```html - -``` - - ##### ID target - -```html - -``` +## Change Log - ##### Class target +[CHANGELOG](https://github.com/webdevnerdstuff/vue-easter-egg-trigger/blob/main/CHANGELOG.md) -```html - -``` - -## 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. - -[![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) +Copyright (c) 2024 WebDevNerdStuff +Licensed under the [MIT license](https://github.com/webdevnerdstuff/vue-easter-egg-trigger/blob/main/LICENSE.md). diff --git a/dist/vue-easter-egg-trigger.cjs.js b/dist/vue-easter-egg-trigger.cjs.js index 599df28..fe7e43e 100644 --- a/dist/vue-easter-egg-trigger.cjs.js +++ b/dist/vue-easter-egg-trigger.cjs.js @@ -1,7 +1,7 @@ "use strict";/** * @name @wdns/vue-easter-egg-trigger - * @version 3.0.0 - * @description This packages makes it nice and easy to add Easter Egg triggers to your Vue site. + * @version 3.0.1 + * @description 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. * @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! (https://webdevnerdstuff.com) * @copyright Copyright 2024, WebDevNerdStuff * @homepage https://github.com/webdevnerdstuff/vue-easter-egg-trigger diff --git a/dist/vue-easter-egg-trigger.es.js b/dist/vue-easter-egg-trigger.es.js index 39ca571..2dd3d3a 100644 --- a/dist/vue-easter-egg-trigger.es.js +++ b/dist/vue-easter-egg-trigger.es.js @@ -2,8 +2,8 @@ import { defineComponent as D, inject as O, reactive as l, watchEffect as R, onM import { includes as m, isEqual as U, uniq as E } from "lodash"; /** * @name @wdns/vue-easter-egg-trigger - * @version 3.0.0 - * @description This packages makes it nice and easy to add Easter Egg triggers to your Vue site. + * @version 3.0.1 + * @description 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. * @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! (https://webdevnerdstuff.com) * @copyright Copyright 2024, WebDevNerdStuff * @homepage https://github.com/webdevnerdstuff/vue-easter-egg-trigger diff --git a/package.json b/package.json index dd7c93b..dfb1741 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,11 @@ { "name": "@wdns/vue-easter-egg-trigger", - "version": "3.0.0", - "description": "This packages makes it nice and easy to add Easter Egg triggers to your Vue site.", + "version": "3.0.1", + "description": "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.", "private": false, + "publishConfig": { + "access": "public" + }, "main": "dist/vue-easter-egg-trigger.cjs.js", "module": "dist/vue-easter-egg-trigger.es.js", "types": "dist/plugin/types/index.d.ts",