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

<Meta title="Layouts|Linear" component={ LinearLayout } />

# Linear Layout

<Props of={ LinearLayout } />

## Orientation

The LinearLayout component set elements in line. The line can be vertically and horizontally oriented. You can set the orientation with the `orientation` prop and using:
- `vertical` to set a vertical flow,
- `horizontal` to set it horizontally

**By default**, the LinearLayout has an `horizontal` orientation.

<Preview>
  <Story name="Orientation">
    {{
        components: { LinearLayout },
        template: 
          `<div>
              <linear-layout>
                <div style="background-color: red; width: 100px; height: 50px;" />
                <div style="background-color: blue; width: 100px; height: 50px;" />
                <div style="background-color: green; width: 100px; height: 50px;" />
                <div style="background-color: black; width: 100px; height: 50px;" />
              </linear-layout>
              <br>
              <linear-layout orientation="vertical">
                <div style="background-color: red; width: 100%; height: 50px;" />
                <div style="background-color: blue; width: 100%; height: 50px;" />
                <div style="background-color: green; width: 100%; height: 50px;" />
                <div style="background-color: black; width: 100%; height: 50px;" />
              </linear-layout>
          </div>`
    }}
  </Story>
</Preview>

## Gravity

Elements inside the LinearLayout component can be grouped at the start of the layout, as if they are attracted to each others under the force of gravity, or pulled away from each others, like without gravity.
This behavior is expressed using the `gravity` prop and setting it at:
- `attractive` to group elements at the start of the layout,
- `repulsive` to create equal spacings between elements pushing them apart inside the full width or height of the layout

**By default**, the elements inside the LinearLayout are under an `attractive` gravity.

<Preview>
  <Story name="Force">
    {{
        components: { LinearLayout },
        template: 
          `<div style="height: 400px;">
            <linear-layout gravity="repulsive">
              <div style="background-color: red; width: 100px; height: 50px;" />
              <div style="background-color: blue; width: 100px; height: 50px;" />
              <div style="background-color: green; width: 100px; height: 50px;" />
              <div style="background-color: black; width: 100px; height: 50px;" />
            </linear-layout>
            <br>
            <linear-layout orientation="vertical" gravity="repulsive">
              <div style="background-color: red; width: 100%; height: 50px;" />
              <div style="background-color: blue; width: 100%; height: 50px;" />
              <div style="background-color: green; width: 100%; height: 50px;" />
              <div style="background-color: black; width: 100%; height: 50px;" />
            </linear-layout>
          </div>`
    }}
  </Story>
</Preview>