From 121fbaaaa6882b13566c82802b3735d5038a7e33 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Fri, 15 Nov 2024 18:00:36 +0200
Subject: [PATCH] fix: docs layout and useElementFocusedKeyboard

---
 packages/docs/components/layout/Header.vue         | 11 +++++++++++
 packages/docs/layouts/default.vue                  |  1 +
 packages/docs/layouts/play.vue                     | 14 +++++++++-----
 .../va-menu-list/components/VaMenuItem.vue         |  1 -
 .../std/browser/useElementFocusedKeyboard.ts       |  4 ++--
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/docs/components/layout/Header.vue b/packages/docs/components/layout/Header.vue
index b88efae3d3..be2e5171b3 100644
--- a/packages/docs/components/layout/Header.vue
+++ b/packages/docs/components/layout/Header.vue
@@ -33,6 +33,9 @@
         <div
           class="header__options hidden sm:flex"
         >
+          <VaButton preset="secondary" to="/Play">
+            Playground
+          </VaButton>
           <VaButton
             v-for="(link, index) in links"
             :key="index"
@@ -96,6 +99,9 @@
         </VaListItem>
 
         <div class="mobile-options__items">
+          <VaButton preset="primary" to="/play">
+            Playground
+          </VaButton>
           <ThemeSwitch class="mb-8" />
           <SocialsLinks size="large" />
           <LazyLandingStarsButton repo="epicmaxco/vuestic-ui" />
@@ -140,6 +146,11 @@ const landing = computed(() => ({
 }))
 
 const links = computed(() => [
+{
+    text: 'Discord',
+    url: 'https://discord.gg/jTKTjj2weV',
+    target: '_blank',
+  },
   {
     text: 'GitHub',
     url: 'https://github.com/epicmaxco/vuestic-ui',
diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
index dabd3c0dbc..ac2505a928 100644
--- a/packages/docs/layouts/default.vue
+++ b/packages/docs/layouts/default.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    :key="doShowLoader + ''"
     class="docs-layout"
     :class="[`docs-layout--theme-${currentPresetName}`]"
   >
diff --git a/packages/docs/layouts/play.vue b/packages/docs/layouts/play.vue
index ec7c83da5d..a1b0da9879 100644
--- a/packages/docs/layouts/play.vue
+++ b/packages/docs/layouts/play.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    :key="isMounted + ''"
+    :key="doShowLoader + ''"
   >
     <div
-      v-if="!isMounted"
+      v-show="doShowLoader"
       class="docs-layout__loader"
     />
     <VaLayout
@@ -38,8 +38,6 @@
 </template>
 
 <script setup lang="ts">
-import { useIsMounted } from 'vuestic-ui/src/composables/useIsMounted'
-
 const breakpoints = useBreakpoint()
 
 const isSidebarVisible = ref(false)
@@ -75,7 +73,13 @@ useHead({
   ],
 })
 
-const isMounted = useIsMounted()
+const doShowLoader = ref(true)
+
+onMounted(() => {
+  setTimeout(() => {
+    doShowLoader.value = false
+  }, 300)
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/ui/src/components/va-menu-list/components/VaMenuItem.vue b/packages/ui/src/components/va-menu-list/components/VaMenuItem.vue
index 7eebdf4074..effdb3a411 100644
--- a/packages/ui/src/components/va-menu-list/components/VaMenuItem.vue
+++ b/packages/ui/src/components/va-menu-list/components/VaMenuItem.vue
@@ -31,7 +31,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
 import { VaIcon } from '../../va-icon/'
 import { useCurrentElement, useElementFocusedKeyboard, defineChildProps, useChildComponents } from '../../../composables'
 import { makeMenuItemAttributes } from '../composables/useMenuKeyboardNavigation'
diff --git a/packages/ui/src/composables/std/browser/useElementFocusedKeyboard.ts b/packages/ui/src/composables/std/browser/useElementFocusedKeyboard.ts
index 21d2e2a040..a89e33d52e 100644
--- a/packages/ui/src/composables/std/browser/useElementFocusedKeyboard.ts
+++ b/packages/ui/src/composables/std/browser/useElementFocusedKeyboard.ts
@@ -23,11 +23,11 @@ export function useElementFocusedKeyboard (el: Ref<TemplateRef>) {
       return
     }
     hasKeyboardFocus.value = true
-  })
+  }, el)
 
   useEvent('focusout', () => {
     hasKeyboardFocus.value = false
-  })
+  }, el)
 
   return hasKeyboardFocus
 }