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

Sign up to get free protection for your applications and to get access to all the features.
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",