@quidgest/ui 0.9.9 → 0.10.1
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/index.d.ts +176 -133
- package/dist/ui.css +42 -120
- package/dist/ui.esm.js +915 -850
- package/dist/ui.esm.js.map +1 -1
- package/dist/ui.js +4 -4
- package/dist/ui.js.map +1 -1
- package/dist/ui.min.css +1 -1
- package/dist/ui.min.js +124 -109
- package/dist/ui.min.js.map +1 -1
- package/dist/ui.scss +46 -131
- package/package.json +37 -36
package/dist/ui.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Quidgest Framework v0.
|
|
3
|
-
* (c)
|
|
2
|
+
* Quidgest Framework v0.10.1
|
|
3
|
+
* (c) 2024 Quidgest - Consultores de Gestão, S.A.
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
*,
|
|
@@ -490,8 +490,14 @@ $button-text-on-plain: var(--q-theme-on-background);
|
|
|
490
490
|
display: flex;
|
|
491
491
|
align-items: center;
|
|
492
492
|
}
|
|
493
|
+
&__prepend {
|
|
494
|
+
padding-right: 0.25rem;
|
|
495
|
+
padding-left: 0.05rem;
|
|
496
|
+
}
|
|
493
497
|
&__append {
|
|
494
498
|
margin-left: auto;
|
|
499
|
+
padding-left: 0.25rem;
|
|
500
|
+
padding-right: 0.05rem;
|
|
495
501
|
}
|
|
496
502
|
|
|
497
503
|
&--required {
|
|
@@ -728,15 +734,16 @@ $line-color: var(--q-theme-primary);
|
|
|
728
734
|
}
|
|
729
735
|
}
|
|
730
736
|
$overlay-border-width: 1px;
|
|
731
|
-
$overlay-arrow-width:
|
|
732
|
-
$overlay-arrow-height:
|
|
737
|
+
$overlay-arrow-width: 11.31px;
|
|
738
|
+
$overlay-arrow-height: 11.31px;
|
|
733
739
|
$overlay-z-index: 1070;
|
|
740
|
+
$arrow-tip-radius: 0.1rem;
|
|
734
741
|
.q-overlay {
|
|
735
742
|
$this: &;
|
|
736
743
|
--q-overlay-bg: var(--q-theme-background);
|
|
737
744
|
--q-overlay-color: var(--q-theme-on-background);
|
|
738
745
|
--q-overlay-border-color: var(--q-theme-neutral-light);
|
|
739
|
-
position:
|
|
746
|
+
position: fixed;
|
|
740
747
|
z-index: $overlay-z-index;
|
|
741
748
|
&__underlay {
|
|
742
749
|
position: fixed;
|
|
@@ -768,93 +775,41 @@ $overlay-z-index: 1070;
|
|
|
768
775
|
display: block;
|
|
769
776
|
width: $overlay-arrow-width;
|
|
770
777
|
height: $overlay-arrow-height;
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
content: '';
|
|
776
|
-
border-color: transparent;
|
|
777
|
-
border-style: solid;
|
|
778
|
-
border-width: 0;
|
|
779
|
-
}
|
|
778
|
+
transition: opacity 0.2s ease 0s;
|
|
779
|
+
transform: rotate(45deg);
|
|
780
|
+
background-color: inherit;
|
|
781
|
+
border: 0 solid var(--q-overlay-border-color);
|
|
780
782
|
}
|
|
781
783
|
&--top {
|
|
782
784
|
#{$this}__arrow {
|
|
783
|
-
|
|
784
|
-
bottom:
|
|
785
|
-
|
|
786
|
-
|
|
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
|
-
}
|
|
785
|
+
bottom: - calc($overlay-arrow-height / 2) - $overlay-border-width;
|
|
786
|
+
border-bottom-right-radius: $arrow-tip-radius;
|
|
787
|
+
border-right-width: $overlay-border-width;
|
|
788
|
+
border-bottom-width: $overlay-border-width;
|
|
797
789
|
}
|
|
798
790
|
}
|
|
799
791
|
&--bottom {
|
|
800
792
|
#{$this}__arrow {
|
|
801
|
-
top:
|
|
802
|
-
left:
|
|
803
|
-
|
|
804
|
-
|
|
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
|
-
}
|
|
793
|
+
top: - calc($overlay-arrow-height / 2) - $overlay-border-width;
|
|
794
|
+
border-top-left-radius: $arrow-tip-radius;
|
|
795
|
+
border-left-width: $overlay-border-width;
|
|
796
|
+
border-top-width: $overlay-border-width;
|
|
815
797
|
}
|
|
816
798
|
}
|
|
817
799
|
&--left {
|
|
818
800
|
#{$this}__arrow {
|
|
819
|
-
|
|
820
|
-
right:
|
|
821
|
-
|
|
822
|
-
width: $overlay-
|
|
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
|
-
}
|
|
801
|
+
right: - calc($overlay-arrow-width / 2) - $overlay-border-width;
|
|
802
|
+
border-top-right-radius: $arrow-tip-radius;
|
|
803
|
+
border-right-width: $overlay-border-width;
|
|
804
|
+
border-top-width: $overlay-border-width;
|
|
837
805
|
}
|
|
838
806
|
}
|
|
839
807
|
&--right {
|
|
840
808
|
#{$this}__arrow {
|
|
841
|
-
|
|
842
|
-
left:
|
|
843
|
-
width: $overlay-
|
|
844
|
-
|
|
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
|
-
}
|
|
809
|
+
left: - calc($overlay-arrow-width / 2) - $overlay-border-width;
|
|
810
|
+
border-bottom-left-radius: $arrow-tip-radius;
|
|
811
|
+
border-left-width: $overlay-border-width;
|
|
812
|
+
border-bottom-width: $overlay-border-width;
|
|
858
813
|
}
|
|
859
814
|
}
|
|
860
815
|
|
|
@@ -980,63 +935,23 @@ $popover-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
|
|
|
980
935
|
}
|
|
981
936
|
$spinner-color: var(--q-theme-primary);
|
|
982
937
|
.q-spinner-loader {
|
|
983
|
-
display: flex;
|
|
984
|
-
position: relative;
|
|
985
|
-
width: 1em;
|
|
986
|
-
height: 1em;
|
|
987
938
|
font-size: 48px;
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
939
|
+
width: 1em;
|
|
940
|
+
padding: 0.15em;
|
|
941
|
+
aspect-ratio: 1;
|
|
942
|
+
border-radius: 50%;
|
|
991
943
|
color: $spinner-color;
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
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
|
-
}
|
|
944
|
+
background: currentColor;
|
|
945
|
+
--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
|
|
946
|
+
-webkit-mask: var(--_m);
|
|
947
|
+
mask: var(--_m);
|
|
948
|
+
-webkit-mask-composite: source-out;
|
|
949
|
+
mask-composite: subtract;
|
|
950
|
+
animation: q-rotate 1s infinite linear;
|
|
951
|
+
}
|
|
952
|
+
@keyframes q-rotate {
|
|
1037
953
|
to {
|
|
1038
|
-
|
|
1039
|
-
stroke-dashoffset: -124px;
|
|
954
|
+
transform: rotate(1turn);
|
|
1040
955
|
}
|
|
1041
956
|
}
|
|
1042
957
|
.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.
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
"version": "0.10.1",
|
|
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": "^
|
|
50
|
-
"@storybook/addon-interactions": "^
|
|
51
|
-
"@storybook/addon-links": "^
|
|
52
|
-
"@storybook/blocks": "^
|
|
53
|
-
"@storybook/manager-api": "^
|
|
54
|
-
"@storybook/
|
|
55
|
-
"@storybook/theming": "^
|
|
56
|
-
"@storybook/vue3": "^
|
|
57
|
-
"@storybook/vue3-vite": "^
|
|
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/
|
|
60
|
-
"@
|
|
61
|
-
"@typescript-eslint/
|
|
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.
|
|
65
|
-
"@vitest/ui": "^1.
|
|
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.
|
|
70
|
+
"@vue/test-utils": "^2.4.5",
|
|
68
71
|
"@vue/tsconfig": "^0.4.0",
|
|
69
|
-
"autoprefixer": "^10.4.
|
|
70
|
-
"cssnano": "^6.
|
|
71
|
-
"eslint": "^8.
|
|
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.
|
|
75
|
-
"eslint-plugin-vue": "^9.
|
|
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.
|
|
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.
|
|
85
|
-
"storybook": "^
|
|
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.
|
|
89
|
-
"vite": "^5.
|
|
90
|
-
"vite-plugin-dts": "^3.7.
|
|
91
|
-
"vitest": "^1.
|
|
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.
|
|
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 .",
|