ninja-keys - npm Package Compare versions

Comparing version 1.0.0-beta.3 to 1.0.0-beta.4

dist/ninja-header.js

@@ -24,3 +24,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             for (const breadcrumb of this.breadcrumbs) {
-                itemTemplates.push(html `<button tabindex="-1"
+                itemTemplates.push(html `<button
+            tabindex="-1"
             @click=${() => this.selectParent(breadcrumb)}
@@ -33,3 +34,7 @@ class="breadcrumb"
             breadcrumbs = html `<div class="breadcrumb-list">
-        <button tabindex="-1" @click=${() => this.selectParent()} class="breadcrumb">
+        <button
+          tabindex="-1"
+          @click=${() => this.selectParent()}
+          class="breadcrumb"
+        >
           ${this.breadcrumbHome}
@@ -36,0 +41,0 @@ </button>

dist/ninja-keys.bundled.js

@@ -117,2 +117,2 @@ /**
  */
-const ni=ot(class extends rt{constructor(t){if(super(t),t.type!==st&&t.type!==it&&t.type!==nt)throw Error("The `live` directive is not allowed on child or event bindings");if(!lt(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[i]){if(i===O||i===T)return i;const e=t.element,s=t.name;if(t.type===st){if(i===e[s])return O}else if(t.type===nt){if(!!i===e.hasAttribute(s))return O}else if(t.type===it&&e.getAttribute(s)===i+"")return O;return vt(t),i}});var oi=function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,a=t.length-1;a>=0;a--)(n=t[a])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r};let ri=class extends J{constructor(){super(...arguments),this.visible=!1,this.placeholder="Type a command or search...",this.disableHotkeys=!1,this.hideBreadcrumbs=!1,this.openHotkey="cmd+k,ctrl+k",this.navigationUpHotkey="up,shift+tab",this.navigationDownHotkey="down,tab",this.closeHotkey="esc",this.goBackHotkey="backspace",this.selectHotkey="enter",this.data=[],this._bump=!0,this._actionMatches=[],this._search="",this._headerRef=Zt()}get breadcrumbs(){var t;const i=[];let e=null===(t=this._selected)||void 0===t?void 0:t.parent;if(e)for(i.push(e);e;){const t=this.data.find((t=>t.id===e));(null==t?void 0:t.parent)&&i.push(t.parent),e=t?t.parent:void 0}return i.reverse()}open(){this._bump=!0,this.visible=!0,this._headerRef.value.focusSearch()}close(){this._bump=!1,this.visible=!1}setParent(t){this._currentRoot=t||void 0,this._search="",this._headerRef.value.setSearch("")}connectedCallback(){super.connectedCallback(),this._registerInternalHotkeys()}update(t){t.has("data")&&!this.disableHotkeys&&this.data.filter((t=>!!t.hotkey)).forEach((t=>{Kt(t.hotkey,(i=>{i.preventDefault(),t.handler&&t.handler()}))})),super.update(t)}_registerInternalHotkeys(){this.openHotkey&&Kt(this.openHotkey,(t=>{t.preventDefault(),this.visible?this.close():this.open()})),this.selectHotkey&&Kt(this.selectHotkey,(t=>{this.visible&&(t.preventDefault(),this._actionSelected({detail:this._actionMatches[this._selectedIndex]}))})),this.goBackHotkey&&Kt(this.goBackHotkey,(t=>{this.visible&&(this._search||(t.preventDefault(),this._goBack()))})),this.navigationDownHotkey&&Kt(this.navigationDownHotkey,(t=>{this.visible&&(t.preventDefault(),this._selectedIndex>=this._actionMatches.length-1?this._selected=this._actionMatches[0]:this._selected=this._actionMatches[this._selectedIndex+1])})),this.navigationUpHotkey&&Kt(this.navigationUpHotkey,(t=>{this.visible&&(t.preventDefault(),0===this._selectedIndex?this._selected=this._actionMatches[this._actionMatches.length-1]:this._selected=this._actionMatches[this._selectedIndex-1])})),this.closeHotkey&&Kt(this.closeHotkey,(()=>{this.visible&&this.close()}))}_actionFocused(t,i){this._selected=t,i.target.ensureInView()}_onTransitionEnd(){this._bump=!1}_goBack(){const t=this.breadcrumbs.length>1?this.breadcrumbs[this.breadcrumbs.length-2]:void 0;this.setParent(t)}render(){const t={bump:this._bump,"modal-content":!0},i={visible:this.visible,modal:!0};this._actionMatches=this.data.filter((t=>(!this._currentRoot&&this._search||t.parent===this._currentRoot)&&t.title.match(new RegExp(this._search,"gi")))),this._actionMatches.length>0&&-1===this._selectedIndex&&(this._selected=this._actionMatches[0]),0===this._actionMatches.length&&(this._selected=void 0);const e=this._actionMatches.reduce(((t,i)=>t.set(i.section,[...t.get(i.section)||[],i])),new Map),s=t=>E`${mt(t,(t=>t.id),(t=>{var i;return E`<ninja-action .selected="${ni(t.id===(null===(i=this._selected)||void 0===i?void 0:i.id))}" @mouseover="${i=>this._actionFocused(t,i)}" @actionsSelected="${this._actionSelected}" .action="${t}"></ninja-action>`}))}`,n=[];return e.forEach(((t,i)=>{const e=i?E`<div class="group-header">${i}</div>`:void 0;n.push(E`${e}${s(t)}`)})),E`<div @click="${this._overlayClick}" class="${Lt(i)}"><div class="${Lt(t)}" @animationend="${this._onTransitionEnd}"><ninja-header ${Xt(this._headerRef)} .placeholder="${this.placeholder}" .hideBreadcrumbs="${this.hideBreadcrumbs}" .breadcrumbs="${this.breadcrumbs}" @change="${this._handleInput}" @setParent="${t=>this.setParent(t.detail.parent)}" @close="${this.close}"></ninja-header><div class="modal-body"><div class="actions-list">${n}</div></div><slot name="footer"><div class="modal-footer" slot="footer"><span class="help"><svg version="1.0" class="ninja-examplekey" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1280"><path d="M1013 376c0 73.4-.4 113.3-1.1 120.2a159.9 159.9 0 0 1-90.2 127.3c-20 9.6-36.7 14-59.2 15.5-7.1.5-121.9.9-255 1h-242l95.5-95.5 95.5-95.5-38.3-38.2-38.2-38.3-160 160c-88 88-160 160.4-160 161 0 .6 72 73 160 161l160 160 38.2-38.3 38.3-38.2-95.5-95.5-95.5-95.5h251.1c252.9 0 259.8-.1 281.4-3.6 72.1-11.8 136.9-54.1 178.5-116.4 8.6-12.9 22.6-40.5 28-55.4 4.4-12 10.7-36.1 13.1-50.6 1.6-9.6 1.8-21 2.1-132.8l.4-122.2H1013v110z"/></svg> to select </span><span class="help"><svg xmlns="http://www.w3.org/2000/svg" class="ninja-examplekey" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" class="ninja-examplekey" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg> to navigate </span><span class="help"><span class="ninja-examplekey esc">esc</span> to close </span><span class="help"><svg xmlns="http://www.w3.org/2000/svg" class="ninja-examplekey" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"/></svg> move to parent</span></div></slot></div></div>`}get _selectedIndex(){return this._selected?this._actionMatches.indexOf(this._selected):-1}_actionSelected(t){var i;if(t.detail.children&&(null===(i=t.detail.children)||void 0===i?void 0:i.length)>0&&(this._currentRoot=t.detail.id,this._search=""),this._headerRef.value.setSearch(""),this._headerRef.value.focusSearch(),t.detail.handler){const i=t.detail.handler();(null==i?void 0:i.keepOpen)||this.close()}this._bump=!0}_handleInput(t){this._search=t.detail.search}_overlayClick(t){var i;(null===(i=t.target)||void 0===i?void 0:i.classList.contains("modal"))&&this.close()}};ri.styles=n`:host{--ninja-width:640px;--ninja-backdrop-filter:saturate(180%) blur(2px);--ninja-overflow-background:rgba(255, 255, 255, 0.5);--ninja-text-color:rgb(60, 65, 73);--ninja-font-family:'Inter';--ninja-font-size:16px;--ninja-top:20%;--ninja-key-border-radius:0.25em;--ninja-accent-color:rgb(110, 94, 210);--ninja-secondary-background-color:rgb(239, 241, 244);--ninja-secondary-text-color:rgb(107, 111, 118);--ninja-selected-background:rgb(248, 249, 251);--ninja-icon-color:var(--ninja-secondary-text-color);--ninja-separate-border:1px solid var(--ninja-secondary-background-color);--ninja-modal-background:#fff;--ninja-modal-shadow:rgb(0 0 0 / 50%) 0px 16px 70px;--ninja-actions-height:300px;--ninja-group-text-color:rgb(144, 149, 157);--ninja-footer-background:rgba(242, 242, 242, 0.4);font-size:var(--ninja-font-size)}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background:var(--ninja-overflow-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;backdrop-filter:var(--ninja-backdrop-filter);text-align:left;color:var(--ninja-text-color);font-family:var(--ninja-font-family)}.modal.visible{display:block}.modal-content{position:relative;top:var(--ninja-top);margin:auto;padding:0;display:flex;flex-direction:column;flex-shrink:1;-webkit-box-flex:1;flex-grow:1;min-width:0;will-change:transform;background:var(--ninja-modal-background);border-radius:.5em;box-shadow:var(--ninja-modal-shadow);max-width:var(--ninja-width);overflow:hidden}.bump{animation:zoom-in-zoom-out .2s ease}@keyframes zoom-in-zoom-out{0%{transform:scale(.99)}50%{transform:scale(1.01,1.01)}100%{transform:scale(1,1)}}.ninja-github{color:var(--ninja-keys-text-color);font-weight:400;text-decoration:none}.actions-list{max-height:var(--ninja-actions-height);overflow:auto;scroll-behavior:smooth;position:relative;margin:0;padding:.5em 0;list-style:none;scroll-behavior:smooth}.group-header{height:1.375em;line-height:1.375em;padding-left:1.25em;padding-top:.5em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:.75em;line-height:1em;color:var(--ninja-group-text-color);margin:1px 0}.modal-footer{background:var(--ninja-footer-background);padding:.5em 1em;display:flex;border-top:var(--ninja-separate-border);color:var(--ninja-secondary-text-color)}.modal-footer .help{display:flex;margin-right:1em;align-items:center;font-size:.75em}.ninja-examplekey{background:var(--ninja-secondary-background-color);padding:.06em .25em;border-radius:var(--ninja-key-border-radius);color:var(--ninja-secondary-text-color);width:1em;height:1em;margin-right:.5em;font-size:1.25em;fill:currentColor}.ninja-examplekey.esc{width:auto;height:auto;font-size:1.1em}`,oi([Y({type:Boolean})],ri.prototype,"visible",void 0),oi([Y({type:String})],ri.prototype,"placeholder",void 0),oi([Y({type:Boolean})],ri.prototype,"disableHotkeys",void 0),oi([Y({type:Boolean})],ri.prototype,"hideBreadcrumbs",void 0),oi([Y()],ri.prototype,"openHotkey",void 0),oi([Y()],ri.prototype,"navigationUpHotkey",void 0),oi([Y()],ri.prototype,"navigationDownHotkey",void 0),oi([Y()],ri.prototype,"closeHotkey",void 0),oi([Y()],ri.prototype,"goBackHotkey",void 0),oi([Y()],ri.prototype,"selectHotkey",void 0),oi([Y({type:Array})],ri.prototype,"data",void 0),oi([tt()],ri.prototype,"_bump",void 0),oi([tt()],ri.prototype,"_actionMatches",void 0),oi([tt()],ri.prototype,"_search",void 0),oi([tt()],ri.prototype,"_currentRoot",void 0),oi([tt()],ri.prototype,"breadcrumbs",null),oi([tt()],ri.prototype,"_selected",void 0),ri=oi([X("ninja-keys")],ri);export{ri as NinjaKeys};
+const ni=ot(class extends rt{constructor(t){if(super(t),t.type!==st&&t.type!==it&&t.type!==nt)throw Error("The `live` directive is not allowed on child or event bindings");if(!lt(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[i]){if(i===O||i===T)return i;const e=t.element,s=t.name;if(t.type===st){if(i===e[s])return O}else if(t.type===nt){if(!!i===e.hasAttribute(s))return O}else if(t.type===it&&e.getAttribute(s)===i+"")return O;return vt(t),i}}),oi=E`<div class="modal-footer" slot="footer"><span class="help"><svg version="1.0" class="ninja-examplekey" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1280"><path d="M1013 376c0 73.4-.4 113.3-1.1 120.2a159.9 159.9 0 0 1-90.2 127.3c-20 9.6-36.7 14-59.2 15.5-7.1.5-121.9.9-255 1h-242l95.5-95.5 95.5-95.5-38.3-38.2-38.2-38.3-160 160c-88 88-160 160.4-160 161 0 .6 72 73 160 161l160 160 38.2-38.3 38.3-38.2-95.5-95.5-95.5-95.5h251.1c252.9 0 259.8-.1 281.4-3.6 72.1-11.8 136.9-54.1 178.5-116.4 8.6-12.9 22.6-40.5 28-55.4 4.4-12 10.7-36.1 13.1-50.6 1.6-9.6 1.8-21 2.1-132.8l.4-122.2H1013v110z"/></svg> to select </span><span class="help"><svg xmlns="http://www.w3.org/2000/svg" class="ninja-examplekey" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" class="ninja-examplekey" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg> to navigate </span><span class="help"><span class="ninja-examplekey esc">esc</span> to close </span><span class="help"><svg xmlns="http://www.w3.org/2000/svg" class="ninja-examplekey" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"/></svg> move to parent</span></div>`,ri=n`:host{--ninja-width:640px;--ninja-backdrop-filter:saturate(180%) blur(2px);--ninja-overflow-background:rgba(255, 255, 255, 0.5);--ninja-text-color:rgb(60, 65, 73);--ninja-font-family:'Inter';--ninja-font-size:16px;--ninja-top:20%;--ninja-key-border-radius:0.25em;--ninja-accent-color:rgb(110, 94, 210);--ninja-secondary-background-color:rgb(239, 241, 244);--ninja-secondary-text-color:rgb(107, 111, 118);--ninja-selected-background:rgb(248, 249, 251);--ninja-icon-color:var(--ninja-secondary-text-color);--ninja-separate-border:1px solid var(--ninja-secondary-background-color);--ninja-modal-background:#fff;--ninja-modal-shadow:rgb(0 0 0 / 50%) 0px 16px 70px;--ninja-actions-height:300px;--ninja-group-text-color:rgb(144, 149, 157);--ninja-footer-background:rgba(242, 242, 242, 0.4);font-size:var(--ninja-font-size)}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background:var(--ninja-overflow-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;backdrop-filter:var(--ninja-backdrop-filter);text-align:left;color:var(--ninja-text-color);font-family:var(--ninja-font-family)}.modal.visible{display:block}.modal-content{position:relative;top:var(--ninja-top);margin:auto;padding:0;display:flex;flex-direction:column;flex-shrink:1;-webkit-box-flex:1;flex-grow:1;min-width:0;will-change:transform;background:var(--ninja-modal-background);border-radius:.5em;box-shadow:var(--ninja-modal-shadow);max-width:var(--ninja-width);overflow:hidden}.bump{animation:zoom-in-zoom-out .2s ease}@keyframes zoom-in-zoom-out{0%{transform:scale(.99)}50%{transform:scale(1.01,1.01)}100%{transform:scale(1,1)}}.ninja-github{color:var(--ninja-keys-text-color);font-weight:400;text-decoration:none}.actions-list{max-height:var(--ninja-actions-height);overflow:auto;scroll-behavior:smooth;position:relative;margin:0;padding:.5em 0;list-style:none;scroll-behavior:smooth}.group-header{height:1.375em;line-height:1.375em;padding-left:1.25em;padding-top:.5em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:.75em;line-height:1em;color:var(--ninja-group-text-color);margin:1px 0}.modal-footer{background:var(--ninja-footer-background);padding:.5em 1em;display:flex;border-top:var(--ninja-separate-border);color:var(--ninja-secondary-text-color)}.modal-footer .help{display:flex;margin-right:1em;align-items:center;font-size:.75em}.ninja-examplekey{background:var(--ninja-secondary-background-color);padding:.06em .25em;border-radius:var(--ninja-key-border-radius);color:var(--ninja-secondary-text-color);width:1em;height:1em;margin-right:.5em;font-size:1.25em;fill:currentColor}.ninja-examplekey.esc{width:auto;height:auto;font-size:1.1em}`;var ai=function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,a=t.length-1;a>=0;a--)(n=t[a])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r};let li=class extends J{constructor(){super(...arguments),this.visible=!1,this.placeholder="Type a command or search...",this.disableHotkeys=!1,this.hideBreadcrumbs=!1,this.openHotkey="cmd+k,ctrl+k",this.navigationUpHotkey="up,shift+tab",this.navigationDownHotkey="down,tab",this.closeHotkey="esc",this.goBackHotkey="backspace",this.selectHotkey="enter",this.data=[],this._bump=!0,this._actionMatches=[],this._search="",this._headerRef=Zt()}open(){this._bump=!0,this.visible=!0,this._headerRef.value.focusSearch()}close(){this._bump=!1,this.visible=!1}setParent(t){this._currentRoot=t||void 0,this._search="",this._headerRef.value.setSearch("")}get breadcrumbs(){var t;const i=[];let e=null===(t=this._selected)||void 0===t?void 0:t.parent;if(e)for(i.push(e);e;){const t=this.data.find((t=>t.id===e));(null==t?void 0:t.parent)&&i.push(t.parent),e=t?t.parent:void 0}return i.reverse()}connectedCallback(){super.connectedCallback(),this._registerInternalHotkeys()}update(t){t.has("data")&&!this.disableHotkeys&&this.data.filter((t=>!!t.hotkey)).forEach((t=>{Kt(t.hotkey,(i=>{i.preventDefault(),t.handler&&t.handler()}))})),super.update(t)}_registerInternalHotkeys(){this.openHotkey&&Kt(this.openHotkey,(t=>{t.preventDefault(),this.visible?this.close():this.open()})),this.selectHotkey&&Kt(this.selectHotkey,(t=>{this.visible&&(t.preventDefault(),this._actionSelected({detail:this._actionMatches[this._selectedIndex]}))})),this.goBackHotkey&&Kt(this.goBackHotkey,(t=>{this.visible&&(this._search||(t.preventDefault(),this._goBack()))})),this.navigationDownHotkey&&Kt(this.navigationDownHotkey,(t=>{this.visible&&(t.preventDefault(),this._selectedIndex>=this._actionMatches.length-1?this._selected=this._actionMatches[0]:this._selected=this._actionMatches[this._selectedIndex+1])})),this.navigationUpHotkey&&Kt(this.navigationUpHotkey,(t=>{this.visible&&(t.preventDefault(),0===this._selectedIndex?this._selected=this._actionMatches[this._actionMatches.length-1]:this._selected=this._actionMatches[this._selectedIndex-1])})),this.closeHotkey&&Kt(this.closeHotkey,(()=>{this.visible&&this.close()}))}_actionFocused(t,i){this._selected=t,i.target.ensureInView()}_onTransitionEnd(){this._bump=!1}_goBack(){const t=this.breadcrumbs.length>1?this.breadcrumbs[this.breadcrumbs.length-2]:void 0;this.setParent(t)}render(){const t={bump:this._bump,"modal-content":!0},i={visible:this.visible,modal:!0};this._actionMatches=this.data.filter((t=>(!this._currentRoot&&this._search||t.parent===this._currentRoot)&&t.title.match(new RegExp(this._search,"gi")))),this._actionMatches.length>0&&-1===this._selectedIndex&&(this._selected=this._actionMatches[0]),0===this._actionMatches.length&&(this._selected=void 0);const e=this._actionMatches.reduce(((t,i)=>t.set(i.section,[...t.get(i.section)||[],i])),new Map),s=t=>E`${mt(t,(t=>t.id),(t=>{var i;return E`<ninja-action .selected="${ni(t.id===(null===(i=this._selected)||void 0===i?void 0:i.id))}" @mouseover="${i=>this._actionFocused(t,i)}" @actionsSelected="${this._actionSelected}" .action="${t}"></ninja-action>`}))}`,n=[];return e.forEach(((t,i)=>{const e=i?E`<div class="group-header">${i}</div>`:void 0;n.push(E`${e}${s(t)}`)})),E`<div @click="${this._overlayClick}" class="${Lt(i)}"><div class="${Lt(t)}" @animationend="${this._onTransitionEnd}"><ninja-header ${Xt(this._headerRef)} .placeholder="${this.placeholder}" .hideBreadcrumbs="${this.hideBreadcrumbs}" .breadcrumbs="${this.breadcrumbs}" @change="${this._handleInput}" @setParent="${t=>this.setParent(t.detail.parent)}" @close="${this.close}"></ninja-header><div class="modal-body"><div class="actions-list">${n}</div></div><slot name="footer">${oi}</slot></div></div>`}get _selectedIndex(){return this._selected?this._actionMatches.indexOf(this._selected):-1}_actionSelected(t){var i;if(t.detail.children&&(null===(i=t.detail.children)||void 0===i?void 0:i.length)>0&&(this._currentRoot=t.detail.id,this._search=""),this._headerRef.value.setSearch(""),this._headerRef.value.focusSearch(),t.detail.handler){const i=t.detail.handler();(null==i?void 0:i.keepOpen)||this.close()}this._bump=!0}_handleInput(t){this._search=t.detail.search}_overlayClick(t){var i;(null===(i=t.target)||void 0===i?void 0:i.classList.contains("modal"))&&this.close()}};li.styles=[ri],ai([Y({type:Boolean})],li.prototype,"visible",void 0),ai([Y({type:String})],li.prototype,"placeholder",void 0),ai([Y({type:Boolean})],li.prototype,"disableHotkeys",void 0),ai([Y({type:Boolean})],li.prototype,"hideBreadcrumbs",void 0),ai([Y()],li.prototype,"openHotkey",void 0),ai([Y()],li.prototype,"navigationUpHotkey",void 0),ai([Y()],li.prototype,"navigationDownHotkey",void 0),ai([Y()],li.prototype,"closeHotkey",void 0),ai([Y()],li.prototype,"goBackHotkey",void 0),ai([Y()],li.prototype,"selectHotkey",void 0),ai([Y({type:Array})],li.prototype,"data",void 0),ai([tt()],li.prototype,"_bump",void 0),ai([tt()],li.prototype,"_actionMatches",void 0),ai([tt()],li.prototype,"_search",void 0),ai([tt()],li.prototype,"_currentRoot",void 0),ai([tt()],li.prototype,"breadcrumbs",null),ai([tt()],li.prototype,"_selected",void 0),li=ai([X("ninja-keys")],li);export{li as NinjaKeys};

dist/ninja-keys.d.ts

@@ -6,3 +6,3 @@ import { LitElement, TemplateResult, PropertyValues } from 'lit';
 export declare class NinjaKeys extends LitElement {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     /**
@@ -53,10 +53,4 @@ * Show or hide element
     /**
-     * Temproray used for animation effect. TODO: change to animate logic
+     * Public methods
      */
-    private _bump;
-    private _actionMatches;
-    private _search;
-    private _currentRoot?;
-    private get breadcrumbs();
-    private _selected?;
     /**
@@ -70,3 +64,16 @@ * Show a modal
     close(): void;
+    /**
+     * Navigate to group of actions
+     * @param parent id of parent group/action
+     */
     setParent(parent?: string): void;
+    /**
+     * Temproray used for animation effect. TODO: change to animate logic
+     */
+    private _bump;
+    private _actionMatches;
+    private _search;
+    private _currentRoot?;
+    private get breadcrumbs();
+    private _selected?;
     connectedCallback(): void;
@@ -73,0 +80,0 @@ update(changedProperties: PropertyValues<this>): void;

dist/ninja-keys.js

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { LitElement, html, css } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -17,2 +17,4 @@ import { repeat } from 'lit/directives/repeat.js';
 import { createRef, ref } from 'lit-html/directives/ref.js';
+import { footerHtml } from './ninja-footer';
+import { baseStyles } from './base-styles';
 let NinjaKeys = class NinjaKeys extends LitElement {
@@ -73,19 +75,6 @@ constructor() {
     }
-    get breadcrumbs() {
-        var _a;
-        const path = [];
-        let parentAction = (_a = this._selected) === null || _a === void 0 ? void 0 : _a.parent;
-        if (parentAction) {
-            path.push(parentAction);
-            while (parentAction) {
-                const action = this.data.find((a) => a.id === parentAction);
-                if (action === null || action === void 0 ? void 0 : action.parent) {
-                    path.push(action.parent);
-                }
-                parentAction = action ? action.parent : undefined;
-            }
-        }
-        return path.reverse();
-    }
     /**
+     * Public methods
+     */
+    /**
      * Show a modal
@@ -105,2 +94,6 @@ */
     }
+    /**
+     * Navigate to group of actions
+     * @param parent id of parent group/action
+     */
     setParent(parent) {
@@ -117,2 +110,18 @@ if (!parent) {
     }
+    get breadcrumbs() {
+        var _a;
+        const path = [];
+        let parentAction = (_a = this._selected) === null || _a === void 0 ? void 0 : _a.parent;
+        if (parentAction) {
+            path.push(parentAction);
+            while (parentAction) {
+                const action = this.data.find((a) => a.id === parentAction);
+                if (action === null || action === void 0 ? void 0 : action.parent) {
+                    path.push(action.parent);
+                }
+                parentAction = action ? action.parent : undefined;
+            }
+        }
+        return path.reverse();
+    }
     connectedCallback() {
@@ -273,62 +282,3 @@ super.connectedCallback();
           </div>
-          <slot name="footer">
-            <div class="modal-footer" slot="footer">
-              <span class="help">
-                <svg
-                  version="1.0"
-                  class="ninja-examplekey"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 1280 1280"
-                >
-                  <path
-                    d="M1013 376c0 73.4-.4 113.3-1.1 120.2a159.9 159.9 0 0 1-90.2 127.3c-20 9.6-36.7 14-59.2 15.5-7.1.5-121.9.9-255 1h-242l95.5-95.5 95.5-95.5-38.3-38.2-38.2-38.3-160 160c-88 88-160 160.4-160 161 0 .6 72 73 160 161l160 160 38.2-38.3 38.3-38.2-95.5-95.5-95.5-95.5h251.1c252.9 0 259.8-.1 281.4-3.6 72.1-11.8 136.9-54.1 178.5-116.4 8.6-12.9 22.6-40.5 28-55.4 4.4-12 10.7-36.1 13.1-50.6 1.6-9.6 1.8-21 2.1-132.8l.4-122.2H1013v110z"
-                  />
-                </svg>
-
-                to select
-              </span>
-              <span class="help">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="ninja-examplekey"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M0 0h24v24H0V0z" fill="none" />
-                  <path
-                    d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                  />
-                </svg>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="ninja-examplekey"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M0 0h24v24H0V0z" fill="none" />
-                  <path
-                    d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
-                  />
-                </svg>
-                to navigate
-              </span>
-              <span class="help">
-                <span class="ninja-examplekey esc">esc</span>
-                to close
-              </span>
-              <span class="help">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="ninja-examplekey"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-                move to parent
-              </span>
-            </div>
-          </slot>
+          <slot name="footer"> ${footerHtml} </slot>
         </div>
@@ -370,153 +320,3 @@ </div>
 };
-NinjaKeys.styles = css `
-    :host {
-      --ninja-width: 640px;
-      --ninja-backdrop-filter: saturate(180%) blur(2px);
-      --ninja-overflow-background: rgba(255, 255, 255, 0.5);
-      --ninja-text-color: rgb(60, 65, 73);
-      --ninja-font-family: 'Inter';
-      --ninja-font-size: 16px;
-      --ninja-top: 20%;
-
-      --ninja-key-border-radius: 0.25em;
-      --ninja-accent-color: rgb(110, 94, 210);
-      --ninja-secondary-background-color: rgb(239, 241, 244);
-      --ninja-secondary-text-color: rgb(107, 111, 118);
-
-      --ninja-selected-background: rgb(248, 249, 251);
-
-      --ninja-icon-color: var(--ninja-secondary-text-color);
-      --ninja-separate-border: 1px solid var(--ninja-secondary-background-color);
-
-      --ninja-modal-background: #fff;
-      --ninja-modal-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
-
-      --ninja-actions-height: 300px;
-      --ninja-group-text-color: rgb(144, 149, 157);
-
-      --ninja-footer-background: rgba(242, 242, 242, 0.4);
-
-      font-size: var(--ninja-font-size);
-    }
-
-    .modal {
-      display: none;
-      position: fixed;
-      z-index: 1;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-      background: var(--ninja-overflow-background);
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      backdrop-filter: var(--ninja-backdrop-filter);
-      text-align: left;
-      color: var(--ninja-text-color);
-      font-family: var(--ninja-font-family);
-    }
-    .modal.visible {
-      display: block;
-    }
-
-    .modal-content {
-      position: relative;
-      top: var(--ninja-top);
-      margin: auto;
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-      flex-shrink: 1;
-      -webkit-box-flex: 1;
-      flex-grow: 1;
-      min-width: 0px;
-      will-change: transform;
-      background: var(--ninja-modal-background);
-      border-radius: 0.5em;
-      box-shadow: var(--ninja-modal-shadow);
-      max-width: var(--ninja-width);
-      overflow: hidden;
-    }
-
-    .bump {
-      animation: zoom-in-zoom-out 0.2s ease;
-    }
-
-    @keyframes zoom-in-zoom-out {
-      0% {
-        transform: scale(0.99);
-      }
-      50% {
-        transform: scale(1.01, 1.01);
-      }
-      100% {
-        transform: scale(1, 1);
-      }
-    }
-
-    .ninja-github {
-      color: var(--ninja-keys-text-color);
-      font-weight: normal;
-      text-decoration: none;
-    }
-
-    .actions-list {
-      max-height: var(--ninja-actions-height);
-      overflow: auto;
-      scroll-behavior: smooth;
-      position: relative;
-      margin: 0;
-      padding: 0.5em 0;
-      list-style: none;
-      scroll-behavior: smooth;
-    }
-
-    .group-header {
-      height: 1.375em;
-      line-height: 1.375em;
-      padding-left: 1.25em;
-      padding-top: 0.5em;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      font-size: 0.75em;
-      line-height: 1em;
-      color: var(--ninja-group-text-color);
-      margin: 1px 0;
-    }
-
-    .modal-footer {
-      background: var(--ninja-footer-background);
-      padding: 0.5em 1em;
-      display: flex;
-      /* font-size: 0.75em; */
-      border-top: var(--ninja-separate-border);
-      color: var(--ninja-secondary-text-color);
-    }
-
-    .modal-footer .help {
-      display: flex;
-      margin-right: 1em;
-      align-items: center;
-      font-size: 0.75em;
-    }
-
-    .ninja-examplekey {
-      background: var(--ninja-secondary-background-color);
-      padding: 0.06em 0.25em;
-      border-radius: var(--ninja-key-border-radius);
-      color: var(--ninja-secondary-text-color);
-      width: 1em;
-      height: 1em;
-      margin-right: 0.5em;
-      font-size: 1.25em;
-      fill: currentColor;
-    }
-    .ninja-examplekey.esc {
-      width: auto;
-      height: auto;
-      font-size: 1.1em;
-    }
-  `;
+NinjaKeys.styles = [baseStyles];
 __decorate([
@@ -523,0 +323,0 @@ property({ type: Boolean })

package.json

 {
   "name": "ninja-keys",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Ninja Keys",
@@ -35,4 +35,5 @@ "main": "dist/ninja-keys.js",
   "scripts": {
-    "publish": "npm run bundle && clean-publish"
+    "prepublish": "npm run build && npm run bundle",
+    "publish": "clean-publish"
   }
 }

src/ninja-header.ts

@@ -72,3 +72,4 @@ import {LitElement, html, css, TemplateResult} from 'lit';
         itemTemplates.push(
-          html`<button tabindex="-1"
+          html`<button
+            tabindex="-1"
             @click=${() => this.selectParent(breadcrumb)}
@@ -82,3 +83,7 @@ class="breadcrumb"
       breadcrumbs = html`<div class="breadcrumb-list">
-        <button tabindex="-1" @click=${() => this.selectParent()} class="breadcrumb">
+        <button
+          tabindex="-1"
+          @click=${() => this.selectParent()}
+          class="breadcrumb"
+        >
           ${this.breadcrumbHome}
@@ -85,0 +90,0 @@ </button>

src/ninja-keys.ts

@@ -1,2 +0,2 @@
-import {LitElement, html, css, TemplateResult, PropertyValues} from 'lit';
+import {LitElement, html, TemplateResult, PropertyValues} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
@@ -13,162 +13,13 @@ import {repeat} from 'lit/directives/repeat.js';
 import {NinjaAction} from './ninja-action';
+import {footerHtml} from './ninja-footer';
+import {baseStyles} from './base-styles';
 
 @customElement('ninja-keys')
 export class NinjaKeys extends LitElement {
-  static override styles = css`
-    :host {
-      --ninja-width: 640px;
-      --ninja-backdrop-filter: saturate(180%) blur(2px);
-      --ninja-overflow-background: rgba(255, 255, 255, 0.5);
-      --ninja-text-color: rgb(60, 65, 73);
-      --ninja-font-family: 'Inter';
-      --ninja-font-size: 16px;
-      --ninja-top: 20%;
+  static override styles = [baseStyles];
 
-      --ninja-key-border-radius: 0.25em;
-      --ninja-accent-color: rgb(110, 94, 210);
-      --ninja-secondary-background-color: rgb(239, 241, 244);
-      --ninja-secondary-text-color: rgb(107, 111, 118);
-
-      --ninja-selected-background: rgb(248, 249, 251);
-
-      --ninja-icon-color: var(--ninja-secondary-text-color);
-      --ninja-separate-border: 1px solid var(--ninja-secondary-background-color);
-
-      --ninja-modal-background: #fff;
-      --ninja-modal-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
-
-      --ninja-actions-height: 300px;
-      --ninja-group-text-color: rgb(144, 149, 157);
-
-      --ninja-footer-background: rgba(242, 242, 242, 0.4);
-
-      font-size: var(--ninja-font-size);
-    }
-
-    .modal {
-      display: none;
-      position: fixed;
-      z-index: 1;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-      background: var(--ninja-overflow-background);
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      backdrop-filter: var(--ninja-backdrop-filter);
-      text-align: left;
-      color: var(--ninja-text-color);
-      font-family: var(--ninja-font-family);
-    }
-    .modal.visible {
-      display: block;
-    }
-
-    .modal-content {
-      position: relative;
-      top: var(--ninja-top);
-      margin: auto;
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-      flex-shrink: 1;
-      -webkit-box-flex: 1;
-      flex-grow: 1;
-      min-width: 0px;
-      will-change: transform;
-      background: var(--ninja-modal-background);
-      border-radius: 0.5em;
-      box-shadow: var(--ninja-modal-shadow);
-      max-width: var(--ninja-width);
-      overflow: hidden;
-    }
-
-    .bump {
-      animation: zoom-in-zoom-out 0.2s ease;
-    }
-
-    @keyframes zoom-in-zoom-out {
-      0% {
-        transform: scale(0.99);
-      }
-      50% {
-        transform: scale(1.01, 1.01);
-      }
-      100% {
-        transform: scale(1, 1);
-      }
-    }
-
-    .ninja-github {
-      color: var(--ninja-keys-text-color);
-      font-weight: normal;
-      text-decoration: none;
-    }
-
-    .actions-list {
-      max-height: var(--ninja-actions-height);
-      overflow: auto;
-      scroll-behavior: smooth;
-      position: relative;
-      margin: 0;
-      padding: 0.5em 0;
-      list-style: none;
-      scroll-behavior: smooth;
-    }
-
-    .group-header {
-      height: 1.375em;
-      line-height: 1.375em;
-      padding-left: 1.25em;
-      padding-top: 0.5em;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      font-size: 0.75em;
-      line-height: 1em;
-      color: var(--ninja-group-text-color);
-      margin: 1px 0;
-    }
-
-    .modal-footer {
-      background: var(--ninja-footer-background);
-      padding: 0.5em 1em;
-      display: flex;
-      /* font-size: 0.75em; */
-      border-top: var(--ninja-separate-border);
-      color: var(--ninja-secondary-text-color);
-    }
-
-    .modal-footer .help {
-      display: flex;
-      margin-right: 1em;
-      align-items: center;
-      font-size: 0.75em;
-    }
-
-    .ninja-examplekey {
-      background: var(--ninja-secondary-background-color);
-      padding: 0.06em 0.25em;
-      border-radius: var(--ninja-key-border-radius);
-      color: var(--ninja-secondary-text-color);
-      width: 1em;
-      height: 1em;
-      margin-right: 0.5em;
-      font-size: 1.25em;
-      fill: currentColor;
-    }
-    .ninja-examplekey.esc {
-      width: auto;
-      height: auto;
-      font-size: 1.1em;
-    }
-  `;
-
   /**
    * Show or hide element
    */
-  @property({type: Boolean})
-  visible = false;
+  @property({type: Boolean}) visible = false;
 
@@ -178,4 +29,3 @@ /**
    */
-  @property({type: String})
-  placeholder = 'Type a command or search...';
+  @property({type: String}) placeholder = 'Type a command or search...';
 
@@ -185,4 +35,3 @@ /**
    */
-  @property({type: Boolean})
-  disableHotkeys = false;
+  @property({type: Boolean}) disableHotkeys = false;
 
@@ -192,4 +41,3 @@ /**
    */
-  @property({type: Boolean})
-  hideBreadcrumbs = false;
+  @property({type: Boolean}) hideBreadcrumbs = false;
 
@@ -199,4 +47,3 @@ /**
    */
-  @property()
-  openHotkey = 'cmd+k,ctrl+k';
+  @property() openHotkey = 'cmd+k,ctrl+k';
 
@@ -206,4 +53,3 @@ /**
    */
-  @property()
-  navigationUpHotkey = 'up,shift+tab';
+  @property() navigationUpHotkey = 'up,shift+tab';
 
@@ -213,4 +59,3 @@ /**
    */
-  @property()
-  navigationDownHotkey = 'down,tab';
+  @property() navigationDownHotkey = 'down,tab';
 
@@ -220,4 +65,3 @@ /**
    */
-  @property()
-  closeHotkey = 'esc';
+  @property() closeHotkey = 'esc';
 
@@ -227,4 +71,3 @@ /**
    */
-  @property()
-  goBackHotkey = 'backspace';
+  @property() goBackHotkey = 'backspace';
 
@@ -234,4 +77,3 @@ /**
    */
-  @property()
-  selectHotkey = 'enter'; // enter,space
+  @property() selectHotkey = 'enter'; // enter,space
 
@@ -241,6 +83,41 @@ /**
    */
-  @property({type: Array})
-  data = [] as Array<INinjaAction>;
+  @property({type: Array}) data = [] as Array<INinjaAction>;
 
   /**
+   * Public methods
+   */
+
+  /**
+   * Show a modal
+   */
+  open() {
+    this._bump = true;
+    this.visible = true;
+    this._headerRef.value!.focusSearch();
+  }
+
+  /**
+   * Close modal
+   */
+  close() {
+    this._bump = false;
+    this.visible = false;
+  }
+
+  /**
+   * Navigate to group of actions
+   * @param parent id of parent group/action
+   */
+  setParent(parent?: string) {
+    if (!parent) {
+      this._currentRoot = undefined;
+      // this.breadcrumbs = [];
+    } else {
+      this._currentRoot = parent;
+    }
+    this._search = '';
+    this._headerRef.value!.setSearch('');
+  }
+
+  /**
    * Temproray used for animation effect. TODO: change to animate logic
@@ -280,30 +157,2 @@ */
 
-  /**
-   * Show a modal
-   */
-  open() {
-    this._bump = true;
-    this.visible = true;
-    this._headerRef.value!.focusSearch();
-  }
-
-  /**
-   * Close modal
-   */
-  close() {
-    this._bump = false;
-    this.visible = false;
-  }
-
-  setParent(parent?: string) {
-    if (!parent) {
-      this._currentRoot = undefined;
-      // this.breadcrumbs = [];
-    } else {
-      this._currentRoot = parent;
-    }
-    this._search = '';
-    this._headerRef.value!.setSearch('');
-  }
-
   override connectedCallback() {
@@ -495,62 +344,3 @@ super.connectedCallback();
           </div>
-          <slot name="footer">
-            <div class="modal-footer" slot="footer">
-              <span class="help">
-                <svg
-                  version="1.0"
-                  class="ninja-examplekey"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 1280 1280"
-                >
-                  <path
-                    d="M1013 376c0 73.4-.4 113.3-1.1 120.2a159.9 159.9 0 0 1-90.2 127.3c-20 9.6-36.7 14-59.2 15.5-7.1.5-121.9.9-255 1h-242l95.5-95.5 95.5-95.5-38.3-38.2-38.2-38.3-160 160c-88 88-160 160.4-160 161 0 .6 72 73 160 161l160 160 38.2-38.3 38.3-38.2-95.5-95.5-95.5-95.5h251.1c252.9 0 259.8-.1 281.4-3.6 72.1-11.8 136.9-54.1 178.5-116.4 8.6-12.9 22.6-40.5 28-55.4 4.4-12 10.7-36.1 13.1-50.6 1.6-9.6 1.8-21 2.1-132.8l.4-122.2H1013v110z"
-                  />
-                </svg>
-
-                to select
-              </span>
-              <span class="help">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="ninja-examplekey"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M0 0h24v24H0V0z" fill="none" />
-                  <path
-                    d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                  />
-                </svg>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="ninja-examplekey"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M0 0h24v24H0V0z" fill="none" />
-                  <path
-                    d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
-                  />
-                </svg>
-                to navigate
-              </span>
-              <span class="help">
-                <span class="ninja-examplekey esc">esc</span>
-                to close
-              </span>
-              <span class="help">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="ninja-examplekey"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-                move to parent
-              </span>
-            </div>
-          </slot>
+          <slot name="footer"> ${footerHtml} </slot>
         </div>
@@ -557,0 +347,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

163584

increased by5.11%

Number of package files

44

increased by69.23%

Lines of code

2729

increased by6.52%

No dependency changes