@quidgest/ui 0.20.1 → 0.21.0

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 (129) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +10 -0
  3. package/dist/json/api.json +36 -1
  4. package/dist/ui.css +52 -248
  5. package/dist/ui.esm.js +782 -677
  6. package/dist/ui.js +718 -613
  7. package/dist/ui.min.css +1 -1
  8. package/dist/ui.min.js +718 -613
  9. package/dist/ui.scss +74 -34
  10. package/esm/components/QAccordion/QAccordionItem.vue.js +1 -1
  11. package/esm/components/QBadge/QBadge.d.ts.map +1 -1
  12. package/esm/components/QBadge/QBadge.vue.js +20 -24
  13. package/esm/components/QButton/QButton.d.ts.map +1 -1
  14. package/esm/components/QButton/QButton.vue.js +32 -29
  15. package/esm/components/QCheckbox/QCheckbox.vue.js +1 -1
  16. package/esm/components/QDialog/QDialog.d.ts +4 -2
  17. package/esm/components/QDialog/QDialog.d.ts.map +1 -1
  18. package/esm/components/QDialog/QDialog.vue.js +84 -74
  19. package/esm/components/QDialog/QDialogProvider.d.ts.map +1 -1
  20. package/esm/components/QDialog/QDialogProvider.vue.js +21 -12
  21. package/esm/components/QDialog/index.d.ts +72 -3
  22. package/esm/components/QDialog/index.d.ts.map +1 -1
  23. package/esm/components/QDialog/types.d.ts +10 -1
  24. package/esm/components/QDialog/types.d.ts.map +1 -1
  25. package/esm/components/QDismissibleLayer/QDismissibleLayer.d.ts.map +1 -1
  26. package/esm/components/QDismissibleLayer/QDismissibleLayer.vue.js +9 -8
  27. package/esm/components/QDivider/QDivider.d.ts.map +1 -1
  28. package/esm/components/QDivider/QDivider.vue.js +3 -3
  29. package/esm/components/QFileUpload/QFileUpload.vue.js +1 -1
  30. package/esm/components/QGauge/QGauge.vue.js +1 -1
  31. package/esm/components/QList/QListItem.d.ts.map +1 -1
  32. package/esm/components/QList/QListItem.vue.js +5 -2
  33. package/esm/components/QList/QListItemGroup.vue.js +1 -1
  34. package/esm/components/QObfuscation/QObfuscation.vue.js +1 -1
  35. package/esm/components/QPhoneField/QPhoneField.d.ts.map +1 -1
  36. package/esm/components/QPhoneField/QPhoneField.vue.js +1 -1
  37. package/esm/components/QPropertyList/QPropertyListGroup.vue.js +1 -1
  38. package/esm/components/QPropertyList/QPropertyListRow.vue.js +1 -1
  39. package/esm/components/QPropertyList/index.d.ts.map +1 -1
  40. package/esm/components/QRadioGroup/QRadioButton.vue.js +1 -1
  41. package/esm/components/QRadioGroup/QRadioGroup.vue.js +2 -2
  42. package/esm/components/QSelect/QSelect.d.ts.map +1 -1
  43. package/esm/components/QSelect/QSelect.vue.js +1 -1
  44. package/esm/components/QSidebar/QSidebar.d.ts.map +1 -1
  45. package/esm/components/QSidebar/QSidebar.vue.js +19 -10
  46. package/esm/components/QSidebar/QSidebarItem.d.ts.map +1 -1
  47. package/esm/components/QSidebar/QSidebarItem.vue.js +51 -49
  48. package/esm/components/QSidebar/context.d.ts +7 -0
  49. package/esm/components/QSidebar/context.d.ts.map +1 -1
  50. package/esm/components/QSwitch/QSwitch.vue.js +1 -1
  51. package/esm/components/QTabs/QTab.d.ts.map +1 -1
  52. package/esm/components/QTabs/QTab.vue.js +52 -50
  53. package/esm/components/QTabs/QTabs.d.ts.map +1 -1
  54. package/esm/components/QTabs/QTabs.vue.js +37 -12
  55. package/esm/components/QTabs/context.d.ts +7 -0
  56. package/esm/components/QTabs/context.d.ts.map +1 -1
  57. package/esm/components/QTextArea/QTextArea.vue.js +1 -1
  58. package/esm/components/QTextField/QTextField.d.ts.map +1 -1
  59. package/esm/components/QTextField/QTextField.vue.js +1 -1
  60. package/esm/components/QThemeProvider/QThemeProvider.vue.js +1 -1
  61. package/esm/components/QToast/QToast.d.ts +4 -2
  62. package/esm/components/QToast/QToast.d.ts.map +1 -1
  63. package/esm/components/QToast/QToast.vue.js +80 -67
  64. package/esm/components/QToast/QToaster.d.ts.map +1 -1
  65. package/esm/components/QToast/QToaster.vue.js +21 -16
  66. package/esm/components/QToast/index.d.ts +39 -3
  67. package/esm/components/QToast/index.d.ts.map +1 -1
  68. package/esm/components/QToast/types.d.ts +6 -2
  69. package/esm/components/QToast/types.d.ts.map +1 -1
  70. package/esm/components/QToggleGroup/QToggleGroupItem.vue.js +1 -1
  71. package/esm/components/QTooltip/QTooltip.vue.js +1 -1
  72. package/esm/composables/index.d.ts +2 -2
  73. package/esm/composables/index.d.ts.map +1 -1
  74. package/esm/composables/useColor/index.d.ts +46 -17
  75. package/esm/composables/useColor/index.d.ts.map +1 -1
  76. package/esm/composables/useColor/index.js +57 -29
  77. package/esm/composables/useColor/types.d.ts +4 -1
  78. package/esm/composables/useColor/types.d.ts.map +1 -1
  79. package/esm/composables/useDialog/_internal.d.ts +2 -0
  80. package/esm/composables/useDialog/_internal.d.ts.map +1 -0
  81. package/esm/composables/useDialog/_internal.js +65 -0
  82. package/esm/composables/useDialog/index.d.ts +11 -3
  83. package/esm/composables/useDialog/index.d.ts.map +1 -1
  84. package/esm/composables/useDialog/index.js +38 -22
  85. package/esm/composables/useDialog/types.d.ts +25 -11
  86. package/esm/composables/useDialog/types.d.ts.map +1 -1
  87. package/esm/composables/useDismissibleLayerStack/index.d.ts +17 -2
  88. package/esm/composables/useDismissibleLayerStack/index.d.ts.map +1 -1
  89. package/esm/composables/useDismissibleLayerStack/index.js +28 -11
  90. package/esm/composables/useGroup/index.d.ts.map +1 -1
  91. package/esm/composables/useGroup/index.js +12 -1
  92. package/esm/composables/useId/index.d.ts +18 -0
  93. package/esm/composables/useId/index.d.ts.map +1 -0
  94. package/esm/composables/useId/index.js +10 -0
  95. package/esm/composables/useToast/_internal.d.ts +2 -0
  96. package/esm/composables/useToast/_internal.d.ts.map +1 -0
  97. package/esm/composables/useToast/_internal.js +142 -0
  98. package/esm/composables/useToast/index.d.ts +8 -25
  99. package/esm/composables/useToast/index.d.ts.map +1 -1
  100. package/esm/composables/useToast/index.js +29 -26
  101. package/esm/composables/useToast/types.d.ts +31 -17
  102. package/esm/composables/useToast/types.d.ts.map +1 -1
  103. package/esm/framework.d.ts.map +1 -1
  104. package/esm/framework.js +16 -12
  105. package/esm/templates/theme.js +39 -39
  106. package/esm/utils/color/contrast.d.ts +11 -4
  107. package/esm/utils/color/contrast.d.ts.map +1 -1
  108. package/esm/utils/color/contrast.js +16 -3
  109. package/esm/utils/color/index.d.ts +1 -0
  110. package/esm/utils/color/index.d.ts.map +1 -1
  111. package/esm/utils/color/merge.d.ts +9 -0
  112. package/esm/utils/color/merge.d.ts.map +1 -1
  113. package/esm/utils/color/merge.js +21 -22
  114. package/esm/utils/color/parse.d.ts +21 -5
  115. package/esm/utils/color/parse.d.ts.map +1 -1
  116. package/esm/utils/color/parse.js +88 -20
  117. package/esm/utils/color/theme-colors.d.ts +35 -0
  118. package/esm/utils/color/theme-colors.d.ts.map +1 -0
  119. package/esm/utils/color/theme-colors.js +25 -0
  120. package/esm/utils/index.js +50 -42
  121. package/package.json +3 -5
  122. package/esm/composables/uid.d.ts +0 -9
  123. package/esm/composables/uid.d.ts.map +0 -1
  124. package/esm/composables/uid.js +0 -8
  125. package/esm/composables/useToast/types.js +0 -4
  126. package/esm/vendors/uuid/dist/native.js +0 -3
  127. package/esm/vendors/uuid/dist/rng.js +0 -11
  128. package/esm/vendors/uuid/dist/stringify.js +0 -8
  129. package/esm/vendors/uuid/dist/v4.js +0 -20
package/dist/ui.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Quidgest UI v0.20.1
2
+ * Quidgest UI v0.21.0
3
3
  * (c) 2026 Quidgest - Consultores de Gestão, S.A.
4
4
  * Released under the MIT License.
5
5
  */
@@ -511,6 +511,9 @@ $breakpoint-xl: 1200px;
511
511
  $breakpoint-xxl: 1400px;
512
512
  $font-size-base: 0.9rem !default;
513
513
  $line-height-base: 1.5 !default;
514
+ $icon-size: 1.15em !default;
515
+ $icon-size-sm: $icon-size * 0.87 !default;
516
+ $selection-control-size: 1.15rem !default;
514
517
  $font-weight-thin: 100;
515
518
  $font-weight-light: 300;
516
519
  $font-weight-regular: 400;
@@ -655,18 +658,6 @@ $transition-duration: 0.2s !default;
655
658
  transform $transition-duration ease,
656
659
  opacity $transition-duration ease;
657
660
  }
658
- @mixin color-variant($prefix, $color) {
659
- &--#{$color} {
660
- --#{$prefix}-main-color: var(--q-theme-#{$color});
661
- --#{$prefix}-main-color-rgb: var(--q-theme-#{$color}-rgb);
662
- --#{$prefix}-on-main-color: var(--q-theme-on-#{$color});
663
- --#{$prefix}-on-main-color-rgb: var(--q-theme-on-#{$color}-rgb);
664
- --#{$prefix}-hover-color: var(--q-theme-#{$color}-dark);
665
- --#{$prefix}-hover-color-rgb: var(--q-theme-#{$color}-dark-rgb);
666
- --#{$prefix}-on-hover-color: var(--q-theme-on-#{$color});
667
- --#{$prefix}-on-hover-color-rgb: var(--q-theme-on-#{$color}-rgb);
668
- }
669
- }
670
661
  @mixin sr-only {
671
662
  position: absolute;
672
663
  width: 1px;
@@ -693,6 +684,10 @@ $transition-duration: 0.2s !default;
693
684
  .q-clear-btn.q-button {
694
685
  padding: 0.1rem;
695
686
  opacity: 0.5;
687
+ svg {
688
+ width: $icon-size-sm;
689
+ height: $icon-size-sm;
690
+ }
696
691
  &:hover {
697
692
  cursor: inherit;
698
693
  }
@@ -869,10 +864,6 @@ $transition-duration: 0.2s !default;
869
864
  pointer-events: none;
870
865
  }
871
866
 
872
- @each $color, $value in $theme-colors {
873
- @include color-variant('q-badge', $color);
874
- }
875
-
876
867
  &--large {
877
868
  min-height: 44px;
878
869
  &:is(span) {
@@ -981,8 +972,8 @@ $transition-duration: 0.2s !default;
981
972
  --q-button-on-main-color-rgb: var(--q-theme-on-primary-rgb);
982
973
  --q-button-hover-color: var(--q-theme-primary-dark);
983
974
  --q-button-hover-color-rgb: var(--q-theme-primary-dark-rgb);
984
- --q-button-on-hover-color: var(--q-theme-on-primary);
985
- --q-button-on-hover-color-rgb: var(--q-theme-on-primary-rgb);
975
+ --q-button-on-hover-color: var(--q-theme-on-primary-dark);
976
+ --q-button-on-hover-color-rgb: var(--q-theme-on-primary-dark-rgb);
986
977
  display: inline-flex;
987
978
  user-select: none;
988
979
  align-items: center;
@@ -1003,6 +994,13 @@ $transition-duration: 0.2s !default;
1003
994
  transition-duration: 0.15s;
1004
995
  &#{$this}--labeled {
1005
996
  padding: 0.4rem 0.8rem;
997
+
998
+
999
+ &:where(:has(#{$this}__content > .q-icon)):where(:not(#{$this}--icon-end)):where(
1000
+ :not(#{$this}--icon-top)
1001
+ ):where(:not(#{$this}--icon-bottom)) {
1002
+ padding: 0.4rem 0.8rem 0.4rem 0.6rem;
1003
+ }
1006
1004
  }
1007
1005
  &__content {
1008
1006
  display: inline-flex;
@@ -1012,6 +1010,10 @@ $transition-duration: 0.2s !default;
1012
1010
  width: 100%;
1013
1011
  z-index: 1;
1014
1012
  }
1013
+
1014
+ &__append {
1015
+ display: contents;
1016
+ }
1015
1017
  &:disabled {
1016
1018
  opacity: 0.6;
1017
1019
  }
@@ -1107,14 +1109,12 @@ $transition-duration: 0.2s !default;
1107
1109
  border-radius: 9999px;
1108
1110
  }
1109
1111
 
1110
- @each $color, $value in $theme-colors {
1111
- @include color-variant('q-button', $color);
1112
- }
1112
+
1113
1113
  &--background {
1114
1114
  --q-button-main-color: var(--q-theme-background);
1115
1115
  --q-button-on-main-color: var(--q-theme-on-background);
1116
1116
  --q-button-hover-color: var(--q-theme-primary-dark);
1117
- --q-button-on-hover-color: var(--q-theme-on-primary);
1117
+ --q-button-on-hover-color: var(--q-theme-on-primary-dark);
1118
1118
  }
1119
1119
 
1120
1120
  &--loading {
@@ -1131,6 +1131,14 @@ $transition-duration: 0.2s !default;
1131
1131
  padding: 0.25rem;
1132
1132
  &#{$this}--labeled {
1133
1133
  padding: 0.25rem 0.5rem;
1134
+ &:where(:has(#{$this}__content > .q-icon)):where(:not(#{$this}--icon-end)):where(
1135
+ :not(#{$this}--icon-top)
1136
+ ):where(:not(#{$this}--icon-bottom)) {
1137
+ padding: 0.25rem 0.5rem 0.25rem 0.375rem;
1138
+ }
1139
+ }
1140
+ &#{$this}--icon-end#{$this}--labeled:where(:has(#{$this}__content > .q-icon)) {
1141
+ padding: 0.25rem 0.375rem 0.25rem 0.5rem;
1134
1142
  }
1135
1143
  }
1136
1144
 
@@ -1147,6 +1155,9 @@ $transition-duration: 0.2s !default;
1147
1155
  #{$this}__content {
1148
1156
  flex-direction: row-reverse;
1149
1157
  }
1158
+ &#{$this}--labeled:where(:has(#{$this}__content > .q-icon)) {
1159
+ padding: 0.4rem 0.6rem 0.4rem 0.8rem;
1160
+ }
1150
1161
  }
1151
1162
  &--icon-top {
1152
1163
  #{$this}__content {
@@ -1539,7 +1550,7 @@ $q-carousel-height-md: 300px;
1539
1550
  }
1540
1551
  .q-checkbox {
1541
1552
  $this: &;
1542
- --box-size: 1.15rem;
1553
+ --box-size: #{$selection-control-size};
1543
1554
  --icon-color: var(--q-theme-on-primary);
1544
1555
  --icon-opacity: 0;
1545
1556
  --transition-duration: 0.15s;
@@ -1837,6 +1848,10 @@ $q-carousel-height-md: 300px;
1837
1848
  .q-combobox__chevron.q-button {
1838
1849
  padding: 0.1rem;
1839
1850
  opacity: 0.5;
1851
+ svg {
1852
+ width: $icon-size-sm;
1853
+ height: $icon-size-sm;
1854
+ }
1840
1855
  &:hover {
1841
1856
  cursor: inherit;
1842
1857
  }
@@ -2797,8 +2812,8 @@ $q-spacing-sides: (
2797
2812
  }
2798
2813
  &__svg,
2799
2814
  &__img {
2800
- width: 1em;
2801
- height: 1em;
2815
+ width: $icon-size;
2816
+ height: $icon-size;
2802
2817
  }
2803
2818
  }
2804
2819
  $input-group-addon-color: var(--q-theme-primary);
@@ -2812,6 +2827,16 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
2812
2827
  border-top-right-radius: var(--border-radius);
2813
2828
  border-bottom-right-radius: var(--border-radius);
2814
2829
  }
2830
+
2831
+ > .q-field__control > .q-input-group__append:first-child > :first-child {
2832
+ border-top-left-radius: var(--border-radius);
2833
+ border-bottom-left-radius: var(--border-radius);
2834
+ }
2835
+
2836
+ > .q-field__control > .q-input-group__prepend:last-child > :last-child {
2837
+ border-top-right-radius: var(--border-radius);
2838
+ border-bottom-right-radius: var(--border-radius);
2839
+ }
2815
2840
  &__prepend,
2816
2841
  &__append {
2817
2842
  display: flex;
@@ -2851,10 +2876,19 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
2851
2876
  }
2852
2877
  > * {
2853
2878
  border-radius: 0;
2879
+ align-self: stretch;
2854
2880
  &:focus-within {
2855
2881
  z-index: 2;
2856
2882
  }
2857
2883
  }
2884
+
2885
+
2886
+ > .q-field > .q-field__control {
2887
+ height: 100%;
2888
+ }
2889
+ > .q-button {
2890
+ height: auto;
2891
+ }
2858
2892
  > :first-child {
2859
2893
  border-top-left-radius: var(--border-radius);
2860
2894
  border-bottom-left-radius: var(--border-radius);
@@ -2941,10 +2975,14 @@ $q-line-loader-color: var(--q-line-loader-color);
2941
2975
  }
2942
2976
  .q-list-item {
2943
2977
  $this: &;
2978
+
2979
+ $control-height: $selection-control-size;
2944
2980
  display: flex;
2945
2981
  gap: 0.25rem;
2946
2982
  align-items: center;
2947
2983
  padding: $space-base * 1.5 $space-base * 2;
2984
+
2985
+ min-height: calc(#{$control-height} + #{$space-base * 3});
2948
2986
  list-style: none;
2949
2987
  line-height: 15px;
2950
2988
  overflow-wrap: break-word;
@@ -2995,11 +3033,16 @@ $q-line-loader-color: var(--q-line-loader-color);
2995
3033
  align-items: center;
2996
3034
  margin-left: auto;
2997
3035
  min-width: 1em;
2998
- min-height: 1.15rem;
3036
+ min-height: $control-height;
2999
3037
  align-self: center;
3000
3038
  &--top {
3001
3039
  align-self: flex-start;
3002
3040
  }
3041
+
3042
+ .q-list-item__check {
3043
+ width: $icon-size-sm;
3044
+ height: $icon-size-sm;
3045
+ }
3003
3046
  }
3004
3047
  &__description {
3005
3048
  display: flex;
@@ -3823,6 +3866,10 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
3823
3866
  &__chevron.q-button {
3824
3867
  padding: 0.1rem;
3825
3868
  opacity: 0.5;
3869
+ svg {
3870
+ width: $icon-size-sm;
3871
+ height: $icon-size-sm;
3872
+ }
3826
3873
  &:hover {
3827
3874
  cursor: inherit;
3828
3875
  }
@@ -4669,19 +4716,12 @@ $q-toast-slide-distance: clamp(1rem, 3vw, 1.5rem) !default;
4669
4716
  background-color: var(--q-toast-tonal-color);
4670
4717
  border-color: transparent;
4671
4718
  color: var(--q-toast-hover-color);
4672
- #{$this}__dismiss.q-button {
4673
- --q-button-main-color: var(--q-toast-hover-color);
4674
- }
4675
4719
  }
4676
4720
  &--outlined {
4677
4721
  background-color: transparent;
4678
4722
  border-color: var(--q-toast-main-color);
4679
4723
  color: var(--q-toast-main-color);
4680
4724
  }
4681
-
4682
- @each $color, $value in $theme-colors {
4683
- @include color-variant('q-toast', $color);
4684
- }
4685
4725
  }
4686
4726
  .toast-stack-enter-active {
4687
4727
  transition:
@@ -1,6 +1,6 @@
1
1
  import { useGroupItem as e } from "../../composables/useGroup/index.js";
2
2
  import { QCollapsible as t } from "../QCollapsible/index.js";
3
- import { useId as n } from "../../composables/uid.js";
3
+ import { useId as n } from "../../composables/useId/index.js";
4
4
  import { createBlock as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, toRef as c, unref as l, withCtx as u } from "vue";
5
5
  //#region src/components/QAccordion/QAccordionItem.vue?vue&type=script&setup=true&lang.ts
6
6
  var d = /*@__PURE__*/ i({
@@ -1 +1 @@
1
- {"version":3,"file":"QBadge.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/QBadge.vue"],"names":[],"mappings":"AAyCA;AAkJC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAW1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,GAAG,CAAA;AAmGrC,iBAAS,cAAc;WAuIT,OAAO,IAA6B;;yBAXrB,GAAG;yBACF,GAAG;;;;EAehC;AAoBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;6EAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"QBadge.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/QBadge.vue"],"names":[],"mappings":"AAyCA;AA+IC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAW1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,GAAG,CAAA;AAgGrC,iBAAS,cAAc;WAuIT,OAAO,IAA6B;;yBAXrB,GAAG;yBACF,GAAG;;;;EAehC;AAoBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;6EAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
@@ -31,26 +31,22 @@ var T = ["id"], E = {
31
31
  e,
32
32
  f.class
33
33
  ];
34
- }), M = o(() => {
35
- let e = N.value ? `q-badge--${f.color}` : void 0;
36
- return [
37
- "q-badge",
38
- `q-badge--${f.variant}`,
39
- {
40
- "q-badge--removable": f.removable,
41
- "q-badge--disabled": f.disabled
42
- },
43
- e,
44
- j.value
45
- ];
46
- }), { isUtilityColor: N, style: P } = e(x(f, "color")), F = o(() => {
47
- if (!N.value) return {
48
- "--q-badge-main-color": P.value?.mainColor,
49
- "--q-badge-on-main-color": P.value?.onMainColor,
50
- "--q-badge-hover-color": P.value?.hoverColor,
51
- "--q-badge-on-hover-color": P.value?.onHoverColor
34
+ }), M = o(() => [
35
+ "q-badge",
36
+ `q-badge--${f.variant}`,
37
+ {
38
+ "q-badge--removable": f.removable,
39
+ "q-badge--disabled": f.disabled
40
+ },
41
+ j.value
42
+ ]), { style: N } = e(x(f, "color")), P = o(() => {
43
+ if (N.value) return {
44
+ "--q-badge-main-color": N.value.mainColor,
45
+ "--q-badge-on-main-color": N.value.onMainColor,
46
+ "--q-badge-hover-color": N.value.hoverColor,
47
+ "--q-badge-on-hover-color": N.value.onHoverColor
52
48
  };
53
- }), I = o(() => k.onClick), L = o(() => ({
49
+ }), F = o(() => k.onClick), I = o(() => ({
54
50
  class: "q-badge__remove",
55
51
  variant: f.variant,
56
52
  color: f.color,
@@ -58,7 +54,7 @@ var T = ["id"], E = {
58
54
  title: f.texts.removeText,
59
55
  disabled: f.disabled
60
56
  }));
61
- function R() {
57
+ function L() {
62
58
  O("click:remove");
63
59
  }
64
60
  return (e, r) => A.value ? (v(), s(b(f.removable ? S(a) : "span"), {
@@ -70,7 +66,7 @@ var T = ["id"], E = {
70
66
  variant: f.variant,
71
67
  color: f.color,
72
68
  disabled: f.disabled,
73
- onClick: I.value
69
+ onClick: F.value
74
70
  }, {
75
71
  default: w(() => [y(e.$slots, "default")]),
76
72
  _: 3
@@ -79,7 +75,7 @@ var T = ["id"], E = {
79
75
  "color",
80
76
  "disabled",
81
77
  "onClick"
82
- ]), f.removable ? (v(), s(S(t), m({ key: 0 }, L.value, { onClick: R }), {
78
+ ]), f.removable ? (v(), s(S(t), m({ key: 0 }, I.value, { onClick: L }), {
83
79
  default: w(() => [d(S(n), g(p(f.icons.remove)), null, 16)]),
84
80
  _: 1
85
81
  }, 16)) : c("v-if", !0)]),
@@ -88,8 +84,8 @@ var T = ["id"], E = {
88
84
  key: 0,
89
85
  id: f.id,
90
86
  class: h(M.value),
91
- style: _(F.value)
92
- }, [f.variant === "tonal" ? (v(), l("div", E)) : c("v-if", !0), u("span", null, [u("div", D, [y(e.$slots, "default")]), f.removable ? (v(), s(S(t), m({ key: 0 }, L.value, { onClick: R }), {
87
+ style: _(P.value)
88
+ }, [f.variant === "tonal" ? (v(), l("div", E)) : c("v-if", !0), u("span", null, [u("div", D, [y(e.$slots, "default")]), f.removable ? (v(), s(S(t), m({ key: 0 }, I.value, { onClick: L }), {
93
89
  default: w(() => [d(S(n), g(p(f.icons.remove)), null, 16)]),
94
90
  _: 1
95
91
  }, 16)) : c("v-if", !0)])], 14, T));
@@ -1 +1 @@
1
- {"version":3,"file":"QButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QButton/QButton.vue"],"names":[],"mappings":"AAoBA;AA0GC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AA8EtC,iBAAS,cAAc;WAgDT,OAAO,IAA6B;;yBAXrB,GAAG;wBACJ,GAAG;;;;EAe9B;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;2FASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"QButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QButton/QButton.vue"],"names":[],"mappings":"AAwBA;AAgHC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AAgFtC,iBAAS,cAAc;WAqDT,OAAO,IAA6B;;yBAXrB,GAAG;wBACJ,GAAG;;;;EAe9B;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;2FASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
@@ -5,7 +5,10 @@ import { computed as n, createCommentVNode as r, createElementBlock as i, create
5
5
  var _ = ["id", "disabled"], v = {
6
6
  key: 0,
7
7
  class: "q-button__spinner"
8
- }, y = { class: "q-button__content" }, b = /*@__PURE__*/ c({
8
+ }, y = { class: "q-button__content" }, b = {
9
+ key: 0,
10
+ class: "q-button__append"
11
+ }, x = /*@__PURE__*/ c({
9
12
  __name: "QButton",
10
13
  props: {
11
14
  id: {},
@@ -23,52 +26,52 @@ var _ = ["id", "disabled"], v = {
23
26
  loading: { type: Boolean }
24
27
  },
25
28
  emits: ["click"],
26
- setup(c, { emit: b }) {
27
- let x = c, S = b, C = n(() => x.disabled || x.loading);
28
- function w(e) {
29
- C.value || S("click", e);
29
+ setup(c, { emit: x }) {
30
+ let S = c, C = x, w = n(() => S.disabled || S.loading);
31
+ function T(e) {
32
+ w.value || C("click", e);
30
33
  }
31
- let { isUtilityColor: T, style: E } = t(m(x, "color")), D = n(() => {
32
- let e = T.value ? `q-button--${x.color}` : void 0, t = x.size === "regular" ? void 0 : `q-button--${x.size}`, n = x.iconPos === "start" ? void 0 : `q-button--icon-${x.iconPos}`;
34
+ let { style: E } = t(m(S, "color")), D = n(() => {
35
+ let e = S.color === "background" ? "q-button--background" : void 0, t = S.size === "regular" ? void 0 : `q-button--${S.size}`, n = S.iconPos === "start" ? void 0 : `q-button--icon-${S.iconPos}`;
33
36
  return [
34
37
  "q-button",
35
- `q-button--${x.variant}`,
38
+ `q-button--${S.variant}`,
36
39
  e,
37
40
  t,
38
41
  n,
39
42
  {
40
- "q-button--labeled": x.label,
41
- "q-button--borderless": x.borderless,
42
- "q-button--elevated": x.elevated,
43
- "q-button--block": x.block,
44
- "q-button--loading": x.loading,
45
- "q-button--pill": x.pill
43
+ "q-button--labeled": S.label,
44
+ "q-button--borderless": S.borderless,
45
+ "q-button--elevated": S.elevated,
46
+ "q-button--block": S.block,
47
+ "q-button--loading": S.loading,
48
+ "q-button--pill": S.pill
46
49
  },
47
- x.class
50
+ S.class
48
51
  ];
49
52
  }), O = n(() => {
50
- if (!T.value) return {
51
- "--q-button-main-color": E.value?.mainColor,
52
- "--q-button-main-color-rgb": E.value?.mainColorRgb,
53
- "--q-button-on-main-color": E.value?.onMainColor,
54
- "--q-button-hover-color": E.value?.hoverColor,
55
- "--q-button-hover-color-rgb": E.value?.hoverColorRgb,
56
- "--q-button-on-hover-color": E.value?.onHoverColor
53
+ if (!(S.color === "background" || !E.value)) return {
54
+ "--q-button-main-color": E.value.mainColor,
55
+ "--q-button-main-color-rgb": E.value.mainColorRgb,
56
+ "--q-button-on-main-color": E.value.onMainColor,
57
+ "--q-button-hover-color": E.value.hoverColor,
58
+ "--q-button-hover-color-rgb": E.value.hoverColorRgb,
59
+ "--q-button-on-hover-color": E.value.onHoverColor
57
60
  };
58
61
  });
59
62
  return (t, n) => (d(), i("button", {
60
- id: x.id,
63
+ id: S.id,
61
64
  type: "button",
62
65
  class: l(D.value),
63
- disabled: C.value,
66
+ disabled: w.value,
64
67
  style: u(O.value),
65
- onClick: g(w, ["stop", "prevent"])
66
- }, [x.loading ? (d(), i("div", v, [s(h(e))])) : r("v-if", !0), a("span", y, [
68
+ onClick: g(T, ["stop", "prevent"])
69
+ }, [S.loading ? (d(), i("div", v, [s(h(e))])) : r("v-if", !0), a("span", y, [
67
70
  f(t.$slots, "default"),
68
- o(" " + p(x.label) + " ", 1),
69
- f(t.$slots, "append")
71
+ o(" " + p(S.label) + " ", 1),
72
+ t.$slots.append ? (d(), i("span", b, [f(t.$slots, "append")])) : r("v-if", !0)
70
73
  ])], 14, _));
71
74
  }
72
75
  });
73
76
  //#endregion
74
- export { b as default };
77
+ export { x as default };
@@ -1,5 +1,5 @@
1
1
  import { QIcon as e } from "../QIcon/index.js";
2
- import { useId as t } from "../../composables/uid.js";
2
+ import { useId as t } from "../../composables/useId/index.js";
3
3
  import { DEFAULT_ICONS as n } from "./constants.js";
4
4
  import { QCheckboxLabel as r } from "./index.js";
5
5
  import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeClass as p, openBlock as m, renderSlot as h, toRef as g, unref as _, useModel as v, useTemplateRef as y, watch as b, withCtx as x, withKeys as S, withModifiers as C } from "vue";
@@ -1,5 +1,6 @@
1
1
  import { DEFAULT_ICONS } from './constants';
2
2
  import { DialogButton, QDialogProps } from '.';
3
+ type __VLS_Props = QDialogProps & {};
3
4
  declare function __VLS_template(): {
4
5
  attrs: Partial<{}>;
5
6
  slots: {
@@ -15,10 +16,10 @@ declare function __VLS_template(): {
15
16
  rootEl: any;
16
17
  };
17
18
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
18
- declare const __VLS_component: import('vue').DefineComponent<QDialogProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
19
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
19
20
  "update:modelValue": (val: boolean) => any;
20
21
  action: (val: string) => any;
21
- }, string, import('vue').PublicProps, Readonly<QDialogProps> & Readonly<{
22
+ }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
22
23
  "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
23
24
  onAction?: ((val: string) => any) | undefined;
24
25
  }>, {
@@ -31,6 +32,7 @@ declare const __VLS_component: import('vue').DefineComponent<QDialogProps, {}, {
31
32
  backdropBlur: boolean;
32
33
  attach: string;
33
34
  focusWrap: boolean;
35
+ entryKey: string;
34
36
  buttons: DialogButton[];
35
37
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
36
38
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
@@ -1 +1 @@
1
- {"version":3,"file":"QDialog.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QDialog/QDialog.vue"],"names":[],"mappings":"AAwGA;AA0LC,OAAO,EAAiC,aAAa,EAAE,MAAM,aAAa,CAAA;AAS1E,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AAmFpD,iBAAS,cAAc;WAgQT,OAAO,IAA6B;;wBAhBrB,GAAG;kCACO,GAAG;iCACJ,GAAG;sBACd,GAAG;6BACI,GAAG;+BACD,GAAG;iCACD,GAAG;;;;EAexC;AAsBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;6EASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"QDialog.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QDialog/QDialog.vue"],"names":[],"mappings":"AAwGA;AAmNC,OAAO,EAAiC,aAAa,EAAE,MAAM,aAAa,CAAA;AAa1E,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AAKnD,KAAK,WAAW,GAAG,YAAY,GAAG,EAG/B,CAAC;AAiGL,iBAAS,cAAc;WAgQT,OAAO,IAA6B;;wBAhBrB,GAAG;kCACO,GAAG;iCACJ,GAAG;sBACd,GAAG;6BACI,GAAG;+BACD,GAAG;iCACD,GAAG;;;;EAexC;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;cA/XN,MAAM;;6EAwYnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}