@enki-tek/fms-web-components 0.0.8 → 0.0.10
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/CardIcon/CardIcon.scss +2 -2
- package/components/CardIcon/CardIcon.svelte +14 -14
- package/components/CardIcon/CardIcon.svelte.d.ts +1 -1
- package/components/CheckBox/Checkbox.scss +18 -18
- package/components/CheckBox/Checkbox.stories.js +39 -40
- package/components/CheckBox/Checkbox.svelte +24 -20
- package/components/CheckBox/Checkbox.svelte.d.ts +4 -0
- package/components/ModalWindow/Modal.scss +8 -2
- package/components/ModalWindow/Modal.svelte +10 -3
- package/components/ModalWindow/Modal.svelte.d.ts +1 -0
- package/package.json +1 -1
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
font-size: 13px;
|
|
52
52
|
@extend %common-fontstyle;
|
|
53
53
|
}
|
|
54
|
-
:global(.card-body-modifier){
|
|
54
|
+
:global(.card-body-modifier) {
|
|
55
55
|
padding: 0 1rem;
|
|
56
56
|
}
|
|
57
57
|
%common-fontstyle {
|
|
@@ -93,6 +93,6 @@
|
|
|
93
93
|
justify-content: end !important;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
.
|
|
96
|
+
.left {
|
|
97
97
|
justify-content: start !important;
|
|
98
98
|
}
|
|
@@ -3,7 +3,7 @@ import { locationConfig, slotLocationConfig } from "./CardIconConfig";
|
|
|
3
3
|
export let title = "Card title";
|
|
4
4
|
export let name = "bell";
|
|
5
5
|
export let location = "bottom-right";
|
|
6
|
-
export let
|
|
6
|
+
export let subtitlePosition = "left";
|
|
7
7
|
export let cardbody = "";
|
|
8
8
|
export let cardsubtitle = "";
|
|
9
9
|
let locationStyle = [`custom-card-style`];
|
|
@@ -11,8 +11,8 @@ if (locationConfig.includes(location)) {
|
|
|
11
11
|
locationStyle.push(location);
|
|
12
12
|
}
|
|
13
13
|
let slotLocation = [`cardicon-content`];
|
|
14
|
-
if (slotLocationConfig.includes(
|
|
15
|
-
slotLocation.push(
|
|
14
|
+
if (slotLocationConfig.includes(subtitlePosition)) {
|
|
15
|
+
slotLocation.push(subtitlePosition);
|
|
16
16
|
}
|
|
17
17
|
</script>
|
|
18
18
|
|
|
@@ -23,17 +23,17 @@ if (slotLocationConfig.includes(slotPosition)) {
|
|
|
23
23
|
</div>
|
|
24
24
|
|
|
25
25
|
{#if $$slots.cardsubtitle || cardsubtitle}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
{
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
</
|
|
35
|
-
</div>
|
|
26
|
+
<div class={slotLocation.join(' ')}>
|
|
27
|
+
<slot name="cardsubtitle">
|
|
28
|
+
{#if cardsubtitle}
|
|
29
|
+
{cardsubtitle}
|
|
30
|
+
{:else}
|
|
31
|
+
<slot />
|
|
32
|
+
{/if}
|
|
33
|
+
</slot>
|
|
34
|
+
</div>
|
|
36
35
|
{/if}
|
|
36
|
+
|
|
37
37
|
{#if $$slots.cardbody || cardbody}
|
|
38
38
|
<CardBody class="card-body-modifier">
|
|
39
39
|
<div class="custom-body-slot">
|
|
@@ -125,7 +125,7 @@ if (slotLocationConfig.includes(slotPosition)) {
|
|
|
125
125
|
.right {
|
|
126
126
|
justify-content: end !important;
|
|
127
127
|
}
|
|
128
|
-
.
|
|
128
|
+
.left {
|
|
129
129
|
justify-content: start !important;
|
|
130
130
|
}
|
|
131
131
|
:global(.ebg-none) {
|
|
@@ -4,7 +4,7 @@ declare const __propDef: {
|
|
|
4
4
|
title?: string | undefined;
|
|
5
5
|
name?: string | undefined;
|
|
6
6
|
location?: string | undefined;
|
|
7
|
-
|
|
7
|
+
subtitlePosition?: string | undefined;
|
|
8
8
|
cardbody?: string | undefined;
|
|
9
9
|
cardsubtitle?: string | undefined;
|
|
10
10
|
};
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
@import '../variable.scss';
|
|
2
2
|
|
|
3
3
|
:global(.inp-checkbox .form-check-input:checked) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
background-color: $secondary;
|
|
5
|
+
border-color: $secondary;
|
|
6
|
+
border: 1.8px solid $secondary !important;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
:global(.inp-checkbox .form-check-input:focus) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
border-color: $secondary;
|
|
11
|
+
outline: 0;
|
|
12
|
+
box-shadow: none;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
:global(.inp-checkbox .form-check-input[type=checkbox]) {
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
:global(.inp-checkbox .form-check-input[type='checkbox']) {
|
|
16
|
+
border-radius: 3px;
|
|
17
|
+
border: 1.8px solid $gray-500;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
:global(.inp-checkbox .form-check-input:disabled:not(:checked)) {
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
background-color: $gray-300;
|
|
22
|
+
border-color: $gray-600;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
:global(.form-check-label) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
26
|
+
text-transform: capitalize;
|
|
27
|
+
font-family: $bodyFonts;
|
|
28
|
+
font-style: normal;
|
|
29
|
+
font-size: 16px;
|
|
30
|
+
font-weight: 400;
|
|
31
|
+
line-height: 28px;
|
|
32
|
+
}
|
|
@@ -1,51 +1,50 @@
|
|
|
1
1
|
import Checkbox from './Checkbox.svelte';
|
|
2
2
|
|
|
3
|
-
export default{
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
3
|
+
export default {
|
|
4
|
+
title: 'FMS/Checkbox',
|
|
5
|
+
component: Checkbox,
|
|
6
|
+
tags: ['autodocs'],
|
|
7
|
+
argTypes: {
|
|
8
|
+
label: { control: { type: 'text' } },
|
|
9
|
+
disable: { control: { type: 'text' } },
|
|
10
|
+
enable: { control: { type: 'text' } },
|
|
11
|
+
size: { control: { type: 'select' }, options: ['lg', 'md'] },
|
|
12
|
+
value: { control: { type: 'text' } }
|
|
13
|
+
}
|
|
14
14
|
};
|
|
15
15
|
|
|
16
|
-
|
|
17
16
|
export const Default = {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
17
|
+
args: {
|
|
18
|
+
label: 'clicked',
|
|
19
|
+
disable: 'false',
|
|
20
|
+
enable: 'false',
|
|
21
|
+
value: 'arun'
|
|
22
|
+
}
|
|
23
|
+
};
|
|
25
24
|
|
|
26
25
|
export const enabledCheckBox = {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
26
|
+
args: {
|
|
27
|
+
label: 'clicked',
|
|
28
|
+
disable: 'false',
|
|
29
|
+
enable: 'true',
|
|
30
|
+
value: 'arun'
|
|
31
|
+
}
|
|
32
|
+
};
|
|
34
33
|
|
|
35
34
|
export const enabledWithDisabledCheckBox = {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
35
|
+
args: {
|
|
36
|
+
label: 'clicked',
|
|
37
|
+
disable: 'true',
|
|
38
|
+
enable: 'true',
|
|
39
|
+
value: 'arun'
|
|
40
|
+
}
|
|
41
|
+
};
|
|
43
42
|
|
|
44
43
|
export const diabledButNotEnabledCheckBox = {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
44
|
+
args: {
|
|
45
|
+
label: 'clicked',
|
|
46
|
+
disable: 'true',
|
|
47
|
+
enable: 'false',
|
|
48
|
+
value: 'arun'
|
|
49
|
+
}
|
|
50
|
+
};
|
|
@@ -1,24 +1,28 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
|
|
2
|
+
import { Input } from 'sveltestrap';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<Input type="checkbox"
|
|
13
|
-
class='inp-checkbox'
|
|
14
|
-
bsSize={size}
|
|
15
|
-
label={label}
|
|
16
|
-
bind:value={value}
|
|
17
|
-
checked={enable === 'true'? true : enable ==='false'? false : false }
|
|
18
|
-
disabled={disable === 'true'? true : disable ==='false'? false : false}
|
|
19
|
-
/>
|
|
4
|
+
export let label = 'my';
|
|
5
|
+
export let value = 'name';
|
|
6
|
+
export let disable;
|
|
7
|
+
export let enable;
|
|
8
|
+
export let size = 'lg';
|
|
9
|
+
export let name = 'checkboxname';
|
|
10
|
+
export let valid;
|
|
11
|
+
</script>
|
|
20
12
|
|
|
21
|
-
|
|
13
|
+
<Input
|
|
14
|
+
type="checkbox"
|
|
15
|
+
class="inp-checkbox"
|
|
16
|
+
{name}
|
|
17
|
+
bsSize={size}
|
|
18
|
+
{label}
|
|
19
|
+
bind:value
|
|
20
|
+
valid={enable === 'true' ? true : enable === 'false' ? false : false}
|
|
21
|
+
checked={enable === 'true' ? true : enable === 'false' ? false : false}
|
|
22
|
+
disabled={disable === 'true' ? true : disable === 'false' ? false : false}
|
|
23
|
+
/>
|
|
24
|
+
|
|
25
|
+
<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
|
|
22
26
|
@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");
|
|
23
27
|
@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");
|
|
24
28
|
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
|
|
@@ -34,7 +38,7 @@
|
|
|
34
38
|
outline: 0;
|
|
35
39
|
box-shadow: none;
|
|
36
40
|
}
|
|
37
|
-
:global(.inp-checkbox .form-check-input[type=checkbox]) {
|
|
41
|
+
:global(.inp-checkbox .form-check-input[type="checkbox"]) {
|
|
38
42
|
border-radius: 3px;
|
|
39
43
|
border: 1.8px solid #adb5bd;
|
|
40
44
|
}
|
|
@@ -611,4 +615,4 @@
|
|
|
611
615
|
font-style: normal;
|
|
612
616
|
font-weight: 400;
|
|
613
617
|
line-height: normal;
|
|
614
|
-
}</style>
|
|
618
|
+
}</style>
|
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} CheckboxEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} CheckboxSlots */
|
|
4
4
|
export default class Checkbox extends SvelteComponentTyped<{
|
|
5
|
+
valid: any;
|
|
5
6
|
disable: any;
|
|
6
7
|
enable: any;
|
|
7
8
|
label?: string | undefined;
|
|
8
9
|
size?: string | undefined;
|
|
9
10
|
value?: string | undefined;
|
|
11
|
+
name?: string | undefined;
|
|
10
12
|
}, {
|
|
11
13
|
[evt: string]: CustomEvent<any>;
|
|
12
14
|
}, {}> {
|
|
@@ -17,11 +19,13 @@ export type CheckboxSlots = typeof __propDef.slots;
|
|
|
17
19
|
import { SvelteComponentTyped } from "svelte";
|
|
18
20
|
declare const __propDef: {
|
|
19
21
|
props: {
|
|
22
|
+
valid: any;
|
|
20
23
|
disable: any;
|
|
21
24
|
enable: any;
|
|
22
25
|
label?: string | undefined;
|
|
23
26
|
size?: string | undefined;
|
|
24
27
|
value?: string | undefined;
|
|
28
|
+
name?: string | undefined;
|
|
25
29
|
};
|
|
26
30
|
events: {
|
|
27
31
|
[evt: string]: CustomEvent<any>;
|
|
@@ -10,17 +10,23 @@
|
|
|
10
10
|
.header {
|
|
11
11
|
display: flex;
|
|
12
12
|
align-items: center;
|
|
13
|
+
justify-content: flex-end;
|
|
13
14
|
align-self: stretch;
|
|
14
|
-
gap:
|
|
15
|
+
gap: 7rem;
|
|
16
|
+
height: 19px;
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
.header .title {
|
|
18
20
|
font-family: $bodyFonts;
|
|
21
|
+
margin-right: 5rem;
|
|
19
22
|
}
|
|
20
23
|
|
|
21
24
|
.close-icon {
|
|
22
25
|
color: $black;
|
|
23
|
-
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 15%;
|
|
28
|
+
right: 1rem;
|
|
29
|
+
transform: translateY(-50%);
|
|
24
30
|
}
|
|
25
31
|
|
|
26
32
|
:global(.secondaryOutlineBtnMedium) {
|
|
@@ -7,10 +7,11 @@ export let closeBtn = "";
|
|
|
7
7
|
export let saveBtn = "";
|
|
8
8
|
export let open = false;
|
|
9
9
|
export let toggle = () => open = !open;
|
|
10
|
+
export let size = " ";
|
|
10
11
|
</script>
|
|
11
12
|
|
|
12
13
|
<div>
|
|
13
|
-
<Modal isOpen={open} backdrop={false}>
|
|
14
|
+
<Modal isOpen={open} backdrop={false} {size}>
|
|
14
15
|
<ModalHeader>
|
|
15
16
|
<div class="header">
|
|
16
17
|
<div class="title">
|
|
@@ -634,15 +635,21 @@ export let toggle = () => open = !open;
|
|
|
634
635
|
.header {
|
|
635
636
|
display: flex;
|
|
636
637
|
align-items: center;
|
|
638
|
+
justify-content: flex-end;
|
|
637
639
|
align-self: stretch;
|
|
638
|
-
gap:
|
|
640
|
+
gap: 7rem;
|
|
641
|
+
height: 19px;
|
|
639
642
|
}
|
|
640
643
|
.header .title {
|
|
641
644
|
font-family: Roboto;
|
|
645
|
+
margin-right: 5rem;
|
|
642
646
|
}
|
|
643
647
|
.close-icon {
|
|
644
648
|
color: #000000;
|
|
645
|
-
|
|
649
|
+
position: absolute;
|
|
650
|
+
top: 15%;
|
|
651
|
+
right: 1rem;
|
|
652
|
+
transform: translateY(-50%);
|
|
646
653
|
}
|
|
647
654
|
:global(.secondaryOutlineBtnMedium) {
|
|
648
655
|
font-weight: 600;
|