refactor(switch): ts to sfc (oku-ui#504)

* refactor: switch ts to vue

* remove: useControllable

* chore: expose currentElement

* fix: aria-checked not present

* fix: data-disabled always appears

* chore: update snapshots

* Refactor switch component and add switch v-model tests

packages/package-build/switch/README.md

@@ -3,7 +3,7 @@ A control that allows the user to toggle between checked and not checked.
 
 ![@oku-ui/switch](./../../../.github/assets/og/oku-switch.jpg)
 
-<span><a href="https://www.npmjs.com/package/@oku-ui/switch "><img src="https://img.shields.io/npm/v/@oku-ui/switch?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/switch"> <img src="https://img.shields.io/npm/dm/@oku-ui/switch?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/switch"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+[![Version](https://img.shields.io/npm/v/@oku-ui/switch?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/switch) [![Downloads](https://img.shields.io/npm/dm/@oku-ui/switch?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/switch)
 
 ## Installation
 

packages/vue/src/switch/BubbleInput.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+export interface BubbleInputProps {
+  checked: boolean
+  control: HTMLElement | null
+  bubbles: boolean
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRefs, watchEffect } from 'vue'
+import { useComponentRef, usePrevious, useSize } from '@oku-ui/use-composable'
+
+defineOptions({
+  name: 'OkuBubbleInput',
+})
+
+const props = defineProps<BubbleInputProps>()
+
+const { checked, control } = toRefs(props)
+
+const { componentRef, currentElement } = useComponentRef<HTMLInputElement | null>()
+const prevChecked = usePrevious(checked)
+const controlSize = computed(() => useSize(control))
+
+// Bubble checked change to parents (e.g form change event)
+watchEffect(() => {
+  const input = currentElement.value!
+  const inputProto = window.HTMLInputElement.prototype
+  const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor
+  const setChecked = descriptor.set
+
+  if (prevChecked.value !== props.checked && setChecked) {
+    const event = new Event('click', { bubbles: props.bubbles })
+    setChecked.call(input, props.checked)
+    input.dispatchEvent(event)
+  }
+})
+</script>
+
+<template>
+  <input
+    ref="componentRef"
+    type="checkbox"
+    :aria-hidden="true"
+    :defaultChecked="checked"
+    :tabIndex="-1"
+    :style="{
+      ...$attrs.style as any,
+      ...controlSize,
+      position: 'absolute',
+      pointerEvents: 'none',
+      opacity: 0,
+      margin: '0px',
+    }"
+  >
+</template>