@quidgest/ui 0.9.8 → 0.10.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.
package/dist/ui.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Quidgest Framework v0.9.8
2
+ * Quidgest Framework v0.10.0
3
3
  * (c) 2023 Quidgest - Consultores de Gestão, SA
4
4
  */
5
5
 
@@ -728,15 +728,16 @@ $line-color: var(--q-theme-primary);
728
728
  }
729
729
  }
730
730
  $overlay-border-width: 1px;
731
- $overlay-arrow-width: 1rem;
732
- $overlay-arrow-height: 0.5rem;
731
+ $overlay-arrow-width: 11.31px;
732
+ $overlay-arrow-height: 11.31px;
733
733
  $overlay-z-index: 1070;
734
+ $arrow-tip-radius: 0.1rem;
734
735
  .q-overlay {
735
736
  $this: &;
736
737
  --q-overlay-bg: var(--q-theme-background);
737
738
  --q-overlay-color: var(--q-theme-on-background);
738
739
  --q-overlay-border-color: var(--q-theme-neutral-light);
739
- position: absolute;
740
+ position: fixed;
740
741
  z-index: $overlay-z-index;
741
742
  &__underlay {
742
743
  position: fixed;
@@ -768,93 +769,41 @@ $overlay-z-index: 1070;
768
769
  display: block;
769
770
  width: $overlay-arrow-width;
770
771
  height: $overlay-arrow-height;
771
- &::before,
772
- &::after {
773
- position: absolute;
774
- display: block;
775
- content: '';
776
- border-color: transparent;
777
- border-style: solid;
778
- border-width: 0;
779
- }
772
+ transition: opacity 0.2s ease 0s;
773
+ transform: rotate(45deg);
774
+ background-color: inherit;
775
+ border: 0 solid var(--q-overlay-border-color);
780
776
  }
781
777
  &--top {
782
778
  #{$this}__arrow {
783
- left: calc(50% - $overlay-arrow-height);
784
- bottom: calc(-1 * ($overlay-arrow-height) - $overlay-border-width);
785
- &::before,
786
- &::after {
787
- border-width: $overlay-arrow-height calc($overlay-arrow-width * 0.5) 0;
788
- }
789
- &::before {
790
- bottom: 0;
791
- border-top-color: var(--q-overlay-border-color);
792
- }
793
- &::after {
794
- bottom: $overlay-border-width;
795
- border-top-color: var(--q-overlay-bg);
796
- }
779
+ bottom: - calc($overlay-arrow-height / 2) - $overlay-border-width;
780
+ border-bottom-right-radius: $arrow-tip-radius;
781
+ border-right-width: $overlay-border-width;
782
+ border-bottom-width: $overlay-border-width;
797
783
  }
798
784
  }
799
785
  &--bottom {
800
786
  #{$this}__arrow {
801
- top: calc(-1 * ($overlay-arrow-height) - $overlay-border-width);
802
- left: calc(50% - $overlay-arrow-height);
803
- &::before,
804
- &::after {
805
- border-width: 0 calc($overlay-arrow-width * 0.5) $overlay-arrow-height;
806
- }
807
- &::before {
808
- top: 0;
809
- border-bottom-color: var(--q-overlay-border-color);
810
- }
811
- &::after {
812
- top: $overlay-border-width;
813
- border-bottom-color: var(--q-overlay-bg);
814
- }
787
+ top: - calc($overlay-arrow-height / 2) - $overlay-border-width;
788
+ border-top-left-radius: $arrow-tip-radius;
789
+ border-left-width: $overlay-border-width;
790
+ border-top-width: $overlay-border-width;
815
791
  }
816
792
  }
817
793
  &--left {
818
794
  #{$this}__arrow {
819
- top: calc(50% - $overlay-arrow-height);
820
- right: calc(-1 * $overlay-arrow-height);
821
-
822
- width: $overlay-arrow-height;
823
- height: $overlay-arrow-width;
824
- &::before,
825
- &::after {
826
- border-width: calc($overlay-arrow-width * 0.5) 0 calc($overlay-arrow-width * 0.5)
827
- $overlay-arrow-height;
828
- }
829
- &::before {
830
- right: 0;
831
- border-left-color: var(--q-overlay-border-color);
832
- }
833
- &::after {
834
- right: $overlay-border-width;
835
- border-left-color: var(--q-overlay-bg);
836
- }
795
+ right: - calc($overlay-arrow-width / 2) - $overlay-border-width;
796
+ border-top-right-radius: $arrow-tip-radius;
797
+ border-right-width: $overlay-border-width;
798
+ border-top-width: $overlay-border-width;
837
799
  }
838
800
  }
839
801
  &--right {
840
802
  #{$this}__arrow {
841
- top: calc(50% - $overlay-arrow-height);
842
- left: calc(-1 * $overlay-arrow-height);
843
- width: $overlay-arrow-height;
844
- height: $overlay-arrow-width;
845
- &::before,
846
- &::after {
847
- border-width: calc($overlay-arrow-width * 0.5) $overlay-arrow-height
848
- calc($overlay-arrow-width * 0.5) 0;
849
- }
850
- &::before {
851
- left: 0;
852
- border-right-color: var(--q-overlay-border-color);
853
- }
854
- &::after {
855
- left: 1px;
856
- border-right-color: var(--q-overlay-bg);
857
- }
803
+ left: - calc($overlay-arrow-width / 2) - $overlay-border-width;
804
+ border-bottom-left-radius: $arrow-tip-radius;
805
+ border-left-width: $overlay-border-width;
806
+ border-bottom-width: $overlay-border-width;
858
807
  }
859
808
  }
860
809
 
@@ -980,63 +929,23 @@ $popover-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
980
929
  }
981
930
  $spinner-color: var(--q-theme-primary);
982
931
  .q-spinner-loader {
983
- display: flex;
984
- position: relative;
985
- width: 1em;
986
- height: 1em;
987
932
  font-size: 48px;
988
- line-height: 1;
989
- align-items: center;
990
- justify-content: center;
933
+ width: 1em;
934
+ padding: 0.15em;
935
+ aspect-ratio: 1;
936
+ border-radius: 50%;
991
937
  color: $spinner-color;
992
- svg {
993
- width: 100%;
994
- height: 100%;
995
- margin: auto;
996
- position: absolute;
997
- top: 0;
998
- bottom: 0;
999
- left: 0;
1000
- right: 0;
1001
- z-index: 0;
1002
- animation: q-spin 2s linear infinite;
1003
- transform-origin: center center;
1004
- }
1005
- .path {
1006
- stroke-dasharray: 1, 250;
1007
- stroke-dashoffset: 0;
1008
- animation: q-md-dash 1.5s ease-in-out infinite;
1009
- }
1010
- }
1011
- @keyframes q-spin {
1012
- 0% {
1013
- transform: rotate3d(0, 0, 1, 0);
1014
- }
1015
- 25% {
1016
- transform: rotate3d(0, 0, 1, 90deg);
1017
- }
1018
- 50% {
1019
- transform: rotate3d(0, 0, 1, 180deg);
1020
- }
1021
- 75% {
1022
- transform: rotate3d(0, 0, 1, 270deg);
1023
- }
1024
- to {
1025
- transform: rotate3d(0, 0, 1, 359deg);
1026
- }
1027
- }
1028
- @keyframes q-md-dash {
1029
- 0% {
1030
- stroke-dasharray: 1, 200;
1031
- stroke-dashoffset: 0;
1032
- }
1033
- 50% {
1034
- stroke-dasharray: 89, 200;
1035
- stroke-dashoffset: -35px;
1036
- }
938
+ background: currentColor;
939
+ --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
940
+ -webkit-mask: var(--_m);
941
+ mask: var(--_m);
942
+ -webkit-mask-composite: source-out;
943
+ mask-composite: subtract;
944
+ animation: q-rotate 1s infinite linear;
945
+ }
946
+ @keyframes q-rotate {
1037
947
  to {
1038
- stroke-dasharray: 89, 200;
1039
- stroke-dashoffset: -124px;
948
+ transform: rotate(1turn);
1040
949
  }
1041
950
  }
1042
951
  .q-text-field__input {
package/package.json CHANGED
@@ -1,12 +1,16 @@
1
1
  {
2
2
  "name": "@quidgest/ui",
3
- "private": false,
4
3
  "description": "Quidgest's UI framework",
5
- "version": "0.9.8",
6
- "author": {
7
- "name": "Quidgest"
8
- },
4
+ "version": "0.10.0",
5
+ "private": false,
6
+ "type": "module",
7
+ "author": "Quidgest",
9
8
  "license": "MIT",
9
+ "keywords": [
10
+ "vue",
11
+ "component-library",
12
+ "design-system"
13
+ ],
10
14
  "main": "dist/ui.js",
11
15
  "module": "dist/ui.esm.js",
12
16
  "jsdelivr": "dist/ui.js",
@@ -46,49 +50,46 @@
46
50
  "devDependencies": {
47
51
  "@fortawesome/fontawesome-free": "^6.5.1",
48
52
  "@rollup/plugin-terser": "^0.4.4",
49
- "@storybook/addon-essentials": "^7.6.17",
50
- "@storybook/addon-interactions": "^7.6.17",
51
- "@storybook/addon-links": "^7.6.17",
52
- "@storybook/blocks": "^7.6.17",
53
- "@storybook/manager-api": "^7.6.17",
54
- "@storybook/testing-library": "0.2.2",
55
- "@storybook/theming": "^7.6.17",
56
- "@storybook/vue3": "^7.6.17",
57
- "@storybook/vue3-vite": "^7.6.17",
53
+ "@storybook/addon-essentials": "^8.0.4",
54
+ "@storybook/addon-interactions": "^8.0.4",
55
+ "@storybook/addon-links": "^8.0.4",
56
+ "@storybook/blocks": "^8.0.4",
57
+ "@storybook/manager-api": "^8.0.4",
58
+ "@storybook/test": "8.0.4",
59
+ "@storybook/theming": "^8.0.4",
60
+ "@storybook/vue3": "^8.0.4",
61
+ "@storybook/vue3-vite": "^8.0.4",
58
62
  "@tsconfig/node18": "^18.2.2",
59
- "@types/lodash-es": "^4.17.12",
60
- "@types/node": "^20.11.19",
61
- "@typescript-eslint/eslint-plugin": "^7.0.2",
62
- "@typescript-eslint/parser": "^7.0.2",
63
+ "@types/node": "^20.11.30",
64
+ "@typescript-eslint/eslint-plugin": "^7.3.1",
65
+ "@typescript-eslint/parser": "^7.3.1",
63
66
  "@vitejs/plugin-vue": "^5.0.4",
64
- "@vitest/coverage-v8": "^1.3.0",
65
- "@vitest/ui": "^1.3.0",
67
+ "@vitest/coverage-v8": "^1.4.0",
68
+ "@vitest/ui": "^1.4.0",
66
69
  "@vue/eslint-config-typescript": "^12.0.0",
67
- "@vue/test-utils": "^2.4.4",
70
+ "@vue/test-utils": "^2.4.5",
68
71
  "@vue/tsconfig": "^0.4.0",
69
- "autoprefixer": "^10.4.17",
70
- "cssnano": "^6.0.3",
71
- "eslint": "^8.56.0",
72
+ "autoprefixer": "^10.4.19",
73
+ "cssnano": "^6.1.1",
74
+ "eslint": "^8.57.0",
72
75
  "eslint-config-prettier": "^9.1.0",
73
76
  "eslint-plugin-prettier": "^5.1.3",
74
- "eslint-plugin-storybook": "^0.6.15",
75
- "eslint-plugin-vue": "^9.21.1",
77
+ "eslint-plugin-storybook": "^0.8.0",
78
+ "eslint-plugin-vue": "^9.23.0",
76
79
  "happy-dom": "^12.10.3",
77
80
  "husky": "^8.0.3",
78
81
  "lint-staged": "^15.2.2",
79
- "postcss": "^8.4.35",
82
+ "postcss": "^8.4.38",
80
83
  "prettier": "^3.2.5",
81
- "react": "18.2.0",
82
- "react-dom": "18.2.0",
83
84
  "rimraf": "^5.0.5",
84
- "sass": "^1.71.0",
85
- "storybook": "^7.6.17",
85
+ "sass": "^1.72.0",
86
+ "storybook": "^8.0.4",
86
87
  "stylelint": "^15.11.0",
87
88
  "stylelint-config-sass-guidelines": "^10.0.0",
88
- "typescript": "^5.3.3",
89
- "vite": "^5.1.3",
90
- "vite-plugin-dts": "^3.7.2",
91
- "vitest": "^1.3.0",
89
+ "typescript": "^5.4.3",
90
+ "vite": "^5.2.3",
91
+ "vite-plugin-dts": "^3.7.3",
92
+ "vitest": "^1.4.0",
92
93
  "vue-eslint-parser": "^9.4.2"
93
94
  },
94
95
  "peerDependencies": {
@@ -98,7 +99,7 @@
98
99
  "clean": "rimraf dist lib coverage storybook-static",
99
100
  "build": "pnpm clean && pnpm build:dist && pnpm build:css",
100
101
  "build:dist": "vite build",
101
- "build:css": "node build/css.mjs",
102
+ "build:css": "node build/css.js",
102
103
  "format": "prettier . --check",
103
104
  "format:fix": "prettier . --write",
104
105
  "lint": "eslint --max-warnings 0 --ext .js,.ts,.vue .",