[v3] New build files

Author: iamstevendao

.editorconfig

@@ -0,0 +1,7 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

README-v2.md

@@ -0,0 +1,181 @@
+# vue-tel-input v2.x.x
+International Telephone Input with Vue.
+
+[![](https://img.shields.io/npm/dt/vue-tel-input.svg)](https://www.npmjs.com/package/vue-tel-input) [![](https://img.shields.io/github/stars/educationlink/vue-tel-input.svg)](https://github.com/EducationLink/vue-tel-input)
+
+Checkout [Demo](https://educationlink.github.io/vue-tel-input/) or [Playground](https://codesandbox.io/s/0yyyk45q7w?fontsize=14&module=%2Fsrc%2FApp.vue&moduleview=1).
+
+<p align="center">
+<img width="600px" alt="In-action GIF" src="https://thumbs.gfycat.com/EducatedPoliteBluefintuna-size_restricted.gif"/>
+</p>
+
+## Installation
+- **yarn**:
+  ```bash
+    yarn add vue-tel-input
+  ```
+- **npm**:
+  ```bash
+    npm i --save vue-tel-input
+  ```
+
+## Usage
+- Import default `CSS` to your project:
+    ```js
+    import 'vue-tel-input/dist/vue-tel-input.css';
+    ```
+
+- In your component:
+     ```html
+     <template>
+     ...
+        <vue-tel-input v-model="phone"></vue-tel-input>
+     ...
+     <template>
+     <script>
+     import VueTelInput from 'vue-tel-input';
+
+     export default {
+       components: {
+         VueTelInput,
+       },
+       data() {
+         return {
+           phone: '',
+         };
+       },
+     }
+     </script>
+     ```
+
+### Use as a custom field of [vue-form-generator](https://github.com/vue-generators/vue-form-generator)
+- Add a component using `vue-form-generator`'s `abstractField` mixin
+  ```js
+  // tel-input.vue
+  <template>
+    <vue-tel-input v-model="value"></vue-tel-input>
+  </template>
+
+  <script>
+  import VueTelInput from 'vue-tel-input'
+  import { abstractField } from 'vue-form-generator';
+
+  export default {
+    name: 'TelephoneInput',
+    mixins: [abstractField],
+    components: {
+      VueTelInput,
+    },
+  };
+  </script>
+  ```
+
+- Register the new field as a global component
+  ```js
+    import Vue from 'vue';
+    import TelInput from '<path>/tel-input.vue';
+
+    import 'vue-tel-input/dist/vue-tel-input.css';
+
+    Vue.component('field-tel-input', TelInput);
+  ```
+
+- Now it can be used as `tel-input` in schema of `vue-form-generator`
+  ```js
+  var schema: {
+    fields: [{
+        type: "tel-input",
+        label: "Awesome (tel input)",
+        model: "telephone"
+    }]
+  };
+  ```
+Read more on `vue-form-generator`'s [instruction page](https://icebob.gitbooks.io/vueformgenerator/content/fields/custom_fields.html)
+
+### Props
+
+  Test all props on [CodeSandbox](https://codesandbox.io/s/0yyyk45q7w?fontsize=14&module=%2Fsrc%2FApp.vue&moduleview=1).
+
+  | Property | Type | Default value | Description |
+  | -------- | ---- | ------------- | ----------- |
+  | `defaultCountry` | `String` | `''` | Default country, will override the country fetched from IP address of user |
+  | `disabledFetchingCountry` | `Boolean` | `false` | Disable fetching current country based on IP address of user |
+  | `disabled` | `Boolean` | `false` | Disable input field |
+  | `disabledFormatting` | `Boolean` | `false` | Disable formatting the phone number in the input, the formatted result still be accessible by `formattedNumber` returned from `onInput` event |
+  | `placeholder` | `String` | Enter a phone number | Placeholder for the input |
+  | `required` | `Boolean` | `false` | Required property for HTML5 required attribute |
+  | `enabledCountryCode` | `Boolean` | `false` | Enable country code in the input |
+  | `enabledFlags` | `Boolean` | `true` | Enable flags in the input |
+  | `preferredCountries` | `Array` | `[]` | Preferred countries list, will be on top of the dropdown. ie `['AU', 'BR']` |
+  | `onlyCountries` | `Array` | `[]` | List of countries will be shown on the dropdown. ie `['AU', 'BR']` |
+  | `ignoredCountries` | `Array` | `[]` | List of countries will NOT be shown on the dropdown. ie `['AU', 'BR']` |
+  | `autocomplete` | `String` | `'on'` | Native input 'autocomplete' attribute |
+  | `name` | `String` | `'telephone'` | Native input 'name' attribute |
+  | `maxLen` | `Number` | `25` | Native input 'maxlength' attribute |
+  | `wrapperClasses` | `String` &#124; `Array` &#124; `Object` | `''` | Custom classes for the wrapper |
+  | `inputClasses` | `String` &#124; `Array` &#124; `Object` | `''` | Custom classes for the `input` |
+  | `inputId` | `String` | `''` | Custom 'id' for the `input` |
+  | `dropdownOptions` | `Object` | `{ disabledDialCode: false, tabindex: 0 }` | Options for dropdown, supporting `disabledDialCode` and `tabindex`| 
+  | `inputOptions` | `Object` | `{ showDialCode: false, tabindex: 0 }` | Options for input, supporting `showDialCode` (always show dial code in the input) and `tabindex`|
+  | `validCharactersOnly` | `Boolean` | `false` | Only allow valid characters in a phone number (will also verify in `mounted`, so phone number with invalid characters will be shown as an empty string) |
+
+### Events
+
+  | Event | Arguments | Description | Notes |
+  | ----- | --------- | ----------- | ----- |
+  | `input` | `String`, `Object` | Fires when the input changes with the argument is the object includes `{ number, isValid, country }` | `onInput` deprecated |
+  | `validate` | `Object` | Fires when the correctness of the phone number changes (from `true` to `false` or vice-versa) and when the component is mounted `{ number, isValid, country }` | `onValidate` deprecated |
+  | `blur` |  | Fires on blur event | `onBlur` deprecated |
+  | `space` |  | Fires on keyup.space event | `onSpace` deprecated |
+  | `enter` |  | Fires on keyup.enter event | `onEnter` deprecated |
+  | `open` |  | Fires when the flags dropdown opens | |
+  | `close` |  | Fires when the flags dropdown closes | |
+  | `country-changed` | `Object` | Fires when country changed (even for the first time) | Available from `v2.4.2` |
+
+### Slots
+  | Slot | Description | Notes |
+  | ---- | ----------- | ----- |
+  | `arrow-icon` | Replace the arrow next to the flag with a component of your choice | Available from [v2.4.3](https://github.com/EducationLink/vue-tel-input/releases/tag/v2.4.3) |
+
+## Highlights & Credits
+- Telephone Number parsing, validation by [libphonenumber-js](https://catamphetamine.github.io/libphonenumber-js/).
+- Country Codes data from [intl-tel-input](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/data.js).
+- User's country by [ip2c.org](https://ip2c.org/s), request using [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
+
+## Demo Usage
+
+```bash
+
+# install dependencies
+$ yarn/npm install
+
+# compile demo for development
+$ yarn/npm dev
+
+# open Browser and start serving in demo
+$ yarn/npm demo:open
+
+# compile dist demo
+$ yarn/npm dist:demo
+
+# compile dist
+$ yarn/npm dist
+
+```
+
+## Typescript Support
+
+If you working with typescript will need declaration requirements.
+
+```bash
+npm install --save-dev @types/vue-tel-input
+```
+
+## Contributors
+- [mikob](https://github.com/mikob) for super awesome work to [remove the bootstrap dependency](https://github.com/EducationLink/vue-tel-input/pull/13).
+- [kalcifield](https://github.com/kalcifield) for helping make the input [preload with a phone number](https://github.com/EducationLink/vue-tel-input/pull/8).
+- [serbemas](https://github.com/serbemas) for [adding web components support](https://github.com/EducationLink/vue-tel-input/pull/92).
+
+...[more](https://github.com/EducationLink/vue-tel-input/graphs/contributors)
+
+made with &#x2764; by [Steven](https://github.com/iamstevendao).

build/rollup.config.base.js

@@ -0,0 +1,35 @@
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import vue from 'rollup-plugin-vue';
+import cjs from 'rollup-plugin-commonjs';
+import replace from 'rollup-plugin-replace';
+import postcss from 'rollup-plugin-postcss';
+import analyze from 'rollup-plugin-analyzer';
+
+const config = require('../package.json');
+
+export default {
+  input: 'src/index.js',
+  plugins: [
+    resolve({
+      mainFields: ['module', 'jsnext:main', 'main', 'browser'],
+    }),
+    vue({
+      css: true,
+    }),
+    babel({
+      exclude: 'node_modules/**',
+      runtimeHelpers: true,
+      extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.vue'],
+    }),
+    cjs(),
+    replace({
+      VERSION: JSON.stringify(config.version),
+    }),
+    postcss(),
+    analyze(),
+  ],
+  watch: {
+    include: 'src/**',
+  },
+};

build/rollup.config.browser.js

@@ -0,0 +1,15 @@
+import { terser } from 'rollup-plugin-terser';
+import base from './rollup.config.base';
+
+const config = Object.assign({}, base, {
+  output: {
+    exports: 'named',
+    name: 'VueTelInput',
+    file: 'dist/vue-tel-input.min.js',
+    format: 'iife',
+  },
+});
+
+config.plugins.push(terser());
+
+export default config;

build/rollup.config.es.js

@@ -0,0 +1,14 @@
+import base from './rollup.config.base';
+
+const config = Object.assign({}, base, {
+  output: {
+    name: 'vue-tel-input',
+    file: 'dist/vue-tel-input.esm.js',
+    format: 'es',
+  },
+  external: [
+    'libphonenumber-js',
+  ],
+});
+
+export default config;

build/rollup.config.umd.js

@@ -0,0 +1,12 @@
+import base from './rollup.config.base';
+
+const config = Object.assign({}, base, {
+  output: {
+    exports: 'named',
+    name: 'vue-tel-input',
+    file: 'dist/vue-tel-input.umd.js',
+    format: 'umd',
+  },
+});
+
+export default config;

demo.sh

@@ -4,7 +4,7 @@
 set -e
 
 # build
-NODE_ENV=demo npm run build
+npm run demo
 
 # Copy circle CI configuration to prevent running from gh-pages
 cp circle.yml docs