Merge remote-tracking branch 'upstream/main'

Author: Abdelaziz18003

.vitepress/config.ts

@@ -1,10 +1,9 @@
+import fs from 'fs'
+import path from 'path'
+import { defineConfigWithTheme } from 'vitepress'
 import type { Config as ThemeConfig } from '@vue/theme'
 import baseConfig from '@vue/theme/config'
-import { defineConfigWithTheme } from 'vitepress'
-import fs from 'fs'
 import { headerPlugin } from './headerMdPlugin'
-import { jobsPlugin } from './jobsMdPlugin'
-import path from 'path'
 
 const nav: ThemeConfig['nav'] = [
   {
@@ -90,9 +89,9 @@ const nav: ThemeConfig['nav'] = [
         text: 'المستجدات',
         items: [
           { text: 'المدونة', link: 'https://blog.vuejs.org/' },
-          { text: 'المدونة', link: 'https://twitter.com/vuejs' },
-          { text: 'النشرة البريدية', link: 'https://news.vuejs.org/' },
-          { text: 'الفعاليات', link: 'https://events.vuejs.org/' }
+          { text: 'تويتر', link: 'https://twitter.com/vuejs' },
+          { text: 'الفعاليات', link: 'https://events.vuejs.org/' },
+          { text: 'النشرة البريدية', link: 'https://news.vuejs.org' }
         ]
       }
     ]
@@ -196,6 +195,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
         },
         { text: 'الخاصيات', link: '/guide/components/props' },
         { text: 'الأحداث', link: '/guide/components/events' },
+        { text: 'الخاصية v-model', link: '/guide/components/v-model' },
         {
           text: 'السمات الإحتياطية',
           link: '/guide/components/attrs'
@@ -677,7 +677,7 @@ export default defineConfigWithTheme<ThemeConfig>({
 
   markdown: {
     config(md) {
-      md.use(headerPlugin).use(jobsPlugin)
+      md.use(headerPlugin)
     }
   },
 

.vitepress/theme/components/Home.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import NewsLetter from './NewsLetter.vue'
+import SiteMap from './SiteMap.vue';
+// import NewsLetter from './NewsLetter.vue'
 import { load, data, base } from './sponsors'
 import SponsorsGroup from './SponsorsGroup.vue'
 import VueMasteryModal from './VueMasteryModal.vue'
@@ -89,7 +90,8 @@ onMounted(async () => {
     <SponsorsGroup tier="gold" placement="landing" />
   </section>
 
-  <NewsLetter />
+  <SiteMap />
+  <!-- <NewsLetter /> -->
 </template>
 
 <style scoped>

.vitepress/theme/components/SiteMap.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { VTLink } from '@vue/theme'
+import { useData } from 'vitepress'
+
+const data = useData()
+const nav = data.site.value.themeConfig.nav
+const ecosystem = nav.find((i: any) => i.text === 'Ecosystem')
+const items = nav
+  .filter((i: any) => i !== ecosystem && i.items)
+  .concat(ecosystem.items)
+</script>
+
+<template>
+  <section id="sitemap">
+    <div class="container">
+      <div class="sitemap-col" v-for="col in items">
+        <h4>{{ col.text }}</h4>
+        <ul>
+          <li v-for="row in col.items">
+            <VTLink :href="row.link">{{ row.text }}</VTLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style>
+#sitemap {
+  background: var(--vt-c-bg-soft);
+}
+
+#sitemap .container {
+  max-width: 900px;
+  margin: 0 auto;
+  columns: 1;
+  padding: 24px 32px;
+}
+
+@media (min-width: 768px) {
+  #sitemap .container {
+    columns: 2;
+  }
+}
+
+@media (min-width: 1024px) {
+  #sitemap .container {
+    columns: 3;
+  }
+}
+
+#sitemap h4 {
+  font-weight: 500;
+  color: var(--vt-c-text-1);
+  margin-bottom: 0.25em;
+}
+
+.sitemap-col {
+  margin-bottom: 2em;
+  break-inside: avoid;
+}
+
+#sitemap .vt-link {
+  font-size: 0.9em;
+  color: var(--vt-c-text-2);
+}
+</style>

.vitepress/theme/components/SponsorsGroup.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
-import { SponsorData, data, base, load } from './sponsors';
+import { SponsorData, data, base, load } from './sponsors'
 
 const { tier, placement = 'aside' } = defineProps<{
   tier: keyof SponsorData

.vitepress/theme/components/VueJobs.vue

@@ -5,17 +5,17 @@ const base = 'https://app.vuejobs.com/feed/vuejs/docs?format=json'
 let items = $ref<Jobs[]>([])
 
 type Jobs = {
-  organization: Organization;
-  title: string;
-  link: string;
-  locations: string[];
-  remote: false | 'ALLOWED' | 'ONLY';
-};
+  organization: Organization
+  title: string
+  link: string
+  locations: string[]
+  remote: false | 'ALLOWED' | 'ONLY'
+}
 
 type Organization = {
-  name: string;
-  avatar: string;
-};
+  name: string
+  avatar: string
+}
 </script>
 
 <script setup lang="ts">

.vitepress/theme/index.ts

@@ -8,7 +8,6 @@ import {
   filterHeadersByPreference
 } from './components/preferences'
 import SponsorsAside from './components/SponsorsAside.vue'
-import VueJobs from './components/VueJobs.vue'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 // import Banner from './components/Banner.vue'
 
@@ -26,6 +25,5 @@ export default Object.assign({}, VPTheme, {
     app.provide('prefer-sfc', preferSFC)
     app.provide('filter-headers', filterHeadersByPreference)
     app.component('VueSchoolLink', VueSchoolLink)
-    app.component('VueJobs', VueJobs)
   }
 })

.vitepress/theme/styles/vue-mastery.css

@@ -13,8 +13,8 @@
 .vue-mastery-link .banner {
   background-color: var(--vt-c-white-soft);
   border-radius: 4px;
-  width:96px;
-  height:56px;
+  width: 96px;
+  height: 56px;
   object-fit: cover;
 }
 
@@ -50,7 +50,7 @@
 
 @media (max-width: 576px) {
   .vue-mastery-link .banner {
-    width:56px;
+    width: 56px;
   }
 
   .vue-mastery-link .description {

src/about/team/TeamHero.vue

@@ -66,7 +66,7 @@
   font-size: 14px;
   font-weight: 500;
   color: var(--vt-c-brand);
-  transition: color .25s;
+  transition: color 0.25s;
 }
 
 .action :deep(a:hover) {

src/about/team/members-core.json

@@ -276,27 +276,6 @@
     },
     "sponsor": true
   },
-  {
-    "name": "Damian Dulisz",
-    "title": "Consultant",
-    "projects": [
-      {
-        "label": "news.vuejs.org",
-        "url": "https://news.vuejs.org"
-      },
-      {
-        "label": "vue-multiselect",
-        "url": "https://vue-multiselect.js.org/"
-      }
-    ],
-    "location": "Wrocław, Poland",
-    "languages": ["Polish", "English"],
-    "socials": {
-      "github": "shentao",
-      "twitter": "DamianDulisz"
-    },
-    "sponsor": true
-  },
   {
     "name": "GU Yiling",
     "title": "Senior web developer",

src/about/team/members-emeriti.json

@@ -237,5 +237,26 @@
       "github": "michalsnik",
       "twitter": "michalsnik"
     }
+  },
+  {
+    "name": "Damian Dulisz",
+    "title": "Consultant",
+    "projects": [
+      {
+        "label": "news.vuejs.org",
+        "url": "https://news.vuejs.org"
+      },
+      {
+        "label": "vue-multiselect",
+        "url": "https://vue-multiselect.js.org/"
+      }
+    ],
+    "location": "Wrocław, Poland",
+    "languages": ["Polish", "English"],
+    "socials": {
+      "github": "shentao",
+      "twitter": "DamianDulisz"
+    },
+    "sponsor": true
   }
 ]

src/about/team/members-partner.json

@@ -161,8 +161,8 @@
   {
     "name": "Sebastien Chopin",
     "title": "#1 Nuxt Brother",
-    "company": "NuxtJS",
-    "companyLink": "https://nuxtjs.org",
+    "company": "NuxtLabs",
+    "companyLink": "https://nuxtlabs.com",
     "location": "Bordeaux, France",
     "languages": ["French", "English"],
     "projects": [
@@ -171,12 +171,12 @@
         "url": "https://github.com/nuxt"
       },
       {
-        "label": "nuxt-community/*",
-        "url": "https://github.com/nuxt-community"
+        "label": "nuxt-modules/*",
+        "url": "https://github.com/nuxt-modules"
       },
       {
-        "label": "nuxt/vue-meta",
-        "url": "https://github.com/nuxt/vue-meta"
+        "label": "nuxt-themes/*",
+        "url": "https://github.com/nuxt-themes"
       }
     ],
     "socials": {
@@ -187,8 +187,8 @@
   {
     "name": "Alexandre Chopin",
     "title": "#1 Nuxt Brother",
-    "company": "NuxtJS",
-    "companyLink": "https://nuxtjs.org",
+    "company": "NuxtLabs",
+    "companyLink": "https://nuxtlabs.com",
     "location": "Bordeaux, France",
     "languages": ["French", "English"],
     "projects": [
@@ -197,12 +197,8 @@
         "url": "https://github.com/nuxt"
       },
       {
-        "label": "nuxt-community/*",
-        "url": "https://github.com/nuxt-community"
-      },
-      {
-        "label": "vue-flexboxgrid",
-        "url": "https://github.com/alexchopin/vue-flexboxgrid"
+        "label": "nuxt-modules/*",
+        "url": "https://github.com/nuxt-modules"
       }
     ],
     "socials": {

src/api/built-in-directives.md

@@ -362,7 +362,7 @@ Create a two-way binding on a form input element or a component.
 - **See also:**
 
   - [Form Input Bindings](/guide/essentials/forms.html)
-  - [Component Events - Usage with `v-model`](/guide/components/events.html#usage-with-v-model)
+  - [Component Events - Usage with `v-model`](/guide/components/v-model.html)
 
 ## v-slot {#v-slot}
 

src/api/built-in-special-elements.md

@@ -1,7 +1,7 @@
 # Built-in Special Elements {#built-in-special-elements}
 
 :::info Not Components
-`<component>` and `<slot>` are component-like features and part of the template syntax. They are not true components and are compiled away during template compilation. As such, they are conventionally written with lowercase in templates.
+`<component>`, `<slot>` and `<template>` are component-like features and part of the template syntax. They are not true components and are compiled away during template compilation. As such, they are conventionally written with lowercase in templates.
 :::
 
 ## `<component>` {#component}
@@ -139,3 +139,26 @@ Denotes slot content outlets in templates.
   `<slot>` elements in Vue templates are compiled into JavaScript, so they are not to be confused with [native `<slot>` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).
 
 - **See also:** [Component - Slots](/guide/components/slots.html)
+
+## `<template>` {#template}
+
+The `<template>` tag is used as a placeholder when we want to use a built-in directive without rendering an element in the DOM.
+
+- **Details:**
+
+  The special handling for `<template>` is only triggered if it is used with one of these directives:
+
+  - `v-if`, `v-else-if`, or `v-else`
+  - `v-for`
+  - `v-slot`
+  
+  If none of those directives are present then it will be rendered as a [native `<template>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) instead.
+
+  A `<template>` with a `v-for` can also have a [`key` attribute](/api/built-in-special-attributes.html#key). All other attributes and directives will be discarded, as they aren't meaningful without a corresponding element.
+
+  Single-file components use a [top-level `<template>` tag](/api/sfc-spec.html#language-blocks) to wrap the entire template. That usage is separate from the use of `<template>` described above. That top-level tag is not part of the template itself and doesn't support template syntax, such as directives.  
+
+- **See also:**
+  - [Guide - `v-if` on `<template>`](/guide/essentials/conditional.html#v-if-on-template) 
+  - [Guide - `v-for` on `<template>`](/guide/essentials/list.html#v-for-on-template) 
+  - [Guide - Named slots](/guide/components/slots.html#named-slots) 

src/api/reactivity-core.md

@@ -453,10 +453,34 @@ Watches one or more reactive data sources and invokes a callback function when t
     flush: 'post',
     onTrack(e) {
       debugger
+    },
+    onTrigger(e) {
+      debugger
     }
   })
   ```
 
+  Stopping the watcher:
+
+  ```js
+  const stop = watch(source, callback)
+
+  // when the watcher is no longer needed:
+  stop()
+  ```
+
+  Side effect cleanup:
+
+  ```js
+  watch(id, async (newId, oldId, onCleanup) => {
+    const { response, cancel } = doAsyncWork(newId)
+    // `cancel` will be called if `id` changes, cancelling
+    // the previous request if it hasn't completed yet
+    onCleanup(cancel)
+    data.value = await response
+  })
+  ```
+
 - **See also**:
 
   - [Guide - Watchers](/guide/essentials/watchers.html)