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/design-system/tokens.css
+75 -14
View File
@@ -59,9 +59,14 @@
/* KBX v60 ERP/OMS/WMS Ultra-Dense Control & Layout Heights & Default Widths */
--ks-control-height: 28px; /* ERP/OMS Input Control 28px */
--ks-field-label-width: 72px; /* Standardized Inline Field Label Fixed Width 72px */
--ks-set-width-sm: 200px; /* Standardized Compact Field Set Width 200px */
--ks-set-width-md: 260px; /* Standardized Default Field Set Width 260px */
--ks-set-width-lg: 340px; /* Standardized Wide Field Set Width 340px */
--ks-control-width-select: 160px; /* Standard Select/Dropdown Default Width 160px */
--ks-control-width-search: 220px; /* Standard Search Input Default Width 220px */
--ks-control-width-date: 140px; /* Standard Date Field Default Width 140px */
--ks-grid-row-height: 28px; /* Ultra-Dense Grid Row 28px */
--ks-grid-header-height: 30px; /* Grid Header 30px */
--ks-content-max: 100%; /* Full Screen Utilization */
@@ -266,34 +271,90 @@
}
/* Raw Table Standard Grid Class for legacy fallback tables */
.grid-table, .kbx-grid-table, .models-table, .shadow-runs-table {
.grid-table, .kbx-grid-table, .models-table, .shadow-runs-table, .ks-grid-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ks-font-grid);
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border: 1px solid var(--ks-color-border-strong);
border-radius: var(--ks-radius-sm);
}
.grid-table th, .kbx-grid-table th, .models-table th, .shadow-runs-table th {
height: 30px;
.grid-table th, .kbx-grid-table th, .models-table th, .shadow-runs-table th, .ks-grid-table th {
height: var(--ks-grid-header-height, 30px);
padding: 0 10px;
background-color: var(--ks-color-canvas);
border-bottom: 1px solid var(--ks-color-border);
font-weight: 600;
background-color: #f1f5f9;
border-bottom: 2px solid var(--ks-color-border-strong);
font-weight: 700;
text-align: left;
color: var(--ks-color-text-muted);
color: var(--ks-color-neutral-900);
}
.grid-table td, .kbx-grid-table td, .models-table td, .shadow-runs-table td {
height: 28px;
[data-theme='dark'] .grid-table th,
[data-theme='dark'] .kbx-grid-table th,
[data-theme='dark'] .models-table th,
[data-theme='dark'] .shadow-runs-table th,
[data-theme='dark'] .ks-grid-table th {
background-color: #1e293b;
color: #f8fafc;
border-bottom: 2px solid #475569;
}
.grid-table td, .kbx-grid-table td, .models-table td, .shadow-runs-table td, .ks-grid-table td {
height: var(--ks-grid-row-height, 28px);
padding: 0 10px;
border-bottom: 1px solid var(--ks-color-border);
color: var(--ks-color-text);
box-sizing: border-box;
color: var(--ks-color-neutral-950);
box-sizing: border-border-box;
}
.grid-table tr:hover, .kbx-grid-table tr:hover, .models-table tr:hover, .shadow-runs-table tr:hover {
background-color: var(--ks-color-neutral-100);
[data-theme='dark'] .grid-table td,
[data-theme='dark'] .kbx-grid-table td,
[data-theme='dark'] .models-table td,
[data-theme='dark'] .shadow-runs-table td,
[data-theme='dark'] .ks-grid-table td {
color: #f8fafc;
border-bottom: 1px solid #334155;
}
/* Zebra Stripes & Hover & Selection Rules */
.grid-table tr:nth-child(even), .kbx-grid-table tr:nth-child(even), .ks-grid-table tr:nth-child(even) {
background-color: #ffffff;
}
.grid-table tr:nth-child(odd), .kbx-grid-table tr:nth-child(odd), .ks-grid-table tr:nth-child(odd) {
background-color: #f8fafc;
}
[data-theme='dark'] .grid-table tr:nth-child(even),
[data-theme='dark'] .kbx-grid-table tr:nth-child(even),
[data-theme='dark'] .ks-grid-table tr:nth-child(even) {
background-color: #0f172a;
}
[data-theme='dark'] .grid-table tr:nth-child(odd),
[data-theme='dark'] .kbx-grid-table tr:nth-child(odd),
[data-theme='dark'] .ks-grid-table tr:nth-child(odd) {
background-color: #090d16;
}
.grid-table tr:hover, .kbx-grid-table tr:hover, .models-table tr:hover, .shadow-runs-table tr:hover, .ks-grid-table tr:hover, .ks-grid-row:hover {
background-color: #e0f2fe !important;
}
[data-theme='dark'] .grid-table tr:hover,
[data-theme='dark'] .kbx-grid-table tr:hover,
[data-theme='dark'] .models-table tr:hover,
[data-theme='dark'] .shadow-runs-table tr:hover,
[data-theme='dark'] .ks-grid-table tr:hover,
[data-theme='dark'] .ks-grid-row:hover {
background-color: #334155 !important;
}
.grid-table tr.selected, .ks-grid-table tr.selected, .ks-grid-row.selected {
background-color: #dbeafe !important;
color: #1e3a8a !important;
font-weight: 700;
}