import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from "@storybook/addon-actions"
import BaseAutocompleteSelect from '@/elements/select/BaseAutocompleteSelect.vue'

<Meta title="Elements|Autocomplete" component={BaseAutocompleteSelect} />

# Autocomplete

<Props of={BaseAutocompleteSelect} />

<Preview>
  <Story name="Autocomplete">
    {{
        components: { BaseAutocompleteSelect },
        data () {
          return {
            value: null,
            searchFilter: '',
            searchItems: []
          }
        },
        template: 
          `<div>
            <base-autocomplete-select
                v-if="value === null"
                metakey="id"
                metavalue="name"
                :value="searchFilter"
                :items="searchItems"
                @input="onSearch"/>
          </div>`,
          methods: {
          onSearch ($event) {
            this.searchFilter = $event.value
            this.searchItems = [ { id: '1', name: 'Item One' }, { id: '2', name: 'Item Two' }, { id: '3', name: 'Item Three' } ]
          }
        }
    }}
  </Story>
</Preview>