@gemafajarramadhan/dynamic-ui 1.0.0 → 1.0.1

package/README.md

@@ -1,164 +1,925 @@
-# Micro Dynamic UI
+# @gemafajarramadhan/dynamic-ui
 
-Library Microfrontend ringan dan framework-agnostic untuk membuat Dynamic Form dan DataTable menggunakan Vue 3 Web Components.
+Library **Vue 3** component yang bisa digunakan di berbagai framework (Vue, React, Angular, Svelte, dll.) untuk membuat **Dynamic Form** dan **DataTable** otomatis dari JSON schema, sekaligus menyediakan komponen UI yang kaya fitur.
+
+---
+
+## Daftar Isi
+
+- [Fitur](#fitur)
+- [Instalasi](#instalasi)
+- [Komponen Base (Vue Components)](#komponen-base-vue-components)
+  - [Daftar Komponen](#daftar-komponen)
+  - [Penggunaan di Vue 3 (Import Per Komponen)](#penggunaan-di-vue-3-import-per-komponen)
+  - [Penggunaan di Vue 3 (Global Plugin)](#penggunaan-di-vue-3-global-plugin)
+  - [Penggunaan di Nuxt 3](#penggunaan-di-nuxt-3-vue-components)
+- [Web Components (Framework Agnostic)](#web-components-framework-agnostic)
+  - [API Referensi Web Components](#api-referensi-web-components)
+  - [Logic Registry API](#logic-registry-api)
+- [Penggunaan di Berbagai Framework](#penggunaan-di-berbagai-framework)
+  - [Vanilla HTML / JavaScript](#1-vanilla-html--javascript)
+  - [Vue 3 (Web Components)](#2-vue-3-web-components)
+  - [React](#3-react)
+  - [Next.js (App Router)](#4-nextjs-app-router)
+  - [Angular](#5-angular)
+  - [Nuxt 3 (Web Components)](#6-nuxt-3-web-components)
+- [Custom Logic Registry](#custom-logic-registry)
+- [TypeScript Support](#typescript-support)
+
+---
 
 ## Fitur
 
-- **AutoLayoutForm**: Membuat form otomatis dari JSON schema.
-- **AutoLayoutDatatable**: Membuat tabel dengan pagination dan action dari JSON.
-- **Zero Dependencies** (runtime): Vue dan style sudah di-bundle.
-- **Components Included**: Menggunakan komponen base (`TextField`, `Button`) yang sudah tertanam.
+- 🧩 **Web Components** – Dapat digunakan di framework **apapun** (React, Vue, Angular, Svelte, dll.) atau di HTML biasa.
+- 📋 **AutoLayoutForm** – Generate form otomatis dari JSON schema dengan validasi dan konfigurasi fleksibel.
+- 📊 **AutoLayoutDatatable** – Generate tabel dengan pagination, sorting, filtering, dan action button dari JSON.
+- 🔌 **Logic Registry** – Daftarkan custom business logic dari aplikasi host tanpa perlu memodifikasi library.
+- 🎨 **Style Bundled** – CSS sudah ter-bundle, cukup import satu file style.
+- 🌐 **i18n Ready** – Mendukung internasionalisasi (vue-i18n).
+
+---
 
 ## Instalasi
 
 ```bash
-npm install micro-dynamic-ui
+# npm
+npm install @gemafajarramadhan/dynamic-ui
+
+# yarn
+yarn add @gemafajarramadhan/dynamic-ui
+
+# pnpm
+pnpm add @gemafajarramadhan/dynamic-ui
 ```
 
-## Cara Penggunaan
+---
+
+## Komponen Base (Vue Components)
+
+Selain Web Components, library ini juga menyediakan **27 komponen Vue** yang bisa digunakan langsung di aplikasi Vue 3, Nuxt 3, dan framework apapun yang mendukung Vue.
+
+### Daftar Komponen
+
+| Komponen | Deskripsi |
+|---|---|
+| `DCodeTextField` | Input text dengan validasi, text case, filter karakter |
+| `DCodeTextarea` | Textarea dengan auto-resize dan validasi |
+| `DCodeButton` | Tombol dengan variant, warna kustom, tooltip, dan animasi |
+| `DCodeCard` | Kartu container dengan styling bawaan |
+| `DCodeChekbox` | Checkbox dengan label |
+| `DCodeSwitch` | Toggle switch |
+| `DCodeRadioCustom` | Radio button dengan opsi kustom |
+| `DCodeLabel` | Label untuk form |
+| `DCodeAutoComplete` | Input autocomplete dengan pencarian |
+| `DCodeMultiSelect` | Dropdown multi-pilihan |
+| `DCodeDatePicker` | Date picker kalender |
+| `DCodeDateRangePicker` | Date range picker |
+| `DCodeCurrencyField` | Input nilai mata uang |
+| `DCodeOtpInput` | Input OTP digit-per-digit |
+| `DCodeFileField` | Input file dengan preview |
+| `DCodeImageField` | Input gambar dengan preview |
+| `DCodeDropzone` | Drag-and-drop upload area |
+| `DCodeUploadFile` | Upload file terintegrasi |
+| `DCodeFileResult` | Tampilan hasil file yang diupload |
+| `DCodeImageResult` | Tampilan hasil gambar yang diupload |
+| `DCodeImageCropperDialog` | Dialog crop gambar |
+| `DCodeDialog` | Modal dialog |
+| `DCodeDialogCloseBtn` | Tombol tutup untuk dialog |
+| `DCodeIconDropdown` | Dropdown ikon |
+| `DCodeProgressBar` | Progress bar loading |
+| `DCodeTimelineWithIcons` | Timeline dengan ikon |
+| `DCodeWizard` | Wizard / stepper multi-langkah |
 
-### 1. Import JavaScript dan Style
+---
 
-Di entry point aplikasi Anda (React `main.jsx`, Vue `main.js`, atau Angular):
+### Penggunaan di Vue 3 (Import Per Komponen)
 
-```javascript
-import "micro-dynamic-ui";
-import "micro-dynamic-ui/style.css";
+Cara paling ringan: import hanya komponen yang diperlukan.
+
+```bash
+npm install @gemafajarramadhan/dynamic-ui
 ```
 
-### 2. Penggunaan di HTML / Javascript Biasa
+```vue
+<!-- MyForm.vue -->
+<script setup>
+import { DCodeTextField, DCodeButton } from '@gemafajarramadhan/dynamic-ui'
+import '@gemafajarramadhan/dynamic-ui/style.css'
+</script>
 
-#### Dynamic Form
+<template>
+  <form>
+    <DCodeTextField
+      v-model="form.name"
+      label="Nama Lengkap"
+      placeholder="Masukkan nama..."
+      :clearable="true"
+    />
+
+    <DCodeTextField
+      v-model="form.email"
+      label="Email"
+      valueType="email"
+      placeholder="nama@email.com"
+    />
+
+    <DCodeButton
+      text="Simpan"
+      variant="default"
+      bgColor="primary"
+      type="submit"
+    />
+  </form>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+
+const form = reactive({ name: '', email: '' })
+</script>
+```
 
-```html
-<micro-dynamic-form id="myForm"></micro-dynamic-form>
+---
 
-<script>
-  const form = document.querySelector("#myForm");
+### Penggunaan di Vue 3 (Global Plugin)
 
-  // Set config property secara langsung
-  form.config = {
-    title: "Registrasi User",
-    sections: [
-      {
-        title: "Info Pribadi",
-        fields: [
-          {
-            key: "name",
-            label: "Nama Lengkap",
-            model: "fullName",
-            component: "DCodeTextField",
-          },
+Install semua komponen sekaligus agar bisa digunakan di mana saja tanpa import per file.
+
+```js
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import DynamicUI from '@gemafajarramadhan/dynamic-ui'
+import '@gemafajarramadhan/dynamic-ui/style.css'
+
+const app = createApp(App)
+app.use(DynamicUI)  // Mendaftarkan semua DCode* komponen secara global
+app.mount('#app')
+```
+
+Setelah itu, semua komponen bisa digunakan **tanpa import** di setiap file:
+
+```vue
+<!-- Tidak perlu import lagi! -->
+<template>
+  <DCodeTextField v-model="name" label="Nama" />
+  <DCodeButton text="Submit" />
+  <DCodeDatePicker v-model="date" label="Tanggal" />
+</template>
+```
+
+---
+
+### Penggunaan di Nuxt 3 (Vue Components)
+
+Buat plugin Nuxt untuk mendaftarkan semua komponen secara global:
+
+```ts
+// plugins/dynamic-ui.ts
+import DynamicUI from '@gemafajarramadhan/dynamic-ui'
+import '@gemafajarramadhan/dynamic-ui/style.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(DynamicUI)
+})
+```
+
+Kemudian gunakan di page atau component manapun:
+
+```vue
+<!-- pages/index.vue -->
+<template>
+  <div>
+    <DCodeTextField v-model="search" label="Pencarian" :clearable="true" />
+    <DCodeButton text="Cari" variant="default" />
+  </div>
+</template>
+```
+
+---
+
+## Web Components (Framework Agnostic)
+
+Untuk digunakan di **React, Angular, Svelte**, atau framework lainnya, gunakan mode Web Components.
+
+---
+
+## API Referensi Web Components
+
+### Web Components
+
+Setelah library di-import, dua custom element berikut akan terdaftar secara global:
+
+| Custom Element            | Deskripsi                                                   |
+| ------------------------- | ----------------------------------------------------------- |
+| `<micro-dynamic-form>`    | Render form dinamis berdasarkan JSON config `config` prop.  |
+| `<micro-dynamic-datatable>` | Render tabel dinamis berdasarkan JSON config `config` prop. |
+
+#### Properties (set via JavaScript/DOM)
+
+Karena Web Components menerima objek JavaScript (bukan string HTML attribute), set properti ini **secara imperatif via DOM** atau `ref`:
+
+| Property  | Tipe     | Deskripsi                               |
+| --------- | -------- | --------------------------------------- |
+| `config`  | `Object` | Konfigurasi form / tabel dalam bentuk JSON. |
+
+#### Events
+
+| Event    | `event.detail`     | Deskripsi                                   |
+| -------- | ------------------ | ------------------------------------------- |
+| `submit` | `Object` (payload) | Dipanggil saat form di-submit.              |
+| `action` | `Object` (payload) | Dipanggil saat action button datatable diklik. |
+
+---
+
+### Logic Registry API
+
+Digunakan untuk menyuntikkan business logic dari aplikasi host ke dalam komponen.
+
+```js
+import {
+  registerLogic,
+  unregisterLogic,
+  getLogicModule
+} from '@gemafajarramadhan/dynamic-ui'
+```
+
+| Fungsi                        | Deskripsi                                                   |
+| ----------------------------- | ----------------------------------------------------------- |
+| `registerLogic(code, module)` | Daftarkan logic module untuk layout code tertentu.          |
+| `unregisterLogic(code)`       | Hapus logic module dari registry.                           |
+| `getLogicModule(code)`        | Ambil logic module berdasarkan layout code.                 |
+
+---
+
+## Cara Penggunaan
+
+---
+
+### 1. Vanilla HTML / JavaScript
+
+Cara paling sederhana. Import library dari CDN atau bundler, lalu gunakan custom element di HTML.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Dynamic UI</title>
+    <!-- Import style -->
+    <link rel="stylesheet" href="./node_modules/@gemafajarramadhan/dynamic-ui/dist/style.css" />
+  </head>
+  <body>
+
+    <!-- Dynamic Form -->
+    <micro-dynamic-form id="myForm"></micro-dynamic-form>
+
+    <!-- Dynamic DataTable -->
+    <micro-dynamic-datatable id="myTable"></micro-dynamic-datatable>
+
+    <!-- Import library (registrasi Web Components otomatis) -->
+    <script type="module">
+      import '@gemafajarramadhan/dynamic-ui';
+
+      // --- Setup Form ---
+      const form = document.querySelector('#myForm');
+      form.config = {
+        title: 'Registrasi User',
+        sections: [
           {
-            key: "email",
-            label: "Email",
-            model: "email",
-            component: "DCodeTextField",
-            props: { type: "email" },
+            title: 'Info Pribadi',
+            fields: [
+              {
+                key: 'name',
+                label: 'Nama Lengkap',
+                model: 'fullName',
+                component: 'DCodeTextField',
+              },
+              {
+                key: 'email',
+                label: 'Email',
+                model: 'email',
+                component: 'DCodeTextField',
+                props: { type: 'email' },
+              },
+            ],
           },
         ],
+        actions: [{ key: 'submit', label: 'Daftar', component: 'DCodeButton' }],
+      };
+
+      form.addEventListener('submit', (e) => {
+        console.log('Data Form:', e.detail);
+      });
+
+      // --- Setup DataTable ---
+      const table = document.querySelector('#myTable');
+      table.config = {
+        titleID: 'Daftar User',
+        headers: [
+          { text: 'Nama', value: 'name' },
+          { text: 'Email', value: 'email' },
+        ],
+      };
+
+      table.addEventListener('action', (e) => {
+        console.log('Action:', e.detail);
+      });
+    </script>
+
+  </body>
+</html>
+```
+
+---
+
+### 2. Vue 3
+
+Di Vue 3, Web Components bisa dipakai langsung seperti HTML element biasa. Gunakan `ref` untuk set properti objek.
+
+#### Konfigurasi Vite
+
+Agar Vue tidak menganggap `micro-dynamic-*` sebagai Vue component yang belum terdaftar, tambahkan `isCustomElement` di `vite.config.js`:
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          // Semua element yang dimulai dengan 'micro-' dianggap custom element
+          isCustomElement: (tag) => tag.startsWith('micro-'),
+        },
       },
-    ],
-    actions: [{ key: "submit", label: "Daftar", component: "DCodeButton" }],
-  };
+    }),
+  ],
+})
+```
 
-  // Dengarkan event submit
-  form.addEventListener("submit", (e) => {
-    console.log("Data Form:", e.detail);
-  });
-</script>
+#### Entry Point (`main.js`)
+
+```js
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// Import library (registrasi Web Components)
+import '@gemafajarramadhan/dynamic-ui'
+import '@gemafajarramadhan/dynamic-ui/style.css'
+
+createApp(App).mount('#app')
 ```
 
-#### Dynamic DataTable
+#### Komponen Vue (`MyForm.vue`)
 
-```html
-<micro-dynamic-datatable id="myTable"></micro-dynamic-datatable>
-
-<script>
-  const table = document.querySelector("#myTable");
-  table.config = {
-    titleID: "Daftar User",
-    headers: [
-      { text: "Nama", value: "name" },
-      { text: "Email", value: "email" },
-    ],
-  };
+```vue
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const formRef = ref(null)
+
+const formConfig = {
+  title: 'Form User',
+  sections: [
+    {
+      fields: [
+        {
+          key: 'username',
+          label: 'Username',
+          model: 'username',
+          component: 'DCodeTextField',
+        },
+      ],
+    },
+  ],
+  actions: [{ key: 'save', label: 'Simpan', component: 'DCodeButton' }],
+}
+
+onMounted(() => {
+  if (formRef.value) {
+    // Set config via DOM property (bukan attribute)
+    formRef.value.config = formConfig
+
+    formRef.value.addEventListener('submit', (e) => {
+      console.log('Submitted:', e.detail)
+    })
+  }
+})
 </script>
+
+<template>
+  <micro-dynamic-form ref="formRef" />
+</template>
 ```
 
 ---
 
-### 3. Penggunaan di React
+### 3. React
+
+Di React, gunakan `useRef` dan `useEffect` untuk set properti DOM secara imperatif karena React tidak meneruskan objek langsung ke Web Component attributes.
+
+#### Entry Point (`main.jsx`)
 
-Di React, karena sifat standar Web Components, kita tidak bisa mengoper objek JSON (seperti `config`) langsung melalui attribute JSX (karena akan terkonversi menjadi string `"[object Object]"`).
+```jsx
+// main.jsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+// Import library (registrasi Web Components)
+import '@gemafajarramadhan/dynamic-ui'
+import '@gemafajarramadhan/dynamic-ui/style.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)
+```
 
-Solusinya adalah menggunakan **`useRef`** untuk men-set properti `config` secara imperatif.
+#### Dynamic Form Component
 
 ```jsx
-import React, { useEffect, useRef } from "react";
-import "micro-dynamic-ui"; // Registrasi Web Components
-import "micro-dynamic-ui/style.css"; // Load CSS
+// components/DynamicForm.jsx
+import React, { useEffect, useRef } from 'react'
 
-const FormConfig = {
-  title: "Form via React",
+const formConfig = {
+  title: 'Form via React',
   sections: [
     {
       fields: [
         {
-          key: "username",
-          label: "Username",
-          model: "username",
-          component: "DCodeTextField",
+          key: 'username',
+          label: 'Username',
+          model: 'username',
+          component: 'DCodeTextField',
+        },
+        {
+          key: 'email',
+          label: 'Email',
+          model: 'email',
+          component: 'DCodeTextField',
+          props: { type: 'email' },
         },
       ],
     },
   ],
-  actions: [{ key: "save", label: "Simpan", component: "DCodeButton" }],
-};
+  actions: [{ key: 'submit', label: 'Kirim', component: 'DCodeButton' }],
+}
 
-export default function ReactForm() {
-  const formRef = useRef(null);
+export default function DynamicForm() {
+  const formRef = useRef(null)
 
   useEffect(() => {
-    const el = formRef.current;
-    if (el) {
-      // 1. Pass Config Object langsung ke property
-      el.config = FormConfig;
-
-      // 2. Event Listener untuk handle output
-      const handleSubmit = (event) => {
-        console.log("Hasil submit:", event.detail);
-      };
+    const el = formRef.current
+    if (!el) return
 
-      el.addEventListener("submit", handleSubmit);
+    // Set config sebagai DOM property
+    el.config = formConfig
 
-      // Cleanup
-      return () => {
-        el.removeEventListener("submit", handleSubmit);
-      };
+    const handleSubmit = (event) => {
+      console.log('Hasil submit:', event.detail)
+    }
+
+    el.addEventListener('submit', handleSubmit)
+
+    // Cleanup listener saat unmount
+    return () => {
+      el.removeEventListener('submit', handleSubmit)
+    }
+  }, [])
+
+  return <micro-dynamic-form ref={formRef}></micro-dynamic-form>
+}
+```
+
+#### Dynamic DataTable Component
+
+```jsx
+// components/DynamicTable.jsx
+import React, { useEffect, useRef } from 'react'
+
+const tableConfig = {
+  titleID: 'Daftar User',
+  headers: [
+    { text: 'Nama', value: 'name' },
+    { text: 'Email', value: 'email' },
+    { text: 'Status', value: 'status' },
+  ],
+}
+
+export default function DynamicTable() {
+  const tableRef = useRef(null)
+
+  useEffect(() => {
+    const el = tableRef.current
+    if (!el) return
+
+    el.config = tableConfig
+
+    const handleAction = (event) => {
+      console.log('Action:', event.detail)
     }
-  }, []);
+
+    el.addEventListener('action', handleAction)
+
+    return () => {
+      el.removeEventListener('action', handleAction)
+    }
+  }, [])
+
+  return <micro-dynamic-datatable ref={tableRef}></micro-dynamic-datatable>
+}
+```
+
+#### TypeScript + React
+
+Tambahkan deklarasi tipe agar JSX tidak mengeluh tentang custom element:
+
+```ts
+// src/types/dynamic-ui.d.ts
+import React from 'react'
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'micro-dynamic-form': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >
+      'micro-dynamic-datatable': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >
+    }
+  }
+}
+```
+
+---
+
+### 4. Next.js (App Router)
+
+Di Next.js dengan App Router, Web Components harus di-import di sisi klien (`'use client'`).
+
+#### Setup di Layout atau Client Component
+
+```tsx
+// components/DynamicForm.tsx
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+// Import hanya di sisi klien
+import('@gemafajarramadhan/dynamic-ui')
+import '@gemafajarramadhan/dynamic-ui/style.css'
+
+const formConfig = {
+  title: 'Form Next.js',
+  sections: [
+    {
+      fields: [
+        {
+          key: 'name',
+          label: 'Nama',
+          model: 'name',
+          component: 'DCodeTextField',
+        },
+      ],
+    },
+  ],
+  actions: [{ key: 'submit', label: 'Submit', component: 'DCodeButton' }],
+}
+
+export default function DynamicFormClient() {
+  const formRef = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const el = formRef.current
+    if (!el) return
+
+    ;(el as any).config = formConfig
+
+    const handleSubmit = (event: Event) => {
+      const customEvent = event as CustomEvent
+      console.log('Submit:', customEvent.detail)
+    }
+
+    el.addEventListener('submit', handleSubmit)
+    return () => el.removeEventListener('submit', handleSubmit)
+  }, [])
 
   return (
-    <div>
-      {/* Gunakan tag custom element */}
-      <micro-dynamic-form ref={formRef}></micro-dynamic-form>
-    </div>
-  );
+    // @ts-ignore – custom element tidak dikenal TypeScript secara default
+    <micro-dynamic-form ref={formRef}></micro-dynamic-form>
+  )
+}
+```
+
+#### Penggunaan di Page
+
+```tsx
+// app/page.tsx
+import DynamicFormClient from '@/components/DynamicForm'
+
+export default function HomePage() {
+  return (
+    <main>
+      <h1>Dynamic Form</h1>
+      <DynamicFormClient />
+    </main>
+  )
+}
+```
+
+> **Catatan:** Gunakan `dynamic()` dari `next/dynamic` dengan `{ ssr: false }` jika terjadi error SSR.
+>
+> ```tsx
+> import dynamic from 'next/dynamic'
+> const DynamicFormClient = dynamic(() => import('@/components/DynamicForm'), { ssr: false })
+> ```
+
+---
+
+### 5. Angular
+
+Di Angular, tambahkan `CUSTOM_ELEMENTS_SCHEMA` agar Angular tidak melempar error pada custom element yang tidak dikenali.
+
+#### `app.module.ts` (Module-based)
+
+```ts
+// app.module.ts
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { AppComponent } from './app.component'
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], // <-- Wajib ditambahkan
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+#### `main.ts`
+
+```ts
+// main.ts
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { AppModule } from './app/app.module'
+
+// Import library (registrasi Web Components)
+import '@gemafajarramadhan/dynamic-ui'
+import '@gemafajarramadhan/dynamic-ui/style.css'
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+```
+
+#### Komponen Angular (`dynamic-form.component.ts`)
+
+```ts
+// dynamic-form.component.ts
+import {
+  Component,
+  OnInit,
+  AfterViewInit,
+  ViewChild,
+  ElementRef,
+} from '@angular/core'
+
+@Component({
+  selector: 'app-dynamic-form',
+  template: `<micro-dynamic-form #formEl></micro-dynamic-form>`,
+})
+export class DynamicFormComponent implements AfterViewInit {
+  @ViewChild('formEl') formRef!: ElementRef
+
+  private formConfig = {
+    title: 'Form Angular',
+    sections: [
+      {
+        fields: [
+          {
+            key: 'username',
+            label: 'Username',
+            model: 'username',
+            component: 'DCodeTextField',
+          },
+        ],
+      },
+    ],
+    actions: [{ key: 'submit', label: 'Simpan', component: 'DCodeButton' }],
+  }
+
+  ngAfterViewInit() {
+    const el = this.formRef.nativeElement
+
+    // Set config via DOM property
+    el.config = this.formConfig
+
+    el.addEventListener('submit', (event: CustomEvent) => {
+      console.log('Submit:', event.detail)
+    })
+  }
+}
+```
+
+#### Angular Standalone (Angular 17+)
+
+```ts
+// app.component.ts
+import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core'
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<micro-dynamic-form #formEl></micro-dynamic-form>`,
+})
+export class AppComponent implements AfterViewInit {
+  @ViewChild('formEl') formRef!: ElementRef
+
+  ngAfterViewInit() {
+    const el = this.formRef.nativeElement
+    el.config = { /* config Anda di sini */ }
+    el.addEventListener('submit', (e: CustomEvent) => console.log(e.detail))
+  }
 }
 ```
 
-#### TypeScript di React ?
+---
+
+### 6. Nuxt 3
+
+Di Nuxt 3, gunakan plugin untuk mendaftarkan Web Components dan tandai sebagai custom element.
+
+#### Plugin (`plugins/dynamic-ui.client.ts`)
+
+Buat file plugin dengan suffix `.client.ts` agar hanya dijalankan di sisi klien (browser):
+
+```ts
+// plugins/dynamic-ui.client.ts
+import '@gemafajarramadhan/dynamic-ui'
+import '@gemafajarramadhan/dynamic-ui/style.css'
+
+export default defineNuxtPlugin(() => {
+  // Web Components sudah terdaftar saat import di atas
+})
+```
 
-Jika Anda menggunakan TypeScript, Anda mungkin perlu mendefinisikan elemen tersebut agar tidak error di JSX:
+#### Konfigurasi Nuxt (`nuxt.config.ts`)
 
 ```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  vue: {
+    compilerOptions: {
+      // Arahkan Nuxt/Vue agar tidak menganggap element ini sebagai Vue component
+      isCustomElement: (tag: string) => tag.startsWith('micro-'),
+    },
+  },
+})
+```
+
+#### Penggunaan di Page atau Component
+
+```vue
+<!-- pages/index.vue -->
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const formRef = ref(null)
+
+const formConfig = {
+  title: 'Form Nuxt',
+  sections: [
+    {
+      fields: [
+        {
+          key: 'name',
+          label: 'Nama',
+          model: 'name',
+          component: 'DCodeTextField',
+        },
+      ],
+    },
+  ],
+  actions: [{ key: 'submit', label: 'Submit', component: 'DCodeButton' }],
+}
+
+onMounted(() => {
+  if (formRef.value) {
+    formRef.value.config = formConfig
+    formRef.value.addEventListener('submit', (e) => {
+      console.log('Submit:', e.detail)
+    })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <h1>Halaman Dynamic Form</h1>
+    <!-- Gunakan ClientOnly agar tidak error saat SSR -->
+    <ClientOnly>
+      <micro-dynamic-form ref="formRef" />
+    </ClientOnly>
+  </div>
+</template>
+```
+
+---
+
+## Custom Logic Registry
+
+Library menyediakan **Logic Registry** agar aplikasi host dapat menyuntikkan business logic ke dalam komponen tanpa memodifikasi library.
+
+### Option A: via `window` (sebelum library dimuat)
+
+```js
+window.__MICRO_LOGIC_REGISTRY__ = {
+  'user-management': {
+    onReady(context) {
+      console.log('Component siap:', context)
+    },
+    handleAction(action, payload) {
+      if (action === 'delete') {
+        // Tampilkan modal konfirmasi
+        return true // intercept action
+      }
+    },
+  },
+}
+```
+
+### Option B: via fungsi `registerLogic` (setelah import library)
+
+```js
+import {
+  registerLogic,
+  unregisterLogic,
+} from '@gemafajarramadhan/dynamic-ui'
+
+registerLogic('user-management', {
+  onReady(context) {
+    console.log('Component siap, context:', context)
+  },
+  handleAction(action, payload) {
+    console.log('Action:', action, 'Payload:', payload)
+  },
+})
+
+// Untuk menghapus logic saat komponen unmount:
+// unregisterLogic('user-management')
+```
+
+### Interface LogicModule
+
+```ts
+interface LogicModule {
+  onReady?: (context: Record<string, any>) => void
+  handleAction?: (action: string, payload: any) => boolean | void
+}
+```
+
+---
+
+## TypeScript Support
+
+Untuk menambahkan type yang benar pada semua framework, buat file deklarasi global:
+
+```ts
+// src/types/dynamic-ui.d.ts
+
+declare namespace DynamicUI {
+  interface LogicModule {
+    onReady?: (context: Record<string, any>) => void
+    handleAction?: (action: string, payload: any) => boolean | void
+  }
+}
+
+// Deklarasi untuk custom element di JSX (React / Next.js)
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      "micro-dynamic-form": any;
-      "micro-dynamic-datatable": any;
+      'micro-dynamic-form': any
+      'micro-dynamic-datatable': any
     }
   }
+
+  // Untuk global window registry
+  interface Window {
+    __MICRO_LOGIC_REGISTRY__?: Record<string, DynamicUI.LogicModule>
+  }
 }
+
+export {}
 ```
+
+---
+
+## Lisensi
+
+MIT © [Gema Fajar Ramadhan](https://github.com/gemafajarramadhan)