ninja-keys
Advanced tools
ninja-keys - npm Package Compare versions
Comparing version 1.1.7 to 1.1.8
@@ -30,2 +30,4 @@ import { css } from 'lit'; | ||
| --ninja-placeholder-color: #8e8e8e; | ||
| font-size: var(--ninja-font-size); | ||
@@ -32,0 +34,0 @@ } |
@@ -45,4 +45,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | ||
| ${breadcrumbs} | ||
| <div class="search-wrapper"> | ||
| <div part="ninja-input-wrapper" class="search-wrapper"> | ||
| <input | ||
| part="ninja-input" | ||
| type="text" | ||
@@ -108,2 +109,5 @@ id="search" | ||
| } | ||
| .search::placeholder { | ||
| color: var(--ninja-placeholder-color); | ||
| } | ||
| .breadcrumb-list { | ||
@@ -110,0 +114,0 @@ padding: 1em 4em 0 1em; |
@@ -317,2 +317,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | ||
| <ninja-header | ||
| exportparts="ninja-input,ninja-input-wrapper" | ||
| ${ref(this._headerRef)} | ||
@@ -319,0 +320,0 @@ .placeholder=${this.placeholder} |
| { | ||
| "name": "ninja-keys", | ||
| "version": "1.1.7", | ||
| "version": "1.1.8", | ||
| "description": "Ninja Keys", | ||
@@ -5,0 +5,0 @@ "main": "dist/ninja-keys.js", |
| # Ninja Keys | ||
| Keyboard shortcuts interface for your website. Working with Vanilla JS, Vue, React. | ||
| Keyboard shortcut interface for your website that works with Vanilla JS, Vue, and React. | ||
@@ -15,11 +15,11 @@ [](https://app.fossa.com/projects/git%2Bgithub.com%2Fssleptsov%2Fninja-keys?ref=badge_shield) | ||
| ## Motivation | ||
| A lot of applications support that pattern, user hit <kbd>⌘</kbd>+<kbd>k</kbd> (or <kbd>ctrl</kbd>+<kbd>k</kbd>) and search UI dialog appear. | ||
| I've seen recently in Notion, Slack, Linear, Vercel and Algolia, but I'm sure there are plenty more. | ||
| Also, there is a Apple Spotlight, Alfred and Raycast app that using this pattern too but different shortcuts. | ||
| There are already some libraries but they are too framework specific, like [Laravel only](https://github.com/livewire-ui/spotlight) or [React only](https://github.com/timc1/kbar) | ||
| Althought, mine is not a silver bullet and if you need more framework integration, check them out too. | ||
| A lot of applications support a common pattern where the user hits <kbd>⌘</kbd>+<kbd>k</kbd> (or <kbd>ctrl</kbd>+<kbd>k</kbd>) and a search UI dialog appears. | ||
| I've recently seen this in Notion, Slack, Linear, Vercel and Algolia, but I'm sure there are plenty more. | ||
| Apple Spotlight, Alfred and the Raycast app also have a similar pattern, but with different shortcuts. | ||
| There are already some libraries built for this, but they are too framework specific, like [Laravel only](https://github.com/livewire-ui/spotlight) or [React only](https://github.com/timc1/kbar) | ||
| Nevertheless, mine is not a silver bullet and if you need more framework integration, check them out too. | ||
| I was needed an keyboard interface for navigation for static website without any frameworks. | ||
| In same time I have a few vue projects where it can be useful too. | ||
| So I decided to give first shot for [Web Components](https://open-wc.org/) and [Lit Element](https://lit.dev/). | ||
| I needed a keyboard interface for navigation with static websites without any frameworks. | ||
| At the same time, I have a few Vue projects where something like this could be useful, | ||
| so I decided to give it a try for [Web Components](https://open-wc.org/) and [Lit Element](https://lit.dev/). | ||
@@ -36,14 +36,14 @@ | ||
| - Keyboard navigation | ||
| - Light and dark theme build in | ||
| - Build-in icons support from Material font, can support custom svg icons too. | ||
| - Nested menu. Tree or flat data structure can be used | ||
| - Light and dark theme built in | ||
| - Built-in icon support from Material font and custom svg icons | ||
| - Nested menu - a tree or flat data structure can be used | ||
| - Auto register your shortcuts | ||
| - Root search, for example, if search "Dark" it will find it within the "Theme" submenu | ||
| - Root search - for example, if you search "Dark," it will find it within the "Theme" submenu | ||
| - CSS variable to customize the view | ||
| - Customizable hotkeys to open/close and etc. Choose what fit your website more. | ||
| - Customizable hotkeys to open/close etc. Choose what best fits your website. | ||
| ## Why "Ninja" name? | ||
| Because it appears from nowhere and executes any actions quickly. | ||
| Or because it allows your users to become keyboard ninja's 🙃 | ||
| ## Why the "Ninja" name? | ||
| Because it appears from nowhere and executes any actions quickly... | ||
| Or because it allows your users to become keyboard ninjas 🙃 | ||
@@ -60,3 +60,3 @@ ## Install from NPM | ||
| ## Install from CDN | ||
| Mostly for usage in HTML/JS without build system. | ||
| Mostly for usage in HTML/JS without a build system. | ||
| ```html | ||
@@ -74,3 +74,3 @@ <script type="module" src="https://unpkg.com/ninja-keys?module"></script> | ||
| Add tag to your html. | ||
| Add the tag to your HTML. | ||
@@ -132,3 +132,3 @@ ```html | ||
| ``` | ||
| Library using flat data structure inside, as in example above. But you can also use tree structure as below: | ||
| Library using flat data structure inside, as in the example above. But you can also use a tree structure as below: | ||
| ```js | ||
@@ -206,5 +206,5 @@ { | ||
| But event `selected` can be used to handle edge cases, it's not recommended to write each action logic here, better to use action `handler` property. | ||
| But event `selected` can be used to handle edge cases, so it's not recommended to write each action logic here. It’s better to use the action `handler` property. | ||
| For example, user enter search query and there is empty list, listening to this event you can handle that. | ||
| For example, if a user enters a search query and there is an empty list, listening to this event you can handle that. | ||
@@ -227,3 +227,3 @@ ```js | ||
| ## Themes | ||
| Component support dark theme out-of-box. You just need to add a class. | ||
| Component supports a dark theme out-of-box. You just need to add a class. | ||
| ```html | ||
@@ -233,3 +233,3 @@ <ninja-keys class="dark"></ninja-keys> | ||
| If you need more style control, use css variable below. | ||
| If you need more style control, use any of the CSS variables below. | ||
| ### CSS variables | ||
@@ -257,2 +257,3 @@ | Name | Default | | ||
| | --ninja-footer-background | rgba(242, 242, 242, 0.4); | | ||
| | --ninja-placeholder-color | #8e8e8e | | ||
@@ -268,5 +269,5 @@ | ||
| ### CSS Shadow Parts | ||
| Allowing you to style spesific elemtents from your style. | ||
| Because styles encapsulated by Shadow DOM, it will be annoying to create css variables for all properties. | ||
| That's why you can use `::part` to make custom look of component. | ||
| Allowing you to style specific elements from your style. | ||
| Because styles are encapsulated by Shadow DOM, it will be annoying to create css variables for all properties. | ||
| That's why you can use `::part` to make a custom look for the component. | ||
| It's supported by [all modern browsers](https://caniuse.com/mdn-css_selectors_part) | ||
@@ -279,2 +280,4 @@ | ||
| | ninja-selected | Selected action | | ||
| | ninja-input | Input element | | ||
| | ninja-input-wrapper | Wrapper element around div, useful for advanced styles| | ||
@@ -294,10 +297,23 @@ #### Example style using parts | ||
| } | ||
| ninja-keys::part(ninja-input) { | ||
| color: #14b8a6; | ||
| } | ||
| ninja-keys::part(ninja-input)::placeholder { | ||
| color: #f43f5e; | ||
| } | ||
| ninja-keys::part(ninja-input-wrapper) { | ||
| background: rgba(244, 63, 93, 0.3); | ||
| } | ||
| ``` | ||
| ### Icons | ||
| By default component using icons from [https://fonts.google.com/icons](https://fonts.google.com/icons) | ||
| By default, components use icons from [https://fonts.google.com/icons](https://fonts.google.com/icons) | ||
| For example, you can just set `mdIcon` to `light_mode` to render sun icon. | ||
| For example, you can just set `mdIcon` to `light_mode` to render a sun icon. | ||
| To add Material icons for website you need to add to html, for example | ||
| To add Material icons for your website, you need to add them to your HTML, for example | ||
| ```html | ||
@@ -307,3 +323,3 @@ <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"> | ||
| If want custom icons, you can use `svg` or `img` to insert it with `icon` property for action with `ninja-icon` class. | ||
| If you want custom icons, you can use `svg` or `img` to insert it with an `icon` property for action with `ninja-icon` class. | ||
| Example: | ||
@@ -319,3 +335,3 @@ ```js | ||
| ``` | ||
| Also, you can change width and font using css variables for it | ||
| You can also change the width and font using CSS variables | ||
| ```css | ||
@@ -331,3 +347,3 @@ ninja-keys { | ||
| <ninja-keys> | ||
| <slot name="footer">Must custom footer or empty to hide</slot> | ||
| <slot name="footer">Must use a custom footer or empty to hide</slot> | ||
| </ninja-keys> | ||
@@ -362,1 +378,3 @@ ``` | ||
| [](https://app.fossa.com/projects/git%2Bgithub.com%2Fssleptsov%2Fninja-keys?ref=badge_large) | ||
@@ -31,2 +31,4 @@ import {css} from 'lit'; | ||
| --ninja-placeholder-color: #8e8e8e; | ||
| font-size: var(--ninja-font-size); | ||
@@ -33,0 +35,0 @@ } |
@@ -25,2 +25,5 @@ import {LitElement, html, css, TemplateResult} from 'lit'; | ||
| } | ||
| .search::placeholder { | ||
| color: var(--ninja-placeholder-color); | ||
| } | ||
| .breadcrumb-list { | ||
@@ -97,4 +100,5 @@ padding: 1em 4em 0 1em; | ||
| ${breadcrumbs} | ||
| <div class="search-wrapper"> | ||
| <div part="ninja-input-wrapper" class="search-wrapper"> | ||
| <input | ||
| part="ninja-input" | ||
| type="text" | ||
@@ -101,0 +105,0 @@ id="search" |
@@ -379,2 +379,3 @@ import {LitElement, html, TemplateResult, PropertyValues} from 'lit'; | ||
| <ninja-header | ||
| exportparts="ninja-input,ninja-input-wrapper" | ||
| ${ref(this._headerRef)} | ||
@@ -381,0 +382,0 @@ .placeholder=${this.placeholder} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Improved metrics
- Total package byte prevSize
- increased by0.82%
155884
- Lines of code
- increased by0.41%
2912
- Number of lines in readme file
- increased by5.19%
365