refactor(toggle): change event name and remove unused imports (#501)

packages/vue/src/toggle/Toggle.vue

@@ -19,16 +19,16 @@ export type ToggleEmits = {
   /**
    * The callback that fires when the state of the toggle changes.
    */
-  'update:modelValue': [pressed: boolean]
+  'update:pressed': [pressed: boolean]
   pressedChange: [pressed: boolean]
   click: [event: MouseEvent]
 }
 
 </script>
 
 <script setup lang="ts">
-import { computed, defineOptions } from 'vue'
-import { useComponentRef, useControllable, useVModel } from '@oku-ui/use-composable'
+import { defineOptions } from 'vue'
+import { useComponentRef, useVModel } from '@oku-ui/use-composable'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { Primitive } from '@oku-ui/primitive'
 
@@ -40,22 +40,20 @@ const props = withDefaults(defineProps<ToggleProps>(), {
   pressed: undefined,
   defaultPressed: false,
   disabled: false,
+  is: 'button',
 })
 
 const emits = defineEmits<ToggleEmits>()
 
 const { componentRef, currentElement } = useComponentRef<HTMLButtonElement | null>()
 
-const modelValue = useVModel(props, 'pressed', emits)
-
-const [pressed, setPressed] = useControllable({
-  prop: computed(() => modelValue.value),
-  defaultProp: computed(() => props.defaultPressed),
-  onChange: (result) => {
-    emits('pressedChange', result)
-    emits('update:modelValue', result)
+const pressed = useVModel(props, 'pressed', emits, {
+  defaultValue: props.defaultPressed,
+  passive: (props.pressed === undefined) as false,
+  shouldEmit(v: any) {
+    emits('pressedChange', v)
+    return true
   },
-  initialValue: false,
 })
 
 defineExpose({
@@ -65,9 +63,10 @@ defineExpose({
 
 <template>
   <Primitive
-    v-bind="props"
-    is="button"
+    :is="props.is"
     ref="componentRef"
+    :as-child="props.asChild"
+    :disabled="props.disabled"
     type="button"
     :aria-pressed="pressed"
     :data-state="pressed ? 'on' : 'off'"
@@ -76,7 +75,7 @@ defineExpose({
       emits('click', event)
     }, () => {
       if (!props.disabled)
-        setPressed(!pressed)
+        pressed = !pressed
     })($event)"
   >
     <slot />

packages/vue/src/toggle/stories/Styled.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { OkuToggle } from '@oku-ui/toggle'
+
 </script>
 
 <template>

packages/vue/src/toggle/tests/__snapshots__/toggle.test.ts.snap

@@ -1,25 +1,25 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`okuToggle > should render OkuToggle correctly 1`] = `"<button defaultpressed="false" type="button" aria-pressed="false" data-state="off">Like</button>"`;
+exports[`okuToggle > should render OkuToggle correctly 1`] = `"<button type="button" aria-pressed="false" data-state="off">Like</button>"`;
 
 exports[`okuToggle Stories > chromatic > should render correctly 1`] = `
 "<h1>Uncontrolled</h1>
 <h2>Off</h2>
-<button defaultpressed="false" type="button" aria-pressed="false" data-state="off" class="toggle"> Toggle </button>
+<button type="button" aria-pressed="false" data-state="off" class="toggle"> Toggle </button>
 <h2>On</h2>
-<button defaultpressed="true" type="button" aria-pressed="true" data-state="on" class="toggle"> Toggle </button>
+<button type="button" aria-pressed="true" data-state="on" class="toggle"> Toggle </button>
 <h1>Controlled</h1>
 <h2>Off</h2>
-<button pressed="false" defaultpressed="false" type="button" aria-pressed="false" data-state="off" class="toggle"> Toggle </button>
+<button type="button" aria-pressed="false" data-state="off" class="toggle"> Toggle </button>
 <h2>On</h2>
-<button pressed="true" defaultpressed="false" type="button" aria-pressed="true" data-state="on" class="toggle"> Toggle </button>
+<button type="button" aria-pressed="true" data-state="on" class="toggle"> Toggle </button>
 <h1>Disabled</h1>
-<button defaultpressed="false" disabled="" type="button" aria-pressed="false" data-state="off" data-disabled="" class="toggle"> Toggle </button>
+<button disabled="" type="button" aria-pressed="false" data-state="off" data-disabled="" class="toggle"> Toggle </button>
 <h1>State attributes</h1>
-<button defaultpressed="false" type="button" aria-pressed="false" data-state="off" class="toggle-attr-styles"> Toggle </button>
-<button defaultpressed="false" disabled="" type="button" aria-pressed="false" data-state="off" data-disabled="" class="toggle-attr-styles"> Toggle </button>"
+<button type="button" aria-pressed="false" data-state="off" class="toggle-attr-styles"> Toggle </button>
+<button disabled="" type="button" aria-pressed="false" data-state="off" data-disabled="" class="toggle-attr-styles"> Toggle </button>"
 `;
 
-exports[`okuToggle Stories > controlled > should render correctly 1`] = `"<button pressed="true" defaultpressed="false" type="button" aria-pressed="true" data-state="on" class="toggle">On</button>"`;
+exports[`okuToggle Stories > controlled > should render correctly 1`] = `"<button type="button" aria-pressed="true" data-state="on" class="toggle">On</button>"`;
 
-exports[`okuToggle Stories > styled > should render correctly 1`] = `"<button defaultpressed="false" type="button" aria-pressed="false" data-state="off" class="toggle"> Toggle </button>"`;
+exports[`okuToggle Stories > styled > should render correctly 1`] = `"<button type="button" aria-pressed="false" data-state="off" class="toggle"> Toggle </button>"`;

packages/vue/src/toggle/tests/toggle.test.ts

@@ -205,6 +205,37 @@ describe('okuToggle', () => {
       expect(button.attributes('data-state')).toBe('on')
     })
   })
+
+  it('pressed should be updated', async () => {
+    const wrapper = mount(OkuToggle, {
+
+      props: {
+        'onUpdate:pressed': (e: boolean) => wrapper.setProps({ pressed: e }),
+      },
+    })
+
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.props('pressed')).toBe(true)
+
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.props('pressed')).toBe(false)
+  })
+
+  it('pressed init true should be updated', async () => {
+    const wrapper = mount(OkuToggle, {
+
+      props: {
+        'pressed': true,
+        'onUpdate:pressed': (e: boolean) => wrapper.setProps({ pressed: e }),
+      },
+    })
+
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.props('pressed')).toBe(false)
+
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.props('pressed')).toBe(true)
+  })
 })
 
 describe('okuToggle Stories', () => {