RubyGems - wilday_ui - Versions diffs - 0.8.0 → 0.9.0 - Mend

wilday_ui 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6aae81001c80b4c0fd86eaca5391e6de697a87b88e38215bd1889a70163dafe7
-  data.tar.gz: 87cff2dba0f7408ae84456cec4b6aac1927f1bcc27ad09309091c2b43c3df45a
+  metadata.gz: 98a6a22d0353bcf51b1a26cc31550fe21562298385fb9b048f00c597d4102bea
+  data.tar.gz: 90431c125b51b0e20b8ca77bb28b4a5530235e143091cbaec60ffc3406855d49
 SHA512:
-  metadata.gz: '09d8ec007fb7c0757f65ded7d2e059281752c2fdc07cee90aea77dc82b008adb9e07c6161cd527635ceb289121a030b29234a6d5c306a24e68b3d9378e0bfc0e'
-  data.tar.gz: da49ca71e648b9e527d02668a83cc6130dcb53ada46f195e9bb19dc4e3a5cf716b9d0b7353f4e68cfdc01416c6bdc5b8a15afc8ea349ea9fe8053be3c74bf318
+  metadata.gz: d250424a5ecb2fb6228f1d40ec314b4d2df84e6814814cd0ba1a7cba85963197c6cd231ac8befb4afd2de3befe8eaf519562b81f00c64cdd5c0cd28f1e5b3985
+  data.tar.gz: 56712497f70a613b790d1b8b2455fbdd055607d4229f582cb68787936e357f5b38d35dd4fa878d2ca78062c9b2c7a22106dcfc363d533942c7da197f4119a05b

data/README.md CHANGED Viewed

@@ -36,9 +36,10 @@ Place it in the `<head>` section, before your application's JavaScript:
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= w_js %>  # Add this line in head
     <%= stylesheet_link_tag "application" %>
+    <%= javascript_importmap_tags %>
+    <%= w_js %>  # Add this line in head
   </head>
   <body>
     <%= yield %>

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

@@ -3051,15 +3051,6 @@ var tooltip_controller_default = class extends Controller {
     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;
@@ -3068,31 +3059,18 @@ var tooltip_controller_default = class extends Controller {
     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":
@@ -3146,11 +3124,6 @@ var tooltip_controller_default = class extends Controller {
     } 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);
@@ -3165,6 +3138,83 @@ var tooltip_controller_default = class extends Controller {
   }
 };
+// app/javascript/wilday_ui/controllers/animation_controller.js
+var animation_controller_default = class extends Controller {
+  connect() {
+    console.log("AnimationController connected");
+    this.setupAnimation();
+  }
+  setupAnimation() {
+    const animationData = JSON.parse(this.element.dataset.animation || "{}");
+    if (!animationData.name) return;
+    const {
+      name,
+      trigger,
+      duration = 0.3,
+      timing = "ease",
+      delay = 0,
+      // Add default value here
+      iteration = 1,
+      direction = "normal",
+      fill_mode = "none",
+      properties
+    } = animationData;
+    this.element.style.setProperty("--animation-name", name);
+    this.element.style.setProperty("--animation-duration", `${duration}s`);
+    this.element.style.setProperty("--animation-delay", `${delay}s`);
+    this.element.style.setProperty(
+      "--animation-timing",
+      this.getTimingFunction(timing, properties)
+    );
+    this.element.style.setProperty(
+      "--animation-iteration",
+      iteration === "infinite" ? "infinite" : iteration || 1
+    );
+    this.element.style.setProperty(
+      "--animation-direction",
+      direction.replace(/_/g, "-")
+    );
+    this.element.style.setProperty(
+      "--animation-fill-mode",
+      fill_mode.replace(/_/g, "-")
+    );
+    if (properties && name === "custom") {
+      Object.entries(properties).forEach(([key, value]) => {
+        this.element.style.setProperty(`--animation-custom-${key}`, value);
+      });
+    }
+    if (trigger === "click") {
+      this.element.addEventListener("click", () => this.animate());
+    } else if (trigger === "load") {
+      this.animate();
+    }
+  }
+  animate() {
+    const animationData = JSON.parse(this.element.dataset.animation || "{}");
+    if (!animationData.name) return;
+    this.element.classList.remove("is-animating");
+    void this.element.offsetWidth;
+    this.element.classList.add("is-animating");
+  }
+  getTimingFunction(timing, properties) {
+    if (!timing) return "ease";
+    if (timing === "cubic_bezier" && properties?.cubic_bezier) {
+      const [x1, y1, x2, y2] = properties.cubic_bezier;
+      return `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
+    }
+    return timing.replace(/_/g, "-");
+  }
+  disableAfterAnimation() {
+    const animationConfig = JSON.parse(this.element.dataset.animation || "{}");
+    if (!animationConfig.disabled) return;
+    const duration = parseFloat(this.element.style.getPropertyValue("--animation-duration")) * 1e3;
+    const delay = parseFloat(this.element.style.getPropertyValue("--animation-delay")) * 1e3;
+    setTimeout(() => {
+      this.element.disabled = true;
+    }, duration + delay);
+  }
+};
 // app/javascript/wilday_ui/controllers/index.js
 var application = Application.start();
 window.Stimulus = application;
@@ -3173,6 +3223,7 @@ application.register("dropdown", dropdown_controller_default);
 application.register("clipboard", clipboard_controller_default);
 application.register("confirmation", confirmation_controller_default);
 application.register("tooltip", tooltip_controller_default);
+application.register("animation", animation_controller_default);
 // app/javascript/wilday_ui/components/button.js
 document.addEventListener("DOMContentLoaded", () => {