@quidgest/ui 0.16.2 → 0.16.4

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.16.2
+ * Quidgest UI v0.16.4
  * (c) 2025 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -288,6 +288,7 @@ body {
     }
   }
 }
+$transition-duration: 0.2s !default;
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
@@ -298,7 +299,87 @@ body {
 }
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.2s;
+  transition: opacity $transition-duration;
+}
+.scale-enter-from,
+.scale-leave-to {
+  transform: scale(0);
+  opacity: 0;
+}
+.scale-enter-to,
+.scale-leave-from {
+  transform: scale(1);
+  opacity: 1;
+}
+.scale-enter-active,
+.scale-leave-active {
+  transition:
+    transform $transition-duration ease,
+    opacity $transition-duration ease;
+}
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+.slide-up-enter-to,
+.slide-up-leave-from {
+  transform: translateY(0);
+  opacity: 1;
+}
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition:
+    transform $transition-duration ease,
+    opacity $transition-duration ease;
+}
+.slide-down-enter-from,
+.slide-down-leave-to {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+.slide-down-enter-to,
+.slide-down-leave-from {
+  transform: translateY(0);
+  opacity: 1;
+}
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition:
+    transform $transition-duration ease,
+    opacity $transition-duration ease;
+}
+.slide-left-enter-from,
+.slide-left-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+.slide-left-enter-to,
+.slide-left-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+}
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition:
+    transform $transition-duration ease,
+    opacity $transition-duration ease;
+}
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+.slide-right-enter-to,
+.slide-right-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+}
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition:
+    transform $transition-duration ease,
+    opacity $transition-duration ease;
 }
 @mixin color-variant($prefix, $color) {
   &--#{$color} {
@@ -696,8 +777,9 @@ body {
   --card-scale: 1;
   --card-shadow: none;
   --card-background: var(--q-theme-container);
-  min-height: 5rem;
   min-width: 7rem;
+  min-height: 5rem;
+  height: 100%;
   border: var(--card-border);
   border-radius: var(--border-radius);
   background-color: var(--card-background);
@@ -744,10 +826,11 @@ body {
     padding-top: 0.3rem;
   }
   &__content {
+    display: flex;
+    flex-direction: column;
     padding: var(--card-padding);
     padding-top: 0;
     padding-bottom: var(--card-base-padding);
-    display: flex;
   }
   
   &--elevation-low {
@@ -1133,48 +1216,114 @@ body {
 .q-dialog {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  max-height: calc(100vh - 2rem);
+  &__header {
+    padding: 1rem;
+    padding-bottom: 0;
+    &-title {
+      display: flex;
+      font-weight: $font-weight-bold;
+      font-size: 1rem;
+    }
+  }
+  &__body {
+    padding: 1rem 0;
+    overflow: auto;
+    &-icon {
+      display: flex;
+      justify-content: center;
+      padding: $space-base 1rem;
+      svg {
+        height: 5em;
+        width: 5em;
+      }
+    }
+    &-text {
+      display: flex;
+      justify-content: center;
+      padding: $space-base 1rem;
+    }
+  }
+  &__footer {
+    padding: 1rem;
+    padding-top: 0;
+    &-buttons {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+  }
+  &__close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+  &__underlay {
+    background-color: rgb(var(--q-theme-on-background-rgb) / 30%);
+  }
+}
+.q-divider {
+  display: flex;
   align-items: center;
   justify-content: center;
-  max-width: 50rem;
-  min-width: 20rem;
-  padding: $space-base;
-}
-.q-dialog__underlay {
-  background-color: rgb(var(--q-theme-on-background-rgb) / 30%);
+  position: relative;
+  color: #999;
+  font-size: 0.875rem;
 }
-.q-dialog__header {
-  display: flex;
+.q-divider--horizontal {
   width: 100%;
-  justify-content: space-between;
-  padding: 0.4rem $space-base;
-  &-title {
-    align-self: flex-start;
-    font-weight: $font-weight-bold;
-    padding: 0.4rem;
-    font-size: 1rem;
-  }
+  flex-direction: row;
+  margin: 8px 0;
 }
-.q-dialog__header .q-button {
-  align-items: center;
+.q-divider--horizontal:not(.q-divider--labeled)::before {
+  content: '';
+  flex: 1;
+  border-top: 1px solid #e0e0e0;
 }
-.q-dialog__body {
+.q-divider--horizontal.q-divider--labeled .q-divider__line {
+  flex: 1;
+  border-top: 1px solid #e0e0e0;
+}
+.q-divider--horizontal.q-divider--labeled .q-divider__label {
+  padding: 0 12px;
+  background: white;
+  white-space: nowrap;
+}
+.q-divider--horizontal.q-divider--inset {
+  max-width: calc(100% - 72px);
+  margin-inline-start: 72px;
+}
+.q-divider--vertical {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: $space-base 0.65rem;
-  gap: 0.4rem;
-  &-icon svg {
-    height: 5em;
-    width: 5em;
-  }
-  &-actions {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    padding: 0.65rem;
-    padding-bottom: 0.5rem;
-  }
+  height: 100%;
+  min-height: 100%; 
+  margin: 0 8px;
+}
+.q-divider--vertical:not(.q-divider--labeled)::before {
+  content: '';
+  flex: 1;
+  border-left: 1px solid #e0e0e0;
+}
+.q-divider--vertical.q-divider--labeled .q-divider__line {
+  border-left: 1px solid #e0e0e0;
+  height: 100%;
+}
+.q-divider--vertical.q-divider--labeled .q-divider__label {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  padding: 12px 0;
+  background: white;
+  white-space: nowrap;
+}
+.q-divider--vertical.q-divider--inset {
+  margin-bottom: 8px;
+  margin-top: 8px;
+  max-height: calc(100% - 16px);
 }
 .q-dropdown-menu {
   &__body {
@@ -1373,6 +1522,125 @@ body {
     }
   }
 }
+@use 'sass:math';
+.q-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.q-container--fluid {
+  max-width: 100%;
+}
+@media (width >= 576px) {
+  .q-container:not(.q-container--fluid) {
+    max-width: 540px;
+  }
+}
+@media (width >= 768px) {
+  .q-container:not(.q-container--fluid) {
+    max-width: 720px;
+  }
+}
+@media (width >= 992px) {
+  .q-container:not(.q-container--fluid) {
+    max-width: 960px;
+  }
+}
+@media (width >= 1200px) {
+  .q-container:not(.q-container--fluid) {
+    max-width: 1140px;
+  }
+}
+@media (width >= 1400px) {
+  .q-container:not(.q-container--fluid) {
+    max-width: 1320px;
+  }
+}
+.q-row {
+  --q-row-gutter: #{$space-base * 2};
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  margin-left: calc(-1 * var(--q-row-gutter));
+  margin-right: calc(-1 * var(--q-row-gutter));
+}
+.q-row > * {
+  padding: var(--q-row-gutter);
+}
+.q-row--justify-start {
+  justify-content: flex-start;
+}
+.q-row--justify-center {
+  justify-content: center;
+}
+.q-row--justify-end {
+  justify-content: flex-end;
+}
+.q-row--justify-between {
+  justify-content: space-between;
+}
+.q-row--justify-around {
+  justify-content: space-around;
+}
+.q-row--justify-evenly {
+  justify-content: space-evenly;
+}
+.q-row--align-start {
+  align-items: flex-start;
+}
+.q-row--align-center {
+  align-items: center;
+}
+.q-row--align-end {
+  align-items: flex-end;
+}
+.q-row--align-baseline {
+  align-items: baseline;
+}
+.q-row--align-stretch {
+  align-items: stretch;
+}
+.q-col {
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+}
+.q-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: none;
+}
+@mixin generate-cols($infix: '') {
+  @for $i from 1 through 12 {
+    $width: math.div($i, 12) * 100%;
+    .q-col#{$infix}-#{$i} {
+      flex: 0 0 #{$width};
+      max-width: #{$width};
+    }
+  }
+}
+@include generate-cols;
+@media (width >= 600px) {
+  @include generate-cols('-sm');
+}
+@media (width >= 960px) {
+  @include generate-cols('-md');
+}
+@media (width >= 1280px) {
+  @include generate-cols('-lg');
+}
+@media (width >= 1920px) {
+  @include generate-cols('-xl');
+}
+@media (width >= 2560px) {
+  @include generate-cols('-xxl');
+}
+.q-spacer {
+  flex: 1 1 0;
+}
 .q-icon {
   display: inline-block;
   color: var(--q-theme-primary);
@@ -1466,41 +1734,29 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     }
   }
 }
-$line-color: var(--q-theme-primary);
+$q-line-loader-height: var(--q-line-loader-height);
+$q-line-loader-color: var(--q-line-loader-color);
 .q-line-loader {
+  --q-line-loader-height: 4px;
+  --q-line-loader-color: var(--q-theme-primary-rgb);
   width: 100%;
-  height: 2px;
-  display: inline-block;
-  position: relative;
-  background: transparent;
-  overflow: hidden;
-  &::after {
-    content: '';
-    min-width: 33%;
-    height: 2px;
-    
-    background: linear-gradient(
-      to right,
-      rgb(237 235 233) 0%,
-      $line-color 50%,
-      rgb(237 235 233) 100%
-    );
-    
-    position: absolute;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    animation: q-move 2s linear infinite;
+  height: $q-line-loader-height;
+  background: linear-gradient(
+      90deg,
+      rgb(#{$q-line-loader-color} / 6.7%) 33%,
+      rgb(#{$q-line-loader-color} / 100%) 50%,
+      rgb(#{$q-line-loader-color} / 6.7%) 66%
+    )
+    #f2f2f2;
+  background-size: 300% 100%;
+  animation: l1 1s infinite linear;
+  &--rounded {
+    border-radius: 9999px;
   }
 }
-@keyframes q-move {
+@keyframes l1 {
   0% {
-    left: 0;
-    transform: translateX(-100%);
-  }
-  100% {
-    left: 100%;
-    transform: translateX(0%);
+    background-position: right;
   }
 }
 .q-list {
@@ -1549,8 +1805,10 @@ $line-color: var(--q-theme-primary);
   width: inherit;
   border-radius: var(--border-radius);
   outline: none;
-  &:hover {
-    cursor: pointer;
+  &--selectable {
+    &:hover {
+      cursor: pointer;
+    }
   }
   &:hover,
   &:focus-visible,
@@ -1643,6 +1901,8 @@ $arrow-tip-radius: 0.1rem;
   --q-overlay-border-color: var(--q-theme-neutral-light);
   position: fixed;
   z-index: $overlay-z-index;
+  max-width: calc(100vw - 1rem);
+  max-height: calc(100vh - 2rem);
   &__underlay {
     position: fixed;
     inset: 0;
@@ -1711,6 +1971,12 @@ $arrow-tip-radius: 0.1rem;
   }
   
   &--independent {
+    inset: 0;
+    margin: 1rem auto;
+    width: max-content;
+    height: max-content;
+  }
+  &--center {
     inset: 0;
     margin: auto;
     width: max-content;
@@ -1722,6 +1988,18 @@ $arrow-tip-radius: 0.1rem;
     --q-overlay-color: var(--q-theme-background);
     --q-overlay-border-color: var(--q-theme-neutral-dark);
   }
+  &--small {
+    width: 20rem;
+  }
+  &--medium {
+    width: 32rem;
+  }
+  &--large {
+    width: 50rem;
+  }
+  &--xlarge {
+    width: 72rem;
+  }
 }
 .q-password-field {
   &__meter {
@@ -2034,6 +2312,139 @@ $base-border: 1px solid rgb(0 0 0 / 10%);
 .q-select__empty {
   margin: calc(4 * $space-base) 0;
 }
+$sidebar-size-small: 19rem;
+$sidebar-size-medium: 27rem;
+$sidebar-size-large: 35rem;
+$sidebar-border-color: rgb(var(--q-theme-neutral-rgb) / 25%);
+$sidebar-sizes: (
+  small: $sidebar-size-small,
+  medium: $sidebar-size-medium,
+  large: $sidebar-size-large
+);
+@mixin sidebar-size-modifiers($prefix, $property) {
+  @each $size, $value in $sidebar-sizes {
+    $suffix: if($prefix == '', $size, '#{$prefix}-#{$size}');
+    .q-sidebar--#{$suffix} {
+      #{$property}: $value;
+    }
+  }
+}
+.q-sidebar {
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+  flex-direction: row;
+  min-width: $sidebar-size-small;
+  max-width: $sidebar-size-large;
+}
+.q-sidebar-anchor {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  background-color: var(--q-theme-container);
+  z-index: 10;
+}
+.q-sidebar__items {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.q-sidebar__item {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1;
+  border-radius: 0;
+  border-width: 0;
+  border-bottom-width: 1px;
+  border-bottom-color: $sidebar-border-color !important;
+  font-size: 0.6rem;
+  .q-icon {
+    font-size: 20px;
+  }
+}
+.q-sidebar__indicator {
+  position: absolute;
+  width: 2px;
+  background-color: var(--q-theme-primary-dark);
+  opacity: 0;
+  z-index: 10;
+  transition:
+    transform 0.3s ease-in-out,
+    height 0.3s ease-in-out,
+    opacity 0.2s ease-in-out;
+}
+.q-sidebar-panel {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.q-sidebar-panel__header,
+.q-sidebar-panel__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+}
+.q-sidebar-panel__title {
+  margin: 0;
+}
+.q-sidebar-panel__content {
+  flex: 1 1 0%;
+  overflow: auto;
+}
+.q-sidebar-panel__handle {
+  position: absolute;
+  top: 0;
+  width: 10px;
+  height: 100%;
+  cursor: ew-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.q-sidebar-panel__handle--left {
+  left: 0;
+}
+.q-sidebar-panel__handle--right {
+  right: 0;
+}
+.q-sidebar-panel__grip {
+  width: 4px;
+  height: 24px;
+  background-color: var(--q-theme-neutral);
+  border-radius: 2px;
+}
+@include sidebar-size-modifiers('', width);
+@include sidebar-size-modifiers('min', min-width);
+@include sidebar-size-modifiers('max', max-width);
+.q-sidebar--right {
+  right: 0;
+  flex-direction: row-reverse;
+}
+.q-sidebar--left .q-sidebar__indicator {
+  left: 0;
+}
+.q-sidebar--right .q-sidebar__indicator {
+  right: 0;
+}
+.q-sidebar--left .q-sidebar-panel,
+.q-sidebar--left .q-sidebar-anchor {
+  border-right-width: 1px;
+  border-right-color: $sidebar-border-color;
+}
+.q-sidebar--right .q-sidebar-panel,
+.q-sidebar--right .q-sidebar-anchor {
+  border-left-width: 1px;
+  border-left-color: $sidebar-border-color;
+}
+@media (prefers-reduced-motion: reduce) {
+  .q-sidebar__indicator {
+    transition: opacity 0.2s ease-in-out;
+  }
+}
 .q-skeleton-loader {
   $this: &;
   &__bone {

package/esm/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};