pull back to less props

UmbraJS · Feb 4, 2024 · 97af327 · 97af327
1 parent 33269e1
commit 97af327
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 29 deletions.
diff --git a/packages/dye/App.vue b/packages/dye/App.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import DyePicker from './components/DyePicker.vue'
-import ColorCanvas from './components/Canvas/ColorCanvas.vue'
 </script>
 
 <template>

diff --git a/packages/dye/components/Canvas/HueCanvas.vue b/packages/dye/components/Canvas/HueCanvas.vue
@@ -24,14 +24,18 @@ const emit = defineEmits<{
   (e: 'change', props: { hex: hexType; mounted: boolean }): void
 }>()
 
-const props = defineProps<{
-  width: number
+interface Props {
+  width?: number
   colorCanvas: () => Ref<HTMLCanvasElement | null>
   color: {
     value: string
     name: string
   }
-}>()
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 25
+})
 
 const hueCanvas = ref<HTMLCanvasElement | null>(null)
 const position = ref({ x: 30, y: 70 })

diff --git a/packages/dye/components/DyePicker.vue b/packages/dye/components/DyePicker.vue
@@ -26,14 +26,12 @@ interface Props {
   default?: string
   compact?: boolean
   compactSize?: number
-  hueWidth?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
   default: '#ff0000',
   compact: false,
-  compactSize: 50,
-  hueWidth: 25
+  compactSize: 50
 })
 
 const pickerRef = ref<HTMLElement | null>(null)
@@ -75,7 +73,6 @@ function handleChange(hex?: hexType, mounted = false) {
 
 const compact = ref(props.compact)
 const compactSize = ref(props.compactSize)
-const hueWidth = ref(props.hueWidth)
 </script>
 
 <template>
@@ -85,19 +82,12 @@ const hueWidth = ref(props.hueWidth)
     :class="{ compact }"
     v-on-click-outside="() => (compact = true)"
   >
-    <Pallet
-      :color="color"
-      :hueWidth="hueWidth"
-      :compact="compact"
-      :compactSize="compactSize"
-      @edit="() => (compact = false)"
-    />
+    <Pallet :color="color" :compact="compact" @click="() => (compact = false)" />
     <ColorCanvas @change="handleChange" :getRef="getRef" :setRef="setRef" :color="color" />
     <HueCanvas
       @change="(props) => handleChange(props.hex, props.mounted)"
       :colorCanvas="getRef"
       :color="color"
-      :width="hueWidth"
     />
   </div>
 </template>
@@ -125,10 +115,8 @@ $desktop: 1200px;
 }
 
 .dyepicker-wrapper {
-  --hueWidth: calc(v-bind(hueWidth) * 1px);
-
   display: grid;
-  grid-template-columns: 1fr var(--hueWidth);
+  grid-template-columns: 1fr 25px;
 
   height: 400px;
   width: auto;

diff --git a/packages/dye/components/Pallet.vue b/packages/dye/components/Pallet.vue
@@ -1,16 +1,22 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const emit = defineEmits(['edit'])
-const props = defineProps<{
-  hueWidth: number
+const emit = defineEmits(['click'])
+
+interface Props {
+  fade?: number
+  square?: number
   compact: boolean
-  compactSize: number
   color: {
     name: string
     value: string
   }
-}>()
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  square: 50,
+  fade: 25
+})
 
 const copied = ref(false)
 
@@ -22,7 +28,7 @@ function copyToClipboard() {
 }
 
 function handleClick() {
-  props.compact ? emit('edit') : copyToClipboard()
+  props.compact ? emit('click') : copyToClipboard()
 }
 </script>
 
@@ -51,11 +57,11 @@ function handleClick() {
 .pallet {
   position: relative;
   display: grid;
-  --hueWidth: calc(v-bind(hueWidth) * 1px);
+  --fade: calc(v-bind(fade) * 1px);
   grid-template-columns:
     1fr
-    var(--hueWidth)
-    var(--hueWidth);
+    var(--fade)
+    var(--fade);
   justify-content: center;
   align-items: center;
 
@@ -109,7 +115,7 @@ function handleClick() {
   justify-content: center;
   align-items: center;
 
-  --size: calc(v-bind(compactSize) * 1px);
+  --size: calc(v-bind(square) * 1px);
   width: var(--size);
   height: var(--size);
 

diff --git a/packages/dye/composables/canvas.ts b/packages/dye/composables/canvas.ts
@@ -39,6 +39,7 @@ export function pixelColor(
 }
 
 export function offCanvas(e: MouseEvent, click: boolean) {
+  console.log('offCanvas')
   const returnCondition = !mousedown.value && !click
   if (!mousedown.value) activeCanvas.value = e.target
   if (activeCanvas.value === null) activeCanvas.value = e.target