refactor: monorepo with ts support

.github/workflows/deploy.yml

@@ -7,23 +7,32 @@ on:
 jobs:
   deploy:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20]
     permissions:
       pages: write
       id-token: write
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
+          version: 9
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
-          cache: npm
-      - run: npm ci
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
       - name: Build
-        run: npm run docs:build
+        run: pnpm build
+      - name: Build app
+        run: pnpm --filter docs build
       - uses: actions/configure-pages@v2
       - uses: actions/upload-pages-artifact@v1
         with:

.gitignore

@@ -17,7 +17,9 @@ coverage
 /cypress/videos/
 /cypress/screenshots/
 
-docs/.vitepress/cache
+# vitepress
+.temp
+cache
 
 Icon**
 
@@ -29,4 +31,4 @@ Icon**
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?

.npmrc

@@ -0,0 +1,3 @@
+registry=https://registry.npmjs.org/
+ignore-workspace-root-check=true
+include-workspace-root=true

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "cSpell.words": [
     "dropdown",
@@ -16,4 +16,4 @@
     "tabindex",
     "typeof"
   ]
-}
+}

README.md

@@ -8,10 +8,6 @@ International Telephone Input with Vue.
 
 [![npm](https://img.shields.io/npm/dt/vue-tel-input.svg)](https://www.npmjs.com/package/vue-tel-input) [![stars](https://img.shields.io/github/stars/iamstevendao/vue-tel-input.svg)](https://github.com/iamstevendao/vue-tel-input)
 
-<p align="center">
-<img width="600" alt="In-action GIF" src="https://thumbs.gfycat.com/EducatedPoliteBluefintuna-size_restricted.gif"/>
-</p>
-
 ## Documentation and Demo
 
 [Visit the website](https://iamstevendao.com/vue-tel-input/)
@@ -29,7 +25,13 @@ International Telephone Input with Vue.
 - Install the plugin:
 
   ```sh
-  npm install vue-tel-input
+  npm install vue-tel-input libphonenumber-js
+
+  # yarn 
+  yarn add vue-tel-input libphonenumber-js
+
+  # pnpm
+  pnpm add vue-tel-input libphonenumber-js
   ```
 
 - Add the plugin into your app:

docs/.vitepress/config.ts

@@ -35,7 +35,6 @@ export default defineConfig({
       {
         text: 'Others',
         items: [
-          { text: 'Typescript Support', link: 'others/typescript-support' },
           { text: 'v3', link: 'others/v3' },
           { text: 'v2', link: 'others/v2' },
           { text: 'Credits', link: 'others/credits' },

docs/.vitepress/theme/Layout.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useData } from 'vitepress'
 import Home from './components/Home.vue'
 import DefaultTheme from 'vitepress/theme'

docs/.vitepress/theme/components/FormInput.vue

@@ -22,30 +22,14 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'FormInput',
-  props: {
-    model: {
-      type: Object,
-    },
-    modelName: {
-      type: String,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'input',
-    },
-    items: {
-      type: Array,
-      default: () => [],
-    },
-  },
-};
+<script lang="ts" setup>
+const { model, modelName, label = '', type = 'input', items = [] } = defineProps<{
+  model: Record<string, any>;
+  modelName: string;
+  label?: string;
+  type?: 'input' | 'checkbox' | 'radio';
+  items?: string[];
+}>();
 </script>
 
 <style scoped>