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

- 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
+15 -2
View File
@@ -9,7 +9,12 @@ const props = defineProps<{
dirty?: boolean
error?: Error | null
empty?: boolean
emptyTitle?: string
emptyMessage?: string
emptyIcon?: string
emptyActionLabel?: string
partial?: boolean
staleAt?: string | null
warning?: string | null
unauthorized?: boolean
@@ -35,15 +40,23 @@ const emit = defineEmits<{ retry: [] }>()
<KsButton label="같은 요청 다시 시도" severity="secondary" @click="emit('retry')" />
<small v-if="correlationId">Correlation: {{ correlationId }}</small>
</div>
<EmptyStatePlaceholder v-else-if="props.empty" />
<EmptyStatePlaceholder
v-else-if="props.empty"
:title="props.emptyTitle"
:message="props.emptyMessage"
:icon="props.emptyIcon"
:action-label="props.emptyActionLabel"
@action="emit('retry')"
/>
<template v-else>
<KsInlineMessage v-if="props.partial" severity="warning" message="일부 데이터만 표시하고 있습니다. 완전성 경고를 확인하세요." />
<KsInlineMessage v-if="props.warning" severity="warning" :message="props.warning" />
<KsInlineMessage v-if="props.readonly" severity="info" message="읽기 전용 상태입니다." />
<KsInlineMessage v-if="props.dirty" severity="warning" message="저장되지 않은 변경사항이 있습니다." />
<KsInlineMessage v-if="props.processing" severity="info" message="처리 중입니다. 중복 제출하지 마세요." />
<slot />
</template>
<small v-if="props.staleAt">데이터 기준시각: {{ props.staleAt }}</small>
</section>
</template>