@quidgest/ui 0.16.13 → 0.16.15

package/dist/manifest/components.json

@@ -51,6 +51,8 @@
   "QTextArea",
   "QTextField",
   "QThemeProvider",
+  "QToast",
+  "QToaster",
   "QToggle",
   "QToggleGroup",
   "QToggleGroupItem",

package/dist/ui.css

@@ -377,6 +377,8 @@ body *::-webkit-scrollbar-track {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  height: -moz-fit-content;
+  height: fit-content;
 }
 
 .q-badge {
@@ -2640,6 +2642,7 @@ body *::-webkit-scrollbar-track {
 .q-dialog__body-text {
   display: flex;
   justify-content: center;
+  text-align: center;
   padding: 0.25rem 1rem;
 }
 .q-dialog__footer {
@@ -2661,6 +2664,18 @@ body *::-webkit-scrollbar-track {
 .q-dialog__underlay {
   background-color: rgb(var(--q-theme-on-background-rgb)/30%);
 }
+.q-dialog__input {
+  padding: 0.25rem 1rem;
+}
+.q-dialog .q-field--invalid .q-field__extras {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--q-theme-danger);
+}
+.q-dialog .q-field--invalid .q-field__extras svg {
+  fill: var(--q-theme-danger);
+}
 
 .q-divider {
   display: flex;
@@ -4323,6 +4338,233 @@ body *::-webkit-scrollbar-track {
   caret-color: var(--q-theme-on-background);
 }
 
+.q-toaster {
+  position: fixed;
+  z-index: 9999;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  pointer-events: none;
+  padding: 0.5rem;
+  overflow: hidden;
+}
+.q-toaster[data-placement*=left] {
+  align-items: flex-start;
+}
+.q-toaster[data-placement*=center] {
+  align-items: center;
+}
+.q-toaster[data-placement*=right] {
+  align-items: flex-end;
+}
+.q-toaster[data-placement^=top] {
+  justify-content: flex-start;
+}
+.q-toaster[data-placement^=bottom] {
+  justify-content: flex-end;
+}
+
+.q-toast {
+  --q-toast-main-color: var(--q-theme-info);
+  --q-toast-on-main-color: var(--q-theme-on-info);
+  --q-toast-tonal-color: var(--q-theme-info-light);
+  max-width: calc(40em + 7 * 0.25rem);
+}
+.q-toast.q-card {
+  --card-base-padding: 0;
+  --card-padding: 0;
+  min-height: unset;
+}
+.q-toast__container {
+  pointer-events: auto;
+}
+.q-toast__title {
+  display: flex;
+  gap: 0.25rem;
+}
+.q-toast__title h4 {
+  margin-block: 0;
+}
+.q-toast__body {
+  text-wrap: wrap;
+}
+.q-toast--block {
+  max-width: unset;
+}
+.q-toast--vertical {
+  padding-bottom: 1rem;
+  padding-top: 0.25rem;
+}
+.q-toast--bold {
+  background-color: var(--q-toast-main-color);
+  border-color: var(--q-toast-main-color);
+  color: var(--q-toast-on-main-color);
+}
+.q-toast--tonal {
+  background-color: var(--q-toast-tonal-color);
+  border-color: transparent;
+  color: var(--q-toast-hover-color);
+}
+.q-toast--tonal .q-toast__dismiss.q-button {
+  --q-button-main-color: var(--q-toast-hover-color);
+}
+.q-toast--outlined {
+  background-color: transparent;
+  border-color: var(--q-toast-main-color);
+  color: var(--q-toast-main-color);
+}
+.q-toast--primary {
+  --q-toast-main-color: var(--q-theme-primary);
+  --q-toast-main-color-rgb: var(--q-theme-primary-rgb);
+  --q-toast-on-main-color: var(--q-theme-on-primary);
+  --q-toast-on-main-color-rgb: var(--q-theme-on-primary-rgb);
+  --q-toast-hover-color: var(--q-theme-primary-dark);
+  --q-toast-hover-color-rgb: var(--q-theme-primary-dark-rgb);
+  --q-toast-on-hover-color: var(--q-theme-on-primary);
+  --q-toast-on-hover-color-rgb: var(--q-theme-on-primary-rgb);
+}
+.q-toast--secondary {
+  --q-toast-main-color: var(--q-theme-secondary);
+  --q-toast-main-color-rgb: var(--q-theme-secondary-rgb);
+  --q-toast-on-main-color: var(--q-theme-on-secondary);
+  --q-toast-on-main-color-rgb: var(--q-theme-on-secondary-rgb);
+  --q-toast-hover-color: var(--q-theme-secondary-dark);
+  --q-toast-hover-color-rgb: var(--q-theme-secondary-dark-rgb);
+  --q-toast-on-hover-color: var(--q-theme-on-secondary);
+  --q-toast-on-hover-color-rgb: var(--q-theme-on-secondary-rgb);
+}
+.q-toast--highlight {
+  --q-toast-main-color: var(--q-theme-highlight);
+  --q-toast-main-color-rgb: var(--q-theme-highlight-rgb);
+  --q-toast-on-main-color: var(--q-theme-on-highlight);
+  --q-toast-on-main-color-rgb: var(--q-theme-on-highlight-rgb);
+  --q-toast-hover-color: var(--q-theme-highlight-dark);
+  --q-toast-hover-color-rgb: var(--q-theme-highlight-dark-rgb);
+  --q-toast-on-hover-color: var(--q-theme-on-highlight);
+  --q-toast-on-hover-color-rgb: var(--q-theme-on-highlight-rgb);
+}
+.q-toast--info {
+  --q-toast-main-color: var(--q-theme-info);
+  --q-toast-main-color-rgb: var(--q-theme-info-rgb);
+  --q-toast-on-main-color: var(--q-theme-on-info);
+  --q-toast-on-main-color-rgb: var(--q-theme-on-info-rgb);
+  --q-toast-hover-color: var(--q-theme-info-dark);
+  --q-toast-hover-color-rgb: var(--q-theme-info-dark-rgb);
+  --q-toast-on-hover-color: var(--q-theme-on-info);
+  --q-toast-on-hover-color-rgb: var(--q-theme-on-info-rgb);
+}
+.q-toast--success {
+  --q-toast-main-color: var(--q-theme-success);
+  --q-toast-main-color-rgb: var(--q-theme-success-rgb);
+  --q-toast-on-main-color: var(--q-theme-on-success);
+  --q-toast-on-main-color-rgb: var(--q-theme-on-success-rgb);
+  --q-toast-hover-color: var(--q-theme-success-dark);
+  --q-toast-hover-color-rgb: var(--q-theme-success-dark-rgb);
+  --q-toast-on-hover-color: var(--q-theme-on-success);
+  --q-toast-on-hover-color-rgb: var(--q-theme-on-success-rgb);
+}
+.q-toast--warning {
+  --q-toast-main-color: var(--q-theme-warning);
+  --q-toast-main-color-rgb: var(--q-theme-warning-rgb);
+  --q-toast-on-main-color: var(--q-theme-on-warning);
+  --q-toast-on-main-color-rgb: var(--q-theme-on-warning-rgb);
+  --q-toast-hover-color: var(--q-theme-warning-dark);
+  --q-toast-hover-color-rgb: var(--q-theme-warning-dark-rgb);
+  --q-toast-on-hover-color: var(--q-theme-on-warning);
+  --q-toast-on-hover-color-rgb: var(--q-theme-on-warning-rgb);
+}
+.q-toast--danger {
+  --q-toast-main-color: var(--q-theme-danger);
+  --q-toast-main-color-rgb: var(--q-theme-danger-rgb);
+  --q-toast-on-main-color: var(--q-theme-on-danger);
+  --q-toast-on-main-color-rgb: var(--q-theme-on-danger-rgb);
+  --q-toast-hover-color: var(--q-theme-danger-dark);
+  --q-toast-hover-color-rgb: var(--q-theme-danger-dark-rgb);
+  --q-toast-on-hover-color: var(--q-theme-on-danger);
+  --q-toast-on-hover-color-rgb: var(--q-theme-on-danger-rgb);
+}
+.q-toast--neutral {
+  --q-toast-main-color: var(--q-theme-neutral);
+  --q-toast-main-color-rgb: var(--q-theme-neutral-rgb);
+  --q-toast-on-main-color: var(--q-theme-on-neutral);
+  --q-toast-on-main-color-rgb: var(--q-theme-on-neutral-rgb);
+  --q-toast-hover-color: var(--q-theme-neutral-dark);
+  --q-toast-hover-color-rgb: var(--q-theme-neutral-dark-rgb);
+  --q-toast-on-hover-color: var(--q-theme-on-neutral);
+  --q-toast-on-hover-color-rgb: var(--q-theme-on-neutral-rgb);
+}
+
+.toast-stack-enter-active {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.toast-stack-leave-active {
+  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
+}
+
+.toast-stack-move {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.toast-stack-enter-from {
+  opacity: 0;
+  transform: translateY(clamp(1rem, 3vw, 1.5rem)) scale(0.96);
+}
+
+.toast-stack-leave-to[data-placement*=right] {
+  opacity: 0;
+  transform: translateX(calc(100% + clamp(1rem, 4vw, 2.5rem))) scale(0.94);
+}
+
+.toast-stack-leave-to[data-placement*=left] {
+  opacity: 0;
+  transform: translateX(calc(-100% - clamp(1rem, 4vw, 2.5rem))) scale(0.94);
+}
+
+.toast-stack-leave-to[data-placement^=top] {
+  opacity: 0;
+  transform: translateY(calc(-1 * clamp(1rem, 3vw, 1.5rem))) scale(0.94);
+}
+
+.toast-stack-leave-to[data-placement^=bottom] {
+  opacity: 0;
+  transform: translateY(clamp(1rem, 3vw, 1.5rem)) scale(0.94);
+}
+
+.toast-stack-leave-to[data-placement$=center] {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+.toast-stack-leave-to {
+  opacity: 0;
+  transform: scale(0.94);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast-stack-enter-active,
+  .toast-stack-leave-active,
+  .toast-stack-move {
+    transition-duration: 0.1s;
+    transition-timing-function: ease;
+  }
+  .toast-stack-enter-from,
+  .toast-stack-leave-to {
+    transform: none;
+  }
+}
+.toast-stack-enter-active,
+.toast-stack-leave-active {
+  will-change: transform, opacity;
+}
+
+.toast-stack-enter-to,
+.toast-stack-leave-to {
+  will-change: auto;
+}
+
 .q-toggle--active {
   z-index: 2;
   color: var(--q-theme-primary-dark);