@quoreadmin/ui 1.9.3 → 1.10.1

package/dist/index165.js

@@ -1,210 +1,389 @@
-import { defineComponent as q, ref as o, computed as c, watch as k, onBeforeUnmount as M, onMounted as z, onUnmounted as K, nextTick as Q } from "vue";
-import { onClickOutside as b, useBreakpoints as W, breakpointsTailwind as _ } from "./index169.js";
-import { EditorContent as $, useEditor as D } from "./index202.js";
-import G from "./index203.js";
-import I from "./index204.js";
-import { Underline as J } from "./index205.js";
-import { TextStyle as N, Color as X } from "./index206.js";
-import { Link as Y } from "./index207.js";
-import { Placeholder as Z } from "./index208.js";
-import ee from "./index24.js";
-import te from "./index168.js";
-const ve = q({
-  components: {
-    EditorContent: $,
-    EmojiPicker: G,
-    QFileUpload: ee
-  },
+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 "./index205.js";
+import { useI18n as ut } from "vue-i18n";
+const ht = ot({
+  name: "QTour",
   props: {
-    modelValue: {
+    name: {
       type: String,
-      default: ""
+      default: "default"
     },
-    attachments: {
-      type: Object,
-      default: () => []
+    steps: {
+      type: Array,
+      required: !0
     },
-    allowEmojis: {
+    backdrop: {
       type: Boolean,
-      default: !1
+      default: !0
     },
-    // If the wysiwyg should allow users to upload files/images
-    allowAttachments: {
+    autoStart: {
       type: Boolean,
       default: !1
     },
-    allowFormatting: {
+    startDelay: {
+      type: Number,
+      default: 2e3
+    },
+    highlight: {
       type: Boolean,
-      default: !1
+      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")
+        };
+      }
     },
-    disabled: {
+    saveProgress: {
+      type: Boolean,
+      default: !0
+    },
+    hideSnooze: {
       type: Boolean,
       default: !1
     },
-    /** Specify file types allowed */
-    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
-    filesAllowed: {
-      type: String,
-      default: "image/*,.pdf"
+    hideArrow: {
+      type: Boolean,
+      default: !1
     },
-    // If NOT isStacked we can expand it to be stacked when focused or files are attached
-    expands: {
+    noScroll: {
       type: Boolean,
       default: !1
     },
-    isStacked: {
+    backdropBlur: {
+      type: Number,
+      default: 1
+    },
+    outlineWidth: {
+      type: Number,
+      default: 4
+    },
+    animateButton: {
       type: Boolean,
-      default: !0
+      default: !1
     },
-    isStandalone: {
+    fixedPositioning: {
       type: Boolean,
       default: !1
     },
-    placeholder: {
+    beforeStartTour: {
+      type: Function,
+      default: void 0
+    },
+    // Position of the tour popover from the bottom of the screen
+    popoverBottom: {
       type: String,
-      default: ""
+      default: "1.5rem"
     },
-    processing: {
+    // Position of the tour popover from the left of the screen
+    popoverLeft: {
+      type: String,
+      default: "1.5rem"
+    },
+    hideCTA: {
       type: Boolean,
-      default: !1
+      default: !0
     }
-    // If we have attachments, the wysiwyg should show the image preview as thumbnails (circle back)
-    // showThumbnails: {
-    //     type: Boolean,
-    //     default: true,
-    // },
-    // circle back to this
-    // mentions: {
-    //     // Refine type as we get further
-    //     type: Array as PropType<any>,
-    //     default: () => [],
-    // },
   },
-  emits: ["update:model-value", "update:attachments", "keyboard-open"],
-  setup(a, { emit: i }) {
-    const d = o(), u = o(!1), C = o(""), f = o(), x = o(), s = o(!1), m = o(!1), n = o(!1), r = o([]), v = o(), E = o(), p = o(), l = o(!1), S = o(window.innerHeight), B = c(() => t.value.getAttributes("textStyle").color || "#121517"), h = c(() => a.attachments), V = c(() => a.isStacked || a.expands && (h.value.length > 0 || n.value || !t.value.isEmpty) || m.value), U = W(_).greaterOrEqual("md"), j = () => {
-      const e = window.prompt("URL");
-      t.value.chain().focus().extendMarkRange("link").setLink({ href: e || "" }).run();
-    }, L = (e) => {
-      t.value.chain().focus().setColor(e).run(), g();
-    }, F = () => {
-      s.value = !s.value;
-    }, g = () => {
-      s.value = !1;
-    }, O = () => {
-      v.value?.fileUpload?.choose();
-    }, P = (e) => {
-      t.value.chain().focus().insertContent(e).run(), f.value.$el.click();
-    }, w = async () => {
-      if (await Q(), n.value) {
-        const e = l.value, T = visualViewport?.height || window.innerHeight;
-        l.value = S.value - T > 0, e !== l.value && (n.value = l.value, i("keyboard-open", l.value));
+  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}`);
       }
-    }, R = () => {
-      n.value && a.expands && (l.value = !1, i("keyboard-open", l.value)), n.value = !1;
-    }, A = (e) => {
-      t.value.chain().focus().insertContent(e.i).run(), u.value = !1;
-    }, H = (e) => {
-      r.value = e, y();
-    }, y = () => {
-      let e = "";
-      t.value.isEmpty || (e = a.allowFormatting ? t.value.getHTML() : t.value.getText()), r.value !== a.attachments && i("update:attachments", r.value), i("update:model-value", e);
-    }, t = o(
-      D({
-        extensions: [
-          I.configure({
-            // Disable an included extension
-            // Command + z = undo
-            // TODO: Add an undo button if this is needed
-            // history: false,
-            // Configure an included extension
-            heading: {
-              levels: [1, 2]
+    }, 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
             }
-          }),
-          J,
-          N,
-          X,
-          Y.configure({
-            openOnClick: !1
-          }),
-          Z.configure({
-            placeholder: a.placeholder
-          })
-        ],
-        content: a.modelValue,
-        // Set this to the initial value coming in.
-        onUpdate: y,
-        editable: !a.disabled
-        // make the text editable or not - default is editable
-      })
-    );
-    return k(() => a.modelValue, (e) => {
-      t.value && !e && t.value.commands.clearContent();
-    }), k(() => a.disabled, (e) => {
-      t.value && (t.value.options.editable = !e, t.value.view.update(t.value.view.props));
-    }), M(() => {
-      t.value?.destroy();
-    }), z(() => {
-      visualViewport && a.expands && visualViewport.addEventListener("resize", w);
-    }), K(() => {
-      visualViewport && a.expands && visualViewport.removeEventListener("resize", w);
-    }), b(d, () => {
-      u.value = !1;
-    }), b(p, () => {
-      n.value && a.expands && (l.value = !1, i("keyboard-open", l.value)), n.value = !1;
+          );
+        }
+        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
     }), {
-      colors: te.theme.colors,
-      colorExclusions: [
-        "success",
-        "success-light",
-        "error",
-        "error-light",
-        "warning",
-        "warning-light",
-        "info",
-        "info-light",
-        "transparent",
-        "current",
-        "green-quore",
-        "blue-sky",
-        "blue-quore",
-        "complaint",
-        "recurring",
-        "workorder"
-      ],
-      editor: t,
-      editorRef: E,
-      // refs
-      emojiPickerElement: d,
-      showEmojiPicker: u,
-      emojiSearch: C,
-      invoker: f,
-      isExpanded: V,
-      multiUploader: x,
-      showColorMenu: s,
-      focused: n,
-      files: h,
-      showFormatOptions: m,
-      uploadedfiles: r,
-      fileUploadRef: v,
-      wysiwygRef: p,
-      // computed
-      setColor: B,
-      // methods
-      mdAndLarger: U,
-      setLink: j,
-      selectColor: L,
-      showColors: F,
-      onClickAction: R,
-      onClickOutColors: g,
-      attachFiles: O,
-      appendEmoji: P,
-      onSelectEmoji: A,
-      onSelectFiles: H
+      _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 {
-  ve as default
+  ht as default
 };

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

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