Initial publish

Author: Dipak Sarkar

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    jest: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    'airbnb-base',
+  ],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  plugins: [
+    'vue',
+  ],
+  rules: {
+    semi: 'off'
+  },
+};

.github/workflows/release-package.yml

@@ -0,0 +1,69 @@
+name: Node.js Package
+on:
+  release:
+    types: [created]
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - run: yarn install
+      - run: yarn test --coverage
+      - run: yarn build
+
+  # publish-gpr:
+  #   needs: build
+  #   runs-on: ubuntu-latest
+  #   permissions:
+  #     packages: write
+  #     contents: read
+  #   steps:
+  #     - uses: actions/checkout@v2
+  #     - uses: actions/setup-node@v2
+  #       with:
+  #         node-version: 16
+  #         registry-url: https://npm.pkg.github.com/
+
+  #     - name: Github ref check
+  #       run: echo "Deploying to production server on branch $GITHUB_REF"
+
+  #     - name: Install npm dependencies
+  #       run: yarn install
+
+  #     - name: Publish tag to npm
+  #       if: contains(github.ref, 'tags')
+  #       run: yarn publish --new-version "${GITHUB_REF:11}" --access public --no-git-tag-version
+  #       env:
+  #         NODE_AUTH_TOKEN: ${{ secrets.GH_AUTH_TOKEN }}
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@coders-tm'
+
+      - name: Github ref check
+        run: echo "Deploying to production server on branch $GITHUB_REF"
+
+      - name: Install npm dependencies
+        run: yarn install
+
+      - name: Publish tag to npm
+        if: contains(github.ref, 'tags')
+        run: yarn publish --new-version "${GITHUB_REF:11}" --access public --no-git-tag-version
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+dist
+.idea
+coverage
+
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 160,
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}

README.md

@@ -0,0 +1,103 @@
+# v-number Mask for Vue.js
+
+## Features
+
+- Lightweight < 2kb
+- Dependency free
+- Mobile support
+- Component or Directive flavors
+- Accept copy/paste
+- Editable
+
+## Demo
+[https://coders-tm.github.io/v-number/](https://coders-tm.github.io/v-number/)
+## Usage
+
+### A. Globally
+
+```js
+import Vue from 'vue'
+import number from 'v-number'
+
+// register directive v-number and component <number>
+Vue.use(number, {precision: 4})
+```
+
+### B. Use as component
+
+```html
+<template>
+  <div>
+    <number v-model="price" v-bind="number"></number> {{price}}
+  </div>
+</template>
+
+<script>
+  import { Number } from 'v-number'
+
+  export default {
+    components: {
+      Number
+    },
+
+    data () {
+      return {
+        price: 123.45,
+        number: {
+          decimal: '.',
+          separator: ',',
+          prefix: '$ ',
+          suffix: ' #',
+          precision: 2,
+          masked: false
+        }
+      }
+    }
+  }
+</script>
+```
+
+### C. Use as directive
+Must use `vmodel.lazy` to bind works properly.
+```html
+<template>
+  <div>
+    <input v-model.lazy="price" v-number="number" /> {{price}}
+  </div>
+</template>
+
+<script>
+  import { VNumber } from 'v-number'
+
+  export default {
+    data () {
+      return {
+        price: 123.45,
+        number: {
+          decimal: '.',
+          separator: ',',
+          prefix: '$ ',
+          suffix: ' #',
+          precision: 2,
+          masked: false /* doesn't work with directive */
+        }
+      }
+    },
+
+    directives: {
+      number: VNumber
+    }
+  }
+</script>
+```
+
+## Properties
+
+| property  | Required | Type    | Default | Description                                             |
+|-----------|----------|---------|---------|---------------------------------------------------------|
+| precision | false    | Number  | 2       | How many decimal places                                 |
+| decimal   | false    | String  | "."     | Decimal separator                                       |
+| separator | false    | String  | ","     | Thousands separator                                     |
+| prefix    | false    | String  | ""      | Currency symbol followed by a Space, like "$ "         |
+| suffix    | false    | String  | ""      | Percentage for example: " %"                            |
+| masked    | false    | Boolean | false   | If the component output should include the mask or not  |

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ]
+}

docs/.vuepress/components/Example.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="row q-col-gutter-lg">
+        <div class="col-sm-8 col-sx-12">
+            <q-list class="q-gutter-y-sm">
+                <div class="column">
+                    <div class="text-h6">Component</div>
+                    <q-field
+                        dense
+                        outlined
+                    >
+                        <template v-slot:control>
+                            <number
+                                class="q-field__input"
+                                v-model="price"
+                                v-bind="config"
+                            />
+                        </template>
+                    </q-field>
+                    <div>Model value: <span class="text-bold">{{price}}</span></div>
+                </div>
+                <div class="column">
+                    <div class="text-h6">Directive</div>
+                    <q-field
+                        dense
+                        outlined
+                        hint="masking doesn't work with directive"
+                    >
+                        <template v-slot:control>
+                            <input
+                                type="tel"
+                                class="q-field__input"
+                                v-number="config"
+                                v-model="priceDirective"
+                            />
+                        </template>
+                    </q-field>
+                    <div>Model value: <span class="text-bold">{{priceDirective}}</span></div>
+                </div>
+                <div class="column">
+                    <div class="text-h6">Directive on Custom Component of <a href="https://quasar.dev/vue-components/input" target="_blank">QInput</a></div>
+                    <q-input
+                        dense
+                        outlined
+                        v-model="priceUnmasked"
+                        v-number="config"
+                    />
+                    <div>Model value: <span class="text-bold">{{priceUnmasked}}</span></div>
+                </div>
+            </q-list>
+        </div>
+        <div class="col-sm-4 col-sx-12">
+            <q-list class="q-gutter-y-sm">
+                <q-input dense v-model="config.prefix" type="text" label="Prefix" />
+                <q-input dense v-model="config.suffix" type="text" label="Suffix" />
+                <q-input dense v-model.number="config.precision" type="number" min="0" max="5" label="Precision" />
+                <q-input dense v-model="config.decimal" type="text" label="Decimal" />
+                <q-input dense v-model="config.separator" type="text" label="Separator" />
+                <q-checkbox dense v-model="config.masked" label="Masked" />
+            </q-list>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            price: 0,
+            priceDirective: 5432.1,
+            priceUnmasked: 6789.10,
+            config: {
+                decimal: '.',
+                separator: ',',
+                prefix: '$',
+                suffix: '%',
+                precision: 2,
+                masked: false
+            }
+        }
+    },
+    methods: {
+        change (evt) {
+            console.log('change', evt.target.value);
+        }
+    }
+}
+</script>
+
+<style lang="css">
+    .container {
+        min-width: 800px;
+        max-width: 95vw;
+    }
+</style>