kjh2064
b12fc7411d
- Create useFormFieldNavigation composable for Tab-like Enter behavior - KsTextField: Enter -> next field - KsTextArea: Ctrl+Enter for newline, Enter -> next field - KsSelect: Enter -> next field after selection - Implements standard form navigation pattern across input components
80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import Sidebar from './Sidebar.vue'
|
|
import Header from './Header.vue'
|
|
import Footer from './Footer.vue'
|
|
|
|
const isSidebarOpen = ref(true)
|
|
const isDarkMode = ref(false)
|
|
|
|
const toggleSidebar = () => {
|
|
isSidebarOpen.value = !isSidebarOpen.value
|
|
}
|
|
|
|
const toggleDarkMode = () => {
|
|
isDarkMode.value = !isDarkMode.value
|
|
// Apply dark mode to root element
|
|
if (isDarkMode.value) {
|
|
document.documentElement.setAttribute('data-theme', 'dark')
|
|
} else {
|
|
document.documentElement.removeAttribute('data-theme')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-layout" :class="{ 'dark-mode': isDarkMode }">
|
|
<!-- Sidebar -->
|
|
<Sidebar :isOpen="isSidebarOpen" @toggle="toggleSidebar" />
|
|
|
|
<!-- Main Content -->
|
|
<div class="app-main">
|
|
<!-- Header -->
|
|
<Header
|
|
@toggle-sidebar="toggleSidebar"
|
|
@toggle-dark-mode="toggleDarkMode"
|
|
:isDarkMode="isDarkMode"
|
|
/>
|
|
|
|
<!-- Page Content -->
|
|
<main class="app-content">
|
|
<slot></slot>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-layout {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
height: 100vh;
|
|
background-color: var(--color-background-primary);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.app-main {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.app-content {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background-color: var(--color-background-primary);
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
:deep(*) {
|
|
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.app-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|