fix: make color picker use v-model and propsync (#1375)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

src/components/settings/ThemeSettings.vue

@@ -45,9 +45,8 @@
 
         <app-color-picker
           v-if="theme"
-          :primary="themeColor"
+          v-model="themeColor"
           :title="$t('app.setting.btn.select_theme')"
-          @change="handleChangeThemeColor"
         />
       </app-setting>
 
@@ -79,7 +78,6 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
-import { IroColor } from '@irojs/iro-core'
 import type { ThemePreset, ThemeConfig } from '@/store/config/types'
 import ThemePicker from '../ui/AppColorPicker.vue'
 
@@ -116,12 +114,10 @@ export default class ThemeSettings extends Mixins(StateMixin) {
     return this.theme.color
   }
 
-  handleChangeThemeColor (value: { channel: string; color: IroColor }) {
-    const color = value.color.hexString
-
-    if (this.theme.color.toLowerCase() !== color.toLowerCase()) {
+  set themeColor (value: string) {
+    if (this.theme.color.toLowerCase() !== value.toLowerCase()) {
       this.updateTheme({
-        color
+        color: value
       })
     }
   }

src/components/settings/macros/MacroSettingsDialog.vue

@@ -50,9 +50,8 @@
           {{ $t('app.setting.btn.reset') }}
         </app-btn>
         <app-color-picker
+          v-model="color"
           :title="$t('app.general.btn.set_color')"
-          :primary="color"
-          @change="handleColorChange"
         />
       </app-setting>
 
@@ -103,7 +102,6 @@
 <script lang="ts">
 import type { Macro } from '@/store/macros/types'
 import { Component, Vue, Prop, VModel } from 'vue-property-decorator'
-import type { IroColor } from '@irojs/iro-core'
 
 @Component({})
 export default class MacroMoveDialog extends Vue {
@@ -131,11 +129,11 @@ export default class MacroMoveDialog extends Vue {
     if (this.newMacro && this.newMacro.color !== '') {
       return this.newMacro.color
     }
-    return this.$vuetify.theme.currentTheme.secondary
+    return this.$vuetify.theme.currentTheme.secondary?.toString()
   }
 
-  handleColorChange (color: { channel: string, color: IroColor }) {
-    if (this.newMacro) this.newMacro.color = color.color.hexString
+  set color (value: string | undefined) {
+    if (this.newMacro) this.newMacro.color = value
   }
 
   handleResetColor () {