@operato/popup - npm Package Compare versions

Comparing version 0.2.52 to 0.3.1

CHANGELOG.md

@@ -6,2 +6,25 @@ # Change Log
 
+### [0.3.1](https://github.com/hatiolab/operato/compare/v0.3.0...v0.3.1) (2021-12-31)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [0.3.0](https://github.com/hatiolab/operato/compare/v0.2.52...v0.3.0) (2021-12-31)
+
+
+### :bug: Bug Fix
+
+* grist card-gutter-menu popup style ([d0b97f5](https://github.com/hatiolab/operato/commit/d0b97f5483f93d95df058facc673a6fdd30e897b))
+* popup style ([2372729](https://github.com/hatiolab/operato/commit/23727297c8fe98267846bc3d6595238cb1f9e76b))
+
+
+### :rocket: New Features
+
+* add tsconfig option useDefineForClassFields ([6291438](https://github.com/hatiolab/operato/commit/6291438571eee0f095064e7d2ada1c620832e092))
+
+
+
 ### [0.2.52](https://github.com/hatiolab/operato/compare/v0.2.51...v0.2.52) (2021-12-21)
@@ -8,0 +31,0 @@

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

@@ -18,8 +18,10 @@ import { PropertyValues } from 'lit';
      */
-    static open({ template, top, left, parent }: {
+    static open({ template, top, left, right, bottom, parent }: {
         template: unknown;
-        top: number;
-        left: number;
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
         parent?: Element | null;
     }): void;
 }

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) {
@@ -113,8 +113,14 @@ /* Find the closest focusable element. */
      */
-    static open({ template, top, left, parent }) {
+    static open({ template, top, left, right, bottom, parent }) {
         const owner = parent || document.body;
         const target = document.createElement('ox-popup-menu');
         render(template, target);
-        target.style.left = `${left}px`;
-        target.style.top = `${top}px`;
+        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', '');
@@ -121,0 +127,0 @@ target._parent = owner;

dist/src/ox-popup.js

 import { __decorate } from "tslib";
-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 { ScrollbarStyles } from '@operato/styles';
+import { render } from 'lit-html';
 let OxPopup = class OxPopup extends LitElement {
@@ -128,3 +128,3 @@ constructor() {
         z-index: 100;
-        padding: 4px 0;
+        padding: 0;
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
@@ -142,35 +142,2 @@ box-sizing: border-box;
       }
-      ::slotted(*) {
-        padding: 5px 10px;
-        cursor: pointer;
-      }
-
-      ::slotted(*:focus) {
-        outline: none;
-      }
-
-      ::slotted([menu][active]),
-      ::slotted([menu]:hover) {
-        background-color: #f6f6f6;
-      }
-
-      ::slotted([menu]),
-      ::slotted(ox-popup-menuitem) {
-        border-left: 3px solid transparent;
-      }
-
-      ::slotted(ox-popup-menuitem[active]) {
-        border-left: 3px solid var(--primary-color, #38a25b);
-        font-weight: bold;
-      }
-
-      ::slotted([separator]) {
-        height: 1px;
-        width: 100%;
-        padding: 0;
-        background-color: rgba(0, 0, 0, 0.15);
-      }
-      ::slotted([menu] > input) {
-        border: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.3));
-      }
     `
@@ -177,0 +144,0 @@ ];

package.json

@@ -6,7 +6,11 @@ {
   "author": "heartyoh",
-  "version": "0.2.52",
+  "version": "0.3.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
-    ".": "./dist/src/index.js"
+    ".": "./dist/src/index.js",
+    "./ox-popup.js": "./dist/src/ox-popup.js",
+    "./ox-popup-list.js": "./dist/src/ox-popup-list.js",
+    "./ox-popup-menu.js": "./dist/src/ox-popup-menu.js",
+    "./ox-popup-menuitem.js": "./dist/src/ox-popup-menuitem.js"
   },
@@ -36,3 +40,3 @@ "publishConfig": {
     "@material/mwc-icon": "^0.25.3",
-    "@operato/styles": "^0.2.52",
+    "@operato/styles": "^0.3.1",
     "lit": "^2.0.2"
@@ -72,3 +76,3 @@ },
   },
-  "gitHead": "d3471af1da5375cc9f8078d4b6e5a9c81231c54b"
+  "gitHead": "082f16bf248908bd498ec1fddb912cdbb13efc68"
 }

src/ox-popup-menu.ts

@@ -1,6 +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 { OxPopup } from './ox-popup'
+import { render } from 'lit-html'
 
@@ -194,7 +194,11 @@ function focusClosest(element: HTMLElement) {
     left,
+    right,
+    bottom,
     parent
   }: {
     template: unknown
-    top: number
-    left: number
+    top?: number
+    left?: number
+    right?: number
+    bottom?: number
     parent?: Element | null
@@ -206,4 +210,6 @@ }) {
 
-    target.style.left = `${left}px`
-    target.style.top = `${top}px`
+    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`
 
@@ -210,0 +216,0 @@ target.setAttribute('active', '')

src/ox-popup.ts

@@ -1,6 +0,6 @@
-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 { ScrollbarStyles } from '@operato/styles'
+import { render } from 'lit-html'
 
@@ -17,3 +17,3 @@ @customElement('ox-popup')
         z-index: 100;
-        padding: 4px 0;
+        padding: 0;
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
@@ -31,35 +31,2 @@ box-sizing: border-box;
       }
-      ::slotted(*) {
-        padding: 5px 10px;
-        cursor: pointer;
-      }
-
-      ::slotted(*:focus) {
-        outline: none;
-      }
-
-      ::slotted([menu][active]),
-      ::slotted([menu]:hover) {
-        background-color: #f6f6f6;
-      }
-
-      ::slotted([menu]),
-      ::slotted(ox-popup-menuitem) {
-        border-left: 3px solid transparent;
-      }
-
-      ::slotted(ox-popup-menuitem[active]) {
-        border-left: 3px solid var(--primary-color, #38a25b);
-        font-weight: bold;
-      }
-
-      ::slotted([separator]) {
-        height: 1px;
-        width: 100%;
-        padding: 0;
-        background-color: rgba(0, 0, 0, 0.15);
-      }
-      ::slotted([menu] > input) {
-        border: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.3));
-      }
     `
@@ -66,0 +33,0 @@ ]

tsconfig.json

@@ -12,2 +12,3 @@ {
     "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "importHelpers": true,
@@ -14,0 +15,0 @@ "outDir": "dist",

No alert changes

Improved metrics

Total package byte prevSize

226594

increased by16.69%

Worsened metrics

Lines of code

1817

decreased by-2.21%

Dependency changes

• + Added@operato/styles@0.3.28(transitive)

• - Removed@operato/styles@0.2.52(transitive)

• Updated@operato/styles@^0.3.1