# FormBuilder `SkForm`, `FB` ile üretilen fluent konfigürasyona göre dinamik formlar oluşturur. PrimeVue bağlantısını, definition yüklemeyi, bağımlı select'leri, dosya yüklemeyi ve yetki tabanlı salt-okunur modu kendi yönetir — sayfa katmanı ince bir render katmanı olarak kalır. ## İmportlar ```ts import { FB } from '@lvntr/components/FormBuilder/core'; import SkForm from '@lvntr/components/FormBuilder/SkForm.vue'; ``` ## Temel Kullanım ```vue ``` ## İki Çalışma Modu ### Dahili submit modu `submit(...)` tanımlanırsa `SkForm`, kendi içinde Inertia `useForm()` yönetir. ### Harici model modu `submit(...)` yoksa `v-model` ile form verisini kendin yönetebilirsin. ```vue ``` Bu modda `SkForm` **yalnızca** bağladığın nesneyi okur ve yazar. `initialData()`, bir alanın `.default()` değeri ve `dataUrl`'den yüklenen veri yalnızca dahili Inertia formunu besler — `v-model`'i asla doldurmaz — ve `reset()` no-op'tur; bu yüzden `formData`'yı mount'tan önce kendin doldur (`reactive({ status: 'active', ...record })`). ## Form Builder API - `layout('vertical' | 'horizontal')` - `cols(number)` — form grid sütun sayısı (1–12 aralığının tamamı desteklenir; daha önce 6'nın üzerindeki değerler varsayılan 2 sütunlu düzene düşüyordu) - `dividers(boolean)` — horizontal layout'ta alan satırları arasına ince ayraç çizgileri çeker ve label'ları sola yaslar (ayarlar-tarzı üst üste satırlar). Vertical layout'ta etkisi yoktur. Varsayılan `false`. - `class(string)` - `dataUrl(url)` - `reloadOnDataUrlChange(boolean)` — mount sonrası `dataUrl` değiştiğinde otomatik yeniden çekmeye opt-in olur (örn. farklı bir kayıt için tekrar kullanılan bir dialog). Varsayılan `false`: config'i her parent render'da yeniden kurulan bir form aksi halde her rebuild'de yeniden veri çekerdi, aynı URL ile rebuild ise devam eden düzenlemeleri silmemeli. - `dataKey(key)` - `initialData(record)` - `actionsPosition('top' | 'bottom' | 'both')` - `submit({ url, method, preserveScroll? })` - `resource({ store, update, data, key, id? })` — `submit`, `dataUrl` ve `dataKey`'i tek bir config'ten türeten kısayol: `id` dolu ise edit modu (PUT ile `update`, veri `data`'dan yüklenir); `id` boş ise create modu (POST ile `store`) - `actionLabels(...)` - `hideCancel(boolean)` - `hideSubmit(boolean)` - `hideActions(boolean)` — tüm action bar'ı (üst ve alt) gizler; submit işlemini host, formun expose ettiği `submit()` metodu üzerinden yönetir - `onCancel('back' | 'emit')` - `inDialog(boolean)` - `showBack(boolean)` - `cardTitle(string)` - `cardSubtitle(string)` - `isCard(boolean)` - `permission(key)` — formu salt-okunur moda alan yetki anahtarı (yetki yoksa tüm alanlar disabled + submit gizli) - `confirmLeave(boolean)` — form dirty iken sayfadan çıkışta uyarır (yalnızca internal submit modunda). Varsayılan `true`; opt-out için `false` verin. - `addFields(...fields)` ## Ortak Field Metotları Çoğu alan şu metotları destekler: - `key` - `label` - `trans(boolean)` — `label`'ın `$t()` ile çözülen bir çeviri anahtarı mı (varsayılan `true`) yoksa hazır çözülmüş ham bir string mi olduğunu belirtir. Önceden çevrilmiş bir label verirken (örn. `.label($t('admin.example')).trans(false)`) `false` verin ki template üzerinde `$t()` tekrar çalışmasın. - `required` - `labelPlacement('top' | 'inline')` — vertical layout'ta label konumu. Varsayılan `'top'` (kontrolün üstünde, alt alta); `'inline'` ise label'ı kontrolün yanına yerleştirir (`checkbox`/`toggle-button`/`toggle-switch` tiplerinin zaten varsayılan olarak kullandığı görünüm). - `controlPosition('left' | 'right')` — kontrolün label'ına göre konumu. Varsayılan `'left'`. - `optional` - `class` - `hint` - `visible(fn)` - `disabled(fn)` - `hidden(boolean)` - `default(value)` - `props({...})` - `colSpan(number)` — bu alanın form grid'inde kaç sütun kaplayacağı (1..cols). Belirtilmezse 1 hücre. Aktif `cols` değerini aşan değerler otomatik clamp edilir; section içindeyse clamp section'ın kendi `cols` değerini kullanır. `hidden(true)`, alanı gönderilen payload içinde tutarken görünür bir kontrol yerine gizli input olarak render eder. ```ts FB.inputText().key('user_id').default(currentUserId).hidden(); ``` ### Label `for` / control id kuralı Çoğu field tipinde render edilen `