Fix svg sprite

.drone.yml

@@ -24,7 +24,7 @@ steps:
     - name: node
       image: node:17.9.0-slim
       commands:
-          - npm ci && npm run prod && npm run img && rm -R node_modules
+          - npm ci && npm run img && npm run prod && rm -R node_modules
 
     - name: phpunit_tests
       image: php:8.1.6

.gitignore

@@ -1,11 +1,7 @@
 /node_modules
+/public/build
+/public/sprite.svg
 /public/hot
-/public/storage
-/public/js
-/public/css
-/public/fonts
-/public/img
-/public/images
 /storage/*.key
 /vendor
 .env
@@ -17,14 +13,12 @@ Homestead.yaml
 npm-debug.log
 yarn-error.log
 tags
-/public/vendor
 /storage/temp
 
 # Temporary files
 *.swp
 *.swo
 *.swm
-/public/mix-manifest.json
 resources/img/sprite.svg
 /.php-cs-fixer.cache
 /data

package.json

@@ -2,12 +2,12 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "npx mix build",
+        "development": "npx vite",
-        "watch": "npx mix watch",
+        "watch": "npx vite",
-        "hot": "npx mix watch --hot",
+        "hot": "npx vite",
-        "prod": "npx mix build --production",
+        "prod": "npx vite build",
         "production": "npm run prod",
-        "img": "rm -R public/img && cd resources/img/svg && npx svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.css.svg ../sprite.svg && rm -R sprite && cd ../../../ && cp -R resources/img public/img",
+        "img": "cd resources/img/svg && npx svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.css.svg ../../../public/sprite.svg && rm -R sprite",
         "lint": "eslint \"resources/js/**/*.{js,vue}\"",
         "fix": "eslint \"resources/js/**/*.{js,vue}\" --fix"
     },
@@ -16,7 +16,6 @@
         "axios": "^1.3.4",
         "eslint": "^8.9.0",
         "eslint-plugin-vue": "^8.4.1",
-        "laravel-mix": "^6.0.1",
         "postcss": "^8.4.6",
         "tailwindcss": "^3.3",
         "vue": "2.7",
@@ -28,7 +27,9 @@
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue": "^0.8.0",
         "@tailwindcss/typography": "^0.5.9",
+        "@vitejs/plugin-vue2": "^2.2.0",
         "change-case": "^4.1.2",
+        "laravel-vite-plugin": "^0.7.7",
         "leaflet": "^1.9.3",
         "lodash": "^4.17.21",
         "merge": "^2.1.1",
@@ -37,6 +38,7 @@
         "postcss-import": "^14.0.1",
         "svg-sprite": "^2.0.2",
         "v-tooltip": "^2.1.3",
+        "vite": "^4.3.8",
         "vue-toasted": "^1.1.28",
         "vue2-leaflet": "^2.7.1",
         "wnumb": "^1.2.0"

postcss.config.js

@@ -0,0 +1,10 @@
+const tailwindcss = require('tailwindcss');
+
+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': {},
+        'tailwindcss': {},
+        'autoprefixer': {},
+    },
+};

resources/css/app.css

@@ -2,15 +2,13 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-@layer components {
+@import 'base.css';
-    @import 'base';
+@import 'switch';
-    @import 'switch';
+@import 'layout';
-    @import 'layout';
+@import 'buttons';
-    @import 'buttons';
+@import 'table';
-    @import 'table';
+@import 'sidebar';
-    @import 'sidebar';
+@import 'bool';
-    @import 'bool';
+@import 'form';
-    @import 'form';
+@import 'tooltip';
-    @import 'tooltip';
+@import 'leaflet';
-    @import 'leaflet';
-}

resources/css/base.css

@@ -7,7 +7,6 @@
     @apply mb-4;
 }
 
-
 .form-control-font {
     @apply leading-tight text-gray-600 text-sm;
 }
@@ -18,7 +17,8 @@
     top: 34px;
     transition: color 02s, padding-bottom 02s, font-size 02s, top 02s;
 }
-.field-wrapperfocused label-placeholder, label-placeholder-focused {
+.field-wrapperfocused label-placeholder,
+label-placeholder-focused {
     top: 0;
     @apply text-sm text-gray-600;
     padding-bottom: 10px;
@@ -42,24 +42,25 @@
     @apply py-2;
 }
 
-input, select {
+input,
+select {
     outline: none;
 }
 
-input[type="date"],
+input[type='date'],
-input[type="datetime-local"],
+input[type='datetime-local'],
-input[type="time"],
+input[type='time'],
-input[type="month"],
+input[type='month'],
 select,
-input[type="week"] {
+input[type='week'] {
     height: 37px;
     &::-webkit-inner-spin-button {
         display: none;
     }
 }
 
-input[type="date"]::-webkit-inner-spin-button,
+input[type='date']::-webkit-inner-spin-button,
-input[type="date"]::-webkit-calendar-picker-indicator {
+input[type='date']::-webkit-calendar-picker-indicator {
     display: none;
     -webkit-appearance: none;
 }

resources/css/tooltip.css

@@ -82,10 +82,8 @@
     }
 
     &.popover {
-        $color: #f9f9f9;
-
         .popover-inner {
-            background: $color;
+            background: #f9f9f9;
             color: black;
             padding: 24px;
             border-radius: 5px;
@@ -93,7 +91,7 @@
         }
 
         .popover-arrow {
-            border-color: $color;
+            border-color: #f9f9f9;
         }
     }
 

resources/js/app.js

@@ -13,6 +13,11 @@ import AppLayout from './layouts/AppLayout.vue';
 import hasModule from './mixins/hasModule.js';
 import hasFlash from './mixins/hasFlash.js';
 
+import '../css/app.css';
+
+// ---------------------------------- Assets -----------------------------------
+import.meta.glob(['../img/**']);
+
 // ---------------------------------- Plugins ----------------------------------
 Vue.use(plugin);
 Vue.use(PortalVue);
@@ -25,9 +30,9 @@ Vue.component('SvgSprite', () => import('./components/SvgSprite.js'));
 Vue.component('ILink', ILink);
 
 // -------------------------------- Components ---------------------------------
-requireModules(require.context('./components/form', false, /\.vue$/, 'lazy'), Vue, 'f');
+requireModules(import.meta.glob('./components/form/*.vue'), Vue, 'f');
-requireModules(require.context('./components/ui', false, /\.vue$/, 'lazy'), Vue, 'ui');
+requireModules(import.meta.glob('./components/ui/*.vue'), Vue, 'ui');
-requireModules(require.context('./components/page', false, /\.vue$/), Vue, 'page');
+requireModules(import.meta.glob('./components/page/*.vue', {eager: true}), Vue, 'page');
 
 // ---------------------------------- mixins -----------------------------------
 Vue.mixin(hasModule);
@@ -39,6 +44,7 @@ const pinia = createPinia();
 
 Inertia.on('start', (event) => window.dispatchEvent(new Event('inertiaStart')));
 
+let views = import.meta.glob('./views/**/*.vue');
 new Vue({
     pinia,
     render: (h) =>
@@ -46,7 +52,7 @@ new Vue({
             props: {
                 initialPage: JSON.parse(el.dataset.page),
                 resolveComponent: async (name) => {
-                    var page = (await import(`./views/${name}`)).default;
+                    var page = (await views[`./views/${name}.vue`]()).default;
 
                     if (page.layout === undefined) {
                         page.layout = AppLayout;

resources/js/components/SvgSprite.js

@@ -1,17 +1,25 @@
 export default {
     props: {
-        src: { required: true, type: String }
+        src: {required: true, type: String},
     },
-    render: function(createElement) {
+    render: function (createElement) {
         var attr = this.$attrs.class ? this.$attrs.class : '';
-        return createElement('svg', {
+        return createElement(
-            class: attr + ' fill-current'
+            'svg',
-        }, [
+            {
-            createElement('use', {
+                class: attr + ' fill-current',
-                'attrs': {
+            },
-                    'xlink:href': `/img/sprite.svg#${this.$props.src}`
+            [
-                }
+                createElement(
-            }, '')
+                    'use',
-        ] );
+                    {
-    }
+                        attrs: {
+                            'xlink:href': `/sprite.svg#${this.$props.src}`,
+                        },
+                    },
+                    ''
+                ),
+            ]
+        );
+    },
 };

resources/js/lib/requireModules.js

@@ -1,11 +1,9 @@
 import {paramCase} from 'change-case';
 
 export default function (context, Vue, prefix) {
-    var isAsync = context.name === 'webpackAsyncContext';
+    for (const file in context) {
+        let componentName = paramCase(`${prefix}${file.replace(/^.*\/(.*?)\.vue$/g, '$1')}`);
 
-    context.keys().forEach((file) => {
+        Vue.component(componentName, typeof context[file] === 'function' ? context[file] : context[file].default);
-        let componentName = paramCase(`${prefix}${file.replace(/^\.\/(.*?)\.vue$/g, '$1')}`);
+    }
-
-        Vue.component(componentName, isAsync ? () => context(file) : context(file).default);
-    });
 }

resources/js/views/VLogin.vue

@@ -2,7 +2,7 @@
     <form @submit.prevent="submit">
         <div class="h-24 p-6 md:px-10 bg-primary-800 flex justify-between items-center w-full">
             <span class="text-primary-500 text-xl">Login</span>
-            <img src="/img/dpsg.gif" class="w-24" />
+            <img src="../../img/dpsg.gif" class="w-24" />
         </div>
         <div class="p-6 md:p-10 grid gap-5">
             <f-text id="email" label="E-Mail-Adresse" v-model="values.email"></f-text>
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import FullLayout from '../layouts/FullLayout';
+import FullLayout from '../layouts/FullLayout.vue';
 
 export default {
     layout: FullLayout,

resources/js/views/dashboard/VIndex.vue

@@ -16,7 +16,7 @@ export default {
     },
 
     components: {
-        'VBlock': () => import('./VBlock'),
+        'VBlock': () => import('./VBlock.vue'),
         'age-group-count': () => import('./AgeGroupCount.vue'),
         'efz-pending': () => import('./EfzPending.vue'),
         'ps-pending': () => import('./PsPending.vue'),

resources/js/views/member/ShowView.vue

@@ -95,15 +95,15 @@ export default {
     },
 
     components: {
-        stamm: () => import(/* webpackChunkName: "member" */ './boxes/Stamm'),
+        stamm: () => import(/* webpackChunkName: "member" */ './boxes/Stamm.vue'),
-        kontakt: () => import(/* webpackChunkName: "member" */ './boxes/Kontakt'),
+        kontakt: () => import(/* webpackChunkName: "member" */ './boxes/Kontakt.vue'),
-        prae: () => import(/* webpackChunkName: "member" */ './boxes/Prae'),
+        prae: () => import(/* webpackChunkName: "member" */ './boxes/Prae.vue'),
-        courses: () => import(/* webpackChunkName: "member" */ './boxes/Courses'),
+        courses: () => import(/* webpackChunkName: "member" */ './boxes/Courses.vue'),
-        system: () => import(/* webpackChunkName: "member" */ './boxes/System'),
+        system: () => import(/* webpackChunkName: "member" */ './boxes/System.vue'),
-        payments: () => import(/* webpackChunkName: "member" */ './boxes/Payments'),
+        payments: () => import(/* webpackChunkName: "member" */ './boxes/Payments.vue'),
-        memberships: () => import(/* webpackChunkName: "member" */ './boxes/Memberships'),
+        memberships: () => import(/* webpackChunkName: "member" */ './boxes/Memberships.vue'),
-        vmap: () => import(/* webpackChunkName: "member" */ './boxes/Vmap'),
+        vmap: () => import(/* webpackChunkName: "member" */ './boxes/Vmap.vue'),
-        tabs: () => import(/* webpackChunkName: "member" */ './Tabs'),
+        tabs: () => import(/* webpackChunkName: "member" */ './Tabs.vue'),
     },
 
     created() {

resources/js/views/member/VIndex.vue

@@ -153,9 +153,9 @@ export default {
         MemberMemberships,
         MemberPayments,
         MemberCourses,
-        'age-groups': () => import(/* webpackChunkName: "member" */ './AgeGroups'),
+        'age-groups': () => import('./AgeGroups.vue'),
-        'tags': () => import(/* webpackChunkName: "member" */ './Tags'),
+        'tags': () => import('./Tags.vue'),
-        'actions': () => import(/* webpackChunkName: "member" */ './index/Actions'),
+        'actions': () => import('./index/Actions.vue'),
     },
 
     methods: {

resources/views/app.blade.php

@@ -4,8 +4,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
         <meta name="socketport" content="{{env('SOCKET_PORT')}}" />
-        <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
+        @vite('resources/js/app.js')
-        <script src="{{ mix('/js/app.js') }}" defer></script>
     </head>
     <body class="min-h-full flex flex-col">
         @inertia

vite.config.js

@@ -0,0 +1,27 @@
+import {defineConfig} from 'vite';
+import laravel from 'laravel-vite-plugin';
+import vue from '@vitejs/plugin-vue2';
+
+export default defineConfig({
+    plugins: [
+        laravel(['resources/js/app.js']),
+        vue({
+            template: {
+                transformAssetUrls: {
+                    // The Vue plugin will re-write asset URLs, when referenced
+                    // in Single File Components, to point to the Laravel web
+                    // server. Setting this to `null` allows the Laravel plugin
+                    // to instead re-write asset URLs to point to the Vite
+                    // server instead.
+                    base: null,
+
+                    // The Vue plugin will parse absolute URLs and treat them
+                    // as absolute paths to files on disk. Setting this to
+                    // `false` will leave absolute URLs un-touched so they can
+                    // reference assets in the public directory as expected.
+                    includeAbsolute: false,
+                },
+            },
+        }),
+    ],
+});