Skip to content

Commit a109f88

Browse files
Merge pull request #7 from homescriptone/develop
Merge develop into master
2 parents f506ae1 + 170656a commit a109f88

File tree

5 files changed

+51
-17
lines changed

5 files changed

+51
-17
lines changed

README.md

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Multi Step Form help to wrap form elements passing down styles to the component
55

66
### Demo
77
<p align="center">
8-
<img width="570" src ="./screen/form-demo.gif">
8+
<img width="570" src ="./screen/form-demo.png">
99
</p>
1010

1111

@@ -31,12 +31,20 @@ First you need to set up the form `stepsDescription`, `formSubtitle`, `formTitle
3131
formMethodType : 'POST',
3232
prevMessageText : 'Previous',
3333
nextMessageText : 'Next',
34-
formActionURL:'/',
34+
formActionURL:'/',
35+
formID : 's-multistep-form',
36+
displayIndex : true,
37+
svgCircleColor : "#48DB71",
38+
selectCircleColor : "red",
39+
selectboxShadowCircleColor : "#48DB71",
40+
unselectboxShadowCircleColor : "#48DB71",
41+
indexblanckColor : 'black',
42+
indexColor : 'black',
3543
stepsDescription: [
3644
{ title: "STEP 1", subtitle: "All the details to perform on this step" },
3745
{ title: "STEP 2", subtitle: "All the details to perform on this step" }
3846
]
39-
};
47+
}
4048
```
4149

4250
After that you only need to call `Form` and `Step` component in the following way
@@ -49,20 +57,30 @@ After that you only need to call `Form` and `Step` component in the following wa
4957
</Form>
5058
```
5159

60+
You can customize the form using CSS as you want it. :)
61+
5262
## Submit form data
5363

5464
```html
5565
<script>
5666
import axios from "axios";
5767
import { Form, Step } from "svelte-advanced-multistep-form";
5868
59-
let multiStepOptions = {
69+
llet multiStepOptions = {
6070
formTitle : 'Hello world',
6171
formSubtitle : 'Welcome to our world',
6272
formMethodType : 'POST',
6373
prevMessageText : 'Previous',
6474
nextMessageText : 'Next',
6575
formActionURL:'/',
76+
formID : 's-multistep-form',
77+
displayIndex : true,
78+
svgCircleColor : "#48DB71",
79+
selectCircleColor : "red",
80+
selectboxShadowCircleColor : "#48DB71",
81+
unselectboxShadowCircleColor : "#48DB71",
82+
indexblanckColor : 'black',
83+
indexColor : 'black',
6684
stepsDescription: [
6785
{ title: "STEP 1", subtitle: "All the details to perform on this step" },
6886
{ title: "STEP 2", subtitle: "All the details to perform on this step" }

package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"main": "public/build/bundle.js",
44
"module": "public/build/bundle.mjs",
55
"svelte": "src/index.js",
6-
"version": "1.0.2",
6+
"version": "1.0.3",
77
"scripts": {
88
"build": "rollup -c",
99
"dev": "rollup -c -w",
@@ -24,12 +24,12 @@
2424
"svelte": "^3.23.0",
2525
"svelte-jester": "^1.1.5"
2626
},
27-
"homepage": "https://github.com/homescriptone/svelte-multistep-form",
27+
"homepage": "https://github.com/homescriptone/svelte-advanced-multistep-form",
2828
"repository": {
2929
"type": "git",
30-
"url": "https://github.com/homescriptone/svelte-multistep-form"
30+
"url": "https://github.com/homescriptone/svelte-advanced-multistep-form"
3131
},
3232
"bugs": {
33-
"url": "https://github.com/homescriptone/svelte-multistep-form/issues"
33+
"url": "https://github.com/homescriptone/svelte-advanced-multistep-form/issues"
3434
}
3535
}

screen/form-demo.gif

-5.08 MB
Binary file not shown.

screen/form-demo.png

69.6 KB
Loading

src/MasterForm.svelte

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,19 @@
1717
formMethodType : 'POST',
1818
prevMessageText : 'Previous',
1919
nextMessageText : 'Next',
20-
formActionURL:'/'
20+
formActionURL:'/',
21+
formID : 's-multistep-form',
22+
displayIndex : true,
23+
svgCircleColor : "#48DB71",
24+
selectCircleColor : "red",
25+
selectboxShadowCircleColor : "#48DB71",
26+
unselectboxShadowCircleColor : "#48DB71",
27+
indexblanckColor : 'black',
28+
indexColor : 'black',
29+
stepsDescription: [
30+
{ title: "STEP 1", subtitle: "All the details to perform on this step" },
31+
{ title: "STEP 2", subtitle: "All the details to perform on this step" }
32+
]
2133
}
2234
2335
multiStepOptions = Object.assign({}, defaultStepOptions, multiStepOptions)
@@ -190,7 +202,7 @@
190202
<div id="multistep-error-messages" />
191203
<h1 class="multistep-form-title">{multiStepOptions.formTitle}</h1>
192204
<h5 class="multistep-form-subtitle">{multiStepOptions.formSubtitle}</h5>
193-
<form class="multistep-form" method="{multiStepOptions.formMethodType}" action="{multiStepOptions.formActionURL}">
205+
<form class="multistep-form" id="{multiStepOptions.formID}" method="{multiStepOptions.formMethodType}" action="{multiStepOptions.formActionURL}">
194206
<div class="multistep-left-sidebar">
195207
{#each multiStepOptions.stepsDescription as step}
196208
<div class="multistep-title-side">
@@ -205,18 +217,22 @@
205217
<span class="dot" />
206218
</div>
207219
{#if $currentStep === index}
208-
<div class="separator-check-current">
209-
<div class="separator-check-number">{index + 1}</div>
220+
<div class="separator-check-current" style="background: {multiStepOptions.selectCircleColor}; box-shadow: 0px 1px 8px {multiStepOptions.selectboxShadowCircleColor}">
221+
{#if multiStepOptions.displayIndex }
222+
<div class="separator-check-number" style="color: {multiStepOptions.indexColor}">{index + 1}</div>
223+
{/if}
210224
</div>
211225
{:else if $currentStep > index}
212226
<div class="separator-check">
213-
<svg viewBox="0 0 32 32" style="fill:#48DB71">
214-
<path d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z" />
215-
</svg>
227+
<svg viewBox="0 0 32 32" style="fill: {multiStepOptions.svgCircleColor}">
228+
<path d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z" />
229+
</svg>
216230
</div>
217231
{:else if $currentStep < index}
218-
<div class="separator-check-pending">
219-
<div class="separator-check-number-blank">{index + 1}</div>
232+
<div class="separator-check-pending" style=" box-shadow: 0px 1px 8px {multiStepOptions.unselectboxShadowCircleColor}">
233+
{#if multiStepOptions.displayIndex }
234+
<div class="separator-check-number-blank" style="color: {multiStepOptions.indexblanckColor}">{index + 1}</div>
235+
{/if}
220236
</div>
221237
{/if}
222238
{/each}

0 commit comments

Comments
 (0)