Merge branch '4.0-dev' into tiny_mce_plugin_toggle

joomla · Apr 21, 2019 · b22a072 · b22a072
2 parents 0b77877 + 2fdf140
commit b22a072
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 64 deletions.
diff --git a/administrator/components/com_media/package-lock.json b/administrator/components/com_media/package-lock.json
diff --git a/administrator/components/com_media/package.json b/administrator/components/com_media/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "file-saver": "^1.3.3",
     "vue": "^2.5.17",
-    "vue-focus": "^2.1.0",
+    "vue-focus-lock": "^1.3.0",
     "vuex": "^2.5.0",
     "vuex-persistedstate": "^2.4.2"
   },

diff --git a/...istrator/components/com_media/resources/scripts/components/modals/create-folder-modal.vue b/...istrator/components/com_media/resources/scripts/components/modals/create-folder-modal.vue
@@ -6,7 +6,7 @@
                 <div class="form-group">
                     <label for="folder">{{ translate('COM_MEDIA_FOLDER_NAME') }}</label>
                     <input id="folder" class="form-control"
-                           v-focus="true" v-model.trim="folder" @input="folder = $event.target.value"
+                           v-model.trim="folder" @input="folder = $event.target.value"
                            required autocomplete="off">
                 </div>
             </form>
@@ -21,11 +21,9 @@
 
 <script>
     import * as types from "./../../store/mutation-types";
-    import {focus} from 'vue-focus';
 
     export default {
         name: 'media-create-folder-modal',
-        directives: {focus: focus},
         data() {
             return {
                 folder: '',

diff --git a/administrator/components/com_media/resources/scripts/components/modals/modal.vue b/administrator/components/com_media/resources/scripts/components/modals/modal.vue
@@ -1,31 +1,31 @@
 <template>
     <div class="media-modal-backdrop" @click="close()">
         <div class="modal" @click.stop style="display: flex">
-            <slot name="backdrop-close"></slot>
-            <div class="modal-dialog" :class="modalClass" role="alertdialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <slot name="header"></slot>
-                        <button type="button" v-if="showClose" class="close" @click="close()"
-                                aria-label="Close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                    </div>
-                    <div class="modal-body">
-                        <slot name="body"></slot>
-                    </div>
-                    <div class="modal-footer">
-                        <slot name="footer"></slot>
-                    </div>
-                </div>
-            </div>
+			<tab-lock>
+				<slot name="backdrop-close"></slot>
+				<div class="modal-dialog" :class="modalClass" role="alertdialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<slot name="header"></slot>
+							<button type="button" v-if="showClose" class="close" @click="close()"
+									aria-label="Close">
+								<span aria-hidden="true">&times;</span>
+							</button>
+						</div>
+						<div class="modal-body">
+							<slot name="body"></slot>
+						</div>
+						<div class="modal-footer">
+							<slot name="footer"></slot>
+						</div>
+					</div>
+				</div>
+			</tab-lock>
         </div>
     </div>
 </template>
 
 <script>
-    import * as types from "./../../store/mutation-types";
-
     export default {
         name: 'media-modal',
         props: {
@@ -68,4 +68,4 @@
             document.removeEventListener('keydown', this.onKeyDown);
         },
     }
-</script>
+</script>
diff --git a/administrator/components/com_media/resources/scripts/components/modals/rename-modal.vue b/administrator/components/com_media/resources/scripts/components/modals/rename-modal.vue
@@ -7,7 +7,7 @@
                     <label for="name">{{ translate('COM_MEDIA_NAME') }}</label>
                     <div :class="{'input-group': extension.length}">
                         <input id="name" class="form-control" placeholder="Name"
-                               v-focus="true" v-model.trim="name" @input="name = $event.target.value"
+                               v-model.trim="name" @input="name = $event.target.value"
                                required autocomplete="off">
                         <span class="input-group-addon" v-if="extension.length">{{extension }}</span>
                     </div>
@@ -24,11 +24,9 @@
 
 <script>
     import * as types from "./../../store/mutation-types";
-    import {focus} from 'vue-focus';
 
     export default {
         name: 'media-rename-modal',
-        directives: {focus: focus},
         data() {
             return {
                 originalName: '',

diff --git a/administrator/components/com_media/resources/scripts/mediamanager.js b/administrator/components/com_media/resources/scripts/mediamanager.js
@@ -19,6 +19,7 @@ import Infobar from "./components/infobar/infobar.vue";
 import Upload from "./components/upload/upload.vue";
 import Translate from "./plugins/translate";
 import store from './store/store';
+import Lock from 'vue-focus-lock';
 
 // Add the plugins
 Vue.use(Translate);
@@ -40,6 +41,7 @@ Vue.component('media-share-modal', ShareModal);
 Vue.component('media-confirm-delete-modal', ConfirmDeleteModal);
 Vue.component('media-infobar', Infobar);
 Vue.component('media-upload', Upload);
+Vue.component('tab-lock', Lock);
 
 // Register MediaManager namespace
 window.MediaManager = window.MediaManager || {};