File
Login or Register via GitHub
<html><head> <meta name="description" content="VUE JS - Steps Wizard"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <title>JS Bin</title></head><body> <div id="app" class="row"> <div> <div class="col-sm-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-heading"> <h3>{{ formName }}</h3> </div> <div class="panel-body"> <div class="well well-sm"> <div class="form-group"> <label class="control-label">Form Name:</label> <input type="text" class="form-control input-sm" v-on:input="formTitle"> </div> <hr> <!-- Added Fields --> <ul id="fields" class="list-group mail-list"> <ourelement v-for="list in formSources" :data="list"></ourelement> </ul> <button class="btn btn-primary btn-outline btn-sm m-t-25 card-1" type="button" id="btnAddField" v-on:click="showWizard"><i class="mdi mdi-plus mdi-12px"></i> ADD FIELD</button><!-- <button class="btn btn-primary btn-outline btn-sm m-t-25 card-1" type="button"><i class="mdi mdi-folder-plus mdi-12px"></i> ADD DOCUMENT</button>--> </div> <div id="wizardContent" class="m-t-30"> <!-- STEP 1 -------------------------- --> <!-- ------ -------------------------- --> <template v-if="step == 1"> <div class="well wizard"> <ul class="wizard-steps" role="tablist"> <li role="tab" class="active current" aria-expanded="true"> Step 1 | <small> Select the field you want to add to your form</small> </li> </ul> <div class="wizard-pane m-t-20 active" role="tabpanel" aria-expanded="true"> <div class="vtabs col-sm-12 col-xs-12"> <ul class="nav tabs-vertical"> <li class="tab card-1 active"> <a data-toggle="tab" href="#basic" aria-expanded="true"> <span><i class="mdi mdi-clipboard-outline"></i> Basic Fields</span></a> </li> <li class="tab card-1"> <a data-toggle="tab" href="#ready" aria-expanded="false"> <span><i class="mdi mdi-clipboard-text"></i> Quick Fields</span></a> </li> </ul> <div class="tab-content"> <div id="basic" class="tab-pane active"> <div class="col-sm-12"> <div class="list-group col"> <button @click="input0" type="button" class="list-group-item"><i class="mdi mdi-textbox mdi-18px"></i> Text Field</button> <button @click="input1" type="button" class="list-group-item"><i class="mdi mdi-checkbox-marked-outline mdi-18px"></i> Checkbox</button> <button @click="input2" type="button" class="list-group-item"><i class="mdi mdi-calendar mdi-18px"></i> Date Field</button> <button @click="input3" type="button" class="list-group-item"><i class="mdi mdi-cloud-upload mdi-18px"></i> File Upload</button> <button @click="input4" type="button" class="list-group-item"><i class="mdi mdi-arrow-down-drop-circle-outline mdi-18px"></i> Select</button> <button @click="input5" type="button" class="list-group-item"><i class="mdi mdi-page-layout-body mdi-18px"></i> Paragraph</button> <button @click="input6" type="button" class="list-group-item"><i class="mdi mdi-page-layout-header mdi-18px"></i> Title</button> </div> </div> </div> <div id="ready" class="tab-pane"> <div class="col-sm-12"> <div class="list-group"> <button @click="quickFullName" type="button" class="list-group-item" title="First Name | Middle Name | Last Name"><i class="mdi mdi-account mdi-18px"></i> Full Name</button> <button @click="quickDescription" type="button" class="list-group-item" title="Long text entry"><i class="mdi mdi-account-card-details mdi-18px"></i> Description</button> <button @click="quickEmail" type="button" class="list-group-item" title="example@email.com"><i class="mdi mdi-email mdi-18px"></i> Email</button> <button @click="quickPhone" type="button" class="list-group-item" title="(___)___-____"><i class="mdi mdi-phone mdi-18px"></i> Phone</button> <button @click="quickAddress" type="button" class="list-group-item" title="Street Address | Postal Address | City | State | Country | Zip Code"><i class="mdi mdi-map-marker-circle"></i> Address</button> </div> </div> </div> </div> </div> <div class="clearfix"></div> </div> </div> </template> <!-- STEP 2 -------------------------- --> <!-- ------ -------------------------- --> <template v-if="step == 2"> <div class="wizard well"> <ul class="wizard-steps" role="tablist"> <li role="tab" class="active current" aria-expanded="true"> Step 2 | <small v-if="inputChoice <= 3">CHOOSE YOUR FIELD SETTINGS</small> <small v-if="inputChoice == 4">Choice 0</small> <small v-if="inputChoice == 5">Add a Paragraph to your Form</small> <small v-if="inputChoice == 6">Add a Title to your Form</small> </li> </ul> <div class="wizard-pane m-t-20 active" role="tabpanel" aria-expanded="true"> <div v-show="inputChoice == 0"> <div class="form-group"> <label class="control-label">Type:</label> <select id="" data-placeholder="Choose a Category" tabindex="1" class="form-control input-sm" v-model="typeSelected"> <option v-for = "field in textFieldTypes" :value="field.text" >{{field.text}}</option> </select> </div> <div class="m-t-20 checkbox checkbox-primary"> <input type="checkbox" value="Required" v-model="required"> <label for=""> Required <small class="text-muted p-l-10">(Make this field mandatory.)</small> </label> </div> <hr> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div> <div v-show="inputChoice == 1"> <div class="form-group"> <label class="control-label">Label:</label> <input id="" type="text" class="form-control input-sm" placeholder="" value="" v-model="label"> </div> <div class="m-t-20 checkbox checkbox-primary"> <input type="checkbox" value="Required" v-model="required"> <label for=""> Required <small class="text-muted p-l-10">(Make this field mandatory.)</small> </label> </div> <div class="m-t-20 checkbox checkbox-primary"> <input id="allowMultiple" type="checkbox" value="Multiple" v-model="allow_multiple"> <label for=""> Allow Multiple Selections </label> </div> <hr> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div> <div v-show="inputChoice == 2"> <div class="form-group"> <label class="control-label">Date Type:</label> <select id="" data-placeholder="Choose a Category" tabindex="1" class="form-control input-sm" v-model="dateTypeSelected"> <option v-for = "field in dateFieldTypes" :value="field.text" >{{field.text}}</option> </select> </div> <div class="m-t-20 checkbox checkbox-primary"> <input type="checkbox" value="Required" v-model="required"> <label for=""> Required <small class="text-muted p-l-10">(Make this field mandatory.)</small> </label> </div> <hr> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div> <div v-show="inputChoice == 3"> <div class="m-t-20 checkbox checkbox-primary"> <input type="checkbox" value="Required" v-model="required"> <label for=""> Required <small class="text-muted p-l-10">(Make this field mandatory.)</small> </label> </div> <hr> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div> <div v-show="inputChoice == 4"> <div class="form-group"> <label class="control-label">Label:</label> <input id="" type="text" class="form-control input-sm" placeholder="" value="" v-model="label"> </div> <div class="m-t-20 checkbox checkbox-primary"> <input type="checkbox" value="Required" v-model="required"> <label for=""> Required <small class="text-muted p-l-10">(Make this field mandatory.)</small> </label> </div> <hr> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div> <div v-show="inputChoice == 5"> <div class="form-group"> <label>Label: <small>(Optional)</small></label> <input type="text" class="form-control input-sm" v-model="label"> </div> <div class="form-group"> <label for="comment">Paragraph:</label> <textarea id="formTextArea" class="form-control" rows="5" v-model="userParagraph"></textarea> </div> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div> <div v-show="inputChoice == 6"> <h4 class="text-muted"><small>Field Selected: <span class="text-primary">Header</span></small></h4> <div class="form-group"> <label>Title: </label> <input type="text" class="form-control input-sm" v-model="userTitle"> </div> <hr> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div> </div> </div> </template> <!-- STEP 3 -------------------------- --> <!-- ------ -------------------------- --> <template v-if="step == 3"> <div class="wizard well"> <ul class="wizard-steps" role="tablist"> <li role="tab" class="active current" aria-expanded="true"> Step 3 </li> </ul> <div class="wizard-pane m-t-20 active" role="tabpanel" aria-expanded="true"> <div v-show="inputChoice == 0"> <div class="form-group"> <label>Label:</label> <input type="text" class="form-control input-sm" v-model="label"> </div> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div> <div v-show="inputChoice == 1"> <div class="well"> <div class="form-group"> <input id="" type="text" class="form-control input-sm" placeholder="Option" value="" v-model="optionBox"> </div> <div class="pull-right"> <button type="button" class="btn waves-effect btn-success btn-xs" @click="addOption()"><i class="glyphicon glyphicon-plus-sign"></i> Add Choice</button> </div> <div class="clearfix"></div> <hr /> <ul class="list-group" id="newChoices"> </ul> </div> <hr> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div> <div v-show="inputChoice == 2"> <template> <div class="form-group"> <label>Label:</label> <input type="text" class="form-control" placeholder="Example: Birthdate, Date Started, Date Due, etc.." v-model="label"> </div> </template> <hr> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div> <div v-show="inputChoice == 3"> <div class="form-group"> <label>Label:</label> <input type="text" class="form-control input-sm" v-model="label"> </div> <hr> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div> <div v-show="inputChoice == 4"> <div class="well"> <div class="form-group"> <input id="" type="text" class="form-control input-sm" placeholder="Option" value="" v-model="optionBox"> </div> <div class="pull-right"> <button type="button" class="btn waves-effect btn-success btn-xs" @click="addOption()"><i class="glyphicon glyphicon-plus-sign"></i> Add Choice</button> </div> <div class="clearfix"></div> <hr /> <ul class="list-group" id="newOptions"> </ul> </div> <hr> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div><!-- <div v-show="inputChoice == 5"> </div> <div v-show="inputChoice == 6"> <hr> <button class="btn btn-danger btn-xs" @click="back()"><i class="mdi mdi-arrow-left mdi-12px"></i> Back</button> <button class="btn btn-info btn-xs" @click="next()">Next <i class="mdi mdi-arrow-right mdi-12px"></i></button> </div>--> </div> </div> </template> </div> </div> <template v-if="step == 0"> <div class="panel-footer"> <div class="pull-right"> <button class="btn btn-danger btn-sm m-t-25" type="button"><i class="mdi mdi-delete mdi-12px"></i> CLEAR</button> <button class="btn btn-green btn-sm m-t-25" type="button"><i class="mdi mdi-content-save mdi-12px"></i> SAVE</button> </div> <div class="clearfix"></div> </div> </template> </div> </div> </div> </div><!-- Termina el:"app" --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script></body></html>
Output
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers