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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user