kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fe): Add form field navigation - Enter key moves to next field

Browse Source 
- 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
This commit is contained in:
김재현
2026-08-16 21:50:50 +09:00
parent 5213ea142b
commit b12fc7411d
25 changed files with 1105 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/ui/layouts/DashboardLayout.vue
+79 -2
View File
@@ -1,2 +1,79 @@
<template><div class="ks-dashboard"><section class="ks-dashboard__kpis"><slot name="kpis" /></section><section class="ks-dashboard__primary ks-card"><slot name="primary" /></section><section class="ks-dashboard__secondary ks-card"><slot name="secondary" /></section><section class="ks-dashboard__alerts ks-card"><slot name="alerts" /></section></div></template>
<style scoped>.ks-dashboard { display: grid; grid-template-columns: 2fr 1fr; gap: var(--ks-space-4); }.ks-dashboard__kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ks-space-3); }.ks-dashboard__primary,.ks-dashboard__secondary,.ks-dashboard__alerts { padding: var(--ks-space-4); }.ks-dashboard__alerts { grid-column: 1 / -1; }@media (max-width: 1100px) { .ks-dashboard { grid-template-columns: 1fr; } }</style>
<template>
<div class="ks-dashboard">
<section v-if="$slots.kpis" class="ks-dashboard__kpis">
<slot name="kpis" />
</section>
<div class="ks-dashboard__body">
<section v-if="$slots.primary" class="ks-dashboard__primary ks-card">
<slot name="primary" />
</section>
<div class="ks-dashboard__side">
<section v-if="$slots.secondary" class="ks-dashboard__secondary ks-card">
<slot name="secondary" />
</section>
<section v-if="$slots.alerts" class="ks-dashboard__alerts ks-card">
<slot name="alerts" />
</section>
</div>
</div>
</div>
</template>
<style scoped>
.ks-dashboard {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
gap: var(--ks-space-3);
overflow: hidden;
}
.ks-dashboard__kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--ks-space-3);
flex-shrink: 0;
}
.ks-dashboard__body {
display: grid;
grid-template-columns: 1fr 360px;
gap: var(--ks-space-3);
flex: 1;
min-height: 0;
overflow: hidden;
}
.ks-dashboard__primary {
height: 100%;
min-height: 0;
overflow-y: auto;
padding: var(--ks-space-3);
display: flex;
flex-direction: column;
}
.ks-dashboard__side {
display: flex;
flex-direction: column;
gap: var(--ks-space-3);
height: 100%;
min-height: 0;
overflow-y: auto;
}
.ks-dashboard__secondary,
.ks-dashboard__alerts {
padding: var(--ks-space-3);
}
@media (max-width: 1100px) {
.ks-dashboard__body {
grid-template-columns: 1fr;
overflow-y: auto;
}
}
</style>