@quidgest/ui 0.14.5 → 0.14.6

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 (39) hide show
  1. package/dist/manifest/components.json +2 -0
  2. package/dist/ui.css +163 -20
  3. package/dist/ui.esm.js +1115 -961
  4. package/dist/ui.js +6 -6
  5. package/dist/ui.min.css +1 -1
  6. package/dist/ui.min.js +193 -180
  7. package/dist/ui.scss +176 -22
  8. package/esm/components/QAccordion/QAccordion.d.ts +26 -0
  9. package/esm/components/QAccordion/QAccordion.d.ts.map +1 -0
  10. package/esm/components/QAccordion/QAccordion.vue.js +27 -0
  11. package/esm/components/QAccordion/QAccordion.vue2.js +4 -0
  12. package/esm/components/QAccordion/index.d.ts +4 -0
  13. package/esm/components/QAccordion/index.d.ts.map +1 -0
  14. package/esm/components/QAccordion/index.js +6 -0
  15. package/esm/components/QAccordion/types.d.ts +7 -0
  16. package/esm/components/QAccordion/types.d.ts.map +1 -0
  17. package/esm/components/QCard/QCard.d.ts +1 -1
  18. package/esm/components/QCollapsible/QCollapsible.d.ts +35 -0
  19. package/esm/components/QCollapsible/QCollapsible.d.ts.map +1 -0
  20. package/esm/components/QCollapsible/QCollapsible.vue.js +143 -0
  21. package/esm/components/QCollapsible/QCollapsible.vue2.js +4 -0
  22. package/esm/components/QCollapsible/index.d.ts +6 -0
  23. package/esm/components/QCollapsible/index.d.ts.map +1 -0
  24. package/esm/components/QCollapsible/index.js +6 -0
  25. package/esm/components/QCollapsible/types.d.ts +43 -0
  26. package/esm/components/QCollapsible/types.d.ts.map +1 -0
  27. package/esm/components/QCollapsible/types.js +8 -0
  28. package/esm/components/QCombobox/QCombobox.d.ts +9 -9
  29. package/esm/components/QIcon/QIconFont.d.ts +1 -1
  30. package/esm/components/QTextField/QTextField.d.ts +1 -1
  31. package/esm/components/QTooltip/QTooltip.d.ts +1 -1
  32. package/esm/components/index.d.ts +2 -0
  33. package/esm/components/index.d.ts.map +1 -1
  34. package/esm/components/index.js +56 -52
  35. package/esm/composables/group.d.ts +16 -0
  36. package/esm/composables/group.d.ts.map +1 -0
  37. package/esm/composables/group.js +34 -0
  38. package/esm/index.d.ts +2 -0
  39. package/package.json +4 -1
package/dist/manifest/components.json CHANGED
@@ -1,10 +1,12 @@
1
1
  [
2
+ "QAccordion",
2
3
  "QBadge",
3
4
  "QButton",
4
5
  "QButtonGroup",
5
6
  "QButtonToggle",
6
7
  "QCard",
7
8
  "QCheckbox",
9
+ "QCollapsible",
8
10
  "QCombobox",
9
11
  "QDialog",
10
12
  "QField",
package/dist/ui.css CHANGED
@@ -231,6 +231,10 @@ summary {
231
231
  }
232
232
 
233
233
  /* global settings */
234
+ :root {
235
+ --border-radius: 0.25rem;
236
+ }
237
+
234
238
  *,
235
239
  ::after,
236
240
  ::before {
@@ -253,11 +257,11 @@ body *::-webkit-scrollbar {
253
257
  }
254
258
  body *::-webkit-scrollbar-thumb {
255
259
  background-color: var(--q-theme-neutral-light);
256
- border-radius: 0.25rem;
260
+ border-radius: var(--border-radius);
257
261
  }
258
262
  body *::-webkit-scrollbar-track {
259
263
  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
260
- border-radius: 0.25rem;
264
+ border-radius: var(--border-radius);
261
265
  }
262
266
 
263
267
  .fade-enter-from,
@@ -276,11 +280,17 @@ body *::-webkit-scrollbar-track {
276
280
  }
277
281
 
278
282
  /* Components */
283
+ .q-accordion {
284
+ display: flex;
285
+ flex-direction: column;
286
+ gap: 0.25rem;
287
+ }
288
+
279
289
  .q-badge {
280
290
  display: inline-flex;
281
291
  border-width: 1px;
282
292
  border-color: transparent;
283
- border-radius: 0.25rem;
293
+ border-radius: var(--border-radius);
284
294
  padding: 0.25em 0.5em;
285
295
  line-height: 1rem;
286
296
  font-size: 0.75rem;
@@ -402,7 +412,7 @@ body *::-webkit-scrollbar-track {
402
412
  user-select: none;
403
413
  -webkit-user-select: none;
404
414
  -moz-user-select: none;
405
- border-radius: 0.25rem;
415
+ border-radius: var(--border-radius);
406
416
  transition-property: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke;
407
417
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
408
418
  transition-duration: 0.15s;
@@ -524,7 +534,7 @@ body *::-webkit-scrollbar-track {
524
534
  --box-shadow-tint: 0 0 0;
525
535
  position: relative;
526
536
  display: inline-flex;
527
- border-radius: 0.25rem;
537
+ border-radius: var(--border-radius);
528
538
  }
529
539
  .q-btn-group--elevated {
530
540
  --box-shadow-tint: var(--q-theme-primary-rgb);
@@ -559,7 +569,7 @@ body *::-webkit-scrollbar-track {
559
569
  min-height: 5rem;
560
570
  min-width: 7rem;
561
571
  border: var(--card-border);
562
- border-radius: 0.25rem;
572
+ border-radius: var(--border-radius);
563
573
  background-color: var(--card-background);
564
574
  width: var(--card-width);
565
575
  overflow: hidden;
@@ -698,7 +708,7 @@ body *::-webkit-scrollbar-track {
698
708
  width: var(--box-size);
699
709
  height: var(--box-size);
700
710
  border: 1px solid var(--q-theme-neutral-light);
701
- border-radius: 0.25rem;
711
+ border-radius: var(--border-radius);
702
712
  padding: 0;
703
713
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
704
714
  background-color: transparent;
@@ -781,6 +791,139 @@ body *::-webkit-scrollbar-track {
781
791
  transition: none;
782
792
  }
783
793
  }
794
+ .q-collapsible {
795
+ display: flex;
796
+ flex-direction: column;
797
+ word-wrap: break-word;
798
+ background-color: var(--q-theme-container);
799
+ border-width: 1px;
800
+ border-radius: var(--border-radius);
801
+ position: relative;
802
+ max-width: 100%;
803
+ min-height: 0;
804
+ }
805
+ .q-collapsible .q-collapsible__chevron {
806
+ transition: all 0.2s;
807
+ font-weight: 600;
808
+ }
809
+ .q-collapsible .q-collapsible__chevron:hover, .q-collapsible .q-collapsible__chevron:focus {
810
+ cursor: pointer;
811
+ opacity: 1;
812
+ }
813
+ .q-collapsible:not(.q-collapsible--borderless) .q-collapsible__chevron-right {
814
+ position: absolute;
815
+ right: 0;
816
+ }
817
+ .q-collapsible--expanded .q-collapsible__chevron {
818
+ transform: rotate(-180deg);
819
+ }
820
+ .q-collapsible .q-card__content {
821
+ padding: 0;
822
+ }
823
+ .q-collapsible .q-card__header {
824
+ padding-bottom: 0;
825
+ }
826
+ .q-collapsible__header {
827
+ display: flex;
828
+ position: relative;
829
+ width: 100%;
830
+ margin: 0;
831
+ border-bottom: 1px solid var(--q-theme-neutral-light);
832
+ overflow: hidden;
833
+ gap: 0;
834
+ justify-content: start;
835
+ align-items: flex-start;
836
+ flex-direction: column;
837
+ padding: 0.55rem;
838
+ }
839
+ .q-collapsible__btn {
840
+ width: 100%;
841
+ margin: 0;
842
+ padding: 0;
843
+ }
844
+ .q-collapsible__btn .q-btn__content {
845
+ width: 100%;
846
+ gap: 0;
847
+ padding: 0.2rem;
848
+ display: flex;
849
+ flex-direction: column;
850
+ align-items: start;
851
+ letter-spacing: 0.02rem;
852
+ color: var(--q-theme-on-background);
853
+ }
854
+ .q-collapsible__btn .q-btn__content h4 {
855
+ margin: 0;
856
+ }
857
+ .q-collapsible__title {
858
+ display: flex;
859
+ width: 100%;
860
+ gap: 0.2rem;
861
+ position: relative;
862
+ text-align: start;
863
+ align-items: center;
864
+ padding: 0;
865
+ }
866
+ .q-collapsible__title-text {
867
+ font-weight: 600;
868
+ }
869
+ .q-collapsible__subtitle {
870
+ margin-left: 1.25rem;
871
+ text-align: start;
872
+ line-height: 0.75rem;
873
+ font-size: 0.75rem;
874
+ text-decoration: none;
875
+ white-space: nowrap;
876
+ color: var(--q-theme-neutral);
877
+ padding: 0;
878
+ padding-top: 0.3rem;
879
+ }
880
+ .q-collapsible__content {
881
+ padding: 1rem;
882
+ padding-top: 0.75rem;
883
+ }
884
+ .q-collapsible__content-wrapper {
885
+ display: grid;
886
+ grid-template-rows: 0fr;
887
+ transition: 0.5s;
888
+ }
889
+ .q-collapsible__content-wrapper:not(.q-collapsible__content-show) {
890
+ pointer-events: none;
891
+ visibility: hidden;
892
+ }
893
+ .q-collapsible__content-inner {
894
+ overflow: hidden;
895
+ overflow-x: inherit;
896
+ }
897
+ .q-collapsible__content-show {
898
+ grid-template-rows: 1fr;
899
+ }
900
+ .q-collapsible--border-bottom {
901
+ border-radius: 0;
902
+ border: 0;
903
+ border-bottom: 1px solid var(--q-theme-neutral-light);
904
+ }
905
+ .q-collapsible--border-bottom .q-collapsible__header {
906
+ border: 0;
907
+ }
908
+ .q-collapsible--required {
909
+ margin-top: -0.3rem;
910
+ margin-left: 0.1rem;
911
+ font-weight: 700;
912
+ color: var(--q-theme-danger);
913
+ }
914
+ .q-collapsible--icon-right:not(.q-collapsible--borderless) .q-collapsible__title .q-icon {
915
+ margin: 0 0 0 auto;
916
+ }
917
+ .q-collapsible--icon-right .q-collapsible__subtitle {
918
+ margin-left: 0;
919
+ }
920
+ .q-collapsible--loose .q-collapsible__header {
921
+ padding: calc(0.55rem + 0.25rem);
922
+ }
923
+ .q-collapsible--compact .q-collapsible__header {
924
+ padding: calc(0.55rem + -0.25rem);
925
+ }
926
+
784
927
  .q-combobox:not(.q-combobox--disabled) .q-combobox__clear:hover, .q-combobox:not(.q-combobox--disabled) .q-combobox__clear:focus,
785
928
  .q-combobox:not(.q-combobox--disabled) .q-combobox__chevron:hover,
786
929
  .q-combobox:not(.q-combobox--disabled) .q-combobox__chevron:focus {
@@ -859,7 +1002,7 @@ body *::-webkit-scrollbar-track {
859
1002
  .q-field {
860
1003
  display: flex;
861
1004
  flex-direction: column;
862
- border-radius: 0.25rem;
1005
+ border-radius: var(--border-radius);
863
1006
  width: -moz-fit-content;
864
1007
  width: fit-content;
865
1008
  }
@@ -954,12 +1097,12 @@ body *::-webkit-scrollbar-track {
954
1097
  }
955
1098
 
956
1099
  .q-input-group__prepend > :first-child {
957
- border-top-left-radius: 0.25rem;
958
- border-bottom-left-radius: 0.25rem;
1100
+ border-top-left-radius: var(--border-radius);
1101
+ border-bottom-left-radius: var(--border-radius);
959
1102
  }
960
1103
  .q-input-group__append > :last-child {
961
- border-top-right-radius: 0.25rem;
962
- border-bottom-right-radius: 0.25rem;
1104
+ border-top-right-radius: var(--border-radius);
1105
+ border-bottom-right-radius: var(--border-radius);
963
1106
  }
964
1107
  .q-input-group__prepend, .q-input-group__append {
965
1108
  display: flex;
@@ -1002,12 +1145,12 @@ body *::-webkit-scrollbar-track {
1002
1145
  z-index: 2;
1003
1146
  }
1004
1147
  .q-input-group > .q-field__control > :first-child {
1005
- border-top-left-radius: 0.25rem;
1006
- border-bottom-left-radius: 0.25rem;
1148
+ border-top-left-radius: var(--border-radius);
1149
+ border-bottom-left-radius: var(--border-radius);
1007
1150
  }
1008
1151
  .q-input-group > .q-field__control > :last-child {
1009
- border-top-right-radius: 0.25rem;
1010
- border-bottom-right-radius: 0.25rem;
1152
+ border-top-right-radius: var(--border-radius);
1153
+ border-bottom-right-radius: var(--border-radius);
1011
1154
  }
1012
1155
  .q-input-group > .q-field__control > * + * {
1013
1156
  margin-left: -1px;
@@ -1056,7 +1199,7 @@ body *::-webkit-scrollbar-track {
1056
1199
  padding: 0;
1057
1200
  -webkit-overflow-scrolling: touch;
1058
1201
  width: 100%;
1059
- border-radius: 0.25rem;
1202
+ border-radius: var(--border-radius);
1060
1203
  }
1061
1204
 
1062
1205
  .q-list-item-group {
@@ -1091,7 +1234,7 @@ body *::-webkit-scrollbar-track {
1091
1234
  word-wrap: break-word;
1092
1235
  -webkit-touch-callout: none;
1093
1236
  width: inherit;
1094
- border-radius: 0.25rem;
1237
+ border-radius: var(--border-radius);
1095
1238
  outline: none;
1096
1239
  }
1097
1240
  .q-list-item:hover {
@@ -1171,7 +1314,7 @@ body *::-webkit-scrollbar-track {
1171
1314
  background-color: var(--q-overlay-bg);
1172
1315
  color: var(--q-overlay-color);
1173
1316
  border: 1px solid var(--q-overlay-border-color);
1174
- border-radius: 0.25rem;
1317
+ border-radius: var(--border-radius);
1175
1318
  outline: none;
1176
1319
  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
1177
1320
  }
@@ -1413,7 +1556,7 @@ body *::-webkit-scrollbar-track {
1413
1556
  overflow: hidden;
1414
1557
  background-color: var(--q-theme-neutral-light);
1415
1558
  animation: fadeIn 1s;
1416
- border-radius: 0.25rem;
1559
+ border-radius: var(--border-radius);
1417
1560
  }
1418
1561
  .q-skeleton-loader__bone::after {
1419
1562
  position: absolute;