From ef75b67f0badc34e204607a806ce37c0780dd98e Mon Sep 17 00:00:00 2001
From: Yan Heng <yanheng@siactpower.com>
Date: Mon, 7 Aug 2023 17:40:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9ERadioGroup=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/src/components/RadioGroup.vue | 76 ++++++++++++++++++++++++++++--
 1 file changed, 71 insertions(+), 5 deletions(-)

diff --git a/main/src/components/RadioGroup.vue b/main/src/components/RadioGroup.vue
index bb85037e..48ba6418 100644
--- a/main/src/components/RadioGroup.vue
+++ b/main/src/components/RadioGroup.vue
@@ -1,12 +1,78 @@
 <script setup lang="ts" generic="T">
-defineProps<{
-  items: T[];
-  selected: T;
+import { computed } from 'vue';
+
+export type RadioGroupOption<T> = {
+  value: T;
+  label: string;
+};
+
+const props = defineProps<{
+  modelValue: T;
+  options: RadioGroupOption<T>[];
 }>();
+
+const emits = defineEmits<{
+  (event: 'update:modelValue', value: T): void;
+}>();
+
+const selectedValue = computed<T>({
+  get() {
+    return props.modelValue;
+  },
+  set(value: T) {
+    emits('update:modelValue', value);
+  },
+});
 </script>
 
 <template>
-  <div></div>
+  <div class="radio-group">
+    <label v-for="(item, index) in options" :key="index" class="radio">
+      <input v-model="selectedValue" type="radio" :value="item.value" />
+      <div>
+        <slot :item="item"></slot>
+      </div>
+    </label>
+  </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.radio-group {
+  width: 100%;
+  display: grid;
+  grid-template-rows: auto;
+  grid-auto-flow: column;
+  gap: calc(0.25rem * 1);
+  justify-items: center;
+
+  & > .radio {
+    & > input {
+      position: absolute;
+      opacity: 0;
+    }
+
+    & > input:checked + div {
+      background: #e3e2fe;
+    }
+  }
+}
+
+.radio {
+  border-radius: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+
+  div {
+    width: 2.25rem;
+    height: 2.25rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.5rem;
+  }
+}
+</style>