refactor: useLayout plugin and dynamic sizing

apps/docs/src/components/app/AppBanner.vue

@@ -1,25 +1,41 @@
 <script setup lang="ts">
   // Components
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useLayout } from '@vuetify/v0'
+
+  // Utilities
+  import { useTemplateRef } from 'vue'
 
   // Types
   import type { AtomProps } from '@vuetify/v0'
 
   const { as = 'header' } = defineProps<AtomProps>()
 
   const breakpoints = useBreakpoints()
+  const element = useTemplateRef('banner')
+  const layout = useLayout()
+  const item = layout.register({
+    id: 'banner',
+    position: 'top',
+    element,
+    value: 24,
+  })
 </script>
 
 <template>
   <Atom
+    ref="banner"
     :as
-    class="app-banner flex items-center justify-center h-[24px] fixed left-0 top-0 right-0 px-3 text-xs gap-2"
+    class="app-banner flex items-center justify-center fixed px-3 text-xs gap-2"
+    :style="{
+      top: item.rect.y.value + 'px',
+      left: item.rect.x.value + 'px',
+      height: item.rect.height.value + 'px',
+      width: item.rect.width.value + 'px',
+    }"
   >
     <AppIcon icon="alert" :size="14" />
 
-    <div>
-      You are viewing Pre-Alpha documentation. <span v-if="!breakpoints.isMobile">Some features may not work as expected.</span>
-    </div>
+    You are viewing Pre-Alpha documentation. <span v-if="!breakpoints.isMobile">Some features may not work as expected.</span>
   </Atom>
 </template>
 

apps/docs/src/components/app/AppBar.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
   // Components
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useLayout } from '@vuetify/v0'
+
+  // Utilities
+  import { useTemplateRef } from 'vue'
 
   // Composables
   import { useAppStore } from '@/stores/app'
@@ -18,13 +21,26 @@
     auth = useAuthStore()
   }
   const breakpoints = useBreakpoints()
+  const element = useTemplateRef('bar')
+  const layout = useLayout()
+  const item = layout.register({
+    id: 'bar',
+    position: 'top',
+    element,
+  })
+
 </script>
 
 <template>
   <Atom
+    ref="bar"
     :as
-    class="app-header flex items-center justify-between h-[48px] fixed left-0 top-[24px] right-0 px-3 transition-margin duration-200 ease-in-out"
-    :class="breakpoints.isMobile && 'left-0'"
+    class="app-header flex items-center justify-between fixed px-3 h-[48px]"
+    :style="{
+      left: item.rect.x.value + 'px',
+      top: item.rect.y.value + 'px',
+      width: item.rect.width.value + 'px',
+    }"
   >
     <div class="flex items-center gap-1">
       <img

apps/docs/src/components/app/AppFooter.vue

@@ -1,20 +1,37 @@
 <script setup lang="ts">
   // Components
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useLayout } from '@vuetify/v0'
+
+  // Utilities
+  import { useTemplateRef } from 'vue'
 
   // Types
   import type { AtomProps } from '@vuetify/v0'
 
   const { as = 'footer' } = defineProps<AtomProps>()
 
   const breakpoints = useBreakpoints()
+  const element = useTemplateRef('footer')
+  const layout = useLayout()
+  const item = layout.register({
+    id: 'footer',
+    position: 'bottom',
+    element,
+    value: 24,
+  })
 </script>
 
 <template>
   <Atom
+    ref="footer"
     :as
-    class="app-footer flex items-center justify-between h-[24px] fixed bottom-0 left-[220px] right-0 px-3 text-xs bg-surface border-t"
-    :class="breakpoints.isMobile && 'left-0'"
+    :class="`app-footer flex items-center justify-end fixed px-3 text-xs ${breakpoints.isMobile && 'left-0'}`"
+    :style="{
+      left: item.rect.x.value + 'px',
+      top: item.rect.y.value + 'px',
+      height: item.rect.height.value + 'px',
+      width: item.rect.width.value + 'px',
+    }"
   >
     <DocsLastCommit />
 

apps/docs/src/components/app/AppMain.vue

@@ -1,13 +1,17 @@
 <script lang="ts" setup>
-  import { useBreakpoints } from '@vuetify/v0'
+  import { useLayout } from '@vuetify/v0'
 
-  const breakpoints = useBreakpoints()
+  const layout = useLayout()
 </script>
 
 <template>
   <div
-    class="pa-4 pb-6 mt-[72px] transition-margin duration-200 ease-in-out"
-    :class="breakpoints.isMobile ? 'ml-0' : 'ml-[220px]'"
+    class="pa-4 fixed inset-0 overflow-y-auto"
+    :style="{
+      top: layout.main.y.value + 'px',
+      width: layout.main.width.value + 'px',
+      left: layout.main.x.value + 'px',
+    }"
   >
     <div class="max-w-[688px] mx-auto pb-4">
       <router-view />

apps/docs/src/components/app/AppNav.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useLayout } from '@vuetify/v0'
   import { useAppStore } from '@/stores/app'
   import { useRoute } from 'vue-router'
-  import { watch } from 'vue'
+  import { watch, watchEffect, useTemplateRef } from 'vue'
   import type { AtomProps } from '@vuetify/v0'
 
   const { as = 'nav' } = defineProps<AtomProps>()
@@ -16,16 +16,39 @@
       app.drawer = false
     }
   })
+
+  const element = useTemplateRef('nav')
+  const layout = useLayout()
+  const item = layout.register({
+    id: 'nav',
+    position: 'left',
+    element,
+    value: 220,
+  })
+
+  watchEffect(() => {
+    if (breakpoints.isMobile) {
+      item.unselect()
+    } else {
+      item.select()
+    }
+  })
 </script>
 
 <template>
   <Atom
+    ref="nav"
     :as
-    class="bg-4 app-nav flex flex-col fixed top-[72px] w-[220px] overflow-y-auto py-4 transition-transform duration-200 ease-in-out"
+    class="bg-4 z-1000 app-nav flex flex-col py-4 fixed overflow-y-auto transition-transform duration-200 ease-in-out"
     :class="[
       breakpoints.isMobile && !app.drawer ? 'translate-x-[-100%]' : 'translate-x-0',
-      breakpoints.isMobile ? 'top-[72px] bottom-[24px]' : 'top-[24px] bottom-0'
     ]"
+    :style="{
+      height: item.rect.height.value + 'px',
+      width: item.rect.width.value + 'px',
+      left: item.rect.x.value + 'px',
+      top: item.rect.y.value + 'px',
+    }"
   >
     <ul class="flex gap-2 flex-col">
       <template v-for="(nav, i) in app.nav" :key="i">

apps/docs/src/layouts/default.vue

@@ -4,8 +4,8 @@
 
 <template>
   <AppBanner />
-  <AppNav />
   <AppBar />
+  <AppNav />
   <AppMain />
   <AppFooter />
 </template>

apps/docs/src/plugins/zero.ts

@@ -1,5 +1,5 @@
 // Vuetify0
-import { createBreakpointsPlugin, createHydrationPlugin, createLoggerPlugin, createThemePlugin } from '@vuetify/v0'
+import { createBreakpointsPlugin, createHydrationPlugin, createLoggerPlugin, createThemePlugin, createLayoutPlugin } from '@vuetify/v0'
 
 // Plugins
 import { createIconPlugin } from './icons'
@@ -12,6 +12,7 @@ export default function zero (app: App) {
   app.use(createLoggerPlugin())
   app.use(createHydrationPlugin())
   app.use(createBreakpointsPlugin())
+  app.use(createLayoutPlugin())
   app.use(
     createThemePlugin({
       default: 'light',

packages/0/src/composables/useLayout/index.bench.ts

@@ -0,0 +1,31 @@
+import { createLayout } from '#v0'
+import { bench, describe, beforeAll } from 'vitest'
+
+describe('useLayout benchmarks', () => {
+  let layout: any
+
+  beforeAll(() => {
+    for (let i = 0; i < 500; i++) {
+      const order = i % 25 === 0 ? i * -1 : 0
+      function getPosition (i: number): 'top' | 'left' | 'bottom' | 'right' {
+        if (i % 25 === 0) return 'top'
+        if (i % 30 === 0) return 'left'
+        if (i % 20 === 0) return 'bottom'
+        return 'right'
+      }
+
+      const position = getPosition(i)
+
+      layout.register({ id: `Component${i}`, position, value: i, order })
+    }
+  })
+
+  bench('register and get items', () => {
+    const layout = createLayout()[2]
+    // Register 500 components
+    for (let i = 0; i < 500; i++) {
+      const gotItem = layout.get(`component${i}`)
+      void gotItem?.cumulative
+    }
+  })
+})