docs: emberjs example

packages/ember-imask/.editorconfig

@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.hbs]
+insert_final_newline = false
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

packages/ember-imask/.ember-cli

@@ -0,0 +1,9 @@
+{
+  /**
+    Ember CLI sends analytics information by default. The data is completely
+    anonymous, but there are times when you might want to disable this behavior.
+
+    Setting `disableAnalytics` to true will prevent any data from being sent.
+  */
+  "disableAnalytics": false
+}

packages/ember-imask/.eslintignore

@@ -0,0 +1,20 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/package.json.ember-try

packages/ember-imask/.eslintrc.js

@@ -0,0 +1,53 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
+  },
+  plugins: [
+    'ember'
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:ember/recommended'
+  ],
+  env: {
+    browser: true
+  },
+  rules: {},
+  overrides: [
+    // node files
+    {
+      files: [
+        '.eslintrc.js',
+        '.template-lintrc.js',
+        'ember-cli-build.js',
+        'testem.js',
+        'blueprints/*/index.js',
+        'config/**/*.js',
+        'lib/*/index.js',
+        'server/**/*.js'
+      ],
+      parserOptions: {
+        sourceType: 'script'
+      },
+      env: {
+        browser: false,
+        node: true
+      },
+      plugins: ['node'],
+      extends: ['plugin:node/recommended'],
+      rules: {
+        // this can be removed once the following is fixed
+        // https://github.com/mysticatea/eslint-plugin-node/issues/77
+        'node/no-unpublished-require': 'off'
+      }
+    }
+  ]
+};

packages/ember-imask/.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/.env*
+/.pnp*
+/.sass-cache
+/connect.lock
+/coverage/
+/libpeerconnection.log
+/npm-debug.log*
+/testem.log
+/yarn-error.log
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/package.json.ember-try

packages/ember-imask/.template-lintrc.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  extends: 'octane'
+};

packages/ember-imask/.travis.yml

@@ -0,0 +1,31 @@
+---
+language: node_js
+node_js:
+  - "10"
+
+dist: xenial
+
+addons:
+  chrome: stable
+
+cache:
+  yarn: true
+
+env:
+  global:
+    # See https://git.io/vdao3 for details.
+    - JOBS=1
+
+branches:
+  only:
+    - master
+
+before_install:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH=$HOME/.yarn/bin:$PATH
+
+install:
+  - yarn install --non-interactive
+
+script:
+  - yarn test

packages/ember-imask/.watchmanconfig

@@ -0,0 +1,3 @@
+{
+  "ignore_dirs": ["tmp", "dist"]
+}

packages/ember-imask/README.md

@@ -0,0 +1,56 @@
+# How to use imask on emberjs
+
+<a href="https://opencollective.com/imask/donate" target="_blank">
+  <img src="https://opencollective.com/imask/donate/button.png?color=blue" width=300 />
+</a>
+
+## Install
+
+`yarn add --dev imask`
+
+## Dependencies
+
+- [ember-auto-import](https://github.com/ef4/ember-auto-import)
+- [ember-modifier](https://github.com/ember-modifier/ember-modifier)
+
+## Mask Input Example
+
+`ember g modifier imask-number`
+
+//app/modifiers/imask-number.js
+
+```javascript
+import { modifier } from "ember-modifier";
+import IMask from "imask";
+
+export default modifier(function imaskNumber(element /*, params, hash*/) {
+  const mask = IMask(element, {
+    mask: Number,
+    min: -10000,
+    max: 10000,
+    thousandsSeparator: " ",
+  });
+
+  return () => mask.destroy();
+});
+```
+
+```handlebars
+<Input @value={{this.number}} {{imask-number}} />
+```
+
+## This folder is an ember example with imask setup
+
+### Installation
+
+- `yarn install`
+
+### Running / Development
+
+- `ember serve`
+- Visit your app at [http://localhost:4200](http://localhost:4200).
+
+### Routes
+
+- [number-mask](http://localhost:4200/number-mask)
+- [phone-mask](http://localhost:4200/phone-mask)

packages/ember-imask/app/app.js

@@ -0,0 +1,12 @@
+import Application from '@ember/application';
+import Resolver from 'ember-resolver';
+import loadInitializers from 'ember-load-initializers';
+import config from './config/environment';
+
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
+
+loadInitializers(App, config.modulePrefix);

packages/ember-imask/app/controllers/phone-mask.js

@@ -0,0 +1,13 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+
+export default class PhoneMaskController extends Controller {
+  @tracked
+  phone;
+
+  @action
+  updatePhone(value) {
+    this.phone = value;
+  }
+}

packages/ember-imask/app/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>EmberImask</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {{content-for "head"}}
+
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/ember-imask.css">
+
+    {{content-for "head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+
+    <script src="{{rootURL}}assets/vendor.js"></script>
+    <script src="{{rootURL}}assets/ember-imask.js"></script>
+
+    {{content-for "body-footer"}}
+  </body>
+</html>

packages/ember-imask/app/modifiers/imask-number.js

@@ -0,0 +1,54 @@
+import Modifier from "ember-modifier";
+import IMask from "imask";
+
+export default class ImaskNumber extends Modifier {
+  mask;
+
+  constructor(owner, args) {
+    super(owner, args);
+
+    if (
+      this.args.named.onChange &&
+      typeof this.args.named.onChange !== "function"
+    ) {
+      throw new Error("onChange must be a function");
+    }
+  }
+
+  onChangeHandler = () => {
+    if (
+      this.mask &&
+      this.args.named.onChange &&
+      this.mask.unmaskedValue &&
+      this.mask.unmaskedValue !== this.args.positional[0]
+    ) {
+      this.args.named.onChange(this.mask.typedValue);
+    }
+  };
+
+  didUpdateArguments() {
+    if (this.mask) {
+      this.mask.unmaskedValue = this.args.positional[0].toString();
+    }
+  }
+
+  didInstall() {
+    this.mask = IMask(this.element, {
+      mask: Number,
+      min: -10000,
+      max: 10000,
+      thousandsSeparator: " ",
+    });
+
+    if (this.args.named.onChange) {
+      this.mask.on("complete", this.onChangeHandler);
+    }
+  }
+
+  willRemove() {
+    if (this.mask) {
+      this.mask.off("complete", this.onChangeHandler);
+      this.mask.destroy();
+    }
+  }
+}

packages/ember-imask/app/modifiers/imask-phone.js

@@ -0,0 +1,50 @@
+import Modifier from "ember-modifier";
+import IMask from "imask";
+
+export default class ImaskPhone extends Modifier {
+  mask;
+
+  constructor(owner, args) {
+    super(owner, args);
+
+    if (
+      this.args.named.onChange &&
+      typeof this.args.named.onChange !== "function"
+    ) {
+      throw new Error("onChange must be a function");
+    }
+  }
+
+  onChangeHandler = () => {
+    if (
+      this.mask &&
+      this.args.named.onChange &&
+      this.mask.unmaskedValue !== this.args.positional[0]
+    ) {
+      this.args.named.onChange(this.mask.unmaskedValue);
+    }
+  };
+
+  didUpdateArguments() {
+    if (this.mask) {
+      this.mask.unmaskedValue = this.args.positional[0].toString();
+    }
+  }
+
+  didInstall() {
+    this.mask = IMask(this.element, {
+      mask: "+{7}(000)000-00-00",
+    });
+
+    if (this.args.named.onChange) {
+      this.mask.on("accept", this.onChangeHandler);
+    }
+  }
+
+  willRemove() {
+    if (this.mask) {
+      this.mask.off("accept", this.onChangeHandler);
+      this.mask.destroy();
+    }
+  }
+}