From 8dc4127713c010d6eb9b51258af4bfe8db0289cd Mon Sep 17 00:00:00 2001 From: Martin Date: Mon, 26 Apr 2021 15:01:18 +0200 Subject: [PATCH 01/12] Add srcset support to CImage Fixes #422 --- packages/chakra-ui-core/src/CImage/CImage.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/chakra-ui-core/src/CImage/CImage.js b/packages/chakra-ui-core/src/CImage/CImage.js index 25b6c59a..f54e9162 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) => { From 4c4be7da3ab006ddfb7160f7a8b8bba6c0eb0597 Mon Sep 17 00:00:00 2001 From: MaySoMusician Date: Thu, 29 Apr 2021 16:27:05 +0900 Subject: [PATCH 02/12] fix: make CPopper's modifiers to be correctly merged --- .../chakra-ui-core/src/CPopper/CPopper.js | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) 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: { From c56d7851327696895ef8832a66c4b9f4c84648ed Mon Sep 17 00:00:00 2001 From: Martin Date: Tue, 4 May 2021 21:16:47 +0200 Subject: [PATCH 03/12] chore(tests): Added test for srcset in CImage --- packages/chakra-ui-core/src/CImage/tests/CImage.test.js | 7 +++++++ 1 file changed, 7 insertions(+) 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') + }) +}) From 1eddbe19eca319a50ec85f7ef487c60ad9a30cff Mon Sep 17 00:00:00 2001 From: Martin Date: Wed, 5 May 2021 10:47:46 +0200 Subject: [PATCH 04/12] feat(image): added srcset to the imageProps --- packages/chakra-ui-core/src/CImage/CImage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/chakra-ui-core/src/CImage/CImage.js b/packages/chakra-ui-core/src/CImage/CImage.js index f54e9162..a93cc3f9 100644 --- a/packages/chakra-ui-core/src/CImage/CImage.js +++ b/packages/chakra-ui-core/src/CImage/CImage.js @@ -72,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', { From 47ed88c718cd27080adb5d6018caf04884af640f Mon Sep 17 00:00:00 2001 From: IHIutch Date: Sun, 14 Mar 2021 12:53:34 -0400 Subject: [PATCH 05/12] Start adding CGridItem --- packages/chakra-ui-core/src/CGrid/CGrid.js | 77 +++++++++++++++++-- .../chakra-ui-core/src/CGrid/CGrid.stories.js | 16 +++- packages/chakra-ui-core/src/CGrid/index.js | 3 +- .../src/CSimpleGrid/CSimpleGrid.js | 2 +- packages/chakra-ui-core/src/index.js | 2 +- 5 files changed, 89 insertions(+), 11 deletions(-) diff --git a/packages/chakra-ui-core/src/CGrid/CGrid.js b/packages/chakra-ui-core/src/CGrid/CGrid.js index 93fc3caf..be26534d 100644 --- a/packages/chakra-ui-core/src/CGrid/CGrid.js +++ b/packages/chakra-ui-core/src/CGrid/CGrid.js @@ -10,7 +10,65 @@ */ import { createStyledAttrsMixin } from '../utils' -import { SNA } from '../config/props/props.types' +import { SNA, StringArray } from '../config/props/props.types' + +/** + * @description Map "span" values to accommodate breakpoint values + * @param {Array} value + * @returns {(String|Array)} String or Array of breakpoint values + */ +const spanFn = (value) => { + if (Array.isArray(value)) { + return value.map(v => + v === 'auto' ? 'auto' : `span ${v}/span ${v}` + ) + } else { + return value === 'auto' ? 'auto' : `span ${value}/span ${value}` + } +} + +/** + * CGridItem component + * + * A primitive component useful for grid layouts. + * + * @extends CBox + * @see Docs https://vue.chakra-ui.com/grid + */ + +const CGridItem = { + name: 'CGridItem', + mixins: [createStyledAttrsMixin('CGridItem')], + props: { + colSpan: { type: StringArray }, + rowSpan: { type: StringArray }, + colStart: { type: StringArray }, + colEnd: { type: StringArray }, + rowStart: { type: StringArray }, + rowEnd: { type: StringArray } + }, + computed: { + componentStyles () { + return { + gridColumn: this.colSpan ? spanFn(this.colSpan) : null, + gridRow: this.rowSpan ? spanFn(this.rowSpan) : null, + gridColumnStart: this.colStart, + gridColumnEnd: this.colEnd, + gridRowStart: this.rowStart, + gridRowEnd: this.rowEnd + } + } + }, + render (h) { + return h('div', + { + class: this.className, + attrs: this.computedAttrs + }, + this.$slots.default + ) + } +} /** * CGrid component @@ -61,11 +119,18 @@ const CGrid = { } }, render (h) { - return h(this.as, { - class: this.className, - attrs: this.computedAttrs - }, this.$slots.default) + return h( + this.as, + { + class: this.className, + attrs: this.computedAttrs + }, + this.$slots.default + ) } } -export default CGrid +export { + CGrid, + CGridItem +} diff --git a/packages/chakra-ui-core/src/CGrid/CGrid.stories.js b/packages/chakra-ui-core/src/CGrid/CGrid.stories.js index 7cfb30bd..36c5c7a6 100644 --- a/packages/chakra-ui-core/src/CGrid/CGrid.stories.js +++ b/packages/chakra-ui-core/src/CGrid/CGrid.stories.js @@ -1,5 +1,5 @@ import { storiesOf } from '@storybook/vue' -import { CReset, CGrid, CBox } from '..' +import { CReset, CGrid, CGridItem, CBox } from '..' storiesOf('UI | Grid', module) .add('Default Grid', () => ({ @@ -17,3 +17,17 @@ storiesOf('UI | Grid', module) ` })) + +storiesOf('UI | Grid', module) + .add('Grid Items', () => ({ + components: { CReset, CGrid, CGridItem }, + template: ` +
+ + + + + +
+ ` + })) diff --git a/packages/chakra-ui-core/src/CGrid/index.js b/packages/chakra-ui-core/src/CGrid/index.js index 6c9cd408..d9613022 100644 --- a/packages/chakra-ui-core/src/CGrid/index.js +++ b/packages/chakra-ui-core/src/CGrid/index.js @@ -1,2 +1 @@ -import CGrid from './CGrid' -export default CGrid +export * from './CGrid' 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' From 0ee84a9aaa201d950bf208853f0344176e5f2e95 Mon Sep 17 00:00:00 2001 From: IHIutch Date: Sun, 14 Mar 2021 13:04:35 -0400 Subject: [PATCH 06/12] Fix import --- packages/chakra-ui-core/src/CGrid/test/CGrid.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/chakra-ui-core/src/CGrid/test/CGrid.test.js b/packages/chakra-ui-core/src/CGrid/test/CGrid.test.js index e8e035f6..c19fc834 100644 --- a/packages/chakra-ui-core/src/CGrid/test/CGrid.test.js +++ b/packages/chakra-ui-core/src/CGrid/test/CGrid.test.js @@ -1,4 +1,4 @@ -import CGrid from '..' +import { CGrid } from '..' import { render } from '@/tests/test-utils' const renderComponent = (props) => { From 6d30004f5b64cdb562a7d453712d7cc6ef6f742d Mon Sep 17 00:00:00 2001 From: IHIutch Date: Sat, 5 Jun 2021 10:09:18 -0400 Subject: [PATCH 07/12] Add tests --- .../src/CGrid/test/CGrid.test.js | 26 +++++++++++++-- .../test/__snapshots__/CGrid.test.js.snap | 32 +++++++++++++++++++ 2 files changed, 56 insertions(+), 2 deletions(-) diff --git a/packages/chakra-ui-core/src/CGrid/test/CGrid.test.js b/packages/chakra-ui-core/src/CGrid/test/CGrid.test.js index c19fc834..7aa3ea22 100644 --- a/packages/chakra-ui-core/src/CGrid/test/CGrid.test.js +++ b/packages/chakra-ui-core/src/CGrid/test/CGrid.test.js @@ -1,10 +1,10 @@ -import { CGrid } from '..' +import { CGrid, CGridItem } from '..' import { render } from '@/tests/test-utils' const renderComponent = (props) => { const inlineAttrs = (props && props.inlineAttrs) || '' const base = { - components: { CGrid }, + components: { CGrid, CGridItem }, template: `Grid Me`, ...props } @@ -23,3 +23,25 @@ it('should change gap', () => { expect(asFragment()).toMatchSnapshot() }) + +it('should offset columns', () => { + const inlineAttrs = 'col-start="4" col-end="6"' + const { asFragment } = renderComponent({ + template: ` + + I'm in a grid item + ` + }) + expect(asFragment()).toMatchSnapshot() +}) + +it('should span columns', () => { + const inlineAttrs = 'col-span="2"' + const { asFragment } = renderComponent({ + template: ` + + I'm in a grid item + ` + }) + expect(asFragment()).toMatchSnapshot() +}) diff --git a/packages/chakra-ui-core/src/CGrid/test/__snapshots__/CGrid.test.js.snap b/packages/chakra-ui-core/src/CGrid/test/__snapshots__/CGrid.test.js.snap index eb89f731..c14e6ff7 100644 --- a/packages/chakra-ui-core/src/CGrid/test/__snapshots__/CGrid.test.js.snap +++ b/packages/chakra-ui-core/src/CGrid/test/__snapshots__/CGrid.test.js.snap @@ -11,6 +11,22 @@ exports[`should change gap 1`] = ` `; +exports[`should offset columns 1`] = ` + +
+
+ I'm in a grid item +
+
+ +`; + exports[`should render correctly 1`] = `
`; + +exports[`should span columns 1`] = ` + +
+
+ I'm in a grid item +
+
+ +`; From b072690412de313e6db3503132d442eface54561 Mon Sep 17 00:00:00 2001 From: IHIutch Date: Sat, 5 Jun 2021 10:39:44 -0400 Subject: [PATCH 08/12] Update docs --- website/pages/grid.mdx | 44 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/website/pages/grid.mdx b/website/pages/grid.mdx index 5b373fff..f722983b 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. | From 30b08d1e8a4e720b3070b14037c116bc710181f6 Mon Sep 17 00:00:00 2001 From: IHIutch Date: Thu, 10 Jun 2021 16:45:35 -0400 Subject: [PATCH 09/12] Fix grid item example --- website/pages/grid.mdx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/website/pages/grid.mdx b/website/pages/grid.mdx index f722983b..e0c45771 100644 --- a/website/pages/grid.mdx +++ b/website/pages/grid.mdx @@ -55,8 +55,14 @@ time. 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 - - + + @@ -69,8 +75,8 @@ Pass the `colStart` and `colEnd` prop to `CGridItem` component to make an elemen ```vue live=true - - + + ``` From 5552440eb8e0f1fb283c7dc263888bf09dcfa7b9 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Sat, 12 Jun 2021 09:35:30 +0800 Subject: [PATCH 10/12] chore: release 1.9.0 changeset --- .changeset/small-bikes-wink.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/small-bikes-wink.md diff --git a/.changeset/small-bikes-wink.md b/.changeset/small-bikes-wink.md new file mode 100644 index 00000000..ff49663d --- /dev/null +++ b/.changeset/small-bikes-wink.md @@ -0,0 +1,6 @@ +--- +'@chakra-ui/vue': minor +'chakra-ui-docs': minor +--- + +This changeset adds a srcset support to the CImage component. Fixes merging of Popper.js modifiers, and adds CGridItems components to the core 👏🏾 From c0d609cd2553c38449851de6cce0cae3218e4f0b Mon Sep 17 00:00:00 2001 From: codebender828 Date: Sat, 12 Jun 2021 10:38:15 +0800 Subject: [PATCH 11/12] fix: update CBox storybook --- .../chakra-ui-core/src/CBox/CBox.stories.js | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/chakra-ui-core/src/CBox/CBox.stories.js b/packages/chakra-ui-core/src/CBox/CBox.stories.js index 636d71c2..cddad12d 100644 --- a/packages/chakra-ui-core/src/CBox/CBox.stories.js +++ b/packages/chakra-ui-core/src/CBox/CBox.stories.js @@ -1,5 +1,5 @@ import { storiesOf } from '@storybook/vue' -import { CBox } from '..' +import CBox from '../CBox' storiesOf('UI | Box', module) .add('Box', () => ({ @@ -28,13 +28,26 @@ storiesOf('UI | Box', module) template: `
- + + + + Tempations + + + Spacial cakes for special moments. + +
` From 8a1569dd17b03a700b72d527e80e16837a975c3b Mon Sep 17 00:00:00 2001 From: codebender828 Date: Sat, 12 Jun 2021 10:39:09 +0800 Subject: [PATCH 12/12] chore: update changes set documentation --- .changeset/small-bikes-wink.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.changeset/small-bikes-wink.md b/.changeset/small-bikes-wink.md index ff49663d..a1c31e8a 100644 --- a/.changeset/small-bikes-wink.md +++ b/.changeset/small-bikes-wink.md @@ -3,4 +3,6 @@ 'chakra-ui-docs': minor --- -This changeset adds a srcset support to the CImage component. Fixes merging of Popper.js modifiers, and adds CGridItems components to the core 👏🏾 +- This changeset adds a srcset support to the CImage component. +- Fixes merging of Popper.js modifiers +- Adds CGridItems components to the core 👏🏾