chore: fix docs hydration errors and overall perfomance (#4455)

* chore: fix docs hydration errors * chore: update min vue version to 3.5
epicmaxco · Jan 21, 2025 · 09c949c · 09c949c
1 parent 4151e43
commit 09c949c
Show file tree

Hide file tree

Showing 18 changed files with 106 additions and 168 deletions.
diff --git a/packages/docs/assets/icon-fonts/icon-fonts.scss b/packages/docs/assets/icon-fonts/icon-fonts.scss
@@ -1,7 +1,6 @@
 // These fonts were originally provided by http://weloveiconfonts.com.
 // We decided to add these into package after https ceased to work due to lack of support on their side.
 @import "entypo/entypo";
-@import "ionicons/dist/scss/ionicons.scss";
 
 // Material Icons
 @import url(https://fonts.googleapis.com/icon?family=Material+Icons);

diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
@@ -45,7 +45,7 @@ const breakpoints = useBreakpoint()
 
 const { currentPresetName } = useColors()
 
-const isSidebarVisible = ref(!breakpoints.smDown)
+const isSidebarVisible = ref(false)
 const isOptionsVisible = ref(false)
 const doShowLoader = ref(true)
 
@@ -74,11 +74,10 @@ const onMouseMove = (e: MouseEvent) => {
 }
 
 onMounted(() => {
-
   isSidebarVisible.value = !breakpoints.smDown
-  setTimeout(() => {
-    doShowLoader.value = false
-  }, 300);
+  // setTimeout(() => {
+  doShowLoader.value = false
+  // }, 300);
 
   if (window.localStorage.getItem('eventConfig')) {
     window.localStorage.setItem('eventConfig', 'none')
@@ -112,7 +111,6 @@ useHead({
     { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css", rel: "stylesheet" },
   ],
   script: [
-    { src: 'https://kit.fontawesome.com/5460c87b2a.js', crossorigin: 'anonymous' },
     { src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js', type: 'module' },
   ],
 })

diff --git a/packages/docs/layouts/play.vue b/packages/docs/layouts/play.vue
@@ -68,7 +68,6 @@ useHead({
     { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css", rel: "stylesheet" },
   ],
   script: [
-    { src: 'https://kit.fontawesome.com/5460c87b2a.js', crossorigin: 'anonymous' },
     { src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js', type: 'module' },
   ],
 })

diff --git a/packages/docs/page-config/services/icons-config/index.ts b/packages/docs/page-config/services/icons-config/index.ts
@@ -28,11 +28,9 @@ export default definePageConfig({
   head: {
     link: [
       { rel: 'dns-prefetch', as: 'script', href: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js' },
-      { rel: 'dns-prefetch', as: 'script', href: 'https://kit.fontawesome.com/5460c87b2a.js' },
     ],
 
     script: [
-      { crossorigin: 'anonymous', src: 'https://kit.fontawesome.com/5460c87b2a.js' },
       { type: 'module', src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js' },
     ],
   },

diff --git a/packages/docs/page-config/ui-elements/dropdown/examples/PlacementAndOffset.vue b/packages/docs/page-config/ui-elements/dropdown/examples/PlacementAndOffset.vue
@@ -1,70 +1,54 @@
 <template>
   <table>
-    <tr>
-      <td colspan="2">
-        <div class="title va-text-center mb-2">
-          Offset direction
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <td
-        colspan="2"
-        class="p-[4rem]"
-      >
-        <div class="flex flex-col items-center">
-          <VaDropdown
-            :model-value="true"
-            :placement="placementWIthAlias"
-            :close-on-click-outside="false"
-            :close-on-anchor-click="false"
-            :close-on-content-click="false"
-            :offset="offset"
-            :stateful="false"
-          >
-            <template #anchor>
-              <div><Coordinates :placement="placement" /></div>
-            </template>
+    <tbody>
+      <tr>
+        <td colspan="2">
+          <div class="title va-text-center mb-2">
+            Offset direction
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2" class="p-[4rem]">
+          <div class="flex flex-col items-center">
+            <VaDropdown :model-value="true" :placement="placementWIthAlias" :close-on-click-outside="false"
+              :close-on-anchor-click="false" :close-on-content-click="false" :offset="offset" :stateful="false">
+              <template #anchor>
+                <div>
+                  <Coordinates :placement="placement" />
+                </div>
+              </template>
 
-            <VaDropdownContent> Dropdown </VaDropdownContent>
-          </VaDropdown>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <td class="pr-4">
-        Placement:
-      </td>
-      <td>
-        <VaSelect
-          v-model="placementWIthAlias"
-          class="w-[10rem] sm:w-[unset]"
-          :options="placements"
-        />
-      </td>
-    </tr>
-    <tr>
-      <td class="text-[var(--va-primary)]">
-        Main:
-      </td>
-      <td>
-        <VaCounter
-          v-model="offset[0]"
-          manual-input
-        />
-      </td>
-    </tr>
-    <tr>
-      <td class="text-[var(--va-secondary)]">
-        Cross:
-      </td>
-      <td>
-        <VaCounter
-          v-model="offset[1]"
-          manual-input
-        />
-      </td>
-    </tr>
+              <VaDropdownContent> Dropdown </VaDropdownContent>
+            </VaDropdown>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td class="pr-4">
+          Placement:
+        </td>
+        <td>
+          <VaSelect v-model="placementWIthAlias" class="w-[10rem] sm:w-[unset]" :options="placements" />
+        </td>
+      </tr>
+      <tr>
+        <td class="text-[var(--va-primary)]">
+          Main:
+        </td>
+        <td>
+          <VaCounter v-model="offset[0]" manual-input />
+        </td>
+      </tr>
+      <tr>
+        <td class="text-[var(--va-secondary)]">
+          Cross:
+        </td>
+        <td>
+          <VaCounter v-model="offset[1]" manual-input />
+        </td>
+      </tr>
+    </tbody>
   </table>
 </template>
 

diff --git a/packages/docs/page-config/ui-elements/icon/index.ts b/packages/docs/page-config/ui-elements/icon/index.ts
@@ -5,11 +5,9 @@ export default definePageConfig({
   head: {
     link: [
       { rel: 'dns-prefetch', as: 'script', href: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js' },
-      { rel: 'dns-prefetch', as: 'script', href: 'https://kit.fontawesome.com/5460c87b2a.js' },
     ],
 
     script: [
-      { crossorigin: 'anonymous', src: 'https://kit.fontawesome.com/5460c87b2a.js' },
       { type: 'module', src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js' },
     ],
   },

diff --git a/packages/docs/page-config/ui-elements/time-picker/examples/view.vue b/packages/docs/page-config/ui-elements/time-picker/examples/view.vue
@@ -4,31 +4,33 @@
   </h6>
 
   <table>
-    <tr>
-      <td>Hours</td>
-      <td>Minutes</td>
-      <td>Seconds</td>
-    </tr>
-    <tr>
-      <td>
-        <VaTimePicker
-          v-model="value"
-          view="hours"
-        />
-      </td>
-      <td>
-        <VaTimePicker
-          v-model="value"
-          view="minutes"
-        />
-      </td>
-      <td>
-        <VaTimePicker
-          v-model="value"
-          view="seconds"
-        />
-      </td>
-    </tr>
+    <tbody>
+      <tr>
+        <td>Hours</td>
+        <td>Minutes</td>
+        <td>Seconds</td>
+      </tr>
+      <tr>
+        <td>
+          <VaTimePicker
+            v-model="value"
+            view="hours"
+          />
+        </td>
+        <td>
+          <VaTimePicker
+            v-model="value"
+            view="minutes"
+          />
+        </td>
+        <td>
+          <VaTimePicker
+            v-model="value"
+            view="seconds"
+          />
+        </td>
+      </tr>
+    </tbody>
   </table>
 </template>
 

diff --git a/packages/docs/page-config/ui-elements/value/examples/String.vue b/packages/docs/page-config/ui-elements/value/examples/String.vue
@@ -1,6 +1,6 @@
 <template>
   <VaValue v-slot="inputText" default-value="Vuestic">
-    <div class="preview">
+    <div class="demo-preview">
       <VaValue
         v-for="i in 20"
         v-slot="textPosition"
@@ -29,13 +29,13 @@
 </template>
 
 <style>
-  .preview {
+  .demo-preview {
     position: relative;
     height: 200px;
     background: var(--va-primary);
   }
 
-  .preview span {
+  .demo-preview span {
     position: absolute;
     color: var(--va-on-primary);
     font-weight: 800;

diff --git a/packages/docs/page-config/ui-elements/value/examples/WithInputs.vue b/packages/docs/page-config/ui-elements/value/examples/WithInputs.vue
@@ -5,7 +5,7 @@
     </span>
 
     <VaValue v-slot="v">
-      <input v-if="v.value" v-model="form[key]">
+      <input class="item__input" v-if="v.value" v-model="form[key]">
       <span v-else>
         {{ form[key] }}
       </span>
@@ -29,7 +29,7 @@
     height: 2rem;
   }
 
-  input {
+  .item__input {
     outline: 1px solid var(--va-background-border);
     box-sizing: border-box;
     padding: 0 4px;

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -120,7 +120,7 @@
     "yargs": "^17.5.1"
   },
   "peerDependencies": {
-    "vue": "^3.0.4"
+    "vue": "^3.5.0"
   },
   "lint-staged": {
     "*.{js,ts}": [

diff --git a/packages/ui/src/components/va-backtop/VaBacktop.vue b/packages/ui/src/components/va-backtop/VaBacktop.vue
@@ -23,7 +23,6 @@
 import { PropType, ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useComponentPresetProp, useTranslation, useTranslationProp, useNumericProp, makeNumericProp } from '../../composables'
 import { VaButton } from '../va-button'
-import { isServer } from '../../utils/ssr'
 import { warn } from '../../utils/console'
 
 defineOptions({
@@ -116,22 +115,18 @@ const handleScroll = () => {
     : targetElement.scrollTop
 }
 
-const server = isServer()
-
 const visible = computed(() => {
-  if (server) {
+  if (!visibilityHeightComputed.value) {
     return false
   }
-  return targetScrollValue.value > visibilityHeightComputed.value!
+  return targetScrollValue.value > visibilityHeightComputed.value
 })
 
-if (!server) {
-  onMounted(() => {
-    targetElement = getTargetElement()
-    targetElement.addEventListener('scroll', handleScroll, true)
-  })
-  onBeforeUnmount(() => targetElement?.removeEventListener('scroll', handleScroll))
-}
+onMounted(() => {
+  targetElement = getTargetElement()
+  targetElement.addEventListener('scroll', handleScroll, true)
+})
+onBeforeUnmount(() => targetElement?.removeEventListener('scroll', handleScroll))
 
 const { tp } = useTranslation()
 </script>

diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="va-layout">
-    <template  v-for="area in areaNames" :key="area">
+    <template v-for="area in areaNames" :key="area">
       <VaLayoutArea
         v-if="$slots[area]"
         :area="area"

diff --git a/packages/ui/src/components/va-layout/components/VaLayoutArea.vue b/packages/ui/src/components/va-layout/components/VaLayoutArea.vue
@@ -31,7 +31,6 @@ import VaLayoutFixedWrapper from './VaLayoutFixedWrapper.vue'
 import { PropType, computed } from 'vue'
 import { AreaName } from '../hooks/useGridTemplateArea'
 import { AreaConfig } from '../hooks/useLayout'
-import { isServer } from '../../../utils/ssr'
 
 defineOptions({
   name: 'VaLayoutArea',
@@ -45,7 +44,7 @@ const props = defineProps({
 const emit = defineEmits(['overlay-click'])
 
 const absolute = computed(() => props.config.absolute || false)
-const fixed = computed(() => isServer() ? false : props.config.fixed || false)
+const fixed = computed(() => props.config.fixed || false)
 const overlay = computed(() => props.config.overlay || false)
 const zIndex = computed(() => (props.config.order || 0) + 1)
 </script>