kempo 2.13.1 → 2.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:
|
|
1
|
+
import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:t=!0,overlayClose:n=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:l="",cancelClasses:c="",cancelAction:a=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:t,overlayClose:n,confirmText:o,confirmClasses:i,cancelText:l,cancelClasses:c}),this.registerProps({confirmAction:s,cancelAction:a,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:t}}=e;"overlay"==t&&this.overlayClose||"close"==t?this.close():"cancel"==t?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==t&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),"opened"===name&&dispatchEvent(this,n?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n <k-focus-capture>\n <button id="overlay" aria-label="Close the Dialog"></button>\n <div id="wrapper">\n <div\n id="dialog"\n role="dialog"\n aria-modal="true"\n aria-labelledby="title"\n >\n <div\n id="header"\n class="${this._hasTitle()?"has-title":""}"\n >\n <div\n id="title"\n ><slot name="title"></slot></div>\n ${this.renderIf(this.closeBtn,'\n <button\n id="close"\n >\n <k-icon name="close"></k-icon>\n </button>\n ')}\n </div>\n <div id="body">\n ${super.shadowTemplate}\n </div>\n ${this.renderIf(this.cancelText||this.confirmText,`\n <div id="footer">\n ${this.renderIf(this.cancelText,`\n <button id="cancel" class="${this.cancelClasses}">\n ${this.cancelText}\n </button>\n `)}\n ${this.renderIf(this.confirmText,`\n <button id="confirm" class="${this.confirmClasses}">\n ${this.confirmText}\n </button>\n `)}\n </div>\n `)}\n </div>\n </div>\n </k-focus-capture>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: inline;\n height: 1px;\n width: 1px;\n position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n top: 0;\n left: 0;\n z-index: 100;\n }\n :host(:not([opened])){\n display: none;\n }\n #overlay {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n background-color: var(--c_overlay);\n z-index: 100;\n border: 0px solid transparent;\n box-shadow: 0 0 0 transparent;\n }\n #wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n width: 100%;\n height: 100vh;\n top: 0;\n left: 0;\n z-index: 101;\n pointer-events: none;\n }\n #dialog {\n display: flex;\n flex-direction: column;\n min-width: var(--min_width, 20rem);\n width: var(--width, fit-content);\n max-width: var(--max_width, calc(100vw - 4rem));\n min-height: var(--min_height, 12rem);\n height: var(--height, fit-content);\n max-height: var(--max_height, calc(100vh - 4rem));\n background-color: var(--c_bg);\n box-shadow: var(--drop_shadow);\n border-radius: var(--radius);\n pointer-events: all;\n }\n #header {\n display: flex;\n align-items: center;\n }\n #header.has-title {\n border-bottom: 1px solid var(--c_border);\n }\n #title {\n flex: 1 1 auto;\n }\n #close {\n border: 0px;\n background: transparent;\n box-shadow: 0 0 0 transparent;\n color: var(--tc);\n }\n #close k-icon {\n pointer-events: none;\n }\n #body {\n flex: 1 1 auto;\n }\n #footer {\n display: flex;\n justify-content: flex-end;\n padding: var(--spacer_h);\n }\n `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",t={}){!1!==t.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const n=new Dialog({opened:!0,...t});return onEvent(n,"close",n.remove),e instanceof HTMLElement||e instanceof DocumentFragment?n.appendChild(e):e instanceof NodeList?e.forEach((e=>n.appendChild(e))):n.innerHTML=e,t.width&&n.style.setProperty("--width",t.width),t.minWidth&&n.style.setProperty("--min_width",t.minWidth),t.maxWidth&&n.style.setProperty("--max_width",t.maxWidth),t.height&&n.style.setProperty("--height",t.height),t.minHeight&&n.style.setProperty("--min_height",t.minHeight),t.maxHeight&&n.style.setProperty("--max_height",t.maxHeight),document.body.prepend(n),n.open(),n}static confirm(e,t,n={title:"Confirm"}){return Dialog.create(`\n <h5 slot="title" class="pyh px m0">${n.title}</h5>\n <p class="p">${e}</p>\n `,{...n,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>t(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>t(!1)})}static alert(e,t,n={title:"Alert"}){return Dialog.create(`\n <h5 slot="title" class="pyh px m0">${n.title}</h5>\n <p class="p">${e}</p>\n `,{closeCallback:t,cancelText:"Ok",...n})}static error(e,t,n={title:"Error"}){return Dialog.create(`\n <h5 slot="title" class="pyh px m0 tc-danger">${n.title}</h5>\n <p class="p">${e}</p>\n `,{closeCallback:t,cancelText:"Ok",...n})}static success(e,t,n={title:"Success"}){return Dialog.create(`\n <h5 slot="title" class="pyh px m0 tc-success">${n.title}</h5>\n <p class="p">${e}</p>\n `,{closeCallback:t,cancelText:"Ok",...n})}}window.customElements.define("k-dialog",Dialog);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:
|
|
1
|
+
import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:t=!0,overlayClose:n=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:l="",cancelClasses:c="",cancelAction:a=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:t,overlayClose:n,confirmText:o,confirmClasses:i,cancelText:l,cancelClasses:c}),this.registerProps({confirmAction:s,cancelAction:a,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:t}}=e;"overlay"==t&&this.overlayClose||"close"==t?this.close():"cancel"==t?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==t&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),"opened"===name&&dispatchEvent(this,n?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n <k-focus-capture>\n <button id="overlay" aria-label="Close the Dialog"></button>\n <div id="wrapper">\n <div\n id="dialog"\n role="dialog"\n aria-modal="true"\n aria-labelledby="title"\n >\n <div\n id="header"\n class="${this._hasTitle()?"has-title":""}"\n >\n <div\n id="title"\n ><slot name="title"></slot></div>\n ${this.renderIf(this.closeBtn,'\n <button\n id="close"\n >\n <k-icon name="close"></k-icon>\n </button>\n ')}\n </div>\n <div id="body">\n ${super.shadowTemplate}\n </div>\n ${this.renderIf(this.cancelText||this.confirmText,`\n <div id="footer">\n ${this.renderIf(this.cancelText,`\n <button id="cancel" class="${this.cancelClasses}">\n ${this.cancelText}\n </button>\n `)}\n ${this.renderIf(this.confirmText,`\n <button id="confirm" class="${this.confirmClasses}">\n ${this.confirmText}\n </button>\n `)}\n </div>\n `)}\n </div>\n </div>\n </k-focus-capture>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: inline;\n height: 1px;\n width: 1px;\n position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n top: 0;\n left: 0;\n z-index: 100;\n }\n :host(:not([opened])){\n display: none;\n }\n #overlay {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n background-color: var(--c_overlay);\n z-index: 100;\n border: 0px solid transparent;\n box-shadow: 0 0 0 transparent;\n }\n #wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n width: 100%;\n height: 100vh;\n top: 0;\n left: 0;\n z-index: 101;\n pointer-events: none;\n }\n #dialog {\n display: flex;\n flex-direction: column;\n min-width: var(--min_width, 20rem);\n width: var(--width, fit-content);\n max-width: var(--max_width, calc(100vw - 4rem));\n min-height: var(--min_height, 12rem);\n height: var(--height, fit-content);\n max-height: var(--max_height, calc(100vh - 4rem));\n background-color: var(--c_bg);\n box-shadow: var(--drop_shadow);\n border-radius: var(--radius);\n pointer-events: all;\n }\n #header {\n display: flex;\n align-items: center;\n }\n #header.has-title {\n border-bottom: 1px solid var(--c_border);\n }\n #title {\n flex: 1 1 auto;\n }\n #close {\n border: 0px;\n background: transparent;\n box-shadow: 0 0 0 transparent;\n color: var(--tc);\n }\n #close k-icon {\n pointer-events: none;\n }\n #body {\n flex: 1 1 auto;\n }\n #footer {\n display: flex;\n justify-content: flex-end;\n padding: var(--spacer_h);\n }\n `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",t={}){!1!==t.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const n=new Dialog({opened:!0,...t});return onEvent(n,"close",n.remove),e instanceof HTMLElement||e instanceof DocumentFragment?n.appendChild(e):e instanceof NodeList?e.forEach((e=>n.appendChild(e))):n.innerHTML=e,t.width&&n.style.setProperty("--width",t.width),t.minWidth&&n.style.setProperty("--min_width",t.minWidth),t.maxWidth&&n.style.setProperty("--max_width",t.maxWidth),t.height&&n.style.setProperty("--height",t.height),t.minHeight&&n.style.setProperty("--min_height",t.minHeight),t.maxHeight&&n.style.setProperty("--max_height",t.maxHeight),document.body.prepend(n),n.open(),n}static confirm(e,t,n={title:"Confirm"}){return Dialog.create(`\n <h5 slot="title" class="pyh px m0">${n.title}</h5>\n <p class="p">${e}</p>\n `,{...n,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>t(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>t(!1)})}static alert(e,t,n={title:"Alert"}){return Dialog.create(`\n <h5 slot="title" class="pyh px m0">${n.title}</h5>\n <p class="p">${e}</p>\n `,{closeCallback:t,cancelText:"Ok",...n})}static error(e,t,n={title:"Error"}){return Dialog.create(`\n <h5 slot="title" class="pyh px m0 tc-danger">${n.title}</h5>\n <p class="p">${e}</p>\n `,{closeCallback:t,cancelText:"Ok",...n})}static success(e,t,n={title:"Success"}){return Dialog.create(`\n <h5 slot="title" class="pyh px m0 tc-success">${n.title}</h5>\n <p class="p">${e}</p>\n `,{closeCallback:t,cancelText:"Ok",...n})}}window.customElements.define("k-dialog",Dialog);
|
package/package.json
CHANGED
package/src/components/Dialog.js
CHANGED
|
@@ -266,12 +266,6 @@ export default class Dialog extends Component {
|
|
|
266
266
|
$dialog.open();
|
|
267
267
|
return $dialog;
|
|
268
268
|
}
|
|
269
|
-
static alert(message = '', callback, options = {}){
|
|
270
|
-
return Dialog.create(message, {
|
|
271
|
-
closeCallback: callback,
|
|
272
|
-
...options
|
|
273
|
-
});
|
|
274
|
-
}
|
|
275
269
|
static confirm(text, responseCallback, options = {
|
|
276
270
|
title: 'Confirm'
|
|
277
271
|
}){
|
|
@@ -294,18 +288,41 @@ export default class Dialog extends Component {
|
|
|
294
288
|
}
|
|
295
289
|
});
|
|
296
290
|
}
|
|
291
|
+
static alert(text, responseCallback, options = {
|
|
292
|
+
title: 'Alert'
|
|
293
|
+
}){
|
|
294
|
+
return Dialog.create(`
|
|
295
|
+
<h5 slot="title" class="pyh px m0">${options.title}</h5>
|
|
296
|
+
<p class="p">${text}</p>
|
|
297
|
+
`, {
|
|
298
|
+
closeCallback: responseCallback,
|
|
299
|
+
cancelText: 'Ok',
|
|
300
|
+
...options,
|
|
301
|
+
});
|
|
302
|
+
}
|
|
297
303
|
static error(text, responseCallback, options = {
|
|
298
304
|
title: 'Error'
|
|
299
305
|
}){
|
|
300
|
-
|
|
306
|
+
return Dialog.create(`
|
|
301
307
|
<h5 slot="title" class="pyh px m0 tc-danger">${options.title}</h5>
|
|
302
308
|
<p class="p">${text}</p>
|
|
303
309
|
`, {
|
|
310
|
+
closeCallback: responseCallback,
|
|
311
|
+
cancelText: 'Ok',
|
|
304
312
|
...options,
|
|
313
|
+
});
|
|
314
|
+
}
|
|
315
|
+
static success(text, responseCallback, options = {
|
|
316
|
+
title: 'Success'
|
|
317
|
+
}){
|
|
318
|
+
return Dialog.create(`
|
|
319
|
+
<h5 slot="title" class="pyh px m0 tc-success">${options.title}</h5>
|
|
320
|
+
<p class="p">${text}</p>
|
|
321
|
+
`, {
|
|
322
|
+
closeCallback: responseCallback,
|
|
305
323
|
cancelText: 'Ok',
|
|
324
|
+
...options,
|
|
306
325
|
});
|
|
307
|
-
onEvent($dialog, 'close', responseCallback);
|
|
308
|
-
return $dialog;
|
|
309
326
|
}
|
|
310
327
|
}
|
|
311
328
|
window.customElements.define('k-dialog', Dialog);
|