+
+
+
+
+
+
+
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 3aa1dac2..212b4138 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -12,12 +12,14 @@ import SponsorsAside from './components/SponsorsAside.vue'
import VueSchoolLink from './components/VueSchoolLink.vue'
// import Banner from './components/Banner.vue'
// import TextAd from './components/TextAd.vue'
+import VueMasteryBanner from './components/VueMasteryBanner.vue'
export default Object.assign({}, VPTheme, {
Layout: () => {
// @ts-ignore
return h(VPTheme.Layout, null, {
// banner: () => h(Banner),
+ banner: () => h(VueMasteryBanner),
'sidebar-top': () => h(PreferenceSwitch),
'sidebar-bottom': () => h(SecurityUpdateBtn),
'aside-mid': () => h(SponsorsAside)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 009f95c7..376bf495 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ importers:
version: 4.4.2
'@vue/theme':
specifier: ^2.3.0
- version: 2.3.0(@algolia/client-search@4.24.0)(search-insights@2.17.2)(vitepress@1.4.3(@algolia/client-search@4.24.0)(@types/node@22.7.5)(postcss@8.4.47)(search-insights@2.17.2)(typescript@5.6.3))(vue@3.5.12(typescript@5.6.3))
+ version: 2.3.0(@algolia/client-search@4.24.0)(search-insights@2.17.2)(vitepress@1.5.0(@algolia/client-search@4.24.0)(@types/node@22.7.5)(postcss@8.4.49)(search-insights@2.17.2)(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))
dynamics.js:
specifier: ^1.1.5
version: 1.1.5
@@ -22,10 +22,10 @@ importers:
version: 3.12.5
vitepress:
specifier: ^1.4.3
- version: 1.4.3(@algolia/client-search@4.24.0)(@types/node@22.7.5)(postcss@8.4.47)(search-insights@2.17.2)(typescript@5.6.3)
+ version: 1.5.0(@algolia/client-search@4.24.0)(@types/node@22.7.5)(postcss@8.4.49)(search-insights@2.17.2)(typescript@5.6.3)
vue:
specifier: ^3.5.12
- version: 3.5.12(typescript@5.6.3)
+ version: 3.5.13(typescript@5.6.3)
devDependencies:
'@types/body-scroll-lock':
specifier: ^3.1.2
@@ -288,6 +288,12 @@ packages:
cpu: [x64]
os: [win32]
+ '@iconify-json/simple-icons@1.2.10':
+ resolution: {integrity: sha512-9OK1dsSjXlH36lhu5n+BlSoXuqFjHUErGLtNdzHpq0vHq4YFBuGYWtZ+vZTHLreRQ8ijPRv/6EsgkV+nf6AReQ==}
+
+ '@iconify/types@2.0.0':
+ resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
'@jridgewell/sourcemap-codec@1.5.0':
resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
@@ -441,14 +447,20 @@ packages:
'@vue/compiler-core@3.5.12':
resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
+ '@vue/compiler-core@3.5.13':
+ resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
+
'@vue/compiler-dom@3.5.12':
resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==}
- '@vue/compiler-sfc@3.5.12':
- resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==}
+ '@vue/compiler-dom@3.5.13':
+ resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
- '@vue/compiler-ssr@3.5.12':
- resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
+ '@vue/compiler-sfc@3.5.13':
+ resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
+
+ '@vue/compiler-ssr@3.5.13':
+ resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
'@vue/compiler-vue2@2.7.16':
resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
@@ -470,26 +482,29 @@ packages:
typescript:
optional: true
- '@vue/reactivity@3.5.12':
- resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
+ '@vue/reactivity@3.5.13':
+ resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
'@vue/repl@4.4.2':
resolution: {integrity: sha512-MEAsBK/YzMFGINOBzqM40XTeIYAUsg7CqvXvD5zi0rhYEQrPfEUIdexmMjdm7kVKsKmcvIHxrFK2DFC35m9kHw==}
- '@vue/runtime-core@3.5.12':
- resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
+ '@vue/runtime-core@3.5.13':
+ resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
- '@vue/runtime-dom@3.5.12':
- resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
+ '@vue/runtime-dom@3.5.13':
+ resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
- '@vue/server-renderer@3.5.12':
- resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
+ '@vue/server-renderer@3.5.13':
+ resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
peerDependencies:
- vue: 3.5.12
+ vue: 3.5.13
'@vue/shared@3.5.12':
resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
+ '@vue/shared@3.5.13':
+ resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
+
'@vue/theme@2.3.0':
resolution: {integrity: sha512-eKd4ipY6i6P2XD2iRVgbxs936g7pesEY2AgNX24C/sjzcmCnm48J7uV8xKXI2du2qfA89/r5QQp7bqZVf2Tekw==}
peerDependencies:
@@ -704,10 +719,17 @@ packages:
picocolors@1.1.0:
resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
+ picocolors@1.1.1:
+ resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
postcss@8.4.47:
resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
engines: {node: ^10 || ^12 || >=14}
+ postcss@8.4.49:
+ resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+ engines: {node: ^10 || ^12 || >=14}
+
preact@10.24.2:
resolution: {integrity: sha512-1cSoF0aCC8uaARATfrlz4VCBqE8LwZwRfLgkxJOQwAlQt6ayTmi0D9OF7nXid1POI5SZidFuG9CnlXbDfLqY/Q==}
@@ -827,8 +849,8 @@ packages:
terser:
optional: true
- vitepress@1.4.3:
- resolution: {integrity: sha512-956c2K2Mr0ubY9bTc2lCJD3g0mgo0mARB1iJC/BqUt4s0AM8Wl60wSU4zbFnzV7X2miFK1XJDKzGZnuEN90umw==}
+ vitepress@1.5.0:
+ resolution: {integrity: sha512-q4Q/G2zjvynvizdB3/bupdYkCJe2umSAMv9Ju4d92E6/NXJ59z70xB0q5p/4lpRyAwflDsbwy1mLV9Q5+nlB+g==}
hasBin: true
peerDependencies:
markdown-it-mathjax3: ^4
@@ -859,8 +881,8 @@ packages:
peerDependencies:
typescript: '>=5.0.0'
- vue@3.5.12:
- resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==}
+ vue@3.5.13:
+ resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
peerDependencies:
typescript: '*'
peerDependenciesMeta:
@@ -1083,6 +1105,12 @@ snapshots:
'@esbuild/win32-x64@0.21.5':
optional: true
+ '@iconify-json/simple-icons@1.2.10':
+ dependencies:
+ '@iconify/types': 2.0.0
+
+ '@iconify/types@2.0.0': {}
+
'@jridgewell/sourcemap-codec@1.5.0': {}
'@rollup/rollup-android-arm-eabi@4.24.0':
@@ -1195,10 +1223,10 @@ snapshots:
'@ungap/structured-clone@1.2.0': {}
- '@vitejs/plugin-vue@5.1.4(vite@5.4.10(@types/node@22.7.5))(vue@3.5.12(typescript@5.6.3))':
+ '@vitejs/plugin-vue@5.1.4(vite@5.4.10(@types/node@22.7.5))(vue@3.5.13(typescript@5.6.3))':
dependencies:
vite: 5.4.10(@types/node@22.7.5)
- vue: 3.5.12(typescript@5.6.3)
+ vue: 3.5.13(typescript@5.6.3)
'@volar/language-core@2.4.6':
dependencies:
@@ -1220,27 +1248,40 @@ snapshots:
estree-walker: 2.0.2
source-map-js: 1.2.1
+ '@vue/compiler-core@3.5.13':
+ dependencies:
+ '@babel/parser': 7.25.8
+ '@vue/shared': 3.5.13
+ entities: 4.5.0
+ estree-walker: 2.0.2
+ source-map-js: 1.2.1
+
'@vue/compiler-dom@3.5.12':
dependencies:
'@vue/compiler-core': 3.5.12
'@vue/shared': 3.5.12
- '@vue/compiler-sfc@3.5.12':
+ '@vue/compiler-dom@3.5.13':
+ dependencies:
+ '@vue/compiler-core': 3.5.13
+ '@vue/shared': 3.5.13
+
+ '@vue/compiler-sfc@3.5.13':
dependencies:
'@babel/parser': 7.25.8
- '@vue/compiler-core': 3.5.12
- '@vue/compiler-dom': 3.5.12
- '@vue/compiler-ssr': 3.5.12
- '@vue/shared': 3.5.12
+ '@vue/compiler-core': 3.5.13
+ '@vue/compiler-dom': 3.5.13
+ '@vue/compiler-ssr': 3.5.13
+ '@vue/shared': 3.5.13
estree-walker: 2.0.2
magic-string: 0.30.12
- postcss: 8.4.47
+ postcss: 8.4.49
source-map-js: 1.2.1
- '@vue/compiler-ssr@3.5.12':
+ '@vue/compiler-ssr@3.5.13':
dependencies:
- '@vue/compiler-dom': 3.5.12
- '@vue/shared': 3.5.12
+ '@vue/compiler-dom': 3.5.13
+ '@vue/shared': 3.5.13
'@vue/compiler-vue2@2.7.16':
dependencies:
@@ -1278,41 +1319,43 @@ snapshots:
optionalDependencies:
typescript: 5.6.3
- '@vue/reactivity@3.5.12':
+ '@vue/reactivity@3.5.13':
dependencies:
- '@vue/shared': 3.5.12
+ '@vue/shared': 3.5.13
'@vue/repl@4.4.2': {}
- '@vue/runtime-core@3.5.12':
+ '@vue/runtime-core@3.5.13':
dependencies:
- '@vue/reactivity': 3.5.12
- '@vue/shared': 3.5.12
+ '@vue/reactivity': 3.5.13
+ '@vue/shared': 3.5.13
- '@vue/runtime-dom@3.5.12':
+ '@vue/runtime-dom@3.5.13':
dependencies:
- '@vue/reactivity': 3.5.12
- '@vue/runtime-core': 3.5.12
- '@vue/shared': 3.5.12
+ '@vue/reactivity': 3.5.13
+ '@vue/runtime-core': 3.5.13
+ '@vue/shared': 3.5.13
csstype: 3.1.3
- '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.3))':
+ '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.6.3))':
dependencies:
- '@vue/compiler-ssr': 3.5.12
- '@vue/shared': 3.5.12
- vue: 3.5.12(typescript@5.6.3)
+ '@vue/compiler-ssr': 3.5.13
+ '@vue/shared': 3.5.13
+ vue: 3.5.13(typescript@5.6.3)
'@vue/shared@3.5.12': {}
- '@vue/theme@2.3.0(@algolia/client-search@4.24.0)(search-insights@2.17.2)(vitepress@1.4.3(@algolia/client-search@4.24.0)(@types/node@22.7.5)(postcss@8.4.47)(search-insights@2.17.2)(typescript@5.6.3))(vue@3.5.12(typescript@5.6.3))':
+ '@vue/shared@3.5.13': {}
+
+ '@vue/theme@2.3.0(@algolia/client-search@4.24.0)(search-insights@2.17.2)(vitepress@1.5.0(@algolia/client-search@4.24.0)(@types/node@22.7.5)(postcss@8.4.49)(search-insights@2.17.2)(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))':
dependencies:
'@docsearch/css': 3.6.2
'@docsearch/js': 3.6.2(@algolia/client-search@4.24.0)(search-insights@2.17.2)
- '@vueuse/core': 10.11.1(vue@3.5.12(typescript@5.6.3))
+ '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.6.3))
body-scroll-lock: 4.0.0-beta.0
normalize.css: 8.0.1
tiny-decode: 0.1.3
- vitepress: 1.4.3(@algolia/client-search@4.24.0)(@types/node@22.7.5)(postcss@8.4.47)(search-insights@2.17.2)(typescript@5.6.3)
+ vitepress: 1.5.0(@algolia/client-search@4.24.0)(@types/node@22.7.5)(postcss@8.4.49)(search-insights@2.17.2)(typescript@5.6.3)
transitivePeerDependencies:
- '@algolia/client-search'
- '@types/react'
@@ -1322,31 +1365,31 @@ snapshots:
- search-insights
- vue
- '@vueuse/core@10.11.1(vue@3.5.12(typescript@5.6.3))':
+ '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.6.3))':
dependencies:
'@types/web-bluetooth': 0.0.20
'@vueuse/metadata': 10.11.1
- '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.6.3))
- vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+ '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.6.3))
+ vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
transitivePeerDependencies:
- '@vue/composition-api'
- vue
- '@vueuse/core@11.1.0(vue@3.5.12(typescript@5.6.3))':
+ '@vueuse/core@11.1.0(vue@3.5.13(typescript@5.6.3))':
dependencies:
'@types/web-bluetooth': 0.0.20
'@vueuse/metadata': 11.1.0
- '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.3))
- vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+ '@vueuse/shared': 11.1.0(vue@3.5.13(typescript@5.6.3))
+ vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
transitivePeerDependencies:
- '@vue/composition-api'
- vue
- '@vueuse/integrations@11.1.0(focus-trap@7.6.0)(vue@3.5.12(typescript@5.6.3))':
+ '@vueuse/integrations@11.1.0(focus-trap@7.6.0)(vue@3.5.13(typescript@5.6.3))':
dependencies:
- '@vueuse/core': 11.1.0(vue@3.5.12(typescript@5.6.3))
- '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.3))
- vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+ '@vueuse/core': 11.1.0(vue@3.5.13(typescript@5.6.3))
+ '@vueuse/shared': 11.1.0(vue@3.5.13(typescript@5.6.3))
+ vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
optionalDependencies:
focus-trap: 7.6.0
transitivePeerDependencies:
@@ -1357,16 +1400,16 @@ snapshots:
'@vueuse/metadata@11.1.0': {}
- '@vueuse/shared@10.11.1(vue@3.5.12(typescript@5.6.3))':
+ '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.6.3))':
dependencies:
- vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+ vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
transitivePeerDependencies:
- '@vue/composition-api'
- vue
- '@vueuse/shared@11.1.0(vue@3.5.12(typescript@5.6.3))':
+ '@vueuse/shared@11.1.0(vue@3.5.13(typescript@5.6.3))':
dependencies:
- vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+ vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
transitivePeerDependencies:
- '@vue/composition-api'
- vue
@@ -1549,12 +1592,20 @@ snapshots:
picocolors@1.1.0: {}
+ picocolors@1.1.1: {}
+
postcss@8.4.47:
dependencies:
nanoid: 3.3.7
picocolors: 1.1.0
source-map-js: 1.2.1
+ postcss@8.4.49:
+ dependencies:
+ nanoid: 3.3.7
+ picocolors: 1.1.1
+ source-map-js: 1.2.1
+
preact@10.24.2: {}
property-information@6.5.0: {}
@@ -1669,27 +1720,28 @@ snapshots:
'@types/node': 22.7.5
fsevents: 2.3.3
- vitepress@1.4.3(@algolia/client-search@4.24.0)(@types/node@22.7.5)(postcss@8.4.47)(search-insights@2.17.2)(typescript@5.6.3):
+ vitepress@1.5.0(@algolia/client-search@4.24.0)(@types/node@22.7.5)(postcss@8.4.49)(search-insights@2.17.2)(typescript@5.6.3):
dependencies:
'@docsearch/css': 3.6.2
'@docsearch/js': 3.6.2(@algolia/client-search@4.24.0)(search-insights@2.17.2)
+ '@iconify-json/simple-icons': 1.2.10
'@shikijs/core': 1.22.2
'@shikijs/transformers': 1.22.2
'@shikijs/types': 1.22.2
'@types/markdown-it': 14.1.2
- '@vitejs/plugin-vue': 5.1.4(vite@5.4.10(@types/node@22.7.5))(vue@3.5.12(typescript@5.6.3))
+ '@vitejs/plugin-vue': 5.1.4(vite@5.4.10(@types/node@22.7.5))(vue@3.5.13(typescript@5.6.3))
'@vue/devtools-api': 7.6.2
'@vue/shared': 3.5.12
- '@vueuse/core': 11.1.0(vue@3.5.12(typescript@5.6.3))
- '@vueuse/integrations': 11.1.0(focus-trap@7.6.0)(vue@3.5.12(typescript@5.6.3))
+ '@vueuse/core': 11.1.0(vue@3.5.13(typescript@5.6.3))
+ '@vueuse/integrations': 11.1.0(focus-trap@7.6.0)(vue@3.5.13(typescript@5.6.3))
focus-trap: 7.6.0
mark.js: 8.11.1
minisearch: 7.1.0
shiki: 1.22.2
vite: 5.4.10(@types/node@22.7.5)
- vue: 3.5.12(typescript@5.6.3)
+ vue: 3.5.13(typescript@5.6.3)
optionalDependencies:
- postcss: 8.4.47
+ postcss: 8.4.49
transitivePeerDependencies:
- '@algolia/client-search'
- '@types/node'
@@ -1720,9 +1772,9 @@ snapshots:
vscode-uri@3.0.8: {}
- vue-demi@0.14.10(vue@3.5.12(typescript@5.6.3)):
+ vue-demi@0.14.10(vue@3.5.13(typescript@5.6.3)):
dependencies:
- vue: 3.5.12(typescript@5.6.3)
+ vue: 3.5.13(typescript@5.6.3)
vue-tsc@2.1.6(typescript@5.6.3):
dependencies:
@@ -1731,13 +1783,13 @@ snapshots:
semver: 7.6.3
typescript: 5.6.3
- vue@3.5.12(typescript@5.6.3):
+ vue@3.5.13(typescript@5.6.3):
dependencies:
- '@vue/compiler-dom': 3.5.12
- '@vue/compiler-sfc': 3.5.12
- '@vue/runtime-dom': 3.5.12
- '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@5.6.3))
- '@vue/shared': 3.5.12
+ '@vue/compiler-dom': 3.5.13
+ '@vue/compiler-sfc': 3.5.13
+ '@vue/runtime-dom': 3.5.13
+ '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.6.3))
+ '@vue/shared': 3.5.13
optionalDependencies:
typescript: 5.6.3
diff --git a/src/about/faq.md b/src/about/faq.md
index 9a9faa84..3f325d80 100644
--- a/src/about/faq.md
+++ b/src/about/faq.md
@@ -22,8 +22,7 @@ vue ۳ آخرین نسخهی major vue است که حاوی ویژگیها
vue۲.۷، که در جولای ۲۰۲۲ عرضه شد، آخرین نسخهی minor vue ۲ است. vue ۲ حالا وارد حالت نگهداری شده است: vue ۲ دیگر ویژگیهای جدیدی را ارائه نمیدهد ولی رفع باگهای ضروری را دریافت میکند و بهروز رسانیهای امنیتی را تا ۱۸ ماه بعد از انتشار vue ۲.۷ ارائه میدهد. این به این معناست که **vue ۲ در تاریخ ۱۰ دی ۱۴۰۲ به پایان عمر خود میرسد**.
-ما بر این باور هستیم که این زمان زیاد برای مهاجرت بیشتر اکوسیستم به vue ۳ کافیست.
-به هر حال، ما متوجه هستیم که شاید گروهها و یا پروژههایی باشند که نتوانند در این مدت زمانی به vue ۳ ارتقا یابند در حالی که همچنان نیازمند امنیت و رضایتمندی هستند. ما در حال همکاری با حرفههای صنعت هستیم تا بتوانیم پشتیبانی بیشتری برای vue ۲ برای گروههایی با اینچنین نیازمندیهایی برقرار کنیم. اگر گروه شما میخواهد که بعد از ۲۰۲۳ همچنان از vue ۲ استفاده کند، در این رابطه برنامهریزی کنید و راجع به [پشتیبانی طولانی مدت اضافی vue ۲](https://v2.vuejs.org/lts/) بیشتر بدانید.
+ما بر این باور هستیم که این زمان زیاد برای مهاجرت بیشتر اکوسیستم به vue ۳ کافیست. به هر حال، ما متوجه هستیم که شاید گروهها و یا پروژههایی باشند که نتوانند در این مدت زمانی به vue ۳ ارتقا یابند در حالی که همچنان نیازمند امنیت و رضایتمندی هستند. ما در حال همکاری با حرفههای صنعت هستیم تا بتوانیم پشتیبانی بیشتری برای vue ۲ برای گروههایی با اینچنین نیازمندیهایی برقرار کنیم. اگر گروه شما میخواهد که بعد از ۲۰۲۳ همچنان از vue ۲ استفاده کند، در این رابطه برنامهریزی کنید و راجع به [پشتیبانی طولانی مدت اضافی vue ۲](https://v2.vuejs.org/lts/) بیشتر بدانید.
## vue از چه اجازهنامهای استفاده میکند؟ {#what-license-does-vue-use}
@@ -31,7 +30,7 @@ vue یک پروژهی آزاد و متنباز است که با اجازه
## vue از چه مرورگرهایی پشتیبانی میکند؟ {#what-browsers-does-vue-support}
-آخرین نسخهی vue (۳.x) فقط از [مرورگرهای با پشتیبانی درونی ES2015](https://caniuse.com/es6) پشتیبانی میکند. این قضیه شامل Internet Explorer 11 نمیشود. vue ۳.x از ویژگیهایی از ES2015 استفاده میکند که نمیتوانند در مرورگرهای قدیمی polyfill شوند. پس اگر شما به پشتیبانی از مرورگرهای قدیمی نیاز دارید، به جای vue ۳ از vue ۲ استفاده کنید.
+آخرین نسخهی vue (۳.x) فقط از [مرورگرهای با پشتیبانی درونی ES2016](https://caniuse.com/es2016) پشتیبانی میکند. این قضیه شامل Internet Explorer 11 نمیشود. vue ۳.x از ویژگیهایی از ES2015 استفاده میکند که نمیتوانند در مرورگرهای قدیمی polyfill شوند. پس اگر شما به پشتیبانی از مرورگرهای قدیمی نیاز دارید، به جای vue ۳ از vue ۲ استفاده کنید.
## آیا vue قابل اعتماد است؟ {#is-vue-reliable}
@@ -69,7 +68,6 @@ vue ۳ یکی از قدرتمندترین frameworkهای پراستفاده fro
- [پشتیبانی فراگیر از ابزارها](/guide/scaling-up/tooling) به شما این اطمینان خاطر را میدهد که از یک تجربهی توسعهی روان در عین حال که برنامه رشد میکند بهره ببرید.
-
- موانع کمتر برای ورود و مستندات عالی باعث میشود که هزینههای ورود و آموزش توسعهدهندههای جدید کاهش یابد.
## چگونه میتوان به vue مشارکت کرد؟ {#how-do-i-contribute-to-vue}
diff --git a/src/api/api.data.ts b/src/api/api.data.ts
index 719054fd..5c4f023b 100644
--- a/src/api/api.data.ts
+++ b/src/api/api.data.ts
@@ -1,15 +1,16 @@
// api.data.ts
-// a file ending with data.(j|t)s will be evaluated in Node.js
import fs from 'fs'
import path from 'path'
import type { MultiSidebarConfig } from '@vue/theme/src/vitepress/config.ts'
import { sidebar } from '../../.vitepress/config'
+// Interface defining the structure of a single header in the API
interface APIHeader {
anchor: string
text: string
}
+// Interface defining the structure of an API group with text, anchor, and items
export interface APIGroup {
text: string
anchor: string
@@ -20,79 +21,108 @@ export interface APIGroup {
}[]
}
-// declare resolved data type
+// Declare the resolved data type for API groups
export declare const data: APIGroup[]
-export default {
- // declare files that should trigger HMR
- watch: './*.md',
- // read from fs and generate the data
- load(): APIGroup[] {
- return (sidebar as MultiSidebarConfig)['/api/'].map((group) => ({
- text: group.text,
- anchor: slugify(group.text),
- items: group.items.map((item) => ({
- ...item,
- headers: parsePageHeaders(item.link)
- }))
- }))
- }
+// Utility function to generate a slug from a string (used for anchor links)
+function slugify(text: string): string {
+ return (
+ text
+ // Replace special characters and spaces with hyphens
+ .replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g, '-')
+ // Remove continuous separators
+ .replace(/-{2,}/g, '-')
+ // Remove leading/trailing hyphens
+ .replace(/^-+|-+$/g, '')
+ // Ensure it doesn't start with a number (e.g. #121)
+ .replace(/^(\d)/, '_$1')
+ // Convert to lowercase
+ .toLowerCase()
+ )
}
-const headersCache = new Map<
- string,
- {
- headers: APIHeader[]
- timestamp: number
- }
->()
-
-function parsePageHeaders(link: string) {
- const fullPath = path.join(__dirname, '../', link) + '.md'
- const timestamp = fs.statSync(fullPath).mtimeMs
+// Utility function to parse headers from a markdown file at a given link
+function parsePageHeaders(link: string): APIHeader[] {
+ const fullPath = path.join(__dirname, '../', link) + '.md' // Resolve the full file path
+ const timestamp = fs.statSync(fullPath).mtimeMs // Get the last modified timestamp of the file
+ // Check if the file is cached and if its timestamp matches
const cached = headersCache.get(fullPath)
if (cached && timestamp === cached.timestamp) {
- return cached.headers
+ return cached.headers // Return cached headers if they're up-to-date
}
- const src = fs.readFileSync(fullPath, 'utf-8')
- const h2s = src.match(/^## [^\n]+/gm)
+ const src = fs.readFileSync(fullPath, 'utf-8') // Read the markdown file
+ const headers = extractHeadersFromMarkdown(src) // Extract headers from the file content
+
+ // Store the extracted headers along with the file's timestamp in the cache
+ headersCache.set(fullPath, {
+ timestamp,
+ headers
+ })
+
+ return headers
+}
+
+// Helper function to extract all headers (h2) from markdown content
+function extractHeadersFromMarkdown(src: string): APIHeader[] {
+ const h2s = src.match(/^## [^\n]+/gm) // Match all h2 headers (## header)
+ const anchorRE = /\{#([^}]+)\}/ // Regular expression to match the anchor link in header (e.g. {#some-anchor})
let headers: APIHeader[] = []
+
if (h2s) {
- const anchorRE = /\{#([^}]+)\}/
+ // Process each h2 header and extract text and anchor
headers = h2s.map((h) => {
- const text = h
- .slice(2)
- .replace(/,.?/]+/g, '-')
- // Remove continuous separators
- .replace(/-{2,}/g, '-')
- // Remove prefixing and trailing separators
- .replace(/^-+|-+$/g, '')
- // ensure it doesn't start with a number (#121)
- .replace(/^(\d)/, '_$1')
- // lowercase
- .toLowerCase()
- )
+// Helper function to clean up header text (e.g., remove superscript, code formatting)
+function cleanHeaderText(h: string, anchorRE: RegExp): string {
+ return h
+ .slice(2) // Remove the "##" part of the header
+ .replace(/ tags)
+ .replace(/\\()
+
+// Main export function for loading the API data
+export default {
+ // Declare files that should trigger Hot Module Replacement (HMR)
+ watch: './*.md',
+
+ // Load API data and process sidebar items
+ load(): APIGroup[] {
+ // Generate the API group data by processing the sidebar configuration
+ return (sidebar as MultiSidebarConfig)['/api/'].map((group) => ({
+ text: group.text, // Text of the group (e.g., 'API')
+ anchor: slugify(group.text), // Generate anchor for the group title
+ items: group.items.map((item) => ({
+ ...item, // Spread the original item properties
+ headers: parsePageHeaders(item.link), // Parse the headers from the item's markdown link
+ }))
+ }))
+ }
}
diff --git a/src/examples/src/fetching-data/App/composition.js b/src/examples/src/fetching-data/App/composition.js
index d3e2754f..6ad826c5 100644
--- a/src/examples/src/fetching-data/App/composition.js
+++ b/src/examples/src/fetching-data/App/composition.js
@@ -1,7 +1,7 @@
import { ref, watchEffect } from 'vue'
const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`
-const branches = ['main', 'v2-compat']
+const branches = ['main', 'minor']
export default {
setup() {
diff --git a/src/examples/src/fetching-data/App/options.js b/src/examples/src/fetching-data/App/options.js
index 84923da0..7b51fb39 100644
--- a/src/examples/src/fetching-data/App/options.js
+++ b/src/examples/src/fetching-data/App/options.js
@@ -2,7 +2,7 @@ const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=
export default {
data: () => ({
- branches: ['main', 'v2-compat'],
+ branches: ['main', 'minor'],
currentBranch: 'main',
commits: []
}),
diff --git a/src/examples/src/fetching-data/App/template.html b/src/examples/src/fetching-data/App/template.html
index 90cbffc4..745e8b8f 100644
--- a/src/examples/src/fetching-data/App/template.html
+++ b/src/examples/src/fetching-data/App/template.html
@@ -7,7 +7,7 @@
آخرین کامیتهای اصلی Vue
v-model="currentBranch">
-
vuejs/vue@{{ currentBranch }}
+
vuejs/core@{{ currentBranch }}
{{ sha.slice(0, 7) }}
diff --git a/src/examples/src/fetching-data/description.txt b/src/examples/src/fetching-data/description.txt
index cb8e5697..e5c88d1c 100644
--- a/src/examples/src/fetching-data/description.txt
+++ b/src/examples/src/fetching-data/description.txt
@@ -1,2 +1,2 @@
-این مثال اطلاعات آخرین کامیتهای Vue.js را از API GitHub دریافت میکند و آنها را به صورت یک لیست نمایش میدهد.
-شما میتوانید بین دو برنچ جابجا شوید.
\ No newline at end of file
+این مثال اطلاعات آخرین کامیتهای Vue Core را از API GitHub دریافت میکند و آنها را به صورت یک لیست نمایش میدهد.
+شما میتوانید بین دو برنچ اصلی جابجا شوید.
diff --git a/src/guide/built-ins/transition-group.md b/src/guide/built-ins/transition-group.md
index f3ec2923..49b55fe3 100644
--- a/src/guide/built-ins/transition-group.md
+++ b/src/guide/built-ins/transition-group.md
@@ -80,9 +80,9 @@ import ListStagger from './transition-demos/ListStagger.vue'
[مثال کامل](/examples/#list-transition)
-### کلاسهای سفارشی TransitionGroup
+### کلاسهای سفارشی TransitionGroup {#custom-transitiongroup-classes}
-همچنین میتوانید کلاسهای انتقال سفارشی را برای عنصر در حال حرکت با ارسال ویژگی `moveClass` به `` مشخص کنید، درست مانند [کلاسهای انتقال سفارشی در ``](https://vuejs.org/guide/built-ins/transition.html#custom-transition-classes).
+همچنین میتوانید کلاسهای انتقال سفارشی را برای عنصر در حال حرکت با ارسال ویژگی `moveClass` به `` مشخص کنید، درست مانند [کلاسهای انتقال سفارشی در ``](/guide/built-ins/transition.html#custom-transition-classes).
## ترنزیشنهای متوالی در لیست {#staggering-list-transitions}
diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md
index d7dbdc78..c690928d 100644
--- a/src/guide/components/v-model.md
+++ b/src/guide/components/v-model.md
@@ -100,11 +100,15 @@ const model = defineModel({ default: 0 })
اگر برای پراپ `defineModel` مقدار `default` تعریف کرده باشید و هیچ مقداری به آن از کامپوننت والد پاس ندهید، میتواند باعث ناهمگامسازی (de-synchronization) بین کامپوننتهای والد و فرزند شود. در مثال زیر `myRef` والد برابر undefined است، اما `model` در فرزند برابر ۱ است:
+**Child component:**
+
```js
-// child component:
const model = defineModel({ default: 1 })
+```
-// parent component:
+**Parent component:**
+
+```js
const myRef = ref()
```
diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index 2a1fad5b..af4f1331 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -281,10 +281,10 @@ export default {
// کمتر یا مساوی 3 شود count تا زمانی که
alwaysSmall(previous) {
if (this.count <= 3) {
- return this.count;
+ return this.count
}
- return previous;
+ return previous
}
}
}
@@ -304,10 +304,10 @@ const count = ref(2)
// کمتر یا مساوی 3 شود count تا زمانی که
const alwaysSmall = computed((previous) => {
if (count.value <= 3) {
- return count.value;
+ return count.value
}
- return previous;
+ return previous
})
```
@@ -328,13 +328,13 @@ export default {
alwaysSmall: {
get(previous) {
if (this.count <= 3) {
- return this.count;
+ return this.count
}
return previous;
},
set(newValue) {
- this.count = newValue * 2;
+ this.count = newValue * 2
}
}
}
@@ -353,13 +353,13 @@ const count = ref(2)
const alwaysSmall = computed({
get(previous) {
if (count.value <= 3) {
- return count.value;
+ return count.value
}
- return previous;
+ return previous
},
set(newValue) {
- count.value = newValue * 2;
+ count.value = newValue * 2
}
})
diff --git a/src/guide/essentials/event-handling.md b/src/guide/essentials/event-handling.md
index 7939a173..9e65d159 100644
--- a/src/guide/essentials/event-handling.md
+++ b/src/guide/essentials/event-handling.md
@@ -350,10 +350,12 @@ Vue میانبرهایی برای پرکاربردترین کلیدها ارائ
```
-## Mouse Button Modifiers {#mouse-button-modifiers}
+## تغییردهندههای دکمه ماوس {#mouse-button-modifiers}
- `.left`
- `.right`
- `.middle`
این تغییردهندهها، کنترلکننده را محدود به رویدادهایی میکنند که توسط دکمه خاصی از ماوس فعال شدهاند.
+
+با این حال، توجه داشته باشید که نامهای تغییر دهندهی `.left` ، `.right` و `.middle` بر اساس چیدمان معمول موس برای افراد راستدست تعیین شدهاند. اما در واقع، این نامها به ترتیب نشاندهندهی رویدادهای دستگاههای اشارهگر یعنی "اصلی"، "فرعی" و "کمکی" هستند و به دکمههای فیزیکی مربوط نمیشوند. بنابراین، در چیدمان موس چپدست، ممکن است دکمه "اصلی" فیزیکی همان دکمه راست باشد، ولی تغییر دهندهی `.left` را فعال کند. برای مثال، یک ترکپد ممکن است با یک ضربه یکانگشتی تغییر دهندهی `.left`، با یک ضربه دو انگشتی تغییر دهندهی `.right` و با یک ضربه سهانگشتی تغییر دهندهی `.middle` را فعال کند. به طور مشابه، دستگاهها و منابع رویدادی دیگری که رویدادهای "موس" تولید میکنند، ممکن است روشهای فعالسازی داشته باشند که اصلاً به "چپ" و "راست" ربطی نداشته باشند.
diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md
index 00bcd98e..b7a1039a 100644
--- a/src/guide/extras/reactivity-in-depth.md
+++ b/src/guide/extras/reactivity-in-depth.md
@@ -403,7 +403,7 @@ export function useMachine(options) {
چندین فریمورک دیگر هم مفاهیم اولیه واکنشپذیری مشابه refs از Composition API Vue را با عنوان "سیگنالها" معرفی کردهاند:
- [سیگنالها در Solid](https://www.solidjs.com/docs/latest/api#createsignal)
-- [سیگنالها در Angular](https://angular.io/guide/signals)
+- [سیگنالها در Angular](https://angular.dev/guide/signals)
- [سیگنالها در Preact](https://preactjs.com/guide/v10/signals/)
- [سیگنالها در Qwik](https://qwik.builder.io/docs/components/state/#usesignal)
diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md
index 4f9c1b21..bfdac36c 100644
--- a/src/guide/extras/web-components.md
+++ b/src/guide/extras/web-components.md
@@ -220,6 +220,8 @@ customElements.define('my-example', ExampleElement)
توصیه میشود سازندههای المنتهای جدا از هم را export کنید تا به کاربرانتان انعطافپذیری بدهید آنها را در زمان نیاز import کنند و با نام تگ دلخواه ثبت نمایند. همچنین میتوانید یک تابع مقداردهی اولیه را export کنید تا خودکار همه المنتها را ثبت کند. مثالی از نقطه ورود یک کتابخانه المنتهای سفارشی Vue:
```js
+// elements.js
+
import { defineCustomElement } from 'vue'
import Foo from './MyFoo.ce.vue'
import Bar from './MyBar.ce.vue'
@@ -236,31 +238,276 @@ export function register() {
}
```
-اگر کامپوننتهای زیادی دارید، میتوانید از ویژگیهای ابزارهای بیلد مانند [glob import](https://vitejs.dev/guide/features.html#glob-import) در Vite یا [`require.context`](https://webpack.js.org/guides/dependency-management/#requirecontext) وبپک برای بارگذاری همه کامپوننتها از یک دایرکتوری هم استفاده کنید.
+مصرفکننده میتواند از المنتهای موجود در یک فایل Vue استفاده کند.
+
+```vue
+
+
+
+
+
+
+
+```
+
+یا در هر فریمورک دیگری مانند فریمورکی که از JSX استفاده میکند، و با نامهای دلخواه:
-### Web Components and TypeScript {#web-components-and-typescript}
+```jsx
+import { MyFoo, MyBar } from 'path/to/elements.js'
+
+customElements.define('some-foo', MyFoo)
+customElements.define('some-bar', MyBar)
+
+export function MyComponent() {
+ return <>
+
+
+
+
+}
+```
-اگر در حال توسعه یک برنامه یا کتابخانه هستید، ممکن است بخواهید کامپوننتهای Vue خود از جمله آنهایی که به عنوان المنتهای سفارشی تعریف شدهاند را [type check](/guide/scaling-up/tooling.html#typescript) کنید.
+### کامپوننتهای وب مبتنی بر Vue و TypeScript {#web-components-and-typescript}
-المنتهای سفارشی به طور سراسری با استفاده از APIهای بومی ثبت میشوند، بنابراین به طور پیشفرض هنگام استفاده در تمپلیتهای Vue ما type inference نخواهیم داشت. برای فراهم کردن پشتیبانی از تایپ برای کامپوننتهای Vue ما، که به عنوان المنتهای سفارشی ثبت شدهاند، میتوانیم تایپهای سراسری کامپوننت را با استفاده از [`GlobalComponents` interface](https://github.com/vuejs/language-tools/blob/master/packages/vscode-vue/README.md#usage) در تمپلیتهای Vue و یا در [JSX](https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements) ثبت کنیم:
+هنگام نوشتن تمپلیت تک صفحهای vue، ممکن است بخواهید کامپوننتهای Vue خود از جمله آنهایی که به عنوان المنتهای سفارشی تعریف شدهاند را [type check](/guide/scaling-up/tooling.html#typescript) کنید.
+
+المنتهای سفارشی به طور سراسری در مرورگر با استفاده از APIهای بومی ثبت میشوند، بنابراین به طور پیشفرض هنگام استفاده در تمپلیتهای Vue ما type inference نخواهیم داشت. برای فراهم کردن پشتیبانی از تایپ برای کامپوننتهای Vue ما، که به عنوان المنتهای سفارشی ثبت شدهاند، میتوانیم تایپهای سراسری کامپوننت را با استفاده از [GlobalComponents interface](https://github.com/vuejs/language-tools/blob/master/packages/vscode-vue/README.md#usage) در تمپلیتهای Vue و یا در [JSX](https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements) ثبت کنیم.
+
+در اینجا نحوه تعریف تایپ یک المنت سفارشی ساخته شده با Vue آمده است:
```typescript
import { defineCustomElement } from 'vue'
-// vue SFC
-import CounterSFC from './src/components/counter.ce.vue'
+// Import the Vue component.
+import SomeComponent from './src/components/SomeComponent.ce.vue'
+
+// Turn the Vue component into a Custom Element class.
+export const SomeElement = defineCustomElement(SomeComponent)
+
+// Remember to register the element class with the browser.
+customElements.define('some-element', SomeElement)
+
+// Add the new element type to Vue's GlobalComponents type.
+declare module 'vue' {
+ interface GlobalComponents {
+ // Be sure to pass in the Vue component type here (SomeComponent, *not* SomeElement).
+ // Custom Elements require a hyphen in their name, so use the hyphenated element name here.
+ 'some-element': typeof SomeComponent
+ }
+}
+```
+
+## کامپوننتهای وب غیر Vue و TypeScript {#non-vue-web-components-and-typescript}
+
+در اینجا روش پیشنهادی برای فعال کردن بررسی تایپ (Type Checking) در تمپلیتهای SFC
+برای المنتهای سفارشی که با Vue ساخته نشدهاند، ارائه شده است.
+
+:::tip نکته
+این روش یکی از راههای ممکن برای انجام آن است، اما ممکن است بسته به فریمورکی که برای ساخت المنتهای سفارشی استفاده میشود، متفاوت باشد.
+:::
+
+فرض کنید یک المنت سفارشی داریم که دارای برخی ویژگیهای جاوا اسکریپتی (JS Properties) و رویدادهای تعریف شده است
+و در یک کتابخانه به نام `some-lib` ارائه میشود:
+
+```ts
+// file: some-lib/src/SomeElement.ts
+
+// Define a class with typed JS properties.
+export class SomeElement extends HTMLElement {
+ foo: number = 123
+ bar: string = 'blah'
+
+ lorem: boolean = false
+
+ // This method should not be exposed to template types.
+ someMethod() {
+ /* ... */
+ }
+
+ // ... implementation details omitted ...
+ // ... assume the element dispatches events named "apple-fell" ...
+}
+
+customElements.define('some-element', SomeElement)
+
+// This is a list of properties of SomeElement that will be selected for type
+// checking in framework templates (f.e. Vue SFC templates). Any other
+// properties will not be exposed.
+export type SomeElementAttributes = 'foo' | 'bar'
+
+// Define the event types that SomeElement dispatches.
+export type SomeElementEvents = {
+ 'apple-fell': AppleFellEvent
+}
+
+export class AppleFellEvent extends Event {
+ /* ... details omitted ... */
+}
+```
+
+جزئیات پیادهسازی حذف شدهاند،اما بخش مهم این است که ما تعریفهای تایپ برای دو مورد داریم:
+انواع ویژگیها (Prop Types) و انواع رویدادها (Event Types).
+
+بیایید یک کمکی برای ثبت آسان تعریفهای تایپ المنتهای سفارشی در Vue ایجاد کنیم:
+
+```ts
+// file: some-lib/src/DefineCustomElement.ts
+
+// We can re-use this type helper per each element we need to define.
+type DefineCustomElement<
+ ElementType extends HTMLElement,
+ Events extends EventMap = {},
+ SelectedAttributes extends keyof ElementType = keyof ElementType
+> = new () => ElementType & {
+ // Use $props to define the properties exposed to template type checking. Vue
+ // specifically reads prop definitions from the `$props` type. Note that we
+ // combine the element's props with the global HTML props and Vue's special
+ // props.
+ /** @deprecated Do not use the $props property on a Custom Element ref, this is for template prop types only. */
+ $props: HTMLAttributes &
+ Partial> &
+ PublicProps
+
+ // Use $emit to specifically define event types. Vue specifically reads event
+ // types from the `$emit` type. Note that `$emit` expects a particular format
+ // that we map `Events` to.
+ /** @deprecated Do not use the $emit property on a Custom Element ref, this is for template prop types only. */
+ $emit: VueEmit
+}
+
+type EventMap = {
+ [event: string]: Event
+}
+
+// This maps an EventMap to the format that Vue's $emit type expects.
+type VueEmit = EmitFn<{
+ [K in keyof T]: (event: T[K]) => void
+}>
+```
+
+:::tip نکته
+ما پراپرتیهای `$props` و `$emit` را بهعنوان منسوخ شده علامتگذاری کردهایم
+تا زمانی که به یک المنت سفارشی ارجاع (`ref`) میگیریم، از این پراپرتیهای استفاده نکنیم.
+این پراپرتیهای فقط برای بررسی تایپ در کد مورد استفاده قرار میگیرند و در واقع روی نمونههای واقعی المنت سفارشی وجود ندارند.
+:::
+
+با استفاده از این کمکی تایپ (type helper)، اکنون میتوانیم ویژگیهای جاوا اسکریپتی
+(JS properties) که باید برای بررسی تایپ در تمپلیتهای Vue نمایش داده شوند را انتخاب کنیم:
+
+```ts
+// file: some-lib/src/SomeElement.vue.ts
+
+import {
+ SomeElement,
+ SomeElementAttributes,
+ SomeElementEvents
+} from './SomeElement.js'
+import type { Component } from 'vue'
+import type { DefineCustomElement } from './DefineCustomElement'
+
+// Add the new element type to Vue's GlobalComponents type.
+declare module 'vue' {
+ interface GlobalComponents {
+ 'some-element': DefineCustomElement<
+ SomeElement,
+ SomeElementAttributes,
+ SomeElementEvents
+ >
+ }
+}
+```
-// turn component into web components
-export const Counter = defineCustomElement(CounterSFC)
+فرض کنید که `some-lib` فایلهای TypeScript خود را در پوشه `dist/` کامپایل میکند.
+سپس یک کاربر از `some-lib` میتواند `SomeElement` را ایمپورت کرده و آن را در یک SFC ویو به این صورت استفاده کند:
-// register global typings
+```vue
+
+
+
+
+
+
+```
+
+اگر یک المنت تعریفهای تایپ را نداشته باشد،
+انواع ویژگیها و رویدادها را میتوان به صورت دستیتر تعریف کرد:
+
+```vue
+
+
+
+
+
```
+نویسندگان المنتهای سفارشی نباید به طور خودکار تعاریف تایپ المنتهای سفارشی مختص فریمورکها را از کتابخانههای خود اکسپورت کنند.
+به عنوان مثال، نباید این تعاریف را از یک فایل `index.ts`
+که سایر بخشهای کتابخانه را نیز اکسپورت میکند، اکسپورت کنند؛
+زیرا در غیر این صورت، کاربران با ارورهای غیرمنتظرهای در مورد گسترش ماژول (module augmentation) مواجه خواهند شد.
+کاربران باید فایل تعریف تایپ مختص فریمورکی را که نیاز دارند ایمپورت کنند.
+
## کامپوننتهای Web در مقابل کامپوننتهای Vue {#web-components-vs-vue-components}
برخی توسعهدهندگان باور دارند که باید از مدلهای کامپوننت مخصوص به فریمورک اجتناب شود و استفاده انحصاری از المنتهای سفارشی، در بروزرسانیهای آینده برنامه را "پایدار" میکند. در اینجا تلاش میکنیم توضیح دهیم که چرا فکر میکنیم که این نگرش بیش از حد سادهگرا به مسئله است.
diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md
index 1abc0f51..602c3a45 100644
--- a/src/guide/reusability/custom-directives.md
+++ b/src/guide/reusability/custom-directives.md
@@ -25,7 +25,7 @@ Vue به شما امکان میدهد علاوه بر مجموعه دایرک
ما دو روش باز استفاده کد در Vue را معرفی کردیم: [کامپوننت ها](/guide/essentials/component-basics) و [کامپوزبل ها](./composables). کامپوننتها قالبهای اصلی ساخت هستند در حالیکه کامپوزبلها روی استفاده دوباره منطق با نگه داشتن وضعیت قبلی سیستم تمرکز کردهاند. از طرف دیگر، دایرکتیوهای سفارشی، اساسا برای استفاده دوباره منطقی که شامل دسترسی سطح پایین DOM به المنتهای ساده هستند تعیین شدند.
-یک دایرکتیو سفارشی به عنوان یک آبجکت شامل هوکهای چرخه حیات میباشد که مشابه هوکهای کامپوننت هستند. هوکها المنتی که به دایرکتیو متصل (bound) هست را دریافت میکنند. در اینجا مثالی از یک دایرکتیو آورده شده که عمل فوکس(focus) را بر روی المنت input هنگاهی که Vue المنت input را درون DOM وارد میکند انجام میدهد:
+یک دایرکتیو سفارشی به عنوان یک آبجکت شامل هوکهای چرخه حیات میباشد که مشابه هوکهای کامپوننت هستند. هوکها المنتی که به دایرکتیو متصل (bound) هست را دریافت میکنند. در اینجا مثالی از یک دایرکتیو آورده شده که یک کلاس را هنگامی که Vue المنت را درون DOM وارد میکند اضافه میکند:
@@ -156,59 +156,11 @@ export default {
این دایرکتیو از اتریبیوت `autofocus` مفیدتر است زیرا نه تنها در صفحه لود شده کار میکند بلکه درون المنتهایی که به صورت پویا (dynamic) توسط Vue ساخته شدهاند نیز کار میکند!
-Declarative templating with built-in directives such as `v-bind` is recommended when possible because they are more efficient and server-rendering friendly.
-
-
-
دایرکتیوهای سفارشی فقط باید زمانی استفاده شوند که عملکرد مورد نظر فقط از طریق دستکاری مستقیم DOM حاصل شود. در صورت امکان، قالب اعلامی با استفاده از دایرکتیوهای نهادینه شده مانند `v-bind` را ترجیح دهید زیرا کارامد تر و سرور-رندر دوستانه تر هستند.
-
-
-
-In `
+
# تست و بررسی {#testing}
@@ -40,7 +63,7 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
```js
// helpers.js
-export function increment (current, max = 10) {
+export function increment(current, max = 10) {
if (current < max) {
return current + 1
}
@@ -129,62 +152,66 @@ describe('increment', () => {
- ```js
- const valueSelector = '[data-testid=stepper-value]'
- const buttonSelector = '[data-testid=increment]'
+```js
+const valueSelector = '[data-testid=stepper-value]'
+const buttonSelector = '[data-testid=increment]'
- const wrapper = mount(Stepper, {
- props: {
- max: 1
- }
- })
+const wrapper = mount(Stepper, {
+ props: {
+ max: 1
+ }
+})
- expect(wrapper.find(valueSelector).text()).toContain('0')
+expect(wrapper.find(valueSelector).text()).toContain('0')
- await wrapper.find(buttonSelector).trigger('click')
+await wrapper.find(buttonSelector).trigger('click')
- expect(wrapper.find(valueSelector).text()).toContain('1')
- ```
+expect(wrapper.find(valueSelector).text()).toContain('1')
+```
- ```js
- const valueSelector = '[data-testid=stepper-value]'
- const buttonSelector = '[data-testid=increment]'
+```js
+const valueSelector = '[data-testid=stepper-value]'
+const buttonSelector = '[data-testid=increment]'
- mount(Stepper, {
- props: {
- max: 1
- }
- })
+mount(Stepper, {
+ props: {
+ max: 1
+ }
+})
- cy.get(valueSelector).should('be.visible').and('contain.text', '0')
- .get(buttonSelector).click()
- .get(valueSelector).should('contain.text', '1')
- ```
+cy.get(valueSelector)
+ .should('be.visible')
+ .and('contain.text', '0')
+ .get(buttonSelector)
+ .click()
+ .get(valueSelector)
+ .should('contain.text', '1')
+```
- ```js
- const { getByText } = render(Stepper, {
- props: {
- max: 1
- }
- })
+```js
+const { getByText } = render(Stepper, {
+ props: {
+ max: 1
+ }
+})
- getByText('0') // Implicit assertion that "0" is within the component
+getByText('0') // Implicit assertion that "0" is within the component
- const button = getByRole('button', { name: /increment/i })
+const button = getByRole('button', { name: /increment/i })
- // Dispatch a click event to our increment button.
- await fireEvent.click(button)
+// Dispatch a click event to our increment button.
+await fireEvent.click(button)
- getByText('1')
+getByText('1')
- await fireEvent.click(button)
- ```
+await fireEvent.click(button)
+```
@@ -265,6 +292,16 @@ describe('increment', () => {
- [Cypress](https://www.cypress.io/) دارای رابط گرافیکی، قابلیت اشکالزدایی عالی، assertion های داخلی، stub ها، مقاومت در برابر ناپایداری و قابلیت snapshot است. همانطور که در بالا ذکر شد، پشتیبانی پایداری را برای [تست کامپوننت](https://docs.cypress.io/guides/component-testing/introduction) فراهم میکند. Cypress از مرورگرهای مبتنی بر Chromium، Firefox و Electron پشتیبانی میکند. پشتیبانی از WebKit در دسترس است، اما به عنوان آزمایشی علامتگذاری شده است. Cypress تحت لایسنس MIT است، اما برخی از ویژگیها مانند اجرای موازی نیاز به اشتراک در Cypress Cloud دارند.
+
+
### انتخاب های دیگر {#other-options-2}
- [Nightwatch](https://nightwatchjs.org/) یک راه حل تست انتها به انتها (E2E) است که بر پایه [Selenium WebDriver](https://www.npmjs.com/package/selenium-webdriver) ساخته شده است. این امر باعث میشود Nightwatch از گستردهترین پشتیبانی مرورگر در میان فریمورکهای تست E2E برخوردار باشد، از جمله آزمایش موبایل بومی. راه حل های مبتنی بر سلنیوم از Playwright یا Cypress کندتر خواهند بود.
@@ -300,7 +337,6 @@ export default defineConfig({
```
:::tip راهنمایی
-
اگر از TypeScript استفاده میکنید، `vitest/globals` را به فیلد `types` در `tsconfig.json` خود اضافه کنید.
```json
diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
index 187ec7f3..2368dc0f 100644
--- a/src/guide/typescript/composition-api.md
+++ b/src/guide/typescript/composition-api.md
@@ -376,7 +376,7 @@ With Vue 3.5 and `@vue/language-tools` 2.1 (powering both the IDE language servi
In cases where auto-inference is not possible, you can still cast the template ref to an explicit type via the generic argument:
```ts
-const el = useTemplateRef(null)
+const el = useTemplateRef('el')
```
@@ -438,7 +438,7 @@ In cases where the exact type of the component isn't available or isn't importan
import { useTemplateRef } from 'vue'
import type { ComponentPublicInstance } from 'vue'
-const child = useTemplateRef(null)
+const child = useTemplateRef('child')
```
In cases where the component referenced is a [generic component](/guide/typescript/overview.html#generic-components), for instance `MyGenericModal`:
@@ -467,7 +467,7 @@ import { useTemplateRef } from 'vue'
import MyGenericModal from './MyGenericModal.vue'
import type { ComponentExposed } from 'vue-component-type-helpers'
-const modal = useTemplateRef>(null)
+const modal = useTemplateRef>('modal')
const openModal = () => {
modal.value?.open('newValue')
diff --git a/src/public/images/lambdatest.svg b/src/public/images/lambdatest.svg
new file mode 100644
index 00000000..f4875ee1
--- /dev/null
+++ b/src/public/images/lambdatest.svg
@@ -0,0 +1,18 @@
+
+
diff --git a/src/public/vuemastery/background-bubbles-vuemastery.svg b/src/public/vuemastery/background-bubbles-vuemastery.svg
new file mode 100644
index 00000000..886d9e89
--- /dev/null
+++ b/src/public/vuemastery/background-bubbles-vuemastery.svg
@@ -0,0 +1,110 @@
+
diff --git a/src/public/vuemastery/vuemastery-white.svg b/src/public/vuemastery/vuemastery-white.svg
new file mode 100644
index 00000000..bf97acde
--- /dev/null
+++ b/src/public/vuemastery/vuemastery-white.svg
@@ -0,0 +1,32 @@
+
+ 
+
+
+
+ 
+