@dative-gpi/foundation-shared-components 0.0.118 → 0.0.120

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 (45) hide show
  1. package/components/FSBreadcrumbs.vue +1 -1
  2. package/components/FSButton.vue +1 -1
  3. package/components/FSChip.vue +1 -1
  4. package/components/FSClickable.vue +2 -2
  5. package/components/FSClock.vue +1 -7
  6. package/components/FSCol.vue +1 -1
  7. package/components/FSDialog.vue +12 -21
  8. package/components/FSDialogForm.vue +141 -52
  9. package/components/FSDialogMultiForm.vue +39 -40
  10. package/components/FSDialogRemove.vue +2 -2
  11. package/components/FSDialogSubmit.vue +44 -39
  12. package/components/FSDivider.vue +1 -1
  13. package/components/FSSlideGroup.vue +1 -1
  14. package/components/FSTabs.vue +12 -12
  15. package/components/FSTagGroup.vue +28 -5
  16. package/components/FSText.vue +1 -1
  17. package/components/FSWrapGroup.vue +1 -1
  18. package/components/deviceOrganisations/FSStatusCard.vue +0 -1
  19. package/components/fields/FSAutocompleteField.vue +284 -106
  20. package/components/fields/FSDateRangeField.vue +2 -2
  21. package/components/fields/FSDateTimeRangeField.vue +5 -11
  22. package/components/fields/FSSelectField.vue +11 -3
  23. package/components/fields/FSTagField.vue +2 -2
  24. package/components/fields/FSTermField.vue +3 -1
  25. package/components/lists/FSDataTableUI.vue +2 -1
  26. package/components/tiles/FSDashboardOrganisationTileUI.vue +3 -3
  27. package/components/tiles/FSDashboardOrganisationTypeTileUI.vue +3 -3
  28. package/components/tiles/FSDashboardShallowTileUI.vue +3 -3
  29. package/components/tiles/FSDeviceOrganisationTileUI.vue +1 -1
  30. package/components/tiles/FSFolderTileUI.vue +4 -4
  31. package/components/tiles/FSGroupTileUI.vue +1 -1
  32. package/components/tiles/{FSSimpleIconTileUI.vue → FSSimpleTileUI.vue} +17 -3
  33. package/components/tiles/FSUserOrganisationTileUI.vue +2 -2
  34. package/composables/index.ts +2 -1
  35. package/composables/useColors.ts +31 -59
  36. package/composables/useTables.ts +29 -0
  37. package/models/tables.ts +30 -21
  38. package/package.json +4 -4
  39. package/styles/components/fs_data_table.scss +100 -94
  40. package/styles/components/fs_dialog.scss +12 -21
  41. package/styles/components/fs_dialog_menu.scss +2 -2
  42. package/styles/components/fs_slider.scss +9 -1
  43. package/styles/components/fs_tabs.scss +5 -4
  44. package/styles/globals/overrides.scss +2 -2
  45. package/styles/globals/scrollbars.scss +46 -36
package/styles/components/fs_dialog.scss CHANGED
@@ -1,27 +1,18 @@
1
- .v-overlay__scrim:has(.v-overlay__content:has(.fs-dialog-mobile)) {
2
- display: flex;
3
- }
4
-
5
- .v-overlay__content:has(.fs-dialog-mobile) {
6
- justify-content: flex-end;
1
+ .fs-dialog-mobile {
2
+ & > .v-overlay__content {
3
+ max-height: calc(100% - 40px) !important;
4
+ max-width: 100% !important;
5
+ width: 100% !important;
6
+ margin: 0 !important;
7
7
  align-self: flex-end;
8
- margin-top: 20vh !important;
9
- width: 100vw !important;
10
- margin: 0px !important;
11
- }
12
-
13
- .v-overlay__content:has(.fs-dialog) {
14
- width: var(--fs-dialog-width) !important;
15
- max-height: 90vh !important;
16
- min-width: 35vw !important;
8
+ }
17
9
  }
18
10
 
19
11
  .fs-dialog {
20
- width: var(--fs-dialog-width) !important;
21
- max-height: 90vh !important;
12
+ & > .v-overlay__content {
13
+ max-height: calc(100% - 40px) !important;
14
+ max-width: calc(100% - 40px) !important;
22
15
  min-width: 35vw !important;
23
- }
24
-
25
- .fs-dialog-mobile {
26
- width: 100vw !important;
16
+ width: fit-content !important;
17
+ }
27
18
  }
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
  }