@gspa/ui 0.1.3 → 0.2.0

package/dist/directives/tooltip.cjs

@@ -0,0 +1,47 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m={mounted(t,d){if(!d.value)return;const n=Object.keys(d.modifiers)[0]||"top",o=document.createElement("div");o.textContent=d.value,o.className="tooltip-custom",o.style.cssText=`
+      position: fixed;
+      z-index: 9999;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
+      padding: 6px 12px;
+      border-radius: 4px;
+      font-size: 14px;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.2s;
+      white-space: nowrap;
+    `;const r=document.createElement("div");r.style.cssText=`
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+    `,o.appendChild(r),t._tooltipEl=o,t._tooltipArrow=r,t._tooltipPosition=n;const p=()=>{if(!o.parentNode)return;const e=t.getBoundingClientRect(),i=o.getBoundingClientRect();if(e.width===0||e.height===0){o.style.opacity="0";return}let s,a;switch(n){case"bottom":a=e.left+e.width/2-i.width/2,s=e.bottom+8;break;case"left":a=e.left-i.width-8,s=e.top+e.height/2-i.height/2;break;case"right":a=e.right+8,s=e.top+e.height/2-i.height/2;break;default:a=e.left+e.width/2-i.width/2,s=e.top-i.height-8}const l=8;a=Math.max(l,Math.min(a,window.innerWidth-i.width-l)),s=Math.max(l,Math.min(s,window.innerHeight-i.height-l)),o.style.left=`${a}px`,o.style.top=`${s}px`},w=()=>{const e=`
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+      `;switch(n){case"bottom":r.style.cssText=e+`
+            border-width: 0 5px 5px 5px;
+            border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
+            top: -5px;
+            left: 50%;
+            transform: translateX(-50%);
+          `;break;case"left":r.style.cssText=e+`
+            border-width: 5px 0 5px 5px;
+            border-color: transparent transparent transparent rgba(0, 0, 0, 0.9);
+            right: -5px;
+            top: 50%;
+            transform: translateY(-50%);
+          `;break;case"right":r.style.cssText=e+`
+            border-width: 5px 5px 5px 0;
+            border-color: transparent rgba(0, 0, 0, 0.9) transparent transparent;
+            left: -5px;
+            top: 50%;
+            transform: translateY(-50%);
+          `;break;default:r.style.cssText=e+`
+            border-width: 5px 5px 0 5px;
+            border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
+            bottom: -5px;
+            left: 50%;
+            transform: translateX(-50%);
+          `}},h=()=>{document.body.appendChild(o),w(),p(),setTimeout(()=>{o.style.opacity="1"},10),window.addEventListener("scroll",p,!0),window.addEventListener("resize",p)},c=()=>{o.style.opacity="0",window.removeEventListener("scroll",p,!0),window.removeEventListener("resize",p),setTimeout(()=>{o.parentNode&&document.body.removeChild(o)},200)};t.addEventListener("mouseenter",h),t.addEventListener("mouseleave",c),t.addEventListener("click",c),t._tooltipShowFn=h,t._tooltipHideFn=c,t._tooltipRepositionFn=p},updated(t,d){if(t._tooltipEl){const n=t._tooltipEl.firstChild;n&&n.nodeType===Node.TEXT_NODE&&(n.textContent=d.value||"")}},unmounted(t){t._tooltipEl&&t._tooltipEl.parentNode&&document.body.removeChild(t._tooltipEl),t._tooltipShowFn&&t.removeEventListener("mouseenter",t._tooltipShowFn),t._tooltipHideFn&&(t.removeEventListener("mouseleave",t._tooltipHideFn),t.removeEventListener("click",t._tooltipHideFn)),t._tooltipRepositionFn&&(window.removeEventListener("scroll",t._tooltipRepositionFn,!0),window.removeEventListener("resize",t._tooltipRepositionFn))}};exports.tooltip=m;

package/dist/directives/tooltip.js

@@ -0,0 +1,115 @@
+const m = {
+  mounted(t, d) {
+    if (!d.value) return;
+    const n = Object.keys(d.modifiers)[0] || "top", o = document.createElement("div");
+    o.textContent = d.value, o.className = "tooltip-custom", o.style.cssText = `
+      position: fixed;
+      z-index: 9999;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
+      padding: 6px 12px;
+      border-radius: 4px;
+      font-size: 14px;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.2s;
+      white-space: nowrap;
+    `;
+    const r = document.createElement("div");
+    r.style.cssText = `
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+    `, o.appendChild(r), t._tooltipEl = o, t._tooltipArrow = r, t._tooltipPosition = n;
+    const p = () => {
+      if (!o.parentNode) return;
+      const e = t.getBoundingClientRect(), i = o.getBoundingClientRect();
+      if (e.width === 0 || e.height === 0) {
+        o.style.opacity = "0";
+        return;
+      }
+      let s, a;
+      switch (n) {
+        case "bottom":
+          a = e.left + e.width / 2 - i.width / 2, s = e.bottom + 8;
+          break;
+        case "left":
+          a = e.left - i.width - 8, s = e.top + e.height / 2 - i.height / 2;
+          break;
+        case "right":
+          a = e.right + 8, s = e.top + e.height / 2 - i.height / 2;
+          break;
+        default:
+          a = e.left + e.width / 2 - i.width / 2, s = e.top - i.height - 8;
+      }
+      const l = 8;
+      a = Math.max(l, Math.min(a, window.innerWidth - i.width - l)), s = Math.max(l, Math.min(s, window.innerHeight - i.height - l)), o.style.left = `${a}px`, o.style.top = `${s}px`;
+    }, w = () => {
+      const e = `
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+      `;
+      switch (n) {
+        case "bottom":
+          r.style.cssText = e + `
+            border-width: 0 5px 5px 5px;
+            border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
+            top: -5px;
+            left: 50%;
+            transform: translateX(-50%);
+          `;
+          break;
+        case "left":
+          r.style.cssText = e + `
+            border-width: 5px 0 5px 5px;
+            border-color: transparent transparent transparent rgba(0, 0, 0, 0.9);
+            right: -5px;
+            top: 50%;
+            transform: translateY(-50%);
+          `;
+          break;
+        case "right":
+          r.style.cssText = e + `
+            border-width: 5px 5px 5px 0;
+            border-color: transparent rgba(0, 0, 0, 0.9) transparent transparent;
+            left: -5px;
+            top: 50%;
+            transform: translateY(-50%);
+          `;
+          break;
+        default:
+          r.style.cssText = e + `
+            border-width: 5px 5px 0 5px;
+            border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
+            bottom: -5px;
+            left: 50%;
+            transform: translateX(-50%);
+          `;
+      }
+    }, h = () => {
+      document.body.appendChild(o), w(), p(), setTimeout(() => {
+        o.style.opacity = "1";
+      }, 10), window.addEventListener("scroll", p, !0), window.addEventListener("resize", p);
+    }, c = () => {
+      o.style.opacity = "0", window.removeEventListener("scroll", p, !0), window.removeEventListener("resize", p), setTimeout(() => {
+        o.parentNode && document.body.removeChild(o);
+      }, 200);
+    };
+    t.addEventListener("mouseenter", h), t.addEventListener("mouseleave", c), t.addEventListener("click", c), t._tooltipShowFn = h, t._tooltipHideFn = c, t._tooltipRepositionFn = p;
+  },
+  updated(t, d) {
+    if (t._tooltipEl) {
+      const n = t._tooltipEl.firstChild;
+      n && n.nodeType === Node.TEXT_NODE && (n.textContent = d.value || "");
+    }
+  },
+  unmounted(t) {
+    t._tooltipEl && t._tooltipEl.parentNode && document.body.removeChild(t._tooltipEl), t._tooltipShowFn && t.removeEventListener("mouseenter", t._tooltipShowFn), t._tooltipHideFn && (t.removeEventListener("mouseleave", t._tooltipHideFn), t.removeEventListener("click", t._tooltipHideFn)), t._tooltipRepositionFn && (window.removeEventListener("scroll", t._tooltipRepositionFn, !0), window.removeEventListener("resize", t._tooltipRepositionFn));
+  }
+};
+export {
+  m as tooltip
+};