@quidgest/ui 0.17.2 → 0.17.3

package/esm/components/QCarousel/QCarousel.vue.js

@@ -1,355 +1,248 @@
-import { defineComponent as se, mergeModels as z, useModel as ie, ref as E, computed as N, watch as B, onMounted as re, onUnmounted as ce, createElementBlock as a, openBlock as n, normalizeClass as L, createCommentVNode as s, createVNode as d, createElementVNode as b, unref as f, Fragment as y, normalizeStyle as $, renderList as Q, withModifiers as ue, renderSlot as de, toDisplayString as T, withCtx as F, mergeProps as U, nextTick as fe } from "vue";
-import { DEFAULT_TEXTS as he, DEFAULT_ICONS as ve } from "./constants.js";
-import { QButton as K } from "../QButton/index.js";
-import { QIcon as O } from "../QIcon/index.js";
-import { QSkeletonLoader as g } from "../QSkeletonLoader/index.js";
-const _e = ["id"], me = {
-  key: 0,
-  class: "q-carousel__skeleton"
-}, ye = { class: "q-carousel__skeleton-caption" }, ge = {
-  key: 0,
-  class: "q-carousel__skeleton-controls"
-}, ke = ["onClick"], we = ["src", "alt"], Ce = {
-  key: 1,
-  class: "q-carousel__empty-container"
-}, qe = {
-  key: 2,
-  class: "q-carousel__caption-global"
-}, pe = {
-  key: 0,
-  class: "q-carousel__title"
-}, be = {
-  key: 1,
-  class: "q-carousel__subtitle"
-}, Te = {
-  key: 3,
-  class: "q-carousel__indicators"
-}, Se = ["aria-label", "aria-current", "onClick"], xe = { class: "q-carousel__sr-only" }, Ie = { class: "q-carousel__sr-only" }, Be = /* @__PURE__ */ se({
-  __name: "QCarousel",
-  props: /* @__PURE__ */ z({
-    id: {},
-    class: {},
-    slides: { default: () => [] },
-    showIndicators: { type: Boolean },
-    showControls: { type: Boolean },
-    autoCycleInterval: { default: 5e3 },
-    autoCyclePause: { default: "hover" },
-    ride: { default: "carousel" },
-    swipeThreshold: { default: 50 },
-    wrap: { type: Boolean, default: !0 },
-    animationDuration: { default: 500 },
-    loading: { type: Boolean },
-    icons: { default: () => ve },
-    texts: { default: () => he }
-  }, {
-    currentSlide: { default: 0 },
-    currentSlideModifiers: {}
-  }),
-  emits: /* @__PURE__ */ z(["slide:before-change", "slide:after-change", "slide:click"], ["update:currentSlide"]),
-  setup(o, { emit: V }) {
-    const t = o, k = V, S = ie(o, "currentSlide"), l = E(0);
-    let h = !1, x = !1, I = 0, D = 0;
-    const P = E(0), M = E(0);
-    let w, C;
-    const H = N(() => ({
-      transform: `translateX(-${l.value * 100}%)`,
-      transition: h ? `transform ${t.animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)` : "none"
-    })), R = N(() => ({
-      "--q-carousel-progress-duration": `${t.autoCycleInterval}ms`,
-      "--q-carousel-progress-width": `${P.value}%`
-    }));
-    function r(e) {
-      if (e < 0 || e >= t.slides.length || e === l.value || h) return;
-      const c = l.value, i = t.slides[c], m = t.slides[e];
-      k("slide:before-change", m.id, i == null ? void 0 : i.id), l.value = e, S.value = e, t.animationDuration > 0 ? (h = !0, setTimeout(() => {
-        h = !1, k("slide:after-change", m.id, i == null ? void 0 : i.id);
-      }, t.animationDuration)) : fe(() => {
-        k("slide:after-change", m.id, i == null ? void 0 : i.id);
-      });
-    }
-    function q() {
-      const e = l.value + 1;
-      e >= t.slides.length ? t.wrap && r(0) : r(e);
-    }
-    function A() {
-      const e = l.value - 1;
-      e < 0 ? t.wrap && r(t.slides.length - 1) : r(e);
-    }
-    function j(e) {
-      const c = window.getSelection();
-      if (c != null && c.toString().length) return;
-      const i = t.slides[e];
-      k("slide:click", i.id);
-    }
-    function G(e) {
-      const c = {};
-      return e != null && e.colorPlaceholder && (c["background-color"] = e.colorPlaceholder), c;
-    }
-    function J() {
-      t.autoCycleInterval && (C = window.setInterval(() => {
-        P.value = (Date.now() - M.value) / t.autoCycleInterval * 100;
-      }, 50));
-    }
-    function p() {
-      !t.autoCycleInterval || t.slides.length <= 1 || (_(), t.ride === "carousel" && !x && (M.value = Date.now(), J(), w = window.setTimeout(q, t.autoCycleInterval)));
-    }
-    function _() {
-      w && window.clearTimeout(w), C && window.clearInterval(C), w = void 0, C = void 0, M.value = 0, P.value = 0;
-    }
-    function W() {
-      _(), p();
-    }
-    function Y() {
-      t.autoCyclePause === "hover" && (x = !0, _());
-    }
-    function Z() {
-      t.autoCyclePause === "hover" && (x = !1, p());
-    }
-    function ee(e) {
-      if (!h)
-        switch (e.key) {
-          case "ArrowLeft":
-            e.preventDefault(), A();
-            break;
-          case "ArrowRight":
-            e.preventDefault(), q();
-            break;
-          case "Home":
-            e.preventDefault(), r(0);
-            break;
-          case "End":
-            e.preventDefault(), r(t.slides.length - 1);
-            break;
-        }
-    }
-    function te(e) {
-      h || (I = e.touches[0].clientX, _());
-    }
-    function oe(e) {
-      h || (D = e.touches[0].clientX);
-    }
-    function le() {
-      if (h) return;
-      const e = I - D;
-      Math.abs(e) > t.swipeThreshold && (e > 0 ? q() : A()), I = 0, D = 0, p();
-    }
-    function ae(e) {
-      return t.texts.goToSlide.replace("{0}", `${e + 1}`);
-    }
-    function ne(e) {
-      if (e.length === 0) {
-        l.value = 0, S.value = 0, _();
-        return;
-      }
-      l.value >= e.length && r(0);
-    }
-    return B(() => t.slides, ne, { immediate: !0, deep: !0 }), B(l, W), B(S, (e) => {
-      e !== l.value && r(e);
-    }), re(p), ce(_), (e, c) => {
-      var i, m, X;
-      return n(), a("div", {
-        id: t.id,
-        class: L(["q-carousel", t.class]),
-        tabindex: "0",
-        onMouseenter: Y,
-        onMouseleave: Z,
-        onKeydown: ee
-      }, [
-        s(" Skeleton Loader "),
-        o.loading ? (n(), a("div", me, [
-          s(" Image placeholder "),
-          d(f(g), {
-            width: "100%",
-            height: "100%"
-          }),
-          s(" Overlay skeletons for text/captions "),
-          b("div", ye, [
-            d(f(g), {
-              type: "text",
-              width: "40%",
-              height: "24px",
-              class: "q-carousel__skeleton-title"
-            }),
-            d(f(g), {
-              type: "text",
-              width: "60%",
-              height: "16px",
-              class: "q-carousel__skeleton-subtitle"
-            })
-          ]),
-          s(" Controls "),
-          t.showControls ? (n(), a("div", ge, [
-            d(f(g), {
-              type: "icon",
-              width: "40px",
-              height: "40px",
-              class: "q-carousel__skeleton-control"
-            }),
-            d(f(g), {
-              type: "icon",
-              width: "40px",
-              height: "40px",
-              class: "q-carousel__skeleton-control"
-            })
-          ])) : s("v-if", !0)
-        ])) : (n(), a(
-          y,
-          { key: 1 },
-          [
-            (i = o.slides) != null && i.length ? (n(), a(
-              y,
-              { key: 0 },
-              [
-                s(" Carousel Content "),
-                b(
-                  "div",
-                  {
-                    class: "q-carousel__track",
-                    style: $(H.value),
-                    onTouchstart: te,
-                    onTouchmove: oe,
-                    onTouchend: le
-                  },
-                  [
-                    (n(!0), a(
-                      y,
-                      null,
-                      Q(o.slides, (v, u) => (n(), a("div", {
-                        key: v.id,
-                        class: L([
-                          "q-carousel__slide",
-                          { "q-carousel__slide--active": u === l.value }
-                        ]),
-                        style: $(G(v)),
-                        onClick: ue(() => j(u), ["stop", "prevent"])
-                      }, [
-                        v.image ? (n(), a("img", {
-                          key: 0,
-                          src: v.image,
-                          alt: v.title || `Slide ${u + 1}`,
-                          class: "q-carousel__image",
-                          decoding: "async",
-                          loading: "lazy"
-                        }, null, 8, we)) : s("v-if", !0)
-                      ], 14, ke))),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
-                  ],
-                  36
-                  /* STYLE, NEED_HYDRATION */
-                )
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            )) : (n(), a("div", Ce, [
-              de(e.$slots, "empty")
-            ])),
-            s(" Captions (centered, above indicators) "),
-            o.slides[l.value] ? (n(), a("div", qe, [
-              (m = o.slides[l.value]) != null && m.title ? (n(), a(
-                "h2",
-                pe,
-                T(o.slides[l.value].title),
-                1
-                /* TEXT */
-              )) : s("v-if", !0),
-              (X = o.slides[l.value]) != null && X.subtitle ? (n(), a(
-                "p",
-                be,
-                T(o.slides[l.value].subtitle),
-                1
-                /* TEXT */
-              )) : s("v-if", !0)
-            ])) : s("v-if", !0),
-            s(" Indicators "),
-            o.showIndicators && o.slides.length > 1 ? (n(), a("ol", Te, [
-              (n(!0), a(
-                y,
-                null,
-                Q(o.slides, (v, u) => (n(), a("li", {
-                  key: v.id,
-                  class: L([
-                    "q-carousel__indicator",
-                    { "q-carousel__indicator--active": u === l.value }
-                  ]),
-                  "data-testid": "carousel-indicator",
-                  style: $(u === l.value ? R.value : {}),
-                  "aria-label": ae(u),
-                  "aria-current": u === l.value,
-                  onClick: () => r(u)
-                }, null, 14, Se))),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ])) : s("v-if", !0),
-            s(" Controls "),
-            o.showControls && o.slides.length > 1 ? (n(), a(
-              y,
-              { key: 4 },
-              [
-                d(f(K), {
-                  class: "q-carousel__control q-carousel__control--prev",
-                  "data-testid": "carousel-prev",
-                  "aria-label": o.texts.previousText,
-                  onClick: A
-                }, {
-                  default: F(() => [
-                    d(
-                      f(O),
-                      U({ class: "q-carousel__control-icon q-carousel__control-icon--prev" }, t.icons.back),
-                      null,
-                      16
-                      /* FULL_PROPS */
-                    ),
-                    b(
-                      "span",
-                      xe,
-                      T(o.texts.previousText),
-                      1
-                      /* TEXT */
-                    )
-                  ]),
-                  _: 1
-                  /* STABLE */
-                }, 8, ["aria-label"]),
-                d(f(K), {
-                  class: "q-carousel__control q-carousel__control--next",
-                  "data-testid": "carousel-next",
-                  "aria-label": o.texts.nextText,
-                  onClick: q
-                }, {
-                  default: F(() => [
-                    d(
-                      f(O),
-                      U({ class: "q-carousel__control-icon q-carousel__control-icon--next" }, t.icons.forward),
-                      null,
-                      16
-                      /* FULL_PROPS */
-                    ),
-                    b(
-                      "span",
-                      Ie,
-                      T(o.texts.nextText),
-                      1
-                      /* TEXT */
-                    )
-                  ]),
-                  _: 1
-                  /* STABLE */
-                }, 8, ["aria-label"])
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            )) : s("v-if", !0)
-          ],
-          64
-          /* STABLE_FRAGMENT */
-        ))
-      ], 42, _e);
-    };
-  }
+import { QButton as e } from "../QButton/index.js";
+import { QIcon as t } from "../QIcon/index.js";
+import { DEFAULT_ICONS as n, DEFAULT_TEXTS as r } from "./constants.js";
+import { QSkeletonLoader as i } from "../QSkeletonLoader/index.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onMounted as _, onUnmounted as v, openBlock as y, ref as b, renderList as x, renderSlot as S, toDisplayString as C, unref as w, useModel as T, watch as E, withCtx as D, withModifiers as O } from "vue";
+//#region src/components/QCarousel/QCarousel.vue?vue&type=script&setup=true&lang.ts
+var k = ["id"], A = {
+	key: 0,
+	class: "q-carousel__skeleton"
+}, j = { class: "q-carousel__skeleton-caption" }, M = {
+	key: 0,
+	class: "q-carousel__skeleton-controls"
+}, ee = ["onClick"], te = ["src", "alt"], ne = {
+	key: 1,
+	class: "q-carousel__empty-container"
+}, re = {
+	key: 2,
+	class: "q-carousel__caption-global"
+}, ie = {
+	key: 0,
+	class: "q-carousel__title"
+}, ae = {
+	key: 1,
+	class: "q-carousel__subtitle"
+}, oe = {
+	key: 3,
+	class: "q-carousel__indicators"
+}, N = [
+	"aria-label",
+	"aria-current",
+	"onClick"
+], P = { class: "q-carousel__sr-only" }, F = { class: "q-carousel__sr-only" }, I = /*@__PURE__*/ d({
+	__name: "QCarousel",
+	props: /*@__PURE__*/ f({
+		id: {},
+		class: {},
+		slides: { default: () => [] },
+		showIndicators: { type: Boolean },
+		showControls: { type: Boolean },
+		autoCycleInterval: { default: 5e3 },
+		autoCyclePause: { default: "hover" },
+		ride: { default: "carousel" },
+		swipeThreshold: { default: 50 },
+		wrap: {
+			type: Boolean,
+			default: !0
+		},
+		animationDuration: { default: 500 },
+		loading: { type: Boolean },
+		icons: { default: () => n },
+		texts: { default: () => r }
+	}, {
+		currentSlide: { default: 0 },
+		currentSlideModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f([
+		"slide:before-change",
+		"slide:after-change",
+		"slide:click"
+	], ["update:currentSlide"]),
+	setup(n, { emit: r }) {
+		let d = n, f = r, I = T(n, "currentSlide"), L = b(0), R = !1, z = !1, B = 0, V = 0, H = b(0), U = b(0), W, G, K = o(() => ({
+			transform: `translateX(-${L.value * 100}%)`,
+			transition: R ? `transform ${d.animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)` : "none"
+		})), q = o(() => ({
+			"--q-carousel-progress-duration": `${d.autoCycleInterval}ms`,
+			"--q-carousel-progress-width": `${H.value}%`
+		}));
+		function J(e) {
+			if (e < 0 || e >= d.slides.length || e === L.value || R) return;
+			let t = L.value, n = d.slides[t], r = d.slides[e];
+			f("slide:before-change", r.id, n?.id), L.value = e, I.value = e, d.animationDuration > 0 ? (R = !0, setTimeout(() => {
+				R = !1, f("slide:after-change", r.id, n?.id);
+			}, d.animationDuration)) : m(() => {
+				f("slide:after-change", r.id, n?.id);
+			});
+		}
+		function Y() {
+			let e = L.value + 1;
+			e >= d.slides.length ? d.wrap && J(0) : J(e);
+		}
+		function X() {
+			let e = L.value - 1;
+			e < 0 ? d.wrap && J(d.slides.length - 1) : J(e);
+		}
+		function se(e) {
+			if (window.getSelection()?.toString().length) return;
+			let t = d.slides[e];
+			f("slide:click", t.id);
+		}
+		function ce(e) {
+			let t = {};
+			return e?.colorPlaceholder && (t["background-color"] = e.colorPlaceholder), t;
+		}
+		function le() {
+			d.autoCycleInterval && (G = window.setInterval(() => {
+				H.value = (Date.now() - U.value) / d.autoCycleInterval * 100;
+			}, 50));
+		}
+		function Z() {
+			!d.autoCycleInterval || d.slides.length <= 1 || (Q(), d.ride === "carousel" && !z && (U.value = Date.now(), le(), W = window.setTimeout(Y, d.autoCycleInterval)));
+		}
+		function Q() {
+			W && window.clearTimeout(W), G && window.clearInterval(G), W = void 0, G = void 0, U.value = 0, H.value = 0;
+		}
+		function ue() {
+			Q(), Z();
+		}
+		function de() {
+			d.autoCyclePause === "hover" && (z = !0, Q());
+		}
+		function fe() {
+			d.autoCyclePause === "hover" && (z = !1, Z());
+		}
+		function pe(e) {
+			if (!R) switch (e.key) {
+				case "ArrowLeft":
+					e.preventDefault(), X();
+					break;
+				case "ArrowRight":
+					e.preventDefault(), Y();
+					break;
+				case "Home":
+					e.preventDefault(), J(0);
+					break;
+				case "End":
+					e.preventDefault(), J(d.slides.length - 1);
+					break;
+			}
+		}
+		function $(e) {
+			R || (B = e.touches[0].clientX, Q());
+		}
+		function me(e) {
+			R || (V = e.touches[0].clientX);
+		}
+		function he() {
+			if (R) return;
+			let e = B - V;
+			Math.abs(e) > d.swipeThreshold && (e > 0 ? Y() : X()), B = 0, V = 0, Z();
+		}
+		function ge(e) {
+			return d.texts.goToSlide.replace("{0}", `${e + 1}`);
+		}
+		function _e(e) {
+			if (e.length === 0) {
+				L.value = 0, I.value = 0, Q();
+				return;
+			}
+			L.value >= e.length && J(0);
+		}
+		return E(() => d.slides, _e, {
+			immediate: !0,
+			deep: !0
+		}), E(L, ue), E(I, (e) => {
+			e !== L.value && J(e);
+		}), _(Z), v(Q), (r, o) => (y(), c("div", {
+			id: d.id,
+			class: h(["q-carousel", d.class]),
+			tabindex: "0",
+			onMouseenter: de,
+			onMouseleave: fe,
+			onKeydown: pe
+		}, [s(" Skeleton Loader "), n.loading ? (y(), c("div", A, [
+			s(" Image placeholder "),
+			u(w(i), {
+				width: "100%",
+				height: "100%"
+			}),
+			s(" Overlay skeletons for text/captions "),
+			l("div", j, [u(w(i), {
+				type: "text",
+				width: "40%",
+				height: "24px",
+				class: "q-carousel__skeleton-title"
+			}), u(w(i), {
+				type: "text",
+				width: "60%",
+				height: "16px",
+				class: "q-carousel__skeleton-subtitle"
+			})]),
+			s(" Controls "),
+			d.showControls ? (y(), c("div", M, [u(w(i), {
+				type: "icon",
+				width: "40px",
+				height: "40px",
+				class: "q-carousel__skeleton-control"
+			}), u(w(i), {
+				type: "icon",
+				width: "40px",
+				height: "40px",
+				class: "q-carousel__skeleton-control"
+			})])) : s("v-if", !0)
+		])) : (y(), c(a, { key: 1 }, [
+			n.slides?.length ? (y(), c(a, { key: 0 }, [s(" Carousel Content "), l("div", {
+				class: "q-carousel__track",
+				style: g(K.value),
+				onTouchstart: $,
+				onTouchmove: me,
+				onTouchend: he
+			}, [(y(!0), c(a, null, x(n.slides, (e, t) => (y(), c("div", {
+				key: e.id,
+				class: h(["q-carousel__slide", { "q-carousel__slide--active": t === L.value }]),
+				style: g(ce(e)),
+				onClick: O(() => se(t), ["stop", "prevent"])
+			}, [e.image ? (y(), c("img", {
+				key: 0,
+				src: e.image,
+				alt: e.title || `Slide ${t + 1}`,
+				class: "q-carousel__image",
+				decoding: "async",
+				loading: "lazy"
+			}, null, 8, te)) : s("v-if", !0)], 14, ee))), 128))], 36)], 64)) : (y(), c("div", ne, [S(r.$slots, "empty")])),
+			s(" Captions (centered, above indicators) "),
+			n.slides[L.value] ? (y(), c("div", re, [n.slides[L.value]?.title ? (y(), c("h2", ie, C(n.slides[L.value].title), 1)) : s("v-if", !0), n.slides[L.value]?.subtitle ? (y(), c("p", ae, C(n.slides[L.value].subtitle), 1)) : s("v-if", !0)])) : s("v-if", !0),
+			s(" Indicators "),
+			n.showIndicators && n.slides.length > 1 ? (y(), c("ol", oe, [(y(!0), c(a, null, x(n.slides, (e, t) => (y(), c("li", {
+				key: e.id,
+				class: h(["q-carousel__indicator", { "q-carousel__indicator--active": t === L.value }]),
+				"data-testid": "carousel-indicator",
+				style: g(t === L.value ? q.value : {}),
+				"aria-label": ge(t),
+				"aria-current": t === L.value,
+				onClick: () => J(t)
+			}, null, 14, N))), 128))])) : s("v-if", !0),
+			s(" Controls "),
+			n.showControls && n.slides.length > 1 ? (y(), c(a, { key: 4 }, [u(w(e), {
+				class: "q-carousel__control q-carousel__control--prev",
+				"data-testid": "carousel-prev",
+				"aria-label": n.texts.previousText,
+				onClick: X
+			}, {
+				default: D(() => [u(w(t), p({ class: "q-carousel__control-icon q-carousel__control-icon--prev" }, d.icons.back), null, 16), l("span", P, C(n.texts.previousText), 1)]),
+				_: 1
+			}, 8, ["aria-label"]), u(w(e), {
+				class: "q-carousel__control q-carousel__control--next",
+				"data-testid": "carousel-next",
+				"aria-label": n.texts.nextText,
+				onClick: Y
+			}, {
+				default: D(() => [u(w(t), p({ class: "q-carousel__control-icon q-carousel__control-icon--next" }, d.icons.forward), null, 16), l("span", F, C(n.texts.nextText), 1)]),
+				_: 1
+			}, 8, ["aria-label"])], 64)) : s("v-if", !0)
+		], 64))], 42, k));
+	}
 });
-export {
-  Be as default
-};
+//#endregion
+export { I as default };

package/esm/components/QCarousel/QCarousel2.vue.js

@@ -0,0 +1,5 @@
+import e from "./QCarousel.vue.js";
+//#region src/components/QCarousel/QCarousel.vue
+var t = e;
+//#endregion
+export { t as default };

package/esm/components/QCarousel/constants.js

@@ -1,16 +1,11 @@
-const o = {
-  back: {
-    icon: "chevron-left"
-  },
-  forward: {
-    icon: "chevron-right"
-  }
-}, e = {
-  previousText: "Previous",
-  nextText: "Next",
-  goToSlide: "Go to slide {0}"
-};
-export {
-  o as DEFAULT_ICONS,
-  e as DEFAULT_TEXTS
+//#region src/components/QCarousel/constants.ts
+var e = {
+	back: { icon: "chevron-left" },
+	forward: { icon: "chevron-right" }
+}, t = {
+	previousText: "Previous",
+	nextText: "Next",
+	goToSlide: "Go to slide {0}"
 };
+//#endregion
+export { e as DEFAULT_ICONS, t as DEFAULT_TEXTS };