@juspay/svelte-ui-components 1.3.0 → 1.4.0
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/README.md +6 -7
- package/dist/Modal/Modal.svelte +4 -7
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -41,11 +41,11 @@ All of the components can be easily imported from the 'svelte-ui-components' pac
|
|
|
41
41
|
#### Example: Importing component from the package
|
|
42
42
|
|
|
43
43
|
```svelte
|
|
44
|
-
<script>
|
|
45
|
-
import { Button } from '@juspay/svelte-ui-components';
|
|
44
|
+
<script lang="ts">
|
|
45
|
+
import { Button, defaultButtonProperties } from '@juspay/svelte-ui-components';
|
|
46
46
|
</script>
|
|
47
47
|
|
|
48
|
-
<Button
|
|
48
|
+
<Button properties={{ ...defaultButtonProperties, text: 'Click' }} />
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
### Customizing the components
|
|
@@ -65,7 +65,7 @@ There are two ways to customize the component.
|
|
|
65
65
|
|
|
66
66
|
#### Example: Customizing the component
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
```svelte
|
|
69
69
|
<script lang="ts">
|
|
70
70
|
import {
|
|
71
71
|
Button,
|
|
@@ -83,7 +83,6 @@ There are two ways to customize the component.
|
|
|
83
83
|
}
|
|
84
84
|
</script>
|
|
85
85
|
|
|
86
|
-
```svelte
|
|
87
86
|
<div class="form">
|
|
88
87
|
<Button properties={buttonProperties} on:click={handleSubmitClick} />
|
|
89
88
|
</div>
|
|
@@ -92,10 +91,10 @@ There are two ways to customize the component.
|
|
|
92
91
|
.form {
|
|
93
92
|
--button-color: black;
|
|
94
93
|
--button-text-color: white;
|
|
95
|
-
|
|
94
|
+
/* Other styling values */
|
|
96
95
|
}
|
|
97
96
|
</style>
|
|
98
|
-
|
|
97
|
+
```
|
|
99
98
|
|
|
100
99
|
### Contributing
|
|
101
100
|
|
package/dist/Modal/Modal.svelte
CHANGED
|
@@ -102,16 +102,13 @@ onDestroy(() => {
|
|
|
102
102
|
bottom: 0;
|
|
103
103
|
left: 0;
|
|
104
104
|
right: 0;
|
|
105
|
-
width: 100vw;
|
|
106
|
-
height: 100vh;
|
|
105
|
+
width: var(--modal-width, 100vw);
|
|
106
|
+
height: var(--modal-height, 100vh);
|
|
107
107
|
display: flex;
|
|
108
108
|
flex-direction: column;
|
|
109
109
|
z-index: var(--modal-z-index, 15);
|
|
110
110
|
-webkit-tap-highlight-color: transparent;
|
|
111
|
-
margin
|
|
112
|
-
margin-bottom: var(--margin-bottom, 0px);
|
|
113
|
-
margin-left: var(--margin-left, 0px);
|
|
114
|
-
margin-right: var(--margin-right, 0px);
|
|
111
|
+
margin: var(--modal-margin);
|
|
115
112
|
}
|
|
116
113
|
|
|
117
114
|
.overlay-active {
|
|
@@ -125,7 +122,7 @@ onDestroy(() => {
|
|
|
125
122
|
|
|
126
123
|
.modal-content {
|
|
127
124
|
pointer-events: auto;
|
|
128
|
-
background-color: var(--content-background-color, #ffffff);
|
|
125
|
+
background-color: var(--modal-content-background-color, #ffffff);
|
|
129
126
|
cursor: auto;
|
|
130
127
|
display: flex;
|
|
131
128
|
flex-direction: column;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@juspay/svelte-ui-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "vite build && npm run package",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"svelte-check": "^3.6.0",
|
|
55
55
|
"tslib": "^2.6.2",
|
|
56
56
|
"typescript": "^5.2.2",
|
|
57
|
-
"vite": "^4.5.
|
|
57
|
+
"vite": "^4.5.2",
|
|
58
58
|
"vitest": "^0.34.6",
|
|
59
59
|
"type-decoder": "^1.2.0"
|
|
60
60
|
},
|