<template>
  <div id="app">

    <ShDropdown
      content="content-test"
      @created="popis"
      isTooltip="true"
      width="350"
      :options="{
      placement: 'top',
      modifiers: { offset: { offset: '0,10px' } }
    }">
        <ShDropdownItem
          :isTooltip="true"
          tooltipIcon="sh-icon-warning"
          :tooltipTitle="'ewdkopewfkpoek'"
          :tooltipContent="'ewlfmopewfmop mepowmf pwempfmewlfmewlmflewm flewmfl ewmfkl mewklfm klewmfkl wemf meklwmflkewmfewfm'"
        ></ShDropdownItem>

      <button slot="reference">
        Reference Element ewfewfefewfewf
      </button>
    </ShDropdown>


    <ShDropdown
      content="content-test"
      isTooltip="true"
      :options="{
      placement: 'bottom-end',
    }">
        Popper Content ewfewfwe

      <button slot="reference">
        Reference Element ewfewfefewfewf
      </button>
    </ShDropdown>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import {ShTagCreator} from './components/sh-tag';
  import ShDropdown from './components/sh-dropdown/ShDropdown.vue';
  import ShDropdownItem from './components/sh-dropdown/ShDropdownItem.vue';


  @Component({
    components: {
      ShTagCreator,
      ShDropdown,
      ShDropdownItem,
    },
  })
  export default class App extends Vue {
    public popis(data: any) {
      console.log('popper started!!', data);
    }

  }
</script>

<style>
  #app {
    max-width: 800px;
    margin: 100px auto;
  }
</style>
