npmpackage.info

Gathering detailed insights and metrics for vue-imask-vue-2.7

vue-imask-vue-2.7

vanilla javascript input mask

6.4.3

5,011

MIT

TypeScript

15.13 kB

3,353 3.6

Installations

npm install vue-imask-vue-2.7

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.14.2

NPM Version

8.6.0 Score

54.9

Supply Chain

97.2

Quality

74.8

Maintenance

Vulnerability

100

License

Pull Requests

Open

15

Total

192

Closed

106

Merged

71

Issues

Open

52

Total

748

Closed

696

Releases

v7.6.1

Published on 21 May 2024

v7.6.0

Published on 09 Apr 2024

v7.5.0

Published on 28 Feb 2024

v7.4.0

Published on 08 Feb 2024

v7.3.0

Published on 25 Dec 2023

v7.2.1

Published on 18 Dec 2023

View all 71 releases

Contributors

Unable to fetch Contributors

View all 29 contributors

Languages

TypeScript

JavaScript

HTML

Ruby

TypeScript (93.31%)

JavaScript (3.67%)

HTML (2.96%)

Ruby (0.05%)

Developer

uNmAnNeR

Download Statistics

Total Downloads

3,353

Last Day

Last Week

Last Month

Last Year

1,145

GitHub Statistics

5,011 Stars

956 Commits

262 Forks

30 Watching

9 Branches

29 Contributors

Bundle Size

56.80 kB

Minified

15.13 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

6.4.3

Package Id

vue-imask-vue-2.7@6.4.3

Unpacked Size

59.27 kB

Size

14.56 kB

File Count

NPM Version

8.6.0

Node Version

16.14.2

Total Downloads

Cumulative downloads

Total Downloads

3,353

Last day

-60%

Compared to previous day

Last week

-38.7%

Compared to previous week

Last month

-44.4%

Compared to previous month

Last year

-23.6%

1,145

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Vue IMask Plugin

vue-imask

This fork is for personal use (be compatible with Vue 2.7 that does not require @vue/composition-api package)

I updated "vue-demi" package as stated in Vue 2.7

Install

npm i vue-imask

for Vue 2 also do:

npm i -D @vue/composition-api

If you are using NuxtJS with Vue 2 you also need to install:

npm i -D @nuxtjs/composition-api

And then add @nuxtjs/composition-api/module in the buildModules option in your nuxt.config.js.

Mask Component Example (Vue 2)

1<template>
2  <imask-input
3    v-model="numberModel"
4    :mask="Number"
5    radix="."
6    :unmask="true"
7    <!-- depending on prop above first argument of 'accept' callback is
8    `value` if `unmask=false`,
9    `unmaskedValue` if `unmask=true`,
10    `typedValue` if `unmask='typed'` -->
11    @accept="onAccept"
12
13    <!-- ...see more mask props in a guide -->
14
15    <!-- other input props -->
16    placeholder='Enter number here'
17  />
18</template>
19
20<script>
21  import { IMaskComponent } from 'vue-imask';
22
23  export default {
24    data () {
25      return {
26        numberModel: '',
27        onAccept (value) {
28          console.log(value);
29        }
30      }
31    },
32    components: {
33      'imask-input': IMaskComponent
34    }
35  }
36</script>

Mask Component Example (Vue 3)

1<template>
2  <imask-input
3    <!-- possible to use 'v-model' = 'v-model:value' = 'v-model:masked' and 'v-model:unmasked' -->
4    v-model:typed="numberModel"
5    :mask="Number"
6    radix="."
7    @accept:masked="onAccept" <!-- accept value (same as '@accept:value' or just '@accept') -->
8    @accept:unmasked="onAcceptUnmasked"
9    <!--
10      @accept:typed="onAccepttyped"
11      @complete:typed="onCompleteTyped"
12    -->
13
14    <!-- ...see more mask props in a guide -->
15
16    <!-- other input props -->
17    placeholder='Enter number here'
18  />
19</template>
20
21<script>
22  import { IMaskComponent } from 'vue-imask';
23
24  export default {
25    data () {
26      return {
27        numberModel: '',
28        onAccept (value) {
29          console.log({ value });
30        },
31        onAcceptUnmasked (unmaskedValue) {
32          console.log({ unmaskedValue });
33        }
34      }
35    },
36    components: {
37      'imask-input': IMaskComponent
38    }
39  }
40</script>

Mask Directive Example

In some cases value bindings (v-model) might not work for directive, you can use @accept or @complete events to update the value.

1<template>
2  <input
3    :value="value"
4    v-imask="mask"
5    @accept="onAccept"
6    @complete="onComplete">
7</template>
8
9<script>
10  import { IMaskDirective } from 'vue-imask';
11
12  export default {
13    data () {
14      return {
15        value: '',
16        mask: {
17          mask: '{8}000000',
18          lazy: false
19        },
20      },
21    },
22    methods: {
23      onAccept (e) {
24        const maskRef = e.detail;
25        this.value = maskRef.value;
26        console.log('accept', maskRef.value);
27      },
28      onComplete (e) {
29        const maskRef = e.detail;
30        console.log('complete', maskRef.unmaskedValue);
31      },
32    },
33    directives: {
34      imask: IMaskDirective
35    }
36  }
37</script>

More options see in a guide.

Mask Composable (Vue 3)

1<template>
2  <input ref="el">
3</template>
4
5<script>
6  import { useIMask } from 'vue-imask';
7
8  export default {
9    setup (props) {
10      const { el, masked } = useIMask({
11        mask: Number,
12        radix: '.',
13      });
14  
15      return { el };
16    }
17  }
18</script>

No vulnerabilities found.

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.6

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

vue-imask-vue-2.7

Installations

Developer Guide

No

CommonJS

16.14.2

8.6.0

Score

Pull Requests

15

192

106

71

Issues

52

748

696

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

56.80 kB

15.13 kB

Maintainers

Package Meta Information

Total Downloads

3,353

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Vue IMask Plugin

Install

Mask Component Example (Vue 2)

Mask Component Example (Vue 3)

Mask Directive Example

Mask Composable (Vue 3)

10

10

10

10

3

0

0

0

0

0

0

0

0

3.6

/10