Merge pull request #92 from MadimetjaShika/vuetify-2.1.15-support

Vuetify 2.1.15 support, official v2.0.0
MadimetjaShika · Dec 31, 2019 · 29aa5bd · 29aa5bd
2 parents ca208d3 + ccabd48
commit 29aa5bd
Show file tree

Hide file tree

Showing 11 changed files with 2,292 additions and 916 deletions.
diff --git a/.babelrc b/.babelrc
@@ -4,11 +4,12 @@
       "modules": false,
       "targets": {
         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
+      },
+      "exclude": ["transform-es2015-object-super"]
     }],
     "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "plugins": ["transform-vue-jsx"],
   "env": {
     "test": {
       "presets": ["env", "stage-2"],

diff --git a/README.md b/README.md
@@ -6,9 +6,9 @@ A Vuetify ready Vue.js (2.x) autosuggest component for the Google Maps Places AP
 
 ## Versions
 
-Latest Stable: 1.1.0
+Latest Beta: 2.0.0-beta.8
 
-Latest Dev Stable: 2.0.0-beta.8
+Latest Stable: 2.0.0
 
 See [releases](https://github.com/MadimetjaShika/vuetify-google-autocomplete/releases) for details.
 
@@ -110,12 +110,13 @@ In your template you can use this syntax:
 
 ### Properties
 
-**Please refer to the [Props API](https://madimetjashika.github.io/vuetify-google-autocomplete/docs/module-vuetify-google-autocomplete.props.html) or [JSDOCS.md file](https://github.com/MadimetjaShika/vuetify-google-autocomplete/blob/dev/JSDOCS.md) for a complete "living" definition of all props supported by this library.**
+**Please refer to the following for a list of all the properties supported by this library:**
 
-> NB: This componenent implements the same props as those specified for [Vuetify Text Fields](https://vuetifyjs.com/components/text-fields) as at v1.0.3. Please see [Vuetify Text Fields](https://vuetifyjs.com/components/text-fields) for a complete list of available props.
+*  [Vuetify text fields](https://vuetifyjs.com/en/components/text-fields), for all vuetify props supported.
+*  [Props API Docs](https://madimetjashika.github.io/vuetify-google-autocomplete/docs/module-vuetify-google-autocomplete.props.html) or [JSDOCS.md file](https://github.com/MadimetjaShika/vuetify-google-autocomplete/blob/dev/JSDOCS.md), for living code documentation on props defined in this library.
 
 ### Events
-The component emits next events, which you can listen in your application:
+The component emits the following events, which you can listen in your application:
 
 #### placechanged
 Gets triggered when the address data got obtained. This data is available on the returned objects:
@@ -125,20 +126,7 @@ Gets triggered when the address data got obtained. This data is available on the
 #### no-results-found
 Gets triggered when a user entered the name of a Place that was not suggested and pressed the Enter key, or the Place Details request failed.
 
-#### focus
-Gets triggered when the autocomplete input field receives focus.
-
-#### blur
-Gets triggered when the autocomplete input field loses focus.
-
-#### inputChange
-Gets triggered every time autocomplete input got changed
-
-#### change
-Gets triggered when the autocomplete results got changed
-
-#### keypress
-Gets triggered when a key gets pressed
+Pleae refer to [Vuetify text field events](https://vuetifyjs.com/en/components/text-fields) for all vuetify supported events.
 
 ### Exposed component functions
 
@@ -163,7 +151,7 @@ Call to update the user input with a new value
 
 ### Example
 
-Please note that you need to provide what method will listen (`v-on:placechanged`) to an event when the address data is obtained.
+Please note that you need to provide the method that will listen (`v-on:placechanged`) to for an event when the address data is obtained. In the example below, the method is ``getAddressData``.
 
 ```html
 <template>

diff --git a/example/components/Home.vue b/example/components/Home.vue
@@ -6,12 +6,27 @@
         <v-card-text>
           <v-text-field label="id" v-model="id"></v-text-field>
           <v-text-field label="append-icon" v-model="appendIcon"></v-text-field>
+          <v-text-field label="append-outer-icon" v-model="appendOuterIcon"></v-text-field>
+
+          <v-text-field label="background-color" v-model="backgroundColor"></v-text-field>
+          <v-text-field label="clear-icon" v-model="clearIcon"></v-text-field>
+          <v-text-field label="color" v-model="color"></v-text-field>
+          <v-text-field label="counter" v-model="counter"></v-text-field>
           <v-text-field label="prepend-icon" v-model="prependIcon"></v-text-field>
           <v-text-field label="classname" v-model="classname"></v-text-field>
           <v-text-field label="Label Text" v-model="labelText"></v-text-field>
           <v-text-field label="Placeholder Text" v-model="placeholderText"></v-text-field>
+
+          <v-switch label="autofocus" v-model="autofocus"></v-switch>
           <v-switch label="Clearable" v-model="clearable" color="secondary" hide-details></v-switch>
+          <v-switch label="Dark" v-model="dark" color="secondary" hide-details></v-switch>
+          <v-switch label="Dense" v-model="dense" color="secondary" hide-details></v-switch>
+          <v-switch label="Error" v-model="error" color="secondary" hide-details></v-switch>
           <v-switch label="Disabled" v-model="disabled" color="secondary" hide-details></v-switch>
+          <v-switch label="Filled" v-model="filled" color="secondary" hide-details></v-switch>
+          <v-switch label="Flat" v-model="flat" color="secondary" hide-details></v-switch>
+          <v-switch label="Outlined" v-model="outlined" color="secondary" hide-details></v-switch>
+          <v-switch label="Reverse" v-model="reverse" color="secondary" hide-details></v-switch>
           <v-switch
             label="Enable Geolocation"
             v-model="enableGeolocation"
@@ -52,7 +67,7 @@
         </v-card-text>
       </v-card>
     </v-navigation-drawer>
-    <v-toolbar color="blue-grey lighten-3" dark fixed app clipped-right>
+    <v-app-bar color="blue-grey lighten-3" dark clipped-right app>
       <v-toolbar-title>Vuetify Google Autocomplete - Home</v-toolbar-title>
       <v-btn @click="navigatePreviousPage()" icon><v-icon>navigate_before</v-icon></v-btn>
       <v-btn @click="navigateNextPage()" icon><v-icon>navigate_next</v-icon></v-btn>
@@ -63,27 +78,40 @@
       <v-btn :href="npmLink" icon>
         <img :src="npmIcon" class="icon icons8-NPM" width="40" height="40">
       </v-btn>
-      <v-toolbar-side-icon @click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>
-    </v-toolbar>
+      <v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon>
+    </v-app-bar>
     <v-content>
       <v-container grid-list-md text-xs-center>
         <v-layout row wrap>
           <v-flex xs12>
-            <v-card>
+            <v-card :dark="dark">
               <v-card-text>
                 <vuetify-google-autocomplete
                   :id="id"
                   :append-icon="appendIcon"
+                  :append-outer-icon="appendOuterIcon"
+                  :autofocus="autofocus"
+                  :backgroundColor="backgroundColor"
+                  :clearIcon="clearIcon"
+                  :color="color"
+                  :counter="counter"
                   :classname="classname"
                   :clearable="clearable"
                   :country="country"
+                  :dark="dark"
+                  :dense="dense"
+                  :error="error"
                   :disabled="disabled"
                   :enable-geolocation="enableGeolocation"
+                  :filled="filled"
+                  :flat="flat"
                   :label="labelText"
+                  :outlined="outlined"
                   :placeholder="placeholderText"
                   :placeName="placeName"
                   :prepend-icon="prependIcon"
                   :required="required"
+                  :reverse="reverse"
                   :types="types"
                   v-on:placechanged="getAddressData"
                   v-on:no-results-found="noResultsFound"
@@ -107,15 +135,18 @@
                 >Generated HTML</v-toolbar-title>
                 <v-spacer></v-spacer>
                 <v-tooltip top>
-                  <v-btn slot="activator"
+                  <template v-slot:activator="{ on }">
+                    <v-btn slot="activator"
                     v-clipboard="outputHtml"
                     @success="handleCodeCopySuccess('HTML')"
                     @error="handleCodeCopyError('HTML')"
                     icon
-                  >
-                  <v-icon>content_copy</v-icon>
-                  </v-btn>
-                  <span>Copy HTML</span>
+                    >
+                    <v-icon>content_copy</v-icon>
+                    </v-btn>
+                    <span>Copy HTML</span>
+                  </template>
+                  <span>Left tooltip</span>
                 </v-tooltip>
               </v-toolbar>
               <v-container>
@@ -129,16 +160,18 @@
                 <v-toolbar-title class="body-2" style="color: white;">Generated JS</v-toolbar-title>
                 <v-spacer></v-spacer>
                 <v-tooltip top>
-                  <v-btn
-                    slot="activator"
-                    v-clipboard="outputJs"
-                    @success="handleCodeCopySuccess('JS')"
-                    @error="handleCodeCopyError('JS')"
-                    icon
-                  >
-                  <v-icon>content_copy</v-icon>
-                  </v-btn>
-                  <span>Copy JS</span>
+                  <template v-slot:activator="{ on }">
+                    <v-btn
+                      slot="activator"
+                      v-clipboard="outputJs"
+                      @success="handleCodeCopySuccess('JS')"
+                      @error="handleCodeCopyError('JS')"
+                      icon
+                    >
+                    <v-icon>content_copy</v-icon>
+                    </v-btn>
+                    <span>Copy JS</span>
+                  </template>
                 </v-tooltip>
               </v-toolbar>
               <v-container>
@@ -159,7 +192,7 @@
         :primary="snackbar.context === 'primary'"
         :secondary="snackbar.context === 'secondary'"
         v-model="snackbar.visible"
-        >{{ snackbar.text }}<v-btn dark flat @click.native="snackbar.visible = false">Close</v-btn>
+        >{{ snackbar.text }}<v-btn dark text @click.native="snackbar.visible = false">Close</v-btn>
       </v-snackbar>
     </v-content>
     <v-footer color="blue-grey lighten-3" class="white--text" app>
@@ -192,19 +225,32 @@ export default {
     },
     address: {},
     appendIcon: 'search',
+    appendOuterIcon: 'search',
+    autofocus: false,
+    clearIcon: '',
+    color: '',
+    counter: '',
+    backgroundColor: '',
     callbackFunction: 'getAddressData',
     classname: '',
     clearable: true,
     country: [],
     countryOptions: countryCodeList,
+    dark: false,
+    dense: false,
+    error: false,
     disabled: false,
     enableGeolocation: false,
+    filled: false,
+    flat: false,
     id: 'map',
     prependIcon: '',
     labelText: 'Search Address',
+    outlined: false,
     placeholderText: '',
     placeName: false,
     required: true,
+    reverse: false,
     types: 'address',
     typesOptions: [
       'geocode',
@@ -236,16 +282,29 @@ export default {
       return `<vuetify-google-autocomplete
   :id="${this.id}"
   :append-icon="${this.appendIcon}"
+  :append-outer-icon="${this.appendOuterIcon}"
+  :autofocus="${this.autofocus}"
+  :clearIcon="${this.clearIcon}"
+  :color="${this.color}"
+  :counter="${this.counter}"
+  :backgroundColor="${this.backgroundColor}"
   :clearable="${this.clearable}"
   :classname="${this.classname}"
   :country="[${this.country}]"
+  :dark="${this.dark}"
+  :dense="${this.dense}"
   :disabled="${this.disabled}"
+  :error="${this.error}"
   :enable-geolocation="${this.enableGeolocation}"
+  :filled="${this.filled}"
+  :flat="${this.flat}"
   :label="${this.labelText}"
+  :outlined="${this.outlined}"
   :placeholder="${this.placeholderText}"
   :placeName="${this.placeName}"
   :prepend-icon="${this.prependIcon}"
   :required="${this.required}"
+  :reverse="${this.reverse}"
   :types="['${this.types}']"
   v-on:placechanged="${this.callbackFunction}">
 </vuetify-google-autocomplete>`;
@@ -256,17 +315,29 @@ export default {
   return {
     address: ${JSON.stringify(this.address)},
     appendIcon: '${this.appendIcon}',
+    appendOuterIcon: '${this.appendOuterIcon}',
+    autofocus: '${this.autofocus}',
+    color: '${this.color}',
+    counter: '${this.counter}',
+    backgroundColor: '${this.backgroundColor}',
     classname: '${this.classname}',
     clearable: '${this.clearable}',
     country: [${this.country}],
+    dark: ${this.dark},
+    dense: ${this.dense},
     disabled: ${this.disabled},
     enableGeolocation: ${this.enableGeolocation},
+    error: ${this.error},
+    filled: ${this.filled},
+    flat: ${this.flat},
     id: '${this.id}',
     labelText: '${this.labelText}',
+    outlined: '${this.outlined}',
     prependIcon: '${this.prependIcon}',
     placeholderText: '${this.placeholderText}',
     placeName: ${this.placeName},
     required: '${this.required}',
+    reverse: '${this.reverse}',
     types: ['${this.types}'],
 
   }

diff --git a/example/components/Page1.vue b/example/components/Page1.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-toolbar color="blue-grey lighten-3" dark fixed app clipped-right>
+    <v-app-bar color="blue-grey lighten-3" dark clipped-right app>
       <v-toolbar-title>Vuetify Google Autocomplete - Page 1</v-toolbar-title>
       <v-btn @click="navigatePreviousPage()" icon><v-icon>navigate_before</v-icon></v-btn>
       <v-btn @click="navigateNextPage()" icon><v-icon>navigate_next</v-icon></v-btn>
@@ -11,8 +11,8 @@
       <v-btn :href="npmLink" icon>
         <img :src="npmIcon" class="icon icons8-NPM" width="40" height="40">
       </v-btn>
-      <v-toolbar-side-icon @click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>
-    </v-toolbar>
+      <v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon>
+    </v-app-bar>
     <v-content>
       <v-container grid-list-md text-xs-center>
         <v-layout row wrap>