Skip to content

Commit 09c949c

Browse files
m0ksemm0ksem
authored
chore: fix docs hydration errors and overall perfomance (#4455)
* chore: fix docs hydration errors * chore: update min vue version to 3.5
1 parent 4151e43 commit 09c949c

File tree

18 files changed

+106
-168
lines changed

18 files changed

+106
-168
lines changed

‎packages/docs/assets/icon-fonts/icon-fonts.scss

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// These fonts were originally provided by http://weloveiconfonts.com.
22
// We decided to add these into package after https ceased to work due to lack of support on their side.
33
@import "entypo/entypo";
4-
@import "ionicons/dist/scss/ionicons.scss";
54

65
// Material Icons
76
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

‎packages/docs/layouts/default.vue

+4-6
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const breakpoints = useBreakpoint()
4545
4646
const { currentPresetName } = useColors()
4747
48-
const isSidebarVisible = ref(!breakpoints.smDown)
48+
const isSidebarVisible = ref(false)
4949
const isOptionsVisible = ref(false)
5050
const doShowLoader = ref(true)
5151
@@ -74,11 +74,10 @@ const onMouseMove = (e: MouseEvent) => {
7474
}
7575
7676
onMounted(() => {
77-
7877
isSidebarVisible.value = !breakpoints.smDown
79-
setTimeout(() => {
80-
doShowLoader.value = false
81-
}, 300);
78+
// setTimeout(() => {
79+
doShowLoader.value = false
80+
// }, 300);
8281
8382
if (window.localStorage.getItem('eventConfig')) {
8483
window.localStorage.setItem('eventConfig', 'none')
@@ -112,7 +111,6 @@ useHead({
112111
{ href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css", rel: "stylesheet" },
113112
],
114113
script: [
115-
{ src: 'https://kit.fontawesome.com/5460c87b2a.js', crossorigin: 'anonymous' },
116114
{ src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js', type: 'module' },
117115
],
118116
})

‎packages/docs/layouts/play.vue

-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@ useHead({
6868
{ href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css", rel: "stylesheet" },
6969
],
7070
script: [
71-
{ src: 'https://kit.fontawesome.com/5460c87b2a.js', crossorigin: 'anonymous' },
7271
{ src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js', type: 'module' },
7372
],
7473
})

‎packages/docs/page-config/services/icons-config/index.ts

-2
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,9 @@ export default definePageConfig({
2828
head: {
2929
link: [
3030
{ rel: 'dns-prefetch', as: 'script', href: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js' },
31-
{ rel: 'dns-prefetch', as: 'script', href: 'https://kit.fontawesome.com/5460c87b2a.js' },
3231
],
3332

3433
script: [
35-
{ crossorigin: 'anonymous', src: 'https://kit.fontawesome.com/5460c87b2a.js' },
3634
{ type: 'module', src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js' },
3735
],
3836
},

‎packages/docs/page-config/ui-elements/dropdown/examples/PlacementAndOffset.vue

+48-64
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,54 @@
11
<template>
22
<table>
3-
<tr>
4-
<td colspan="2">
5-
<div class="title va-text-center mb-2">
6-
Offset direction
7-
</div>
8-
</td>
9-
</tr>
10-
<tr>
11-
<td
12-
colspan="2"
13-
class="p-[4rem]"
14-
>
15-
<div class="flex flex-col items-center">
16-
<VaDropdown
17-
:model-value="true"
18-
:placement="placementWIthAlias"
19-
:close-on-click-outside="false"
20-
:close-on-anchor-click="false"
21-
:close-on-content-click="false"
22-
:offset="offset"
23-
:stateful="false"
24-
>
25-
<template #anchor>
26-
<div><Coordinates :placement="placement" /></div>
27-
</template>
3+
<tbody>
4+
<tr>
5+
<td colspan="2">
6+
<div class="title va-text-center mb-2">
7+
Offset direction
8+
</div>
9+
</td>
10+
</tr>
11+
<tr>
12+
<td colspan="2" class="p-[4rem]">
13+
<div class="flex flex-col items-center">
14+
<VaDropdown :model-value="true" :placement="placementWIthAlias" :close-on-click-outside="false"
15+
:close-on-anchor-click="false" :close-on-content-click="false" :offset="offset" :stateful="false">
16+
<template #anchor>
17+
<div>
18+
<Coordinates :placement="placement" />
19+
</div>
20+
</template>
2821

29-
<VaDropdownContent> Dropdown </VaDropdownContent>
30-
</VaDropdown>
31-
</div>
32-
</td>
33-
</tr>
34-
<tr>
35-
<td class="pr-4">
36-
Placement:
37-
</td>
38-
<td>
39-
<VaSelect
40-
v-model="placementWIthAlias"
41-
class="w-[10rem] sm:w-[unset]"
42-
:options="placements"
43-
/>
44-
</td>
45-
</tr>
46-
<tr>
47-
<td class="text-[var(--va-primary)]">
48-
Main:
49-
</td>
50-
<td>
51-
<VaCounter
52-
v-model="offset[0]"
53-
manual-input
54-
/>
55-
</td>
56-
</tr>
57-
<tr>
58-
<td class="text-[var(--va-secondary)]">
59-
Cross:
60-
</td>
61-
<td>
62-
<VaCounter
63-
v-model="offset[1]"
64-
manual-input
65-
/>
66-
</td>
67-
</tr>
22+
<VaDropdownContent> Dropdown </VaDropdownContent>
23+
</VaDropdown>
24+
</div>
25+
</td>
26+
</tr>
27+
<tr>
28+
<td class="pr-4">
29+
Placement:
30+
</td>
31+
<td>
32+
<VaSelect v-model="placementWIthAlias" class="w-[10rem] sm:w-[unset]" :options="placements" />
33+
</td>
34+
</tr>
35+
<tr>
36+
<td class="text-[var(--va-primary)]">
37+
Main:
38+
</td>
39+
<td>
40+
<VaCounter v-model="offset[0]" manual-input />
41+
</td>
42+
</tr>
43+
<tr>
44+
<td class="text-[var(--va-secondary)]">
45+
Cross:
46+
</td>
47+
<td>
48+
<VaCounter v-model="offset[1]" manual-input />
49+
</td>
50+
</tr>
51+
</tbody>
6852
</table>
6953
</template>
7054

‎packages/docs/page-config/ui-elements/icon/index.ts

-2
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@ export default definePageConfig({
55
head: {
66
link: [
77
{ rel: 'dns-prefetch', as: 'script', href: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js' },
8-
{ rel: 'dns-prefetch', as: 'script', href: 'https://kit.fontawesome.com/5460c87b2a.js' },
98
],
109

1110
script: [
12-
{ crossorigin: 'anonymous', src: 'https://kit.fontawesome.com/5460c87b2a.js' },
1311
{ type: 'module', src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js' },
1412
],
1513
},

‎packages/docs/page-config/ui-elements/time-picker/examples/view.vue

+27-25
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,33 @@
44
</h6>
55

66
<table>
7-
<tr>
8-
<td>Hours</td>
9-
<td>Minutes</td>
10-
<td>Seconds</td>
11-
</tr>
12-
<tr>
13-
<td>
14-
<VaTimePicker
15-
v-model="value"
16-
view="hours"
17-
/>
18-
</td>
19-
<td>
20-
<VaTimePicker
21-
v-model="value"
22-
view="minutes"
23-
/>
24-
</td>
25-
<td>
26-
<VaTimePicker
27-
v-model="value"
28-
view="seconds"
29-
/>
30-
</td>
31-
</tr>
7+
<tbody>
8+
<tr>
9+
<td>Hours</td>
10+
<td>Minutes</td>
11+
<td>Seconds</td>
12+
</tr>
13+
<tr>
14+
<td>
15+
<VaTimePicker
16+
v-model="value"
17+
view="hours"
18+
/>
19+
</td>
20+
<td>
21+
<VaTimePicker
22+
v-model="value"
23+
view="minutes"
24+
/>
25+
</td>
26+
<td>
27+
<VaTimePicker
28+
v-model="value"
29+
view="seconds"
30+
/>
31+
</td>
32+
</tr>
33+
</tbody>
3234
</table>
3335
</template>
3436

‎packages/docs/page-config/ui-elements/value/examples/String.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<VaValue v-slot="inputText" default-value="Vuestic">
3-
<div class="preview">
3+
<div class="demo-preview">
44
<VaValue
55
v-for="i in 20"
66
v-slot="textPosition"
@@ -29,13 +29,13 @@
2929
</template>
3030

3131
<style>
32-
.preview {
32+
.demo-preview {
3333
position: relative;
3434
height: 200px;
3535
background: var(--va-primary);
3636
}
3737
38-
.preview span {
38+
.demo-preview span {
3939
position: absolute;
4040
color: var(--va-on-primary);
4141
font-weight: 800;

‎packages/docs/page-config/ui-elements/value/examples/WithInputs.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</span>
66

77
<VaValue v-slot="v">
8-
<input v-if="v.value" v-model="form[key]">
8+
<input class="item__input" v-if="v.value" v-model="form[key]">
99
<span v-else>
1010
{{ form[key] }}
1111
</span>
@@ -29,7 +29,7 @@
2929
height: 2rem;
3030
}
3131
32-
input {
32+
.item__input {
3333
outline: 1px solid var(--va-background-border);
3434
box-sizing: border-box;
3535
padding: 0 4px;

‎packages/ui/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
"yargs": "^17.5.1"
121121
},
122122
"peerDependencies": {
123-
"vue": "^3.0.4"
123+
"vue": "^3.5.0"
124124
},
125125
"lint-staged": {
126126
"*.{js,ts}": [

‎packages/ui/src/components/va-backtop/VaBacktop.vue

+7-12
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
import { PropType, ref, computed, onMounted, onBeforeUnmount } from 'vue'
2424
import { useComponentPresetProp, useTranslation, useTranslationProp, useNumericProp, makeNumericProp } from '../../composables'
2525
import { VaButton } from '../va-button'
26-
import { isServer } from '../../utils/ssr'
2726
import { warn } from '../../utils/console'
2827
2928
defineOptions({
@@ -116,22 +115,18 @@ const handleScroll = () => {
116115
: targetElement.scrollTop
117116
}
118117
119-
const server = isServer()
120-
121118
const visible = computed(() => {
122-
if (server) {
119+
if (!visibilityHeightComputed.value) {
123120
return false
124121
}
125-
return targetScrollValue.value > visibilityHeightComputed.value!
122+
return targetScrollValue.value > visibilityHeightComputed.value
126123
})
127124
128-
if (!server) {
129-
onMounted(() => {
130-
targetElement = getTargetElement()
131-
targetElement.addEventListener('scroll', handleScroll, true)
132-
})
133-
onBeforeUnmount(() => targetElement?.removeEventListener('scroll', handleScroll))
134-
}
125+
onMounted(() => {
126+
targetElement = getTargetElement()
127+
targetElement.addEventListener('scroll', handleScroll, true)
128+
})
129+
onBeforeUnmount(() => targetElement?.removeEventListener('scroll', handleScroll))
135130
136131
const { tp } = useTranslation()
137132
</script>

‎packages/ui/src/components/va-layout/VaLayout.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="va-layout">
3-
<template v-for="area in areaNames" :key="area">
3+
<template v-for="area in areaNames" :key="area">
44
<VaLayoutArea
55
v-if="$slots[area]"
66
:area="area"

‎packages/ui/src/components/va-layout/components/VaLayoutArea.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ import VaLayoutFixedWrapper from './VaLayoutFixedWrapper.vue'
3131
import { PropType, computed } from 'vue'
3232
import { AreaName } from '../hooks/useGridTemplateArea'
3333
import { AreaConfig } from '../hooks/useLayout'
34-
import { isServer } from '../../../utils/ssr'
3534
3635
defineOptions({
3736
name: 'VaLayoutArea',
@@ -45,7 +44,7 @@ const props = defineProps({
4544
const emit = defineEmits(['overlay-click'])
4645
4746
const absolute = computed(() => props.config.absolute || false)
48-
const fixed = computed(() => isServer() ? false : props.config.fixed || false)
47+
const fixed = computed(() => props.config.fixed || false)
4948
const overlay = computed(() => props.config.overlay || false)
5049
const zIndex = computed(() => (props.config.order || 0) + 1)
5150
</script>

0 commit comments

Comments
 (0)