25 lines
860 B
Vue
25 lines
860 B
Vue
<template>
|
|
<div class="aa-radiocard-grid" :style="{ gridTemplateColumns: `repeat(${cols}, 1fr)` }">
|
|
<div class="aa-radiocard" v-for="(o, i) in options" :key="i"
|
|
:class="{ 'is-selected': modelValue === o.value }" @click="$emit('update:modelValue', o.value)">
|
|
<div class="aa-radiocard-icon" v-if="o.icon">{{ o.icon }}</div>
|
|
<div class="aa-radiocard-body">
|
|
<div class="aa-radiocard-title">{{ o.label }}</div>
|
|
<div class="aa-radiocard-desc" v-if="o.desc">{{ o.desc }}</div>
|
|
</div>
|
|
<div class="aa-radiocard-mark"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
options: { type: Array, default: () => [] },
|
|
modelValue: { type: [String, Number], default: '' },
|
|
cols: { type: Number, default: 3 }
|
|
});
|
|
defineEmits(['update:modelValue']);
|
|
</script>
|
|
|
|
<style src="./RadioCard.css"></style>
|