Upgrade to vue3

README.md

@@ -17,6 +17,11 @@
 - 可切換成英語 [demo](https://yyc1217.github.io/twzipcode-vue/#英語)
 - callback [demo](https://yyc1217.github.io/twzipcode-vue/#事件)
 
+## Version Info
+
+- **Version 3.x** requires **Vue 3.x**
+- **Version 2.x** requires **Vue 2.x**
+
 ## 安裝 Install
 
 ### npm
@@ -25,31 +30,187 @@ npm install twzipcode-vue --save
 ```
 
 ## 用法 Usage
+
+### Vue 3
+
+#### With `createApp`
+```javascript
+import { createApp } from 'vue'
+import { Zipcode, County, ZipcodeGroupby } from 'twzipcode-vue'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.component('county', County)
+app.component('zipcode', Zipcode)
+app.component('zipcode-groupby', ZipcodeGroupby)
+
+app.mount('#app')
+```
+
+#### With `<script setup>`
+```vue
+<script setup>
+import { ref } from 'vue'
+import { Zipcode, County, ZipcodeGroupby } from 'twzipcode-vue'
+
+const county = ref('臺北市')
+const zipcode = ref('100')
+</script>
+
+<template>
+  <div>
+    <County v-model="county" />
+    <Zipcode v-model="zipcode" :filterByCounty="county" />
+    <ZipcodeGroupby v-model="zipcode" />
+  </div>
+</template>
+```
+
+#### With Options API
 ```javascript
-import Vue from 'vue'
 import { Zipcode, County, ZipcodeGroupby } from 'twzipcode-vue'
 
-// or
-import Zipcode from 'twzipcode-vue/zipcode'
-import ZipcodeGroupby from 'twzipcode-vue/zipcode-groupby'
-import County from 'twzipcode-vue/county'
+export default {
+  components: {
+    Zipcode,
+    County,
+    ZipcodeGroupby
+  },
+  data() {
+    return {
+      county: '臺北市',
+      zipcode: '100'
+    }
+  }
+}
+```
+
+### Vue 2 (Version 2.x)
+
+If you're still using Vue 2, install the previous version:
+
+```bash
+npm install twzipcode-vue@2 --save
+```
+
+```javascript
+import Vue from 'vue'
+import { Zipcode, County, ZipcodeGroupby } from 'twzipcode-vue'
 
 new Vue({
   el: '#app',
   components: {
-
-    // 縣市
     County,
-
-    // 郵遞區號
     Zipcode,
-
-    // 依縣市分組的郵遞區號
     ZipcodeGroupby
   }
 })
 ```
 
+## Components
+
+### County Component
+
+County selector component.
+
+**Props:**
+- `modelValue` (String): Selected county value (default: '臺北市')
+- `textTemplate` (String): Template for display text (default: ':name')
+- `valueTemplate` (String): Template for value (default: ':id')
+- `id` (String): HTML id attribute (default: 'twzipcode__county')
+- `name` (String): HTML name attribute (default: 'county')
+- `textLocale` (String): Text locale language (default: 'zh-tw')
+- `valueLocale` (String): Value locale language (default: 'zh-tw')
+
+**Events:**
+- `update:modelValue`: Emitted when selection changes
+
+### Zipcode Component
+
+Zipcode selector component with optional county filtering.
+
+**Props:**
+- `modelValue` (String): Selected zipcode value (default: '100')
+- `filterByCounty` (String): Filter zipcodes by county
+- `textTemplate` (String): Template for display text (default: ':zipcode :county :city')
+- `valueTemplate` (String): Template for value (default: ':zipcode')
+- `id` (String): HTML id attribute (default: 'twzipcode__zipcode')
+- `name` (String): HTML name attribute (default: 'zipcode')
+- `textLocale` (String): Text locale language (default: 'zh-tw')
+- `valueLocale` (String): Value locale language (default: 'zh-tw')
+
+**Events:**
+- `update:modelValue`: Emitted when selection changes
+
+### ZipcodeGroupby Component
+
+Zipcode selector component with options grouped by county.
+
+**Props:**
+- `modelValue` (String): Selected zipcode value (default: '100')
+- `textTemplate` (String): Template for display text (default: ':city')
+- `valueTemplate` (String): Template for value (default: ':zipcode')
+- `id` (String): HTML id attribute (default: 'twzipcode__zipcode--groupby')
+- `name` (String): HTML name attribute (default: 'zipcode')
+- `textLocale` (String): Text locale language (default: 'zh-tw')
+- `valueLocale` (String): Value locale language (default: 'zh-tw')
+
+**Events:**
+- `update:modelValue`: Emitted when selection changes
+
+## Examples
+
+### Basic Usage
+```vue
+<template>
+  <div>
+    <County v-model="county" />
+    <Zipcode v-model="zipcode" :filterByCounty="county" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { County, Zipcode } from 'twzipcode-vue'
+
+const county = ref('臺北市')
+const zipcode = ref('100')
+</script>
+```
+
+### English Locale
+```vue
+<template>
+  <County v-model="county" textLocale="en" valueLocale="en" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { County } from 'twzipcode-vue'
+
+const county = ref('Taipei')
+</script>
+```
+
+### Custom Templates
+```vue
+<template>
+  <Zipcode 
+    v-model="zipcode" 
+    textTemplate=":zipcode - :city"
+    valueTemplate=":id"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Zipcode } from 'twzipcode-vue'
+
+const zipcode = ref('100')
+</script>
+```
+
 ## Showcases
 [https://yyc1217.github.io/twzipcode-vue/](https://yyc1217.github.io/twzipcode-vue/)
 
@@ -64,7 +225,10 @@ npm run dev
 
 # run tests
 npm run test
+
+# build for production
+npm run prod
 ```
 
 ## 資料來源 Data
-[twzipcode-data](https://github.com/yyc1217/twzipcode-data)
+[twzipcode-data](https://github.com/yyc1217/twzipcode-data)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "twzipcode-vue",
   "description": "中華郵政郵遞區號 Vue components",
-  "version": "2.2.2",
+  "version": "3.0.0",
   "author": "Yeh-Yung <yyc1217@gmail.com>",
   "main": "dist/twzipcode.umd.js",
   "module": "src/index.js",
@@ -33,32 +33,31 @@
   },
   "license": "MIT",
   "dependencies": {
-    "vue": "^2.6.14"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.5",
-    "@vue/test-utils": "^1.2.1",
+    "@babel/core": "^7.24.0",
+    "@babel/plugin-transform-runtime": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@vue/test-utils": "^2.4.1",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-loader": "8.2.3",
-    "css-loader": "^6.2.0",
-    "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^5.3.1",
-    "jest": "^27.0.4",
-    "mini-css-extract-plugin": "^2.0.0",
-    "node-sass": "^7.0.1",
-    "sass-loader": "^12.1.0",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.10.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.6.0",
+    "jest": "^29.7.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "sass": "^1.71.0",
+    "sass-loader": "^14.1.0",
     "should": "^13.2.3",
-    "standard": "16.0.4",
+    "standard": "17.1.0",
     "twzipcode-data": "^2.0.0",
-    "vue-jest": "^3.0.6",
-    "vue-loader": "^17.0.0",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^4.1.0",
-    "webpack-merge": "^5.8.0"
+    "vue-jest": "^5.0.0",
+    "vue-loader": "^17.4.2",
+    "webpack": "^5.92.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
+    "webpack-merge": "^5.10.0"
   },
   "standard": {
     "globals": [

src/components/counties.vue

@@ -1,10 +1,10 @@
 <template>
 
     <select class="twzipcode twzipcode__county"
-            :value="value"
+            :value="modelValue"
             :id="id"
             :name="name"
-            @change="$emit('input', $event.target.value)">
+            @change="$emit('update:modelValue', $event.target.value)">
         <option v-for="(county, i) in counties"
                 :key="'option-' + i"
                 :value="county.value">{{ county.text }}</option>
@@ -36,11 +36,12 @@ export default {
             type: String,
             default: 'county'
         },
-        value: {
+        modelValue: {
             type: String,
             default: '臺北市'
         }
     },
+    emits: ['update:modelValue'],
 
     data () {
         return {}
@@ -55,4 +56,4 @@ export default {
     }
 }
 
-</script>
+</script>

src/components/zipcodes.groupby.vue

@@ -1,10 +1,10 @@
 <template>
 
     <select class="twzipcode twzipcode__zipcode twzipcode__zipcode--groupby"
-            :value="value"
+            :value="modelValue"
             :id="id"
             :name="name"
-            @change="$emit('input', $event.target.value)">
+            @change="$emit('update:modelValue', $event.target.value)">
 
         <optgroup v-for="(zipcodes, county) in dataList"
                   :key="'optgroup-' + county"
@@ -45,11 +45,12 @@ export default {
             type: String,
             default: 'zipcode'
         },
-        value: {
+        modelValue: {
             type: String,
             default: '100'
         },
     },
+    emits: ['update:modelValue'],
     data () {
         return {}
     },
@@ -74,4 +75,4 @@ export default {
     }
 }
 
-</script>
+</script>