[web] Rename "Dropdown" control

The control "Dropdown" is renamed and depending components have been linted.
2024-12-27 15:45:56 -05:00 · 2023-07-08 14:43:38 +02:00 · 2023-07-08 14:43:38 +02:00 · 0a072c7889
commit 0a072c7889
parent 332a57040e
10 changed files with 61 additions and 60 deletions
--- a/web-src/src/components/ControlDropdown.vue
+++ b/web-src/src/components/ControlDropdown.vue
@ -8,20 +8,20 @@
      <button
        class="button"
        aria-haspopup="true"
-        aria-controls="dropdown-menu"
+        aria-controls="dropdown"
        @click="is_active = !is_active"
      >
        <span v-text="option.name" />
        <mdicon class="icon" name="chevron-down" size="16" />
      </button>
    </div>
-    <div id="dropdown-menu" class="dropdown-menu" role="menu">
+    <div id="dropdown" class="dropdown-menu" role="menu">
      <div class="dropdown-content">
        <a
          v-for="o in options"
          :key="o.id"
          class="dropdown-item"
-          :class="{ 'is-active': modelValue === o.id }"
+          :class="{ 'is-active': value === o.id }"
          @click="select(o)"
          v-text="o.name"
        />
@ -32,9 +32,9 @@

 <script>
 export default {
-  name: 'DropdownMenu',
-  props: ['modelValue', 'options'],
-  emits: ['update:modelValue'],
+  name: 'ControlDropdown',
+  props: ['value', 'options'],
+  emits: ['update:value'],

  data() {
    return {
@ -45,7 +45,7 @@ export default {
  computed: {
    option: {
      get() {
-        return this.options.find((option) => option.id === this.modelValue)
+        return this.options.find((option) => option.id === this.value)
      }
    }
  },
@ -57,7 +57,7 @@ export default {

    select(option) {
      this.is_active = false
-      this.$emit('update:modelValue', option.id)
+      this.$emit('update:value', option.id)
    }
  }
 }
--- a/web-src/src/components/NavbarItemOutput.vue
+++ b/web-src/src/components/NavbarItemOutput.vue
@ -44,10 +44,11 @@ import webapi from '@/webapi'

 export default {
  name: 'NavbarItemOutput',
-  props: ['output'],
  components: {
    ControlSlider
  },
+  props: ['output'],
+
  data() {
    return {
      volume: this.output.selected ? this.output.volume : 0,
--- a/web-src/src/pages/PageAlbums.vue
+++ b/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) {
--- a/web-src/src/pages/PageArtist.vue
+++ b/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) {
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/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
--- a/web-src/src/pages/PageArtists.vue
+++ b/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) {
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/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
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/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
--- a/web-src/src/pages/SettingsPageWebinterface.vue
+++ b/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) {
--- a/web-src/src/templates/ContentWithHeading.vue
+++ b/web-src/src/templates/ContentWithHeading.vue
@ -60,7 +60,7 @@ export default {
  },

  mounted() {
-    if (this.$slots['options']) {
+    if (this.$slots.options) {
      this.observer = new IntersectionObserver(this.onElementObserved, {
        rootMargin: '-82px 0px 0px 0px',
        threshold: 1.0