From 66d100834518df5ef610f9a913aa7e22a8412c39 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Sat, 30 Apr 2022 00:06:13 +0200
Subject: [PATCH] refactor: better binding for ViewModeSwitch

---
 .../js/components/screens/AlbumListScreen.vue |  2 +-
 .../components/screens/ArtistListScreen.vue   |  2 +-
 .../js/components/ui/ViewModeSwitch.vue       | 28 +++++++++----------
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/resources/assets/js/components/screens/AlbumListScreen.vue b/resources/assets/js/components/screens/AlbumListScreen.vue
index a0ed523e..ee91f9aa 100644
--- a/resources/assets/js/components/screens/AlbumListScreen.vue
+++ b/resources/assets/js/components/screens/AlbumListScreen.vue
@@ -3,7 +3,7 @@
     <ScreenHeader>
       Albums
       <template v-slot:controls>
-        <ViewModeSwitch v-model="viewMode" :value="viewMode"/>
+        <ViewModeSwitch v-model:mode="viewMode"/>
       </template>
     </ScreenHeader>
 
diff --git a/resources/assets/js/components/screens/ArtistListScreen.vue b/resources/assets/js/components/screens/ArtistListScreen.vue
index 763ed0da..bdfc0bd5 100644
--- a/resources/assets/js/components/screens/ArtistListScreen.vue
+++ b/resources/assets/js/components/screens/ArtistListScreen.vue
@@ -3,7 +3,7 @@
     <ScreenHeader>
       Artists
       <template v-slot:controls>
-        <ViewModeSwitch v-model="viewMode" :value="viewMode"/>
+        <ViewModeSwitch v-model:mode="viewMode"/>
       </template>
     </ScreenHeader>
 
diff --git a/resources/assets/js/components/ui/ViewModeSwitch.vue b/resources/assets/js/components/ui/ViewModeSwitch.vue
index 5a74d7bc..1502d47f 100644
--- a/resources/assets/js/components/ui/ViewModeSwitch.vue
+++ b/resources/assets/js/components/ui/ViewModeSwitch.vue
@@ -1,23 +1,23 @@
 <template>
   <span class="view-modes">
     <label
+      :class="{ active: value === 'thumbnails' }"
       class="thumbnails"
-      :class="{ active: modelValue === 'thumbnails' }"
-      title="View as thumbnails"
       data-test="view-mode-thumbnail"
+      title="View as thumbnails"
     >
-      <input class="hidden" type="radio" value="thumbnails" v-model="modelValue" @input="onInput">
+      <input v-model="value" class="hidden" name="view-mode" type="radio" value="thumbnails">
       <i class="fa fa-th-large"></i>
       <span class="hidden">View as thumbnails</span>
     </label>
 
     <label
+      :class="{ active: value === 'list' }"
       class="list"
-      :class="{ active: modelValue === 'list' }"
-      title="View as list"
       data-test="view-mode-list"
+      title="View as list"
     >
-      <input class="hidden" type="radio" value="list" v-model="modelValue" @input="onInput">
+      <input v-model="value" class="hidden" name="view-mode" type="radio" value="list">
       <i class="fa fa-list"></i>
       <span class="hidden">View as list</span>
     </label>
@@ -25,17 +25,15 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, toRefs, watchEffect } from 'vue'
+import { computed} from 'vue'
 
-const props = withDefaults(defineProps<{ value?: ArtistAlbumViewMode }>(), { value: 'thumbnails' })
-const { value } = toRefs(props)
+const props = withDefaults(defineProps<{ mode?: ArtistAlbumViewMode }>(), { mode: 'thumbnails' })
+const emit = defineEmits(['update:mode'])
 
-let modelValue = ref<ArtistAlbumViewMode>()
-
-watchEffect(() => (modelValue.value = value.value))
-
-const emit = defineEmits(['update:modelValue'])
-const onInput = (e: InputEvent) => emit('update:modelValue', (e.target as HTMLInputElement).value)
+const value = computed({
+  get: () => props.mode,
+  set: value => emit('update:mode', value)
+})
 </script>
 
 <style lang="scss" scoped>