lots of type and props improvements

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

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>
 

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,22 +51,23 @@ 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),
     position: hex.position
   })
 }
 
-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>
 

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",

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 />