<template>
  <div class="kole-radio" role="radiogroup"><label v-for="(o, i) in optionList" :key="i" class="kole-radio-option"><input type="radio" :checked="props.modelValue === o.value" :disabled="props.disabled" @change="change(o.value)" />{{ o.label }}</label></div>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
    modelValue: { type: String, default: 'a' }, // 双向绑定值
    options: { type: Array, default: () => [] }, // 选项数据
    disabled: { type: Boolean, default: false }, // 是否禁用
});
const emit = defineEmits(["update:modelValue", "change"]);
const optionList = computed(() => props.options && props.options.length ? props.options : [{ label: '选项 A', value: 'a' }, { label: '选项 B', value: 'b' }]);
function change(value) { emit('update:modelValue', value); emit('change', value); emit('pagechange', value); }
</script>

<style src="./Radio.css"></style>
