@operato/popup - npm Package Compare versions

Comparing version 0.3.15 to 0.3.16

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+### [0.3.16](https://github.com/hatiolab/operato/compare/v0.3.15...v0.3.16) (2022-01-19)
+
+
+### :bug: Bug Fix
+
+* separate data-manipulator from data-grid/list/card ([8c5de61](https://github.com/hatiolab/operato/commit/8c5de6115b04cd46035bd5ca7d023ed3c0ed43e0))
+
+
+
 ### [0.3.15](https://github.com/hatiolab/operato/compare/v0.3.14...v0.3.15) (2022-01-17)
@@ -8,0 +17,0 @@

dist/src/ox-popup-list.d.ts

@@ -43,3 +43,3 @@ import '@material/mwc-icon';
         parent?: Element | null;
-    }): void;
+    }): OxPopupList;
 }

dist/src/ox-popup-list.js

@@ -206,12 +206,6 @@ import { __decorate } from "tslib";
         render(template, target);
-        if (left !== undefined)
-            target.style.left = `${left}px`;
-        if (top !== undefined)
-            target.style.top = `${top}px`;
-        if (right !== undefined)
-            target.style.right = `${right}px`;
-        if (bottom !== undefined)
-            target.style.bottom = `${bottom}px`;
         target._parent = owner;
         owner.appendChild(target);
+        target.open({ top, left, right, bottom });
+        return target;
     }
@@ -218,0 +212,0 @@ };

dist/src/ox-popup-menu.d.ts

@@ -25,3 +25,3 @@ import { PropertyValues } from 'lit';
         parent?: Element | null;
-    }): void;
+    }): OxPopupMenu;
 }

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 { OxPopup } from './ox-popup';
-import { render } from 'lit-html';
 function focusClosest(element) {
@@ -117,13 +117,7 @@ /* Find the closest focusable element. */
         render(template, target);
-        if (left !== undefined)
-            target.style.left = `${left}px`;
-        if (top !== undefined)
-            target.style.top = `${top}px`;
-        if (right !== undefined)
-            target.style.right = `${right}px`;
-        if (bottom !== undefined)
-            target.style.bottom = `${bottom}px`;
         target.setAttribute('active', '');
         target._parent = owner;
         owner.appendChild(target);
+        target.open({ top, left, right, bottom });
+        return target;
     }
@@ -130,0 +124,0 @@ };

dist/src/ox-popup.d.ts

@@ -9,2 +9,5 @@ import { LitElement } from 'lit';
     protected _onkeyup: (e: KeyboardEvent) => void;
+    protected _onmouseup: (e: MouseEvent) => void;
+    protected _onmousedown: (e: MouseEvent) => void;
+    protected _oncontext: (e: Event) => void;
     protected _onclick: (e: MouseEvent) => void;
@@ -36,3 +39,3 @@ protected _onclose: (e: Event) => void;
         parent?: Element | null;
-    }): void;
+    }): OxPopup;
     open({ left, top, right, bottom, silent }: {
@@ -39,0 +42,0 @@ left?: number;

dist/src/ox-popup.js

 import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
+import { render } from 'lit-html';
 import { customElement, state } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
-import { render } from 'lit-html';
 let OxPopup = class OxPopup extends LitElement {
@@ -29,2 +29,11 @@ constructor() {
         }.bind(this);
+        this._onmouseup = function (e) {
+            e.stopPropagation();
+        }.bind(this);
+        this._onmousedown = function (e) {
+            e.stopPropagation();
+        }.bind(this);
+        this._oncontext = function (e) {
+            e.stopPropagation();
+        }.bind(this);
         this._onclick = function (e) {
@@ -54,2 +63,5 @@ e.stopPropagation();
         this.addEventListener('click', this._onclick);
+        this.addEventListener('mouseup', this._onmouseup);
+        this.addEventListener('mousedown', this._onmousedown);
+        this.addEventListener('context', this._oncontext);
         this.addEventListener('ox-close', this._onclose);
@@ -81,12 +93,20 @@ this.addEventListener('ox-collapse', this._oncollapse);
         target.open({ top, left, right, bottom });
+        return target;
     }
     open({ left, top, right, bottom, silent = false }) {
-        if (left !== undefined)
-            this.style.left = `${left}px`;
-        if (top !== undefined)
-            this.style.top = `${top}px`;
-        if (right !== undefined)
-            this.style.right = `${right}px`;
-        if (bottom !== undefined)
-            this.style.bottom = `${bottom}px`;
+        if (left === undefined && top === undefined && right === undefined && bottom === undefined) {
+            this.style.left = '50%';
+            this.style.top = '50%';
+            this.style.transform = 'translateX(-50%) translateY(-50%)';
+        }
+        else {
+            if (left !== undefined)
+                this.style.left = `${left}px`;
+            if (top !== undefined)
+                this.style.top = `${top}px`;
+            if (right !== undefined)
+                this.style.right = `${right}px`;
+            if (bottom !== undefined)
+                this.style.bottom = `${bottom}px`;
+        }
         this.setAttribute('active', '');
@@ -118,2 +138,5 @@ !silent && this.guaranteeFocus();
             this.removeEventListener('ox-collapse', this._oncollapse);
+            this.removeEventListener('mouseup', this._onmouseup);
+            this.removeEventListener('mousedown', this._onmousedown);
+            this.removeEventListener('context', this._oncontext);
             this._parent.removeChild(this);
@@ -120,0 +143,0 @@ delete this._parent;

package.json

@@ -6,3 +6,3 @@ {
   "author": "heartyoh",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "main": "dist/src/index.js",
@@ -40,3 +40,3 @@ "module": "dist/src/index.js",
     "@material/mwc-icon": "^0.25.3",
-    "@operato/styles": "^0.3.15",
+    "@operato/styles": "^0.3.16",
     "lit": "^2.0.2"
@@ -76,3 +76,3 @@ },
   },
-  "gitHead": "d186024ded9e143e7bf77459c80ff93b90045f27"
+  "gitHead": "7ea092c9fb1a2152b651f19e7b3bdd0b36199a49"
 }

src/ox-popup-list.ts

@@ -364,3 +364,3 @@ import '@material/mwc-icon'
     parent?: Element | null
-  }) {
+  }): OxPopupList {
     const owner = parent || document.body
@@ -370,11 +370,9 @@ const target = document.createElement('ox-popup-list') as OxPopupList
 
-    if (left !== undefined) target.style.left = `${left}px`
-    if (top !== undefined) target.style.top = `${top}px`
-    if (right !== undefined) target.style.right = `${right}px`
-    if (bottom !== undefined) target.style.bottom = `${bottom}px`
-
     target._parent = owner
 
     owner.appendChild(target)
+    target.open({ top, left, right, bottom })
+
+    return target
   }
 }

src/ox-popup-menu.ts

@@ -1,6 +0,6 @@
-import { PropertyValues, css, html } from 'lit'
+import { css, html, PropertyValues } from 'lit'
+import { render } from 'lit-html'
 import { customElement, property } from 'lit/decorators.js'
 
 import { OxPopup } from './ox-popup'
-import { render } from 'lit-html'
 
@@ -204,3 +204,3 @@ function focusClosest(element: HTMLElement) {
     parent?: Element | null
-  }) {
+  }): OxPopupMenu {
     const owner = parent || document.body
@@ -210,7 +210,2 @@ const target = document.createElement('ox-popup-menu') as OxPopupMenu
 
-    if (left !== undefined) target.style.left = `${left}px`
-    if (top !== undefined) target.style.top = `${top}px`
-    if (right !== undefined) target.style.right = `${right}px`
-    if (bottom !== undefined) target.style.bottom = `${bottom}px`
-
     target.setAttribute('active', '')
@@ -221,3 +216,7 @@
     owner.appendChild(target)
+
+    target.open({ top, left, right, bottom })
+
+    return target
   }
 }

src/ox-popup.ts

@@ -1,6 +0,6 @@
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
+import { render } from 'lit-html'
 import { customElement, state } from 'lit/decorators.js'
 
 import { ScrollbarStyles } from '@operato/styles'
-import { render } from 'lit-html'
 
@@ -64,2 +64,14 @@ @customElement('ox-popup')
 
+  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {
+    e.stopPropagation()
+  }.bind(this)
+
+  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {
+    e.stopPropagation()
+  }.bind(this)
+
+  protected _oncontext: (e: Event) => void = function (this: OxPopup, e: Event) {
+    e.stopPropagation()
+  }.bind(this)
+
   protected _onclick: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {
@@ -90,2 +102,5 @@ e.stopPropagation()
     this.addEventListener('click', this._onclick)
+    this.addEventListener('mouseup', this._onmouseup)
+    this.addEventListener('mousedown', this._onmousedown)
+    this.addEventListener('context', this._oncontext)
     this.addEventListener('ox-close', this._onclose)
@@ -127,3 +142,3 @@ this.addEventListener('ox-collapse', this._oncollapse)
     parent?: Element | null
-  }) {
+  }): OxPopup {
     const owner = parent || document.body
@@ -138,2 +153,4 @@ const target = document.createElement('ox-popup') as OxPopup
     target.open({ top, left, right, bottom })
+
+    return target
   }
@@ -154,6 +171,12 @@
   }) {
-    if (left !== undefined) this.style.left = `${left}px`
-    if (top !== undefined) this.style.top = `${top}px`
-    if (right !== undefined) this.style.right = `${right}px`
-    if (bottom !== undefined) this.style.bottom = `${bottom}px`
+    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {
+      this.style.left = '50%'
+      this.style.top = '50%'
+      this.style.transform = 'translateX(-50%) translateY(-50%)'
+    } else {
+      if (left !== undefined) this.style.left = `${left}px`
+      if (top !== undefined) this.style.top = `${top}px`
+      if (right !== undefined) this.style.right = `${right}px`
+      if (bottom !== undefined) this.style.bottom = `${bottom}px`
+    }
 
@@ -193,2 +216,5 @@ this.setAttribute('active', '')
       this.removeEventListener('ox-collapse', this._oncollapse)
+      this.removeEventListener('mouseup', this._onmouseup)
+      this.removeEventListener('mousedown', this._onmousedown)
+      this.removeEventListener('context', this._oncontext)
 
@@ -195,0 +221,0 @@ this._parent.removeChild(this)

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

211161

increased by2.13%

Lines of code

2056

increased by1.03%

Worsened metrics

Number of package files

47

decreased by-6%

Dependency changes

• Updated@operato/styles@^0.3.16