Merge pull request #7 from homescriptone/develop

Merge develop into master

Author: manutheblacker

README.md

@@ -5,7 +5,7 @@ Multi Step Form help to wrap form elements passing down styles to the component
 
 ### Demo
 <p align="center">
- <img width="570" src ="./screen/form-demo.gif">
+ <img width="570" src ="./screen/form-demo.png">
 </p>
 
 
@@ -31,12 +31,20 @@ First you need to set up the form `stepsDescription`, `formSubtitle`, `formTitle
  formMethodType : 'POST',
  prevMessageText : 'Previous',
  nextMessageText : 'Next',
- formActionURL:'/',
+ formActionURL:'/',
+ formID : 's-multistep-form',
+ displayIndex : true,
+ svgCircleColor : "#48DB71",
+ selectCircleColor : "red",
+ selectboxShadowCircleColor : "#48DB71",
+ unselectboxShadowCircleColor : "#48DB71",
+ indexblanckColor : 'black',
+ indexColor : 'black',
  stepsDescription: [
  { title: "STEP 1", subtitle: "All the details to perform on this step" },
  { title: "STEP 2", subtitle: "All the details to perform on this step" }
  ]
- };
+ }
 ```
 
 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
 </Form>
 ```
 
+You can customize the form using CSS as you want it. :) 
+
 ## Submit form data
 
 ```html
 <script> 
 import axios from "axios";
 import { Form, Step } from "svelte-advanced-multistep-form";
 
-let multiStepOptions = {
+llet multiStepOptions = {
  formTitle : 'Hello world',
  formSubtitle : 'Welcome to our world',
  formMethodType : 'POST',
  prevMessageText : 'Previous',
  nextMessageText : 'Next',
  formActionURL:'/',
+ formID : 's-multistep-form',
+ displayIndex : true,
+ svgCircleColor : "#48DB71",
+ selectCircleColor : "red",
+ selectboxShadowCircleColor : "#48DB71",
+ unselectboxShadowCircleColor : "#48DB71",
+ indexblanckColor : 'black',
+ indexColor : 'black',
  stepsDescription: [
  { title: "STEP 1", subtitle: "All the details to perform on this step" },
  { title: "STEP 2", subtitle: "All the details to perform on this step" }

package.json

@@ -3,7 +3,7 @@
  "main": "public/build/bundle.js",
  "module": "public/build/bundle.mjs",
  "svelte": "src/index.js",
- "version": "1.0.2",
+ "version": "1.0.3",
  "scripts": {
  "build": "rollup -c",
  "dev": "rollup -c -w",
@@ -24,12 +24,12 @@
  "svelte": "^3.23.0",
  "svelte-jester": "^1.1.5"
  },
- "homepage": "https://github.com/homescriptone/svelte-multistep-form",
+ "homepage": "https://github.com/homescriptone/svelte-advanced-multistep-form",
  "repository": {
  "type": "git",
- "url": "https://github.com/homescriptone/svelte-multistep-form"
+ "url": "https://github.com/homescriptone/svelte-advanced-multistep-form"
  },
  "bugs": {
- "url": "https://github.com/homescriptone/svelte-multistep-form/issues"
+ "url": "https://github.com/homescriptone/svelte-advanced-multistep-form/issues"
  }
 }

screen/form-demo.gif

@@ -17,7 +17,19 @@
  formMethodType : 'POST',
  prevMessageText : 'Previous',
  nextMessageText : 'Next',
- formActionURL:'/'
+ formActionURL:'/',
+ formID : 's-multistep-form',
+ displayIndex : true,
+ svgCircleColor : "#48DB71",
+ selectCircleColor : "red",
+ selectboxShadowCircleColor : "#48DB71",
+ unselectboxShadowCircleColor : "#48DB71",
+ indexblanckColor : 'black',
+ indexColor : 'black',
+ stepsDescription: [
+ { title: "STEP 1", subtitle: "All the details to perform on this step" },
+ { title: "STEP 2", subtitle: "All the details to perform on this step" }
+ ]
  }
 
  multiStepOptions = Object.assign({}, defaultStepOptions, multiStepOptions)
@@ -190,7 +202,7 @@
  <div id="multistep-error-messages" />
  <h1 class="multistep-form-title">{multiStepOptions.formTitle}</h1>
  <h5 class="multistep-form-subtitle">{multiStepOptions.formSubtitle}</h5>
- <form class="multistep-form" method="{multiStepOptions.formMethodType}" action="{multiStepOptions.formActionURL}">
+ <form class="multistep-form" id="{multiStepOptions.formID}" method="{multiStepOptions.formMethodType}" action="{multiStepOptions.formActionURL}">
  <div class="multistep-left-sidebar">
  {#each multiStepOptions.stepsDescription as step}
  <div class="multistep-title-side">
@@ -205,18 +217,22 @@
  <span class="dot" />
  </div>
  {#if $currentStep === index}
- <div class="separator-check-current">
- <div class="separator-check-number">{index + 1}</div>
+ <div class="separator-check-current" style="background: {multiStepOptions.selectCircleColor}; box-shadow: 0px 1px 8px {multiStepOptions.selectboxShadowCircleColor}">
+ {#if multiStepOptions.displayIndex }
+ <div class="separator-check-number" style="color: {multiStepOptions.indexColor}">{index + 1}</div>
+ {/if}
  </div>
  {:else if $currentStep > index}
  <div class="separator-check">
- <svg viewBox="0 0 32 32" style="fill:#48DB71">
- <path d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z" />
- </svg>
+  <svg viewBox="0 0 32 32" style="fill: {multiStepOptions.svgCircleColor}">
+  <path d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z" />
+  </svg>
  </div>
  {:else if $currentStep < index}
- <div class="separator-check-pending">
- <div class="separator-check-number-blank">{index + 1}</div>
+ <div class="separator-check-pending" style=" box-shadow: 0px 1px 8px {multiStepOptions.unselectboxShadowCircleColor}">
+ {#if multiStepOptions.displayIndex }
+ <div class="separator-check-number-blank" style="color: {multiStepOptions.indexblanckColor}">{index + 1}</div>
+ {/if}
  </div>
  {/if}
  {/each}