From 312a5200669c5dc5e8dba88c3e63d8fe6a9e69e5 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Fri, 10 Dec 2021 23:29:40 -0500
Subject: [PATCH] [+] Implement v-model

---
 src/utils.ts                    |  3 ---
 src/views/Projects.vue          | 12 ++++++++++--
 src/views/color/ColorPicker.vue | 19 +++++++++++++------
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/utils.ts b/src/utils.ts
index 511e89b..522b37d 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -17,6 +17,3 @@ export function range(fromOrTo: number, to?: number, step = 1): number[]
 
     return [...Array(Math.floor((to - from) / step))].map((_, i) => from + i * step);
 }
-
-console.log(range(3))
-console.log(range(2, 5))
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index e9b47fe..9d64d6d 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -1,16 +1,24 @@
 <template>
     <div id="Projects">
-
+        <ColorPicker style="margin-top: 10px" v-model:color="color"></ColorPicker>
+        <button @click="log"></button>
     </div>
 </template>
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
+import MyColorPicker from "@/views/color/ColorPicker.vue";
+import {Color} from "three";
 
-@Options({components: {}})
+@Options({components: {ColorPicker: MyColorPicker}})
 export default class Projects extends Vue
 {
+    color = new Color('#ffffff')
 
+    log(): void
+    {
+        console.log(this.color)
+    }
 }
 </script>
 
diff --git a/src/views/color/ColorPicker.vue b/src/views/color/ColorPicker.vue
index 86d05fa..43dd027 100644
--- a/src/views/color/ColorPicker.vue
+++ b/src/views/color/ColorPicker.vue
@@ -2,9 +2,9 @@
     <div id="ColorPicker">
         <div id="title-colors" class="fbox-h">
             <div>Colors</div>
-            <input v-model="colorInput" spellcheck="false">
+            <input v-model="colorInput" spellcheck="false" @change="colorModel = colorInput">
         </div>
-        <ColorPicker id="picker" :isWidget="true" pickerType="chrome" v-model:pureColor="color"
+        <ColorPicker id="picker" :isWidget="true" pickerType="chrome" v-model:pureColor="colorModel"
                      :disableHistory="true" @pureColorChange="change" format="hex"/>
         <div id="palette">
             <div class="row" v-for="p of palette" :key="p">
@@ -16,27 +16,34 @@
 </template>
 
 <script lang="ts">
-import {Options, Vue} from 'vue-class-component';
+import {Options, prop, Vue} from 'vue-class-component';
 import "vue3-colorpicker/style.css";
 import {ColorPicker} from "vue3-colorpicker";
 import {Color} from "three";
 import {range} from "@/utils";
+import {Model, ModelSync, Prop} from "vue-property-decorator";
 
 @Options({components: {ColorPicker}})
 export default class MyColorPicker extends Vue
 {
-    color = "#ffffff"
-    colorInput = this.color.substr(1)
+    @Model() color!: Color
+    colorModel = ''
+    colorInput = ''
     palette: string[][] = []
 
-    mounted(): void
+    created(): void
     {
+        this.colorModel = '#' + this.color.getHexString()
+        this.colorInput = this.colorModel.substr(1)
         this.palette = range(3).map(_ => range(10).map(_ => ''))
     }
 
     change(color: string): void
     {
         this.colorInput = color.substr(1)
+        const c = new Color(this.colorModel)
+        this.$emit('update:color', c)
+        this.$emit('updateColor', c)
     }
 }
 </script>