Merge pull request #14 from MadhushaPrasad/feature/dev

Version 0.1.0
MadhushaPrasad · Apr 7, 2024 · 9fda193 · 9fda193
2 parents 5b7922d + 46bbcdc
commit 9fda193
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 44 deletions.
diff --git 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
 

diff --git a/package-lock.json b/package-lock.json
diff --git 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"
   ],

diff --git a/src/components/analog-clock/AnalogClock.vue b/src/components/analog-clock/AnalogClock.vue
@@ -71,6 +71,37 @@
   </div>
 </template>
 
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  watchFaceBackground: {
+    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>
+
 <style scoped>
 ul {
   list-style: none;
@@ -89,9 +120,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 +147,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,19 +191,31 @@ 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;
   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);
@@ -321,6 +369,7 @@ ul {
   top: 0;
   left: 50%;
   margin-left: -15em;
+  color: v-bind(watchDigitsColor);
 }
 #watch .digits li {
   font-size: 1.6em;
@@ -422,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%;
@@ -447,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;
@@ -464,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%;
@@ -483,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%;