@quidgest/ui 0.14.4 → 0.14.6

package/dist/ui.scss

@@ -1,6 +1,6 @@
 /*!
- * Quidgest UI v0.14.4
- * (c) 2024 Quidgest - Consultores de Gestão, S.A.
+ * Quidgest UI v0.14.6
+ * (c) 2025 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
 
@@ -196,6 +196,9 @@ $input-padding-x: 0.25rem !default;
   margin: 0;
   overflow: hidden;
 }
+:root {
+  --border-radius: #{$border-radius};
+}
 *,
 ::after,
 ::before {
@@ -218,11 +221,11 @@ body {
     }
     &::-webkit-scrollbar-thumb {
       background-color: $scrollbar-thumb;
-      border-radius: $border-radius;
+      border-radius: var(--border-radius);
     }
     &::-webkit-scrollbar-track {
       background-color: $scrollbar-track;
-      border-radius: $border-radius;
+      border-radius: var(--border-radius);
     }
   }
 }
@@ -238,12 +241,17 @@ body {
 .fade-leave-active {
   transition: opacity 0.2s;
 }
+.q-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: $space-base;
+}
 .q-badge {
   $this: &;
   display: inline-flex;
   border-width: 1px;
   border-color: transparent;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   padding: 0.25em 0.5em;
   line-height: 1rem;
   font-size: 0.75rem;
@@ -334,7 +342,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   transition-property: color, background-color, border-color, box-shadow, text-decoration-color,
     fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -472,7 +480,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   --box-shadow-tint: 0 0 0;
   position: relative;
   display: inline-flex;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   &--elevated {
     --box-shadow-tint: var(--q-theme-primary-rgb);
     box-shadow:
@@ -497,6 +505,144 @@ $button-text-on-plain: var(--q-theme-on-background);
     }
   }
 }
+.q-card {
+  --card-base-padding: 1rem;
+  --card-padding: 1rem;
+  --card-border: 1px solid #{$border};
+  --card-width: fit-content;
+  --card-hover: 0 5px 15px rgb(var(--q-theme-neutral-rgb) / 0.25);
+  --card-scale: 1;
+  --card-shadow: none;
+  --card-background: var(--q-theme-container);
+  min-height: 5rem;
+  min-width: 7rem;
+  border: var(--card-border);
+  border-radius: var(--border-radius);
+  background-color: var(--card-background);
+  width: var(--card-width);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--card-shadow);
+  transform: scale(var(--card-scale));
+  transition:
+    box-shadow 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.155, 1.105, 0.295, 1.12);
+  &__header {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding-bottom: var(--card-base-padding);
+  }
+  &__header-content {
+    display: flex;
+    gap: 0.5rem;
+    padding: var(--card-padding);
+    padding-top: var(--card-base-padding);
+    padding-bottom: 0;
+  }
+  &__header-text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+  &__title {
+    width: 100%;
+    margin: 0;
+    font-size: 1.05rem;
+    line-height: 1rem;
+    letter-spacing: 0.02rem;
+    font-weight: 600;
+  }
+  &__subtitle {
+    width: 100%;
+    margin: 0;
+    font-size: 0.75rem;
+    color: var(--q-theme-neutral);
+    padding-top: 0.3rem;
+  }
+  &__content {
+    padding: var(--card-padding);
+    padding-top: 0;
+    padding-bottom: var(--card-base-padding);
+    display: flex;
+  }
+  
+  &--elevation-low {
+    --card-shadow: 0 4px 6px rgb(var(--q-theme-neutral-dark-rgb) / 0.15);
+  }
+  &--elevation-medium {
+    --card-shadow: 0 6px 9px rgb(var(--q-theme-neutral-dark-rgb) / 0.2);
+  }
+  &--elevation-high {
+    --card-shadow: 0 8px 12px rgb(var(--q-theme-neutral-dark-rgb) / 0.25);
+  }
+  &--background {
+    --card-background: rgb(var(--q-theme-primary-light-rgb) / 0.5);
+    .q-field__control {
+      background-color: var(--q-theme-container);
+    }
+  }
+  &--title-background {
+    .q-card__header-content {
+      background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+      padding-bottom: 0.75rem;
+    }
+    .q-card__title {
+      color: var(--q-theme-neutral-dark);
+      font-size: 1.1rem;
+      letter-spacing: unset;
+      text-transform: unset;
+      font-weight: $font-weight-bold;
+    }
+  }
+  &--minor {
+    .q-card__title {
+      font-size: 0.9rem;
+      text-transform: unset;
+      font-weight: 600;
+      color: var(--q-theme-neutral);
+    }
+    .q-card__subtitle {
+      font-size: 0.75rem;
+      color: rgb(var(--q-theme-neutral-rgb) / 0.8);
+    }
+  }
+  
+  &--borderless {
+    --card-border: 1px solid transparent;
+  }
+  &--clickable {
+    text-decoration: none;
+    color: inherit;
+    &:not(.q-card--disabled) {
+      cursor: pointer;
+      &:hover {
+        --card-scale: 1.01;
+        --card-shadow: var(--card-hover);
+      }
+    }
+  }
+  
+  &--loading {
+    padding: 3rem 5rem;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  @mixin card-width($width, $multiplier: 1) {
+    &--#{$width} {
+      --card-width: calc(#{$multiplier} * 5em + #{$multiplier - 1} * #{$space-base});
+    }
+  }
+  @include card-width(medium, 3);
+  @include card-width(large, 4);
+  @include card-width(xlarge, 6);
+  @include card-width(xxlarge, 8);
+  &--block {
+    --card-width: 100%;
+  }
+}
 .q-checkbox {
   $this: &;
   --box-size: 1.15rem;
@@ -515,7 +661,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     width: var(--box-size);
     height: var(--box-size);
     border: 1px solid $border;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     padding: 0;
     transition:
       background 0.2s,
@@ -594,6 +740,152 @@ $button-text-on-plain: var(--q-theme-on-background);
     transition: none;
   }
 }
+.q-collapsible {
+  $btn-padding: 0.2rem; 
+  $header-padding: 0.75rem - $btn-padding;
+  $this: &;
+  display: flex;
+  flex-direction: column;
+  word-wrap: break-word;
+  background-color: var(--q-theme-container);
+  border-width: 1px;
+  border-radius: var(--border-radius);
+  position: relative;
+  max-width: 100%;
+  min-height: 0;
+  #{$this}__chevron {
+    transition: all 0.2s;
+    font-weight: 600;
+    &:hover,
+    &:focus {
+      cursor: pointer;
+      opacity: 1;
+    }
+  }
+  &:not(#{$this}--borderless) {
+    #{$this}__chevron-right {
+      position: absolute;
+      right: 0;
+    }
+  }
+  &--expanded {
+    #{$this}__chevron {
+      transform: rotate(-180deg);
+    }
+  }
+  .q-card__content {
+    padding: 0;
+  }
+  .q-card__header {
+    padding-bottom: 0;
+  }
+  &__header {
+    display: flex;
+    position: relative;
+    width: 100%;
+    margin: 0;
+    border-bottom: 1px solid $border;
+    overflow: hidden;
+    gap: 0;
+    justify-content: start;
+    align-items: flex-start;
+    flex-direction: column;
+    padding: $header-padding;
+  }
+  &__btn {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    .q-btn__content {
+      width: 100%;
+      gap: 0;
+      padding: $btn-padding;
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      letter-spacing: 0.02rem;
+      color: var(--q-theme-on-background);
+      h4 {
+        margin: 0;
+      }
+    }
+  }
+  &__title {
+    display: flex;
+    width: 100%;
+    gap: 0.2rem;
+    position: relative;
+    text-align: start;
+    align-items: center;
+    padding: 0;
+    &-text {
+      font-weight: 600;
+    }
+  }
+  &__subtitle {
+    margin-left: 1.25rem;
+    text-align: start;
+    line-height: 0.75rem;
+    font-size: 0.75rem;
+    text-decoration: none;
+    white-space: nowrap;
+    color: var(--q-theme-neutral);
+    padding: 0;
+    padding-top: 0.3rem;
+  }
+  &__content {
+    padding: 1rem;
+    padding-top: 0.75rem;
+    &-wrapper {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: 0.5s;
+      &:not(#{$this}__content-show) {
+        pointer-events: none;
+        visibility: hidden;
+      }
+    }
+    &-inner {
+      overflow: hidden;
+      overflow-x: inherit;
+    }
+    &-show {
+      grid-template-rows: 1fr;
+    }
+  }
+  
+  &--border-bottom {
+    border-radius: 0;
+    border: 0;
+    border-bottom: 1px solid $border;
+    .q-collapsible__header {
+      border: 0;
+    }
+  }
+  
+  &--required {
+    margin-top: -0.3rem;
+    margin-left: 0.1rem;
+    font-weight: 700;
+    color: var(--q-theme-danger);
+  }
+  &--icon-right {
+    &:not(.q-collapsible--borderless) .q-collapsible__title .q-icon {
+      margin: 0 0 0 auto;
+    }
+    .q-collapsible__subtitle {
+      margin-left: 0;
+    }
+  }
+  
+  @mixin header-spacing($spacing, $increment) {
+    &--#{$spacing} .q-collapsible__header {
+      padding: calc(#{$header-padding} + #{$increment});
+    }
+  }
+  @include header-spacing(loose, $space-base);
+  @include header-spacing(compact, -$space-base);
+}
 .q-combobox {
   $this: &;
   &:not(#{$this}--disabled) {
@@ -673,7 +965,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   $this: &;
   display: flex;
   flex-direction: column;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   width: fit-content;
   &__label {
     display: flex;
@@ -777,12 +1069,12 @@ $input-group-addon-color: var(--q-theme-primary);
 $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
 .q-input-group {
   &__prepend > :first-child {
-    border-top-left-radius: $border-radius;
-    border-bottom-left-radius: $border-radius;
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
   }
   &__append > :last-child {
-    border-top-right-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
   }
   &__prepend,
   &__append {
@@ -825,12 +1117,12 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
       }
     }
     > :first-child {
-      border-top-left-radius: $border-radius;
-      border-bottom-left-radius: $border-radius;
+      border-top-left-radius: var(--border-radius);
+      border-bottom-left-radius: var(--border-radius);
     }
     > :last-child {
-      border-top-right-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: var(--border-radius);
+      border-bottom-right-radius: var(--border-radius);
     }
     > * + * {
       margin-left: -1px;
@@ -885,7 +1177,7 @@ $line-color: var(--q-theme-primary);
   padding: 0;
   -webkit-overflow-scrolling: touch;
   width: 100%;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
 }
 .q-list-item-group {
   display: flex;
@@ -919,7 +1211,7 @@ $line-color: var(--q-theme-primary);
   word-wrap: break-word;
   -webkit-touch-callout: none;
   width: inherit;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   outline: none;
   &:hover {
     cursor: pointer;
@@ -1003,7 +1295,7 @@ $arrow-tip-radius: 0.1rem;
     background-color: var(--q-overlay-bg);
     color: var(--q-overlay-color);
     border: $overlay-border-width solid var(--q-overlay-border-color);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     outline: none;
     box-shadow:
       0 0 #0000,
@@ -1266,7 +1558,7 @@ $base-border: 1px solid rgba(0, 0, 0, 0.1);
     overflow: hidden;
     background-color: var(--q-theme-neutral-light);
     animation: fadeIn 1s;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     &::after {
       position: absolute;
       top: 0;

package/esm/components/QAccordion/QAccordion.d.ts

@@ -0,0 +1,26 @@
+import { QAccordionProps } from './types';
+declare let __VLS_typeProps: QAccordionProps;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & typeof __VLS_typeProps;
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=QAccordion.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QAccordion.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QAccordion/QAccordion.vue"],"names":[],"mappings":"AAoCC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAO/C,QAAA,IAAI,eAAe,EAAG,eAAe,CAAC;AAmBtC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,OAAO,eAAe,CAAC;AAI3B,iBAAS,cAAc;;yBA2BM,GAAG;;;WASlB,OAAO,IAA6B;EAEjD;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;kFAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/QAccordion/QAccordion.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent as r, mergeModels as a, toRef as l, useModel as s, openBlock as n, createElementBlock as d, renderSlot as i } from "vue";
+import { provideDefaults as m } from "../../composables/defaults.js";
+import { useGroup as c } from "../../composables/group.js";
+const p = { class: "q-accordion" }, V = /* @__PURE__ */ r({
+  __name: "QAccordion",
+  props: /* @__PURE__ */ a({
+    variant: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    m({
+      QCollapsible: {
+        variant: l(e, "variant")
+      }
+    });
+    const o = s(e, "modelValue");
+    return c({ active: o }), (t, f) => (n(), d("div", p, [
+      i(t.$slots, "default")
+    ]));
+  }
+});
+export {
+  V as default
+};

package/esm/components/QAccordion/QAccordion.vue2.js

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

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

@@ -0,0 +1,4 @@
+import { default as _QAccordion } from './QAccordion';
+declare const QAccordion: typeof _QAccordion;
+export { QAccordion };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QAccordion/index.ts"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,kBAAkB,CAAA;AAK1C,QAAA,MAAM,UAAU,EAAmC,OAAO,WAAW,CAAA;AAGrE,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/esm/components/QAccordion/index.js

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

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

@@ -0,0 +1,7 @@
+export type QAccordionProps = {
+    /**
+     * The variant of the collapsibles.
+     */
+    variant?: 'default' | 'border-bottom';
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QAccordion/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,eAAe,CAAA;CACrC,CAAA"}

package/esm/components/QCard/QCard.d.ts

@@ -0,0 +1,34 @@
+import { QCardProps } from './types';
+declare function __VLS_template(): {
+    slots: {
+        header?(_: {}): any;
+        "header.prepend"?(_: {}): any;
+        "header.content.prepend"?(_: {}): any;
+        title?(_: {}): any;
+        subtitle?(_: {}): any;
+        "header.content.append"?(_: {}): any;
+        "header.append"?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<QCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<QCardProps> & Readonly<{}>, {
+    variant: "default" | "background" | "title-background" | "minor";
+    title: string;
+    id: string;
+    subtitle: string;
+    href: string;
+    elevation: "none" | "low" | "medium" | "high";
+    width: import('./types').QCardWidth;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=QCard.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QCard/QCard.vue"],"names":[],"mappings":"AAsIC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAiE1C,iBAAS,cAAc;;wBAwGM,GAAG;kCACO,GAAG;0CACK,GAAG;uBACtB,GAAG;0BACA,GAAG;yCACY,GAAG;iCACX,GAAG;yBACX,GAAG;wBACJ,GAAG;;;WASlB,OAAO,IAA6B;EAEjD;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;6EAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAgBpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}