Updated dependencies

package.json

@@ -2,6 +2,7 @@
   "name": "yorha-ui",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",
@@ -12,33 +13,30 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@phosphor-icons/vue": "^2.2.1",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@vueuse/core": "^10.9.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "pinia": "^2.1.7",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "sass": "^1.77.0",
-    "@vueuse/core": "^10.1.2",
+    "vue": "^3.4.27",
-    "pinia": "^2.0.35",
+    "vue-router": "^4.3.2"
-    "sass": "^1.62.1",
-    "vue": "^3.3.1",
-    "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@tsconfig/node18": "^2.0.0",
+    "@rushstack/eslint-patch": "^1.3.3",
-    "@types/node": "^18.16.3",
+    "@tsconfig/node20": "^20.1.2",
-    "@vitejs/plugin-vue": "^4.2.1",
+    "@types/node": "^20.12.11",
-    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/tsconfig": "^0.3.2",
+    "@vue/eslint-config-typescript": "^12.0.0",
-    "autoprefixer": "^10.4.14",
+    "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.39.0",
+    "autoprefixer": "^10.4.19",
-    "eslint-plugin-cypress": "^2.13.3",
+    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.11.0",
+    "eslint-plugin-vue": "^9.17.0",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.38",
-    "prettier": "^2.8.8",
+    "prettier": "^3.2.5",
-    "start-server-and-test": "^2.0.0",
+    "start-server-and-test": "^2.0.3",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.4.3",
-    "typescript": "~5.0.4",
+    "typescript": "^5.4.5",
-    "vite": "^4.3.5",
+    "vite": "^5.2.11",
-    "vue-tsc": "^1.6.4"
+    "vue-tsc": "^2.0.16"
   }
 }

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {}

src/components/atoms/YrhButton.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import { PhSquare } from '@phosphor-icons/vue'
+
 import { useElementHover, useFocus } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAppConfig } from '@/stores/configStore'
-
 const router = useRouter()
 const { globalSound } = useAppConfig()
 
@@ -77,7 +78,7 @@ function handleFocusin() {
     ref="btnRef"
     :is="elementTag"
     v-bind="attributes"
-    class="btn inline-block w-full p-1 px-2 text-left"
+    class="btn flex w-full items-center p-1 px-2 text-left"
     :class="{
       active: isActive,
       'bg-y-beige-500 hover:shadow-md focus-visible:shadow-md': !noBg,
@@ -101,7 +102,7 @@ function handleFocusin() {
     </Transition>
 
     <span class="mr-1" v-if="hasSquare">
-      <font-awesome-icon :icon="['fas', 'square']" />
+      <PhSquare />
     </span>
     <slot />
   </component>

src/components/datas/YrhStatusCard.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import YrhCard from '@/components/atoms/YrhCard.vue'
+import { PhSquare } from '@phosphor-icons/vue'
 
 import { useStatusStore } from '@/stores/datas/statusStore'
 import { storeToRefs } from 'pinia'
@@ -52,20 +53,7 @@ const { androidData } = storeToRefs(useStatusStore())
       </div>
 
       <div class="mt-2 text-y-beige-500 flex justify-around">
-        <font-awesome-icon :icon="['far', 'square']" />
+        <PhSquare v-for="i in 14" :key="i" v-once />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
-        <font-awesome-icon :icon="['far', 'square']" />
       </div>
       <hr class="mt-2 mb-0 border-t-2 border-y-beige-500" />
     </template>

src/main.ts

@@ -4,17 +4,8 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faSquare } from '@fortawesome/free-solid-svg-icons'
-import { faSquare as faSquareHollow } from '@fortawesome/free-regular-svg-icons'
-
-/* add icons to the library */
-library.add(faSquare, faSquareHollow)
-
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-app.component('font-awesome-icon', FontAwesomeIcon)
 app.mount('#app')

tsconfig.node.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@tsconfig/node18/tsconfig.json",
+  "extends": "@tsconfig/node20/tsconfig.json",
   "include": ["vite.config.*"],
   "compilerOptions": {
     "composite": true,

vite.config.ts

@@ -1,5 +1,4 @@
 import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'