Input Currency Directives

v-input-currency

A custom Vue directive that formats input values as currency, automatically handling formatting when focus changes and restricting input to valid numeric characters.

---

Props (Binding Value)

Type	Required	Example	Description
Object	No	N/A	Configuration is handled through modifiers and arguments instead

Bound using v-input-currency[:arg][.modifier] where:

• :arg can be foreign to specify structure type
• .modifier can be euro to specify format type

---

Modifiers

Modifier	Default if omitted	Description
euro	usa	Uses Euro-style formatting (e.g., 1.234,56 €) instead of USA format (e.g., $1,234.56)

---

Arguments

Argument	Default if omitted	Description
foreign	nepali	Uses foreign number structure instead of Nepali structure

---

Slots

N/A (used as a directive, not a component).

---

Emits

None (directives do not emit events).

---

Functions

changeValue(el, bindingValue, format)

• Formats or unformats the input value
• Parameters:
  • el: The input element
  • bindingValue: Configuration object with format and structure properties
  • format: Boolean (default: true) - When true, formats the value; when false, unformats it

onFocus()

• Triggered when the input receives focus
• Unformats the currency value for editing
• Adds event listeners for blur and keydown events

onBlur()

• Triggered when the input loses focus
• Formats the raw numeric value as currency
• Removes event listeners

onKeyDown(e)

• Restricts input to only allow digits, a single decimal point, and control keys
• Prevents invalid characters from being entered

---

Usage

<template>
  <div>
    <div>
      <label for="input1">English (US Decimal)</label>
      <input
        type="text"
        v-input-currency:foreign
        v-input-select
        v-model.number="intValue1"
        id="input1"
      />
      <p>Value: {{ intValue1 }}</p>
    </div>

    <div>
      <label for="input2">Nepali (US Decimal)</label>
      <input
        type="text"
        v-input-currency
        v-input-select
        v-model.number="intValue2"
        id="input2"
      />
      <p>Value: {{ intValue2 }}</p>
    </div>

    <div>
      <label for="input3">English (Euro Decimal)</label>
      <input
        type="text"
        v-input-currency.euro
        v-input-select
        v-model.number="intValue3"
        id="input3"
      />
      <p>Value: {{ intValue3 }}</p>
    </div>

    <div>
      <label for="input4">Nepali (Euro Decimal)</label>
      <input
        type="text"
        v-input-currency:foreign.euro
        v-input-select
        v-model.number="intValue4"
        id="input4"
      />
      <p>Value: {{ intValue4 }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const toggle = ref(false);

const intValue1 = ref(1210034.56);
const intValue2 = ref(7180090.12);
const intValue3 = ref(3400156.78);
const intValue4 = ref(9100012.34);
</script>

To register globally (in main.ts):

import { InputCurrency } from "dolphin-components";

app.directive("input-currency", InputCurrency);

---

Screenshot

---

Behavior

1. On Initial Load:
   • If the input has a value, it gets formatted according to the specified currency format
2. When Focused:
   • Removes formatting to show raw numeric value
   • Enables key validation to restrict input to numbers and decimal point
3. When Blurred:
   • Re-applies currency formatting
4. During Input:
   • Restricts input to numeric characters and a single decimal point
   • Control keys (Backspace, Enter, Tab) and keyboard shortcuts (Ctrl+X, etc.) remain functional

---

Notes

• The v-model always need to be defined as number type i.e v-model.number="<value>"
• Uses the CurrencyFormatter and CurrencyUnformatter services for processing values
• Properly cleans up event listeners when component is unmounted
• Supports two format types: USA (default) and Euro (with .euro modifier)
• Supports two structure types: Nepali (default) and Foreign (with :foreign argument)
• Automatically maintains the formatted state when not focused
• Prevents multiple decimal points and non-numeric characters