From 9453ce13974101b15280df42e6abdbc979d3dc17 Mon Sep 17 00:00:00 2001
From: "Samuel M. Bednarz" <samuelmorkbednarz@gmail.com>
Date: Mon, 29 Jan 2024 02:57:33 +0100
Subject: [PATCH] lots of type and props improvements

---
 .../dye/components/Canvas/ColorCanvas.vue     |  5 ++-
 packages/dye/components/Canvas/HueCanvas.vue  | 19 ++++----
 packages/dye/components/DyePicker.vue         | 43 +++++++++++++++----
 packages/dye/package.json                     |  2 +-
 packages/playground/src/App.vue               |  9 +++-
 5 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/packages/dye/components/Canvas/ColorCanvas.vue b/packages/dye/components/Canvas/ColorCanvas.vue
index 86c3aa3..d602a08 100644
--- a/packages/dye/components/Canvas/ColorCanvas.vue
+++ b/packages/dye/components/Canvas/ColorCanvas.vue
@@ -13,7 +13,10 @@ import {
 import { fillColorCanvas } from '../../composables/gradient'
 import Handle from '../Handle.vue'
 
-const emit = defineEmits(['change'])
+const emit = defineEmits<{
+  (e: 'change', hex: hexType): void
+}>()
+
 const props = defineProps<{
   getRef: () => Ref<HTMLCanvasElement | null>
   setRef: (el: any) => void
diff --git a/packages/dye/components/Canvas/HueCanvas.vue b/packages/dye/components/Canvas/HueCanvas.vue
index 130af28..b73a5cb 100644
--- a/packages/dye/components/Canvas/HueCanvas.vue
+++ b/packages/dye/components/Canvas/HueCanvas.vue
@@ -20,7 +20,10 @@ interface Hsl {
   l: number
 }
 
-const emit = defineEmits(['change'])
+const emit = defineEmits<{
+  (e: 'change', props: { hex: hexType; mounted: boolean }): void
+}>()
+
 const props = defineProps<{
   width: number
   colorCanvas: () => Ref<HTMLCanvasElement | null>
@@ -44,7 +47,6 @@ function hueGradient(
   hsl: Hsl = { h: 0, s: 1, l: 0.5 }
 ) {
   const gradient = ctx.createLinearGradient(0, 0, 0, height)
-  console.log('rex: ', hsl)
   for (var hue = 0; hue <= 360; hue++) {
     var hslColor = `hsl(${hue}, ${hsl.s}%, ${hsl.l}%)`
     gradient.addColorStop(hue / 360, hslColor)
@@ -79,9 +81,9 @@ function hueChange(e: MouseEvent, click = false) {
   mouseOn.value = true
 }
 
-function updateCanvas(hex: hexType) {
+function updateCanvas(hex: hexType, mounted = false) {
   if (!hex) return
-  emit('change', hex)
+  emit('change', { hex, mounted })
   fillColorCanvas({ hue: hex.color }, props.colorCanvas().value)
   position.value = {
     x: position.value.x,
@@ -116,16 +118,17 @@ onMounted(() => {
   fillHueCanvas()
   setCenterHandle()
 
-  var color = colord(props.color.value)
+  const color = colord(props.color.value)
   const hsl = color.toHsl()
-
-  updateCanvas({
+  const hex = {
     color: props.color.value,
     position: {
       x: 0,
       y: huePercent(hsl.h, canvasHeight.value)
     }
-  })
+  }
+
+  updateCanvas(hex, true)
 })
 </script>
 
diff --git a/packages/dye/components/DyePicker.vue b/packages/dye/components/DyePicker.vue
index 4b12f49..028a7de 100644
--- a/packages/dye/components/DyePicker.vue
+++ b/packages/dye/components/DyePicker.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { colord } from 'colord'
+import type { Colord } from 'colord'
 import { vOnClickOutside } from '@vueuse/components'
 
 import { ref } from 'vue'
@@ -9,11 +10,31 @@ import Pallet from './Pallet.vue'
 import ColorCanvas from './Canvas/ColorCanvas.vue'
 import HueCanvas from './Canvas/HueCanvas.vue'
 
-const emit = defineEmits(['change'])
-const props = defineProps<{
-  default: string
+const emit = defineEmits<{
+  (
+    e: 'change',
+    color: {
+      name: string
+      value: Colord
+      position: { x: number; y: number }
+    }
+  ): void
 }>()
 
+interface Props {
+  default: string
+  compact: boolean
+  compactSize: number
+  hueWidth: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  default: '#ff0000',
+  compact: true,
+  compactSize: 50,
+  hueWidth: 25
+})
+
 const pallet = ref<HTMLElement | null>(null)
 const colorCanvas = ref<HTMLCanvasElement | null>(null)
 
@@ -30,12 +51,13 @@ const color = ref({
   value: props.default
 })
 
-function handleChange(hex?: hexType) {
+function handleChange(hex?: hexType, mounted = false) {
   if (!hex) return
   const get = colorName(hex.color)
   const { name, value } = get()
   color.value = { name, value }
 
+  if (mounted) return
   emit('change', {
     name,
     value: colord(value),
@@ -43,9 +65,9 @@ function handleChange(hex?: hexType) {
   })
 }
 
-const compact = ref(true)
-const compactSize = ref(50)
-const hueWidth = ref(25)
+const compact = ref(props.compact)
+const compactSize = ref(props.compactSize)
+const hueWidth = ref(props.hueWidth)
 </script>
 
 <template>
@@ -62,7 +84,12 @@ const hueWidth = ref(25)
       </slot>
     </div>
     <ColorCanvas @change="handleChange" :getRef="getRef" :setRef="setRef" :color="color" />
-    <HueCanvas @change="handleChange" :colorCanvas="getRef" :color="color" :width="hueWidth" />
+    <HueCanvas
+      @change="(props) => handleChange(props.hex, props.mounted)"
+      :colorCanvas="getRef"
+      :color="color"
+      :width="hueWidth"
+    />
   </div>
 </template>
 
diff --git a/packages/dye/package.json b/packages/dye/package.json
index 525e65d..afa94d3 100644
--- a/packages/dye/package.json
+++ b/packages/dye/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@umbrajs/dye",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.0.002",
   "description": "Vue color picker using umbra",
   "author": "Samuel M. Bednarz<https://github.com/CarelessCourage>",
   "license": "MIT",
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 0948edd..28d3cc2 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -92,7 +92,14 @@ const height = ref('8rem')
 <template>
   <div class="page container">
     <h1 class="display">Umbra</h1>
-    <DyePicker default="#36576a" />
+    <DyePicker
+      default="#36576a"
+      @change="
+        (value) => {
+          console.log(value.name)
+        }
+      "
+    />
     <button @click="() => inverse()">Invert</button>
     <div class="ranges">
       <LabelsGroups />