kilfx 4.0.1 → 4.0.3

package/README.md

@@ -17,20 +17,25 @@ npm install kilfx
 ## DOM Convention
 
 ```html
-<div class="kilfx" kilfx_int="JM" kilfx_only="JM,US,IN">
+<div class="kilfx" kilfx_int="JMD" kilfx_only="JMD,USD,GBP">
   <select name="kilfx_base"></select>
   <select name="kilfx_to"></select>
   <input type="text" name="fx_rate" readonly />
 </div>
 ```
 
-Required:
+Required in same `.kilfx` block:
 - `select[name="kilfx_base"]`
 - `select[name="kilfx_to"]`
 
 Optional:
 - `input[name="fx_rate"]` (forced readonly and cleared on pair change)
 
+Also supported for Bootstrap-style split layout (different `.kilfx` columns):
+- `base_currency` (alias of base)
+- `display_currency` (alias of to)
+- `exchange_rate` (alias of rate)
+
 ## CDN Usage
 
 ```html
@@ -46,8 +51,8 @@ If you want custom config, add:
 <script>
   KILFX.init({
     flagsPath: "/svg",
-    defaultBase: "JM",
-    defaultTo: "US"
+    defaultBase: "JMD",
+    defaultTo: "USD"
   });
 </script>
 ```
@@ -80,7 +85,7 @@ import "kilfx/dist/kilfx.css";
 import { KilFx } from "kilfx/react";
 
 export default function Page() {
-  return <KilFx flagsPath="/svg" defaultBase="JM" defaultTo="US" />;
+  return <KilFx flagsPath="/svg" defaultBase="JMD" defaultTo="USD" />;
 }
 ```
 
@@ -95,15 +100,16 @@ On every base/to change, `kilfx`:
 
 ```js
 document.addEventListener("kilfx:change", (e) => {
-  const { base, to, rootEl, baseSelectEl, toSelectEl, baseItem, toItem } = e.detail;
+  const { base, to, rootEl, baseSelectEl, toSelectEl, rateInputEl, baseItem, toItem } = e.detail;
 });
 ```
 
 `detail` shape:
-- `base` / `to`: ISO2 code (`"US"`, `"JM"`, etc.)
+- `base` / `to`: currency code (`"USD"`, `"JMD"`, etc.)
 - `rootEl`: current `.kilfx` container
 - `baseSelectEl`, `toSelectEl`: underlying native selects
-- `baseItem`, `toItem`: `{ name, code, dial_code }`
+- `rateInputEl`: resolved rate input in same form/group
+- `baseItem`, `toItem`: `{ code, name, flag_code }`
 
 ## API
 
@@ -116,29 +122,29 @@ init({
   flagsPath: "/svg",
   fileCase: "auto",       // auto | upper | lower
   enableSearch: true,
-  defaultBase: "JM",
-  defaultTo: "JM",
-  initCountry: "JM",      // fallback for both (same idea as kilfx_int)
-  only: "JM,US,IN",       // restrict both dropdowns
-  onlyBase: "JM,US",      // optional base-only restriction
-  onlyTo: "IN,US",        // optional to-only restriction
-  data: null              // custom country data array or null for built-in
+  defaultBase: "JMD",
+  defaultTo: "JMD",
+  initCurrency: "JMD",    // fallback for both (kilfx_int also works)
+  only: "JMD,USD,GBP",    // restrict both dropdowns by currency code
+  onlyBase: "JMD,USD",    // optional base-only restriction
+  onlyTo: "USD,EUR",      // optional to-only restriction
+  data: null              // custom currency data or null for built-in
 });
 ```
 
 ## Attribute Shortcuts (Per `.kilfx`)
 
 Container attributes:
-- `kilfx_int="JM"`: default code for both dropdowns (if specific defaults not set)
-- `kilfx_only="JM,US,IN"`: restrict both dropdowns to selected ISO2 codes
-- `kilfx_base_int="US"` / `kilfx_to_int="IN"`: specific defaults
-- `kilfx_base_only="US,CA"` / `kilfx_to_only="IN,JM"`: specific allowed lists
+- `kilfx_int="JMD"`: default code for both dropdowns (if specific defaults not set)
+- `kilfx_only="JMD,USD,GBP"`: restrict both dropdowns to selected currency codes
+- `kilfx_base_int="USD"` / `kilfx_to_int="JMD"`: specific defaults
+- `kilfx_base_only="USD,CAD"` / `kilfx_to_only="JMD,EUR"`: specific allowed lists
 
 Select-level overrides also supported:
-- `select ... kilfx_int="US"`
-- `select ... kilfx_only="US,JM"`
+- `select ... kilfx_int="USD"`
+- `select ... kilfx_only="USD,JMD"`
 
-If nothing is provided, both dropdowns default to `JM`.
+If nothing is provided, both dropdowns default to `JMD`.
 
 ## Acceptance Example
 
@@ -151,11 +157,11 @@ If nothing is provided, both dropdowns default to `JM`.
 
 <script src="/dist/kilfx.iife.min.js"></script>
 <script>
-  KILFX.init({ flagsPath: "/svg", defaultBase: "JM", defaultTo: "US" });
+  KILFX.init({ flagsPath: "/svg", defaultBase: "JMD", defaultTo: "USD" });
 
   document.addEventListener("kilfx:change", async (e) => {
-    const { base, to, rootEl } = e.detail;
-    const rateInput = rootEl.querySelector('input[name="fx_rate"]');
+    const { base, to, rateInputEl } = e.detail;
+    const rateInput = rateInputEl;
     rateInput.value = "...";
     // const { data } = await axios.get("/api/fx/rate", { params: { base, to } });
     // rateInput.value = data.rate;