@dative-gpi/foundation-shared-components 0.0.117 → 0.0.119

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 (27) hide show
  1. package/components/FSClock.vue +1 -7
  2. package/components/FSCol.vue +1 -1
  3. package/components/FSDialogForm.vue +141 -52
  4. package/components/FSDialogMultiForm.vue +39 -40
  5. package/components/FSDialogRemove.vue +2 -2
  6. package/components/FSDialogSubmit.vue +44 -39
  7. package/components/FSFadeOut.vue +1 -1
  8. package/components/FSSlideGroup.vue +1 -1
  9. package/components/FSTabs.vue +12 -12
  10. package/components/FSTagGroup.vue +28 -5
  11. package/components/FSWrapGroup.vue +1 -1
  12. package/components/deviceOrganisations/FSStatusCard.vue +0 -1
  13. package/components/fields/FSAutocompleteField.vue +284 -106
  14. package/components/fields/FSDateRangeField.vue +2 -2
  15. package/components/fields/FSDateTimeRangeField.vue +5 -11
  16. package/components/fields/FSSelectField.vue +11 -3
  17. package/components/fields/FSTagField.vue +2 -2
  18. package/components/fields/FSTermField.vue +3 -1
  19. package/components/lists/FSDataTableUI.vue +2 -1
  20. package/package.json +4 -4
  21. package/styles/components/fs_data_table.scss +100 -94
  22. package/styles/components/fs_dialog.scss +4 -3
  23. package/styles/components/fs_dialog_menu.scss +2 -2
  24. package/styles/components/fs_slider.scss +9 -1
  25. package/styles/components/fs_tabs.scss +5 -4
  26. package/styles/globals/overrides.scss +2 -2
  27. package/styles/globals/scrollbars.scss +46 -36
package/styles/components/fs_data_table.scss CHANGED
@@ -1,128 +1,134 @@
1
1
  .fs-data-table {
2
- table {
3
- margin-top: calc(var(--fs-data-table-row-gap) * -1);
4
- border-spacing: 0 var(--fs-data-table-row-gap) !important;
5
- background-color: var(--fs-data-table-background-color) !important;
6
- }
2
+ & > .v-table__wrapper {
3
+ padding: 0 1px 0 0;
7
4
 
8
- .fs-data-table-custom-row > td {
9
- border-bottom: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
10
- border-top: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
11
- background-color: var(--fs-data-table-row-background-color) !important;
12
- color: var(--fs-data-table-row-color);
13
- position: relative;
14
- }
5
+ @extend .fs-hide-x-scrollbar;
6
+ }
15
7
 
16
- .fs-data-table-custom-row > td:first-child{
17
- border-top-left-radius: var(--fs-data-table-row-border-radius) !important;
18
- border-bottom-left-radius: var(--fs-data-table-row-border-radius) !important;
19
- border-left: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
20
- }
8
+ table {
9
+ margin-top: calc(var(--fs-data-table-row-gap) * -1);
10
+ border-spacing: 0 var(--fs-data-table-row-gap) !important;
11
+ background-color: var(--fs-data-table-background-color) !important;
12
+ }
21
13
 
22
- .fs-data-table-custom-row > td:last-child{
23
- border-top-right-radius: var(--fs-data-table-row-border-radius) !important;
24
- border-bottom-right-radius: var(--fs-data-table-row-border-radius) !important;
25
- border-right: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
26
- }
14
+ .fs-data-table-custom-row > td {
15
+ border-bottom: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
16
+ border-top: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
17
+ background-color: var(--fs-data-table-row-background-color) !important;
18
+ color: var(--fs-data-table-row-color);
19
+ position: relative;
20
+ }
27
21
 
28
- th,
29
- :not(.fs-data-table-custom-row) > td {
30
- background-color: var(--fs-data-table-background-color) !important;
31
- position: relative;
32
- }
33
-
34
- th {
35
- box-shadow: none !important;
36
-
37
- &:hover .fs-header-button {
38
- opacity: 1;
39
- }
40
- }
41
-
42
- th:after {
43
- content: "";
44
- position: absolute;
45
- bottom: 8px;
46
- right: 0;
47
- height: calc(100% - 16px);
48
- border-right: 1px solid var(--fs-data-table-border-color);
49
- }
50
-
51
- td {
52
- border-bottom: none !important;
22
+ .fs-data-table-custom-row > td:first-child{
23
+ border-top-left-radius: var(--fs-data-table-row-border-radius) !important;
24
+ border-bottom-left-radius: var(--fs-data-table-row-border-radius) !important;
25
+ border-left: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
26
+ }
27
+
28
+ .fs-data-table-custom-row > td:last-child{
29
+ border-top-right-radius: var(--fs-data-table-row-border-radius) !important;
30
+ border-bottom-right-radius: var(--fs-data-table-row-border-radius) !important;
31
+ border-right: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
32
+ }
33
+
34
+ th,
35
+ :not(.fs-data-table-custom-row) > td {
36
+ background-color: var(--fs-data-table-background-color) !important;
37
+ position: relative;
38
+ }
39
+
40
+ th {
41
+ box-shadow: none !important;
42
+
43
+ &:hover .fs-header-button {
44
+ opacity: 1;
53
45
  }
46
+ }
54
47
 
55
- th:last-of-type:after,
56
- td:last-of-type:after {
57
- border-right: none;
58
- }
48
+ th:after {
49
+ content: "";
50
+ position: absolute;
51
+ bottom: 8px;
52
+ right: 0;
53
+ height: calc(100% - 16px);
54
+ border-right: 1px solid var(--fs-data-table-border-color);
55
+ }
59
56
 
60
- th:before,
61
- td:not(.fs-data-table-group-header):before {
62
- content: "";
63
- position: absolute;
64
- left: 0;
65
- bottom: 0;
66
- width: 100%;
67
- border-bottom: 1px solid var(--fs-data-table-border-color);
68
- }
57
+ td {
58
+ border-bottom: none !important;
59
+ }
69
60
 
70
- th:first-of-type:before,
71
- td:first-of-type:before {
72
- left: 8px;
73
- width: calc(100% - 8px);
74
- }
61
+ th:last-of-type:after,
62
+ td:last-of-type:after {
63
+ border-right: none;
64
+ }
75
65
 
76
- th:last-of-type:before,
77
- td:last-of-type:before {
78
- right: 8px;
79
- width: calc(100% - 8px);
80
- }
66
+ th:before,
67
+ td:not(.fs-data-table-group-header):before {
68
+ content: "";
69
+ position: absolute;
70
+ left: 0;
71
+ bottom: 0;
72
+ width: 100%;
73
+ border-bottom: 1px solid var(--fs-data-table-border-color);
74
+ }
75
+
76
+ th:first-of-type:before,
77
+ td:first-of-type:before {
78
+ left: 8px;
79
+ width: calc(100% - 8px);
80
+ }
81
+
82
+ th:last-of-type:before,
83
+ td:last-of-type:before {
84
+ right: 8px;
85
+ width: calc(100% - 8px);
86
+ }
81
87
  }
82
88
 
83
89
  .fs-data-table-grouped {
84
- & th:first-of-type {
85
- display: none;
86
- }
90
+ & th:first-of-type {
91
+ display: none;
92
+ }
87
93
 
88
- & td:first-of-type {
89
- display: none;
90
- }
94
+ & td:first-of-type {
95
+ display: none;
96
+ }
91
97
 
92
- & .fs-data-table-group-header {
93
- padding: 0 !important;
98
+ & .fs-data-table-group-header {
99
+ padding: 0 !important;
94
100
 
95
- &:after {
96
- content: none !important;
97
- }
101
+ &:after {
102
+ content: none !important;
98
103
  }
104
+ }
99
105
  }
100
106
 
101
107
  .fs-data-table-iterator {
102
- width: 100%;
108
+ width: 100%;
103
109
  }
104
110
 
105
111
  .fs-data-table-footer {
106
- background-color: var(--fs-data-table-background-color);
112
+ background-color: var(--fs-data-table-background-color);
107
113
  }
108
114
 
109
115
  .fs-data-table-rows-per-page {
110
- min-width: 100px;
111
- width: 100px;
116
+ min-width: 100px;
117
+ width: 100px;
112
118
  }
113
119
 
114
120
  .fs-data-table-pagination {
115
- @include web {
116
- max-width: 280px;
117
- }
121
+ @include web {
122
+ max-width: 280px;
123
+ }
118
124
 
119
- @include mobile {
120
- max-width: 274px;
121
- }
125
+ @include mobile {
126
+ max-width: 274px;
127
+ }
122
128
  }
123
129
 
124
130
  .fs-data-table-intersection {
125
- margin-top: -8px;
126
- height: 10px;
127
- width: 100%;
131
+ margin-top: -8px;
132
+ height: 10px;
133
+ width: 100%;
128
134
  }
package/styles/components/fs_dialog.scss CHANGED
@@ -5,23 +5,24 @@
5
5
  .v-overlay__content:has(.fs-dialog-mobile) {
6
6
  justify-content: flex-end;
7
7
  align-self: flex-end;
8
- margin-top: 20vh !important;
8
+ margin-top: 40px !important;
9
9
  width: 100vw !important;
10
10
  margin: 0px !important;
11
11
  }
12
12
 
13
13
  .v-overlay__content:has(.fs-dialog) {
14
+ max-height: calc(100vh - 40px) !important;
14
15
  width: var(--fs-dialog-width) !important;
15
- max-height: 90vh !important;
16
16
  min-width: 35vw !important;
17
17
  }
18
18
 
19
19
  .fs-dialog {
20
+ max-height: calc(100vh - 40px) !important;
20
21
  width: var(--fs-dialog-width) !important;
21
- max-height: 90vh !important;
22
22
  min-width: 35vw !important;
23
23
  }
24
24
 
25
25
  .fs-dialog-mobile {
26
+ max-height: calc(100vh - 40px) !important;
26
27
  width: 100vw !important;
27
28
  }
package/styles/components/fs_dialog_menu.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  .v-overlay__content:has(.fs-dialog-menu) {
2
2
  width: fit-content !important;
3
- max-height: 60vh !important;
3
+ max-height: calc(100vh - 40px) !important;
4
4
  justify-content: center;
5
5
  align-items: center;
6
6
  }
7
7
 
8
8
  .fs-dialog-menu {
9
+ max-height: calc(100vh - 40px) !important;
9
10
  max-width: calc(100vw - 40px) !important;
10
- max-height: 60vh !important;
11
11
  }
package/styles/components/fs_slider.scss CHANGED
@@ -28,7 +28,15 @@
28
28
  color: var(--fs-slider-thumb-color);
29
29
 
30
30
  &__surface:before {
31
- display: none;
31
+ display: none !important;
32
+ }
33
+
34
+ &__surface:after {
35
+ display: none !important;
36
+ }
37
+
38
+ &__ripple {
39
+ display: none !important;
32
40
  }
33
41
  }
34
42
  }
package/styles/components/fs_tabs.scss CHANGED
@@ -13,17 +13,18 @@
13
13
 
14
14
  .fs-tab {
15
15
  padding: 0 16px;
16
- border-bottom: 1px solid var(--fs-group-color) !important;
16
+ border-bottom: 1px solid var(--fs-tab-border-color) !important;
17
17
  color: var(--fs-group-color) !important;
18
+ justify-content: unset !important;
19
+ align-items: center !important;
18
20
  display: flex;
19
- align-items: center;
20
21
 
21
22
  & .fs-tab-label {
22
23
  @extend .text-button;
23
24
  }
24
25
 
25
26
  &:hover {
26
- border-bottom: 1px solid var(--fs-group-hover-color) !important;
27
+ border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
27
28
  color: var(--fs-group-hover-color) !important;
28
29
  }
29
30
 
@@ -37,7 +38,7 @@
37
38
  }
38
39
 
39
40
  .fs-tab-active {
40
- background-color: var(--fs-group-hover-background-color) !important;
41
+ background-color: var(--fs-tab-active-background-color) !important;
41
42
  color: var(--fs-group-hover-color) !important;
42
43
  border-bottom: 0 !important;
43
44
 
package/styles/globals/overrides.scss CHANGED
@@ -35,7 +35,7 @@
35
35
  }
36
36
 
37
37
  &:not(.v-checkbox):not(.v-slider):not(.fs-small-input) {
38
- min-width: 200px;
38
+ min-width: 150px;
39
39
  width: 100%;
40
40
  }
41
41
 
@@ -129,7 +129,7 @@ $nthOverlay: 25;
129
129
  max-width: 100%;
130
130
 
131
131
  & > .v-slide-group__container > .v-slide-group__content {
132
- margin: 0 2px 0.2px 0 !important;
132
+ margin: 0 2px 1px 0 !important;
133
133
  }
134
134
  }
135
135
 
package/styles/globals/scrollbars.scss CHANGED
@@ -1,45 +1,55 @@
1
- @property --scrollbar-color {
2
- syntax: "<color>";
3
- inherits: true;
4
- initial-value: #00000000;
1
+ @property --scrollbar-x-color {
2
+ syntax: "<color>";
3
+ inherits: true;
4
+ initial-value: #00000000;
5
5
  }
6
6
 
7
- @include clickscreen {
8
- .fs-hide-scrollbar {
9
- transition: --scrollbar-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
10
-
11
- &::-webkit-scrollbar {
12
- width: 8px;
13
- }
14
- &::-webkit-scrollbar-thumb {
15
- background: var(--scrollbar-color);
16
- border-radius: 4px;
17
- }
18
-
19
- &:hover {
20
- --scrollbar-color: #00000022;
21
- }
7
+ @property --scrollbar-y-color {
8
+ syntax: "<color>";
9
+ inherits: true;
10
+ initial-value: #00000000;
11
+ }
12
+
13
+ @include clickscreen {
14
+ .fs-hide-x-scrollbar {
15
+ overflow-x: scroll;
16
+
17
+ &::-webkit-scrollbar {
18
+ height: 8px;
22
19
  }
23
-
24
- .fs-hide-y-scrollbar {
25
- overflow-y: scroll;
26
-
27
- @extend .fs-hide-scrollbar;
20
+ &::-webkit-scrollbar-thumb {
21
+ background: var(--scrollbar-x-color);
22
+ border-radius: 4px;
28
23
  }
29
-
30
- .fs-hide-x-scrollbar {
31
- overflow-x: scroll;
32
-
33
- @extend .fs-hide-scrollbar;
24
+
25
+ &:hover {
26
+ --scrollbar-x-color: #00000022;
34
27
  }
35
- }
28
+ }
36
29
 
37
- @include touchscreen {
38
- .fs-hide-y-scrollbar {
39
- overflow-y: scroll;
30
+ .fs-hide-y-scrollbar {
31
+ overflow-y: scroll;
32
+
33
+ &::-webkit-scrollbar {
34
+ width: 8px;
40
35
  }
41
-
42
- .fs-hide-x-scrollbar {
43
- overflow-x: scroll;
36
+ &::-webkit-scrollbar-thumb {
37
+ background: var(--scrollbar-y-color);
38
+ border-radius: 4px;
44
39
  }
40
+
41
+ &:hover {
42
+ --scrollbar-y-color: #00000022;
43
+ }
44
+ }
45
+ }
46
+
47
+ @include touchscreen {
48
+ .fs-hide-x-scrollbar {
49
+ overflow-x: scroll;
50
+ }
51
+
52
+ .fs-hide-y-scrollbar {
53
+ overflow-y: scroll;
54
+ }
45
55
  }