hys-ui 0.2.0 → 0.4.0

package/dist/components/HysSlider/SliderTooltip.vue.js

@@ -1,7 +1,7 @@
 import o from "./SliderTooltip2.vue.js";
 /* empty css                   */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-62cbb909"]]);
+const i = /* @__PURE__ */ t(o, [["__scopeId", "data-v-01e08b26"]]);
 export {
-  m as default
+  i as default
 };

package/dist/components/HysSlider/SliderTooltip2.vue.js

@@ -1,156 +1,170 @@
-import { defineComponent as J, ref as A, watch as P, onActivated as K, nextTick as Q, onDeactivated as Z, onBeforeUnmount as ee, openBlock as N, createBlock as te, Teleport as ie, createElementBlock as oe, mergeProps as ne, unref as le, renderSlot as se, createCommentVNode as re } from "vue";
-import { useHysRootAttrs as ae } from "../../config.js";
-const ce = ["id"], fe = /* @__PURE__ */ J({
+import { defineComponent as K, ref as S, watch as q, onActivated as Q, nextTick as Z, onDeactivated as tt, onBeforeUnmount as et, openBlock as j, createBlock as it, Teleport as ot, createVNode as nt, unref as U, withCtx as lt, createElementBlock as st, mergeProps as at, renderSlot as rt, createCommentVNode as ct } from "vue";
+import dt from "../../motion/PopupMotion.js";
+import { popupSize as pt } from "../../motion/popup.js";
+import { useHysRootAttrs as ut } from "../../config.js";
+const ht = ["id"], yt = /* @__PURE__ */ K({
   __name: "SliderTooltip",
   props: {
+    popupTransition: {},
+    popupTransitionDuration: {},
+    visible: { type: Boolean },
     id: {},
     anchor: {},
     container: {},
     placement: {},
     position: {}
   },
-  setup(q) {
-    const i = q, C = ae(), g = A(), p = A(!0), R = A({ position: "fixed", visibility: "hidden" }), X = A(i.placement);
-    let h, x, L = [], S = {}, z;
-    function B() {
-      if (L = [], S = {}, !i.anchor) return;
-      for (let n = i.anchor.parentElement; n; n = n.parentElement) {
+  setup(k) {
+    const t = k, A = ut(), w = S(), f = S(!0), C = S({ position: "fixed", visibility: "hidden" }), V = S(t.placement);
+    let p, x, L = [], R = {}, z;
+    function T() {
+      if (L = [], R = {}, !t.anchor) return;
+      for (let n = t.anchor.parentElement; n; n = n.parentElement) {
         const e = getComputedStyle(n), l = /hidden|clip|auto|scroll/.test(e.overflowX || e.overflow), c = /hidden|clip|auto|scroll/.test(e.overflowY || e.overflow);
         (l || c) && L.push({ element: n, x: l, y: c });
       }
-      const t = getComputedStyle(i.anchor);
+      const i = getComputedStyle(t.anchor);
       for (const n of [
         "--hys-ui-text",
         "--hys-ui-surface",
         "--hys-ui-theme-text",
         "--hys-ui-theme-surface"
       ]) {
-        const e = t.getPropertyValue(n).trim();
-        e && (S[n] = e);
+        const e = i.getPropertyValue(n).trim();
+        e && (R[n] = e);
       }
     }
-    function Y() {
-      h = void 0;
-      const t = i.anchor, n = g.value;
-      if (!p.value || !(t != null && t.isConnected) || !n) return;
-      const e = window.visualViewport, l = (e == null ? void 0 : e.offsetLeft) ?? 0, c = (e == null ? void 0 : e.offsetTop) ?? 0, w = (e == null ? void 0 : e.width) ?? (document.documentElement.clientWidth || window.innerWidth), r = (e == null ? void 0 : e.height) ?? (document.documentElement.clientHeight || window.innerHeight), a = l + w, y = c + r, s = 8, u = 8, o = (t.querySelector(".hys-ui-slider-handle") ?? t).getBoundingClientRect();
-      let _ = l, W = c, F = a, H = y;
-      for (const { element: v, x: G, y: I } of L) {
+    function N() {
+      p = void 0;
+      const i = t.anchor, n = w.value;
+      if (!t.visible || !f.value || !(i != null && i.isConnected) || !n) return;
+      const e = window.visualViewport, l = (e == null ? void 0 : e.offsetLeft) ?? 0, c = (e == null ? void 0 : e.offsetTop) ?? 0, g = (e == null ? void 0 : e.width) ?? (document.documentElement.clientWidth || window.innerWidth), a = (e == null ? void 0 : e.height) ?? (document.documentElement.clientHeight || window.innerHeight), r = l + g, y = c + a, s = 8, u = 8, o = (i.querySelector(".hys-ui-slider-handle") ?? i).getBoundingClientRect();
+      let F = l, H = c, O = r, P = y;
+      for (const { element: v, x: I, y: J } of L) {
         const b = v.getBoundingClientRect();
-        G && (_ = Math.max(_, b.left + v.clientLeft), F = Math.min(
-          F,
+        I && (F = Math.max(F, b.left + v.clientLeft), O = Math.min(
+          O,
           b.left + v.clientLeft + (v.clientWidth || b.width)
-        )), I && (W = Math.max(W, b.top + v.clientTop), H = Math.min(
-          H,
+        )), J && (H = Math.max(H, b.top + v.clientTop), P = Math.min(
+          P,
           b.top + v.clientTop + (v.clientHeight || b.height)
         ));
       }
-      if (!o.width && !o.height || o.right <= _ || o.left >= F || o.bottom <= W || o.top >= H) {
-        R.value = { position: "fixed", visibility: "hidden" };
+      if (!o.width && !o.height || o.right <= F || o.left >= O || o.bottom <= H || o.top >= P) {
+        C.value = { position: "fixed", visibility: "hidden" };
         return;
       }
-      n.style.maxWidth = Math.max(1, w - s * 2) + "px";
-      const f = z ?? n.getBoundingClientRect(), O = {
+      n.style.maxWidth = Math.max(1, g - s * 2) + "px";
+      const h = z ?? pt(n), D = {
         top: o.top - c - u - s,
         bottom: y - o.bottom - u - s,
         left: o.left - l - u - s,
-        right: a - o.right - u - s
-      }, U = {
+        right: r - o.right - u - s
+      }, $ = {
         top: "bottom",
         bottom: "top",
         left: "right",
         right: "left"
       };
-      let d = i.placement;
-      const D = U[d], $ = d === "top" || d === "bottom" ? f.height : f.width;
-      O[d] < $ && O[D] > O[d] && (d = D);
-      let E = o.left + (o.width - f.width) / 2, M = o.top + (o.height - f.height) / 2;
-      d === "top" ? M = o.top - f.height - u : d === "bottom" ? M = o.bottom + u : d === "left" ? E = o.left - f.width - u : E = o.right + u, E = Math.max(l + s, Math.min(E, a - f.width - s)), M = Math.max(c + s, Math.min(M, y - f.height - s)), X.value = d, R.value = {
-        ...S,
+      let d = t.placement;
+      const Y = $[d], G = d === "top" || d === "bottom" ? h.height : h.width;
+      D[d] < G && D[Y] > D[d] && (d = Y);
+      let M = o.left + (o.width - h.width) / 2, E = o.top + (o.height - h.height) / 2;
+      d === "top" ? E = o.top - h.height - u : d === "bottom" ? E = o.bottom + u : d === "left" ? M = o.left - h.width - u : M = o.right + u, M = Math.max(l + s, Math.min(M, r - h.width - s)), E = Math.max(c + s, Math.min(E, y - h.height - s)), V.value = d, C.value = {
+        ...R,
         position: "fixed",
-        left: Math.round(E) + "px",
-        top: Math.round(M) + "px",
-        maxWidth: Math.max(1, w - s * 2) + "px",
+        left: Math.round(M) + "px",
+        top: Math.round(E) + "px",
+        maxWidth: Math.max(1, g - s * 2) + "px",
         visibility: "visible"
       };
     }
     function m() {
-      p.value && h === void 0 && (h = requestAnimationFrame(Y));
+      t.visible && f.value && p === void 0 && (p = requestAnimationFrame(N));
     }
-    function T() {
-      h !== void 0 && cancelAnimationFrame(h), h = void 0, Y();
+    function W() {
+      p !== void 0 && cancelAnimationFrame(p), p = void 0, N();
     }
-    function k() {
-      z = void 0, B(), m();
+    function B() {
+      z = void 0, T(), m();
     }
-    function V() {
-      x == null || x(), x = void 0, h !== void 0 && cancelAnimationFrame(h), h = void 0, z = void 0, L = [];
+    function _() {
+      x == null || x(), x = void 0, p !== void 0 && cancelAnimationFrame(p), p = void 0, z = void 0, L = [];
     }
-    function j() {
-      var c, w;
-      if (V(), !p.value || !i.anchor || !g.value) return;
-      B(), window.addEventListener("scroll", m, !0), window.addEventListener("resize", k), (c = window.visualViewport) == null || c.addEventListener("scroll", m), (w = window.visualViewport) == null || w.addEventListener("resize", k);
-      const t = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver((r) => {
-        var a;
-        for (const y of r)
-          if (y.target === g.value) {
-            const s = (a = y.borderBoxSize) == null ? void 0 : a[0];
+    function X() {
+      var c, g;
+      if (_(), !t.visible || !f.value || !t.anchor || !w.value) return;
+      T(), window.addEventListener("scroll", m, !0), window.addEventListener("resize", B), (c = window.visualViewport) == null || c.addEventListener("scroll", m), (g = window.visualViewport) == null || g.addEventListener("resize", B);
+      const i = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver((a) => {
+        var r;
+        for (const y of a)
+          if (y.target === w.value) {
+            const s = (r = y.borderBoxSize) == null ? void 0 : r[0];
             z = s ? { width: s.inlineSize, height: s.blockSize } : void 0;
           }
-        T();
+        W();
       });
-      t == null || t.observe(i.anchor), t == null || t.observe(g.value), i.container && (t == null || t.observe(i.container));
+      i == null || i.observe(t.anchor), i == null || i.observe(w.value), t.container && (i == null || i.observe(t.container));
       const n = () => {
-        var r, a;
+        var a, r;
         return [
-          (r = i.container) == null ? void 0 : r.getAttribute("style"),
-          (a = i.container) == null ? void 0 : a.getAttribute("class"),
-          C.value["data-hys-theme"]
+          (a = t.container) == null ? void 0 : a.getAttribute("style"),
+          (r = t.container) == null ? void 0 : r.getAttribute("class"),
+          A.value["data-hys-theme"]
         ].join("|");
       };
       let e = n();
       const l = typeof MutationObserver > "u" ? void 0 : new MutationObserver(() => {
-        const r = n();
-        r !== e && (e = r, B(), m());
+        const a = n();
+        a !== e && (e = a, T(), m());
       });
-      i.container && (l == null || l.observe(i.container, {
+      t.container && (l == null || l.observe(t.container, {
         attributes: !0,
         attributeFilter: ["style", "class", "data-hys-theme"]
       })), x = () => {
-        var r, a;
-        window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", k), (r = window.visualViewport) == null || r.removeEventListener("scroll", m), (a = window.visualViewport) == null || a.removeEventListener("resize", k), t == null || t.disconnect(), l == null || l.disconnect();
+        var a, r;
+        window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", B), (a = window.visualViewport) == null || a.removeEventListener("scroll", m), (r = window.visualViewport) == null || r.removeEventListener("resize", B), i == null || i.disconnect(), l == null || l.disconnect();
       }, m();
     }
-    return P(
-      () => [i.anchor, i.container, g.value, p.value],
-      j,
+    return q(
+      () => [t.anchor, t.container, w.value, f.value, t.visible],
+      X,
       { flush: "post" }
-    ), P(() => [i.position, i.placement], T, { flush: "post" }), P(
-      () => C.value["data-hys-theme"],
+    ), q(() => [t.position, t.placement], W, { flush: "post" }), q(
+      () => A.value["data-hys-theme"],
       () => {
-        B(), T();
+        T(), W();
       },
       { flush: "post" }
-    ), K(() => {
-      p.value = !0, Q(j);
-    }), Z(() => {
-      p.value = !1, V();
-    }), ee(V), (t, n) => (N(), te(ie, { to: "body" }, [
-      p.value ? (N(), oe("span", ne({
-        key: 0,
-        id: q.id,
-        ref_key: "panel",
-        ref: g
-      }, le(C), {
-        class: ["hys-ui-slider-tooltip", "hys-ui-slider-tooltip-" + X.value],
-        role: "tooltip",
-        style: R.value
-      }), [
-        se(t.$slots, "default", {}, void 0, !0)
-      ], 16, ce)) : re("", !0)
+    ), Q(() => {
+      f.value = !0, Z(X);
+    }), tt(() => {
+      f.value = !1, _();
+    }), et(_), (i, n) => (j(), it(ot, { to: "body" }, [
+      nt(U(dt), {
+        "popup-transition": t.popupTransition,
+        "popup-transition-duration": t.popupTransitionDuration,
+        placement: V.value
+      }, {
+        default: lt(() => [
+          f.value && k.visible ? (j(), st("span", at({
+            key: 0,
+            id: k.id,
+            ref_key: "panel",
+            ref: w
+          }, U(A), {
+            class: ["hys-ui-slider-tooltip", "hys-ui-slider-tooltip-" + V.value],
+            role: "tooltip",
+            style: C.value
+          }), [
+            rt(i.$slots, "default", {}, void 0, !0)
+          ], 16, ht)) : ct("", !0)
+        ]),
+        _: 3
+      }, 8, ["popup-transition", "popup-transition-duration", "placement"])
     ]));
   }
 });
 export {
-  fe as default
+  yt as default
 };