@enki-tek/fms-web-components 0.1.30 → 0.1.32
Sign up to get free protection for your applications and to get access to all the features.
- package/components/StatusCard/GrayCard.svelte +1 -1
- package/components/StatusCard/PlainCard.svelte +6 -3
- package/components/StatusCard/PlainCard.svelte.d.ts +2 -0
- package/components/StatusCard/StatusCard.scss +16 -8
- package/components/StatusCard/StatusCard.svelte +1 -1
- package/components/StatusCard/StatusCardBody.svelte +2 -2
- package/components/StatusCard/StatusCardTitle.svelte +1 -1
- package/components/WidgetCard/AlertFooter.svelte +1 -0
- package/components/WidgetCard/BadgeCard.svelte +1 -0
- package/components/WidgetCard/Card.scss +1 -0
- package/components/WidgetCard/SensorStatusCard.svelte +1 -0
- package/components/WidgetCard/SensorWidgetTitle.svelte +10 -9
- package/components/WidgetCard/StateCard.svelte +1 -0
- package/components/WidgetCard/WidgetCard.svelte +1 -0
- package/package.json +1 -1
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
import SensorWidgetTitle from '../WidgetCard/SensorWidgetTitle.svelte';
|
|
3
|
+
|
|
2
4
|
export let title = 'Sensor Alert and Notification';
|
|
5
|
+
export let icon = 'null';
|
|
3
6
|
</script>
|
|
4
7
|
|
|
5
8
|
<div class=" m-2 card">
|
|
6
|
-
<div class="row">
|
|
7
|
-
<
|
|
9
|
+
<div class="row-flex">
|
|
10
|
+
<SensorWidgetTitle sensorName={title} {icon} />
|
|
8
11
|
<div class="col">
|
|
9
12
|
<div class="float-end">
|
|
10
13
|
<slot name="activity" />
|
|
@@ -23,7 +26,7 @@
|
|
|
23
26
|
padding: 1rem;
|
|
24
27
|
border-radius: 0.75rem;
|
|
25
28
|
font-family: Roboto;
|
|
26
|
-
min-height:
|
|
29
|
+
min-height: 11rem;
|
|
27
30
|
}
|
|
28
31
|
.card-mini {
|
|
29
32
|
height: 6rem !important;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} PlainCardEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} PlainCardSlots */
|
|
4
4
|
export default class PlainCard extends SvelteComponentTyped<{
|
|
5
|
+
icon?: string | undefined;
|
|
5
6
|
title?: string | undefined;
|
|
6
7
|
}, {
|
|
7
8
|
[evt: string]: CustomEvent<any>;
|
|
@@ -16,6 +17,7 @@ export type PlainCardSlots = typeof __propDef.slots;
|
|
|
16
17
|
import { SvelteComponentTyped } from "svelte";
|
|
17
18
|
declare const __propDef: {
|
|
18
19
|
props: {
|
|
20
|
+
icon?: string | undefined;
|
|
19
21
|
title?: string | undefined;
|
|
20
22
|
};
|
|
21
23
|
events: {
|
|
@@ -6,22 +6,27 @@
|
|
|
6
6
|
padding: $rem;
|
|
7
7
|
border-radius: calc((3*$rem)/4);
|
|
8
8
|
font-family: $bodyFonts;
|
|
9
|
-
min-height:
|
|
9
|
+
min-height: 11rem;
|
|
10
10
|
}
|
|
11
|
-
|
|
11
|
+
|
|
12
|
+
.card-mini {
|
|
12
13
|
height: 6rem !important;
|
|
13
14
|
min-height: 6rem !important;
|
|
14
15
|
}
|
|
15
|
-
|
|
16
|
+
|
|
17
|
+
.title {
|
|
16
18
|
font-size: $status-card-title;
|
|
17
19
|
font-weight: $title-weight;
|
|
18
20
|
}
|
|
19
|
-
|
|
21
|
+
|
|
22
|
+
.text {
|
|
20
23
|
font-size: $status-card-text;
|
|
21
24
|
}
|
|
22
|
-
|
|
25
|
+
|
|
26
|
+
.value {
|
|
23
27
|
font-size: $status-card-value;
|
|
24
28
|
}
|
|
29
|
+
|
|
25
30
|
.index {
|
|
26
31
|
font-size: medium !important;
|
|
27
32
|
}
|
|
@@ -37,14 +42,17 @@
|
|
|
37
42
|
width: fit-content;
|
|
38
43
|
border-radius: calc($rem/3);
|
|
39
44
|
}
|
|
40
|
-
|
|
45
|
+
|
|
46
|
+
.sensor-box {
|
|
41
47
|
background-color: $gray-600;
|
|
42
48
|
}
|
|
43
|
-
|
|
49
|
+
|
|
50
|
+
.plain-card-title {
|
|
44
51
|
font-size: $widget-card-title;
|
|
45
52
|
font-weight: $title-weight;
|
|
46
53
|
}
|
|
47
|
-
|
|
54
|
+
|
|
55
|
+
.gray-card {
|
|
48
56
|
border-color: transparent;
|
|
49
57
|
background-color: $gray-100;
|
|
50
58
|
padding: $rem;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
export let value;
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
|
-
<div class="mt-
|
|
8
|
+
<div class="mt-1">
|
|
9
9
|
<Row>
|
|
10
10
|
<Col>
|
|
11
11
|
<div class={Number(index) > 0 ? 'box1 mb-1' : 'box2 mb-1'}>
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
padding: 1rem;
|
|
31
31
|
border-radius: 0.75rem;
|
|
32
32
|
font-family: Roboto;
|
|
33
|
-
min-height:
|
|
33
|
+
min-height: 11rem;
|
|
34
34
|
}
|
|
35
35
|
.card-mini {
|
|
36
36
|
height: 6rem !important;
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import Icon from '../Icon/Icon.svelte';
|
|
3
3
|
export let sensorName;
|
|
4
|
-
export let icon=
|
|
4
|
+
export let icon = 'house-fill';
|
|
5
5
|
</script>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
|
|
7
|
+
<div class="row-flex align-items-center p-0">
|
|
8
|
+
<div class="col">
|
|
9
|
+
<div class="text-dark h6"><Icon iconName={icon} />{sensorName}</div>
|
|
10
|
+
<slot name="status" />
|
|
11
|
+
</div>
|
|
12
|
+
<div class="col p-0">
|
|
13
|
+
<div class="float-end p-0">
|
|
13
14
|
<slot name="menu" />
|
|
14
|
-
</div>
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
17
|
+
</div>
|