@quidgest/ui 0.16.20 → 0.16.21

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.16.20
+ * Quidgest UI v0.16.21
  * (c) 2025 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -985,6 +985,217 @@ $transition-duration: 0.2s !default;
     --card-width: 100%;
   }
 }
+$q-carousel-height: 360px;
+$q-carousel-height-md: 300px;
+.q-carousel {
+  --q-carousel-height: #{$q-carousel-height};
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: var(--q-carousel-height);
+  border-radius: $border-radius;
+  background-color: $neutral-light;
+  outline: none;
+}
+.q-carousel__track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  will-change: transform;
+}
+.q-carousel__slide {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+}
+.q-carousel__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.q-carousel__caption-global {
+  position: absolute;
+  bottom: 3.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  color: white;
+  z-index: 20;
+  max-width: 80%;
+}
+.q-carousel__title {
+  margin: 0 0 0.25rem;
+  font-size: 2rem;
+  font-weight: 600;
+  text-shadow: 0 2px 4px rgb(0 0 0 / 50%);
+}
+.q-carousel__subtitle {
+  margin: 0;
+  font-size: 1.1rem;
+  opacity: 0.9;
+  text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
+}
+.q-carousel__indicators {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  z-index: 10;
+}
+.q-carousel__indicator {
+  position: relative; 
+  width: 30px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: rgb(255 255 255 / 50%);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  overflow: hidden; 
+}
+.q-carousel__indicator:hover {
+  background-color: rgb(255 255 255 / 80%);
+}
+.q-carousel__indicator--active {
+  background-color: white;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+}
+.q-carousel__indicator--active::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: rgb(0 0 0 / 20%); 
+  width: var(--q-carousel-progress-width); 
+  transition: width 0.05s linear; 
+  will-change: width;
+}
+.q-carousel__control {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgb(0 0 0 / 50%);
+  border: none;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  backdrop-filter: blur(4px);
+  color: white;
+}
+.q-carousel__control:hover {
+  background: rgb(0 0 0 / 70%);
+}
+.q-carousel__control--prev {
+  left: 1rem;
+}
+.q-carousel__control--next {
+  right: 1rem;
+}
+.q-carousel__control-icon.q-icon {
+  width: 24px;
+  height: 24px;
+}
+.q-carousel__skeleton {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.q-carousel__skeleton-caption {
+  position: absolute;
+  bottom: 20%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  max-width: 600px;
+}
+.q-carousel__skeleton-controls {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+  transform: translateY(-50%);
+}
+.q-carousel__skeleton-caption,
+.q-carousel__skeleton-controls {
+  .q-skeleton-loader__bone {
+    background-color: var(--q-theme-neutral);
+  }
+}
+.q-carousel__empty-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.q-carousel__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+@media (max-width: $breakpoint-md) {
+  .q-carousel {
+    --q-carousel-height: #{$q-carousel-height-md};
+  }
+  .q-carousel__caption-global {
+    bottom: 3rem;
+    max-width: 90%;
+  }
+  .q-carousel__title {
+    font-size: 1.5rem;
+  }
+  .q-carousel__subtitle {
+    font-size: 1rem;
+  }
+  .q-carousel__control {
+    width: 40px;
+    height: 40px;
+  }
+  .q-carousel__control-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+  .q-carousel__control--prev {
+    left: 0.5rem;
+  }
+  .q-carousel__control--next {
+    right: 0.5rem;
+  }
+}
+.q-carousel:focus-visible {
+  outline: $outline;
+}
+.q-carousel__control:focus-visible,
+.q-carousel__indicator:focus-visible {
+  outline: $outline;
+}
 .q-checkbox {
   $this: &;
   --box-size: 1.15rem;

package/esm/components/QCarousel/QCarousel.d.ts

@@ -0,0 +1,44 @@
+import { DEFAULT_ICONS, DEFAULT_TEXTS } from './constants';
+import { QCarouselProps, Slide } from './types';
+type __VLS_Props = QCarouselProps;
+type __VLS_PublicProps = {
+    'currentSlide'?: number;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        empty?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "slide:before-change": (newId: string, oldId?: string | undefined) => any;
+    "slide:after-change": (newId: string, oldId?: string | undefined) => any;
+    "slide:click": (id: string) => any;
+    "update:currentSlide": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onSlide:before-change"?: ((newId: string, oldId?: string | undefined) => any) | undefined;
+    "onSlide:after-change"?: ((newId: string, oldId?: string | undefined) => any) | undefined;
+    "onSlide:click"?: ((id: string) => any) | undefined;
+    "onUpdate:currentSlide"?: ((value: number) => any) | undefined;
+}>, {
+    icons: typeof DEFAULT_ICONS;
+    texts: typeof DEFAULT_TEXTS;
+    slides: Slide[];
+    autoCycleInterval: number;
+    autoCyclePause: "hover" | "false";
+    ride: "carousel" | "false";
+    swipeThreshold: number;
+    wrap: boolean;
+    animationDuration: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=QCarousel.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QCarousel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QCarousel/QCarousel.vue"],"names":[],"mappings":"AA+IA;AAueC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAS1D,OAAO,KAAK,EAAkB,cAAc,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAKpE,KAAK,WAAW,GAAG,cAAc,CAAC;AAqVnC,KAAK,iBAAiB,GAAG;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAqQT,OAAO,IAA6B;;uBAVtB,GAAG;;;;EAe9B;AA4BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;wFASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

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

package/esm/components/QCarousel/QCarousel.vue2.js

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

package/esm/components/QCarousel/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const DEFAULT_ICONS: {
+    back: {
+        icon: string;
+    };
+    forward: {
+        icon: string;
+    };
+};
+export declare const DEFAULT_TEXTS: {
+    previousText: string;
+    nextText: string;
+    goToSlide: string;
+};
+//# sourceMappingURL=constants.d.ts.map

package/esm/components/QCarousel/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/QCarousel/constants.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa;;;;;;;CAOM,CAAA;AAGhC,eAAO,MAAM,aAAa;;;;CAIQ,CAAA"}

package/esm/components/QCarousel/constants.js

@@ -0,0 +1,16 @@
+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
+};