Open hamonCordova opened 3 weeks ago
Hello
Could you link some of the issues you are talking about and give more context on your request?
@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>
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>
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
@noook can you give some answer? I apreciate any kind of help or other currency lib suggestion.
~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
~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?
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