import { storiesOf } from '@storybook/vue';
import itfButton from '../button/Button.vue';
import itfEditableElement from './EditableElement.vue';
import itfEditableList from './EditableList.vue';

storiesOf('Common', module)
  .add('Editable element', () => ({
    components: {
      itfButton,
      itfEditableElement,
      itfEditableList
    },
    data() {
      return {
        items: [
          { name: 'test' },
          { name: 'test 2' },
          { name: 'test 3' },
          { name: 'test 4' },
          { name: 'test 5' },
        ]
      }
    },
    template: `<div>
      <p>You need wrap whole application with this tag</p>

      <h2>Usage</h2>

<pre>
  &lt;itf-table
    :columns="columns"
    :rows="list"
  >
    &lt;template #column.Employee="&#123; item }">&lt;/template>
  &lt;/itf-table>
</pre>

      <h3>Example</h3>

      <itf-editable-list :items.sync="items" editable sortable :is-visible="(item) => item.name.includes('4')">
        <template #item="{ item }">
          {{item}}
        </template>
        <template #dropdown>
          asd
        </template>
      </itf-editable-list>

      <itf-editable-element>
        <template v-slot="{ hide }">

        <div class="card" style="width: 300px">
          <div class="card-body">
            asdadas

            <a href="#" @click="hide">Close</a>
          </div>
        </div>
        </template>
      </itf-editable-element>

      <!--itf-table
        :columns="columns"
        :rows="list"
      >
        <template #column.Employee="{ item }">
          {{item.Employee}}
        </template>
      </itf-table-->

    </div>`,
  }));
