text: import { withKnobs, object, text, boolean } from '@storybook/addon-knobs';
  import MewSearch from '@/components/MewSearch/MewSearch.vue';
  
  export default {
    title: 'MewSearch',
    parameters: {
      component: MewSearch
    },
    decorators: [withKnobs]
  };
  
  const menuSelect = {
    label: 'Extensions',
    items: [ { name: '.crypto', value: '.crypto' }]
  }
  
  export const MEWSearch = () => ({
    components: { MewSearch },
    props: {
      disabled: {
        default: boolean('disabled', false)
      },
      placeholder: {
        default: text('placeholder', 'placeholder')
      },
      value: {
        default: text('value', '')
      },
      isSearchBlock: {
        default: boolean('is-search-block', true)
      },
      menuSelect: {
        default: object('menu-select', menuSelect)
      },
      isCompact: {
        default: boolean('is-compact', false)
      },
      isFilled: {
        default: boolean('is-filled', true)
      },
      enableDarkMode: {
        default: boolean('dark mode ?', false)
      },
      errorMessages: {
        default: text('error-messages', '')
      }
    },
    watch: {
      enableDarkMode(newVal) {
        this.$vuetify.theme.dark = newVal === true ? true : false;
      }
    },
    methods: {
      onSearch() {
        console.log('search button clicked')
      }
    },
    template: `
      <div>
      <br />
      <mew-search :on-search="onSearch" :is-filled="isFilled" :error-messages="errorMessages" :is-compact="isCompact" :menu-select="menuSelect" :is-search-block="isSearchBlock" :disabled="disabled" :placeholder="placeholder" :value="value"
      />
    </div>`
  });
  