davidl/ploi-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade to Vue 3 & use correct Inertia createApp

Browse Source
This commit is contained in:
Ralph J. Smit
2022-08-06 17:11:57 +02:00
parent 09dd3db506
commit de9834d6a7
8 changed files with 883 additions and 976 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1696
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
package.json
View File

@@ -13,14 +13,16 @@
},
"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@inertiajs/inertia": "^0.10.0",
"@inertiajs/inertia-vue": "^0.7.1",
"@inertiajs/inertia": "^0.11.0",
"@inertiajs/inertia-vue3": "^0.6.0",
"@inertiajs/progress": "^0.2.6",
"@rollup/plugin-commonjs": "^21.0",
"@tailwindcss/forms": "^0.4.1",
"@tailwindcss/typography": "^0.5.4",
"@types/node": "^18.0.6",
"@vitejs/plugin-vue2": "^1.1.2",
"@vitejs/plugin-vue": "^3.0",
"@vue/compat": "^3.1.0",
"@vue/compiler-sfc": "^3.1.0",
"autoprefixer": "^10.4.8",
"axios": "^0.21.1",
"balloon-css": "^1.2.0",
@@ -28,7 +30,7 @@
"esbuild-darwin-arm64": "^0.14.49",
"laravel-vite-plugin": "^0.5.0",
"lodash": "^4.17.15",
"portal-vue": "^2.1.7",
"mitt": "^3.0.0",
"postcss": "^8.4.5",
"resolve-url-loader": "^3.1.0",
"sass": "^1.53.0",
@@ -37,11 +39,10 @@
"tippy.js": "^6.3.7",
"v-click-outside": "^3.1.2",
"vite": "^3.0.2",
"vue": "^2.7",
"vue": "^3.1.0",
"vue-clipboard2": "^0.3.1",
"vue-loader": "^15.9.8",
"vue-loader": "^16.0.0",
"vue-meta": "^2.4.0",
"vue-template-compiler": "^2.6.11",
"vuex": "^3.6.2"
"vuex": "^4.0.2"
}
}

27
resources/js/Pages/Sites/Show.vue
View File

@@ -8,7 +8,7 @@
<template #form>
<FormInput type="password" :label="__('Enter your account password to reveal FTP password')"
v-model="form.password"
:errors="$page.props.errors.password"/>
:errors="$page.props.errors.password" />
</template>
<template #form-actions>
@@ -18,7 +18,7 @@
</ModalContainer>
</Portal>
<TopBar :breadcrumbs="breadcrumbs"/>
<TopBar :breadcrumbs="breadcrumbs" />
<Content>
<Container>
@@ -38,7 +38,7 @@
<PageBody>
<SettingsLayout>
<template #nav>
<Tabs :site="site"/>
<Tabs :site="site" />
</template>
<template #segments>
<SettingsSegment>
@@ -57,21 +57,22 @@
<TableRow>
<TableHeader>{{ __('FTP host') }}</TableHeader>
<TableData :border="false">
<copy :label="`${ip_address}`" :value="ip_address"/>
<copy :label="`${ip_address}`" :value="ip_address" />
</TableData>
</TableRow>
<TableRow>
<TableHeader>{{ __('FTP user') }}</TableHeader>
<TableData :border="false">
<copy :label="`${system_user.user_name}`"
:value="system_user.user_name"/>
:value="system_user.user_name" />
</TableData>
</TableRow>
<TableRow>
<TableHeader>{{ __('FTP password') }}</TableHeader>
<TableData :border="false">
<div v-if="ftp_password" v-text="ftp_password">
<copy :label="`${ftp_password}`" :value="ftp_password"/>
<div v-if="ftp_password">
<span v-text="ftp_password"></span>
<copy :label="`${ftp_password}`" :value="ftp_password" />
</div>
<Button variant="secondary" @click="confirmRequestFtpPassword"
@@ -100,21 +101,21 @@
<div class="grid grid-cols-2 gap-4">
<div class="col-span-2 md:col-span-1">
<FormInput label="A" :errors="$page.props.errors.domain"
:value="mainDnsRecord"/>
:value="mainDnsRecord" />
</div>
<div class="col-span-2 md:col-span-1">
<FormInput label="IP" allow-copy :errors="$page.props.errors.domain"
:value="ip_address"/>
:value="ip_address" />
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="col-span-2 md:col-span-1">
<FormInput label="A" :errors="$page.props.errors.domain"
:value="`www`"/>
:value="`www`" />
</div>
<div class="col-span-2 md:col-span-1">
<FormInput label="IP" allow-copy :errors="$page.props.errors.domain"
:value="ip_address"/>
:value="ip_address" />
</div>
</div>
</form>
@@ -131,11 +132,11 @@
<div class="grid grid-cols-2 gap-4" v-for="alias in site.aliases">
<div class="col-span-2 md:col-span-1">
<FormInput label="A" :errors="$page.props.errors.domain"
:value="alias"/>
:value="alias" />
</div>
<div class="col-span-2 md:col-span-1">
<FormInput label="IP" allow-copy :errors="$page.props.errors.domain"
:value="ip_address"/>
:value="ip_address" />
</div>
</div>
</form>

68
resources/js/app.js vendored
View File

@@ -1,27 +1,35 @@
import {InertiaApp, InertiaLink, plugin} from '@inertiajs/inertia-vue'
import Vue from 'vue';
import {createInertiaApp, InertiaLink} from '@inertiajs/inertia-vue3'
import {resolvePageComponent} from "laravel-vite-plugin/inertia-helpers";
import {createApp, h} from 'vue';
import {InertiaProgress} from '@inertiajs/progress'
import VueMeta from 'vue-meta'
import store from '@/store'
import PortalVue from 'portal-vue'
import Store from '@/store';
import vClickOutside from 'v-click-outside'
import VueClipboard from 'vue-clipboard2'
import forEach from 'lodash/forEach';
import mixins from '@/mixins';
import {InertiaProgress} from '@inertiajs/progress'
import axios from 'axios';
import {resolvePageComponent} from "laravel-vite-plugin/inertia-helpers";
import forEach from 'lodash/forEach';
import mitt from 'mitt';
import '../sass/app.scss';
window._forEach = forEach;
Vue.use(vClickOutside)
Vue.use(PortalVue)
Vue.use(plugin)
Vue.use(VueMeta)
Vue.use(VueClipboard)
Vue.mixin({methods: {route: window.route}})
Vue.mixin(mixins);
Vue.component('InertiaLink', InertiaLink)
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({el, app, props, plugin}) {
return createApp({render: () => h(app, props)})
.use(plugin)
.mixin({methods: {route}})
.use(vClickOutside)
.use(VueMeta)
.use(VueClipboard)
.use(Store)
.mixin({methods: {route: window.route}})
.mixin(mixins)
.component('InertiaLink', InertiaLink)
.mount(el);
},
});
InertiaProgress.init({
delay: 250,
@@ -30,29 +38,11 @@ InertiaProgress.init({
showSpinner: false,
})
window.eventBus = new Vue();
window.axios = axios;
window._forEach = forEach;
const emitter = mitt();
window.eventBus = emitter;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
const app = document.getElementById('app')
let pageData = JSON.parse(app.dataset.page)
new Vue({
store,
metaInfo: {
titleTemplate: (title) => title ? `${title} - ${pageData.props.settings.name}` : pageData.props.settings.name
},
render: h => h(InertiaApp, {
props: {
initialPage: pageData,
resolveComponent: async(name) => {
const pages = import.meta.glob('./**/*.vue');
return (await resolvePageComponent(`./Pages/${name}.vue`, pages)).default;
}
},
}),
}).$mount(app)

30
resources/js/components/Pagination.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="mt-6 -mb-1 flex flex-wrap" v-if="determineLinks.per_page < determineLinks.total">
<template v-for="(link, key) in determineLinks.links">
<div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-3 py-1 text-sm rounded text-grey bg-white dark:bg-gray-700 dark:text-gray-300 opacity-50 cursor-not-allowed dark:border-gray-700" :class="{ 'ml-auto': link.label === 'Next' }" v-html="link.label"></div>
<inertia-link v-else :key="key" class="mr-1 mb-1 px-2 py-1 text-sm rounded"
<div v-if="link.url === null" :key="`label-key`" class="mr-1 mb-1 px-3 py-1 text-sm rounded text-grey bg-white dark:bg-gray-700 dark:text-gray-300 opacity-50 cursor-not-allowed dark:border-gray-700" :class="{ 'ml-auto': link.label === 'Next' }" v-html="link.label"></div>
<inertia-link v-else :key="`link-key`" class="mr-1 mb-1 px-2 py-1 text-sm rounded"
:preserve-scroll="preserveScroll"
:class="{ 'shadow text-high-emphasis bg-surface-1': link.active, 'ml-auto': link.label === 'Next' }" :href="link.url" v-html="link.label"></inertia-link>
</template>
@@ -10,22 +10,22 @@
</template>
<script>
export default {
props: {
links: Object,
preserveScroll: {
default: true,
},
export default {
props: {
links: Object,
preserveScroll: {
default: true,
},
},
computed: {
determineLinks() {
if(this.links.meta){
return this.links.meta;
}
return this.links;
computed: {
determineLinks() {
if (this.links.meta) {
return this.links.meta;
}
return this.links;
}
}
}
</script>

2
resources/js/components/SearchPalette.vue
View File

@@ -83,7 +83,7 @@ export default {
mounted() {
document.addEventListener('keydown', this.handleKeydown);
window.eventBus.$on('openSearch', () => {
window.eventBus.on('openSearch', () => {
this.openSearch();
});
},

8
resources/js/components/TopBar.vue
View File

@@ -13,13 +13,13 @@
<ul class="flex items-center space-x-4">
<li :aria-label="__('Search')" data-balloon-blunt data-balloon-pos="down">
<IconButton @click="triggerSearch">
<IconSearch class="text-top-bar"/>
<IconSearch class="text-top-bar" />
</IconButton>
</li>
<li :aria-label="themeMode === 'light' ? __('Enable dark mode') : __('Enable light mode')" data-balloon-blunt data-balloon-pos="down">
<IconButton @click="toggleTheme">
<IconMoon class="text-top-bar" v-if="themeMode === 'light'"/>
<IconSun class="text-top-bar" v-if="themeMode === 'dark'"/>
<IconMoon class="text-top-bar" v-if="themeMode === 'light'" />
<IconSun class="text-top-bar" v-if="themeMode === 'dark'" />
</IconButton>
</li>
<li>
@@ -118,7 +118,7 @@ export default {
},
triggerSearch() {
window.eventBus.$emit('openSearch');
window.eventBus.emit('openSearch');
}
}
}

11
vite.config.js vendored
View File

@@ -1,6 +1,6 @@
import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue2';
import vue from '@vitejs/plugin-vue';
let inputs = [];
@@ -21,6 +21,11 @@ export default defineConfig({
}),
vue({
template: {
compilerOptions: {
compatConfig: {
MODE: 2,
}
},
transformAssetUrls: {
video: [],
source: [],
@@ -47,10 +52,12 @@ export default defineConfig({
outDir: process.env?.TAILWIND_CONFIG
? `./public/build/${process.env.TAILWIND_CONFIG}`
: "./public/build",
minify: false,
},
resolve: {
alias: {
"@": '/resources/js'
"@": '/resources/js',
"vue": "@vue/compat"
}
}
});