malio-layer-ui/app/components/malio/radio/RadioButton.vue

<template>
  <div :class="mergedGroupClass">
    <div :class="mergedControlClass">
      <label :for="inputId" :class="indicatorClass">
        <input
          :id="inputId"
          :name="resolvedName"
          :value="value"
          :checked="isChecked"
          :required="resolvedRequired"
          :disabled="resolvedDisabled"
          :aria-invalid="hasError"
          :aria-describedby="describedBy"
          :class="mergedInputClass"
          v-bind="attrs"
          type="radio"
          @click="onClick"
          @change="onChange"
        >
        <span class="radio-dot pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-black opacity-0">
          <svg viewBox="0 0 16 16" fill="currentColor" class="h-[10px]">
            <circle cx="8" cy="8" r="8" />
          </svg>
        </span>
      </label>

      <label
        v-if="label"
        :for="inputId"
        :class="mergedLabelClass"
      >
        {{ label }}<MalioRequiredMark v-if="resolvedRequired" />
      </label>
    </div>

    <p
      v-if="shouldShowMessage"
      :id="`${inputId}-describedby`"
      :class="mergedMessageClass"
    >
      {{ error || success || hint }}
    </p>
  </div>
</template>

<script setup lang="ts">
import {computed, inject, ref, useAttrs, useId} from 'vue'
import {twMerge} from 'tailwind-merge'
import MalioRequiredMark from '../shared/RequiredMark.vue'
import {radioGroupContextKey, type RadioValue} from './context'

defineOptions({name: 'MalioRadioButton', inheritAttrs: false})

const props = withDefaults(
  defineProps<{
    id?: string
    label?: string
    name?: string
    modelValue?: RadioValue
    value?: RadioValue
    inputClass?: string
    labelClass?: string
    groupClass?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
  }>(),
  {
    id: '',
    label: '',
    name: '',
    modelValue: undefined,
    value: undefined,
    inputClass: '',
    labelClass: '',
    groupClass: '',
    required: false,
    disabled: false,
    readonly: false,
    hint: '',
    error: '',
    success: '',
  },
)

const attrs = useAttrs()
const generatedId = useId()
const localValue = ref<RadioValue>(undefined)
const group = inject(radioGroupContextKey, null)

const inputId = computed(() => props.id?.toString() || `malio-radio-${generatedId}`)
const isControlled = computed(() => props.modelValue !== undefined)

const resolvedName = computed(() => (group ? group.name.value : props.name))
const resolvedDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))
const resolvedReadonly = computed(() => props.readonly || (group?.readonly.value ?? false))
const resolvedRequired = computed(() => props.required || (group?.required.value ?? false))

const isChecked = computed(() => {
  if (group) return group.isSelected(props.value)
  return isControlled.value ? props.modelValue === props.value : localValue.value === props.value
})

const hasError = computed(() => (group ? group.hasError.value : !!props.error))
const hasSuccess = computed(() =>
  group ? group.hasSuccess.value : !!props.success && !hasError.value,
)

const shouldShowMessage = computed(
  () => !group && !!(props.hint || hasError.value || hasSuccess.value),
)

const describedBy = computed(() => {
  if (group) return group.describedBy.value
  if (!shouldShowMessage.value) return undefined
  return `${inputId.value}-describedby`
})

const mergedGroupClass = computed(() =>
  twMerge(group ? 'radio-item w-auto' : 'radio-item mt-4 w-full', props.groupClass),
)

const indicatorClass = computed(() =>
  twMerge(
    'radio-indicator relative flex cursor-pointer items-center',
    group ? 'px-3 py-2.5' : 'p-3',
  ),
)

const mergedControlClass = computed(() =>
  twMerge(
    'radio-control flex items-center',
    hasError.value ? 'is-error' : '',
    hasSuccess.value ? 'is-success' : '',
    resolvedDisabled.value ? 'is-disabled' : '',
  ),
)

const mergedInputClass = computed(() =>
  twMerge(
    'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-m-muted checked:border-black',
    props.inputClass,
  ),
)

const mergedLabelClass = computed(() =>
  twMerge(
    'radio-text mt-px cursor-pointer',
    isChecked.value ? 'text-black' : 'text-m-muted',
    hasError.value ? 'text-m-danger' : '',
    hasSuccess.value ? 'text-m-success' : '',
    resolvedDisabled.value ? 'cursor-not-allowed text-black/60' : '',
    props.labelClass,
  ),
)

const mergedMessageClass = computed(() =>
  twMerge(
    'radio-message ml-3 -mt-1 text-xs',
    hasError.value
      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'text-m-muted',
  ),
)

const emit = defineEmits<{
  (event: 'update:modelValue', value: RadioValue): void
}>()

const onClick = (event: MouseEvent) => {
  if (!resolvedReadonly.value) return

  event.preventDefault()
}

const onChange = (event: Event) => {
  if (resolvedReadonly.value) {
    const target = event.target as HTMLInputElement
    target.checked = isChecked.value
    return
  }

  if (group) {
    group.select(props.value)
    return
  }

  if (!isControlled.value) {
    localValue.value = props.value
  }

  emit('update:modelValue', props.value)
}
</script>

<style scoped>
.radio-control input[type='radio']:checked + .radio-dot {
  opacity: 1;
}

.radio-control input[type='radio']:focus-visible {
  outline: 2px solid rgb(var(--m-primary) / 1);
  outline-offset: 2px;
}

.radio-control.is-error input[type='radio'] {
  border-color: rgb(var(--m-danger) / 1);
}

.radio-control.is-error .radio-dot {
  color: rgb(var(--m-danger) / 1);
}

.radio-control.is-success input[type='radio'] {
  border-color: rgb(var(--m-success) / 1);
}

.radio-control.is-success .radio-dot {
  color: rgb(var(--m-success) / 1);
}

.radio-control.is-disabled .radio-indicator,
.radio-control.is-disabled .radio-text {
  cursor: not-allowed;
  opacity: 0.6;
}
</style>