fix: docs layout and useElementFocusedKeyboard

epicmaxco · Nov 15, 2024 · 121fbaa · 121fbaa
1 parent 0d56c5f
commit 121fbaa
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -23,11 +23,11 @@ export function useElementFocusedKeyboard (el: Ref<TemplateRef>) {
       return
     }
     hasKeyboardFocus.value = true
-  })
+  }, el)
 
   useEvent('focusout', () => {
     hasKeyboardFocus.value = false
-  })
+  }, el)
 
   return hasKeyboardFocus
 }