@enki-tek/fms-web-components 0.1.6 → 0.1.8

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 (23) hide show
  1. package/components/Header/Brand.svelte +1 -1
  2. package/components/Header/Header.scss +1 -1
  3. package/components/Header/Header.svelte +1 -1
  4. package/components/Header/HeaderItem.svelte +1 -1
  5. package/components/Header/UserAvatar.svelte +1 -1
  6. package/components/Icon/ActionInconGroup.svelte +2 -2
  7. package/components/Icon/ActionInconGroup.svelte.d.ts +2 -2
  8. package/components/Layout/Content.svelte +1 -1
  9. package/components/Layout/Page.svelte +3 -2
  10. package/components/Sidebar/MenuGroup.svelte +3 -0
  11. package/components/Sidebar/MenuItem.svelte +4 -1
  12. package/components/Sidebar/SideBarMenu.svelte +5 -2
  13. package/components/Sidebar/Sidebar.scss +5 -0
  14. package/components/Sidebar/Sidebar.svelte +3 -0
  15. package/components/StatusCard/StatusCard.scss +2 -2
  16. package/components/StatusCard/StatusCard.svelte +11 -10
  17. package/components/StatusCard/StatusCardBody.svelte +2 -2
  18. package/components/StatusCard/StatusCardTitle.svelte +2 -2
  19. package/components/WidgetCard/Card.scss +4 -14
  20. package/components/WidgetCard/SensorStatusCard.svelte +4 -14
  21. package/components/WidgetCard/StateCard.svelte +6 -16
  22. package/components/WidgetCard/WidgetCard.svelte +48 -47
  23. package/package.json +1 -1
package/components/Header/Brand.svelte CHANGED
@@ -72,7 +72,7 @@
72
72
  display: flex;
73
73
  flex-direction: column;
74
74
  align-items: flex-end;
75
- color: #6C757D;
75
+ color: #ffffff;
76
76
  }
77
77
  :global(.userProfile img) {
78
78
  width: 45px;
package/components/Header/Header.scss CHANGED
@@ -52,7 +52,7 @@
52
52
  display: flex;
53
53
  flex-direction: column;
54
54
  align-items: flex-end;
55
- color: $gray-600;
55
+ color: $white;
56
56
  }
57
57
 
58
58
  :global(.userProfile img) {
package/components/Header/Header.svelte CHANGED
@@ -71,7 +71,7 @@
71
71
  display: flex;
72
72
  flex-direction: column;
73
73
  align-items: flex-end;
74
- color: #6C757D;
74
+ color: #ffffff;
75
75
  }
76
76
  :global(.userProfile img) {
77
77
  width: 45px;
package/components/Header/HeaderItem.svelte CHANGED
@@ -73,7 +73,7 @@
73
73
  display: flex;
74
74
  flex-direction: column;
75
75
  align-items: flex-end;
76
- color: #6C757D;
76
+ color: #ffffff;
77
77
  }
78
78
  :global(.userProfile img) {
79
79
  width: 45px;
package/components/Header/UserAvatar.svelte CHANGED
@@ -71,7 +71,7 @@
71
71
  display: flex;
72
72
  flex-direction: column;
73
73
  align-items: flex-end;
74
- color: #6C757D;
74
+ color: #ffffff;
75
75
  }
76
76
  :global(.userProfile img) {
77
77
  width: 45px;
package/components/Icon/ActionInconGroup.svelte CHANGED
@@ -1,8 +1,8 @@
1
1
  <script>
2
-
2
+ export let className = "";
3
3
  </script>
4
4
 
5
- <div class="icons">
5
+ <div class="icons {className}">
6
6
  <slot></slot>
7
7
  </div>
8
8
 
package/components/Icon/ActionInconGroup.svelte.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} ActionInconGroupEvents */
3
3
  /** @typedef {typeof __propDef.slots} ActionInconGroupSlots */
4
4
  export default class ActionInconGroup extends SvelteComponentTyped<{
5
- [x: string]: never;
5
+ className?: string | undefined;
6
6
  }, {
7
7
  [evt: string]: CustomEvent<any>;
8
8
  }, {
@@ -15,7 +15,7 @@ export type ActionInconGroupSlots = typeof __propDef.slots;
15
15
  import { SvelteComponentTyped } from "svelte";
16
16
  declare const __propDef: {
17
17
  props: {
18
- [x: string]: never;
18
+ className?: string | undefined;
19
19
  };
20
20
  events: {
21
21
  [evt: string]: CustomEvent<any>;
package/components/Layout/Content.svelte CHANGED
@@ -8,6 +8,6 @@
8
8
  <style>
9
9
  .enki-main-content {
10
10
  margin-top:77px;
11
- background-color: #EBECEF;
11
+ background-color: #D4F1F4;
12
12
  }
13
13
  </style>
package/components/Layout/Page.svelte CHANGED
@@ -4,9 +4,10 @@
4
4
 
5
5
  <div class="main-content">
6
6
  <div
7
- class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3"
7
+ class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3
8
+ "
8
9
  >
9
- <Row style="width:100%">
10
+ <Row class="d-flex flex-lg-row flex-column px-3" style="width:100%">
10
11
  <Col md="4">
11
12
  <header>
12
13
  <div class="d-flex flex-row justify-content-start mt-2 title">
package/components/Sidebar/MenuGroup.svelte CHANGED
@@ -99,6 +99,9 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
99
99
  .box a {
100
100
  color: #ffffff;
101
101
  }
102
+ .active {
103
+ background-color: #3A736D !important;
104
+ }
102
105
  }
103
106
  .active {
104
107
  background-color: #ddf9f6;
package/components/Sidebar/MenuItem.svelte CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  <li class="nav-item p-2 box {active ? "active" : ""}">
10
10
  <a
11
- class="nav-link d-flex align-items-center gap-2"
11
+ class="nav-link d-flex align-items-center gap-2 flex-grow-1"
12
12
  aria-current="page"
13
13
  href={link}
14
14
  on:click
@@ -112,6 +112,9 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
112
112
  .box a {
113
113
  color: #ffffff;
114
114
  }
115
+ .active {
116
+ background-color: #3A736D !important;
117
+ }
115
118
  }
116
119
  .active {
117
120
  background-color: #ddf9f6;
package/components/Sidebar/SideBarMenu.svelte CHANGED
@@ -5,9 +5,9 @@
5
5
  export let companyName = 'EnkiTek';
6
6
  </script>
7
7
 
8
- <div class="sidebar">
8
+ <div class="sidebar pe-0" >
9
9
  <div
10
- class="offcanvas-md offcanvas-end bg-light rounded"
10
+ class="offcanvas-md offcanvas-end bg-white rounded"
11
11
  tabindex="-1"
12
12
  id="sidebarMenu"
13
13
  aria-labelledby="sidebarMenuLabel"
@@ -122,6 +122,9 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
122
122
  .box a {
123
123
  color: #ffffff;
124
124
  }
125
+ .active {
126
+ background-color: #3A736D !important;
127
+ }
125
128
  }
126
129
  .active {
127
130
  background-color: #ddf9f6;
package/components/Sidebar/Sidebar.scss CHANGED
@@ -138,7 +138,12 @@ ul {
138
138
  .box a{
139
139
  color: #ffffff;
140
140
  }
141
+
142
+ .active{
143
+ background-color: #3A736D !important;
144
+ }
141
145
  }
146
+
142
147
  .active{
143
148
  background-color: #ddf9f6;
144
149
  }
package/components/Sidebar/Sidebar.svelte CHANGED
@@ -175,6 +175,9 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
175
175
  .box a {
176
176
  color: #ffffff;
177
177
  }
178
+ .active {
179
+ background-color: #3A736D !important;
180
+ }
178
181
  }
179
182
  .active {
180
183
  background-color: #ddf9f6;
package/components/StatusCard/StatusCard.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  @import './../variable.scss';
2
2
 
3
3
  .card {
4
- background-color: $gray-100;
4
+ border-color: transparent;
5
+ background-color: $white;
5
6
  padding: $rem;
6
7
  border-radius: calc((3*$rem)/4);
7
8
  font-family: $bodyFonts;
8
- min-width: 22rem;
9
9
  min-height:14rem;
10
10
  }
11
11
  .title{
package/components/StatusCard/StatusCard.svelte CHANGED
@@ -1,20 +1,20 @@
1
1
  <script>
2
- export let className = "";
3
- </script>
4
-
5
- <div class="card m-2 {className}">
6
- <slot />
7
- </div>
8
-
9
- <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
2
+ export let className = "";
3
+ </script>
4
+ <div class="col-12 col-md-6 col-sm-6 col-lg-3">
5
+ <div class="m-2 card {className}">
6
+ <slot />
7
+ </div>
8
+ </div>
9
+ <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
10
10
  @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
11
11
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
12
12
  .card {
13
- background-color: #F8F9FA;
13
+ border-color: transparent;
14
+ background-color: #ffffff;
14
15
  padding: 1rem;
15
16
  border-radius: 0.75rem;
16
17
  font-family: Roboto;
17
- min-width: 22rem;
18
18
  min-height: 14rem;
19
19
  }
20
20
  .title {
@@ -40,3 +40,4 @@ export let className = "";
40
40
  width: fit-content;
41
41
  border-radius: 0.3333333333rem;
42
42
  }</style>
43
+
package/components/StatusCard/StatusCardBody.svelte CHANGED
@@ -25,11 +25,11 @@
25
25
  @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
26
26
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
27
27
  .card {
28
- background-color: #F8F9FA;
28
+ border-color: transparent;
29
+ background-color: #ffffff;
29
30
  padding: 1rem;
30
31
  border-radius: 0.75rem;
31
32
  font-family: Roboto;
32
- min-width: 22rem;
33
33
  min-height: 14rem;
34
34
  }
35
35
  .title {
package/components/StatusCard/StatusCardTitle.svelte CHANGED
@@ -15,11 +15,11 @@
15
15
  @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
16
16
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
17
17
  .card {
18
- background-color: #F8F9FA;
18
+ border-color: transparent;
19
+ background-color: #ffffff;
19
20
  padding: 1rem;
20
21
  border-radius: 0.75rem;
21
22
  font-family: Roboto;
22
- min-width: 22rem;
23
23
  min-height: 14rem;
24
24
  }
25
25
  .title {
package/components/WidgetCard/Card.scss CHANGED
@@ -1,21 +1,11 @@
1
1
  @import './../variable.scss';
2
2
  .card {
3
3
  font-family: $bodyFonts;
4
- background-color: #f8f8f8;
4
+ background-color: $white;
5
5
  border-radius: calc((3*$rem)/4);
6
6
  padding: $rem;
7
7
  border-color: transparent;
8
- min-height: 354px;
9
- min-width: 355px;
10
- }
11
- .doublecard{
12
- font-family: $bodyFonts;
13
- background-color: #f8f8f8;
14
- border-radius: calc((3*$rem)/4);
15
- padding: $rem;
16
- border-color: transparent;
17
- min-height: 354px;
18
- min-width: 712px;
8
+ min-height: 22rem;
19
9
  }
20
10
  .state-card {
21
11
  font-family: $bodyFonts;
@@ -78,14 +68,14 @@
78
68
  .statecardtitle {
79
69
  font-weight: 400;
80
70
  float: right;
81
- width: max-content;
71
+ width: 50%;
82
72
  }
83
73
 
84
74
  .subtitle {
85
75
  float: left;
86
76
  font-size: 16px;
87
77
  font-weight: 400;
88
- width: max-content;
78
+ width: 100%;
89
79
  }
90
80
 
91
81
  .time {
package/components/WidgetCard/SensorStatusCard.svelte CHANGED
@@ -30,21 +30,11 @@
30
30
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
31
31
  .card {
32
32
  font-family: Roboto;
33
- background-color: #f8f8f8;
34
- border-radius: 0.75rem;
35
- padding: 1rem;
36
- border-color: transparent;
37
- min-height: 354px;
38
- min-width: 355px;
39
- }
40
- .doublecard {
41
- font-family: Roboto;
42
- background-color: #f8f8f8;
33
+ background-color: #ffffff;
43
34
  border-radius: 0.75rem;
44
35
  padding: 1rem;
45
36
  border-color: transparent;
46
- min-height: 354px;
47
- min-width: 712px;
37
+ min-height: 22rem;
48
38
  }
49
39
  .state-card {
50
40
  font-family: Roboto;
@@ -102,13 +92,13 @@
102
92
  .statecardtitle {
103
93
  font-weight: 400;
104
94
  float: right;
105
- width: max-content;
95
+ width: 50%;
106
96
  }
107
97
  .subtitle {
108
98
  float: left;
109
99
  font-size: 16px;
110
100
  font-weight: 400;
111
- width: max-content;
101
+ width: 100%;
112
102
  }
113
103
  .time {
114
104
  float: right;
package/components/WidgetCard/StateCard.svelte CHANGED
@@ -16,13 +16,13 @@
16
16
  </Col>
17
17
  <Col>
18
18
  <div class="content">
19
- <div class="statecardtitle">{title}</div>
19
+ <div class="statecardtitle text-truncate">{title}</div>
20
20
  </div>
21
21
  </Col>
22
22
  </Row>
23
23
  <Row>
24
24
  <Col>
25
- <div class="subtitle">{subtitle}</div>
25
+ <div class="subtitle text-truncate">{subtitle}</div>
26
26
  </Col>
27
27
  <Col> <div class="time mt-1">{time}</div>
28
28
  </Col>
@@ -33,21 +33,11 @@
33
33
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
34
34
  .card {
35
35
  font-family: Roboto;
36
- background-color: #f8f8f8;
37
- border-radius: 0.75rem;
38
- padding: 1rem;
39
- border-color: transparent;
40
- min-height: 354px;
41
- min-width: 355px;
42
- }
43
- .doublecard {
44
- font-family: Roboto;
45
- background-color: #f8f8f8;
36
+ background-color: #ffffff;
46
37
  border-radius: 0.75rem;
47
38
  padding: 1rem;
48
39
  border-color: transparent;
49
- min-height: 354px;
50
- min-width: 712px;
40
+ min-height: 22rem;
51
41
  }
52
42
  .state-card {
53
43
  font-family: Roboto;
@@ -105,13 +95,13 @@
105
95
  .statecardtitle {
106
96
  font-weight: 400;
107
97
  float: right;
108
- width: max-content;
98
+ width: 50%;
109
99
  }
110
100
  .subtitle {
111
101
  float: left;
112
102
  font-size: 16px;
113
103
  font-weight: 400;
114
- width: max-content;
104
+ width: 100%;
115
105
  }
116
106
  .time {
117
107
  float: right;
package/components/WidgetCard/WidgetCard.svelte CHANGED
@@ -5,68 +5,69 @@
5
5
  export let resizable = false;
6
6
  export let widthOnly = true;
7
7
  export let resizeQuotient = 2;
8
- export let cardLength = 1;
8
+ export let cardLength = 3;
9
9
  let maximized = false;
10
10
  let element = null;
11
11
  const toggleMaximize = () => {
12
12
  maximized = !maximized;
13
- if (!maximized) {
14
- element.style.width = element.getBoundingClientRect().width / resizeQuotient + 'px';
15
- if (!widthOnly) {
16
- element.style.height = element.getBoundingClientRect().height / resizeQuotient + 'px';
17
- }
18
-
19
- return;
20
- }
21
- element.style.width = element.getBoundingClientRect().width * resizeQuotient + 'px';
22
- if (!widthOnly) {
23
- element.style.height = element.getBoundingClientRect().height * resizeQuotient + 'px';
13
+ if (maximized) {
14
+ cardLength *= 2;
15
+ console.log(cardLength);
16
+ } else {
17
+ cardLength /= 2;
18
+ console.log(cardLength);
24
19
  }
20
+ // if (!maximized) {
21
+ // element.style.width = element.getBoundingClientRect().width / resizeQuotient + 'px';
22
+ // if (!widthOnly) {
23
+ // element.style.height = element.getBoundingClientRect().height / resizeQuotient + 'px';
24
+ // }
25
+
26
+ // return;
27
+ // }
28
+ // element.style.width = element.getBoundingClientRect().width * resizeQuotient + 'px';
29
+ // if (!widthOnly) {
30
+ // element.style.height = element.getBoundingClientRect().height * resizeQuotient + 'px';
31
+ // }
25
32
  };
26
33
  </script>
27
34
 
28
- <div bind:this={element}>
29
- <div class="m-2 {cardLength == 1 ? "card" : "doublecard"}">
30
- <Row>
31
- <Col>
32
- <div class="title fw-normal">{title}</div>
33
- </Col>
34
- {#if resizable}
35
- <Col>
36
- <div class="float-end">
37
- <i on:click={toggleMaximize} class="material-icons"
38
- >{!maximized ? 'zoom_out_map' : 'zoom_in_map'}</i
39
- >
40
- </div>
41
- </Col>
42
- {/if}
43
- </Row>
44
- <Row>
45
- <slot />
46
- </Row>
35
+ {#key cardLength}
36
+ <div class="col-12 col-md-{cardLength * 2} col-sm-{cardLength * 2} col-lg-{cardLength}">
37
+ <div bind:this={element}>
38
+ <div class="m-2 card">
39
+ <Row>
40
+ <Col>
41
+ <div class="title fw-normal">{title}</div>
42
+ </Col>
43
+ {#if resizable}
44
+ <Col>
45
+ <div class="float-end">
46
+ <i on:click={toggleMaximize} class="material-icons"
47
+ >{!maximized ? 'zoom_out_map' : 'zoom_in_map'}</i
48
+ >
49
+ </div>
50
+ </Col>
51
+ {/if}
52
+ </Row>
53
+ <Row>
54
+ <slot />
55
+ </Row>
56
+ </div>
57
+ </div>
47
58
  </div>
48
- </div>
59
+ {/key}
49
60
 
50
61
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
51
62
  @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
52
63
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
53
64
  .card {
54
65
  font-family: Roboto;
55
- background-color: #f8f8f8;
66
+ background-color: #ffffff;
56
67
  border-radius: 0.75rem;
57
68
  padding: 1rem;
58
69
  border-color: transparent;
59
- min-height: 354px;
60
- min-width: 355px;
61
- }
62
- .doublecard {
63
- font-family: Roboto;
64
- background-color: #f8f8f8;
65
- border-radius: 0.75rem;
66
- padding: 1rem;
67
- border-color: transparent;
68
- min-height: 354px;
69
- min-width: 712px;
70
+ min-height: 22rem;
70
71
  }
71
72
  .state-card {
72
73
  font-family: Roboto;
@@ -124,13 +125,13 @@
124
125
  .statecardtitle {
125
126
  font-weight: 400;
126
127
  float: right;
127
- width: max-content;
128
+ width: 50%;
128
129
  }
129
130
  .subtitle {
130
131
  float: left;
131
132
  font-size: 16px;
132
133
  font-weight: 400;
133
- width: max-content;
134
+ width: 100%;
134
135
  }
135
136
  .time {
136
137
  float: right;
@@ -149,4 +150,4 @@
149
150
  color: #c9443a;
150
151
  padding: 5px 10px;
151
152
  border-radius: 5px;
152
- }</style>
153
+ }</style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enki-tek/fms-web-components",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "devDependencies": {
5
5
  "@storybook/addon-essentials": "^7.6.14",
6
6
  "@storybook/addon-interactions": "^7.6.14",