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

import ColumnsLayout from '@/layouts/ColumnsLayout.vue'
import LinearLayout from '@/layouts/LinearLayout.vue'

<Meta title="Layouts|Columns" component={ ColumnsLayout } />

# Columns Layout

<Props of={ ColumnsLayout } />

<Preview>
  <Story name="Simple">
    {{
        components: { ColumnsLayout },
        template: 
          `<div>
              <columns-layout>
                <div style="border: 1px dashed black;">
                  <div style="background-color: red; width: 100px; height: 50px;" />
                </div>
                <div style="border: 1px dashed black;">
                  <div style="background-color: red; width: 100px; height: 50px;" />
                </div>
                <div style="border: 1px dashed black;">
                  <div style="background-color: red; width: 100px; height: 50px;" />
                </div>
                <div style="border: 1px dashed black;">
                  <div style="background-color: red; width: 100px; height: 50px;" />
                </div>
              </columns-layout>
          </div>`
    }}
  </Story>
</Preview>

## Combination with other layouts

### Create a table with LinearLayout

<Preview>
  <Story name="Table with columns">
    {{
      components: { LinearLayout, ColumnsLayout },
      template: 
        `<div>
          <linear-layout orientation="vertical">
            <columns-layout>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
            </columns-layout>
            <columns-layout>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
            </columns-layout>
            <columns-layout>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
              <div style="border: 1px dashed black;">
                <div style="background-color: red; width: 100px; height: 50px;" />
              </div>
            </columns-layout>
          <linear-layout>
        </div>`
    }}
  </Story>
</Preview>