From db5550487dfa24c52c0ad1c1acbcf89302ab0473 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Mon, 21 Aug 2023 06:34:47 +0300 Subject: [PATCH] fix: components model bugs --- .../components/popper/src/popperAnchor.ts | 2 -- packages/components/popper/src/popperArrow.ts | 3 +-- packages/components/switch/src/Switch.ts | 23 ++++++++++++------- .../components/tabs/src/stories/TabsDemo.vue | 2 +- packages/components/tabs/src/tabTrigger.ts | 8 ++++--- packages/components/toggle/src/toggle.ts | 23 +++++++++++-------- 6 files changed, 35 insertions(+), 26 deletions(-) diff --git a/packages/components/popper/src/popperAnchor.ts b/packages/components/popper/src/popperAnchor.ts index 560821dd9..13a070a37 100644 --- a/packages/components/popper/src/popperAnchor.ts +++ b/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 - scopeCheckbox?: Scope } const popperAnchorProps = { diff --git a/packages/components/popper/src/popperArrow.ts b/packages/components/popper/src/popperArrow.ts index c049e2863..5dd151f89 100644 --- a/packages/components/popper/src/popperArrow.ts +++ b/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({ diff --git a/packages/components/switch/src/Switch.ts b/packages/components/switch/src/Switch.ts index f5fb67c2a..ed2697629 100644 --- a/packages/components/switch/src/Switch.ts +++ b/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,7 +90,11 @@ 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, @@ -101,7 +102,6 @@ const Switch = defineComponent({ 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(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) { diff --git a/packages/components/tabs/src/stories/TabsDemo.vue b/packages/components/tabs/src/stories/TabsDemo.vue index 2bccf1c68..fbc73563d 100644 --- a/packages/components/tabs/src/stories/TabsDemo.vue +++ b/packages/components/tabs/src/stories/TabsDemo.vue @@ -230,7 +230,7 @@ defineProps() } &[data-state="active"] { - --border-color: #ff0000; + --border-color: #b3cd7c; } &:focus { diff --git a/packages/components/tabs/src/tabTrigger.ts b/packages/components/tabs/src/tabTrigger.ts index 6b222dc3b..4cc5140d5 100644 --- a/packages/components/tabs/src/tabTrigger.ts +++ b/packages/components/tabs/src/tabTrigger.ts @@ -30,9 +30,6 @@ const tabsTriggerProps = { type: Boolean as PropType, 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 diff --git a/packages/components/toggle/src/toggle.ts b/packages/components/toggle/src/toggle.ts index b76654563..8be31212b 100644 --- a/packages/components/toggle/src/toggle.ts +++ b/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)