@mundogamernetwork/shared-ui 1.8.13 → 1.8.14

package/components/MediaKit/MgMoneyInput.vue

@@ -0,0 +1,67 @@
+<template>
+	<input
+		:id="id"
+		type="text"
+		inputmode="numeric"
+		autocomplete="off"
+		:value="display"
+		:placeholder="placeholder"
+		:required="required"
+		class="mg-money-input"
+		@input="onInput"
+		@change="emit('change')"
+	/>
+</template>
+
+<script setup lang="ts">
+// Cents-based currency mask: every keystroke keeps only the digits typed so
+// far and rebuilds the formatted string from the right (like a POS/bank
+// amount field), so the caret always lands at the end. modelValue stays a
+// plain decimal number (e.g. 19.99) or null for "unset" — matching what the
+// rate-card/bundle forms already send to the API, so this is a drop-in
+// replacement for a plain <input type="number"> without touching save logic.
+const props = defineProps<{
+	modelValue: number | string | null;
+	/** ISO currency code (USD/BRL/EUR/...) — drives which locale's grouping/decimal marks are used. */
+	currency: string;
+	placeholder?: string;
+	id?: string;
+	required?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: number | null): void;
+	(e: 'change'): void;
+}>();
+
+const { formatterFor } = useCurrencyFormat();
+
+const numericValue = computed(() => {
+	const n = Number(props.modelValue);
+	return props.modelValue !== null && props.modelValue !== '' && Number.isFinite(n) ? n : null;
+});
+
+const display = computed(() => (numericValue.value == null ? '' : formatterFor(props.currency).format(numericValue.value)));
+
+function onInput(event: Event) {
+	const digits = (event.target as HTMLInputElement).value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
+	emit('update:modelValue', digits === '' ? null : Number(digits) / 100);
+}
+</script>
+
+<style scoped>
+.mg-money-input {
+	width: 100%;
+	background: #272930;
+	border: 1px solid #333;
+	color: #fff;
+	padding: 8px;
+	font-size: 13px;
+	outline: none;
+	font-variant-numeric: tabular-nums;
+}
+
+.mg-money-input:focus {
+	border-color: #fdb215;
+}
+</style>

package/components/MediaKit/MgRateCardBundleEditor.vue

@@ -77,7 +77,7 @@
 				</div>
 				<div class="form-group">
 					<label>{{ $t("media_kit.bundles.bundle_price") }}</label>
-					<input v-model="form.bundle_price" type="number" step="0.01" min="0" />
+					<MgMoneyInput v-model="form.bundle_price" :currency="form.currency" />
 				</div>
 				<div class="form-group">
 					<label>{{ $t("media_kit.bundles.currency") }}</label>
@@ -318,9 +318,7 @@ function getBundleDiscount(bundle: Bundle): number {
 	return Math.round(((bundle.original_price - bundle.bundle_price) / bundle.original_price) * 100);
 }
 
-const formatPrice = (value: string, currency = 'USD') => {
-	return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(Number(value));
-};
+const { formatMoney: formatPrice } = useCurrencyFormat();
 
 function openNewForm() {
 	form.value = { ...defaultForm, rate_card_ids: [], quantities: {} };

package/components/MediaKit/MgRateCardEditor.vue

@@ -36,12 +36,12 @@
 			<div class="form-row">
 				<div class="form-group">
 					<label>{{ $t("media_kit.editor.price_min") }}</label>
-					<input v-model="form.price_min" type="number" step="0.01" min="0" :class="{ 'input-error': rateCardErrors.price_min }" @input="delete rateCardErrors.price_min" required />
+					<MgMoneyInput v-model="form.price_min" :currency="form.currency" :class="{ 'input-error': rateCardErrors.price_min }" required @change="delete rateCardErrors.price_min" />
 					<span v-if="rateCardErrors.price_min" class="field-error">{{ $t('media_kit.editor.error_required') }}</span>
 				</div>
 				<div class="form-group">
 					<label>{{ $t("media_kit.editor.price_max") }}</label>
-					<input v-model="form.price_max" type="number" step="0.01" min="0" />
+					<MgMoneyInput v-model="form.price_max" :currency="form.currency" />
 				</div>
 				<div class="form-group">
 					<label>{{ $t("media_kit.editor.currency") }}</label>
@@ -325,15 +325,15 @@ const removeCard = async (id: number) => {
 	}
 };
 
+const { formatMoney } = useCurrencyFormat();
+
 const formatPrice = (min: string, max?: string, currency = 'USD') => {
-	const fmt = (v: string) => new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(Number(v));
-	if (max && Number(max) > Number(min)) return `${fmt(min)} - ${fmt(max)}`;
-	return fmt(min);
+	if (max && Number(max) > Number(min)) return `${formatMoney(min, currency)} - ${formatMoney(max, currency)}`;
+	return formatMoney(min, currency);
 };
 
 // --- MGN fee preview -------------------------------------------------------
-const fmtMoney = (v: number) =>
-	new Intl.NumberFormat('en-US', { style: 'currency', currency: form.value.currency || 'USD' }).format(v);
+const fmtMoney = (v: number) => formatMoney(v, form.value.currency || 'USD');
 
 const netOf = (v: string): number | null => {
 	const n = Number(v);

package/composables/useCurrencyFormat.ts

@@ -0,0 +1,31 @@
+// Fixed locale per currency code (not the viewer's own UI locale) — a BRL/USD/EUR
+// price should always format with that currency's own grouping/decimal
+// conventions, regardless of whether the dashboard is being browsed in
+// pt-BR/en/es/de/ro. Same convention already proven in ideia-bosta's MoneyInput.
+const CURRENCY_LOCALE: Record<string, string> = {
+	EUR: 'de-DE',
+	USD: 'en-US',
+	BRL: 'pt-BR',
+};
+
+export function useCurrencyFormat() {
+	function formatterFor(currency: string) {
+		return new Intl.NumberFormat(CURRENCY_LOCALE[currency] ?? 'en-US', {
+			style: 'currency',
+			currency: currency || 'USD',
+		});
+	}
+
+	function formatMoney(value: number | string | null | undefined, currency = 'USD'): string {
+		const n = Number(value);
+		if (value == null || value === '' || !Number.isFinite(n)) return '';
+		try {
+			return formatterFor(currency).format(n);
+		} catch {
+			// Unknown/invalid ISO currency code — fall back rather than throw.
+			return `${currency} ${n.toFixed(2)}`;
+		}
+	}
+
+	return { formatMoney, formatterFor, CURRENCY_LOCALE };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.8.13",
+  "version": "1.8.14",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",