@quidgest/ui 0.16.19 → 0.16.21

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.16.19
+ * Quidgest UI v0.16.21
  * (c) 2025 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -235,10 +235,11 @@ $shadow-md: (
   0 4px 6px -1px rgb(0 0 0 / 10%),
   0 2px 4px -2px rgb(0 0 0 / 10%)
 );
-$breakpoint-xs: 599px !default;
-$breakpoint-sm: 1023px !default;
-$breakpoint-md: 1439px !default;
-$breakpoint-lg: 1919px !default;
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+$breakpoint-xxl: 1400px;
 $font-size-base: 0.9rem !default;
 $line-height-base: 1.5 !default;
 $font-weight-thin: 100;
@@ -446,6 +447,43 @@ $transition-duration: 0.2s !default;
   gap: $space-base;
   height: fit-content;
 }
+.q-avatar {
+  --q-avatar-size: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  box-sizing: border-box;
+  font-size: 1rem;
+  width: var(--q-avatar-size);
+  height: var(--q-avatar-size);
+  border-radius: 50%; 
+  background-color: var(--q-avatar-color, var(--q-theme-neutral-light));
+  color: var(--q-avatar-text-color);
+  &-img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  &-initials {
+    font-size: 1em;
+    font-weight: bold;
+    text-align: center;
+    user-select: none;
+  }
+  
+  &--small {
+    --q-avatar-size: 32px;
+  }
+  &--large {
+    --q-avatar-size: 64px;
+  }
+  
+  &--square {
+    border-radius: 0;
+  }
+}
 .q-badge {
   $this: &;
   display: inline-flex;
@@ -947,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;
@@ -1586,27 +1835,27 @@ $transition-duration: 0.2s !default;
 .q-container--fluid {
   max-width: 100%;
 }
-@media (width >= 576px) {
+@media (min-width: $breakpoint-sm) {
   .q-container:not(.q-container--fluid) {
     max-width: 540px;
   }
 }
-@media (width >= 768px) {
+@media (min-width: $breakpoint-md) {
   .q-container:not(.q-container--fluid) {
     max-width: 720px;
   }
 }
-@media (width >= 992px) {
+@media (min-width: $breakpoint-lg) {
   .q-container:not(.q-container--fluid) {
     max-width: 960px;
   }
 }
-@media (width >= 1200px) {
+@media (min-width: $breakpoint-xl) {
   .q-container:not(.q-container--fluid) {
     max-width: 1140px;
   }
 }
-@media (width >= 1400px) {
+@media (min-width: $breakpoint-xxl) {
   .q-container:not(.q-container--fluid) {
     max-width: 1320px;
   }
@@ -1676,19 +1925,19 @@ $transition-duration: 0.2s !default;
   }
 }
 @include generate-cols;
-@media (width >= 600px) {
+@media (min-width: $breakpoint-sm) {
   @include generate-cols('-sm');
 }
-@media (width >= 960px) {
+@media (min-width: $breakpoint-md) {
   @include generate-cols('-md');
 }
-@media (width >= 1280px) {
+@media (min-width: $breakpoint-lg) {
   @include generate-cols('-lg');
 }
-@media (width >= 1920px) {
+@media (min-width: $breakpoint-xl) {
   @include generate-cols('-xl');
 }
-@media (width >= 2560px) {
+@media (min-width: $breakpoint-xxl) {
   @include generate-cols('-xxl');
 }
 .q-spacer {

package/esm/components/QAvatar/QAvatar.d.ts

@@ -0,0 +1,23 @@
+import { QAvatarProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        fallback?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<QAvatarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<QAvatarProps> & Readonly<{}>, {
+    size: "small" | "medium" | "large" | string;
+    alt: string;
+    shape: "circle" | "square";
+}, {}, {}, {}, 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=QAvatar.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QAvatar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QAvatar/QAvatar.vue"],"names":[],"mappings":"AAmBA;AAwEC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AA+C5C,iBAAS,cAAc;WAwCT,OAAO,IAA6B;;0BAVpB,GAAG;;;;EAehC;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;wFAQnB,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/QAvatar/QAvatar.vue.js

@@ -0,0 +1,49 @@
+import { defineComponent as p, computed as t, toRef as v, createElementBlock as r, openBlock as i, normalizeStyle as d, normalizeClass as f, renderSlot as q, toDisplayString as y } from "vue";
+import { useColor as z } from "../../composables/useColor/index.js";
+const C = ["src", "alt"], h = {
+  key: 1,
+  class: "q-avatar-initials"
+}, S = /* @__PURE__ */ p({
+  __name: "QAvatar",
+  props: {
+    src: {},
+    alt: { default: "Avatar" },
+    size: { default: "medium" },
+    shape: { default: "circle" },
+    initials: {},
+    color: {}
+  },
+  setup(n) {
+    const e = n, c = t(() => ["small", "large"].includes(e.size) ? `q-avatar--${e.size}` : ""), u = t(() => e.shape === "circle" ? void 0 : "q-avatar--square"), { style: s } = z(v(e, "color")), m = t(() => {
+      var l, o;
+      const a = {};
+      return ["small", "medium", "large"].includes(e.size) || (a["--q-avatar-size"] = e.size), s.value && (a["--q-avatar-color"] = (l = s.value) == null ? void 0 : l.mainColor, a["--q-avatar-text-color"] = (o = s.value) == null ? void 0 : o.onMainColor), a;
+    });
+    return (a, l) => (i(), r(
+      "div",
+      {
+        class: f(["q-avatar", c.value, u.value]),
+        style: d(m.value)
+      },
+      [
+        a.src ? (i(), r("img", {
+          key: 0,
+          src: a.src,
+          alt: a.alt,
+          class: "q-avatar-img"
+        }, null, 8, C)) : a.initials ? (i(), r(
+          "span",
+          h,
+          y(a.initials.slice(0, 2).toUpperCase()),
+          1
+          /* TEXT */
+        )) : q(a.$slots, "fallback", { key: 2 })
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+});
+export {
+  S as default
+};

package/esm/components/QAvatar/QAvatar.vue2.js

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

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

@@ -0,0 +1,31 @@
+declare const QAvatar: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./types').QAvatarProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        size: "small" | "medium" | "large" | string;
+        alt: string;
+        shape: "circle" | "square";
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('./types').QAvatarProps> & Readonly<{}>, {}, {}, {}, {}, {
+        size: "small" | "medium" | "large" | string;
+        alt: string;
+        shape: "circle" | "square";
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('./types').QAvatarProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    size: "small" | "medium" | "large" | string;
+    alt: string;
+    shape: "circle" | "square";
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        fallback?(_: {}): any;
+    };
+});
+export { QAvatar };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QAvatar/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA4B,CAAA;AAGzC,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/esm/components/QAvatar/index.js

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

package/esm/components/QAvatar/types.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Props for the QAvatar component.
+ */
+export type QAvatarProps = {
+    /**
+     * URL of the avatar image.
+     */
+    src?: string;
+    /**
+     * Alt text for the image.
+     */
+    alt?: string;
+    /**
+     * Predefined sizes ('small', 'medium', 'large') or a custom size as a string.
+     */
+    size?: 'small' | 'medium' | 'large' | string;
+    /**
+     * Shape of the avatar, either 'circle' or 'square'.
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * Initials to display if no image is provided.
+     */
+    initials?: string;
+    /**
+     * Background color for initials or fallback.
+     */
+    color?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/esm/components/QAvatar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QAvatar/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IAE5C;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACd,CAAA"}

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"}