@quidgest/ui 0.14.12 → 0.14.13

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 (206) hide show
  1. package/dist/manifest/components.json +3 -0
  2. package/dist/ui.css +1647 -124
  3. package/dist/ui.esm.js +11101 -1899
  4. package/dist/ui.js +29 -29
  5. package/dist/ui.min.css +1 -1
  6. package/dist/ui.min.js +1210 -255
  7. package/dist/ui.scss +208 -7
  8. package/esm/components/QBadge/QBadge.d.ts +2 -1
  9. package/esm/components/QBadge/QBadge.d.ts.map +1 -1
  10. package/esm/components/QBadge/QBadge.vue.js +75 -66
  11. package/esm/components/QBadge/index.d.ts +3 -0
  12. package/esm/components/QBadge/index.d.ts.map +1 -1
  13. package/esm/components/QBadge/types.d.ts +7 -0
  14. package/esm/components/QBadge/types.d.ts.map +1 -1
  15. package/esm/components/QBadge/types.js +5 -2
  16. package/esm/components/QBadgeIndicator/QBadgeIndicator.d.ts +22 -0
  17. package/esm/components/QBadgeIndicator/QBadgeIndicator.d.ts.map +1 -0
  18. package/esm/components/QBadgeIndicator/QBadgeIndicator.vue.js +43 -0
  19. package/esm/components/QBadgeIndicator/QBadgeIndicator.vue2.js +4 -0
  20. package/esm/components/QBadgeIndicator/index.d.ts +28 -0
  21. package/esm/components/QBadgeIndicator/index.d.ts.map +1 -0
  22. package/esm/components/QBadgeIndicator/index.js +6 -0
  23. package/esm/components/QBadgeIndicator/types.d.ts +19 -0
  24. package/esm/components/QBadgeIndicator/types.d.ts.map +1 -0
  25. package/esm/components/QCombobox/QCombobox.d.ts +32 -4
  26. package/esm/components/QCombobox/QCombobox.d.ts.map +1 -1
  27. package/esm/components/QCombobox/index.d.ts +56 -7
  28. package/esm/components/QCombobox/index.d.ts.map +1 -1
  29. package/esm/components/QDateTimePicker/QDateTimePicker.d.ts +36 -0
  30. package/esm/components/QDateTimePicker/QDateTimePicker.d.ts.map +1 -0
  31. package/esm/components/QDateTimePicker/QDateTimePicker.vue.js +168 -0
  32. package/esm/components/QDateTimePicker/QDateTimePicker.vue2.js +4 -0
  33. package/esm/components/QDateTimePicker/index.d.ts +54 -0
  34. package/esm/components/QDateTimePicker/index.d.ts.map +1 -0
  35. package/esm/components/QDateTimePicker/index.js +6 -0
  36. package/esm/components/QDateTimePicker/types.d.ts +93 -0
  37. package/esm/components/QDateTimePicker/types.d.ts.map +1 -0
  38. package/esm/components/QDateTimePicker/types.js +15 -0
  39. package/esm/components/QFileUpload/QFileUpload.d.ts +37 -0
  40. package/esm/components/QFileUpload/QFileUpload.d.ts.map +1 -0
  41. package/esm/components/QFileUpload/QFileUpload.vue.js +238 -0
  42. package/esm/components/QFileUpload/QFileUpload.vue2.js +4 -0
  43. package/esm/components/QFileUpload/index.d.ts +52 -0
  44. package/esm/components/QFileUpload/index.d.ts.map +1 -0
  45. package/esm/components/QFileUpload/index.js +6 -0
  46. package/esm/components/QFileUpload/types.d.ts +69 -0
  47. package/esm/components/QFileUpload/types.d.ts.map +1 -0
  48. package/esm/components/QFileUpload/types.js +28 -0
  49. package/esm/components/QTextField/QTextField.d.ts +3 -0
  50. package/esm/components/QTextField/QTextField.d.ts.map +1 -1
  51. package/esm/components/QTextField/QTextField.vue.js +51 -39
  52. package/esm/components/QTextField/index.d.ts +7 -0
  53. package/esm/components/QTextField/index.d.ts.map +1 -1
  54. package/esm/components/QTextField/types.d.ts +11 -0
  55. package/esm/components/QTextField/types.d.ts.map +1 -1
  56. package/esm/components/index.d.ts +3 -0
  57. package/esm/components/index.d.ts.map +1 -1
  58. package/esm/components/index.js +62 -56
  59. package/esm/composables/maska.d.ts +28 -0
  60. package/esm/composables/maska.d.ts.map +1 -0
  61. package/esm/composables/maska.js +26 -0
  62. package/esm/composables/useDropZone/index.d.ts +38 -0
  63. package/esm/composables/useDropZone/index.d.ts.map +1 -0
  64. package/esm/composables/useDropZone/index.js +62 -0
  65. package/esm/index.d.ts +3 -0
  66. package/esm/utils/color.js +57 -27
  67. package/esm/utils/date/date.d.ts +9 -0
  68. package/esm/utils/date/date.d.ts.map +1 -0
  69. package/esm/utils/date/date.js +91 -0
  70. package/esm/utils/date/index.d.ts +4 -0
  71. package/esm/utils/date/index.d.ts.map +1 -0
  72. package/esm/utils/date/tokens.d.ts +49 -0
  73. package/esm/utils/date/tokens.d.ts.map +1 -0
  74. package/esm/utils/date/tokens.js +243 -0
  75. package/esm/utils/download.d.ts +7 -0
  76. package/esm/utils/download.d.ts.map +1 -0
  77. package/esm/utils/download.js +16 -0
  78. package/esm/utils/string.d.ts.map +1 -1
  79. package/esm/utils/string.js +5 -2
  80. package/esm/utils/time.d.ts +36 -0
  81. package/esm/utils/time.d.ts.map +1 -0
  82. package/esm/utils/time.js +14 -0
  83. package/esm/vendors/@vuepic/vue-datepicker/dist/vue-datepicker.js +5148 -0
  84. package/esm/vendors/date-fns/_lib/addLeadingZeros.js +7 -0
  85. package/esm/vendors/date-fns/_lib/defaultOptions.js +7 -0
  86. package/esm/vendors/date-fns/_lib/format/formatters.js +583 -0
  87. package/esm/vendors/date-fns/_lib/format/lightFormatters.js +59 -0
  88. package/esm/vendors/date-fns/_lib/format/longFormatters.js +52 -0
  89. package/esm/vendors/date-fns/_lib/getTimezoneOffsetInMilliseconds.js +18 -0
  90. package/esm/vendors/date-fns/_lib/normalizeDates.js +11 -0
  91. package/esm/vendors/date-fns/_lib/normalizeInterval.js +8 -0
  92. package/esm/vendors/date-fns/_lib/protectedTokens.js +20 -0
  93. package/esm/vendors/date-fns/add.js +20 -0
  94. package/esm/vendors/date-fns/addDays.js +10 -0
  95. package/esm/vendors/date-fns/addHours.js +9 -0
  96. package/esm/vendors/date-fns/addMilliseconds.js +9 -0
  97. package/esm/vendors/date-fns/addMonths.js +20 -0
  98. package/esm/vendors/date-fns/addQuarters.js +8 -0
  99. package/esm/vendors/date-fns/addYears.js +8 -0
  100. package/esm/vendors/date-fns/compareAsc.js +9 -0
  101. package/esm/vendors/date-fns/constants.js +9 -0
  102. package/esm/vendors/date-fns/constructFrom.js +8 -0
  103. package/esm/vendors/date-fns/differenceInCalendarDays.js +16 -0
  104. package/esm/vendors/date-fns/differenceInCalendarYears.js +13 -0
  105. package/esm/vendors/date-fns/differenceInYears.js +17 -0
  106. package/esm/vendors/date-fns/eachDayOfInterval.js +17 -0
  107. package/esm/vendors/date-fns/eachQuarterOfInterval.js +18 -0
  108. package/esm/vendors/date-fns/endOfQuarter.js +9 -0
  109. package/esm/vendors/date-fns/endOfWeek.js +11 -0
  110. package/esm/vendors/date-fns/endOfYear.js +9 -0
  111. package/esm/vendors/date-fns/format.js +59 -0
  112. package/esm/vendors/date-fns/getDay.js +8 -0
  113. package/esm/vendors/date-fns/getDayOfYear.js +11 -0
  114. package/esm/vendors/date-fns/getDaysInMonth.js +10 -0
  115. package/esm/vendors/date-fns/getDefaultOptions.js +8 -0
  116. package/esm/vendors/date-fns/getHours.js +8 -0
  117. package/esm/vendors/date-fns/getISODay.js +9 -0
  118. package/esm/vendors/date-fns/getISOWeek.js +12 -0
  119. package/esm/vendors/date-fns/getISOWeekYear.js +15 -0
  120. package/esm/vendors/date-fns/getMinutes.js +8 -0
  121. package/esm/vendors/date-fns/getMonth.js +8 -0
  122. package/esm/vendors/date-fns/getQuarter.js +9 -0
  123. package/esm/vendors/date-fns/getSeconds.js +8 -0
  124. package/esm/vendors/date-fns/getWeek.js +12 -0
  125. package/esm/vendors/date-fns/getWeekYear.js +17 -0
  126. package/esm/vendors/date-fns/getYear.js +8 -0
  127. package/esm/vendors/date-fns/isAfter.js +8 -0
  128. package/esm/vendors/date-fns/isBefore.js +8 -0
  129. package/esm/vendors/date-fns/isDate.js +7 -0
  130. package/esm/vendors/date-fns/isEqual.js +8 -0
  131. package/esm/vendors/date-fns/isSameQuarter.js +14 -0
  132. package/esm/vendors/date-fns/isValid.js +9 -0
  133. package/esm/vendors/date-fns/locale/_lib/buildFormatLongFn.js +9 -0
  134. package/esm/vendors/date-fns/locale/_lib/buildLocalizeFn.js +18 -0
  135. package/esm/vendors/date-fns/locale/_lib/buildMatchFn.js +31 -0
  136. package/esm/vendors/date-fns/locale/_lib/buildMatchPatternFn.js +15 -0
  137. package/esm/vendors/date-fns/locale/en-US/_lib/formatDistance.js +70 -0
  138. package/esm/vendors/date-fns/locale/en-US/_lib/formatLong.js +33 -0
  139. package/esm/vendors/date-fns/locale/en-US/_lib/formatRelative.js +11 -0
  140. package/esm/vendors/date-fns/locale/en-US/_lib/localize.js +155 -0
  141. package/esm/vendors/date-fns/locale/en-US/_lib/match.js +110 -0
  142. package/esm/vendors/date-fns/locale/en-US.js +21 -0
  143. package/esm/vendors/date-fns/parse/_lib/Parser.js +22 -0
  144. package/esm/vendors/date-fns/parse/_lib/Setter.js +41 -0
  145. package/esm/vendors/date-fns/parse/_lib/constants.js +49 -0
  146. package/esm/vendors/date-fns/parse/_lib/parsers/AMPMMidnightParser.js +49 -0
  147. package/esm/vendors/date-fns/parse/_lib/parsers/AMPMParser.js +49 -0
  148. package/esm/vendors/date-fns/parse/_lib/parsers/DateParser.js +61 -0
  149. package/esm/vendors/date-fns/parse/_lib/parsers/DayOfYearParser.js +51 -0
  150. package/esm/vendors/date-fns/parse/_lib/parsers/DayParser.js +49 -0
  151. package/esm/vendors/date-fns/parse/_lib/parsers/DayPeriodParser.js +49 -0
  152. package/esm/vendors/date-fns/parse/_lib/parsers/EraParser.js +33 -0
  153. package/esm/vendors/date-fns/parse/_lib/parsers/ExtendedYearParser.js +21 -0
  154. package/esm/vendors/date-fns/parse/_lib/parsers/FractionOfSecondParser.js +22 -0
  155. package/esm/vendors/date-fns/parse/_lib/parsers/Hour0To11Parser.js +32 -0
  156. package/esm/vendors/date-fns/parse/_lib/parsers/Hour0to23Parser.js +32 -0
  157. package/esm/vendors/date-fns/parse/_lib/parsers/Hour1To24Parser.js +33 -0
  158. package/esm/vendors/date-fns/parse/_lib/parsers/Hour1to12Parser.js +33 -0
  159. package/esm/vendors/date-fns/parse/_lib/parsers/ISODayParser.js +105 -0
  160. package/esm/vendors/date-fns/parse/_lib/parsers/ISOTimezoneParser.js +48 -0
  161. package/esm/vendors/date-fns/parse/_lib/parsers/ISOTimezoneWithZParser.js +48 -0
  162. package/esm/vendors/date-fns/parse/_lib/parsers/ISOWeekParser.js +49 -0
  163. package/esm/vendors/date-fns/parse/_lib/parsers/ISOWeekYearParser.js +40 -0
  164. package/esm/vendors/date-fns/parse/_lib/parsers/LocalDayParser.js +80 -0
  165. package/esm/vendors/date-fns/parse/_lib/parsers/LocalWeekParser.js +48 -0
  166. package/esm/vendors/date-fns/parse/_lib/parsers/LocalWeekYearParser.js +69 -0
  167. package/esm/vendors/date-fns/parse/_lib/parsers/MinuteParser.js +32 -0
  168. package/esm/vendors/date-fns/parse/_lib/parsers/MonthParser.js +77 -0
  169. package/esm/vendors/date-fns/parse/_lib/parsers/QuarterParser.js +75 -0
  170. package/esm/vendors/date-fns/parse/_lib/parsers/SecondParser.js +32 -0
  171. package/esm/vendors/date-fns/parse/_lib/parsers/StandAloneLocalDayParser.js +80 -0
  172. package/esm/vendors/date-fns/parse/_lib/parsers/StandAloneMonthParser.js +77 -0
  173. package/esm/vendors/date-fns/parse/_lib/parsers/StandAloneQuarterParser.js +75 -0
  174. package/esm/vendors/date-fns/parse/_lib/parsers/TimestampMillisecondsParser.js +22 -0
  175. package/esm/vendors/date-fns/parse/_lib/parsers/TimestampSecondsParser.js +22 -0
  176. package/esm/vendors/date-fns/parse/_lib/parsers/YearParser.js +49 -0
  177. package/esm/vendors/date-fns/parse/_lib/parsers.js +67 -0
  178. package/esm/vendors/date-fns/parse/_lib/utils.js +103 -0
  179. package/esm/vendors/date-fns/parse.js +89 -0
  180. package/esm/vendors/date-fns/set.js +11 -0
  181. package/esm/vendors/date-fns/setDay.js +12 -0
  182. package/esm/vendors/date-fns/setHours.js +9 -0
  183. package/esm/vendors/date-fns/setISODay.js +11 -0
  184. package/esm/vendors/date-fns/setISOWeek.js +10 -0
  185. package/esm/vendors/date-fns/setMilliseconds.js +9 -0
  186. package/esm/vendors/date-fns/setMinutes.js +9 -0
  187. package/esm/vendors/date-fns/setMonth.js +13 -0
  188. package/esm/vendors/date-fns/setSeconds.js +9 -0
  189. package/esm/vendors/date-fns/setWeek.js +10 -0
  190. package/esm/vendors/date-fns/setYear.js +10 -0
  191. package/esm/vendors/date-fns/startOfDay.js +9 -0
  192. package/esm/vendors/date-fns/startOfISOWeek.js +8 -0
  193. package/esm/vendors/date-fns/startOfISOWeekYear.js +11 -0
  194. package/esm/vendors/date-fns/startOfMonth.js +9 -0
  195. package/esm/vendors/date-fns/startOfQuarter.js +9 -0
  196. package/esm/vendors/date-fns/startOfWeek.js +11 -0
  197. package/esm/vendors/date-fns/startOfWeekYear.js +13 -0
  198. package/esm/vendors/date-fns/startOfYear.js +9 -0
  199. package/esm/vendors/date-fns/sub.js +19 -0
  200. package/esm/vendors/date-fns/subDays.js +8 -0
  201. package/esm/vendors/date-fns/subMonths.js +8 -0
  202. package/esm/vendors/date-fns/subYears.js +8 -0
  203. package/esm/vendors/date-fns/toDate.js +8 -0
  204. package/esm/vendors/date-fns/transpose.js +18 -0
  205. package/esm/vendors/maska/dist/maska.js +179 -0
  206. package/package.json +5 -1
package/dist/ui.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Quidgest UI v0.14.12
2
+ * Quidgest UI v0.14.13
3
3
  * (c) 2025 Quidgest - Consultores de Gestão, S.A.
4
4
  * Released under the MIT License.
5
5
  */
@@ -312,10 +312,32 @@ body {
312
312
  background-color: var(--q-badge-color);
313
313
  }
314
314
  }
315
+ &--clickable {
316
+ cursor: pointer;
317
+ &:hover {
318
+ color: var(--q-badge-text-hover-color, var(--q-badge-text-color));
319
+ #{$this}__underlay {
320
+ background-color: var(--q-badge-hover-color, var(--q-badge-color));
321
+ }
322
+ }
323
+ &:focus {
324
+ outline: $outline;
325
+ &:not(:focus-visible) {
326
+ outline: 0;
327
+ }
328
+ }
329
+ }
315
330
 
316
331
  &--pill {
317
332
  border-radius: 9999px;
318
333
  }
334
+ &--tonal {
335
+ &#{$this}--clickable:hover {
336
+ #{$this}__underlay {
337
+ opacity: 1;
338
+ }
339
+ }
340
+ }
319
341
  &--bold {
320
342
  #{$this}__underlay {
321
343
  opacity: 1;
@@ -326,16 +348,26 @@ body {
326
348
  #{$this}__underlay {
327
349
  opacity: 0;
328
350
  }
351
+ &#{$this}--clickable:hover {
352
+ #{$this}__underlay {
353
+ background-color: var(--q-badge-color);
354
+ opacity: 1;
355
+ }
356
+ }
329
357
  }
330
358
  @mixin color-variant($color) {
331
359
  &--#{$color} {
332
360
  --q-badge-color: var(--q-theme-#{$color});
361
+ &.q-badge--bold.q-badge--clickable:hover {
362
+ --q-badge-color: var(--q-theme-#{$color}-dark);
363
+ }
333
364
  }
334
365
  &--#{$color}.q-badge--tonal,
335
366
  &--#{$color}.q-badge--outlined {
336
367
  --q-badge-text-color: var(--q-theme-#{$color});
337
368
  }
338
- &--#{$color}.q-badge--bold {
369
+ &--#{$color}.q-badge--bold,
370
+ &.q-badge--clickable:hover {
339
371
  --q-badge-text-color: var(--q-theme-on-#{$color});
340
372
  .q-badge__remove.q-btn:not(:disabled):hover {
341
373
  background-color: var(--q-badge-text-color);
@@ -343,11 +375,44 @@ body {
343
375
  }
344
376
  }
345
377
  }
346
- @include color-variant(primary);
347
- @include color-variant(info);
348
- @include color-variant(success);
349
- @include color-variant(warning);
350
- @include color-variant(danger);
378
+ @include color-variant('primary');
379
+ @include color-variant('info');
380
+ @include color-variant('success');
381
+ @include color-variant('warning');
382
+ @include color-variant('danger');
383
+ @include color-variant('highlight');
384
+ }
385
+ .q-badge-indicator {
386
+ $this: &;
387
+ position: absolute;
388
+ padding: 0.1rem 0.5em;
389
+ border: 0;
390
+ &__wrapper {
391
+ position: relative;
392
+ display: inline-flex;
393
+ }
394
+
395
+ &--dot {
396
+ width: 1em;
397
+ height: 1em;
398
+ border-radius: 50%;
399
+ }
400
+ &--top-right {
401
+ bottom: calc(100% - 0.5rem);
402
+ left: calc(100% - 0.5rem);
403
+ }
404
+ &--top-left {
405
+ bottom: calc(100% - 0.5rem);
406
+ right: calc(100% - 0.5rem);
407
+ }
408
+ &--bottom-right {
409
+ top: calc(100% - 0.5rem);
410
+ left: calc(100% - 0.5rem);
411
+ }
412
+ &--bottom-left {
413
+ top: calc(100% - 0.5rem);
414
+ right: calc(100% - 0.5rem);
415
+ }
351
416
  }
352
417
  $button-primary: var(--q-theme-primary);
353
418
  $button-primary-hover: var(--q-theme-primary-dark);
@@ -942,6 +1007,48 @@ $button-text-on-plain: var(--q-theme-on-background);
942
1007
  cursor: inherit;
943
1008
  }
944
1009
  }
1010
+ .q-date-time-picker {
1011
+ &__input-icon {
1012
+ opacity: 0.5;
1013
+ }
1014
+ }
1015
+ .dp__main {
1016
+ font-family: inherit;
1017
+ width: 100%;
1018
+ }
1019
+ .dp__input_wrap {
1020
+ display: flex;
1021
+ }
1022
+ .dp__input {
1023
+ background-color: inherit;
1024
+ border-radius: inherit;
1025
+ font-family: inherit;
1026
+ border: 0;
1027
+ outline: none;
1028
+ width: 100%;
1029
+ font-size: inherit;
1030
+ line-height: inherit;
1031
+ padding: 0;
1032
+ color: inherit;
1033
+ &::placeholder {
1034
+ font-style: italic;
1035
+ }
1036
+ }
1037
+ .dp__active_date {
1038
+ background-color: var(--q-theme-primary);
1039
+ border-color: var(--q-theme-primary);
1040
+ }
1041
+ .dp__today {
1042
+ border-color: var(--q-theme-primary);
1043
+ }
1044
+ .dp__menu {
1045
+ font-size: $font-size-base;
1046
+ border-radius: $border-radius;
1047
+ .dp__cell_inner {
1048
+ font-family: sans-serif;
1049
+ }
1050
+ }
1051
+ .dp__input_wrap{position:relative;width:100%;box-sizing:unset}.dp__input_wrap:focus{border-color:var(--dp-border-color-hover);outline:none}.dp__input_valid{box-shadow:0 0 var(--dp-border-radius) var(--dp-success-color);border-color:var(--dp-success-color)}.dp__input_valid:hover{border-color:var(--dp-success-color)}.dp__input_invalid{box-shadow:0 0 var(--dp-border-radius) var(--dp-danger-color);border-color:var(--dp-danger-color)}.dp__input_invalid:hover{border-color:var(--dp-danger-color)}.dp__input{background-color:var(--dp-background-color);border-radius:var(--dp-border-radius);font-family:var(--dp-font-family);border:1px solid var(--dp-border-color);outline:none;transition:border-color .2s cubic-bezier(0.645, 0.045, 0.355, 1);width:100%;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:var(--dp-input-padding);color:var(--dp-text-color);box-sizing:border-box}.dp__input::placeholder{opacity:.7}.dp__input:hover:not(.dp__input_focus){border-color:var(--dp-border-color-hover)}.dp__input_reg{caret-color:rgba(0,0,0,0)}.dp__input_focus{border-color:var(--dp-border-color-focus)}.dp__disabled{background:var(--dp-disabled-color)}.dp__disabled::placeholder{color:var(--dp-disabled-color-text)}.dp__input_icons{display:inline-block;width:var(--dp-font-size);height:var(--dp-font-size);stroke-width:0;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:6px 12px;color:var(--dp-icon-color);box-sizing:content-box}.dp__input_icon{cursor:pointer;position:absolute;top:50%;inset-inline-start:0;transform:translateY(-50%);color:var(--dp-icon-color)}.dp--clear-btn{position:absolute;top:50%;inset-inline-end:0;transform:translateY(-50%);cursor:pointer;color:var(--dp-icon-color);background:rgba(0,0,0,0);border:none;display:inline-flex;align-items:center;padding:0;margin:0}.dp__input_icon_pad{padding-inline-start:var(--dp-input-icon-padding)}.dp__menu{background:var(--dp-background-color);border-radius:var(--dp-border-radius);min-width:var(--dp-menu-min-width);font-family:var(--dp-font-family);font-size:var(--dp-font-size);user-select:none;border:1px solid var(--dp-menu-border-color);box-sizing:border-box}.dp__menu::after{box-sizing:border-box}.dp__menu::before{box-sizing:border-box}.dp__menu:focus{border:1px solid var(--dp-menu-border-color);outline:none}.dp--menu-wrapper{position:absolute;z-index:99999}.dp__menu_inner{padding:var(--dp-menu-padding)}.dp--menu--inner-stretched{padding:6px 0}.dp__menu_index{z-index:99999}.dp-menu-loading,.dp__menu_readonly,.dp__menu_disabled{position:absolute;inset:0;z-index:999999}.dp__menu_disabled{background:hsla(0,0%,100%,.5);cursor:not-allowed}.dp__menu_readonly{background:rgba(0,0,0,0);cursor:default}.dp-menu-loading{background:hsla(0,0%,100%,.5);cursor:default}.dp--menu-load-container{display:flex;height:100%;width:100%;justify-content:center;align-items:center}.dp--menu-loader{width:48px;height:48px;border:var(--dp-loader);border-bottom-color:rgba(0,0,0,0);border-radius:50%;display:inline-block;box-sizing:border-box;animation:dp-load-rotation 1s linear infinite;position:absolute}@keyframes dp-load-rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.dp__arrow_top{left:var(--dp-arrow-left);top:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-top:1px solid var(--dp-menu-border-color);transform:translate(-50%, -50%) rotate(-45deg)}.dp__arrow_bottom{left:var(--dp-arrow-left);bottom:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-bottom:1px solid var(--dp-menu-border-color);transform:translate(-50%, 50%) rotate(45deg)}.dp__action_extra{text-align:center;padding:2px 0}.dp--preset-dates{padding:5px;border-inline-end:1px solid var(--dp-border-color)}.dp--preset-dates[data-dp-mobile]{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}.dp--preset-dates-collapsed{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}.dp__sidebar_left{padding:5px;border-inline-end:1px solid var(--dp-border-color)}.dp__sidebar_right{padding:5px;margin-inline-end:1px solid var(--dp-border-color)}.dp--preset-range{display:block;width:100%;padding:5px;text-align:left;white-space:nowrap;color:var(--dp-text-color);border-radius:var(--dp-border-radius);transition:var(--dp-common-transition)}.dp--preset-range:hover{background-color:var(--dp-hover-color);color:var(--dp-hover-text-color);cursor:pointer}.dp--preset-range[data-dp-mobile]{border:1px solid var(--dp-border-color);margin:0 3px}.dp--preset-range[data-dp-mobile]:first-child{margin-left:0}.dp--preset-range[data-dp-mobile]:last-child{margin-right:0}.dp--preset-range-collapsed{border:1px solid var(--dp-border-color);margin:0 3px}.dp--preset-range-collapsed:first-child{margin-left:0}.dp--preset-range-collapsed:last-child{margin-right:0}.dp__menu_content_wrapper{display:flex}.dp__menu_content_wrapper[data-dp-mobile]{flex-direction:column-reverse}.dp--menu-content-wrapper-collapsed{flex-direction:column-reverse}.dp__calendar_header{position:relative;display:flex;justify-content:center;align-items:center;color:var(--dp-text-color);white-space:nowrap;font-weight:bold}.dp__calendar_header_item{text-align:center;flex-grow:1;height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);box-sizing:border-box}.dp__calendar_row{display:flex;justify-content:center;align-items:center;margin:var(--dp-row-margin)}.dp__calendar_item{text-align:center;flex-grow:1;box-sizing:border-box;color:var(--dp-text-color)}.dp__calendar{position:relative}.dp__calendar_header_cell{border-bottom:thin solid var(--dp-border-color);padding:var(--dp-calendar-header-cell-padding)}.dp__cell_inner{display:flex;align-items:center;text-align:center;justify-content:center;border-radius:var(--dp-cell-border-radius);height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);border:1px solid rgba(0,0,0,0);box-sizing:border-box;position:relative}.dp__cell_inner:hover{transition:all .2s}.dp__cell_auto_range_start,.dp__date_hover_start:hover,.dp__range_start{border-end-end-radius:0;border-start-end-radius:0}.dp__cell_auto_range_end,.dp__date_hover_end:hover,.dp__range_end{border-end-start-radius:0;border-start-start-radius:0}.dp__range_end,.dp__range_start,.dp__active_date{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__date_hover_end:hover,.dp__date_hover_start:hover,.dp__date_hover:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__cell_offset{color:var(--dp-secondary-color)}.dp__cell_disabled{color:var(--dp-secondary-color);cursor:not-allowed}.dp__range_between{background:var(--dp-range-between-dates-background-color);color:var(--dp-range-between-dates-text-color);border-radius:0;border:1px solid var(--dp-range-between-border-color)}.dp__range_between_week{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border-radius:0;border-top:1px solid var(--dp-primary-color);border-bottom:1px solid var(--dp-primary-color)}.dp__today{border:1px solid var(--dp-primary-color)}.dp__week_num{color:var(--dp-secondary-color);text-align:center}.dp__cell_auto_range{border-radius:0;border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}.dp__cell_auto_range_start{border-start-start-radius:var(--dp-cell-border-radius);border-end-start-radius:var(--dp-cell-border-radius);border-inline-start:1px dashed var(--dp-primary-color);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}.dp__cell_auto_range_end{border-start-end-radius:var(--dp-cell-border-radius);border-end-end-radius:var(--dp-cell-border-radius);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color);border-inline-end:1px dashed var(--dp-primary-color)}.dp__calendar_header_separator{width:100%;height:1px;background:var(--dp-border-color)}.dp__calendar_next{margin-inline-start:var(--dp-multi-calendars-spacing)}.dp__marker_line,.dp__marker_dot{height:5px;background-color:var(--dp-marker-color);position:absolute;bottom:0}.dp__marker_dot{width:5px;border-radius:50%;left:50%;transform:translateX(-50%)}.dp__marker_line{width:100%;left:0}.dp__marker_tooltip{position:absolute;border-radius:var(--dp-border-radius);background-color:var(--dp-tooltip-color);padding:5px;border:1px solid var(--dp-border-color);z-index:99999;box-sizing:border-box;cursor:default}.dp__tooltip_content{white-space:nowrap}.dp__tooltip_text{display:flex;align-items:center;flex-flow:row nowrap;color:var(--dp-text-color)}.dp__tooltip_mark{height:5px;width:5px;border-radius:50%;background-color:var(--dp-text-color);color:var(--dp-text-color);margin-inline-end:5px}.dp__arrow_bottom_tp{bottom:0;height:8px;width:8px;background-color:var(--dp-tooltip-color);position:absolute;border-inline-end:1px solid var(--dp-border-color);border-bottom:1px solid var(--dp-border-color);transform:translate(-50%, 50%) rotate(45deg)}.dp__instance_calendar{position:relative;width:100%}.dp__flex_display[data-dp-mobile]{flex-direction:column}.dp--flex-display-collapsed{flex-direction:column}.dp__cell_highlight{background-color:var(--dp-highlight-color)}.dp__month_year_row{display:flex;align-items:center;height:var(--dp-month-year-row-height);color:var(--dp-text-color);box-sizing:border-box}.dp__inner_nav{display:flex;align-items:center;justify-content:center;cursor:pointer;height:var(--dp-month-year-row-button-size);width:var(--dp-month-year-row-button-size);color:var(--dp-icon-color);text-align:center;border-radius:50%}.dp__inner_nav svg{height:var(--dp-button-icon-height);width:var(--dp-button-icon-height)}.dp__inner_nav:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}[dir=rtl] .dp__inner_nav{transform:rotate(180deg)}.dp__inner_nav_disabled:hover,.dp__inner_nav_disabled{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}.dp--year-select,.dp__month_year_select{text-align:center;cursor:pointer;height:var(--dp-month-year-row-height);display:flex;align-items:center;justify-content:center;border-radius:var(--dp-border-radius);box-sizing:border-box;color:var(--dp-text-color)}.dp--year-select:hover,.dp__month_year_select:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp__month_year_select{width:50%}.dp--year-select{width:100%}.dp__month_year_wrap{display:flex;flex-direction:row;width:100%}.dp__year_disable_select{justify-content:space-around}.dp--header-wrap{display:flex;width:100%;flex-direction:column}.dp__overlay{width:100%;background:var(--dp-background-color);transition:opacity 1s ease-out;z-index:99999;font-family:var(--dp-font-family);color:var(--dp-text-color);box-sizing:border-box}.dp--overlay-absolute{position:absolute;height:100%;top:0;left:0}.dp--overlay-relative{position:relative}.dp__overlay_container::-webkit-scrollbar-track{box-shadow:var(--dp-scroll-bar-background);background-color:var(--dp-scroll-bar-background)}.dp__overlay_container::-webkit-scrollbar{width:5px;background-color:var(--dp-scroll-bar-background)}.dp__overlay_container::-webkit-scrollbar-thumb{background-color:var(--dp-scroll-bar-color);border-radius:10px}.dp__overlay:focus{border:none;outline:none}.dp__container_flex{display:flex}.dp__container_block{display:block}.dp__overlay_container{flex-direction:column;overflow-y:auto;height:var(--dp-overlay-height)}.dp__time_picker_overlay_container{height:100%}.dp__overlay_row{padding:0;box-sizing:border-box;display:flex;margin-inline:auto;flex-wrap:wrap;max-width:100%;width:100%;align-items:center}.dp__flex_row{flex:1}.dp__overlay_col{box-sizing:border-box;width:33%;padding:var(--dp-overlay-col-padding);white-space:nowrap}.dp__overlay_cell_pad{padding:var(--dp-common-padding) 0}.dp__overlay_cell_active{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center;background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__overlay_cell{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center}.dp__overlay_cell:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp__cell_in_between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__over_action_scroll{right:5px;box-sizing:border-box}.dp__overlay_cell_disabled{cursor:not-allowed;background:var(--dp-disabled-color)}.dp__overlay_cell_disabled:hover{background:var(--dp-disabled-color)}.dp__overlay_cell_active_disabled{cursor:not-allowed;background:var(--dp-primary-disabled-color)}.dp__overlay_cell_active_disabled:hover{background:var(--dp-primary-disabled-color)}.dp__btn,.dp--qr-btn,.dp--time-overlay-btn,.dp--time-invalid{border:none;font:inherit;transition:var(--dp-common-transition);line-height:normal}.dp--year-mode-picker{display:flex;width:100%;align-items:center;justify-content:space-between;height:var(--dp-cell-size)}.dp--tp-wrap{max-width:var(--dp-menu-min-width)}.dp--tp-wrap[data-dp-mobile]{max-width:100%}.dp__time_input{width:100%;display:flex;align-items:center;justify-content:center;user-select:none;font-family:var(--dp-font-family);color:var(--dp-text-color)}.dp__time_col_reg_block{padding:0 20px}.dp__time_col_reg_inline{padding:0 10px}.dp__time_col_reg_with_button{padding:0 15px}.dp__time_col_reg_with_button[data-compact~=true]{padding:0 5px}.dp__time_col_sec{padding:0 10px}.dp__time_col_sec_with_button{padding:0 5px}.dp__time_col_sec_with_button[data-collapsed~=true]{padding:0}.dp__time_col{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column}.dp__time_col_block{font-size:var(--dp-time-font-size)}.dp__time_display_block{padding:0 3px}.dp__time_display_inline{padding:5px}.dp__time_picker_inline_container{display:flex;width:100%;justify-content:center}.dp__inc_dec_button{padding:5px;margin:0;height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;color:var(--dp-icon-color);box-sizing:border-box}.dp__inc_dec_button svg{height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size)}.dp__inc_dec_button:hover{background:var(--dp-hover-color);color:var(--dp-primary-color)}.dp__time_display{cursor:pointer;color:var(--dp-text-color);border-radius:var(--dp-border-radius);display:flex;align-items:center;justify-content:center}.dp__time_display:hover:enabled{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__inc_dec_button_inline{width:100%;padding:0;height:8px;cursor:pointer;display:flex;align-items:center}.dp__inc_dec_button_disabled,.dp__inc_dec_button_disabled:hover{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}.dp__pm_am_button{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border:none;padding:var(--dp-common-padding);border-radius:var(--dp-border-radius);cursor:pointer}.dp__pm_am_button[data-compact~=true]{padding:7px}.dp__tp_inline_btn_bar{width:100%;height:4px;background-color:var(--dp-secondary-color);transition:var(--dp-common-transition);border-collapse:collapse}.dp__tp_inline_btn_top:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_top:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}.dp--time-overlay-btn{background:none}.dp--time-invalid{background-color:var(--dp-disabled-color)}.dp__action_row{display:flex;align-items:center;width:100%;padding:var(--dp-action-row-padding);box-sizing:border-box;color:var(--dp-text-color);flex-flow:row nowrap}.dp__action_row svg{height:var(--dp-button-icon-height);width:auto}.dp__selection_preview{display:block;color:var(--dp-text-color);font-size:var(--dp-preview-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dp__action_buttons{display:flex;flex:0;white-space:nowrap;align-items:center;justify-content:flex-end;margin-inline-start:auto}.dp__action_button{display:inline-flex;align-items:center;background:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);padding:var(--dp-action-buttons-padding);line-height:var(--dp-action-button-height);margin-inline-start:3px;height:var(--dp-action-button-height);cursor:pointer;border-radius:var(--dp-border-radius);font-size:var(--dp-preview-font-size);font-family:var(--dp-font-family)}.dp__action_cancel{color:var(--dp-text-color);border:1px solid var(--dp-border-color)}.dp__action_cancel:hover{border-color:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}.dp__action_buttons .dp__action_select{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__action_buttons .dp__action_select:hover{background:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}.dp__action_buttons .dp__action_select:disabled{background:var(--dp-primary-disabled-color);cursor:not-allowed}.dp-quarter-picker-wrap{display:flex;flex-direction:column;height:100%;min-width:var(--dp-menu-min-width)}.dp--qr-btn-disabled{cursor:not-allowed;background:var(--dp-disabled-color)}.dp--qr-btn-disabled:hover{background:var(--dp-disabled-color)}.dp--qr-btn{width:100%;padding:var(--dp-common-padding)}.dp--qr-btn:not(.dp--highlighted,.dp--qr-btn-active,.dp--qr-btn-disabled,.dp--qr-btn-between){background:none}.dp--qr-btn:hover:not(.dp--qr-btn-active,.dp--qr-btn-disabled){background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp--quarter-items{display:flex;flex-direction:column;flex:1;width:100%;height:100%;justify-content:space-evenly}.dp--qr-btn-active{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp--qr-btn-between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}:root{--dp-common-transition: all 0.1s ease-in;--dp-menu-padding: 6px 8px;--dp-animation-duration: 0.1s;--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);--dp-transition-timing: ease-out;--dp-action-row-transtion: all 0.2s ease-in;--dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;--dp-border-radius: 4px;--dp-cell-border-radius: 4px;--dp-transition-length: 22px;--dp-transition-timing-general: 0.1s;--dp-button-height: 35px;--dp-month-year-row-height: 35px;--dp-month-year-row-button-size: 25px;--dp-button-icon-height: 20px;--dp-calendar-wrap-padding: 0 5px;--dp-cell-size: 35px;--dp-cell-padding: 5px;--dp-common-padding: 10px;--dp-input-icon-padding: 35px;--dp-input-padding: 6px 30px 6px 12px;--dp-menu-min-width: 260px;--dp-action-buttons-padding: 1px 6px;--dp-row-margin: 5px 0;--dp-calendar-header-cell-padding: 0.5rem;--dp-multi-calendars-spacing: 10px;--dp-overlay-col-padding: 3px;--dp-time-inc-dec-button-size: 32px;--dp-font-size: 1rem;--dp-preview-font-size: 0.8rem;--dp-time-font-size: 2rem;--dp-action-button-height: 22px;--dp-action-row-padding: 8px;--dp-direction: ltr}.dp__theme_dark{--dp-background-color: #212121;--dp-text-color: #fff;--dp-hover-color: #484848;--dp-hover-text-color: #fff;--dp-hover-icon-color: #959595;--dp-primary-color: #005cb2;--dp-primary-disabled-color: #61a8ea;--dp-primary-text-color: #fff;--dp-secondary-color: #a9a9a9;--dp-border-color: #2d2d2d;--dp-menu-border-color: #2d2d2d;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #737373;--dp-disabled-color-text: #d0d0d0;--dp-scroll-bar-background: #212121;--dp-scroll-bar-color: #484848;--dp-success-color: #00701a;--dp-success-color-disabled: #428f59;--dp-icon-color: #959595;--dp-danger-color: #e53935;--dp-marker-color: #e53935;--dp-tooltip-color: #3e3e3e;--dp-highlight-color: rgb(0 92 178 / 20%);--dp-range-between-dates-background-color: var(--dp-hover-color, #484848);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);--dp-range-between-border-color: var(--dp-hover-color, #fff);--dp-loader: 5px solid #005cb2}.dp__theme_light{--dp-background-color: #fff;--dp-text-color: #212121;--dp-hover-color: #f3f3f3;--dp-hover-text-color: #212121;--dp-hover-icon-color: #959595;--dp-primary-color: #1976d2;--dp-primary-disabled-color: #6bacea;--dp-primary-text-color: #fff;--dp-secondary-color: #c0c4cc;--dp-border-color: #ddd;--dp-menu-border-color: #ddd;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #f6f6f6;--dp-scroll-bar-background: #f3f3f3;--dp-scroll-bar-color: #959595;--dp-success-color: #76d275;--dp-success-color-disabled: #a3d9b1;--dp-icon-color: #959595;--dp-danger-color: #ff6f60;--dp-marker-color: #ff6f60;--dp-tooltip-color: #fafafa;--dp-disabled-color-text: #8e8e8e;--dp-highlight-color: rgb(25 118 210 / 10%);--dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);--dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);--dp-loader: 5px solid #1976d2}.dp__flex{display:flex;align-items:center}.dp__btn{background:none}.dp__main{font-family:var(--dp-font-family);user-select:none;box-sizing:border-box;position:relative;width:100%}.dp__main *{direction:var(--dp-direction, ltr)}.dp__pointer{cursor:pointer}.dp__icon{stroke:currentcolor;fill:currentcolor}.dp__button{width:100%;text-align:center;color:var(--dp-icon-color);cursor:pointer;display:flex;align-items:center;place-content:center center;padding:var(--dp-common-padding);box-sizing:border-box;height:var(--dp-button-height)}.dp__button.dp__overlay_action{position:absolute;bottom:0}.dp__button:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}.dp__button svg{height:var(--dp-button-icon-height);width:auto}.dp__button_bottom{border-bottom-left-radius:var(--dp-border-radius);border-bottom-right-radius:var(--dp-border-radius)}.dp__flex_display{display:flex}.dp__flex_display_with_input{flex-direction:column;align-items:flex-start}.dp__relative{position:relative}.calendar-next-enter-active,.calendar-next-leave-active,.calendar-prev-enter-active,.calendar-prev-leave-active{transition:all var(--dp-transition-timing-general) ease-out}.calendar-next-enter-from{opacity:0;transform:translateX(var(--dp-transition-length))}.calendar-next-leave-to{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}.calendar-prev-enter-from{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}.calendar-prev-leave-to{opacity:0;transform:translateX(var(--dp-transition-length))}.dp-menu-appear-bottom-enter-active,.dp-menu-appear-bottom-leave-active,.dp-menu-appear-top-enter-active,.dp-menu-appear-top-leave-active,.dp-slide-up-enter-active,.dp-slide-up-leave-active,.dp-slide-down-enter-active,.dp-slide-down-leave-active{transition:all var(--dp-animation-duration) var(--dp-transition-timing)}.dp-menu-appear-top-enter-from,.dp-menu-appear-top-leave-to,.dp-slide-down-leave-to,.dp-slide-up-enter-from{opacity:0;transform:translateY(var(--dp-transition-length))}.dp-menu-appear-bottom-enter-from,.dp-menu-appear-bottom-leave-to,.dp-slide-down-enter-from,.dp-slide-up-leave-to{opacity:0;transform:translateY(calc(var(--dp-transition-length) * -1))}.dp--arrow-btn-nav{transition:var(--dp-common-transition)}.dp--highlighted{background-color:var(--dp-highlight-color)}.dp--hidden-el{visibility:hidden}
945
1052
  .q-dialog {
946
1053
  display: flex;
947
1054
  flex-direction: column;
@@ -1101,6 +1208,100 @@ $button-text-on-plain: var(--q-theme-on-background);
1101
1208
  width: 100%;
1102
1209
  }
1103
1210
  }
1211
+ .q-file-input {
1212
+ $this: &;
1213
+ --q-file-input__preview-side: 3rem;
1214
+ --q-file-input__preview-padding: 0.75rem;
1215
+ justify-content: center;
1216
+ flex-direction: column;
1217
+ border-width: 2px;
1218
+ border-style: dashed;
1219
+ padding: var(--q-file-input__preview-padding);
1220
+ transition:
1221
+ border-color 0.2s ease,
1222
+ background-color 0.2s ease;
1223
+ &__drop-area {
1224
+ display: flex;
1225
+ gap: 0.5rem;
1226
+ align-items: center;
1227
+ color: var(--q-theme-neutral);
1228
+ min-height: var(--q-file-input__preview-side);
1229
+ }
1230
+ &__file-details {
1231
+ display: flex;
1232
+ gap: 0.5rem;
1233
+ align-items: center;
1234
+ width: 100%;
1235
+ }
1236
+ &__attached-file {
1237
+ display: flex;
1238
+ align-items: center;
1239
+ gap: var(--q-file-input__preview-padding);
1240
+ width: 100%;
1241
+ }
1242
+ &__file-input {
1243
+ display: none;
1244
+ }
1245
+ &__preview,
1246
+ &__preview.q-icon {
1247
+ color: var(--q-theme-neutral);
1248
+ width: var(--q-file-input__preview-side);
1249
+ height: var(--q-file-input__preview-side);
1250
+ flex-shrink: 0;
1251
+ }
1252
+ &__image-preview {
1253
+ border-radius: var(--border-radius);
1254
+ overflow: hidden;
1255
+ img {
1256
+ width: 100%;
1257
+ height: 100%;
1258
+ object-fit: cover;
1259
+ }
1260
+ }
1261
+ &__file-meta {
1262
+ display: flex;
1263
+ flex-direction: column;
1264
+ justify-content: center;
1265
+ line-height: 1;
1266
+ gap: $space-base;
1267
+ }
1268
+ &__file-name {
1269
+ word-wrap: break-word;
1270
+ overflow-wrap: break-word;
1271
+ hyphens: auto;
1272
+ word-break: break-word;
1273
+ white-space: normal;
1274
+ color: var(--q-theme-neutral-dark);
1275
+ }
1276
+ &__file-type {
1277
+ color: var(--q-theme-neutral);
1278
+ }
1279
+ &__action-buttons {
1280
+ display: flex;
1281
+ gap: 0.5rem;
1282
+ }
1283
+ &__empty-container {
1284
+ display: flex;
1285
+ align-items: center;
1286
+ gap: 0.25rem;
1287
+ color: var(--q-theme-neutral);
1288
+ min-height: var(--q-file-input__preview-side);
1289
+ }
1290
+
1291
+ &--highlighted {
1292
+ border-color: var(--q-theme-primary);
1293
+ background-color: var(--q-theme-primary-light);
1294
+ }
1295
+ &--readonly,
1296
+ &--disabled {
1297
+ border-style: solid;
1298
+ }
1299
+ &:not(#{$this}--disabled.q-field-control) {
1300
+ &:focus-within {
1301
+ outline: none;
1302
+ }
1303
+ }
1304
+ }
1104
1305
  .q-icon {
1105
1306
  display: inline-block;
1106
1307
  &__svg {
@@ -1,4 +1,4 @@
1
- import { QBadgeProps, DEFAULT_ICONS } from './types';
1
+ import { QBadgeProps, DEFAULT_ICONS, DEFAULT_TEXTS } from './types';
2
2
  declare function __VLS_template(): {
3
3
  attrs: Partial<{}>;
4
4
  slots: {
@@ -16,6 +16,7 @@ declare const __VLS_component: import('vue').DefineComponent<QBadgeProps, {}, {}
16
16
  variant: "tonal" | "bold" | "outlined";
17
17
  color: string;
18
18
  icons: typeof DEFAULT_ICONS;
19
+ texts: typeof DEFAULT_TEXTS;
19
20
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
20
21
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
21
22
  export default _default;
@@ -1 +1 @@
1
- {"version":3,"file":"QBadge.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/QBadge.vue"],"names":[],"mappings":"AAmBA;AAqFC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AA0DxC,iBAAS,cAAc;WAiET,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;yFASnB,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":"AAsBA;AAiHC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAoFvD,iBAAS,cAAc;WAqET,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;yFASnB,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,84 +1,93 @@
1
- import { defineComponent as g, computed as l, createElementBlock as b, openBlock as n, normalizeStyle as C, normalizeClass as _, createElementVNode as a, renderSlot as y, createBlock as q, createCommentVNode as k, unref as s, withCtx as B, createVNode as x, normalizeProps as N, guardReactiveProps as z } from "vue";
2
- import { QButton as E } from "../QButton/index.js";
3
- import { QIcon as Q } from "../QIcon/index.js";
4
- import { DEFAULT_ICONS as S } from "./types.js";
5
- import { parseColor as V, rgbToHsl as $, getContrastingColor as h } from "../../utils/color.js";
6
- const w = { class: "q-badge__content" }, A = /* @__PURE__ */ g({
1
+ import { defineComponent as q, useAttrs as h, computed as r, createElementBlock as B, openBlock as d, withKeys as T, normalizeStyle as w, normalizeClass as E, withModifiers as N, createElementVNode as u, renderSlot as S, createBlock as z, createCommentVNode as A, unref as m, withCtx as H, createVNode as I, normalizeProps as K, guardReactiveProps as P } from "vue";
2
+ import { QButton as Q } from "../QButton/index.js";
3
+ import { QIcon as U } from "../QIcon/index.js";
4
+ import { DEFAULT_TEXTS as V, DEFAULT_ICONS as $ } from "./types.js";
5
+ import { parseColor as D, rgbToHsl as F, colorToHex as L, darken as R, getContrastingColor as M } from "../../utils/color.js";
6
+ const O = ["role", "tabindex", "onKeydown"], X = { class: "q-badge__content" }, Z = /* @__PURE__ */ q({
7
7
  __name: "QBadge",
8
8
  props: {
9
9
  color: { default: "primary" },
10
10
  variant: { default: "tonal" },
11
11
  removable: { type: Boolean },
12
12
  pill: { type: Boolean },
13
- icons: { default: () => S }
13
+ icons: { default: () => $ },
14
+ texts: { default: () => V }
14
15
  },
15
16
  emits: ["click:remove"],
16
- setup(i, { emit: c }) {
17
- const e = i, d = c, r = l(
18
- () => ["primary", "info", "success", "warning", "danger"].includes(e.color)
19
- ), m = l(() => {
20
- const o = r.value ? `q-badge--${e.color}` : void 0;
21
- return ["q-badge", `q-badge--${e.variant}`, o, { "q-badge--pill": e.pill }];
22
- }), u = l(() => {
23
- let o, t;
24
- if (!r.value)
25
- if (o = e.color, e.variant === "tonal")
26
- t = e.color;
27
- else {
28
- const f = V(o), v = $(f);
29
- t = h(v.l);
17
+ setup(f, { emit: p }) {
18
+ const e = f, v = p, b = h(), l = r(() => !!b.onClick), n = r(
19
+ () => ["primary", "info", "success", "warning", "danger", "highlight"].includes(e.color)
20
+ ), g = r(() => {
21
+ const o = n.value ? `q-badge--${e.color}` : void 0;
22
+ return [
23
+ "q-badge",
24
+ `q-badge--${e.variant}`,
25
+ o,
26
+ {
27
+ "q-badge--pill": e.pill,
28
+ "q-badge--clickable": l.value
30
29
  }
30
+ ];
31
+ }), C = r(() => {
32
+ let o, t, a, i;
33
+ if (!n.value) {
34
+ o = e.color;
35
+ const s = D(o), x = F(s), c = M(x.l), y = L(R(s, 25));
36
+ e.variant === "tonal" || e.variant === "outlined" ? (t = o, l.value && (i = c)) : (t = c, l.value && (a = y));
37
+ }
31
38
  return {
32
39
  "--q-badge-color": o,
33
- "--q-badge-text-color": t
40
+ "--q-badge-text-color": t,
41
+ "--q-badge-text-hover-color": i,
42
+ "--q-badge-hover-color": a
34
43
  };
35
44
  });
36
- function p() {
37
- d("click:remove");
45
+ function _() {
46
+ v("click:remove");
38
47
  }
39
- return (o, t) => (n(), b(
40
- "span",
41
- {
42
- class: _(m.value),
43
- role: "presentation",
44
- style: C(u.value)
45
- },
46
- [
47
- t[0] || (t[0] = a(
48
- "div",
49
- { class: "q-badge__underlay" },
50
- null,
51
- -1
52
- /* HOISTED */
53
- )),
54
- a("div", w, [
55
- y(o.$slots, "default"),
56
- e.removable ? (n(), q(s(E), {
57
- key: 0,
58
- class: "q-badge__remove",
59
- borderless: "",
60
- tabindex: "0",
61
- onClick: p
62
- }, {
63
- default: B(() => [
64
- x(
65
- s(Q),
66
- N(z(e.icons.remove)),
67
- null,
68
- 16
69
- /* FULL_PROPS */
70
- )
71
- ]),
72
- _: 1
73
- /* STABLE */
74
- })) : k("v-if", !0)
75
- ])
76
- ],
77
- 6
78
- /* CLASS, STYLE */
79
- ));
48
+ function k(o) {
49
+ o.stopImmediatePropagation();
50
+ }
51
+ return (o, t) => (d(), B("span", {
52
+ class: E(g.value),
53
+ role: l.value ? "button" : "presentation",
54
+ style: w(C.value),
55
+ tabindex: l.value ? 0 : void 0,
56
+ onKeydown: T(N(k, ["stop", "prevent"]), ["enter"])
57
+ }, [
58
+ t[0] || (t[0] = u(
59
+ "div",
60
+ { class: "q-badge__underlay" },
61
+ null,
62
+ -1
63
+ /* HOISTED */
64
+ )),
65
+ u("div", X, [
66
+ S(o.$slots, "default"),
67
+ e.removable ? (d(), z(m(Q), {
68
+ key: 0,
69
+ class: "q-badge__remove",
70
+ borderless: "",
71
+ tabindex: "0",
72
+ onClick: _,
73
+ "aria-label": e.texts.removeText
74
+ }, {
75
+ default: H(() => [
76
+ I(
77
+ m(U),
78
+ K(P(e.icons.remove)),
79
+ null,
80
+ 16
81
+ /* FULL_PROPS */
82
+ )
83
+ ]),
84
+ _: 1
85
+ /* STABLE */
86
+ }, 8, ["aria-label"])) : A("v-if", !0)
87
+ ])
88
+ ], 46, O));
80
89
  }
81
90
  });
82
91
  export {
83
- A as default
92
+ Z as default
84
93
  };
@@ -7,6 +7,7 @@ declare const QBadge: {
7
7
  variant: "tonal" | "bold" | "outlined";
8
8
  color: string;
9
9
  icons: typeof import('./types').DEFAULT_ICONS;
10
+ texts: typeof import('./types').DEFAULT_TEXTS;
10
11
  }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLSpanElement, import('vue').ComponentProvideOptions, {
11
12
  P: {};
12
13
  B: {};
@@ -20,6 +21,7 @@ declare const QBadge: {
20
21
  variant: "tonal" | "bold" | "outlined";
21
22
  color: string;
22
23
  icons: typeof import('./types').DEFAULT_ICONS;
24
+ texts: typeof import('./types').DEFAULT_TEXTS;
23
25
  }>;
24
26
  __isFragment?: never;
25
27
  __isTeleport?: never;
@@ -32,6 +34,7 @@ declare const QBadge: {
32
34
  variant: "tonal" | "bold" | "outlined";
33
35
  color: string;
34
36
  icons: typeof import('./types').DEFAULT_ICONS;
37
+ texts: typeof import('./types').DEFAULT_TEXTS;
35
38
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
36
39
  $slots: {
37
40
  default?(_: {}): any;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA2B,CAAA;AAGvC,OAAO,EAAE,MAAM,EAAE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA2B,CAAA;AAGvC,OAAO,EAAE,MAAM,EAAE,CAAA"}
@@ -20,10 +20,17 @@ export type QBadgeProps = {
20
20
  * Custom icon configurations.
21
21
  */
22
22
  icons?: typeof DEFAULT_ICONS;
23
+ /**
24
+ * Custom texts.
25
+ */
26
+ texts?: typeof DEFAULT_TEXTS;
23
27
  };
24
28
  export declare const DEFAULT_ICONS: {
25
29
  remove: {
26
30
  icon: string;
27
31
  };
28
32
  };
33
+ export declare const DEFAULT_TEXTS: {
34
+ removeText: string;
35
+ };
29
36
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/types.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GAAG;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAA;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,aAAa;;;;CAIM,CAAA"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/types.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GAAG;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAA;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,aAAa;;;;CAIM,CAAA;AAEhC,eAAO,MAAM,aAAa;;CAEQ,CAAA"}
@@ -1,8 +1,11 @@
1
- const o = {
1
+ const e = {
2
2
  remove: {
3
3
  icon: "close"
4
4
  }
5
+ }, o = {
6
+ removeText: "Remove"
5
7
  };
6
8
  export {
7
- o as DEFAULT_ICONS
9
+ e as DEFAULT_ICONS,
10
+ o as DEFAULT_TEXTS
8
11
  };
@@ -0,0 +1,22 @@
1
+ import { QBadgeIndicatorProps } from './types';
2
+ declare function __VLS_template(): {
3
+ attrs: Partial<{}>;
4
+ slots: {
5
+ default?(_: {}): any;
6
+ content?(_: {}): any;
7
+ };
8
+ refs: {};
9
+ rootEl: HTMLDivElement;
10
+ };
11
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
12
+ declare const __VLS_component: import('vue').DefineComponent<QBadgeIndicatorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<QBadgeIndicatorProps> & Readonly<{}>, {
13
+ position: import('./types').QBadgeIndicatorPosition;
14
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
15
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
16
+ export default _default;
17
+ type __VLS_WithTemplateSlots<T, S> = T & {
18
+ new (): {
19
+ $slots: S;
20
+ };
21
+ };
22
+ //# sourceMappingURL=QBadgeIndicator.vue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"QBadgeIndicator.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QBadgeIndicator/QBadgeIndicator.vue"],"names":[],"mappings":"AAcA;AAgDC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA4BpD,iBAAS,cAAc;WA8CT,OAAO,IAA6B;;yBAXrB,GAAG;yBACH,GAAG;;;;EAe/B;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;wFAQnB,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"}
@@ -0,0 +1,43 @@
1
+ import { defineComponent as l, useSlots as i, computed as e, createElementBlock as d, openBlock as p, renderSlot as n, createVNode as u, unref as m, normalizeClass as f, withCtx as _, createTextVNode as g, toDisplayString as b } from "vue";
2
+ import { QBadge as h } from "../QBadge/index.js";
3
+ const q = { class: "q-badge-indicator__wrapper" }, S = /* @__PURE__ */ l({
4
+ __name: "QBadgeIndicator",
5
+ props: {
6
+ content: {},
7
+ position: { default: "top-right" },
8
+ color: {}
9
+ },
10
+ setup(s) {
11
+ const o = s, a = i(), c = e(() => !o.content && !a.content), r = e(() => [
12
+ "q-badge-indicator",
13
+ `q-badge-indicator--${o.position}`,
14
+ {
15
+ "q-badge-indicator--dot": c.value
16
+ }
17
+ ]);
18
+ return (t, v) => (p(), d("div", q, [
19
+ n(t.$slots, "default"),
20
+ u(m(h), {
21
+ pill: "",
22
+ variant: "bold",
23
+ class: f(r.value),
24
+ color: o.color
25
+ }, {
26
+ default: _(() => [
27
+ n(t.$slots, "content", {}, () => [
28
+ g(
29
+ b(o.content),
30
+ 1
31
+ /* TEXT */
32
+ )
33
+ ])
34
+ ]),
35
+ _: 3
36
+ /* FORWARDED */
37
+ }, 8, ["class", "color"])
38
+ ]));
39
+ }
40
+ });
41
+ export {
42
+ S as default
43
+ };
@@ -0,0 +1,4 @@
1
+ import f from "./QBadgeIndicator.vue.js";
2
+ export {
3
+ f as default
4
+ };