Merge pull request #305 from chakra-ui/develop

chore: bug fixes and documentation improvements

Author: codebender828

.all-contributorsrc

@@ -146,6 +146,33 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "vishnumohanrk",
+      "name": "Vishnumohan R K",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/51525368?v=4",
+      "profile": "https://github.com/vishnumohanrk",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "freality",
+      "name": "Ken Love",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/15808?v=4",
+      "profile": "https://github.com/freality",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "gbschalch",
+      "name": "Guilherme Schalch",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/13435327?v=4",
+      "profile": "http://www.linkedin.com/in/schalch",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/semantic.yml

@@ -0,0 +1,15 @@
+# Always validate the PR title, and ignore the commits
+titleOnly: true
+
+# Require at least one commit to be valid
+# this is only relevant when using commitsOnly: true or titleAndCommits: true,
+# which validate all commits by default
+anyCommit: true
+
+# Allow use of Merge commits (eg on github: "Merge branch 'master' into feature/ride-unicorns")
+# this is only relevant when using commitsOnly: true (or titleAndCommits: true)
+allowMergeCommits: true
+
+# Allow use of Revert commits (eg on github: "Revert "feat: ride unicorns"")
+# this is only relevant when using commitsOnly: true (or titleAndCommits: true)
+allowRevertCommits: true

README.md

@@ -210,6 +210,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/Anmol270900"><img src="https://avatars2.githubusercontent.com/u/43845658?v=4" width="50px;" alt=""/><br /><sub><b>Anmol</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=Anmol270900" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/vishnumohanrk"><img src="https://avatars3.githubusercontent.com/u/51525368?v=4" width="50px;" alt=""/><br /><sub><b>Vishnumohan R K</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=vishnumohanrk" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/freality"><img src="https://avatars3.githubusercontent.com/u/15808?v=4" width="50px;" alt=""/><br /><sub><b>Ken Love</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=freality" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.linkedin.com/in/schalch"><img src="https://avatars3.githubusercontent.com/u/13435327?v=4" 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>
   </tr>
 </table>
 

package.json

@@ -33,7 +33,7 @@
     "release": "lerna version patch && lerna publish from-package",
     "push": "git add -A && git commit -m \"chore(lerna): publishing package \" && lerna version --conventional-commits",
     "clean": "lerna run clean",
-    "storybook": "STORYBOOK_VUE_DEV_TOOLS=1 start-storybook -p 9000",
+    "storybook": "cross-env STORYBOOK_VUE_DEV_TOOLS=1 start-storybook -p 9000",
     "storybook:devtools": "vue-devtools",
     "build-storybook": "build-storybook --quiet",
     "deploy-storybook": "storybook-to-ghpages -- --out=.out",

packages/chakra-ui-core/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 0.6.3
+
+### Patch Changes
+
+- fix: includes missing style props for border-radius and flex-grow style declarations"
+
+## 0.6.2
+
+### Patch Changes
+
+- 3533e00: Fix: CSwitch component v-model + @change event handler.
+
+## 0.6.2-next.0
+
+### Patch Changes
+
+- Fix: CSwitch component v-model + @change event handler.
+
 ## 0.6.1
 
 ### Patch Changes

packages/chakra-ui-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/vue",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "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/CFlex/CFlex.stories.js

@@ -22,3 +22,19 @@ storiesOf('UI | Flex', module)
       </CFlex>
     `
   }))
+  .add('Flex grow', () => ({
+    components: { CFlex, CBox, CText },
+    template: `
+      <CFlex w="600px" align="center">
+        <CBox flex-grow="2" w="10" mr="3" h="10" bg="blue.100">1</CBox>
+        <CBox rounded-top="lg" w="10" mr="3" h="10" bg="blue.100">1</CBox>
+        <CBox rounded-right="lg" w="10" mr="3" h="10" bg="blue.100">2</CBox>
+        <CBox rounded-bottom="lg" w="10" mr="3" h="10" bg="blue.100">3</CBox>
+        <CBox rounded-right="lg" w="10" mr="3" h="10" bg="blue.100">4</CBox>
+        <CBox border-top-right-radius="lg" w="10" mr="3" h="10" bg="blue.100">5</CBox>
+        <CBox border-top-left-radius="lg" w="10" mr="3" h="10" bg="blue.100">6</CBox>
+        <CBox border-bottom-right-radius="lg" w="10" mr="3" h="10" bg="blue.100">7</CBox>
+        <CBox border-bottom-left-radius="lg" w="10" h="10" bg="blue.100">8</CBox>
+      </CFlex>
+    `
+  }))

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

@@ -32,7 +32,7 @@ const CRadio = {
   props: {
     id: String,
     name: String,
-    value: String,
+    value: [String, Number],
     ariaLabel: String,
     ariaLabelledBy: String,
     variantColor: {

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

@@ -51,7 +51,7 @@ const CReset = {
     }
   },
   props: {
-    config: Object
+    config: Function
   },
   created () {
     const { color, bg, borderColor, placeholderColor } = this.styleConfig[this.colorMode]

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

@@ -8,7 +8,7 @@
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CSwitch/CSwitch.js
  */
 
-import { forwardProps, extractListeners } from '../utils'
+import { forwardProps } from '../utils'
 
 import CBox from '../CBox'
 import CVisuallyHidden from '../CVisuallyHidden'
@@ -29,6 +29,15 @@ const switchSizes = {
   }
 }
 
+/** Emits events for functional components */
+const emitFunctionalEvent = (fn, ...args) => {
+  if (fn && typeof fn === 'function') {
+    fn(...args)
+  } else if (Array.isArray(fn)) {
+    fn.forEach(handler => typeof handler === 'function' && handler(...args))
+  }
+}
+
 /**
  * CSwitch component
  *
@@ -101,18 +110,14 @@ const CSwitch = {
       }
     }
 
-    // Events
-    const nonNativeEvents = {
+    const eventListeners = {
+      ...listeners,
       change: (e) => {
-        const emitChange = listeners.change
-        if (emitChange && typeof emitChange === 'function') {
-          emitChange(!props.isChecked)
-        }
+        const newValue = !props.isChecked
+        emitFunctionalEvent(listeners.change, newValue, e)
       }
     }
 
-    const { native, nonNative } = extractListeners({ listeners }, nonNativeEvents)
-
     return h(CBox, {
       ...rest,
       props: {
@@ -142,8 +147,7 @@ const CSwitch = {
           checked: props.isChecked,
           disabled: props.isDisabled
         },
-        on: nonNative,
-        nativeOn: native
+        on: eventListeners
       }),
       h(CControlBox, {
         attrs: styleProps