jsl-ui 9.29.0 → 10.0.0

package/lib/ui/dialog.css

@@ -1,109 +1,145 @@
-.jsl-dialog {
-    position: relative;
-    z-index: 2002;
-    background:white;
-    border-radius: 0.8rem;
-    pointer-events: all;
-    border: 2px solid #dddddd;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.jsl-dialog .jsl-button {
-  vertical-align: middle;
-  /* color: #fff;
-  background-color: #3b99ff;
-  border: 1px solid #3b99ff; */
-  cursor: pointer;
-  height: 2rem;
-  box-sizing: border-box;
-  letter-spacing: .1rem;
-  text-align: center;
-  white-space: nowrap;
-  border-radius: .3rem;
-  padding: 0 1rem;
-  line-height: 2rem;
-  text-decoration: none;
-  display: inline-block;
-}
-
-/* .jsl-dialog .jsl-button.jsl-button-outline {
-  color: #444;
-  background: #fff;
-} */
-
-.dlg-close-btn {
-    color: #555555;
-    font-size: 2rem;
-    line-height: 2.8rem;
-    font-weight: bold;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    width: 2.5rem;
-    box-sizing: border-box;
-    border-top-right-radius: 0.8rem;
-    cursor: pointer;
-    background: #d8d8d8;
-}
-
-.dlg-close-btn:hover {
-    background: #B22121;
-    color: white;
-}
-
-.jsl-dialog-overlay {
-    position: fixed;
-    left:0;
-    top:0;
-    bottom:0;
-    right:0;
-    z-index: 2001;
-    background:rgba(0,0,0,0.8);
-    height: 100vh;
-}
-
-.jsl-dialog > .dlg-header {
-	box-sizing: content-box;
-    position: relative;
-    height: 2rem;
-    padding: 0.6rem;
-    border-bottom: 1px solid #ededed;
-    background: #f8f8f8;
-    font-size: 1.5rem;
-    border-top-right-radius: 0.8rem;
-    border-top-left-radius: 0.8rem;
-    text-align: center;
-}
-
-.jsl-dialog > .dlg-body {
-    padding: 1rem;
-    box-sizing: border-box;
-    overflow: auto;
-    margin-bottom: 3rem;
-}
-
-.jsl-dialog > .dlg-footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 3rem;
-    box-sizing: border-box;
-    padding: 0.5rem;
-    border-top: 1px solid #ededed;
-    background: #f8f8f8;
-    border-bottom-right-radius: 0.8rem;
-    border-bottom-left-radius: 0.8rem;
-    text-align: right;
-}
-
-.jsl-dialog > .dlg-footer button {
-    margin-left: 1rem;
-}
-
-.jsl-dialog .slickgrid {
-    border-radius: 0;
+@import "./button.css";
+
+.jsl-dialog-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--jsl-dialog-z-index, 2001);
+    background: var(--jsl-dialog-backdrop, var(--jsl-color-overlay));
+}
+
+.jsl-dialog {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 32rem;
+    max-width: calc(100% - 2rem);
+    max-height: calc(100% - 2rem);
+    border: 1px solid var(--jsl-dialog-border, var(--jsl-color-border-subtle));
+    border-radius: var(--jsl-dialog-radius, 0.75rem);
+    background: var(--jsl-dialog-surface, var(--jsl-color-surface));
+    color: var(--jsl-color-text);
+    box-shadow: var(--jsl-dialog-shadow, var(--jsl-shadow-dialog));
+    font: inherit;
+    line-height: 1.5;
+    pointer-events: auto;
+    isolation: isolate;
+}
+
+.jsl-dialog:focus { outline: none; }
+.jsl-dialog.resizable { position: absolute; }
+.jsl-dialog:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: 3px; }
+
+.jsl-dialog > .dlg-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    min-width: 0;
+    padding: 1.125rem 1.5rem;
+    border-bottom: 1px solid var(--jsl-color-border-subtle);
+    border-radius: var(--jsl-dialog-radius, 0.75rem) var(--jsl-dialog-radius, 0.75rem) 0 0;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.5;
+}
+
+.jsl-dialog .dlg-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.jsl-dialog-moveable > .dlg-header { cursor: move; touch-action: none; }
+
+.jsl-dialog .dlg-close-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    width: 2rem;
+    height: 2rem;
+    margin: -0.25rem -0.5rem -0.25rem auto;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 0.375rem;
+    background: transparent;
+    color: var(--jsl-color-text-secondary);
+    font: inherit;
+    cursor: pointer;
+}
+
+.jsl-dialog .dlg-close-btn::before,
+.jsl-dialog .dlg-close-btn::after {
+    content: "";
+    position: absolute;
+    width: 0.875rem;
+    height: 1.5px;
+    border-radius: 1px;
+    background: currentColor;
+    transform: rotate(45deg);
+}
+.jsl-dialog .dlg-close-btn::after { transform: rotate(-45deg); }
+.jsl-dialog .dlg-close-btn:hover { background: var(--jsl-color-surface-hover); color: var(--jsl-color-text); }
+.jsl-dialog .dlg-close-btn:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: 2px; }
+
+.jsl-dialog > .dlg-body {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    min-height: 0;
+    min-width: 0;
+    padding: 1.5rem;
+    overflow: auto;
+    overflow-wrap: anywhere;
+    overscroll-behavior: contain;
+}
+
+.jsl-dialog > .dlg-footer {
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--jsl-color-border-subtle);
+    border-radius: 0 0 var(--jsl-dialog-radius, 0.75rem) var(--jsl-dialog-radius, 0.75rem);
+    background: var(--jsl-color-surface-subtle);
+    text-align: end;
+}
+
+.jsl-dialog > .dlg-footer > div,
+.jsl-dialog > .dlg-footer > form {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
+.jsl-dialog > .dlg-footer > button + button { margin-inline-start: 0.5rem; }
+.jsl-dialog > .dlg-header[hidden], .jsl-dialog > .dlg-footer[hidden] { display: none; }
+.jsl-dialog .slickgrid { border-radius: 0; }
+
+.jsl-dialog.resizable > .dlg-res-handle.rs-r.rs-b {
+    width: 1rem;
+    height: 1rem;
+    right: 0.125rem;
+    bottom: 0.125rem;
+    background: transparent;
+    cursor: nwse-resize;
+    touch-action: none;
+}
+.jsl-dialog .dlg-res-handle::after {
+    content: "";
+    position: absolute;
+    right: 0.2rem;
+    bottom: 0.2rem;
+    width: 0.4rem;
+    height: 0.4rem;
+    border-right: 1px solid var(--jsl-color-text-muted);
+    border-bottom: 1px solid var(--jsl-color-text-muted);
+}
+
+@media (max-width: 480px) {
+    .jsl-dialog { max-width: calc(100% - 1.5rem); max-height: calc(100% - 1.5rem); }
+    .jsl-dialog > .dlg-header { padding: 1rem 1.125rem; }
+    .jsl-dialog > .dlg-body { padding: 1.125rem; }
+    .jsl-dialog > .dlg-footer { padding: 0.875rem 1.125rem; }
 }

package/lib/ui/dialog.d.ts

@@ -11,12 +11,30 @@ export interface IDialogOptions {
 }
 export declare class JSLDialog {
     private options;
+    private static opened;
+    private static bodyOverflow;
+    private static scrollLocked;
     private overlay;
     private el;
-    private onKeydownEvent;
+    private isOpen;
+    private closed;
+    private destroyed;
+    private isModal;
+    private closing;
+    private previousFocus;
+    private focusTimer;
     constructor(el: HTMLElement, options: IDialogOptions);
     open(modal?: boolean): void;
     close(): void;
+    /** Release listeners and modal state without calling onClose. */
+    destroy(): void;
     getOverlay(): HTMLElement;
+    private static top;
+    private static updateScrollLock;
+    private deactivate;
+    private canFocus;
+    private focusInitial;
+    private onOverlayPress;
+    private onKeydownEvent;
 }
 export declare function Dialog(input: HTMLElement | string, options?: IDialogOptions): JSLDialog;

package/lib/ui/dialog.js

@@ -1,97 +1,215 @@
 import "./dialog.css";
 const defaultOptions = {
     autoOpen: false,
-    autoFocus: "input,button,textarea",
+    autoFocus: "input,button,textarea,select,[tabindex]",
     closeOnOverlayClick: true,
     modal: true,
     closeOnEscape: true
 };
+let nextDialogId = 0;
 export class JSLDialog {
     constructor(el, options) {
         this.options = options;
+        this.isOpen = false;
+        this.closed = false;
+        this.destroyed = false;
+        this.isModal = false;
+        this.closing = false;
+        this.onOverlayPress = (event) => {
+            if (event.target === this.overlay && JSLDialog.top() === this) {
+                this.close();
+            }
+        };
+        this.onKeydownEvent = (event) => {
+            if (JSLDialog.top() !== this || event.defaultPrevented || event.isComposing) {
+                return;
+            }
+            if ((event.key === "Escape" || event.keyCode === 27) && this.options.closeOnEscape) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                this.close();
+            }
+            else if ((event.key === "Enter" || event.keyCode === 13) && this.options.OkOnEnter) {
+                const target = event.target;
+                // Preserve native activation, multiline editing, and editable rich content.
+                if (!this.el.contains(target) || target.closest("button,a,textarea,[contenteditable]:not([contenteditable=false])")) {
+                    return;
+                }
+                const ok = this.el.querySelector(".dlg-ok-btn");
+                if (ok && !ok.disabled) {
+                    event.preventDefault();
+                    ok.click();
+                }
+            }
+            else if (event.key === "Tab" && this.isModal) {
+                const targets = Array.from(this.el.querySelectorAll('a[href],area[href],input:not([type="hidden"]),select,textarea,button,[tabindex],[contenteditable="true"]')).filter(element => element.tabIndex >= 0 && this.canFocus(element));
+                const first = targets[0];
+                const last = targets[targets.length - 1];
+                const active = document.activeElement;
+                if (!first) {
+                    event.preventDefault();
+                    this.el.focus();
+                }
+                else if (event.shiftKey && (active === first || !targets.some(element => element === active))) {
+                    event.preventDefault();
+                    last.focus();
+                }
+                else if (!event.shiftKey && (active === last || !targets.some(element => element === active))) {
+                    event.preventDefault();
+                    first.focus();
+                }
+            }
+        };
         this.overlay = el;
         this.el = el.firstElementChild;
+        if (!this.el.hasAttribute("role")) {
+            this.el.setAttribute("role", "dialog");
+        }
+        if (!this.el.hasAttribute("tabindex")) {
+            this.el.setAttribute("tabindex", "-1");
+        }
+        const header = this.el.querySelector(".dlg-header");
+        if (header && !this.el.hasAttribute("aria-labelledby") && !this.el.hasAttribute("aria-label")) {
+            header.id = header.id || "jsl-dialog-title-" + ++nextDialogId;
+            this.el.setAttribute("aria-labelledby", header.id);
+        }
         if (this.options.closeOnOverlayClick) {
-            this.overlay.addEventListener("mousedown", (evt) => {
-                if (evt.target === this.overlay) {
-                    this.close();
-                }
-            });
-            this.overlay.addEventListener("touchstart", (evt) => {
-                if (evt.target === this.overlay) {
-                    this.close();
-                }
-            });
+            this.overlay.addEventListener("mousedown", this.onOverlayPress);
+            this.overlay.addEventListener("touchstart", this.onOverlayPress);
         }
     }
     open(modal) {
-        if ((modal !== undefined && !modal) || !this.options.modal) {
-            this.overlay.style.background = "transparent";
-            this.overlay.style.pointerEvents = "none";
+        var _a, _b, _c;
+        if (this.isOpen || this.destroyed) {
+            return;
         }
+        this.closed = false;
+        this.isOpen = true;
+        this.isModal = (_a = modal !== null && modal !== void 0 ? modal : this.options.modal) !== null && _a !== void 0 ? _a : true;
+        this.previousFocus = document.activeElement;
+        const top = JSLDialog.top();
+        const baseZ = Number(getComputedStyle(this.overlay).zIndex) || 2001;
+        this.overlay.style.zIndex = String(Math.max(baseZ, top ? Number(top.overlay.style.zIndex) + 1 : baseZ));
+        this.overlay.style.background = this.isModal ? "" : "transparent";
+        this.overlay.style.pointerEvents = this.isModal ? "" : "none";
         this.overlay.style.display = "block";
-        const $footer = this.el.querySelector(".dlg-footer");
-        const $body = this.el.querySelector(".dlg-body");
-        if ($footer != null && $body != null) {
-            // TODO ?
-        }
-        if (this.options.autoFocus) {
-            setTimeout(() => {
-                const firstInput = this.el.querySelector(this.options.autoFocus);
-                if (firstInput != null) {
-                    firstInput.focus();
-                }
-            }, 0);
-        }
-        if (this.options.closeOnEscape || this.options.OkOnEnter) {
-            this.onKeydownEvent = (args) => {
-                var _a;
-                if (args.keyCode === 27 && this.options.closeOnEscape) { // escape
-                    this.close();
-                }
-                else if (args.keyCode === 13 && this.options.OkOnEnter) { // ok
-                    const ok_btn = this.el.querySelector(".dlg-ok-btn");
-                    if (ok_btn != null) {
-                        (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
-                        ok_btn.click();
-                    }
-                }
-            };
-            document.addEventListener("keydown", this.onKeydownEvent);
+        if (this.isModal) {
+            this.el.setAttribute("aria-modal", "true");
         }
-        if (this.options.onOpen) {
-            this.options.onOpen();
+        else {
+            this.el.removeAttribute("aria-modal");
         }
+        JSLDialog.opened.push(this);
+        JSLDialog.updateScrollLock();
+        document.addEventListener("keydown", this.onKeydownEvent);
+        this.focusTimer = window.setTimeout(() => {
+            this.focusTimer = undefined;
+            if (this.isOpen && JSLDialog.top() === this) {
+                this.focusInitial();
+            }
+        }, 0);
+        (_c = (_b = this.options).onOpen) === null || _c === void 0 ? void 0 : _c.call(_b);
     }
     close() {
-        if (this.options.onClose) {
-            if (this.options.onClose() === false) {
+        var _a, _b;
+        if (this.closed || this.destroyed || this.closing) {
+            return;
+        }
+        this.closing = true;
+        try {
+            if (((_b = (_a = this.options).onClose) === null || _b === void 0 ? void 0 : _b.call(_a)) === false) {
                 return;
             }
+            this.closed = true;
+            this.deactivate();
         }
-        this.overlay.style.display = "none";
-        if (this.onKeydownEvent != null) {
-            document.removeEventListener("keydown", this.onKeydownEvent);
+        finally {
+            this.closing = false;
+        }
+    }
+    /** Release listeners and modal state without calling onClose. */
+    destroy() {
+        if (this.destroyed) {
+            return;
         }
+        this.destroyed = true;
+        this.closed = true;
+        this.deactivate();
+        this.overlay.removeEventListener("mousedown", this.onOverlayPress);
+        this.overlay.removeEventListener("touchstart", this.onOverlayPress);
     }
     getOverlay() {
         return this.overlay;
     }
+    static top() {
+        return JSLDialog.opened[JSLDialog.opened.length - 1];
+    }
+    static updateScrollLock() {
+        const lock = JSLDialog.opened.some(dialog => dialog.isModal);
+        if (lock && !JSLDialog.scrollLocked) {
+            JSLDialog.bodyOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+        }
+        else if (!lock && JSLDialog.scrollLocked) {
+            document.body.style.overflow = JSLDialog.bodyOverflow;
+        }
+        JSLDialog.scrollLocked = lock;
+    }
+    deactivate() {
+        var _a;
+        if (!this.isOpen) {
+            return;
+        }
+        const wasTop = JSLDialog.top() === this;
+        this.isOpen = false;
+        window.clearTimeout(this.focusTimer);
+        document.removeEventListener("keydown", this.onKeydownEvent);
+        const index = JSLDialog.opened.indexOf(this);
+        if (index >= 0) {
+            JSLDialog.opened.splice(index, 1);
+        }
+        this.overlay.style.display = "none";
+        this.overlay.style.zIndex = "";
+        JSLDialog.updateScrollLock();
+        if (wasTop) {
+            const top = JSLDialog.top();
+            if (((_a = this.previousFocus) === null || _a === void 0 ? void 0 : _a.isConnected) && (!(top === null || top === void 0 ? void 0 : top.isModal) || top.el.contains(this.previousFocus))) {
+                this.previousFocus.focus({ preventScroll: true });
+            }
+            else {
+                top === null || top === void 0 ? void 0 : top.focusInitial();
+            }
+        }
+    }
+    canFocus(element) {
+        return !element.matches(":disabled") && !element.closest("[inert]") &&
+            element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden";
+    }
+    focusInitial() {
+        if (this.options.autoFocus) {
+            const containers = [this.el.querySelector(".dlg-body"), this.el.querySelector(".dlg-footer"), this.el];
+            for (const container of containers) {
+                const target = container && Array.from(container.querySelectorAll(this.options.autoFocus))
+                    .find(element => this.canFocus(element));
+                if (target) {
+                    target.focus({ preventScroll: true });
+                    return;
+                }
+            }
+        }
+        if (this.isModal) {
+            this.el.focus({ preventScroll: true });
+        }
+    }
 }
+JSLDialog.opened = [];
+JSLDialog.scrollLocked = false;
 export function Dialog(input, options) {
     const o = { ...defaultOptions, ...options };
-    let el;
-    if (typeof input === "string") {
-        el = document.querySelector(input);
-    }
-    else {
-        el = input;
-    }
+    const el = typeof input === "string" ? document.querySelector(input) : input;
     const result = new JSLDialog(el, o);
-    if (!o.autoOpen) {
-        el.style.display = "none";
-    }
-    else {
+    el.style.display = "none";
+    if (o.autoOpen) {
         result.open();
     }
     return result;

package/lib/ui/input.css

@@ -0,0 +1,35 @@
+@import "./theme.css";
+
+.jsl-input, .jsl-date-input {
+    box-sizing: border-box;
+    width: 14rem;
+    max-width: 100%;
+    min-width: 0;
+    height: 2.5rem;
+    padding: .5rem .75rem;
+    border: 1px solid var(--jsl-color-border);
+    border-radius: .5rem;
+    background-color: var(--jsl-color-surface);
+    color: var(--jsl-color-text);
+    font: inherit;
+    font-size: .875rem;
+    line-height: 1.4;
+    transition: border-color .15s;
+}
+.jsl-input:hover:not(:disabled), .jsl-date-input:hover:not(:disabled) { border-color: var(--jsl-color-text-muted); }
+.jsl-input:focus, .jsl-date-input:focus {
+    outline: 2px solid var(--jsl-color-focus);
+    outline-offset: 2px;
+    border-color: var(--jsl-color-accent);
+}
+.jsl-input::placeholder, .jsl-date-input::placeholder { color: var(--jsl-color-text-muted); opacity: 1; }
+.jsl-input:disabled, .jsl-date-input:disabled {
+    cursor: not-allowed;
+    background-color: var(--jsl-color-disabled-surface);
+    color: var(--jsl-color-disabled-text);
+}
+.jsl-input[aria-invalid="true"] { border-color: var(--jsl-color-danger); }
+textarea.jsl-input { min-height: 6rem; height: auto; resize: vertical; }
+.jsl-input[type="color"] { width: 4rem; padding: .25rem; cursor: pointer; }
+.jsl-input[type="number"], .jsl-input.jsl-number { font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: reduce) { .jsl-input, .jsl-date-input { transition: none; } }