Stack component

components/content/examples/stack/BasicStack.vue

@@ -0,0 +1,16 @@
+<template>
+  <c-stack :spacing="5">
+    <c-box :p="5" shadow="md" border-width="1px">
+      <c-heading>See the Vue</c-heading>
+      <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
+    </c-box>
+    <c-box :p="5" shadow="md" border-width="1px">
+      <c-heading>Go Nuxt!</c-heading>
+      <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
+    </c-box>
+  </c-stack>
+</template>
+
+<script setup>
+import { CStack, CBox, CHeading, CText } from '@chakra-ui/vue-next';
+</script>

components/content/examples/stack/HorizontalStack.vue

@@ -0,0 +1,16 @@
+<template>
+  <c-stack :spacing="5" is-inline>
+    <c-box :p="5" shadow="md" border-width="1px">
+      <c-heading>See the Vue</c-heading>
+      <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
+    </c-box>
+    <c-box :p="5" shadow="md" border-width="1px">
+      <c-heading>Go Nuxt!</c-heading>
+      <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
+    </c-box>
+  </c-stack>
+</template>
+
+<script setup>
+import { CStack, CBox, CHeading, CText } from '@chakra-ui/vue-next';
+</script>

components/content/examples/stack/HorizontalStackTwo.vue

@@ -0,0 +1,16 @@
+<template>
+  <c-h-stack :spacing="5">
+    <c-box :p="5" shadow="md" border-width="1px">
+      <c-heading>See the Vue</c-heading>
+      <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
+    </c-box>
+    <c-box :p="5" shadow="md" border-width="1px">
+      <c-heading>Go Nuxt!</c-heading>
+      <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
+    </c-box>
+  </c-h-stack>
+</template>
+
+<script setup>
+import { CHStack, CBox, CHeading, CText } from '@chakra-ui/vue-next';
+</script>

components/content/examples/stack/HtmlStack.vue

@@ -0,0 +1,12 @@
+<template>
+  <c-stack :spacing="4">
+    <c-text>Chakra component 1</c-text>
+    <p>HTML paragraph element</p>
+    <h3>HTML heading element</h3>
+    <c-text>Chakra component 2</c-text>
+  </c-stack>
+</template>
+
+<script setup>
+import { CStack, CText } from '@chakra-ui/vue-next';
+</script>

components/content/examples/stack/ReverseStack.vue

@@ -0,0 +1,16 @@
+<template>
+  <c-stack :spacing="5" direction="column-reverse">
+    <c-box :p="5" shadow="md" border-width="1px">
+      <c-heading>See the Vue</c-heading>
+      <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
+    </c-box>
+    <c-box :p="5" shadow="md" border-width="1px">
+      <c-heading>Go Nuxt!</c-heading>
+      <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
+    </c-box>
+  </c-stack>
+</template>
+
+<script setup>
+import { CStack, CBox, CHeading, CText } from '@chakra-ui/vue-next';
+</script>

content/4.components/stack.md

@@ -0,0 +1,141 @@
+---
+title: Stack
+description: Stack Component
+version: 2.0+
+---
+
+# Stack
+
+Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. It composes the `Flex` component.
+
+## Import
+
+By default, each item is stacked vertically. `CStack` clones its children and passes the spacing to them using `margin-bottom` or `margin-right`.
+
+```js
+import { CStack } from '@chakra-ui/vue-next';
+```
+
+In addition, Chakra-UI Vue exports two additional `CStack` components
+- `CVStack`: used to stack elements in the vertical direction
+- `CHStack`: used to stack elements in the horizontal direction
+
+```js
+import { CStack, CHStack, CVStack } from '@chakra-ui/vue-next';
+```
+
+## Usage
+
+::showcase
+::basic-stack
+::
+::
+
+```html
+<c-stack :spacing="5">
+  <c-box :p="5" shadow="md" border-width="1px">
+    <c-heading>See the Vue</c-heading>
+    <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
+  </c-box>
+  <c-box :p="5" shadow="md" border-width="1px">
+    <c-heading>Go Nuxt!</c-heading>
+    <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
+  </c-box>
+</c-stack>
+```
+
+## Stack items horizontally
+
+You can stack the items horizontally either:
+
+- By passing the `is-inline` prop or `direction` and set it to `row` to the `CStack` component.
+
+::showcase
+::horizontal-stack
+::
+::
+
+```html
+<c-stack :spacing="5" is-inline>
+  <c-box :p="5" shadow="md" border-width="1px">
+    <c-heading>See the Vue</c-heading>
+    <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
+  </c-box>
+  <c-box :p="5" shadow="md" border-width="1px">
+    <c-heading>Go Nuxt!</c-heading>
+    <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
+  </c-box>
+</c-stack>
+```
+
+- Using the `CHStack` component.
+
+::showcase
+::horizontal-stack-two
+::
+::
+
+```html
+<c-h-stack :spacing="5">
+  <c-box :p="5" shadow="md" border-width="1px">
+    <c-heading>See the Vue</c-heading>
+    <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
+  </c-box>
+  <c-box :p="5" shadow="md" border-width="1px">
+    <c-heading>Go Nuxt!</c-heading>
+    <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
+  </c-box>
+</c-h-stack>
+```
+
+Optionally, you can use align and justify to adjust the alignment and distribution of the items.
+
+## Reverse display order of items
+
+Set `direction` to `row-reverse` or `column-reverse`.
+
+::showcase
+::reverse-stack
+::
+::
+
+```html
+<c-stack :spacing="5" is-reversed>
+  <c-box :p="5" shadow="md" border-width="1px">
+    <c-heading>See the Vue</c-heading>
+    <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
+  </c-box>
+  <c-box :p="5" shadow="md" border-width="1px">
+    <c-heading>Go Nuxt!</c-heading>
+    <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
+  </c-box>
+</c-stack>
+```
+
+### Stacking HTML elements
+
+::showcase
+::html-stack
+::
+::
+
+```html
+<c-stack :spacing="4">
+  <c-text>Chakra component 1</c-text>
+  <p>HTML paragraph element</p>
+  <h3>HTML heading element</h3>
+  <c-text>Chakra component 2</c-text>
+</c-stack>
+```
+
+## Props
+
+| Name             | Type                        | Default | Description                                                                                                                           |
+|------------------|-----------------------------|---------|---------------------------------------------------------------------------------------------------------------------------------------|
+| `isInline`       | `boolean`                   | false   | If `true` the items will be stacked horizontally.                                                                                                                 |
+| `direction`        | `FlexProps["flexDirection"]`      |    | The direction to stack the items.                                                                                                    |
+| `spacing`       | `StyledSystem.MarginProps`      |         | The space between each stack item                                                                                               |
+| `align`       | `FlexProps["alignItems"]`      |         | The alignment of the stack item. Similar to `align-items`                                                                                               |
+| `justify`       | `FlexProps["justifyContent"]`      |         | The distribution of the stack item. Similar to `justify-content`                                                                                                  |
+| `shouldWrapChildren` | `boolean` | false  | If `true`, the children will be wrapped in a `Box` with `display: inline-block`, and the Box will take the spacing props |
+| `divider` | `boolean` | false  | If `true`, the stack items will be divided by a straight line |