Stop <Transition appear> from overwriting classes on re-render (#2457)

* Add raw layout support to Vue playground We can’t use ?raw here because Vite uses that itself for stuff. So here we opt for ?layout=raw instead * Fix Transition for `appear` overwriting classes on re-render * Set initial state just before animating * Remove unused import * Refactor * Capture snapshot of element just after first render With the new `setInitial` call before the animation starts — we don’t see the actual initial render result in this test because the queue has been emptied by the time it ends * Update changelog
tailwindlabs · Apr 28, 2023 · 7c0cbbb · 7c0cbbb · vercel · Apr 28, 2023
1 parent 8e558a7
commit 7c0cbbb
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 73 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure `FocusTrap` is only active when the given `enabled` value is `true` ([#2456](https://github.com/tailwindlabs/headlessui/pull/2456))
+- Stop `<Transition appear>` from overwriting classes on re-render ([#2457](https://github.com/tailwindlabs/headlessui/pull/2457))
 
 ## [1.7.14] - 2023-04-12
 

diff --git a/packages/@headlessui-react/src/components/transitions/transition.test.tsx b/packages/@headlessui-react/src/components/transitions/transition.test.tsx
@@ -5,6 +5,7 @@ import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Transition } from './transition'
 
 import { executeTimeline } from '../../test-utils/execute-timeline'
+import { createSnapshot } from '../../test-utils/snapshot'
 
 let act = _act as unknown as <T>(fn: () => T) => PromiseLike<T>
 
@@ -426,9 +427,14 @@ describe('Setup API', () => {
     })
 
     it('should be possible to passthrough the transition classes and immediately apply the enter transitions when appear is set to true', async () => {
-      let { container } = await act(() =>
-        render(
+      let container = createSnapshot()
+
+      function Example() {
+        let ref = container.use()
+
+        return (
           <Transition
+            ref={ref}
             show={true}
             appear={true}
             enter="enter"
@@ -441,7 +447,9 @@ describe('Setup API', () => {
             Children
           </Transition>
         )
-      )
+      }
+
+      await act(() => render(<Example />))
 
       expect(container).toBeDefined()
 

diff --git a/packages/@headlessui-react/src/components/transitions/transition.tsx b/packages/@headlessui-react/src/components/transitions/transition.tsx
@@ -33,7 +33,6 @@ import { useTransition } from '../../hooks/use-transition'
 import { useEvent } from '../../hooks/use-event'
 import { useDisposables } from '../../hooks/use-disposables'
 import { classNames } from '../../utils/class-names'
-import { env } from '../../utils/env'
 import { useFlags } from '../../hooks/use-flags'
 
 type ContainerElement = MutableRefObject<HTMLElement | null>
@@ -436,7 +435,7 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
   let theirProps = rest
   let ourProps = { ref: transitionRef }
 
-  if (appear && show) {
+  if (appear && show && initial) {
     theirProps = {
       ...theirProps,
       // Already apply the `enter` and `enterFrom` on the server if required
@@ -544,14 +543,32 @@ function TransitionRootFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_C
 
   let sharedProps = { unmount }
 
+  let beforeEnter = useEvent(() => {
+    if (initial) setInitial(false)
+    props.beforeEnter?.()
+  })
+
+  let beforeLeave = useEvent(() => {
+    if (initial) setInitial(false)
+    props.beforeLeave?.()
+  })
+
   return (
     <NestingContext.Provider value={nestingBag}>
       <TransitionContext.Provider value={transitionBag}>
         {render({
           ourProps: {
             ...sharedProps,
             as: Fragment,
-            children: <TransitionChild ref={transitionRef} {...sharedProps} {...theirProps} />,
+            children: (
+              <TransitionChild
+                ref={transitionRef}
+                {...sharedProps}
+                {...theirProps}
+                beforeEnter={beforeEnter}
+                beforeLeave={beforeLeave}
+              />
+            ),
           },
           theirProps: {},
           defaultTag: Fragment,

diff --git a/packages/@headlessui-react/src/test-utils/snapshot.ts b/packages/@headlessui-react/src/test-utils/snapshot.ts
@@ -0,0 +1,25 @@
+import { MutableRefObject, useLayoutEffect, useRef } from 'react'
+
+export function createSnapshot() {
+  let snapshots: HTMLElement[] = []
+
+  return {
+    get latest() {
+      return snapshots.at(-1)
+    },
+
+    get firstChild() {
+      return this.latest?.firstChild ?? null
+    },
+
+    use() {
+      let ref = useRef<HTMLElement>(null)
+      useLayoutEffect(() => this.take(ref), [])
+      return ref
+    },
+
+    take(ref: MutableRefObject<HTMLElement | null>) {
+      snapshots.push(ref.current!.parentElement!.cloneNode(true) as any)
+    },
+  }
+}
diff --git a/packages/playground-vue/src/App.vue b/packages/playground-vue/src/App.vue
@@ -1,81 +1,31 @@
 <template>
-  <div
-    class="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased"
-  >
-    <header
-      class="relative z-10 flex flex-shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8"
-    >
-      <router-link to="/">
-        <svg class="h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 243 42">
-          <path
-            fill="#fff"
-            d="M65.74 13.663c-2.62 0-4.702.958-5.974 2.95V6.499h-4.163V33.32h4.163V23.051c0-3.908 2.159-5.518 4.896-5.518 2.62 0 4.317 1.533 4.317 4.445V33.32h4.162V21.557c0-4.982-3.083-7.894-7.4-7.894zM79.936 25.503h15.341c.077-.536.154-1.15.154-1.724 0-5.518-3.931-10.116-9.674-10.116-6.052 0-10.176 4.407-10.176 10.078 0 5.748 4.124 10.078 10.484 10.078 3.778 0 6.668-1.572 8.441-4.177l-3.43-1.993c-.925 1.341-2.66 2.376-4.972 2.376-3.084 0-5.512-1.533-6.168-4.521zm-.038-3.372c.578-2.873 2.698-4.713 5.82-4.713 2.506 0 4.934 1.418 5.512 4.713H79.898zM113.282 14.161v2.72c-1.465-1.992-3.739-3.218-6.746-3.218-5.242 0-9.597 4.368-9.597 10.078 0 5.67 4.355 10.078 9.597 10.078 3.007 0 5.281-1.227 6.746-3.258v2.76h4.162V14.16h-4.162zm-6.09 15.71c-3.469 0-6.091-2.567-6.091-6.13 0-3.564 2.622-6.131 6.091-6.131 3.469 0 6.09 2.567 6.09 6.13 0 3.564-2.621 6.132-6.09 6.132zM136.597 6.498v10.384c-1.465-1.993-3.739-3.219-6.746-3.219-5.242 0-9.597 4.368-9.597 10.078 0 5.67 4.355 10.078 9.597 10.078 3.007 0 5.281-1.227 6.746-3.258v2.76h4.163V6.497h-4.163zm-6.09 23.374c-3.469 0-6.09-2.568-6.09-6.131 0-3.564 2.621-6.131 6.09-6.131s6.09 2.567 6.09 6.13c0 3.564-2.621 6.132-6.09 6.132zM144.648 33.32h4.163V5.348h-4.163V33.32zM155.957 25.503h15.341c.077-.536.154-1.15.154-1.724 0-5.518-3.931-10.116-9.675-10.116-6.051 0-10.176 4.407-10.176 10.078 0 5.748 4.125 10.078 10.485 10.078 3.777 0 6.668-1.572 8.441-4.177l-3.43-1.993c-.926 1.341-2.66 2.376-4.973 2.376-3.083 0-5.512-1.533-6.167-4.521zm-.038-3.372c.578-2.873 2.698-4.713 5.82-4.713 2.505 0 4.934 1.418 5.512 4.713h-11.332zM177.137 19.45c0-1.38 1.311-2.032 2.814-2.032 1.581 0 2.93.69 3.623 2.184l3.508-1.954c-1.349-2.529-3.97-3.985-7.131-3.985-3.931 0-7.053 2.26-7.053 5.863 0 6.859 10.368 4.943 10.368 8.353 0 1.533-1.426 2.146-3.276 2.146-2.12 0-3.662-1.035-4.279-2.759l-3.584 2.07c1.233 2.758 4.008 4.483 7.863 4.483 4.163 0 7.516-2.07 7.516-5.902 0-7.088-10.369-4.98-10.369-8.468zM192.774 19.45c0-1.38 1.31-2.032 2.813-2.032 1.581 0 2.93.69 3.624 2.184l3.507-1.954c-1.349-2.529-3.97-3.985-7.131-3.985-3.931 0-7.053 2.26-7.053 5.863 0 6.859 10.368 4.943 10.368 8.353 0 1.533-1.426 2.146-3.276 2.146-2.12 0-3.662-1.035-4.278-2.759l-3.585 2.07c1.233 2.758 4.009 4.483 7.863 4.483 4.163 0 7.516-2.07 7.516-5.902 0-7.088-10.368-4.98-10.368-8.468zM224.523 28.9c2.889 0 5.027-1.715 5.027-4.53v-8.782h-2.588v8.577c0 1.268-.676 2.219-2.439 2.219s-2.438-.951-2.438-2.22v-8.576h-2.569v8.782c0 2.815 2.138 4.53 5.007 4.53zM232.257 15.588V28.64h2.588V15.588h-2.588z"
-          />
-          <path
-            fill="#fff"
-            fill-rule="evenodd"
-            d="M233.817 9.328H220.42c-2.96 0-5.359 2.385-5.359 5.327v13.318c0 2.942 2.399 5.327 5.359 5.327h13.397c2.959 0 5.358-2.385 5.358-5.327V14.655c0-2.942-2.399-5.327-5.358-5.327zM220.42 6.664c-4.439 0-8.038 3.578-8.038 7.99v13.319c0 4.413 3.599 7.99 8.038 7.99h13.397c4.439 0 8.038-3.577 8.038-7.99V14.655c0-4.413-3.599-7.99-8.038-7.99H220.42z"
-            clip-rule="evenodd"
-          />
-          <path
-            fill="#fff"
-            fill-rule="evenodd"
-            d="M220.42 9.328h13.397c2.959 0 5.358 2.385 5.358 5.327v13.318c0 2.942-2.399 5.327-5.358 5.327H220.42c-2.96 0-5.359-2.385-5.359-5.327V14.655c0-2.942 2.399-5.327 5.359-5.327zm-8.038 5.327c0-4.413 3.599-7.99 8.038-7.99h13.397c4.439 0 8.038 3.577 8.038 7.99v13.318c0 4.413-3.599 7.99-8.038 7.99H220.42c-4.439 0-8.038-3.577-8.038-7.99V14.655z"
-            clip-rule="evenodd"
-          />
-          <path
-            fill="url(#prefix__paint0_linear)"
-            d="M8.577 26.097l25.779-8.556c-.514-3.201-.88-5.342-1.307-6.974-.457-1.756-.821-2.226-.965-2.39a5.026 5.026 0 00-1.81-1.306c-.2-.086-.762-.284-2.583-.175-1.924.116-4.453.507-8.455 1.137-4.003.63-6.529 1.035-8.395 1.516-1.766.456-2.239.817-2.403.96a4.999 4.999 0 00-1.315 1.8c-.085.198-.285.757-.175 2.568.116 1.913.51 4.426 1.143 8.405.178 1.114.337 2.113.486 3.015z"
-          />
-          <path
-            fill="url(#prefix__paint1_linear)"
-            fill-rule="evenodd"
-            d="M1.47 24.124C.244 16.427-.37 12.58.96 9.49A11.665 11.665 0 014.027 5.29c2.545-2.21 6.416-2.82 14.16-4.039C25.93.031 29.8-.578 32.907.743a11.729 11.729 0 014.225 3.05c2.223 2.53 2.836 6.38 4.063 14.076 1.226 7.698 1.84 11.546.511 14.636a11.666 11.666 0 01-3.069 4.199c-2.545 2.21-6.416 2.82-14.159 4.039-7.743 1.219-11.614 1.828-14.722.508a11.728 11.728 0 01-4.224-3.05C3.31 35.67 2.697 31.82 1.47 24.123zm13.657 13.668c2.074-.125 4.743-.54 8.697-1.163 3.953-.622 6.62-1.047 8.632-1.566 1.949-.502 2.846-.992 3.426-1.496a7.5 7.5 0 001.973-2.7c.302-.703.494-1.703.372-3.7-.125-2.063-.543-4.716-1.17-8.646-.625-3.93-1.053-6.582-1.574-8.582-.506-1.937-.999-2.83-1.505-3.405a7.54 7.54 0 00-2.716-1.961c-.707-.301-1.713-.492-3.723-.371-2.074.125-4.743.54-8.697 1.163-3.953.622-6.62 1.047-8.632 1.565-1.949.503-2.846.993-3.426 1.497a7.5 7.5 0 00-1.972 2.699c-.303.704-.495 1.704-.373 3.701.125 2.062.543 4.716 1.17 8.646.625 3.93 1.053 6.582 1.574 8.581.506 1.938 1 2.83 1.505 3.406a7.54 7.54 0 002.716 1.961c.707.3 1.713.492 3.723.37z"
-            clip-rule="evenodd"
-          />
-          <defs>
-            <linearGradient
-              id="prefix__paint0_linear"
-              x1="16.759"
-              x2="23.386"
-              y1="0"
-              y2="41.662"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#66E3FF" />
-              <stop offset="1" stop-color="#7064F9" />
-            </linearGradient>
-            <linearGradient
-              id="prefix__paint1_linear"
-              x1="16.759"
-              x2="23.386"
-              y1="0"
-              y2="41.662"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#66E3FF" />
-              <stop offset="1" stop-color="#7064F9" />
-            </linearGradient>
-          </defs>
-        </svg>
-      </router-link>
-    </header>
-    <main class="flex-1 overflow-auto bg-gray-50">
-      <router-view />
-      <KeyCaster />
-    </main>
-  </div>
+  <router-view v-if="layout === 'raw'" />
+  <Layout v-else>
+    <router-view />
+    <KeyCaster />
+  </Layout>
 </template>
 
 <script>
-import { computed, watchEffect } from 'vue'
+import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import KeyCaster from './KeyCaster.vue'
+import Layout from './Layout.vue'
 
 export default {
   name: 'App',
   components: {
+    Layout,
     KeyCaster,
   },
+
+  setup() {
+    let route = useRoute()
+    let layout = computed(() => route.query['layout'] ?? 'full')
+
+    return {
+      layout,
+    }
+  },
 }
 </script>
diff --git a/packages/playground-vue/src/Layout.vue b/packages/playground-vue/src/Layout.vue
@@ -0,0 +1,79 @@
+<template>
+  <div
+    class="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased"
+  >
+    <header
+      class="relative z-10 flex flex-shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8"
+    >
+      <router-link to="/">
+        <svg class="h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 243 42">
+          <path
+            fill="#fff"
+            d="M65.74 13.663c-2.62 0-4.702.958-5.974 2.95V6.499h-4.163V33.32h4.163V23.051c0-3.908 2.159-5.518 4.896-5.518 2.62 0 4.317 1.533 4.317 4.445V33.32h4.162V21.557c0-4.982-3.083-7.894-7.4-7.894zM79.936 25.503h15.341c.077-.536.154-1.15.154-1.724 0-5.518-3.931-10.116-9.674-10.116-6.052 0-10.176 4.407-10.176 10.078 0 5.748 4.124 10.078 10.484 10.078 3.778 0 6.668-1.572 8.441-4.177l-3.43-1.993c-.925 1.341-2.66 2.376-4.972 2.376-3.084 0-5.512-1.533-6.168-4.521zm-.038-3.372c.578-2.873 2.698-4.713 5.82-4.713 2.506 0 4.934 1.418 5.512 4.713H79.898zM113.282 14.161v2.72c-1.465-1.992-3.739-3.218-6.746-3.218-5.242 0-9.597 4.368-9.597 10.078 0 5.67 4.355 10.078 9.597 10.078 3.007 0 5.281-1.227 6.746-3.258v2.76h4.162V14.16h-4.162zm-6.09 15.71c-3.469 0-6.091-2.567-6.091-6.13 0-3.564 2.622-6.131 6.091-6.131 3.469 0 6.09 2.567 6.09 6.13 0 3.564-2.621 6.132-6.09 6.132zM136.597 6.498v10.384c-1.465-1.993-3.739-3.219-6.746-3.219-5.242 0-9.597 4.368-9.597 10.078 0 5.67 4.355 10.078 9.597 10.078 3.007 0 5.281-1.227 6.746-3.258v2.76h4.163V6.497h-4.163zm-6.09 23.374c-3.469 0-6.09-2.568-6.09-6.131 0-3.564 2.621-6.131 6.09-6.131s6.09 2.567 6.09 6.13c0 3.564-2.621 6.132-6.09 6.132zM144.648 33.32h4.163V5.348h-4.163V33.32zM155.957 25.503h15.341c.077-.536.154-1.15.154-1.724 0-5.518-3.931-10.116-9.675-10.116-6.051 0-10.176 4.407-10.176 10.078 0 5.748 4.125 10.078 10.485 10.078 3.777 0 6.668-1.572 8.441-4.177l-3.43-1.993c-.926 1.341-2.66 2.376-4.973 2.376-3.083 0-5.512-1.533-6.167-4.521zm-.038-3.372c.578-2.873 2.698-4.713 5.82-4.713 2.505 0 4.934 1.418 5.512 4.713h-11.332zM177.137 19.45c0-1.38 1.311-2.032 2.814-2.032 1.581 0 2.93.69 3.623 2.184l3.508-1.954c-1.349-2.529-3.97-3.985-7.131-3.985-3.931 0-7.053 2.26-7.053 5.863 0 6.859 10.368 4.943 10.368 8.353 0 1.533-1.426 2.146-3.276 2.146-2.12 0-3.662-1.035-4.279-2.759l-3.584 2.07c1.233 2.758 4.008 4.483 7.863 4.483 4.163 0 7.516-2.07 7.516-5.902 0-7.088-10.369-4.98-10.369-8.468zM192.774 19.45c0-1.38 1.31-2.032 2.813-2.032 1.581 0 2.93.69 3.624 2.184l3.507-1.954c-1.349-2.529-3.97-3.985-7.131-3.985-3.931 0-7.053 2.26-7.053 5.863 0 6.859 10.368 4.943 10.368 8.353 0 1.533-1.426 2.146-3.276 2.146-2.12 0-3.662-1.035-4.278-2.759l-3.585 2.07c1.233 2.758 4.009 4.483 7.863 4.483 4.163 0 7.516-2.07 7.516-5.902 0-7.088-10.368-4.98-10.368-8.468zM224.523 28.9c2.889 0 5.027-1.715 5.027-4.53v-8.782h-2.588v8.577c0 1.268-.676 2.219-2.439 2.219s-2.438-.951-2.438-2.22v-8.576h-2.569v8.782c0 2.815 2.138 4.53 5.007 4.53zM232.257 15.588V28.64h2.588V15.588h-2.588z"
+          />
+          <path
+            fill="#fff"
+            fill-rule="evenodd"
+            d="M233.817 9.328H220.42c-2.96 0-5.359 2.385-5.359 5.327v13.318c0 2.942 2.399 5.327 5.359 5.327h13.397c2.959 0 5.358-2.385 5.358-5.327V14.655c0-2.942-2.399-5.327-5.358-5.327zM220.42 6.664c-4.439 0-8.038 3.578-8.038 7.99v13.319c0 4.413 3.599 7.99 8.038 7.99h13.397c4.439 0 8.038-3.577 8.038-7.99V14.655c0-4.413-3.599-7.99-8.038-7.99H220.42z"
+            clip-rule="evenodd"
+          />
+          <path
+            fill="#fff"
+            fill-rule="evenodd"
+            d="M220.42 9.328h13.397c2.959 0 5.358 2.385 5.358 5.327v13.318c0 2.942-2.399 5.327-5.358 5.327H220.42c-2.96 0-5.359-2.385-5.359-5.327V14.655c0-2.942 2.399-5.327 5.359-5.327zm-8.038 5.327c0-4.413 3.599-7.99 8.038-7.99h13.397c4.439 0 8.038 3.577 8.038 7.99v13.318c0 4.413-3.599 7.99-8.038 7.99H220.42c-4.439 0-8.038-3.577-8.038-7.99V14.655z"
+            clip-rule="evenodd"
+          />
+          <path
+            fill="url(#prefix__paint0_linear)"
+            d="M8.577 26.097l25.779-8.556c-.514-3.201-.88-5.342-1.307-6.974-.457-1.756-.821-2.226-.965-2.39a5.026 5.026 0 00-1.81-1.306c-.2-.086-.762-.284-2.583-.175-1.924.116-4.453.507-8.455 1.137-4.003.63-6.529 1.035-8.395 1.516-1.766.456-2.239.817-2.403.96a4.999 4.999 0 00-1.315 1.8c-.085.198-.285.757-.175 2.568.116 1.913.51 4.426 1.143 8.405.178 1.114.337 2.113.486 3.015z"
+          />
+          <path
+            fill="url(#prefix__paint1_linear)"
+            fill-rule="evenodd"
+            d="M1.47 24.124C.244 16.427-.37 12.58.96 9.49A11.665 11.665 0 014.027 5.29c2.545-2.21 6.416-2.82 14.16-4.039C25.93.031 29.8-.578 32.907.743a11.729 11.729 0 014.225 3.05c2.223 2.53 2.836 6.38 4.063 14.076 1.226 7.698 1.84 11.546.511 14.636a11.666 11.666 0 01-3.069 4.199c-2.545 2.21-6.416 2.82-14.159 4.039-7.743 1.219-11.614 1.828-14.722.508a11.728 11.728 0 01-4.224-3.05C3.31 35.67 2.697 31.82 1.47 24.123zm13.657 13.668c2.074-.125 4.743-.54 8.697-1.163 3.953-.622 6.62-1.047 8.632-1.566 1.949-.502 2.846-.992 3.426-1.496a7.5 7.5 0 001.973-2.7c.302-.703.494-1.703.372-3.7-.125-2.063-.543-4.716-1.17-8.646-.625-3.93-1.053-6.582-1.574-8.582-.506-1.937-.999-2.83-1.505-3.405a7.54 7.54 0 00-2.716-1.961c-.707-.301-1.713-.492-3.723-.371-2.074.125-4.743.54-8.697 1.163-3.953.622-6.62 1.047-8.632 1.565-1.949.503-2.846.993-3.426 1.497a7.5 7.5 0 00-1.972 2.699c-.303.704-.495 1.704-.373 3.701.125 2.062.543 4.716 1.17 8.646.625 3.93 1.053 6.582 1.574 8.581.506 1.938 1 2.83 1.505 3.406a7.54 7.54 0 002.716 1.961c.707.3 1.713.492 3.723.37z"
+            clip-rule="evenodd"
+          />
+          <defs>
+            <linearGradient
+              id="prefix__paint0_linear"
+              x1="16.759"
+              x2="23.386"
+              y1="0"
+              y2="41.662"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#66E3FF" />
+              <stop offset="1" stop-color="#7064F9" />
+            </linearGradient>
+            <linearGradient
+              id="prefix__paint1_linear"
+              x1="16.759"
+              x2="23.386"
+              y1="0"
+              y2="41.662"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#66E3FF" />
+              <stop offset="1" stop-color="#7064F9" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </router-link>
+    </header>
+    <main class="flex-1 overflow-auto bg-gray-50">
+      <slot></slot>
+      <KeyCaster />
+    </main>
+  </div>
+</template>
+
+<script>
+import KeyCaster from './KeyCaster.vue'
+
+export default {
+  name: 'Layout',
+  components: {
+    KeyCaster,
+  },
+}
+</script>