feat(layout): add Spacer component, test, example

Author: koca

packages/layout/examples/base-spacer.vue

@@ -0,0 +1,7 @@
+<template>
+  <c-flex>
+    <c-box p="4" bg="red.400"> Box 1 </c-box>
+    <c-spacer />
+    <c-box p="4" bg="green.400"> Box 2 </c-box>
+  </c-flex>
+</template>

packages/layout/src/index.ts

@@ -11,4 +11,5 @@ export * from './link-box'
 export * from './list'
 export * from './kbd'
 export * from './simple-grid'
+export * from './spacer'
 export * from './stack'

packages/layout/src/spacer.ts

@@ -0,0 +1,29 @@
+import { chakra, HTMLChakraProps } from '@chakra-ui/vue-system'
+import { defineComponent, h } from '@vue/runtime-core'
+
+export interface SpacerProps extends HTMLChakraProps<'div'> {}
+
+/**
+ * A flexible flex spacer that expands along the major axis of its containing flex layout.
+ * It renders a `div` by default, and takes up any available space.
+ *
+ * @see Docs https://chakra-ui.com/docs/layout/flex#using-the-spacer
+ */
+export const CSpacer = defineComponent({
+  setup(propss, { slots }) {
+    return () => {
+      return h(
+        chakra('div', {
+          label: 'spacer',
+          baseStyle: {
+            flex: 1,
+            justifySelf: 'stretch',
+            alignSelf: 'stretch',
+          },
+        }),
+        {},
+        slots
+      )
+    }
+  },
+})

packages/layout/tests/__snapshots__/layout.test.ts.snap

@@ -397,6 +397,28 @@ exports[`<CSimpleGrid /> should render properly 1`] = `
 </DocumentFragment>
 `;
 
+exports[`<CSpacer /> should render properly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-1xhj18k"
+  >
+    <div
+      class="chakra-box css-zzdd9b"
+    >
+       Box 1 
+    </div>
+    <div
+      class="chakra-spacer css-17xejub"
+    />
+    <div
+      class="chakra-box css-pp1cg2"
+    >
+       Box 2 
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`<CSquare /> & <CCircle /> should render properly 1`] = `
 <DocumentFragment>
   <div

packages/layout/tests/layout.test.ts

@@ -15,6 +15,7 @@ import {
   CStack,
   CSimpleGrid,
   CVStack,
+  CSpacer,
   CHStack,
   CGridItem,
   CKbd,
@@ -24,6 +25,7 @@ import {
   CUnorderedList,
   CListIcon,
 } from '../src'
+import { CFlex } from '@chakra-ui/vue-next'
 import { render, testA11y } from '../../test-utils/src'
 
 describe('<CLink />', () => {
@@ -355,3 +357,22 @@ describe('<CSimpleGrid />', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 })
+
+describe('<CSpacer />', () => {
+  const renderComponent = () =>
+    render({
+      components: { CFlex, CSpacer, CBox },
+      template: `
+      <c-flex>
+        <c-box p="4" bg="red.400"> Box 1 </c-box>
+        <c-spacer />
+        <c-box p="4" bg="green.400"> Box 2 </c-box>
+      </c-flex>
+      `,
+    })
+
+  it('should render properly', async () => {
+    const { asFragment } = renderComponent()
+    expect(asFragment()).toMatchSnapshot()
+  })
+})