NXDOM

Nxdom Framework

Nusantara eXtreme Development Object Model — dokumentasi resmi

NX.Field — NexaField

Komponen inline editing: elemen tampilan (biasanya <span>) diklik, diganti sementara dengan input yang sesuai, divalidasi, lalu nilai baru dikirim lewat callback onSave. Butuh nxdom.js / NX sudah termuat.

1. Cara memakai (minimal)

Setelah markup ada di DOM, buat instance, pasang callback, lalu initElements().

const field = new NX.Field(); field.onSaveCallback((id, newValue, element, type, fieldName) => { // id → element.id // newValue → string nilai tersimpan // element → node .editable asli // type → atribut type (mis. "text", "select") // fieldName → atribut name console.log({ id, newValue, type, fieldName }); }); field.initElements(); // default: selector ".editable" field.initElements(".my-inline-field"); // selector custom

2. Markup HTML

  • Class cocok dengan selector initElements (default: editable).
  • id disarankan unik (dipakai di callback).
  • name opsional → fieldName di callback.
  • type menentukan kontrol saat edit; default text.
  • Isi teks = nilai tampilan awal (kecuali tags / tags-input bisa pakai data-tags).
<span class="editable" id="user_email" name="email" type="email" label="Email" icon="email" >user@example.com</span>

Label & ikon (opsional)

Atribut label dan/atau icon (nama Material Symbols) membungkus tampilan dalam div.nexa-display-container (ikon + label + span .editable). Font ikon harus sudah dimuat.

3. Tipe field (type="...")

type Perilaku ringkas
text <input type="text"> (default)
number, email, url, tel, date, time, password, … <input> dengan type yang sama
textarea <textarea>
select <select>; opsi dari data-options (pemisah |)
tags Multi-select; opsi dari data-options; nilai string koma; tampilan chip
tags-input Input teks, tag dipisah koma; chip di tampilan

Untuk select dan tags: jika tersedia window.NX.initSelect2 dan jQuery, Select2 diinisialisasi pada kontrol tersebut.

Contoh select

<span class="editable" id="f_kota" name="kota" type="select" label="Kota" data-options="Jakarta|Bandung|Surabaya|Medan" >Bandung</span>

Contoh tags

<span class="editable" id="f_skills" name="skills" type="tags" label="Skill" data-options="JavaScript|TypeScript|PHP|Vue" data-tags="JavaScript, TypeScript" ></span>

Contoh tags-input

<span class="editable" id="f_labels" name="labels" type="tags-input" data-tags="urgent, follow-up" data-min-tags="1" data-max-tags="6" ></span>

4. Validasi (atribut pada .editable)

Berlaku sebelum logika per-tipe:

Atribut Fungsi
required Tidak boleh kosong
data-min-length / data-max-length Panjang string
data-pattern Regex (string untuk RegExp)
data-pattern-message Pesan jika pola gagal
  • number: data-min, data-max
  • date: data-min-date, data-max-date (YYYY-MM-DD)
  • select: nilai harus ada di data-options jika opsi tidak kosong
  • tags: data-min-tags, data-max-tags; jika ada data-options, setiap tag harus dalam opsi
  • tags-input: data-min-tags, data-max-tags, data-min-tag-length, data-max-tag-length
<span class="editable" id="f_user" name="username" type="text" required data-min-length="3" data-max-length="20" >user_demo</span>

5. Status non-edit

Atribut disabled atau readonly pada elemen: tidak masuk mode edit; gaya dan title disesuaikan.

field.setElementDisabled("f_user", true); field.setElementReadonly("f_user", true);

setElementDisabled / setElementReadonly memperbarui tampilan; listener klik dari initElements tidak dihapus/ditambah ulang otomatis — setelah render ulang DOM, panggil initElements lagi pada container yang baru.

6. Checkbox & radio

Tidak didukung untuk inline edit: editText mengabaikan type="checkbox" dan type="radio". Untuk boolean, gunakan misalnya select dengan data-options="Ya|Tidak" atau text dengan nilai true / false. Untuk checkbox/radio sungguhan di halaman, pakai NX.Checkable.

7. API ringkas (instance)

Metode Keterangan
onSaveCallback(fn) fn(id, newValue, element, type, fieldName) setelah simpan sukses dan validasi lolos
initElements(selector?) Mendaftarkan perilaku; default ".editable"
editText(element) Buka edit manual untuk satu node
saveCurrentEdit() Save sesi aktif (jika ada)
setElementDisabled(id, disabled?) Set disabled + gaya
setElementReadonly(id, readonly?) Set readonly + gaya

Alias modul: new NexaField() jika mengimpor kelas secara langsung.

8. Demo di proyek

Contoh lengkap banyak .editable: templates/field.js (route sesuai App.js Anda).

const field = new NX.Field(); field.onSaveCallback((variable, newValue, element, type, fieldName) => { console.log("[Field save]", { id: variable, fieldName, type, newValue, element }); }); field.initElements();

9. Ringkasan alur

  1. Render HTML dengan .editable, id, type, dan atribut validasi/opsi.
  2. new NX.Field() → onSaveCallback(...) → initElements().
  3. Klik nilai → kontrol muncul → blur / Enter / perilaku per tipe menyelesaikan edit.
  4. Jika validasi lolos, tampilan kembali dan callback onSave jalan dengan nilai baru.

Berkas implementasi

assets/modules/Dom/NexaField.js — diekspor lewat bundel nxdom.js sebagai NX.Field.