@gemafajarramadhan/dynamic-ui 1.2.17 → 1.2.19

package/README.md

@@ -86,34 +86,43 @@ Library menggunakan sistem konfigurasi terpusat via `setApiConfig()` (atau via V
 
 ### Konfigurasi API di Vue 3
 
-Cara paling direkomendasikan: lewatkan config saat `app.use()`.
+Cara paling direkomendasikan: lewatkan config saat `app.use()`, atau gunakan `setApiConfig` secara langsung. Hal ini **sangat penting** agar request API dari komponen (seperti `DCodeAutoComplete`) mem-bypass native `fetch` bawaan dan menggunakan instance HTTP (seperti Axios) milik project host Anda. Dengan begitu, request otomatis melewati interceptor (untuk inject token) dan mengarah ke base URL yang tepat saat di production.
 
 ```js
 // main.js
 import { createApp } from 'vue'
 import App from './App.vue'
-import DynamicUI from '@gemafajarramadhan/dynamic-ui'
+import DynamicUI, { setApiConfig } from '@gemafajarramadhan/dynamic-ui'
 import '@gemafajarramadhan/dynamic-ui/style.css'
 
+// Contoh import instance Axios / useApi dari host project Anda
+import axiosInstance from './plugins/axios' 
+// import { useApi } from './composables/useApi' 
+
 const app = createApp(App)
 
-app.use(DynamicUI, {
-  // ✅ Base URL API dari env HOST project
+// OPSI 1: Konfigurasi memanggil fungsi (Bisa dipanggil di luar instalasi plugin)
+setApiConfig({
+  // WAJIB: Bypass fetch bawaan, gunakan axios dari project host
+  apiClient: async (url, method, data) => {
+    return axiosInstance({ url, method, data })
+    /* ATAU MENGGUNAKAN useApi bawaan project host
+    const { apiUrl } = useApi()
+    return apiUrl(url, method || 'GET', data, { disableGlobalLoading: true })
+    */
+  },
+  
+  // Base URL API dari env HOST project
   apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
-
-  // ✅ Token auth terkini (dipanggil setiap request)
+  
+  // (Opsional jika apiClient sudah memiliki interceptor token)
   getAuthToken: () => localStorage.getItem('access_token'),
+})
 
-  // ✅ Atau gunakan custom headers penuh (override Authorization)
-  // getHeaders: () => ({
-  //   Authorization: `Bearer ${store.getters.token}`,
-  //   'X-App-ID': 'my-app',
-  // }),
-
-  // ✅ Callback ketika response 401 (Unauthorized)
-  onUnauthorized: () => {
-    router.push('/login')
-  },
+// OPSI 2: Lewatkan pada saat app.use (Berlaku jika tidak menggunakan setApiConfig di atas)
+app.use(DynamicUI, {
+  apiClient: async (url, method, data) => axiosInstance({ url, method, data }),
+  apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
 })
 
 app.mount('#app')