<script setup lang="ts">
import { ref } from 'vue';
import Alert from '~/components/ui/Alert.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Input from '~/components/ui/Input.vue'
import Card from '~/components/ui/Card.vue'

const size = ref(32)
</script>

<style>
  .preview {
    padding:16px 0;
    flex-grow:1;
  }
</style>

# Spacer

Add a 16px gap between adjacent items.

##### Without spacer:

<Layout flex>

```vue-html
<Alert green">A</Alert>
<Alert red">B</Alert>
```

<div class="preview">

<Alert green>A</Alert>
<Alert purple>B</Alert>

</div>

</Layout>

##### With spacer:

<Layout flex>

```vue-html{2}
<Alert green">A</Alert>
<Spacer/>
<Alert red">B</Alert>
```

<div class="preview">
<Alert green>A</Alert>
<Spacer/>
<Alert purple>B</Alert>
</div>

</Layout>

##### Spacers can also be added for horizontal space:

<Layout flex>

```vue-html{4}
<Layout flex>
  <Alert blue">A</Alert>
  <Alert yellow">B</Alert>
  <Spacer/>
  <Alert red">C</Alert>
</Layout>
```

<div class="preview">
<Layout flex>
<Alert blue>A</Alert>
<Alert yellow>B</Alert>
<Spacer/>
<Alert red>C</Alert>
</Layout>
</div>
</Layout>

## Modify the size of a Spacer

<Layout flex>

```vue
<script setup>
const size = ref(1);
</script>

<template>
  <Input v-model="size" type="range" />

  <Alert yellow>A</Alert>
  <Spacer :size="size" />
  <Alert purple>B</Alert>
</template>
```

<div class="preview">
  <Input v-model="size" type="range" style="writing-mode: vertical-lr; direction: rtl"/>
  {{ size }}px
</div>
<div class="preview">
  <Alert yellow>A</Alert>
  <Spacer :size="size" />
  <Alert purple>B</Alert>
</div>
</Layout>

## Make the Spacer elastic (responsive)

<Layout flex>

```vue-html
<Layout flex style="height:30em;">
  <Input v-model="size"
    type="range"
    style="writing-mode: vertical-lr; height:100%"
  />

  <Layout stack no-gap
    :style="{ height: size + '%' }"
  >
    <Alert blue>A</Alert>
    <Spacer grow title="grow" />
    <Alert red>B</Alert>
    <Alert green>C</Alert>
    <Spacer shrink title="shrink" />
    <Alert purple>D</Alert>
    <Spacer grow shrink title="grow shrink" />
    <Alert yellow>E</Alert>
  </Layout>
</Layout>
```

<div class="preview" style="flex-wrap:nowrap">
<Layout flex style="height:30em">

<Input v-model="size" type="range" style="writing-mode: vertical-lr; height:100%"><template #input-right>{{ size }}%</template></Input>

<Layout stack no-gap :style="{ height: size + '%'}">
  <Alert blue>A</Alert>
  <Spacer grow title="grow" />
  <Alert red>B</Alert>
  <Alert green>C</Alert>
  <Spacer shrink title="shrink" />
  <Alert purple>D</Alert>
  <Spacer grow shrink title="grow shrink" />
  <Alert yellow>E</Alert>
</Layout>

</Layout>

</div>
</Layout>

## Use the Spacer to vary an element's dimensions

<Layout flex style="align-items:flex-start">
<Input v-model="size" type="range" />
<Card min-content title="h">
  <Spacer h :size="size * 4" style="border:5px dashed;" />
</Card>
<Card min-content title="v">
  <Spacer v :size="size * 4" style="border:5px dashed;" />
</Card>
</Layout>
