Merge remote-tracking branch 'origin/upstream'

.vitepress/inlined-scripts/restorePreference.js

@@ -8,6 +8,6 @@
  restore('vue-docs-prefer-composition', 'prefer-composition', true)
  restore('vue-docs-prefer-sfc', 'prefer-sfc', true)
 
- window.__VUE_BANNER_ID__ = 'vt2024_1'
- restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
+ // window.__VUE_BANNER_ID__ = ''
+ // restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
 })()

.vitepress/theme/components/Banner.vue

@@ -22,31 +22,16 @@ function dismiss() {
 
 <template>
  <div class="banner" v-if="open">
- <p class="vt-banner-text">
- <span class="vt-text-primary">VueConf Toronto</span>
- <span class="vt-tagline"> - Join the premier Vue.js conference</span>
- | 18-20 Nov 2024 <span class="vt-place"> - Toronto, Canada</span>
- <a
- target="_blank"
- class="vt-primary-action"
- href="https://vuetoronto.com/?utm_source=vuejs&utm_content=top_banner"
- >
- Register
- </a>
- </p>
+ <a target="_blank"></a>
  <button @click="dismiss">
  <VTIconPlus class="close" />
  </button>
- <p class="vt-banner-text vt-coupon">
- <span class="vt-text-primary">Use code</span> VUEJS
- <span class="vt-text-primary">to get 15% off</span>
- </p>
  </div>
 </template>
 
 <style>
 html:not(.banner-dismissed) {
- --vt-banner-height: 60px;
+ --vt-banner-height: 30px;
 }
 </style>
 
@@ -65,10 +50,12 @@ html:not(.banner-dismissed) {
  font-weight: 600;
  color: #fff;
  background-color: var(--vt-c-green);
- background: #11252b;
- display: flex;
- justify-content: center;
- align-items: center;
+ background: linear-gradient(
+ 90deg,
+ rgba(66, 184, 131, 1) 0%,
+ rgba(39, 179, 137, 1) 19%,
+ rgba(100, 126, 255, 1) 100%
+ );
 }
 
 .banner-dismissed .banner {
@@ -83,7 +70,7 @@ button {
  position: absolute;
  right: 0;
  top: 0;
- padding: 20px 10px;
+ padding: 5px;
 }
 
 .close {
@@ -92,59 +79,10 @@ button {
  fill: #fff;
  transform: rotate(45deg);
 }
-
-.vt-banner-text {
- color: #fff;
- font-size: 16px;
-}
-
-.vt-text-primary {
- color: #75c05e;
-}
-
-.vt-primary-action {
- background: #75c05e;
- color: #121c1a;
- padding: 8px 15px;
- border-radius: 5px;
- font-size: 14px;
- text-decoration: none;
- margin: 0 20px;
- font-weight: bold;
-}
-.vt-primary-action:hover {
- text-decoration: none;
- background: #5a9f45;
-}
-
-@media (max-width: 1280px) {
- .banner .vt-banner-text {
- font-size: 14px;
- }
- .vt-tagline {
- display: none;
- }
-}
-
-@media (max-width: 780px) {
- .vt-tagline {
- display: none;
- }
- .vt-coupon {
- display: none;
- }
- .vt-primary-action {
- margin: 0 10px;
- padding: 7px 10px;
- }
- .vt-time-now {
- display: none;
- }
-}
-
-@media (max-width: 560px) {
- .vt-place {
+/*
+@media (max-width: 720px) {
+ a > span {
  display: none;
  }
-}
+} */
 </style>

.vitepress/theme/index.ts

@@ -10,14 +10,14 @@ import {
 } from './components/preferences'
 import SponsorsAside from './components/SponsorsAside.vue'
 import VueSchoolLink from './components/VueSchoolLink.vue'
-import Banner from './components/Banner.vue'
+// import Banner from './components/Banner.vue'
 // import TextAd from './components/TextAd.vue'
 
 export default Object.assign({}, VPTheme, {
  Layout: () => {
  // @ts-ignore
  return h(VPTheme.Layout, null, {
- banner: () => h(Banner),
+ // banner: () => h(Banner),
  'sidebar-top': () => h(PreferenceSwitch),
  'sidebar-bottom': () => h(SecurityUpdateBtn),
  'aside-mid': () => h(SponsorsAside)

package.json

@@ -25,5 +25,5 @@
  "typescript": "^5.4.5",
  "vue-tsc": "^2.0.29"
  },
- "packageManager": "pnpm@9.1.4"
+ "packageManager": "pnpm@9.10.0"
 }

src/guide/components/async.md

@@ -188,7 +188,7 @@ hydrateOnInteraction(['wheel', 'mouseover'])
 import { defineAsyncComponent, type HydrationStrategy } from 'vue'
 
 const myStrategy: HydrationStrategy = (hydrate, forEachElement) => {
- // forEachElement is a helper to iterate through all the root elememts
+ // forEachElement is a helper to iterate through all the root elements
  // in the component's non-hydrated DOM, since the root can be a fragment
  // instead of a single element
  forEachElement(el => {

src/guide/components/v-model.md

@@ -68,7 +68,7 @@ const emit = defineEmits(['update:modelValue'])
 
 <template>
  <input
- :value="modelValue"
+ :value="props.modelValue"
  @input="emit('update:modelValue', $event.target.value)"
  />
 </template>
@@ -446,7 +446,7 @@ function emitValue(e) {
 </script>
 
 <template>
- <input type="text" :value="modelValue" @input="emitValue" />
+ <input type="text" :value="props.modelValue" @input="emitValue" />
 </template>
 ```
 

src/guide/typescript/composition-api.md

@@ -467,7 +467,7 @@ import { useTemplateRef } from 'vue'
 import MyGenericModal from './MyGenericModal.vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
-const modal = useTemplateRef<ComponentExposed<typeof MyModal>>(null)
+const modal = useTemplateRef<ComponentExposed<typeof MyGenericModal>>(null)
 
 const openModal = () => {
  modal.value?.open('newValue')