[UInput] Currency input

[hamonCordova]

Description

There is a lot of opened/closed issues that we requested currency input. There is same answer everytime, "have you tried this [...]?". There isn't libs that works with UInput!

If there is a way to achive this, please show us a working example or add this feature, please.

Additional context

No response

[DarioRega]

Hello

Could you link some of the issues you are talking about and give more context on your request?

[fen89]

@hamonCordova

There is same answer everytime, "have you tried this [...]?".

You didn't provide any valuable information what you already have tried, so yes this will always be the first response, because people who are willing to help need context!

There isn't libs that works with UInput!

This took me literally 5mins to get UInput hacked together with a random used mask-input library, here v-maska

import { vMaska } from 'maska';

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.directive('maska', vMaska);
});

<script lang="ts" setup>
const currency = ref(13.37);
</script>

<template>
  <div class="m-5 space-y-4">
    <h1>Currency with Maska</h1>
    <UFormGroup label="Currency" name="currency" class="max-w-[200px]">
      <UInput
        v-model="currency"
        v-maska
        data-maska="##.##"
        icon="i-heroicons-currency-dollar"
      />
    </UFormGroup>
  </div>
</template>

[hamonCordova]

Sorry, but this isn't a currency input, this is only a masked input accepting 4 numbers. ASAP i will post a reproduction.

@hamonCordova

There is same answer everytime, "have you tried this [...]?".

You didn't provide any valuable information what you already have tried, so yes this will always be the first response, because people who are willing to help need context!

There isn't libs that works with UInput!

This took me literally 5mins to get UInput hacked together with a random used mask-input library, here v-maska

import { vMaska } from 'maska';

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.directive('maska', vMaska);
});

<script lang="ts" setup>
const currency = ref(13.37);
</script>

<template>
  <div class="m-5 space-y-4">
    <h1>Currency with Maska</h1>
    <UFormGroup label="Currency" name="currency" class="max-w-[200px]">
      <UInput
        v-model="currency"
        v-maska
        data-maska="##.##"
        icon="i-heroicons-currency-dollar"
      />
    </UFormGroup>
  </div>
</template>

[hamonCordova]

As i promise, here is a reproduction. You can see, with the HTML native input, works great, but with the UInput (inside UForm or not) it doest work, throwing errors on cosole. I tested with v-money3

Reproduction

@noook can you give some answer? I apreciate any kind of help or other currency lib suggestion.

[noook]

~Oh I understand. What's happening is that the directive is bound to the wrapper div and not the input itself. This is the reason why it is currently not working.~

Update: I just noticed the previous example with v-maska and it works so that might not be the reason, even though I'm not sure inheritAttrs also inherits from directives. Maybe v-maska intelligently finds the closes input instead of naively binding the directive to the current element

[hamonCordova]

~Oh I understand. What's happening is that the directive is bound to the wrapper div and not the input itself. This is the reason why it is currently not working.~

Update: I just noticed the previous example with v-maska and it works so that might not be the reason, even though I'm not sure inheritAttrs also inherits from directives. Maybe v-maska intelligently finds the closes input instead of naively binding the directive to the current element

Thanks. I seems to be a v-money3 problem. @noook do you have some other lib suggestion?