@portel/photon 1.17.2 → 1.17.3

package/dist/beam-form.bundle.js

@@ -1782,6 +1782,187 @@ function showToast(message, type = "info", duration = 3e3, action) {
   ToastManager.show(message, type, duration, action);
 }
 
+// src/auto-ui/frontend/components/confirm-dialog.ts
+var ConfirmDialog = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.message = "";
+    this.confirmLabel = "OK";
+    this.cancelLabel = "Cancel";
+    this.destructive = false;
+  }
+  show(message, options) {
+    this.message = message;
+    this.confirmLabel = options?.confirm ?? "OK";
+    this.cancelLabel = options?.cancel ?? "Cancel";
+    this.destructive = options?.destructive ?? false;
+    this.open = true;
+    return new Promise((resolve) => {
+      this._resolve = resolve;
+    });
+  }
+  _handleConfirm() {
+    this.open = false;
+    this._resolve?.(true);
+  }
+  _handleCancel() {
+    this.open = false;
+    this._resolve?.(false);
+  }
+  _handleKeydown(e5) {
+    if (e5.key === "Escape") this._handleCancel();
+    if (e5.key === "Enter") this._handleConfirm();
+  }
+  render() {
+    return b2`
+      <div class="dialog" @keydown=${(e5) => this._handleKeydown(e5)}>
+        <div class="message">${this.message}</div>
+        <div class="actions">
+          <button class="btn-cancel" @click=${() => this._handleCancel()}>
+            ${this.cancelLabel}
+          </button>
+          <button
+            class="btn-confirm ${this.destructive ? "destructive" : ""}"
+            @click=${() => this._handleConfirm()}
+          >
+            ${this.confirmLabel}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+ConfirmDialog.styles = [
+  theme,
+  i`
+      :host {
+        display: none;
+      }
+
+      @keyframes backdrop-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      @keyframes content-in {
+        from {
+          opacity: 0;
+          transform: scale(0.95) translateY(8px);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1) translateY(0);
+        }
+      }
+
+      :host([open]) {
+        display: flex;
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(4px);
+        z-index: 10001;
+        align-items: center;
+        justify-content: center;
+        animation: backdrop-in 0.15s ease-out both;
+      }
+
+      .dialog {
+        background: var(--bg-panel);
+        border: 1px solid var(--border-glass);
+        border-radius: var(--radius-md, 12px);
+        padding: 24px;
+        max-width: 400px;
+        width: 90%;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+        animation: content-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
+        animation-delay: 0.05s;
+      }
+
+      .message {
+        font-size: 14px;
+        line-height: 1.5;
+        color: var(--t-primary);
+        margin-bottom: 20px;
+      }
+
+      .actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+      }
+
+      button {
+        padding: 8px 16px;
+        border-radius: var(--radius-sm, 6px);
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        font-family: inherit;
+        border: none;
+      }
+
+      .btn-cancel {
+        background: var(--bg-glass);
+        color: var(--t-primary);
+        border: 1px solid var(--border-glass);
+      }
+
+      .btn-cancel:hover {
+        background: var(--bg-glass-strong, rgba(255, 255, 255, 0.08));
+      }
+
+      .btn-confirm {
+        background: var(--accent);
+        color: #fff;
+      }
+
+      .btn-confirm:hover {
+        opacity: 0.9;
+      }
+
+      .btn-confirm.destructive {
+        background: hsl(0, 60%, 50%);
+      }
+
+      .btn-confirm.destructive:hover {
+        background: hsl(0, 60%, 45%);
+      }
+    `
+];
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConfirmDialog.prototype, "open", 2);
+__decorateClass([
+  n4({ type: String })
+], ConfirmDialog.prototype, "message", 2);
+__decorateClass([
+  n4({ type: String })
+], ConfirmDialog.prototype, "confirmLabel", 2);
+__decorateClass([
+  n4({ type: String })
+], ConfirmDialog.prototype, "cancelLabel", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConfirmDialog.prototype, "destructive", 2);
+ConfirmDialog = __decorateClass([
+  t3("confirm-dialog")
+], ConfirmDialog);
+async function confirmDialog(message, options) {
+  let dialog = document.querySelector("confirm-dialog");
+  if (!dialog) {
+    dialog = document.createElement("confirm-dialog");
+    document.body.appendChild(dialog);
+  }
+  return dialog.show(message, options);
+}
+
 // src/auto-ui/frontend/utils/format-label.ts
 function formatLabel(name) {
   if (!name) return name;
@@ -3365,8 +3546,11 @@ var InvokeForm = class extends i4 {
     this.dispatchEvent(new CustomEvent("submit", { detail: { args: this._values } }));
   }
   /** Cancel with dirty check. Called by parent chrome wrapper. */
-  handleCancel() {
-    if (this.isDirty && !confirm("You have unsaved changes. Discard them?")) {
+  async handleCancel() {
+    if (this.isDirty && !await confirmDialog("You have unsaved changes. Discard them?", {
+      confirm: "Discard",
+      destructive: true
+    })) {
       return;
     }
     this.dispatchEvent(new CustomEvent("cancel"));