No Vuex

.vscode/settings.json

@@ -1,4 +1,8 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-	"typescript.tsdk": "./node_modules/typescript/lib"
+	"typescript.tsdk": "./node_modules/typescript/lib",
+	"eslint.validate": [
+		"javascript",
+		"javascriptreact"
+	]
 }

karma.conf.js

@@ -84,7 +84,7 @@ module.exports = function (config) {
 
 		// Continuous Integration mode
 		// if true, Karma captures browsers, runs the tests and exits
-		singleRun: process.env.CI ? true : false,
+		singleRun: true,
 
 		// Concurrency level
 		// how many browser should be started simultaneous

package.json

@@ -25,7 +25,7 @@
     "dev": "poi",
     "sync:db": "ts-node ./scripts/sync-db.ts",
     "sync": "cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\"} npm-run-all sync:*",
-    "test:single": "npm run lint && karma start --single-run",
+    "test:watch": "npm run lint && karma start --no-single-run",
     "test": "npm run lint && karma start"
   },
   "repository": {
@@ -53,20 +53,20 @@
     "last 3 versions"
   ],
   "peerDependencies": {
-    "vue": "2"
+    "vue": ">=2.3.0"
   },
   "devDependencies": {
     "@types/chai": "^4.0.3",
     "@types/copy-webpack-plugin": "^4.0.0",
-    "@types/extract-text-webpack-plugin": "^2.1.0",
+    "@types/extract-text-webpack-plugin": "^3.0.0",
     "@types/mocha": "^2.2.41",
-    "@types/node": "6",
+    "@types/node": "8",
     "@types/string-similarity": "^1.2.0",
     "@types/webpack": "^3.0.8",
     "autoprefixer": "^7.1.2",
-    "avoriaz": "^3.2.0",
+    "avoriaz": "^6.0.1",
     "babel-core": "^6.25.0",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.0.1",
     "babel-loader": "^7.1.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -87,7 +87,7 @@
     "karma-mocha-reporter": "^2.2.3",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.4",
-    "mocha": "^3.5.0",
+    "mocha": "^4.0.1",
     "node-sass": "^4.5.3",
     "npm-run-all": "^4.0.2",
     "poi": "^9.2.4",
@@ -96,23 +96,21 @@
     "pug": "^2.0.0-rc.3",
     "rimraf": "^2.6.1",
     "sass-loader": "^6.0.6",
-    "style-loader": "^0.18.2",
-    "ts-loader": "^2.3.2",
+    "style-loader": "^0.19.0",
+    "ts-loader": "^3.1.1",
     "ts-node": "^3.3.0",
     "tslint": "^5.6.0",
     "tslint-config-gluons": "^1.0.5",
     "typescript": "^2.4.2",
-    "vue": "^2.4.2",
-    "vue-class-component": "^5.0.2",
-    "vue-loader": "^13.0.4",
-    "vue-property-decorator": "^5.2.1",
-    "vue-template-compiler": "^2.4.2",
-    "webpack": "^3.5.4",
+    "vue": "^2.5.5",
+    "vue-class-component": "^6.0.0",
+    "vue-loader": "^13.5.0",
+    "vue-template-compiler": "^2.5.5",
+    "webpack": "^3.7.1",
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
     "array-filter": "^1.0.0",
-    "string-similarity": "^1.2.0",
-    "vuex": "^2.3.1"
+    "string-similarity": "^1.2.0"
   }
 }

src/components/AddressForm.vue

@@ -2,49 +2,105 @@
 .typeahead-address-form
 	.row
 		.col
-			typeahead-input(target='district', :label='subdistrictLabel')
+			typeahead-input(
+				:dataSource='dataSource',
+				:data='district',
+				target='district',
+				:label='subdistrictLabel',
+				@itemselect='onItemSelect'
+			)
 		.col
-			typeahead-input(target='amphoe', :label='districtLabel')
+			typeahead-input(
+				:dataSource='dataSource',
+				:data='amphoe',
+				target='amphoe',
+				:label='districtLabel',
+				@itemselect='onItemSelect'
+			)
 	.row
 		.col
-			typeahead-input(target='province', :label='provinceLabel')
+			typeahead-input(
+				:dataSource='dataSource',
+				:data='province',
+				target='province',
+				:label='provinceLabel',
+				@itemselect='onItemSelect'
+			)
 		.col
-			typeahead-input(target='zipcode', :label='zipcodeLabel')
+			typeahead-input(
+				:dataSource='dataSource',
+				:data='zipcode',
+				target='zipcode',
+				:label='zipcodeLabel',
+				@itemselect='onItemSelect'
+			)
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import { Prop } from 'vue-property-decorator';
 
-import store from '@/store';
-
-import AddressEntry from '@/interface/AddressEntry';
 import { loadDataSource } from '@/lib/datasource-utils';
 import TypeaheadInput from './TypeaheadInput.vue';
 
 @Component({
 	name: 'address-form',
+	props: {
+		subdistrictLabel: {
+			type: String,
+			default: 'ตำบล/แขวง'
+		},
+		districtLabel: {
+			type: String,
+			default: 'อำเภอ/เขต'
+		},
+		provinceLabel: {
+			type: String,
+			default: 'จังหวัด'
+		},
+		zipcodeLabel: {
+			type: String,
+			default: 'รหัสไปรษณีย์'
+		}
+	},
 	components: {
 		TypeaheadInput
 	},
-	store
+	data() {
+		return {
+			dataSource: [],
+			district: '',
+			amphoe: '',
+			province: '',
+			zipcode: ''
+		};
+	}
 })
 export default class AddressForm extends Vue {
+	// Data
+	dataSource: AddressEntry[];
+	district: string;
+	amphoe: string;
+	province: string;
+	zipcode: string;
+
 	// Props
-	@Prop({ default: 'ตำบล/แขวง' })
 	subdistrictLabel: string;
-	@Prop({ default: 'อำเภอ/เขต' })
 	districtLabel: string;
-	@Prop({ default: 'จังหวัด' })
 	provinceLabel: string;
-	@Prop({ default: 'รหัสไปรษณีย์' })
 	zipcodeLabel: string;
 
 	// Hooks
 	created() {
-		let dataSource: AddressEntry[] = loadDataSource();
-		this.$store.dispatch('updateDataSource', dataSource);
+		this.dataSource = loadDataSource();
+	}
+
+	// Methods
+	onItemSelect(item: AddressEntry) {
+		this.district = item.district;
+		this.amphoe = item.amphoe;
+		this.province = item.province;
+		this.zipcode = item.zipcode.toString();
 	}
 }
 </script>

src/components/Autocomplete.vue

@@ -13,21 +13,34 @@ ul.typeahead-autocomplete(:style='style', v-if='hasData')
 <script lang="ts">
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import { Prop } from 'vue-property-decorator';
 
-import AddressEntry from '@/interface/AddressEntry';
 import { addressToString, getDataItemKeys } from '@/lib/utils';
 
 @Component({
-	name: 'autocomplete'
+	name: 'autocomplete',
+	props: {
+		query: String,
+		possibles: Array,
+		target: {
+			type: String,
+			required: true
+		},
+		maxHeight: {
+			type: Number,
+			default: 200
+		},
+		selectedIndex: {
+			type: Number,
+			default: -1
+		}
+	}
 })
 export default class Autocomplete extends Vue {
 	// Props
-	@Prop({ required: true })
+	query: string;
+	possibles: AddressEntry[];
 	target: string; // A property name in data item.
-	@Prop({ default: 200 })
 	maxHeight: number; // Max autocomplete height.
-	@Prop({ default: -1 })
 	selectedIndex: number;
 
 	// Computed
@@ -36,14 +49,11 @@ export default class Autocomplete extends Vue {
 			'max-height': `${this.maxHeight}px`
 		};
 	}
-	get query(): string {
-		return this.$store.state[this.target].value;
-	}
 	get hasData(): boolean {
-		return this.$store.getters[`${this.target}/hasAutocomplete`];
+		return this.possibles && (this.possibles.length > 0);
 	}
 	get autocompleteList() {
-		let autocomplete: AddressEntry[] = this.$store.getters[`${this.target}/autocomplete`];
+		let autocomplete: AddressEntry[] = this.possibles;
 
 		return autocomplete.map(item => {
 			return {
@@ -54,11 +64,8 @@ export default class Autocomplete extends Vue {
 	}
 
 	// Methods
-	onItemClick(data: AddressEntry): void {
-		let keys: string[] = getDataItemKeys(data);
-		keys.forEach(key => {
-			this.$store.dispatch(`${key}/updateValue`, data[key]);
-		});
+	onItemClick(item: AddressEntry): void {
+		this.$emit('itemclick', item);
 	}
 	changeSelectedIndex(index: number): void {
 		if ((index >= 0) && (index < this.autocompleteList.length)) {