Sprint 2: Live data, CRUD modals, commitments, document upload
Frontend: - Connect MetroMap to live Inertia props (replace hardcoded demo data) - Drill-down navigation via router.visit for project-level maps - Reactive breadcrumb based on map level - Empty state when no projects exist - Reusable Modal component with retro styling - ProjectForm and CommitmentForm with Inertia useForm - FormInput reusable component (text, date, textarea, select) - FloatingActions FAB button for creating projects/themes Backend: - CommitmentService + CommitmentController (CRUD, mark complete, overdue) - DocumentService + DocumentController (upload, download, delete) - MapController now passes users and speerpunten to frontend - 7 new routes (4 commitment, 3 document) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
znetsixe
186
resources/js/Components/Forms/CommitmentForm.vue
Normal file
186
resources/js/Components/Forms/CommitmentForm.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<script setup>
|
||||
import { watch } from 'vue'
|
||||
import { useForm } from '@inertiajs/vue3'
|
||||
import Modal from '../Modal.vue'
|
||||
import FormInput from './FormInput.vue'
|
||||
|
||||
const props = defineProps({
|
||||
commitment: { type: Object, default: null },
|
||||
projectId: { type: [Number, String], required: true },
|
||||
users: { type: Array, default: () => [] },
|
||||
show: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const isEditing = !!props.commitment
|
||||
|
||||
const form = useForm({
|
||||
beschrijving: props.commitment?.beschrijving ?? '',
|
||||
eigenaar_id: props.commitment?.eigenaar_id ?? '',
|
||||
deadline: props.commitment?.deadline ?? '',
|
||||
prioriteit: props.commitment?.prioriteit ?? '',
|
||||
project_id: props.projectId,
|
||||
})
|
||||
|
||||
watch(() => props.show, (val) => {
|
||||
if (val) {
|
||||
form.beschrijving = props.commitment?.beschrijving ?? ''
|
||||
form.eigenaar_id = props.commitment?.eigenaar_id ?? ''
|
||||
form.deadline = props.commitment?.deadline ?? ''
|
||||
form.prioriteit = props.commitment?.prioriteit ?? ''
|
||||
form.project_id = props.projectId
|
||||
form.clearErrors()
|
||||
}
|
||||
})
|
||||
|
||||
const userOptions = props.users.map(u => ({
|
||||
value: u.id,
|
||||
label: u.name ?? u.naam ?? String(u.id),
|
||||
}))
|
||||
|
||||
const prioriteitOptions = [
|
||||
{ value: 'laag', label: 'Laag' },
|
||||
{ value: 'midden', label: 'Midden' },
|
||||
{ value: 'hoog', label: 'Hoog' },
|
||||
]
|
||||
|
||||
const handleSubmit = () => {
|
||||
form.post('/commitments', {
|
||||
onSuccess: () => emit('close'),
|
||||
})
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
form.reset()
|
||||
form.clearErrors()
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:show="show"
|
||||
:title="isEditing ? 'COMMITMENT BEWERKEN' : 'NIEUW COMMITMENT'"
|
||||
max-width="480px"
|
||||
@close="handleClose"
|
||||
>
|
||||
<form class="commitment-form" @submit.prevent="handleSubmit">
|
||||
<div class="form-grid">
|
||||
<FormInput
|
||||
label="Beschrijving"
|
||||
type="textarea"
|
||||
:model-value="form.beschrijving"
|
||||
:error="form.errors.beschrijving"
|
||||
:required="true"
|
||||
placeholder="Omschrijf het commitment..."
|
||||
@update:model-value="form.beschrijving = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Eigenaar"
|
||||
type="select"
|
||||
:model-value="form.eigenaar_id"
|
||||
:options="userOptions"
|
||||
:error="form.errors.eigenaar_id"
|
||||
@update:model-value="form.eigenaar_id = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Deadline"
|
||||
type="date"
|
||||
:model-value="form.deadline"
|
||||
:error="form.errors.deadline"
|
||||
:required="true"
|
||||
@update:model-value="form.deadline = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Prioriteit"
|
||||
type="select"
|
||||
:model-value="form.prioriteit"
|
||||
:options="prioriteitOptions"
|
||||
:error="form.errors.prioriteit"
|
||||
@update:model-value="form.prioriteit = $event"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn-cancel" @click="handleClose">
|
||||
[ANNULEER]
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-submit"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
<span v-if="form.processing">VERWERKEN...</span>
|
||||
<span v-else>{{ isEditing ? '[OPSLAAN]' : '[AANMAKEN]' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.commitment-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(0, 210, 255, 0.12);
|
||||
}
|
||||
|
||||
.btn-cancel,
|
||||
.btn-submit {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(136, 146, 176, 0.4);
|
||||
color: #8892b0;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
border-color: #e94560;
|
||||
color: #e94560;
|
||||
text-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: rgba(0, 210, 255, 0.1);
|
||||
border: 1px solid #00d2ff;
|
||||
color: #00d2ff;
|
||||
}
|
||||
|
||||
.btn-submit:hover:not(:disabled) {
|
||||
background: rgba(0, 210, 255, 0.2);
|
||||
box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
|
||||
text-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
160
resources/js/Components/Forms/FormInput.vue
Normal file
160
resources/js/Components/Forms/FormInput.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
label: { type: String, default: '' },
|
||||
modelValue: { type: [String, Number], default: '' },
|
||||
type: { type: String, default: 'text' },
|
||||
error: { type: String, default: '' },
|
||||
options: { type: Array, default: () => [] },
|
||||
required: { type: Boolean, default: false },
|
||||
placeholder: { type: String, default: '' },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const textareaRef = ref(null)
|
||||
|
||||
const autoResize = () => {
|
||||
if (!textareaRef.value) return
|
||||
textareaRef.value.style.height = 'auto'
|
||||
textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, () => {
|
||||
if (props.type === 'textarea') {
|
||||
autoResize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="form-field">
|
||||
<label v-if="label" class="field-label">
|
||||
{{ label }}<span v-if="required" class="required-star"> *</span>
|
||||
</label>
|
||||
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
ref="textareaRef"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
class="field-input field-textarea"
|
||||
:class="{ 'field-error': error }"
|
||||
rows="3"
|
||||
@input="emit('update:modelValue', $event.target.value); autoResize()"
|
||||
/>
|
||||
|
||||
<select
|
||||
v-else-if="type === 'select'"
|
||||
:value="modelValue"
|
||||
:required="required"
|
||||
class="field-input field-select"
|
||||
:class="{ 'field-error': error }"
|
||||
@change="emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
<option value="">-- selecteer --</option>
|
||||
<option
|
||||
v-for="opt in options"
|
||||
:key="opt.value ?? opt"
|
||||
:value="opt.value ?? opt"
|
||||
>
|
||||
{{ opt.label ?? opt }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<input
|
||||
v-else
|
||||
:type="type"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
class="field-input"
|
||||
:class="{ 'field-error': error }"
|
||||
@input="emit('update:modelValue', $event.target.value)"
|
||||
/>
|
||||
|
||||
<p v-if="error" class="field-error-msg">{{ error }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
color: #8892b0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.required-star {
|
||||
color: #e94560;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
background: #0f1b35;
|
||||
border: 1px solid rgba(0, 210, 255, 0.35);
|
||||
border-radius: 4px;
|
||||
color: #e8e8e8;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
border-color: #00d2ff;
|
||||
box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.12), 0 0 12px rgba(0, 210, 255, 0.1);
|
||||
}
|
||||
|
||||
.field-input.field-error {
|
||||
border-color: rgba(233, 69, 96, 0.6);
|
||||
}
|
||||
|
||||
.field-input.field-error:focus {
|
||||
box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.12);
|
||||
}
|
||||
|
||||
.field-textarea {
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
min-height: 72px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.field-select {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300d2ff' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.field-select option {
|
||||
background: #16213e;
|
||||
color: #e8e8e8;
|
||||
}
|
||||
|
||||
/* Date input calendar icon color */
|
||||
.field-input[type='date']::-webkit-calendar-picker-indicator {
|
||||
filter: invert(0.6) sepia(1) saturate(5) hue-rotate(160deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.field-error-msg {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: #e94560;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
216
resources/js/Components/Forms/ProjectForm.vue
Normal file
216
resources/js/Components/Forms/ProjectForm.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<script setup>
|
||||
import { watch } from 'vue'
|
||||
import { useForm } from '@inertiajs/vue3'
|
||||
import Modal from '../Modal.vue'
|
||||
import FormInput from './FormInput.vue'
|
||||
|
||||
const props = defineProps({
|
||||
project: { type: Object, default: null },
|
||||
speerpunten: { type: Array, default: () => [] },
|
||||
show: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const isEditing = !!props.project
|
||||
|
||||
const form = useForm({
|
||||
naam: props.project?.naam ?? '',
|
||||
beschrijving: props.project?.beschrijving ?? '',
|
||||
speerpunt_id: props.project?.speerpunt_id ?? '',
|
||||
prioriteit: props.project?.prioriteit ?? '',
|
||||
startdatum: props.project?.startdatum ?? '',
|
||||
streef_einddatum: props.project?.streef_einddatum ?? '',
|
||||
})
|
||||
|
||||
// Reset form when show changes to true and project changes
|
||||
watch(() => props.show, (val) => {
|
||||
if (val) {
|
||||
form.naam = props.project?.naam ?? ''
|
||||
form.beschrijving = props.project?.beschrijving ?? ''
|
||||
form.speerpunt_id = props.project?.speerpunt_id ?? ''
|
||||
form.prioriteit = props.project?.prioriteit ?? ''
|
||||
form.startdatum = props.project?.startdatum ?? ''
|
||||
form.streef_einddatum = props.project?.streef_einddatum ?? ''
|
||||
form.clearErrors()
|
||||
}
|
||||
})
|
||||
|
||||
const speerpuntOptions = props.speerpunten.map(s => ({
|
||||
value: s.id,
|
||||
label: s.naam ?? s.name ?? s.id,
|
||||
}))
|
||||
|
||||
const prioriteitOptions = [
|
||||
{ value: 'laag', label: 'Laag' },
|
||||
{ value: 'midden', label: 'Midden' },
|
||||
{ value: 'hoog', label: 'Hoog' },
|
||||
]
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (isEditing) {
|
||||
form.put(`/projects/${props.project.id}`, {
|
||||
onSuccess: () => emit('close'),
|
||||
})
|
||||
} else {
|
||||
form.post('/projects', {
|
||||
onSuccess: () => emit('close'),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
form.reset()
|
||||
form.clearErrors()
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:show="show"
|
||||
:title="isEditing ? 'PROJECT BEWERKEN' : 'NIEUW PROJECT'"
|
||||
max-width="560px"
|
||||
@close="handleClose"
|
||||
>
|
||||
<form class="project-form" @submit.prevent="handleSubmit">
|
||||
<div class="form-grid">
|
||||
<FormInput
|
||||
label="Naam"
|
||||
:model-value="form.naam"
|
||||
:error="form.errors.naam"
|
||||
:required="true"
|
||||
placeholder="Project naam..."
|
||||
@update:model-value="form.naam = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Beschrijving"
|
||||
type="textarea"
|
||||
:model-value="form.beschrijving"
|
||||
:error="form.errors.beschrijving"
|
||||
placeholder="Omschrijf het project..."
|
||||
@update:model-value="form.beschrijving = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Speerpunt"
|
||||
type="select"
|
||||
:model-value="form.speerpunt_id"
|
||||
:options="speerpuntOptions"
|
||||
:error="form.errors.speerpunt_id"
|
||||
@update:model-value="form.speerpunt_id = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Prioriteit"
|
||||
type="select"
|
||||
:model-value="form.prioriteit"
|
||||
:options="prioriteitOptions"
|
||||
:error="form.errors.prioriteit"
|
||||
@update:model-value="form.prioriteit = $event"
|
||||
/>
|
||||
|
||||
<div class="form-row">
|
||||
<FormInput
|
||||
label="Startdatum"
|
||||
type="date"
|
||||
:model-value="form.startdatum"
|
||||
:error="form.errors.startdatum"
|
||||
@update:model-value="form.startdatum = $event"
|
||||
/>
|
||||
<FormInput
|
||||
label="Streef einddatum"
|
||||
type="date"
|
||||
:model-value="form.streef_einddatum"
|
||||
:error="form.errors.streef_einddatum"
|
||||
@update:model-value="form.streef_einddatum = $event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn-cancel" @click="handleClose">
|
||||
[ANNULEER]
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-submit"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
<span v-if="form.processing">VERWERKEN...</span>
|
||||
<span v-else>{{ isEditing ? '[OPSLAAN]' : '[AANMAKEN]' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.project-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(0, 210, 255, 0.12);
|
||||
}
|
||||
|
||||
.btn-cancel,
|
||||
.btn-submit {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(136, 146, 176, 0.4);
|
||||
color: #8892b0;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
border-color: #e94560;
|
||||
color: #e94560;
|
||||
text-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: rgba(0, 210, 255, 0.1);
|
||||
border: 1px solid #00d2ff;
|
||||
color: #00d2ff;
|
||||
}
|
||||
|
||||
.btn-submit:hover:not(:disabled) {
|
||||
background: rgba(0, 210, 255, 0.2);
|
||||
box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
|
||||
text-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
161
resources/js/Components/MetroMap/FloatingActions.vue
Normal file
161
resources/js/Components/MetroMap/FloatingActions.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['create-project', 'create-theme'])
|
||||
|
||||
const menuOpen = ref(false)
|
||||
|
||||
const toggle = () => {
|
||||
menuOpen.value = !menuOpen.value
|
||||
}
|
||||
|
||||
const handleCreateProject = () => {
|
||||
menuOpen.value = false
|
||||
emit('create-project')
|
||||
}
|
||||
|
||||
const handleCreateTheme = () => {
|
||||
menuOpen.value = false
|
||||
emit('create-theme')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fab-container">
|
||||
<!-- Expanded menu -->
|
||||
<Transition name="fab-menu">
|
||||
<div v-if="menuOpen" class="fab-menu">
|
||||
<button class="fab-menu-item" @click="handleCreateProject">
|
||||
<span class="fab-menu-icon">+</span>
|
||||
<span class="fab-menu-label">Nieuw project</span>
|
||||
</button>
|
||||
<button class="fab-menu-item" @click="handleCreateTheme">
|
||||
<span class="fab-menu-icon">+</span>
|
||||
<span class="fab-menu-label">Nieuw thema</span>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- Main FAB button -->
|
||||
<button
|
||||
class="fab-btn"
|
||||
:class="{ 'fab-btn--open': menuOpen }"
|
||||
:title="menuOpen ? 'Sluiten' : 'Nieuw aanmaken'"
|
||||
@click="toggle"
|
||||
>
|
||||
<span class="fab-icon">{{ menuOpen ? '[X]' : '[+]' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fab-container {
|
||||
position: fixed;
|
||||
bottom: 64px; /* above the CLI bar */
|
||||
right: 20px;
|
||||
z-index: 150;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.fab-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #0f3460;
|
||||
border: 2px solid #00d2ff;
|
||||
color: #00d2ff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow:
|
||||
0 0 12px rgba(0, 210, 255, 0.35),
|
||||
0 0 24px rgba(0, 210, 255, 0.15);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.fab-btn:hover {
|
||||
background: rgba(0, 210, 255, 0.15);
|
||||
box-shadow:
|
||||
0 0 20px rgba(0, 210, 255, 0.5),
|
||||
0 0 40px rgba(0, 210, 255, 0.2);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.fab-btn--open {
|
||||
border-color: #e94560;
|
||||
color: #e94560;
|
||||
box-shadow:
|
||||
0 0 12px rgba(233, 69, 96, 0.35),
|
||||
0 0 24px rgba(233, 69, 96, 0.15);
|
||||
}
|
||||
|
||||
.fab-btn--open:hover {
|
||||
box-shadow:
|
||||
0 0 20px rgba(233, 69, 96, 0.5),
|
||||
0 0 40px rgba(233, 69, 96, 0.2);
|
||||
}
|
||||
|
||||
.fab-icon {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 8px currentColor;
|
||||
}
|
||||
|
||||
.fab-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.fab-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #16213e;
|
||||
border: 1px solid rgba(0, 210, 255, 0.4);
|
||||
border-radius: 4px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s;
|
||||
box-shadow: 0 0 10px rgba(0, 210, 255, 0.1);
|
||||
}
|
||||
|
||||
.fab-menu-item:hover {
|
||||
background: rgba(0, 210, 255, 0.1);
|
||||
border-color: #00d2ff;
|
||||
box-shadow: 0 0 16px rgba(0, 210, 255, 0.25);
|
||||
}
|
||||
|
||||
.fab-menu-icon {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
color: #00d2ff;
|
||||
text-shadow: 0 0 6px rgba(0, 210, 255, 0.5);
|
||||
}
|
||||
|
||||
.fab-menu-label {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
color: #e8e8e8;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Menu transition */
|
||||
.fab-menu-enter-active,
|
||||
.fab-menu-leave-active {
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.fab-menu-enter-from,
|
||||
.fab-menu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.97);
|
||||
}
|
||||
</style>
|
||||
114
resources/js/Components/Modal.vue
Normal file
114
resources/js/Components/Modal.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
title: { type: String, default: '' },
|
||||
maxWidth: { type: String, default: '500px' },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="modal">
|
||||
<div v-if="show" class="modal-backdrop" @click.self="emit('close')">
|
||||
<div class="modal-panel" :style="{ maxWidth }">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">{{ title }}</h2>
|
||||
<button class="modal-close" @click="emit('close')">[X]</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(10, 10, 26, 0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal-panel {
|
||||
width: 100%;
|
||||
margin: 16px;
|
||||
background: #16213e;
|
||||
border: 1px solid #00d2ff;
|
||||
border-radius: 6px;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 210, 255, 0.15),
|
||||
0 0 30px rgba(0, 210, 255, 0.2),
|
||||
0 0 60px rgba(0, 210, 255, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(0, 210, 255, 0.2);
|
||||
background: rgba(0, 210, 255, 0.04);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 24px;
|
||||
color: #00d2ff;
|
||||
margin: 0;
|
||||
text-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 18px;
|
||||
color: #8892b0;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: #e94560;
|
||||
text-shadow: 0 0 8px rgba(233, 69, 96, 0.5);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Transition */
|
||||
.modal-enter-active,
|
||||
.modal-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-active .modal-panel,
|
||||
.modal-leave-active .modal-panel {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-from,
|
||||
.modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter-from .modal-panel,
|
||||
.modal-leave-to .modal-panel {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user