chore: update deps

.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "@antfu"
+  "extends": [
+    "@antfu",
+    "@unocss"
+  ]
 }

package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@7.30.3",
+  "packageManager": "pnpm@8.2.0",
   "scripts": {
     "build": "vite-ssg build",
     "dev": "vite --port 3333 --open",
@@ -17,57 +17,58 @@
     "sizecheck": "npx vite-bundle-visualizer"
   },
   "dependencies": {
-    "@unocss/reset": "^0.50.6",
+    "@unocss/reset": "^0.51.3",
     "@vueuse/core": "^9.13.0",
     "@vueuse/head": "^1.1.23",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.33",
+    "pinia": "^2.0.34",
     "vue": "^3.2.47",
     "vue-demi": "^0.13.11",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.37.0",
+    "@antfu/eslint-config": "^0.38.4",
     "@iconify-json/carbon": "^1.1.16",
     "@intlify/unplugin-vue-i18n": "^0.10.0",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/nprogress": "^0.2.0",
+    "@unocss/eslint-config": "^0.51.4",
     "@vitejs/plugin-vue": "^4.1.0",
-    "@vue-macros/volar": "^0.9.4",
+    "@vue-macros/volar": "^0.9.5",
     "@vue/test-utils": "^2.3.2",
     "critters": "^0.0.16",
     "cross-env": "^7.0.3",
-    "cypress": "^12.8.1",
+    "cypress": "^12.9.0",
     "cypress-vite": "^1.3.1",
-    "eslint": "^8.36.0",
+    "eslint": "^8.38.0",
-    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-cypress": "^2.13.2",
     "https-localhost": "^4.7.1",
-    "lint-staged": "^13.2.0",
+    "lint-staged": "^13.2.1",
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-shiki": "^0.8.0",
-    "pnpm": "^7.30.3",
+    "pnpm": "^8.2.0",
     "shiki": "^0.14.1",
     "simple-git-hooks": "^2.8.1",
     "taze": "^0.9.1",
     "typescript": "^4.9.5",
-    "unocss": "^0.50.6",
+    "unocss": "^0.51.4",
     "unplugin-auto-import": "^0.15.2",
     "unplugin-vue-components": "^0.24.1",
-    "unplugin-vue-macros": "^1.11.2",
+    "unplugin-vue-macros": "^2.0.0",
     "vite": "^4.2.1",
     "vite-bundle-visualizer": "^0.6.0",
-    "vite-plugin-inspect": "^0.7.18",
+    "vite-plugin-inspect": "^0.7.20",
     "vite-plugin-pages": "^0.29.0",
-    "vite-plugin-pwa": "^0.14.6",
+    "vite-plugin-pwa": "^0.14.7",
-    "vite-plugin-vue-component-preview": "^1.1.5",
+    "vite-plugin-vue-component-preview": "^1.1.6",
     "vite-plugin-vue-inspector": "^3.4.0",
     "vite-plugin-vue-layouts": "^0.8.0",
     "vite-plugin-vue-markdown": "^0.22.4",
-    "vite-plugin-webfont-dl": "^3.6.4",
+    "vite-plugin-webfont-dl": "^3.7.3",
-    "vite-ssg": "^0.22.1",
+    "vite-ssg": "^0.22.2",
     "vite-ssg-sitemap": "^0.4.3",
-    "vitest": "^0.29.7",
+    "vitest": "^0.30.1",
     "vue-tsc": "^1.2.0"
   },
   "simple-git-hooks": {

src/components/TheFooter.vue

@@ -3,7 +3,7 @@ import { availableLocales, loadLanguageAsync } from '~/modules/i18n'
 
 const { t, locale } = useI18n()
 
-const toggleLocales = async () => {
+async function toggleLocales() {
   // change to some real logic
   const locales = availableLocales
   const newLocale = locales[(locales.indexOf(locale.value) + 1) % locales.length]
@@ -13,24 +13,24 @@ const toggleLocales = async () => {
 </script>
 
 <template>
-  <nav text-xl mt-6>
+  <nav mt-6 text-xl flex="~ gap-4">
-    <RouterLink class="icon-btn mx-2" to="/" :title="t('button.home')">
+    <RouterLink icon-btn to="/" :title="t('button.home')">
       <div i-carbon-campsite />
     </RouterLink>
 
-    <button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
+    <button icon-btn :title="t('button.toggle_dark')" @click="toggleDark()">
       <div i="carbon-sun dark:carbon-moon" />
     </button>
 
-    <a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales()">
+    <a icon-btn :title="t('button.toggle_langs')" @click="toggleLocales()">
       <div i-carbon-language />
     </a>
 
-    <RouterLink class="icon-btn mx-2" to="/about" :title="t('button.about')">
+    <RouterLink icon-btn to="/about" :title="t('button.about')">
       <div i-carbon-dicom-overlay />
     </RouterLink>
 
-    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
+    <a icon-btn rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
       <div i-carbon-logo-github />
     </a>
   </nav>

src/components/TheInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { modelValue } = defineModel<{
+const { modelValue } = defineModels<{
   modelValue: string
 }>()
 </script>

src/layouts/404.vue

@@ -10,7 +10,7 @@ const { t } = useI18n()
     </div>
     <RouterView />
     <div>
-      <button btn text-sm m="3 t8" @click="router.back()">
+      <button text-sm btn m="3 t8" @click="router.back()">
         {{ t('button.back') }}
       </button>
     </div>

src/layouts/default.vue

@@ -1,8 +1,11 @@
 <template>
-  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+  <main
+    px-4 py-10
+    text="center gray-700 dark:gray-200"
+  >
     <RouterView />
     <TheFooter />
-    <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
+    <div mx-auto mt-5 text-center text-sm opacity-50>
       [Default Layout]
     </div>
   </main>

src/layouts/home.vue

@@ -1,8 +1,11 @@
 <template>
-  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+  <main
+    px-4 py-10
+    text="center gray-700 dark:gray-200"
+  >
     <RouterView />
     <TheFooter />
-    <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
+    <div mx-auto mt-5 text-center text-sm opacity-50>
       [Home Layout]
     </div>
   </main>

src/pages/hi/[name].vue

@@ -23,7 +23,7 @@ watchEffect(() => {
     </p>
 
     <template v-if="user.otherNames.length">
-      <p text-sm mt-4>
+      <p mt-4 text-sm>
         <span opacity-75>{{ t('intro.aka') }}:</span>
         <ul>
           <li v-for="otherName in user.otherNames" :key="otherName">
@@ -37,7 +37,7 @@ watchEffect(() => {
 
     <div>
       <button
-        btn m="3 t6" text-sm
+        m="3 t6" text-sm btn
         @click="router.back()"
       >
         {{ t('button.back') }}

src/pages/index.vue

@@ -6,7 +6,7 @@ const user = useUserStore()
 const name = $ref(user.savedName)
 
 const router = useRouter()
-const go = () => {
+function go() {
   if (name)
     router.push(`/hi/${encodeURIComponent(name)}`)
 }
@@ -40,7 +40,7 @@ const { t } = useI18n()
 
     <div>
       <button
-        btn m-3 text-sm
+        m-3 text-sm btn
         :disabled="!name"
         @click="go"
       >

tsconfig.json

@@ -30,7 +30,7 @@
   },
   "vueCompilerOptions": {
     "plugins": [
-      "@vue-macros/volar/define-model",
+      "@vue-macros/volar/define-models",
       "@vue-macros/volar/define-slots"
     ]
   },

uno.config.ts

@@ -11,7 +11,7 @@ import {
 
 export default defineConfig({
   shortcuts: [
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer !outline-none hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
   ],
   presets: [
@@ -34,5 +34,5 @@ export default defineConfig({
     transformerDirectives(),
     transformerVariantGroup(),
   ],
-  safelist: 'prose prose-sm m-auto text-left'.split(' '),
+  safelist: 'prose m-auto text-left'.split(' '),
 })

vite.config.ts

@@ -1,6 +1,5 @@
 import path from 'node:path'
 import { defineConfig } from 'vite'
-// import Preview from 'vite-plugin-vue-component-preview'
 import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
 import generateSitemap from 'vite-ssg-sitemap'
@@ -26,8 +25,6 @@ export default defineConfig({
   },
 
   plugins: [
-    // Preview(),
-
     VueMacros({
       plugins: {
         vue: Vue({