FormBuilder Bileseni

SkForm, FB ile uretilen fluent konfigurasyona gore dinamik formlar olusturur.

Importlar

import { FB } from '@lvntr/components/FormBuilder/core';
import SkForm from '@lvntr/components/FormBuilder/SkForm.vue';

Temel kullanim

<script setup lang="ts">
import { FB } from '@lvntr/components/FormBuilder/core';
import SkForm from '@lvntr/components/FormBuilder/SkForm.vue';
import users from '@/routes/users';

const formConfig = FB.form()
    .cols(2)
    .cardTitle('admin.users.create')
    .submit({
        url: users.store.url(),
        method: 'post',
    })
    .addFields(
        FB.inputText().key('first_name'),
        FB.inputText().key('last_name'),
        FB.inputText().key('email').inputType('email'),
        FB.select().key('status').enumOptions('userStatus').default('active'),
        FB.select().key('gender').definitionOptions('gender'),
        FB.password().key('password').toggleMask(),
    )
    .build();
</script>

<template>
    <SkForm :config="formConfig" />
</template>

Iki calisma modu

Dahili submit modu

submit(...) tanimlanirsa SkForm, kendi icinde Inertia useForm() yonetir.

Harici model modu

submit(...) yoksa v-model ile form verisini kendin yonetebilirsin.

<SkForm v-model="formData" :config="formConfig" :errors="errors" />

Form builder API

• layout('vertical' | 'horizontal')
• cols(number)
• class(string)
• dataUrl(url)
• dataKey(key)
• initialData(record)
• actionsPosition('top' | 'bottom' | 'both')
• submit({ url, method, preserveScroll? })
• actionLabels(...)
• hideCancel(boolean)
• hideSubmit(boolean)
• onCancel('back' | 'emit')
• inDialog(boolean)
• showBack(boolean)
• cardTitle(string)
• cardSubtitle(string)
• isCard(boolean)
• addFields(...fields)

Ortak field metotlari

Cogu alan su metotlari destekler:

• key
• label
• required
• optional
• class
• hint
• visible(fn)
• disabled(fn)
• default(value)
• props({...})

Kullanilabilir field builder'lar

• FB.inputText()
• FB.inputNumber()
• FB.inputOtp()
• FB.select()
• FB.multiselect()
• FB.radio()
• FB.selectButton()
• FB.checkbox()
• FB.checkboxGroup()
• FB.password()
• FB.textarea()
• FB.toggleButton()
• FB.toggleSwitch()
• FB.fileUpload()
• FB.colorSelector()
• FB.title()
• FB.slot()

Select benzeri alanlarda veri kaynaklari

Select alanlari secenekleri su kaynaklardan alabilir:

• options([...]) ile statik dizi
• enumOptions('userStatus') ile Inertia shared PHP enum'lari
• definitionOptions('gender') ile /definitions
• optionsUrl(...) ile uzaktan dinamik veri

Dahili davranislar

SkForm sunlari hazir olarak yonetir:

• dataUrl ile ilk veriyi cekme
• definition verilerini once yukleme
• bagimli alan degisince dinamik select seceneklerini yenileme
• file upload alanlari varsa forceFormData ile gonderme
• dialog icin uygun cancel davranisi
• dahili veya harici modda birlesik hata gosterimi

FormBuilder Component

SkForm renders dynamic forms from a fluent configuration built with FB.

Imports

import { FB } from '@lvntr/components/FormBuilder/core';
import SkForm from '@lvntr/components/FormBuilder/SkForm.vue';

Basic usage

<script setup lang="ts">
import { FB } from '@lvntr/components/FormBuilder/core';
import SkForm from '@lvntr/components/FormBuilder/SkForm.vue';
import users from '@/routes/users';

const formConfig = FB.form()
    .cols(2)
    .cardTitle('admin.users.create')
    .submit({
        url: users.store.url(),
        method: 'post',
    })
    .addFields(
        FB.inputText().key('first_name'),
        FB.inputText().key('last_name'),
        FB.inputText().key('email').inputType('email'),
        FB.select().key('status').enumOptions('userStatus').default('active'),
        FB.select().key('gender').definitionOptions('gender'),
        FB.password().key('password').toggleMask(),
    )
    .build();
</script>

<template>
    <SkForm :config="formConfig" />
</template>

Two operating modes

Internal submit mode

If submit(...) is configured, SkForm manages an internal Inertia useForm() instance.

External model mode

If submit(...) is omitted, you can use v-model and handle submission yourself.

<SkForm v-model="formData" :config="formConfig" :errors="errors" />

Form builder API

• layout('vertical' | 'horizontal')
• cols(number)
• class(string)
• dataUrl(url)
• dataKey(key)
• initialData(record)
• actionsPosition('top' | 'bottom' | 'both')
• submit({ url, method, preserveScroll? })
• actionLabels(...)
• hideCancel(boolean)
• hideSubmit(boolean)
• onCancel('back' | 'emit')
• inDialog(boolean)
• showBack(boolean)
• cardTitle(string)
• cardSubtitle(string)
• isCard(boolean)
• addFields(...fields)

Common field methods

Most fields support:

• key
• label
• required
• optional
• class
• hint
• visible(fn)
• disabled(fn)
• default(value)
• props({...})

Available field builders

• FB.inputText()
• FB.inputNumber()
• FB.inputOtp()
• FB.select()
• FB.multiselect()
• FB.radio()
• FB.selectButton()
• FB.checkbox()
• FB.checkboxGroup()
• FB.password()
• FB.textarea()
• FB.toggleButton()
• FB.toggleSwitch()
• FB.fileUpload()
• FB.colorSelector()
• FB.title()
• FB.slot()

Data sources for select-like fields

Select fields can get options from:

• options([...]) for static arrays
• enumOptions('userStatus') for Inertia shared PHP enums
• definitionOptions('gender') for /definitions
• optionsUrl(...) for remote dynamic options

Built-in behavior

SkForm already handles:

• loading initial data from dataUrl
• preloading definition options
• updating dynamic select options when dependent fields change
• file upload submission through forceFormData
• dialog-friendly cancel behavior
• unified error rendering for internal or external mode