@quoreadmin/ui 1.10.33 → 1.11.0

package/dist/index168.js

@@ -0,0 +1,389 @@
+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 "./index208.js";
+import { useI18n as ut } from "vue-i18n";
+const ht = ot({
+  name: "QTour",
+  props: {
+    name: {
+      type: String,
+      default: "default"
+    },
+    steps: {
+      type: Array,
+      required: !0
+    },
+    backdrop: {
+      type: Boolean,
+      default: !0
+    },
+    autoStart: {
+      type: Boolean,
+      default: !1
+    },
+    startDelay: {
+      type: Number,
+      default: 2e3
+    },
+    highlight: {
+      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")
+        };
+      }
+    },
+    saveProgress: {
+      type: Boolean,
+      default: !0
+    },
+    hideSnooze: {
+      type: Boolean,
+      default: !1
+    },
+    hideArrow: {
+      type: Boolean,
+      default: !1
+    },
+    noScroll: {
+      type: Boolean,
+      default: !1
+    },
+    backdropBlur: {
+      type: Number,
+      default: 1
+    },
+    outlineWidth: {
+      type: Number,
+      default: 4
+    },
+    animateButton: {
+      type: Boolean,
+      default: !1
+    },
+    fixedPositioning: {
+      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
+    }
+  },
+  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
+      });
+      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;
+      }
+      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
+    };
+  }
+});
+export {
+  ht as default
+};

package/dist/index17.js

@@ -1,7 +1,7 @@
-import N from "./index92.js";
+import N from "./index93.js";
 import { resolveComponent as m, openBlock as o, createElementBlock as r, mergeProps as v, toHandlerKey as F, normalizeStyle as p, normalizeClass as t, renderSlot as b, createCommentVNode as d, createElementVNode as n, createVNode as u, createSlots as H, renderList as y, withCtx as w, withModifiers as S, normalizeProps as V, guardReactiveProps as B, createTextVNode as $, toDisplayString as g, Fragment as k, createBlock as R } from "vue";
 /* empty css        */
-import T from "./index65.js";
+import T from "./index66.js";
 const M = ["id"], q = ["id"], D = {
   class: /* @__PURE__ */ t([
     "fixed-scrollable overflow-x-auto overflow-y-hidden z-20"

package/dist/{index167.js → index170.js}

@@ -1,5 +1,5 @@
 import { defineComponent as a, computed as n } from "vue";
-import l from "./index57.js";
+import l from "./index58.js";
 import p from "./index34.js";
 const i = a({
   name: "QWarningModal",