mirror of
https://github.com/joomla/joomla-cms.git
synced 2024-06-28 16:13:42 +00:00
[4.0] Update vue in media manager to version 3 (#32955)
This commit is contained in:
parent
db414e7de7
commit
a9bb85c2ff
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -71,7 +71,6 @@ export default {
|
|||
setFullHeight() {
|
||||
this.fullHeight = `${window.innerHeight - this.$el.getBoundingClientRect().top}px`;
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -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,22 +164,18 @@ 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,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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,
|
||||
|
|
13689
package-lock.json
generated
13689
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
package.json
11
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"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user