fix: components model bugs (#295)

packages/components/popper/src/popperAnchor.ts

@@ -6,7 +6,6 @@ import type {
   PrimitiveProps,
 } from '@oku-ui/primitive'
 import type { Measurable } from '@oku-ui/utils'
-import { type Scope } from '@oku-ui/provide'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 import { usePopperInject } from './popper'
@@ -24,7 +23,6 @@ export type PopperAnchorElement = HTMLDivElement
 
 interface PopperAnchorProps extends PrimitiveProps {
   virtualRef?: Ref<Measurable | null>
-  scopeCheckbox?: Scope
 }
 
 const popperAnchorProps = {

packages/components/popper/src/popperArrow.ts

@@ -5,7 +5,6 @@ import {
   type PrimitiveProps,
   primitiveProps,
 } from '@oku-ui/primitive'
-import { type Scope } from '@oku-ui/provide'
 import type { ArrowProps } from '@oku-ui/arrow'
 import { OkuArrow } from '@oku-ui/arrow'
 import { useForwardRef } from '@oku-ui/use-composable'
@@ -25,7 +24,7 @@ export type PopperArrowIntrinsicElement = ElementType<'svg'>
 export type PopperArrowElement = SVGSVGElement
 
 interface PopperArrowProps extends PrimitiveProps, ArrowProps {
-  scopePopper?: Scope
+
 }
 
 const popperArrow = defineComponent({

packages/components/switch/src/Switch.ts

@@ -71,9 +71,6 @@ const switchProps = {
     type: String as PropType<'on' | 'off'>,
     default: 'on',
   },
-  onCheckedChange: {
-    type: Function as PropType<(checked: boolean) => void>,
-  },
 }
 
 const [createSwitchProvide, createSwitchScope]
@@ -93,15 +90,18 @@ const Switch = defineComponent({
     ...scopeSwitchProps,
     ...primitiveProps,
   },
-  emits: ['update:modelValue'],
+  emits: {
+    'update:modelValue': (checked: boolean) => true,
+    'checkedChange': (checked: boolean) => true,
+    'click': (event: MouseEvent) => true,
+  },
   setup(props, { attrs, emit, slots }) {
     const {
       checked: checkedProp,
       defaultChecked,
       required,
       disabled,
       value: switchValue,
-      onCheckedChange,
       name,
     } = toRefs(props)
 
@@ -112,6 +112,13 @@ const Switch = defineComponent({
     const composedRefs = useComposedRefs(buttonRef, forwardedRef)
 
     const modelValue = useModel(props, 'modelValue')
+    const proxyChecked = computed({
+      get: () => modelValue.value !== undefined
+        ? modelValue.value
+        : (checkedProp.value !== undefined ? checkedProp.value : undefined),
+      set: () => {
+      },
+    })
 
     const isFormControl = ref<boolean>(false)
 
@@ -125,11 +132,11 @@ const Switch = defineComponent({
     })
 
     const { state, updateValue } = useControllable({
-      prop: computed(() => modelValue.value ?? checkedProp.value),
+      prop: computed(() => proxyChecked.value),
       defaultProp: computed(() => defaultChecked.value),
       onChange: (value: boolean) => {
-        onCheckedChange.value?.(value)
         emit('update:modelValue', value)
+        emit('checkedChange', value)
       },
     })
 
@@ -154,7 +161,7 @@ const Switch = defineComponent({
           'ref': composedRefs,
           'asChild': props.asChild,
           ...switchProps,
-          'onClick': composeEventHandlers(switchProps.onClick, (event) => {
+          'onClick': composeEventHandlers(props.onClick, (event: MouseEvent) => {
             updateValue(!state.value)
 
             if (isFormControl.value) {

packages/components/tabs/src/stories/TabsDemo.vue

@@ -230,7 +230,7 @@ defineProps<ITabsProps>()
   }
 
   &[data-state="active"] {
-    --border-color: #ff0000;
+    --border-color: #b3cd7c;
   }
 
   &:focus {

packages/components/tabs/src/tabTrigger.ts

@@ -30,9 +30,6 @@ const tabsTriggerProps = {
     type: Boolean as PropType<boolean>,
     default: false,
   },
-  onMousedown: Function as PropType<(e: MouseEvent) => void>,
-  onKeydown: Function as PropType<(e: KeyboardEvent) => void>,
-  onFocus: Function as PropType<(e: FocusEvent) => void>,
 }
 
 const TabTrigger = defineComponent({
@@ -43,6 +40,11 @@ const TabTrigger = defineComponent({
     ...scopeTabsProps,
     ...primitiveProps,
   },
+  emits: {
+    mousedown: (e: MouseEvent) => true,
+    keydown: (e: KeyboardEvent) => true,
+    focus: (e: FocusEvent) => true,
+  },
   setup(props, { slots, attrs }) {
     const { scopeOkuTabs, value, disabled } = toRefs(props)
     const { ...triggerAttrs } = attrs

packages/components/toggle/src/toggle.ts

@@ -47,14 +47,6 @@ const toggleProps = {
     type: Boolean,
     default: false,
   },
-  onClick: {
-    type: Function as PropType<(event: MouseEvent) => void>,
-    default: undefined,
-  },
-  onPressedChange: {
-    type: Function as PropType<(pressed: boolean) => void>,
-    default: undefined,
-  },
 }
 
 const Toggle = defineComponent({
@@ -64,15 +56,26 @@ const Toggle = defineComponent({
     ...toggleProps,
     ...primitiveProps,
   },
-  emits: ['update:pressed', 'update:modelValue'],
+  emits: {
+    'update:modelValue': (pressed: boolean) => true,
+    'pressedChange': (pressed: boolean) => true,
+    'click': (event: MouseEvent) => true,
+  },
   setup(props, { attrs, slots, emit }) {
     const { pressed, defaultPressed, disabled } = toRefs(props)
     const modelValue = useModel(props, 'modelValue')
+    const proxyChecked = computed({
+      get: () => modelValue.value !== undefined
+        ? modelValue.value
+        : (pressed.value !== undefined ? pressed.value : undefined),
+      set: () => {
+      },
+    })
 
     const forwardedRef = useForwardRef()
 
     const { state, updateValue } = useControllable({
-      prop: computed(() => modelValue.value ?? pressed.value),
+      prop: computed(() => proxyChecked.value),
       defaultProp: computed(() => defaultPressed.value),
       onChange: (pressed) => {
         emit('update:modelValue', pressed)