currencyInput

src/components/CurruncyInput.vue

@@ -0,0 +1,62 @@
+<template>
+  <q-input
+    ref="inputRef"
+    v-model="formattedValue"
+    :dense="dense"
+    :outlined="outlined"
+    :class="className"
+    :readonly="readonly"
+    :borderless="borderless"
+  >
+    <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { useCurrencyInput } from "vue-currency-input";
+import { ref, useSlots, watch } from "vue";
+
+const slots = ref<any>(useSlots());
+
+const props = defineProps({
+  modelValue: Number,
+  dense: {
+    type: Boolean,
+    default: false,
+  },
+  outlined: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  borderless: {
+    type: Boolean,
+    default: false,
+  },
+  className: String,
+});
+
+const { inputRef, formattedValue, setValue } = useCurrencyInput({
+  locale: "en-US",
+  currency: "EUR",
+  currencyDisplay: "hidden",
+  hideCurrencySymbolOnFocus: true,
+  hideGroupingSeparatorOnFocus: true,
+  hideNegligibleDecimalDigitsOnFocus: true,
+  autoDecimalDigits: false,
+  useGrouping: true,
+  accountingSign: false,
+});
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    setValue(value);
+  }
+);
+</script>