🎉 Init

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{*.{coffee,cson,yml,yaml,jade,pug},{package,bower}.json}]
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1 @@
+src/lib/JQL.js

.eslintrc.json

@@ -0,0 +1,5 @@
+{
+	"root": true,
+	"parser": "babel-eslint",
+	"extends": "gluons/vue"
+}

.gitignore

@@ -0,0 +1,104 @@
+
+# Created by https://www.gitignore.io/api/node,linux,windows
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.gitignore.io/api/node,linux,windows
+
+# Dist
+dist/

.gitmodules

@@ -0,0 +1,8 @@
+[submodule "jquery.Thailand.js"]
+	path = dependencies/jquery.Thailand.js
+	url = https://github.com/earthchie/jquery.Thailand.js.git
+	branch = master
+[submodule "JQL"]
+	path = dependencies/JQL
+	url = https://github.com/earthchie/JQL.js.git
+	branch = master

dev/App.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+#app
+	address-form
+</template>
+
+<script>
+export default {
+	name: 'app'
+};
+</script>
+
+<style lang="scss">
+#app {
+	margin: 3rem auto 0;
+	width: 80%;
+}
+</style>

dev/main.js

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import VueThailandAddress from '@/index.js';
+import App from './App.vue';
+
+Vue.use(VueThailandAddress);
+
+new Vue({
+	el: '#app',
+	render: h => h(App)
+});

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "vue-thailand-address",
+  "version": "0.0.1",
+  "description": "Thai address input for Vue.",
+  "main": "",
+  "scripts": {
+    "build": "poi build",
+    "dev": "poi --config ./poi.dev.config.js",
+    "sync:db": "node ./scripts/sync-db.js",
+    "sync:jql": "node ./scripts/sync-JQL.js",
+    "sync": "npm-run-all sync:*",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gluons/vue-thailand-address.git"
+  },
+  "keywords": [
+    "vue",
+    "vuejs",
+    "vue-component",
+    "thailand",
+    "thai",
+    "address",
+    "addresses"
+  ],
+  "author": "Saran Tanpituckpong <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gluons/vue-thailand-address/issues"
+  },
+  "homepage": "https://github.com/gluons/vue-thailand-address",
+  "peerDependencies": {
+    "vue": "2"
+  },
+  "devDependencies": {
+    "babel-eslint": "^7.2.3",
+    "chalk": "^2.0.1",
+    "eslint": "^4.3.0",
+    "eslint-config-gluons": "^2.0.2",
+    "eslint-plugin-vue": "^2.1.0",
+    "fs-extra": "^4.0.0",
+    "node-sass": "^4.5.3",
+    "npm-run-all": "^4.0.2",
+    "poi": "^9.1.6",
+    "pug": "^2.0.0-rc.2",
+    "sass-loader": "^6.0.6"
+  },
+  "dependencies": {
+    "debounce-fn": "^1.0.0",
+    "es6-promise": "^4.1.1",
+    "string-similarity": "^1.2.0"
+  }
+}

poi.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+	entry: './src/index.js',
+	autoprefixer: {
+		browserslist: [
+			'> 1%',
+			'last 2 versions',
+			'not ie <= 8'
+		]
+	},
+	html: false,
+	minimize: false
+};

poi.dev.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	entry: './dev/main.js',
+	html: {
+		title: 'Vue Thailand address',
+		description: 'Thai address input for Vue.'
+	}
+};

scripts/sync-JQL.js

@@ -0,0 +1,17 @@
+const { copy } = require('fs-extra');
+const { resolve } = require('path');
+const { green } = require('chalk');
+
+const srcPath = resolve(__dirname, '../dependencies/JQL/src/index.js');
+const destPath = resolve(__dirname, '../src/lib/JQL.js');
+
+copy(srcPath, destPath, {
+	overwrite: true,
+	preserveTimestamps: true
+})
+	.then(() => {
+		console.log(green('Sync JQL success.'));
+	})
+	.catch(err => {
+		console.error(err);
+	});

scripts/sync-db.js

@@ -0,0 +1,17 @@
+const { copy } = require('fs-extra');
+const { resolve } = require('path');
+const { green } = require('chalk');
+
+const srcPath = resolve(__dirname, '../dependencies/jquery.Thailand.js/jquery.Thailand.js/database/db.json');
+const destPath = resolve(__dirname, '../src/data/db.json');
+
+copy(srcPath, destPath, {
+	overwrite: true,
+	preserveTimestamps: true
+})
+	.then(() => {
+		console.log(green('Sync database success.'));
+	})
+	.catch(err => {
+		console.error(err);
+	});

src/components/AddressForm.vue

@@ -0,0 +1,59 @@
+<template lang="pug">
+.typeahead-address-form
+	.row
+		.col
+			typeahead-input(label='ตำบล/เขต')
+		.col
+			typeahead-input(label='อำเภอ/แขวง')
+	.row
+		.col
+			typeahead-input(label='จังหวัด')
+		.col
+			typeahead-input(label='รหัสไปรษณีย์')
+</template>
+
+<script>
+import { loadDB } from '@/lib/datasource-utils';
+import TypeaheadInput from './TypeaheadInput';
+
+export default {
+	name: 'address-form',
+	components: {
+		TypeaheadInput
+	},
+	data() {
+		return {
+			DB: null
+		};
+	},
+	async created() {
+		let DB = await loadDB();
+		this.DB = DB;
+	}
+};
+</script>
+
+<style lang="scss">
+.typeahead-address-form {
+	width: 100%;
+
+	.row {
+		display: block;
+
+		&:not(:first-child) {
+			margin-top: 20px;
+		}
+		.col {
+			display: inline-block;
+			width: 49%;
+
+			&:not(:last-child) {
+				margin-right: .5%;
+			}
+			&:not(:first-child) {
+				margin-left: .5%;
+			}
+		}
+	}
+}
+</style>

src/components/Autocomplete.vue

@@ -0,0 +1,43 @@
+<template lang="pug">
+ul.typeahead-autocomplete(v-if='hasData')
+	li(v-for='item in list', :key='item') {{ item }}
+</template>
+
+<script>
+export default {
+	name: 'autocomplete',
+	data() {
+		return {
+			list: []
+		};
+	},
+	computed: {
+		hasData() {
+			return this.list.length > 0;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.typeahead-autocomplete {
+	border: 1px solid #d5d5d5;
+	box-sizing: border-box;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	z-index: 100;
+
+	li {
+		background: white;
+		border-bottom: 1px solid #d5d5d5;
+		cursor: pointer;
+		padding: 10px 5px;
+
+		&:hover {
+			background-color: #f5f5f5;
+		}
+	}
+}
+</style>