wilday_ui 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0928d2614b52a959cfdf1a406c10f1de6f291788965ddaba3f48a08fb22283e2'
-  data.tar.gz: 977b7bf2c02855534294786824da27fdcd9fa1779f50eff26a8418af2998d938
+  metadata.gz: 50912590c0a438d5c271b389672df9d96c03ddf8001899804d072ddb9e18e925
+  data.tar.gz: 8924aaef953638212799214a462b906eb05c010a260670e78977e683200b9716
 SHA512:
-  metadata.gz: 295649d8662a2057527c9a89e140a0a219f329d8133c8c25a843deb337a48b857c21a569ff0afca74ec2604e75f9c0ebbd7f4ba73cfc52700b64f4b4ee436b44
-  data.tar.gz: d4b5d7f4194d2f925c2ea5fa5f48368d4049e5b45c2b88ea59d468d5a93a10c0ce1ea4df426b07765af3c78a842cd62b43d49ded19b18a6581ce7735efb29b27
+  metadata.gz: 6d58f3efc56e7e0e32330dd9f5fa5b7098271926a00eeca6c594afe1e496abba345438a82d654a5c0952847e5edc875ed754487135580bfc4e19879b6f801216
+  data.tar.gz: a771bc6e4cbd382061fa53349d9232cec601776158ff18160bb41132dad50bafaa84286a3c90993a91bc888beab239890ce2088a0ece112cd7abcc2d4404809c

data/app/assets/builds/wilday_ui/index.js

@@ -2708,11 +2708,234 @@ var dropdown_controller_default = class extends Controller {
   }
 };
 
+// app/javascript/wilday_ui/controllers/clipboard_controller.js
+var clipboard_controller_default = class extends Controller {
+  static targets = ["button", "feedback"];
+  static values = {
+    text: String,
+    feedbackText: { type: String, default: "Copied!" },
+    feedbackPosition: { type: String, default: "top" },
+    feedbackDuration: { type: Number, default: 2e3 }
+  };
+  connect() {
+  }
+  async copy(event) {
+    event.preventDefault();
+    try {
+      await navigator.clipboard.writeText(this.textValue);
+      this.showFeedback();
+    } catch (err) {
+      console.error("Failed to copy text:", err);
+      this.fallbackCopy();
+    }
+  }
+  fallbackCopy() {
+    const textArea = document.createElement("textarea");
+    textArea.value = this.textValue;
+    textArea.style.position = "fixed";
+    textArea.style.left = "-9999px";
+    document.body.appendChild(textArea);
+    textArea.select();
+    try {
+      document.execCommand("copy");
+      this.showFeedback();
+    } catch (err) {
+      console.error("Fallback: Oops, unable to copy", err);
+    }
+    document.body.removeChild(textArea);
+  }
+  showFeedback() {
+    const feedback = this.hasFeedbackTarget ? this.feedbackTarget : this.createFeedbackElement();
+    feedback.textContent = this.feedbackTextValue;
+    feedback.className = "w-button-feedback";
+    const positionClasses = this.feedbackPositionValue.split("-");
+    positionClasses.forEach((pos) => {
+      feedback.classList.add(`w-button-feedback-${pos}`);
+    });
+    feedback.classList.add("w-button-feedback-show");
+    setTimeout(() => {
+      feedback.classList.remove("w-button-feedback-show");
+    }, this.feedbackDurationValue);
+  }
+  createFeedbackElement() {
+    const feedback = document.createElement("div");
+    feedback.classList.add("w-button-feedback");
+    feedback.setAttribute("data-clipboard-target", "feedback");
+    this.element.appendChild(feedback);
+    return feedback;
+  }
+};
+
+// app/javascript/wilday_ui/controllers/confirmation_controller.js
+var confirmation_controller_default = class extends Controller {
+  static targets = ["dialog", "confirmButton", "cancelButton"];
+  static values = {
+    title: String,
+    message: String,
+    iconColor: String,
+    confirmText: String,
+    cancelText: String,
+    confirmStyles: String,
+    cancelStyles: String
+  };
+  // Store the original event to be used later
+  originalEvent = null;
+  connect() {
+    if (!this.hasDialogTarget) {
+      this.element.insertAdjacentHTML("beforeend", this.dialogHTML);
+    }
+  }
+  disconnect() {
+    this.originalEvent = null;
+    this.isConfirmed = false;
+  }
+  showDialog(event) {
+    if (this.isConfirmed) {
+      this.isConfirmed = false;
+      return;
+    }
+    event.preventDefault();
+    this.originalEvent = {
+      type: event.type,
+      element: event.currentTarget,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey
+    };
+    this.dialogTarget.showModal();
+    this.focusConfirmButton();
+  }
+  confirm(event) {
+    event.preventDefault();
+    this.dialogTarget.close();
+    if (this.originalEvent?.element) {
+      const element = this.originalEvent.element;
+      if (this.hasTurbo && !element.hasAttribute("data-turbo") && !element.hasAttribute("data-turbo-method")) {
+        this.resumeOriginalEvent();
+        return;
+      }
+      const confirmEvent = new CustomEvent("confirm", {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          element,
+          originalEvent: this.originalEvent
+        }
+      });
+      const wasHandled = !element.dispatchEvent(confirmEvent);
+      if (wasHandled) return;
+      this.resumeOriginalEvent();
+    }
+  }
+  resumeOriginalEvent() {
+    if (!this.originalEvent) return;
+    const element = this.originalEvent.element;
+    this.isConfirmed = true;
+    if (element.closest("form")) {
+      const form = element.closest("form");
+      const submitEvent = new Event("submit", {
+        bubbles: true,
+        cancelable: true
+      });
+      form.dispatchEvent(submitEvent);
+      this.originalEvent = null;
+      return;
+    }
+    if (element.tagName === "A" || element.hasAttribute("href")) {
+      const click = new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        ctrlKey: this.originalEvent.ctrlKey,
+        metaKey: this.originalEvent.metaKey
+      });
+      element.dispatchEvent(click);
+      this.originalEvent = null;
+      return;
+    }
+    if (!element.closest("form") && !(element.tagName === "A" || element.hasAttribute("href"))) {
+      element.click();
+      this.originalEvent = null;
+      return;
+    }
+  }
+  cancel(event) {
+    event.preventDefault();
+    this.closeDialog();
+  }
+  closeDialog() {
+    this.dialogTarget.close();
+    this.originalEvent = null;
+  }
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      this.cancel(event);
+    }
+  }
+  handleClickOutside(event) {
+    if (event.target === this.dialogTarget) {
+      this.cancel(event);
+    }
+  }
+  focusConfirmButton() {
+    this.confirmButtonTarget.focus();
+  }
+  get hasTurbo() {
+    return typeof Turbo !== "undefined";
+  }
+  get dialogHTML() {
+    return `
+      <dialog class="w-button-confirmation-dialog" 
+              data-confirmation-target="dialog"
+              data-action="click->confirmation#handleClickOutside keydown->confirmation#handleKeydown">
+        <div class="w-button-confirmation-dialog-content">
+          <div class="w-button-confirmation-dialog-icon ${this.iconColorValue}">
+            ${this.iconHTML}
+          </div>
+  
+          <h3 class="w-button-confirmation-dialog-title">
+            ${this.titleValue}
+          </h3>
+  
+          <div class="w-button-confirmation-dialog-message">
+            ${this.messageValue}
+          </div>
+  
+          <div class="w-button-confirmation-dialog-actions">
+            <button data-confirmation-target="cancelButton"
+                    data-action="click->confirmation#cancel"
+                    class="w-button w-button-subtle w-button-medium w-button-rounded"
+                    style="${this.cancelStylesValue}">
+              ${this.cancelTextValue}
+            </button>
+  
+            <button data-confirmation-target="confirmButton"
+                    data-action="click->confirmation#confirm"
+                    class="w-button w-button-solid w-button-medium w-button-rounded"
+                    style="${this.confirmStylesValue}">
+              ${this.confirmTextValue}
+            </button>
+          </div>
+        </div>
+      </dialog>
+    `;
+  }
+  get iconHTML() {
+    const icons = {
+      info: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
+      success: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
+      warning: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>',
+      danger: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>'
+    };
+    return icons[this.iconColorValue] || icons.info;
+  }
+};
+
 // app/javascript/wilday_ui/controllers/index.js
 var application = Application.start();
 window.Stimulus = application;
 application.register("button", ButtonController);
 application.register("dropdown", dropdown_controller_default);
+application.register("clipboard", clipboard_controller_default);
+application.register("confirmation", confirmation_controller_default);
 
 // app/javascript/wilday_ui/components/button.js
 document.addEventListener("DOMContentLoaded", () => {