@stacksjs/stx 0.2.95 → 0.2.96

package/dist/transitions.js

@@ -1,2 +1,443 @@
-// @bun
-import{Qf as a,Rf as b,Sf as c,Tf as d,Uf as e,Vf as f}from"./chunk-9b6cec0v.js";import"./chunk-xv34zbp4.js";export{c as processTransitionDirectives,f as processTransitionAttributes,b as performLeave,a as performEnter,e as generateTransitionRuntime,d as generateTransitionCSS};
+function getTransitionClasses(name, options = {}) {
+  return {
+    enterFrom: options.enterClass || `${name}-enter-from`,
+    enterActive: options.enterActiveClass || `${name}-enter-active`,
+    enterTo: options.enterToClass || `${name}-enter-to`,
+    leaveFrom: options.leaveClass || `${name}-leave-from`,
+    leaveActive: options.leaveActiveClass || `${name}-leave-active`,
+    leaveTo: options.leaveToClass || `${name}-leave-to`
+  };
+}
+function getTransitionDuration(el) {
+  const style = getComputedStyle(el), transitionDuration = style.transitionDuration || "0s", animationDuration = style.animationDuration || "0s", parseDuration = (str) => {
+    const match = str.match(/^([\d.]+)(s|ms)?$/);
+    if (!match)
+      return 0;
+    const value = parseFloat(match[1]);
+    return (match[2] || "s") === "ms" ? value : value * 1000;
+  };
+  return Math.max(parseDuration(transitionDuration), parseDuration(animationDuration));
+}
+function whenTransitionEnds(el, expectedDuration) {
+  return new Promise((resolve) => {
+    const duration = expectedDuration ?? getTransitionDuration(el);
+    if (duration === 0) {
+      resolve();
+      return;
+    }
+    let resolved = !1;
+    const done = () => {
+      if (resolved)
+        return;
+      resolved = !0;
+      el.removeEventListener("transitionend", onEnd);
+      el.removeEventListener("animationend", onEnd);
+      resolve();
+    }, onEnd = (e) => {
+      if (e.target === el)
+        done();
+    };
+    el.addEventListener("transitionend", onEnd);
+    el.addEventListener("animationend", onEnd);
+    setTimeout(done, duration + 50);
+  });
+}
+function forceReflow(el) {
+  el.offsetHeight;
+}
+export async function performEnter(el, options = {}) {
+  const name = options.name || "stx", classes = getTransitionClasses(name, options), duration = typeof options.duration === "object" ? options.duration.enter : options.duration;
+  options.onBeforeEnter?.(el);
+  el.classList.add(classes.enterFrom);
+  el.classList.add(classes.enterActive);
+  forceReflow(el);
+  el.classList.remove(classes.enterFrom);
+  el.classList.add(classes.enterTo);
+  if (options.onEnter)
+    await new Promise((resolve) => {
+      options.onEnter(el, resolve);
+    });
+  else
+    await whenTransitionEnds(el, duration);
+  el.classList.remove(classes.enterActive);
+  el.classList.remove(classes.enterTo);
+  options.onAfterEnter?.(el);
+}
+export async function performLeave(el, options = {}) {
+  const name = options.name || "stx", classes = getTransitionClasses(name, options), duration = typeof options.duration === "object" ? options.duration.leave : options.duration;
+  options.onBeforeLeave?.(el);
+  el.classList.add(classes.leaveFrom);
+  el.classList.add(classes.leaveActive);
+  forceReflow(el);
+  el.classList.remove(classes.leaveFrom);
+  el.classList.add(classes.leaveTo);
+  if (options.onLeave)
+    await new Promise((resolve) => {
+      options.onLeave(el, resolve);
+    });
+  else
+    await whenTransitionEnds(el, duration);
+  el.classList.remove(classes.leaveActive);
+  el.classList.remove(classes.leaveTo);
+  options.onAfterLeave?.(el);
+}
+export function processTransitionDirectives(template, _context = {}, _filePath) {
+  const transitionRegex = /@transition\s*\(([^)]*)\)([\s\S]*?)@endtransition/gi;
+  return template.replace(transitionRegex, (_match, optionsStr, content) => {
+    const options = parseTransitionOptions(optionsStr), name = options.name || "stx", duration = options.duration || 300, transitionId = `stx-transition-${Math.random().toString(36).slice(2, 9)}`;
+    return `
+<div
+  class="stx-transition-wrapper"
+  data-transition="${name}"
+  data-transition-id="${transitionId}"
+  data-transition-duration="${duration}"
+  ${options.mode ? `data-transition-mode="${options.mode}"` : ""}
+>
+  ${content.trim()}
+</div>
+<script>
+(function() {
+  const wrapper = document.querySelector('[data-transition-id="${transitionId}"]');
+  if (!wrapper) return;
+
+  const name = '${name}';
+  const duration = ${duration};
+
+  // Observe for child changes to trigger transitions
+  const observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      mutation.addedNodes.forEach(function(node) {
+        if (node.nodeType === 1) {
+          window.STX?.transition?.enter(node, { name: name, duration: duration });
+        }
+      });
+      mutation.removedNodes.forEach(function(node) {
+        if (node.nodeType === 1) {
+          // Leave transition handled before removal
+        }
+      });
+    });
+  });
+
+  observer.observe(wrapper, { childList: true });
+
+  // Initial enter transition for existing children
+  Array.from(wrapper.children).forEach(function(child) {
+    window.STX?.transition?.enter(child, { name: name, duration: duration });
+  });
+})();
+</script>
+`;
+  });
+}
+function parseTransitionOptions(optionsStr) {
+  const options = {}, keyValueRegex = /(\w+)\s*:\s*(?:'([^']*)'|"([^"]*)"|(\d+)|(\w+))/g;
+  let match;
+  while ((match = keyValueRegex.exec(optionsStr)) !== null) {
+    const key = match[1], value = match[2] || match[3] || match[4] || match[5];
+    switch (key) {
+      case "name":
+        options.name = value;
+        break;
+      case "duration":
+        options.duration = parseInt(value, 10);
+        break;
+      case "mode":
+        options.mode = value;
+        break;
+      case "easing":
+        options.easing = value;
+        break;
+    }
+  }
+  return options;
+}
+export function generateTransitionCSS() {
+  return `
+/* STX Transition Presets */
+
+/* Fade */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+/* Slide Up */
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.slide-up-enter-to,
+.slide-up-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Slide Down */
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.slide-down-enter-to,
+.slide-down-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Slide Left */
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.slide-left-enter-to,
+.slide-left-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Slide Right */
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.slide-right-enter-to,
+.slide-right-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Scale */
+.scale-enter-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+.scale-enter-active,
+.scale-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.scale-enter-to,
+.scale-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Scale Up (grow) */
+.scale-up-enter-from,
+.scale-up-leave-to {
+  opacity: 0;
+  transform: scale(0.5);
+}
+.scale-up-enter-active,
+.scale-up-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.scale-up-enter-to,
+.scale-up-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Bounce */
+.bounce-enter-active {
+  animation: bounce-in 0.5s;
+}
+.bounce-leave-active {
+  animation: bounce-in 0.5s reverse;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Flip */
+.flip-enter-from,
+.flip-leave-to {
+  opacity: 0;
+  transform: perspective(400px) rotateY(90deg);
+}
+.flip-enter-active,
+.flip-leave-active {
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+.flip-enter-to,
+.flip-leave-from {
+  opacity: 1;
+  transform: perspective(400px) rotateY(0);
+}
+
+/* Zoom */
+.zoom-enter-from,
+.zoom-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+.zoom-enter-active,
+.zoom-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.zoom-enter-to,
+.zoom-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Collapse (height) */
+.collapse-enter-from,
+.collapse-leave-to {
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+}
+.collapse-enter-active,
+.collapse-leave-active {
+  transition: opacity 0.3s ease, max-height 0.3s ease;
+  overflow: hidden;
+}
+.collapse-enter-to,
+.collapse-leave-from {
+  opacity: 1;
+  max-height: 1000px;
+}
+`;
+}
+export function generateTransitionRuntime() {
+  return `
+// STX Transition Runtime
+(function() {
+  if (typeof window === 'undefined') return;
+
+  window.STX = window.STX || {};
+  window.STX.transition = {
+    // Perform enter transition
+    enter: function(el, options) {
+      options = options || {};
+      const name = options.name || 'stx';
+      const duration = options.duration || 300;
+
+      const classes = {
+        enterFrom: name + '-enter-from',
+        enterActive: name + '-enter-active',
+        enterTo: name + '-enter-to'
+      };
+
+      // Add initial classes
+      el.classList.add(classes.enterFrom);
+      el.classList.add(classes.enterActive);
+
+      // Force reflow
+      void el.offsetHeight;
+
+      // Start transition
+      el.classList.remove(classes.enterFrom);
+      el.classList.add(classes.enterTo);
+
+      // Cleanup after transition
+      setTimeout(function() {
+        el.classList.remove(classes.enterActive);
+        el.classList.remove(classes.enterTo);
+      }, duration + 50);
+
+      return el;
+    },
+
+    // Perform leave transition
+    leave: function(el, options) {
+      return new Promise(function(resolve) {
+        options = options || {};
+        const name = options.name || 'stx';
+        const duration = options.duration || 300;
+
+        const classes = {
+          leaveFrom: name + '-leave-from',
+          leaveActive: name + '-leave-active',
+          leaveTo: name + '-leave-to'
+        };
+
+        // Add initial classes
+        el.classList.add(classes.leaveFrom);
+        el.classList.add(classes.leaveActive);
+
+        // Force reflow
+        void el.offsetHeight;
+
+        // Start transition
+        el.classList.remove(classes.leaveFrom);
+        el.classList.add(classes.leaveTo);
+
+        // Cleanup and resolve after transition
+        setTimeout(function() {
+          el.classList.remove(classes.leaveActive);
+          el.classList.remove(classes.leaveTo);
+          resolve(el);
+        }, duration + 50);
+      });
+    },
+
+    // Toggle with transition
+    toggle: function(el, show, options) {
+      if (show) {
+        el.style.display = '';
+        return this.enter(el, options);
+      }
+else {
+        return this.leave(el, options).then(function() {
+          el.style.display = 'none';
+          return el;
+        });
+      }
+    }
+  };
+
+  console.log('[stx] Transition runtime initialized');
+})();
+`;
+}
+export function processTransitionAttributes(template) {
+  const attrRegex = /@transition\.([a-z-]+)(?:\.(\d+))?="([^"]+)"/gi;
+  return template.replace(attrRegex, (_, name, duration, condition) => {
+    const dur = duration || "300", transitionId = `stx-t-${Math.random().toString(36).slice(2, 7)}`;
+    return `data-stx-transition="${name}" data-stx-transition-duration="${dur}" data-stx-transition-condition="${condition}" data-stx-transition-id="${transitionId}"`;
+  });
+}