fix checkbox and radio icon

JhumanJ · Oct 31, 2024 · df96fe7 · df96fe7
1 parent e70a4c8
commit df96fe7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 18 deletions.
diff --git a/client/components/forms/components/CheckboxIcon.vue b/client/components/forms/components/CheckboxIcon.vue
@@ -1,12 +1,25 @@
 <template>
-  <Icon
-    :name="isChecked ? 'material-symbols:check-box' : 'material-symbols:check-box-outline-blank'"
-    :class="[
-      theme.FlatSelectInput.icon,
-      isChecked ? '' : theme.FlatSelectInput.unselectedIcon,
-    ]"
-    :color="isChecked ? color : undefined"
-  />
+  <div>
+    <Icon
+      v-show="isChecked"
+      name="i-material-symbols-check-box"
+      class="block"
+      :class="[
+        theme.FlatSelectInput.icon
+      ]"
+      :color="color"
+    />
+    <Icon
+      v-show="!isChecked"
+      name="i-material-symbols-check-box-outline-blank"
+      class="block"
+      :class="[
+        theme.FlatSelectInput.icon,
+        theme.FlatSelectInput.unselectedIcon,
+      ]"
+      :color="undefined"
+    />
+  </div>
 </template>
 
 <script setup>

diff --git a/client/components/forms/components/RadioButtonIcon.vue b/client/components/forms/components/RadioButtonIcon.vue
@@ -1,17 +1,26 @@
 <template>
-  <Icon
-    :name="isChecked ? 'ic:round-radio-button-checked' : 'ic:round-radio-button-unchecked'"
-    :class="[
-      theme.FlatSelectInput.icon,
-      isChecked ? '' : theme.FlatSelectInput.unselectedIcon,
-    ]"
-    :color="isChecked ? color : undefined"
-  />
+  <div>
+    <Icon
+      v-show="isChecked"
+      name="ic:round-radio-button-checked"
+      :class="[
+        theme.FlatSelectInput.icon
+      ]"
+      :color="color"
+    />
+    <Icon
+      v-show="!isChecked"
+      name="ic:round-radio-button-unchecked"
+      :class="[
+        theme.FlatSelectInput.icon,
+        theme.FlatSelectInput.unselectedIcon,
+      ]"
+      :color="undefined"
+    />
+  </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
-
 const props = defineProps({
   isChecked: {
     type: Boolean,