release: 0.2.0 (#19)

* release: 0.2.0 * package: update * doc: add new options to README.md * feat: bind all options for vue-input-ui * feat: add blur event to input text * feat: add blur event to input text * doc: add event API * demo: add toggle actions * build: release 0.2.0
LouisMazel · Jun 3, 2019 · edbd32a · edbd32a
1 parent 791af22
commit edbd32a
Show file tree

Hide file tree

Showing 19 changed files with 1,529 additions and 1,364 deletions.
diff --git a/README.md b/README.md
@@ -57,12 +57,19 @@ Vue.component('vue-phone-number-input', VuePhoneNumberInput);
 - Keyboard accessibility (Arrow down, Arrow up : Countries list navigation -  Escape : Close countries list)
 - Phone number example for each country in placeholder/label
 - Auto focus phone number input after selecting country
-- Differents size of input (sm or lg)
 - You can disable the flags - `no-flags` props
-- Dark UI option
-- Disabled option
 - Set your translations
 
+### All options of [VueInputUi](https://github.com/LouisMazel/vue-input-ui) are availables
+
+- Differents size of input (sm or lg) `size="sm|lg"`
+- Disabled option (`disabled` prop)
+- Dark UI option (`dark` prop)
+- Active a clear button by the prop `clearable` (cf: [VueInputUi options](https://github.com/LouisMazel/vue-input-ui#props-api))
+- Active a loader progress bar by the prop `loader`  (cf: [VueInputUi options](https://github.com/LouisMazel/vue-input-ui#props-api))
+- And others
+`
+
 ## Props API
 
 | Props      | Type       | Required | Default    |
@@ -83,13 +90,17 @@ Vue.component('vue-phone-number-input', VuePhoneNumberInput);
 | dark | Boolean    | no       | false      |
 | required | Boolean    | no       | false      |
 | error | Boolean    | no       | false      |
-| translations (3) | Object    | no       | null      |
+| clearable | Boolean    | no       | false      |
+| loader (3) | Boolean    | no       | false      |
+| translations (4) | Object    | no       | null      |
 
 (1) Ex : `default-country-code="FR"`
 
 (2) Ex : `preferred-countries="['FR', 'BE', 'DE']"` This countries will be at the top of the list
 
-(3) translations comes to replace default texts - Ex :
+(3) Loader progress bar has the input color (`color` props)
+
+(4) translations comes to replace default texts - Ex :
 
 ```html
 translations="{
@@ -100,6 +111,15 @@ translations="{
 }"
 ```
 
+## Events API
+
+| Event      | Return       |
+|------------|------------|
+| phone-number-focused    | `-` (emit when phone number input is focused) |
+| phone-number-blur    | `-` (emit when phone number input is blur) |
+| input    | [AsYouType value](https://github.com/catamphetamine/libphonenumber-js#as-you-type-formatter) (emit when new value is enter on phone number input && when a country is choosed) |
+| update    | All values (cf values in table on [demo](https://louismazel.github.io/vue-phone-number-input/)) (emit when new value is enter on phone number input && when a country is choosed) |
+
 ## Keyboard accessibility
 
 | Props      | Action       |

diff --git a/docs/css/app.38f6b1fe.css → docs/css/app.cf313920.css b/docs/css/app.38f6b1fe.css → docs/css/app.cf313920.css
diff --git a/docs/css/chunk-vendors.0e8cfc02.css b/docs/css/chunk-vendors.0e8cfc02.css
diff --git a/docs/css/chunk-vendors.847ed21b.css b/docs/css/chunk-vendors.847ed21b.css
diff --git a/docs/index.html b/docs/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>vue-phone-number-input</title><link href=css/app.38f6b1fe.css rel=preload as=style><link href=css/chunk-vendors.847ed21b.css rel=preload as=style><link href=js/app.b7d4aed7.js rel=preload as=script><link href=js/chunk-vendors.473ccfa9.js rel=preload as=script><link href=css/chunk-vendors.847ed21b.css rel=stylesheet><link href=css/app.38f6b1fe.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-phone-number-input doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><style>html, body {
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>vue-phone-number-input</title><link href=css/app.cf313920.css rel=preload as=style><link href=css/chunk-vendors.0e8cfc02.css rel=preload as=style><link href=js/app.9d4f4ad4.js rel=preload as=script><link href=js/chunk-vendors.073ccc78.js rel=preload as=script><link href=css/chunk-vendors.0e8cfc02.css rel=stylesheet><link href=css/app.cf313920.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-phone-number-input doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><style>html, body {
         margin: 0;
         min-height: 100%;
       }
@@ -17,4 +17,4 @@
         -moz-flex: 1;
         -ms-flex: 1;
         flex: 1;
-      }</style><script src=js/chunk-vendors.473ccfa9.js></script><script src=js/app.b7d4aed7.js></script></body></html>
+      }</style><script src=js/chunk-vendors.073ccc78.js></script><script src=js/app.9d4f4ad4.js></script></body></html>
diff --git a/docs/js/app.9d4f4ad4.js b/docs/js/app.9d4f4ad4.js
diff --git a/docs/js/app.9d4f4ad4.js.map b/docs/js/app.9d4f4ad4.js.map
diff --git a/docs/js/app.b7d4aed7.js b/docs/js/app.b7d4aed7.js
diff --git a/docs/js/app.b7d4aed7.js.map b/docs/js/app.b7d4aed7.js.map