@enki-tek/fms-web-components 0.0.4 → 0.0.5
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.
- package/components/Accordion/Accordion.stories.d.ts +16 -6
- package/components/Accordion/Accordion.stories.js +5 -7
- package/components/Badge/Badge.stories.d.ts +1 -0
- package/components/Badge/Badge.stories.js +2 -1
- package/components/Button/Button.scss +8 -1
- package/components/Button/Button.svelte +9 -3
- package/components/Button/Button.svelte.d.ts +4 -0
- package/components/Card/Card.stories.d.ts +1 -0
- package/components/Card/Card.stories.js +1 -0
- package/components/CheckBox/Checkbox.svelte.d.ts +2 -2
- package/components/ModalWindow/Modal.stories.d.ts +3 -0
- package/components/ModalWindow/Modal.stories.js +3 -0
- package/components/ModalWindow/Modal.svelte +11 -3
- package/components/ModalWindow/Modal.svelte.d.ts +3 -0
- package/components/Sidebar/Sidebar.scss +22 -19
- package/components/Sidebar/Sidebar.svelte +19 -20
- package/components/Table/Table.stories.d.ts +1 -0
- package/components/Table/Table.stories.js +1 -0
- package/components/textField/TextField.svelte.d.ts +2 -2
- package/package.json +1 -1
@@ -4,17 +4,27 @@ declare namespace _default {
|
|
4
4
|
export const tags: string[];
|
5
5
|
export namespace argTypes {
|
6
6
|
namespace stayOpen {
|
7
|
-
|
7
|
+
namespace control {
|
8
|
+
const type: string;
|
9
|
+
}
|
8
10
|
}
|
9
11
|
namespace items {
|
10
|
-
|
12
|
+
export namespace control_1 {
|
13
|
+
const type_1: string;
|
14
|
+
export { type_1 as type };
|
15
|
+
}
|
11
16
|
export { control_1 as control };
|
12
17
|
}
|
13
18
|
}
|
14
19
|
}
|
15
20
|
export default _default;
|
16
|
-
export
|
17
|
-
|
18
|
-
|
19
|
-
|
21
|
+
export namespace Default {
|
22
|
+
namespace args {
|
23
|
+
const items_1: {
|
24
|
+
header: string;
|
25
|
+
content: string;
|
26
|
+
}[];
|
27
|
+
export { items_1 as items };
|
28
|
+
}
|
29
|
+
}
|
20
30
|
import Accordion from "./Accordion.svelte";
|
@@ -5,17 +5,15 @@ export default {
|
|
5
5
|
component: Accordion,
|
6
6
|
tags: ['autodocs'],
|
7
7
|
argTypes: {
|
8
|
-
stayOpen: { control: 'boolean' },
|
9
|
-
items: { control: '
|
8
|
+
stayOpen: { control: {type:'boolean' } },
|
9
|
+
items: { control: { type: 'array' } },
|
10
10
|
}
|
11
11
|
};
|
12
12
|
|
13
13
|
|
14
14
|
// story with customized items
|
15
|
-
export const Default =
|
16
|
-
|
17
|
-
props: {
|
18
|
-
...args,
|
15
|
+
export const Default ={
|
16
|
+
args:{
|
19
17
|
items: [
|
20
18
|
{
|
21
19
|
header: 'Accordion Item #1',
|
@@ -27,4 +25,4 @@ export const Default = (args) => ({
|
|
27
25
|
}
|
28
26
|
]
|
29
27
|
}
|
30
|
-
}
|
28
|
+
}
|
@@ -44,6 +44,13 @@
|
|
44
44
|
}
|
45
45
|
}
|
46
46
|
|
47
|
+
.disabled:disabled {
|
48
|
+
|
49
|
+
opacity: 0.5;
|
50
|
+
cursor: auto;
|
51
|
+
|
52
|
+
}
|
53
|
+
|
47
54
|
//large button
|
48
55
|
.ebtn-large {
|
49
56
|
height: $large-height;
|
@@ -674,7 +681,7 @@
|
|
674
681
|
}
|
675
682
|
|
676
683
|
.eoutline-successDark {
|
677
|
-
outline: 1px solid $success-dark;
|
684
|
+
outline: 1px solid $success-dark ;
|
678
685
|
}
|
679
686
|
|
680
687
|
.eoutline-successLight {
|
@@ -4,12 +4,14 @@
|
|
4
4
|
export let label = 'Button';
|
5
5
|
export let config = '';
|
6
6
|
export let icon = { state: false, name: 'person', position: 'right' };
|
7
|
-
export let shade = '
|
7
|
+
export let shade = '';
|
8
8
|
export let outlineShade = '';
|
9
|
+
export let size = '';
|
10
|
+
export let disabled =false;
|
9
11
|
|
10
12
|
let buttonStyles = [];
|
11
13
|
if (buttonConfig.hasOwnProperty(config)) {
|
12
|
-
buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`];
|
14
|
+
buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`, `ebtn-${size}`, `disabled`];
|
13
15
|
}
|
14
16
|
|
15
17
|
// icon button
|
@@ -25,7 +27,7 @@
|
|
25
27
|
console.log(buttonStyles);
|
26
28
|
</script>
|
27
29
|
|
28
|
-
<button {type} class={buttonStyles.join(' ')} on:click on:focus on:blur>
|
30
|
+
<button {type} class={buttonStyles.join(' ')} on:click on:focus on:blur {disabled} >
|
29
31
|
<slot>
|
30
32
|
{#if label}
|
31
33
|
{label}
|
@@ -80,6 +82,10 @@
|
|
80
82
|
.ebtn-medium i {
|
81
83
|
font-size: 16px;
|
82
84
|
}
|
85
|
+
.disabled:disabled {
|
86
|
+
opacity: 0.5;
|
87
|
+
cursor: auto;
|
88
|
+
}
|
83
89
|
.ebtn-large {
|
84
90
|
height: 52px;
|
85
91
|
display: flex;
|
@@ -2,6 +2,7 @@
|
|
2
2
|
/** @typedef {typeof __propDef.events} ButtonEvents */
|
3
3
|
/** @typedef {typeof __propDef.slots} ButtonSlots */
|
4
4
|
export default class Button extends SvelteComponentTyped<{
|
5
|
+
disabled?: boolean | undefined;
|
5
6
|
type?: string | undefined;
|
6
7
|
label?: string | undefined;
|
7
8
|
config?: string | undefined;
|
@@ -12,6 +13,7 @@ export default class Button extends SvelteComponentTyped<{
|
|
12
13
|
} | undefined;
|
13
14
|
shade?: string | undefined;
|
14
15
|
outlineShade?: string | undefined;
|
16
|
+
size?: string | undefined;
|
15
17
|
}, {
|
16
18
|
click: MouseEvent;
|
17
19
|
focus: FocusEvent;
|
@@ -28,6 +30,7 @@ export type ButtonSlots = typeof __propDef.slots;
|
|
28
30
|
import { SvelteComponentTyped } from "svelte";
|
29
31
|
declare const __propDef: {
|
30
32
|
props: {
|
33
|
+
disabled?: boolean | undefined;
|
31
34
|
type?: string | undefined;
|
32
35
|
label?: string | undefined;
|
33
36
|
config?: string | undefined;
|
@@ -38,6 +41,7 @@ declare const __propDef: {
|
|
38
41
|
} | undefined;
|
39
42
|
shade?: string | undefined;
|
40
43
|
outlineShade?: string | undefined;
|
44
|
+
size?: string | undefined;
|
41
45
|
};
|
42
46
|
events: {
|
43
47
|
click: MouseEvent;
|
@@ -5,8 +5,8 @@ export default class Checkbox extends SvelteComponentTyped<{
|
|
5
5
|
disable: any;
|
6
6
|
enable: any;
|
7
7
|
label?: string | undefined;
|
8
|
-
value?: string | undefined;
|
9
8
|
size?: string | undefined;
|
9
|
+
value?: string | undefined;
|
10
10
|
}, {
|
11
11
|
[evt: string]: CustomEvent<any>;
|
12
12
|
}, {}> {
|
@@ -20,8 +20,8 @@ declare const __propDef: {
|
|
20
20
|
disable: any;
|
21
21
|
enable: any;
|
22
22
|
label?: string | undefined;
|
23
|
-
value?: string | undefined;
|
24
23
|
size?: string | undefined;
|
24
|
+
value?: string | undefined;
|
25
25
|
};
|
26
26
|
events: {
|
27
27
|
[evt: string]: CustomEvent<any>;
|
@@ -1,6 +1,7 @@
|
|
1
1
|
declare namespace _default {
|
2
2
|
export const title: string;
|
3
3
|
export { Modal as component };
|
4
|
+
export const tags: string[];
|
4
5
|
export namespace argTypes {
|
5
6
|
namespace content {
|
6
7
|
const control: string;
|
@@ -22,6 +23,8 @@ export namespace Default {
|
|
22
23
|
export { content_1 as content };
|
23
24
|
const header_1: string;
|
24
25
|
export { header_1 as header };
|
26
|
+
export const closeBtn: string;
|
27
|
+
export const saveBtn: string;
|
25
28
|
const open_1: boolean;
|
26
29
|
export { open_1 as open };
|
27
30
|
}
|
@@ -3,6 +3,7 @@ import Modal from './Modal.svelte';
|
|
3
3
|
export default {
|
4
4
|
title: 'FMS/Modal',
|
5
5
|
component: Modal,
|
6
|
+
tags: ['autodocs'],
|
6
7
|
argTypes: {
|
7
8
|
content: { control: 'text' },
|
8
9
|
header: { control: 'text' },
|
@@ -14,6 +15,8 @@ export const Default = {
|
|
14
15
|
args: {
|
15
16
|
content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
16
17
|
header: 'Modal Title',
|
18
|
+
closeBtn:"Close",
|
19
|
+
saveBtn:"Save Changes",
|
17
20
|
open: true,
|
18
21
|
}
|
19
22
|
};
|
@@ -3,7 +3,9 @@ import { Modal, ModalBody, ModalFooter, ModalHeader } from "sveltestrap";
|
|
3
3
|
import Icon from "../Icon/Icon.svelte";
|
4
4
|
export let content = "";
|
5
5
|
export let header = "";
|
6
|
-
export let
|
6
|
+
export let closeBtn = "";
|
7
|
+
export let saveBtn = "";
|
8
|
+
export let open = false;
|
7
9
|
export let toggle = () => open = !open;
|
8
10
|
</script>
|
9
11
|
|
@@ -38,8 +40,14 @@ export let toggle = () => open = !open;
|
|
38
40
|
</div>
|
39
41
|
</ModalBody>
|
40
42
|
<ModalFooter>
|
41
|
-
<
|
42
|
-
|
43
|
+
<slot name="footer">
|
44
|
+
{#if closeBtn || saveBtn}
|
45
|
+
<Button config="secondaryOutlineBtnMedium" on:click={toggle}>{closeBtn}</Button>
|
46
|
+
<Button config="successBtnMedium" on:click={toggle}>{saveBtn}</Button>
|
47
|
+
{:else}
|
48
|
+
<slot />
|
49
|
+
{/if}
|
50
|
+
</slot>
|
43
51
|
</ModalFooter>
|
44
52
|
</Modal>
|
45
53
|
</div>
|
@@ -3,6 +3,8 @@ declare const __propDef: {
|
|
3
3
|
props: {
|
4
4
|
content?: string | undefined;
|
5
5
|
header?: string | undefined;
|
6
|
+
closeBtn?: string | undefined;
|
7
|
+
saveBtn?: string | undefined;
|
6
8
|
open?: boolean | undefined;
|
7
9
|
toggle?: (() => boolean) | undefined;
|
8
10
|
};
|
@@ -13,6 +15,7 @@ declare const __propDef: {
|
|
13
15
|
header: {};
|
14
16
|
content: {};
|
15
17
|
default: {};
|
18
|
+
footer: {};
|
16
19
|
};
|
17
20
|
};
|
18
21
|
export type ModalProps = typeof __propDef.props;
|
@@ -5,6 +5,10 @@
|
|
5
5
|
color: $white;
|
6
6
|
}
|
7
7
|
|
8
|
+
%commom-background-line {
|
9
|
+
background: $white;
|
10
|
+
}
|
11
|
+
|
8
12
|
%sidebar-styles {
|
9
13
|
background: $primary-dark;
|
10
14
|
}
|
@@ -14,8 +18,15 @@
|
|
14
18
|
background: $blue-700;
|
15
19
|
}
|
16
20
|
|
21
|
+
%common-li-styles {
|
22
|
+
display: flex;
|
23
|
+
padding: 15px 32px;
|
24
|
+
align-items: center;
|
25
|
+
gap: 8px;
|
26
|
+
}
|
27
|
+
|
17
28
|
.row {
|
18
|
-
--bs-gutter-x:
|
29
|
+
--bs-gutter-x: 0rem;
|
19
30
|
}
|
20
31
|
|
21
32
|
.icon-sidebar {
|
@@ -30,24 +41,22 @@
|
|
30
41
|
.line {
|
31
42
|
width: 88px;
|
32
43
|
height: 1px;
|
33
|
-
background
|
34
|
-
margin-left: -7px;
|
44
|
+
@extend %commom-background-line;
|
35
45
|
}
|
36
46
|
|
37
47
|
.icon-btn {
|
38
|
-
padding: 20px;
|
48
|
+
padding: 20px 27px;
|
39
49
|
}
|
40
50
|
|
41
51
|
.icon-sidebar-content .toggle-button {
|
42
52
|
@extend %common-styles;
|
43
53
|
}
|
44
54
|
|
45
|
-
.icon-sidebar-content ul {
|
46
|
-
display: flex;
|
47
|
-
align-items: center;
|
48
|
-
padding: 20px;
|
55
|
+
.icon-sidebar-content ul li {
|
49
56
|
@extend %common-styles;
|
50
|
-
|
57
|
+
@extend %common-li-styles;
|
58
|
+
padding: 16px 32px;
|
59
|
+
|
51
60
|
}
|
52
61
|
|
53
62
|
.icon-sidebar-content ul .active {
|
@@ -71,11 +80,7 @@ ul {
|
|
71
80
|
}
|
72
81
|
|
73
82
|
.nav-item {
|
74
|
-
|
75
|
-
width: 274px;
|
76
|
-
padding: 15px 32px;
|
77
|
-
align-items: center;
|
78
|
-
gap: 8px;
|
83
|
+
@extend %common-li-styles;
|
79
84
|
}
|
80
85
|
|
81
86
|
.nav-item .item-name {
|
@@ -93,7 +98,7 @@ ul {
|
|
93
98
|
}
|
94
99
|
|
95
100
|
.material-icons {
|
96
|
-
font-size:
|
101
|
+
font-size: 16px;
|
97
102
|
color: $white;
|
98
103
|
}
|
99
104
|
|
@@ -109,7 +114,5 @@ ul {
|
|
109
114
|
.line-open {
|
110
115
|
width: 274px;
|
111
116
|
height: 1px;
|
112
|
-
@extend %
|
113
|
-
}
|
114
|
-
|
115
|
-
|
117
|
+
@extend %commom-background-line;
|
118
|
+
}
|
@@ -54,8 +54,10 @@
|
|
54
54
|
data-bs-dismiss="offcanvas"
|
55
55
|
aria-label="Close"
|
56
56
|
on:click={() => (isOpen = false)}
|
57
|
-
>
|
58
|
-
|
57
|
+
>
|
58
|
+
<span class="material-icons">
|
59
|
+
<Icon iconName='chevron-double-left'/>
|
60
|
+
</span>
|
59
61
|
</button>
|
60
62
|
</div>
|
61
63
|
<div class="line-open" />
|
@@ -84,9 +86,12 @@
|
|
84
86
|
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
|
85
87
|
@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");
|
86
88
|
@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");
|
87
|
-
|
89
|
+
ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
|
88
90
|
color: #ffffff;
|
89
91
|
}
|
92
|
+
.line-open, .line {
|
93
|
+
background: #ffffff;
|
94
|
+
}
|
90
95
|
:global(.offcanvas-body) {
|
91
96
|
background: #007FD8;
|
92
97
|
}
|
@@ -94,8 +99,14 @@
|
|
94
99
|
border-left: 2px solid #ffffff;
|
95
100
|
background: #084298;
|
96
101
|
}
|
102
|
+
.nav-item, .icon-sidebar-content ul li {
|
103
|
+
display: flex;
|
104
|
+
padding: 15px 32px;
|
105
|
+
align-items: center;
|
106
|
+
gap: 8px;
|
107
|
+
}
|
97
108
|
.row {
|
98
|
-
--bs-gutter-x:
|
109
|
+
--bs-gutter-x: 0rem;
|
99
110
|
}
|
100
111
|
.icon-sidebar {
|
101
112
|
position: fixed;
|
@@ -108,17 +119,12 @@
|
|
108
119
|
.line {
|
109
120
|
width: 88px;
|
110
121
|
height: 1px;
|
111
|
-
background: #ffffff;
|
112
|
-
margin-left: -7px;
|
113
122
|
}
|
114
123
|
.icon-btn {
|
115
|
-
padding: 20px;
|
124
|
+
padding: 20px 27px;
|
116
125
|
}
|
117
|
-
.icon-sidebar-content ul {
|
118
|
-
|
119
|
-
align-items: center;
|
120
|
-
padding: 20px;
|
121
|
-
gap: 32px;
|
126
|
+
.icon-sidebar-content ul li {
|
127
|
+
padding: 16px 32px;
|
122
128
|
}
|
123
129
|
:global(.offcanvas-body) {
|
124
130
|
padding: 0rem 0rem;
|
@@ -127,13 +133,6 @@
|
|
127
133
|
color: #ffffff;
|
128
134
|
font-size: 28px;
|
129
135
|
}
|
130
|
-
.nav-item {
|
131
|
-
display: flex;
|
132
|
-
width: 274px;
|
133
|
-
padding: 15px 32px;
|
134
|
-
align-items: center;
|
135
|
-
gap: 8px;
|
136
|
-
}
|
137
136
|
.nav-item .item-name {
|
138
137
|
line-height: 22px;
|
139
138
|
}
|
@@ -143,7 +142,7 @@
|
|
143
142
|
cursor: pointer;
|
144
143
|
}
|
145
144
|
.material-icons {
|
146
|
-
font-size:
|
145
|
+
font-size: 16px;
|
147
146
|
color: #ffffff;
|
148
147
|
}
|
149
148
|
:global(.offcanvas.offcanvas-start) {
|
@@ -2,11 +2,11 @@
|
|
2
2
|
/** @typedef {typeof __propDef.events} TextFieldEvents */
|
3
3
|
/** @typedef {typeof __propDef.slots} TextFieldSlots */
|
4
4
|
export default class TextField extends SvelteComponentTyped<{
|
5
|
+
disabled?: boolean | undefined;
|
5
6
|
invalid?: boolean | undefined;
|
6
7
|
type?: string | undefined;
|
7
8
|
placeholder?: string | undefined;
|
8
9
|
value?: string | undefined;
|
9
|
-
disabled?: boolean | undefined;
|
10
10
|
valid?: boolean | undefined;
|
11
11
|
}, {
|
12
12
|
[evt: string]: CustomEvent<any>;
|
@@ -18,11 +18,11 @@ export type TextFieldSlots = typeof __propDef.slots;
|
|
18
18
|
import { SvelteComponentTyped } from "svelte";
|
19
19
|
declare const __propDef: {
|
20
20
|
props: {
|
21
|
+
disabled?: boolean | undefined;
|
21
22
|
invalid?: boolean | undefined;
|
22
23
|
type?: string | undefined;
|
23
24
|
placeholder?: string | undefined;
|
24
25
|
value?: string | undefined;
|
25
|
-
disabled?: boolean | undefined;
|
26
26
|
valid?: boolean | undefined;
|
27
27
|
};
|
28
28
|
events: {
|