@quidgest/ui 0.16.13 → 0.16.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/manifest/components.json +2 -0
  2. package/dist/ui.css +229 -0
  3. package/dist/ui.esm.js +5025 -4776
  4. package/dist/ui.js +18 -18
  5. package/dist/ui.min.css +1 -1
  6. package/dist/ui.min.js +1041 -1021
  7. package/dist/ui.scss +154 -1
  8. package/esm/components/QCombobox/QCombobox.d.ts +40 -0
  9. package/esm/components/QCombobox/QCombobox.d.ts.map +1 -1
  10. package/esm/components/QCombobox/QCombobox.vue.js +126 -117
  11. package/esm/components/QCombobox/index.d.ts +20 -0
  12. package/esm/components/QCombobox/index.d.ts.map +1 -1
  13. package/esm/components/QSidebar/QSidebarPanel.d.ts +2 -2
  14. package/esm/components/QSidebar/QSidebarPanel.vue.js +24 -25
  15. package/esm/components/QToast/QToast.d.ts +33 -0
  16. package/esm/components/QToast/QToast.d.ts.map +1 -0
  17. package/esm/components/QToast/QToast.vue.js +212 -0
  18. package/esm/components/QToast/QToast.vue2.js +4 -0
  19. package/esm/components/QToast/QToaster.d.ts +6 -0
  20. package/esm/components/QToast/QToaster.d.ts.map +1 -0
  21. package/esm/components/QToast/QToaster.vue.js +48 -0
  22. package/esm/components/QToast/QToaster.vue2.js +4 -0
  23. package/esm/components/QToast/index.d.ts +56 -0
  24. package/esm/components/QToast/index.d.ts.map +1 -0
  25. package/esm/components/QToast/index.js +8 -0
  26. package/esm/components/QToast/types.d.ts +69 -0
  27. package/esm/components/QToast/types.d.ts.map +1 -0
  28. package/esm/components/QToast/types.js +8 -0
  29. package/esm/components/index.d.ts +1 -0
  30. package/esm/components/index.d.ts.map +1 -1
  31. package/esm/components/index.js +15 -12
  32. package/esm/composables/index.d.ts +1 -0
  33. package/esm/composables/index.d.ts.map +1 -1
  34. package/esm/composables/useDialog/types.d.ts +1 -1
  35. package/esm/composables/useDialog/types.d.ts.map +1 -1
  36. package/esm/composables/useToast/index.d.ts +33 -0
  37. package/esm/composables/useToast/index.d.ts.map +1 -0
  38. package/esm/composables/useToast/index.js +35 -0
  39. package/esm/composables/useToast/types.d.ts +40 -0
  40. package/esm/composables/useToast/types.d.ts.map +1 -0
  41. package/esm/composables/useToast/types.js +4 -0
  42. package/esm/framework.d.ts.map +1 -1
  43. package/esm/framework.js +25 -19
  44. package/esm/index.d.ts +2 -0
  45. package/esm/index.js +7 -5
  46. package/esm/utils/color.js +29 -24
  47. package/package.json +1 -1
package/dist/manifest/components.json CHANGED
@@ -51,6 +51,8 @@
51
51
  "QTextArea",
52
52
  "QTextField",
53
53
  "QThemeProvider",
54
+ "QToast",
55
+ "QToaster",
54
56
  "QToggle",
55
57
  "QToggleGroup",
56
58
  "QToggleGroupItem",
package/dist/ui.css CHANGED
@@ -377,6 +377,8 @@ body *::-webkit-scrollbar-track {
377
377
  display: flex;
378
378
  flex-direction: column;
379
379
  gap: 0.25rem;
380
+ height: -moz-fit-content;
381
+ height: fit-content;
380
382
  }
381
383
 
382
384
  .q-badge {
@@ -4323,6 +4325,233 @@ body *::-webkit-scrollbar-track {
4323
4325
  caret-color: var(--q-theme-on-background);
4324
4326
  }
4325
4327
 
4328
+ .q-toaster {
4329
+ position: fixed;
4330
+ z-index: 9999;
4331
+ inset: 0;
4332
+ display: flex;
4333
+ flex-direction: column;
4334
+ gap: 0.5rem;
4335
+ pointer-events: none;
4336
+ padding: 0.5rem;
4337
+ overflow: hidden;
4338
+ }
4339
+ .q-toaster[data-placement*=left] {
4340
+ align-items: flex-start;
4341
+ }
4342
+ .q-toaster[data-placement*=center] {
4343
+ align-items: center;
4344
+ }
4345
+ .q-toaster[data-placement*=right] {
4346
+ align-items: flex-end;
4347
+ }
4348
+ .q-toaster[data-placement^=top] {
4349
+ justify-content: flex-start;
4350
+ }
4351
+ .q-toaster[data-placement^=bottom] {
4352
+ justify-content: flex-end;
4353
+ }
4354
+
4355
+ .q-toast {
4356
+ --q-toast-main-color: var(--q-theme-info);
4357
+ --q-toast-on-main-color: var(--q-theme-on-info);
4358
+ --q-toast-tonal-color: var(--q-theme-info-light);
4359
+ max-width: calc(40em + 7 * 0.25rem);
4360
+ }
4361
+ .q-toast.q-card {
4362
+ --card-base-padding: 0;
4363
+ --card-padding: 0;
4364
+ min-height: unset;
4365
+ }
4366
+ .q-toast__container {
4367
+ pointer-events: auto;
4368
+ }
4369
+ .q-toast__title {
4370
+ display: flex;
4371
+ gap: 0.25rem;
4372
+ }
4373
+ .q-toast__title h4 {
4374
+ margin-block: 0;
4375
+ }
4376
+ .q-toast__body {
4377
+ text-wrap: wrap;
4378
+ }
4379
+ .q-toast--block {
4380
+ max-width: unset;
4381
+ }
4382
+ .q-toast--vertical {
4383
+ padding-bottom: 1rem;
4384
+ padding-top: 0.25rem;
4385
+ }
4386
+ .q-toast--bold {
4387
+ background-color: var(--q-toast-main-color);
4388
+ border-color: var(--q-toast-main-color);
4389
+ color: var(--q-toast-on-main-color);
4390
+ }
4391
+ .q-toast--tonal {
4392
+ background-color: var(--q-toast-tonal-color);
4393
+ border-color: transparent;
4394
+ color: var(--q-toast-hover-color);
4395
+ }
4396
+ .q-toast--tonal .q-toast__dismiss.q-button {
4397
+ --q-button-main-color: var(--q-toast-hover-color);
4398
+ }
4399
+ .q-toast--outlined {
4400
+ background-color: transparent;
4401
+ border-color: var(--q-toast-main-color);
4402
+ color: var(--q-toast-main-color);
4403
+ }
4404
+ .q-toast--primary {
4405
+ --q-toast-main-color: var(--q-theme-primary);
4406
+ --q-toast-main-color-rgb: var(--q-theme-primary-rgb);
4407
+ --q-toast-on-main-color: var(--q-theme-on-primary);
4408
+ --q-toast-on-main-color-rgb: var(--q-theme-on-primary-rgb);
4409
+ --q-toast-hover-color: var(--q-theme-primary-dark);
4410
+ --q-toast-hover-color-rgb: var(--q-theme-primary-dark-rgb);
4411
+ --q-toast-on-hover-color: var(--q-theme-on-primary);
4412
+ --q-toast-on-hover-color-rgb: var(--q-theme-on-primary-rgb);
4413
+ }
4414
+ .q-toast--secondary {
4415
+ --q-toast-main-color: var(--q-theme-secondary);
4416
+ --q-toast-main-color-rgb: var(--q-theme-secondary-rgb);
4417
+ --q-toast-on-main-color: var(--q-theme-on-secondary);
4418
+ --q-toast-on-main-color-rgb: var(--q-theme-on-secondary-rgb);
4419
+ --q-toast-hover-color: var(--q-theme-secondary-dark);
4420
+ --q-toast-hover-color-rgb: var(--q-theme-secondary-dark-rgb);
4421
+ --q-toast-on-hover-color: var(--q-theme-on-secondary);
4422
+ --q-toast-on-hover-color-rgb: var(--q-theme-on-secondary-rgb);
4423
+ }
4424
+ .q-toast--highlight {
4425
+ --q-toast-main-color: var(--q-theme-highlight);
4426
+ --q-toast-main-color-rgb: var(--q-theme-highlight-rgb);
4427
+ --q-toast-on-main-color: var(--q-theme-on-highlight);
4428
+ --q-toast-on-main-color-rgb: var(--q-theme-on-highlight-rgb);
4429
+ --q-toast-hover-color: var(--q-theme-highlight-dark);
4430
+ --q-toast-hover-color-rgb: var(--q-theme-highlight-dark-rgb);
4431
+ --q-toast-on-hover-color: var(--q-theme-on-highlight);
4432
+ --q-toast-on-hover-color-rgb: var(--q-theme-on-highlight-rgb);
4433
+ }
4434
+ .q-toast--info {
4435
+ --q-toast-main-color: var(--q-theme-info);
4436
+ --q-toast-main-color-rgb: var(--q-theme-info-rgb);
4437
+ --q-toast-on-main-color: var(--q-theme-on-info);
4438
+ --q-toast-on-main-color-rgb: var(--q-theme-on-info-rgb);
4439
+ --q-toast-hover-color: var(--q-theme-info-dark);
4440
+ --q-toast-hover-color-rgb: var(--q-theme-info-dark-rgb);
4441
+ --q-toast-on-hover-color: var(--q-theme-on-info);
4442
+ --q-toast-on-hover-color-rgb: var(--q-theme-on-info-rgb);
4443
+ }
4444
+ .q-toast--success {
4445
+ --q-toast-main-color: var(--q-theme-success);
4446
+ --q-toast-main-color-rgb: var(--q-theme-success-rgb);
4447
+ --q-toast-on-main-color: var(--q-theme-on-success);
4448
+ --q-toast-on-main-color-rgb: var(--q-theme-on-success-rgb);
4449
+ --q-toast-hover-color: var(--q-theme-success-dark);
4450
+ --q-toast-hover-color-rgb: var(--q-theme-success-dark-rgb);
4451
+ --q-toast-on-hover-color: var(--q-theme-on-success);
4452
+ --q-toast-on-hover-color-rgb: var(--q-theme-on-success-rgb);
4453
+ }
4454
+ .q-toast--warning {
4455
+ --q-toast-main-color: var(--q-theme-warning);
4456
+ --q-toast-main-color-rgb: var(--q-theme-warning-rgb);
4457
+ --q-toast-on-main-color: var(--q-theme-on-warning);
4458
+ --q-toast-on-main-color-rgb: var(--q-theme-on-warning-rgb);
4459
+ --q-toast-hover-color: var(--q-theme-warning-dark);
4460
+ --q-toast-hover-color-rgb: var(--q-theme-warning-dark-rgb);
4461
+ --q-toast-on-hover-color: var(--q-theme-on-warning);
4462
+ --q-toast-on-hover-color-rgb: var(--q-theme-on-warning-rgb);
4463
+ }
4464
+ .q-toast--danger {
4465
+ --q-toast-main-color: var(--q-theme-danger);
4466
+ --q-toast-main-color-rgb: var(--q-theme-danger-rgb);
4467
+ --q-toast-on-main-color: var(--q-theme-on-danger);
4468
+ --q-toast-on-main-color-rgb: var(--q-theme-on-danger-rgb);
4469
+ --q-toast-hover-color: var(--q-theme-danger-dark);
4470
+ --q-toast-hover-color-rgb: var(--q-theme-danger-dark-rgb);
4471
+ --q-toast-on-hover-color: var(--q-theme-on-danger);
4472
+ --q-toast-on-hover-color-rgb: var(--q-theme-on-danger-rgb);
4473
+ }
4474
+ .q-toast--neutral {
4475
+ --q-toast-main-color: var(--q-theme-neutral);
4476
+ --q-toast-main-color-rgb: var(--q-theme-neutral-rgb);
4477
+ --q-toast-on-main-color: var(--q-theme-on-neutral);
4478
+ --q-toast-on-main-color-rgb: var(--q-theme-on-neutral-rgb);
4479
+ --q-toast-hover-color: var(--q-theme-neutral-dark);
4480
+ --q-toast-hover-color-rgb: var(--q-theme-neutral-dark-rgb);
4481
+ --q-toast-on-hover-color: var(--q-theme-on-neutral);
4482
+ --q-toast-on-hover-color-rgb: var(--q-theme-on-neutral-rgb);
4483
+ }
4484
+
4485
+ .toast-stack-enter-active {
4486
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4487
+ }
4488
+
4489
+ .toast-stack-leave-active {
4490
+ transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1);
4491
+ will-change: transform, opacity;
4492
+ }
4493
+
4494
+ .toast-stack-move {
4495
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4496
+ }
4497
+
4498
+ .toast-stack-enter-from {
4499
+ opacity: 0;
4500
+ transform: translateY(clamp(1rem, 3vw, 1.5rem)) scale(0.96);
4501
+ }
4502
+
4503
+ .toast-stack-leave-to[data-placement*=right] {
4504
+ opacity: 0;
4505
+ transform: translateX(calc(100% + clamp(1rem, 4vw, 2.5rem))) scale(0.94);
4506
+ }
4507
+
4508
+ .toast-stack-leave-to[data-placement*=left] {
4509
+ opacity: 0;
4510
+ transform: translateX(calc(-100% - clamp(1rem, 4vw, 2.5rem))) scale(0.94);
4511
+ }
4512
+
4513
+ .toast-stack-leave-to[data-placement^=top] {
4514
+ opacity: 0;
4515
+ transform: translateY(calc(-1 * clamp(1rem, 3vw, 1.5rem))) scale(0.94);
4516
+ }
4517
+
4518
+ .toast-stack-leave-to[data-placement^=bottom] {
4519
+ opacity: 0;
4520
+ transform: translateY(clamp(1rem, 3vw, 1.5rem)) scale(0.94);
4521
+ }
4522
+
4523
+ .toast-stack-leave-to[data-placement$=center] {
4524
+ opacity: 0;
4525
+ transform: scale(0.92);
4526
+ }
4527
+
4528
+ .toast-stack-leave-to {
4529
+ opacity: 0;
4530
+ transform: scale(0.94);
4531
+ }
4532
+
4533
+ @media (prefers-reduced-motion: reduce) {
4534
+ .toast-stack-enter-active,
4535
+ .toast-stack-leave-active,
4536
+ .toast-stack-move {
4537
+ transition-duration: 0.1s;
4538
+ transition-timing-function: ease;
4539
+ }
4540
+ .toast-stack-enter-from,
4541
+ .toast-stack-leave-to {
4542
+ transform: none;
4543
+ }
4544
+ }
4545
+ .toast-stack-enter-active,
4546
+ .toast-stack-leave-active {
4547
+ will-change: transform, opacity;
4548
+ }
4549
+
4550
+ .toast-stack-enter-to,
4551
+ .toast-stack-leave-to {
4552
+ will-change: auto;
4553
+ }
4554
+
4326
4555
  .q-toggle--active {
4327
4556
  z-index: 2;
4328
4557
  color: var(--q-theme-primary-dark);