Tweaks

Author: MatijaNovosel

README.md

@@ -27,7 +27,7 @@ app.use(degreePicker);
 
 ```vue
 <template>
-  <degree-picker color="green" v-model="degrees" />
+  <degree-picker active-color="green" v-model="degrees" />
 </template>
 
 <script lang="ts" setup>
@@ -39,11 +39,13 @@ const degrees = ref(0);
 
 ## 📃 Props
 
-| ID          | Type            | Default | Description                                                                                                      |
-| ----------- | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `color`     | `string`        |         | Background color of the active value and clock hand                                                              |
-| `v-model`   | `number`        |         | Standard two way input                                                                                           |
-| `width`     | `number/string` | 290px   | Sets the width of the element - can be provided as a string like "290px" or "290" or a number, defaults to 290px |
-| `fullWidth` | `boolean`       |         | Ignores the previous `width` prop and sets the width to 100% of the parent container                             |
-| `disabled`  | `boolean`       |         | Makes the component unclickable                                                                                  |
-| `readonly`  | `boolean`       |         | Makes the component unclickable, but does not make it seem disabled                                              |
+| Name           | Type            | Default | Description                                                                                                      |
+| -------------- | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `active-color` | `string`        | #567a0d | Background color of the active value and clock hand                                                              |
+| `body-color`   | `string`        | #eee    | Background color of the picker body                                                                              |
+| `v-model`      | `number`        |         | Standard two way input                                                                                           |
+| `step`         | `number`        | 30      | The step used for displaying the degrees                                                                         |
+| `width`        | `number/string` | 290px   | Sets the width of the element - can be provided as a string like "290px" or "290" or a number, defaults to 290px |
+| `full-width`   | `boolean`       | false   | Ignores the previous `width` prop and sets the width to 100% of the parent container                             |
+| `disabled`     | `boolean`       | false   | Makes the component unclickable                                                                                  |
+| `readonly`     | `boolean`       | false   | Makes the component unclickable, but does not make it seem disabled                                              |

src/components/degreePicker.vue

@@ -5,7 +5,8 @@
     }"
   >
     <degree-picker-body
-      :color="color"
+      :active-color="activeColor"
+      :body-color="activeColor"
       @input="onInput"
       @change="onChange"
       :step="step || 30"
@@ -26,17 +27,24 @@ const emit = defineEmits<{
   (e: "update:modelValue", degrees: number): void;
 }>();
 
-const props = defineProps<{
-  disabled?: boolean;
-  min?: string;
-  max?: string;
-  readonly?: boolean;
-  fullWidth?: boolean;
-  color?: string;
-  modelValue: number;
-  width?: number | string;
-  step?: number;
-}>();
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    min?: string;
+    max?: string;
+    readonly?: boolean;
+    fullWidth?: boolean;
+    activeColor?: string;
+    bodyColor?: string;
+    modelValue: number;
+    width?: number | string;
+    step?: number;
+  }>(),
+  {
+    activeColor: "#567a0d",
+    bodyColor: "#eee"
+  }
+);
 
 const state = reactive({
   inputDegree: null as number | null,

src/components/degreePickerBody.vue

@@ -54,7 +54,8 @@ const clock = ref<HTMLElement | null>(null);
 const props = defineProps<{
   disabled?: boolean;
   readonly?: boolean;
-  color?: string;
+  activeColor?: string;
+  bodyColor?: string;
   value: number | null;
   min: number;
   max: number;
@@ -86,7 +87,7 @@ const clockHandStyle = computed(() => ({
   transform: `rotate(${
     degreesPerUnit.value * (displayedValue.value - props.min)
   }deg)`,
-  backgroundColor: props.value !== null ? props.color : undefined
+  backgroundColor: props.value !== null ? props.activeColor : undefined
 }));
 
 const displayedValue = computed(() =>
@@ -108,7 +109,7 @@ const getTransform = (i: number) => {
     top: `${50 + y * 50}%`,
     backgroundColor:
       props.value !== null && i === displayedValue.value
-        ? props.color
+        ? props.activeColor
         : undefined
   };
 };
@@ -184,7 +185,7 @@ watch(
 <style scoped>
 .degree-picker-clock {
   font-family: "Roboto";
-  background-color: #eee;
+  background-color: v-bind(bodyColor);
   border-radius: 100%;
   position: relative;
   transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
@@ -237,7 +238,7 @@ watch(
   background: transparent;
   border-width: 2px;
   border-style: solid;
-  border-color: v-bind(color);
+  border-color: v-bind(activeColor);
   border-radius: 100%;
   width: 10px;
   height: 10px;
@@ -257,8 +258,8 @@ watch(
   left: 50%;
   border-radius: 100%;
   border-style: solid;
-  border-color: v-bind("color");
-  background-color: v-bind("color");
+  border-color: v-bind("activeColor");
+  background-color: v-bind("activeColor");
   transform: translate(-50%, -50%);
 }