feat: use @oruga-ui/examples package (#45)

package.json

@@ -17,7 +17,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/oruga-ui/theme-oruga.git"
+    "url": "git+https://github.com/oruga-ui/theme-oruga.git"
   },
   "bugs": {
     "url": "https://github.com/oruga-ui/theme-oruga/issues"
@@ -34,8 +34,8 @@
     "update": "ncu -u"
   },
   "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-typescript": "11.1.6",
     "@vitejs/plugin-vue": "5.0.4",
     "@vue/eslint-config-prettier": "^9.0.0",
@@ -62,9 +62,9 @@
     "stylelint-scss": "^6.3.0",
     "tslib": "2.6.2",
     "typescript": "5.4.5",
-    "vite": "^5.2.11",
-    "vue": "3.4.27",
+    "vite": "^5.3.3",
+    "vue": "^3.4.31",
     "vue-router": "4.3.2",
-    "vue-tsc": "2.0.19"
+    "vue-tsc": "^2.0.24"   
   }
 }

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="theme-label">
         <img
           class="image__oruga"
-          src="https://oruga.io/logo.png"
+          src="https://oruga-ui.com/logo.png"
           alt="Logo Oruga Default Theme" />
         <b>Oruga Default 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>
@@ -44,8 +38,10 @@ const components = Object.keys(paths)
 
   main {
     flex-grow: 1;
+    height: 100vh;
+    padding: 2rem;
     padding-bottom: 6rem;
-    margin: 2rem;
+    overflow-y: scroll;
 
     > section {
       margin: 1rem 0;
@@ -64,26 +60,33 @@ const components = Object.keys(paths)
   #nav {
     display: flex;
     flex-direction: column;
-    height: auto;
-    min-height: 100vh;
-    width: 15%;
-    background-color: $grey-light;
+    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.5rem;
+      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;
-      font-size: 1em;
+      padding: 5px;
+      font-size: 1rem;
 
       &.router-link-exact-active {
-        color: $primary;
+        color: var(--vp-c-brand-1);
       }
     }
   }

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",
+  "Skeleton",
+  "Sidebar",
+  "Slider",
+  "Steps",
+  "Swtich",
+  "Table",
+  "Tabs",
+  "Taginput",
+  "Timepicker",
+  "Tooltip",
+  "Upload",
+];