Feature #3 : jQuery and Sweetalert2

This commit is contained in:
Daeng Deni Mardaeni 2024-08-05 14:26:06 +07:00
parent 8bfc23fa23
commit d2b549b6e6
5 changed files with 33 additions and 8 deletions

View File

@ -6,6 +6,7 @@
"build": "vite build" "build": "vite build"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-inject": "^5.0.5",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",
"axios": "^1.6.4", "axios": "^1.6.4",
"laravel-vite-plugin": "^1.0", "laravel-vite-plugin": "^1.0",
@ -16,6 +17,8 @@
}, },
"dependencies": { "dependencies": {
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"mini-svg-data-uri": "^1.4.4" "jquery": "^3.7.1",
"mini-svg-data-uri": "^1.4.4",
"sweetalert2": "^11.12.4"
} }
} }

View File

@ -3,3 +3,6 @@ import "./bootstrap";
import "../metronic/core/index"; import "../metronic/core/index";
import "../metronic/app/layouts/base.js"; import "../metronic/app/layouts/base.js";
import $ from 'jquery';
window.$ = $;
let dataTable;

View File

@ -1,4 +1,6 @@
@php use Nwidart\Modules\Module; @endphp @php
use Nwidart\Modules\Module;
@endphp
<!doctype html> <!doctype html>
<html class="h-full" data-theme="true" data-theme-mode="light" lang="en"> <html class="h-full" data-theme="true" data-theme-mode="light" lang="en">
@ -8,7 +10,7 @@
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
@vite(Module::getAssets()) @vite('resources/css/app.scss')
</head> </head>
<body class="flex h-full metronic sidebar-fixed header-fixed bg-[#fefefe] dark:bg-coal-500"> <body class="flex h-full metronic sidebar-fixed header-fixed bg-[#fefefe] dark:bg-coal-500">
@ -26,7 +28,8 @@
themeMode = defaultThemeMode; themeMode = defaultThemeMode;
} }
if (themeMode === 'system') {ß if (themeMode === 'system') {
ß
themeMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; themeMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
} }
@ -36,6 +39,8 @@
<!--end::Theme mode setup on page load--> <!--end::Theme mode setup on page load-->
@yield('main') @yield('main')
@vite('resources/js/app.js')
@stack('scripts')
</body> </body>
</html> </html>

View File

@ -4,6 +4,7 @@ export default {
"./resources/**/*.blade.php", "./resources/**/*.blade.php",
"./resources/**/*.js", "./resources/**/*.js",
"./resources/**/*.vue", "./resources/**/*.vue",
"./modules/**/*.php",
], ],
safelist: [ safelist: [
'metronic', 'metronic',

View File

@ -1,18 +1,31 @@
import { defineConfig } from 'vite'; import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin'; import laravel from 'laravel-vite-plugin';
import collectModuleAssetsPaths from './vite-module-loader.js'; import collectModuleAssetsPaths from './vite-module-loader.js';
import inject from "@rollup/plugin-inject";
const paths = [ const allPaths = [
'resources/css/app.scss', 'resources/css/app.scss',
'resources/js/app.js', 'resources/js/app.js',
]; ];
const allPaths = await collectModuleAssetsPaths(paths, 'Modules');
export default defineConfig({ export default defineConfig({
build: {
sourcemap: true,
rollupOptions: {
output: {
chunkFileNames: 'js/[name].js',
entryFileNames: 'js/[name].js',
},
}
},
plugins: [ plugins: [
inject({ // => that should be first under plugins array
$: 'jquery',
jQuery: 'jquery',
}),
laravel({ laravel({
input: allPaths, input: allPaths,
refresh: true, refresh: true
}), }),
], ],
}); });