@tachui/primitives 0.8.1-alpha → 0.8.5-alpha

package/dist/ScrollView-CBqSqatM.js

@@ -0,0 +1,704 @@
+import { withModifiers as f, ComponentWithCSSClasses as M, processElementOverride as _, createSignal as E, useLifecycle as $, registerComponentWithLifecycleHooks as F, h as S, createEffect as w, ConcatenatedComponent as O, text as W, isSignal as v } from "@tachui/core";
+import { aspectRatio as z } from "@tachui/modifiers";
+var Y = Object.defineProperty, V = (e, t, s) => t in e ? Y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, g = (e, t, s) => V(e, typeof t != "symbol" ? t + "" : t, s);
+function A(e) {
+  return typeof e == "object" && e !== null && typeof e.resolve == "function";
+}
+function D(e) {
+  return e && (A(e) ? e.resolve() : e);
+}
+class I extends M {
+  constructor(t) {
+    super(), this.props = t, g(this, "type", "component"), g(this, "id"), g(this, "mounted", !1), g(this, "cleanup", []), g(this, "effectiveTag"), g(this, "validationResult"), g(this, "loadingStateSignal"), g(this, "setLoadingState"), this.id = `image-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const s = _("Image", "img", this.props.element);
+    this.effectiveTag = s.tag, this.validationResult = s.validation;
+    const o = this.props.src ? "idle" : "error", [n, i] = E(o);
+    this.loadingStateSignal = n, this.setLoadingState = i, $(this, {
+      onDOMReady: (l, u) => {
+        A(this.props.src) && u instanceof HTMLImageElement && this.setupImageAssetReactivityForDOMElement(
+          this.props.src,
+          u
+        );
+      }
+    }), F(this);
+  }
+  /**
+   * Set loading state and notify callback
+   */
+  setLoadingStateWithCallback(t) {
+    this.setLoadingState(t), this.props.onLoadingStateChange && this.props.onLoadingStateChange(t);
+  }
+  /**
+   * Render the image component with reactive content handling
+   */
+  render() {
+    const t = this.loadingStateSignal();
+    if (t === "loading" && this.props.placeholder) {
+      if (typeof this.props.placeholder == "string")
+        return [S("img", {
+          class: "tachui-image-placeholder",
+          src: this.props.placeholder,
+          alt: "Loading..."
+        })];
+      if (this.props.placeholder && typeof this.props.placeholder == "object")
+        return this.props.placeholder.render();
+    }
+    if (t === "error" && this.props.errorPlaceholder) {
+      if (typeof this.props.errorPlaceholder == "string")
+        return [S("img", {
+          class: "tachui-image-error",
+          src: this.props.errorPlaceholder,
+          alt: "Error loading image"
+        })];
+      if (this.props.errorPlaceholder && typeof this.props.errorPlaceholder == "object")
+        return this.props.errorPlaceholder.render();
+    }
+    const s = D(this.props.src), o = ["tachui-image"], n = this.createClassString(this.props, o), i = S(this.effectiveTag, {
+      className: n,
+      src: s,
+      // Pass resolved src for initial render
+      alt: this.props.alt,
+      // Pass reactive alt directly
+      loading: this.props.loadingStrategy || "lazy",
+      crossorigin: this.props.crossOrigin,
+      decoding: this.props.decoding || "async",
+      fetchpriority: this.props.fetchPriority
+    });
+    return i.componentMetadata = {
+      id: this.id,
+      type: "Image",
+      originalType: "Image",
+      overriddenTo: this.effectiveTag !== "img" ? this.effectiveTag : void 0,
+      validationResult: this.validationResult
+    }, [i];
+  }
+  /**
+   * Set up ImageAsset reactivity for a real DOM element (called from onDOMReady)
+   */
+  setupImageAssetReactivityForDOMElement(t, s) {
+    const o = w(() => {
+      const n = t.resolve();
+      s.src = n, this.setLoadingStateWithCallback("loading");
+    });
+    this.cleanup.push(() => o.dispose());
+  }
+  // ============================================================================
+  // Concatenation Support (Phase 3.1)
+  // ============================================================================
+  /**
+   * Concatenate this image with another concatenatable component
+   */
+  concat(t) {
+    const s = this.toSegment(), o = t.toSegment(), n = {
+      totalSegments: t instanceof O ? t.segments.length + 1 : 2,
+      accessibilityRole: t instanceof O ? this.mergeAccessibilityRoles(
+        "group",
+        t.metadata.accessibilityRole
+      ) : this.determineAccessibilityRole(t),
+      semanticStructure: "inline"
+      // Images are typically inline in concatenation
+    };
+    return new O([s, o], n);
+  }
+  /**
+   * Convert this image to a segment for concatenation
+   */
+  toSegment() {
+    return {
+      id: this.id,
+      component: this,
+      modifiers: [],
+      // Images don't typically have concatenation-specific modifiers
+      render: () => {
+        const t = this.render();
+        return Array.isArray(t) ? t[0] : t;
+      }
+    };
+  }
+  /**
+   * Check if this component supports concatenation
+   */
+  isConcatenatable() {
+    return !0;
+  }
+  /**
+   * Determine accessibility role for concatenation
+   */
+  determineAccessibilityRole(t) {
+    switch (t.constructor.name) {
+      case "EnhancedText":
+        return "group";
+      // Image + Text = group
+      case "EnhancedImage":
+        return "group";
+      // Image + Image = group
+      case "EnhancedButton":
+      case "EnhancedLink":
+        return "composite";
+      // Image + Interactive = composite
+      default:
+        return "composite";
+    }
+  }
+  /**
+   * Merge accessibility roles when combining components
+   */
+  mergeAccessibilityRoles(t, s) {
+    return t === "composite" || s === "composite" ? "composite" : "group";
+  }
+}
+function x(e, t = {}) {
+  const s = { ...t, src: e }, o = new I(s), n = f(o);
+  return n.scaledToFit = function() {
+    const i = new I({
+      ...s,
+      aspectRatio: void 0,
+      contentMode: "fit"
+    }), l = f(i);
+    return l.scaledToFit = n.scaledToFit, l.scaledToFill = n.scaledToFill, l.modifiers.push(z(void 0, "fit")), l;
+  }, n.scaledToFill = function() {
+    const i = new I({
+      ...s,
+      aspectRatio: void 0,
+      contentMode: "fill"
+    }), l = f(i);
+    return l.scaledToFit = n.scaledToFit, l.scaledToFill = n.scaledToFill, l.modifiers.push(z(void 0, "fill")), l;
+  }, n;
+}
+const J = {
+  idle: "idle",
+  loading: "loading",
+  loaded: "loaded",
+  error: "error"
+}, K = {
+  fit: "fit",
+  fill: "fill",
+  stretch: "stretch",
+  center: "center",
+  scaleDown: "scaleDown"
+}, Z = {
+  /**
+   * Create a responsive image with multiple sources
+   */
+  responsive(e, t, s = {}) {
+    const o = e.map((n) => {
+      const i = [n.src];
+      return n.width && i.push(`${n.width}w`), i.join(" ");
+    }).join(", ");
+    return x(t, { ...s, srcSet: o });
+  },
+  /**
+   * Create an image with progressive loading
+   */
+  progressive(e, t, s = {}) {
+    return x(e, {
+      ...s,
+      lowQualitySrc: e,
+      highQualitySrc: t
+    });
+  },
+  /**
+   * Create an image with loading placeholder
+   */
+  withPlaceholder(e, t, s = {}) {
+    return x(e, {
+      ...s,
+      placeholder: t
+    });
+  }
+};
+var B = Object.defineProperty, N = (e, t, s) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, C = (e, t, s) => N(e, typeof t != "symbol" ? t + "" : t, s);
+class m {
+  constructor(t, s, o, n = {}) {
+    this.props = t, this.tag = s, this.content = o, this.attributes = n, C(this, "type", "component"), C(this, "id"), C(this, "mounted", !1), C(this, "cleanup", []), this.id = `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  render() {
+    return [
+      S(this.tag, this.attributes, this.content ? W(this.content) : "")
+    ];
+  }
+}
+const y = {
+  /**
+   * Create a div element with modifier support
+   */
+  div: (e = {}) => {
+    const t = new m(
+      e,
+      "div",
+      e.children ? String(e.children) : void 0
+    );
+    return f(t);
+  },
+  /**
+   * Create a span element with modifier support
+   */
+  span: (e = {}) => {
+    const t = new m(
+      e,
+      "span",
+      e.children ? String(e.children) : void 0
+    );
+    return f(t);
+  },
+  /**
+   * Create a paragraph element with modifier support
+   */
+  p: (e = {}) => {
+    const t = new m(
+      e,
+      "p",
+      e.children ? String(e.children) : void 0
+    );
+    return f(t);
+  },
+  /**
+   * Create a button element with modifier support
+   *
+   * Note: For enhanced button features (press states, variants, accessibility),
+   * use the main Button component instead.
+   */
+  button: (e = {}) => {
+    const t = new m(
+      e,
+      "button",
+      e.children ? String(e.children) : void 0,
+      {
+        onclick: e.onClick
+      }
+    );
+    return process.env.NODE_ENV === "test" && (t.props || (t.props = {}), t.props.tabIndex = 0), f(t);
+  },
+  /**
+   * Create an input element with modifier support
+   */
+  input: (e = {}) => {
+    const t = new m(e, "input", void 0, {
+      type: e.type || "text",
+      value: e.value || "",
+      placeholder: e.placeholder || "",
+      oninput: (s) => {
+        const o = s.target;
+        e.onChange?.(o.value);
+      }
+    });
+    return f(t);
+  },
+  /**
+   * Create an image element with modifier support
+   *
+   * Note: For enhanced image features (loading states, content modes, progressive loading),
+   * use the main Image component instead.
+   */
+  img: (e) => {
+    const t = new m(e, "img", void 0, {
+      src: e.src,
+      alt: e.alt || "",
+      width: e.width,
+      height: e.height
+    });
+    return f(t);
+  },
+  /**
+   * Create a heading element with modifier support
+   */
+  heading: (e) => (t = {}) => {
+    const s = new m(
+      t,
+      `h${e}`,
+      t.children ? String(t.children) : void 0
+    );
+    return f(s);
+  }
+}, Q = y.heading(1), tt = y.heading(2), et = y.heading(3), st = y.heading(4), ot = y.heading(5), nt = y.heading(6);
+var X = Object.defineProperty, j = (e, t, s) => t in e ? X(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, r = (e, t, s) => j(e, typeof t != "symbol" ? t + "" : t, s);
+class k {
+  constructor(t) {
+    this.props = t, r(this, "type", "component"), r(this, "id"), r(this, "mounted", !1), r(this, "cleanup", []), r(this, "scrollElement", null), r(this, "contentOffsetSignal"), r(this, "setContentOffset"), r(this, "contentSizeSignal"), r(this, "setContentSize"), r(this, "setIsScrolling"), r(this, "pullToRefreshStateSignal"), r(this, "setPullToRefreshState"), r(this, "scrollEventThrottle"), r(this, "lastScrollTime", 0), r(this, "scrollVelocity", { x: 0, y: 0 }), r(this, "lastScrollOffset", { x: 0, y: 0 }), r(this, "pullStartY", 0), r(this, "isPulling", !1), r(this, "handleScroll", (h) => {
+      if (!this.scrollElement) return;
+      const p = performance.now(), c = p - this.lastScrollTime;
+      if (c < this.scrollEventThrottle) return;
+      const d = {
+        x: this.scrollElement.scrollLeft,
+        y: this.scrollElement.scrollTop
+      };
+      this.scrollVelocity = this.calculateVelocity(d, c), this.setContentOffset(d), this.setContentSize({
+        width: this.scrollElement.scrollWidth,
+        height: this.scrollElement.scrollHeight
+      });
+      const a = this.detectScrollEdges(), T = {
+        offset: d,
+        velocity: this.scrollVelocity,
+        contentSize: {
+          width: this.scrollElement.scrollWidth,
+          height: this.scrollElement.scrollHeight
+        },
+        containerSize: {
+          width: this.scrollElement.clientWidth,
+          height: this.scrollElement.clientHeight
+        },
+        edges: a
+      };
+      this.props.onScroll && this.props.onScroll(T), a.top && this.props.onReachTop && this.props.onReachTop(), a.bottom && this.props.onReachBottom && this.props.onReachBottom(), a.left && this.props.onReachLeft && this.props.onReachLeft(), a.right && this.props.onReachRight && this.props.onReachRight(), this.lastScrollOffset = d, this.lastScrollTime = p;
+    }), r(this, "handleScrollStart", () => {
+      this.setIsScrolling(!0), this.props.onScrollBegin && this.props.onScrollBegin();
+    }), r(this, "handleScrollEnd", () => {
+      this.setIsScrolling(!1), this.props.onScrollEnd && this.props.onScrollEnd();
+    }), r(this, "handleTouchStart", (h) => {
+      this.props.refreshControl?.enabled && (this.pullStartY = h.touches[0].clientY, this.isPulling = !1);
+    }), r(this, "handleTouchMove", (h) => {
+      if (!this.props.refreshControl?.enabled || !this.scrollElement) return;
+      const c = h.touches[0].clientY - this.pullStartY, d = this.props.refreshControl.threshold || 80;
+      this.scrollElement.scrollTop <= 0 && c > 0 && (this.isPulling = !0, c > d ? this.setPullToRefreshState("ready") : this.setPullToRefreshState("pulling"));
+    }), r(this, "handleTouchEnd", async () => {
+      if (!this.props.refreshControl?.enabled || !this.isPulling) return;
+      if (this.pullToRefreshStateSignal() === "ready") {
+        this.setPullToRefreshState("refreshing");
+        try {
+          await this.props.refreshControl.onRefresh();
+        } catch (p) {
+          console.error("Pull to refresh error:", p);
+        } finally {
+          this.setPullToRefreshState("idle");
+        }
+      } else
+        this.setPullToRefreshState("idle");
+      this.isPulling = !1;
+    }), this.id = `scrollview-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.scrollEventThrottle = t.scrollEventThrottle || 16;
+    const [s, o] = E(
+      { x: 0, y: 0 }
+    );
+    this.contentOffsetSignal = s, this.setContentOffset = o;
+    const [n, i] = E({
+      width: 0,
+      height: 0
+    });
+    this.contentSizeSignal = n, this.setContentSize = i;
+    const [, l] = E(!1);
+    this.setIsScrolling = l;
+    const [u, R] = E("idle");
+    if (this.pullToRefreshStateSignal = u, this.setPullToRefreshState = R, t.contentOffset && v(t.contentOffset)) {
+      this.setContentOffset(t.contentOffset());
+      const h = w(() => {
+        t.contentOffset && v(t.contentOffset) && this.setContentOffset(t.contentOffset());
+      });
+      this.cleanup.push(() => h.dispose());
+    }
+    if (t.contentSize && v(t.contentSize)) {
+      this.setContentSize(t.contentSize());
+      const h = w(() => {
+        t.contentSize && v(t.contentSize) && this.setContentSize(t.contentSize());
+      });
+      this.cleanup.push(() => h.dispose());
+    }
+  }
+  /**
+   * Calculate scroll velocity
+   */
+  calculateVelocity(t, s) {
+    const o = t.x - this.lastScrollOffset.x, n = t.y - this.lastScrollOffset.y;
+    return {
+      x: s > 0 ? o / s : 0,
+      y: s > 0 ? n / s : 0
+    };
+  }
+  /**
+   * Detect scroll edges
+   */
+  detectScrollEdges() {
+    if (!this.scrollElement)
+      return { top: !1, bottom: !1, left: !1, right: !1 };
+    const {
+      scrollTop: t,
+      scrollLeft: s,
+      scrollHeight: o,
+      scrollWidth: n,
+      clientHeight: i,
+      clientWidth: l
+    } = this.scrollElement;
+    return {
+      top: t <= 0,
+      bottom: t + i >= o - 1,
+      left: s <= 0,
+      right: s + l >= n - 1
+    };
+  }
+  /**
+   * Set up scroll event handlers
+   */
+  setupScrollHandlers(t) {
+    let s;
+    const o = () => {
+      clearTimeout(s), this.handleScrollStart();
+    }, n = () => {
+      clearTimeout(s), s = setTimeout(() => {
+        this.handleScrollEnd();
+      }, 150);
+    }, i = (l) => {
+      o(), this.handleScroll(l), n();
+    };
+    t.addEventListener("scroll", i, { passive: !0 }), t.addEventListener("touchstart", this.handleTouchStart, {
+      passive: !0
+    }), t.addEventListener("touchmove", this.handleTouchMove, {
+      passive: !1
+    }), t.addEventListener("touchend", this.handleTouchEnd, { passive: !0 }), this.cleanup.push(() => {
+      t.removeEventListener("scroll", i), t.removeEventListener("touchstart", this.handleTouchStart), t.removeEventListener("touchmove", this.handleTouchMove), t.removeEventListener("touchend", this.handleTouchEnd), clearTimeout(s);
+    });
+  }
+  /**
+   * Get overflow styles based on direction
+   */
+  getOverflowStyles(t) {
+    switch (t) {
+      case "vertical":
+        return {
+          overflowX: "hidden",
+          overflowY: "auto"
+        };
+      case "horizontal":
+        return {
+          overflowX: "auto",
+          overflowY: "hidden"
+        };
+      case "both":
+        return {
+          overflow: "auto"
+        };
+      default:
+        return {
+          overflowX: "hidden",
+          overflowY: "auto"
+        };
+    }
+  }
+  /**
+   * Apply additional scroll view styling (position and overflow already set in initial render)
+   */
+  applyScrollViewStyles(t) {
+    const { showsScrollIndicator: s = !0, bounces: o = !0 } = this.props;
+    if (!s) {
+      t.style.scrollbarWidth = "none", t.style.msOverflowStyle = "none";
+      const n = document.createElement("style");
+      n.textContent = `
+        #${t.id}::-webkit-scrollbar {
+          display: none;
+        }
+      `, document.head.appendChild(n), this.cleanup.push(() => {
+        document.head.removeChild(n);
+      });
+    }
+    o ? t.style.webkitOverflowScrolling = "touch" : t.style.overscrollBehavior = "none", t.style.scrollBehavior = "smooth";
+  }
+  /**
+   * Apply content insets
+   */
+  applyContentInsets(t) {
+    const { contentInset: s } = this.props;
+    if (s) {
+      const { top: o = 0, bottom: n = 0, left: i = 0, right: l = 0 } = s;
+      t.style.padding = `${o}px ${l}px ${n}px ${i}px`;
+    }
+  }
+  /**
+   * Create pull to refresh indicator
+   */
+  createPullToRefreshIndicator() {
+    if (!this.props.refreshControl?.enabled) return null;
+    const t = this.pullToRefreshStateSignal(), s = this.props.refreshControl.tintColor || "#007AFF";
+    let o = "";
+    switch (t) {
+      case "pulling":
+        o = "↓ Pull to refresh";
+        break;
+      case "ready":
+        o = "↑ Release to refresh";
+        break;
+      case "refreshing":
+        o = "⟳ Refreshing...";
+        break;
+      default:
+        o = "";
+    }
+    return o ? {
+      type: "component",
+      id: `${this.id}-refresh`,
+      mounted: !1,
+      cleanup: [],
+      props: {},
+      render: () => [
+        S(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "-60px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              padding: "10px 20px",
+              backgroundColor: "#f8f9fa",
+              borderRadius: "20px",
+              color: s,
+              fontSize: "14px",
+              fontWeight: "500",
+              textAlign: "center",
+              zIndex: 1e3,
+              transition: "all 0.3s ease",
+              opacity: t === "idle" ? 0 : 1
+            }
+          },
+          o
+        )
+      ]
+    } : null;
+  }
+  /**
+   * Scroll to specific position
+   */
+  scrollTo(t, s = "smooth") {
+    if (!this.scrollElement) return;
+    const o = { behavior: s };
+    t.x !== void 0 && (o.left = t.x), t.y !== void 0 && (o.top = t.y), this.scrollElement.scrollTo(o);
+  }
+  /**
+   * Scroll to top
+   */
+  scrollToTop(t = "smooth") {
+    this.scrollTo({ x: 0, y: 0 }, t);
+  }
+  /**
+   * Scroll to bottom
+   */
+  scrollToBottom(t = "smooth") {
+    this.scrollElement && this.scrollTo(
+      {
+        x: 0,
+        y: this.scrollElement.scrollHeight - this.scrollElement.clientHeight
+      },
+      t
+    );
+  }
+  /**
+   * Render the scroll view component
+   */
+  render() {
+    const { children: t = [], scrollEnabled: s = !0 } = this.props;
+    let o = [];
+    const n = t;
+    if (typeof n == "function") {
+      const c = n();
+      o = Array.isArray(c) ? c : [];
+    } else Array.isArray(t) && (o = t);
+    const i = S(
+      "div",
+      {
+        class: "tachui-scrollview-content",
+        style: {
+          minHeight: "100%",
+          minWidth: "100%"
+        }
+      },
+      ...o.flatMap((c) => c.render())
+    ), l = this.createPullToRefreshIndicator(), u = [];
+    if (l) {
+      const c = l.render(), d = Array.isArray(c) ? c : [c];
+      u.push(...d.filter((a) => a));
+    }
+    u.push(i);
+    const { direction: R = "vertical" } = this.props, h = this.getOverflowStyles(R), p = S(
+      "div",
+      {
+        id: this.id,
+        class: "tachui-scrollview",
+        style: {
+          height: "100%",
+          width: "100%",
+          position: "relative",
+          ...h
+        }
+      },
+      ...u
+    );
+    if (p.element) {
+      const c = p.element;
+      this.scrollElement = c, this.applyScrollViewStyles(c), this.setupScrollHandlers(c), i.element && this.applyContentInsets(i.element);
+      const d = () => {
+        const a = v(s) ? s() : s;
+        c.style.overflow = a ? "auto" : "hidden", c.style.pointerEvents = a ? "auto" : "none";
+      };
+      if (v(s)) {
+        const a = w(d);
+        this.cleanup.push(() => a.dispose());
+      } else
+        d();
+      if (typeof n == "function") {
+        const a = w(() => {
+          const T = n(), H = (Array.isArray(T) ? T : []).flatMap((b) => b.render());
+          if (i.element) {
+            const b = i.element;
+            b.innerHTML = "", H.forEach((P) => {
+              P && P.element && b.appendChild(P.element);
+            });
+          }
+        });
+        this.cleanup.push(() => a.dispose());
+      }
+    }
+    return [p];
+  }
+}
+function L(e = {}) {
+  const t = new k(e);
+  return f(t);
+}
+const it = {
+  /**
+   * Create a scroll view with pull to refresh
+   */
+  withRefresh(e, t, s = {}) {
+    return L({
+      children: e,
+      refreshControl: {
+        enabled: !0,
+        onRefresh: t,
+        ...s
+      }
+    });
+  },
+  /**
+   * Create a horizontal scroll view
+   */
+  horizontal(e, t = {}) {
+    return L({
+      ...t,
+      children: e,
+      direction: "horizontal"
+    });
+  },
+  /**
+   * Create a paged scroll view
+   */
+  paged(e, t = {}) {
+    return L({
+      ...t,
+      children: e,
+      pagingEnabled: !0
+    });
+  }
+};
+export {
+  I as E,
+  y as H,
+  x as I,
+  L as S,
+  J as a,
+  K as b,
+  Z as c,
+  Q as d,
+  tt as e,
+  et as f,
+  st as g,
+  ot as h,
+  nt as i,
+  k as j,
+  it as k
+};