@quidgest/ui 0.12.2 → 0.13.1

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 (43) hide show
  1. package/dist/manifest/components.json +2 -0
  2. package/dist/ui.css +166 -1
  3. package/dist/ui.esm.js +1045 -830
  4. package/dist/ui.js +6 -6
  5. package/dist/ui.min.css +1 -1
  6. package/dist/ui.min.js +111 -93
  7. package/dist/ui.scss +122 -2
  8. package/esm/components/QBadge/QBadge.d.ts +72 -0
  9. package/esm/components/QBadge/QBadge.d.ts.map +1 -0
  10. package/esm/components/QBadge/QBadge.vue.js +87 -0
  11. package/esm/components/QBadge/QBadge.vue2.js +4 -0
  12. package/esm/components/QBadge/index.d.ts +119 -0
  13. package/esm/components/QBadge/index.d.ts.map +1 -0
  14. package/esm/components/QBadge/index.js +6 -0
  15. package/esm/components/QButton/index.d.ts +3 -0
  16. package/esm/components/QButton/index.d.ts.map +1 -1
  17. package/esm/components/QCombobox/QCombobox.d.ts +10 -10
  18. package/esm/components/QCombobox/index.d.ts +30 -30
  19. package/esm/components/QDialog/QDialog.d.ts +184 -0
  20. package/esm/components/QDialog/QDialog.d.ts.map +1 -0
  21. package/esm/components/QDialog/QDialog.vue.js +146 -0
  22. package/esm/components/QDialog/QDialog.vue2.js +4 -0
  23. package/esm/components/QDialog/index.d.ts +237 -0
  24. package/esm/components/QDialog/index.d.ts.map +1 -0
  25. package/esm/components/QDialog/index.js +6 -0
  26. package/esm/components/QList/index.d.ts +16 -16
  27. package/esm/components/QSelect/QSelect.d.ts.map +1 -1
  28. package/esm/components/QSelect/QSelect.vue.js +34 -34
  29. package/esm/components/QTextField/QTextField.d.ts +5 -5
  30. package/esm/components/QTextField/index.d.ts +11 -11
  31. package/esm/components/QTooltip/QTooltip.d.ts +15 -0
  32. package/esm/components/QTooltip/QTooltip.d.ts.map +1 -1
  33. package/esm/components/QTooltip/QTooltip.vue.js +44 -27
  34. package/esm/components/QTooltip/index.d.ts +20 -0
  35. package/esm/components/QTooltip/index.d.ts.map +1 -1
  36. package/esm/components/index.d.ts +2 -0
  37. package/esm/components/index.d.ts.map +1 -1
  38. package/esm/components/index.js +43 -39
  39. package/esm/index.d.ts +2 -0
  40. package/esm/utils/color.d.ts +7 -1
  41. package/esm/utils/color.d.ts.map +1 -1
  42. package/esm/utils/color.js +54 -9
  43. package/package.json +1 -1
@@ -1,8 +1,10 @@
1
1
  [
2
+ "QBadge",
2
3
  "QButton",
3
4
  "QButtonGroup",
4
5
  "QButtonToggle",
5
6
  "QCombobox",
7
+ "QDialog",
6
8
  "QField",
7
9
  "QIcon",
8
10
  "QIconFont",
package/dist/ui.css CHANGED
@@ -276,6 +276,120 @@ body *::-webkit-scrollbar-track {
276
276
  }
277
277
 
278
278
  /* Components */
279
+ .q-badge {
280
+ display: inline-flex;
281
+ border-width: 1px;
282
+ border-color: transparent;
283
+ border-radius: 0.25rem;
284
+ padding: 0.25em 0.5em;
285
+ line-height: 1rem;
286
+ font-size: 0.75rem;
287
+ position: relative;
288
+ color: var(--q-badge-text-color);
289
+ }
290
+ .q-badge__underlay {
291
+ position: absolute;
292
+ top: 0;
293
+ left: 0;
294
+ width: 100%;
295
+ height: 100%;
296
+ border-radius: inherit;
297
+ background-color: var(--q-badge-color);
298
+ opacity: 0.1;
299
+ }
300
+ .q-badge__content {
301
+ display: inline-flex;
302
+ align-items: center;
303
+ gap: 0.25rem;
304
+ min-height: 1rem;
305
+ z-index: 1;
306
+ }
307
+ .q-badge__remove.q-btn:not(:disabled) {
308
+ padding: 0;
309
+ border-radius: 9999px;
310
+ color: inherit;
311
+ }
312
+ .q-badge__remove.q-btn:not(:disabled):hover {
313
+ background-color: var(--q-badge-color);
314
+ }
315
+ .q-badge--pill {
316
+ border-radius: 9999px;
317
+ }
318
+ .q-badge--bold .q-badge__underlay {
319
+ opacity: 1;
320
+ }
321
+ .q-badge--outlined {
322
+ border-color: currentColor;
323
+ }
324
+ .q-badge--outlined .q-badge__underlay {
325
+ opacity: 0;
326
+ }
327
+ .q-badge--primary {
328
+ --q-badge-color: var(--q-theme-primary);
329
+ }
330
+ .q-badge--primary.q-badge--tonal, .q-badge--primary.q-badge--outlined {
331
+ --q-badge-text-color: var(--q-theme-primary);
332
+ }
333
+ .q-badge--primary.q-badge--bold {
334
+ --q-badge-text-color: var(--q-theme-on-primary);
335
+ }
336
+ .q-badge--primary.q-badge--bold .q-badge__remove.q-btn:not(:disabled):hover {
337
+ background-color: var(--q-badge-text-color);
338
+ color: var(--q-badge-color);
339
+ }
340
+ .q-badge--info {
341
+ --q-badge-color: var(--q-theme-info);
342
+ }
343
+ .q-badge--info.q-badge--tonal, .q-badge--info.q-badge--outlined {
344
+ --q-badge-text-color: var(--q-theme-info);
345
+ }
346
+ .q-badge--info.q-badge--bold {
347
+ --q-badge-text-color: var(--q-theme-on-info);
348
+ }
349
+ .q-badge--info.q-badge--bold .q-badge__remove.q-btn:not(:disabled):hover {
350
+ background-color: var(--q-badge-text-color);
351
+ color: var(--q-badge-color);
352
+ }
353
+ .q-badge--success {
354
+ --q-badge-color: var(--q-theme-success);
355
+ }
356
+ .q-badge--success.q-badge--tonal, .q-badge--success.q-badge--outlined {
357
+ --q-badge-text-color: var(--q-theme-success);
358
+ }
359
+ .q-badge--success.q-badge--bold {
360
+ --q-badge-text-color: var(--q-theme-on-success);
361
+ }
362
+ .q-badge--success.q-badge--bold .q-badge__remove.q-btn:not(:disabled):hover {
363
+ background-color: var(--q-badge-text-color);
364
+ color: var(--q-badge-color);
365
+ }
366
+ .q-badge--warning {
367
+ --q-badge-color: var(--q-theme-warning);
368
+ }
369
+ .q-badge--warning.q-badge--tonal, .q-badge--warning.q-badge--outlined {
370
+ --q-badge-text-color: var(--q-theme-warning);
371
+ }
372
+ .q-badge--warning.q-badge--bold {
373
+ --q-badge-text-color: var(--q-theme-on-warning);
374
+ }
375
+ .q-badge--warning.q-badge--bold .q-badge__remove.q-btn:not(:disabled):hover {
376
+ background-color: var(--q-badge-text-color);
377
+ color: var(--q-badge-color);
378
+ }
379
+ .q-badge--danger {
380
+ --q-badge-color: var(--q-theme-danger);
381
+ }
382
+ .q-badge--danger.q-badge--tonal, .q-badge--danger.q-badge--outlined {
383
+ --q-badge-text-color: var(--q-theme-danger);
384
+ }
385
+ .q-badge--danger.q-badge--bold {
386
+ --q-badge-text-color: var(--q-theme-on-danger);
387
+ }
388
+ .q-badge--danger.q-badge--bold .q-badge__remove.q-btn:not(:disabled):hover {
389
+ background-color: var(--q-badge-text-color);
390
+ color: var(--q-badge-color);
391
+ }
392
+
279
393
  .q-btn {
280
394
  --box-shadow-tint: 0 0 0;
281
395
  position: relative;
@@ -457,6 +571,53 @@ body *::-webkit-scrollbar-track {
457
571
  transition: all 0.2s;
458
572
  }
459
573
 
574
+ .q-dialog {
575
+ display: flex;
576
+ flex-direction: column;
577
+ align-items: center;
578
+ justify-content: center;
579
+ max-width: 50rem;
580
+ min-width: 20rem;
581
+ padding: 0.25rem;
582
+ }
583
+
584
+ .q-dialog__header {
585
+ display: flex;
586
+ width: 100%;
587
+ justify-content: space-between;
588
+ padding: 0.4rem 0.25rem;
589
+ }
590
+ .q-dialog__header-title {
591
+ align-self: flex-start;
592
+ font-weight: 700;
593
+ padding: 0.4rem;
594
+ font-size: 1rem;
595
+ }
596
+
597
+ .q-dialog__header .q-btn {
598
+ align-items: center;
599
+ }
600
+
601
+ .q-dialog__body {
602
+ display: flex;
603
+ flex-direction: column;
604
+ align-items: center;
605
+ padding: 0.25rem 0.65rem;
606
+ gap: 0.4rem;
607
+ }
608
+ .q-dialog__body-icon svg {
609
+ height: 5em;
610
+ width: 5em;
611
+ }
612
+ .q-dialog__body-actions {
613
+ display: flex;
614
+ justify-content: center;
615
+ flex-wrap: wrap;
616
+ gap: 0.5rem;
617
+ padding: 0.65rem;
618
+ padding-bottom: 0.5rem;
619
+ }
620
+
460
621
  .q-field {
461
622
  display: flex;
462
623
  flex-direction: column;
@@ -739,6 +900,7 @@ body *::-webkit-scrollbar-track {
739
900
  .q-list-item__description .q-icon {
740
901
  font-size: inherit;
741
902
  flex-shrink: 0;
903
+ height: 1lh;
742
904
  }
743
905
  .q-list-item + .q-list-item {
744
906
  margin-top: 1px;
@@ -1023,8 +1185,11 @@ body *::-webkit-scrollbar-track {
1023
1185
  }
1024
1186
 
1025
1187
  .q-tooltip .q-overlay__content {
1188
+ display: flex;
1189
+ flex-direction: column;
1190
+ gap: 0.25rem;
1191
+ align-items: center;
1026
1192
  padding: 0.5rem;
1027
- text-align: center;
1028
1193
  font-style: normal;
1029
1194
  font-size: 0.81rem;
1030
1195
  font-weight: 400;