Merge branch 'develop' into all-contributors/add-IHIutch

Author: codebender828

.all-contributorsrc

@@ -218,6 +218,35 @@
         "test",
         "doc"
       ]
+    },
+    {
+      "login": "HoukasaurusRex",
+      "name": "JT Houk",
+      "avatar_url": "https://avatars.githubusercontent.com/u/23695312?v=4",
+      "profile": "https://jt.houk.space/",
+      "contributions": [
+        "doc",
+        "platform"
+      ]
+    },
+    {
+      "login": "vincentpalma",
+      "name": "Vincent Palma",
+      "avatar_url": "https://avatars.githubusercontent.com/u/10133632?v=4",
+      "profile": "https://github.com/vincentpalma",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "MWFIAE",
+      "name": "Martin",
+      "avatar_url": "https://avatars.githubusercontent.com/u/6072971?v=4",
+      "profile": "https://github.com/MWFIAE",
+      "contributions": [
+        "code",
+        "test"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.changeset/config.json

@@ -8,5 +8,6 @@
   "linked": [],
   "access": "public",
   "baseBranch": "master",
-  "updateInternalDependencies": "patch"
+  "updateInternalDependencies": "patch",
+  "ignore": []
 }

README.md

@@ -218,7 +218,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/odanado"><img src="https://avatars.githubusercontent.com/u/6040962?v=4?s=50" width="50px;" alt=""/><br /><sub><b>odanado</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=odanado" title="Code">💻</a> <a href="#tool-odanado" title="Tools">🔧</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/IHIutch"><img src="https://avatars.githubusercontent.com/u/20825047?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Jonathan Hutchison</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=IHIutch" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/issues?q=author%3AIHIutch" title="Bug reports">🐛</a> <a href="#ideas-IHIutch" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=IHIutch" title="Tests">⚠️</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=IHIutch" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://jt.houk.space/"><img src="https://avatars.githubusercontent.com/u/23695312?v=4?s=50" width="50px;" alt=""/><br /><sub><b>JT Houk</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=HoukasaurusRex" title="Documentation">📖</a> <a href="#platform-HoukasaurusRex" title="Packaging/porting to new platform">📦</a></td>
+    <td align="center"><a href="https://github.com/vincentpalma"><img src="https://avatars.githubusercontent.com/u/10133632?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Vincent Palma</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=vincentpalma" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/MWFIAE"><img src="https://avatars.githubusercontent.com/u/6072971?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Martin</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=MWFIAE" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=MWFIAE" title="Tests">⚠️</a></td>
   </tr>
 </table>
 

packages/chakra-ui-core/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Change Log
 
+## 0.9.0
+
+### Minor Changes
+
+- [`5552440`](https://github.com/chakra-ui/chakra-ui-vue/commit/5552440eb8e0f1fb283c7dc263888bf09dcfa7b9) [#438](https://github.com/chakra-ui/chakra-ui-vue/pull/438) Thanks [@codebender828](https://github.com/codebender828)! - - This changeset adds a srcset support to the CImage component.
+  - Fixes merging of Popper.js modifiers
+  - Adds CGridItems components to the core 👏🏾
+
+## 0.8.1
+
+### Patch Changes
+
+- [`e640030`](https://github.com/chakra-ui/chakra-ui-vue/commit/e640030d277966a384261d1a90a1820335c4c007) [#418](https://github.com/chakra-ui/chakra-ui-vue/pull/418) Thanks [@codebender828](https://github.com/codebender828)! - Fix for close button to change color
+
+## 0.8.0
+
+### Minor Changes
+
+- [`8af1c07`](https://github.com/chakra-ui/chakra-ui-vue/commit/8af1c07404d2cfa94bb338e4268c5e0869a50776) Thanks [@codebender828](https://github.com/codebender828)! - Adds type definitions, aspect-ratio-box fixes, switch fixes and collapse fixes
+- feat: add type definition of component #380 by @odanado
+- feat: CCollapse now renders with collapsed height if initially closed by @codebender828 . closes #269
+- fix: Set ccollapse height to auto on enter complete, unless finalHeight wa... #384 by @IHIutch
+- fix: Add position: relative to switch label #396 by @IHIutch
+- fix: Deeply nested aspect-ratio by @IHIutch
+
 ## 0.7.4
 
 ### Patch Changes

packages/chakra-ui-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/vue",
-  "version": "0.7.4",
+  "version": "0.9.0",
   "description": "Build Accessible and Responsive Vue.js websites and applications with speed ⚡️",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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: `
       <div>
         <CBox
+          position="relative"
           w="300px"
           h="200px"
-          font-family="body"
-          objectFit="contain"
-          bgImg="url(https://lh3.googleusercontent.com/proxy/vG0O53R9-vPA2WpuC5lXWCHIVuIQiQ1R7bpQ1UcDsHnHVlz2BJMeSeJx1I1n4huq_SeB39iegxgQl1zXcnNqpq2IJfCgQwwWXpdRG9pNdA)"
+          overflow="hidden"
+          rounded="20px"
         >
-          <CBox h="full" bg="red.200" :w="1/2" />
+          <CBox
+            as="img"
+            font-family="body"
+            objectFit="contain"
+            src="https://images.unsplash.com/photo-1600002415506-dd06090d3480?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"
+          />
+          <CBox px="5" display="flex" flex-direction="column" justify-content="center" py="3" h="full" pos="absolute" top="0" left="0" bg="pink.200" w="50%">
+            <CBox as="h1" font-size="xl" font-weight="bold">
+              Tempations
+            </CBox>
+            <CBox as="p" font-size="md">
+              Spacial cakes for special moments.
+            </CBox>
+          </CBox>
         </CBox>
       </div>
     `

packages/chakra-ui-core/src/CCloseButton/CCloseButton.js

@@ -78,7 +78,6 @@ const CCloseButton = {
       }
     }, [h(CIcon, {
       props: {
-        color: props.color,
         name: 'close',
         size: iconSize
       },

packages/chakra-ui-core/src/CCloseButton/utils/closebutton.props.js

@@ -8,10 +8,6 @@ export default {
     type: Boolean,
     default: false
   },
-  color: {
-    type: String,
-    default: 'currentColor'
-  },
   ariaLabel: {
     type: String,
     default: 'Close'

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
+}

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)
       </div>
     `
   }))
+
+storiesOf('UI | Grid', module)
+  .add('Grid Items', () => ({
+    components: { CReset, CGrid, CGridItem },
+    template: `
+      <div>
+        <CReset />
+        <CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+          <CGridItem col-span="2" h="10" bg="blue.500" />
+          <CGridItem col-start="4" col-end="6" h="10" bg="red.500" />
+        </CGrid>
+      </div>
+    `
+  }))

packages/chakra-ui-core/src/CGrid/index.js

@@ -1,2 +1 @@
-import CGrid from './CGrid'
-export default CGrid
+export * from './CGrid'

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: `<CGrid ${inlineAttrs}>Grid Me</CGrid>`,
     ...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: `
+      <CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+        <CGridItem ${inlineAttrs}>I'm in a grid item</CGridItem>
+      </CGrid>`
+  })
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('should span columns', () => {
+  const inlineAttrs = 'col-span="2"'
+  const { asFragment } = renderComponent({
+    template: `
+      <CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+        <CGridItem ${inlineAttrs}>I'm in a grid item</CGridItem>
+      </CGrid>`
+  })
+  expect(asFragment()).toMatchSnapshot()
+})

packages/chakra-ui-core/src/CGrid/test/__snapshots__/CGrid.test.js.snap

@@ -11,6 +11,22 @@ exports[`should change gap 1`] = `
 </DocumentFragment>
 `;
 
+exports[`should offset columns 1`] = `
+<DocumentFragment>
+  <div
+    class="css-12kxrxg"
+    data-chakra-component="CGrid"
+  >
+    <div
+      class="css-1i8ejg0"
+      data-chakra-component="CGridItem"
+    >
+      I'm in a grid item
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
@@ -21,3 +37,19 @@ exports[`should render correctly 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`should span columns 1`] = `
+<DocumentFragment>
+  <div
+    class="css-12kxrxg"
+    data-chakra-component="CGrid"
+  >
+    <div
+      class="css-tuh9u2"
+      data-chakra-component="CGridItem"
+    >
+      I'm in a grid item
+    </div>
+  </div>
+</DocumentFragment>
+`;

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', {