[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,36 @@
 <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 +47,7 @@
             close(){
                 clearTimeout(this.timeout);
 
-                $('#alertModal').modal('hide');
+                this.alertModal.hide();
             },