@dative-gpi/foundation-shared-components 1.0.61 → 1.0.63

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 (15) hide show
  1. package/components/FSColorIcon.vue +16 -1
  2. package/components/FSSwitch.vue +57 -27
  3. package/components/deviceOrganisations/FSConnectivity.vue +11 -1
  4. package/components/deviceOrganisations/FSConnectivityCard.vue +17 -45
  5. package/components/deviceOrganisations/FSStatus.vue +6 -0
  6. package/components/deviceOrganisations/FSStatusCard.vue +24 -56
  7. package/components/deviceOrganisations/FSWorstAlert.vue +1 -0
  8. package/components/deviceOrganisations/FSWorstAlertCard.vue +21 -42
  9. package/components/lists/FSSimpleList.vue +5 -1
  10. package/components/map/FSMap.vue +2 -2
  11. package/models/map.ts +2 -2
  12. package/package.json +4 -4
  13. package/styles/components/fs_filter_button.scss +1 -6
  14. package/styles/components/fs_switch.scss +1 -0
  15. package/styles/components/fs_tabs.scss +4 -1
package/components/FSColorIcon.vue CHANGED
@@ -11,7 +11,7 @@
11
11
  >
12
12
  <FSIcon
13
13
  :color="$props.color"
14
- :size="$props.size"
14
+ :size="iconSize"
15
15
  >
16
16
  <slot />
17
17
  </FSIcon>
@@ -25,6 +25,8 @@ import { computed, defineComponent, type PropType } from "vue";
25
25
  import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
26
26
  import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
27
27
 
28
+ import { sizeToVar } from "../utils";
29
+
28
30
  import FSColor from "./FSColor.vue";
29
31
  import FSIcon from "./FSIcon.vue";
30
32
  import FSRow from "./FSRow.vue";
@@ -46,6 +48,11 @@ export default defineComponent({
46
48
  type: String as PropType<ColorBase>,
47
49
  required: false,
48
50
  default: ColorEnum.Dark
51
+ },
52
+ padding: {
53
+ type: [String, Number] as PropType<string | number>,
54
+ required: false,
55
+ default: "0px"
49
56
  }
50
57
  },
51
58
  setup(props) {
@@ -60,7 +67,15 @@ export default defineComponent({
60
67
  }
61
68
  });
62
69
 
70
+ const iconSize = computed(() => {
71
+ if (!props.padding) {
72
+ return size.value;
73
+ }
74
+ return `calc(${sizeToVar(size.value)} - ${sizeToVar(props.padding)})`;
75
+ });
76
+
63
77
  return {
78
+ iconSize,
64
79
  size
65
80
  };
66
81
  }
package/components/FSSwitch.vue CHANGED
@@ -1,10 +1,58 @@
1
1
  <template>
2
- <FSCol
2
+ <FSRow
3
3
  width="hug"
4
+ align="top-left"
5
+ gap="16px"
6
+ padding="8px 0px"
7
+ :wrap="false"
4
8
  >
9
+ <v-switch
10
+ v-if="variant == 'left'"
11
+ class="fs-switch"
12
+ hide-details
13
+ inset
14
+ :validateOn="validateOn"
15
+ :rules="$props.rules"
16
+ :ripple="false"
17
+ :style="style"
18
+ :modelValue="$props.modelValue"
19
+ @update:modelValue="onToggle"
20
+ v-bind="$attrs"
21
+ />
22
+ <slot>
23
+ <FSCol
24
+ width="hug"
25
+ v-if="$props.label || $props.description || $slots.description"
26
+ >
27
+ <FSSpan
28
+ v-if="$props.label"
29
+ class="fs-switch-label"
30
+ :style="style"
31
+ :font="font"
32
+ @click.stop="onToggle"
33
+ >
34
+ {{ $props.label }}
35
+ </FSSpan>
36
+ <slot
37
+ name="description"
38
+ >
39
+ <FSSpan
40
+ v-if="$props.description"
41
+ class="fs-switch-description"
42
+ font="text-overline"
43
+ :style="style"
44
+ >
45
+ {{ $props.description }}
46
+ </FSSpan>
47
+ </slot>
48
+ <slot
49
+ name="footer"
50
+ />
51
+ </FSCol>
52
+ </slot>
5
53
  <FSRow
6
- width="hug"
7
- align="center-left"
54
+ v-if="variant == 'right'"
55
+ align="center-right"
8
56
  >
9
57
  <v-switch
10
58
  class="fs-switch"
@@ -18,31 +66,8 @@
18
66
  @update:modelValue="onToggle"
19
67
  v-bind="$attrs"
20
68
  />
21
- <slot>
22
- <FSSpan
23
- v-if="$props.label"
24
- class="fs-switch-label"
25
- :style="style"
26
- :font="font"
27
- @click.stop="onToggle"
28
- >
29
- {{ $props.label }}
30
- </FSSpan>
31
- </slot>
32
69
  </FSRow>
33
- <slot
34
- name="description"
35
- >
36
- <FSSpan
37
- v-if="$props.description"
38
- class="fs-switch-description"
39
- font="text-overline"
40
- :style="style"
41
- >
42
- {{ $props.description }}
43
- </FSSpan>
44
- </slot>
45
- </FSCol>
70
+ </FSRow>
46
71
  </template>
47
72
 
48
73
  <script lang="ts">
@@ -78,6 +103,11 @@ export default defineComponent({
78
103
  required: false,
79
104
  default: false
80
105
  },
106
+ variant: {
107
+ type: String as PropType<"left" | "right">,
108
+ required: false,
109
+ default: "left"
110
+ },
81
111
  color: {
82
112
  type: String as PropType<ColorBase>,
83
113
  required: false,
package/components/deviceOrganisations/FSConnectivity.vue CHANGED
@@ -2,13 +2,15 @@
2
2
  <v-menu
3
3
  :closeOnContentClick="false"
4
4
  v-model="menu"
5
+ location="bottom center"
5
6
  >
6
7
  <template
7
8
  #activator="{ props }"
8
9
  >
9
10
  <FSColorIcon
10
11
  class="fs-stopclick"
11
- size="m"
12
+ :size="$props.size"
13
+ :padding="$props.padding"
12
14
  :color="$props.deviceConnectivity.color"
13
15
  @click.prevent.stop
14
16
  v-bind="props"
@@ -42,6 +44,14 @@ export default defineComponent({
42
44
  deviceConnectivity: {
43
45
  type: Object as PropType<FSDeviceConnectivity>,
44
46
  required: true
47
+ },
48
+ size: {
49
+ type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
50
+ default: "m"
51
+ },
52
+ padding: {
53
+ type: [String, Number] as PropType<string | number>,
54
+ default: "8px"
45
55
  }
46
56
  },
47
57
  setup() {
package/components/deviceOrganisations/FSConnectivityCard.vue CHANGED
@@ -1,55 +1,33 @@
1
1
  <template>
2
2
  <FSCard
3
- padding="2px 2px 8px 2px"
3
+ padding="12px 24px"
4
4
  :elevation="true"
5
- :border="false"
6
5
  >
7
6
  <FSCol
8
7
  align="center-center"
8
+ gap="12px"
9
9
  >
10
+ <FSChip
11
+ :prependIcon="$props.deviceConnectivity.icon"
12
+ :color="$props.deviceConnectivity.color"
13
+ :label="connectivityLabel($props.deviceConnectivity.status)"
14
+ />
10
15
  <FSCol
11
16
  align="center-center"
12
17
  gap="0px"
13
18
  >
14
- <FSRow
15
- align="center-right"
16
- >
17
- <FSButton
18
- icon="mdi-close"
19
- variant="icon"
20
- @click="$emit('close')"
21
- />
22
- </FSRow>
23
- <FSCol
24
- align="center-center"
25
- padding="0px 24px"
26
- gap="12px"
27
- >
28
- <FSChip
29
- :prependIcon="$props.deviceConnectivity.icon"
30
- :color="$props.deviceConnectivity.color"
31
- :label="connectivityLabel($props.deviceConnectivity.status)"
32
- />
33
- <FSRow
34
- width="hug"
35
- >
36
- <FSText>
37
- {{ $tr("ui.shared.device-connectivity.last-message", "Last message") }}
38
- </FSText>
39
- </FSRow>
40
- </FSCol>
41
- </FSCol>
42
- <FSRow
43
- v-if="deviceTimestamp"
44
- padding="0px 24px"
45
- width="hug"
46
- >
47
- <FSSpan
48
- font="text-overline"
19
+ <FSText>
20
+ {{ $tr("ui.device.last-message-received", "Last message received") }}
21
+ </FSText>
22
+ <FSText
23
+ v-if="deviceTimestamp"
24
+ font="text-button"
25
+ :color="$props.deviceConnectivity.color"
26
+ variant="soft"
49
27
  >
50
28
  {{ deviceTimestamp }}
51
- </FSSpan>
52
- </FSRow>
29
+ </FSText>
30
+ </FSCol>
53
31
  </FSCol>
54
32
  </FSCard>
55
33
  </template>
@@ -62,24 +40,18 @@ import { useDateFormat } from "@dative-gpi/foundation-shared-services/composable
62
40
 
63
41
  import { connectivityLabel } from "../../utils";
64
42
 
65
- import FSButton from "../FSButton.vue";
66
43
  import FSCard from "../FSCard.vue";
67
44
  import FSChip from "../FSChip.vue";
68
45
  import FSText from "../FSText.vue";
69
- import FSSpan from "../FSSpan.vue";
70
46
  import FSCol from "../FSCol.vue";
71
- import FSRow from "../FSRow.vue";
72
47
 
73
48
  export default defineComponent({
74
49
  name: "FSConnectivityCard",
75
50
  components: {
76
- FSButton,
77
51
  FSCard,
78
52
  FSChip,
79
53
  FSText,
80
- FSSpan,
81
54
  FSCol,
82
- FSRow
83
55
  },
84
56
  props: {
85
57
  deviceConnectivity: {
package/components/deviceOrganisations/FSStatus.vue CHANGED
@@ -2,6 +2,7 @@
2
2
  <v-menu
3
3
  :closeOnContentClick="false"
4
4
  v-model="menu"
5
+ location="bottom center"
5
6
  >
6
7
  <template
7
8
  #activator="{ props }"
@@ -10,6 +11,7 @@
10
11
  class="fs-stopclick"
11
12
  :size="$props.size"
12
13
  :color="$props.statusGroup.color"
14
+ :padding="$props.padding"
13
15
  @click.prevent.stop
14
16
  v-bind="props"
15
17
  >
@@ -51,6 +53,10 @@ export default defineComponent({
51
53
  size: {
52
54
  type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
53
55
  default: "m"
56
+ },
57
+ padding: {
58
+ type: [String, Number] as PropType<string | number>,
59
+ default: "8px"
54
60
  }
55
61
  },
56
62
  setup() {
package/components/deviceOrganisations/FSStatusCard.vue CHANGED
@@ -1,68 +1,42 @@
1
1
  <template>
2
2
  <FSCard
3
- padding="2px 2px 8px 2px"
3
+ padding="12px 24px"
4
4
  :elevation="true"
5
- :border="false"
6
5
  >
7
6
  <FSCol
8
7
  align="center-center"
8
+ gap="12px"
9
9
  >
10
+ <FSChip
11
+ :prependIcon="$props.statusGroup.icon"
12
+ :color="$props.statusGroup.color"
13
+ :label="statusLabel"
14
+ />
10
15
  <FSCol
16
+ v-if="$props.statusGroup.value"
11
17
  align="center-center"
12
18
  gap="0px"
13
19
  >
14
- <FSRow
15
- v-if="$props.closable"
16
- align="center-right"
20
+ <FSText
21
+ v-if="$props.statusGroup.value && $props.modelStatus.groupById && $props.statusGroup.groupByValue"
17
22
  >
18
- <FSButton
19
- icon="mdi-close"
20
- variant="icon"
21
- @click="$emit('close')"
22
- />
23
- </FSRow>
24
- <FSCol
25
- align="center-center"
26
- padding="0px 24px"
27
- gap="12px"
23
+ {{ $props.modelStatus.groupByLabel }} {{ $props.statusGroup.groupByValue }}
24
+ </FSText>
25
+ <FSText
26
+ v-if="$props.statusGroup.value"
27
+ font="text-button"
28
+ :color="$props.statusGroup.color"
28
29
  >
29
- <FSChip
30
- :prependIcon="$props.statusGroup.icon"
31
- :color="$props.statusGroup.color"
32
- :label="statusLabel"
33
- />
34
- <FSRow
35
- v-if="$props.statusGroup.value"
36
- width="hug"
37
- >
38
- <FSText
39
- font="text-button"
40
- :color="$props.statusGroup.color"
41
- >
42
- {{ statusValue }} {{ $props.statusGroup.unit }}
43
- </FSText>
44
- </FSRow>
45
- <FSRow
46
- v-if="$props.statusGroup.value && $props.modelStatus.groupById && $props.statusGroup.groupByValue"
47
- width="hug"
48
- >
49
- <FSSpan>
50
- {{ $props.modelStatus.groupByLabel }} {{ $props.statusGroup.groupByValue }}
51
- </FSSpan>
52
- </FSRow>
53
- </FSCol>
30
+ {{ statusValue }} {{ $props.statusGroup.unit }}
31
+ </FSText>
54
32
  </FSCol>
55
- <FSRow
33
+ <FSText
56
34
  v-if="deviceTimestamp"
57
- padding="0px 24px"
58
- width="hug"
35
+ font="text-overline"
36
+ variant="soft"
59
37
  >
60
- <FSSpan
61
- font="text-overline"
62
- >
63
- {{ deviceTimestamp }}
64
- </FSSpan>
65
- </FSRow>
38
+ {{ deviceTimestamp }}
39
+ </FSText>
66
40
  </FSCol>
67
41
  </FSCard>
68
42
  </template>
@@ -73,24 +47,18 @@ import { computed, defineComponent, type PropType } from "vue";
73
47
  import type { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
74
48
  import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
75
49
 
76
- import FSButton from "../FSButton.vue";
77
50
  import FSCard from "../FSCard.vue";
78
51
  import FSChip from "../FSChip.vue";
79
52
  import FSText from "../FSText.vue";
80
- import FSSpan from "../FSSpan.vue";
81
53
  import FSCol from "../FSCol.vue";
82
- import FSRow from "../FSRow.vue";
83
54
 
84
55
  export default defineComponent({
85
56
  name: "FSStatusCard",
86
57
  components: {
87
- FSButton,
88
58
  FSCard,
89
59
  FSChip,
90
60
  FSText,
91
- FSSpan,
92
- FSCol,
93
- FSRow
61
+ FSCol
94
62
  },
95
63
  props: {
96
64
  closable: {
package/components/deviceOrganisations/FSWorstAlert.vue CHANGED
@@ -2,6 +2,7 @@
2
2
  <v-menu
3
3
  :closeOnContentClick="false"
4
4
  v-model="menu"
5
+ location="bottom center"
5
6
  >
6
7
  <template
7
8
  #activator="{ props }"
package/components/deviceOrganisations/FSWorstAlertCard.vue CHANGED
@@ -1,59 +1,42 @@
1
1
  <template>
2
2
  <FSCard
3
- padding="2px 2px 8px 2px"
3
+ padding="12px 24px"
4
4
  :elevation="true"
5
- :border="false"
6
5
  >
7
6
  <FSCol
8
7
  align="center-center"
8
+ gap="12px"
9
9
  >
10
+ <FSChip
11
+ :label="$tr('ui.common.alert', 'Alert')"
12
+ :prependIcon="statusIcon"
13
+ :color="criticityColor"
14
+ />
10
15
  <FSCol
11
16
  align="center-center"
12
17
  gap="0px"
13
18
  >
14
- <FSRow
15
- align="center-right"
16
- >
17
- <FSButton
18
- icon="mdi-close"
19
- variant="icon"
20
- @click="$emit('close')"
21
- />
22
- </FSRow>
23
- <FSCol
24
- align="center-center"
25
- padding="0px 24px"
26
- gap="12px"
19
+ <FSText>
20
+ {{ $tr('ui.alert.status', 'Status') }} : {{ statusLabel }}
21
+ </FSText>
22
+ <FSText
23
+ font="text-button"
24
+ :color="criticityColor"
27
25
  >
28
- <FSChip
29
- :label="$props.deviceAlert.label"
30
- :prependIcon="statusIcon"
31
- :color="criticityColor"
32
- />
33
- <FSRow
34
- width="hug"
35
- >
36
- <FSText>
37
- {{ statusLabel }}
38
- </FSText>
39
- </FSRow>
40
- </FSCol>
26
+ {{ $props.deviceAlert.label }}
27
+ </FSText>
41
28
  </FSCol>
42
- <FSRow
29
+ <FSText
43
30
  v-if="deviceTimestamp"
44
- padding="0px 24px"
45
- width="hug"
31
+ font="text-overline"
32
+ variant="dark"
46
33
  >
47
- <FSSpan
48
- font="text-overline"
49
- >
50
- {{ deviceTimestamp }}
51
- </FSSpan>
52
- </FSRow>
34
+ {{ deviceTimestamp }}
35
+ </FSText>
53
36
  <FSButton
54
37
  v-if="$props.alertTo"
55
38
  icon="mdi-information-outline"
56
- :label="$tr('ui.shared.device-alert.view-alert', 'View alert')"
39
+ :label="$tr('ui.alert.details', 'Alert details')"
57
40
  :to="$props.alertTo($props.deviceAlert.id)"
58
41
  />
59
42
  </FSCol>
@@ -73,9 +56,7 @@ import FSButton from "../FSButton.vue";
73
56
  import FSCard from "../FSCard.vue";
74
57
  import FSChip from "../FSChip.vue";
75
58
  import FSText from "../FSText.vue";
76
- import FSSpan from "../FSSpan.vue";
77
59
  import FSCol from "../FSCol.vue";
78
- import FSRow from "../FSRow.vue";
79
60
 
80
61
  export default defineComponent({
81
62
  name: "FSWorstAlertCard",
@@ -84,9 +65,7 @@ export default defineComponent({
84
65
  FSCard,
85
66
  FSChip,
86
67
  FSText,
87
- FSSpan,
88
68
  FSCol,
89
- FSRow
90
69
  },
91
70
  props: {
92
71
  deviceAlert: {
package/components/lists/FSSimpleList.vue CHANGED
@@ -68,7 +68,11 @@
68
68
  v-else-if="item.icon"
69
69
  :icon="item.icon"
70
70
  />
71
- <FSSpan>{{ item[itemLabel] }}</FSSpan>
71
+ <FSSpan
72
+ font="text-overline"
73
+ >
74
+ {{ item[itemLabel] }}
75
+ </FSSpan>
72
76
  </slot>
73
77
  <FSRow
74
78
  align="center-right"
package/components/map/FSMap.vue CHANGED
@@ -47,8 +47,8 @@
47
47
  v-for="location in $props.locations"
48
48
  :selected="location.id === $props.selectedLocationId"
49
49
  :key="location.id"
50
- :color="location.color"
51
- :icon="location.icon"
50
+ :color="location.color ?? ColorEnum.Primary"
51
+ :icon="location.icon ?? 'mdi-map-marker'"
52
52
  :latlng="{lat: location.address.latitude, lng: location.address.longitude}"
53
53
  @click="$emit('update:selectedLocationId', location.id)"
54
54
  />
package/models/map.ts CHANGED
@@ -12,7 +12,7 @@ export interface MapLayer {
12
12
  export interface FSLocation {
13
13
  id: string;
14
14
  label: string;
15
- icon: string;
15
+ icon: string | null;
16
16
  address: Address;
17
- color: string;
17
+ color: string | null;
18
18
  }
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.61",
4
+ "version": "1.0.63",
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.61",
14
- "@dative-gpi/foundation-shared-services": "1.0.61"
13
+ "@dative-gpi/foundation-shared-domain": "1.0.63",
14
+ "@dative-gpi/foundation-shared-services": "1.0.63"
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": "764e769b8eeb942d5028c00c479333be5907f4de"
38
+ "gitHead": "b2fbfec30ab5c2f3edeaddbc7eed0d3c98fe71c4"
39
39
  }
package/styles/components/fs_filter_button.scss CHANGED
@@ -1,10 +1,5 @@
1
1
  .fs-filter-button-menu {
2
- @include web {
3
- min-width: 200px !important;
4
- }
5
- @include mobile {
6
- min-width: 180px !important;
7
- }
2
+ min-width: 300px !important;
8
3
  }
9
4
 
10
5
  .fs-filter-button-chip {
package/styles/components/fs_switch.scss CHANGED
@@ -31,6 +31,7 @@
31
31
  .fs-switch-label {
32
32
  cursor: var(--fs-switch-cursor) !important;
33
33
  color: var(--fs-switch-color) !important;
34
+ padding-top: 2px;
34
35
  user-select: none;
35
36
  }
36
37
 
package/styles/components/fs_tabs.scss CHANGED
@@ -1,16 +1,17 @@
1
1
  .fs-tabs {
2
2
  display: flex !important;
3
3
  width: 100% !important;
4
- flex-shrink: 0;
5
4
 
6
5
  @include web {
7
6
  height: 48px !important;
8
7
  max-height: 48px;
8
+ min-height: 48px;
9
9
  }
10
10
 
11
11
  @include mobile {
12
12
  height: 40px !important;
13
13
  max-height: 40px;
14
+ min-height: 40px;
14
15
  }
15
16
  }
16
17
 
@@ -34,11 +35,13 @@
34
35
  @include web {
35
36
  height: 48px !important;
36
37
  max-height: 48px;
38
+ min-height: 48px;
37
39
  }
38
40
 
39
41
  @include mobile {
40
42
  height: 40px !important;
41
43
  max-height: 40px;
44
+ min-height: 40px;
42
45
  }
43
46
  }
44
47