TheMaddax
80657cc209
- Replaced Next.js + Express + React stack with Laravel + Inertia + Vue - Created database migrations for docket_entries, documents, subscriptions, admin_users - Built Eloquent models with relationships (DocketEntry, Document, Subscription, AdminUser) - Implemented HomeController with Inertia.js integration - Created Vue home page component matching v1.0 design exactly - Installed Laravel Breeze for authentication scaffolding - Configured Vite 7 for Vue 3 + TypeScript compilation - Updated .gitignore for Laravel project structure - Tested locally - website rendering correctly with empty database - All v1.0 Next.js/Express files removed, replaced with Laravel structure Technology Stack: - Backend: Laravel 12.43.1, PHP 8.3.28, Eloquent ORM - Frontend: Vue 3, TypeScript, Inertia.js, Tailwind CSS 3.x - Build: Vite 7.x, Composer 2.9.2 - Database: SQLite (dev), PostgreSQL (production) Next steps: Email subscription API, document downloads, admin dashboard
82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
align?: 'left' | 'right';
|
|
width?: '48';
|
|
contentClasses?: string;
|
|
}>(),
|
|
{
|
|
align: 'right',
|
|
width: '48',
|
|
contentClasses: 'py-1 bg-white',
|
|
},
|
|
);
|
|
|
|
const closeOnEscape = (e: KeyboardEvent) => {
|
|
if (open.value && e.key === 'Escape') {
|
|
open.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(() => document.addEventListener('keydown', closeOnEscape));
|
|
onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
|
|
|
|
const widthClass = computed(() => {
|
|
return {
|
|
48: 'w-48',
|
|
}[props.width.toString()];
|
|
});
|
|
|
|
const alignmentClasses = computed(() => {
|
|
if (props.align === 'left') {
|
|
return 'ltr:origin-top-left rtl:origin-top-right start-0';
|
|
} else if (props.align === 'right') {
|
|
return 'ltr:origin-top-right rtl:origin-top-left end-0';
|
|
} else {
|
|
return 'origin-top';
|
|
}
|
|
});
|
|
|
|
const open = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative">
|
|
<div @click="open = !open">
|
|
<slot name="trigger" />
|
|
</div>
|
|
|
|
<!-- Full Screen Dropdown Overlay -->
|
|
<div
|
|
v-show="open"
|
|
class="fixed inset-0 z-40"
|
|
@click="open = false"
|
|
></div>
|
|
|
|
<Transition
|
|
enter-active-class="transition ease-out duration-200"
|
|
enter-from-class="opacity-0 scale-95"
|
|
enter-to-class="opacity-100 scale-100"
|
|
leave-active-class="transition ease-in duration-75"
|
|
leave-from-class="opacity-100 scale-100"
|
|
leave-to-class="opacity-0 scale-95"
|
|
>
|
|
<div
|
|
v-show="open"
|
|
class="absolute z-50 mt-2 rounded-md shadow-lg"
|
|
:class="[widthClass, alignmentClasses]"
|
|
style="display: none"
|
|
@click="open = false"
|
|
>
|
|
<div
|
|
class="rounded-md ring-1 ring-black ring-opacity-5"
|
|
:class="contentClasses"
|
|
>
|
|
<slot name="content" />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|