Skip to content
This repository has been archived by the owner on Mar 9, 2024. It is now read-only.

Commit

Permalink
feat: upgrade to Vuetify 2 support
Browse files Browse the repository at this point in the history 
upgrade to Vuetify 2
  • Loading branch information
@Kocal
Kocal committed Oct 13, 2019
2 parents 4dedd5c + 5dadf93 commit 2d8f1ac
Show file tree
Hide file tree
Showing 9 changed files with 268 additions and 95 deletions.
1 change: 1 addition & 0 deletions .nvmrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
10
3 changes: 1 addition & 2 deletions .travis.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ dist: trusty

language: node_js
node_js:
- "8"

cache:
yarn: true
yarn: true

before_install:
- curl -o- -L https://yarnpkg.com/install.sh | bash
Expand Down
138 changes: 70 additions & 68 deletions docs/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,105 @@
<template>
<v-app>
<v-app-bar app dark fixed color="primary">
<v-toolbar-title>Vuetify Algolia Places</v-toolbar-title>
<v-spacer />
<v-toolbar-items>
<v-btn text href="https://github.com/Kocal/vuetify-algolia-places" target="_blank">
GitHub
<v-icon right>open_in_new</v-icon>
</v-btn>
<v-btn text href="https://community.algolia.com/places/" target="_blank">
Algolia Places
<v-icon right>open_in_new</v-icon>
</v-btn>
</v-toolbar-items>
</v-app-bar>
<v-content>
<v-toolbar app dark fixed color="primary">
<v-toolbar-title>Vuetify Algolia Places</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn flat href="https://github.com/Kocal/vuetify-algolia-places" target="_blank">
GitHub
<v-icon right>open_in_new</v-icon>
</v-btn>
<v-btn flat href="https://community.algolia.com/places/" target="_blank">
Algolia Places
<v-icon right>open_in_new</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-container fluid grid-list-lg style="max-width: 1920px">
<v-layout justify-center row wrap>
<v-flex xs12>
<v-container>
<h2 class="display-2 text-xs-center">Vuetify Algolia Places</h2>
<vuetify-algolia-places
v-model="place"
v-bind="options"
class="mt-5 mb-2"
@error="onError"
@clear="onClear"
/>
</v-container>
</v-flex>
<v-flex xs6>
<v-container style="max-width:1920px" fluid>
<v-row justify="center">
<v-col md="10" lg="8" xl="6">
<h2 class="display-2 text-center">Vuetify Algolia Places</h2>
<vuetify-algolia-places
v-model="place"
v-bind="options"
class="mt-10 mb-4"
@error="onError"
@clear="onClear"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="6">
<v-card>
<v-card-title>
<h3 class="headline mb-0">Configuration</h3>
</v-card-title>
<v-card-text>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-row>
<v-col cols="12" xs="12" sm="6" md="4">
<v-select v-model="options.type" :items="types" label="Type" clearable />
</v-flex>
<v-flex xs12 sm6 md4>
</v-col>
<v-col cols="12" xs="12" sm="6" md="4">
<v-select v-model="options.language" :items="languages" label="Language" clearable />
</v-flex>
<v-flex xs12 sm6 md4>
</v-col>
<v-col cols="12" xs="12" sm="6" md="4">
<v-select v-model="options.countries" :items="countries" multiple label="Countries" />
</v-flex>
<v-flex xs12 sm6 md4>
</v-col>
<v-col cols="12" xs="12" sm="6" md="4">
<v-text-field v-model="options.aroundLatLng" label="Around Lat/Lng" placeholder="12.232,23.1" />
</v-flex>
<v-flex xs12 sm6 md4>
</v-col>
<v-col cols="12" xs="12" sm="6" md="4">
<v-text-field v-model="options.aroundRadius" type="number" label="Around radius (meters)" />
</v-flex>
<v-flex xs12 sm6 md4>
</v-col>
<v-col cols="12" xs="12" sm="6" md="4">
<v-switch v-model="options.aroundLatLngViaIp" label="Around Lat/Lng via IP" color="primary" />
</v-flex>
<v-flex xs12 sm6 md4>
</v-col>
<v-col cols="12" xs="12" sm="6" md="4">
<v-text-field v-model="options.debounce" label="Debounce (ms)" type="number" min="0" />
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
<v-card-title>
<h4 class="headline mb-2">Vuetify props</h4>
</v-card-title>
<v-card-text>
<v-layout row wrap>
<v-flex md4 sm12>
<v-row>
<v-col cols="12" md="4" sm="12">
<v-switch v-model="options.disabled" label="Disabled" color="primary" hide-details />
<v-switch v-model="options.clearable" label="Clearable" color="primary" hide-details />
<v-switch v-model="options.singleLine" label="Single line" color="primary" hide-details />
<v-switch v-model="options.box" label="Style box" color="primary" hide-details />
<v-switch v-model="options.filled" label="Style filled" color="primary" hide-details />
<v-switch v-model="options.solo" label="Style solo" color="primary" hide-details />
</v-flex>
<v-flex md8 sm12>
</v-col>
<v-col cols="12" md8 sm="12">
<v-text-field v-model="options.label" label="Label" />
<v-select v-model="options.appendIcon" :items="appendIcons" label="Append icon">
<template slot="item" slot-scope="{ item }">
<v-icon>{{ item }}</v-icon>
<span class="ml-2">{{ item }}</span>
</template>
</v-select>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-flex>
<v-flex xs6>
<v-layout column>
<v-flex>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-row>
<v-col class="pt-0">
<h2 class="headline mb-3">Installation and usage</h2>
<code class="pa-3 mb-3 d-block">{{ installationCode }}</code>
<code class="pa-3 mb-3 d-block">{{ usageCode }}</code>
</v-flex>
<v-flex v-if="place">
</v-col>
</v-row>
<v-row v-if="place">
<v-col>
<h2 class="headline mb-3">Place</h2>
<code class="mb-3 pa-3 d-block">{{ JSON.stringify(place, null, 2) }}</code>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
Expand Down Expand Up @@ -127,7 +129,7 @@ export default {
disabled: false,
clearable: false,
singleLine: false,
box: false,
filled: false,
solo: true,
label: 'Search a place',
appendIcon: 'location_on',
Expand Down Expand Up @@ -196,8 +198,8 @@ Vue.use(VuetifyAlgoliaPlaces, {
if (this.options.singleLine) {
code += `\n single-line`;
}
if (this.options.box) {
code += `\n box`;
if (this.options.filled) {
code += `\n filled`;
}
if (this.options.solo) {
code += `\n solo`;
Expand All @@ -214,14 +216,14 @@ Vue.use(VuetifyAlgoliaPlaces, {
delete this.place.rawAnswer;
}
},
'options.box': function(box) {
if (box) {
'options.filled': function(filled) {
if (filled) {
this.options.solo = false;
}
},
'options.solo': function(solo) {
if (solo) {
this.options.box = false;
this.options.filled = false;
}
},
},
Expand Down
5 changes: 2 additions & 3 deletions docs/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/src/stylus/app.styl';
import VuetifyAlgoliaPlaces from '..';
import vuetify from './vuetify';

import App from './App.vue';

Vue.use(Vuetify);
Vue.use(VuetifyAlgoliaPlaces);

/* eslint-disable no-new */
new Vue({
vuetify,
el: '#app',
render: h => h(App),
});
10 changes: 10 additions & 0 deletions docs/vuetify.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
icons: {
iconfont: 'md',
},
});
12 changes: 8 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^6.0.0",
"css-loader": "^3.0.0",
"deepmerge": "^4.1.1",
"eslint": "^5.13.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^6.0.0",
Expand All @@ -48,19 +49,22 @@
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-vue": "^5.1.0",
"fibers": "^4.0.1",
"html-webpack-plugin": "^3.2.0",
"husky": "^3.0.0",
"places.js": "^1.15.4",
"prettier": "^1.16.3",
"pretty-quick": "^1.10.0",
"sass": "^1.23.0",
"sass-loader": "^8.0.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue": "^2.6.10",
"vue-loader": "^15.6.2",
"vue-template-compiler": "^2.5.22",
"vuetify": "^1.4.4",
"vuetify-loader": "^1.2.1",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"vuetify": "^2.1.3",
"vuetify-loader": "^1.3.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
Expand Down
14 changes: 7 additions & 7 deletions src/VuetifyAlgoliaPlaces.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@
@input="onInput"
@click:clear="onClear"
>
<template v-slot:item="{ item }">
<template v-if="typeof item !== 'object'">
<v-list-tile-content>{{ item }}</v-list-tile-content>
<template slot="item" slot-scope="data">
<template v-if="typeof data.item !== 'object'">
<v-list-item-content>{{ data.item }}</v-list-item-content>
</template>
<template v-else>
<v-list-tile-content>
<slot name="highlight" :highlight="item.highlight">
<v-list-tile-title v-html="item.highlight" />
<v-list-item-content>
<slot name="highlight" :highlight="data.item.highlight">
<v-list-item-title v-html="data.item.highlight" />
</slot>
</v-list-tile-content>
</v-list-item-content>
</template>
</template>
</v-autocomplete>
Expand Down
16 changes: 14 additions & 2 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,20 @@ const config = {
exclude: resolve('node_modules'),
},
{
test: /\.styl(us)?$/,
use: ['vue-style-loader', 'css-loader', 'stylus-loader'],
test: /\.s[ac]ss$/i,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
},
},
},
],
},
],
},
Expand Down
Loading

0 comments on commit 2d8f1ac

Please sign in to comment.