Laravel Blade on Steroids Example

01 - form.png

02 - steroids

@extends('views.site._layouts.page')

@section('pageContent')
  @box
    @form(url=#/userstore,class=smart-form)
      @header(Dados de Login)
      @fieldset
        @sec(4)
          @text(#label=title=E-mail,#icon=user,name=id=email,placeholder="E-mail")
        @@
        @sec(4)
          @text(#label=title=Senha,#icon=user,name=id=email,placeholder="Senha")
        @@
        @sec(4)
          @text(#label=title=Confirmação da senha,#icon=user,name=id=email,placeholder="Repita a senha")
        @@
      @@
      @header(Dados Pessoais)
      @fieldset
        @sec(3)
          @text(#label=title=Nome,#icon=user,name=id=first_name,placeholder=Digite apenas os primeiros nomes)
        @@
        @sec(3)
          @text(#label=title=Sobrenome,#icon=user,name=id=last_name,placeholder=O último sobrenome)
        @@
        @sec(2)
          @text(#label=title=Dia do Nascimento,#icon=user,name=id=birth_day,placeholder=Dia)
        @@
        @sec(2)
          @text(#label=title=Mês do Nascimento,#icon=user,name=id=birth_month,placeholder=Mês)
        @@
        @sec(2)
          @text(#label=title=Ano do Nascimento,#icon=user,name=id=birth_year,placeholder=Ano)
        @@
        @sec(2)
          @text(#label=title=CPF,#icon=user,name=id=cpf,placeholder=CPF)
        @@
        @sec(2)
          @select(#label=title=Conselho Regional,class=form-control,#icon=user,name=id=regional_counsel_type,#items=['0' => '(selecione)', 'CRP' => 'Psicologia', 'CRM' => 'Medicina'])
        @@
        @sec(2)
          @text(#label=title=placeholder=Matrícula no conselho,class=form-control,#icon=user,name=id=regional_counsel_id)
        @@
        @sec(6)
          @select(#label=title=Estado do Conselho,#icon=user,class=form-control,name=id=regional_counsel_state,#selected=0,#items=['0' => '(selecione)', 'RJ' => 'Rio de Janeiro', 'SP' => 'São Paulo'])
        @@
      @@
      @header(Endereço)
      @fieldset
        @sec(2)
          @text(#label=title=placeholder=CEP,class=form-control,#icon=home,name=id=address_zip)
        @@
        @sec(4)
          @text(#label=title=Logradouro,placeholder="Nome da Rua, Av., Travessa...",class=form-control,#icon=home,name=id=address_street)
        @@
        @sec(3)
          @text(#label=title=placeholder=Número,class=form-control,#icon=home,name=id=address_number)
        @@
        @sec(3)
          @text(#label=title=placeholder=Complemento,class=form-control,#icon=home,name=id=address_complement)
        @@
        @sec(4)
          @text(#label=title=placeholder=Bairro,class=form-control,#icon=home,name=id=address_neighbourhood)
        @@
        @sec(4)
          @text(#label=title=placeholder=Cidade,class=form-control,#icon=home,name=id=address_city)
        @@
        @sec(4)
          @text(#label=title=placeholder=Estado,class=form-control,#icon=home,name=id=address_state)
        @@
      @@
      @footer
        @submit(Gravar, #color=danger)
        @button(Cancelar, #href=#/users, #color=primary)
      @@
    @@
  @@
@stop

03 - html

<div class="row">
  <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
    <h1 class="page-title txt-color-blueDark"><i class="fa fa-pencil fa-fw "></i> 
      Header<span> > Subheader</span>
    </h1>
  </div>
</div>
<!-- widget grid -->
<section id="widget-grid" class="">
  <div class="row">
    <!-- NEW COL START -->
    <article class="col-sm-12 col-md-12 col-lg-12">
      <!-- Widget ID (each widget will need unique ID)-->
      <div class="jarviswidget jarviswidget-color-red" id="wid-id-a-1" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-togglebutton="false" data-widget-custombutton="true">
        <header>
          <span class="widget-icon"> <i class="fa fa-user"></i> </span>
          <h2>Novo usuário</h2>
        </header>
        <!-- widget div-->
        <div>
          <!-- widget edit box -->
          <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->
          </div>
          <!-- end widget edit box -->
          <div class="widget-body no-padding">
            <!-- Error states for elements -->
            <form method="POST" action="http://development.consultoriodigital.net/url=&quot;#/userstore&quot;" accept-charset="UTF-8" class="smart-form" role="default">
              <input name="_token" type="hidden" value="O9vjtkCH0b1e8SHDuyerX2LlyLJII8FsyOEwuRnE">    
              <header>Dados de Login</header>
              <fieldset>
                <section class="col col-4">
                  <!-- SMART -->
                  <label class="label">E-mail</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-user"></i>
                  <input type="text" class="form-control" placeholder="E-mail" title="E-mail" name="email" id="email" />
                  </label>
                </section>
                <section class="col col-4">
                  <!-- SMART -->
                  <label class="label">Senha</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-user"></i>
                  <input type="text" class="form-control" placeholder="Senha" title="Senha" name="email" id="email" />
                  </label>
                </section>
                <section class="col col-4">
                  <!-- SMART -->
                  <label class="label">Confirmação da senha</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-user"></i>
                  <input type="text" class="form-control" placeholder="Repita a senha" title="Confirmação da senha" name="email" id="email" />
                  </label>
                </section>
              </fieldset>
              <header>Dados Pessoais</header>
              <fieldset>
                <section class="col col-3">
                  <!-- SMART -->
                  <label class="label">Nome</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-user"></i>
                  <input type="text" class="form-control" placeholder="Digite apenas os primeiros nomes" title="Nome" name="first_name" id="first_name" />
                  </label>
                </section>
                <section class="col col-3">
                  <!-- SMART -->
                  <label class="label">Sobrenome</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-user"></i>
                  <input type="text" class="form-control" placeholder="O último sobrenome" title="Sobrenome" name="last_name" id="last_name" />
                  </label>
                </section>
                <section class="col col-2">
                  <!-- SMART -->
                  <label class="label">Dia do Nascimento</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-user"></i>
                  <input type="text" class="form-control" placeholder="Dia" title="Dia do Nascimento" name="birth_day" id="birth_day" />
                  </label>
                </section>
                <section class="col col-2">
                  <!-- SMART -->
                  <label class="label">Mês do Nascimento</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-user"></i>
                  <input type="text" class="form-control" placeholder="Mês" title="Mês do Nascimento" name="birth_month" id="birth_month" />
                  </label>
                </section>
                <section class="col col-2">
                  <!-- SMART -->
                  <label class="label">Ano do Nascimento</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-user"></i>
                  <input type="text" class="form-control" placeholder="Ano" title="Ano do Nascimento" name="birth_year" id="birth_year" />
                  </label>
                </section>
                <section class="col col-2">
                  <!-- SMART -->
                  <label class="label">CPF</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-user"></i>
                  <input type="text" class="form-control" placeholder="CPF" title="CPF" name="cpf" id="cpf" />
                  </label>
                </section>
                <section class="col col-2">
                  <!-- SMART -->
                  <label class="label">Conselho Regional</label>
                  <select title="Conselho Regional" class="form-control" name="regional_counsel_type" id="regional_counsel_type">
                    <option value="0" >(selecione)</option>
                    <option value="CRP" >Psicologia</option>
                    <option value="CRM" >Medicina</option>
                  </select>
                  </label>
                </section>
                <section class="col col-2">
                  <!-- SMART -->
                  <label class="label">Matrícula no conselho</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-user"></i>
                  <input type="text" class="form-control" placeholder="Matrícula no conselho" title="Matrícula no conselho" name="regional_counsel_id" id="regional_counsel_id" />
                  </label>
                </section>
                <section class="col col-6">
                  <!-- SMART -->
                  <label class="label">Estado do Conselho</label>
                  <select title="Estado do Conselho" class="form-control" name="regional_counsel_state" id="regional_counsel_state">
                    <option value="0" >(selecione)</option>
                    <option value="RJ" >Rio de Janeiro</option>
                    <option value="SP" >São Paulo</option>
                  </select>
                  </label>
                </section>
              </fieldset>
              <header>Endereço</header>
              <fieldset>
                <section class="col col-2">
                  <!-- SMART -->
                  <label class="label">CEP</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-home"></i>
                  <input type="text" class="form-control" placeholder="CEP" title="CEP" name="address_zip" id="address_zip" />
                  </label>
                </section>
                <section class="col col-4">
                  <!-- SMART -->
                  <label class="label">Logradouro</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-home"></i>
                  <input type="text" class="form-control" placeholder="Nome da Rua, Av., Travessa..." title="Logradouro" name="address_street" id="address_street" />
                  </label>
                </section>
                <section class="col col-3">
                  <!-- SMART -->
                  <label class="label">Número</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-home"></i>
                  <input type="text" class="form-control" placeholder="Número" title="Número" name="address_number" id="address_number" />
                  </label>
                </section>
                <section class="col col-3">
                  <!-- SMART -->
                  <label class="label">Complemento</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-home"></i>
                  <input type="text" class="form-control" placeholder="Complemento" title="Complemento" name="address_complement" id="address_complement" />
                  </label>
                </section>
                <section class="col col-4">
                  <!-- SMART -->
                  <label class="label">Bairro</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-home"></i>
                  <input type="text" class="form-control" placeholder="Bairro" title="Bairro" name="address_neighbourhood" id="address_neighbourhood" />
                  </label>
                </section>
                <section class="col col-4">
                  <!-- SMART -->
                  <label class="label">Cidade</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-home"></i>
                  <input type="text" class="form-control" placeholder="Cidade" title="Cidade" name="address_city" id="address_city" />
                  </label>
                </section>
                <section class="col col-4">
                  <!-- SMART -->
                  <label class="label">Estado</label>
                  <label class="input">
                  <i class="icon-prepend fa fa-home"></i>
                  <input type="text" class="form-control" placeholder="Estado" title="Estado" name="address_state" id="address_state" />
                  </label>
                </section>
              </fieldset>
              <footer>
                <button type="submit" class="btn btn-danger">Gravar</button>
                <a href="#/users" class="btn btn-primary">Cancelar</a>
              </footer>
            </form>
          </div>
          <!-- end widget content -->
        </div>
        <!-- end widget div -->
      </div>
      <!-- end widget -->
    </article>
    <!-- END COL -->
  </div>
  <!-- END ROW -->
</section>
<!-- end widget grid -->
<script type="text/javascript">
  // DO NOT REMOVE : GLOBAL FUNCTIONS!
  pageSetUp();
</script>
<script type="text/javascript"></script>
<script type="text/javascript"></script>