From b24e025b43a356f8c7b61b5851f447c1160f6556 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Wed, 28 Feb 2024 13:10:08 +0100
Subject: [PATCH] [web] Add default value for properties

---
 web-src/src/components/ControlDropdown.vue          |  5 ++++-
 web-src/src/components/ControlSlider.vue            |  7 ++++++-
 web-src/src/components/CoverArtwork.vue             | 10 +++++-----
 web-src/src/components/IndexButtonList.vue          |  2 +-
 web-src/src/components/ListAlbums.vue               |  6 +++++-
 web-src/src/components/ListArtists.vue              |  5 ++++-
 web-src/src/components/ListComposers.vue            |  6 +++++-
 web-src/src/components/ListDirectories.vue          |  2 +-
 web-src/src/components/ListGenres.vue               |  6 +++++-
 web-src/src/components/ListItemAlbumSpotify.vue     |  2 +-
 web-src/src/components/ListItemArtistSpotify.vue    |  2 +-
 web-src/src/components/ListItemPlaylistSpotify.vue  |  2 +-
 web-src/src/components/ListItemQueueItem.vue        | 10 +++++-----
 web-src/src/components/ListItemTrackSpotify.vue     |  6 +++++-
 web-src/src/components/ListPlaylists.vue            |  2 +-
 web-src/src/components/ListTracks.vue               |  8 ++++----
 web-src/src/components/ModalDialog.vue              | 13 +++++--------
 web-src/src/components/ModalDialogAlbum.vue         |  8 ++++----
 web-src/src/components/ModalDialogAlbumSpotify.vue  |  2 +-
 web-src/src/components/ModalDialogArtist.vue        |  2 +-
 web-src/src/components/ModalDialogArtistSpotify.vue |  2 +-
 web-src/src/components/ModalDialogComposer.vue      |  2 +-
 web-src/src/components/ModalDialogDirectory.vue     |  2 +-
 web-src/src/components/ModalDialogGenre.vue         |  6 +++++-
 web-src/src/components/ModalDialogPlaylist.vue      |  6 +++++-
 .../src/components/ModalDialogPlaylistSpotify.vue   |  2 +-
 web-src/src/components/ModalDialogQueueItem.vue     |  2 +-
 web-src/src/components/ModalDialogTrack.vue         |  2 +-
 web-src/src/components/ModalDialogTrackSpotify.vue  |  6 +++++-
 web-src/src/components/NavbarItemLink.vue           |  2 +-
 web-src/src/components/NavbarItemOutput.vue         |  6 +++---
 web-src/src/components/PlayerButtonSeekBack.vue     |  7 ++-----
 web-src/src/components/PlayerButtonSeekForward.vue  |  7 ++-----
 web-src/src/components/SettingsCheckbox.vue         |  9 ++++++---
 web-src/src/components/SettingsIntfield.vue         |  8 ++++----
 web-src/src/components/SettingsTextfield.vue        |  8 ++++----
 web-src/src/components/TabsSearch.vue               |  2 +-
 37 files changed, 109 insertions(+), 76 deletions(-)

diff --git a/web-src/src/components/ControlDropdown.vue b/web-src/src/components/ControlDropdown.vue
index ed95c248..54f9502a 100644
--- a/web-src/src/components/ControlDropdown.vue
+++ b/web-src/src/components/ControlDropdown.vue
@@ -33,7 +33,10 @@
 <script>
 export default {
   name: 'ControlDropdown',
-  props: { value: [String, Number], options: Array },
+  props: {
+    options: { required: true, type: Array },
+    value: { required: true, type: [String, Number] }
+  },
   emits: ['update:value'],
 
   data() {
diff --git a/web-src/src/components/ControlSlider.vue b/web-src/src/components/ControlSlider.vue
index 3edaf774..fedc4aff 100644
--- a/web-src/src/components/ControlSlider.vue
+++ b/web-src/src/components/ControlSlider.vue
@@ -17,7 +17,12 @@
 <script>
 export default {
   name: 'ControlSlider',
-  props: { value: Number, max: Number, disabled: Boolean, cursor: String },
+  props: {
+    cursor: { default: '', type: String },
+    disabled: Boolean,
+    max: { required: true, type: Number },
+    value: { required: true, type: Number }
+  },
   emits: ['update:value'],
 
   computed: {
diff --git a/web-src/src/components/CoverArtwork.vue b/web-src/src/components/CoverArtwork.vue
index d4012b45..4d6a4ce7 100644
--- a/web-src/src/components/CoverArtwork.vue
+++ b/web-src/src/components/CoverArtwork.vue
@@ -14,11 +14,11 @@ import webapi from '@/webapi'
 export default {
   name: 'CoverArtwork',
   props: {
-    artist: String,
-    album: String,
-    artwork_url: String,
-    maxwidth: Number,
-    maxheight: Number
+    album: { default: '', type: String },
+    artist: { default: '', type: String },
+    artwork_url: { default: '', type: String },
+    maxheight: { default: 600, type: Number },
+    maxwidth: { default: 600, type: Number }
   },
   emits: ['click'],
 
diff --git a/web-src/src/components/IndexButtonList.vue b/web-src/src/components/IndexButtonList.vue
index c814ac72..689fbaa0 100644
--- a/web-src/src/components/IndexButtonList.vue
+++ b/web-src/src/components/IndexButtonList.vue
@@ -15,7 +15,7 @@
 <script>
 export default {
   name: 'IndexButtonList',
-  props: { indices: Array }
+  props: { indices: { required: true, type: Array } }
 }
 </script>
 
diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index d9639abd..0fac30f9 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -77,7 +77,11 @@ import webapi from '@/webapi'
 export default {
   name: 'ListAlbums',
   components: { CoverArtwork, ModalDialog, ModalDialogAlbum },
-  props: { albums: Object, media_kind: String, hide_group_title: Boolean },
+  props: {
+    albums: { required: true, type: Object },
+    hide_group_title: Boolean,
+    media_kind: { default: '', type: String }
+  },
   emits: ['play-count-changed', 'podcast-deleted'],
 
   data() {
diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue
index d6eac955..bc63168a 100644
--- a/web-src/src/components/ListArtists.vue
+++ b/web-src/src/components/ListArtists.vue
@@ -39,7 +39,10 @@ import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
 export default {
   name: 'ListArtists',
   components: { ModalDialogArtist },
-  props: { artists: Object, hide_group_title: Boolean },
+  props: {
+    artists: { required: true, type: Object },
+    hide_group_title: Boolean
+  },
 
   data() {
     return {
diff --git a/web-src/src/components/ListComposers.vue b/web-src/src/components/ListComposers.vue
index 0edb7b0e..23c63670 100644
--- a/web-src/src/components/ListComposers.vue
+++ b/web-src/src/components/ListComposers.vue
@@ -40,7 +40,11 @@ import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
 export default {
   name: 'ListComposers',
   components: { ModalDialogComposer },
-  props: { composers: Object, media_kind: String, hide_group_title: Boolean },
+  props: {
+    composers: { required: true, type: Object },
+    hide_group_title: Boolean,
+    media_kind: { required: true, type: String }
+  },
 
   data() {
     return {
diff --git a/web-src/src/components/ListDirectories.vue b/web-src/src/components/ListDirectories.vue
index 9f78ccea..c1d2a30d 100644
--- a/web-src/src/components/ListDirectories.vue
+++ b/web-src/src/components/ListDirectories.vue
@@ -48,7 +48,7 @@ import ModalDialogDirectory from '@/components/ModalDialogDirectory.vue'
 export default {
   name: 'ListDirectories',
   components: { ModalDialogDirectory },
-  props: { directories: Array },
+  props: { directories: { required: true, type: Array } },
 
   data() {
     return {
diff --git a/web-src/src/components/ListGenres.vue b/web-src/src/components/ListGenres.vue
index ec7d66ff..3ce3eec3 100644
--- a/web-src/src/components/ListGenres.vue
+++ b/web-src/src/components/ListGenres.vue
@@ -40,7 +40,11 @@ import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
 export default {
   name: 'ListGenres',
   components: { ModalDialogGenre },
-  props: { genres: Object, hide_group_title: Boolean, media_kind: String },
+  props: {
+    genres: { required: true, type: Object },
+    hide_group_title: Boolean,
+    media_kind: { required: true, type: String }
+  },
 
   data() {
     return {
diff --git a/web-src/src/components/ListItemAlbumSpotify.vue b/web-src/src/components/ListItemAlbumSpotify.vue
index 71970a15..93d7f13b 100644
--- a/web-src/src/components/ListItemAlbumSpotify.vue
+++ b/web-src/src/components/ListItemAlbumSpotify.vue
@@ -25,7 +25,7 @@
 <script>
 export default {
   name: 'ListItemAlbumSpotify',
-  props: { album: Object }
+  props: { album: { required: true, type: Object } }
 }
 </script>
 
diff --git a/web-src/src/components/ListItemArtistSpotify.vue b/web-src/src/components/ListItemArtistSpotify.vue
index bacc289c..97031921 100644
--- a/web-src/src/components/ListItemArtistSpotify.vue
+++ b/web-src/src/components/ListItemArtistSpotify.vue
@@ -12,7 +12,7 @@
 <script>
 export default {
   name: 'ListItemArtistSpotify',
-  props: { artist: Object },
+  props: { artist: { required: true, type: Object } },
 
   methods: {
     open_artist() {
diff --git a/web-src/src/components/ListItemPlaylistSpotify.vue b/web-src/src/components/ListItemPlaylistSpotify.vue
index 310c2d84..ee6c46e5 100644
--- a/web-src/src/components/ListItemPlaylistSpotify.vue
+++ b/web-src/src/components/ListItemPlaylistSpotify.vue
@@ -13,7 +13,7 @@
 <script>
 export default {
   name: 'ListItemPlaylistSpotify',
-  props: { playlist: Object },
+  props: { playlist: { required: true, type: Object } },
 
   methods: {
     open_playlist() {
diff --git a/web-src/src/components/ListItemQueueItem.vue b/web-src/src/components/ListItemQueueItem.vue
index f6ca97cc..58464ac9 100644
--- a/web-src/src/components/ListItemQueueItem.vue
+++ b/web-src/src/components/ListItemQueueItem.vue
@@ -50,11 +50,11 @@ import webapi from '@/webapi'
 export default {
   name: 'ListItemQueueItem',
   props: {
-    item: Object,
-    position: Number,
-    current_position: Number,
-    show_only_next_items: Boolean,
-    edit_mode: Boolean
+    current_position: { required: true, type: Number },
+    edit_mode: Boolean,
+    item: { required: true, type: Object },
+    position: { required: true, type: Number },
+    show_only_next_items: Boolean
   },
 
   computed: {
diff --git a/web-src/src/components/ListItemTrackSpotify.vue b/web-src/src/components/ListItemTrackSpotify.vue
index 0f857b95..050ddaf6 100644
--- a/web-src/src/components/ListItemTrackSpotify.vue
+++ b/web-src/src/components/ListItemTrackSpotify.vue
@@ -44,7 +44,11 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ListItemTrackSpotify',
-  props: { track: Object, position: Number, context_uri: String },
+  props: {
+    context_uri: { required: true, type: String },
+    position: { required: true, type: Number },
+    track: { required: true, type: Object }
+  },
   methods: {
     play() {
       if (this.track.is_playable) {
diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
index 67719455..dbc10dba 100644
--- a/web-src/src/components/ListPlaylists.vue
+++ b/web-src/src/components/ListPlaylists.vue
@@ -32,7 +32,7 @@ import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue'
 export default {
   name: 'ListPlaylists',
   components: { ModalDialogPlaylist },
-  props: { playlists: Object },
+  props: { playlists: { required: true, type: Object } },
 
   data() {
     return {
diff --git a/web-src/src/components/ListTracks.vue b/web-src/src/components/ListTracks.vue
index de0f10da..12621170 100644
--- a/web-src/src/components/ListTracks.vue
+++ b/web-src/src/components/ListTracks.vue
@@ -62,11 +62,11 @@ export default {
   name: 'ListTracks',
   components: { ModalDialogTrack },
   props: {
-    tracks: Object,
-    uris: String,
-    expression: String,
+    expression: { default: '', type: String },
+    show_icon: Boolean,
     show_progress: Boolean,
-    show_icon: Boolean
+    tracks: { required: true, type: Object },
+    uris: { default: '', type: String }
   },
   emits: ['play-count-changed'],
 
diff --git a/web-src/src/components/ModalDialog.vue b/web-src/src/components/ModalDialog.vue
index 8a712207..a3b91ad1 100644
--- a/web-src/src/components/ModalDialog.vue
+++ b/web-src/src/components/ModalDialog.vue
@@ -12,10 +12,7 @@
             <footer class="card-footer is-clipped">
               <a class="card-footer-item has-text-dark" @click="$emit('close')">
                 <mdicon class="icon" name="cancel" size="16" />
-                <span
-                  class="is-size-7"
-                  v-text="close_action ? close_action : $t('dialog.cancel')"
-                />
+                <span class="is-size-7" v-text="close_action" />
               </a>
               <a
                 v-if="delete_action"
@@ -50,11 +47,11 @@
 export default {
   name: 'ModalDialog',
   props: {
+    close_action: { default: 'dialog.cancel', type: String },
+    delete_action: { default: '', type: String },
+    ok_action: { default: '', type: String },
     show: Boolean,
-    title: String,
-    ok_action: String,
-    delete_action: String,
-    close_action: String
+    title: { required: true, type: String }
   },
   emits: ['delete', 'close', 'ok']
 }
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index dd470094..75595f4d 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -121,10 +121,10 @@ export default {
   name: 'ModalDialogAlbum',
   components: { CoverArtwork },
   props: {
-    show: Boolean,
-    album: Object,
-    media_kind: String,
-    new_tracks: Array
+    album: { required: true, type: Object },
+    media_kind: { default: '', type: String },
+    new_tracks: { required: true, type: Array },
+    show: Boolean
   },
   emits: ['close', 'remove-podcast', 'play-count-changed'],
 
diff --git a/web-src/src/components/ModalDialogAlbumSpotify.vue b/web-src/src/components/ModalDialogAlbumSpotify.vue
index 0e050e54..55560f89 100644
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@@ -94,7 +94,7 @@ import webapi from '@/webapi'
 export default {
   name: 'ModalDialogAlbumSpotify',
   components: { CoverArtwork },
-  props: { show: Boolean, album: Object },
+  props: { album: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
   data() {
diff --git a/web-src/src/components/ModalDialogArtist.vue b/web-src/src/components/ModalDialogArtist.vue
index 3f0d6cc1..7b1bb297 100644
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@@ -69,7 +69,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogArtist',
-  props: { show: Boolean, artist: Object },
+  props: { artist: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
   methods: {
diff --git a/web-src/src/components/ModalDialogArtistSpotify.vue b/web-src/src/components/ModalDialogArtistSpotify.vue
index 2c9eb2f0..538557bf 100644
--- a/web-src/src/components/ModalDialogArtistSpotify.vue
+++ b/web-src/src/components/ModalDialogArtistSpotify.vue
@@ -75,7 +75,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogArtistSpotify',
-  props: { show: Boolean, artist: Object },
+  props: { artist: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
   methods: {
diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue
index ac55aca8..602562a2 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -71,7 +71,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogComposer',
-  props: { show: Boolean, composer: Object },
+  props: { composer: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
   methods: {
diff --git a/web-src/src/components/ModalDialogDirectory.vue b/web-src/src/components/ModalDialogDirectory.vue
index 220a9c6f..26cb62ad 100644
--- a/web-src/src/components/ModalDialogDirectory.vue
+++ b/web-src/src/components/ModalDialogDirectory.vue
@@ -42,7 +42,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogDirectory',
-  props: { show: Boolean, directory: String },
+  props: { directory: { required: true, type: String }, show: Boolean },
   emits: ['close'],
 
   methods: {
diff --git a/web-src/src/components/ModalDialogGenre.vue b/web-src/src/components/ModalDialogGenre.vue
index b753a862..6483e919 100644
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -62,7 +62,11 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogGenre',
-  props: { genre: Object, media_kind: String, show: Boolean },
+  props: {
+    genre: { required: true, type: Object },
+    media_kind: { required: true, type: String },
+    show: Boolean
+  },
   emits: ['close'],
 
   computed: {
diff --git a/web-src/src/components/ModalDialogPlaylist.vue b/web-src/src/components/ModalDialogPlaylist.vue
index 1ab08f02..220d724f 100644
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -68,7 +68,11 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlaylist',
-  props: { show: Boolean, playlist: Object, uris: String },
+  props: {
+    playlist: { required: true, type: Object },
+    show: Boolean,
+    uris: { default: '', type: String }
+  },
   emits: ['close'],
 
   methods: {
diff --git a/web-src/src/components/ModalDialogPlaylistSpotify.vue b/web-src/src/components/ModalDialogPlaylistSpotify.vue
index 01d6ca2f..fbb17710 100644
--- a/web-src/src/components/ModalDialogPlaylistSpotify.vue
+++ b/web-src/src/components/ModalDialogPlaylistSpotify.vue
@@ -80,7 +80,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlaylistSpotify',
-  props: { show: Boolean, playlist: Object },
+  props: { playlist: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
   methods: {
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index 8b732fab..1e2d7da0 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -154,7 +154,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogQueueItem',
-  props: { show: Boolean, item: Object },
+  props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
   data() {
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index f6cee2bb..d0e207c5 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -185,7 +185,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogTrack',
-  props: { show: Boolean, track: Object },
+  props: { show: Boolean, track: { required: true, type: Object } },
   emits: ['close', 'play-count-changed'],
 
   data() {
diff --git a/web-src/src/components/ModalDialogTrackSpotify.vue b/web-src/src/components/ModalDialogTrackSpotify.vue
index ee5a4b1e..00c1508e 100644
--- a/web-src/src/components/ModalDialogTrackSpotify.vue
+++ b/web-src/src/components/ModalDialogTrackSpotify.vue
@@ -110,7 +110,11 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogTrackSpotify',
-  props: { show: Boolean, track: Object, album: Object },
+  props: {
+    album: { required: true, type: Object },
+    show: Boolean,
+    track: { required: true, type: Object }
+  },
   emits: ['close'],
 
   methods: {
diff --git a/web-src/src/components/NavbarItemLink.vue b/web-src/src/components/NavbarItemLink.vue
index 15cd0564..b3c45f40 100644
--- a/web-src/src/components/NavbarItemLink.vue
+++ b/web-src/src/components/NavbarItemLink.vue
@@ -16,7 +16,7 @@ export default {
   name: 'NavbarItemLink',
   props: {
     exact: Boolean,
-    to: Object
+    to: { required: true, type: Object }
   },
 
   computed: {
diff --git a/web-src/src/components/NavbarItemOutput.vue b/web-src/src/components/NavbarItemOutput.vue
index fe733b9c..2fe5adc0 100644
--- a/web-src/src/components/NavbarItemOutput.vue
+++ b/web-src/src/components/NavbarItemOutput.vue
@@ -47,12 +47,12 @@ export default {
   components: {
     ControlSlider
   },
-  props: { output: Object },
+  props: { output: { required: true, type: Object } },
 
   data() {
     return {
-      volume: this.output.selected ? this.output.volume : 0,
-      cursor: mdiCancel
+      cursor: mdiCancel,
+      volume: this.output.selected ? this.output.volume : 0
     }
   },
 
diff --git a/web-src/src/components/PlayerButtonSeekBack.vue b/web-src/src/components/PlayerButtonSeekBack.vue
index 0f6f4584..912ec261 100644
--- a/web-src/src/components/PlayerButtonSeekBack.vue
+++ b/web-src/src/components/PlayerButtonSeekBack.vue
@@ -14,11 +14,8 @@ import webapi from '@/webapi'
 export default {
   name: 'PlayerButtonSeekBack',
   props: {
-    seek_ms: Number,
-    icon_size: {
-      type: Number,
-      default: 16
-    }
+    icon_size: { default: 16, type: Number },
+    seek_ms: { required: true, type: Number }
   },
 
   computed: {
diff --git a/web-src/src/components/PlayerButtonSeekForward.vue b/web-src/src/components/PlayerButtonSeekForward.vue
index cefc6b62..350f2803 100644
--- a/web-src/src/components/PlayerButtonSeekForward.vue
+++ b/web-src/src/components/PlayerButtonSeekForward.vue
@@ -14,11 +14,8 @@ import webapi from '@/webapi'
 export default {
   name: 'PlayerButtonSeekForward',
   props: {
-    seek_ms: Number,
-    icon_size: {
-      type: Number,
-      default: 16
-    }
+    icon_size: { default: 16, type: Number },
+    seek_ms: { required: true, type: Number }
   },
 
   computed: {
diff --git a/web-src/src/components/SettingsCheckbox.vue b/web-src/src/components/SettingsCheckbox.vue
index b69ad5a8..a877f356 100644
--- a/web-src/src/components/SettingsCheckbox.vue
+++ b/web-src/src/components/SettingsCheckbox.vue
@@ -26,13 +26,16 @@ import webapi from '@/webapi'
 
 export default {
   name: 'SettingsCheckbox',
-  props: { category_name: String, option_name: String },
+  props: {
+    category_name: { required: true, type: String },
+    option_name: { required: true, type: String }
+  },
 
   data() {
     return {
+      statusUpdate: '',
       timerDelay: 2000,
-      timerId: -1,
-      statusUpdate: ''
+      timerId: -1
     }
   },
 
diff --git a/web-src/src/components/SettingsIntfield.vue b/web-src/src/components/SettingsIntfield.vue
index 04f93a17..61eed9bc 100644
--- a/web-src/src/components/SettingsIntfield.vue
+++ b/web-src/src/components/SettingsIntfield.vue
@@ -33,10 +33,10 @@ import webapi from '@/webapi'
 export default {
   name: 'SettingsIntfield',
   props: {
-    category_name: String,
-    option_name: String,
-    placeholder: String,
-    disabled: Boolean
+    category_name: { required: true, type: String },
+    disabled: Boolean,
+    option_name: { required: true, type: String },
+    placeholder: { default: '', type: String }
   },
 
   data() {
diff --git a/web-src/src/components/SettingsTextfield.vue b/web-src/src/components/SettingsTextfield.vue
index d144e109..00d2ea65 100644
--- a/web-src/src/components/SettingsTextfield.vue
+++ b/web-src/src/components/SettingsTextfield.vue
@@ -32,10 +32,10 @@ import webapi from '@/webapi'
 export default {
   name: 'SettingsTextfield',
   props: {
-    category_name: String,
-    option_name: String,
-    placeholder: String,
-    disabled: Boolean
+    category_name: { required: true, type: String },
+    disabled: Boolean,
+    option_name: { required: true, type: String },
+    placeholder: { default: '', type: String }
   },
 
   data() {
diff --git a/web-src/src/components/TabsSearch.vue b/web-src/src/components/TabsSearch.vue
index e5e08dac..2f831ee6 100644
--- a/web-src/src/components/TabsSearch.vue
+++ b/web-src/src/components/TabsSearch.vue
@@ -38,7 +38,7 @@ import * as types from '@/store/mutation_types'
 
 export default {
   name: 'TabsSearch',
-  props: { query: String },
+  props: { query: { default: '', type: String } },
 
   computed: {
     spotify_enabled() {