index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Laravel form builder</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/semantic-ui-css/semantic.min.js"></script>
    <script src="node_modules/highlightjs/highlight.pack.min.js"></script>
    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
</head>
<body>
    <div class="ui container" id="app">
        <div class="ui pointing menu">
            <a class="active item">
                <img src="assets/img/logomark.min.svg" alt="">
                &nbsp;
                &nbsp;
                Laravel form builder
            </a>
            <a class="item" href="https://github.com/4xmen/laravel-form-builder" target="_blank">
                <i class="github icon"></i>
                GitHub
            </a>
            <a class="item" href="https://github.com/4xmen/laravel-form-builder/issues">
                <i class="bug icon"></i>
                Issues and report bugs
            </a>
            <a href="http://4xmen.ir/" class="item">
                <img src="assets/img/logo.png" alt="">
            </a>
            <div class="right menu">
                <form action="https://github.com/4xmen/laravel-form-builder/issues" class="item">
                    <div class="ui transparent icon input">
                        <input type="text" name="q" placeholder="Search...">
                        <i class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
        <div class="ui segment">
            <div class="ui form">
                <h4 class="ui dividing header">General setting</h4>
                <div class="two fields">
                    <div class="field">
                        <label for="theme">
                            Theme
                        </label>
                        <select v-model="theme" @change="changeTheme" id="theme" class="ui dropdown">
                            <option value="bootstrap"> Bootstrap </option>
                            <option value="semanticui"> SemanticUI </option>
                            <option value="materialize" > MaterializeCSS </option>
                        </select>
                    </div>
                    <div class="field">
                        <label for="method">
                            Method
                        </label>
                        <select v-model="method" id="method" class="ui dropdown">
                            <option value="get"> Get </option>
                            <option value="post"> Post </option>
                            <option value="put"> Put </option>
                            <option value="patch"> Patch </option>
                            <option value="delete"> Delete </option>
                            <option value="options"> Options </option>
                        </select>
                    </div>
<!--                </div>-->
<!--                <div class="two fields">-->
                    <div class="field">
                        <label for="old">
                            Old second parameter
                        </label>


                        <div class="ui right labeled  input">
                            <input type="text" id="old" placeholder="$item->#name??null" v-model="old"/>
                            <a class="ui button grey"  @click="defaultOld" title="Default old">
                                &leftarrow; Def
                            </a>
                        </div>
                    </div>

                </div>
                <h4 class="ui dividing header">Elements</h4>
                <div v-for="(fld,i) in flds" class="gen-field">
                    <div style="padding-bottom: 15px;" v-if="flds.length > 1">
                        <div class="ui buttons">
                            <button v-if="i != 0" @click="goUp(i)" class="ui button inverted green"> &uparrow; </button>
                            <button v-if="i != flds.length-1" @click="goDown(i)"  class="ui button inverted red"> &downarrow; </button>
                        </div>
                    </div>
                    <div class="fields two">
                        <div class="field required">
                            <label :for=`type-${i}`>
                                Type
                            </label>
                            <select v-model="fld.type" :id=`type-${i}`  class="ui dropdown type-cls">
                                <option v-for="type in typ"  :value="type" > {{type}} </option>
                            </select>
                        </div>
                        <div class="field required" v-if="fld.type != 'row' && fld.type != 'form-divider'">
                            <label :for=`name-${i}`>
                                Name
                            </label>
                            <input v-model="fld.name" :id=`name-${i}`>
                        </div>
                        <div class="field required" v-if="fld.type != 'row'">
                            <label :for=`lbl-${i}`>
                                Label
                            </label>
                            <input v-model="fld.label" :id=`lbl-${i}`>
                        </div>
                    </div>
                    <div class="fields" v-if="fld.type != 'row' && fld.type != 'form-divider'">
                        <div class="five wide field required">
                            <label :for=`size-${i}`>
                                Size
                            </label>
                            <select v-model="fld.size" :id=`size-${i}` class="ui dropdown search">
                                <option v-for="size in siz" :value="size"> {{size}} </option>
                            </select>
                        </div>
                        <div class="five wide field">
                            <label :for=`id-${i}`>
                                ID
                            </label>
                            <input v-model="fld.id" :id=`id-${i}`>
                        </div>
                        <div class="seven wide field">
                            <label :for=`opt-${i}`>
                                Options
                            </label>
                            <input v-model="fld.option" :id=`opt-${i}` placeholder="$records:$record:id:title|type">
                        </div>
                        <div class="one wide field">
                            <label> &nbsp;</label>
                            <div class="button ui red fluid" @click="removeField(i)">
                                <i class="times icon"></i>
                            </div>
                        </div>
                        <div class="two wide field">
                            <label> &nbsp;</label>
                            <div class="ui button green fluid" title="Add additional attributes"  @click="addAttr(i)">+ Attr</div>
                        </div>


                    </div>
                    <div class="three fields">
                        <div class="field attr-base" v-for="attr in fld.others">
                            <div class="ui grid ">
                                <div class="eight wide column">
                                    <input type="text" placeholder="Name of attribute" v-model="attr.name"/>
                                </div>
                                <div class="eight wide column">
                                    <input type="text" placeholder="Value of attribute " v-model="attr.value"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div class="ui button blue" @click="addField">
                    Add field
                </div>
                <div class="ui button green" @click="generateForm">
                    Generate form
                </div>

                <div class="ui button teal" @click="saveJson">
                    Save current fields to file
                </div>

                <div class="ui button orange" @click="loadJson">
                    Load fields form file
                </div>

                <div class="ui button red" @click="clearAll">
                    Clear all fields
                </div>

                <input type="file" style="display: none" id="json-file"/>

            </div>
        </div>

        <div class="ui segment inverted">
            <h2 >
                Generated Code
                <div class="right floated ui button olive" @click="copy">
                    &nbsp;
                    <i class="copy outline icon"></i>
                </div>
            </h2>
            <pre id="code">
                {{code}}
            </pre>
        </div>
        <br>
        <br>
        <br>
    </div>


    <script src="assets/js/engine.js"></script>
</body>
</html>