Composables

Composable Fonksiyonlari Composables

Proje composable'lari resources/js/composables/ altinda yer alir ve @/composables uzerinden tekrar export edilir. Project composables live under resources/js/composables/ and are re-exported from @/composables.

Composables Kategori Category

17 Icerik bolumu Content sections

Composable Fonksiyonlari

Proje composable'lari resources/js/composables/ altinda yer alir ve @/composables uzerinden tekrar export edilir.

Temel istek ve dialog yardimcilari

useApi()

Projenin to_api() / ApiResponse JSON yapisina gore hazirlanmis kucuk bir fetch() sarmalayicisidir.

Accept: application/json ve X-Requested-With: XMLHttpRequest header'larini ekler
Uygunsa X-XSRF-TOKEN header'ini ekler
data payload'ini dogrudan cozer
Basarisiz cevaplarda ApiError firlatir
toast: false verilmezse PrimeVue toast hata mesaji gosterebilir

const api = useApi();

const user = await api.get<User>('/api/v1/users/1');
await api.post('/api/v1/users', { name: 'John Doe' });
await api.delete('/api/v1/users/1');

useConfirm()

PrimeVue ConfirmationService uzerine kurulmus iki yardimci dondurur:

confirmDelete(onAccept, message?, icon?)
confirmAction({ message, onAccept, header?, icon?, acceptLabel?, rejectLabel?, acceptClass? })

const { confirmDelete, confirmAction } = useConfirm();

confirmDelete(() => {
    console.log('Silme onaylandi');
});

confirmAction({
    message: 'Bu kaydi simdi yayinlamak istiyor musun?',
    acceptLabel: 'Yayinla',
    onAccept: () => console.log('Onaylandi'),
});

useDialog()

@lvntr/components/ui/AppDialog.vue ile birlikte calisan global dialog yoneticisidir.

open(component, props?, header?, options?)
openAsync(component, url, header?, options?, baseProps?)
close()

refreshKey verilirse onSuccess ve onCancel callback'leri otomatik eklenir.

Yetki ve gezinme yardimcilari

useCan()

Inertia shared props icindeki permission ve role verilerini okur.

can(permission)
canAny(permissions)
hasRole(role)

useAdminMenu()

Admin sidebar menusunu kurar ve yetkiye gore filtreler.

useUrlTab()

Sekme secimini ?tab=security gibi bir query string anahtari ile senkron tutar.

useRefreshBus()

Ozellikle DataTable gibi bilesenler icin kullanilan basit bir global yenileme bus'idir.

const bus = useRefreshBus();

bus.on('users-table', () => fetchData());
bus.refresh('users-table');

UI state yardimcilari

useSidebar()

Admin sidebar icin masaustu daraltma ve mobil acik/kapali durumlarini yonetir.

useDarkMode()

Dark mode tercihini local storage'da saklar ve <html> uzerinde .dark sinifini degistirir.

usePageLoading()

inertia:start ve inertia:finish tarayici event'leri ile sayfa gecis durumunu izler.

useFlash()

Inertia shared props icindeki flash verisini reactive olarak sunar.

Bu projede flash mesajlar composable icinde degil, AdminLayout.vue icinde toast olarak gosterilir.

Enum ve definition yardimcilari

useEnum()

Backend tarafindan Inertia ile paylasilan enum verilerini okur.

list(key)
options(key)
find(key, value)

useDefinition()

Veritabani tabanli tanimlari /definitions endpoint'inden yukler ve reactive olarak cache'ler.

load(keys)
loadAll()
list(key)
options(key)
find(key, value)
clearCache()

PHP enum verileri icin useEnum(), definitions servisinden gelen kayitlar icin useDefinition() kullanilmalidir.

Composables

Project composables live under resources/js/composables/ and are re-exported from @/composables.

Core request and dialog helpers

useApi()

Small fetch() wrapper for the project's to_api() / ApiResponse JSON envelope.

Adds Accept: application/json and X-Requested-With: XMLHttpRequest
Adds X-XSRF-TOKEN when available
Unwraps the data payload
Throws ApiError on failed responses
Can show PrimeVue toast errors unless toast: false is passed

const api = useApi();

const user = await api.get<User>('/api/v1/users/1');
await api.post('/api/v1/users', { name: 'John Doe' });
await api.delete('/api/v1/users/1');

useConfirm()

PrimeVue ConfirmationService wrapper with two helpers:

confirmDelete(onAccept, message?, icon?)
confirmAction({ message, onAccept, header?, icon?, acceptLabel?, rejectLabel?, acceptClass? })

const { confirmDelete, confirmAction } = useConfirm();

confirmDelete(() => {
    console.log('Delete accepted');
});

confirmAction({
    message: 'Publish this record now?',
    acceptLabel: 'Publish',
    onAccept: () => console.log('Confirmed'),
});

useDialog()

Global dialog manager used together with @lvntr/components/ui/AppDialog.vue.

open(component, props?, header?, options?)
openAsync(component, url, header?, options?, baseProps?)
close()

If refreshKey is provided, onSuccess and onCancel callbacks are injected automatically.

useCan()

Reads permission and role data from Inertia shared props.

can(permission)
canAny(permissions)
hasRole(role)

useAdminMenu()

Builds the admin sidebar menu and filters items by permission.

useUrlTab()

Keeps a tab selection in sync with a query string key such as ?tab=security.

useRefreshBus()

Simple global refresh bus for components such as DataTable.

const bus = useRefreshBus();

bus.on('users-table', () => fetchData());
bus.refresh('users-table');

UI state helpers

useSidebar()

Handles desktop collapse state and mobile drawer state for the admin sidebar.

useDarkMode()

Persists dark mode in local storage and toggles the .dark class on <html>.

usePageLoading()

Tracks Inertia navigation state using inertia:start and inertia:finish browser events.

useFlash()

Returns reactive flash data from Inertia shared props.

In this project, flash messages are displayed in AdminLayout.vue, not inside the composable itself.

Enum and definition helpers

useEnum()

Reads enum data shared from the backend through Inertia.

list(key)
options(key)
find(key, value)

useDefinition()

Loads database-backed definitions from the /definitions endpoint and caches them reactively.

load(keys)
loadAll()
list(key)
options(key)
find(key, value)
clearCache()

Use useEnum() for PHP enum data and useDefinition() for records coming from the definitions service.