From 8e80320ec5e0d39c85a0c7878f500c2d0ae256ac Mon Sep 17 00:00:00 2001 From: Daniel Olabemiwo Date: Tue, 27 Jun 2023 12:23:23 +0100 Subject: [PATCH 1/4] feat: stack component documentation --- .../content/examples/stack/BasicStack.vue | 16 ++ .../examples/stack/HorizontalStack.vue | 16 ++ .../examples/stack/HorizontalStackTwo.vue | 16 ++ .../content/examples/stack/HtmlStack.vue | 12 ++ .../content/examples/stack/ReverseStack.vue | 16 ++ content/4.components/stack.md | 141 ++++++++++++++++++ 6 files changed, 217 insertions(+) create mode 100644 components/content/examples/stack/BasicStack.vue create mode 100644 components/content/examples/stack/HorizontalStack.vue create mode 100644 components/content/examples/stack/HorizontalStackTwo.vue create mode 100644 components/content/examples/stack/HtmlStack.vue create mode 100644 components/content/examples/stack/ReverseStack.vue create mode 100644 content/4.components/stack.md diff --git a/components/content/examples/stack/BasicStack.vue b/components/content/examples/stack/BasicStack.vue new file mode 100644 index 0000000..e7a5af0 --- /dev/null +++ b/components/content/examples/stack/BasicStack.vue @@ -0,0 +1,16 @@ + + + diff --git a/components/content/examples/stack/HorizontalStack.vue b/components/content/examples/stack/HorizontalStack.vue new file mode 100644 index 0000000..255ebed --- /dev/null +++ b/components/content/examples/stack/HorizontalStack.vue @@ -0,0 +1,16 @@ + + + diff --git a/components/content/examples/stack/HorizontalStackTwo.vue b/components/content/examples/stack/HorizontalStackTwo.vue new file mode 100644 index 0000000..be76e82 --- /dev/null +++ b/components/content/examples/stack/HorizontalStackTwo.vue @@ -0,0 +1,16 @@ + + + diff --git a/components/content/examples/stack/HtmlStack.vue b/components/content/examples/stack/HtmlStack.vue new file mode 100644 index 0000000..9ff59fd --- /dev/null +++ b/components/content/examples/stack/HtmlStack.vue @@ -0,0 +1,12 @@ + + + diff --git a/components/content/examples/stack/ReverseStack.vue b/components/content/examples/stack/ReverseStack.vue new file mode 100644 index 0000000..d20f50d --- /dev/null +++ b/components/content/examples/stack/ReverseStack.vue @@ -0,0 +1,16 @@ + + + diff --git a/content/4.components/stack.md b/content/4.components/stack.md new file mode 100644 index 0000000..cd12a74 --- /dev/null +++ b/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 + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + +``` + +## 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 + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + +``` + +- Using the `CHStack` component. + +::showcase +::horizontal-stack-two +:: +:: + +```html + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + +``` + +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 + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + +``` + +### Stacking HTML elements + +::showcase +::html-stack +:: +:: + +```html + + Chakra component 1 +

HTML paragraph element

+

HTML heading element

+ Chakra component 2 + +``` + +## 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 | \ No newline at end of file From 894f4e684e6844165aa9a42a7ea700f7b4dccc6a Mon Sep 17 00:00:00 2001 From: Daniel Olabemiwo Date: Fri, 7 Jul 2023 08:45:37 +0100 Subject: [PATCH 2/4] refactor: change name casing stack --- content/4.components/stack.md | 88 +++++++++++++++++------------------ 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/content/4.components/stack.md b/content/4.components/stack.md index cd12a74..9f9fedd 100644 --- a/content/4.components/stack.md +++ b/content/4.components/stack.md @@ -32,16 +32,16 @@ import { CStack, CHStack, CVStack } from '@chakra-ui/vue-next'; :: ```html - - - See the Vue - Vue makes front-end development a breeze. - - - Go Nuxt! - Nuxt makes writing Vue even easier. - - + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + ``` ## Stack items horizontally @@ -56,16 +56,16 @@ You can stack the items horizontally either: :: ```html - - - See the Vue - Vue makes front-end development a breeze. - - - Go Nuxt! - Nuxt makes writing Vue even easier. - - + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + ``` - Using the `CHStack` component. @@ -76,16 +76,16 @@ You can stack the items horizontally either: :: ```html - - - See the Vue - Vue makes front-end development a breeze. - - - Go Nuxt! - Nuxt makes writing Vue even easier. - - + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + ``` Optionally, you can use align and justify to adjust the alignment and distribution of the items. @@ -100,16 +100,16 @@ Set `direction` to `row-reverse` or `column-reverse`. :: ```html - - - See the Vue - Vue makes front-end development a breeze. - - - Go Nuxt! - Nuxt makes writing Vue even easier. - - + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + ``` ### Stacking HTML elements @@ -120,12 +120,12 @@ Set `direction` to `row-reverse` or `column-reverse`. :: ```html - - Chakra component 1 + + Chakra component 1

HTML paragraph element

HTML heading element

- Chakra component 2 - + Chakra component 2 + ``` ## Props From f24703b71dd3a0cc0ada4758e38f121600d71729 Mon Sep 17 00:00:00 2001 From: Daniel Olabemiwo Date: Fri, 14 Jul 2023 15:06:28 +0100 Subject: [PATCH 3/4] refactor: change name casing stack --- .../content/examples/stack/BasicStack.vue | 26 ++++++++----------- .../examples/stack/HorizontalStack.vue | 26 ++++++++----------- .../examples/stack/HorizontalStackTwo.vue | 26 ++++++++----------- .../content/examples/stack/HtmlStack.vue | 14 ++++------ .../content/examples/stack/ReverseStack.vue | 26 ++++++++----------- 5 files changed, 49 insertions(+), 69 deletions(-) diff --git a/components/content/examples/stack/BasicStack.vue b/components/content/examples/stack/BasicStack.vue index e7a5af0..a45ff69 100644 --- a/components/content/examples/stack/BasicStack.vue +++ b/components/content/examples/stack/BasicStack.vue @@ -1,16 +1,12 @@ - - + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + + \ No newline at end of file diff --git a/components/content/examples/stack/HorizontalStack.vue b/components/content/examples/stack/HorizontalStack.vue index 255ebed..4517388 100644 --- a/components/content/examples/stack/HorizontalStack.vue +++ b/components/content/examples/stack/HorizontalStack.vue @@ -1,16 +1,12 @@ - - + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + + \ No newline at end of file diff --git a/components/content/examples/stack/HorizontalStackTwo.vue b/components/content/examples/stack/HorizontalStackTwo.vue index be76e82..a0b6e98 100644 --- a/components/content/examples/stack/HorizontalStackTwo.vue +++ b/components/content/examples/stack/HorizontalStackTwo.vue @@ -1,16 +1,12 @@ - - + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + + \ No newline at end of file diff --git a/components/content/examples/stack/HtmlStack.vue b/components/content/examples/stack/HtmlStack.vue index 9ff59fd..9e3ee7c 100644 --- a/components/content/examples/stack/HtmlStack.vue +++ b/components/content/examples/stack/HtmlStack.vue @@ -1,12 +1,8 @@ - - + Chakra component 2 + + \ No newline at end of file diff --git a/components/content/examples/stack/ReverseStack.vue b/components/content/examples/stack/ReverseStack.vue index d20f50d..6fd6903 100644 --- a/components/content/examples/stack/ReverseStack.vue +++ b/components/content/examples/stack/ReverseStack.vue @@ -1,16 +1,12 @@ - - + + + See the Vue + Vue makes front-end development a breeze. + + + Go Nuxt! + Nuxt makes writing Vue even easier. + + + \ No newline at end of file From 116aad9d201c55301d7a8853c8c39a80652d0650 Mon Sep 17 00:00:00 2001 From: Daniel Olabemiwo Date: Thu, 20 Jul 2023 23:05:36 +0100 Subject: [PATCH 4/4] chore: stack documentation review --- content/4.components/stack.md | 36 +++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/4.components/stack.md b/content/4.components/stack.md index 9f9fedd..18b40ea 100644 --- a/content/4.components/stack.md +++ b/content/4.components/stack.md @@ -6,7 +6,7 @@ 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. +Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. It composes the `CFlex` component. ## Import @@ -34,12 +34,12 @@ import { CStack, CHStack, CVStack } from '@chakra-ui/vue-next'; ```html - See the Vue - Vue makes front-end development a breeze. + See the Vue + Vue makes front-end development a breeze. - Go Nuxt! - Nuxt makes writing Vue even easier. + Go Nuxt! + Nuxt makes writing Vue even easier. ``` @@ -58,12 +58,12 @@ You can stack the items horizontally either: ```html - See the Vue - Vue makes front-end development a breeze. + See the Vue + Vue makes front-end development a breeze. - Go Nuxt! - Nuxt makes writing Vue even easier. + Go Nuxt! + Nuxt makes writing Vue even easier. ``` @@ -78,12 +78,12 @@ You can stack the items horizontally either: ```html - See the Vue - Vue makes front-end development a breeze. + See the Vue + Vue makes front-end development a breeze. - Go Nuxt! - Nuxt makes writing Vue even easier. + Go Nuxt! + Nuxt makes writing Vue even easier. ``` @@ -102,12 +102,12 @@ Set `direction` to `row-reverse` or `column-reverse`. ```html - See the Vue - Vue makes front-end development a breeze. + See the Vue + Vue makes front-end development a breeze. - Go Nuxt! - Nuxt makes writing Vue even easier. + Go Nuxt! + Nuxt makes writing Vue even easier. ``` @@ -124,7 +124,7 @@ Set `direction` to `row-reverse` or `column-reverse`. Chakra component 1

HTML paragraph element

HTML heading element

- Chakra component 2 + Chakra component 2 ```