Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@bgoodman/dialog-box
Advanced tools
@bgoodman/dialog-box - npm Package Compare versions
Comparing version 0.1.0 to 0.2.0
| declare class DialogBox extends HTMLElement { | ||
| static get observedAttributes(): string[]; | ||
| constructor(opts?: { | ||
| title?: string; | ||
| content?: string; | ||
| confirmBtn?: { | ||
@@ -5,0 +7,0 @@ include?: boolean; |
@@ -1,6 +0,6 @@ | ||
| var css = ".row{display:flex;justify-content:center}.row div:not(:last-of-type){margin:0 5px 0 0}.btn,::slotted(.btn){font-size:16px;width:70px;height:30px;border:1px solid #000;border-radius:3px;text-align:center;line-height:30px;cursor:pointer}.btn:active,::slotted(.btn:active){box-shadow:inset 1px 1px grey}.primary,::slotted(.primary){background:#d4e8ea}.secondary,::slotted(.secondary){background:#ead4d4}slot[name=dialog-title]{font-weight:600;font-size:18px}slot[name=dialog-content]::slotted(div){padding:10px}:host([open]) #box{display:unset}:host([open]) #mask{display:unset;opacity:.5}:host{font-family:sans-serif}:host #box{padding:5px;height:auto;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #000;background:#fff;width:300px;max-height:300px;min-height:100px;z-index:999}:host #box,:host #mask{display:none;position:absolute}:host #mask{top:0;left:0;background-color:rgba(0,0,0,.5);opacity:0;width:100vw;height:100vh;z-index:998;transition:opacity .4s ease-out}"; | ||
| var css = ".row{display:flex;justify-content:center}.row div:not(:last-of-type){margin:0 5px 0 0}.btn,::slotted(.btn){font-size:16px;width:70px;height:30px;border:1px solid #000;border-radius:3px;text-align:center;line-height:30px;cursor:pointer}.btn:active,::slotted(.btn:active){box-shadow:inset 1px 1px grey}.primary,::slotted(.primary){background:#d4e8ea}.secondary,::slotted(.secondary){background:#ead4d4}div#dialog-title,slot[name=dialog-title]{font-weight:600;font-size:18px}div#dialog-content,slot[name=dialog-content]::slotted(div){padding:10px}:host([open=true]) #box{display:unset}:host([open=true]) #mask{display:unset;opacity:.5}:host{font-family:sans-serif}:host #box{padding:5px;height:auto;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #000;background:#fff;width:300px;max-height:300px;min-height:100px;z-index:999}:host #box,:host #mask{display:none;position:absolute}:host #mask{top:0;left:0;background-color:rgba(0,0,0,.5);opacity:0;width:100vw;height:100vh;z-index:998;transition:opacity .4s ease-out}"; | ||
| class DialogBox extends HTMLElement { | ||
| constructor(opts) { | ||
| var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t; | ||
| var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v; | ||
| super(); | ||
@@ -35,4 +35,8 @@ this._confirmBtnClickEvent = new Event("confirmed"); | ||
| <div id="dialog-content-wrapper"> | ||
| <slot name="dialog-title"></slot> | ||
| <slot name="dialog-content"></slot> | ||
| ${this.querySelector("[slot='dialog-title']") === null | ||
| ? `<div id="dialog-title">${(_u = opts) === null || _u === void 0 ? void 0 : _u.title}</div>` || `` | ||
| : `<slot name="dialog-title"></slot>`} | ||
| ${this.querySelector("[slot='dialog-content']") === null | ||
| ? `<div id="dialog-content">${(_v = opts) === null || _v === void 0 ? void 0 : _v.content}</div>` || `` | ||
| : `<slot name="dialog-content"></slot>`} | ||
| </div> | ||
@@ -66,3 +70,3 @@ | ||
| set open(newState) { | ||
| newState ? this.setAttribute("open", JSON.stringify(newState)) : this.removeAttribute("open"); | ||
| this.setAttribute("open", JSON.stringify(newState)); | ||
| } | ||
@@ -69,0 +73,0 @@ get open() { |
| { | ||
| "name": "@bgoodman/dialog-box", | ||
| "version": "0.1.0", | ||
| "version": "0.2.0", | ||
| "description": "Popup dialog for displaying information.", | ||
@@ -5,0 +5,0 @@ "main": "./dist/index.js", |
@@ -17,16 +17,16 @@ # dialog-box | ||
| <head> | ||
| <title>dialog-box</title> | ||
| <script type="module" src="./dist/index.js"></script> | ||
| <title>dialog-box</title> | ||
| <script type="module" src="./dist/index.js"></script> | ||
| </head> | ||
| <body> | ||
| <dialog-box open="true" confirm-lbl="Continue"> | ||
| <div slot="dialog-title"> | ||
| Title Heading | ||
| </div> | ||
| <div slot="dialog-content"> | ||
| Hello, test test test | ||
| blah | ||
| </div> | ||
| </dialog-box> | ||
| <dialog-box open="true" confirm-lbl="Continue"> | ||
| <div slot="dialog-title"> | ||
| Title Heading | ||
| </div> | ||
| <div slot="dialog-content"> | ||
| Hello, test test test | ||
| blah | ||
| </div> | ||
| </dialog-box> | ||
| </body> | ||
@@ -38,2 +38,31 @@ | ||
| The element's class constructor can also be used. | ||
| ```typescript | ||
| constructor DialogBox(opts?: { | ||
| title?: string | undefined; | ||
| content?: string | undefined; | ||
| confirmBtn?: { | ||
| include?: boolean | undefined; | ||
| lbl?: string | undefined; | ||
| } | undefined; | ||
| cancelBtn?: { | ||
| include?: boolean | undefined; | ||
| lbl?: string | undefined; | ||
| } | undefined; | ||
| closeOnConfirm?: boolean | undefined; | ||
| } | undefined): DialogBox | ||
| ``` | ||
| ```html | ||
| <script type="module"> | ||
| import DialogBox from "./dist/index.js"; | ||
| const dialogBox = new DialogBox({title: "Test Title", content: "Test content"}); | ||
| document.querySelector("body").appendChild(dialogBox); | ||
| dialogBox.open = true; | ||
| dialogBox.addEventListener("confirmed", (e) => console.log(e)) | ||
| dialogBox.addEventListener("cancelled", (e) => console.log(e)) | ||
| </script> | ||
| ``` | ||
| ## Attributes | ||
@@ -73,2 +102,2 @@ | ||
| Emitted on click of default cancel button. | ||
| Emitted on click of default cancel button. |
@@ -10,3 +10,17 @@ import style from "./index.scss"; | ||
| constructor(opts?:{confirmBtn?:{include?: boolean, lbl?:string}, cancelBtn?:{include?: boolean, lbl?:string}, closeOnConfirm?:boolean }) { | ||
| constructor( | ||
| opts?:{ | ||
| title?: string, | ||
| content?: string, | ||
| confirmBtn?:{ | ||
| include?: boolean, | ||
| lbl?:string | ||
| }, | ||
| cancelBtn?:{ | ||
| include?: boolean, | ||
| lbl?:string | ||
| }, | ||
| closeOnConfirm?:boolean | ||
| } | ||
| ) { | ||
| super(); | ||
@@ -27,4 +41,8 @@ | ||
| <div id="dialog-content-wrapper"> | ||
| <slot name="dialog-title"></slot> | ||
| <slot name="dialog-content"></slot> | ||
| ${this.querySelector("[slot='dialog-title']") === null | ||
| ? `<div id="dialog-title">${opts?.title}</div>` || `` | ||
| : `<slot name="dialog-title"></slot>`} | ||
| ${this.querySelector("[slot='dialog-content']") === null | ||
| ? `<div id="dialog-content">${opts?.content}</div>` || `` | ||
| : `<slot name="dialog-content"></slot>`} | ||
| </div> | ||
@@ -64,3 +82,3 @@ | ||
| set open(newState: boolean){ | ||
| newState ? this.setAttribute("open", JSON.stringify(newState)) : this.removeAttribute("open"); | ||
| this.setAttribute("open", JSON.stringify(newState)); | ||
| } | ||
@@ -67,0 +85,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by11.58%
22106
- Lines of code
- increased by7.79%
332
- Number of lines in readme file
- increased by42.25%
101
No dependency changes