.',e.rawAttrsMap.style),e.staticStyle=JSON.stringify(Ua(r)));var o=ma(e,"style",!1);o&&(e.styleBinding=o)},genData:function(e){var t="";return e.staticStyle&&(t+="staticStyle:".concat(e.staticStyle,",")),e.styleBinding&&(t+="style:(".concat(e.styleBinding,"),")),t}},es=function(e){return(Xi=Xi||document.createElement("div")).innerHTML=e,Xi.textContent},ts=g("area,base,br,col,embed,frame,hr,img,input,isindex,keygen,link,meta,param,source,track,wbr"),ns=g("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr,source"),rs=g("address,article,aside,base,blockquote,body,caption,col,colgroup,dd,details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,title,tr,track"),os=/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,as=/^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,is="[a-zA-Z_][\\-\\.0-9_a-zA-Z".concat(z.source,"]*"),ss="((?:".concat(is,"\\:)?").concat(is,")"),cs=new RegExp("^<".concat(ss)),us=/^\s*(\/?)>/,ls=new RegExp("^<\\/".concat(ss,"[^>]*>")),fs=/^]+>/i,ds=/^",""":'"',"&":"&","
":"\n"," ":"\t","'":"'"},gs=/&(?:lt|gt|quot|amp|#39);/g,ys=/&(?:lt|gt|quot|amp|#39|#10|#9);/g,_s=g("pre,textarea",!0),bs=function(e,t){return e&&_s(e)&&"\n"===t[0]};function ws(e,t){var n=t?ys:gs;return e.replace(n,function(e){return ms[e]})}function $s(e,t){for(var n,r,o=[],a=t.expectHTML,i=t.isUnaryTag||N,s=t.canBeLeftOpenTag||N,c=0,u=function(){if(n=e,r&&vs(r)){var u=0,d=r.toLowerCase(),p=hs[d]||(hs[d]=new RegExp("([\\s\\S]*?)("+d+"[^>]*>)","i"));$=e.replace(p,function(e,n,r){return u=r.length,vs(d)||"noscript"===d||(n=n.replace(//g,"$1").replace(//g,"$1")),bs(d,n)&&(n=n.slice(1)),t.chars&&t.chars(n),""});c+=e.length-$.length,e=$,f(d,c-u,c)}else{var v=e.indexOf("<");if(0===v){if(ds.test(e)){var h=e.indexOf("--\x3e");if(h>=0)return t.shouldKeepComment&&t.comment&&t.comment(e.substring(4,h),c,c+h+3),l(h+3),"continue"}if(ps.test(e)){var m=e.indexOf("]>");if(m>=0)return l(m+2),"continue"}var g=e.match(fs);if(g)return l(g[0].length),"continue";var y=e.match(ls);if(y){var _=c;return l(y[0].length),f(y[1],_,c),"continue"}var b=function(){var t=e.match(cs);if(t){var n={tagName:t[1],attrs:[],start:c};l(t[0].length);for(var r=void 0,o=void 0;!(r=e.match(us))&&(o=e.match(as)||e.match(os));)o.start=c,l(o[0].length),o.end=c,n.attrs.push(o);if(r)return n.unarySlash=r[1],l(r[0].length),n.end=c,n}}();if(b)return function(e){var n=e.tagName,c=e.unarySlash;a&&("p"===r&&rs(n)&&f(r),s(n)&&r===n&&f(n));for(var u=i(n)||!!c,l=e.attrs.length,d=new Array(l),p=0;p
=0){for($=e.slice(v);!(ls.test($)||cs.test($)||ds.test($)||ps.test($)||(x=$.indexOf("<",1))<0);)v+=x,$=e.slice(v);w=e.substring(0,v)}v<0&&(w=e),w&&l(w.length),t.chars&&w&&t.chars(w,c-w.length,c)}if(e===n)return t.chars&&t.chars(e),!o.length&&t.warn&&t.warn('Mal-formatted tag at end of template: "'.concat(e,'"'),{start:c+e.length}),"break"};e;){if("break"===u())break}function l(t){c+=t,e=e.substring(t)}function f(e,n,a){var i,s;if(null==n&&(n=c),null==a&&(a=c),e)for(s=e.toLowerCase(),i=o.length-1;i>=0&&o[i].lowerCasedTag!==s;i--);else i=0;if(i>=0){for(var u=o.length-1;u>=i;u--)(u>i||!e)&&t.warn&&t.warn("tag <".concat(o[u].tag,"> has no matching end tag."),{start:o[u].start,end:o[u].end}),t.end&&t.end(o[u].tag,n,a);o.length=i,r=i&&o[i-1].tag}else"br"===s?t.start&&t.start(e,[],!0,n,a):"p"===s&&(t.start&&t.start(e,[],!1,n,a),t.end&&t.end(e,n,a))}f()}var xs,ks,Cs,Ss,Os,Ts,As,Ms,js,Es=/^@|^v-on:/,Is=/^v-|^@|^:|^#/,Ns=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,Ps=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,Ds=/^\(|\)$/g,Rs=/^\[.*\]$/,Ls=/:(.*)$/,Fs=/^:|^\.|^v-bind:/,Us=/\.[^.\]]+(?=[^\]]*$)/g,Vs=/^v-slot(:|$)|^#/,Hs=/[\r\n]/,Bs=/[ \f\t\r\n]+/g,zs=/[\s"'<>\/=]/,qs=x(es),Js="_empty_";function Ks(e,t,n){return{type:1,tag:e,attrsList:t,attrsMap:ec(t),rawAttrsMap:{},parent:n,children:[]}}function Ws(e,t){xs=t.warn||sa,Ts=t.isPreTag||N,As=t.mustUseProp||N,Ms=t.getTagNamespace||N;var n=t.isReservedTag||N;js=function(e){return!(!(e.component||e.attrsMap[":is"]||e.attrsMap["v-bind:is"])&&(e.attrsMap.is?n(e.attrsMap.is):n(e.tag)))},Cs=ca(t.modules,"transformNode"),Ss=ca(t.modules,"preTransformNode"),Os=ca(t.modules,"postTransformNode"),ks=t.delimiters;var r,o,a=[],i=!1!==t.preserveWhitespace,s=t.whitespace,c=!1,u=!1,l=!1;function f(e,t){l||(l=!0,xs(e,t))}function d(e){if(p(e),c||e.processed||(e=Zs(e,t)),a.length||e===r||(r.if&&(e.elseif||e.else)?(v(e),Ys(r,{exp:e.elseif,block:e})):f("Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.",{start:e.start})),o&&!e.forbidden)if(e.elseif||e.else)i=e,(s=function(e){var t=e.length;for(;t--;){if(1===e[t].type)return e[t];" "!==e[t].text&&xs('text "'.concat(e[t].text.trim(),'" between v-if and v-else(-if) ')+"will be ignored.",e[t]),e.pop()}}(o.children))&&s.if?Ys(s,{exp:i.elseif,block:i}):xs("v-".concat(i.elseif?'else-if="'+i.elseif+'"':"else"," ")+"used on element <".concat(i.tag,"> without corresponding v-if."),i.rawAttrsMap[i.elseif?"v-else-if":"v-else"]);else{if(e.slotScope){var n=e.slotTarget||'"default"';(o.scopedSlots||(o.scopedSlots={}))[n]=e}o.children.push(e),e.parent=o}var i,s;e.children=e.children.filter(function(e){return!e.slotScope}),p(e),e.pre&&(c=!1),Ts(e.tag)&&(u=!1);for(var l=0;l as component root element because it may ")+"contain multiple nodes.",{start:e.start}),e.attrsMap.hasOwnProperty("v-for")&&f("Cannot use v-for on stateful component root element because it renders multiple elements.",e.rawAttrsMap["v-for"])}return $s(e,{warn:xs,expectHTML:t.expectHTML,isUnaryTag:t.isUnaryTag,canBeLeftOpenTag:t.canBeLeftOpenTag,shouldDecodeNewlines:t.shouldDecodeNewlines,shouldDecodeNewlinesForHref:t.shouldDecodeNewlinesForHref,shouldKeepComment:t.comments,outputSourceRange:t.outputSourceRange,start:function(e,n,i,s,l){var f=o&&o.ns||Ms(e);Y&&"svg"===f&&(n=function(e){for(var t=[],n=0;n, / or =.",t.outputSourceRange?{start:e.start+e.name.indexOf("["),end:e.start+e.name.length}:void 0)}),"style"!==(p=h).tag&&("script"!==p.tag||p.attrsMap.type&&"text/javascript"!==p.attrsMap.type)||ie()||(h.forbidden=!0,xs("Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as "+"<".concat(e,">")+", as they will not be parsed.",{start:h.start}));for(var m=0;m cannot be keyed. Place the key on real elements instead.",ha(e,"key")),e.for){var n=e.iterator2||e.iterator1,r=e.parent;n&&n===t&&r&&"transition-group"===r.tag&&xs("Do not use v-for index as key on children, this is the same as not using keys.",ha(e,"key"),!0)}e.key=t}}(e),e.plain=!e.key&&!e.scopedSlots&&!e.attrsList.length,(r=ma(n=e,"ref"))&&(n.ref=r,n.refInFor=function(e){for(var t=e;t;){if(void 0!==t.for)return!0;t=t.parent}return!1}(n)),function(e){var t;"template"===e.tag?((t=ga(e,"scope"))&&xs('the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to to denote scoped slots.',e.rawAttrsMap.scope,!0),e.slotScope=t||ga(e,"slot-scope")):(t=ga(e,"slot-scope"))&&(e.attrsMap["v-for"]&&xs("Ambiguous combined usage of slot-scope and v-for on <".concat(e.tag,"> ")+"(v-for takes higher priority). Use a wrapper for the scoped slot to make it clearer.",e.rawAttrsMap["slot-scope"],!0),e.slotScope=t);var n=ma(e,"slot");n&&(e.slotTarget='""'===n?'"default"':n,e.slotTargetDynamic=!(!e.attrsMap[":slot"]&&!e.attrsMap["v-bind:slot"]),"template"===e.tag||e.slotScope||la(e,"slot",n,ha(e,"slot")));if("template"===e.tag){var r=ya(e,Vs);if(r){(e.slotTarget||e.slotScope)&&xs("Unexpected mixed usage of different slot syntaxes.",e),e.parent&&!js(e.parent)&&xs(" can only appear at the root level inside the receiving component",e);var o=Xs(r),a=o.name,i=o.dynamic;e.slotTarget=a,e.slotTargetDynamic=i,e.slotScope=r.value||Js}}else{var r=ya(e,Vs);if(r){js(e)||xs("v-slot can only be used on components or .",r),(e.slotScope||e.slotTarget)&&xs("Unexpected mixed usage of different slot syntaxes.",e),e.scopedSlots&&xs("To avoid scope ambiguity, the default slot should also use syntax when there are other named slots.",r);var s=e.scopedSlots||(e.scopedSlots={}),c=Xs(r),u=c.name,i=c.dynamic,l=s[u]=Ks("template",[],e);l.slotTarget=u,l.slotTargetDynamic=i,l.children=e.children.filter(function(e){if(!e.slotScope)return e.parent=l,!0}),l.slotScope=r.value||Js,e.children=[],e.plain=!1}}}(e),function(e){"slot"===e.tag&&(e.slotName=ma(e,"name"),e.key&&xs("`key` does not work on because slots are abstract outlets and can possibly expand into multiple elements. Use the key on a wrapping element instead.",ha(e,"key")))}(e),function(e){var t;(t=ma(e,"is"))&&(e.component=t);null!=ga(e,"inline-template")&&(e.inlineTemplate=!0)}(e);for(var o=0;o, use .',u[t]),la(e,r,JSON.stringify(a),u[t]),!e.component&&"muted"===r&&As(e.tag,e.attrsMap.type,r)&&ua(e,r,"true",u[t])}}(e),e}function Gs(e){var t;if(t=ga(e,"v-for")){var n=function(e){var t=e.match(Ns);if(!t)return;var n={};n.for=t[2].trim();var r=t[1].trim().replace(Ds,""),o=r.match(Ps);o?(n.alias=r.replace(Ps,"").trim(),n.iterator1=o[1].trim(),o[2]&&(n.iterator2=o[2].trim())):n.alias=r;return n}(t);n?j(e,n):xs("Invalid v-for expression: ".concat(t),e.rawAttrsMap["v-for"])}}function Ys(e,t){e.ifConditions||(e.ifConditions=[]),e.ifConditions.push(t)}function Xs(e){var t=e.name.replace(Vs,"");return t||("#"!==e.name[0]?t="default":xs("v-slot shorthand syntax requires a slot name.",e)),Rs.test(t)?{name:t.slice(1,-1),dynamic:!0}:{name:'"'.concat(t,'"'),dynamic:!1}}function Qs(e){var t=e.match(Us);if(t){var n={};return t.forEach(function(e){n[e.slice(1)]=!0}),n}}function ec(e){for(var t={},n=0,r=e.length;n
: ')+"You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.",e.rawAttrsMap["v-model"]),n=n.parent}function oc(e){return Ks(e.tag,e.attrsList.slice(),e.parent)}var ac=[Yi,Qi,{preTransformNode:function(e,t){if("input"===e.tag){var n=e.attrsMap;if(!n["v-model"])return;var r=void 0;if((n[":type"]||n["v-bind:type"])&&(r=ma(e,"type")),n.type||r||!n["v-bind"]||(r="(".concat(n["v-bind"],").type")),r){var o=ga(e,"v-if",!0),a=o?"&&(".concat(o,")"):"",i=null!=ga(e,"v-else",!0),s=ga(e,"v-else-if",!0),c=oc(e);Gs(c),fa(c,"type","checkbox"),Zs(c,t),c.processed=!0,c.if="(".concat(r,")==='checkbox'")+a,Ys(c,{exp:c.if,block:c});var u=oc(e);ga(u,"v-for",!0),fa(u,"type","radio"),Zs(u,t),Ys(c,{exp:"(".concat(r,")==='radio'")+a,block:u});var l=oc(e);return ga(l,"v-for",!0),fa(l,":type",r),Zs(l,t),Ys(c,{exp:o,block:l}),i?c.else=!0:s&&(c.elseif=s),c}}}}];var ic,sc,cc={expectHTML:!0,modules:ac,directives:{model:function(e,t,n){na=n;var r=t.value,o=t.modifiers,a=e.tag,i=e.attrsMap.type;if("input"===a&&"file"===i&&na("<".concat(e.tag,' v-model="').concat(r,'" type="file">:\n')+"File inputs are read only. Use a v-on:change listener instead.",e.rawAttrsMap["v-model"]),e.component)return ba(e,r,o),!1;if("select"===a)!function(e,t,n){var r=n&&n.number,o='Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;'+"return ".concat(r?"_n(val)":"val","})"),a="var $$selectedVal = ".concat(o,";");a="".concat(a," ").concat(wa(t,"$event.target.multiple ? $$selectedVal : $$selectedVal[0]")),va(e,"change",a,null,!0)}(e,r,o);else if("input"===a&&"checkbox"===i)!function(e,t,n){var r=n&&n.number,o=ma(e,"value")||"null",a=ma(e,"true-value")||"true",i=ma(e,"false-value")||"false";ua(e,"checked","Array.isArray(".concat(t,")")+"?_i(".concat(t,",").concat(o,")>-1")+("true"===a?":(".concat(t,")"):":_q(".concat(t,",").concat(a,")"))),va(e,"change","var $$a=".concat(t,",")+"$$el=$event.target,"+"$$c=$$el.checked?(".concat(a,"):(").concat(i,");")+"if(Array.isArray($$a)){"+"var $$v=".concat(r?"_n("+o+")":o,",")+"$$i=_i($$a,$$v);"+"if($$el.checked){$$i<0&&(".concat(wa(t,"$$a.concat([$$v])"),")}")+"else{$$i>-1&&(".concat(wa(t,"$$a.slice(0,$$i).concat($$a.slice($$i+1))"),")}")+"}else{".concat(wa(t,"$$c"),"}"),null,!0)}(e,r,o);else if("input"===a&&"radio"===i)!function(e,t,n){var r=n&&n.number,o=ma(e,"value")||"null";o=r?"_n(".concat(o,")"):o,ua(e,"checked","_q(".concat(t,",").concat(o,")")),va(e,"change",wa(t,o),null,!0)}(e,r,o);else if("input"===a||"textarea"===a)!function(e,t,n){var r=e.attrsMap.type,o=e.attrsMap["v-bind:value"]||e.attrsMap[":value"],a=e.attrsMap["v-bind:type"]||e.attrsMap[":type"];if(o&&!a){var i=e.attrsMap["v-bind:value"]?"v-bind:value":":value";na("".concat(i,'="').concat(o,'" conflicts with v-model on the same element ')+"because the latter already expands to a value binding internally",e.rawAttrsMap[i])}var s=n||{},c=s.lazy,u=s.number,l=s.trim,f=!c&&"range"!==r,d=c?"change":"range"===r?Ta:"input",p="$event.target.value";l&&(p="$event.target.value.trim()"),u&&(p="_n(".concat(p,")"));var v=wa(t,p);f&&(v="if($event.target.composing)return;".concat(v)),ua(e,"value","(".concat(t,")")),va(e,d,v,null,!0),(l||u)&&va(e,"blur","$forceUpdate()")}(e,r,o);else{if(!B.isReservedTag(a))return ba(e,r,o),!1;na("<".concat(e.tag,' v-model="').concat(r,'">: ')+"v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component.",e.rawAttrsMap["v-model"])}return!0},text:function(e,t){t.value&&ua(e,"textContent","_s(".concat(t.value,")"),t)},html:function(e,t){t.value&&ua(e,"innerHTML","_s(".concat(t.value,")"),t)}},isPreTag:function(e){return"pre"===e},isUnaryTag:ts,mustUseProp:co,canBeLeftOpenTag:ns,isReservedTag:Co,getTagNamespace:So,staticKeys:function(e){return e.reduce(function(e,t){return e.concat(t.staticKeys||[])},[]).join(",")}(ac)},uc=x(function(e){return g("type,tag,attrsList,attrsMap,plain,parent,children,attrs,start,end,rawAttrsMap"+(e?","+e:""))});function lc(e,t){e&&(ic=uc(t.staticKeys||""),sc=t.isReservedTag||N,function e(t){t.static=function(e){if(2===e.type)return!1;if(3===e.type)return!0;return!(!e.pre&&(e.hasBindings||e.if||e.for||y(e.tag)||!sc(e.tag)||function(e){for(;e.parent;){if("template"!==(e=e.parent).tag)return!1;if(e.for)return!0}return!1}(e)||!Object.keys(e).every(ic)))}(t);if(1===t.type){if(!sc(t.tag)&&"slot"!==t.tag&&null==t.attrsMap["inline-template"])return;for(var n=0,r=t.children.length;n|^function(?:\s+[\w$]+)?\s*\(/,dc=/\([^)]*?\);*$/,pc=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/,vc={esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,down:40,delete:[8,46]},hc={esc:["Esc","Escape"],tab:"Tab",enter:"Enter",space:[" ","Spacebar"],up:["Up","ArrowUp"],left:["Left","ArrowLeft"],right:["Right","ArrowRight"],down:["Down","ArrowDown"],delete:["Backspace","Delete","Del"]},mc=function(e){return"if(".concat(e,")return null;")},gc={stop:"$event.stopPropagation();",prevent:"$event.preventDefault();",self:mc("$event.target !== $event.currentTarget"),ctrl:mc("!$event.ctrlKey"),shift:mc("!$event.shiftKey"),alt:mc("!$event.altKey"),meta:mc("!$event.metaKey"),left:mc("'button' in $event && $event.button !== 0"),middle:mc("'button' in $event && $event.button !== 1"),right:mc("'button' in $event && $event.button !== 2")};function yc(e,t){var n=t?"nativeOn:":"on:",r="",o="";for(var a in e){var i=_c(e[a]);e[a]&&e[a].dynamic?o+="".concat(a,",").concat(i,","):r+='"'.concat(a,'":').concat(i,",")}return r="{".concat(r.slice(0,-1),"}"),o?n+"_d(".concat(r,",[").concat(o.slice(0,-1),"])"):n+r}function _c(e){if(!e)return"function(){}";if(Array.isArray(e))return"[".concat(e.map(function(e){return _c(e)}).join(","),"]");var t=pc.test(e.value),n=fc.test(e.value),r=pc.test(e.value.replace(dc,""));if(e.modifiers){var o="",a="",i=[],s=function(t){if(gc[t])a+=gc[t],vc[t]&&i.push(t);else if("exact"===t){var n=e.modifiers;a+=mc(["ctrl","shift","alt","meta"].filter(function(e){return!n[e]}).map(function(e){return"$event.".concat(e,"Key")}).join("||"))}else i.push(t)};for(var c in e.modifiers)s(c);i.length&&(o+=function(e){return"if(!$event.type.indexOf('key')&&"+"".concat(e.map(bc).join("&&"),")return null;")}(i)),a&&(o+=a);var u=t?"return ".concat(e.value,".apply(null, arguments)"):n?"return (".concat(e.value,").apply(null, arguments)"):r?"return ".concat(e.value):e.value;return"function($event){".concat(o).concat(u,"}")}return t||n?e.value:"function($event){".concat(r?"return ".concat(e.value):e.value,"}")}function bc(e){var t=parseInt(e,10);if(t)return"$event.keyCode!==".concat(t);var n=vc[e],r=hc[e];return"_k($event.keyCode,"+"".concat(JSON.stringify(e),",")+"".concat(JSON.stringify(n),",")+"$event.key,"+"".concat(JSON.stringify(r))+")"}var wc={on:function(e,t){t.modifiers&&Tr("v-on without argument does not support modifiers."),e.wrapListeners=function(e){return"_g(".concat(e,",").concat(t.value,")")}},bind:function(e,t){e.wrapData=function(n){return"_b(".concat(n,",'").concat(e.tag,"',").concat(t.value,",").concat(t.modifiers&&t.modifiers.prop?"true":"false").concat(t.modifiers&&t.modifiers.sync?",true":"",")")}},cloak:I},$c=function(){return function(e){this.options=e,this.warn=e.warn||sa,this.transforms=ca(e.modules,"transformCode"),this.dataGenFns=ca(e.modules,"genData"),this.directives=j(j({},wc),e.directives);var t=e.isReservedTag||N;this.maybeComponent=function(e){return!!e.component||!t(e.tag)},this.onceId=0,this.staticRenderFns=[],this.pre=!1}}();function xc(e,t){var n=new $c(t),r=e?"script"===e.tag?"null":kc(e,n):'_c("div")';return{render:"with(this){return ".concat(r,"}"),staticRenderFns:n.staticRenderFns}}function kc(e,t){if(e.parent&&(e.pre=e.pre||e.parent.pre),e.staticRoot&&!e.staticProcessed)return Cc(e,t);if(e.once&&!e.onceProcessed)return Sc(e,t);if(e.for&&!e.forProcessed)return Tc(e,t);if(e.if&&!e.ifProcessed)return Oc(e,t);if("template"!==e.tag||e.slotTarget||t.pre){if("slot"===e.tag)return function(e,t){var n=e.slotName||'"default"',r=Ec(e,t),o="_t(".concat(n).concat(r?",function(){return ".concat(r,"}"):""),a=e.attrs||e.dynamicAttrs?Pc((e.attrs||[]).concat(e.dynamicAttrs||[]).map(function(e){return{name:C(e.name),value:e.value,dynamic:e.dynamic}})):null,i=e.attrsMap["v-bind"];!a&&!i||r||(o+=",null");a&&(o+=",".concat(a));i&&(o+="".concat(a?"":",null",",").concat(i));return o+")"}(e,t);var n=void 0;if(e.component)n=function(e,t,n){var r=t.inlineTemplate?null:Ec(t,n,!0);return"_c(".concat(e,",").concat(Ac(t,n)).concat(r?",".concat(r):"",")")}(e.component,e,t);else{var r=void 0,o=t.maybeComponent(e);(!e.plain||e.pre&&o)&&(r=Ac(e,t));var a=void 0,i=t.options.bindings;o&&i&&!1!==i.__isScriptSetup&&(a=function(e,t){var n=C(t),r=S(n),o=function(o){return e[t]===o?t:e[n]===o?n:e[r]===o?r:void 0},a=o("setup-const")||o("setup-reactive-const");if(a)return a;var i=o("setup-let")||o("setup-ref")||o("setup-maybe-ref");if(i)return i}(i,e.tag)),a||(a="'".concat(e.tag,"'"));var s=e.inlineTemplate?null:Ec(e,t,!0);n="_c(".concat(a).concat(r?",".concat(r):"").concat(s?",".concat(s):"",")")}for(var c=0;c: component lists rendered with ')+"v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.",e.rawAttrsMap["v-for"],!0),e.forProcessed=!0,"".concat(r||"_l","((").concat(o,"),")+"function(".concat(a).concat(i).concat(s,"){")+"return ".concat((n||kc)(e,t))+"})"}function Ac(e,t){var n="{",r=function(e,t){var n=e.directives;if(!n)return;var r,o,a,i,s="directives:[",c=!1;for(r=0,o=n.length;r>>0}(i)):"",")")}(e,e.scopedSlots,t),",")),e.model&&(n+="model:{value:".concat(e.model.value,",callback:").concat(e.model.callback,",expression:").concat(e.model.expression,"},")),e.inlineTemplate){var a=function(e,t){var n=e.children[0];1===e.children.length&&1===n.type||t.warn("Inline-template components must have exactly one child element.",{start:e.start});if(n&&1===n.type){var r=xc(n,t.options);return"inlineTemplate:{render:function(){".concat(r.render,"},staticRenderFns:[").concat(r.staticRenderFns.map(function(e){return"function(){".concat(e,"}")}).join(","),"]}")}}(e,t);a&&(n+="".concat(a,","))}return n=n.replace(/,$/,"")+"}",e.dynamicAttrs&&(n="_b(".concat(n,',"').concat(e.tag,'",').concat(Pc(e.dynamicAttrs),")")),e.wrapData&&(n=e.wrapData(n)),e.wrapListeners&&(n=e.wrapListeners(n)),n}function Mc(e){return 1===e.type&&("slot"===e.tag||e.children.some(Mc))}function jc(e,t){var n=e.attrsMap["slot-scope"];if(e.if&&!e.ifProcessed&&!n)return Oc(e,t,jc,"null");if(e.for&&!e.forProcessed)return Tc(e,t,jc);var r=e.slotScope===Js?"":String(e.slotScope),o="function(".concat(r,"){")+"return ".concat("template"===e.tag?e.if&&n?"(".concat(e.if,")?").concat(Ec(e,t)||"undefined",":undefined"):Ec(e,t)||"undefined":kc(e,t),"}"),a=r?"":",proxy:true";return"{key:".concat(e.slotTarget||'"default"',",fn:").concat(o).concat(a,"}")}function Ec(e,t,n,r,o){var a=e.children;if(a.length){var i=a[0];if(1===a.length&&i.for&&"template"!==i.tag&&"slot"!==i.tag){var s=n?t.maybeComponent(i)?",1":",0":"";return"".concat((r||kc)(i,t)).concat(s)}var c=n?function(e,t){for(var n=0,r=0;r0)for(;1&t&&(n+=e),!((t>>>=1)<=0);)e+=e;return n}function Wc(e,t){try{return new Function(e)}catch(n){return t.push({err:n,code:e}),I}}function Zc(e){var t=Object.create(null);return function(n,r,o){var a=(r=j({},r)).warn||Tr;delete r.warn;try{new Function("return 1")}catch(ou){ou.toString().match(/unsafe-eval|CSP/)&&a("It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.")}var i=r.delimiters?String(r.delimiters)+n:n;if(t[i])return t[i];var s=e(n,r);s.errors&&s.errors.length&&(r.outputSourceRange?s.errors.forEach(function(e){a("Error compiling template:\n\n".concat(e.msg,"\n\n")+function(e,t,n){void 0===t&&(t=0),void 0===n&&(n=e.length);for(var r=e.split(/\r?\n/),o=0,a=[],i=0;i=t){for(var s=i-Jc;s<=i+Jc||n>o;s++)if(!(s<0||s>=r.length)){a.push("".concat(s+1).concat(Kc(" ",3-String(s+1).length),"| ").concat(r[s]));var c=r[s].length;if(s===i){var u=t-(o-c)+1,l=n>o?c-u:n-t;a.push(" | "+Kc(" ",u)+Kc("^",l))}else if(s>i){if(n>o){var f=Math.min(n-o,c);a.push(" | "+Kc("^",f))}o+=c+1}}break}return a.join("\n")}(n,e.start,e.end),o)}):a("Error compiling template:\n\n".concat(n,"\n\n")+s.errors.map(function(e){return"- ".concat(e)}).join("\n")+"\n",o)),s.tips&&s.tips.length&&(r.outputSourceRange?s.tips.forEach(function(e){return Ar(e.msg,o)}):s.tips.forEach(function(e){return Ar(e,o)}));var c={},u=[];return c.render=Wc(s.render,u),c.staticRenderFns=s.staticRenderFns.map(function(e){return Wc(e,u)}),s.errors&&s.errors.length||!u.length||a("Failed to generate render function:\n\n"+u.map(function(e){var t=e.err,n=e.code;return"".concat(t.toString()," in\n\n").concat(n,"\n")}).join("\n"),o),t[i]=c}}var Gc,Yc,Xc=(Gc=function(e,t){var n=Ws(e.trim(),t);!1!==t.optimize&&lc(n,t);var r=xc(n,t);return{ast:n,render:r.render,staticRenderFns:r.staticRenderFns}},function(e){function t(t,n){var r=Object.create(e),o=[],a=[],i=function(e,t,n){(n?a:o).push(e)};if(n){if(n.outputSourceRange){var s=t.match(/^\s*/)[0].length;i=function(e,t,n){var r="string"==typeof e?{msg:e}:e;t&&(null!=t.start&&(r.start=t.start+s),null!=t.end&&(r.end=t.end+s)),(n?a:o).push(r)}}for(var c in n.modules&&(r.modules=(e.modules||[]).concat(n.modules)),n.directives&&(r.directives=j(Object.create(e.directives||null),n.directives)),n)"modules"!==c&&"directives"!==c&&(r[c]=n[c])}r.warn=i;var u=Gc(t.trim(),r);return Uc(u.ast,i),u.errors=o,u.tips=a,u}return{compile:t,compileToFunctions:Zc(t)}})(cc).compileToFunctions;function Qc(e){return(Yc=Yc||document.createElement("div")).innerHTML=e?'':'',Yc.innerHTML.indexOf("
")>0}var eu=!!Z&&Qc(!1),tu=!!Z&&Qc(!0),nu=x(function(e){var t=Ao(e);return t&&t.innerHTML}),ru=Xr.prototype.$mount;return Xr.prototype.$mount=function(e,t){if((e=e&&Ao(e))===document.body||e===document.documentElement)return Tr("Do not mount Vue to or - mount to normal elements instead."),this;var n=this.$options;if(!n.render){var r=n.template;if(r)if("string"==typeof r)"#"===r.charAt(0)&&((r=nu(r))||Tr("Template element not found or is empty: ".concat(n.template),this));else{if(!r.nodeType)return Tr("invalid template option:"+r,this),this;r=r.innerHTML}else e&&(r=function(e){if(e.outerHTML)return e.outerHTML;var t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML}(e));if(r){B.performance&&et&&et("compile");var o=Xc(r,{outputSourceRange:!0,shouldDecodeNewlines:eu,shouldDecodeNewlinesForHref:tu,delimiters:n.delimiters,comments:n.comments},this),a=o.render,i=o.staticRenderFns;n.render=a,n.staticRenderFns=i,B.performance&&et&&(et("compile end"),tt("vue ".concat(this._name," compile"),"compile","compile end"))}}return ru.call(this,e,t)},Xr.compile=Xc,j(Xr,nr),Xr.effect=function(e,t){var n=new ir(fe,e,I,{sync:!0});t&&(n.update=function(){t(function(){return n.run()})})},Xr});
5 | },{}],"bSY2":[function(require,module,exports) {
6 | "use strict";var t=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("vue/dist/vue.js"));new e.default({el:"#contributors-section",data:{contributors:{}},methods:{getContributors:function(){var t=this;fetch("https://api.github.com/repos/rogeriotaques/vue-hotkeys-rt/contributors").then(function(t){return t.json()}).then(function(e){return t.contributors=e})}},beforeMount:function(){this.getContributors()}});
7 | },{"vue/dist/vue.js":"HbND"}]},{},["bSY2"], null)
8 | //# sourceMappingURL=contributors.a61c02a2.js.map
--------------------------------------------------------------------------------
/docs/detectos.b237a7b4.js:
--------------------------------------------------------------------------------
1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;cVue Hotkeys
v1.0 Easy to use shortcut keys library
Implement Shortcut Keys
in your Vue apps
Approachable, Full featured and Easy to use Shortcut Keys library for your Vue.js apps
Try It by pressing below commands ❤️
The Vue Hotkeys Component helps you to smoothly implement keyboard shortcuts to any Vue application
Getting Started
For, using vue-hotkeys-rt in your vue apps, you have to install it as a dependency by following commands
> yarn add vue-hotkeys-rt
or
> npm install vue-hotkeys-rt -S
After, that you have to import it in your vue app
2 | import Vue from 'vue/dist/vue.js';
3 | import Hotkeys from 'vue-hotkeys-rt';
4 |
5 | new Vue({
6 | ...
7 | components: { Hotkeys },
8 | ...
9 | });
Handling the keyboard shortcuts
Vue Hotkeys emits the triggered event
always a shortcut is used. So, everything you need to do is define a handler that will take an action depending on the pressed keys.
Vue Hotkeys assume that a shortcut is a combination of CMD+Key
.
10 | <template>
11 | <div>
12 | <Hotkeys
13 | :shortcuts="['S', 'D', 'ArrowLeft', 'ArrowRight']"
14 | :debug="true"
15 | @triggered="onTriggeredEventHandler"
16 | />
17 | </div>
18 | </template>
19 |
20 | <script lang="ts">
21 | import Hotkeys from 'vue-hotkeys-rt';
22 |
23 | export default {
24 | ...
25 | components: { Hotkeys },
26 |
27 | methods: {
28 | onTriggeredEventHandler(payload) {
29 | console.log(`You have pressed CMD (CTRL) + ${payload.keyString}`);
30 | }
31 | }
32 | ...
33 | };
34 | </script>
Passing props and event
The <Hotkeys />
component accepts two props and one event called triggered
- shortcuts
- debug
- @triggered
shortcuts prop accepts array of strings something like :shortcuts="['S', 'D', 'ArrowLeft', 'ArrowRight']"
. These strings/characters are basically keyboard buttons which you want to use to trigger an event. For, A.....Z buttons you can use same name but for using different keys like Arrow Keys (⬅️, ➡️) you have to pass specific values for that please refer this table.
Next, debug prop accepts boolean
value. This prop is useful in developement mode where you can see which key has been pressed in the console.
If you are in a production mode then you should have to pass it as a "false" it's recommended.
After that, next is @triggered event in which you have to pass a method which have to call when user press that specific keys. (This is just a event listener if you know the concept of Component Events in Vue). You have to pass name of the method which you have to call after pressing the shortcut keys.
Props Table
Key | String (prop) to be passed | Code |
{{key.name}} | {{key.prop}} | {{key.code}} |
Contributing Guide
Do you know Vue.js and would like to contribute?
Great 🙌 , I'd love to have your help to improve this component. Just clone this repository and send back your contributions as pull requests.
Wanna chat? 🙂 Drop me a line on Twitter.
First, of all Fork this repo, then clone it to your local machine and install the dependencies:
Note: First, you have to install parcel using yarn because, currently parcel is not working with npm
> yarn add parcel
After, doing parcel installation now it's time to install other dependencies
> npm install
Now, run below command to start developement server
> npm run start
Do, make your changes and after that make Pull Request 🙂.
--------------------------------------------------------------------------------
/docs/main.37027979.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");*{scroll-behavior:smooth}img{max-width:100%;height:auto}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.contributor-icon{border-radius:50%;padding:7px}.badge{background-color:#f6ca2c;color:#fff;font-weight:lighter;padding:4px 8px;border-radius:5px}.badge,.hero{text-align:center}.hero{margin:auto;width:80%;padding:30px 10px 10px}.ul{padding:0}.li{display:inline-block;width:100px;list-style-type:circle;font-weight:700}.tryit{margin:auto;width:30%;border:3px dashed #42b883;padding:15px;background-color:#d3d3d3;text-align:center}.heading{font-size:65px;line-height:1.25;font-weight:900;letter-spacing:-1.5px;max-width:960px;margin:0 auto;color:#213547}.colorful-heading{background-image:-webkit-linear-gradient(315deg,#42d392 25%,#647eff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.docs-btn{display:inline-block;outline:none;cursor:pointer;font-size:14px;line-height:1;border-radius:500px;transition-property:background-color,border-color,color,box-shadow,filter;transition-duration:.3s;border:1px solid transparent;letter-spacing:2px;min-width:160px;text-transform:uppercase;white-space:normal;font-weight:700;text-align:center;padding:17px 48px;color:#fff;background-color:#42d392;height:48px}.docs-btn :hover{transform:scale(1.04);background-color:#21e065}.dividing-border{border-bottom:3px dashed #42b883;margin:auto;width:70%;padding:30px 10px 10px}#docs{margin:auto;width:50%;padding:10px}.header-anchor{opacity:1}.subsection{margin-left:35px;margin-top:-10px;font-size:18px;line-height:25px}table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}table,td,th{border:1px solid #000}td,th{text-align:center;padding:8px}th{background-color:#ddd}#footer{padding-top:80px;text-align:center;margin:auto}.github-icon{margin:0 9px 0 4px}.github-icon,.npm-icon{height:25px;width:25px}.card{padding:1rem;height:4rem}.cards{max-width:1200px;margin:0 auto;display:grid;grid-gap:1rem}@media (min-width:600px){.cards{grid-template-columns:repeat(3,1fr)}}@media (min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}@media only screen and (max-width:430px){.hero{margin:auto;width:90%;padding:30px 2px 2px;text-align:center}.heading{font-size:45px;line-height:1.25;font-weight:900;letter-spacing:-.5px;max-width:960px;margin:0 auto}.tryit{margin:auto;width:80%;border:3px dashed #42b883;padding:15px;background-color:#d3d3d3;text-align:center}.docs-btn,.try-btn{margin-right:10px}.installation-cmds{width:80%}#docs{width:90%}.subsection{margin-left:0}.card{padding:2px;height:30px}}
2 | /*# sourceMappingURL=main.37027979.css.map */
--------------------------------------------------------------------------------
/docs/main.37027979.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["main.css"],"names":[],"mappings":"AAAA,uFAAuF,CAEvF,EACE,sBACF,CAEA,IACE,cAAe,CACf,WACF,CAEA,KACE,yIAEF,CAEA,kBACI,iBAAkB,CAClB,WACJ,CAEA,OACE,wBAAyB,CACzB,UAAY,CACZ,mBAAoB,CACpB,eAAgB,CAEhB,iBACF,CAEA,aAJE,iBAUF,CANA,MACE,WAAY,CACZ,SAAU,CAEV,sBAEF,CAEA,IACE,SACF,CAEA,IACE,oBAAqB,CACrB,WAAY,CACZ,sBAAuB,CACvB,eACF,CAEA,OACE,WAAY,CACZ,SAAU,CACV,yBAA0B,CAC1B,YAAa,CACb,wBAA2B,CAC3B,iBACF,CAEA,SACE,cAAe,CACf,gBAAiB,CACjB,eAAgB,CAChB,qBAAsB,CACtB,eAAgB,CAChB,aAAc,CACd,aACF,CAEA,kBACE,oEAA4F,CAC5F,4BAA6B,CAC7B,mCACF,CAEA,UACE,oBAAqB,CACrB,YAAa,CACb,cAAe,CACf,cAAe,CACf,aAAc,CACd,mBAAoB,CACpB,yEAA8E,CAC9E,uBAAyB,CACzB,4BAA6B,CAC7B,kBAAmB,CACnB,eAAgB,CAChB,wBAAyB,CACzB,kBAAmB,CACnB,eAAgB,CAChB,iBAAkB,CAClB,iBAAkB,CAClB,UAAW,CACX,wBAAyB,CACzB,WACF,CAEA,iBACE,qBAAsB,CACtB,wBACF,CAEA,iBACE,gCAAiC,CACjC,WAAY,CACZ,SAAU,CAEV,sBACF,CAEA,MAEE,WAAY,CACZ,SAAU,CACV,YACF,CAEA,eACE,SACF,CAEA,YACE,gBAAiB,CACjB,gBAAiB,CACjB,cAAe,CACf,gBACF,CAEA,MACE,4BAA8B,CAC9B,wBAAyB,CAEzB,UACF,CAEA,YAJE,qBASF,CALA,MAGE,iBAAkB,CAClB,WACF,CAEA,GACE,qBACF,CAEA,QACE,gBAAiB,CACjB,iBAAkB,CAClB,WACF,CAEA,aAGE,kBACF,CAEA,uBALE,WAAY,CACZ,UAOF,CAEA,MACE,YAAa,CACb,WACF,CAEA,OACE,gBAAiB,CACjB,aAAc,CACd,YAAa,CACb,aACF,CAGA,yBACE,OACE,mCACF,CACF,CAGA,yBACE,OACE,mCACF,CACF,CAEA,yCACE,MACE,WAAY,CACZ,SAAU,CAEV,oBAAiB,CACjB,iBACF,CAEA,SACE,cAAe,CACf,gBAAiB,CACjB,eAAgB,CAChB,oBAAsB,CACtB,eAAgB,CAChB,aACF,CAEA,OACE,WAAY,CACZ,SAAU,CACV,yBAA0B,CAC1B,YAAa,CACb,wBAA2B,CAC3B,iBACF,CAMA,mBACE,iBACF,CAEA,mBACE,SACF,CAEA,MACE,SACF,CAEA,YACE,aACF,CAEA,MACE,WAAY,CACZ,WACF,CACF","file":"main.37027979.css","sourceRoot":"..\\src","sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap');\n\n* {\n scroll-behavior: smooth;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nbody {\n font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n}\n\n.contributor-icon {\n border-radius: 50%;\n padding: 7px;\n}\n\n.badge {\n background-color: #f6ca2c;\n color: white;\n font-weight: lighter;\n padding: 4px 8px;\n text-align: center;\n border-radius: 5px;\n}\n\n.hero {\n margin: auto;\n width: 80%;\n padding: 10px;\n padding-top: 30px;\n text-align: center;\n}\n\n.ul {\n padding: 0px;\n}\n\n.li {\n display: inline-block;\n width: 100px;\n list-style-type: circle;\n font-weight: bold;\n}\n\n.tryit {\n margin: auto;\n width: 30%;\n border: 3px dashed #42b883;\n padding: 15px;\n background-color: lightgray;\n text-align: center;\n}\n\n.heading {\n font-size: 65px;\n line-height: 1.25;\n font-weight: 900;\n letter-spacing: -1.5px;\n max-width: 960px;\n margin: 0 auto;\n color: #213547;\n}\n\n.colorful-heading {\n background-image: -webkit-linear-gradient(315deg, rgb(66, 211, 146) 25%, rgb(100, 126, 255));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.docs-btn {\n display: inline-block;\n outline: none;\n cursor: pointer;\n font-size: 14px;\n line-height: 1;\n border-radius: 500px;\n transition-property: background-color, border-color, color, box-shadow, filter;\n transition-duration: 0.3s;\n border: 1px solid transparent;\n letter-spacing: 2px;\n min-width: 160px;\n text-transform: uppercase;\n white-space: normal;\n font-weight: 700;\n text-align: center;\n padding: 17px 48px;\n color: #fff;\n background-color: #42d392;\n height: 48px;\n}\n\n.docs-btn :hover {\n transform: scale(1.04);\n background-color: #21e065;\n}\n\n.dividing-border {\n border-bottom: 3px dashed #42b883;\n margin: auto;\n width: 70%;\n padding: 10px;\n padding-top: 30px;\n}\n\n#docs {\n padding-top: 60px;\n margin: auto;\n width: 50%;\n padding: 10px;\n}\n\n.header-anchor {\n opacity: 1;\n}\n\n.subsection {\n margin-left: 35px;\n margin-top: -10px;\n font-size: 18px;\n line-height: 25px;\n}\n\ntable {\n font-family: arial, sans-serif;\n border-collapse: collapse;\n border: 1px solid black;\n width: 100%;\n}\n\ntd,\nth {\n border: 1px solid black;\n text-align: center;\n padding: 8px;\n}\n\nth {\n background-color: #dddddd;\n}\n\n#footer {\n padding-top: 80px;\n text-align: center;\n margin: auto;\n}\n\n.github-icon {\n height: 25px;\n width: 25px;\n margin: 0px 9px 0px 4px;\n}\n\n.npm-icon {\n height: 25px;\n width: 25px;\n}\n\n.card {\n padding: 1rem;\n height: 4rem;\n}\n\n.cards {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-gap: 1rem;\n}\n\n/* Screen larger than 600px? 2 column */\n@media (min-width: 600px) {\n .cards {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n/* Screen larger than 900px? 3 columns */\n@media (min-width: 900px) {\n .cards {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n@media only screen and (max-width: 430px) {\n .hero {\n margin: auto;\n width: 90%;\n padding: 2px;\n padding-top: 30px;\n text-align: center;\n }\n\n .heading {\n font-size: 45px;\n line-height: 1.25;\n font-weight: 900;\n letter-spacing: -0.5px;\n max-width: 960px;\n margin: 0 auto;\n }\n\n .tryit {\n margin: auto;\n width: 80%;\n border: 3px dashed #42b883;\n padding: 15px;\n background-color: lightgray;\n text-align: center;\n }\n\n .docs-btn {\n margin-right: 10px;\n }\n\n .try-btn {\n margin-right: 10px;\n }\n\n .installation-cmds {\n width: 80%;\n }\n\n #docs {\n width: 90%;\n }\n\n .subsection {\n margin-left: 0px;\n }\n\n .card {\n padding: 2px;\n height: 30px;\n }\n}\n"]}
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-hotkeys-rt",
3 | "version": "0.2.3",
4 | "description": "Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.",
5 | "scripts": {
6 | "start": "parcel src/index.html --no-cache",
7 | "build:docs": "NODE_ENV=production parcel build src/index.html --no-cache --out-dir=./docs --public-url=./"
8 | },
9 | "keywords": [
10 | "vue",
11 | "keyboard",
12 | "shortcut",
13 | "keyboard",
14 | "shortcuts",
15 | "web",
16 | "app",
17 | "javascript"
18 | ],
19 | "author": "Rogerio Taques",
20 | "license": "MIT",
21 | "repository": {
22 | "url": "https://github.com/rogeriotaques/vue-hotkeys-rt"
23 | },
24 | "dependencies": {},
25 | "devDependencies": {
26 | "@parcel/transformer-vue": "^2.7.0",
27 | "@typescript-eslint/eslint-plugin": "^2.18.0",
28 | "@typescript-eslint/parser": "^2.18.0",
29 | "@vue/component-compiler-utils": "^3.1.1",
30 | "@vue/eslint-config-airbnb": "^5.0.2",
31 | "eslint": "^6.8.0",
32 | "eslint-config-prettier": "^6.10.0",
33 | "eslint-plugin-prettier": "^3.1.2",
34 | "eslint-plugin-vue": "^6.1.2",
35 | "parcel": "^2.7.0",
36 | "parcel-bundler": "^1.12.4",
37 | "prettier": "^1.19.1",
38 | "pug": "^3.0.1",
39 | "typescript": "^3.7.5",
40 | "vue": "^2.6.11",
41 | "vue-eslint-parser": "^7.0.0",
42 | "vue-hot-reload-api": "^2.3.4",
43 | "vue-template-compiler": "^2.6.11"
44 | },
45 | "files": [
46 | "Hotkeys.vue",
47 | "readme.md",
48 | "LICENSE"
49 | ]
50 | }
51 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Vue Hotkeys
2 |
3 |
4 |
5 |
6 |

7 |
8 |
9 |
10 |
11 | ## Demo
12 |
13 | https://rogeriotaques.github.io/vue-hotkeys-rt/
14 |
15 | ## Getting started
16 |
17 | Install the component as a dependency of your project.
18 |
19 | ```sh
20 | $ yarn add vue-hotkeys-rt
21 | ```
22 | or
23 |
24 | ```sh
25 | $ npm install vue-hotkeys-rt -S
26 | ```
27 |
28 | Import it to your Vue app.
29 |
30 | ```js
31 | import Vue from 'vue/dist/vue.js';
32 | import Hotkeys from 'vue-hotkeys-rt';
33 |
34 | new Vue({
35 | ...
36 | components: { Hotkeys },
37 | ...
38 | });
39 |
40 | ```
41 |
42 | ## Handling the keyboard shortcuts
43 |
44 | Vue Hotkeys emits the `triggered` event always a shortcut is used. So, everything you need to do is define a handler that will take an action depending on the pressed keys.
45 |
46 | Vue Hotkeys assume that a shortcut is a combination of CMD+`Key`.
47 |
48 | E.g:
49 |
50 | ```vue
51 |
52 |
53 |
58 |
59 |
60 |
61 |
76 |
77 | ```
78 |
79 | ## Contributing
80 |
81 | Do you know `Vue.js` and would like to contribute?
82 |
83 | Great 🙌 , I'd love to have your help to improve this component. Just clone this repository and send back your contributions as `pull requests`.
84 |
85 | Wanna chat? 🙂 Drop me a line on [Twitter](https://twitter.com/rogeriotaques).
86 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rogeriotaques/vue-hotkeys-rt/7e17c4cf9f7fd22ec2b37fa53880efeee9d116c1/screenshot.png
--------------------------------------------------------------------------------
/src/assets/HOTKEYS.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rogeriotaques/vue-hotkeys-rt/7e17c4cf9f7fd22ec2b37fa53880efeee9d116c1/src/assets/HOTKEYS.png
--------------------------------------------------------------------------------
/src/assets/HOTKEYS1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rogeriotaques/vue-hotkeys-rt/7e17c4cf9f7fd22ec2b37fa53880efeee9d116c1/src/assets/HOTKEYS1.png
--------------------------------------------------------------------------------
/src/assets/HOTKEYSmain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rogeriotaques/vue-hotkeys-rt/7e17c4cf9f7fd22ec2b37fa53880efeee9d116c1/src/assets/HOTKEYSmain.png
--------------------------------------------------------------------------------
/src/contributors.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue/dist/vue.js';
2 |
3 |
4 | new Vue({
5 | el: "#contributors-section",
6 | data: {
7 | contributors: {}
8 | },
9 | methods: {
10 | getContributors() {
11 | fetch('https://api.github.com/repos/rogeriotaques/vue-hotkeys-rt/contributors')
12 | .then(response => response.json())
13 | .then(data => this.contributors = data)
14 | }
15 | },
16 | beforeMount() {
17 | this.getContributors()
18 | },
19 | })
--------------------------------------------------------------------------------
/src/detectos.ts:
--------------------------------------------------------------------------------
1 | var OS = "Unknown";
2 | if (navigator.userAgent.indexOf("Win") != -1) OS = "Windows";
3 | if (navigator.userAgent.indexOf("Mac") != -1) OS = "MacOS";
4 | if (navigator.userAgent.indexOf("X11") != -1) OS = "UNIX";
5 | if (navigator.userAgent.indexOf("Linux") != -1) OS = "Linux";
6 |
7 |
8 | if(OS != "MacOS"){
9 | document.getElementById('detectOs1').innerHTML = "Ctr";
10 | document.getElementById('detectOs2').innerHTML = "Ctr";
11 | document.getElementById('detectOs3').innerHTML = "Ctr";
12 | document.getElementById('detectOs4').innerHTML = "Ctr";
13 | }
14 |
15 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Hotkeys
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |

18 |
19 | v1.0 Easy to use shortcut keys library
20 |
21 |
Implement Shortcut Keys
22 |
in your Vue apps
23 |
24 |
Approachable, Full featured and Easy to use Shortcut Keys library for your Vue.js apps
25 |
26 |
27 |
28 |
29 |
30 |
31 |
39 |
40 |
41 | Try It by pressing below commands ❤️
42 |
43 | - ⌘ + S
44 | - ⌘ + D
45 |
46 |
47 | - ⌘ + ⬅️
48 | - ⌘ + ➡️
49 |
50 |
54 |
55 |
56 |
57 |
58 |
The Vue Hotkeys Component helps you to smoothly implement keyboard shortcuts to any Vue application
59 |
Getting Started
60 |
61 |
For, using vue-hotkeys-rt in your vue apps, you have to install it as a dependency by following commands
62 |
> yarn add vue-hotkeys-rt
63 |
or
64 |
> npm install vue-hotkeys-rt -S
65 |
After, that you have to import it in your vue app
66 |
67 | import Vue from 'vue/dist/vue.js';
68 | import Hotkeys from 'vue-hotkeys-rt';
69 |
70 | new Vue({
71 | ...
72 | components: { Hotkeys },
73 | ...
74 | });
75 |
76 |
77 |
Handling the keyboard shortcuts
78 |
79 |
Vue Hotkeys emits the triggered event
always a shortcut is used. So, everything you need to do is define a handler that will take an action depending on the pressed keys.
80 |
Vue Hotkeys assume that a shortcut is a combination of CMD+Key
.
81 |
82 |
83 | <template>
84 | <div>
85 | <Hotkeys
86 | :shortcuts="['S', 'D', 'ArrowLeft', 'ArrowRight']"
87 | :debug="true"
88 | @triggered="onTriggeredEventHandler"
89 | />
90 | </div>
91 | </template>
92 |
93 | <script lang="ts">
94 | import Hotkeys from 'vue-hotkeys-rt';
95 |
96 | export default {
97 | ...
98 | components: { Hotkeys },
99 |
100 | methods: {
101 | onTriggeredEventHandler(payload) {
102 | console.log(`You have pressed CMD (CTRL) + ${payload.keyString}`);
103 | }
104 | }
105 | ...
106 | };
107 | </script>
108 |
109 |
110 |
Passing props and event
111 |
112 |
The <Hotkeys />
component accepts two props and one event called triggered
113 |
114 | - shortcuts
115 | - debug
116 | - @triggered
117 |
118 |
119 |
shortcuts prop accepts array of strings something like :shortcuts="['S', 'D', 'ArrowLeft', 'ArrowRight']"
. These strings/characters are basically keyboard buttons which you want to use to trigger an event. For, A.....Z buttons you can use same name but for using different keys like Arrow Keys (⬅️, ➡️) you have to pass specific values for that please refer this table.
120 |
121 |
Next, debug prop accepts boolean
value. This prop is useful in developement mode where you can see which key has been pressed in the console.
122 | If you are in a production mode then you should have to pass it as a "false" it's recommended.
123 |
124 |
125 |
After that, next is @triggered event in which you have to pass a method which have to call when user press that specific keys. (This is just a event listener if you know the concept of Component Events in Vue). You have to pass name of the method which you have to call after pressing the shortcut keys.
126 |
127 |
128 |
129 |
130 |
Props Table
131 |
132 |
133 |
134 | Key |
135 | String (prop) to be passed |
136 | Code |
137 |
138 |
139 | {{key.name}} |
140 | {{key.prop}} |
141 | {{key.code}} |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
Contributing Guide
149 |
150 |
Do you know Vue.js and would like to contribute?
151 |
152 | Great 🙌 , I'd love to have your help to improve this component. Just clone this repository and send back your contributions as pull requests.
153 |
154 | Wanna chat? 🙂 Drop me a line on Twitter.
155 |
156 |
First, of all Fork this repo, then clone it to your local machine and install the dependencies:
157 |
Note: First, you have to install parcel using yarn because, currently parcel is not working with npm
158 |
> yarn add parcel
159 |
After, doing parcel installation now it's time to install other dependencies
160 |
> npm install
161 |
Now, run below command to start developement server
162 |
> npm run start
163 |
Do, make your changes and after that make Pull Request 🙂.
164 |
165 |
166 |
167 |
168 |
169 |
Contributors
170 |
177 |
178 |
179 |
180 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue/dist/vue.js';
2 | import Hotkeys from '../Hotkeys.vue';
3 |
4 | new Vue({
5 | el: '#app',
6 | components: { Hotkeys },
7 | template:
8 | '\
9 | \
10 | \
15 |
\
16 | '
17 | ,
18 | methods: {
19 | onTriggeredEventHandler(payload) {
20 | document.querySelector('#log').innerHTML = `You have pressed CMD (CTRL) + ${payload.keyString} 🤘`;
21 | } // onTriggeredEventHandler
22 | }
23 | });
24 |
25 | // @ts-ignore
26 | if (module.hot) module.hot.accept();
27 |
--------------------------------------------------------------------------------
/src/styles/main.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap');
2 |
3 | * {
4 | scroll-behavior: smooth;
5 | }
6 |
7 | img {
8 | max-width: 100%;
9 | height: auto;
10 | }
11 |
12 | body {
13 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
14 | sans-serif;
15 | }
16 |
17 | .contributor-icon {
18 | border-radius: 50%;
19 | padding: 7px;
20 | }
21 |
22 | .badge {
23 | background-color: #f6ca2c;
24 | color: white;
25 | font-weight: lighter;
26 | padding: 4px 8px;
27 | text-align: center;
28 | border-radius: 5px;
29 | }
30 |
31 | .hero {
32 | margin: auto;
33 | width: 80%;
34 | padding: 10px;
35 | padding-top: 30px;
36 | text-align: center;
37 | }
38 |
39 | .ul {
40 | padding: 0px;
41 | }
42 |
43 | .li {
44 | display: inline-block;
45 | width: 100px;
46 | list-style-type: circle;
47 | font-weight: bold;
48 | }
49 |
50 | .tryit {
51 | margin: auto;
52 | width: 30%;
53 | border: 3px dashed #42b883;
54 | padding: 15px;
55 | background-color: lightgray;
56 | text-align: center;
57 | }
58 |
59 | .heading {
60 | font-size: 65px;
61 | line-height: 1.25;
62 | font-weight: 900;
63 | letter-spacing: -1.5px;
64 | max-width: 960px;
65 | margin: 0 auto;
66 | color: #213547;
67 | }
68 |
69 | .colorful-heading {
70 | background-image: -webkit-linear-gradient(315deg, rgb(66, 211, 146) 25%, rgb(100, 126, 255));
71 | -webkit-background-clip: text;
72 | -webkit-text-fill-color: transparent;
73 | }
74 |
75 | .docs-btn {
76 | display: inline-block;
77 | outline: none;
78 | cursor: pointer;
79 | font-size: 14px;
80 | line-height: 1;
81 | border-radius: 500px;
82 | transition-property: background-color, border-color, color, box-shadow, filter;
83 | transition-duration: 0.3s;
84 | border: 1px solid transparent;
85 | letter-spacing: 2px;
86 | min-width: 160px;
87 | text-transform: uppercase;
88 | white-space: normal;
89 | font-weight: 700;
90 | text-align: center;
91 | padding: 17px 48px;
92 | color: #fff;
93 | background-color: #42d392;
94 | height: 48px;
95 | }
96 |
97 | .docs-btn :hover {
98 | transform: scale(1.04);
99 | background-color: #21e065;
100 | }
101 |
102 | .dividing-border {
103 | border-bottom: 3px dashed #42b883;
104 | margin: auto;
105 | width: 70%;
106 | padding: 10px;
107 | padding-top: 30px;
108 | }
109 |
110 | #docs {
111 | padding-top: 60px;
112 | margin: auto;
113 | width: 50%;
114 | padding: 10px;
115 | }
116 |
117 | .header-anchor {
118 | opacity: 1;
119 | }
120 |
121 | .subsection {
122 | margin-left: 35px;
123 | margin-top: -10px;
124 | font-size: 18px;
125 | line-height: 25px;
126 | }
127 |
128 | table {
129 | font-family: arial, sans-serif;
130 | border-collapse: collapse;
131 | border: 1px solid black;
132 | width: 100%;
133 | }
134 |
135 | td,
136 | th {
137 | border: 1px solid black;
138 | text-align: center;
139 | padding: 8px;
140 | }
141 |
142 | th {
143 | background-color: #dddddd;
144 | }
145 |
146 | #footer {
147 | padding-top: 80px;
148 | text-align: center;
149 | margin: auto;
150 | }
151 |
152 | .github-icon {
153 | height: 25px;
154 | width: 25px;
155 | margin: 0px 9px 0px 4px;
156 | }
157 |
158 | .npm-icon {
159 | height: 25px;
160 | width: 25px;
161 | }
162 |
163 | .card {
164 | padding: 1rem;
165 | height: 4rem;
166 | }
167 |
168 | .cards {
169 | max-width: 1200px;
170 | margin: 0 auto;
171 | display: grid;
172 | grid-gap: 1rem;
173 | }
174 |
175 | /* Screen larger than 600px? 2 column */
176 | @media (min-width: 600px) {
177 | .cards {
178 | grid-template-columns: repeat(3, 1fr);
179 | }
180 | }
181 |
182 | /* Screen larger than 900px? 3 columns */
183 | @media (min-width: 900px) {
184 | .cards {
185 | grid-template-columns: repeat(3, 1fr);
186 | }
187 | }
188 |
189 | @media only screen and (max-width: 430px) {
190 | .hero {
191 | margin: auto;
192 | width: 90%;
193 | padding: 2px;
194 | padding-top: 30px;
195 | text-align: center;
196 | }
197 |
198 | .heading {
199 | font-size: 45px;
200 | line-height: 1.25;
201 | font-weight: 900;
202 | letter-spacing: -0.5px;
203 | max-width: 960px;
204 | margin: 0 auto;
205 | }
206 |
207 | .tryit {
208 | margin: auto;
209 | width: 80%;
210 | border: 3px dashed #42b883;
211 | padding: 15px;
212 | background-color: lightgray;
213 | text-align: center;
214 | }
215 |
216 | .docs-btn {
217 | margin-right: 10px;
218 | }
219 |
220 | .try-btn {
221 | margin-right: 10px;
222 | }
223 |
224 | .installation-cmds {
225 | width: 80%;
226 | }
227 |
228 | #docs {
229 | width: 90%;
230 | }
231 |
232 | .subsection {
233 | margin-left: 0px;
234 | }
235 |
236 | .card {
237 | padding: 2px;
238 | height: 30px;
239 | }
240 | }
241 |
--------------------------------------------------------------------------------
/src/table.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue/dist/vue.js';
2 |
3 |
4 | new Vue({
5 | el: "#table-app",
6 | data: {
7 | keys: [
8 | {
9 | name: "Arrow Left ⬅️",
10 | prop: "ArrowLeft",
11 | code: 37
12 | },
13 | {
14 | name: "Arrow Up ⬆️",
15 | prop: "ArrowUp",
16 | code: 38
17 | },
18 | {
19 | name: "Arrow Right ➡️",
20 | prop: "ArrowRight",
21 | code: 39
22 | },
23 | {
24 | name: "Arrow Down ⬇️",
25 | prop: "ArrowDown",
26 | code: 40
27 | },
28 | {
29 | name: "A 🅰️",
30 | prop: "A",
31 | code: 65
32 | },
33 | {
34 | name: "B 🅱️",
35 | prop: "B",
36 | code: 66
37 | },
38 | {
39 | name: "C",
40 | prop: "C",
41 | code: 67
42 | },
43 | {
44 | name: "D",
45 | prop: "D",
46 | code: 68
47 | },
48 | {
49 | name: "E",
50 | prop: "E",
51 | code: 69
52 | },
53 | {
54 | name: "F ",
55 | prop: "F",
56 | code: 70
57 | },
58 | {
59 | name: "G",
60 | prop: "G",
61 | code: 71
62 | },
63 | {
64 | name: "H",
65 | prop: "H",
66 | code: 72
67 | },
68 | {
69 | name: "I",
70 | prop: "I",
71 | code: 73
72 | },
73 | {
74 | name: "J",
75 | prop: "J",
76 | code: 74
77 | },
78 | {
79 | name: "K",
80 | prop: "K",
81 | code: 75
82 | },
83 | {
84 | name: "L",
85 | prop: "L",
86 | code: 76
87 | },
88 | {
89 | name: "M",
90 | prop: "M",
91 | code: 77
92 | },
93 | {
94 | name: "N",
95 | prop: "N",
96 | code: 78
97 | },
98 | {
99 | name: "O",
100 | prop: "O",
101 | code: 79
102 | },
103 | {
104 | name: "P",
105 | prop: "P",
106 | code: 80
107 | },
108 | {
109 | name: "Q",
110 | prop: "Q",
111 | code: 81
112 | },
113 | {
114 | name: "R",
115 | prop: "R",
116 | code: 82
117 | },
118 | {
119 | name: "S",
120 | prop: "S",
121 | code: 83
122 | },
123 | {
124 | name: "T",
125 | prop: "T",
126 | code: 84
127 | },
128 | {
129 | name: "U",
130 | prop: "U",
131 | code: 85
132 | },
133 | {
134 | name: "V",
135 | prop: "V",
136 | code: 86
137 | },
138 | {
139 | name: "W",
140 | prop: "W",
141 | code: 87
142 | },
143 | {
144 | name: "X",
145 | prop: "X",
146 | code: 88
147 | },
148 | {
149 | name: "Y",
150 | prop: "Y",
151 | code: 89
152 | },
153 | {
154 | name: "Z",
155 | prop: "Z",
156 | code: 90
157 | },
158 | ]
159 | }
160 | })
--------------------------------------------------------------------------------