Merge pull request #408 from chakra-ui/develop

chore: release @chakra-ui/[email protected] | @chakra-ui/[email protected] 🎉

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 <[email protected]>"
@@ -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%;
+  `)
 })

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

@@ -7,13 +7,19 @@ exports[`should render correctly 1`] = `
     data-chakra-component="CAspectRatioBox"
     data-testid="aspectRatioBox"
   >
-    <img
-      alt="naruto"
-      class="css-1mlkgdx"
+    <div
+      class="css-k57fb3"
       data-chakra-component="CBox"
-      data-testid="image"
-      src="https://bit.ly/naruto-sage"
-    />
+      data-testid="child"
+    >
+      <img
+        alt="naruto"
+        class="css-ygtapu"
+        data-chakra-component="CBox"
+        data-testid="image"
+        src="https://bit.ly/naruto-sage"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;

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

@@ -125,6 +125,7 @@ const CSwitch = {
         as: 'label'
       },
       attrs: {
+        position: 'relative',
         display: 'inline-block',
         verticalAlign: 'middle',
         ...data.attrs,

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

@@ -3,7 +3,7 @@
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <label
-    class="css-v7ibj3"
+    class="css-lncjus"
     data-chakra-component="CSwitch"
     data-testid="switch"
   >

packages/chakra-ui-core/src/CTransition/Transition.js

@@ -486,7 +486,7 @@ const CAnimateHeight = {
           height: [this.initialHeight || 0, this.finalHeight || height],
           easing: this.enterEasing,
           duration: this.duration,
-          complete
+          complete: () => { el.style.height = this.finalHeight || 'auto' }
         })
       })
     },

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

@@ -6,39 +6,9 @@ import { createClientDirective } from '../directives'
 import defaultTheme from '../../../chakra-ui-theme/src'
 import useToast from '../CToast'
 
-/**
- * @typedef {Object} Theme Chakra UI Theme object
- * @property {Object} breakpoints
- * @property {Object} zIndices
- * @property {Object} radii
- * @property {Object} opacity
- * @property {Object} borders
- * @property {Object} colors
- * @property {Object} borderWidths
- * @property {Object} sizes
- * @property {Object} shadows
- * @property {Object} space
- * @property {Object} fontSizes
- * @property {Object} fonts
- * @property {Object} fontWeights
- * @property {Object} lineHeights
- * @property {Object} letterSpacings
- */
-
-/**
- * @typedef {Object} Options
- * @property {Theme} theme
- * @property {Theme} extendTheme
- * @property {Object} icons
- * @property {Object} icons.extend
- * @property {String} icons.iconPack
- * @property {Object} icons.iconSet
- *
- */
-
 /**
  * Chakra-ui Component library plugin
- * @type {Chakra}
+ * @type {import("../../types").default}
  */
 const Chakra = {
   /**

packages/chakra-ui-core/types/chakra.d.ts

@@ -0,0 +1,34 @@
+import { PluginObject } from "vue"
+
+export type Theme = {
+  breakpoints: any
+  zIndices: any
+  radii: any
+  opacity: any
+  borders: any
+  colors: any
+  borderWidths: any
+  sizes: any
+  shadows: any
+  space: any
+  fontSizes: any
+  fonts: any
+  fontWeights: any
+  lineHeights: any
+  letterSpacings: any
+}
+
+export type Options = {
+  theme: Theme
+  extendTheme: Theme
+  icons: {
+      extend: any
+      iconPack: string
+      iconSet: any
+  }
+}
+
+export type Chakra = PluginObject<Options>
+
+declare let chakra: Chakra
+export default chakra