@lvl99dotcom/paintcanvas 0.5.0 → 0.7.0

package/dist/ui/elements/PcDialog/index.d.ts

@@ -1,6 +1,7 @@
 import { type PropertyValues } from "lit";
 import { PcElement } from "../../base";
 import "../PcButton";
+import "../PcDialogWindow";
 import type { ButtonVariant } from "../PcButton";
 /** A button in a dialog */
 export interface DialogChoice {
@@ -12,14 +13,27 @@ export interface DialogChoice {
     /** The button's style instead (e.g. `dismiss`: pink text without a background) */
     variant?: ButtonVariant;
 }
-/** What `pc-choose` gives when the dialog is dismissed with Escape */
+/** A text field in a dialog, e.g. for a name */
+export interface DialogField {
+    label: string;
+    /** The text it starts with */
+    value: string;
+}
+/** What `pc-choose` gives: the chosen value, and the field's text when the dialog has a field */
+export interface DialogChoiceDetail {
+    value: string;
+    text?: string;
+}
+/** What `pc-choose` gives when the dialog is dismissed (Escape, or a press outside it) */
 export declare const CANCEL_CHOICE = "cancel";
 /**
- * A modal window asking the user to choose, over a dimmed backdrop, with a heading, a message, any content of its own,
- * and its choices, each on its own row (the cancel choice and those marked `cancelling` in pink, the others purple,
- * unless a choice gives its own `variant`).
- * Focus moves to the first choice when it opens. Fires `pc-choose` with the chosen value (`cancel` for Escape, pressed
- * anywhere while it's open).
+ * A modal window asking the user to choose (a `<pc-dialog-window>` over a shaded page), with a heading, a message, an
+ * optional text field (`field`, e.g. for a name), any content of its own, and its choices, each on its own row (the
+ * cancel choice and those marked `cancelling` in pink, the others purple, unless a choice gives its own `variant`).
+ *
+ * Focus moves to the field, or else the first choice, when it opens. Fires `pc-choose` with the chosen value (and the
+ * field's `text`): Enter in the field chooses the first choice that isn't cancelling; Escape and a press outside it
+ * choose `cancel`, unless it's not `dismissible`. `inline` shows it over its nearest positioned ancestor only.
  *
  * @example
  * html`<pc-dialog heading="Delete layer" message='Delete "Sketch"?'
@@ -37,6 +51,16 @@ export declare class PcDialog extends PcElement {
         choices: {
             attribute: boolean;
         };
+        field: {
+            attribute: boolean;
+        };
+        dismissible: {
+            type: BooleanConstructor;
+        };
+        inline: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -52,12 +76,24 @@ export declare class PcDialog extends PcElement {
     heading: string;
     message: string;
     choices: readonly DialogChoice[];
+    /** A text field to fill in, if any */
+    field?: DialogField;
+    /** Whether Escape and a press outside it choose `cancel` */
+    dismissible: boolean;
+    /** Whether it covers only its nearest positioned ancestor, leaving the rest of the page usable */
+    inline: boolean;
     constructor();
     firstUpdated(changed: PropertyValues<this>): void;
-    /** Choose one of the choices (or `cancel`) */
+    /**
+     * Move focus to the field (selecting its text), or else the first choice, once the window has opened (nothing in it
+     * can take focus before) and the choice has rendered its button.
+     */
+    private focusFirst;
+    /**
+     * Choose one of the choices (or `cancel`), giving the field's text when there's a field.
+     */
     choose(value: string): void;
-    private readonly onKeyDown;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    private readonly onFieldKeyDown;
+    private readonly onDismiss;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/ui/elements/PcDialog/index.js

@@ -1,15 +1,18 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
 import "../PcButton/index.js";
+import "../PcDialogWindow/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcDialog/index.ts
-/** What `pc-choose` gives when the dialog is dismissed with Escape */
+/** What `pc-choose` gives when the dialog is dismissed (Escape, or a press outside it) */
 var CANCEL_CHOICE = "cancel";
 /**
-* A modal window asking the user to choose, over a dimmed backdrop, with a heading, a message, any content of its own,
-* and its choices, each on its own row (the cancel choice and those marked `cancelling` in pink, the others purple,
-* unless a choice gives its own `variant`).
-* Focus moves to the first choice when it opens. Fires `pc-choose` with the chosen value (`cancel` for Escape, pressed
-* anywhere while it's open).
+* A modal window asking the user to choose (a `<pc-dialog-window>` over a shaded page), with a heading, a message, an
+* optional text field (`field`, e.g. for a name), any content of its own, and its choices, each on its own row (the
+* cancel choice and those marked `cancelling` in pink, the others purple, unless a choice gives its own `variant`).
+*
+* Focus moves to the field, or else the first choice, when it opens. Fires `pc-choose` with the chosen value (and the
+* field's `text`): Enter in the field chooses the first choice that isn't cancelling; Escape and a press outside it
+* choose `cancel`, unless it's not `dismissible`. `inline` shows it over its nearest positioned ancestor only.
 *
 * @example
 * html`<pc-dialog heading="Delete layer" message='Delete "Sketch"?'
@@ -21,32 +24,20 @@ var PcDialog = class extends PcElement {
 		...PcElement.properties,
 		heading: { type: String },
 		message: { type: String },
-		choices: { attribute: false }
+		choices: { attribute: false },
+		field: { attribute: false },
+		dismissible: { type: Boolean },
+		inline: {
+			type: Boolean,
+			reflect: true
+		}
 	};
 	static styles = [PcElement.styles, css`
       :host {
-        position: fixed;
-        z-index: 20;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: var(--pc-space-3);
-        background: var(--pc-backdrop);
+        display: contents;
       }
-      [role="dialog"] {
-        display: flex;
-        width: 100%;
-        max-width: 400px;
-        flex-direction: column;
-        gap: var(--pc-space-2);
-        padding: var(--pc-space-3);
-        border-radius: var(--pc-radius);
-        background: var(--pc-surface-raised);
-        color: var(--pc-text);
-        box-shadow: var(--pc-shadow);
-        font-family: var(--pc-font);
-        font-size: var(--pc-font-size);
+      pc-dialog-window {
+        --pc-dialog-width: 400px;
       }
       h2 {
         margin: 0;
@@ -55,6 +46,30 @@ var PcDialog = class extends PcElement {
       p {
         margin: 0;
       }
+      .body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+      }
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-1);
+      }
+      input {
+        box-sizing: border-box;
+        width: 100%;
+        min-height: var(--pc-control-size);
+        padding: 0 var(--pc-space-2);
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-radius-small);
+        background: var(--pc-surface);
+        color: var(--pc-text);
+        font: inherit;
+      }
+      input:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+      }
       .choices {
         display: flex;
         flex-direction: column;
@@ -66,41 +81,77 @@ var PcDialog = class extends PcElement {
 		this.heading = "";
 		this.message = "";
 		this.choices = [];
+		this.dismissible = true;
+		this.inline = false;
 	}
 	firstUpdated(changed) {
 		super.firstUpdated(changed);
+		this.focusFirst();
+	}
+	/**
+	* Move focus to the field (selecting its text), or else the first choice, once the window has opened (nothing in it
+	* can take focus before) and the choice has rendered its button.
+	*/
+	async focusFirst() {
+		await this.renderRoot.querySelector("pc-dialog-window").updateComplete;
+		const field = this.renderRoot.querySelector("input");
+		if (field) {
+			field.focus();
+			field.select();
+			return;
+		}
 		const first = this.renderRoot.querySelector("pc-button");
-		if (first) first.updateComplete.then(() => first.focus());
+		if (!first) return;
+		await first.updateComplete;
+		first.focus();
 	}
-	/** Choose one of the choices (or `cancel`) */
+	/**
+	* Choose one of the choices (or `cancel`), giving the field's text when there's a field.
+	*/
 	choose(value) {
-		emit(this, "pc-choose", { value });
+		const text = this.renderRoot.querySelector("input")?.value;
+		emit(this, "pc-choose", text === void 0 ? { value } : {
+			value,
+			text
+		});
 	}
-	onKeyDown = (event) => {
-		if (event.key !== "Escape") return;
+	onFieldKeyDown = (event) => {
+		if (event.key !== "Enter") return;
+		const choice = this.choices.find((item) => item.value !== "cancel" && !item.cancelling);
+		if (!choice) return;
+		event.preventDefault();
+		this.choose(choice.value);
+	};
+	onDismiss = (event) => {
 		event.preventDefault();
 		this.choose(CANCEL_CHOICE);
 	};
-	connectedCallback() {
-		super.connectedCallback();
-		window.addEventListener("keydown", this.onKeyDown);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		window.removeEventListener("keydown", this.onKeyDown);
-	}
 	render() {
-		return html`<div
+		const field = this.field;
+		return html`<pc-dialog-window
       part="dialog"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="heading"
-      aria-describedby=${this.message ? "message" : nothing}
+      open
+      shaded
+      closable="false"
+      .dismissible=${this.dismissible}
+      ?inline=${this.inline}
+      description=${this.message || nothing}
+      @pc-dismiss=${this.onDismiss}
     >
-      <h2 id="heading" part="heading">${this.heading}</h2>
-      ${this.message ? html`<p id="message" part="message">${this.message}</p>` : nothing}
-      <slot></slot>
-      <div class="choices" part="choices">
+      <h2 slot="header-middle" part="heading">${this.heading}</h2>
+      <div slot="body" class="body">
+        ${this.message ? html`<p part="message">${this.message}</p>` : nothing}
+        ${field ? html`<label part="field">
+                ${field.label}
+                <input
+                  type="text"
+                  .value=${field.value}
+                  @keydown=${this.onFieldKeyDown}
+                />
+              </label>` : nothing}
+        <slot></slot>
+      </div>
+      <div slot="footer-middle" class="choices" part="choices">
         ${this.choices.map((choice) => html`<pc-button
               variant=${choice.variant ?? (choice.value === "cancel" || choice.cancelling ? "cancel" : "accent")}
               data-value=${choice.value}
@@ -108,7 +159,7 @@ var PcDialog = class extends PcElement {
               >${choice.label}</pc-button
             >`)}
       </div>
-    </div>`;
+    </pc-dialog-window>`;
 	}
 };
 defineElement("pc-dialog", PcDialog);

package/dist/ui/elements/PcDialogWindow/index.d.ts

@@ -0,0 +1,141 @@
+import { type PropertyValues } from "lit";
+import { PcElement } from "../../base";
+/** Why the user asked to close a dialog window: its ⨉ button, the Escape key, or a press outside it */
+export type DialogCloseReason = "close" | "escape" | "outside";
+/** Event fired when the user asks to close a dialog window (detail: `{ reason }`); cancel it to keep the window open */
+export declare const DIALOG_DISMISS_EVENT = "pc-dismiss";
+/**
+ * A window over the page, built on the browser's `<dialog>`: centred in the viewport, never bigger than it, with a
+ * header, a body and a footer. While it's `open`, the rest of the page can't be used or scrolled and keyboard focus stays
+ * in it (moving to its first control, and back to where it was once it closes).
+ *
+ * Content goes in its slots: `header-start`, `header-middle` (which names the window for screen readers, unless it has a
+ * `label`; `description` describes it), `header-end`, `body` (or no slot), `footer-start`, `footer-middle` and `footer-end`. The body scrolls when
+ * there's too much to fit, keeping the header and footer in view. The header and footer only show with content (or the
+ * ⨉ button).
+ *
+ * Options:
+ * - `closable` (on by default; `closable="false"` turns it off): a ⨉ button at the top right.
+ * - `shaded`: shade the page under it.
+ * - `dismissible` (on by default; `dismissible="false"` turns it off): a press outside it closes it.
+ * - `inline`: cover only its nearest positioned ancestor instead of the whole page, which stays usable (and scrolls).
+ *
+ * The ⨉ button, a press outside it (while `dismissible`) and Escape (while `closable` or `dismissible`) fire a cancellable
+ * `pc-dismiss` event (detail: `{ reason }`, one of `close`, `outside` or `escape`); unless it's cancelled, the window
+ * closes (`open` becomes false). `--pc-dialog-width` sets its width (fitted to its content by default).
+ *
+ * @example
+ * html`<pc-dialog-window open shaded label="Keyboard shortcuts" @pc-dismiss=${close}>
+ *   <h2 slot="header-middle">Keyboard shortcuts</h2>
+ *   <pc-shortcut-settings slot="body" .settings=${settings}></pc-shortcut-settings>
+ *   <pc-button slot="footer-end" @click=${close}>Done</pc-button>
+ * </pc-dialog-window>`
+ */
+export declare class PcDialogWindow extends PcElement {
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        closable: {
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: boolean) => "" | "false";
+            };
+            reflect: boolean;
+        };
+        shaded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        dismissible: {
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: boolean) => "" | "false";
+            };
+            reflect: boolean;
+        };
+        inline: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        filled: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether it's shown */
+    open: boolean;
+    /** Whether it has a ⨉ button at the top right */
+    closable: boolean;
+    /** Whether the page under it is shaded */
+    shaded: boolean;
+    /** Whether a press outside it closes it */
+    dismissible: boolean;
+    /** Whether it covers only its nearest positioned ancestor, leaving the rest of the page usable */
+    inline: boolean;
+    /** Its name for screen readers, instead of its `header-middle` content */
+    label?: string;
+    /** A description for screen readers, e.g. the question a prompt asks */
+    description?: string;
+    /** The names of its header and footer slots that have content */
+    filled: ReadonlySet<string>;
+    /** Whether it's keeping the page from scrolling */
+    private scrollLocked;
+    /** What had focus before it opened, to give it back to if it's taken out of the page while open */
+    private returnFocus;
+    /** Whether the `<dialog>` was last shown inline (not modal) */
+    private shownInline;
+    /** Whether the press being made started outside the window */
+    private pressedOutside;
+    constructor();
+    /** The `<dialog>` it's built on */
+    private get dialog();
+    /**
+     * Ask to close the window, as the user would: fires `pc-dismiss` (detail: `{ reason }`), and closes it unless that's
+     * cancelled.
+     *
+     * @example
+     * dialogWindow.requestClose("close");
+     */
+    requestClose(reason: DialogCloseReason): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /**
+     * Show or close the `<dialog>` to match `open` (modal unless `inline`), keeping the page from scrolling while a modal
+     * window is open.
+     */
+    private syncOpen;
+    /** Keep the page from scrolling while a modal window is open in it, and let it scroll again otherwise */
+    private syncScrollLock;
+    /** Note which header and footer slots have content: only those (and the header and footer with them) are shown */
+    private updateRegions;
+    /** Whether any of a header's or footer's slots have content */
+    private hasRegion;
+    private readonly onKeyDown;
+    private readonly onCancel;
+    private readonly onClose;
+    private readonly onPointerDown;
+    private readonly onClick;
+    /** A header or footer's start, middle and end slots */
+    private renderRegion;
+    render(): import("lit").TemplateResult<1>;
+}