`;
+
+exports[`should span columns 1`] = `
+
+
+
+ I'm in a grid item
+
+
+`;
diff --git a/packages/chakra-ui-core/src/CImage/CImage.js b/packages/chakra-ui-core/src/CImage/CImage.js
index 25b6c59a..a93cc3f9 100644
--- a/packages/chakra-ui-core/src/CImage/CImage.js
+++ b/packages/chakra-ui-core/src/CImage/CImage.js
@@ -25,6 +25,7 @@ const CImage = {
mixins: [createStyledAttrsMixin('CImage')],
props: {
src: String,
+ srcset: String,
fallbackSrc: String,
ignoreFalback: Boolean,
htmlWidth: String,
@@ -48,12 +49,13 @@ const CImage = {
created () {
// Should only invoke window.Image in the browser.
if (process.browser) {
- this.loadImage(this.src)
+ this.loadImage(this.src, this.srcset)
}
},
methods: {
- loadImage (src) {
+ loadImage (src, srcset) {
const image = new window.Image()
+ image.srcset = srcset
image.src = src
image.onload = (event) => {
@@ -70,9 +72,9 @@ const CImage = {
render (h) {
let imageProps
if (this.ignoreFallback) {
- imageProps = { src: this.src }
+ imageProps = { src: this.src, srcset: this.srcset }
} else {
- imageProps = { src: this.hasLoaded ? this.src : this.fallbackSrc }
+ imageProps = { src: this.hasLoaded ? this.src : this.fallbackSrc, srcset: this.srcset }
}
return h(CNoSsr, [
h('img', {
diff --git a/packages/chakra-ui-core/src/CImage/tests/CImage.test.js b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
index 3b6feaff..04836872 100644
--- a/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
+++ b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
@@ -45,3 +45,10 @@ it('fallback src works', async () => {
expect(screen.getByAltText(/Mesut Koca/i)).toHaveAttribute('src', 'LOAD_FALLBACK_SRC')
})
})
+
+it('srcset works', async () => {
+ renderComponent({ template: '
' })
+ await wait(() => {
+ expect(screen.getByAltText(/My Image Description/i)).toHaveAttribute('srcset', 'LOAD_SUCCESS_SRC 400w')
+ })
+})
diff --git a/packages/chakra-ui-core/src/CPopper/CPopper.js b/packages/chakra-ui-core/src/CPopper/CPopper.js
index d495e05b..44fd5c0e 100644
--- a/packages/chakra-ui-core/src/CPopper/CPopper.js
+++ b/packages/chakra-ui-core/src/CPopper/CPopper.js
@@ -42,6 +42,27 @@ function flipPlacement (placement) {
}
}
+/**
+ * Call _.merge() for each item of `object` array with the corresponding
+ * item of `source` array
+ * @param {*} object The destination Modifiers array.
+ * @param {*} source The source array.
+ * @returns Returns merged `array`
+ */
+function mergeModifiers (object, source) {
+ if (!Array.isArray(object)) throw new Error('`object` must be an array')
+
+ const _source = Array.isArray(source) ? source : [source]
+
+ object.forEach((o) => {
+ const { name } = o
+ const _s = _source.find(s => s.name === name)
+ if (_s) merge(o, _s)
+ })
+
+ return object
+}
+
/**
* CPopper component
*
@@ -153,7 +174,7 @@ const CPopper = {
return ref
},
computedModifiers () {
- return merge([
+ return mergeModifiers([
this.usePortal && {
name: 'preventOverflow',
options: {
diff --git a/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js b/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js
index e4b7dd9b..e8a71fe0 100644
--- a/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js
+++ b/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js
@@ -8,7 +8,7 @@
* @see Source https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js
*/
-import CGrid from '../CGrid'
+import { CGrid } from '../CGrid'
import { SNA } from '../config/props/props.types'
import { createStyledAttrsMixin } from '../utils'
import { countToColumns, widthToColumns } from './utils/grid.styles'
diff --git a/packages/chakra-ui-core/src/index.js b/packages/chakra-ui-core/src/index.js
index 6b3ca0b7..3b380c32 100644
--- a/packages/chakra-ui-core/src/index.js
+++ b/packages/chakra-ui-core/src/index.js
@@ -55,7 +55,7 @@ export { default as CFormHelperText } from './CFormHelperText'
export { default as CFragment } from './CFragment'
// G
-export { default as CGrid } from './CGrid'
+export * from './CGrid'
// H
export { default as CHeading } from './CHeading'
diff --git a/website/pages/grid.mdx b/website/pages/grid.mdx
index 5b373fff..e0c45771 100644
--- a/website/pages/grid.mdx
+++ b/website/pages/grid.mdx
@@ -1,4 +1,4 @@
-import SEO from "../components/SEO";
+import SEO from '../components/SEO'
```
+## Spanning Columns
+
+In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution. To achieve this, you need to pass the `colSpan` prop to the `CGridItem` component to span across columns and also pass the `rowSpan` component to span across rows. You also need to specify the `templateColumns` and `templateRows`.
+
+```vue live=true
+
+
+
+
+
+
+```
+
+## Starting and Ending Lines
+
+Pass the `colStart` and `colEnd` prop to `CGridItem` component to make an element start or end at the `nth` grid position.
+
+```vue live=true
+
+
+
+
+```
+
## Props
-> `CGrid` composes the `CBox` component. So it accepts all Box props along with the related CSS grid props. See [Box](/box#props) component for list of props
\ No newline at end of file
+> `CGrid` composes the `CBox` component. So it accepts all Box props along with the related CSS grid props. See [Box](/box#props) component for list of props
+
+### `CGridItem` Props
+
+> `CGridItem` composes `CBox` so you can pass all `CBox` props.
+
+| Name | Type | Description |
+| -------- | -------- | ------------------------------------------------ |
+| colSpan | `number` | The number of columns the grid item should span. |
+| colStart | `number` | The column number the grid item should start. |
+| colEnd | `number` | The column number the grid item should end. |
+| rowSpan | `number` | The number of rows the grid item should span. |
+| rowStart | `number` | The row number the grid item should start. |
+| rowEnd | `number` | The row number the grid item should end. |