nexa-runtime 0.7.4 → 0.7.5

package/dist/directives/currency.d.ts

@@ -0,0 +1,7 @@
+import { type Signal } from 'nexa-reactivity';
+export interface CurrencyOptions {
+    locale?: string;
+    currency?: string;
+    decimals?: number;
+}
+export declare function vCurrency(el: HTMLInputElement, signal: Signal<number>, options?: CurrencyOptions): () => void;

package/dist/directives/currency.js

@@ -0,0 +1,65 @@
+import { effect } from 'nexa-reactivity';
+function getFormatter(options) {
+    const locale = options?.locale ?? 'en-US';
+    const currency = options?.currency ?? 'USD';
+    const decimals = options?.decimals ?? 2;
+    const formatter = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+    });
+    const parts = formatter.formatToParts(12345.67);
+    const decimalSep = parts.find(p => p.type === 'decimal')?.value ?? '.';
+    const groupSep = parts.find(p => p.type === 'group')?.value ?? ',';
+    const formatted = formatter.format(12345.67);
+    const digitStart = formatted.search(/\d/);
+    const rev = formatted.split('').reverse().join('');
+    const digitEnd = formatted.length - rev.search(/\d/);
+    const prefix = formatted.slice(0, digitStart);
+    const suffix = formatted.slice(digitEnd);
+    return {
+        format: (n) => formatter.format(n),
+        parse: (s) => {
+            let cleaned = s;
+            if (prefix && cleaned.startsWith(prefix))
+                cleaned = cleaned.slice(prefix.length);
+            if (suffix && cleaned.endsWith(suffix))
+                cleaned = cleaned.slice(0, -suffix.length);
+            cleaned = cleaned.replace(new RegExp(`\\${groupSep}`, 'g'), '');
+            cleaned = cleaned.replace(decimalSep, '.');
+            cleaned = cleaned.replace(/[^\d.-]/g, '');
+            const num = parseFloat(cleaned);
+            return isNaN(num) ? 0 : num;
+        },
+    };
+}
+export function vCurrency(el, signal, options) {
+    const fmt = getFormatter(options);
+    const onInput = () => {
+        const num = fmt.parse(el.value);
+        signal.value = num;
+    };
+    const onFocus = () => {
+        el.select();
+    };
+    const onBlur = () => {
+        el.value = fmt.format(signal.value);
+    };
+    el.addEventListener('input', onInput);
+    el.addEventListener('focus', onFocus);
+    el.addEventListener('blur', onBlur);
+    const e = effect(() => {
+        const val = signal.value;
+        if (document.activeElement !== el) {
+            el.value = fmt.format(val);
+        }
+    });
+    el.value = fmt.format(signal.peek());
+    return () => {
+        el.removeEventListener('input', onInput);
+        el.removeEventListener('focus', onFocus);
+        el.removeEventListener('blur', onBlur);
+        e.dispose();
+    };
+}

package/dist/directives/index.d.ts

@@ -2,5 +2,7 @@ import { type Signal } from 'nexa-reactivity';
 import type { VNode } from '../vdom';
 export declare function vIf(condition: boolean, thenVNode: () => VNode | null, elseVNode?: () => VNode | null): VNode | null;
 export declare function vFor<T>(items: T[], render: (item: T, index: number) => VNode | null): (VNode | null)[];
+export { vCurrency } from './currency';
+export type { CurrencyOptions } from './currency';
 export declare function vShow(el: HTMLElement, signal: Signal<boolean>): () => void;
 export declare function vModel(el: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, signal: Signal<string>): () => void;

package/dist/directives/index.js

@@ -5,6 +5,7 @@ export function vIf(condition, thenVNode, elseVNode) {
 export function vFor(items, render) {
     return items.map((item, index) => render(item, index));
 }
+export { vCurrency } from './currency';
 export function vShow(el, signal) {
     const e = effect(() => {
         el.style.display = signal.value ? '' : 'none';

package/dist/vdom/dom.js

@@ -1,4 +1,5 @@
 import { effect } from 'nexa-reactivity';
+import { vCurrency as _vCurrency } from '../directives/currency';
 function normalizeClassValue(value) {
     if (!value)
         return '';
@@ -80,6 +81,17 @@ export const domOptions = {
                 delete el._vShowEffect;
             }
         }
+        else if (key === 'vCurrency') {
+            if (el._vCurrencyCleanup) {
+                el._vCurrencyCleanup();
+            }
+            if (nextValue) {
+                el._vCurrencyCleanup = _vCurrency(el, nextValue);
+            }
+            else {
+                delete el._vCurrencyCleanup;
+            }
+        }
         else if (key === 'checked') {
             el.checked = !!nextValue;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexa-runtime",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -13,7 +13,7 @@
     }
   },
   "dependencies": {
-    "nexa-reactivity": "0.7.4"
+    "nexa-reactivity": "0.7.5"
   },
   "files": [
     "dist"