From e3513049dfcca5e6da2e707c78fd9e99714c6d79 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Sat, 10 Dec 2022 18:46:33 -0600
Subject: [PATCH] Vue 3 WIP

---
 frontend/npm-shrinkwrap.json                  | 73 +++++++++++++++++++
 frontend/package.json                         |  1 +
 frontend/vue/components/Common/DataTable.vue  |  6 +-
 frontend/vue/components/Common/NowPlaying.vue |  1 -
 frontend/vue/components/Dashboard.vue         |  4 +-
 .../Stations/HlsStreams/EditModal.vue         |  4 +
 frontend/vue/components/Stations/Media.vue    |  8 +-
 .../Stations/Media/MediaToolbar.vue           |  6 +-
 .../components/Stations/Mounts/EditModal.vue  |  4 +
 .../Stations/Playlists/EditModal.vue          |  4 +
 .../Stations/Podcasts/EpisodeEditModal.vue    |  4 +
 .../Stations/Podcasts/PodcastEditModal.vue    |  4 +
 .../Stations/Profile/NowPlayingPanel.vue      |  7 +-
 .../Stations/Profile/StreamsPanel.vue         | 10 +--
 .../components/Stations/Remotes/EditModal.vue |  4 +
 .../Stations/SftpUsers/EditModal.vue          |  4 +
 .../Stations/Streamers/EditModal.vue          |  4 +
 .../Stations/Webhooks/EditModal.vue           |  4 +
 frontend/webpack.config.js                    |  2 +
 19 files changed, 132 insertions(+), 22 deletions(-)

diff --git a/frontend/npm-shrinkwrap.json b/frontend/npm-shrinkwrap.json
index 6b765c610..84a63eb43 100644
--- a/frontend/npm-shrinkwrap.json
+++ b/frontend/npm-shrinkwrap.json
@@ -66,6 +66,7 @@
         "vue-axios": "^3.5",
         "vue-clipboard2": "^0.3.3",
         "vue-loader": "^17",
+        "vue-style-loader": "^4.1.3",
         "vue3-daterange-picker": "^1",
         "vue3-gettext": "^2.3.4",
         "vuedraggable": "^2.24.1",
@@ -10049,6 +10050,44 @@
         "node": ">=8"
       }
     },
+    "node_modules/vue-style-loader": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
+      "integrity": "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==",
+      "dependencies": {
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.0.2"
+      }
+    },
+    "node_modules/vue-style-loader/node_modules/hash-sum": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+      "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
+    },
+    "node_modules/vue-style-loader/node_modules/json5": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/vue-style-loader/node_modules/loader-utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/vue3-daterange-picker": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/vue3-daterange-picker/-/vue3-daterange-picker-1.0.1.tgz",
@@ -18063,6 +18102,40 @@
         }
       }
     },
+    "vue-style-loader": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
+      "integrity": "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==",
+      "requires": {
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.0.2"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
+      }
+    },
     "vue3-daterange-picker": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/vue3-daterange-picker/-/vue3-daterange-picker-1.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ca6015eb2..57b396b8d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -67,6 +67,7 @@
     "vue-axios": "^3.5",
     "vue-clipboard2": "^0.3.3",
     "vue-loader": "^17",
+    "vue-style-loader": "^4.1.3",
     "vue3-daterange-picker": "^1",
     "vue3-gettext": "^2.3.4",
     "vuedraggable": "^2.24.1",
diff --git a/frontend/vue/components/Common/DataTable.vue b/frontend/vue/components/Common/DataTable.vue
index ee8974aa7..2520ce1dd 100644
--- a/frontend/vue/components/Common/DataTable.vue
+++ b/frontend/vue/components/Common/DataTable.vue
@@ -105,9 +105,9 @@
                         </div>
                     </div>
                 </template>
-                <slot v-for="(_, name) in $slots" :name="name" :slot="name"/>
-                <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
-                    <slot :name="name" v-bind="slotData"/>
+
+                <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
+                    <slot :name="slot" v-bind="scope"></slot>
                 </template>
             </b-table>
         </div>
diff --git a/frontend/vue/components/Common/NowPlaying.vue b/frontend/vue/components/Common/NowPlaying.vue
index 7af5ddbd1..01f078967 100644
--- a/frontend/vue/components/Common/NowPlaying.vue
+++ b/frontend/vue/components/Common/NowPlaying.vue
@@ -87,7 +87,6 @@ export default {
             }
 
             this.$emit('np_updated', np_new);
-            this.$eventHub.$emit('np_updated', np_new);
 
             document.dispatchEvent(new CustomEvent("now-playing", {
                 detail: np_new
diff --git a/frontend/vue/components/Dashboard.vue b/frontend/vue/components/Dashboard.vue
index 16278fc6b..babe75866 100644
--- a/frontend/vue/components/Dashboard.vue
+++ b/frontend/vue/components/Dashboard.vue
@@ -144,7 +144,9 @@
                             </template>
                         </td>
                         <td class="text-center">
-                            <icon class="sm align-middle" icon="headset"></icon>
+                            <span class="pr-1">
+                                <icon class="sm align-middle" icon="headset"></icon>
+                            </span>
                             <template v-if="item.links.listeners">
                                 <a :href="item.links.listeners">
                                     {{ item.listeners.total }}
diff --git a/frontend/vue/components/Stations/HlsStreams/EditModal.vue b/frontend/vue/components/Stations/HlsStreams/EditModal.vue
index 86840bf2f..d3158ca2c 100644
--- a/frontend/vue/components/Stations/HlsStreams/EditModal.vue
+++ b/frontend/vue/components/Stations/HlsStreams/EditModal.vue
@@ -11,10 +11,14 @@ import {required} from '@vuelidate/validators';
 import BaseEditModal from '~/components/Common/BaseEditModal';
 import FormBasicInfo from './Form/BasicInfo';
 import mergeExisting from "~/functions/mergeExisting";
+import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'EditModal',
     emits: ['needs-restart'],
+    setup() {
+        return {v$: useVuelidate()}
+    },
     mixins: [BaseEditModal],
     components: {FormBasicInfo},
     validations() {
diff --git a/frontend/vue/components/Stations/Media.vue b/frontend/vue/components/Stations/Media.vue
index aa461b29e..f197a4da0 100644
--- a/frontend/vue/components/Stations/Media.vue
+++ b/frontend/vue/components/Stations/Media.vue
@@ -46,7 +46,7 @@
                 </div>
 
                 <data-table ref="datatable" id="station_media" selectable paginated select-fields
-                            @row-selected="onRowSelected" @refreshed="onRefreshed" :fields="fields" :api-url="listUrl"
+                            @row-selected="onRowSelected" :fields="fields" :api-url="listUrl"
                             :request-config="requestConfig">
                     <template #cell(path)="row">
                         <div class="d-flex align-items-center">
@@ -342,9 +342,6 @@ export default {
                 directories: _.map(splitItems[0], 'path')
             };
         },
-        onRefreshed() {
-            this.$eventHub.$emit('refreshed');
-        },
         onTriggerNavigate() {
             this.$refs.datatable.navigate();
         },
@@ -367,9 +364,6 @@ export default {
         isFilterString(str) {
             return str.substring(0, 9) === 'playlist:' || str.substring(0, 8) === 'special:';
         },
-        playAudio(url) {
-            this.$eventHub.$emit('player_toggle', url);
-        },
         changeDirectory(newDir) {
             window.location.hash = newDir;
 
diff --git a/frontend/vue/components/Stations/Media/MediaToolbar.vue b/frontend/vue/components/Stations/Media/MediaToolbar.vue
index 8fd8202f6..9be0ddc19 100644
--- a/frontend/vue/components/Stations/Media/MediaToolbar.vue
+++ b/frontend/vue/components/Stations/Media/MediaToolbar.vue
@@ -3,7 +3,7 @@
         <div class="col-md-8">
             <div class="btn-group dropdown allow-focus">
                 <b-dropdown size="sm" variant="primary" ref="setPlaylistsDropdown" v-b-tooltip.hover
-                            :title="langPlaylistDropdown">
+                            class="mr-2" :title="langPlaylistDropdown">
                     <template #button-content>
                         <icon icon="clear_all"></icon>
                         <translate key="lang_playlists_title">Playlists</translate>
@@ -41,11 +41,11 @@
                     </b-dropdown-form>
                 </b-dropdown>
             </div>
-            <b-button size="sm" variant="primary" v-b-modal.move_file>
+            <b-button size="sm" variant="primary" class="mr-2" v-b-modal.move_file>
                 <icon icon="open_with"></icon>
                 <translate key="lang_btn_move">Move</translate>
             </b-button>
-            <b-dropdown size="sm" variant="default">
+            <b-dropdown size="sm" variant="default" class="mr-2">
                 <template #button-content>
                     <icon icon="more_horiz"></icon>
                     {{ langMore }}
diff --git a/frontend/vue/components/Stations/Mounts/EditModal.vue b/frontend/vue/components/Stations/Mounts/EditModal.vue
index c6450c934..f9817d96c 100644
--- a/frontend/vue/components/Stations/Mounts/EditModal.vue
+++ b/frontend/vue/components/Stations/Mounts/EditModal.vue
@@ -26,10 +26,14 @@ import MountFormAutoDj from './Form/AutoDj';
 import MountFormAdvanced from './Form/Advanced';
 import MountFormIntro from "./Form/Intro";
 import mergeExisting from "~/functions/mergeExisting";
+import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'EditModal',
     emits: ['needs-restart'],
+    setup() {
+        return {v$: useVuelidate()}
+    },
     mixins: [BaseEditModal],
     components: {MountFormIntro, MountFormAdvanced, MountFormAutoDj, MountFormBasicInfo},
     props: {
diff --git a/frontend/vue/components/Stations/Playlists/EditModal.vue b/frontend/vue/components/Stations/Playlists/EditModal.vue
index 35b85d1ff..48614bb01 100644
--- a/frontend/vue/components/Stations/Playlists/EditModal.vue
+++ b/frontend/vue/components/Stations/Playlists/EditModal.vue
@@ -18,11 +18,15 @@ import FormBasicInfo from './Form/BasicInfo';
 import FormSchedule from './Form/Schedule';
 import FormAdvanced from './Form/Advanced';
 import BaseEditModal from '~/components/Common/BaseEditModal';
+import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'EditModal',
     emits: ['needs-restart'],
     components: {FormSchedule, FormBasicInfo, FormAdvanced},
+    setup() {
+        return {v$: useVuelidate()}
+    },
     mixins: [BaseEditModal],
     props: {
         stationTimeZone: String,
diff --git a/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue b/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
index da287706e..a600c82d0 100644
--- a/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
+++ b/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
@@ -24,10 +24,14 @@ import PodcastCommonArtwork from './Common/Artwork';
 import EpisodeFormMedia from './EpisodeForm/Media';
 import {DateTime} from 'luxon';
 import mergeExisting from "~/functions/mergeExisting";
+import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'EditModal',
     components: {EpisodeFormMedia, PodcastCommonArtwork, EpisodeFormBasicInfo},
+    setup() {
+        return {v$: useVuelidate()}
+    },
     mixins: [BaseEditModal],
     props: {
         stationTimeZone: String,
diff --git a/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue b/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue
index 5f5c71440..59497a7e1 100644
--- a/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue
+++ b/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue
@@ -20,10 +20,14 @@ import BaseEditModal from '~/components/Common/BaseEditModal';
 import PodcastFormBasicInfo from './PodcastForm/BasicInfo';
 import PodcastCommonArtwork from './Common/Artwork';
 import mergeExisting from "~/functions/mergeExisting";
+import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'EditModal',
     components: {PodcastCommonArtwork, PodcastFormBasicInfo},
+    setup() {
+        return {v$: useVuelidate()}
+    },
     mixins: [BaseEditModal],
     props: {
         stationTimeZone: String,
diff --git a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
index fd3b1002b..35848d37f 100644
--- a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
+++ b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
@@ -5,10 +5,13 @@
                 <h3 class="flex-shrink card-title my-0" key="lang_profile_nowplaying_onair" v-translate>On the Air</h3>
                 <h6 class="card-subtitle text-right flex-fill my-0" style="line-height: 1;">
                     <icon class="sm align-middle" icon="headset"></icon>
-                    {{ langListeners }}
+                    <span class="pl-1">
+                        {{ langListeners }}
+                    </span>
+
                     <br>
                     <small>
-                        <span>{{ np.listeners.unique }}</span>
+                        <span class="pr-1">{{ np.listeners.unique }}</span>
                         <translate key="lang_profile_nowplaying_unique">Unique</translate>
                     </small>
                 </h6>
diff --git a/frontend/vue/components/Stations/Profile/StreamsPanel.vue b/frontend/vue/components/Stations/Profile/StreamsPanel.vue
index f64c87b63..7e40a5e26 100644
--- a/frontend/vue/components/Stations/Profile/StreamsPanel.vue
+++ b/frontend/vue/components/Stations/Profile/StreamsPanel.vue
@@ -27,9 +27,9 @@
                     </td>
                     <td class="pl-1 text-right">
                         <icon class="sm align-middle" icon="headset"></icon>
-                        <span class="listeners-total">{{ mount.listeners.total }}</span><br>
+                        <span class="listeners-total pl-1">{{ mount.listeners.total }}</span><br>
                         <small>
-                            <span class="listeners-unique">{{ mount.listeners.unique }}</span>
+                            <span class="listeners-unique pr-1">{{ mount.listeners.unique }}</span>
                             <translate key="lang_streams_unique">Unique</translate>
                         </small>
                     </td>
@@ -55,9 +55,9 @@
                     </td>
                     <td class="pl-1 text-right">
                         <icon class="sm align-middle" icon="headset"></icon>
-                        <span class="listeners-total">{{ remote.listeners.total }}</span><br>
+                        <span class="listeners-total pl-1">{{ remote.listeners.total }}</span><br>
                         <small>
-                            <span class="listeners-unique">{{ remote.listeners.unique }}</span>
+                            <span class="listeners-unique pr-1">{{ remote.listeners.unique }}</span>
                             <translate key="lang_streams_unique">Unique</translate>
                         </small>
                     </td>
@@ -82,7 +82,7 @@
                     </td>
                     <td class="pl-1 text-right">
                         <icon class="sm align-middle" icon="headset"></icon>
-                        <span class="listeners-total">{{ np.station.hls_listeners }}</span>
+                        <span class="listeners-total pl-1">{{ np.station.hls_listeners }}</span>
                     </td>
                 </tr>
                 </tbody>
diff --git a/frontend/vue/components/Stations/Remotes/EditModal.vue b/frontend/vue/components/Stations/Remotes/EditModal.vue
index afb1a8f87..cd960cb55 100644
--- a/frontend/vue/components/Stations/Remotes/EditModal.vue
+++ b/frontend/vue/components/Stations/Remotes/EditModal.vue
@@ -16,10 +16,14 @@ import BaseEditModal from '~/components/Common/BaseEditModal';
 import RemoteFormBasicInfo from "./Form/BasicInfo";
 import RemoteFormAutoDj from "./Form/AutoDj";
 import {REMOTE_ICECAST} from "~/components/Entity/RadioAdapters";
+import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'RemoteEditModal',
     emits: ['needs-restart'],
+    setup() {
+        return {v$: useVuelidate()}
+    },
     mixins: [BaseEditModal],
     components: {
         RemoteFormAutoDj,
diff --git a/frontend/vue/components/Stations/SftpUsers/EditModal.vue b/frontend/vue/components/Stations/SftpUsers/EditModal.vue
index 18cdf412c..c67820772 100644
--- a/frontend/vue/components/Stations/SftpUsers/EditModal.vue
+++ b/frontend/vue/components/Stations/SftpUsers/EditModal.vue
@@ -10,9 +10,13 @@
 import {required} from '@vuelidate/validators';
 import BaseEditModal from '~/components/Common/BaseEditModal';
 import SftpUsersForm from "./Form";
+import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'SftpUsersEditModal',
+    setup() {
+        return {v$: useVuelidate()}
+    },
     mixins: [BaseEditModal],
     components: {SftpUsersForm},
     validations() {
diff --git a/frontend/vue/components/Stations/Streamers/EditModal.vue b/frontend/vue/components/Stations/Streamers/EditModal.vue
index a7990708a..b8fbe7f7d 100644
--- a/frontend/vue/components/Stations/Streamers/EditModal.vue
+++ b/frontend/vue/components/Stations/Streamers/EditModal.vue
@@ -19,9 +19,13 @@ import FormSchedule from './Form/Schedule';
 import FormArtwork from './Form/Artwork';
 import BaseEditModal from '~/components/Common/BaseEditModal';
 import mergeExisting from "~/functions/mergeExisting";
+import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'EditModal',
+    setup() {
+        return {v$: useVuelidate()}
+    },
     mixins: [BaseEditModal],
     components: {FormBasicInfo, FormSchedule, FormArtwork},
     props: {
diff --git a/frontend/vue/components/Stations/Webhooks/EditModal.vue b/frontend/vue/components/Stations/Webhooks/EditModal.vue
index 1de5a4c6a..2485d2d02 100644
--- a/frontend/vue/components/Stations/Webhooks/EditModal.vue
+++ b/frontend/vue/components/Stations/Webhooks/EditModal.vue
@@ -33,9 +33,13 @@ import Twitter from "./Form/Twitter";
 import GoogleAnalytics from "./Form/GoogleAnalytics";
 import MatomoAnalytics from "./Form/MatomoAnalytics";
 import Mastodon from "./Form/Mastodon";
+import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'EditModal',
+    setup() {
+        return {v$: useVuelidate()}
+    },
     components: {BasicInfo, TypeSelect},
     mixins: [BaseEditModal],
     props: {
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 95db406fb..904de0671 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -114,6 +114,7 @@ module.exports = {
             {
                 test: /\.scss$/i,
                 use: [
+                    'vue-style-loader',
                     'css-loader',
                     'sass-loader'
                 ]
@@ -121,6 +122,7 @@ module.exports = {
             {
                 test: /\.css$/i,
                 use: [
+                    'vue-style-loader',
                     'css-loader'
                 ]
             },