brian/laravel-stubs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Brian
2022-01-04 13:27:11 -07:00
parent 3764dad884
commit aed6ca46c2
63 changed files with 3780 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
src/resources/js/Layouts/AppLayout.vue Normal file
View File

@@ -0,0 +1,291 @@
<template>
<div>
<Head :title="title" />
<div class="absolute top-0 mt-4 z-50">
<success-notifications />
<error-notifications />
<generic-notifications />
</div>
<jet-banner />
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="grid-container w-4/5 mx-auto grid">
<div class="nav">
<div class="navh flex items-center justify-between lg:justify-center">
<Link :href="route('dashboard')" class="flex flex-row items-center justify-center">
<ApplicationMark class="block h-9 w-auto" />
<span class="ml-3 font-bold text-xl dark:text-white">{{ $page.props.app_name }}</span>
</Link>
<div class="flex items-center lg:hidden">
<button @click="showingNavigationDropdown = ! showingNavigationDropdown" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<nav class="navc">
<div class="hidden lg:flex lg:flex-col">
<SidenavLink :href="route('dashboard')" :active="route().current('dashboard')" :title="'Your Dashboard'">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
<span class="ml-2">Dashboard</span>
</SidenavLink>
</div>
<!-- Responsive Navigation Menu -->
<div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="lg:hidden">
<div class="pt-2 pb-3 flex flex-col space-y-1">
<Link :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</Link>
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200">
<div class="flex items-center px-4">
<div v-if="$page.props.jetstream.managesProfilePhotos" class="flex-shrink-0 mr-3" >
<img class="h-10 w-10 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name" />
</div>
<div>
<div class="font-medium text-base text-gray-800">{{ $page.props.user.name }}</div>
<div class="font-medium text-sm text-gray-500">{{ $page.props.user.email }}</div>
</div>
</div>
<div class="mt-3 flex flex-col space-y-1">
<ResponsiveNavLink :href="route('profile.show')" :active="route().current('profile.show')">
Profile
</ResponsiveNavLink>
<ResponsiveNavLink :href="route('api-tokens.index')" :active="route().current('api-tokens.index')" v-if="$page.props.jetstream.hasApiFeatures">
API Tokens
</ResponsiveNavLink>
<!-- Authentication -->
<form method="POST" @submit.prevent="logout">
<ResponsiveNavLink as="button">
Log Out
</ResponsiveNavLink>
</form>
<!-- Team Management -->
<template v-if="$page.props.jetstream.hasTeamFeatures">
<div class="border-t border-gray-200"></div>
<div class="block px-4 py-2 text-xs text-gray-400">
Manage Team
</div>
<!-- Team Settings -->
<ResponsiveNavLink :href="route('teams.show', $page.props.user.current_team)" :active="route().current('teams.show')">
Team Settings
</ResponsiveNavLink>
<ResponsiveNavLink :href="route('teams.create')" :active="route().current('teams.create')" v-if="$page.props.jetstream.canCreateTeams">
Create New Team
</ResponsiveNavLink>
<div class="border-t border-gray-200"></div>
<!-- Team Switcher -->
<div class="block px-4 py-2 text-xs text-gray-400">
Switch Teams
</div>
<template v-for="team in $page.props.user.all_teams" :key="team.id">
<form @submit.prevent="switchToTeam(team)">
<ResponsiveNavLink as="button">
<div class="flex items-center">
<svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<div>{{ team.name }}</div>
</div>
</ResponsiveNavLink>
</form>
</template>
</template>
</div>
</div>
</div>
</nav>
</div>
<div class="main">
<div class="mainh">
<div class="flex items-center">
<h2 class="font-semibold text-xl text-gray-800 dark:text-white leading-tight">
<slot name="header"></slot>
</h2>
</div>
<div class="flex flex-row items-center justify-end">
<!-- <ThemeSwitcher></ThemeSwitcher> -->
<div class="ml-3 relative">
<!-- Teams Dropdown -->
<jet-dropdown align="right" width="60" v-if="$page.props.jetstream.hasTeamFeatures">
<template #trigger>
<span class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
{{ $page.props.user.current_team.name }}
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>
</template>
<template #content>
<div class="w-60">
<!-- Team Management -->
<template v-if="$page.props.jetstream.hasTeamFeatures">
<div class="block px-4 py-2 text-xs text-gray-400">
Manage Team
</div>
<!-- Team Settings -->
<jet-dropdown-link :href="route('teams.show', $page.props.user.current_team)">
Team Settings
</jet-dropdown-link>
<jet-dropdown-link :href="route('teams.create')" v-if="$page.props.jetstream.canCreateTeams">
Create New Team
</jet-dropdown-link>
<div class="border-t border-gray-100"></div>
<!-- Team Switcher -->
<div class="block px-4 py-2 text-xs text-gray-400">
Switch Teams
</div>
<template v-for="team in $page.props.user.all_teams" :key="team.id">
<form @submit.prevent="switchToTeam(team)">
<jet-dropdown-link as="button">
<div class="flex items-center">
<svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<div>{{ team.name }}</div>
</div>
</jet-dropdown-link>
</form>
</template>
</template>
</div>
</template>
</jet-dropdown>
</div>
<!-- Settings Dropdown -->
<div class="ml-3 relative">
<jet-dropdown align="right" width="48">
<template #trigger>
<button v-if="$page.props.jetstream.managesProfilePhotos" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
<img class="h-8 w-8 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name" />
</button>
<span v-else class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition">
{{ $page.props.user.name }}
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>
</template>
<template #content>
<!-- Account Management -->
<div class="block px-4 py-2 text-xs text-gray-400">
Manage Account
</div>
<jet-dropdown-link :href="route('profile.show')">
Profile
</jet-dropdown-link>
<jet-dropdown-link :href="route('profile.billing.show')">
Billing
</jet-dropdown-link>
<jet-dropdown-link :href="route('api-tokens.index')" v-if="$page.props.jetstream.hasApiFeatures">
API Tokens
</jet-dropdown-link>
<div class="border-t border-gray-100"></div>
<!-- Authentication -->
<form @submit.prevent="logout">
<jet-dropdown-link as="button">
Log Out
</jet-dropdown-link>
</form>
</template>
</jet-dropdown>
</div>
</div>
</div>
<main class="mainc">
<slot></slot>
</main>
</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from "vue"
import { Head, Link } from "@inertiajs/inertia-vue3"
import SuccessNotifications from "@/Components/Notifications/SuccessNotifications.vue"
import ErrorNotifications from "@/Components/Notifications/ErrorNotifications.vue"
import GenericNotifications from "@/Components/Notifications/GenericNotifications.vue"
import ApplicationMark from "@/Jetstream/ApplicationMark.vue"
import ResponsiveNavLink from "@/Components/ResponsiveNavLink.vue"
import SidenavLink from "@/Components/SidenavLink.vue"
import JetBanner from "@/Jetstream/Banner.vue"
import JetDropdown from "@/Jetstream/Dropdown.vue"
import JetDropdownLink from "@/Jetstream/DropdownLink.vue"
export default defineComponent({
props: {
title: String,
},
components: {
Head,
Link,
SuccessNotifications,
ErrorNotifications,
GenericNotifications,
ApplicationMark,
ResponsiveNavLink,
SidenavLink,
JetBanner,
JetDropdown,
JetDropdownLink,
},
data() {
return {
showingNavigationDropdown: false,
}
},
methods: {
switchToTeam(team) {
this.$inertia.put(route("current-team.update"), {
"team_id": team.id
}, {
preserveState: false
})
},
logout() {
this.$inertia.post(route("logout"));
},
}
})
</script>