diff --git a/content/docs/form/index.mdx b/content/docs/form/index.mdx index 8d2eef8..aca078a 100644 --- a/content/docs/form/index.mdx +++ b/content/docs/form/index.mdx @@ -48,3 +48,5 @@ The most important rule is path semantics. A string is a literal field name, so ## Where to go next Read [Quick start](/en/form/quick-start) for a working React example, [Core concepts](/en/form/core-concepts) for the mental model, [CreateForm](/en/form/reference/create-form) for the core API, and the integration page for your framework when you are ready to bind DOM inputs. + +> This documentation lives in the `@ilokesto/form` repository and is synced to the ilokesto docs site. diff --git a/content/docs/form/integrations/vue.ko.mdx b/content/docs/form/integrations/vue.ko.mdx index 5fc2f73..ef6bf25 100644 --- a/content/docs/form/integrations/vue.ko.mdx +++ b/content/docs/form/integrations/vue.ko.mdx @@ -29,6 +29,25 @@ const state = useFormState(); 반환된 상태는 getter 기반으로 읽히므로 템플릿에서 최신 값을 볼 수 있습니다. field-local 스키마는 현재 Vue effect scope와 함께 정리됩니다. 커스텀 컴포넌트에서는 DOM과 호환되는 value, checked, 이벤트 동작을 통과시키세요. +## 외부 값 동기화 + +`useForm`에 `values` 옵션(`ref`, `computed`, getter, 평면 값 모두 가능)과 optional `resetOptions`를 전달하면, `values` reference가 바뀔 때 adapter가 `form.reset(values, resetOptions)`를 호출합니다 — React adapter와 동일한 모델입니다. + +```vue + +``` + +변화 추적을 보장하려면 반응형 소스(`ref`/`computed`)를 직접 전달하세요. 평면 값은 생성 시 1회 평가되며 컴포넌트가 다시 렌더링되어 `useForm`이 다시 호출될 때 다시 평가됩니다. + ## 주의할 점 코어 폼은 안정적인 위치에서 만들고, 해당 프레임워크 피어 의존성을 설치하며, 프레임워크 컴포넌트에서는 이 어댑터 하위 경로에서만 가져오세요. 서버 액션이나 도메인 도우미처럼 렌더링이 필요 없는 코드는 루트 `@ilokesto/form` API에 남겨두는 편이 좋습니다. diff --git a/content/docs/form/integrations/vue.mdx b/content/docs/form/integrations/vue.mdx index 1169d33..3f2f7bb 100644 --- a/content/docs/form/integrations/vue.mdx +++ b/content/docs/form/integrations/vue.mdx @@ -29,6 +29,25 @@ const state = useFormState(); The returned state uses getter-backed reads so templates see fresh values. Field-local schemas are cleaned up with the current Vue effect scope. For custom components, pass through DOM-compatible value, checked, and event behavior. +## Syncing external values + +Pass a `values` option (a `ref`, `computed`, getter, or plain value) and optional `resetOptions` to `useForm`. When `values` changes by reference, the adapter calls `form.reset(values, resetOptions)` — the same model as the React adapter. + +```vue + +``` + +Pass reactive sources (`ref`/`computed`) directly so Vue can track changes. Plain values are evaluated once on creation and re-evaluated when the component re-renders and `useForm` is called again. + ## Cautions Create the core form in a stable place, install the matching peer dependency, and import only from this adapter subpath in framework components. Keep server actions and domain helpers on the root `@ilokesto/form` API when they do not need rendering.