feat(layout): add SimpleGrid component, test, examples

Author: koca

packages/layout/examples/base-simple-grid.vue

@@ -0,0 +1,22 @@
+<template>
+  <c-button size="sm" @click="minw = '200px'" mb="4"
+    >increase min width</c-button
+  >
+  <c-simple-grid
+    columns="2"
+    :spacingX="['5px', '40px']"
+    :spacingY="['5px', '20px']"
+    :minChildWidth="minw"
+  >
+    <c-box bg="tomato" height="80px"></c-box>
+    <c-box bg="tomato" height="80px"></c-box>
+    <c-box bg="tomato" height="80px"></c-box>
+    <c-box bg="tomato" height="80px"></c-box>
+    <c-box bg="tomato" height="80px"></c-box>
+  </c-simple-grid>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue-demi'
+
+const minw = ref('100px')
+</script>

packages/layout/src/index.ts

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

packages/layout/src/simple-grid.ts

@@ -0,0 +1,100 @@
+import { CIcon } from '@chakra-ui/c-icon'
+import {
+  HTMLChakraProps,
+  SystemProps,
+  ThemingProps,
+  useMultiStyleConfig,
+  useStyles,
+  StylesProvider,
+  ResponsiveValue,
+} from '@chakra-ui/vue-system'
+import { h, defineComponent, PropType, computed } from 'vue'
+import { chakra, DOMElements } from '@chakra-ui/vue-system'
+import { getValidChildren, SNAO } from '@chakra-ui/vue-utils'
+import { CGrid, GridProps } from './grid'
+import { isNull, isNumber, mapResponsive } from '@chakra-ui/utils'
+
+interface SimpleGridOptions {
+  /**
+   * The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.
+   */
+  minChildWidth?: GridProps['minWidth']
+  /**
+   * The number of columns
+   */
+  columns?: ResponsiveValue<number>
+  /**
+   * The gap between the grid items
+   */
+  spacing?: GridProps['gridGap']
+  /**
+   * The column gap between the grid items
+   */
+  spacingX?: GridProps['gridGap']
+  /**
+   * The row gap between the grid items
+   */
+  spacingY?: GridProps['gridGap']
+}
+
+export interface SimpleGridProps extends GridProps, SimpleGridOptions {}
+
+/**
+ * SimpleGrid
+ *
+ * Vue component make that providers a simpler interface, and
+ * make its easy to create responsive grid layouts.
+ *
+ * @see Docs https://vue.chakra-ui.com/docs/layout/simple-grid
+ */
+export const CSimpleGrid = defineComponent({
+  props: {
+    as: {
+      type: [Object, String] as PropType<DOMElements>,
+      default: 'ul',
+    },
+    minChildWidth: SNAO as PropType<SimpleGridProps['minWidth']>,
+    columns: SNAO as PropType<SimpleGridProps['columns']>,
+    spacing: SNAO as PropType<SimpleGridProps['gridGap']>,
+    spacingX: SNAO as PropType<SimpleGridProps['gridGap']>,
+    spacingY: SNAO as PropType<SimpleGridProps['gridGap']>,
+  },
+  setup(props, { slots, attrs }) {
+    const templateColumns = computed(() =>
+      props.minChildWidth
+        ? widthToColumns(props.minChildWidth)
+        : countToColumns(props.columns)
+    )
+
+    return () => {
+      return h(
+        CGrid,
+        {
+          label: 'simple-grid',
+          gap: props.spacing,
+          columnGap: props.spacingX,
+          rowGap: props.spacingY,
+          templateColumns: templateColumns.value,
+          ...attrs,
+        },
+        slots
+      )
+    }
+  },
+})
+
+function toPx(n: string | number) {
+  return isNumber(n) ? `${n}px` : n
+}
+
+function widthToColumns(width: any) {
+  return mapResponsive(width, (value) =>
+    isNull(value) ? null : `repeat(auto-fit, minmax(${toPx(value)}, 1fr))`
+  )
+}
+
+function countToColumns(count: any) {
+  return mapResponsive(count, (value) =>
+    isNull(value) ? null : `repeat(${value}, minmax(0, 1fr))`
+  )
+}

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

@@ -363,6 +363,40 @@ exports[`<CList /> <CListItem /> <CUnorderedList /> <COrderedList /> <CListIcon
 </DocumentFragment>
 `;
 
+exports[`<CSimpleGrid /> should render properly 1`] = `
+<DocumentFragment>
+  <div
+    class="chakra-simple-grid css-12tmpmw"
+  >
+    <div
+      class="chakra-box css-9rloc5"
+    >
+      simple 1
+    </div>
+    <div
+      class="chakra-box css-9rloc5"
+    >
+      simple 2
+    </div>
+    <div
+      class="chakra-box css-9rloc5"
+    >
+      simple 3
+    </div>
+    <div
+      class="chakra-box css-9rloc5"
+    >
+      simple 4
+    </div>
+    <div
+      class="chakra-box css-9rloc5"
+    >
+      simple 5
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`<CSquare /> & <CCircle /> should render properly 1`] = `
 <DocumentFragment>
   <div

packages/layout/tests/layout.test.ts

@@ -13,6 +13,7 @@ import {
   CLinkOverlay,
   CBadge,
   CStack,
+  CSimpleGrid,
   CVStack,
   CHStack,
   CGridItem,
@@ -328,3 +329,29 @@ describe('<CList /> <CListItem /> <CUnorderedList /> <COrderedList /> <CListIcon
     expect(asFragment()).toMatchSnapshot()
   })
 })
+
+describe('<CSimpleGrid />', () => {
+  const renderComponent = () =>
+    render({
+      components: { CSimpleGrid, CBox },
+      template: `
+      <c-simple-grid
+        columns="2"
+        :spacingX="['5px', '40px']"
+        :spacingY="['5px', '20px']"
+        minChildWidth="100px"
+      >
+        <c-box bg="tomato" height="80px">simple 1</c-box>
+        <c-box bg="tomato" height="80px">simple 2</c-box>
+        <c-box bg="tomato" height="80px">simple 3</c-box>
+        <c-box bg="tomato" height="80px">simple 4</c-box>
+        <c-box bg="tomato" height="80px">simple 5</c-box>
+      </c-simple-grid>
+      `,
+    })
+
+  it('should render properly', async () => {
+    const { asFragment } = renderComponent()
+    expect(asFragment()).toMatchSnapshot()
+  })
+})