[5.x] Update to bootstrap 5.1 and drop jQuery

package.json

@@ -1,4 +1,5 @@
 {
+    "name": "laravel-horizon",
     "private": true,
     "scripts": {
         "dev": "npm run development",
@@ -11,22 +12,20 @@
     },
     "devDependencies": {
         "axios": "^1.6.0",
-        "bootstrap": "^4.3.1",
+        "bootstrap": "~5.1.3",
         "chart.js": "^2.5.0",
         "highlight.js": "^10.4.1",
-        "jquery": "^3.5.0",
         "laravel-mix": "^6.0.13",
         "md5": "^2.2.1",
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.35",
         "phpunserialize": "1.*",
-        "popper.js": "^1.12",
         "resolve-url-loader": "^5.0.0",
-        "sass": "^1.26.3",
-        "sass-loader": "^11.0.1",
+        "sass": "^1.49.7",
+        "sass-loader": "^12.4",
         "sql-formatter": "^4.0.2",
         "vue": "^2.5.7",
-        "vue-json-pretty": "^1.4.1",
+        "vue-json-pretty": "^1.6.2",
         "vue-loader": "^15.9.6",
         "vue-router": "^3.0.1",
         "vue-template-compiler": "^2.5.21"

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
-    "/app.js": "/app.js?id=b4f3f08e60211bd6948ec35e5e9de9a1",
-    "/app-dark.css": "/app-dark.css?id=15c72df05e2b1147fa3e4b0670cfb435",
-    "/app.css": "/app.css?id=4d6a1a7fe095eedc2cb2a4ce822ea8a5",
+    "/app.js": "/app.js?id=944f83ac11f54a986d07fe5181200f59",
+    "/app-dark.css": "/app-dark.css?id=dcaca44a9f0f1d019e3cd3d76c3cb8fd",
+    "/app.css": "/app.css?id=14e3bcd1f1b1cf88e63e945529c4d0ce",
     "/img/favicon.png": "/img/favicon.png?id=1542bfe8a0010dcbee710da13cce367f",
     "/img/horizon.svg": "/img/horizon.svg?id=904d5b5185fefb09035384e15bfca765",
     "/img/sprite.svg": "/img/sprite.svg?id=afc4952b74895bdef3ab4ebe9adb746f"

resources/js/app.js

@@ -4,14 +4,7 @@ import axios from 'axios';
 import Routes from './routes';
 import VueRouter from 'vue-router';
 import VueJsonPretty from 'vue-json-pretty';
-
-window.Popper = require('popper.js').default;
-
-try {
-    window.$ = window.jQuery = require('jquery');
-
-    require('bootstrap');
-} catch (e) {}
+import 'vue-json-pretty/lib/styles.css';
 
 let token = document.head.querySelector('meta[name="csrf-token"]');
 
@@ -46,14 +39,6 @@ Vue.component('scheme-toggler', require('./components/SchemeToggler.vue').defaul
 
 Vue.mixin(Base);
 
-Vue.directive('tooltip', function (el, binding) {
-    $(el).tooltip({
-        title: binding.value,
-        placement: binding.arg,
-        trigger: 'hover',
-    });
-});
-
 new Vue({
     el: '#horizon',
 

resources/js/components/Alert.vue

@@ -1,31 +1,38 @@
 <script type="text/ecmascript-6">
+    import { Modal } from 'bootstrap';
+
     export default {
         props: ['type', 'message', 'autoClose', 'confirmationProceed', 'confirmationCancel'],
 
         data(){
             return {
                 timeout: null,
-                anotherModalOpened: $('body').hasClass('modal-open')
+                alertModal: null,
+                anotherModalOpened: document.body.classList.contains('modal-open')
             }
         },
 
 
         mounted() {
-            $('#alertModal').modal({
+            const alertModalElement = document.getElementById('alertModal');
+
+            this.alertModal = Modal.getOrCreateInstance(alertModalElement, {
                 backdrop: 'static',
-            });
+            })
+
+            this.alertModal.show();
 
-            $('#alertModal').on('hidden.bs.modal', e => {
+            alertModalElement.addEventListener('hidden.bs.modal', e => {
                 this.$root.alert.type = null;
                 this.$root.alert.autoClose = false;
                 this.$root.alert.message = '';
                 this.$root.alert.confirmationProceed = null;
                 this.$root.alert.confirmationCancel = null;
 
                 if (this.anotherModalOpened) {
-                    $('body').addClass('modal-open');
+                    document.body.classList.add('modal-open');
                 }
-            });
+            }, this);
 
             if (this.autoClose) {
                 this.timeout = setTimeout(() => {
@@ -42,7 +49,7 @@
             close(){
                 clearTimeout(this.timeout);
 
-                $('#alertModal').modal('hide');
+                this.alertModal.hide();
             },
 
 

resources/js/screens/batches/index.vue

@@ -132,7 +132,7 @@
             </div>
 
             <div v-if="!ready" class="d-flex align-items-center justify-content-center card-bg-secondary p-5 bottom-radius">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon spin mr-2 fill-text-color">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon spin me-2 fill-text-color">
                     <path d="M12 10a2 2 0 0 1-3.41 1.41A2 2 0 0 1 10 8V0a9.97 9.97 0 0 1 10 10h-8zm7.9 1.41A10 10 0 1 1 8.59.1v2.03a8 8 0 1 0 9.29 9.29h2.02zm-4.07 0a6 6 0 1 1-7.25-7.25v2.1a3.99 3.99 0 0 0-1.4 6.57 4 4 0 0 0 6.56-1.42h2.1z"></path>
                 </svg>
 
@@ -149,9 +149,9 @@
                 <tr>
                     <th>Batch</th>
                     <th>Status</th>
-                    <th class="text-right">Size</th>
-                    <th class="text-right">Completion</th>
-                    <th class="text-right">Created</th>
+                    <th class="text-end">Size</th>
+                    <th class="text-end">Completion</th>
+                    <th class="text-end">Created</th>
                 </tr>
                 </thead>
 
@@ -184,11 +184,11 @@
                             Cancelled
                         </small>
                     </td>
-                    <td class="text-right text-muted">{{batch.totalJobs}}</td>
-                    <td class="text-right text-muted">{{batch.progress}}%</td>
+                    <td class="text-end text-muted">{{ batch.totalJobs }}</td>
+                    <td class="text-end text-muted">{{ batch.progress }}%</td>
 
-                    <td class="text-right text-muted table-fit">
-                        {{ formatDateIso(batch.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
+                    <td class="text-end table-fit">
+                        {{ formatDateIso(batch.createdAt).format("YYYY-MM-DD HH:mm:ss") }}
                     </td>
                 </tr>
                 </tbody>