From 372e6ee8c43a6d8cc273b3890f62a16bb32637b2 Mon Sep 17 00:00:00 2001 From: philipp lang Date: Sat, 29 Apr 2023 23:15:07 +0200 Subject: [PATCH] Move menu to pinia store --- package-lock.json | 58 ++++++++++++++++++++++- package.json | 3 +- resources/js/app.js | 6 +++ resources/js/components/Page/Layout.vue | 36 ++++++++++++++ resources/js/layouts/AppLayout.vue | 63 +++---------------------- resources/js/stores/menuStore.js | 50 ++++++++++++++++++++ resources/js/views/dashboard/VIndex.vue | 12 +++-- 7 files changed, 165 insertions(+), 63 deletions(-) create mode 100644 resources/js/components/Page/Layout.vue create mode 100644 resources/js/stores/menuStore.js diff --git a/package-lock.json b/package-lock.json index 080c8093..309c7fbd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "@inertiajs/inertia-vue": "^0.8.0", "lodash": "^4.17.21", "merge": "^2.1.1", + "pinia": "^2.0.35", "portal-vue": "^2.1.7", "postcss-import": "^14.0.1", "svg-sprite": "^2.0.2", @@ -24,7 +25,7 @@ "laravel-mix": "^6.0.1", "postcss": "^8.4.6", "tailwindcss": "^3.2", - "vue": "^2.6", + "vue": "2.7", "vue-axios": "^3.5.2", "vue-loader": "^15.9.8", "vue-template-compiler": "^2.6.14" @@ -2601,6 +2602,11 @@ "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==", "dev": true }, + "node_modules/@vue/devtools-api": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz", + "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==" + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -7425,6 +7431,31 @@ "node": ">=0.10.0" } }, + "node_modules/pinia": { + "version": "2.0.35", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.35.tgz", + "integrity": "sha512-P1IKKQWhxGXiiZ3atOaNI75bYlFUbRxtJdhPLX059Z7+b9Z04rnTZdSY8Aph1LA+/4QEMAYHsTQ638Wfe+6K5g==", + "dependencies": { + "@vue/devtools-api": "^6.5.0", + "vue-demi": "*" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "@vue/composition-api": "^1.4.0", + "typescript": ">=4.4.4", + "vue": "^2.6.14 || ^3.2.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, "node_modules/pkg-dir": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", @@ -9783,6 +9814,31 @@ "vue": "^3.0.0 || ^2.0.0" } }, + "node_modules/vue-demi": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz", + "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/vue-eslint-parser": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", diff --git a/package.json b/package.json index 18c7532c..a2292f56 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "laravel-mix": "^6.0.1", "postcss": "^8.4.6", "tailwindcss": "^3.2", - "vue": "^2.6", + "vue": "2.7", "vue-axios": "^3.5.2", "vue-loader": "^15.9.8", "vue-template-compiler": "^2.6.14" @@ -29,6 +29,7 @@ "@inertiajs/inertia-vue": "^0.8.0", "lodash": "^4.17.21", "merge": "^2.1.1", + "pinia": "^2.0.35", "portal-vue": "^2.1.7", "postcss-import": "^14.0.1", "svg-sprite": "^2.0.2", diff --git a/resources/js/app.js b/resources/js/app.js index 90bedcd4..a30f9e6d 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -9,6 +9,7 @@ import VBool from './components/VBool.vue'; import Box from './components/Box.vue'; import Heading from './components/Heading.vue'; import IconButton from './components/Ui/IconButton.vue'; +import PageLayout from './components/Page/Layout.vue'; import AppLayout from './layouts/AppLayout.vue'; import VTooltip from 'v-tooltip'; import hasModule from './mixins/hasModule.js'; @@ -17,12 +18,14 @@ import PortalVue from 'portal-vue'; import axios from 'axios'; import VueAxios from 'vue-axios'; import Toasted from 'vue-toasted'; +import {createPinia, PiniaVuePlugin} from 'pinia'; Vue.use(plugin); Vue.use(PortalVue); Vue.use(VTooltip); Vue.use(Toasted); Vue.use(VueAxios, axios); +Vue.use(PiniaVuePlugin); Vue.component('f-text', () => import(/* webpackChunkName: "form" */ './components/FText')); Vue.component('f-switch', () => import(/* webpackChunkName: "form" */ './components/FSwitch')); Vue.component('f-select', () => import(/* webpackChunkName: "form" */ './components/FSelect')); @@ -34,9 +37,11 @@ Vue.component('v-label', VLabel); Vue.component('box', Box); Vue.component('heading', Heading); Vue.component('icon-button', IconButton); +Vue.component('page-layout', PageLayout); Vue.component('save-button', () => import(/* webpackChunkName: "form" */ './components/SaveButton')); const el = document.getElementById('app'); +const pinia = createPinia(); Vue.mixin(hasModule); Vue.mixin(hasFlash); @@ -45,6 +50,7 @@ Vue.component('ILink', ILink); Inertia.on('start', (event) => window.dispatchEvent(new Event('inertiaStart'))); new Vue({ + pinia, render: (h) => h(InertiaApp, { props: { diff --git a/resources/js/components/Page/Layout.vue b/resources/js/components/Page/Layout.vue new file mode 100644 index 00000000..1fdbb9a8 --- /dev/null +++ b/resources/js/components/Page/Layout.vue @@ -0,0 +1,36 @@ + + + diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue index cf8f2fbe..b4b80d55 100644 --- a/resources/js/layouts/AppLayout.vue +++ b/resources/js/layouts/AppLayout.vue @@ -6,8 +6,8 @@
@@ -21,44 +21,23 @@ Einstellungen Abmelden
- +
-
-
- - - - - - - - -
- - -
-
- -
- -
-
+ diff --git a/resources/js/stores/menuStore.js b/resources/js/stores/menuStore.js new file mode 100644 index 00000000..bd661bf3 --- /dev/null +++ b/resources/js/stores/menuStore.js @@ -0,0 +1,50 @@ +import {defineStore} from 'pinia'; + +export const menuStore = defineStore('menu', { + state: () => ({ + visible: false, + overflowVisible: false, + tooltipsVisible: false, + }), + getters: { + isShifted: (state) => state.visible || state.overflowVisible, + hideable: (state) => state.overflowVisible && !state.visible, + }, + actions: { + menuListener() { + var x = window.matchMedia('(min-width: 1024px)'); + + if (x.matches && !this.visible) { + this.visible = true; + this.overflowVisible = false; + return; + } + if (!x.matches && this.visible) { + this.visible = false; + this.overflowVisible = false; + return; + } + + this.tooltipsVisible = !window.matchMedia('(min-width: 1280px)').matches; + }, + startInertiaListener() { + var _self = this; + + window.addEventListener('resize', this.menuListener); + this.menuListener(); + + window.addEventListener('inertiaStart', () => { + if (!window.matchMedia('(min-width: 1024px)').matches) { + _self.visible = false; + _self.overflowVisible = false; + } + }); + }, + toggle() { + this.overflowVisible = !this.overflowVisible; + }, + hide() { + this.overflowVisible = false; + }, + }, +}); diff --git a/resources/js/views/dashboard/VIndex.vue b/resources/js/views/dashboard/VIndex.vue index 99ff55df..e70a61fb 100644 --- a/resources/js/views/dashboard/VIndex.vue +++ b/resources/js/views/dashboard/VIndex.vue @@ -1,9 +1,11 @@