[web] Rename "Dropdown" control

The control "Dropdown" is renamed and depending components have been linted.

web-src/src/pages/PageAlbums.vue

@@ -40,8 +40,8 @@
           </div>
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.albums.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -63,14 +63,14 @@
 </template>
 
 <script>
-import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsMusic from '@/components/TabsMusic.vue'
-import IndexButtonList from '@/components/IndexButtonList.vue'
-import ListAlbums from '@/components/ListAlbums.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
-import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 import { GroupByList, byName, byYear } from '@/lib/GroupByList'
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
+import IndexButtonList from '@/components/IndexButtonList.vue'
+import ListAlbums from '@/components/ListAlbums.vue'
+import TabsMusic from '@/components/TabsMusic.vue'
+import webapi from '@/webapi'
 
 const dataObject = {
   load(to) {
@@ -86,10 +86,10 @@ export default {
   name: 'PageAlbums',
   components: {
     ContentWithHeading,
-    TabsMusic,
+    ControlDropdown,
     IndexButtonList,
     ListAlbums,
-    DropdownMenu
+    TabsMusic
   },
 
   beforeRouteEnter(to, from, next) {

web-src/src/pages/PageArtist.vue

@@ -5,8 +5,8 @@
         <div class="columns">
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -58,9 +58,9 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 import { GroupByList, byName, byYear } from '@/lib/GroupByList'
@@ -83,9 +83,9 @@ export default {
   name: 'PageArtist',
   components: {
     ContentWithHeading,
+    ControlDropdown,
     ListAlbums,
     ModalDialogArtist,
-    DropdownMenu
   },
 
   beforeRouteEnter(to, from, next) {

web-src/src/pages/PageArtistTracks.vue

@@ -6,8 +6,8 @@
         <div class="columns">
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -58,14 +58,14 @@
 </template>
 
 <script>
+import * as types from '@/store/mutation_types'
+import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
 import webapi from '@/webapi'
-import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
@@ -85,7 +85,7 @@ export default {
   name: 'PageArtistTracks',
   components: {
     ContentWithHeading,
-    DropdownMenu,
+    ControlDropdown,
     IndexButtonList,
     ListTracks,
     ModalDialogArtist

web-src/src/pages/PageArtists.vue

@@ -40,8 +40,8 @@
           </div>
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artists.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -63,14 +63,14 @@
 </template>
 
 <script>
-import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsMusic from '@/components/TabsMusic.vue'
-import IndexButtonList from '@/components/IndexButtonList.vue'
-import ListArtists from '@/components/ListArtists.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
-import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 import { GroupByList, byName, byYear } from '@/lib/GroupByList'
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
+import IndexButtonList from '@/components/IndexButtonList.vue'
+import ListArtists from '@/components/ListArtists.vue'
+import TabsMusic from '@/components/TabsMusic.vue'
+import webapi from '@/webapi'
 
 const dataObject = {
   load(to) {
@@ -86,10 +86,10 @@ export default {
   name: 'PageArtists',
   components: {
     ContentWithHeading,
-    TabsMusic,
+    ControlDropdown,
     IndexButtonList,
     ListArtists,
-    DropdownMenu
+    TabsMusic,
   },
 
   beforeRouteEnter(to, from, next) {

web-src/src/pages/PageComposerTracks.vue

@@ -6,8 +6,8 @@
         <div class="columns">
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -60,14 +60,14 @@
 </template>
 
 <script>
+import * as types from '@/store/mutation_types'
+import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
 import webapi from '@/webapi'
-import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
@@ -87,7 +87,7 @@ export default {
   name: 'PageComposerTracks',
   components: {
     ContentWithHeading,
-    DropdownMenu,
+    ControlDropdown,
     IndexButtonList,
     ListTracks,
     ModalDialogComposer

web-src/src/pages/PageGenreTracks.vue

@@ -6,8 +6,8 @@
         <div class="columns">
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.genre.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -54,14 +54,14 @@
 </template>
 
 <script>
+import * as types from '@/store/mutation_types'
+import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
 import webapi from '@/webapi'
-import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
@@ -81,7 +81,7 @@ export default {
   name: 'PageGenreTracks',
   components: {
     ContentWithHeading,
-    DropdownMenu,
+    ControlDropdown,
     IndexButtonList,
     ListTracks,
     ModalDialogGenre

web-src/src/pages/SettingsPageWebinterface.vue

@@ -6,7 +6,7 @@
         <div class="title is-4" v-text="$t('page.settings.general.language')" />
       </template>
       <template #content>
-        <dropdown-menu v-model="locale" :options="locales" />
+        <control-dropdown v-model:value="locale" :options="locales" />
       </template>
     </content-with-heading>
     <content-with-heading>
@@ -179,21 +179,21 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsSettings from '@/components/TabsSettings.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
 import SettingsCheckbox from '@/components/SettingsCheckbox.vue'
-import SettingsTextfield from '@/components/SettingsTextfield.vue'
 import SettingsIntfield from '@/components/SettingsIntfield.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
+import SettingsTextfield from '@/components/SettingsTextfield.vue'
+import TabsSettings from '@/components/TabsSettings.vue'
 
 export default {
   name: 'SettingsPageWebinterface',
   components: {
     ContentWithHeading,
-    TabsSettings,
+    ControlDropdown,
     SettingsCheckbox,
-    SettingsTextfield,
     SettingsIntfield,
-    DropdownMenu
+    SettingsTextfield,
+    TabsSettings,
   },
 
   computed: {
@@ -207,7 +207,7 @@ export default {
 
     locale: {
       get() {
-        let languages = this.$i18n.availableLocales
+        const languages = this.$i18n.availableLocales
         let locale = languages.find((lang) => lang === this.$i18n.locale)
         let partial = this.$i18n.locale.split('-')[0]
         if (!locale) {