woby-tooltip 1.0.4 → 1.0.9

package/dist/index.es.js

@@ -1,406 +1,231 @@
-import { jsxs, jsx } from "woby/jsx-runtime";
-import { $$, $, store, useMemo, cloneElement, useEffect, isObservable } from "woby";
-const isSide = (side, str) => $$(side) === str;
-const isAlign = (align, str) => $$(align) === str;
-const isAlignA = (position, str) => $$(position) === str;
-const TextBox = (props) => {
-  const hoverIndex = $(null);
-  const firstH = $(null);
-  const lastH = $(null);
-  const totH = $(null);
-  const spanHeightsRef = store({});
-  store.on(spanHeightsRef, () => {
-    const heights = Object.keys(spanHeightsRef).map((key) => spanHeightsRef[key].clientHeight);
-    const firsth = heights[0];
-    const lasth = heights[heights.length - 1];
-    const toth = heights.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
-    totH(toth);
-    firstH(firsth);
-    lastH(lasth);
+import { jsx, jsxs } from "woby/jsx-runtime";
+import { useEffect, $$, createContext, $, useMemo } from "woby";
+let nanoid = (size = 21) => crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {
+  byte &= 63;
+  if (byte < 36) {
+    id += byte.toString(36);
+  } else if (byte < 62) {
+    id += (byte - 26).toString(36).toUpperCase();
+  } else if (byte > 62) {
+    id += "-";
+  } else {
+    id += "_";
+  }
+  return id;
+}, "");
+const isTemp = (s) => !!s.raw;
+const extract = (C, props, classNames) => {
+  const { className, ...p } = props;
+  const cls = p.class;
+  delete p.class;
+  return /* @__PURE__ */ jsx(C, { class: [classNames, cls, className], ...p });
+};
+const append = (child, parent) => {
+  return useEffect(() => {
+    const [c, p] = [$$($$(child)), $$($$(parent))];
+    p.appendChild(c);
+    const um = () => p.removeChild(c);
+    return um;
   });
-  const unsetHover = () => {
-    hoverIndex(null);
-    props.hoverArrow(false);
-  };
-  const onSpanHover = (index, lastIndex2, numChildren) => {
-    hoverIndex(index);
-    const { static: rctStatic, arw: arrow2, pos: position2, hoverArrow } = props;
-    if (!rctStatic && (index === 0 && (isSide(position2.side, "bottom") || isAlignA(arrow2, "v-start")) || index === lastIndex2 && (isSide(position2.side, "top") || isAlignA(arrow2, "v-end")) || numChildren === 1)) {
-      return hoverArrow(true);
+};
+function Styled(comp) {
+  function styled2(strings, ...values) {
+    if (isTemp(strings)) {
+      const C = comp;
+      const N = "_" + nanoid(10);
+      useEffect(() => {
+        const r = `.${N} {
+${strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join("")}
+}`;
+        return append(/* @__PURE__ */ jsx("style", { id: N, children: r }), document.head);
+      });
+      return C ? (props) => extract(C, props, N) : N;
     }
-    return hoverArrow(false);
-  };
-  const {
-    arw: arrow,
-    pos: position,
-    lines: lineSeparated,
-    static: tpStatic,
-    textboxWidth: width,
-    shadowColor: shCol,
-    shadowShape: shShape,
-    move,
-    backgroundColor,
-    padding,
-    borderRadius,
-    hoverBackground,
-    hoverColor,
-    color,
-    alert,
-    flat,
-    children,
-    class: cls,
-    className
-  } = props;
-  const numberChildren = Array.isArray(children) ? children.length : 1;
-  const lastIndex = numberChildren - 1;
-  const adjChildren = [children].flat().map((child, index) => {
-    const hover = useMemo(() => !tpStatic && $$(hoverIndex) === index);
-    const nhover = useMemo(() => !$$(hover));
-    const childProps = {
-      // ...child.props,
-      ref: (span) => spanHeightsRef[`span${index + 1}`] = span,
-      class: [padding, {
-        "whitespace-nowrap": () => $$(width) === "auto",
-        [$$(hoverColor)]: hover,
-        [$$(hoverBackground)]: hover,
-        [$$(color)]: nhover,
-        [$$(backgroundColor)]: nhover,
-        [$$(lineSeparated)]: () => $$(lineSeparated) && lastIndex !== index
-      }],
-      // style,
-      onMouseOver: () => onSpanHover(index, lastIndex, numberChildren)
+    return Styled(strings).styled;
+  }
+  return { comp, styled: styled2 };
+}
+const styled = Styled().styled;
+createContext();
+function useComputedStyle(target, patterns = []) {
+  const styles = $({});
+  useEffect(() => {
+    if (!$$(target)) return () => {
+    };
+    const getMatchingStyles = () => {
+      const computedStyle = window.getComputedStyle($$(target));
+      const matchedStyles = {};
+      for (const property of computedStyle) {
+        if (patterns.some(
+          (pattern) => typeof pattern === "string" ? property === pattern : pattern.test(property)
+        )) {
+          matchedStyles[property] = computedStyle.getPropertyValue(property);
+        }
+      }
+      return matchedStyles;
     };
-    return cloneElement(child, childProps);
+    styles(getMatchingStyles());
+    const observer = new MutationObserver(() => {
+      const updatedStyles = getMatchingStyles();
+      styles((prevStyles) => {
+        const hasChanges = Object.keys(updatedStyles).some(
+          (key) => updatedStyles[key] !== prevStyles[key]
+        );
+        return hasChanges ? updatedStyles : prevStyles;
+      });
+    });
+    observer.observe($$(target), {
+      attributes: true,
+      attributeFilter: ["style", "class"],
+      subtree: false
+    });
+    return () => observer.disconnect();
   });
-  const calcHPos = (align, left2, center, right2) => {
-    return isAlign(align, "center") ? center : isAlign(align, "left") ? left2 : right2;
-  };
-  const calcVPos = (perc, elHeight, divider, adjMove, totHeight) => {
-    return `calc(${perc}% - ${totHeight || 0}px - ${elHeight}px/${divider} + ${adjMove || 0}px)`;
-  };
-  const calcTopPos = (align, elHeight, totHeight) => {
-    if ($$(align) === "center") {
-      return calcVPos(50, elHeight, 2, null, totHeight);
-    }
-    if ($$(align) === "bottom") {
-      return calcVPos(100, elHeight, 2, -12, totHeight);
-    }
-    return calcVPos(0, elHeight, 2, 12, totHeight);
+  return styles;
+}
+const tooltipDef = `text-left border-b-[#666] border-b border-dotted 
+[&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100
+`;
+const tooltip = `inline-block relative 
+[&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100
+`;
+const topDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const top = `absolute z-[99999999] left-2/4 -top-5 `;
+const top_i = `absolute overflow-hidden top-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:rotate-45 after:left-2/4 `;
+const rightDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const right = `absolute z-[99999999] ml-5 left-full top-2/4 `;
+const right_i = `absolute overflow-hidden right-full after:content-[''] after:absolute after:translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `;
+const bottomDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const bottom = `absolute z-[99999999] left-2/4 top-10 `;
+const bottom_i = `absolute overflow-hidden bottom-full after:content-[''] after:absolute after:-translate-x-2/4 after:translate-y-2/4 after:rotate-45 after:left-2/4 `;
+const leftDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const left = `absolute z-[99999999] mr-5 right-full top-2/4 `;
+const left_i = `absolute overflow-hidden left-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `;
+const Tooltip = ({ children, class: cls = tooltipDef, className, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { class: [tooltip, cls, className], children });
+};
+function cssMultiply(value, multiplier) {
+  const match = ($$(value) + "").match(/^(-?\d*\.?\d+)([a-z%]*)$/);
+  if (!match)
+    throw new Error(`Invalid CSS unit: ${$$(value)}`);
+  const [, numericValue, unit] = match;
+  const result = +numericValue * multiplier;
+  return `${result}${unit}`;
+}
+const x2 = (value) => cssMultiply(value, 2);
+const translate = (x, y) => `translate(${$$(x)}, ${$$(y)})`;
+const TooltipContent = ({ children, style, class: cls = $(), className, static: st, position = "top", arrowLocation = "50%", arrowSize = "12px", ...props }) => {
+  const setDef = () => {
+    if (!$$(cls))
+      switch ($$(position)) {
+        case "top":
+          cls(topDef);
+        case "left":
+          cls(leftDef);
+        case "right":
+          cls(rightDef);
+        case "bottom":
+          cls(bottomDef);
+      }
   };
-  let left = $("");
-  let right = $("");
-  let top = $("8px");
-  const hLeftPos = useMemo(() => calcHPos(position.align, "100% - 50px", "50% - 40px", "0% - 30px"));
-  const hRightPos = useMemo(() => calcHPos(position.align, "0% - 30px", "50% - 40px", "100% - 50px"));
-  useEffect(() => {
-    const { align } = position;
-    switch ($$(arrow)) {
-      case "h-start":
-        left(`calc(${$$(hRightPos)})`);
-        break;
-      case "h-end":
-        right(`calc(${$$(hLeftPos)})`);
-        break;
-      case "v-start":
-        top(calcTopPos(align, $$(firstH), null));
-        break;
-      case "v-end":
-        top(calcTopPos(align, $$(lineSeparated) ? -$$(lastH) + 1 : -$$(lastH), $$(totH)));
-        break;
-      case "v-center":
-        top(`calc(0% - ${$$(totH)}px/2 + 11px)`);
-        if (isAlign(align, "center")) {
-          top(`calc(50% - ${$$(totH)}px/2)`);
-        }
-        if (isAlign(align, "bottom")) {
-          top(`calc(100% - ${$$(totH)}px/2 - 11px)`);
-        }
-        break;
+  useEffect(setDef);
+  setDef();
+  const pos = useMemo(() => {
+    switch ($$(position)) {
+      case "top":
+        return top;
+      case "right":
+        return right;
+      case "bottom":
+        return bottom;
+      case "left":
+        return left;
     }
-    switch ($$(position.side)) {
+  });
+  const transform = useMemo(() => {
+    switch ($$(position)) {
       case "top":
-        top(calcVPos(0, $$(totH), 1, 13));
-        break;
+        return translate("-" + $$(arrowLocation), "-100%");
       case "left":
-        right("8px");
-        break;
       case "right":
-        left("8px");
-        break;
+        return translate("0", "-" + $$(arrowLocation));
+      case "bottom":
+        return translate("-" + $$(arrowLocation), "0");
     }
   });
-  const textBoxWidthValue = useMemo(() => {
-    let textBoxWidthValue2 = $$(width);
-    if (textBoxWidthValue2 !== "auto") {
-      textBoxWidthValue2 = Number($$(width).slice(0, -2));
-      if (move.left > 0)
-        textBoxWidthValue2 += move.left;
-      if (move.right > 0)
-        textBoxWidthValue2 += move.right;
+  const ali = useMemo(() => {
+    switch ($$(position)) {
+      case "bottom":
+      case "top":
+        return { left: arrowLocation };
+      case "left":
+      case "right":
+        return { top: arrowLocation };
     }
-    return textBoxWidthValue2;
   });
-  const boxStyle = {
-    left,
-    right,
-    top,
-    width: textBoxWidthValue,
-    borderRadius
-  };
-  const shColAdj = useMemo(() => $$(shCol).substr(0, $$(shCol).lastIndexOf(",")).replace(/[)]/g, ","));
-  const shadow = useMemo(() => `${$$(shShape)} ${$$(shCol)}, 0 0 3px ${$$(shColAdj)}, 0.1), 0 0 0 1px ${$$(shColAdj)}, 0.15)`);
-  const boxShadow = useMemo(() => $$(flat) ? null : $$(shadow));
-  const alertStyle = useMemo(() => $$(alert) ? "rpt-alert" : "");
-  const rgb = useMemo(() => $$(alert) || "rgb(248, 109, 109)");
-  const alertShadow = useMemo(() => $$(alert) ? `0 0 0 ${$$(rgb).slice(0, $$(rgb).length - 1)}, 0.4)` : null);
-  const noNeg = (number) => number > 0 ? number : 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      class: [`absolute animation-none`, alertStyle, cls ?? className],
-      style: {
-        ...boxStyle,
-        boxShadow: alertShadow,
-        padding: `${move.down}px ${move.left}px ${move.up}px ${move.right}px`
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            class: [`absolute animation-none w-full h-full z-0`, borderRadius],
-            style: {
-              boxShadow,
-              height: () => `calc(100% - ${noNeg(move.down) + noNeg(move.up)}px)`,
-              width: () => `calc(100% - ${noNeg(move.left) + noNeg(move.right)}px)`
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            class: [`relative z-[2] w-full`, backgroundColor, borderRadius],
-            onMouseLeave: unsetHover,
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                class: [!tpStatic ? "[&_span]:cursor-pointer w-full" : null, borderRadius, "overflow-hidden"],
-                children: adjChildren
-              }
-            )
-          }
-        )
-      ]
+  const ii = useMemo(() => {
+    switch ($$(position)) {
+      case "top":
+        return top_i + styled`  
+                margin-left:-${$$(arrowSize)};
+                width:${x2(arrowSize)};
+                height:${$$(arrowSize)};
+
+                &::after{
+                    width:${$$(arrowSize)};
+                    height:${$$(arrowSize)};
+                }
+     `;
+      case "right":
+        return right_i + styled`  
+                margin-top:-${$$(arrowSize)};
+                width:${$$(arrowSize)};
+                height:${x2(arrowSize)};
+
+                &::after{
+                    width:${$$(arrowSize)};
+                    height:${$$(arrowSize)};
+                }
+     `;
+      case "bottom":
+        return bottom_i + styled`  
+                margin-left:-${$$(arrowSize)};
+                width:${x2(arrowSize)};
+                height:${$$(arrowSize)};
+
+                &::after{
+                    width:${$$(arrowSize)};
+                    height:${$$(arrowSize)};
+                }
+     `;
+      case "left":
+        return left_i + styled`  
+                margin-top:-${$$(arrowSize)};
+                width:${$$(arrowSize)};
+                height:${x2(arrowSize)};
+
+                &::after{
+                    width:${$$(arrowSize)};
+                    height:${$$(arrowSize)};
+                }
+     `;
     }
-  );
-};
-const Arrow = ({ isHovered, hovBkg, bkgCol, flat }) => {
-  const backgroundColor = useMemo(() => $$(isHovered) ? $$(hovBkg) : $$(bkgCol));
-  const boxShadow = useMemo(() => $$(flat) ? null : "[box-shadow:rgba(0,0,0,0.18)0px_0px_0px_1px]");
-  return /* @__PURE__ */ jsx("div", { class: [`rotate-45 w-[14px] h-[14px] m-[3px] z-[1]`, backgroundColor, boxShadow] });
-};
-const output = "";
-const Tooltip = (properties = {}) => {
-  const props = {
-    /** tailwind */
-    hoverBackground: "bg-[#ececec]",
-    /** tailwind */
-    hoverColor: "text-[black]",
-    /** tailwind */
-    backgroundColor: "bg-[white]",
-    /** not tailwind */
-    textboxWidth: "150px",
-    /** tailwind */
-    fontSize: "[font-size:inherit]",
-    /** tailwind */
-    color: "text-inherit",
-    borderRadius: "rounded-[5px]",
-    shadowColor: "rgba(0,0,0,0.251)",
-    shadowShape: "0 8px 15px",
-    moveDown: "0px",
-    moveRight: "0px",
-    moveLeft: "0px",
-    moveUp: "0px",
-    position: "bottom center",
-    arrowAlign: $("start"),
-    textAlign: "left",
-    fontFamily: "inherit",
-    fontWeight: "bold",
-    zIndex: "100",
-    animation: "",
-    show: false,
-    ...properties
-  };
-  const {
-    position: pos,
-    lineSeparated: lines,
-    arrowAlign: arwAlign,
-    hoverBackground,
-    backgroundColor,
-    moveDown,
-    moveRight,
-    moveLeft,
-    moveUp,
-    textAlign,
-    fontFamily,
-    fontWeight,
-    fontSize,
-    color,
-    zIndex,
-    animation,
-    flat,
-    parentRef: pf,
-    parent: Parent,
-    // shadowColor, shadowShape, textboxWidth, padding, borderRadius, hoverColor,
-    containerClass
-  } = props;
-  const show = (
-    /* $$(parent) ? props.show : */
-    isObservable(props.show) ? props.show : $(props.show)
-  );
-  const parentRef = isObservable(pf) ? pf : $(pf);
-  useEffect(() => {
-    const p = $$(parentRef);
-    if (!p)
-      return;
-    const on = () => show(true);
-    const off = () => show(false);
-    p.addEventListener("mouseenter", on);
-    p.addEventListener("mouseleave", off);
-    return () => {
-      p.removeEventListener("mouseenter", on);
-      p.removeEventListener("mouseleave", off);
-    };
-  });
-  const hoverArrow = $(false);
-  const mount = $(true);
-  useEffect(() => {
-    if ($$(show))
-      mount(true);
-    if (!$$(animation))
-      mount(false);
   });
-  const lineSeparated = typeof $$(lines) === "boolean" ? $("border-b border-b-[#ececec]") : isObservable(lines) ? lines : $(lines);
-  const position = {
-    side: $$(pos).split(" ")[0],
-    align: $$(pos).split(" ")[1]
-  };
-  const arrow = $($$(arwAlign));
-  const { side, align } = position;
-  const classes = ["absolute flex"];
-  let tooltipStyle = {};
-  let bottom;
-  switch (side) {
-    case "bottom":
-      classes.push("top-full left-0 w-full justify-center");
-      break;
-    case "top":
-      classes.push("left-0 w-full justify-center");
-      bottom = "100%";
-      break;
-    case "right":
-      classes.push("top-0 left-full h-full justify-start");
-      break;
-    default:
-      classes.push("top-0 right-full h-full justify-end");
-      break;
-  }
-  const onAxis = {
-    y: isSide(position.side, "top") || isSide(position.side, "bottom"),
-    x: isSide(position.side, "left") || isSide(position.side, "right")
-  };
-  arrow(onAxis.y ? `h-${$$(arrow)}` : `v-${$$(arrow)}`);
-  const num = (str) => Number(str.slice(0, -2));
-  const move = {
-    down: num(moveDown),
-    up: num(moveUp),
-    left: num(moveLeft),
-    right: num(moveRight)
-  };
-  const oneMovePropIsNeg = move.down < 0 || move.up < 0 || move.left < 0 || move.right < 0;
-  switch (align) {
-    case "left":
-      if (onAxis.y)
-        classes.push("!justify-start");
-      break;
-    case "right":
-      if (onAxis.y)
-        classes.push("!justify-end");
-      break;
-    case "bottom":
-      if (onAxis.x)
-        classes.push("items-end");
-      break;
-    case "top":
-      break;
-    default:
-      if (onAxis.x) {
-        classes.push("items-center");
-        if (!oneMovePropIsNeg) {
-          move.down *= 2;
-          move.up *= 2;
-        }
-      }
-      if (onAxis.y && !oneMovePropIsNeg) {
-        move.right *= 2;
-        move.left *= 2;
-      }
-      break;
-  }
-  const adjustment = `${move.down}px ${move.left}px ${move.up}px ${move.right}px`;
-  tooltipStyle = {
-    ...tooltipStyle,
-    zIndex,
-    color,
-    bottom,
-    fontSize,
-    textAlign,
-    fontFamily,
-    fontWeight,
-    padding: oneMovePropIsNeg ? null : adjustment,
-    margin: oneMovePropIsNeg ? adjustment : null,
-    animation: () => $$(show) ? `rpt-${$$(animation)} 0.2s` : `rpt-${$$(animation)}-out 0.15s`
-  };
-  const e = useMemo(
-    () => !$$(animation) && $$(show) && $$(props.children) || $$(show) && $$(mount) && $$(props.children) ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: classes,
-        style: tooltipStyle,
-        onAnimationEnd: () => {
-          if (!$$(show) && $$(animation))
-            mount(false);
-        },
-        children: /* @__PURE__ */ jsxs("div", { class: "flex justify-center", children: [
-          /* @__PURE__ */ jsx(
-            Arrow,
-            {
-              isHovered: hoverArrow,
-              hovBkg: hoverBackground,
-              bkgCol: backgroundColor,
-              flat
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TextBox,
-            {
-              ...props,
-              hoverArrow,
-              lines: lineSeparated,
-              pos: position,
-              arw: arrow,
-              move
-            }
-          )
-        ] })
-      }
-    ) : null
-  );
-  return useMemo(() => $$(Parent) ? /* @__PURE__ */ jsxs("div", { class: [containerClass ?? "relative"], ref: parentRef, children: [
-    Parent,
-    e
-  ] }) : e);
+  const tp = $();
+  const ir = $();
+  const sty = useComputedStyle(tp, ["background-color", /^border-(?!.*-radius$)/, "box-shadow"]);
+  return /* @__PURE__ */ jsxs("div", { ref: tp, class: [pos, cls, () => $$(st) ? "" : "invisible opacity-0", className, "tpcontents"], style: [style, { transform }], ...props, children: [
+    children,
+    () => /* @__PURE__ */ jsx("i", { ref: ir, class: [ii, styled`
+                &::after{
+                    ${Object.keys($$(sty)).map((k) => `${k}:${$$(sty)[k]};
+`).join("")}
+                }
+            `], style: ali })
+  ] });
 };
 export {
-  Tooltip
+  Tooltip,
+  TooltipContent
 };
 //# sourceMappingURL=index.es.js.map