[4.0] Update vue in media manager to version 3 (#32955)

administrator/components/com_media/resources/scripts/app/Event.es6.js

@@ -1,5 +1,3 @@
-import Vue from 'vue/dist/vue.esm.browser.min.js';
-
 /**
  * Media Event bus - used for communication between joomla and vue
  */
@@ -8,7 +6,7 @@ export default class Event {
      * Media Event constructor
      */
   constructor() {
-    this.vue = new Vue();
+    this.events = {};
   }
 
   /**
@@ -17,7 +15,9 @@ export default class Event {
      * @param data
      */
   fire(event, data = null) {
-    this.vue.$emit(event, data);
+    if (this.events[event]) {
+      this.events[event].forEach((fn) => fn(data));
+    }
   }
 
   /**
@@ -26,6 +26,7 @@ export default class Event {
      * @param callback
      */
   listen(event, callback) {
-    this.vue.$on(event, callback);
+    this.events[event] = this.events[event] || [];
+    this.events[event].push(callback);
   }
 }

administrator/components/com_media/resources/scripts/components/app.vue

@@ -71,7 +71,6 @@ export default {
     setFullHeight() {
       this.fullHeight = `${window.innerHeight - this.$el.getBoundingClientRect().top}px`;
     },
-
   },
 };
 </script>

administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js

@@ -1,3 +1,4 @@
+import { h } from 'vue';
 import Directory from './directory.vue';
 import File from './file.vue';
 import Image from './image.vue';
@@ -154,8 +155,8 @@ export default {
       value ? this.mouseover() : this.mouseleave();
     },
   },
-  render(createElement) {
-    return createElement(
+  render() {
+    return h(
       'div',
       {
         class: {
@@ -163,21 +164,17 @@ export default {
           selected: this.isSelected(),
           active: this.isHoverActive(),
         },
-        on: {
-          click: this.handleClick,
-          mouseover: this.mouseover,
-          mouseleave: this.mouseleave,
-          focused: this.focused,
-        },
+        onClick: this.handleClick,
+        onMouseover: this.mouseover,
+        onMouseleave: this.mouseleave,
+        onFocused: this.focused,
       },
       [
-        createElement(
+        h(
           this.itemType(),
           {
-            props: {
-              item: this.item,
-              focused: this.focused,
-            },
+            item: this.item,
+            focused: this.focused,
           },
         ),
       ],

administrator/components/com_media/resources/scripts/mediamanager.es6.js

@@ -1,5 +1,4 @@
-import Vue from 'vue/dist/vue.esm.browser.min.js';
-import Lock from 'vue-focus-lock/src/index.js';
+import { createApp } from 'vue';
 import Event from './app/Event.es6';
 import App from './components/app.vue';
 import Disk from './components/tree/disk.vue';
@@ -19,41 +18,36 @@ import ShareModal from './components/modals/share-modal.vue';
 import ConfirmDeleteModal from './components/modals/confirm-delete-modal.vue';
 import Infobar from './components/infobar/infobar.vue';
 import Upload from './components/upload/upload.vue';
-import Translate from './plugins/translate.es6';
+import translate from './plugins/translate.es6';
 import store from './store/store.es6';
 
-// Add the plugins
-Vue.use(Translate);
-
-// Register the vue components
-Vue.component('MediaDrive', Drive);
-Vue.component('MediaDisk', Disk);
-Vue.component('MediaTree', Tree);
-Vue.component('MediaTreeItem', TreeItem);
-Vue.component('MediaToolbar', Toolbar);
-Vue.component('MediaBreadcrumb', Breadcrumb);
-Vue.component('MediaBrowser', Browser);
-Vue.component('MediaBrowserItem', BrowserItem);
-Vue.component('MediaBrowserItemRow', BrowserItemRow);
-Vue.component('MediaModal', Modal);
-Vue.component('MediaCreateFolderModal', CreateFolderModal);
-Vue.component('MediaPreviewModal', PreviewModal);
-Vue.component('MediaRenameModal', RenameModal);
-Vue.component('MediaShareModal', ShareModal);
-Vue.component('MediaConfirmDeleteModal', ConfirmDeleteModal);
-Vue.component('MediaInfobar', Infobar);
-Vue.component('MediaUpload', Upload);
-Vue.component('TabLock', Lock);
-
 // Register MediaManager namespace
 window.MediaManager = window.MediaManager || {};
 // Register the media manager event bus
 window.MediaManager.Event = new Event();
 
-// Create the root Vue instance
-document.addEventListener('DOMContentLoaded',
-  () => new Vue({
-    el: '#com-media',
-    store,
-    render: (h) => h(App),
-  }));
+// Create the Vue app instance
+const app = createApp(App);
+app.use(store);
+app.use(translate);
+
+// Register the vue components
+app.component('MediaDrive', Drive);
+app.component('MediaDisk', Disk);
+app.component('MediaTree', Tree);
+app.component('MediaTreeItem', TreeItem);
+app.component('MediaToolbar', Toolbar);
+app.component('MediaBreadcrumb', Breadcrumb);
+app.component('MediaBrowser', Browser);
+app.component('MediaBrowserItem', BrowserItem);
+app.component('MediaBrowserItemRow', BrowserItemRow);
+app.component('MediaModal', Modal);
+app.component('MediaCreateFolderModal', CreateFolderModal);
+app.component('MediaPreviewModal', PreviewModal);
+app.component('MediaRenameModal', RenameModal);
+app.component('MediaShareModal', ShareModal);
+app.component('MediaConfirmDeleteModal', ConfirmDeleteModal);
+app.component('MediaInfobar', Infobar);
+app.component('MediaUpload', Upload);
+
+app.mount('#com-media');

administrator/components/com_media/resources/scripts/store/store.es6.js

@@ -1,16 +1,13 @@
-import Vue from 'vue/dist/vue.esm.browser.min.js';
-import Vuex from 'vuex/dist/vuex.esm.browser.min.js';
-import createPersistedState from 'vuex-persistedstate/dist/vuex-persistedstate.es.js';
+import { createStore } from 'vuex';
+import createPersistedState from 'vuex-persistedstate';
 import state from './state.es6';
 import * as getters from './getters.es6';
 import * as actions from './actions.es6';
 import mutations from './mutations.es6';
 import { persistedStateOptions } from './plugins/persisted-state.es6';
 
-Vue.use(Vuex);
-
 // A Vuex instance is created by combining the state, mutations, actions, and getters.
-export default new Vuex.Store({
+export default createStore({
   state,
   getters,
   actions,

package.json

@@ -56,10 +56,9 @@
     "short-and-sweet": "^1.0.2",
     "skipto": "^4.0.4",
     "tinymce": "^5.7.1",
-    "vue": "^2.6.12",
-    "vue-focus-lock": "^1.4.1",
-    "vuex": "^3.6.0",
-    "vuex-persistedstate": "^3.2.0"
+    "vue": "^3.0.10",
+    "vuex": "^4.0.0",
+    "vuex-persistedstate": "^4.0.0-beta.3"
   },
   "devDependencies": {
     "@babel/core": "^7.13.10",
@@ -71,6 +70,7 @@
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
     "@rollup/plugin-replace": "^2.4.1",
+    "@vue/compiler-sfc": "^3.0.10",
     "autoprefixer": "^9.8.6",
     "babel-plugin-add-header-comment": "^1.0.3",
     "commander": "^5.1.0",
@@ -97,7 +97,7 @@
     "recursive-readdir": "^2.2.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.42.1",
-    "rollup-plugin-vue": "^5.1.9",
+    "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.32.8",
     "selenium-standalone": "6.23.0",
     "stylelint": "^13.12.0",
@@ -105,7 +105,6 @@
     "stylelint-order": "^4.1.0",
     "stylelint-scss": "^3.19.0",
     "terser": "^5.6.1",
-    "vue-template-compiler": "^2.6.12",
     "watch": "^1.0.2"
   }
 }