From 61eb5917a55ea99ae4a994293277194baf6f1103 Mon Sep 17 00:00:00 2001
From: MadhushaPrasad <madushaprasad21@gmail.com>
Date: Sun, 7 Apr 2024 11:46:15 +0530
Subject: [PATCH 1/4] chore(component): Add clock frame colour as customisable.
 #1

---
 src/components/analog-clock/AnalogClock.vue | 98 +++++++++++++--------
 1 file changed, 63 insertions(+), 35 deletions(-)

diff --git a/src/components/analog-clock/AnalogClock.vue b/src/components/analog-clock/AnalogClock.vue
index ced3d98..2662f15 100644
--- a/src/components/analog-clock/AnalogClock.vue
+++ b/src/components/analog-clock/AnalogClock.vue
@@ -71,6 +71,17 @@
   </div>
 </template>
 
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  watchFaceBackground: {
+    type: String,
+    default: "#f9f9f9",
+  },
+});
+</script>
+
 <style scoped>
 ul {
   list-style: none;
@@ -89,9 +100,21 @@ ul {
   height: 30em;
   margin: 2em auto;
   border-radius: 15em;
-  background: -webkit-linear-gradient(top, #f9f9f9, #666);
-  background: -moz-linear-gradient(top, #f9f9f9, #666);
-  background: linear-gradient(to bottom, #f9f9f9, #666);
+  background: -webkit-linear-gradient(
+    top,
+    v-bind(watchFaceBackground),
+    v-bind(watchFaceBackground)
+  );
+  background: -moz-linear-gradient(
+    top,
+    v-bind(watchFaceBackground),
+    v-bind(watchFaceBackground)
+  );
+  background: linear-gradient(
+    to bottom,
+    v-bind(watchFaceBackground),
+    v-bind(watchFaceBackground)
+  );
   box-shadow: rgba(0, 0, 0, 0.8) 0.5em 0.5em 4em;
 }
 #watch .frame-face:before {
@@ -104,45 +127,38 @@ ul {
   left: 0.3em;
   background: -webkit-linear-gradient(
       135deg,
-      rgba(246, 248, 249, 0) 0%,
-      rgba(229, 235, 238, 1) 50%,
-      rgba(205, 212, 217, 1) 51%,
-      rgba(245, 247, 249, 0) 100%
+      v-bind(watchFaceBackground) 0%,
+      v-bind(watchFaceBackground) 50%,
+      v-bind(watchFaceBackground) 51%,
+      v-bind(watchFaceBackground) 100%
     ),
-    -webkit-radial-gradient(center, ellipse cover, rgba(246, 248, 249, 1) 0%, rgba(
-            229,
-            235,
-            238,
-            1
-          )
-          65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
+    -webkit-radial-gradient(center, ellipse cover, v-bind(watchFaceBackground)
+          0%, rgba v-bind(watchFaceBackground) 65%, v-bind(watchFaceBackground)
+          66%, v-bind(watchFaceBackground) 100%);
   background: -moz-linear-gradient(
       135deg,
-      rgba(246, 248, 249, 0) 0%,
-      rgba(229, 235, 238, 1) 50%,
-      rgba(205, 212, 217, 1) 51%,
-      rgba(245, 247, 249, 0) 100%
+      v-bind(watchFaceBackground) 0%,
+      v-bind(watchFaceBackground) 50%,
+      v-bind(watchFaceBackground) 51%,
+      v-bind(watchFaceBackground) 100%
     ),
-    -moz-radial-gradient(center, ellipse cover, rgba(246, 248, 249, 1) 0%, rgba(
-            229,
-            235,
-            238,
-            1
+    -moz-radial-gradient(center, ellipse cover, v-bind(watchFaceBackground) 0%, v-bind(
+            watchFaceBackground
           )
-          65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
+          65%, v-bind(watchFaceBackground) 66%, v-bind(watchFaceBackground) 100%);
   background: linear-gradient(
       135deg,
-      rgba(246, 248, 249, 0) 0%,
-      rgba(229, 235, 238, 1) 50%,
-      rgba(205, 212, 217, 1) 51%,
-      rgba(245, 247, 249, 0) 100%
+      v-bind(watchFaceBackground) 0%,
+      v-bind(watchFaceBackground) 50%,
+      v-bind(watchFaceBackground) 51%,
+      v-bind(watchFaceBackground) 100%
     ),
     radial-gradient(
       ellipse at center,
-      rgba(246, 248, 249, 1) 0%,
-      rgba(229, 235, 238, 1) 65%,
-      rgba(205, 212, 217, 1) 66%,
-      rgba(245, 247, 249, 1) 100%
+      v-bind(watchFaceBackground) 0%,
+      v-bind(watchFaceBackground) 65%,
+      v-bind(watchFaceBackground) 66%,
+      v-bind(watchFaceBackground) 100%
     );
 }
 #watch .frame-face:after {
@@ -155,9 +171,21 @@ ul {
   left: 0.9em;
   box-shadow: inset rgba(0, 0, 0, 0.2) 0.2em 0.2em 1em;
   border: 0.1em solid rgba(0, 0, 0, 0.2);
-  background: -webkit-linear-gradient(top, #fff, #ccc);
-  background: -moz-linear-gradient(top, #fff, #ccc);
-  background: linear-gradient(to bottom, #fff, #ccc);
+  background: -webkit-linear-gradient(
+    top,
+    v-bind(watchFaceBackground),
+    v-bind(watchFaceBackground)
+  );
+  background: -moz-linear-gradient(
+    top,
+    v-bind(watchFaceBackground),
+    v-bind(watchFaceBackground)
+  );
+  background: linear-gradient(
+    to bottom,
+    v-bind(watchFaceBackground),
+    v-bind(watchFaceBackground)
+  );
 }
 #watch .minute-marks li {
   display: block;

From ae085ea6b808f6236742d00ae95a772ce0fed9c2 Mon Sep 17 00:00:00 2001
From: MadhushaPrasad <madushaprasad21@gmail.com>
Date: Sun, 7 Apr 2024 11:49:52 +0530
Subject: [PATCH 2/4] chore(component): Add clock digits list,clock
 seconds-hand,clock minutes-hand,clock hours-hand colours as customisable.

---
 src/components/analog-clock/AnalogClock.vue | 31 +++++++++++++++++----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/analog-clock/AnalogClock.vue b/src/components/analog-clock/AnalogClock.vue
index 2662f15..5fe5947 100644
--- a/src/components/analog-clock/AnalogClock.vue
+++ b/src/components/analog-clock/AnalogClock.vue
@@ -79,6 +79,26 @@ defineProps({
     type: String,
     default: "#f9f9f9",
   },
+  watchDigitsColor: {
+    type: String,
+    default: "#000000",
+  },
+  watchDigitsMinuteMarksColor: {
+    type: String,
+    default: "#929394",
+  },
+  watchHoursHand: {
+    type: String,
+    default: "#232425",
+  },
+  watchMinutesHand: {
+    type: String,
+    default: "#343536",
+  },
+  watchSecondsHand: {
+    type: String,
+    default: "#c00",
+  },
 });
 </script>
 
@@ -191,11 +211,11 @@ ul {
   display: block;
   width: 0.2em;
   height: 0.6em;
-  background: #929394;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -0.4em 0 0 -0.1em;
+  background: v-bind(watchDigitsMinuteMarksColor);
 }
 #watch .minute-marks li:first-child {
   transform: rotate(6deg) translateY(-12.7em);
@@ -349,6 +369,7 @@ ul {
   top: 0;
   left: 50%;
   margin-left: -15em;
+  color: v-bind(watchDigitsColor);
 }
 #watch .digits li {
   font-size: 1.6em;
@@ -450,7 +471,7 @@ ul {
   width: 0.8em;
   height: 7em;
   border-radius: 0 0 0.9em 0.9em;
-  background: #232425;
+  background: v-bind(watchHoursHand);
   position: absolute;
   bottom: 50%;
   left: 50%;
@@ -475,7 +496,7 @@ ul {
   content: "";
   width: 0;
   height: 0;
-  border: 0.9em solid #232425;
+  border: 0.9em solid v-bind(watchHoursHand);
   border-width: 0 0.9em 2.4em 0.9em;
   border-left-color: transparent;
   border-right-color: transparent;
@@ -492,7 +513,7 @@ ul {
   width: 0.8em;
   height: 12.5em;
   border-radius: 0.5em;
-  background: #343536;
+  background: v-bind(watchMinutesHand);
   position: absolute;
   bottom: 50%;
   left: 50%;
@@ -511,7 +532,7 @@ ul {
   width: 0.2em;
   height: 14em;
   border-radius: 0.1em 0.1em 0 0/10em 10em 0 0;
-  background: #c00;
+  background: v-bind(watchSecondsHand);
   position: absolute;
   bottom: 50%;
   left: 50%;

From 89df653c3441ce3873d719411a8d59c1df6f8be6 Mon Sep 17 00:00:00 2001
From: MadhushaPrasad <madushaprasad21@gmail.com>
Date: Sun, 7 Apr 2024 12:10:20 +0530
Subject: [PATCH 3/4] doc(readme): update readme

---
 README.md | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index aa10123..200c36e 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,7 @@ This package provides a **Vue 3** component to display an **analog clock**. It's
 ```bash
 npm install vue3-analog-clock
 ```
+
 or go to npm <a href="https://www.npmjs.com/package/vue3-analog-clock" target="_blank">package link</a>
 
 ## Import the component and register it in your main.js or main.ts file:
@@ -42,7 +43,41 @@ app.mount("#app");
 
 ## Demo
 
-![ezgif-1-3d019c9ad5](https://github.com/MadhushaPrasad/vue-analog-clock/assets/50085447/fe6c60e1-a631-42cc-9d93-5bd1bc7e0791)
+Default Analog Clock
+
+![Default-Analog-Clock](https://github.com/MadhushaPrasad/vue-analog-clock/assets/50085447/7db6707d-db25-40a3-92a6-7bcfafb5c598)
+
+Customize Analog Clock
+
+![customize-analog-clock](https://github.com/MadhushaPrasad/vue-analog-clock/assets/50085447/65ab7487-efab-46cb-91d9-682634b484b8)
+
+## Customization Options
+
+You can customize the appearance of the analog clock component using the following props:
+
+- `watchFaceBackground`: Background color of the clock face. Default: `#f9f9f9`.
+- `watchDigitsColor`: Color of the clock digits. Default: `#000000`.
+- `watchDigitsMinuteMarksColor`: Color of the minute marks on the clock face. Default: `#929394`.
+- `watchHoursHand`: Color of the hour hand. Default: `#232425`.
+- `watchMinutesHand`: Color of the minute hand. Default: `#343536`.
+- `watchSecondsHand`: Color of the seconds hand. Default: `#c00`.
+
+To customize the clock colors, simply pass the desired color values as props when using the component in your Vue templates:
+
+```html
+<template>
+  <div>
+    <AnalogClock
+      watchFaceBackground="#673F69"
+      watchDigitsColor="#FFFFFF"
+      watchDigitsMinuteMarksColor="#FFFFFF"
+      watchHoursHand="#FFAF45"
+      watchMinutesHand="#FB6D48"
+      watchSecondsHand="#E72929"
+    />
+  </div>
+</template>
+```
 
 ## 🌱 Contributors
 

From 46bbcdc918c896a1a405f9fa650e623c51a41e9d Mon Sep 17 00:00:00 2001
From: MadhushaPrasad <madushaprasad21@gmail.com>
Date: Sun, 7 Apr 2024 12:10:29 +0530
Subject: [PATCH 4/4] 0.1.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b62907f..90ab3d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-analog-clock",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-analog-clock",
-      "version": "0.0.0",
+      "version": "0.1.0",
       "dependencies": {
         "vue": "^3.4.21"
       },
diff --git a/package.json b/package.json
index 4c4e7c9..0bccc44 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "vue3-analog-clock",
   "private": false,
   "description": "A simple analog clock component for Vue 3",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "files": [
     "dist"
   ],