refactor away from layouts package; misc cleanup

Signed-off-by: Liam Stanley <me@liamstanley.io>
lrstanley · Sep 4, 2022 · a125a68 · a125a68
1 parent f7035eb
commit a125a68
Show file tree

Hide file tree

Showing 16 changed files with 351 additions and 436 deletions.
diff --git a/public/package.json b/public/package.json
@@ -32,7 +32,6 @@
     "unplugin-vue-components": "^0.22.4",
     "vite": "^3.0.9",
     "vite-plugin-pages": "^0.25.0",
-    "vite-plugin-vue-layouts": "^0.7.0",
     "vue": "^3.2.38",
     "vue-router": "^4.1.5"
   },

diff --git a/public/pnpm-lock.yaml b/public/pnpm-lock.yaml
diff --git a/public/src/components/layout/bare.vue b/public/src/components/layout/bare.vue
@@ -0,0 +1,9 @@
+<template>
+  <AnimateFade>
+    <slot />
+  </AnimateFade>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/public/src/layouts/default.vue → public/src/components/layout/default.vue b/public/src/layouts/default.vue → public/src/components/layout/default.vue
@@ -12,18 +12,14 @@
       </AnimateFade>
 
       <n-card v-else class="shadow drop-shadow-xl rounded-md" content-style="padding: 0;">
-        <router-view v-slot="{ Component, route }">
-          <AnimateFade>
-            <Suspense>
-              <component :is="Component" :key="route" />
-              <template #fallback>
-                <n-spin class="flex flex-auto justify-center items-center p-20">
-                  <template #description> Loading... </template>
-                </n-spin>
-              </template>
-            </Suspense>
-          </AnimateFade>
-        </router-view>
+        <Suspense>
+          <slot />
+          <template #fallback>
+            <n-spin class="flex flex-auto justify-center items-center p-20">
+              <template #description> Loading... </template>
+            </n-spin>
+          </template>
+        </Suspense>
       </n-card>
 
       <div class="py-4 px-2 mb-3 text-right text-sm lg:mb-20">

diff --git a/public/src/layouts/bare.vue b/public/src/layouts/bare.vue
diff --git a/public/src/lib/core/directives.ts b/public/src/lib/core/directives.ts
@@ -0,0 +1,10 @@
+import type { App } from "vue"
+
+const focus = {
+  mounted: (el: HTMLElement) =>
+    setTimeout(() => el.querySelector<HTMLElement>("input, textarea")?.focus(), 300),
+}
+
+export function registerDirectives(app: App) {
+  app.directive("focus", focus)
+}
diff --git a/public/src/lib/core/router.ts b/public/src/lib/core/router.ts
@@ -1,13 +1,10 @@
-import { setupLayouts } from "virtual:generated-layouts"
 import { createRouter, createWebHistory } from "vue-router"
 import generatedRoutes from "~pages"
 import { loadingBar } from "@/lib/core/status"
 
-const routes = setupLayouts(generatedRoutes)
-
 const router = createRouter({
   history: createWebHistory("/"),
-  routes,
+  routes: generatedRoutes,
 })
 
 router.beforeEach(async (to, from, next) => {

diff --git a/public/src/lib/data/sample-bulk.txt b/public/src/lib/data/sample-bulk.txt
diff --git a/public/src/lib/directives/focus.ts b/public/src/lib/directives/focus.ts
diff --git a/public/src/main.ts b/public/src/main.ts
@@ -3,6 +3,7 @@ import "uno.css"
 import "@/css/main.css"
 import { createPinia } from "pinia"
 import { createApp } from "vue"
+import { registerDirectives } from "@/lib/core/directives"
 import router from "@/lib/core/router"
 import App from "@/main.vue"
 import { MotionPlugin } from "@vueuse/motion"
@@ -12,4 +13,5 @@ const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.use(MotionPlugin)
+registerDirectives(app)
 app.mount("#app")