ano-ui/components/ARadio/use-radio.ts

<p align="center"> <img src="https://github.com/ano-ui/ano-ui/raw/main/public/logo.svg" style="width:100px;" /> <h1 align="center">Ano-UI (WIP)</h1> <p align="center">An UniApp UI components with UnoCSS.</p> </p> <p align="center"> <a href="https://www.np

import type { SetupContext } from 'vue'
import { computed, inject } from 'vue'
import { radioGroupKey } from '../tokens'
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../constants'
import type { RadioEmits, RadioProps } from './radio'

export function useRadio(props: RadioProps, emit?: SetupContext<RadioEmits>['emit']) {
  const radioGroup = inject(radioGroupKey, undefined)
  const isGroup = computed(() => !!radioGroup)
  const size = computed(() => radioGroup?.size ?? props.size)
  const disabled = computed(() => radioGroup?.disabled ? radioGroup?.disabled : props.disabled)
  const modelValue = computed<RadioProps['modelValue']>(() => isGroup.value ? radioGroup!.modelValue : props.modelValue)

  const checked = computed(() => isGroup.value ? radioGroup!.modelValue === props.value : props.modelValue)

  const toggle = (e: MouseEvent) => {
    e.stopPropagation()
    if (disabled.value)
      return

    const newValue = typeof modelValue.value === 'string' ? props.value : !modelValue.value
    if (isGroup.value)
      radioGroup!.changeEvent(newValue)
    else if (!checked.value)
      emit && emit(UPDATE_MODEL_EVENT, newValue)
    else
      return

    emit && emit(CHANGE_EVENT, newValue)
  }

  return {
    radioGroup,
    isGroup,
    size,
    disabled,
    modelValue,
    checked,

    toggle,
  }
}