diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d958c2..1e0f66c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Change Log -All notable changes to the "vue3-easter-egg-trigger" plugin will be documented in this file. +All notable changes to the "vue-easter-egg-trigger" plugin will be documented in this file. + +## v3.0.2 +2024-01-19 +[main] (@webdevnerdstuff) +* Fix issue when only using single key press ## v3.0.1 2024-01-17 diff --git a/dist/vue-easter-egg-trigger.cjs.js b/dist/vue-easter-egg-trigger.cjs.js index fe7e43e..0460491 100644 --- a/dist/vue-easter-egg-trigger.cjs.js +++ b/dist/vue-easter-egg-trigger.cjs.js @@ -1,10 +1,10 @@ "use strict";/** * @name @wdns/vue-easter-egg-trigger - * @version 3.0.1 + * @version 3.0.2 * @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 * @repository https://github.com/webdevnerdstuff/vue-easter-egg-trigger * @license MIT License - */Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),n=require("lodash"),l=r.defineComponent({__name:"VEasterEggTrigger",props:{callback:{},destroy:{type:Boolean},delay:{default:500},pattern:{default:()=>["ArrowUp","ArrowUp","ArrowDown","ArrowDown","ArrowLeft","ArrowRight","ArrowLeft","ArrowRight","b","a"]},persist:{type:Boolean,default:!1},target:{default:"body"},type:{default:"keydown"}},emits:["triggered"],setup(d,{emit:i}){const A=i,g=d,y=r.inject(m,{}),e=r.reactive({...g,...y});r.watchEffect(()=>{Object.assign(e,{...g,...y})});let p=r.reactive([]),o=null,u=setTimeout(()=>{});const E=r.reactive(["click","dblclick","mouseup","mousedown"]),a=r.reactive({classNames:[],ids:[],nodes:[]});function f(t){const c=r.ref("");if(u!==null&&clearTimeout(u),t.key!==void 0&&(c.value=t.key),n.includes(E,t.type)){const s=t.currentTarget;c.value=t.type,a.nodes.push(s.nodeName.toLowerCase()),a.ids.push(s.id),a.classNames.push(s.classList.value)}p.push(c.value),function(s){if(n.isEqual(e.pattern,p))return n.includes(E,s.type)?void function(){const v=e.target,q=v.replace("#",""),L=v.replace(".",""),T=n.uniq(a.nodes),h=n.uniq(a.ids),k=n.uniq(a.classNames),N=r.ref(T.length===1&&T[0]===v),S=r.ref(h.length===1&&h[0]===q),V=r.ref(k.length===1&&n.includes(k[0],L));(N.value||S.value||V.value)&&b(),w()}():void b();w()}(t)}function w(){u=setTimeout(()=>{clearTimeout(u),p=[]},Number(e.delay))}function b(){var t;e.callback&&e.callback(e),A("triggered",g),e.persist||(t=f,o&&o.removeEventListener(e.type,t,!0))}return r.onMounted(()=>{(function(){const t=e.type;if(o=document.querySelector(e.target),!o)throw new Error(`Element not found: ${e.target}`);if(e.target==="body")return void o.addEventListener(t,f,!0);o.addEventListener(t,f,!0)})()}),(t,c)=>null}}),m=Symbol(),_=l;exports.EasterEggTrigger=_,exports.VEasterEggTrigger=l,exports.createVEasterEggTrigger=function(d={}){return i=>{i.provide(m,d),i.component("EasterEggTrigger",l),i.component("VEasterEggTrigger",l)}},exports.default=l,exports.globalOptions=m; + */Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),n=require("lodash"),l=r.defineComponent({__name:"VEasterEggTrigger",props:{callback:{},destroy:{type:Boolean},delay:{default:500},pattern:{default:()=>["ArrowUp","ArrowUp","ArrowDown","ArrowDown","ArrowLeft","ArrowRight","ArrowLeft","ArrowRight","b","a"]},persist:{type:Boolean,default:!1},target:{default:"body"},type:{default:"keydown"}},emits:["triggered"],setup(d,{emit:i}){const A=i,g=d,y=r.inject(v,{}),e=r.reactive({...g,...y});r.watchEffect(()=>{Object.assign(e,{...g,...y})});let p=r.reactive([]),o=null,u=setTimeout(()=>{});const E=r.reactive(["click","dblclick","mouseup","mousedown"]),a=r.reactive({classNames:[],ids:[],nodes:[]});function f(t){const c=r.ref("");if(u!==null&&clearTimeout(u),t.key!==void 0&&(c.value=t.key),n.includes(E,t.type)){const s=t.currentTarget;c.value=t.type,a.nodes.push(s.nodeName.toLowerCase()),a.ids.push(s.id),a.classNames.push(s.classList.value)}p.push(c.value),function(s){if(n.isEqual(e.pattern,p)){if(n.includes(E,s.type))return void function(){const m=e.target,q=m.replace("#",""),L=m.replace(".",""),T=n.uniq(a.nodes),h=n.uniq(a.ids),k=n.uniq(a.classNames),N=r.ref(T.length===1&&T[0]===m),S=r.ref(h.length===1&&h[0]===q),V=r.ref(k.length===1&&n.includes(k[0],L));(N.value||S.value||V.value)&&b(),w()}();b()}w()}(t)}function w(){u=setTimeout(()=>{clearTimeout(u),p=[]},Number(e.delay))}function b(){var t;e.callback&&e.callback(e),A("triggered",g),e.persist||(t=f,o&&o.removeEventListener(e.type,t,!0))}return r.onMounted(()=>{(function(){const t=e.type;if(o=document.querySelector(e.target),!o)throw new Error(`Element not found: ${e.target}`);if(e.target==="body")return void o.addEventListener(t,f,!0);o.addEventListener(t,f,!0)})()}),(t,c)=>null}}),v=Symbol(),_=l;exports.EasterEggTrigger=_,exports.VEasterEggTrigger=l,exports.createVEasterEggTrigger=function(d={}){return i=>{i.provide(v,d),i.component("EasterEggTrigger",l),i.component("VEasterEggTrigger",l)}},exports.default=l,exports.globalOptions=v; diff --git a/dist/vue-easter-egg-trigger.es.js b/dist/vue-easter-egg-trigger.es.js index 2dd3d3a..1b15cbd 100644 --- a/dist/vue-easter-egg-trigger.es.js +++ b/dist/vue-easter-egg-trigger.es.js @@ -2,7 +2,7 @@ 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.1 + * @version 3.0.2 * @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 @@ -10,26 +10,29 @@ import { includes as m, isEqual as U, uniq as E } from "lodash"; * @repository https://github.com/webdevnerdstuff/vue-easter-egg-trigger * @license MIT License */ -const v = D({ __name: "VEasterEggTrigger", props: { callback: {}, destroy: { type: Boolean }, delay: { default: 500 }, pattern: { default: () => ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "b", "a"] }, persist: { type: Boolean, default: !1 }, target: { default: "body" }, type: { default: "keydown" } }, emits: ["triggered"], setup(c, { emit: a }) { - const N = a, g = c, y = O(L, {}), e = l({ ...g, ...y }); +const y = D({ __name: "VEasterEggTrigger", props: { callback: {}, destroy: { type: Boolean }, delay: { default: 500 }, pattern: { default: () => ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "b", "a"] }, persist: { type: Boolean, default: !1 }, target: { default: "body" }, type: { default: "keydown" } }, emits: ["triggered"], setup(c, { emit: o }) { + const N = o, g = c, v = O(L, {}), e = l({ ...g, ...v }); R(() => { - Object.assign(e, { ...g, ...y }); + Object.assign(e, { ...g, ...v }); }); let d = l([]), r = null, s = setTimeout(() => { }); - const w = l(["click", "dblclick", "mouseup", "mousedown"]), o = l({ classNames: [], ids: [], nodes: [] }); + const w = l(["click", "dblclick", "mouseup", "mousedown"]), a = l({ classNames: [], ids: [], nodes: [] }); function p(t) { const i = u(""); if (s !== null && clearTimeout(s), t.key !== void 0 && (i.value = t.key), m(w, t.type)) { const n = t.currentTarget; - i.value = t.type, o.nodes.push(n.nodeName.toLowerCase()), o.ids.push(n.id), o.classNames.push(n.classList.value); + i.value = t.type, a.nodes.push(n.nodeName.toLowerCase()), a.ids.push(n.id), a.classNames.push(n.classList.value); } d.push(i.value), function(n) { - if (U(e.pattern, d)) - return m(w, n.type) ? void function() { - const f = e.target, V = f.replace("#", ""), q = f.replace(".", ""), T = E(o.nodes), k = E(o.ids), A = E(o.classNames), j = u(T.length === 1 && T[0] === f), B = u(k.length === 1 && k[0] === V), C = u(A.length === 1 && m(A[0], q)); - (j.value || B.value || C.value) && h(), b(); - }() : void h(); + if (U(e.pattern, d)) { + if (m(w, n.type)) + return void function() { + const f = e.target, V = f.replace("#", ""), q = f.replace(".", ""), T = E(a.nodes), k = E(a.ids), A = E(a.classNames), j = u(T.length === 1 && T[0] === f), B = u(k.length === 1 && k[0] === V), C = u(A.length === 1 && m(A[0], q)); + (j.value || B.value || C.value) && h(), b(); + }(); + h(); + } b(); }(t); } @@ -54,15 +57,15 @@ const v = D({ __name: "VEasterEggTrigger", props: { callback: {}, destroy: { typ }), (t, i) => null; } }), L = Symbol(); function M(c = {}) { - return (a) => { - a.provide(L, c), a.component("EasterEggTrigger", v), a.component("VEasterEggTrigger", v); + return (o) => { + o.provide(L, c), o.component("EasterEggTrigger", y), o.component("VEasterEggTrigger", y); }; } -const $ = v; +const $ = y; export { $ as EasterEggTrigger, - v as VEasterEggTrigger, + y as VEasterEggTrigger, M as createVEasterEggTrigger, - v as default, + y as default, L as globalOptions }; diff --git a/package.json b/package.json index dfb1741..55aaee2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@wdns/vue-easter-egg-trigger", - "version": "3.0.1", + "version": "3.0.2", "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": { diff --git a/src/playground/configs/templates/PlaygroundPage.vue b/src/playground/configs/templates/PlaygroundPage.vue index 7c0ea95..cc68d40 100644 --- a/src/playground/configs/templates/PlaygroundPage.vue +++ b/src/playground/configs/templates/PlaygroundPage.vue @@ -38,7 +38,7 @@ color="primary" :disabled="clickClassTriggered" > - Triggered by Class + Triggered by Class (3 clicks) - Class element clicked + Class element clicked 3 times diff --git a/src/plugin/VEasterEggTrigger.vue b/src/plugin/VEasterEggTrigger.vue index 38a1bff..1226cf9 100644 --- a/src/plugin/VEasterEggTrigger.vue +++ b/src/plugin/VEasterEggTrigger.vue @@ -105,7 +105,6 @@ function checkPattern(e: Event | MouseEvent | KeyboardEvent): void { } emitEvent(); - return; } reset(); @@ -139,6 +138,7 @@ function checkTarget(): void { // Reset // function reset(): void { + // Reset timeout and clear input keys // timeout = setTimeout(() => { clearTimeout(timeout);