packages/vue-imask/example.html

<html>
<head></head>

<body>
  <h1>Vue IMask Plugin Demo</h1>
  <main id="app">
    <label>
      Directive
      <input
        :value="dateValue"
        v-imask="dateMask"
        @accept="onAcceptDate"
        @complete="onCompleteDate">
    </label>
    <button
      @click="toggleDateMask"
      >{{dateMask ? 'Disable' : 'Enable'}} mask</button>
    <br>
    <label>
      Component
      <imask-input
        v-model:typed="numberValue"
        :mask="Number"
        radix="."
        @accept:masked="onAcceptNumberMasked"
        @accept:unmasked="onAcceptNumberUnmasked"
        placeholder="Enter number here"
      >
    </label>
    {{numberValue}}
    <button
      @click="toggleNumberMask"
      >{{numberMask ? 'Disable' : 'Enable'}} mask</button>

    <br>
    <input ref="el">
  </main>

  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-demi"></script>
  <script src="https://unpkg.com/imask"></script>
  <script src="dist/vue-imask.js"></script>
  <script type="text/javascript">
    var testNumberMask = Number;
    var testDateMask = {
      mask: Date
    };
    var app = Vue.createApp({
      directives: {
        imask: VueIMask.IMaskDirective
      },
      components: {
        'imask-input': VueIMask.IMaskComponent
      },
      data: () => ({
        dateMask: testDateMask,
        dateValue: '12.12',

        numberMask: testNumberMask,
        numberUnmask: 'typed',
        numberValue: 10,
      }),
      setup () {
        const { el, typed } = VueIMask.useIMask({
          mask: Number,
          scale: 0,
        }, {
          defaultTypedValue: 500,
          onAccept: () => console.log('accept composition value', typed.value),
        });

        return { el };
      },
      methods: {
        onAcceptDate: function (e) {
          console.log('accept date', e.detail.value);
          this.dateValue = e.detail.value;
        },
        onCompleteDate: function (e) {
          console.log('complete date!', e.detail.unmaskedValue);
        },

        onFocusNumber: function () {
          console.log('focus num');
        },
        onAcceptNumberMasked: function (value, e) {
          console.log('accept num', value, typeof value);
        },
        onAcceptNumberUnmasked: function (value, e) {
          console.log('accept num', value, typeof value);
        },
        onCompleteNumber: function (value) {
          console.log('complete num!', value, typeof value);
        },
        toggleNumberMask: function () {
          if (app.numberMask) app.numberMask = null;
          else app.numberMask = testNumberMask;
        },
        toggleDateMask: function () {
          if (app.dateMask) app.dateMask = null;
          else app.dateMask = testDateMask;
        }
      }
    }).mount('#app');
    // setTimeout(function () {
    //   app.numberUnmask = false;
    //   app.numberValue = '123';
    // }, 1000);
  </script>
</body>
</html>