Merge pull request #295 from chakra-ui/fix/switch-v-model

fix: CSwitch v-model works combined with `@change` event handler

Author: codebender828

.changeset/pre.json

@@ -0,0 +1,13 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@chakra-ui/vue": "0.6.1",
+    "@chakra-ui/theme-vue": "0.2.6",
+    "@chakra-ui/nuxt": "0.0.9",
+    "chakra-ui-docs": "0.5.1"
+  },
+  "changesets": [
+    "wise-donkeys-buy"
+  ]
+}

.changeset/wise-donkeys-buy.md

@@ -0,0 +1,6 @@
+---
+'@chakra-ui/vue': patch
+'@chakra-ui/nuxt': patch
+---
+
+Fix: CSwitch component v-model + @change event handler.

packages/chakra-ui-core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 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.2-next.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/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

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

@@ -44,3 +44,20 @@ storiesOf('UI | Switch', module)
       }
     }
   }))
+  .add('With v-model + @change', () => ({
+    components: { CBox, CSwitch },
+    data: () => ({
+      enable: false
+    }),
+    template: `
+      <p>
+        <span>{{enable}}</span>
+        <c-switch v-model="enable" id="email-alerts" @change="action"/>
+      </p>`,
+    methods: {
+      action: action('@change(event) + v-model'),
+      handleClick (e) {
+        console.log('Native event handler', e)
+      }
+    }
+  }))

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

@@ -49,3 +49,29 @@ test('properly handles v-model', async () => {
 
   expect(screen.getByText('enabled')).toBeInTheDocument()
 })
+
+/**
+ * Because the CSwitch is a functional component, it
+ * handles event emission differently when the
+ * consumer uses both v-model and the @change
+ * event listener.
+ */
+it('should emit a change event when v-model + event listener are provided', async () => {
+  const onChange = jest.fn()
+  renderComponent({
+    data: () => ({
+      enable: false
+    }),
+    template: `
+      <div>
+        <span>{{enable ? 'enabled' : 'disabled'}}</span>
+        <CSwitch v-model="enable" data-testid="switch" @change="handleChange" />
+      </div>`,
+    methods: { handleChange: onChange }
+  })
+
+  expect(screen.getByText('disabled')).toBeInTheDocument()
+  await userEvent.click(screen.getByTestId('switch'))
+  expect(screen.getByText('enabled')).toBeInTheDocument()
+  expect(onChange).toHaveBeenCalledTimes(1)
+})

packages/nuxt-chakra/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 0.0.10-next.0
+
+### Patch Changes
+
+- Fix: CSwitch component v-model + @change event handler.
+- Updated dependencies [undefined]
+  - @chakra-ui/vue@0.6.2-next.0
+
 ## 0.0.7
 
 ### Patch Changes

packages/nuxt-chakra/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/nuxt",
-  "version": "0.0.9",
+  "version": "0.0.10-next.0",
   "description": "Chakra UI Module for Nuxt.js",
   "repository": "https://github.com/chakra-ui/chakra-ui-vue",
   "license": "MIT",
@@ -18,7 +18,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@chakra-ui/vue": "^0.6.1",
+    "@chakra-ui/vue": "^0.6.2-next.0",
     "emotion": "^10.0.27"
   },
   "peerDependencies": {

website/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 0.5.2-next.0
+
+### Patch Changes
+
+- Updated dependencies [undefined]
+  - @chakra-ui/vue@0.6.2-next.0
+
 ## 0.5.1
 
 ### Patch Changes