From 7187d869e2b8a277bbf8e564e71e87d4da5fd6c3 Mon Sep 17 00:00:00 2001 From: Damien Date: Wed, 9 Oct 2019 22:33:35 +0200 Subject: [PATCH 1/5] update v1.3 Readme --- README.md | 160 +++++------------- src/App.vue | 4 +- .../BootstrapDropdown.vue | 0 src/components/index.js | 2 +- 4 files changed, 50 insertions(+), 116 deletions(-) rename src/components/{boostrap => bootstrap}/BootstrapDropdown.vue (100%) diff --git a/README.md b/README.md index 9401a07..b4eed14 100644 --- a/README.md +++ b/README.md @@ -6,16 +6,21 @@ ## Installation -You need [Vue.js](https://vuejs.org/) **version 2.0+** and an [Google PLACE API](https://developers.google.com/places/web-service/get-api-key) key. This plugin comes without any css, the main goal is to use it with differents framework. To do this, you can pass multiple classes in options and custom the results template (See examples section). +You need [Vue.js](https://vuejs.org/) **version 2.0+** and an [Google PLACE API](https://developers.google.com/places/web-service/get-api-key) key. This plugin is a renderless component. It comes without any css as the main goal is to use it with differents frameworks. -### 1 Install via npm +If you looking for framework oriented components, you can import them separately (see ***pre-configured*** section) +PR are welcome for other components + +### Install via npm ```bash npm install vue-custom-google-autocomplete yarn add vue-custom-google-autocomplete ``` -### 2 Import and use +### Import and use + +Note: if you want a specific preconfigured component, skit this step and import it as a simple component (see ***pre-configured*** section) ```javascript import Vue from 'vue' @@ -26,6 +31,18 @@ import CustomGoogleAutocomplete from 'vue-custom-google-autocomplete' Vue.use(CustomGoogleAutocomplete) ``` +```vue + +``` + + + ## Props | Name | Type | Default | Description | @@ -43,9 +60,6 @@ options = { deepSearch: true, cors: false, params: {}, - inputClass: '', - inputWrapperClass: '', - mainWrapperClass: '', focus: false } ``` @@ -56,13 +70,11 @@ options = { | `deepSearch` | Boolean | true | Get more informations about selected place (geometry etc..) | | `cors` | Boolean | false | Set to true when project is running locally | | `params` | Object | {} | Google Autocomplete optional parameters | -| `inputClass`. | String | '' | Input class to match with | -| `inputWrapperClass` | String | '' | Input Wrapper class. | -| `mainWrapperClass` | String | '' | Input Wrapper class | | `focus` | Boolean | false | Focus input | | `debounceTime` | Number | 400 | Time in ms before trigger a new Google api call | Params object is useful to refine predictions, for example if you want to get first predictions near to a location within a radius distance in a certain language you can set params like this : + ```javascript params = { location: `${lat},${lng}`, @@ -74,32 +86,25 @@ See [Optional parameters](https://developers.google.com/places/web-service/autoc ## Events -The input part emits three events @blur @focus and @key:value -All three send the Input Element reference -@key values are :escape :tab :enter :up :down +@select event is triggered when a prediction is selected. It send an object with datas about the location -The results part emits two events @loading and @select -@loading is triggered when Google API is requested. -@select is triggered when a prediction is selected it send an object with datas about the location +## Template and slot-scope -## Template and slot - -In order to be more flexbile, you are able to make your own results template with `slot-scope` -This template is accessible via the `results` slot +In order to be more flexbile, you are able to make your own results template with `slot-scope`. ```javascript props = { - firstFetch: Boolean, + inputAttrs: Object, + inputEvents: Object, query: String, results: Array, loading: Boolean, - selectPrediction: Function + selectPrediction: Function, + hasResults: Boolean } ``` -Also two slots are available before and after the input `beforeInput` `afterInput` - -## Examples +## Pre-configured Components ### Bulma dropdown markup. @@ -108,52 +113,24 @@ Also two slots are available before and after the input `beforeInput` `afterInpu ```vue ``` +To customize loading text and no results text, two slots are availables : `loading` and `empty`. +Input is binded with `$attrs` + -### Bootstrap dropdown markup. +### Bootstrap dropdown. Custom Google Autcomplete Example with Bootstrap Dropdown ```vue ``` +To customize loading text and no results text, two slots are availables : `loading` and `empty`. +Input is binded with `$attrs` diff --git a/src/App.vue b/src/App.vue index 1fa8fee..e2f9896 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,13 +2,13 @@ #app(style="padding: 30px;") //- bootstrap-dropdown(:options="options" @select="selected = $event") bulma-dropdown(:options="options" @select="selected = $event") - //- pre {{ selected }} + //- pre {{ selected }} ``` diff --git a/src/App.vue b/src/App.vue index e2f9896..ab09a2f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,7 @@ From 780d8eaf026097e3543c05e26c66a748847bcfa1 Mon Sep 17 00:00:00 2001 From: Damien Date: Thu, 10 Oct 2019 10:54:10 +0200 Subject: [PATCH 4/5] README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1194579..4f494b6 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ Vue.use(CustomGoogleAutocomplete)