feat(oruga): update oruga version

package.json

@@ -37,37 +37,36 @@
     "bootstrap": "^5.3.3"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "6.5.2",
-    "@oruga-ui/oruga-next": "^0.8.9",
+    "@oruga-ui/examples": "^0.9.0-pre.1",
+    "@oruga-ui/oruga-next": "^0.9.0-pre.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "11.1.6",
-    "@vitejs/plugin-vue": "5.0.4",
+    "@vitejs/plugin-vue": "5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "10.4.19",
     "core-js": "3.37.1",
     "eslint": "^8.56.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint-plugin-vue": "^9.27.0",
     "npm-check-updates": "^16.14.20",
-    "postcss": "8.4.38",
-    "prettier": "^3.2.5",
-    "rimraf": "5.0.7",
-    "rollup": "^4.18.0",
+    "postcss": "8.4.39",
+    "prettier": "^3.3.3",
+    "rimraf": "6.0.1",
+    "rollup": "^4.18.1",
     "rollup-plugin-copy": "3.5.0",
-    "rollup-plugin-sass": "1.12.22",
-    "sass": "1.77.2",
-    "stylelint": "^16.6.0",
-    "stylelint-config-recommended": "^14.0.0",
-    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-prettier": "^5.0.0",
-    "stylelint-scss": "^6.3.0",
-    "tslib": "2.6.2",
-    "typescript": "5.4.5",
-    "vite": "5.2.11",
-    "vue": "3.4.27",
-    "vue-router": "4.3.2",
-    "vue-tsc": "2.0.19"
+    "rollup-plugin-sass": "1.13.1",
+    "sass": "1.77.8",
+    "stylelint": "^16.7.0",
+    "stylelint-config-recommended": "^14.0.1",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-prettier": "^5.0.2",
+    "stylelint-scss": "^6.4.1",
+    "typescript": "5.5.3",
+    "vite": "5.3.4",
+    "vue": "3.4.31",
+    "vue-router": "4.4.0",
+    "vue-tsc": "2.0.26"
   }
 }

src/App.vue

@@ -1,35 +1,29 @@
 <script setup lang="ts">
-const paths = import.meta.glob("./components/*.vue") as any;
-const components = Object.keys(paths)
-  .map((c: string) => c.replace(".vue", ""))
-  .map((c: string) => c.replace("./components/", ""))
-  .map((c: string) => `/${c}`)
-  .map((c: string) => {
-    const name = c.split("/")[1];
-    return {
-      name,
-      link: c,
-    };
-  });
+import components from "@/components";
 </script>
 
 <template>
   <div id="app">
-    <nav id="nav">
+    <aside id="nav">
       <router-link to="/" class="py-4 ps-0 text-center">
         <img
           class="image__oruga"
           src="https://raw.githubusercontent.com/oruga-ui/theme-bootstrap/master/public/logo.svg"
           alt="Logo Oruga Theme Bootstrap" />
-        <b class="fs-5 text-white">Oruga Bootstrap Theme</b>
+        <b>Oruga Bootstrap Theme</b>
       </router-link>
+
       <hr />
-      <router-link v-for="item in components" :key="item.name" :to="item.link">
-        {{ item.name }}
+
+      <router-link
+        v-for="component in components"
+        :key="component"
+        :to="{ name: component }">
+        {{ component }}
       </router-link>
-    </nav>
+    </aside>
 
-    <main>
+    <main class="main">
       <router-view />
     </main>
   </div>
@@ -39,9 +33,13 @@ const components = Object.keys(paths)
 #app {
   display: flex;
   width: 100%;
+
   main {
     flex-grow: 1;
-    margin: 25px;
+    height: 100vh;
+    padding: 2rem;
+    padding-bottom: 6rem;
+    overflow-y: scroll;
 
     > section {
       padding: 1rem 0;
@@ -60,20 +58,33 @@ const components = Object.keys(paths)
   #nav {
     display: flex;
     flex-direction: column;
-    background-color: #7952b3;
-    height: auto;
-    min-height: 100vh;
-    width: 15%;
+    height: 100vh;
+    min-width: var(--vp-sidebar-width);
+    padding: 20px;
+    padding-top: 0px;
+    overflow-y: scroll;
+    background-color: var(--vp-sidebar-bg-color);
+
+    .theme-label {
+      font-size: 1.25rem;
+      text-align: center;
+      padding: 1rem 0;
+    }
+
+    hr {
+      width: 100%;
+      margin-top: 0;
+    }
 
     a {
-      font-weight: bold;
-      color: white;
+      font-weight: 500;
+      color: var(--vp-c-text-1);
       text-decoration: none;
-      padding: 1px 0 1px 10px;
+      padding: 5px;
+      font-size: 1rem;
 
       &.router-link-exact-active {
-        background-color: rgb(181, 122, 255);
-        color: white /*#2c3e50 /*#42b983*/;
+        color: rgb(181, 122, 255);
       }
     }
   }

src/components.ts

@@ -0,0 +1,31 @@
+export default [
+  "Autocomplete",
+  "Button",
+  "Carousel",
+  "Checkbox",
+  "Collapse",
+  "Datepicker",
+  "Datetimepicker",
+  "Dropdown",
+  "Field",
+  "Icon",
+  "Input",
+  "Loading",
+  "Menu",
+  "Modal",
+  "Notification",
+  "Pagination",
+  "Radio",
+  "Select",
+  "Sidebar",
+  "Skeleton",
+  "Slider",
+  "Steps",
+  "Switch",
+  "Table",
+  "Tabs",
+  "Taginput",
+  "Timepicker",
+  "Tooltip",
+  "Upload",
+];