[web] Rebuild web interface

web-src/package.json

@@ -22,22 +22,22 @@
     "mdi-vue": "^3.0.13",
     "reconnectingwebsocket": "^1.0.0",
     "spotify-web-api-js": "^1.5.2",
-    "vue": "^3.4.15",
+    "vue": "^3.4.23",
-    "vue-i18n": "^9.9.0",
+    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.2.5",
+    "vue-router": "^4.3.2",
     "vue3-click-away": "^1.2.4",
     "vue3-lazyload": "^0.3.8",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "^2.0.0",
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "^5.0.4",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.20.1",
+    "eslint-plugin-vue": "^9.25.0",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
-    "sass": "^1.70.0",
+    "sass": "^1.75.0",
-    "vite": "^5.0.12"
+    "vite": "^5.2.10"
   }
 }

web-src/src/components/ModalDialogPlaylistSave.vue

@@ -3,10 +3,10 @@
     <div v-if="show" class="modal is-active">
       <div class="modal-background" @click="$emit('close')" />
       <div class="modal-content">
-        <div class="card">
+        <form class="card" @submit.prevent="save">
           <div class="card-content">
             <p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
-            <form class="mb-5" @submit.prevent="save">
+            
               <div class="field">
                 <p class="control has-icons-left">
                   <input
@@ -14,13 +14,15 @@
                     v-model="playlist_name"
                     class="input is-shadowless"
                     type="text"
+                    pattern=".+"
+                    required
                     :placeholder="$t('dialog.playlist.save.playlist-name')"
                     :disabled="loading"
+                    @input="check_name"
                   />
                   <mdicon class="icon is-left" name="file-music" size="16" />
                 </p>
               </div>
-            </form>
           </div>
           <footer v-if="loading" class="card-footer">
             <a class="card-footer-item has-text-dark">
@@ -40,6 +42,7 @@
               />
             </a>
             <a
+              :class="{ 'is-disabled': disabled }"
               class="card-footer-item has-background-info has-text-white has-text-weight-bold"
               @click="save"
             >
@@ -50,7 +53,7 @@
               />
             </a>
           </footer>
-        </div>
+        </form>
       </div>
       <button
         class="modal-close is-large"
@@ -71,6 +74,7 @@ export default {
 
   data() {
     return {
+      disabled: true,
       playlist_name: '',
       loading: false
     }
@@ -89,11 +93,11 @@ export default {
   },
 
   methods: {
+    check_name(event) {
+      const { validity } = event.target
+      this.disabled = validity.patternMismatch || validity.valueMissing
+    },
     save() {
-      if (this.playlist_name.length < 1) {
-        return
-      }
-
       this.loading = true
       webapi
         .queue_save_playlist(this.playlist_name)

web-src/src/components/SettingsIntfield.vue

@@ -90,7 +90,6 @@ export default {
         window.clearTimeout(this.timerId)
         this.timerId = -1
       }
-
       this.statusUpdate = ''
       this.timerId = window.setTimeout(this.update_setting, this.timerDelay)
     },

web-src/src/mystyles.scss

@@ -48,6 +48,7 @@
     border-top-color: $grey-dark;
   }
   a.tag:hover,
+  a.tag.is-delete:hover,
   a.dropdown-item:hover,
   a.dropdown-item:focus,
   a.navbar-item:hover,

web-src/src/pages/PageSearchLibrary.vue

@@ -177,6 +177,7 @@ export default {
         this.search_types = SEARCH_TYPES
         this.search_limit = PAGE_SIZE
       }
+      this.search_query = this.search_query.trim()
       if (!this.search_query || !this.search_query.replace(/^query:/u, '')) {
         this.$refs.search_field.focus()
         return

web-src/src/pages/PageSearchSpotify.vue

@@ -144,7 +144,6 @@ export default {
       this.search_types = [type]
       this.search_parameters.limit = PAGE_SIZE_EXPANDED
       this.search_parameters.offset = 0
-
       this.search()
     },
     open_search(query) {
@@ -168,6 +167,7 @@ export default {
         this.search_types = SEARCH_TYPES
         this.search_parameters.limit = PAGE_SIZE
       }
+      this.search_query = this.search_query.trim()
       if (!this.search_query) {
         this.$refs.search_field.focus()
         return