balm-ui icon indicating copy to clipboard operation
balm-ui copied to clipboard

Feature requests - inputs

Open siloam opened this issue 2 years ago • 6 comments

  1. A way to provide masks for textfields
  2. A way to hide spinners (arrows) for number fields

siloam avatar Dec 10 '21 11:12 siloam

About request loading, I prefer to use global masks, like this:

<div>
  <app-layout>
    Your template
  </app-layout>
  <loading-layout v-if="$store.isLoading"></loading-layout>
</div>

elf-mouse avatar Dec 13 '21 08:12 elf-mouse

I ment input masks. It's a way to control input. Sometimes formating and pre-validation of data is needed,

siloam avatar Dec 13 '21 09:12 siloam

Hi guys, is it possible using something like maska with BalmUI?

rodrigobraga avatar Jan 09 '23 22:01 rodrigobraga

@siloam @elf-mouse I am trying the sample below without success. Do you have any idea to solve this?

<template>

    <ui-textfield
      v-model="model"
      :attrs="{ 'v-maska': '', 'data-maska': '#####-###'}"
      required
      maxlength="9">
        Example
      </ui-textfield>

</template>

<script>

import { vMaska } from "maska"

export default {

  directives: { maska: vMaska },

  data () {
    return {
        model: null
    }
  }
}
</script>

rodrigobraga avatar Jan 13 '23 12:01 rodrigobraga

Hi @rodrigobraga , you can use maska like this:

  • main.js

    import { vMaska } from 'maska';
    
    const app = createApp(App);
    app.directive('maska', vMaska);
    
  • app.vue

    <ui-textfield
      v-model="value"
      v-maska
      :attrs="{
        'data-maska': '#-#'
      }"
    ></ui-textfield>
    

elf-mouse avatar Jan 16 '23 07:01 elf-mouse

@elf-mouse Thanks!

rodrigobraga avatar Jan 16 '23 11:01 rodrigobraga