Editable
인라인 내용을 미리 보기와 검증 가능한 편집 상태로 전환합니다.
용법
기본 사용
필요한 구성만 사용하고 초깃값은 컴포넌트가 직접 관리합니다.
필요한 구성만 사용하고 초깃값은 컴포넌트가 직접 관리합니다.
<!-- Editable / Basic -->
<script setup lang="ts">
import { EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger } from '@sectile/vue/editable'
</script>
<template>
<EditableRoot default-value="release-candidate" v-slot="{ value }">
<EditableArea><EditablePreview>{{ value }}</EditablePreview><EditableInput />
<EditableEditTrigger>Edit</EditableEditTrigger><EditableSubmitTrigger>Save</EditableSubmitTrigger><EditableCancelTrigger>Cancel</EditableCancelTrigger>
</EditableArea>
</EditableRoot>
</template>입력 검증
검증을 통과한 편집만 확정하고 마지막 확정값을 유지합니다.
검증을 통과한 편집만 확정하고 마지막 확정값을 유지합니다.
<!-- Editable / Validated -->
<script setup lang="ts">
import { EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger } from '@sectile/vue/editable'
</script>
<template>
<EditableRoot default-value="release-candidate" v-slot="{ value }">
<EditableArea><EditablePreview>{{ value }}</EditablePreview><EditableInput />
<EditableEditTrigger>Edit</EditableEditTrigger><EditableSubmitTrigger>Save</EditableSubmitTrigger><EditableCancelTrigger>Cancel</EditableCancelTrigger>
</EditableArea>
</EditableRoot>
</template>외부 상태 관리
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
<!-- Editable / Controlled -->
<script setup lang="ts">
import { EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger } from '@sectile/vue/editable'
</script>
<template>
<EditableRoot default-value="release-candidate" v-slot="{ value }">
<EditableArea><EditablePreview>{{ value }}</EditablePreview><EditableInput />
<EditableEditTrigger>Edit</EditableEditTrigger><EditableSubmitTrigger>Save</EditableSubmitTrigger><EditableCancelTrigger>Cancel</EditableCancelTrigger>
</EditableArea>
</EditableRoot>
</template>API
Vue 패키지: @sectile/vue/editable
EditableRootEditableAreaEditablePreviewEditableInputEditableEditTriggerEditableSubmitTriggerEditableCancelTrigger
Props
EditableRootProps
as이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultValue컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled사용자 조작을 막을지 여부입니다.
label보조 기술이 읽는 컨트롤 이름입니다.
modelValue부모가 상태를 관리할 때 사용할 현재 값입니다.
name네이티브 폼 제출에 사용할 이름입니다.
policies검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
submitOnBlur편집기에서 벗어날 때 현재 입력을 확정할지 여부입니다.
EditablePartProps
as이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
슬롯
EditableRootSlotProps
disabled사용자 조작을 막을지 여부입니다.
draft현재 편집 중인 입력 문자열입니다.
editing현재 편집 중인지 여부입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
value이 계약이 노출하는 현재 값입니다.
이벤트
EditableRoot
update:editing편집을 시작하거나 끝낼 때 발생합니다.
update:modelValue컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.
기타 타입
EditableValueChangeHandler
type EditableValueChangeHandler = (value: string) => voidEditableEditingChangeHandler
type EditableEditingChangeHandler = (editing: boolean) => void파트
공통 범위: [data-scope="editable"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
root | [data-part="root"] | 컴포넌트 경계와 내부 파트를 묶습니다. | — |
area | [data-part="area"] | 2차원 조작 영역을 제공합니다. | — |
preview | [data-part="preview"] | 편집 모드 밖에서 확정 값을 표시합니다. | — |
input | [data-part="input"] | 편집 값이나 초안을 입력받습니다. | — |
edit-trigger | [data-part="edit-trigger"] | 편집 모드로 전환합니다. | — |
submit-trigger | [data-part="submit-trigger"] | 현재 초안을 확정합니다. | — |
cancel-trigger | [data-part="cancel-trigger"] | 현재 초안을 취소합니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Enter | 미리보기에서 편집을 시작하거나 한 줄 입력을 확정합니다. |
| Escape | 편집을 취소하고 확정된 값을 복원합니다. |
| Tab | 미리보기, 입력, 작업 컨트롤 사이를 이동합니다. |
접근성
미리보기와 입력 상태를 구분하고 검증 오류는 실제 입력 요소에서 전달합니다.