Merge pull request #408 from chakra-ui/develop

chore: release @chakra-ui/vue@0.8.0 | @chakra-ui/nuxt@0.3.0 🎉

Author: codebender828

.all-contributorsrc

@@ -195,6 +195,36 @@
         "example",
         "code"
       ]
+    },
+    {
+      "login": "odanado",
+      "name": "odanado",
+      "avatar_url": "https://avatars.githubusercontent.com/u/6040962?v=4",
+      "profile": "https://github.com/odanado",
+      "contributions": [
+        "code",
+        "tool"
+      ]
+    },
+    {
+      "login": "IHIutch",
+      "name": "Jonathan Hutchison",
+      "avatar_url": "https://avatars.githubusercontent.com/u/20825047?v=4",
+      "profile": "https://github.com/IHIutch",
+      "contributions": [
+        "code",
+        "bug",
+        "ideas"
+      ]
+    },
+    {
+      "login": "HoukasaurusRex",
+      "name": "JT Houk",
+      "avatar_url": "https://avatars.githubusercontent.com/u/23695312?v=4",
+      "profile": "https://jt.houk.space/",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/workflows/release.yml

@@ -51,6 +51,7 @@ jobs:
       uses: changesets/action@master
       with:
         publish: yarn release
+        title: "chore(release): version packages"
         commit: "chore(release): version packages"
       env:
         NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -215,6 +215,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="http://www.linkedin.com/in/schalch"><img src="https://avatars3.githubusercontent.com/u/13435327?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Guilherme Schalch</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=gbschalch" title="Code">💻</a></td>
     <td align="center"><a href="http://www.be-codified.com"><img src="https://avatars1.githubusercontent.com/u/10107183?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Žiga Vukčevič</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=be-codified" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/carwack"><img src="https://avatars3.githubusercontent.com/u/16015740?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Sybren W</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Documentation">📖</a> <a href="#content-carwack" title="Content">🖋</a> <a href="#example-carwack" title="Examples">💡</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Code">💻</a></td>
+    <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://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></td>
+    <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></td>
   </tr>
 </table>
 

package.json

@@ -41,6 +41,8 @@
     "docs:lint": "yarn workspace chakra-ui-docs lint",
     "theme:dev": "yarn workspace @chakra-ui/theme-vue build",
     "docs-dev": "yarn workspace chakra-ui-docs dev",
+    "docs-build": "yarn workspace chakra-ui-docs build",
+    "docs-serve": "yarn workspace chakra-ui-docs nuxt start",
     "evalbundle": "bundlesize"
   },
   "dependencies": {

packages/chakra-ui-core/CHANGELOG.md

@@ -1,11 +1,24 @@
 # Change Log
 
+## 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
 
 - [`951906a`](https://github.com/chakra-ui/chakra-ui-vue/commit/951906a61deabdcf1d3f04b7f8f9fdeaad1f3841) [#375](https://github.com/chakra-ui/chakra-ui-vue/pull/375) Thanks [@codebender828](https://github.com/codebender828)! - Added support for Feather Icons to Nuxt.js
 
+* fix(nuxt): nuxt module icon parsing
+
 ## 0.7.3
 
 ## 0.7.2

packages/chakra-ui-core/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@chakra-ui/vue",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "Build Accessible and Responsive Vue.js websites and applications with speed ⚡️",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
+  "types": "types/index.d.ts",
   "sideEffects": false,
   "maintainers": [
     "Jonathan Bakebwa <jonas@akkadu-team.com>"
@@ -27,7 +28,8 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "types"
   ],
   "bundle-phobia": {
     "max-size": "85KB",

packages/chakra-ui-core/src/CAccordion/CAccordion.stories.js

@@ -32,6 +32,7 @@ storiesOf('UI | Accordion', module)
           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
           veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
           commodo consequat.
+        </CAccordionPanel>
       </CAccordionItem>
     </CAccordion>
     `

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

@@ -65,7 +65,7 @@ const CAspectRatioBox = {
         left: 0,
         ...vnode.data.attrs
       }
-    })
+    }, vnode.componentOptions.children || [])
 
     return h('div', {
       class: this.className,

packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.stories.js

@@ -22,3 +22,23 @@ storiesOf('UI | AspectRatioBox', module)
       }
     }
   }))
+  .add('Nested Elements', () => ({
+    components: { CAspectRatioBox, CBox },
+    template: `
+      <div style="width: 100vh; height: 100vw;">
+        <CAspectRatioBox maxW="560px" :ratio="16 / 9" bg="gray.200">
+          <CFlex align="center" justify="center">
+            <CBox text-align="center">
+              <CHeading>See the Vue</CHeading>
+              <CText mt="4">Vue makes front-end development a breeze.</CText>
+            </CBox>
+          </CFlex>
+        </CAspectRatioBox>
+      </div>
+    `,
+    data () {
+      return {
+        showCollapsed: true
+      }
+    }
+  }))

packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js

@@ -6,7 +6,9 @@ const renderComponent = (props) => {
     components: { CAspectRatioBox, CBox },
     template: `
     <CAspectRatioBox maxW="400px" data-testid="aspectRatioBox" ${inlineAttrs}>
-      <CBox as="img" src="https://bit.ly/naruto-sage" alt="naruto" objectFit="cover" data-testid="image" />
+      <CBox data-testid="child">
+        <CBox as="img" src="https://bit.ly/naruto-sage" alt="naruto" objectFit="cover" h="100%" w="100%" data-testid="image" />
+      </CBox>
     </CAspectRatioBox>
     `,
     ...props
@@ -22,35 +24,50 @@ it('should render correctly', () => {
   const [emotionClassName] = [...screen.getByTestId('aspectRatioBox').classList]
   const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
 
-  expect(pseudoStyles).toContain(`
+  expect(pseudoStyles).toContain(
+    `
     padding-bottom: 100%
-  `.trim())
+  `.trim()
+  )
 })
 
 it('should have correct styles', () => {
   const inlineAttrs = ':ratio="2"'
   renderComponent({ inlineAttrs })
   const image = screen.getByTestId('image')
   const aspectRatioBox = screen.getByTestId('aspectRatioBox')
+  const child = screen.getByTestId('child')
 
   const [emotionClassName] = [...aspectRatioBox.classList] // second className has the pseudo styles
   const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
 
-  expect(pseudoStyles).toContain(`
+  expect(pseudoStyles).toContain(
+    `
     padding-bottom: 50%
-  `.trim())
+  `.trim()
+  )
 
   expect(aspectRatioBox).toHaveStyle(`
     max-width: 400px;
     position: relative;
   `)
 
-  expect(image).toHaveStyle(`
-    object-fit: cover;
+  // aspectRatioBox should contain exactly 1 immediate child
+  expect(aspectRatioBox.childElementCount).toEqual(1)
+
+  expect(child).toHaveStyle(`
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
   `)
+
+  expect(child).not.toBeEmpty()
+
+  expect(image).toHaveStyle(`
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  `)
 })