You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.4 KiB
40 lines
1.4 KiB
<template>
|
|
<div class="flex space-x-4 flex-wrap justify-center">
|
|
<label v-for="(item, index) in options" :key="index" class="w-40" :for="`${id}-${index}`">
|
|
<input
|
|
:id="`${id}-${index}`"
|
|
class="invisible absolute left-0 top-0 peer"
|
|
:checked="value === item.key"
|
|
:value="item.key"
|
|
type="radio"
|
|
:name="id"
|
|
@click="$emit('update:modelValue', item.key)"
|
|
/>
|
|
<span
|
|
class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primarycustom peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200 items-end"
|
|
>
|
|
<img :src="`/wp-content/plugins/stepper/resources/img/icons/${item.icon}.svg`" class="w-16 h-16 flex-none" />
|
|
<span class="mt-4 font-semibold text-gray-700 text-sm" v-text="item.label"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
id: {
|
|
required: true,
|
|
},
|
|
value: {
|
|
default: () => null,
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default: function () {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|