<script>
import {Fragment} from "vue-fragment"
import OtherListWrapper from "~/components/utilities/OtherListWrapper";
import {required} from "vuelidate/lib/validators"
import ContentTableView from "~/components/molecules/ContentTableView";
import PlainLabel from "~/components/atoms/label/PlainLabel";
import ContentHeaderView from "~/components/molecules/ContentHeaderView";
import ContentFormView from "~/components/molecules/ContentFormView";
import ContentRows from "~/components/atoms/utility/ContentRows";
import SquareCard from "~/components/atoms/card/SquareCard";
import InputTextGroup from "~/components/molecules/InputTextGroup";
import ActiveButton from "~/components/atoms/button/ActiveButton";
import PlainList from "~/components/atoms/list/PlainList";
import InputTextareaGroup from "~/components/molecules/InputTextareaGroup";
import InputSelectGroup from "~/components/molecules/InputSelectGroup";
import InputSuggestionGroup from "~/components/molecules/InputSuggestionGroup";
import InputCheckboxGroup from "~/components/molecules/InputCheckboxGroup";
import InputDateGroup from "~/components/molecules/InputDateGroup";
import InputPasswordGroup from "~/components/molecules/InputPasswordGroup";
import TitleReportGroup from "~/components/molecules/TitleReportGroup";
import InputSelectFilter from "~/components/molecules/InputSelectFilter";
import InputDateFilter from "~/components/molecules/InputDateFilter";
import CardChartView from "~/components/molecules/CardChartView";
import CardStatsView from "~/components/molecules/CardStatsView";

export default {
  components: {
    CardStatsView,
    CardChartView,
    InputDateFilter,
    InputSelectFilter,
    TitleReportGroup,
    InputPasswordGroup,
    InputDateGroup,
    InputCheckboxGroup,
    InputSuggestionGroup,
    InputSelectGroup,
    InputTextareaGroup,
    PlainList,
    ActiveButton,
    InputTextGroup,
    SquareCard,
    ContentRows,
    ContentFormView,
    ContentHeaderView,
    PlainLabel,
    ContentTableView,
    OtherListWrapper,
    Fragment
  },
  data: () => ({
        chart: [
          {"name": "2021-03-16", "values": 20000},
          {"name": "2021-03-17", "values": 20000},
          {"name": "2021-03-18", "values": 20000},
          {"name": "2021-03-19", "values": 24000},
          {"name": "2021-03-20", "values": 20000},
          {"name": "2021-03-21", "values": 20000},
          {"name": "2021-03-22", "values": 20000},
          {"name": "2021-03-23", "values": 110000},
          {"name": "2021-03-24", "values": 155000},
          {"name": "2021-03-25", "values": 17000},
          {"name": "2021-03-26", "values": 20000},
          {"name": "2021-03-27", "values": 17000},
          {"name": "2021-03-28", "values": 20000},
          {"name": "2021-03-29", "values": 17000},
          {"name": "2021-03-30", "values": 32000}
        ],
        input_text: {
          value: "This is text",
          is_submitted: false
        },
        input_textarea: {
          value: "This is detail",
          is_submitted: false
        },
        input_select: {
          value: {text: "Opsi 1", value: "1"},
          is_submitted: false,
        },
        suggestion_input: {
          value: {text: "Opsi 2", value: "2"},
          helper: {
            text: "Opsi 2"
          },
          is_submitted: false,
        },
        checkbox_input: {
          value: ["2"],
          is_submitted: false
        },
        date_input: {
          value: new Date(),
          is_submitted: false
        },
        password_input: {
          value: "",
          is_submitted: false
        },
        select_filter: {
          value: {}
        },
        date_filter: {
          value: new Date()
        },
        options: {
          example: [
            {text: "Opsi 1", value: "1"},
            {text: "Opsi 2", value: "2"},
            {text: "Opsi 3", value: "3"}
          ]
        },
      }
  ),
  validations: {
    input_text: {
      value: {
        required
      }
    }
    ,
    input_textarea: {
      value: {
        required
      }
    }
    ,
    input_select: {
      value: {
        required
      }
    }
    ,
    suggestion_input: {
      value: {
        required
      }
    }
    ,
    checkbox_input: {
      value: {
        required
      }
    }
    ,
    date_input: {
      value: {
        required
      }
    }
    ,
    password_input: {
      value: {
        required
      }
    }
  }
  ,
  methods: {
    submitInputTextForm() {
      this.input_text.is_submitted = true
      this.$v.input_text.$touch()
    }
    ,
    resetInputTextForm() {
      this.input_text.value = ""
      this.input_text.is_submitted = false
      this.$v.input_text.$reset()
    }
    ,

    submitInputTextareaForm() {
      this.input_textarea.is_submitted = true
      this.$v.input_textarea.$touch()
    }
    ,
    resetInputTextareaForm() {
      this.input_textarea.value = ""
      this.input_textarea.is_submitted = false
      this.$v.input_textarea.$reset()
    }
    ,

    submitInputSelectForm() {
      this.input_select.is_submitted = true
      this.$v.input_select.$touch()
    }
    ,
    resetInputSelectForm() {
      this.input_select.value = {}
      this.input_select.is_submitted = false
      this.$v.input_select.$reset()
    }
    ,

    submitInputSuggestionForm() {
      this.suggestion_input.is_submitted = true
      this.$v.suggestion_input.$touch()
    }
    ,
    resetInputSuggestionForm() {
      this.suggestion_input.value = {}
      this.suggestion_input.helper.text = ""
      this.suggestion_input.is_submitted = false
      this.$v.suggestion_input.$reset()
    }
    ,

    submitInputCheckboxForm() {
      this.checkbox_input.is_submitted = true
      this.$v.checkbox_input.$touch()
    }
    ,

    submitInputDateForm() {
      this.date_input.is_submitted = true
      this.$v.date_input.$touch()
    }
    ,
    resetInputDateForm() {
      this.date_input.value = new Date()
      this.date_input.is_submitted = false
      this.$v.date_input.$reset()
    }
    ,

    submitInputPasswordForm() {
      this.password_input.is_submitted = true
      this.$v.password_input.$touch()
    }
    ,
    resetInputPasswordForm() {
      this.password_input.value = ""
      this.password_input.is_submitted = false
      this.$v.password_input.$reset()
    }
    ,
  }
}
</script>
<template>
  <fragment>
    <div id="molecules" class="mb-5">
      <h1 class="font-weight-bold">Molecules</h1>
      <p class="font-size-16">
        This is component who combine several atoms into one component, so please use all atoms for combining. if you
        need more atoms, please create new atoms then create the documentations. All molecules you can find it on
        <span class="bg-light font-size-14 shadows p-1 rounded">components/molecules</span>
      </p>
      <hr>
    </div>

    <other-list-wrapper id="content-header-view" title="Content Header View">
      <template slot="caption">
        base layout in our project. usually we have 2 column for our base layout. left side for title (common format) or
        label state
        then right side we're use it for button or dropdown<br>
      </template>
      <template slot="example">
        <content-header-view title_text="List Pengguna" button_text="Tambah Pengguna" :has_button="true"/>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="content-table-view" title="Content Table View">
      <template slot="caption">
        use for create the table view, we're use this component on membership list, product list etc. this component
        including error state, loading state. next we're create templates for adding the pagination. <br>
        <small>
          We've 4 state for this component:
          <ol>
            <li>when requesting data we can use loading state</li>
            <li>when the system is fail to retrieve data</li>
            <li>if data was success transfer but the data length is 0</li>
            <li>when data is success transfer and the length is not 0</li>
          </ol>
        </small>
      </template>
      <template slot="example">
        <content-table-view :is_loading="true" :is_error="false" table_title="Daftar Produk"></content-table-view>
        <hr class="m-3">
      </template>

      <template slot="example">
        <content-table-view :is_loading="false" :is_error="true" table_title="Daftar Produk"></content-table-view>
        <hr class="m-3">
      </template>

      <template slot="example">
        <content-table-view :is_loading="false" :is_error="false" table_title="Daftar Produk"></content-table-view>
        <hr class="m-3">
      </template>

      <template slot="example">
        <content-table-view :is_loading="false" :is_error="false" :length="1" table_title="Daftar Produk">
          <!-- CONTENT HERE FOR COMMON TABLE OR YOU CAN USE REPORT TABLE FORMAT-->
          <table class="table table-borderless table-hover mb-0 custom-tbl">
            <thead class="border-bottom-table thead-freeze">
            <tr>
              <th class="text-center text-uppercase">Kode</th>
              <th class="text-center text-uppercase">Jenis Kendaraan</th>
              <th class="text-center text-uppercase">Tarif</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="text-center">KODE 01</td>
              <td class="text-center">MOTOR BESAR</td>
              <td class="text-center">Flat : 2.000</td>
            </tr>
            <tr>
              <td class="text-center">KODE 01</td>
              <td class="text-center">MOTOR BESAR</td>
              <td class="text-center">Flat : 2.000</td>
            </tr>
            </tbody>
          </table>
        </content-table-view>
        <hr class="m-3">
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="content-form-view" title="Content Form View">
      <template slot="caption">
        base layout wrapper for our form. please use this wrapper for all wrapper<br>
        <small>
          We're also has 4 states for this component:
          <ol>
            <li>when requesting data we can use loading state</li>
            <li>when the system is fail to retrieve data</li>
            <li>if data was success transfer but the data length is 0</li>
            <li>when data is success transfer and the length is not 0</li>
          </ol>
        </small>
      </template>
      <template slot="example">
        <content-form-view :is_edit="true" title="Produk">
          // your form here
        </content-form-view>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="card-chart-view" title="Card Chart View">
      <template slot="caption">
        card wrapper for our chart, this component is use for our chart in dashboard and daily report.<br>
      </template>
      <template slot="example">
        <card-chart-view title="Transaksi Dengan Aplikasi" :is_currency="true" :value="chart" />
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="card-status-view" title="Card Status View">
      <template slot="caption">
        card wrapper for our stats, this component is use for our stats in dashboard and daily report.<br>
      </template>
      <template slot="example">
        <card-stats-view label="Kedatangan" icon="bx bx-wifi" :is_connected="false" logs="LAST PING AT 2020:20:20" />
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="input-text-group" title="Input Text Group">
      <template slot="caption">
        It's base format for input type text, please use this component in each form who has input text. this is also
        containing the validations error state, follow this documents for details
      </template>
      <template slot="example">
        <content-rows>
          <square-card col="8" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12">
                <input-text-group label="Nama Produk" id="txt_name" placeholder="Masukkan Nama Produk"
                                  :is_submitted="input_text.is_submitted" v-model="input_text.value"
                                  :is_error="$v.input_text.$error" :max_length="100" format="no-symbol"
                                  @submit="submitInputTextForm"
                                  :error_message="[{state : $v.input_text.value.required, message : 'Nama produk tidak boleh kosong'}]"
                />
                <active-button @click="submitInputTextForm" text="simulate" size="sm"/>
                <active-button @click="resetInputTextForm" text="reset" variant="secondary" size="sm" type="outline"/>
              </square-card>
            </content-rows>
          </square-card>

          <square-card col="4" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12" additional_class="text-justify">
                <p>
                  You can simulated form like in a live form in out production site. so that, after filling the field in
                  a form you can click the button for submitting the form OR you can use enter in a keyboard for
                  submitting the form.
                </p>
                This is the field of your form :
                <plain-list list_style="none" additional_class="font-weight-bold mt-0"> v-model : {{
                    input_text.value
                  }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0"> form submitted:
                  {{ input_text.is_submitted }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0"> form error:
                  {{ $v.input_text.$error }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0"> field error:
                  {{ !$v.input_text.value.required }}
                </plain-list>
              </square-card>
            </content-rows>
          </square-card>
        </content-rows>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="input-textarea-group" title="Input Textarea Group">
      <template slot="caption">
        It's base format for input type text, please use this component in each form who has input text. this is also
        containing the validations error state, follow this documents for details
      </template>
      <template slot="example">
        <content-rows>
          <square-card col="8" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12">
                <input-textarea-group label="Detail Produk" id="txt_detail" placeholder="Masukkan Detail Produk"
                                      :is_submitted="input_textarea.is_submitted" v-model="input_textarea.value"
                                      :is_error="$v.input_textarea.$error" :max_length="100" format="no-symbol"
                                      @submit="submitInputTextareaForm" :value="input_textarea.value"
                                      :error_message="[{state : $v.input_textarea.value.required, message : 'Detail produk tidak boleh kosong'}]"
                />
                <active-button @click="submitInputTextareaForm" text="simulate" size="sm"/>
                <active-button @click="resetInputTextareaForm" text="reset" variant="secondary" size="sm"
                               type="outline"/>
              </square-card>
            </content-rows>
          </square-card>

          <square-card col="4" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12" additional_class="text-justify">
                <p>
                  it's same like input text, but its for field who has more than 100 words. usually for detail something
                </p>
                This is the field of your form :
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  v-model : {{ input_textarea.value }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  form submitted: {{ input_textarea.is_submitted }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  form error: {{ $v.input_textarea.$error }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  field error: {{ !$v.input_textarea.value.required }}
                </plain-list>
              </square-card>
            </content-rows>
          </square-card>
        </content-rows>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="input-select-group" title="Input Select Group">
      <template slot="caption">
        It's base for inputing using select
      </template>
      <template slot="example">
        <content-rows>
          <square-card col="8" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12">
                <input-select-group label="Kategori Produk" :options="options.example" v-model="input_select.value"
                                    placeholder="Pilih kategori"
                                    :is_submitted="input_select.is_submitted" :is_error="$v.input_select.$error"
                                    :error_message="[{state : $v.input_select.value.required, message : 'Kategori produk tidak boleh kosong'}]"
                />
                <active-button @click="submitInputSelectForm" text="simulate" size="sm"/>
                <active-button @click="resetInputSelectForm" text="reset" variant="secondary" size="sm"
                               type="outline"/>
              </square-card>
            </content-rows>
          </square-card>

          <square-card col="4" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12" additional_class="text-justify">
                <p>
                  it's same like input text, but its for field who has more than 100 words. usually for detail something
                </p>
                This is the field of your form :
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  v-model : {{ input_select.value }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  form submitted: {{ input_select.is_submitted }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  form error: {{ $v.input_select.$error }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  field error: {{ !$v.input_select.value.required }}
                </plain-list>
              </square-card>
            </content-rows>
          </square-card>
        </content-rows>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="input-suggestion-group" title="Input Suggestion Group">
      <template slot="caption">
        It's similar to input selection group, but the format component is text field. so user should input the text for
        getting the options then select it
      </template>
      <template slot="example">
        <content-rows>
          <square-card col="8" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12">
                <input-suggestion-group label="Jenis Produk" :value="suggestion_input.helper.text" placeholder="Jenis"
                                        v-model="suggestion_input.value" :is_submitted="suggestion_input.is_submitted"
                                        :is_error="$v.suggestion_input.$error" :options="options.example"
                                        :search_by="item => item.text"
                                        :error_message="[{state : $v.suggestion_input.value.required, message : 'Jenis produk tidak boleh kosong'}]"
                />
                <active-button @click="submitInputSuggestionForm" text="simulate" size="sm"/>
                <active-button @click="resetInputSuggestionForm" text="reset" variant="secondary" size="sm"
                               type="outline"/>
              </square-card>
            </content-rows>
          </square-card>

          <square-card col="4" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12" additional_class="text-justify">
                <p>
                  it's same like input text, but its for field who has more than 100 words. usually for detail something
                </p>
                This is the field of your form :
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  v-model : {{ suggestion_input.value }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  form submitted: {{ suggestion_input.is_submitted }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  form error: {{ $v.suggestion_input.$error }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  field error: {{ !$v.suggestion_input.value.required }}
                </plain-list>
              </square-card>
            </content-rows>
          </square-card>
        </content-rows>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="input-switch-group" title="Input Switch Group">
      <template slot="caption">
        <strong>NOT AVAILABLE</strong>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="input-checkbox-group" title="Input Checkbox Group">
      <template slot="caption">
        <strong>use for checkbox. its usually use for seleting the options but we can select up to 3 data</strong>
      </template>
      <template slot="example">
        <content-rows>
          <square-card col="8" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12">
                <input-checkbox-group label="Varian Produk" :options="options.example" v-model="checkbox_input.value"
                                      placeholder="Pilih kategori" :is_submitted="checkbox_input.is_submitted"
                                      :is_error="$v.checkbox_input.$error"
                                      :error_message="[{state : $v.checkbox_input.value.required, message : 'Varian produk tidak boleh kosong'}]"/>
                <active-button @click="submitInputCheckboxForm" text="simulate" size="sm"/>
              </square-card>
            </content-rows>
          </square-card>

          <square-card col="4" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12" additional_class="text-justify">
                <p>
                  it's same like input text, but its for field who has more than 100 words. usually for detail something
                </p>
                This is the field of your form :
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  v-model : {{ checkbox_input.value }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  form submitted: {{ checkbox_input.is_submitted }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  form error: {{ $v.checkbox_input.$error }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  field error: {{ !$v.checkbox_input.value.required }}
                </plain-list>
              </square-card>
            </content-rows>
          </square-card>
        </content-rows>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="input-radio-group" title="Input Radio Group">
      <template slot="caption">
        <strong>NOT AVAILABLE</strong>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="input-date-group" title="Input Date Group">
      <template slot="caption">
        It's base format for input type text, please use this component in each form who has input text. this is also
        containing the validations error state, follow this documents for details
      </template>
      <template slot="example">
        <content-rows>
          <square-card col="8" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12">
                <input-date-group label="Kadaluarsa Produk" :is_submitted="date_input.is_submitted"
                                  v-model="date_input.value"
                                  :is_error="$v.date_input.$error" format="DD-MM-YYYY" placeholder="Pilih tanggal"
                                  :error_message="[{state : $v.date_input.value.required, message : 'Nama produk tidak boleh kosong'}]"
                />
                <active-button @click="submitInputDateForm" text="simulate" size="sm"/>
                <active-button @click="resetInputDateForm" text="reset" variant="secondary" size="sm" type="outline"/>
              </square-card>
            </content-rows>
          </square-card>

          <square-card col="4" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12" additional_class="text-justify">
                <p>
                  You can simulated form like in a live form in out production site. so that, after filling the field in
                  a form you can click the button for submitting the form OR you can use enter in a keyboard for
                  submitting the form.
                </p>
                This is the field of your form :
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  v-model : {{ date_input.value }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0"> form submitted:
                  {{ date_input.is_submitted }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0"> form error:
                  {{ $v.date_input.$error }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0"> field error:
                  {{ !$v.date_input.value.required }}
                </plain-list>
              </square-card>
            </content-rows>
          </square-card>
        </content-rows>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="input-password-group" title="Input Password Group">
      <template slot="caption">
        It's base format for our input password, please use this component in each form who has input password. this is
        also
        containing the validations error state, follow this documents for details
      </template>
      <template slot="example">
        <content-rows>
          <square-card col="8" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12">
                <input-password-group label="Sandi Produk" id="txt_name" placeholder="Masukkan Sandi Produk"
                                      :is_submitted="password_input.is_submitted" v-model="password_input.value"
                                      :is_error="$v.password_input.$error" :max_length="100"
                                      @submit="submitInputPasswordForm"
                                      :error_message="[{state : $v.password_input.value.required, message : 'Sandi produk tidak boleh kosong'}]"
                />
                <active-button @click="submitInputPasswordForm" text="simulate" size="sm"/>
                <active-button @click="resetInputPasswordForm" text="reset" variant="secondary" size="sm"
                               type="outline"/>
              </square-card>
            </content-rows>
          </square-card>

          <square-card col="4" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12" additional_class="text-justify">
                <p>
                  You can simulated form like in a live form in out production site. so that, after filling the field in
                  a form you can click the button for submitting the form OR you can use enter in a keyboard for
                  submitting the form.
                </p>
                This is the field of your form :
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  v-model : {{ password_input.value }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0"> form submitted:
                  {{ password_input.is_submitted }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0"> form error:
                  {{ $v.password_input.$error }}
                </plain-list>
                <plain-list list_style="none" additional_class="font-weight-bold mt-0"> field error:
                  {{ !$v.password_input.value.required }}
                </plain-list>
              </square-card>
            </content-rows>
          </square-card>
        </content-rows>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="content-header-view" title="Content Header View">
      <template slot="caption">
        base header view for report page. its always use each report module in spn management. <br>
      </template>
      <template slot="example">
        <title-report-group period="Maret 2021"/>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="report-date-filter" title="Report Date Filter">
      <template slot="caption">
        It's base format for our input password, please use this component in each form who has input password. this is
        also containing the validations error state, follow this documents for details
      </template>
      <template slot="example">
        <content-rows>
          <square-card col="8" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12">
                <input-date-filter v-model="date_filter.value" type="month" format="MMM-YY" label="Periode"/>
              </square-card>
            </content-rows>
          </square-card>

          <square-card col="4" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12" additional_class="text-justify">
                <p>
                  You can simulated form like in a live form in out production site. so that, after filling the field in
                  a form you can click the button for submitting the form OR you can use enter in a keyboard for
                  submitting the form.
                </p>
                This is the field of your form :
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  v-model : {{ date_filter.value }}
                </plain-list>
              </square-card>
            </content-rows>
          </square-card>
        </content-rows>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="report-select-filter" title="Report Select Filter">
      <template slot="caption">
        It's base format for our input password, please use this component in each form who has input password. this is
        also containing the validations error state, follow this documents for details
      </template>
      <template slot="example">
        <content-rows>
          <square-card col="8" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12">
                <input-select-filter v-model="select_filter.value" :options="options.example" label="Kendaraan"/>
              </square-card>
            </content-rows>
          </square-card>

          <square-card col="4" variant="transparent" :has_shadow="false">
            <content-rows>
              <square-card col="12" additional_class="text-justify">
                <p>
                  You can simulated form like in a live form in out production site. so that, after filling the field in
                  a form you can click the button for submitting the form OR you can use enter in a keyboard for
                  submitting the form.
                </p>
                This is the field of your form :
                <plain-list list_style="none" additional_class="font-weight-bold mt-0">
                  v-model : {{ select_filter.value }}
                </plain-list>
              </square-card>
            </content-rows>
          </square-card>
        </content-rows>
      </template>
    </other-list-wrapper>
  </fragment>
</template>