wilday_ui 0.5.6 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce15430e03ae29b5258790b0da153e819af5896b26e3f2756a89f15d91f859ef
-  data.tar.gz: c5cc9e4f85f4ec22e71b8ee2c7f1b7126a8bc851b1ca2890e89a11d4e46559cf
+  metadata.gz: 50912590c0a438d5c271b389672df9d96c03ddf8001899804d072ddb9e18e925
+  data.tar.gz: 8924aaef953638212799214a462b906eb05c010a260670e78977e683200b9716
 SHA512:
-  metadata.gz: 00fb564bc214d114fd2024f5ebc3f4f7ddac21c469092f54293d16a73223c03744a4661f2aef1dac181d5fdaadbc255ae26922865c39d576d7da6935aa774c69
-  data.tar.gz: 83746b5ac6ce439edd11bc724740561ee706d09c184af6f86fac633cc0439b8036a36688f7889636741ebe9f024b2547b5cd8a540bf5ca00d589012902731e3d
+  metadata.gz: 6d58f3efc56e7e0e32330dd9f5fa5b7098271926a00eeca6c594afe1e496abba345438a82d654a5c0952847e5edc875ed754487135580bfc4e19879b6f801216
+  data.tar.gz: a771bc6e4cbd382061fa53349d9232cec601776158ff18160bb41132dad50bafaa84286a3c90993a91bc888beab239890ce2088a0ece112cd7abcc2d4404809c

data/README.md

@@ -4,6 +4,13 @@ WildayUI is a simple, minimalist, and customizable library of pre-built componen
 WildayUI's main goal is to provide **static components** (such as buttons, badges, etc.) and **dynamic components** (such as dropdowns, modals, etc.) that are easily customizable and extendable. Each page in the component documentation is divided into sections for static and dynamic components.
 
 ---
+
+## Demo
+
+You can see a demo of WildayUI [here](https://wildayuidemo.onrender.com/).
+
+---
+
 ## Installation
 To start using Wilday UI, add it to your Gemfile:
 ```ruby

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", () => {