@quoreadmin/ui 1.8.11 → 1.9.1

package/dist/index157.js

@@ -1,389 +1,120 @@
-import { defineComponent as ot, ref as H, computed as C, reactive as at, onMounted as it, onUnmounted as lt } from "vue";
-import { createPopper as st } from "./index197.js";
-import { useI18n as ut } from "vue-i18n";
-const ht = ot({
-  name: "QTour",
+import { defineComponent as c, ref as u, computed as v, onMounted as g, onUnmounted as h, watch as y, nextTick as m } from "vue";
+import { useThrottleFn as b } from "./index179.js";
+const T = c({
+  name: "QTooltip",
   props: {
-    name: {
+    // Pass in an ID unique to the tooltip used for aria-describedby.
+    id: {
       type: String,
-      default: "default"
+      default: "tooltip"
     },
-    steps: {
-      type: Array,
-      required: !0
-    },
-    backdrop: {
-      type: Boolean,
-      default: !0
+    /** Set tooltip color - currently only inkwell-30 */
+    color: {
+      type: String,
+      default: "inkwell-30"
     },
-    autoStart: {
+    /** Controls if the tooltip is in controlled mode */
+    controlled: {
       type: Boolean,
       default: !1
     },
-    startDelay: {
-      type: Number,
-      default: 2e3
-    },
-    highlight: {
+    disabled: {
       type: Boolean,
-      default: !0
-    },
-    // Margin between the target element and the tooltip
-    margin: {
-      type: Number,
-      default: 8
-    },
-    buttonLabels: {
-      type: Object,
-      default: () => {
-        const { t: n } = ut();
-        return {
-          next: n("HC_NEXT"),
-          back: n("HC_BACK"),
-          end: n("HC_GOT_IT"),
-          snooze: n("HC_SNOOZE")
-        };
-      }
+      default: !1
     },
-    saveProgress: {
+    /** Sets the width of the element as well as the alignment and wrapping of the tooltip text*/
+    noWrap: {
       type: Boolean,
       default: !0
     },
-    hideSnooze: {
-      type: Boolean,
-      default: !1
+    /** Ability to customize the tooltip position (top, bottom, left, right) */
+    position: {
+      type: String,
+      default: "bottom"
     },
-    hideArrow: {
+    /** Set if the tooltip is relatively positioned or not */
+    relative: {
       type: Boolean,
       default: !1
     },
-    noScroll: {
+    /** Set if the tooltip is teleported to the the teleportTo element */
+    teleport: {
       type: Boolean,
       default: !1
     },
-    backdropBlur: {
-      type: Number,
-      default: 1
-    },
-    outlineWidth: {
-      type: Number,
-      default: 4
+    teleportTo: {
+      type: String,
+      default: "body"
     },
-    animateButton: {
-      type: Boolean,
-      default: !1
+    /** Ability to set custom tooltip classes */
+    tooltipClasses: {
+      type: [String, Array, Object],
+      default: ""
     },
-    fixedPositioning: {
+    /** Controls visibility in controlled mode */
+    visible: {
       type: Boolean,
       default: !1
     },
-    beforeStartTour: {
-      type: Function,
-      default: void 0
-    },
-    // Position of the tour popover from the bottom of the screen
-    popoverBottom: {
-      type: String,
-      default: "1.5rem"
-    },
-    // Position of the tour popover from the left of the screen
-    popoverLeft: {
-      type: String,
-      default: "1.5rem"
-    },
-    hideCTA: {
-      type: Boolean,
-      default: !0
+    tooltipGap: {
+      type: Number,
+      default: 12
     }
   },
-  emits: ["onTourStart", "onTourStop", "onTourEnd", "onTourStep", "onTourSnooze"],
-  setup(n, { emit: y, expose: Z }) {
-    const $ = `tour-${n.name}`, R = `${$}-tooltip`, x = `${$}-backdrop`, M = `${$}-arrow`, A = H(null), c = H(null), v = H(!1), f = H(/* @__PURE__ */ new Set()), P = `${$}-target-overlay`, m = C(() => n.steps.filter((e) => !e.skip?.())), t = at({
-      currentStep: 0,
-      lastStep: 0,
-      nextStep: 1,
-      getCurrentStep: C(() => m.value[t.currentStep]),
-      getLastStep: C(() => m.value[t.lastStep]),
-      getNextStep: C(() => m.value[t.nextStep])
-    }), k = () => {
-      try {
-        const e = localStorage.getItem(`tour-steps-${n.name}`);
-        e && (f.value = new Set(JSON.parse(e)));
-      } catch {
-        localStorage.removeItem(`tour-steps-${n.name}`);
-      }
-    }, Q = () => {
-      n.saveProgress && localStorage.setItem(
-        `tour-steps-${n.name}`,
-        JSON.stringify([...f.value])
-      );
-    }, T = (e) => {
-      f.value.add(e), Q();
-    }, J = C(() => t.currentStep === m.value.length - 1 ? n.buttonLabels.end : n.buttonLabels.next), U = () => {
-      window.addEventListener("resize", I), window.addEventListener("scroll", I, !0);
-    }, V = () => {
-      window.removeEventListener("resize", I), window.removeEventListener("scroll", I, !0);
-    }, w = async () => {
-      k(), n.beforeStartTour && await n.beforeStartTour();
-      const e = localStorage.getItem(`tour-current-${n.name}`);
-      n.saveProgress && e ? t.currentStep = parseInt(e || "0") : t.currentStep = 0;
-      const i = async () => {
-        if (await q(t.currentStep), !A.value) {
-          const u = document.querySelector(
-            t.getCurrentStep.target
-          );
-          A.value = st(
-            u,
-            c.value,
-            {
-              position: t.getCurrentStep.placement || "right",
-              margin: t.getCurrentStep.margin !== void 0 ? t.getCurrentStep.margin : n.margin || 8
-            }
-          );
-        }
-        T(t.currentStep), E(), U();
-      };
-      n.autoStart ? setTimeout(i, n.startDelay) : i(), y("onTourStart");
-    }, b = async () => {
-      const e = document.querySelector(`#${P}`);
-      e && e.setAttribute("data-hidden", ""), t.currentStep < m.value.length && t.getCurrentStep.onAfter && await t.getCurrentStep.onAfter(), n.backdrop && document.querySelector(`#${x}`)?.setAttribute("data-hidden", ""), (n.highlight || t.getLastStep.highlight) && document.querySelectorAll(".tour-highlight").forEach(
-        (i) => i.classList.remove("tour-highlight")
-      ), c.value?.setAttribute("data-hidden", ""), V(), y("onTourStop");
-    }, X = (e) => {
-      b(), t.currentStep = 0, t.lastStep = 0, t.nextStep = 1, f.value.clear(), localStorage.removeItem(`tour-steps-${n.name}`), localStorage.removeItem(`tour-current-${n.name}`), localStorage.removeItem("tour-" + n.name), e && w();
-    }, Y = async () => {
-      if (t.getCurrentStep.onAfter && await t.getCurrentStep.onAfter(), t.lastStep = t.currentStep, t.currentStep++, t.currentStep >= m.value.length) {
-        L();
-        return;
-      }
-      await q(t.currentStep), t.nextStep = t.currentStep + 1, T(t.currentStep), n.saveProgress && localStorage.setItem(
-        `tour-current-${n.name}`,
-        t.currentStep.toString()
-      ), E();
-    }, N = async () => {
-      if (await t.getCurrentStep.onAfter?.(), await q(t.lastStep), t.currentStep = t.lastStep, t.lastStep--, t.lastStep < 0 && (t.lastStep = 0), t.currentStep < 0) {
-        L();
-        return;
-      }
-      n.saveProgress && localStorage.setItem(
-        `tour-current-${n.name}`,
-        t.currentStep.toString()
-      ), t.nextStep = t.currentStep + 1, E();
-    }, O = () => {
-      b(), y("onTourSnooze");
-    }, L = () => {
-      b(), v.value = !1, y("onTourEnd");
-    }, z = async (e) => {
-      await q(e), t.currentStep = e, t.lastStep = e - 1, t.lastStep < 0 && (t.lastStep = 0), t.nextStep = e + 1, T(e), n.saveProgress && localStorage.setItem(
-        `tour-current-${n.name}`,
-        e.toString()
-      ), E();
-    }, q = async (e) => {
-      const i = document.querySelector(`#${P}`);
-      i && i.setAttribute("data-hidden", ""), document.querySelectorAll(".tour-highlight").forEach((r) => r.classList.remove("tour-highlight"));
-      const u = document.querySelector(`#${x}`);
-      u && (u.style.clipPath = ""), c.value?.setAttribute("data-hidden", ""), await m.value[e]?.onBefore?.(), c.value?.removeAttribute("data-hidden");
-    }, j = (e) => new Promise((i) => {
-      const u = e.getBoundingClientRect();
-      if (u.top >= 0 && u.left >= 0 && u.bottom <= (window.innerHeight || document.documentElement.clientHeight) && u.right <= (window.innerWidth || document.documentElement.clientWidth)) {
-        i();
-        return;
-      }
-      let d = window.scrollY, l = window.scrollX, s = 0;
-      const a = 5, o = () => {
-        const g = window.scrollY, h = window.scrollX;
-        if (g === d && h === l) {
-          if (s++, s >= a) {
-            i();
-            return;
-          }
-        } else
-          s = 0, d = g, l = h;
-        requestAnimationFrame(o);
-      };
-      e.scrollIntoView({
-        behavior: "smooth",
-        block: "center"
-      }), requestAnimationFrame(o);
-    });
-    let B = !1;
-    const E = async () => {
-      if (B) return;
-      B = !0, c.value?.setAttribute("data-hidden", ""), t.getCurrentStep.tooltipWidth ? c.value?.style.setProperty("width", t.getCurrentStep.tooltipWidth) : c.value?.style.removeProperty("width");
-      const e = t.getCurrentStep, i = e?.noScroll === !0;
-      if (!(n.noScroll === !0) && !i) {
-        const o = document.querySelector(
-          e.target
-        );
-        o && await j(o);
-      }
-      _(), F(), c.value?.removeAttribute("data-hidden"), c.value && (c.value.style.position = "fixed"), await new Promise((o) => {
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            o();
-          });
-        });
-      });
-      const r = document.querySelector(
-        t.getCurrentStep.target
-      );
-      if (!r || !c.value) {
-        B = !1;
-        return;
-      }
-      c.value.style.left = "0", c.value.style.top = "0";
-      const d = t.getCurrentStep.placement || "right", l = A.value?.update({
-        reference: r,
-        position: d,
-        margin: t.getCurrentStep.margin !== void 0 ? t.getCurrentStep.margin : n.margin || 8
+  setup(e) {
+    const o = u(!1), l = u({
+      top: "0",
+      left: "0"
+    }), r = u(null), p = v(() => e.controlled ? e.visible : e.teleport ? o.value : !1), d = () => {
+      if (!r.value) return;
+      const t = r.value.getBoundingClientRect(), a = e.tooltipGap;
+      e.position === "top" ? (l.value.top = `${t.top - a}px`, l.value.left = `${t.left + t.width / 2}px`) : e.position === "bottom" ? (l.value.top = `${t.bottom + a}px`, l.value.left = `${t.left + t.width / 2}px`) : e.position === "left" ? (l.value.left = `${t.left - a}px`, l.value.top = `${t.top + t.height / 2}px`) : e.position === "right" && (l.value.left = `${t.right + a}px`, l.value.top = `${t.top + t.height / 2}px`);
+    }, f = () => {
+      o.value = !0, m(() => {
+        d();
       });
-      if (!l) {
-        const o = r.getBoundingClientRect(), g = c.value.getBoundingClientRect(), h = t.getCurrentStep.margin ?? n.margin ?? 8;
-        c.value.style.left = `${o.right + h}px`, c.value.style.top = `${o.top + o.height / 2 - g.height / 2}px`;
-      }
-      const s = l || "rm";
-      c.value.setAttribute("data-arrow", s);
-      const a = document.querySelector(`#${M}`);
-      if (a) {
-        const o = r.getBoundingClientRect(), g = c.value.getBoundingClientRect(), h = o.left + o.width / 2, S = o.top + o.height / 2;
-        if (a.style.left = "", a.style.top = "", a.style.right = "", a.style.bottom = "", a.style.transform = "", s.startsWith("t")) {
-          const p = h - g.left;
-          a.style.left = `${Math.max(10, Math.min(g.width - 10, p))}px`, a.style.bottom = "-5px", a.style.transform = "translateX(-50%)";
-        } else if (s.startsWith("b")) {
-          const p = h - g.left;
-          a.style.left = `${Math.max(10, Math.min(g.width - 10, p))}px`, a.style.top = "-5px", a.style.transform = "translateX(-50%)";
-        } else if (s.startsWith("l")) {
-          const p = S - g.top;
-          a.style.top = `${Math.max(10, Math.min(g.height - 10, p))}px`, a.style.right = "-5px", a.style.transform = "translateY(-50%)";
-        } else if (s.startsWith("r")) {
-          const p = S - g.top;
-          a.style.top = `${Math.max(10, Math.min(g.height - 10, p))}px`, a.style.left = "-5px", a.style.transform = "translateY(-50%)";
-        }
-      }
-      n.saveProgress && (localStorage.setItem(
-        `tour-current-${n.name}`,
-        t.currentStep.toString()
-      ), T(t.currentStep)), D(), y("onTourStep"), B = !1;
-    }, _ = () => {
-      if (document.querySelectorAll(".tour-highlight").forEach(
-        (u) => u.classList.remove("tour-highlight")
-      ), !(n.highlight && t.getCurrentStep.highlight !== !1 || t.getCurrentStep.highlight === !0)) return;
-      document.querySelector(
-        t.getCurrentStep.target
-      )?.classList.add("tour-highlight");
-    }, F = () => {
-      const e = document.querySelector(`#${x}`), i = e?.querySelector(".tour-highlight-outline");
-      if (!n.backdrop || !e) {
-        e?.setAttribute("data-hidden", "");
-        return;
-      }
-      const u = document.querySelector(
-        t.getCurrentStep.target
-      );
-      if (!u) {
-        e.setAttribute("data-hidden", "");
-        return;
+    }, i = () => {
+      o.value = !1, l.value.top = "0", l.value.left = "0";
+    }, n = b(
+      () => {
+        e.controlled && o.value === !0 && d(), !e.controlled && o.value === !0 && i();
+      },
+      100,
+      !0
+    );
+    return g(() => {
+      e.teleport && e.controlled && (e.visible ? f() : i()), e.teleport && (window.addEventListener(
+        "resize",
+        n
+      ), window.addEventListener(
+        "scroll",
+        n
+      ));
+    }), h(() => {
+      e.teleport && (window.removeEventListener(
+        "resize",
+        n
+      ), window.removeEventListener(
+        "scroll",
+        n
+      ));
+    }), y(
+      () => e.visible,
+      (s) => {
+        e.teleport && e.controlled && (s ? f() : i());
       }
-      const r = u.getBoundingClientRect(), d = t.getCurrentStep.clipPaddingHorizontal ?? t.getCurrentStep.clipPadding ?? 0, l = t.getCurrentStep.clipPaddingVertical ?? t.getCurrentStep.clipPadding ?? 0, s = n.outlineWidth ?? 4, a = t.getCurrentStep.clipWidth ?? r.width, o = t.getCurrentStep.clipHeight ?? r.height, g = t.getCurrentStep.clipAlign ?? "center";
-      let h, S;
-      g === "left" ? h = r.left : g === "right" ? h = r.right - a : h = r.left + r.width / 2 - a / 2, g === "top" ? S = r.top : g === "bottom" ? S = r.bottom - o : S = r.top + r.height / 2 - o / 2;
-      const p = h + a, W = S + o, rt = `path('M 0,0 L 0,${window.innerHeight} L ${window.innerWidth},${window.innerHeight} L ${window.innerWidth},0 Z M ${h - d},${S - l} L ${p + d},${S - l} L ${p + d},${W + l} L ${h - d},${W + l} Z')`, nt = `path('M ${h - d - s},${S - l - s} L ${p + d + s},${S - l - s} L ${p + d + s},${W + l + s} L ${h - d - s},${W + l + s} Z')`;
-      e.style.clipPath = rt, n.highlight && t.getCurrentStep.highlight !== !1 ? i.style.clipPath = nt : i.style.clipPath = "none", e.removeAttribute("data-hidden");
-    }, D = () => {
-      const e = document.querySelector(`#${P}`);
-      if (!e) return;
-      const i = t.getCurrentStep;
-      if (!i?.disableTarget) {
-        e.setAttribute("data-hidden", "");
-        return;
-      }
-      const u = document.querySelector(i.target);
-      if (!u) {
-        e.setAttribute("data-hidden", "");
-        return;
-      }
-      const r = u.getBoundingClientRect(), d = i.clipPaddingHorizontal ?? i.clipPadding ?? 0, l = i.clipPaddingVertical ?? i.clipPadding ?? 0, s = i.clipWidth ?? r.width, a = i.clipHeight ?? r.height, o = i.clipAlign ?? "center";
-      let g, h;
-      o === "left" ? g = r.left : o === "right" ? g = r.right - s : g = r.left + r.width / 2 - s / 2, o === "top" ? h = r.top : o === "bottom" ? h = r.bottom - a : h = r.top + r.height / 2 - a / 2, e.style.position = "fixed", e.style.left = `${g - d}px`, e.style.top = `${h - l}px`, e.style.width = `${s + d * 2}px`, e.style.height = `${a + l * 2}px`, e.removeAttribute("data-hidden");
-    }, G = () => {
-      v.value = !v.value;
-    }, K = (e) => {
-      v.value = !1, localStorage.setItem(`tour-current-${n.name}`, e.toString()), w();
-    }, tt = (e) => f.value.has(e), et = () => {
-      F(), _(), D();
-      const e = document.querySelector(
-        t.getCurrentStep.target
-      );
-      if (!e || !c.value) return;
-      c.value.style.position = "fixed";
-      const i = t.getCurrentStep.placement || "right", u = A.value?.update({
-        reference: e,
-        position: i,
-        margin: t.getCurrentStep.margin !== void 0 ? t.getCurrentStep.margin : n.margin || 8
-      }) || i;
-      c.value.setAttribute("data-arrow", u);
-      const r = document.querySelector(`#${M}`);
-      if (r) {
-        const d = e.getBoundingClientRect(), l = c.value.getBoundingClientRect(), s = d.left + d.width / 2, a = d.top + d.height / 2;
-        if (r.style.left = "", r.style.top = "", r.style.right = "", r.style.bottom = "", r.style.transform = "", u.startsWith("t")) {
-          const o = s - l.left;
-          r.style.left = `${Math.max(10, Math.min(l.width - 10, o))}px`, r.style.bottom = "-5px", r.style.transform = "translateX(-50%)";
-        } else if (u.startsWith("b")) {
-          const o = s - l.left;
-          r.style.left = `${Math.max(10, Math.min(l.width - 10, o))}px`, r.style.top = "-5px", r.style.transform = "translateX(-50%)";
-        } else if (u.startsWith("l")) {
-          const o = a - l.top;
-          r.style.top = `${Math.max(10, Math.min(l.height - 10, o))}px`, r.style.right = "-5px", r.style.transform = "translateY(-50%)";
-        } else if (u.startsWith("r")) {
-          const o = a - l.top;
-          r.style.top = `${Math.max(10, Math.min(l.height - 10, o))}px`, r.style.left = "-5px", r.style.transform = "translateY(-50%)";
-        }
-      }
-    }, I = () => {
-      t.getCurrentStep && window.requestAnimationFrame(() => {
-        et();
-      });
-    };
-    return it(() => {
-      c.value = document.querySelector(
-        `#${R}`
-      ), k(), n.autoStart && w();
-    }), lt(() => {
-      V();
-    }), Z({
-      startTour: w,
-      nextStep: Y,
-      lastStep: N,
-      endTour: L,
-      stopTour: b,
-      snoozeTour: O,
-      goToStep: z,
-      resetTour: X
-    }), {
-      _CurrentStep: t,
-      getNextLabel: J,
-      startTour: w,
-      nextStep: Y,
-      lastStep: N,
-      endTour: L,
-      stopTour: b,
-      snoozeTour: O,
-      goToStep: z,
-      resetTour: X,
-      props: n,
-      tooltipId: R,
-      backdropId: x,
-      arrowId: M,
-      targetOverlayId: P,
-      showPopover: v,
-      togglePopover: G,
-      startStepFromPopover: K,
-      isStepViewed: tt,
-      visibleSteps: m,
-      viewedSteps: f
+    ), {
+      // Refs
+      tooltipStyle: l,
+      tooltipTarget: r,
+      // Computed
+      isVisible: p,
+      // Methods
+      hideTooltip: i,
+      showTooltip: f
     };
   }
 });
 export {
-  ht as default
+  T as default
 };

package/dist/index16.js

@@ -1,7 +1,7 @@
-import k from "./index88.js";
+import k from "./index89.js";
 import { openBlock as i, createElementBlock as s, normalizeClass as u, renderSlot as t, createElementVNode as d, normalizeStyle as y, createCommentVNode as m, Fragment as a, renderList as n, mergeProps as p, createTextVNode as $, toDisplayString as g } from "vue";
 /* empty css        */
-import P from "./index63.js";
+import P from "./index64.js";
 const v = ["id"], b = ["id"], S = ["id"], w = ["id"], V = ["id"], C = ["id"], F = ["id"], R = ["id", "onClick"], L = {
   key: 1,
   class: "list ordered-list"