Upgrade to Vue 3 & use correct Inertia createApp
This commit is contained in:
Ralph J. Smit
@@ -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
68
resources/js/app.js
vendored
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -83,7 +83,7 @@ export default {
|
||||
mounted() {
|
||||
document.addEventListener('keydown', this.handleKeydown);
|
||||
|
||||
window.eventBus.$on('openSearch', () => {
|
||||
window.eventBus.on('openSearch', () => {
|
||||
this.openSearch();
|
||||
});
|
||||
},
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user