<template>
  <div>
    <div class="text-h3">Button</div>
    <v-button label="Сохранить" />
    <v-button label="Сохранить" icon-right="add" />
    <v-button round icon="add" />
    <v-button label="Сохранить" disabled />
    <v-button label="Сохранить" outline />
    <v-button label="Сохранить" outline icon="ios_share" />
  </div>
  <div style="width: 300px">
    <div class="text-h3">Input</div>
    <VInput v-model="text" />
    <VInput type="password" />
    <VInput v-model="text">
      <template v-slot:append>
        <q-icon name="app:bell" color="dark" />
      </template>
    </VInput>
    <VInput>
      <template v-slot:prepend>
        <i class="icon-search"></i>
      </template>
    </VInput>
  </div>
  <div style="width: 300px">
    <div class="text-h3">Select</div>
    <VSelect v-model="option" :options="stringOptions" />
    <VSelect
      v-model="option"
      :options="options"
      @filter="filterFn"
      input-debounce="0"
      use-input
    />
  </div>
</template>

<style>
</style>

<script>
import VButton from '@/components/VButton.vue';
import VInput from '@/components/VInput.vue';
import VSelect from '@/components/VSelect.vue';

export default {
  name: 'HelloWorld',
  components: {VSelect, VInput, VButton},
  data() {
    return {
      text: '',
      stringOptions: [
        'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
      ],
      options: [],
      option: ''
    }
  },
  methods: {
    filterFn(val, update) {
      if (val === '') {
        update(() => {
          this.options = this.stringOptions
          return
        })
      }

      update(() => {
        const needle = val.toLowerCase()
        this.options = this.stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
      })
    }
  }
}
</script>
