@operato/popup - npm Package Compare versions

Comparing version 0.2.10 to 0.2.15

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+### [0.2.15](https://github.com/hatiolab/operato/compare/v0.2.14...v0.2.15) (2021-11-21)
+
+
+### :bug: Bug Fix
+
+* replace keycode to key for KeyboardEvent ([742d85a](https://github.com/hatiolab/operato/commit/742d85a104ea29dcaccc8f5ff1f42c527a2ac2af))
+
+
+
 ### [0.2.10](https://github.com/hatiolab/operato/compare/v0.2.9...v0.2.10) (2021-11-15)
@@ -8,0 +17,0 @@

dist/src/ox-popup-list.js

 import { __decorate } from "tslib";
 import { css, html } from 'lit';
-import { render } from 'lit-html';
 import { customElement, property } from 'lit/decorators.js';
-import { KEYCODE } from './const';
 import { Popup } from './ox-popup';
+import { render } from 'lit-html';
 function focusClosest(element) {
@@ -20,15 +19,20 @@ /* Find the closest focusable element. */
             e.stopPropagation();
-            switch (e.keyCode) {
-                case KEYCODE.KEY_ESC:
+            switch (e.key) {
+                case 'Esc': // for IE/Edge
+                case 'Escape':
                     this.close();
                     break;
-                case KEYCODE.KEY_LEFT:
-                case KEYCODE.KEY_UP:
+                case 'Left': // for IE/Edge
+                case 'ArrowLeft':
+                case 'Up': // for IE/Edge
+                case 'ArrowUp':
                     this.activeIndex--;
                     break;
-                case KEYCODE.KEY_RIGHT:
-                case KEYCODE.KEY_DOWN:
+                case 'Right': // for IE/Edge
+                case 'ArrowRight':
+                case 'Down': // for IE/Edge
+                case 'ArrowDown':
                     this.activeIndex++;
                     break;
-                case KEYCODE.KEY_ENTER:
+                case 'Enter':
                     e.stopPropagation();
@@ -35,0 +39,0 @@ var option = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('[option]');

dist/src/ox-popup-menu.js

 import { __decorate } from "tslib";
 import { css, html } from 'lit';
-import { render } from 'lit-html';
 import { customElement, property } from 'lit/decorators.js';
-import { KEYCODE } from './const';
 import { Popup } from './ox-popup';
+import { render } from 'lit-html';
 function focusClosest(element) {
@@ -20,15 +19,20 @@ /* Find the closest focusable element. */
             e.stopPropagation();
-            switch (e.keyCode) {
-                case KEYCODE.KEY_ESC:
-                case KEYCODE.KEY_LEFT:
+            switch (e.key) {
+                case 'Esc': // for IE/Edge
+                case 'Escape':
+                case 'Left': // for IE/Edge
+                case 'ArrowLeft':
                     this.close();
                     break;
-                case KEYCODE.KEY_UP:
+                case 'Up': // for IE/Edge
+                case 'ArrowUp':
                     this.activeIndex--;
                     break;
-                case KEYCODE.KEY_RIGHT:
-                case KEYCODE.KEY_DOWN:
+                case 'Right': // for IE/Edge
+                case 'ArrowRight':
+                case 'Down': // for IE/Edge
+                case 'ArrowDown':
                     this.activeIndex++;
                     break;
-                case KEYCODE.KEY_ENTER:
+                case 'Enter':
                     e.stopPropagation();
@@ -35,0 +39,0 @@ var menu = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('[menu], ox-popup-menuitem');

dist/src/ox-popup-menuitem.js

 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { LitElement, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { KEYCODE } from './const';
 let PopupMenuItem = class PopupMenuItem extends LitElement {
@@ -24,12 +23,14 @@ constructor() {
         this._onkeydown = function (e) {
-            switch (e.keyCode) {
-                case KEYCODE.KEY_RIGHT:
+            switch (e.key) {
+                case 'Right':
+                case 'ArrowRight':
                     e.stopPropagation();
                     this.expand(false);
                     break;
-                case KEYCODE.KEY_LEFT:
+                case 'Left':
+                case 'ArrowLeft':
                     e.stopPropagation();
                     this.collapseSelf();
                     break;
-                case KEYCODE.KEY_ENTER:
+                case 'Enter':
                     if (this._submenu) {
@@ -36,0 +37,0 @@ e.stopPropagation();

dist/src/ox-popup.js

 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { LitElement, css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import { render } from 'lit-html';
-import { customElement, state } from 'lit/decorators.js';
-import { KEYCODE } from './const';
 let Popup = class Popup extends LitElement {
@@ -19,4 +18,5 @@ constructor() {
             e.stopPropagation();
-            switch (e.keyCode) {
-                case KEYCODE.KEY_ESC:
+            switch (e.key) {
+                case 'Esc': // for IE/Edge
+                case 'Escape':
                     this.close();
@@ -23,0 +23,0 @@ break;

package.json

@@ -6,3 +6,3 @@ {
   "author": "heartyoh",
-  "version": "0.2.10",
+  "version": "0.2.15",
   "main": "dist/src/index.js",
@@ -70,3 +70,3 @@ "module": "dist/src/index.js",
   },
-  "gitHead": "fb3fb912e73b1091a46015956b9a0655bf1d9b71"
+  "gitHead": "9f3c92ae95ed50754eb35d3b70ebf9bd705a98b7"
 }

src/ox-popup-list.ts

@@ -1,7 +0,6 @@
-import { css, html, PropertyValues } from 'lit'
-import { render } from 'lit-html'
+import { PropertyValues, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { KEYCODE } from './const'
 import { Popup } from './ox-popup'
+import { render } from 'lit-html'
 
@@ -84,18 +83,23 @@ function focusClosest(element: HTMLElement) {
 
-    switch (e.keyCode) {
-      case KEYCODE.KEY_ESC:
+    switch (e.key) {
+      case 'Esc': // for IE/Edge
+      case 'Escape':
         this.close()
         break
 
-      case KEYCODE.KEY_LEFT:
-      case KEYCODE.KEY_UP:
+      case 'Left': // for IE/Edge
+      case 'ArrowLeft':
+      case 'Up': // for IE/Edge
+      case 'ArrowUp':
         this.activeIndex--
         break
 
-      case KEYCODE.KEY_RIGHT:
-      case KEYCODE.KEY_DOWN:
+      case 'Right': // for IE/Edge
+      case 'ArrowRight':
+      case 'Down': // for IE/Edge
+      case 'ArrowDown':
         this.activeIndex++
         break
 
-      case KEYCODE.KEY_ENTER:
+      case 'Enter':
         e.stopPropagation()
@@ -102,0 +106,0 @@ var option = (e.target as HTMLElement)?.closest('[option]')

src/ox-popup-menu.ts

@@ -1,7 +0,6 @@
-import { css, html, PropertyValues } from 'lit'
-import { render } from 'lit-html'
+import { PropertyValues, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { KEYCODE } from './const'
 import { Popup } from './ox-popup'
+import { render } from 'lit-html'
 
@@ -86,18 +85,23 @@ function focusClosest(element: HTMLElement) {
 
-    switch (e.keyCode) {
-      case KEYCODE.KEY_ESC:
-      case KEYCODE.KEY_LEFT:
+    switch (e.key) {
+      case 'Esc': // for IE/Edge
+      case 'Escape':
+      case 'Left': // for IE/Edge
+      case 'ArrowLeft':
         this.close()
         break
 
-      case KEYCODE.KEY_UP:
+      case 'Up': // for IE/Edge
+      case 'ArrowUp':
         this.activeIndex--
         break
 
-      case KEYCODE.KEY_RIGHT:
-      case KEYCODE.KEY_DOWN:
+      case 'Right': // for IE/Edge
+      case 'ArrowRight':
+      case 'Down': // for IE/Edge
+      case 'ArrowDown':
         this.activeIndex++
         break
 
-      case KEYCODE.KEY_ENTER:
+      case 'Enter':
         e.stopPropagation()
@@ -104,0 +108,0 @@ var menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')

src/ox-popup-menuitem.ts

@@ -1,5 +0,4 @@
-import { css, html, LitElement, PropertyValues } from 'lit'
+import { LitElement, PropertyValues, css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
-import { KEYCODE } from './const'
 import { PopupMenu } from './ox-popup-menu'
@@ -97,4 +96,5 @@
   protected _onkeydown: (e: KeyboardEvent) => void = function (this: PopupMenuItem, e: KeyboardEvent) {
-    switch (e.keyCode) {
-      case KEYCODE.KEY_RIGHT:
+    switch (e.key) {
+      case 'Right':
+      case 'ArrowRight':
         e.stopPropagation()
@@ -104,3 +104,4 @@ this.expand(false)
 
-      case KEYCODE.KEY_LEFT:
+      case 'Left':
+      case 'ArrowLeft':
         e.stopPropagation()
@@ -110,3 +111,3 @@ this.collapseSelf()
 
-      case KEYCODE.KEY_ENTER:
+      case 'Enter':
         if (this._submenu) {
@@ -113,0 +114,0 @@ e.stopPropagation()

src/ox-popup.ts

@@ -1,6 +0,5 @@
-import { css, html, LitElement } from 'lit'
-import { render } from 'lit-html'
+import { LitElement, css, html } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 
-import { KEYCODE } from './const'
+import { render } from 'lit-html'
 
@@ -47,4 +46,5 @@ @customElement('ox-popup')
 
-    switch (e.keyCode) {
-      case KEYCODE.KEY_ESC:
+    switch (e.key) {
+      case 'Esc': // for IE/Edge
+      case 'Escape':
         this.close()
@@ -51,0 +51,0 @@ break

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

179860

increased by0.77%

Lines of code

1666

increased by0.36%

Worsened metrics

Number of package files

50

decreased by-1.96%

No dependency changes