fix: switch

packages/components/switch/src/BubbleInput.ts

@@ -1,12 +1,15 @@
 import type { OkuElement } from '@oku-ui/primitive'
-import { usePrevious, useSize } from '@oku-ui/use-composable'
+import { reactiveOmit, usePrevious, useSize } from '@oku-ui/use-composable'
 import type {
   PropType,
   Ref,
 } from 'vue'
 import {
+  computed,
   defineComponent,
   h,
+  mergeProps,
+  reactive,
   ref,
   toRefs,
   watchEffect,
@@ -31,7 +34,7 @@ const bubbleInputProps = {
     },
     bubbles: {
       type: Boolean,
-      default: true,
+      default: undefined,
     },
     control: {
       type: Object as PropType<HTMLElement | null>,
@@ -47,7 +50,11 @@ export const BubbleInput = defineComponent({
     ...bubbleInputProps.props,
   },
   setup(props, { attrs }) {
-    const { control, checked, bubbles } = toRefs(props)
+    const { control, checked, bubbles: asBubbles, ...inputProps } = toRefs(props)
+    const bubbles = computed(() => asBubbles.value ?? true)
+    const _reactive = reactive(inputProps)
+    const reactiveSwitchProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+
     const inputRef = ref<HTMLInputElement | null>(null)
     const prevChecked = usePrevious(checked)
     const controlSize = useSize(control as Ref<HTMLElement>)
@@ -73,7 +80,7 @@ export const BubbleInput = defineComponent({
         'type': 'checkbox',
         'aria-hidden': true,
         'defaultChecked': checked.value,
-        ...attrs,
+        ...mergeProps(attrs, reactiveSwitchProps),
         'tabindex': -1,
         'ref': inputRef,
         'style': {
@@ -82,7 +89,7 @@ export const BubbleInput = defineComponent({
           position: 'absolute',
           pointerEvents: 'none',
           opacity: 0,
-          margin: 0,
+          margin: '0px',
         },
       })
 

packages/components/switch/src/Switch.ts

@@ -3,13 +3,16 @@ import {
   computed,
   defineComponent,
   h,
+  mergeProps,
   onMounted,
+  reactive,
   ref,
   toRefs,
   toValue,
   useModel,
 } from 'vue'
 import {
+  reactiveOmit,
   useComposedRefs,
   useControllable,
   useForwardRef,
@@ -107,15 +110,18 @@ const Switch = defineComponent({
   emits: switchProps.emits,
   setup(props, { attrs, emit, slots }) {
     const {
+      scopeOkuSwitch,
+      modelValue: _modelValue,
       checked: checkedProp,
       defaultChecked,
       required,
       disabled,
       value: switchValue,
       name,
+      ...switchProps
     } = toRefs(props)
-
-    const { ...switchAttrs } = attrs as SwitchNaviteElement
+    const _reactive = reactive(switchProps)
+    const reactiveSwitchProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
 
     const buttonRef = ref<HTMLButtonElement | null>(null)
 
@@ -156,7 +162,7 @@ const Switch = defineComponent({
 
     switchProvider({
       disabled,
-      scope: props.scopeOkuSwitch,
+      scope: scopeOkuSwitch.value,
       checked: computed(() => state.value || false),
     })
 
@@ -173,8 +179,7 @@ const Switch = defineComponent({
           'value': switchValue.value,
           'data-state': getState(state.value),
           'ref': composedRefs,
-          'asChild': props.asChild,
-          ...switchAttrs,
+          ...mergeProps(attrs, reactiveSwitchProps),
           'onClick': composeEventHandlers<MouseEvent>(
             (e) => {
               emit('click', e)

packages/components/switch/src/SwitchThumb.ts

@@ -2,8 +2,8 @@ import type {
   OkuElement, PrimitiveProps,
 } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
-import { useForwardRef } from '@oku-ui/use-composable'
-import { defineComponent, h, toValue } from 'vue'
+import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
+import { defineComponent, h, mergeProps, reactive, toRefs } from 'vue'
 import { useSwitchInject } from './Switch'
 import { getState, scopeSwitchProps } from './util'
 
@@ -28,21 +28,22 @@ const SwitchThumb = defineComponent({
     ...switchThumbProps.props,
   },
   setup(props, { attrs, slots }) {
-    const { ...thumbAttrs } = attrs as SwitchThumbNaviteElement
+    const { scopeOkuSwitch, ...thumbAttrs } = toRefs(props)
+    const _reactive = reactive(thumbAttrs)
+    const reactiveSwitchProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
 
     const forwardedRef = useForwardRef()
 
-    const context = toValue(useSwitchInject(THUMB_NAME, props.scopeOkuSwitch))
+    const context = useSwitchInject(THUMB_NAME, scopeOkuSwitch.value)
 
     const originalReturn = () =>
       h(
         Primitive.span,
         {
           'data-disabled': context.disabled?.value ? '' : undefined,
           'data-state': getState(context.checked.value),
+          ...mergeProps(attrs, reactiveSwitchProps),
           'ref': forwardedRef,
-          'asChild': props.asChild,
-          ...thumbAttrs,
         },
         {
           default: () => slots.default?.(),