@dative-gpi/foundation-shared-components 1.0.0 → 1.0.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.
Files changed (13) hide show
  1. package/components/fields/FSAutocompleteField.vue +11 -2
  2. package/components/tiles/FSDashboardOrganisationTileUI.vue +6 -8
  3. package/components/tiles/FSDashboardOrganisationTypeTileUI.vue +6 -8
  4. package/components/tiles/FSDashboardShallowTileUI.vue +6 -8
  5. package/components/tiles/FSDeviceOrganisationTileUI.vue +24 -18
  6. package/components/tiles/FSFolderTileUI.vue +3 -5
  7. package/components/tiles/FSGroupTileUI.vue +31 -22
  8. package/components/tiles/FSServiceAccountOrganisationTileUI.vue +142 -0
  9. package/components/tiles/FSSimpleTileUI.vue +38 -29
  10. package/components/tiles/FSTile.vue +51 -7
  11. package/components/tiles/FSUserOrganisationTileUI.vue +25 -35
  12. package/composables/useSlots.ts +33 -15
  13. package/package.json +4 -4
package/components/fields/FSAutocompleteField.vue CHANGED
@@ -275,19 +275,28 @@
275
275
  </slot>
276
276
  </template>
277
277
  <template
278
- #no-data
278
+ #append-item
279
279
  >
280
280
  <FSRow
281
- v-if="showSearch"
281
+ v-if="showSearch && !searchItems.map((item: any) => item[$props.itemTitle]).some(s=>s.toLowerCase() == search.toLowerCase())"
282
282
  padding="17px"
283
283
  >
284
284
  <FSButton
285
+ v-if="search && search.trim().length > 0"
285
286
  variant="icon"
286
287
  :label="$tr('ui.common.add', 'Add this item')"
287
288
  :color="ColorEnum.Primary"
288
289
  @click="$emit('add:item', search)"
289
290
  />
290
291
  </FSRow>
292
+ </template>
293
+ <template
294
+ #no-data
295
+ >
296
+ <template
297
+ v-if="showSearch"
298
+ >
299
+ </template>
291
300
  <FSRow
292
301
  v-else
293
302
  padding="17px"
package/components/tiles/FSDashboardOrganisationTileUI.vue CHANGED
@@ -7,16 +7,17 @@
7
7
  </template>
8
8
 
9
9
  <script lang="ts">
10
- import type { PropType } from "vue";
11
- import { computed, defineComponent } from "vue";
10
+ import { computed, defineComponent, type PropType } from "vue";
12
11
 
13
- import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
14
- import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
12
+ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
15
13
 
16
14
  import FSSimpleTileUI from "./FSSimpleTileUI.vue";
17
15
 
18
16
  export default defineComponent({
19
17
  name: "FSDashboardOrganisationTileUI",
18
+ components: {
19
+ FSSimpleTileUI
20
+ },
20
21
  props: {
21
22
  bottomColor: {
22
23
  type: [Array, String] as PropType<ColorBase | ColorBase[]>,
@@ -29,9 +30,6 @@ export default defineComponent({
29
30
  default: "mdi-view-dashboard"
30
31
  }
31
32
  },
32
- components: {
33
- FSSimpleTileUI
34
- },
35
33
  setup(props){
36
34
  const color = computed(() => {
37
35
  if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
@@ -42,7 +40,7 @@ export default defineComponent({
42
40
 
43
41
  return {
44
42
  color
45
- }
43
+ };
46
44
  }
47
45
  });
48
46
  </script>
package/components/tiles/FSDashboardOrganisationTypeTileUI.vue CHANGED
@@ -7,16 +7,17 @@
7
7
  </template>
8
8
 
9
9
  <script lang="ts">
10
- import type { PropType } from "vue";
11
- import { computed, defineComponent } from "vue";
10
+ import { computed, defineComponent, type PropType } from "vue";
12
11
 
13
- import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
14
- import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
12
+ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
15
13
 
16
14
  import FSSimpleTileUI from "./FSSimpleTileUI.vue";
17
15
 
18
16
  export default defineComponent({
19
17
  name: "FSDashboardOrganisationTypeTileUI",
18
+ components: {
19
+ FSSimpleTileUI
20
+ },
20
21
  props: {
21
22
  bottomColor: {
22
23
  type: [Array, String] as PropType<ColorBase | ColorBase[]>,
@@ -29,9 +30,6 @@ export default defineComponent({
29
30
  default: "mdi-view-dashboard"
30
31
  }
31
32
  },
32
- components: {
33
- FSSimpleTileUI
34
- },
35
33
  setup(props){
36
34
  const color = computed(() => {
37
35
  if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
@@ -42,7 +40,7 @@ export default defineComponent({
42
40
 
43
41
  return {
44
42
  color
45
- }
43
+ };
46
44
  }
47
45
  });
48
46
  </script>
package/components/tiles/FSDashboardShallowTileUI.vue CHANGED
@@ -7,16 +7,17 @@
7
7
  </template>
8
8
 
9
9
  <script lang="ts">
10
- import type { PropType } from "vue";
11
- import { computed, defineComponent } from "vue";
10
+ import { computed, defineComponent, type PropType } from "vue";
12
11
 
13
- import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
14
- import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
12
+ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
15
13
 
16
14
  import FSSimpleTileUI from "./FSSimpleTileUI.vue";
17
15
 
18
16
  export default defineComponent({
19
17
  name: "FSDashboardShallowTileUI",
18
+ components: {
19
+ FSSimpleTileUI
20
+ },
20
21
  props: {
21
22
  bottomColor: {
22
23
  type: [Array, String] as PropType<ColorBase | ColorBase[]>,
@@ -29,9 +30,6 @@ export default defineComponent({
29
30
  default: "mdi-view-dashboard"
30
31
  }
31
32
  },
32
- components: {
33
- FSSimpleTileUI
34
- },
35
33
  setup(props){
36
34
  const color = computed(() => {
37
35
  if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
@@ -42,7 +40,7 @@ export default defineComponent({
42
40
 
43
41
  return {
44
42
  color
45
- }
43
+ };
46
44
  }
47
45
  });
48
46
  </script>
package/components/tiles/FSDeviceOrganisationTileUI.vue CHANGED
@@ -1,9 +1,10 @@
1
1
  <template>
2
2
  <FSTile
3
+ :activeColor="ColorEnum.Primary"
3
4
  :bottomColor="ColorEnum.Primary"
4
5
  :editable="$props.editable"
5
- :modelValue="$props.modelValue"
6
6
  :width="$props.width"
7
+ :modelValue="$props.modelValue"
7
8
  v-bind="$attrs"
8
9
  >
9
10
  <FSCol
@@ -18,23 +19,23 @@
18
19
  >
19
20
  <FSCol
20
21
  gap="12px"
21
- :width="`calc(100% - ${imageSize}px - 24px)`"
22
+ :width="infoWidth"
22
23
  >
23
24
  <FSCol
24
25
  gap="6px"
25
26
  >
26
- <FSText
27
+ <FSSpan
27
28
  font="text-button"
28
29
  :lineClamp="2"
29
30
  >
30
31
  {{ $props.label }}
31
- </FSText>
32
- <FSText
32
+ </FSSpan>
33
+ <FSSpan
33
34
  font="text-overline"
34
35
  variant="soft"
35
36
  >
36
37
  {{ $props.code }}
37
- </FSText>
38
+ </FSSpan>
38
39
  </FSCol>
39
40
  <FSStatusesRow
40
41
  :deviceConnectivity="$props.deviceConnectivity"
@@ -64,18 +65,16 @@
64
65
  </template>
65
66
 
66
67
  <script lang="ts">
67
- import type { PropType } from "vue";
68
- import { computed, defineComponent } from "vue";
68
+ import { computed, defineComponent, type PropType } from "vue";
69
69
 
70
- import type { FSModelStatus, FSDeviceStatus, FSDeviceAlert, FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
70
+ import { ColorEnum, type FSModelStatus, type FSDeviceStatus, type FSDeviceAlert, type FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
71
71
  import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
72
- import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
73
72
 
74
73
  import FSStatusesCarousel from "../deviceOrganisations/FSStatusesCarousel.vue";
75
74
  import FSStatusesRow from "../deviceOrganisations/FSStatusesRow.vue";
76
75
  import FSDivider from "../FSDivider.vue";
77
76
  import FSImage from "../FSImage.vue";
78
- import FSText from "../FSText.vue";
77
+ import FSSpan from "../FSSpan.vue";
79
78
  import FSTile from "./FSTile.vue";
80
79
  import FSCol from "../FSCol.vue";
81
80
  import FSRow from "../FSRow.vue";
@@ -87,7 +86,7 @@ export default defineComponent({
87
86
  FSStatusesRow,
88
87
  FSDivider,
89
88
  FSImage,
90
- FSText,
89
+ FSSpan,
91
90
  FSTile,
92
91
  FSCol,
93
92
  FSRow
@@ -133,6 +132,11 @@ export default defineComponent({
133
132
  required: true,
134
133
  default: () => []
135
134
  },
135
+ width: {
136
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
137
+ required: false,
138
+ default: () => [352, 336]
139
+ },
136
140
  modelValue: {
137
141
  type: Boolean,
138
142
  required: false,
@@ -142,12 +146,7 @@ export default defineComponent({
142
146
  type: Boolean,
143
147
  required: false,
144
148
  default: true
145
- },
146
- width: {
147
- type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
148
- required: false,
149
- default: () => [352, 336]
150
- },
149
+ }
151
150
  },
152
151
  setup(props) {
153
152
  const { isMobileSized } = useBreakpoints();
@@ -196,6 +195,12 @@ export default defineComponent({
196
195
  return isMobileSized.value ? 90 : 100;
197
196
  });
198
197
 
198
+ const infoWidth = computed((): string => {
199
+ if (!props.imageId) {
200
+ return "100%";
201
+ }
202
+ return `calc(100% - ${imageSize.value}px - 24px)`;
203
+ });
199
204
 
200
205
  return {
201
206
  carouselDeviceStatuses,
@@ -204,6 +209,7 @@ export default defineComponent({
204
209
  singleModelStatuses,
205
210
  ColorEnum,
206
211
  imageSize,
212
+ infoWidth
207
213
  };
208
214
  }
209
215
  });
package/components/tiles/FSFolderTileUI.vue CHANGED
@@ -8,11 +8,9 @@
8
8
  </template>
9
9
 
10
10
  <script lang="ts">
11
- import type { PropType } from "vue";
12
- import { computed, defineComponent } from "vue";
11
+ import { computed, defineComponent, type PropType } from "vue";
13
12
 
14
- import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
15
- import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
13
+ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
16
14
 
17
15
  import FSSimpleTileUI from "./FSSimpleTileUI.vue";
18
16
 
@@ -43,7 +41,7 @@ export default defineComponent({
43
41
 
44
42
  return {
45
43
  color
46
- }
44
+ };
47
45
  }
48
46
  });
49
47
  </script>
package/components/tiles/FSGroupTileUI.vue CHANGED
@@ -1,9 +1,10 @@
1
1
  <template>
2
2
  <FSTile
3
+ :activeColor="ColorEnum.Primary"
3
4
  :bottomColor="ColorEnum.Error"
4
5
  :editable="$props.editable"
5
- :modelValue="$props.modelValue"
6
6
  :width="$props.width"
7
+ :modelValue="$props.modelValue"
7
8
  v-bind="$attrs"
8
9
  >
9
10
  <FSCol
@@ -13,27 +14,28 @@
13
14
  <FSRow
14
15
  align="center-center"
15
16
  gap="24px"
16
- :wrap="false"
17
17
  :height="imageSize"
18
+ :wrap="false"
18
19
  >
19
20
  <FSCol
20
21
  gap="12px"
21
- :width="`calc(100% - ${imageSize}px - 24px)`"
22
+ :width="infoWidth"
22
23
  >
23
24
  <FSCol
24
25
  gap="6px"
25
26
  >
26
- <FSText
27
+ <FSSpan
27
28
  font="text-button"
29
+ :lineClamp="1"
28
30
  >
29
31
  {{ $props.label }}
30
- </FSText>
31
- <FSText
32
+ </FSSpan>
33
+ <FSSpan
32
34
  font="text-overline"
33
35
  variant="soft"
34
36
  >
35
37
  {{ $props.code }}
36
- </FSText>
38
+ </FSSpan>
37
39
  </FSCol>
38
40
  <FSCol
39
41
  gap="6px"
@@ -50,18 +52,18 @@
50
52
  <FSRow
51
53
  align="center-center"
52
54
  >
53
- <FSText
55
+ <FSSpan
54
56
  font="text-overline"
55
57
  >
56
58
  {{ groupsLabel }}
57
- </FSText>
59
+ </FSSpan>
58
60
  </FSRow>
59
61
  </FSColor>
60
- <FSText
62
+ <FSSpan
61
63
  font="text-overline"
62
64
  >
63
65
  {{ $tr("ui.group-tile.group(s)", "Group(s)") }}
64
- </FSText>
66
+ </FSSpan>
65
67
  </FSRow>
66
68
  <FSRow
67
69
  align="center-left"
@@ -75,18 +77,18 @@
75
77
  <FSRow
76
78
  align="center-center"
77
79
  >
78
- <FSText
80
+ <FSSpan
79
81
  font="text-overline"
80
82
  >
81
83
  {{ deviceOrganisationsLabel }}
82
- </FSText>
84
+ </FSSpan>
83
85
  </FSRow>
84
86
  </FSColor>
85
- <FSText
87
+ <FSSpan
86
88
  font="text-overline"
87
89
  >
88
90
  {{ $tr("ui.group-tile.device(s)", "Device(s)") }}
89
- </FSText>
91
+ </FSSpan>
90
92
  </FSRow>
91
93
  </FSCol>
92
94
  </FSCol>
@@ -101,15 +103,14 @@
101
103
  </template>
102
104
 
103
105
  <script lang="ts">
104
- import type { PropType } from "vue";
105
- import { computed, defineComponent } from "vue";
106
+ import { computed, defineComponent, type PropType } from "vue";
106
107
 
107
108
  import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
108
109
  import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
109
110
 
110
111
  import FSImage from "../FSImage.vue";
111
112
  import FSColor from "../FSColor.vue";
112
- import FSText from "../FSText.vue";
113
+ import FSSpan from "../FSSpan.vue";
113
114
  import FSTile from "./FSTile.vue";
114
115
  import FSCol from "../FSCol.vue";
115
116
  import FSRow from "../FSRow.vue";
@@ -119,7 +120,7 @@ export default defineComponent({
119
120
  components: {
120
121
  FSImage,
121
122
  FSColor,
122
- FSText,
123
+ FSSpan,
123
124
  FSTile,
124
125
  FSCol,
125
126
  FSRow
@@ -181,11 +182,19 @@ export default defineComponent({
181
182
  return isMobileSized.value ? 90 : 100;
182
183
  });
183
184
 
185
+ const infoWidth = computed((): string => {
186
+ if (!props.imageId) {
187
+ return "100%";
188
+ }
189
+ return `calc(100% - ${imageSize.value}px - 24px)`;
190
+ });
191
+
184
192
  return {
185
- ColorEnum,
186
- groupsLabel,
187
193
  deviceOrganisationsLabel,
188
- imageSize
194
+ groupsLabel,
195
+ ColorEnum,
196
+ imageSize,
197
+ infoWidth
189
198
  };
190
199
  }
191
200
  });
package/components/tiles/FSServiceAccountOrganisationTileUI.vue ADDED
@@ -0,0 +1,142 @@
1
+ <template>
2
+ <FSTile
3
+ :activeColor="ColorEnum.Primary"
4
+ :editable="$props.editable"
5
+ :width="$props.width"
6
+ :modelValue="$props.modelValue"
7
+ v-bind="$attrs"
8
+ >
9
+ <FSCol
10
+ align="center-center"
11
+ width="fill"
12
+ >
13
+ <FSRow
14
+ align="center-center"
15
+ gap="24px"
16
+ :wrap="false"
17
+ :height="imageSize"
18
+ >
19
+ <FSCol
20
+ gap="4px"
21
+ :width="infoWidth"
22
+ >
23
+ <FSSpan
24
+ font="text-button"
25
+ :lineClamp="2"
26
+ >
27
+ {{ $props.label }}
28
+ </FSSpan>
29
+ <FSRow
30
+ v-if="$props.roleLabel"
31
+ align="center-left"
32
+ gap="4px"
33
+ :wrap="false"
34
+ >
35
+ <FSIcon
36
+ v-if="$props.roleIcon"
37
+ variant="soft"
38
+ :color="ColorEnum.Dark"
39
+ >
40
+ {{ $props.roleIcon }}
41
+ </FSIcon>
42
+ <FSSpan
43
+ font="text-overline"
44
+ variant="soft"
45
+ >
46
+ {{ $props.roleLabel }}
47
+ </FSSpan>
48
+ </FSRow>
49
+ </FSCol>
50
+ <FSImage
51
+ v-if="$props.imageId"
52
+ :imageId="$props.imageId"
53
+ :width="imageSize"
54
+ />
55
+ </FSRow>
56
+ </FSCol>
57
+ </FSTile>
58
+ </template>
59
+
60
+ <script lang="ts">
61
+ import { computed, defineComponent, type PropType } from "vue";
62
+
63
+ import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
64
+ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
65
+
66
+ import FSImage from "../FSImage.vue";
67
+ import FSSpan from "../FSSpan.vue";
68
+ import FSTile from "./FSTile.vue";
69
+ import FSCol from "../FSCol.vue";
70
+ import FSRow from "../FSRow.vue";
71
+
72
+ export default defineComponent({
73
+ name: "FSServiceAccountOrganisationTileUI",
74
+ components: {
75
+ FSImage,
76
+ FSSpan,
77
+ FSTile,
78
+ FSCol,
79
+ FSRow
80
+ },
81
+ props: {
82
+ imageId: {
83
+ type: String as PropType<string | null>,
84
+ required: false,
85
+ default: null
86
+ },
87
+ label: {
88
+ type: String as PropType<string | null>,
89
+ required: false,
90
+ default: null
91
+ },
92
+ roleIcon: {
93
+ type: String as PropType<string | null>,
94
+ required: false,
95
+ default: null
96
+ },
97
+ roleLabel: {
98
+ type: String as PropType<string | null>,
99
+ required: false,
100
+ default: null
101
+ },
102
+ width: {
103
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
104
+ required: false,
105
+ default: () => [352, 336]
106
+ },
107
+ modelValue: {
108
+ type: Boolean,
109
+ required: false,
110
+ default: false
111
+ },
112
+ editable: {
113
+ type: Boolean,
114
+ required: false,
115
+ default: true
116
+ }
117
+ },
118
+ setup(props) {
119
+ const { isMobileSized } = useBreakpoints();
120
+
121
+ const imageSize = computed((): number => {
122
+ if (!props.imageId) {
123
+ return 0;
124
+ }
125
+ return isMobileSized.value ? 90 : 100;
126
+ });
127
+
128
+ const infoWidth = computed((): string => {
129
+ if (!props.imageId) {
130
+ return "100%";
131
+ }
132
+ return `calc(100% - ${imageSize.value}px - 24px)`;
133
+ });
134
+
135
+ return {
136
+ ColorEnum,
137
+ imageSize,
138
+ infoWidth
139
+ };
140
+ }
141
+ });
142
+ </script>
package/components/tiles/FSSimpleTileUI.vue CHANGED
@@ -1,9 +1,10 @@
1
1
  <template>
2
2
  <FSTile
3
+ :activeColor="$props.activeColor"
3
4
  :bottomColor="$props.bottomColor"
4
5
  :editable="$props.editable"
5
- :modelValue="$props.modelValue"
6
6
  :width="$props.width"
7
+ :modelValue="$props.modelValue"
7
8
  v-bind="$attrs"
8
9
  >
9
10
  <FSCol
@@ -18,20 +19,20 @@
18
19
  >
19
20
  <FSCol
20
21
  gap="6px"
21
- :width="`calc(100% - ${imageSize}px - 24px)`"
22
+ :width="infoWidth"
22
23
  >
23
- <FSText
24
+ <FSSpan
24
25
  font="text-button"
25
26
  :lineClamp="2"
26
27
  >
27
28
  {{ $props.label }}
28
- </FSText>
29
- <FSText
29
+ </FSSpan>
30
+ <FSSpan
30
31
  font="text-overline"
31
32
  variant="soft"
32
33
  >
33
34
  {{ $props.code }}
34
- </FSText>
35
+ </FSSpan>
35
36
  </FSCol>
36
37
  <FSImage
37
38
  v-if="$props.imageId"
@@ -51,16 +52,14 @@
51
52
  </template>
52
53
 
53
54
  <script lang="ts">
54
- import type { PropType } from "vue";
55
- import { computed, defineComponent } from "vue";
55
+ import { computed, defineComponent, type PropType } from "vue";
56
56
 
57
+ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
57
58
  import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
58
- import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
59
- import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
60
59
 
61
60
  import FSIconCard from "../FSIconCard.vue";
62
61
  import FSImage from "../FSImage.vue";
63
- import FSText from "../FSText.vue";
62
+ import FSSpan from "../FSSpan.vue";
64
63
  import FSTile from "./FSTile.vue";
65
64
  import FSCol from "../FSCol.vue";
66
65
  import FSRow from "../FSRow.vue";
@@ -70,32 +69,27 @@ export default defineComponent({
70
69
  components: {
71
70
  FSIconCard,
72
71
  FSImage,
72
+ FSSpan,
73
73
  FSTile,
74
- FSText,
75
74
  FSCol,
76
75
  FSRow
77
76
  },
78
77
  props: {
79
- label: {
80
- type: String as PropType<string | null>,
78
+ imageId: {
79
+ type: String as PropType<string>,
81
80
  required: false,
82
81
  default: null
83
82
  },
84
- modelValue: {
85
- type: Boolean,
83
+ label: {
84
+ type: String as PropType<string | null>,
86
85
  required: false,
87
- default: false
86
+ default: null
88
87
  },
89
88
  code: {
90
89
  type: String as PropType<string | null>,
91
90
  required: false,
92
91
  default: null
93
92
  },
94
- bottomColor: {
95
- type: [Array, String] as PropType<ColorBase | ColorBase[]>,
96
- required: false,
97
- default: ColorEnum.Light
98
- },
99
93
  iconBackgroundColor: {
100
94
  type: Boolean,
101
95
  required: false,
@@ -106,21 +100,31 @@ export default defineComponent({
106
100
  required: false,
107
101
  default: "mdi-ab-testing"
108
102
  },
109
- imageId: {
110
- type: String as PropType<string>,
103
+ activeColor: {
104
+ type: String as PropType<ColorBase>,
111
105
  required: false,
112
- default: null
106
+ default: ColorEnum.Primary
113
107
  },
114
- editable: {
115
- type: Boolean,
108
+ bottomColor: {
109
+ type: [Array, String] as PropType<ColorBase | ColorBase[]>,
116
110
  required: false,
117
- default: true
111
+ default: ColorEnum.Light
118
112
  },
119
113
  width: {
120
114
  type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
121
115
  required: false,
122
116
  default: () => [352, 336]
123
117
  },
118
+ modelValue: {
119
+ type: Boolean,
120
+ required: false,
121
+ default: false
122
+ },
123
+ editable: {
124
+ type: Boolean,
125
+ required: false,
126
+ default: true
127
+ }
124
128
  },
125
129
  setup(props) {
126
130
  const { isMobileSized } = useBreakpoints();
@@ -133,10 +137,15 @@ export default defineComponent({
133
137
  return isMobileSized.value ? 90 : 100;
134
138
  });
135
139
 
140
+ const infoWidth = computed((): string => {
141
+ return `calc(100% - ${imageSize.value}px - 24px)`;
142
+ });
143
+
136
144
  return {
137
145
  iconBackgroundColor,
138
146
  ColorEnum,
139
- imageSize
147
+ imageSize,
148
+ infoWidth
140
149
  };
141
150
  }
142
151
  });
package/components/tiles/FSTile.vue CHANGED
@@ -1,19 +1,40 @@
1
1
  <template>
2
2
  <FSClickable
3
- v-if="$props.href || $props.to || $attrs.onClick"
4
- variant="background"
3
+ v-if="$props.singleSelect"
5
4
  class="fs-tile"
6
5
  padding="12px"
6
+ :variant="variant"
7
7
  :height="height"
8
+ :color="color"
8
9
  :style="style"
10
+ @click="() => $emit('update:modelValue', !$props.modelValue)"
11
+ v-bind="$attrs"
12
+ >
13
+ <slot />
14
+ <div
15
+ v-if="$props.bottomColor"
16
+ class="fs-tile-bottom"
17
+ :style="style"
18
+ />
19
+ </FSClickable>
20
+ <FSClickable
21
+ v-else-if="$props.href || $props.to || $attrs.onClick"
22
+ variant="background"
23
+ class="fs-tile"
24
+ padding="12px"
25
+ :color="ColorEnum.Background"
9
26
  :href="$props.href"
27
+ :height="height"
10
28
  :to="$props.to"
29
+ :style="style"
11
30
  v-bind="$attrs"
12
31
  >
13
32
  <slot />
14
33
  <FSCard
15
34
  v-if="$props.editable"
16
35
  class="fs-tile-checkbox"
36
+ variant="background"
37
+ :color="ColorEnum.Background"
17
38
  :border="false"
18
39
  v-bind="$attrs"
19
40
  >
@@ -29,8 +50,10 @@
29
50
  </FSClickable>
30
51
  <FSCard
31
52
  v-else
53
+ variant="background"
32
54
  class="fs-tile"
33
55
  padding="12px"
56
+ :color="color"
34
57
  :style="style"
35
58
  :height="height"
36
59
  v-bind="$attrs"
@@ -39,6 +62,7 @@
39
62
  <FSCard
40
63
  v-if="$props.editable"
41
64
  class="fs-tile-checkbox"
65
+ variant="background"
42
66
  :border="false"
43
67
  v-bind="$attrs"
44
68
  >
@@ -56,12 +80,11 @@
56
80
  </template>
57
81
 
58
82
  <script lang="ts">
59
- import type { PropType, StyleValue } from "vue";
60
- import { computed, defineComponent } from "vue";
61
- import type { RouteLocation } from "vue-router";
83
+ import { computed, defineComponent, type PropType, type StyleValue } from "vue";
84
+ import { type RouteLocation } from "vue-router";
62
85
 
63
86
  import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
64
- import type { ColorBase } from "@dative-gpi/foundation-shared-components/models";
87
+ import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
65
88
 
66
89
  import FSClickable from "../FSClickable.vue";
67
90
  import FSCheckbox from "../FSCheckbox.vue";
@@ -90,6 +113,11 @@ export default defineComponent({
90
113
  required: false,
91
114
  default: false
92
115
  },
116
+ activeColor: {
117
+ type: [Array, String] as PropType<ColorBase>,
118
+ required: false,
119
+ default: ColorEnum.Primary
120
+ },
93
121
  bottomColor: {
94
122
  type: [Array, String] as PropType<ColorBase[] | ColorBase | null>,
95
123
  required: false,
@@ -99,6 +127,11 @@ export default defineComponent({
99
127
  type: Boolean,
100
128
  required: false,
101
129
  default: false
130
+ },
131
+ singleSelect: {
132
+ type: Boolean,
133
+ required: false,
134
+ default: false
102
135
  }
103
136
  },
104
137
  emits: ["update:modelValue"],
@@ -116,12 +149,23 @@ export default defineComponent({
116
149
  return {};
117
150
  });
118
151
 
119
- const height = computed(() => {
152
+ const height = computed((): number => {
120
153
  return isMobileSized.value ? 156 : 170;
121
154
  });
122
155
 
156
+ const variant = computed((): "standard" | "background" => {
157
+ return (props.singleSelect && props.modelValue) ? "standard" : "background";
158
+ });
159
+
160
+ const color = computed((): ColorBase => {
161
+ return (props.singleSelect && props.modelValue) ? props.activeColor : ColorEnum.Background;
162
+ });
163
+
123
164
  return {
165
+ ColorEnum,
166
+ variant,
124
167
  height,
168
+ color,
125
169
  style
126
170
  };
127
171
  }
package/components/tiles/FSUserOrganisationTileUI.vue CHANGED
@@ -1,6 +1,8 @@
1
1
  <template>
2
2
  <FSTile
3
+ :activeColor="ColorEnum.Primary"
3
4
  :editable="$props.editable"
5
+ :width="$props.width"
4
6
  :modelValue="$props.modelValue"
5
7
  v-bind="$attrs"
6
8
  >
@@ -18,16 +20,17 @@
18
20
  gap="4px"
19
21
  :width="infoWidth"
20
22
  >
21
- <FSText
23
+ <FSSpan
22
24
  font="text-button"
23
25
  :lineClamp="2"
24
26
  >
25
- {{ title }}
26
- </FSText>
27
+ {{ $props.name }}
28
+ </FSSpan>
27
29
  <FSRow
28
30
  v-if="roleLabel"
29
31
  align="center-left"
30
32
  gap="4px"
33
+ :wrap="false"
31
34
  >
32
35
  <FSIcon
33
36
  v-if="roleIcon"
@@ -36,12 +39,12 @@
36
39
  >
37
40
  {{ roleIcon }}
38
41
  </FSIcon>
39
- <FSText
42
+ <FSSpan
40
43
  font="text-overline"
41
44
  variant="soft"
42
45
  >
43
46
  {{ roleLabel }}
44
- </FSText>
47
+ </FSSpan>
45
48
  </FSRow>
46
49
  </FSCol>
47
50
  <FSImage
@@ -55,16 +58,14 @@
55
58
  </template>
56
59
 
57
60
  <script lang="ts">
58
- import type { PropType } from "vue";
59
- import { computed, defineComponent } from "vue";
61
+ import { computed, defineComponent, type PropType } from "vue";
60
62
 
61
63
  import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
62
64
  import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
63
65
  import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
64
- import { UserType } from "@dative-gpi/foundation-core-domain/models";
65
66
 
66
67
  import FSImage from "../FSImage.vue";
67
- import FSText from "../FSText.vue";
68
+ import FSSpan from "../FSSpan.vue";
68
69
  import FSTile from "./FSTile.vue";
69
70
  import FSCol from "../FSCol.vue";
70
71
  import FSRow from "../FSRow.vue";
@@ -73,7 +74,7 @@ export default defineComponent({
73
74
  name: "FSUserOrganisationTileUI",
74
75
  components: {
75
76
  FSImage,
76
- FSText,
77
+ FSSpan,
77
78
  FSTile,
78
79
  FSCol,
79
80
  FSRow
@@ -89,16 +90,6 @@ export default defineComponent({
89
90
  required: false,
90
91
  default: null
91
92
  },
92
- label: {
93
- type: String as PropType<string | null>,
94
- required: false,
95
- default: null
96
- },
97
- userType: {
98
- type: Number as PropType<UserType>,
99
- required: false,
100
- default: UserType.User
101
- },
102
93
  roleIcon: {
103
94
  type: String as PropType<string | null>,
104
95
  required: false,
@@ -114,6 +105,11 @@ export default defineComponent({
114
105
  required: false,
115
106
  default: false
116
107
  },
108
+ width: {
109
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
110
+ required: false,
111
+ default: () => [352, 336]
112
+ },
117
113
  modelValue: {
118
114
  type: Boolean,
119
115
  required: false,
@@ -129,13 +125,6 @@ export default defineComponent({
129
125
  const { isMobileSized } = useBreakpoints();
130
126
  const { $tr } = useTranslationsProvider();
131
127
 
132
- const title = computed((): string | null => {
133
- switch (props.userType) {
134
- case UserType.ServiceAccount: return props.label;
135
- default: return props.name;
136
- }
137
- });
138
-
139
128
  const roleIcon = computed((): string | null => {
140
129
  if (props.admin) {
141
130
  return "mdi-crown-outline";
@@ -151,24 +140,25 @@ export default defineComponent({
151
140
  });
152
141
 
153
142
  const imageSize = computed((): number => {
143
+ if (!props.imageId) {
144
+ return 0;
145
+ }
154
146
  return isMobileSized.value ? 90 : 100;
155
147
  });
156
148
 
157
- const infoWidth = computed((): number => {
158
- let width = isMobileSized.value ? 288 : 304;
159
- if (props.imageId) {
160
- width -= imageSize.value;
149
+ const infoWidth = computed((): string => {
150
+ if (!props.imageId) {
151
+ return "100%";
161
152
  }
162
- return width;
153
+ return `calc(100% - ${imageSize.value}px - 24px)`;
163
154
  });
164
155
 
165
156
  return {
157
+ ColorEnum,
166
158
  imageSize,
167
159
  infoWidth,
168
- ColorEnum,
169
160
  roleLabel,
170
- roleIcon,
171
- title
161
+ roleIcon
172
162
  };
173
163
  }
174
164
  });
package/composables/useSlots.ts CHANGED
@@ -24,24 +24,42 @@ export const useSlots = () => {
24
24
  return null;
25
25
  };
26
26
 
27
- const recursiveGetChildren = (element: any): any => {
28
- if (element == null) {
27
+ const recursiveGetChildren = (elements: any): any => {
28
+ if (elements == null) {
29
29
  return null;
30
30
  }
31
- switch (typeof(element[0].type)) {
32
- // Directive wrapper (v-for, v-if)
33
- case "symbol":
34
- switch (element[0].type) {
35
- case Symbol.for("v-fgt"): return recursiveGetChildren(element[0].children);
36
- case Symbol.for("v-cmt"): return element;
37
- default: return element;
38
- }
39
- // Custom component
40
- case "object": return element;
41
- // Pre-existing component
42
- case "string": return element;
31
+ const returnElements: any[] = [];
32
+ for (const element of elements) {
33
+ switch (typeof(element.type)) {
34
+ // Directive wrapper (v-for, v-if)
35
+ case "symbol":
36
+ switch (element.type) {
37
+ case Symbol.for("v-fgt"):
38
+ returnElements.push(...recursiveGetChildren(element.children));
39
+ break;
40
+ case Symbol.for("v-cmt"):
41
+ returnElements.push(element);
42
+ break;
43
+ default:
44
+ returnElements.push(element);
45
+ break;
46
+ }
47
+ break;
48
+ // Custom component
49
+ case "object":
50
+ returnElements.push(element);
51
+ break;
52
+ // Pre-existing component
53
+ case "string":
54
+ returnElements.push(element);
55
+ break;
56
+ // Default
57
+ default:
58
+ returnElements.push(element);
59
+ break;
60
+ }
43
61
  }
44
- return element;
62
+ return returnElements;
45
63
  };
46
64
 
47
65
  return {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dative-gpi/foundation-shared-components",
3
3
  "sideEffects": false,
4
- "version": "1.0.0",
4
+ "version": "1.0.1",
5
5
  "description": "",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -10,8 +10,8 @@
10
10
  "author": "",
11
11
  "license": "ISC",
12
12
  "dependencies": {
13
- "@dative-gpi/foundation-shared-domain": "1.0.0",
14
- "@dative-gpi/foundation-shared-services": "1.0.0"
13
+ "@dative-gpi/foundation-shared-domain": "1.0.1",
14
+ "@dative-gpi/foundation-shared-services": "1.0.1"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
35
35
  "sass": "1.71.1",
36
36
  "sass-loader": "13.3.2"
37
37
  },
38
- "gitHead": "93365f65d39d6c9cc3821ffb48cba187200deaf9"
38
+ "gitHead": "297a3db2234e01a04a88c111d547656f4d0a74f0"
39
39
  }