@enki-tek/fms-web-components 0.0.18 → 0.0.19

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.
@@ -31,6 +31,13 @@
31
31
  color: $gray-600;
32
32
  }
33
33
 
34
+ .card-link {
35
+ @include common-font-properties(16px);
36
+ color: $primary;
37
+ text-decoration: none;
38
+ font-family: $bodyFonts;
39
+ }
40
+
34
41
  :global(.card-footer){
35
42
  background-color: $white;
36
43
  }
@@ -1,8 +1,16 @@
1
1
  <script>
2
2
  import { CardBody } from 'sveltestrap';
3
+ export let type = '';
4
+ const cardType = {
5
+ loginCard: 'login-card-body'
6
+ };
7
+ let tableClasses = [];
8
+ if (cardType.hasOwnProperty(type)) {
9
+ tableClasses = [cardType[type]];
10
+ }
3
11
  </script>
4
12
 
5
- <CardBody class="body">
13
+ <CardBody class={tableClasses.join(' ')}>
6
14
  <slot />
7
15
  </CardBody>
8
16
 
@@ -40,6 +48,16 @@
40
48
  font-family: "Roboto";
41
49
  color: #6C757D;
42
50
  }
51
+ .card-link {
52
+ font-size: 16px;
53
+ font-style: normal;
54
+ font-weight: 400;
55
+ line-height: 28px;
56
+ font-family: "Roboto";
57
+ color: #00AEE5;
58
+ text-decoration: none;
59
+ font-family: Roboto;
60
+ }
43
61
  :global(.card-footer) {
44
62
  background-color: #ffffff;
45
63
  }
@@ -2,7 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} CardBodyEvents */
3
3
  /** @typedef {typeof __propDef.slots} CardBodySlots */
4
4
  export default class CardBody extends SvelteComponentTyped<{
5
- [x: string]: never;
5
+ type?: string | undefined;
6
6
  }, {
7
7
  [evt: string]: CustomEvent<any>;
8
8
  }, {
@@ -15,7 +15,7 @@ export type CardBodySlots = typeof __propDef.slots;
15
15
  import { SvelteComponentTyped } from "svelte";
16
16
  declare const __propDef: {
17
17
  props: {
18
- [x: string]: never;
18
+ type?: string | undefined;
19
19
  };
20
20
  events: {
21
21
  [evt: string]: CustomEvent<any>;
@@ -42,6 +42,16 @@
42
42
  font-family: "Roboto";
43
43
  color: #6C757D;
44
44
  }
45
+ .card-link {
46
+ font-size: 16px;
47
+ font-style: normal;
48
+ font-weight: 400;
49
+ line-height: 28px;
50
+ font-family: "Roboto";
51
+ color: #00AEE5;
52
+ text-decoration: none;
53
+ font-family: Roboto;
54
+ }
45
55
  :global(.card-footer) {
46
56
  background-color: #ffffff;
47
57
  }
@@ -0,0 +1,63 @@
1
+ <script>
2
+ export let link = '';
3
+ </script>
4
+
5
+ <a href={link} class="card-link">
6
+ <slot />
7
+ </a>
8
+
9
+ <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
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
+ @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
+ :global(.Card) {
13
+ display: flex;
14
+ flex-direction: column;
15
+ gap: 16px;
16
+ }
17
+ .title {
18
+ color: #212529;
19
+ font-size: 24px;
20
+ font-style: normal;
21
+ font-weight: 600;
22
+ line-height: normal;
23
+ font-family: "Roboto";
24
+ }
25
+ .sub-title {
26
+ margin-top: 0.5rem;
27
+ margin-bottom: 0.5rem;
28
+ font-size: 16px;
29
+ font-style: normal;
30
+ font-weight: 600;
31
+ line-height: normal;
32
+ font-family: "Roboto";
33
+ color: #3AC82E;
34
+ }
35
+ .text {
36
+ font-size: 16px;
37
+ font-style: normal;
38
+ font-weight: 400;
39
+ line-height: 28px;
40
+ font-family: "Roboto";
41
+ color: #6C757D;
42
+ }
43
+ .card-link {
44
+ font-size: 16px;
45
+ font-style: normal;
46
+ font-weight: 400;
47
+ line-height: 28px;
48
+ font-family: "Roboto";
49
+ color: #00AEE5;
50
+ text-decoration: none;
51
+ font-family: Roboto;
52
+ }
53
+ :global(.card-footer) {
54
+ background-color: #ffffff;
55
+ }
56
+ .footer {
57
+ font-size: 16px;
58
+ font-style: normal;
59
+ font-weight: 400;
60
+ line-height: 28px;
61
+ font-family: "Roboto";
62
+ font-family: Roboto;
63
+ }</style>
@@ -0,0 +1,27 @@
1
+ /** @typedef {typeof __propDef.props} CardLinkProps */
2
+ /** @typedef {typeof __propDef.events} CardLinkEvents */
3
+ /** @typedef {typeof __propDef.slots} CardLinkSlots */
4
+ export default class CardLink extends SvelteComponentTyped<{
5
+ link?: string | undefined;
6
+ }, {
7
+ [evt: string]: CustomEvent<any>;
8
+ }, {
9
+ default: {};
10
+ }> {
11
+ }
12
+ export type CardLinkProps = typeof __propDef.props;
13
+ export type CardLinkEvents = typeof __propDef.events;
14
+ export type CardLinkSlots = typeof __propDef.slots;
15
+ import { SvelteComponentTyped } from "svelte";
16
+ declare const __propDef: {
17
+ props: {
18
+ link?: string | undefined;
19
+ };
20
+ events: {
21
+ [evt: string]: CustomEvent<any>;
22
+ };
23
+ slots: {
24
+ default: {};
25
+ };
26
+ };
27
+ export {};
@@ -42,6 +42,16 @@
42
42
  font-family: "Roboto";
43
43
  color: #6C757D;
44
44
  }
45
+ .card-link {
46
+ font-size: 16px;
47
+ font-style: normal;
48
+ font-weight: 400;
49
+ line-height: 28px;
50
+ font-family: "Roboto";
51
+ color: #00AEE5;
52
+ text-decoration: none;
53
+ font-family: Roboto;
54
+ }
45
55
  :global(.card-footer) {
46
56
  background-color: #ffffff;
47
57
  }
@@ -42,6 +42,16 @@
42
42
  font-family: "Roboto";
43
43
  color: #6C757D;
44
44
  }
45
+ .card-link {
46
+ font-size: 16px;
47
+ font-style: normal;
48
+ font-weight: 400;
49
+ line-height: 28px;
50
+ font-family: "Roboto";
51
+ color: #00AEE5;
52
+ text-decoration: none;
53
+ font-family: Roboto;
54
+ }
45
55
  :global(.card-footer) {
46
56
  background-color: #ffffff;
47
57
  }
@@ -42,6 +42,16 @@
42
42
  font-family: "Roboto";
43
43
  color: #6C757D;
44
44
  }
45
+ .card-link {
46
+ font-size: 16px;
47
+ font-style: normal;
48
+ font-weight: 400;
49
+ line-height: 28px;
50
+ font-family: "Roboto";
51
+ color: #00AEE5;
52
+ text-decoration: none;
53
+ font-family: Roboto;
54
+ }
45
55
  :global(.card-footer) {
46
56
  background-color: #ffffff;
47
57
  }
@@ -41,6 +41,16 @@
41
41
  font-family: "Roboto";
42
42
  color: #6C757D;
43
43
  }
44
+ .card-link {
45
+ font-size: 16px;
46
+ font-style: normal;
47
+ font-weight: 400;
48
+ line-height: 28px;
49
+ font-family: "Roboto";
50
+ color: #00AEE5;
51
+ text-decoration: none;
52
+ font-family: Roboto;
53
+ }
44
54
  :global(.card-footer) {
45
55
  background-color: #ffffff;
46
56
  }
@@ -1,25 +1,29 @@
1
1
  <script>
2
2
  import { Table } from 'sveltestrap';
3
+ export let size = "lg"
4
+ export let hover = ' ';
5
+ export let striped =' ';
6
+ let tableStyles = ["table" , `table-${hover}` , `table-${striped}`]
3
7
  </script>
4
8
 
5
- <Table size="lg" class="table table-hover">
9
+ <Table size = {size} class={tableStyles.join(' ')}>
6
10
  <slot />
7
11
  </Table>
8
12
 
9
13
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
10
14
  @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
15
  @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
- tbody tr td, thead tr th {
16
+ .td-div, .th-div {
13
17
  color: #152536;
14
18
  font-size: 16px;
15
19
  font-style: normal;
16
20
  font-weight: 700;
17
21
  font-family: Roboto;
18
22
  }
19
- thead tr th {
23
+ .th-div {
20
24
  font-size: 17px;
21
25
  }
22
- tbody tr td {
26
+ .td-div {
23
27
  width: 12.5rem;
24
28
  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
25
29
  font-weight: 400;
@@ -2,7 +2,9 @@
2
2
  /** @typedef {typeof __propDef.events} EnkiTableEvents */
3
3
  /** @typedef {typeof __propDef.slots} EnkiTableSlots */
4
4
  export default class EnkiTable extends SvelteComponentTyped<{
5
- [x: string]: never;
5
+ size?: string | undefined;
6
+ hover?: string | undefined;
7
+ striped?: string | undefined;
6
8
  }, {
7
9
  [evt: string]: CustomEvent<any>;
8
10
  }, {
@@ -15,7 +17,9 @@ export type EnkiTableSlots = typeof __propDef.slots;
15
17
  import { SvelteComponentTyped } from "svelte";
16
18
  declare const __propDef: {
17
19
  props: {
18
- [x: string]: never;
20
+ size?: string | undefined;
21
+ hover?: string | undefined;
22
+ striped?: string | undefined;
19
23
  };
20
24
  events: {
21
25
  [evt: string]: CustomEvent<any>;
@@ -8,12 +8,14 @@
8
8
  font-family: $bodyFonts;
9
9
  }
10
10
 
11
- thead tr th {
11
+ .th-div {
12
12
  @extend %common-fonts;
13
13
  font-size: 17px;
14
14
  }
15
15
 
16
- tbody tr td {
16
+
17
+
18
+ .td-div {
17
19
  width: 12.5rem;
18
20
  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
19
21
  @extend %common-fonts;
@@ -5,17 +5,17 @@
5
5
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
6
6
  @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");
7
7
  @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");
8
- tbody tr td, thead tr th {
8
+ .td-div, .th-div {
9
9
  color: #152536;
10
10
  font-size: 16px;
11
11
  font-style: normal;
12
12
  font-weight: 700;
13
13
  font-family: Roboto;
14
14
  }
15
- thead tr th {
15
+ .th-div {
16
16
  font-size: 17px;
17
17
  }
18
- tbody tr td {
18
+ .td-div {
19
19
  width: 12.5rem;
20
20
  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
21
21
  font-weight: 400;
@@ -1,20 +1,28 @@
1
+ <script>
2
+ export let dataLabel = " ";
3
+ export let colspan = 1;
4
+ export let rowspan = 1 ;
5
+ export let textAlign =' ';
6
+ let tdStyles = ['td-div', `text-${textAlign}`]
7
+ </script>
8
+
9
+ <td data-label ={dataLabel} colspan={colspan} rowspan={rowspan} class={tdStyles.join(' ')} ><slot /></td>
10
+
1
11
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
2
12
  @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");
3
13
  @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");
4
- tbody tr td, thead tr th {
14
+ .td-div, .th-div {
5
15
  color: #152536;
6
16
  font-size: 16px;
7
17
  font-style: normal;
8
18
  font-weight: 700;
9
19
  font-family: Roboto;
10
20
  }
11
- thead tr th {
21
+ .th-div {
12
22
  font-size: 17px;
13
23
  }
14
- tbody tr td {
24
+ .td-div {
15
25
  width: 12.5rem;
16
26
  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
17
27
  font-weight: 400;
18
28
  }</style>
19
-
20
- <td><slot /></td>
@@ -2,7 +2,10 @@
2
2
  /** @typedef {typeof __propDef.events} TableCellEvents */
3
3
  /** @typedef {typeof __propDef.slots} TableCellSlots */
4
4
  export default class TableCell extends SvelteComponentTyped<{
5
- [x: string]: never;
5
+ colspan?: number | undefined;
6
+ rowspan?: number | undefined;
7
+ textAlign?: string | undefined;
8
+ dataLabel?: string | undefined;
6
9
  }, {
7
10
  [evt: string]: CustomEvent<any>;
8
11
  }, {
@@ -15,7 +18,10 @@ export type TableCellSlots = typeof __propDef.slots;
15
18
  import { SvelteComponentTyped } from "svelte";
16
19
  declare const __propDef: {
17
20
  props: {
18
- [x: string]: never;
21
+ colspan?: number | undefined;
22
+ rowspan?: number | undefined;
23
+ textAlign?: string | undefined;
24
+ dataLabel?: string | undefined;
19
25
  };
20
26
  events: {
21
27
  [evt: string]: CustomEvent<any>;
@@ -5,17 +5,17 @@
5
5
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
6
6
  @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");
7
7
  @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");
8
- tbody tr td, thead tr th {
8
+ .td-div, .th-div {
9
9
  color: #152536;
10
10
  font-size: 16px;
11
11
  font-style: normal;
12
12
  font-weight: 700;
13
13
  font-family: Roboto;
14
14
  }
15
- thead tr th {
15
+ .th-div {
16
16
  font-size: 17px;
17
17
  }
18
- tbody tr td {
18
+ .td-div {
19
19
  width: 12.5rem;
20
20
  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
21
21
  font-weight: 400;
@@ -1,19 +1,27 @@
1
+ <script>
2
+ export let colspan = 1;
3
+ export let rowspan = 1;
4
+ export let textAlign = ' ';
5
+ let tdStyles = ['th-div', `text-${textAlign}`];
6
+ </script>
7
+
8
+ <th colspan={colspan} rowspan={rowspan} class={tdStyles.join(' ')}><slot /></th>
9
+
1
10
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
2
11
  @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");
3
12
  @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");
4
- tbody tr td, thead tr th {
13
+ .td-div, .th-div {
5
14
  color: #152536;
6
15
  font-size: 16px;
7
16
  font-style: normal;
8
17
  font-weight: 700;
9
18
  font-family: Roboto;
10
19
  }
11
- thead tr th {
20
+ .th-div {
12
21
  font-size: 17px;
13
22
  }
14
- tbody tr td {
23
+ .td-div {
15
24
  width: 12.5rem;
16
25
  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
17
26
  font-weight: 400;
18
27
  }</style>
19
- <th><slot></slot></th>
@@ -2,7 +2,9 @@
2
2
  /** @typedef {typeof __propDef.events} TableHeadCellEvents */
3
3
  /** @typedef {typeof __propDef.slots} TableHeadCellSlots */
4
4
  export default class TableHeadCell extends SvelteComponentTyped<{
5
- [x: string]: never;
5
+ colspan?: number | undefined;
6
+ rowspan?: number | undefined;
7
+ textAlign?: string | undefined;
6
8
  }, {
7
9
  [evt: string]: CustomEvent<any>;
8
10
  }, {
@@ -15,7 +17,9 @@ export type TableHeadCellSlots = typeof __propDef.slots;
15
17
  import { SvelteComponentTyped } from "svelte";
16
18
  declare const __propDef: {
17
19
  props: {
18
- [x: string]: never;
20
+ colspan?: number | undefined;
21
+ rowspan?: number | undefined;
22
+ textAlign?: string | undefined;
19
23
  };
20
24
  events: {
21
25
  [evt: string]: CustomEvent<any>;
@@ -1,17 +1,17 @@
1
1
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
2
2
  @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");
3
3
  @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");
4
- tbody tr td, thead tr th {
4
+ .td-div, .th-div {
5
5
  color: #152536;
6
6
  font-size: 16px;
7
7
  font-style: normal;
8
8
  font-weight: 700;
9
9
  font-family: Roboto;
10
10
  }
11
- thead tr th {
11
+ .th-div {
12
12
  font-size: 17px;
13
13
  }
14
- tbody tr td {
14
+ .td-div {
15
15
  width: 12.5rem;
16
16
  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
17
17
  font-weight: 400;
package/index.d.ts CHANGED
@@ -34,5 +34,6 @@ import CardSubtitle from './components/EnkiCard/CardSubTitle.svelte';
34
34
  import CardText from './components/EnkiCard/CardText.svelte';
35
35
  import CardBody from './components/EnkiCard/CardBody.svelte';
36
36
  import CardFooter from './components/EnkiCard/CardFooter.svelte';
37
- export { Button, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, Switch, Checkbox, Breadcrumb, CardIcon, EnkiTable, TableBody, TableCell, TableRow, TableHead, TableHeadCell, EnkiCard, CardBody, CardTitle, CardSubtitle, CardText, CardFooter };
37
+ import CardLink from './components/EnkiCard/CardLink.svelte';
38
+ export { Button, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, Switch, Checkbox, Breadcrumb, CardIcon, EnkiTable, TableBody, TableCell, TableRow, TableHead, TableHeadCell, EnkiCard, CardBody, CardTitle, CardSubtitle, CardText, CardLink, CardFooter };
38
39
  export default Layout;
package/index.js CHANGED
@@ -35,5 +35,6 @@ import CardSubtitle from './components/EnkiCard/CardSubTitle.svelte';
35
35
  import CardText from './components/EnkiCard/CardText.svelte';
36
36
  import CardBody from './components/EnkiCard/CardBody.svelte';
37
37
  import CardFooter from './components/EnkiCard/CardFooter.svelte';
38
- export { Button, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, Switch, Checkbox, Breadcrumb, CardIcon, EnkiTable, TableBody, TableCell, TableRow, TableHead, TableHeadCell, EnkiCard, CardBody, CardTitle, CardSubtitle, CardText, CardFooter };
38
+ import CardLink from './components/EnkiCard/CardLink.svelte';
39
+ export { Button, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, Switch, Checkbox, Breadcrumb, CardIcon, EnkiTable, TableBody, TableCell, TableRow, TableHead, TableHeadCell, EnkiCard, CardBody, CardTitle, CardSubtitle, CardText, CardLink, CardFooter };
39
40
  export default Layout;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enki-tek/fms-web-components",
3
- "version": "0.0.18",
3
+ "version": "0.0.19",
4
4
  "devDependencies": {
5
5
  "@storybook/addon-essentials": "^7.6.14",
6
6
  "@storybook/addon-interactions": "^7.6.14",
@@ -77,6 +77,7 @@
77
77
  "./components/EnkiCard/Card.scss": "./components/EnkiCard/Card.scss",
78
78
  "./components/EnkiCard/CardBody.svelte": "./components/EnkiCard/CardBody.svelte",
79
79
  "./components/EnkiCard/CardFooter.svelte": "./components/EnkiCard/CardFooter.svelte",
80
+ "./components/EnkiCard/CardLink.svelte": "./components/EnkiCard/CardLink.svelte",
80
81
  "./components/EnkiCard/CardSubTitle.svelte": "./components/EnkiCard/CardSubTitle.svelte",
81
82
  "./components/EnkiCard/CardText.svelte": "./components/EnkiCard/CardText.svelte",
82
83
  "./components/EnkiCard/CardTitle.svelte": "./components/EnkiCard/CardTitle.svelte",