From 443f4ef7b957a0da69f2f556cd83bac45e376225 Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Mon, 20 May 2024 12:57:36 +0100
Subject: [PATCH] Checkbox input color (#413)

* stule: checkbox input color

* fix toggle switch input color

* clean up console.log
---
 client/components/forms/CheckboxInput.vue      |  1 +
 client/components/forms/ToggleSwitchInput.vue  |  1 +
 .../components/forms/components/VCheckbox.vue  | 18 +++++++++---------
 client/components/forms/components/VSwitch.vue | 10 +++++++++-
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/client/components/forms/CheckboxInput.vue b/client/components/forms/CheckboxInput.vue
index bec30455..12a72108 100644
--- a/client/components/forms/CheckboxInput.vue
+++ b/client/components/forms/CheckboxInput.vue
@@ -9,6 +9,7 @@
       v-model="compVal"
       :disabled="disabled ? true : null"
       :name="name"
+      :color="color"
     >
       <slot name="label">
         {{ label }}
diff --git a/client/components/forms/ToggleSwitchInput.vue b/client/components/forms/ToggleSwitchInput.vue
index 7bffcc9c..83e7bb0f 100644
--- a/client/components/forms/ToggleSwitchInput.vue
+++ b/client/components/forms/ToggleSwitchInput.vue
@@ -10,6 +10,7 @@
         v-model="compVal"
         class="inline-block mr-2"
         :disabled="disabled ? true : null"
+        :color="color"
       />
       <slot name="label">
         <span>{{ label }}
diff --git a/client/components/forms/components/VCheckbox.vue b/client/components/forms/components/VCheckbox.vue
index 75585121..6ec86538 100644
--- a/client/components/forms/components/VCheckbox.vue
+++ b/client/components/forms/components/VCheckbox.vue
@@ -6,7 +6,8 @@
       :name="name"
       type="checkbox"
       :class="sizeClasses"
-      class="rounded border-gray-500 cursor-pointer"
+      class="rounded border-gray-500 cursor-pointer checkbox"
+      :style="{ '--accent-color': color }"
       :disabled="disabled ? true : null"
     >
     <label
@@ -20,14 +21,7 @@
 </template>
 
 <script setup>
-import {
-  defineEmits,
-  defineOptions,
-  defineProps,
-  onMounted,
-  ref,
-  watch,
-} from "vue"
+import { defineEmits, defineOptions, defineProps, onMounted, ref, watch, } from "vue"
 
 defineOptions({
   name: "VCheckbox",
@@ -39,6 +33,7 @@ const props = defineProps({
   modelValue: { type: [Boolean, String], default: false },
   disabled: { type: Boolean, default: false },
   sizeClasses: { type: String, default: "w-4 h-4" },
+  color: { type: String, default: null },
 })
 
 const emit = defineEmits(["update:modelValue", "click"])
@@ -73,3 +68,8 @@ onMounted(() => {
   if (internalValue.value === null) internalValue.value = false
 })
 </script>
+<style>
+  .checkbox {
+    accent-color: var(--accent-color);
+  }
+</style>
diff --git a/client/components/forms/components/VSwitch.vue b/client/components/forms/components/VSwitch.vue
index 13d1405e..0a0ba4c8 100644
--- a/client/components/forms/components/VSwitch.vue
+++ b/client/components/forms/components/VSwitch.vue
@@ -5,7 +5,9 @@
   >
     <div
       class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100"
-      :class="{ 'bg-nt-blue': props.modelValue }"
+      :class="{ 'toggle-switch': props.modelValue }"
+      :style="{ '--accent-color': props.color }"
+
     >
       <div
         class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100"
@@ -21,6 +23,7 @@ import { defineEmits, defineProps } from "vue"
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
+  color: { type: String, default: null },
 })
 const emit = defineEmits(["update:modelValue"])
 
@@ -29,3 +32,8 @@ function onClick() {
   emit("update:modelValue", !props.modelValue)
 }
 </script>
+<style>
+  .toggle-switch {
+    background-color: var(--accent-color);
+  }
+</style>