refactor: useLayout plugin and dynamic sizing

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

@@ -1,25 +1,40 @@
 <script setup lang="ts">
   // Components
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useLayoutItem } 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<HTMLElement>('banner')
+  const item = useLayoutItem({
+    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, useLayoutItem } from '@vuetify/v0'
+
+  // Utilities
+  import { useTemplateRef } from 'vue'
 
   // Composables
   import { useAppStore } from '@/stores/app'
@@ -14,13 +17,26 @@
   const app = useAppStore()
   const auth = useAuthStore()
   const breakpoints = useBreakpoints()
+  const element = useTemplateRef<HTMLElement>('bar')
+  const item = useLayoutItem({
+    id: 'bar',
+    position: 'top',
+    element,
+    value: 48,
+  })
 </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"
+    :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',
+    }"
   >
     <div class="flex items-center gap-1">
       <img

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

@@ -1,20 +1,36 @@
 <script setup lang="ts">
   // Components
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useLayoutItem } 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<HTMLElement>('footer')
+  const item = useLayoutItem({
+    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 />
 
@@ -24,5 +40,5 @@
 
 <style lang="sass">
   .app-footer
-    background-color: var(--v0-surfaceTint)
+    background-color: var(--v0-surface-tint)
 </style>

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, useLayoutItem } 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,38 @@
       app.drawer = false
     }
   })
+
+  const element = useTemplateRef<HTMLElement>('nav')
+  const item = useLayoutItem({
+    id: 'nav',
+    position: 'left',
+    element,
+    value: 220,
+  })
+
+  watchEffect(() => {
+    if (breakpoints.isMobile) {
+      item.ticket.unselect()
+    } else {
+      item.ticket.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 pb-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.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { useLayout } from './index.ts'
+import { createLayout } from './index.ts'
 import { mount } from '@vue/test-utils'
 import { defineComponent } from 'vue'
 
@@ -25,7 +25,7 @@ describe('useLayout inside component', () => {
   it('registers height and width in browser', () => {
     const testComponent = defineComponent({
       setup () {
-        const context = useLayout()
+        const context = createLayout()
         return { context }
       },
       template: '<div></div>',
@@ -42,7 +42,7 @@ describe('useLayout inside component', () => {
   it('correctly calculates main', () => {
     const testComponent = defineComponent({
       setup () {
-        const context = useLayout()
+        const context = createLayout()
         return { context }
       },
       template: '<div></div>',
@@ -62,15 +62,15 @@ describe('useLayout inside component', () => {
 
 describe('useLayout outside component', () => {
   it('registers components', () => {
-    const context = useLayout()
+    const context = createLayout()
     context.register({ id: 'Component1', position: 'top', value: 32 })
     context.register({ id: 'Component2', position: 'bottom', value: 64 })
     expect(context.collection.has('Component1')).toEqual(true)
     expect(context.collection.has('Component2')).toEqual(true)
   })
 
   it('calculates bound', () => {
-    const context = useLayout()
+    const context = createLayout()
     context.register({ id: 'Component1', position: 'top', value: 32 })
     context.register({ id: 'Component2', position: 'bottom', value: 128 })
     context.register({ id: 'Component3', position: 'left', value: 64 })