chore: clean up vue examples (#4775)

* Add Vue server-side pagination example

* Update package.json and tsconfig for new example

* Use table state functions for pagination

* Use separate ref for goToPageNumber input

* rm lock

* clean up vue examples

* run prettier

* add vue pagination example to docs site

---------

Co-authored-by: Radu Suciu <[email protected]>

Author: KevinVandy

docs/config.json

@@ -347,6 +347,10 @@
           "to": "examples/vue/column-pinning",
           "label": "Column Pinning"
         },
+        {
+          "to": "examples/vue/pagination",
+          "label": "Pagination"
+        },
         {
           "to": "examples/vue/sorting",
           "label": "Sorting"

examples/vue/basic/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/vue/basic/package.json

@@ -8,10 +8,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.25",
+    "vue": "^3.2.33",
     "@tanstack/vue-table": "8.8.2"
   },
   "devDependencies": {
+    "@types/node": "^16.11.27",
     "@vitejs/plugin-vue": "^2.3.3",
     "typescript": "^4.5.4",
     "vite": "^2.9.9",

examples/vue/basic/tsconfig.dev.json

@@ -1,15 +1,19 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "./build/types"
+    "outDir": "./build/types",
+    "types": [
+      "vite/client"
+    ]
   },
-  "files": ["src/main.ts"],
+  "files": [
+    "src/main.ts"
+  ],
   "include": [
     "src"
     // "__tests__/**/*.test.*"
   ]
 }
-
 // {
 //   "composite": true,
 //   "compilerOptions": {
@@ -28,4 +32,4 @@
 //   },
 //   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
 //   "references": [{ "path": "./tsconfig.node.json" }]
-// }
+// }

examples/vue/column-ordering/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "column-ordering",
+  "name": "tanstack-table-example-vue-column-ordering",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
@@ -14,10 +14,9 @@
   },
   "devDependencies": {
     "@types/node": "^16.11.27",
-    "@vitejs/plugin-vue": "^2.3.1",
-    "@vue/tsconfig": "^0.1.3",
-    "typescript": "~4.6.3",
-    "vite": "^2.9.5",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "typescript": "^4.5.4",
+    "vite": "^2.9.9",
     "vue-tsc": "^0.34.7"
   }
-}
+}

examples/vue/pagination/src/env.d.t.s examples/vue/column-ordering/src/env.d.ts

@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-// @ts-ignore
 import App from './App.vue'
 
 createApp(App).mount('#app')

examples/vue/column-ordering/src/main.js

@@ -1,16 +1,35 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "outDir": "./build/types",
+    "types": [
+      "vite/client"
+    ]
   },
-
-  "references": [
-    {
-      "path": "./tsconfig.vite-config.json"
-    }
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src"
+    // "__tests__/**/*.test.*"
   ]
 }
+// {
+//   "composite": true,
+//   "compilerOptions": {
+//     "target": "esnext",
+//     "useDefineForClassFields": true,
+//     "module": "esnext",
+//     "moduleResolution": "node",
+//     "strict": true,
+//     "jsx": "preserve",
+//     "sourceMap": true,
+//     "resolveJsonModule": true,
+//     "isolatedModules": true,
+//     "esModuleInterop": true,
+//     "lib": ["esnext", "dom"],
+//     "skipLibCheck": true
+//   },
+//   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+//   "references": [{ "path": "./tsconfig.node.json" }]
+// }

examples/vue/column-ordering/src/main.ts

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

examples/vue/column-ordering/src/makeData.js

@@ -1,14 +1,7 @@
-import { fileURLToPath, URL } from 'url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue() as any],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-    },
-  },
+  plugins: [vue()],
 })

examples/vue/column-ordering/tsconfig.dev.json

@@ -1,5 +1,5 @@
 {
-  "name": "column-pinning",
+  "name": "tanstack-table-example-vue-column-pinning",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
@@ -14,10 +14,9 @@
   },
   "devDependencies": {
     "@types/node": "^16.11.27",
-    "@vitejs/plugin-vue": "^2.3.1",
-    "@vue/tsconfig": "^0.1.3",
-    "typescript": "~4.6.3",
-    "vite": "^2.9.5",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "typescript": "^4.5.4",
+    "vite": "^2.9.9",
     "vue-tsc": "^0.34.7"
   }
 }

examples/vue/column-ordering/tsconfig.node.json

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

examples/vue/column-ordering/tsconfig.vite-config.json

@@ -1,4 +1,4 @@
 import { createApp } from 'vue'
-// @ts-ignore
 import App from './App.vue'
+
 createApp(App).mount('#app')

examples/vue/column-ordering/vite.config.d.ts

@@ -1,16 +1,35 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "outDir": "./build/types",
+    "types": [
+      "vite/client"
+    ]
   },
-
-  "references": [
-    {
-      "path": "./tsconfig.vite-config.json"
-    }
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src"
+    // "__tests__/**/*.test.*"
   ]
 }
+// {
+//   "composite": true,
+//   "compilerOptions": {
+//     "target": "esnext",
+//     "useDefineForClassFields": true,
+//     "module": "esnext",
+//     "moduleResolution": "node",
+//     "strict": true,
+//     "jsx": "preserve",
+//     "sourceMap": true,
+//     "resolveJsonModule": true,
+//     "isolatedModules": true,
+//     "esModuleInterop": true,
+//     "lib": ["esnext", "dom"],
+//     "skipLibCheck": true
+//   },
+//   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+//   "references": [{ "path": "./tsconfig.node.json" }]
+// }

examples/vue/column-ordering/vite.config.js

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

examples/vue/column-ordering/vite.config.ts

@@ -1,14 +1,7 @@
-import { fileURLToPath, URL } from 'url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue() as any],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-    },
-  },
+  plugins: [vue()],
 })