wilday_ui 0.6.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0928d2614b52a959cfdf1a406c10f1de6f291788965ddaba3f48a08fb22283e2'
-  data.tar.gz: 977b7bf2c02855534294786824da27fdcd9fa1779f50eff26a8418af2998d938
+  metadata.gz: 6aae81001c80b4c0fd86eaca5391e6de697a87b88e38215bd1889a70163dafe7
+  data.tar.gz: 87cff2dba0f7408ae84456cec4b6aac1927f1bcc27ad09309091c2b43c3df45a
 SHA512:
-  metadata.gz: 295649d8662a2057527c9a89e140a0a219f329d8133c8c25a843deb337a48b857c21a569ff0afca74ec2604e75f9c0ebbd7f4ba73cfc52700b64f4b4ee436b44
-  data.tar.gz: d4b5d7f4194d2f925c2ea5fa5f48368d4049e5b45c2b88ea59d468d5a93a10c0ce1ea4df426b07765af3c78a842cd62b43d49ded19b18a6581ce7735efb29b27
+  metadata.gz: '09d8ec007fb7c0757f65ded7d2e059281752c2fdc07cee90aea77dc82b008adb9e07c6161cd527635ceb289121a030b29234a6d5c306a24e68b3d9378e0bfc0e'
+  data.tar.gz: da49ca71e648b9e527d02668a83cc6130dcb53ada46f195e9bb19dc4e3a5cf716b9d0b7353f4e68cfdc01416c6bdc5b8a15afc8ea349ea9fe8053be3c74bf318

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

@@ -2708,11 +2708,471 @@ 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/tooltip_controller.js
+var tooltip_controller_default = class extends Controller {
+  static targets = ["trigger"];
+  static values = {
+    content: String,
+    position: { type: String, default: "top" },
+    align: { type: String, default: "center" },
+    trigger: { type: String, default: "hover" },
+    showDelay: { type: Number, default: 0 },
+    hideDelay: { type: Number, default: 0 },
+    offset: { type: Number, default: 8 },
+    theme: { type: String, default: "light" },
+    size: { type: String, default: "md" },
+    arrow: { type: Boolean, default: false },
+    customStyle: String
+  };
+  connect() {
+    this.tooltipElement = null;
+    this.showTimeoutId = null;
+    this.hideTimeoutId = null;
+    this.setupTooltip();
+    this.scrollHandler = () => {
+      if (this.tooltipElement.style.display !== "none") {
+        const triggerRect = this.triggerTarget.getBoundingClientRect();
+        const isInViewport = triggerRect.top >= 0 && triggerRect.left >= 0 && triggerRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && triggerRect.right <= (window.innerWidth || document.documentElement.clientWidth);
+        if (isInViewport) {
+          this.position();
+        } else {
+          this.hide();
+        }
+      }
+    };
+    window.addEventListener("scroll", this.scrollHandler);
+  }
+  disconnect() {
+    if (this.clickOutsideHandler) {
+      document.removeEventListener("click", this.clickOutsideHandler);
+    }
+    window.removeEventListener("scroll", this.scrollHandler);
+    this.removeTooltip();
+  }
+  setupTooltip() {
+    this.tooltipElement = this.createTooltipElement();
+    document.body.appendChild(this.tooltipElement);
+    if (this.triggerValue === "hover") {
+      this.triggerTarget.addEventListener("mouseenter", () => this.show());
+      this.triggerTarget.addEventListener("mouseleave", () => this.hide());
+      this.triggerTarget.addEventListener("focusin", () => this.show());
+      this.triggerTarget.addEventListener("focusout", () => this.hide());
+    } else if (this.triggerValue === "click") {
+      const hasDropdown = this.element.hasAttribute("data-controller") && this.element.getAttribute("data-controller").includes("dropdown");
+      const hasClipboard = this.element.hasAttribute("data-controller") && this.element.getAttribute("data-controller").includes("clipboard");
+      if (hasDropdown || hasClipboard) {
+        this.triggerTarget.addEventListener("mouseenter", () => this.show());
+        this.triggerTarget.addEventListener("mouseleave", () => this.hide());
+      } else {
+        this.triggerTarget.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.toggle();
+        });
+        this.clickOutsideHandler = (e) => {
+          if (!this.triggerTarget.contains(e.target) && !this.tooltipElement.contains(e.target)) {
+            this.hide();
+          }
+        };
+        document.addEventListener("click", this.clickOutsideHandler);
+      }
+    }
+  }
+  createTooltipElement() {
+    const tooltip = document.createElement("div");
+    tooltip.id = this.triggerTarget.getAttribute("aria-describedby");
+    tooltip.className = `w-tooltip w-tooltip-${this.themeValue} w-tooltip-size-${this.sizeValue}`;
+    if (this.arrowValue) tooltip.classList.add("w-tooltip-arrow");
+    tooltip.setAttribute("role", "tooltip");
+    tooltip.setAttribute("data-position", this.positionValue);
+    tooltip.setAttribute("data-align", this.alignValue);
+    tooltip.innerHTML = this.contentValue;
+    if (this.hasCustomStyleValue && this.customStyleValue) {
+      tooltip.style.cssText += this.customStyleValue;
+    }
+    tooltip.style.display = "none";
+    return tooltip;
+  }
+  show() {
+    clearTimeout(this.hideTimeoutId);
+    this.showTimeoutId = setTimeout(() => {
+      this.tooltipElement.style.transform = "none";
+      this.tooltipElement.style.visibility = "hidden";
+      this.tooltipElement.style.display = "block";
+      this.tooltipElement.offsetHeight;
+      this.position();
+      this.tooltipElement.style.visibility = "visible";
+      requestAnimationFrame(() => {
+        this.tooltipElement.classList.add("w-tooltip-visible");
+      });
+    }, this.showDelayValue);
+  }
+  hide() {
+    clearTimeout(this.showTimeoutId);
+    this.hideTimeoutId = setTimeout(() => {
+      this.tooltipElement.classList.remove("w-tooltip-visible");
+      setTimeout(() => {
+        this.tooltipElement.style.display = "none";
+      }, 150);
+    }, this.hideDelayValue);
+  }
+  toggle() {
+    if (this.tooltipElement.style.display === "none") {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+  position() {
+    const triggerRect = this.triggerTarget.getBoundingClientRect();
+    const tooltipRect = this.tooltipElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    const arrowOffset = this.arrowValue ? 2 : 0;
+    const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
+    const scrollY = window.pageYOffset || document.documentElement.scrollTop;
+    console.log("=== Initial Values ===");
+    console.log("Viewport Height:", viewportHeight);
+    console.log("Viewport Width:", viewportWidth);
+    console.log("Trigger Top:", triggerRect.top);
+    console.log("Trigger Bottom:", triggerRect.bottom);
+    console.log("Trigger Left:", triggerRect.left);
+    console.log("Trigger Right:", triggerRect.right);
+    console.log("Tooltip Height:", tooltipRect.height);
+    console.log("Tooltip Width:", tooltipRect.width);
+    let position = this.positionValue;
+    let top, left;
+    const spaceBelow = viewportHeight - triggerRect.bottom;
+    const spaceAbove = triggerRect.top;
+    const spaceRight = viewportWidth - triggerRect.right;
+    const spaceLeft = triggerRect.left;
+    const requiredSpaceVertical = tooltipRect.height + this.offsetValue + arrowOffset;
+    const requiredSpaceHorizontal = tooltipRect.width + this.offsetValue + arrowOffset;
+    console.log("\n=== Space Calculation ===");
+    console.log("Space Above:", spaceAbove);
+    console.log("Space Below:", spaceBelow);
+    console.log("Space Left:", spaceLeft);
+    console.log("Space Right:", spaceRight);
+    console.log("Required Space Vertical:", requiredSpaceVertical);
+    console.log("Required Space Horizontal:", requiredSpaceHorizontal);
+    if (position === "right" && spaceRight >= requiredSpaceHorizontal) {
+      position = "right";
+      console.log("Using right - sufficient space");
+    } else if (position === "left" && spaceLeft >= requiredSpaceHorizontal) {
+      position = "left";
+      console.log("Using left - sufficient space");
+    } else if (position === "top" && spaceAbove >= requiredSpaceVertical) {
+      position = "top";
+      console.log("Using top - sufficient space");
+    } else if (position === "bottom" && spaceBelow >= requiredSpaceVertical) {
+      position = "bottom";
+      console.log("Using bottom - sufficient space");
+    } else if (spaceBelow >= requiredSpaceVertical) {
+      position = "bottom";
+      console.log("Fallback to bottom - sufficient space");
+    } else {
+      position = "top";
+      console.log("Fallback to top - insufficient space below");
+    }
+    switch (position) {
+      case "top":
+        top = triggerRect.top - tooltipRect.height - this.offsetValue - arrowOffset;
+        if (this.alignValue === "end") {
+          left = triggerRect.right - tooltipRect.width;
+        } else if (this.alignValue === "center") {
+          left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        } else {
+          left = triggerRect.left;
+        }
+        break;
+      case "bottom":
+        top = triggerRect.bottom + this.offsetValue + arrowOffset;
+        if (this.alignValue === "end") {
+          left = triggerRect.right - tooltipRect.width;
+        } else if (this.alignValue === "center") {
+          left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        } else {
+          left = triggerRect.left;
+        }
+        break;
+      case "left":
+        left = triggerRect.left - tooltipRect.width - this.offsetValue - arrowOffset;
+        if (this.alignValue === "end") {
+          top = triggerRect.bottom - tooltipRect.height;
+        } else if (this.alignValue === "center") {
+          top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        } else {
+          top = triggerRect.top;
+        }
+        break;
+      case "right":
+        left = triggerRect.right + this.offsetValue + arrowOffset;
+        if (this.alignValue === "end") {
+          top = triggerRect.bottom - tooltipRect.height;
+        } else if (this.alignValue === "center") {
+          top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        } else {
+          top = triggerRect.top;
+        }
+        break;
+    }
+    if (top < 0) {
+      top = this.offsetValue;
+    } else if (top + tooltipRect.height > viewportHeight) {
+      top = viewportHeight - tooltipRect.height - this.offsetValue;
+    }
+    if (left < 0) {
+      left = this.offsetValue;
+    } else if (left + tooltipRect.width > viewportWidth) {
+      left = viewportWidth - tooltipRect.width - this.offsetValue;
+    }
+    console.log("\n=== Final Position ===");
+    console.log("Position:", position);
+    console.log("Top:", top);
+    console.log("Left:", left);
+    console.log("Alignment:", this.alignValue);
+    top += scrollY;
+    left += scrollX;
+    this.tooltipElement.setAttribute("data-position", position);
+    this.tooltipElement.style.top = `${top}px`;
+    this.tooltipElement.style.left = `${left}px`;
+  }
+  removeTooltip() {
+    if (this.tooltipElement) {
+      this.tooltipElement.remove();
+      this.tooltipElement = null;
+    }
+  }
+};
+
 // 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);
+application.register("tooltip", tooltip_controller_default);
 
 // app/javascript/wilday_ui/components/button.js
 document.addEventListener("DOMContentLoaded", () => {