@quidgest/ui 0.11.0 → 0.12.0

package/esm/components/QOverlay/QOverlay.vue.js

@@ -0,0 +1,250 @@
+import { defineComponent as G, mergeModels as $, useModel as H, computed as c, reactive as M, watch as h, ref as R, nextTick as u, onMounted as J, onBeforeUnmount as X, openBlock as w, createBlock as Y, Teleport as Z, createElementBlock as L, normalizeClass as V, createCommentVNode as g, createVNode as ee, Transition as te, withCtx as oe, normalizeStyle as A, createElementVNode as ne, mergeProps as re, withKeys as ie, renderSlot as ae } from "vue";
+import { getSideFromPlacement as le, computePosition as se } from "../../composables/overlay.js";
+import { getElement as de } from "../../utils/getElement.js";
+const ce = ["role"], me = /* @__PURE__ */ G({
+  inheritAttrs: !1,
+  __name: "QOverlay",
+  props: /* @__PURE__ */ $({
+    anchor: { default: void 0 },
+    appearance: { default: "regular" },
+    arrow: { type: Boolean },
+    attach: { default: "body" },
+    inline: { type: Boolean },
+    backdropBlur: { type: Boolean },
+    delay: { default: 500 },
+    nonModal: { type: Boolean },
+    scrollLock: { type: Boolean },
+    offset: { default: 8 },
+    persistent: { type: Boolean },
+    placement: { default: "right" },
+    spy: { type: Boolean },
+    transition: { default: "fade" },
+    trigger: { default: "click" },
+    width: { default: "auto" },
+    class: { default: void 0 }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ $(["enter", "leave"], ["update:modelValue"]),
+  setup(E, { emit: U }) {
+    const t = E, b = U, a = H(E, "modelValue"), z = c(() => [
+      "q-overlay",
+      `q-overlay--${le(o.placement)}`,
+      {
+        "q-overlay--independent": t.anchor === void 0,
+        "q-overlay--inverted": t.appearance === "inverted"
+      },
+      t.class
+    ]), B = c(() => (a.value || o.animating) && !t.nonModal), o = M({
+      animating: !1,
+      top: 0,
+      left: 0,
+      width: 0,
+      placement: t.placement
+    }), r = M({
+      top: void 0,
+      left: void 0,
+      hidden: !0
+    }), I = c(() => o.top !== 0 && o.left !== 0);
+    h(a, () => o.animating = !0);
+    const N = c(() => {
+      if (t.anchor === void 0)
+        return;
+      const e = s(), y = t.width === "anchor", n = y ? e == null ? void 0 : e.getBoundingClientRect().width : void 0;
+      return {
+        top: `${o.top}px`,
+        left: `${o.left}px`,
+        width: n !== void 0 ? `${n}px` : void 0
+      };
+    }), O = c(() => {
+      if (t.arrow)
+        return {
+          top: r.top !== void 0 ? `${r.top}px` : void 0,
+          left: r.left !== void 0 ? `${r.left}px` : void 0,
+          opacity: r.hidden ? 0 : 1
+        };
+    }), v = R(null), f = R(null);
+    function i() {
+      const e = s();
+      if (!e || !f.value)
+        return;
+      const y = {
+        placement: t.placement,
+        width: t.width,
+        offset: t.offset,
+        arrow: t.arrow
+      }, n = se(
+        e,
+        f.value,
+        (v == null ? void 0 : v.value) ?? void 0,
+        y
+      );
+      o.left = n.overlayCoords.x, o.top = n.overlayCoords.y, o.placement = n.placement, r.hidden = n.arrowCoords === void 0, n.arrowCoords && (r.top = n.arrowCoords.y, r.left = n.arrowCoords.x);
+    }
+    h(
+      () => t.placement,
+      () => u(i)
+    );
+    let m;
+    function p() {
+      C(0);
+    }
+    function _() {
+      C(t.delay);
+    }
+    function C(e) {
+      m || (m = window.setTimeout(() => {
+        a.value = !0;
+      }, e));
+    }
+    function l() {
+      if (clearTimeout(m), m = void 0, a.value = !1, t.anchor && t.trigger === "click") {
+        const e = s();
+        e == null || e.focus();
+      }
+    }
+    h(I, () => u(P));
+    function P() {
+      b("enter");
+    }
+    let T;
+    function D() {
+      window.clearTimeout(T), T = window.setTimeout(() => o.animating = !1, 200), b("leave");
+    }
+    function s() {
+      return t.anchor ? de(t.anchor) : null;
+    }
+    let d;
+    function K() {
+      const e = s();
+      if (e)
+        switch (d = new MutationObserver(i), d.observe(e, {
+          attributes: !1,
+          childList: !0,
+          characterData: !0,
+          subtree: !0
+        }), t.trigger) {
+          case "click":
+            e.addEventListener("click", p);
+            break;
+          case "hover":
+            e.addEventListener("mouseenter", _), e.addEventListener("mouseleave", l), e.addEventListener("focusin", p), e.addEventListener("focusout", l);
+            break;
+        }
+    }
+    function F() {
+      const e = s();
+      if (e)
+        switch (d == null || d.disconnect(), t.trigger) {
+          case "click":
+            e.removeEventListener("click", p);
+            break;
+          case "hover":
+            e.removeEventListener("mouseenter", _), e.removeEventListener("mouseleave", l), e.removeEventListener("focusin", p), e.removeEventListener("focusout", l);
+            break;
+        }
+    }
+    function Q() {
+      window.addEventListener("resize", i), t.scrollLock || window.addEventListener("scroll", i);
+    }
+    function W() {
+      window.removeEventListener("resize", i), t.scrollLock || window.removeEventListener("scroll", i);
+    }
+    let k;
+    function x() {
+      s() ? (i(), k = window.setTimeout(x, 100)) : l();
+    }
+    function j() {
+      Q(), t.spy ? x() : i(), t.scrollLock && document.body.classList.add("no-scroll"), (t.anchor === void 0 || t.trigger === "click") && u(() => {
+        var e;
+        return (e = f.value) == null ? void 0 : e.focus();
+      });
+    }
+    function q() {
+      W(), t.spy && (clearTimeout(k), k = void 0), t.scrollLock && document.body.classList.remove("no-scroll"), o.top = 0, o.left = 0;
+    }
+    function S() {
+      t.persistent || l();
+    }
+    return J(() => {
+      u(K);
+    }), X(() => {
+      F(), q();
+    }), h(
+      a,
+      (e) => {
+        u(() => e ? j() : q());
+      },
+      { immediate: !0 }
+    ), (e, y) => (w(), Y(Z, {
+      disabled: !a.value && !o.animating || t.inline,
+      to: t.attach
+    }, [
+      B.value ? (w(), L(
+        "div",
+        {
+          key: 0,
+          class: V([
+            "q-overlay__underlay",
+            { "q-overlay__underlay--blur": t.backdropBlur }
+          ])
+        },
+        null,
+        2
+        /* CLASS */
+      )) : g("v-if", !0),
+      ee(te, {
+        name: t.transition,
+        appear: "",
+        onLeave: D
+      }, {
+        default: oe(() => [
+          a.value ? (w(), L(
+            "div",
+            {
+              key: 0,
+              class: V(z.value),
+              style: A(N.value)
+            },
+            [
+              ne("div", re({
+                class: "q-overlay__content",
+                ref_key: "overlayRef",
+                ref: f,
+                tabindex: "-1",
+                role: B.value ? "dialog" : void 0
+              }, e.$attrs, {
+                onKeydown: ie(S, ["escape"]),
+                onBlur: S
+              }), [
+                t.arrow ? (w(), L(
+                  "div",
+                  {
+                    key: 0,
+                    ref_key: "arrowRef",
+                    ref: v,
+                    role: "presentation",
+                    class: "q-overlay__arrow",
+                    style: A(O.value)
+                  },
+                  null,
+                  4
+                  /* STYLE */
+                )) : g("v-if", !0),
+                ae(e.$slots, "default")
+              ], 16, ce)
+            ],
+            6
+            /* CLASS, STYLE */
+          )) : g("v-if", !0)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["name"])
+    ], 8, ["disabled", "to"]));
+  }
+});
+export {
+  me as default
+};

package/esm/components/QOverlay/QOverlay.vue2.js

@@ -0,0 +1,4 @@
+import f from "./QOverlay.vue.js";
+export {
+  f as default
+};

package/esm/components/QOverlay/index.d.ts

@@ -0,0 +1,4 @@
+import { default as QOverlay } from "./QOverlay";
+
+export { QOverlay };
+//# sourceMappingURL=index.d.ts.map

package/esm/components/QOverlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QOverlay/index.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AAQrC,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/esm/components/QOverlay/index.js

@@ -0,0 +1,6 @@
+import r from "./QOverlay.vue.js";
+import { setupPropsProxy as o } from "../../utils/setupPropsProxy.js";
+o(r);
+export {
+  r as QOverlay
+};

package/esm/components/QPopover/QPopover.d.ts

@@ -0,0 +1,132 @@
+import { Selector } from '../../utils/getElement';
+import { Placement } from '../../composables/overlay';
+
+export type QPopoverProps = {
+    /**
+     * The DOM element the popover should be anchored to.
+     */
+    anchor: Selector;
+    /**
+     * Whether the popover has an arrow pointing to the target.
+     */
+    arrow?: boolean;
+    /**
+     * The DOM element the popover should be teleported to.
+     * Defaults to the body of the document.
+     */
+    attach?: string;
+    /**
+     * Whether to disable teleport.
+     * If enabled, the prop `attach` is ignored.
+     */
+    inline?: boolean;
+    /**
+     * Whether the popover is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the popover's content is treated as HTML.
+     */
+    html?: boolean;
+    /**
+     * The placement of the popover.
+     */
+    placement?: Placement;
+    /**
+     * The text of the popover.
+     */
+    text: string;
+    /**
+     * The title of the popover.
+     */
+    title?: string;
+};
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
+    modelValue: import('vue').PropType<boolean>;
+    anchor: {
+        type: import('vue').PropType<Selector>;
+        required: true;
+    };
+    html: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    title: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    text: {
+        type: import('vue').PropType<string>;
+        required: true;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+    };
+    placement: {
+        type: import('vue').PropType<Placement>;
+        default: string;
+    };
+    arrow: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    attach: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    inline: {
+        type: import('vue').PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<boolean>;
+    anchor: {
+        type: import('vue').PropType<Selector>;
+        required: true;
+    };
+    html: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    title: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    text: {
+        type: import('vue').PropType<string>;
+        required: true;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+    };
+    placement: {
+        type: import('vue').PropType<Placement>;
+        default: string;
+    };
+    arrow: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    attach: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    inline: {
+        type: import('vue').PropType<boolean>;
+    };
+}>>, {
+    html: boolean;
+    title: string;
+    placement: Placement;
+    arrow: boolean;
+    attach: string;
+}, {}>, {
+    header?(_: {}): any;
+    body?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=QPopover.vue.d.ts.map

package/esm/components/QPopover/QPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPopover/QPopover"],"names":[],"mappings":"AA4BA;AAMC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAElD,MAAM,MAAM,aAAa,GAAG;IAC3B;;OAEG;IACH,MAAM,EAAE,QAAQ,CAAA;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IAErB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgKF,wBAAwG;AAUxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/esm/components/QPopover/QPopover.vue.js

@@ -0,0 +1,71 @@
+import { defineComponent as i, mergeModels as c, useModel as p, openBlock as t, createBlock as m, unref as u, withCtx as h, createElementBlock as a, createTextVNode as f, toDisplayString as r, renderSlot as n, createCommentVNode as s } from "vue";
+import "../QOverlay/index.js";
+import _ from "../QOverlay/QOverlay.vue.js";
+const y = {
+  key: 0,
+  class: "q-popover__header"
+}, v = {
+  key: 1,
+  class: "q-popover__body"
+}, b = ["innerHTML"], k = { key: 1 }, V = /* @__PURE__ */ i({
+  inheritAttrs: !1,
+  __name: "QPopover",
+  props: /* @__PURE__ */ c({
+    anchor: {},
+    arrow: { type: Boolean, default: !0 },
+    attach: { default: "body" },
+    inline: { type: Boolean },
+    disabled: { type: Boolean },
+    html: { type: Boolean, default: !0 },
+    placement: { default: "right" },
+    text: {},
+    title: { default: "" }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(l) {
+    const e = l, d = p(l, "modelValue");
+    return (o, B) => (t(), m(u(_), {
+      "model-value": d.value,
+      class: "q-popover",
+      trigger: "click",
+      anchor: e.anchor,
+      arrow: e.arrow,
+      attach: e.attach,
+      inline: e.inline,
+      disabled: e.disabled,
+      placement: e.placement
+    }, {
+      default: h(() => [
+        e.title || o.$slots.header ? (t(), a("h3", y, [
+          f(
+            r(e.title) + " ",
+            1
+            /* TEXT */
+          ),
+          n(o.$slots, "header")
+        ])) : s("v-if", !0),
+        e.text || o.$slots.body ? (t(), a("div", v, [
+          e.html ? (t(), a("span", {
+            key: 0,
+            innerHTML: e.text
+          }, null, 8, b)) : (t(), a(
+            "span",
+            k,
+            r(e.text),
+            1
+            /* TEXT */
+          )),
+          n(o.$slots, "body")
+        ])) : s("v-if", !0)
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["model-value", "anchor", "arrow", "attach", "inline", "disabled", "placement"]));
+  }
+});
+export {
+  V as default
+};

package/esm/components/QPopover/QPopover.vue2.js

@@ -0,0 +1,4 @@
+import f from "./QPopover.vue.js";
+export {
+  f as default
+};

package/esm/components/QPopover/index.d.ts

@@ -0,0 +1,4 @@
+import { default as QPopover } from "./QPopover";
+
+export { QPopover };
+//# sourceMappingURL=index.d.ts.map

package/esm/components/QPopover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QPopover/index.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AAQrC,OAAO,EAAE,QAAQ,EAAE,CAAA"}