Skip to content

Commit bb73ce0

Browse files
author
Dipak Sarkar
committed
Initial publish
0 parents  commit bb73ce0

29 files changed

+15048
-0
lines changed

‎.editorconfig

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_size = 2
6+
indent_style = space
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true
11+
12+
[*.md]
13+
trim_trailing_whitespace = false

‎.eslintrc.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es6: true,
5+
jest: true
6+
},
7+
extends: [
8+
'plugin:vue/essential',
9+
'airbnb-base',
10+
],
11+
globals: {
12+
Atomics: 'readonly',
13+
SharedArrayBuffer: 'readonly',
14+
},
15+
parserOptions: {
16+
ecmaVersion: 2020,
17+
sourceType: 'module',
18+
},
19+
plugins: [
20+
'vue',
21+
],
22+
rules: {
23+
semi: 'off'
24+
},
25+
};

‎.github/workflows/release-package.yml

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
name: Node.js Package
2+
on:
3+
release:
4+
types: [created]
5+
# Allows you to run this workflow manually from the Actions tab
6+
workflow_dispatch:
7+
8+
jobs:
9+
build:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v2
13+
- uses: actions/setup-node@v2
14+
with:
15+
node-version: 16
16+
- run: yarn install
17+
- run: yarn test --coverage
18+
- run: yarn build
19+
20+
# publish-gpr:
21+
# needs: build
22+
# runs-on: ubuntu-latest
23+
# permissions:
24+
# packages: write
25+
# contents: read
26+
# steps:
27+
# - uses: actions/checkout@v2
28+
# - uses: actions/setup-node@v2
29+
# with:
30+
# node-version: 16
31+
# registry-url: https://npm.pkg.github.com/
32+
33+
# - name: Github ref check
34+
# run: echo "Deploying to production server on branch $GITHUB_REF"
35+
36+
# - name: Install npm dependencies
37+
# run: yarn install
38+
39+
# - name: Publish tag to npm
40+
# if: contains(github.ref, 'tags')
41+
# run: yarn publish --new-version "${GITHUB_REF:11}" --access public --no-git-tag-version
42+
# env:
43+
# NODE_AUTH_TOKEN: ${{ secrets.GH_AUTH_TOKEN }}
44+
45+
publish-npm:
46+
needs: build
47+
runs-on: ubuntu-latest
48+
permissions:
49+
packages: write
50+
contents: read
51+
steps:
52+
- uses: actions/checkout@v2
53+
- uses: actions/setup-node@v2
54+
with:
55+
node-version: 16
56+
registry-url: 'https://registry.npmjs.org'
57+
scope: '@coders-tm'
58+
59+
- name: Github ref check
60+
run: echo "Deploying to production server on branch $GITHUB_REF"
61+
62+
- name: Install npm dependencies
63+
run: yarn install
64+
65+
- name: Publish tag to npm
66+
if: contains(github.ref, 'tags')
67+
run: yarn publish --new-version "${GITHUB_REF:11}" --access public --no-git-tag-version
68+
env:
69+
NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

‎.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.DS_Store
2+
node_modules
3+
dist
4+
.idea
5+
coverage
6+
7+
8+
# Log files
9+
npm-debug.log*
10+
yarn-debug.log*
11+
yarn-error.log*
12+
pnpm-debug.log*

‎.prettierrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"printWidth": 160,
3+
"semi": false,
4+
"singleQuote": true,
5+
"arrowParens": "always",
6+
"trailingComma": "none"
7+
}

‎README.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
# v-number Mask for Vue.js
2+
3+
## Features
4+
5+
- Lightweight < 2kb
6+
- Dependency free
7+
- Mobile support
8+
- Component or Directive flavors
9+
- Accept copy/paste
10+
- Editable
11+
12+
## Demo
13+
[https://coders-tm.github.io/v-number/](https://coders-tm.github.io/v-number/)
14+
## Usage
15+
16+
### A. Globally
17+
18+
```js
19+
import Vue from 'vue'
20+
import number from 'v-number'
21+
22+
// register directive v-number and component <number>
23+
Vue.use(number, {precision: 4})
24+
```
25+
26+
### B. Use as component
27+
28+
```html
29+
<template>
30+
<div>
31+
<number v-model="price" v-bind="number"></number> {{price}}
32+
</div>
33+
</template>
34+
35+
<script>
36+
import { Number } from 'v-number'
37+
38+
export default {
39+
components: {
40+
Number
41+
},
42+
43+
data () {
44+
return {
45+
price: 123.45,
46+
number: {
47+
decimal: '.',
48+
separator: ',',
49+
prefix: '$ ',
50+
suffix: ' #',
51+
precision: 2,
52+
masked: false
53+
}
54+
}
55+
}
56+
}
57+
</script>
58+
```
59+
60+
### C. Use as directive
61+
Must use `vmodel.lazy` to bind works properly.
62+
```html
63+
<template>
64+
<div>
65+
<input v-model.lazy="price" v-number="number" /> {{price}}
66+
</div>
67+
</template>
68+
69+
<script>
70+
import { VNumber } from 'v-number'
71+
72+
export default {
73+
data () {
74+
return {
75+
price: 123.45,
76+
number: {
77+
decimal: '.',
78+
separator: ',',
79+
prefix: '$ ',
80+
suffix: ' #',
81+
precision: 2,
82+
masked: false /* doesn't work with directive */
83+
}
84+
}
85+
},
86+
87+
directives: {
88+
number: VNumber
89+
}
90+
}
91+
</script>
92+
```
93+
94+
## Properties
95+
96+
| property | Required | Type | Default | Description |
97+
|-----------|----------|---------|---------|---------------------------------------------------------|
98+
| precision | false | Number | 2 | How many decimal places |
99+
| decimal | false | String | "." | Decimal separator |
100+
| separator | false | String | "," | Thousands separator |
101+
| prefix | false | String | "" | Currency symbol followed by a Space, like "$ " |
102+
| suffix | false | String | "" | Percentage for example: " %" |
103+
| masked | false | Boolean | false | If the component output should include the mask or not |

‎babel.config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
presets: [
3+
[
4+
'@babel/preset-env',
5+
{
6+
targets: {
7+
node: 'current',
8+
},
9+
},
10+
],
11+
]
12+
}

‎docs/.vuepress/components/Example.vue

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<template>
2+
<div class="row q-col-gutter-lg">
3+
<div class="col-sm-8 col-sx-12">
4+
<q-list class="q-gutter-y-sm">
5+
<div class="column">
6+
<div class="text-h6">Component</div>
7+
<q-field
8+
dense
9+
outlined
10+
>
11+
<template v-slot:control>
12+
<number
13+
class="q-field__input"
14+
v-model="price"
15+
v-bind="config"
16+
/>
17+
</template>
18+
</q-field>
19+
<div>Model value: <span class="text-bold">{{price}}</span></div>
20+
</div>
21+
<div class="column">
22+
<div class="text-h6">Directive</div>
23+
<q-field
24+
dense
25+
outlined
26+
hint="masking doesn't work with directive"
27+
>
28+
<template v-slot:control>
29+
<input
30+
type="tel"
31+
class="q-field__input"
32+
v-number="config"
33+
v-model="priceDirective"
34+
/>
35+
</template>
36+
</q-field>
37+
<div>Model value: <span class="text-bold">{{priceDirective}}</span></div>
38+
</div>
39+
<div class="column">
40+
<div class="text-h6">Directive on Custom Component of <a href="https://quasar.dev/vue-components/input" target="_blank">QInput</a></div>
41+
<q-input
42+
dense
43+
outlined
44+
v-model="priceUnmasked"
45+
v-number="config"
46+
/>
47+
<div>Model value: <span class="text-bold">{{priceUnmasked}}</span></div>
48+
</div>
49+
</q-list>
50+
</div>
51+
<div class="col-sm-4 col-sx-12">
52+
<q-list class="q-gutter-y-sm">
53+
<q-input dense v-model="config.prefix" type="text" label="Prefix" />
54+
<q-input dense v-model="config.suffix" type="text" label="Suffix" />
55+
<q-input dense v-model.number="config.precision" type="number" min="0" max="5" label="Precision" />
56+
<q-input dense v-model="config.decimal" type="text" label="Decimal" />
57+
<q-input dense v-model="config.separator" type="text" label="Separator" />
58+
<q-checkbox dense v-model="config.masked" label="Masked" />
59+
</q-list>
60+
</div>
61+
</div>
62+
</template>
63+
64+
<script>
65+
export default {
66+
data () {
67+
return {
68+
price: 0,
69+
priceDirective: 5432.1,
70+
priceUnmasked: 6789.10,
71+
config: {
72+
decimal: '.',
73+
separator: ',',
74+
prefix: '$',
75+
suffix: '%',
76+
precision: 2,
77+
masked: false
78+
}
79+
}
80+
},
81+
methods: {
82+
change (evt) {
83+
console.log('change', evt.target.value);
84+
}
85+
}
86+
}
87+
</script>
88+
89+
<style lang="css">
90+
.container {
91+
min-width: 800px;
92+
max-width: 95vw;
93+
}
94+
</style>

0 commit comments

Comments
 (0)