@quoreadmin/ui 1.9.3 → 1.10.1

package/dist/index138.js

@@ -0,0 +1,257 @@
+import { defineComponent as M, ref as h, computed as H, onMounted as A, onUnmounted as Q, watch as F, nextTick as O } from "vue";
+import { onClickOutside as W } from "./index173.js";
+import { useThrottleFn as k } from "./index184.js";
+const G = M({
+  name: "QPopover",
+  props: {
+    /** Aligns the popover accordingly with the trigger.
+     * i.e. bottom, center, left, middle, right, top.
+     * Right, left or middle align goes with bottom or top position
+     * Top, bottom or center align goes with right or left position */
+    align: {
+      type: String,
+      default: "left"
+    },
+    /** Specifies whether to have a caret pointer or not. */
+    hasCaret: {
+      type: Boolean,
+      default: !0
+    },
+    /**  Toggles the content from the parent component. i.e. false, true. */
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    /** Positions the popover to the specified side of the trigger.
+     * i.e. bottom, left, right, top.
+     * Bottom or top position goes with right, left or middle align
+     * Right or left position goes with top, bottom or center align */
+    position: {
+      type: String,
+      default: "bottom"
+    },
+    /** Should the popover be repositioned and realigned automatically if it is outside viewport.
+     *  Moving element position from left to right, and top to bottom
+     * and alignment from right to left or top to bottom.
+    */
+    reposition: {
+      type: Boolean,
+      default: !0
+    },
+    /** Specifies the size of the popover. sm, md, lg, or filter-sm, filter-md, filter-lg for filter-style popovers. */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** Set if the popover is teleported to the teleportTo element (escapes overflow clipping) */
+    teleport: {
+      type: Boolean,
+      default: !1
+    },
+    /** Target element for teleport */
+    teleportTo: {
+      type: String,
+      default: "body"
+    },
+    /** Whether the teleported popover should follow the trigger on scroll.
+     * When true (default), popover repositions as user scrolls.
+     * When false, popover stays fixed at its initial opened position. */
+    followScroll: {
+      type: Boolean,
+      default: !0
+    },
+    /** Trigger popover on click, hover or both */
+    trigger: {
+      type: String,
+      default: "click"
+    },
+    /** Whether to close the popover when the trigger scrolls out of its scrollable parent.
+     * Useful for popovers inside scrollable containers to prevent orphaned popovers. */
+    closeOnScrollOutOfView: {
+      type: Boolean,
+      default: !1
+    },
+    /** Whether to scroll the page to bring the popover into view when it opens or content changes.
+     * Uses smooth scrolling and adds padding to ensure the popover isn't at the edge of the viewport. */
+    scrollIntoView: {
+      type: Boolean,
+      default: !1
+    },
+    /** Padding (in pixels) from viewport edge when scrolling popover into view. */
+    scrollIntoViewPadding: {
+      type: Number,
+      default: 20
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: a }) {
+    const f = h(!1), d = h(""), u = h(null), g = h(null), V = h({
+      top: "0",
+      left: "0",
+      transform: "none"
+    }), p = H(() => f.value === !0 && o.reposition === !0 ? S(o.align) : o.align), y = H(() => f.value === !0 && o.reposition === !0 ? R(o.position) : o.position), S = (t) => {
+      if (!u.value) return t;
+      const e = o.teleport ? document.querySelector(".q-popover.teleported") : u.value.children[1];
+      if (!e || w(e)) return t;
+      const n = u.value.children[0].getBoundingClientRect(), r = e.getBoundingClientRect();
+      if (t === "left" || t === "right" || t === "center") {
+        const l = n.left;
+        return window.innerWidth - l < r.width ? "right" : "left";
+      } else {
+        const l = n.top;
+        return window.innerHeight - l < r.height ? "bottom" : "top";
+      }
+    }, R = (t) => {
+      if (!u.value) return t;
+      const e = o.teleport ? document.querySelector(".q-popover.teleported") : u.value.children[1];
+      if (!e || w(e)) return t;
+      const n = u.value.children[0].getBoundingClientRect(), r = e.getBoundingClientRect();
+      if (t === "top" || t === "bottom") {
+        const l = n.top;
+        return window.innerHeight - l < r.height ? "top" : "bottom";
+      } else {
+        const l = n.left;
+        return window.innerWidth - l < r.width ? "left" : "right";
+      }
+    }, w = (t) => {
+      if (!t) return !1;
+      const e = t.getBoundingClientRect();
+      return e ? e.top >= 0 && e.left >= 0 && e.bottom <= (window.innerHeight || document.documentElement.clientHeight) && e.right <= (window.innerWidth || document.documentElement.clientWidth) : !1;
+    }, q = () => {
+      if (!u.value) return !0;
+      const t = u.value.children[0];
+      if (!t) return !0;
+      const e = t.getBoundingClientRect();
+      let n = t.parentElement;
+      for (; n; ) {
+        const r = getComputedStyle(n), l = r.overflowY, i = r.overflowX;
+        if (l === "auto" || l === "scroll" || (i === "auto" || i === "scroll")) {
+          const v = n.getBoundingClientRect();
+          if (!(e.bottom > v.top && e.top < v.bottom && e.right > v.left && e.left < v.right))
+            return !1;
+        }
+        n = n.parentElement;
+      }
+      return !0;
+    }, B = () => {
+      if (!o.teleport || !o.scrollIntoView || !o.modelValue) return;
+      const t = document.querySelector(".q-popover.teleported");
+      if (!t) return;
+      const e = t.getBoundingClientRect(), n = o.scrollIntoViewPadding, r = window.innerHeight, l = window.innerWidth;
+      let i = 0, c = 0;
+      e.bottom + n > r ? c = e.bottom + n - r : e.top - n < 0 && (c = e.top - n), e.right + n > l ? i = e.right + n - l : e.left - n < 0 && (i = e.left - n), (i !== 0 || c !== 0) && window.scrollBy({
+        top: c,
+        left: i,
+        behavior: "smooth"
+      });
+    }, z = () => {
+      if (!o.teleport || !o.scrollIntoView) return;
+      b();
+      const t = document.querySelector(".q-popover.teleported");
+      t && (g.value = new ResizeObserver(() => {
+        setTimeout(B, 50);
+      }), g.value.observe(t));
+    }, b = () => {
+      g.value && (g.value.disconnect(), g.value = null);
+    }, I = () => {
+      (o.trigger === "click" || o.trigger === "both") && a("update:modelValue", !o.modelValue);
+    }, P = () => {
+      o.trigger !== "click" && a("update:modelValue", !1);
+    }, T = () => {
+      o.trigger !== "click" && a("update:modelValue", !0);
+    }, x = () => {
+      const t = u.value?.children[0];
+      if (t) {
+        const e = t.clientWidth, n = t.clientHeight;
+        switch (p.value) {
+          case "left":
+            d.value = `margin-left: ${e / 2 - 10}px;`;
+            break;
+          case "right":
+            d.value = `margin-right: ${e / 2 - 10}px;`;
+            break;
+          case "top":
+            d.value = `margin-top: ${n / 2 - 10}px;`;
+            break;
+          case "bottom":
+            d.value = `margin-bottom: ${n / 2 - 10}px;`;
+            break;
+        }
+      }
+    }, m = () => {
+      if (!u.value || !o.teleport) return;
+      const t = u.value.children[0];
+      if (!t) return;
+      const e = t.getBoundingClientRect(), n = 10, r = y.value, l = p.value;
+      let i = 0, c = 0, s = "none";
+      r === "bottom" ? (i = e.bottom + n, l === "left" ? (c = e.left, s = "none") : l === "right" ? (c = e.right, s = "translateX(-100%)") : l === "center" && (c = e.left + e.width / 2, s = "translateX(-50%)")) : r === "top" ? (i = e.top - n, s = "translateY(-100%)", l === "left" ? c = e.left : l === "right" ? (c = e.right, s = "translate(-100%, -100%)") : l === "center" && (c = e.left + e.width / 2, s = "translate(-50%, -100%)")) : r === "left" ? (c = e.left - n, s = "translateX(-100%)", l === "top" ? i = e.top : l === "bottom" ? (i = e.bottom, s = "translate(-100%, -100%)") : l === "middle" && (i = e.top + e.height / 2, s = "translate(-100%, -50%)")) : r === "right" && (c = e.right + n, l === "top" ? (i = e.top, s = "none") : l === "bottom" ? (i = e.bottom, s = "translateY(-100%)") : l === "middle" && (i = e.top + e.height / 2, s = "translateY(-50%)")), V.value = {
+        top: `${i}px`,
+        left: `${c}px`,
+        transform: s
+      };
+    }, L = () => {
+      o.teleport && o.modelValue && m();
+    }, X = () => {
+      if (o.teleport && o.modelValue) {
+        if (o.closeOnScrollOutOfView && !q()) {
+          a("update:modelValue", !1);
+          return;
+        }
+        o.followScroll && m();
+      }
+    }, C = k(L, 16, !0), E = k(X, 16, !0);
+    W(u, (t) => {
+      if (o.teleport) {
+        const e = document.querySelector(".q-popover.teleported");
+        if (e && e.contains(t.target))
+          return;
+      }
+      o.modelValue && a("update:modelValue", !1);
+    });
+    function Y() {
+      f.value = !1, b();
+    }
+    function $() {
+      f.value = !0, o.teleport ? O(() => {
+        m(), o.scrollIntoView && setTimeout(() => {
+          z(), B();
+        }, 100);
+      }) : !w(u.value?.children[1]) && o.reposition === !0 && x();
+    }
+    return A(() => {
+      o.teleport && (window.addEventListener("resize", C), window.addEventListener("scroll", E, !0));
+    }), Q(() => {
+      o.teleport && (window.removeEventListener("resize", C), window.removeEventListener("scroll", E, !0)), b();
+    }), F(
+      () => o.modelValue,
+      (t) => {
+        o.teleport && t && O(() => {
+          m();
+        });
+      }
+    ), {
+      // Refs
+      entered: f,
+      offsetStyle: d,
+      popover: u,
+      teleportedStyle: V,
+      // Computed
+      alignment: p,
+      positioning: y,
+      // Methods
+      getAlignment: S,
+      getPositioning: R,
+      isElementInView: w,
+      onAfterLeave: Y,
+      onClick: I,
+      onClickOutside: W,
+      onEnter: $,
+      onMouseLeave: P,
+      onMouseOver: T,
+      updateTeleportedPosition: m
+    };
+  }
+});
+export {
+  G as default
+};

package/dist/index14.js

@@ -1,6 +1,6 @@
-import i from "./index86.js";
+import i from "./index87.js";
 import { resolveComponent as c, openBlock as p, createElementBlock as m, createVNode as t, mergeProps as r, toHandlerKey as s, createElementVNode as u, toDisplayString as a } from "vue";
-import d from "./index64.js";
+import d from "./index65.js";
 const f = { class: "counter flex items-center" }, k = { class: "grow text-center" };
 function _(e, o, $, v, y, g) {
   const n = c("q-icon");

package/dist/index141.js

@@ -1,65 +1,56 @@
-import { defineComponent as y, computed as g } from "vue";
-const C = y({
-  name: "QRadio",
+import { defineComponent as n, computed as r } from "vue";
+const o = n({
+  name: "QProgressBar",
   props: {
     id: {
       type: String,
-      default: "radio"
+      default: "q-progress-bar"
     },
-    name: {
-      type: String,
-      default: ""
+    bgClass: {
+      type: String
     },
-    options: {
-      type: Array,
-      default: () => []
-    },
-    modelValue: {
-      type: [String, Number, Object, Array],
+    customClass: {
+      type: String,
       default: ""
     },
-    disabled: {
+    hasContainerBackground: {
       type: Boolean,
       default: !1
     },
-    inline: {
-      type: Boolean,
-      default: !1
+    heightClass: {
+      type: String,
+      default: "h-[0.875rem]"
     },
-    labelClasses: {
-      type: [String, Array, Object, Function],
+    label: {
+      type: String,
+      default: ""
+    },
+    labelClass: {
+      type: [String, Array, Object],
       default: ""
+    },
+    // Value between 0 and 100
+    percent: {
+      type: Number,
+      required: !0
+    },
+    showLabel: {
+      type: Boolean,
+      default: !0
     }
   },
-  emits: ["update:model-value", "change"],
-  setup(t, { emit: n }) {
-    const r = g(() => t.modelValue), f = (e) => {
-      const l = e.target;
-      if (l) {
-        const d = l.value, i = t.options.find(
-          (a) => String(a.value) === d
-        ), u = i ? i.value : d;
-        if (o(u)) {
-          let a;
-          Array.isArray(t.modelValue) ? a = [] : a = "", n("update:model-value", a), n("change", null);
-          return;
-        }
-        const c = t.options.find(
-          (a) => a.value === u
-        );
-        let s;
-        Array.isArray(t.modelValue) ? s = c ? [c] : [] : s = u, n("update:model-value", s), n("change", u);
-      }
-    }, o = (e) => Array.isArray(r.value) ? r.value.some((l) => typeof l == "object" && l !== null ? l.value === e : l === e) : r.value === e;
+  setup(e) {
+    const a = r(() => e.bgClass || "bg-green-20"), s = r(() => {
+      const t = ["q-progress-bar relative flex items-center", e.customClass, e.heightClass];
+      return e.hasContainerBackground ? [...t, "bg-gray-00"] : t;
+    });
     return {
-      selectedValue: r,
-      handleClick: f,
-      isSelected: o,
-      getOptionText: (e) => e.label || e.name || "",
-      getLabelClasses: (e, l) => typeof t.labelClasses == "function" ? t.labelClasses(e, l) : t.labelClasses
+      // Computed
+      barColor: a,
+      containerClasses: s
     };
   }
 });
 export {
-  C as default
+  o as default
 };