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

<script>
export default {
  name: 'KoleRadio',
  props: {
    modelValue: { type: String, default: 'a' }, // 双向绑定值
    options: { type: Array, default: function () { return []; } }, // 选项数据
    disabled: { type: Boolean, default: false }, // 是否禁用
  },
  computed: { optionList: function () { return this.options && this.options.length ? this.options : [{ label: '选项 A', value: 'a' }, { label: '选项 B', value: 'b' }]; } },
  methods: {
    change: function (value) { this.$emit('input', value); this.$emit('change', value); this.$emit('pagechange', value); }
  },
  // events: update:modelValue, change
};
</script>

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