1  <template>
 2    <div class="radio-button" @click="handleClick">
 3      <div class="circle">
 4        <div class="inner"></div>
 5        <div class="selected" v-if="selected"></div>
 6      </div>
 7      <p class="text">{{ text }}</p>
 8    </div>
 9  </template>
10  
11  <script setup>
12  const props = defineProps({
13    text: String,
14    selected: Boolean,
15    value: {
16      type: [String, Number, Boolean],
17      default: null,
18    },
19  });
20  
21  const emit = defineEmits(["update"]);
22  
23  const handleClick = () => {
24    emit("update", props.value);
25  };
26  </script>
27  
28  <style scoped lang="scss">
29  .radio-button {
30    display: flex;
31    align-items: center;
32    cursor: pointer;
33    display: flex;
34    gap: 8px;
35  }
36  
37  .circle {
38    width: 20px;
39    height: 20px;
40    position: relative;
41  
42    .inner {
43      width: 100%;
44      height: 100%;
45      position: absolute;
46      background-color: var(--element);
47      border-radius: 50%;
48    }
49  
50    .selected {
51      position: absolute;
52      left: 3px;
53      top: 3px;
54      background-color: var(--text-secondary);
55      width: calc(100% - 6px);
56      height: calc(100% - 6px);
57      border-radius: 50%;
58    }
59  }
60  
61  .text {
62    color: var(--text-secondary);
63  }
64  </style>