@quidgest/ui 0.5.18 → 0.6.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 (11) hide show
  1. package/dist/index.d.ts +349 -147
  2. package/dist/ui.css +69 -29
  3. package/dist/ui.esm.js +612 -522
  4. package/dist/ui.esm.js.map +1 -1
  5. package/dist/ui.js +4 -4
  6. package/dist/ui.js.map +1 -1
  7. package/dist/ui.min.css +1 -1
  8. package/dist/ui.min.js +51 -50
  9. package/dist/ui.min.js.map +1 -1
  10. package/dist/ui.scss +65 -28
  11. package/package.json +3 -1
package/dist/ui.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Quidgest Framework v0.5.18
2
+ * Quidgest Framework v0.6.0
3
3
  * (c) 2023 Quidgest - Consultores de Gestão, SA
4
4
  */
5
5
 
@@ -272,11 +272,16 @@ $btn-outline: var(--q-theme-primary-light);
272
272
  align-items: center;
273
273
  justify-content: center;
274
274
  font-size: $font-size-base;
275
- line-height: $font-size-base;
276
- min-width: $font-size-base;
277
275
  white-space: nowrap;
278
276
  gap: 0.25rem;
279
277
  pointer-events: none;
278
+ @if $compact {
279
+ line-height: 15px;
280
+ min-width: 15px;
281
+ } @else {
282
+ line-height: 16px;
283
+ min-width: 16px;
284
+ }
280
285
  }
281
286
  .q-spinner-loader {
282
287
  color: currentColor;
@@ -406,35 +411,38 @@ $btn-outline: var(--q-theme-primary-light);
406
411
  }
407
412
  }
408
413
  }
409
- .q-icon {
410
- display: inline-block;
411
- &__svg {
412
- fill: currentColor;
413
- }
414
- &__svg,
415
- &__img {
416
- width: 1em;
417
- height: 1em;
418
- }
419
- }
420
414
  $input-padding-y: 0.26rem;
421
415
  $input-padding-x: 0.25rem;
422
416
  $input-height: 31.89px;
423
- .q-input {
417
+ .q-field {
424
418
  display: flex;
425
- align-items: center;
426
- height: $input-height;
427
- width: 100%;
419
+ flex-direction: column;
428
420
  border-radius: $border-radius;
429
- border-width: 1px;
430
- background-color: transparent;
431
- padding: $input-padding-y $input-padding-x;
432
- font-size: 0.9rem;
433
- line-height: 1.5rem;
434
- transition: color var(--transition-duration) var(--transition-timing-function);
435
421
  &:focus-within {
436
422
  outline: $outline;
437
423
  }
424
+ &__label {
425
+ color: rgb(var(--q-theme-on-background-rgb) / 0.8);
426
+ line-height: 1.5;
427
+ &[data-val-required='true']::after {
428
+ content: ' *';
429
+ font-weight: 700;
430
+ color: var(--q-theme-danger);
431
+ }
432
+ }
433
+ &__control {
434
+ display: flex;
435
+ align-items: center;
436
+ height: $input-height;
437
+ width: 100%;
438
+ border-radius: $border-radius;
439
+ border-width: 1px;
440
+ background-color: transparent;
441
+ padding: $input-padding-y $input-padding-x;
442
+ font-size: 0.9rem;
443
+ line-height: 1.5rem;
444
+ transition: color var(--transition-duration) var(--transition-timing-function);
445
+ }
438
446
  &__prepend,
439
447
  &__append {
440
448
  display: flex;
@@ -474,6 +482,17 @@ $input-height: 31.89px;
474
482
  width: 100%;
475
483
  }
476
484
  }
485
+ .q-icon {
486
+ display: inline-block;
487
+ &__svg {
488
+ fill: currentColor;
489
+ }
490
+ &__svg,
491
+ &__img {
492
+ width: 1em;
493
+ height: 1em;
494
+ }
495
+ }
477
496
  $line-color: var(--q-theme-primary);
478
497
  .q-line-loader {
479
498
  width: 100%;
@@ -751,9 +770,6 @@ $popover-header-bg: rgb(var(--q-theme-on-background-rgb) / 0.04);
751
770
  }
752
771
  .q-select {
753
772
  $this: &;
754
- &:not(#{$this}--readonly) {
755
- background-color: transparent;
756
- }
757
773
  &:not(#{$this}--readonly):not(#{$this}--disabled) {
758
774
  cursor: pointer;
759
775
  }
@@ -762,6 +778,7 @@ $popover-header-bg: rgb(var(--q-theme-on-background-rgb) / 0.04);
762
778
  white-space: nowrap;
763
779
  overflow: hidden;
764
780
  text-overflow: ellipsis;
781
+ pointer-events: none;
765
782
  }
766
783
  &__placeholder {
767
784
  font-style: italic;
@@ -773,7 +790,7 @@ $popover-header-bg: rgb(var(--q-theme-on-background-rgb) / 0.04);
773
790
  }
774
791
  }
775
792
 
776
- .q-input__prepend {
793
+ .q-field__prepend {
777
794
  padding-left: 6px;
778
795
  padding-right: $space-base;
779
796
  }
@@ -875,6 +892,26 @@ $spinner-color: var(--q-theme-primary);
875
892
  stroke-dashoffset: -124px;
876
893
  }
877
894
  }
895
+ .q-text-field__input {
896
+ width: 100%;
897
+ line-height: inherit;
898
+ outline: none;
899
+ background-color: inherit;
900
+ cursor: inherit;
901
+ &::placeholder {
902
+ font-style: italic;
903
+ color: rgb(var(--q-theme-on-background-rgb) / 0.5);
904
+ }
905
+ &:disabled {
906
+ user-select: none;
907
+ }
908
+ }
909
+ .q-text-field__counter {
910
+ display: flex;
911
+ margin-top: 0.1rem;
912
+ justify-content: end;
913
+ color: rgb(var(--q-theme-on-background-rgb) / 0.5);
914
+ }
878
915
  .q-tooltip .q-overlay__content {
879
916
  padding: 0.5rem;
880
917
  text-align: center;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@quidgest/ui",
3
3
  "private": false,
4
4
  "description": "Quidgest's UI framework",
5
- "version": "0.5.18",
5
+ "version": "0.6.0",
6
6
  "author": {
7
7
  "name": "Quidgest"
8
8
  },
@@ -72,6 +72,8 @@
72
72
  "eslint-plugin-storybook": "^0.6.14",
73
73
  "eslint-plugin-vue": "^9.17.0",
74
74
  "happy-dom": "^12.9.0",
75
+ "husky": "^8.0.0",
76
+ "lint-staged": "^15.1.0",
75
77
  "postcss": "^8.4.31",
76
78
  "prettier": "^3.0.3",
77
79
  "react": "18.2.0",