@vue/language-service 1.8.3 → 1.8.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,7 +5,7 @@
5
5
  "name": "Transition",
6
6
  "description": {
7
7
  "kind": "markdown",
8
- "value": "\nFournit des effets de transition animés à **un seul** élément ou composant.\n\n- **Props :**\n\n ```ts\n interface TransitionProps {\n /**\n * Utilisé pour générer automatiquement des noms de classe pour les transitions CSS\n * par exemple `name: 'fade'` s'étendra automatiquement à `.fade-enter`,\n * `.fade-enter-active`, etc.\n */\n name?: string\n /**\n * S'il faut appliquer les classes de transition CSS ou non\n * Default: true\n */\n css?: boolean\n /**\n * Spécifie le type d'événements de transition à attendre pour\n * déterminer le moment de la fin de la transition.\n * Le comportement par défaut consiste à détecter automatiquement le type qui a\n * la plus longue durée.\n */\n type?: 'transition' | 'animation'\n /**\n * Spécifie les durées explicites de la transition.\n * Le comportement par défaut consiste à attendre le premier événement `transitionend`.\n * ou `animationend` sur l'élément de transition racine.\n */\n duration?: number | { enter: number; leave: number }\n /**\n * Contrôle la séquence temporelle des transitions de sortie/entrée.\n * Simultané par défaut.\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * Si la transition doit être appliquée au rendu initial ou non.\n * Default: false\n */\n appear?: boolean\n\n /**\n * Props pour la personnaliser les classes de transition.\n * Utilisez kebab-case dans les templates, par exemple enter-from-class=\"xxx\"\n */\n enterFromClass?: string\n enterActiveClass?: string\n enterToClass?: string\n appearFromClass?: string\n appearActiveClass?: string\n appearToClass?: string\n leaveFromClass?: string\n leaveActiveClass?: string\n leaveToClass?: string\n }\n ```\n\n- **Événements :**\n\n - `@before-enter`\n - `@before-leave`\n - `@enter`\n - `@leave`\n - `@appear`\n - `@after-enter`\n - `@after-leave`\n - `@after-appear`\n - `@enter-cancelled`\n - `@leave-cancelled` (`v-show` only)\n - `@appear-cancelled`\n\n- **Exemple :**\n\n Élément simple :\n\n ```html\n <Transition>\n <div v-if=\"ok\">toggled content</div>\n </Transition>\n ```\n\n Transition forcée en modifiant l'attribut `key` :\n \n ```html\n <Transition>\n <div :key=\"text\">{{ text }}</div>\n </Transition>\n ```\n\n Composant dynamique, avec mode de transition + animation à l'apparition :\n\n ```html\n <Transition name=\"fade\" mode=\"out-in\" appear>\n <component :is=\"view\"></component>\n </Transition>\n ```\n\n Écoute des événements de transition :\n\n ```html\n <Transition @after-enter=\"onTransitionComplete\">\n <div v-show=\"ok\">toggled content</div>\n </Transition>\n ```\n\n- **Voir aussi :** [Guide sur `<Transition>`](https://fr.vuejs.org/guide/built-ins/transition.html)\n"
8
+ "value": "\nFournit des effets de transition animés à **un seul** élément ou composant.\n\n- **Props :**\n\n ```ts\n interface TransitionProps {\n /**\n * Utilisé pour générer automatiquement des noms de classe pour les transitions CSS\n * par exemple `name: 'fade'` s'étendra automatiquement à `.fade-enter`,\n * `.fade-enter-active`, etc.\n */\n name?: string\n /**\n * S'il faut appliquer les classes de transition CSS ou non\n * Default: true\n */\n css?: boolean\n /**\n * Spécifie le type d'événements de transition à attendre pour\n * déterminer le moment de la fin de la transition.\n * Le comportement par défaut consiste à détecter automatiquement le type qui a\n * la plus longue durée.\n */\n type?: 'transition' | 'animation'\n /**\n * Spécifie les durées explicites de la transition.\n * Le comportement par défaut consiste à attendre le premier événement `transitionend`.\n * ou `animationend` sur l'élément de transition racine.\n */\n duration?: number | { enter: number; leave: number }\n /**\n * Contrôle la séquence temporelle des transitions de sortie/entrée.\n * Simultané par défaut.\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * Si la transition doit être appliquée au rendu initial ou non.\n * Default: false\n */\n appear?: boolean\n\n /**\n * Props pour la personnaliser les classes de transition.\n * Utilisez kebab-case dans les templates, par exemple enter-from-class=\"xxx\"\n */\n enterFromClass?: string\n enterActiveClass?: string\n enterToClass?: string\n appearFromClass?: string\n appearActiveClass?: string\n appearToClass?: string\n leaveFromClass?: string\n leaveActiveClass?: string\n leaveToClass?: string\n }\n ```\n\n- **Événements :**\n\n - `@before-enter`\n - `@before-leave`\n - `@enter`\n - `@leave`\n - `@appear`\n - `@after-enter`\n - `@after-leave`\n - `@after-appear`\n - `@enter-cancelled`\n - `@leave-cancelled` (`v-show` only)\n - `@appear-cancelled`\n\n- **Exemple**\n\n Élément simple :\n\n ```html\n <Transition>\n <div v-if=\"ok\">toggled content</div>\n </Transition>\n ```\n\n Transition forcée en modifiant l'attribut `key` :\n \n ```html\n <Transition>\n <div :key=\"text\">{{ text }}</div>\n </Transition>\n ```\n\n Composant dynamique, avec mode de transition + animation à l'apparition :\n\n ```html\n <Transition name=\"fade\" mode=\"out-in\" appear>\n <component :is=\"view\"></component>\n </Transition>\n ```\n\n Écoute des événements de transition :\n\n ```html\n <Transition @after-enter=\"onTransitionComplete\">\n <div v-show=\"ok\">toggled content</div>\n </Transition>\n ```\n\n- **Voir aussi** [Guide sur `<Transition>`](https://fr.vuejs.org/guide/built-ins/transition.html)\n"
9
9
  },
10
10
  "attributes": [],
11
11
  "references": [
@@ -39,7 +39,7 @@
39
39
  "name": "TransitionGroup",
40
40
  "description": {
41
41
  "kind": "markdown",
42
- "value": "\nFournit des effets de transition pour de **multiples** éléments ou composants dans une liste.\n\n- **Props :**\n\n `<TransitionGroup>` accepte les mêmes props que `<Transition>` à l'exception de `mode`, plus deux props additionnelles :\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * S'il n'est pas défini, le rendu sera un fragment.\n */\n tag?: string\n /**\n * Pour personnaliser la classe CSS appliquée lors des transitions de mouvement.\n * Utilisez kebab-case dans les templates, par exemple move-class=\"xxx\"\n */\n moveClass?: string\n }\n ```\n\n- **Événements :**\n\n `<TransitionGroup>` émet les mêmes événements que `<Transition>`.\n\n- **Détails :**\n\n Par défaut, `<TransitionGroup>` ne rend pas d'élément du DOM en enveloppant d'autres, mais on peut en définir un via la prop `tag`.\n\n Notez que chaque enfant d'un `<transition-group>` doit avoir une [**clé unique**](https://fr.vuejs.org/guide/essentials/list.html#maintaining-state-with-key) pour que les animations fonctionnent correctement.\n\n `<TransitionGroup>` prend en charge les transitions de mouvement via une transformation CSS. Lorsque la position d'un enfant à l'écran a changé après une mise à jour, il se verra appliquer une classe CSS de mouvement (générée automatiquement à partir de l'attribut `name` ou configurée avec la prop `move-class`). Si la propriété CSS `transform` est \"transition-able\" lorsque la classe de mouvement est appliquée, l'élément sera animé en douceur vers sa destination en utilisant la [technique FLIP](https://aerotwist.com/blog/flip-your-animations/).\n\n- **Exemple :**\n\n ```html\n <TransitionGroup tag=\"ul\" name=\"slide\">\n <li v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </li>\n </TransitionGroup>\n ```\n\n- **Voir aussi :** [Guide - TransitionGroup](https://fr.vuejs.org/guide/built-ins/transition-group.html)\n"
42
+ "value": "\nFournit des effets de transition pour de **multiples** éléments ou composants dans une liste.\n\n- **Props :**\n\n `<TransitionGroup>` accepte les mêmes props que `<Transition>` à l'exception de `mode`, plus deux props additionnelles :\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * S'il n'est pas défini, le rendu sera un fragment.\n */\n tag?: string\n /**\n * Pour personnaliser la classe CSS appliquée lors des transitions de mouvement.\n * Utilisez kebab-case dans les templates, par exemple move-class=\"xxx\"\n */\n moveClass?: string\n }\n ```\n\n- **Événements :**\n\n `<TransitionGroup>` émet les mêmes événements que `<Transition>`.\n\n- **Détails**\n\n Par défaut, `<TransitionGroup>` ne rend pas d'élément du DOM en enveloppant d'autres, mais on peut en définir un via la prop `tag`.\n\n Notez que chaque enfant d'un `<transition-group>` doit avoir une [**clé unique**](https://fr.vuejs.org/guide/essentials/list.html#maintaining-state-with-key) pour que les animations fonctionnent correctement.\n\n `<TransitionGroup>` prend en charge les transitions de mouvement via une transformation CSS. Lorsque la position d'un enfant à l'écran a changé après une mise à jour, il se verra appliquer une classe CSS de mouvement (générée automatiquement à partir de l'attribut `name` ou configurée avec la prop `move-class`). Si la propriété CSS `transform` est \"transition-able\" lorsque la classe de mouvement est appliquée, l'élément sera animé en douceur vers sa destination en utilisant la [technique FLIP](https://aerotwist.com/blog/flip-your-animations/).\n\n- **Exemple**\n\n ```html\n <TransitionGroup tag=\"ul\" name=\"slide\">\n <li v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </li>\n </TransitionGroup>\n ```\n\n- **Voir aussi** [Guide - TransitionGroup](https://fr.vuejs.org/guide/built-ins/transition-group.html)\n"
43
43
  },
44
44
  "attributes": [],
45
45
  "references": [
@@ -73,7 +73,7 @@
73
73
  "name": "KeepAlive",
74
74
  "description": {
75
75
  "kind": "markdown",
76
- "value": "\nMet en cache les composants activés dynamiquement qui y sont imbriqués.\n\n- **Props :**\n\n ```ts\n interface KeepAliveProps {\n /**\n * Si spécifié, seuls les composants dont les noms correspondent à \n * `include` seront mis en cache.\n */\n include?: MatchPattern\n /**\n * Un composant avec un nom ne correspondant pas à `exclude` ne sera\n * pas mis en cache.\n */\n exclude?: MatchPattern\n /**\n * Le nombre maximum d'instances de composant à mettre en cache.\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **Détails :**\n\n Lorsqu'il enveloppe un composant dynamique, `<KeepAlive>` met en cache les instances inactives du composant sans les détruire.\n\n Il ne peut y avoir qu'une seule instance de composant active comme enfant direct de `<KeepAlive>` à un moment donné.\n\nLorsqu'un composant est activé/désactivé à l'intérieur de `<KeepAlive>`, ses hooks de cycle de vie `activated` et `deactivated` seront invoqués en conséquence, fournissant une alternative à `mounted` et `unmounted`, qui ne sont pas appelés. Ceci s'applique à l'enfant direct de `<KeepAlive>` ainsi qu'à tous ses descendants.\n\n- **Exemple :**\n\n Utilisation basique :\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n Lorsqu'il est utilisé avec les branches `v-if` / `v-else`, il ne doit y avoir qu'un seul composant rendu à la fois :\n\n ```html\n <KeepAlive>\n <comp-a v-if=\"a > 1\"></comp-a>\n <comp-b v-else></comp-b>\n </KeepAlive>\n ```\n\n Utilisé en combinaison avec `<Transition>` :\n\n ```html\n <Transition>\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n </Transition>\n ```\n\n En utilisant `include` / `exclude` :\n\n ```html\n <!-- chaîne de caractères délimitée par des virgules -->\n <KeepAlive include=\"a,b\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- regex (utilisez `v-bind`) -->\n <KeepAlive :include=\"/a|b/\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- Tableau (utilisez `v-bind`) -->\n <KeepAlive :include=\"['a', 'b']\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n Utilisation avec `max` :\n\n ```html\n <KeepAlive :max=\"10\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n- **Voir aussi :** [Guide - KeepAlive](https://fr.vuejs.org/guide/built-ins/keep-alive.html)\n"
76
+ "value": "\nMet en cache les composants activés dynamiquement qui y sont imbriqués.\n\n- **Props :**\n\n ```ts\n interface KeepAliveProps {\n /**\n * Si spécifié, seuls les composants dont les noms correspondent à \n * `include` seront mis en cache.\n */\n include?: MatchPattern\n /**\n * Un composant avec un nom ne correspondant pas à `exclude` ne sera\n * pas mis en cache.\n */\n exclude?: MatchPattern\n /**\n * Le nombre maximum d'instances de composant à mettre en cache.\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **Détails**\n\n Lorsqu'il enveloppe un composant dynamique, `<KeepAlive>` met en cache les instances inactives du composant sans les détruire.\n\n Il ne peut y avoir qu'une seule instance de composant active comme enfant direct de `<KeepAlive>` à un moment donné.\n\nLorsqu'un composant est activé/désactivé à l'intérieur de `<KeepAlive>`, ses hooks de cycle de vie `activated` et `deactivated` seront invoqués en conséquence, fournissant une alternative à `mounted` et `unmounted`, qui ne sont pas appelés. Ceci s'applique à l'enfant direct de `<KeepAlive>` ainsi qu'à tous ses descendants.\n\n- **Exemple**\n\n Utilisation basique :\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n Lorsqu'il est utilisé avec les branches `v-if` / `v-else`, il ne doit y avoir qu'un seul composant rendu à la fois :\n\n ```html\n <KeepAlive>\n <comp-a v-if=\"a > 1\"></comp-a>\n <comp-b v-else></comp-b>\n </KeepAlive>\n ```\n\n Utilisé en combinaison avec `<Transition>` :\n\n ```html\n <Transition>\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n </Transition>\n ```\n\n En utilisant `include` / `exclude` :\n\n ```html\n <!-- chaîne de caractères délimitée par des virgules -->\n <KeepAlive include=\"a,b\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- regex (utilisez `v-bind`) -->\n <KeepAlive :include=\"/a|b/\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- Tableau (utilisez `v-bind`) -->\n <KeepAlive :include=\"['a', 'b']\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n Utilisation avec `max` :\n\n ```html\n <KeepAlive :max=\"10\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n- **Voir aussi** [Guide - KeepAlive](https://fr.vuejs.org/guide/built-ins/keep-alive.html)\n"
77
77
  },
78
78
  "attributes": [],
79
79
  "references": [
@@ -107,7 +107,7 @@
107
107
  "name": "Teleport",
108
108
  "description": {
109
109
  "kind": "markdown",
110
- "value": "\nRend le contenu de son slot à une autre partie du DOM.\n\n- **Props :**\n\n ```ts\n interface TeleportProps {\n /**\n * Requis. Spécifie le conteneur cible.\n * Peut être un sélecteur ou un élément.\n */\n to: string | HTMLElement\n /**\n * S'il vaut `true`, le contenu restera à son emplacement\n * original au lieu d'être déplacé dans le conteneur cible.\n * Peut être changé de manière dynamique.\n */\n disabled?: boolean\n }\n ```\n\n- **Exemple :**\n\n En spécifiant le conteneur cible :\n\n ```html\n <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n En le désactivant de manière conditionnelle :\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n- **Voir aussi :** [Guide - Teleport](https://fr.vuejs.org/guide/built-ins/teleport.html)\n"
110
+ "value": "\nRend le contenu de son slot à une autre partie du DOM.\n\n- **Props :**\n\n ```ts\n interface TeleportProps {\n /**\n * Requis. Spécifie le conteneur cible.\n * Peut être un sélecteur ou un élément.\n */\n to: string | HTMLElement\n /**\n * S'il vaut `true`, le contenu restera à son emplacement\n * original au lieu d'être déplacé dans le conteneur cible.\n * Peut être changé de manière dynamique.\n */\n disabled?: boolean\n }\n ```\n\n- **Exemple**\n\n En spécifiant le conteneur cible :\n\n ```html\n <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n En le désactivant de manière conditionnelle :\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n- **Voir aussi** [Guide - Teleport](https://fr.vuejs.org/guide/built-ins/teleport.html)\n"
111
111
  },
112
112
  "attributes": [],
113
113
  "references": [
@@ -141,7 +141,7 @@
141
141
  "name": "Suspense",
142
142
  "description": {
143
143
  "kind": "markdown",
144
- "value": "\nUtilisé pour orchestrer des dépendances asynchrones imbriquées dans un arbre de composants.\n\n- **Props :**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n }\n ```\n\n- **Événements :**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **Détails :**\n\n `<Suspense>` accepte deux slots : le slot `#default` et le slot `#fallback`. Il affichera le contenu du slot de secours tout en rendant le slot par défaut en mémoire.\n\n S'il rencontre des dépendances asynchrones ([Composants asynchrones](https://fr.vuejs.org/guide/components/async.html) et des composants avec [`async setup()`](https://fr.vuejs.org/guide/built-ins/suspense.html#async-setup)) lors du rendu du slot par défaut, il attendra qu'elles soient toutes résolues avant d'afficher le slot par défaut.\n\n- **Voir aussi :** [Guide - Suspense](https://fr.vuejs.org/guide/built-ins/suspense.html)\n"
144
+ "value": "\nUtilisé pour orchestrer des dépendances asynchrones imbriquées dans un arbre de composants.\n\n- **Props :**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n }\n ```\n\n- **Événements :**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **Détails**\n\n `<Suspense>` accepte deux slots : le slot `#default` et le slot `#fallback`. Il affichera le contenu du slot de secours tout en rendant le slot par défaut en mémoire.\n\n S'il rencontre des dépendances asynchrones ([Composants asynchrones](https://fr.vuejs.org/guide/components/async.html) et des composants avec [`async setup()`](https://fr.vuejs.org/guide/built-ins/suspense.html#async-setup)) lors du rendu du slot par défaut, il attendra qu'elles soient toutes résolues avant d'afficher le slot par défaut.\n\n- **Voir aussi** [Guide - Suspense](https://fr.vuejs.org/guide/built-ins/suspense.html)\n"
145
145
  },
146
146
  "attributes": [],
147
147
  "references": [
@@ -175,7 +175,7 @@
175
175
  "name": "component",
176
176
  "description": {
177
177
  "kind": "markdown",
178
- "value": "\nUn \"méta-composant\" pour rendre des composants ou éléments dynamiques.\n\n- **Props :**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **Détails :**\n\n Le composant à rendre est déterminé par la propriété \"is\".\n\n - Lorsque `is` est une chaîne de caractères, il peut s'agir du nom d'une balise HTML ou du nom d'un composant enregistré.\n\n - De manière alternative, `is` peut également être directement lié à la définition d'un composant.\n\n- **Exemple :**\n\n Rendu des composants par nom d'enregistrement (Options API) :\n\n ```vue\n <script>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n\n export default {\n components: { Foo, Bar },\n data() {\n return {\n view: 'Foo'\n }\n }\n }\n </script>\n\n <template>\n <component :is=\"view\" />\n </template>\n ```\n\n Rendu de composants par définition (Composition API avec `<script setup>`) :\n\n ```vue\n <script setup>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n </script>\n\n <template>\n <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n </template>\n ```\n\n Rendu d'éléments HTML :\n\n ```html\n <component :is=\"href ? 'a' : 'span'\"></component>\n ```\n\n Les [composants natifs](./built-in-components) peuvent tous être passés à `is`, mais vous devez les enregistrer si vous voulez les passer par leur nom. Par exemple :\n\n ```vue\n <script>\n import { Transition, TransitionGroup } from 'vue'\n\n export default {\n components: {\n Transition,\n TransitionGroup\n }\n }\n </script>\n\n <template>\n <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n ...\n </component>\n </template>\n ```\n\n L'enregistrement n'est pas nécessaire si vous passez directement le composant à `is` plutôt que son nom, par exemple dans `<script setup>`.\n\n Si `v-model` est utilisée sur une balise `<component>`, le compilateur de templates le transformera en une prop `modelValue` et un écouteur d'événements `update:modelValue`, comme il le ferait pour tout autre composant. Cependant, cela ne sera pas compatible avec les éléments HTML natifs, tels que `<input>` ou `<select>`. Par conséquent, l'utilisation de `v-model` avec un élément natif créé dynamiquement ne fonctionnera pas :\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const tag = ref('input')\n const username = ref('')\n </script>\n\n <template>\n <!-- Cela ne fonctionnera pas car \"input\" est un élément HTML natif. -->\n <component :is=\"tag\" v-model=\"username\" />\n </template>\n ```\n\n En pratique, ce cas de figure n'est pas courant car les champs de formulaire natifs sont généralement enveloppés dans des composants dans les applications réelles. Si vous avez besoin d'utiliser directement un élément natif, vous pouvez diviser manuellement le \"v-model\" en un attribut et un événement.\n\n- **Voir aussi :** [Composants dynamiques](https://fr.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
178
+ "value": "\nUn \"méta-composant\" pour rendre des composants ou éléments dynamiques.\n\n- **Props :**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **Détails**\n\n Le composant à rendre est déterminé par la propriété \"is\".\n\n - Lorsque `is` est une chaîne de caractères, il peut s'agir du nom d'une balise HTML ou du nom d'un composant enregistré.\n\n - De manière alternative, `is` peut également être directement lié à la définition d'un composant.\n\n- **Exemple**\n\n Rendu des composants par nom d'enregistrement (Options API) :\n\n ```vue\n <script>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n\n export default {\n components: { Foo, Bar },\n data() {\n return {\n view: 'Foo'\n }\n }\n }\n </script>\n\n <template>\n <component :is=\"view\" />\n </template>\n ```\n\n Rendu de composants par définition (Composition API avec `<script setup>`) :\n\n ```vue\n <script setup>\n import Foo from './Foo.vue'\n import Bar from './Bar.vue'\n </script>\n\n <template>\n <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n </template>\n ```\n\n Rendu d'éléments HTML :\n\n ```html\n <component :is=\"href ? 'a' : 'span'\"></component>\n ```\n\n Les [composants natifs](./built-in-components) peuvent tous être passés à `is`, mais vous devez les enregistrer si vous voulez les passer par leur nom. Par exemple :\n\n ```vue\n <script>\n import { Transition, TransitionGroup } from 'vue'\n\n export default {\n components: {\n Transition,\n TransitionGroup\n }\n }\n </script>\n\n <template>\n <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n ...\n </component>\n </template>\n ```\n\n L'enregistrement n'est pas nécessaire si vous passez directement le composant à `is` plutôt que son nom, par exemple dans `<script setup>`.\n\n Si `v-model` est utilisée sur une balise `<component>`, le compilateur de templates le transformera en une prop `modelValue` et un écouteur d'événements `update:modelValue`, comme il le ferait pour tout autre composant. Cependant, cela ne sera pas compatible avec les éléments HTML natifs, tels que `<input>` ou `<select>`. Par conséquent, l'utilisation de `v-model` avec un élément natif créé dynamiquement ne fonctionnera pas :\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const tag = ref('input')\n const username = ref('')\n </script>\n\n <template>\n <!-- Cela ne fonctionnera pas car \"input\" est un élément HTML natif. -->\n <component :is=\"tag\" v-model=\"username\" />\n </template>\n ```\n\n En pratique, ce cas de figure n'est pas courant car les champs de formulaire natifs sont généralement enveloppés dans des composants dans les applications réelles. Si vous avez besoin d'utiliser directement un élément natif, vous pouvez diviser manuellement le \"v-model\" en un attribut et un événement.\n\n- **Voir aussi** [Composants dynamiques](https://fr.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
179
179
  },
180
180
  "attributes": [],
181
181
  "references": [
@@ -209,7 +209,7 @@
209
209
  "name": "slot",
210
210
  "description": {
211
211
  "kind": "markdown",
212
- "value": "\nIndique l'emplacement du contenu d'un slot dans les templates.\n\n- **Props :**\n\n ```ts\n interface SlotProps {\n /**\n * Toutes les props passées à <slot> à passer comme arguments\n * aux slots scopés\n */\n [key: string]: any\n /**\n * Réservé pour spécifier le nom du slot.\n */\n name?: string\n }\n ```\n\n- **Détails :**\n\n L'élément `<slot>` peut utiliser l'attribut `name` pour spécifier un nom de slot. Si aucun `name` n'est spécifié, l'élément rendra le slot par défaut. Les attributs supplémentaires passés à l'élément slot seront passés comme des props de slot au slot scopé défini dans le parent.\n\n L'élément lui-même sera remplacé par le contenu du slot correspondant.\n\n Les éléments `<slot>` dans les templates Vue sont compilés en JavaScript, ils ne doivent donc pas être confondus avec les [éléments `<slot>` natifs](https://developer.mozilla.org/fr/docs/Web/HTML/Element/slot).\n\n- **Voir aussi :** [Composant - Slots](https://fr.vuejs.org/guide/components/slots.html)\n"
212
+ "value": "\nIndique l'emplacement du contenu d'un slot dans les templates.\n\n- **Props :**\n\n ```ts\n interface SlotProps {\n /**\n * Toutes les props passées à <slot> à passer comme arguments\n * aux slots scopés\n */\n [key: string]: any\n /**\n * Réservé pour spécifier le nom du slot.\n */\n name?: string\n }\n ```\n\n- **Détails**\n\n L'élément `<slot>` peut utiliser l'attribut `name` pour spécifier un nom de slot. Si aucun `name` n'est spécifié, l'élément rendra le slot par défaut. Les attributs supplémentaires passés à l'élément slot seront passés comme des props de slot au slot scopé défini dans le parent.\n\n L'élément lui-même sera remplacé par le contenu du slot correspondant.\n\n Les éléments `<slot>` dans les templates Vue sont compilés en JavaScript, ils ne doivent donc pas être confondus avec les [éléments `<slot>` natifs](https://developer.mozilla.org/fr/docs/Web/HTML/Element/slot).\n\n- **Voir aussi** [Composant - Slots](https://fr.vuejs.org/guide/components/slots.html)\n"
213
213
  },
214
214
  "attributes": [],
215
215
  "references": [
@@ -243,7 +243,7 @@
243
243
  "name": "template",
244
244
  "description": {
245
245
  "kind": "markdown",
246
- "value": "\nLa balise `<template>` est utilisée comme placeholder lorsque nous voulons utiliser une directive native sans rendre un élément dans le DOM.\n\n- **Détails :**\n\n Le traitement spécial de `<template>` n'est déclenché que s'il est utilisé avec l'une de ces directives :\n\n - `v-if`, `v-else-if`, or `v-else`\n - `v-for`\n - `v-slot`\n \n Si aucune de ces directives n'est présente, il sera rendu comme un [élément natif `<template>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/template) à la place.\n\n Un `<template>` avec un `v-for` peut aussi avoir un attribut [`key`](https://fr.vuejs.org/api/built-in-special-attributes.html#key). Tous les autres attributs et directives seront rejetés, car ils n'ont pas de sens sans l'élément correspondant.\n\n Les composants monofichiers utilisent une [top-level `<template>` tag](https://fr.vuejs.org/api/sfc-spec.html#language-blocks) pour envelopper l'ensemble du template. Cette utilisation est distincte de l'utilisation de `<template>` décrite ci-dessus. Cette balise de haut niveau ne fait pas partie du modèle lui-même et ne supporte pas la syntaxe template, comme les directives.\n\n- **Voir aussi :**\n - [Guide - `v-if` avec `<template>`](https://fr.vuejs.org/guide/essentials/conditional.html#v-if-on-template) \n - [Guide - `v-for` avec `<template>`](https://fr.vuejs.org/guide/essentials/list.html#v-for-on-template) \n - [Guide - Slots nommés](https://fr.vuejs.org/guide/components/slots.html#named-slots) \n"
246
+ "value": "\nLa balise `<template>` est utilisée comme placeholder lorsque nous voulons utiliser une directive native sans rendre un élément dans le DOM.\n\n- **Détails**\n\n Le traitement spécial de `<template>` n'est déclenché que s'il est utilisé avec l'une de ces directives :\n\n - `v-if`, `v-else-if`, or `v-else`\n - `v-for`\n - `v-slot`\n \n Si aucune de ces directives n'est présente, il sera rendu comme un [élément natif `<template>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/template) à la place.\n\n Un `<template>` avec un `v-for` peut aussi avoir un attribut [`key`](https://fr.vuejs.org/api/built-in-special-attributes.html#key). Tous les autres attributs et directives seront rejetés, car ils n'ont pas de sens sans l'élément correspondant.\n\n Les composants monofichiers utilisent une [top-level `<template>` tag](https://fr.vuejs.org/api/sfc-spec.html#language-blocks) pour envelopper l'ensemble du template. Cette utilisation est distincte de l'utilisation de `<template>` décrite ci-dessus. Cette balise de haut niveau ne fait pas partie du modèle lui-même et ne supporte pas la syntaxe template, comme les directives.\n\n- **Voir aussi**\n - [Guide - `v-if` avec `<template>`](https://fr.vuejs.org/guide/essentials/conditional.html#v-if-on-template) \n - [Guide - `v-for` avec `<template>`](https://fr.vuejs.org/guide/essentials/list.html#v-for-on-template) \n - [Guide - Slots nommés](https://fr.vuejs.org/guide/components/slots.html#named-slots) \n"
247
247
  },
248
248
  "attributes": [],
249
249
  "references": [
@@ -279,7 +279,7 @@
279
279
  "name": "v-text",
280
280
  "description": {
281
281
  "kind": "markdown",
282
- "value": "\nMet à jour le contenu texte d'un élément.\n\n- **Attendu :** `string`\n\n- **Détails :**\n\n `v-text` fonctionne en définissant la propriété [textContent](https://developer.mozilla.org/fr/docs/Web/API/Node/textContent) de l'élément, de sorte qu'elle écrasera tout contenu existant dans l'élément. Si vous devez mettre à jour `textContent`, vous devez utiliser les [interpolations moustaches](https://fr.vuejs.org/guide/essentials/template-syntax.html#text-interpolation) à la place.\n\n- **Exemple :**\n\n ```html\n <span v-text=\"msg\"></span>\n <!-- same as -->\n <span>{{msg}}</span>\n ```\n\n- **Voir aussi :** [Syntaxe de template - Interpolation de texte](https://fr.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n"
282
+ "value": "\nMet à jour le contenu texte d'un élément.\n\n- **Attendu :** `string`\n\n- **Détails**\n\n `v-text` fonctionne en définissant la propriété [textContent](https://developer.mozilla.org/fr/docs/Web/API/Node/textContent) de l'élément, de sorte qu'elle écrasera tout contenu existant dans l'élément. Si vous devez mettre à jour `textContent`, vous devez utiliser les [interpolations moustaches](https://fr.vuejs.org/guide/essentials/template-syntax.html#text-interpolation) à la place.\n\n- **Exemple**\n\n ```html\n <span v-text=\"msg\"></span>\n <!-- same as -->\n <span>{{msg}}</span>\n ```\n\n- **Voir aussi** [Syntaxe de template - Interpolation de texte](https://fr.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n"
283
283
  },
284
284
  "references": [
285
285
  {
@@ -312,7 +312,7 @@
312
312
  "name": "v-html",
313
313
  "description": {
314
314
  "kind": "markdown",
315
- "value": "\nMet à jour [innerHTML](https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML) de l'élément.\n\n- **Attendu :** `string`\n\n- **Détails :**\n\n Le contenu de `v-html` est inséré en tant qu'HTML simple - la syntaxe des templates de Vue ne sera pas traitée. Si vous vous retrouvez à essayer de composer des templates en utilisant `v-html`, essayez de repenser la solution en utilisant plutôt des composants.\n\n ::: warning Remarque sur la sécurité\n Rendre dynamiquement du HTML arbitraire sur votre site web peut être très dangereux car cela peut facilement conduire à des [attaques XSS](https://fr.wikipedia.org/wiki/Cross-site_scripting). N'utilisez `v-html` que sur du contenu de confiance et **jamais** sur du contenu fourni par l'utilisateur.\n :::\n\n Dans les [composants monofichiers](https://fr.vuejs.org/guide/scaling-up/sfc.html), les styles `scoped` ne s'appliqueront pas au contenu de `v-html`, car ce HTML n'est pas traité par le compilateur de templates de Vue. Si vous souhaitez cibler le contenu de `v-html` avec un CSS scopé, vous pouvez utiliser des [modules CSS](./sfc-css-features#css-modules) ou un élément `<style>` global supplémentaire avec une stratégie de scoping manuelle telle que BEM.\n\n- **Exemple :**\n\n ```html\n <div v-html=\"html\"></div>\n ```\n\n- **Voir aussi :** [Syntaxe de template - HTML brut](https://fr.vuejs.org/guide/essentials/template-syntax.html#raw-html)\n"
315
+ "value": "\nMet à jour [innerHTML](https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML) de l'élément.\n\n- **Attendu :** `string`\n\n- **Détails**\n\n Le contenu de `v-html` est inséré en tant qu'HTML simple - la syntaxe des templates de Vue ne sera pas traitée. Si vous vous retrouvez à essayer de composer des templates en utilisant `v-html`, essayez de repenser la solution en utilisant plutôt des composants.\n\n ::: warning Remarque sur la sécurité\n Rendre dynamiquement du HTML arbitraire sur votre site web peut être très dangereux car cela peut facilement conduire à des [attaques XSS](https://fr.wikipedia.org/wiki/Cross-site_scripting). N'utilisez `v-html` que sur du contenu de confiance et **jamais** sur du contenu fourni par l'utilisateur.\n :::\n\n Dans les [composants monofichiers](https://fr.vuejs.org/guide/scaling-up/sfc.html), les styles `scoped` ne s'appliqueront pas au contenu de `v-html`, car ce HTML n'est pas traité par le compilateur de templates de Vue. Si vous souhaitez cibler le contenu de `v-html` avec un CSS scopé, vous pouvez utiliser des [modules CSS](./sfc-css-features#css-modules) ou un élément `<style>` global supplémentaire avec une stratégie de scoping manuelle telle que BEM.\n\n- **Exemple**\n\n ```html\n <div v-html=\"html\"></div>\n ```\n\n- **Voir aussi** [Syntaxe de template - HTML brut](https://fr.vuejs.org/guide/essentials/template-syntax.html#raw-html)\n"
316
316
  },
317
317
  "references": [
318
318
  {
@@ -345,7 +345,7 @@
345
345
  "name": "v-show",
346
346
  "description": {
347
347
  "kind": "markdown",
348
- "value": "\nFait basculer la visibilité de l'élément en fonction de la valeur évaluée à vrai ou faux de l'expression.\n\n- **Attendu :** `any`\n\n- **Détails :**\n\n `v-show` fonctionne en fixant la propriété CSS `display` via des styles littéraux, et essaiera de respecter la valeur initiale `display` lorsque l'élément est visible. Elle déclenche également des transitions lorsque sa condition change.\n\n- **Voir aussi :** [Rendu conditionnel - v-show](https://fr.vuejs.org/guide/essentials/conditional.html#v-show)\n"
348
+ "value": "\nFait basculer la visibilité de l'élément en fonction de la valeur évaluée à vrai ou faux de l'expression.\n\n- **Attendu :** `any`\n\n- **Détails**\n\n `v-show` fonctionne en fixant la propriété CSS `display` via des styles littéraux, et essaiera de respecter la valeur initiale `display` lorsque l'élément est visible. Elle déclenche également des transitions lorsque sa condition change.\n\n- **Voir aussi** [Rendu conditionnel - v-show](https://fr.vuejs.org/guide/essentials/conditional.html#v-show)\n"
349
349
  },
350
350
  "references": [
351
351
  {
@@ -378,7 +378,7 @@
378
378
  "name": "v-if",
379
379
  "description": {
380
380
  "kind": "markdown",
381
- "value": "\nRend conditionnellement un élément ou un fragment de template en fonction de la valeur de l'expression, évaluée à vrai ou faux.\n\n- **Attendu :** `any`\n\n- **Détails :**\n\n Lorsqu'un élément comportant `v-if` est activé / désactivé, l'élément et les directives / composants qu'il contient sont détruits et reconstruits. Si la condition initiale est fausse, le contenu interne ne sera pas rendu du tout.\n\n Peut être utilisée sur `<template>` pour désigner un bloc conditionnel contenant uniquement du texte ou plusieurs éléments.\n\n Cette directive déclenche des transitions lorsque sa condition change.\n\n Lorsqu'elles sont utilisées ensemble, `v-if' a une priorité plus élevée que `v-for'. Il est déconseillé d'utiliser ces deux directives ensemble sur un même élément - voir le [guide du rendu de liste](https://fr.vuejs.org/guide/essentials/list.html#v-for-with-v-if) pour plus de détails.\n\n- **Voir aussi :** [Rendu conditionnel - v-if](https://fr.vuejs.org/guide/essentials/conditional.html#v-if)\n"
381
+ "value": "\nRend conditionnellement un élément ou un fragment de template en fonction de la valeur de l'expression, évaluée à vrai ou faux.\n\n- **Attendu :** `any`\n\n- **Détails**\n\n Lorsqu'un élément comportant `v-if` est activé / désactivé, l'élément et les directives / composants qu'il contient sont détruits et reconstruits. Si la condition initiale est fausse, le contenu interne ne sera pas rendu du tout.\n\n Peut être utilisée sur `<template>` pour désigner un bloc conditionnel contenant uniquement du texte ou plusieurs éléments.\n\n Cette directive déclenche des transitions lorsque sa condition change.\n\n Lorsqu'elles sont utilisées ensemble, `v-if' a une priorité plus élevée que `v-for'. Il est déconseillé d'utiliser ces deux directives ensemble sur un même élément - voir le [guide du rendu de liste](https://fr.vuejs.org/guide/essentials/list.html#v-for-with-v-if) pour plus de détails.\n\n- **Voir aussi** [Rendu conditionnel - v-if](https://fr.vuejs.org/guide/essentials/conditional.html#v-if)\n"
382
382
  },
383
383
  "references": [
384
384
  {
@@ -412,7 +412,7 @@
412
412
  "valueSet": "v",
413
413
  "description": {
414
414
  "kind": "markdown",
415
- "value": "\nReprésente le bloc \"else\" pour `v-if` ou une chaîne `v-if` / `v-else-if`.\n\n- **N'attend pas d'expression**\n\n- **Détails :**\n\n - Restriction : l'élément frère précédent doit posséder `v-if` ou `v-else-if`.\n\n - Peut être utilisée sur `<template>` pour désigner un bloc conditionnel contenant uniquement du texte ou plusieurs éléments.\n\n- **Exemple :**\n\n ```html\n <div v-if=\"Math.random() > 0.5\">\n Now you see me\n </div>\n <div v-else>\n Now you don't\n </div>\n ```\n\n- **Voir aussi :** [Rendu conditionnel - v-else](https://fr.vuejs.org/guide/essentials/conditional.html#v-else)\n"
415
+ "value": "\nReprésente le bloc \"else\" pour `v-if` ou une chaîne `v-if` / `v-else-if`.\n\n- **N'attend pas d'expression**\n\n- **Détails**\n\n - Restriction : l'élément frère précédent doit posséder `v-if` ou `v-else-if`.\n\n - Peut être utilisée sur `<template>` pour désigner un bloc conditionnel contenant uniquement du texte ou plusieurs éléments.\n\n- **Exemple**\n\n ```html\n <div v-if=\"Math.random() > 0.5\">\n Now you see me\n </div>\n <div v-else>\n Now you don't\n </div>\n ```\n\n- **Voir aussi** [Rendu conditionnel - v-else](https://fr.vuejs.org/guide/essentials/conditional.html#v-else)\n"
416
416
  },
417
417
  "references": [
418
418
  {
@@ -445,7 +445,7 @@
445
445
  "name": "v-else-if",
446
446
  "description": {
447
447
  "kind": "markdown",
448
- "value": "\nDésigne le bloc \"else if\" pour `v-if`. Peut être chaîné.\n\n- **Attendu :** `any`\n\n- **Détails :**\n\n - Restriction : l'élément frère précédent doit avoir `v-if` ou `v-else-if`.\n\n - Peut être utilisé sur `<template>` pour désigner un bloc conditionnel contenant uniquement du texte ou plusieurs éléments.\n\n- **Exemple :**\n\n ```html\n <div v-if=\"type === 'A'\">\n A\n </div>\n <div v-else-if=\"type === 'B'\">\n B\n </div>\n <div v-else-if=\"type === 'C'\">\n C\n </div>\n <div v-else>\n Not A/B/C\n </div>\n ```\n\n- **Voir aussi :** [Rendu conditionnel - v-else-if](https://fr.vuejs.org/guide/essentials/conditional.html#v-else-if)\n"
448
+ "value": "\nDésigne le bloc \"else if\" pour `v-if`. Peut être chaîné.\n\n- **Attendu :** `any`\n\n- **Détails**\n\n - Restriction : l'élément frère précédent doit avoir `v-if` ou `v-else-if`.\n\n - Peut être utilisé sur `<template>` pour désigner un bloc conditionnel contenant uniquement du texte ou plusieurs éléments.\n\n- **Exemple**\n\n ```html\n <div v-if=\"type === 'A'\">\n A\n </div>\n <div v-else-if=\"type === 'B'\">\n B\n </div>\n <div v-else-if=\"type === 'C'\">\n C\n </div>\n <div v-else>\n Not A/B/C\n </div>\n ```\n\n- **Voir aussi** [Rendu conditionnel - v-else-if](https://fr.vuejs.org/guide/essentials/conditional.html#v-else-if)\n"
449
449
  },
450
450
  "references": [
451
451
  {
@@ -478,7 +478,7 @@
478
478
  "name": "v-for",
479
479
  "description": {
480
480
  "kind": "markdown",
481
- "value": "\nRend l'élément ou le bloc d'un template plusieurs fois en fonction des données sources.\n\n- **Attendu :** `Array | Object | number | string | Iterable`\n\n- **Détails :**\n\n La valeur de la directive doit utiliser la syntaxe spéciale `alias in expression` pour fournir un alias pour l'élément courant sur lequel on itère :\n\n ```html\n <div v-for=\"item in items\">\n {{ item.text }}\n </div>\n ```\n\n De manière alternative, vous pouvez également spécifier un alias pour l'index (ou la clé si elle est utilisée sur un objet) :\n\n ```html\n <div v-for=\"(item, index) in items\"></div>\n <div v-for=\"(value, key) in object\"></div>\n <div v-for=\"(value, name, index) in object\"></div>\n ```\n\n Le comportement par défaut de `v-for` essaiera de corriger les éléments en place sans les déplacer. Pour forcer la réorganisation des éléments, vous devez fournir un indice d'ordre avec l'attribut spécial `key` :\n\n ```html\n <div v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </div>\n ```\n\n `v-for` peut également fonctionner sur les valeurs qui implémentent le [protocole d'itération](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol), y compris les `Map` et `Set` natifs.\n\n- **Voir aussi :**\n - [Rendu de liste](https://fr.vuejs.org/guide/essentials/list.html)\n"
481
+ "value": "\nRend l'élément ou le bloc d'un template plusieurs fois en fonction des données sources.\n\n- **Attendu :** `Array | Object | number | string | Iterable`\n\n- **Détails**\n\n La valeur de la directive doit utiliser la syntaxe spéciale `alias in expression` pour fournir un alias pour l'élément courant sur lequel on itère :\n\n ```html\n <div v-for=\"item in items\">\n {{ item.text }}\n </div>\n ```\n\n De manière alternative, vous pouvez également spécifier un alias pour l'index (ou la clé si elle est utilisée sur un objet) :\n\n ```html\n <div v-for=\"(item, index) in items\"></div>\n <div v-for=\"(value, key) in object\"></div>\n <div v-for=\"(value, name, index) in object\"></div>\n ```\n\n Le comportement par défaut de `v-for` essaiera de corriger les éléments en place sans les déplacer. Pour forcer la réorganisation des éléments, vous devez fournir un indice d'ordre avec l'attribut spécial `key` :\n\n ```html\n <div v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </div>\n ```\n\n `v-for` peut également fonctionner sur les valeurs qui implémentent le [protocole d'itération](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol), y compris les `Map` et `Set` natifs.\n\n- **Voir aussi**\n - [Rendu de liste](https://fr.vuejs.org/guide/essentials/list.html)\n"
482
482
  },
483
483
  "references": [
484
484
  {
@@ -511,7 +511,7 @@
511
511
  "name": "v-on",
512
512
  "description": {
513
513
  "kind": "markdown",
514
- "value": "\nAttache un écouteur d'événements à l'élément.\n\n- **Raccourci :** `@`\n\n- **Attendu :** `Function | Inline Statement | Object (sans argument)`\n\n- **Argument :** `event` (optionnel lors de l'utilisation de la syntaxe objet)\n\n- **Modificateurs :**\n\n - `.stop` - appelle `event.stopPropagation()`.\n - `.prevent` - appelle `event.preventDefault()`.\n - `.capture` - ajoute un écouteur d'événements en mode capture.\n - `.self` - ne déclenche le gestionnaire que si l'événement a été envoyé par cet élément.\n - `.{keyAlias}` - ne déclenche le gestionnaire que sur certaines clés.\n - `.once` - déclenche le gestionnaire au moins une fois.\n - `.left` - ne déclenche le gestionnaire que pour les événements liés au bouton gauche de la souris.\n - `.right` - ne déclenche le gestionnaire que pour les événements liés au bouton droit de la souris.\n - `.middle` - ne déclenche le gestionnaire que pour les événements liés au bouton du milieu de la souris.\n - `.passive` - attache un événement DOM avec `{ passive : true }`.\n\n- **Détails :**\n\n Le type d'événement est indiqué par l'argument. L'expression peut être un nom de méthode, une déclaration littérale, ou omise si des modificateurs sont présents.\n\n Lorsqu'elle est utilisée sur un élément normal, elle écoute uniquement les [**événements natifs du DOM**](https://developer.mozilla.org/fr/docs/Web/Events). Lorsqu'elle est utilisée sur un composant d'éléments personnalisés, elle écoute les **événements personnalisés** émis sur ce composant enfant.\n\n Lorsqu'elle écoute les événements natifs du DOM, la méthode reçoit l'événement natif comme seul argument. Si vous utilisez une déclaration en ligne, la déclaration a accès à la propriété spéciale `$event` : `v-on:click=\"handle('ok', $event)\"`.\n\n `v-on` supporte également la liaison à un objet de paires événement / écouteur sans argument. Notez que lorsque vous utilisez la syntaxe objet, elle ne supporte aucun modificateur.\n\n- **Exemple :**\n\n ```html\n <!-- méthode gestionnaire -->\n <button v-on:click=\"doThis\"></button>\n\n <!-- événement dynamique -->\n <button v-on:[event]=\"doThis\"></button>\n\n <!-- expression littérale -->\n <button v-on:click=\"doThat('hello', $event)\"></button>\n\n <!-- raccourci -->\n <button @click=\"doThis\"></button>\n\n <!-- raccourci d'un événement dynamique -->\n <button @[event]=\"doThis\"></button>\n\n <!-- arrête la propagation -->\n <button @click.stop=\"doThis\"></button>\n\n <!-- empêche le comportement par défaut -->\n <button @click.prevent=\"doThis\"></button>\n\n <!-- empêche le comportement par défaut sans expression -->\n <form @submit.prevent></form>\n\n <!-- modificateurs enchaînés -->\n <button @click.stop.prevent=\"doThis\"></button>\n\n <!-- modificateur de clé en utilisant keyAlias -->\n <input @keyup.enter=\"onEnter\" />\n\n <!-- l'événement de clic sera déclenché seulement une fois -->\n <button v-on:click.once=\"doThis\"></button>\n\n <!-- syntaxe objet -->\n <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n ```\n\n Écoute des événements personnalisés sur un composant enfant (le gestionnaire est appelé lorsque \"my-event\" est émis sur l'enfant) :\n\n ```html\n <MyComponent @my-event=\"handleThis\" />\n\n <!-- expression en ligne -->\n <MyComponent @my-event=\"handleThis(123, $event)\" />\n ```\n\n- **Voir aussi :**\n - [Gestion d'événement](https://fr.vuejs.org/guide/essentials/event-handling.html)\n - [Composants - Événements personnalisés](https://fr.vuejs.org/guide/essentials/component-basics.html#listening-to-events)\n"
514
+ "value": "\nAttache un écouteur d'événements à l'élément.\n\n- **Raccourci :** `@`\n\n- **Attendu :** `Function | Inline Statement | Object (sans argument)`\n\n- **Argument :** `event` (optionnel lors de l'utilisation de la syntaxe objet)\n\n- **Modificateurs**\n\n - `.stop` - appelle `event.stopPropagation()`.\n - `.prevent` - appelle `event.preventDefault()`.\n - `.capture` - ajoute un écouteur d'événements en mode capture.\n - `.self` - ne déclenche le gestionnaire que si l'événement a été envoyé par cet élément.\n - `.{keyAlias}` - ne déclenche le gestionnaire que sur certaines clés.\n - `.once` - déclenche le gestionnaire au moins une fois.\n - `.left` - ne déclenche le gestionnaire que pour les événements liés au bouton gauche de la souris.\n - `.right` - ne déclenche le gestionnaire que pour les événements liés au bouton droit de la souris.\n - `.middle` - ne déclenche le gestionnaire que pour les événements liés au bouton du milieu de la souris.\n - `.passive` - attache un événement DOM avec `{ passive : true }`.\n\n- **Détails**\n\n Le type d'événement est indiqué par l'argument. L'expression peut être un nom de méthode, une déclaration littérale, ou omise si des modificateurs sont présents.\n\n Lorsqu'elle est utilisée sur un élément normal, elle écoute uniquement les [**événements natifs du DOM**](https://developer.mozilla.org/fr/docs/Web/Events). Lorsqu'elle est utilisée sur un composant d'éléments personnalisés, elle écoute les **événements personnalisés** émis sur ce composant enfant.\n\n Lorsqu'elle écoute les événements natifs du DOM, la méthode reçoit l'événement natif comme seul argument. Si vous utilisez une déclaration en ligne, la déclaration a accès à la propriété spéciale `$event` : `v-on:click=\"handle('ok', $event)\"`.\n\n `v-on` supporte également la liaison à un objet de paires événement / écouteur sans argument. Notez que lorsque vous utilisez la syntaxe objet, elle ne supporte aucun modificateur.\n\n- **Exemple**\n\n ```html\n <!-- méthode gestionnaire -->\n <button v-on:click=\"doThis\"></button>\n\n <!-- événement dynamique -->\n <button v-on:[event]=\"doThis\"></button>\n\n <!-- expression littérale -->\n <button v-on:click=\"doThat('hello', $event)\"></button>\n\n <!-- raccourci -->\n <button @click=\"doThis\"></button>\n\n <!-- raccourci d'un événement dynamique -->\n <button @[event]=\"doThis\"></button>\n\n <!-- arrête la propagation -->\n <button @click.stop=\"doThis\"></button>\n\n <!-- empêche le comportement par défaut -->\n <button @click.prevent=\"doThis\"></button>\n\n <!-- empêche le comportement par défaut sans expression -->\n <form @submit.prevent></form>\n\n <!-- modificateurs enchaînés -->\n <button @click.stop.prevent=\"doThis\"></button>\n\n <!-- modificateur de clé en utilisant keyAlias -->\n <input @keyup.enter=\"onEnter\" />\n\n <!-- l'événement de clic sera déclenché seulement une fois -->\n <button v-on:click.once=\"doThis\"></button>\n\n <!-- syntaxe objet -->\n <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n ```\n\n Écoute des événements personnalisés sur un composant enfant (le gestionnaire est appelé lorsque \"my-event\" est émis sur l'enfant) :\n\n ```html\n <MyComponent @my-event=\"handleThis\" />\n\n <!-- expression en ligne -->\n <MyComponent @my-event=\"handleThis(123, $event)\" />\n ```\n\n- **Voir aussi**\n - [Gestion d'événement](https://fr.vuejs.org/guide/essentials/event-handling.html)\n - [Composants - Événements personnalisés](https://fr.vuejs.org/guide/essentials/component-basics.html#listening-to-events)\n"
515
515
  },
516
516
  "references": [
517
517
  {
@@ -544,7 +544,7 @@
544
544
  "name": "v-bind",
545
545
  "description": {
546
546
  "kind": "markdown",
547
- "value": "\nLie dynamiquement un ou plusieurs attributs, ou une prop d'un composant à une expression.\n\n- **Raccourci :** `:` ou `.` (lorsqu'on utilise le modificateur `.prop`)\n\n- **Attendu :** `any (avec argument) | Object (sans argument)`\n\n- **Argument :** `attrOrProp (optionnel)`\n\n- **Modificateurs :**\n\n - `.camel` - transforme le nom de l'attribut kebab-case en camelCase.\n - `.prop` - force une liaison à être définie comme une propriété du DOM. <sup class=\"vt-badge\">3.2+</sup>\n - `.attr` - force une liaison à être définie comme un attribut du DOM. <sup class=\"vt-badge\">3.2+</sup>\n\n- **Utilisation :**\n\n Lorsqu'elle est utilisée pour lier l'attribut `class` ou `style`, `v-bind` supporte des types de valeurs supplémentaires comme Array ou Objects. Voir la section du guide lié ci-dessous pour plus de détails.\n\n Lors de la mise en place d'une liaison sur un élément, Vue va vérifier par défaut si l'élément a la clé définie comme une propriété en faisant une vérification de l'opérateur `in`. Si la propriété est définie, Vue définira la valeur comme une propriété du DOM au lieu d'un attribut. Cela devrait fonctionner dans la plupart des cas, mais vous pouvez outrepasser ce comportement en utilisant explicitement les modificateurs `.prop` ou `.attr`. Cela est parfois nécessaire, notamment lorsque vous [travaillez avec des éléments personnalisés](https://fr.vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n Lorsqu'elle est utilisée pour lier les props du composant, la prop doit être correctement déclarée dans le composant enfant.\n\n Lorsqu'elle est utilisée sans argument, elle peut être utilisée pour lier un objet contenant des paires nom-valeur d'attributs.\n\n- **Exemple :**\n\n ```html\n <!-- lie un attribut -->\n <img v-bind:src=\"imageSrc\" />\n\n <!-- nom d'attribut dynamique -->\n <button v-bind:[key]=\"value\"></button>\n\n <!-- raccourci -->\n <img :src=\"imageSrc\" />\n\n <!-- raccourci d'un nom d'attribut dynamique -->\n <button :[key]=\"value\"></button>\n\n <!-- avec une concaténation de chaînes de caractères en ligne -->\n <img :src=\"'/path/to/images/' + fileName\" />\n\n <!-- liaison de classe -->\n <div :class=\"{ red: isRed }\"></div>\n <div :class=\"[classA, classB]\"></div>\n <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n <!-- liaison de style -->\n <div :style=\"{ fontSize: size + 'px' }\"></div>\n <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n <!-- liaison d'un objet d'attributs -->\n <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n <!-- liaison de prop. \"prop\" doit être déclaré dans le composant enfant. -->\n <MyComponent :prop=\"someThing\" />\n\n <!-- transmet les props du parent en commun avec un composant enfant -->\n <MyComponent v-bind=\"$props\" />\n\n <!-- XLink -->\n <svg><a :xlink:special=\"foo\"></a></svg>\n ```\n\n Le modificateur `.prop` a également un raccourci dédié, `.` :\n\n ```html\n <div :someProperty.prop=\"someObject\"></div>\n\n <!-- équivalent à -->\n <div .someProperty=\"someObject\"></div>\n ```\n\n Le modificateur `.camel` permet de formatter un nom d'attribut `v-bind` en camelCase lors de l'utilisation de templates à l'intérieur du DOM, par exemple l'attribut SVG `viewBox` :\n\n ```html\n <svg :view-box.camel=\"viewBox\"></svg>\n ```\n\n `.camel` n'est pas nécessaire si vous utilisez des templates en chaînes de caractères, ou si vous pré-compilez le template avec un outil de build.\n\n- **Voir aussi :**\n - [Liaison de classes et de styles](https://fr.vuejs.org/guide/essentials/class-and-style.html)\n - [Composant - Détails sur le passage de props](https://fr.vuejs.org/guide/components/props.html#prop-passing-details)\n"
547
+ "value": "\nLie dynamiquement un ou plusieurs attributs, ou une prop d'un composant à une expression.\n\n- **Raccourci :** `:` ou `.` (lorsqu'on utilise le modificateur `.prop`)\n\n- **Attendu :** `any (avec argument) | Object (sans argument)`\n\n- **Argument :** `attrOrProp (optionnel)`\n\n- **Modificateurs**\n\n - `.camel` - transforme le nom de l'attribut kebab-case en camelCase.\n - `.prop` - force une liaison à être définie comme une propriété du DOM. <sup class=\"vt-badge\">3.2+</sup>\n - `.attr` - force une liaison à être définie comme un attribut du DOM. <sup class=\"vt-badge\">3.2+</sup>\n\n- **Utilisation :**\n\n Lorsqu'elle est utilisée pour lier l'attribut `class` ou `style`, `v-bind` supporte des types de valeurs supplémentaires comme Array ou Objects. Voir la section du guide lié ci-dessous pour plus de détails.\n\n Lors de la mise en place d'une liaison sur un élément, Vue va vérifier par défaut si l'élément a la clé définie comme une propriété en faisant une vérification de l'opérateur `in`. Si la propriété est définie, Vue définira la valeur comme une propriété du DOM au lieu d'un attribut. Cela devrait fonctionner dans la plupart des cas, mais vous pouvez outrepasser ce comportement en utilisant explicitement les modificateurs `.prop` ou `.attr`. Cela est parfois nécessaire, notamment lorsque vous [travaillez avec des éléments personnalisés](https://fr.vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n Lorsqu'elle est utilisée pour lier les props du composant, la prop doit être correctement déclarée dans le composant enfant.\n\n Lorsqu'elle est utilisée sans argument, elle peut être utilisée pour lier un objet contenant des paires nom-valeur d'attributs.\n\n- **Exemple**\n\n ```html\n <!-- lie un attribut -->\n <img v-bind:src=\"imageSrc\" />\n\n <!-- nom d'attribut dynamique -->\n <button v-bind:[key]=\"value\"></button>\n\n <!-- raccourci -->\n <img :src=\"imageSrc\" />\n\n <!-- raccourci d'un nom d'attribut dynamique -->\n <button :[key]=\"value\"></button>\n\n <!-- avec une concaténation de chaînes de caractères en ligne -->\n <img :src=\"'/path/to/images/' + fileName\" />\n\n <!-- liaison de classe -->\n <div :class=\"{ red: isRed }\"></div>\n <div :class=\"[classA, classB]\"></div>\n <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n <!-- liaison de style -->\n <div :style=\"{ fontSize: size + 'px' }\"></div>\n <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n <!-- liaison d'un objet d'attributs -->\n <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n <!-- liaison de prop. \"prop\" doit être déclaré dans le composant enfant. -->\n <MyComponent :prop=\"someThing\" />\n\n <!-- transmet les props du parent en commun avec un composant enfant -->\n <MyComponent v-bind=\"$props\" />\n\n <!-- XLink -->\n <svg><a :xlink:special=\"foo\"></a></svg>\n ```\n\n Le modificateur `.prop` a également un raccourci dédié, `.` :\n\n ```html\n <div :someProperty.prop=\"someObject\"></div>\n\n <!-- équivalent à -->\n <div .someProperty=\"someObject\"></div>\n ```\n\n Le modificateur `.camel` permet de formatter un nom d'attribut `v-bind` en camelCase lors de l'utilisation de templates à l'intérieur du DOM, par exemple l'attribut SVG `viewBox` :\n\n ```html\n <svg :view-box.camel=\"viewBox\"></svg>\n ```\n\n `.camel` n'est pas nécessaire si vous utilisez des templates en chaînes de caractères, ou si vous pré-compilez le template avec un outil de build.\n\n- **Voir aussi**\n - [Liaison de classes et de styles](https://fr.vuejs.org/guide/essentials/class-and-style.html)\n - [Composant - Détails sur le passage de props](https://fr.vuejs.org/guide/components/props.html#prop-passing-details)\n"
548
548
  },
549
549
  "references": [
550
550
  {
@@ -577,7 +577,7 @@
577
577
  "name": "v-model",
578
578
  "description": {
579
579
  "kind": "markdown",
580
- "value": "\nCrée une liaison bidirectionnelle sur un élément de saisie de formulaire ou un composant.\n\n- **Attendu :** varie en fonction de la valeur de l'élément d'entrée du formulaire ou de la sortie des composants\n\n- **Limitée à :**\n\n - `<input>`\n - `<select>`\n - `<textarea>`\n - composants\n\n- **Modificateurs :**\n\n - [`.lazy`](https://fr.vuejs.org/guide/essentials/forms.html#lazy) - écoute les événements `change` au lieu de `input`.\n - [`.number`](https://fr.vuejs.org/guide/essentials/forms.html#number) - convertit une entrée valide en chaînes de caractères en nombres\n - [`.trim`](https://fr.vuejs.org/guide/essentials/forms.html#trim) - élague l'entrée\n\n- **Voir aussi :**\n\n - [Liaisons des entrées d'un formulaire](https://fr.vuejs.org/guide/essentials/forms.html)\n - [Événements du composant - Utilisation avec `v-model`](https://fr.vuejs.org/guide/components/v-model.html)\n"
580
+ "value": "\nCrée une liaison bidirectionnelle sur un élément de saisie de formulaire ou un composant.\n\n- **Attendu :** varie en fonction de la valeur de l'élément d'entrée du formulaire ou de la sortie des composants\n\n- **Limitée à :**\n\n - `<input>`\n - `<select>`\n - `<textarea>`\n - composants\n\n- **Modificateurs**\n\n - [`.lazy`](https://fr.vuejs.org/guide/essentials/forms.html#lazy) - écoute les événements `change` au lieu de `input`.\n - [`.number`](https://fr.vuejs.org/guide/essentials/forms.html#number) - convertit une entrée valide en chaînes de caractères en nombres\n - [`.trim`](https://fr.vuejs.org/guide/essentials/forms.html#trim) - élague l'entrée\n\n- **Voir aussi**\n\n - [Liaisons des entrées d'un formulaire](https://fr.vuejs.org/guide/essentials/forms.html)\n - [Événements du composant - Utilisation avec `v-model`](https://fr.vuejs.org/guide/components/v-model.html)\n"
581
581
  },
582
582
  "references": [
583
583
  {
@@ -610,7 +610,7 @@
610
610
  "name": "v-slot",
611
611
  "description": {
612
612
  "kind": "markdown",
613
- "value": "\nDésigne les slots nommés ou les slots scopés qui s'attendent à recevoir des props.\n\n- **Raccourci :** `#`\n\n- **Attendu :** Une expression JavaScript valide en tant qu'argument de fonction, y compris concernant la déstructuration. Facultatif - uniquement nécessaire si l'on s'attend à ce que des props soient passés au slot.\n\n- **Argument :** nom du slot (facultatif, la valeur par défaut est `default`)\n\n- **Limitée à :**\n\n - `<template>`\n - [composants](https://fr.vuejs.org/guide/components/slots.html#scoped-slots) (pour un seul slot par défaut avec des props)\n\n- **Exemple :**\n\n ```html\n <!-- Slots nommés -->\n <BaseLayout>\n <template v-slot:header>\n Header content\n </template>\n\n <template v-slot:default>\n Default slot content\n </template>\n\n <template v-slot:footer>\n Footer content\n </template>\n </BaseLayout>\n\n <!-- Slot nommé recevant des props -->\n <InfiniteScroll>\n <template v-slot:item=\"slotProps\">\n <div class=\"item\">\n {{ slotProps.item.text }}\n </div>\n </template>\n </InfiniteScroll>\n\n <!-- Slot par défaut recevant des props, via la déstructuration -->\n <Mouse v-slot=\"{ x, y }\">\n Mouse position: {{ x }}, {{ y }}\n </Mouse>\n ```\n\n- **Voir aussi :**\n - [Composants - Slots](https://fr.vuejs.org/guide/components/slots.html)\n"
613
+ "value": "\nDésigne les slots nommés ou les slots scopés qui s'attendent à recevoir des props.\n\n- **Raccourci :** `#`\n\n- **Attendu :** Une expression JavaScript valide en tant qu'argument de fonction, y compris concernant la déstructuration. Facultatif - uniquement nécessaire si l'on s'attend à ce que des props soient passés au slot.\n\n- **Argument :** nom du slot (facultatif, la valeur par défaut est `default`)\n\n- **Limitée à :**\n\n - `<template>`\n - [composants](https://fr.vuejs.org/guide/components/slots.html#scoped-slots) (pour un seul slot par défaut avec des props)\n\n- **Exemple**\n\n ```html\n <!-- Slots nommés -->\n <BaseLayout>\n <template v-slot:header>\n Header content\n </template>\n\n <template v-slot:default>\n Default slot content\n </template>\n\n <template v-slot:footer>\n Footer content\n </template>\n </BaseLayout>\n\n <!-- Slot nommé recevant des props -->\n <InfiniteScroll>\n <template v-slot:item=\"slotProps\">\n <div class=\"item\">\n {{ slotProps.item.text }}\n </div>\n </template>\n </InfiniteScroll>\n\n <!-- Slot par défaut recevant des props, via la déstructuration -->\n <Mouse v-slot=\"{ x, y }\">\n Mouse position: {{ x }}, {{ y }}\n </Mouse>\n ```\n\n- **Voir aussi**\n - [Composants - Slots](https://fr.vuejs.org/guide/components/slots.html)\n"
614
614
  },
615
615
  "references": [
616
616
  {
@@ -643,7 +643,7 @@
643
643
  "name": "v-pre",
644
644
  "description": {
645
645
  "kind": "markdown",
646
- "value": "\nIgnore la compilation pour cet élément et tous ses enfants.\n\n- **N'attend pas d'expression**\n\n- **Détails :**\n\n À l'intérieur de l'élément contenant `v-pre`, toute la syntaxe du template Vue sera préservée et rendue telle quelle. Le cas d'utilisation le plus courant est l'affichage brut des balises moustaches.\n\n- **Exemple :**\n\n ```html\n <span v-pre>{{ this will not be compiled }}</span>\n ```\n"
646
+ "value": "\nIgnore la compilation pour cet élément et tous ses enfants.\n\n- **N'attend pas d'expression**\n\n- **Détails**\n\n À l'intérieur de l'élément contenant `v-pre`, toute la syntaxe du template Vue sera préservée et rendue telle quelle. Le cas d'utilisation le plus courant est l'affichage brut des balises moustaches.\n\n- **Exemple**\n\n ```html\n <span v-pre>{{ this will not be compiled }}</span>\n ```\n"
647
647
  },
648
648
  "references": [
649
649
  {
@@ -676,7 +676,7 @@
676
676
  "name": "v-once",
677
677
  "description": {
678
678
  "kind": "markdown",
679
- "value": "\nRend l'élément et le composant une seule fois, et ignore les mises à jour futures.\n\n- **N'attend pas d'expression**\n\n- **Détails :**\n\n Lors des rendus suivants, l'élément/composant et tous ses enfants seront traités comme du contenu statique et ignorés. Cela peut être utilisé pour optimiser les performances de mise à jour.\n\n ```html\n <!-- élément simple -->\n <span v-once>This will never change: {{msg}}</span>\n <!-- l'élément a des enfants -->\n <div v-once>\n <h1>comment</h1>\n <p>{{msg}}</p>\n </div>\n <!-- composant -->\n <MyComponent v-once :comment=\"msg\"></MyComponent>\n <!-- directive `v-for` -->\n <ul>\n <li v-for=\"i in list\" v-once>{{i}}</li>\n </ul>\n ```\n\n Depuis la version 3.2, vous pouvez également mémoriser une partie du template avec des conditions d'invalidation en utilisant [`v-memo`](#v-memo).\n\n- **Voir aussi :**\n - [Syntaxe de la liaison bidirectionnelle - interpolations](https://fr.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n - [v-memo](#v-memo)\n"
679
+ "value": "\nRend l'élément et le composant une seule fois, et ignore les mises à jour futures.\n\n- **N'attend pas d'expression**\n\n- **Détails**\n\n Lors des rendus suivants, l'élément/composant et tous ses enfants seront traités comme du contenu statique et ignorés. Cela peut être utilisé pour optimiser les performances de mise à jour.\n\n ```html\n <!-- élément simple -->\n <span v-once>This will never change: {{msg}}</span>\n <!-- l'élément a des enfants -->\n <div v-once>\n <h1>comment</h1>\n <p>{{msg}}</p>\n </div>\n <!-- composant -->\n <MyComponent v-once :comment=\"msg\"></MyComponent>\n <!-- directive `v-for` -->\n <ul>\n <li v-for=\"i in list\" v-once>{{i}}</li>\n </ul>\n ```\n\n Depuis la version 3.2, vous pouvez également mémoriser une partie du template avec des conditions d'invalidation en utilisant [`v-memo`](#v-memo).\n\n- **Voir aussi**\n - [Syntaxe de la liaison bidirectionnelle - interpolations](https://fr.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n - [v-memo](#v-memo)\n"
680
680
  },
681
681
  "references": [
682
682
  {
@@ -709,7 +709,7 @@
709
709
  "name": "v-memo",
710
710
  "description": {
711
711
  "kind": "markdown",
712
- "value": "\n- **Attendu :** `any[]`\n\n- **Détails :**\n\n Mémorise une sous-arborescence du template. Peut être utilisée à la fois sur les éléments et les composants. La directive attend un tableau de longueur connue composé de valeurs de dépendances à comparer pour la mémorisation. Si toutes les valeurs du tableau sont identiques à celles du dernier rendu, les mises à jour de l'ensemble du sous-arbre seront ignorées. Par exemple :\n\n ```html\n <div v-memo=\"[valueA, valueB]\">\n ...\n </div>\n ```\n\n Lors du rendu du composant, si `valueA` et `valueB` restent les mêmes, toutes les mises à jour de cette `<div>` et de ses enfants seront ignorées. En fait, même la création du VNode du DOM virtuel sera ignorée puisque la copie mémorisée de la sous-arborescence peut être réutilisée.\n\n Il est important de spécifier le tableau de mémorisation correctement, sinon nous pourrions sauter des mises à jour qui devraient normalement être appliquées. `v-memo` avec un tableau de dépendances vide (`v-memo=\"[]\"`) serait fonctionnellement équivalent à `v-once`.\n\n **Utilisation avec `v-for`**\n\n `v-memo` est fourni uniquement pour des micro-optimisations dans des scénarios de performances critiques et devrait être rarement utilisée. Le cas le plus courant où cela peut s'avérer utile est lors du rendu de grandes listes `v-for` (où `length > 1000`) :\n\n ```html\n <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n <p>...more child nodes</p>\n </div>\n ```\n\n Lorsque l'état `selected` du composant change, une grande quantité de VNodes sera créée même si la plupart des éléments restent exactement les mêmes. L'utilisation de `v-memo` ici consiste essentiellement à dire \"met à jour cet élément seulement s'il est passé de non sélectionné à sélectionné, ou vice-versa\". Cela permet à chaque élément non affecté de réutiliser son précédent VNode et d'éviter de changer entièrement. Notez que nous n'avons pas besoin d'inclure `item.id` dans le tableau de dépendances des mémos ici puisque Vue le déduit automatiquement à partir de `:key`.\n\n :::warning\n Lorsque vous utilisez les directives `v-memo` avec `v-for`, assurez-vous qu'elles sont utilisées sur le même élément. **`v-memo` ne fonctionne pas à l'intérieur de `v-for`.**\n :::\n\n `v-memo` peut également être utilisée sur les composants pour empêcher manuellement les mises à jour non désirées dans certains cas limites où la vérification de la mise à jour du composant enfant n'est pas optimisée. Mais une fois de plus, il est de la responsabilité du développeur de spécifier des tableaux de dépendances corrects pour éviter d'ignorer des mises à jour nécessaires.\n\n- **Voir aussi :**\n - [v-once](#v-once)\n"
712
+ "value": "\n- **Attendu :** `any[]`\n\n- **Détails**\n\n Mémorise une sous-arborescence du template. Peut être utilisée à la fois sur les éléments et les composants. La directive attend un tableau de longueur connue composé de valeurs de dépendances à comparer pour la mémorisation. Si toutes les valeurs du tableau sont identiques à celles du dernier rendu, les mises à jour de l'ensemble du sous-arbre seront ignorées. Par exemple :\n\n ```html\n <div v-memo=\"[valueA, valueB]\">\n ...\n </div>\n ```\n\n Lors du rendu du composant, si `valueA` et `valueB` restent les mêmes, toutes les mises à jour de cette `<div>` et de ses enfants seront ignorées. En fait, même la création du VNode du DOM virtuel sera ignorée puisque la copie mémorisée de la sous-arborescence peut être réutilisée.\n\n Il est important de spécifier le tableau de mémorisation correctement, sinon nous pourrions sauter des mises à jour qui devraient normalement être appliquées. `v-memo` avec un tableau de dépendances vide (`v-memo=\"[]\"`) serait fonctionnellement équivalent à `v-once`.\n\n **Utilisation avec `v-for`**\n\n `v-memo` est fourni uniquement pour des micro-optimisations dans des scénarios de performances critiques et devrait être rarement utilisée. Le cas le plus courant où cela peut s'avérer utile est lors du rendu de grandes listes `v-for` (où `length > 1000`) :\n\n ```html\n <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n <p>...more child nodes</p>\n </div>\n ```\n\n Lorsque l'état `selected` du composant change, une grande quantité de VNodes sera créée même si la plupart des éléments restent exactement les mêmes. L'utilisation de `v-memo` ici consiste essentiellement à dire \"met à jour cet élément seulement s'il est passé de non sélectionné à sélectionné, ou vice-versa\". Cela permet à chaque élément non affecté de réutiliser son précédent VNode et d'éviter de changer entièrement. Notez que nous n'avons pas besoin d'inclure `item.id` dans le tableau de dépendances des mémos ici puisque Vue le déduit automatiquement à partir de `:key`.\n\n :::warning\n Lorsque vous utilisez les directives `v-memo` avec `v-for`, assurez-vous qu'elles sont utilisées sur le même élément. **`v-memo` ne fonctionne pas à l'intérieur de `v-for`.**\n :::\n\n `v-memo` peut également être utilisée sur les composants pour empêcher manuellement les mises à jour non désirées dans certains cas limites où la vérification de la mise à jour du composant enfant n'est pas optimisée. Mais une fois de plus, il est de la responsabilité du développeur de spécifier des tableaux de dépendances corrects pour éviter d'ignorer des mises à jour nécessaires.\n\n- **Voir aussi**\n - [v-once](#v-once)\n"
713
713
  },
714
714
  "references": [
715
715
  {
@@ -742,7 +742,7 @@
742
742
  "name": "v-cloak",
743
743
  "description": {
744
744
  "kind": "markdown",
745
- "value": "\nUtilisée pour cacher un template non compilé jusqu'à ce qu'il soit prêt.\n\n- **N'attend pas d'expression**\n\n- **Détails :**\n\n **Cette directive n'est nécessaire que dans les configurations sans étape de build.**\n\n Lors de l'utilisation de templates à l'intérieur du DOM, il peut y avoir un \"flash de templates non compilés\" : l'utilisateur peut voir des balises moustaches brutes jusqu'à ce que le composant monté les remplace par du contenu rendu.\n\n `v-cloak` restera sur l'élément jusqu'à ce que l'instance du composant associé soit montée. Combiné à des règles CSS telles que `[v-cloak] { display : none }`, elle peut être utilisée pour masquer les templates bruts jusqu'à ce que le composant soit prêt.\n\n- **Exemple :**\n\n ```css\n [v-cloak] {\n display: none;\n }\n ```\n\n ```html\n <div v-cloak>\n {{ message }}\n </div>\n ```\n\n La `<div>` ne sera pas visible tant que la compilation n'est pas terminée.\n"
745
+ "value": "\nUtilisée pour cacher un template non compilé jusqu'à ce qu'il soit prêt.\n\n- **N'attend pas d'expression**\n\n- **Détails**\n\n **Cette directive n'est nécessaire que dans les configurations sans étape de build.**\n\n Lors de l'utilisation de templates à l'intérieur du DOM, il peut y avoir un \"flash de templates non compilés\" : l'utilisateur peut voir des balises moustaches brutes jusqu'à ce que le composant monté les remplace par du contenu rendu.\n\n `v-cloak` restera sur l'élément jusqu'à ce que l'instance du composant associé soit montée. Combiné à des règles CSS telles que `[v-cloak] { display : none }`, elle peut être utilisée pour masquer les templates bruts jusqu'à ce que le composant soit prêt.\n\n- **Exemple**\n\n ```css\n [v-cloak] {\n display: none;\n }\n ```\n\n ```html\n <div v-cloak>\n {{ message }}\n </div>\n ```\n\n La `<div>` ne sera pas visible tant que la compilation n'est pas terminée.\n"
746
746
  },
747
747
  "references": [
748
748
  {
@@ -775,7 +775,7 @@
775
775
  "name": "key",
776
776
  "description": {
777
777
  "kind": "markdown",
778
- "value": "\nL'attribut spécial `key` est principalement utilisé comme une indication aidant l'algorithme du DOM virtuel de Vue à identifier les VNodes lors de la comparaison de la nouvelle et de l'ancienne liste de nœuds.\n\n- **Attendu :** `number | string | symbol`\n\n- **Détails :**\n\n Sans clés, Vue utilise un algorithme qui minimise le mouvement des éléments et essaie de remplacer/réutiliser les éléments du même type déjà en place autant que possible. Avec des clés, il réorganisera les éléments en fonction du changement d'ordre des clés, et les éléments dont les clés ne sont plus présentes seront toujours supprimés / détruits.\n\n Les clés des enfants d'un même parent doivent être **uniques**. Les clés dupliquées entraîneront des erreurs de rendu.\n\n Le cas d'utilisation le plus courant est en combinaison avec `v-for` :\n\n ```html\n <ul>\n <li v-for=\"item in items\" :key=\"item.id\">...</li>\n </ul>\n ```\n\n Elle peut également être utilisée pour forcer le remplacement d'un élément/composant au lieu de le réutiliser. Cela peut être utile lorsque vous voulez :\n\n - Déclencher correctement les hooks de cycle de vie d'un composant\n - Déclencher des transitions\n\n Par exemple :\n\n ```html\n <transition>\n <span :key=\"text\">{{ text }}</span>\n </transition>\n ```\n\n Quand `text` change, le `<span>` sera toujours remplacé au lieu d'être corrigé, donc une transition sera déclenchée.\n\n- **Voir aussi :** [Guide - Rendu de liste - Maintenir l'état avec `key`](https://fr.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)\n"
778
+ "value": "\nL'attribut spécial `key` est principalement utilisé comme une indication aidant l'algorithme du DOM virtuel de Vue à identifier les VNodes lors de la comparaison de la nouvelle et de l'ancienne liste de nœuds.\n\n- **Attendu :** `number | string | symbol`\n\n- **Détails**\n\n Sans clés, Vue utilise un algorithme qui minimise le mouvement des éléments et essaie de remplacer/réutiliser les éléments du même type déjà en place autant que possible. Avec des clés, il réorganisera les éléments en fonction du changement d'ordre des clés, et les éléments dont les clés ne sont plus présentes seront toujours supprimés / détruits.\n\n Les clés des enfants d'un même parent doivent être **uniques**. Les clés dupliquées entraîneront des erreurs de rendu.\n\n Le cas d'utilisation le plus courant est en combinaison avec `v-for` :\n\n ```html\n <ul>\n <li v-for=\"item in items\" :key=\"item.id\">...</li>\n </ul>\n ```\n\n Elle peut également être utilisée pour forcer le remplacement d'un élément/composant au lieu de le réutiliser. Cela peut être utile lorsque vous voulez :\n\n - Déclencher correctement les hooks de cycle de vie d'un composant\n - Déclencher des transitions\n\n Par exemple :\n\n ```html\n <transition>\n <span :key=\"text\">{{ text }}</span>\n </transition>\n ```\n\n Quand `text` change, le `<span>` sera toujours remplacé au lieu d'être corrigé, donc une transition sera déclenchée.\n\n- **Voir aussi** [Guide - Rendu de liste - Maintenir l'état avec `key`](https://fr.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)\n"
779
779
  },
780
780
  "references": [
781
781
  {
@@ -808,7 +808,7 @@
808
808
  "name": "ref",
809
809
  "description": {
810
810
  "kind": "markdown",
811
- "value": "\nDésigne une [ref du template](https://fr.vuejs.org/guide/essentials/template-refs.html).\n\n- **Attendu :** `string | Function`\n\n- **Détails :**\n\n `ref` est utilisée pour enregistrer une référence à un élément ou à un composant enfant.\n\n Dans l'Options API, la référence sera enregistrée sous l'objet `this.$refs` du composant :\n\n ```html\n <!-- stockée sous this.$refs.p -->\n <p ref=\"p\">hello</p>\n ```\n\n Dans la Composition API, la référence sera stockée dans une ref avec le nom correspondant :\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const p = ref()\n </script>\n\n <template>\n <p ref=\"p\">hello</p>\n </template>\n ```\n\n Si elle est utilisée sur un élément simple du DOM, la référence sera cet élément ; si elle est utilisée sur un composant enfant, la référence sera l'instance du composant enfant.\n\n De manière alternative, `ref` peut accepter une valeur de fonction qui fournit un contrôle total sur l'endroit où la référence sera stockée :\n\n ```html\n <ChildComponent :ref=\"(el) => child = el\" />\n ```\n\n Une remarque importante concernant le timing de l'enregistrement des refs : comme les refs elles-mêmes sont créées à la suite de la fonction de rendu, vous devez attendre que le composant soit monté avant d'y accéder.\n\n `this.$refs` est également non réactive, vous ne devez donc pas l'utiliser dans les templates pour la liaison de données.\n\n- **Voir aussi :**\n - [Guide - Template Refs](https://fr.vuejs.org/guide/essentials/template-refs.html)\n - [Guide - Typer les refs du template](https://fr.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n - [Guide - Typer les refs du template d'un composant](https://fr.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />\n"
811
+ "value": "\nDésigne une [ref du template](https://fr.vuejs.org/guide/essentials/template-refs.html).\n\n- **Attendu :** `string | Function`\n\n- **Détails**\n\n `ref` est utilisée pour enregistrer une référence à un élément ou à un composant enfant.\n\n Dans l'Options API, la référence sera enregistrée sous l'objet `this.$refs` du composant :\n\n ```html\n <!-- stockée sous this.$refs.p -->\n <p ref=\"p\">hello</p>\n ```\n\n Dans la Composition API, la référence sera stockée dans une ref avec le nom correspondant :\n\n ```vue\n <script setup>\n import { ref } from 'vue'\n\n const p = ref()\n </script>\n\n <template>\n <p ref=\"p\">hello</p>\n </template>\n ```\n\n Si elle est utilisée sur un élément simple du DOM, la référence sera cet élément ; si elle est utilisée sur un composant enfant, la référence sera l'instance du composant enfant.\n\n De manière alternative, `ref` peut accepter une valeur de fonction qui fournit un contrôle total sur l'endroit où la référence sera stockée :\n\n ```html\n <ChildComponent :ref=\"(el) => child = el\" />\n ```\n\n Une remarque importante concernant le timing de l'enregistrement des refs : comme les refs elles-mêmes sont créées à la suite de la fonction de rendu, vous devez attendre que le composant soit monté avant d'y accéder.\n\n `this.$refs` est également non réactive, vous ne devez donc pas l'utiliser dans les templates pour la liaison de données.\n\n- **Voir aussi**\n - [Guide - Template Refs](https://fr.vuejs.org/guide/essentials/template-refs.html)\n - [Guide - Typer les refs du template](https://fr.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n - [Guide - Typer les refs du template d'un composant](https://fr.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />\n"
812
812
  },
813
813
  "references": [
814
814
  {
@@ -841,7 +841,7 @@
841
841
  "name": "is",
842
842
  "description": {
843
843
  "kind": "markdown",
844
- "value": "\n Utilisé pour lier les [composants dynamiques](https://fr.vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Attendu :** `string | Component`\n\n- **Utilisation sur des éléments natifs** <sup class=\"vt-badge\">3.1+</sup>\n\n Lorsque l'attribut \"is\" est utilisé sur un élément HTML natif, il sera interprété comme un [élément natif personnalisé](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), qui est une fonctionnalité native de la plate-forme Web.\n\n Il existe cependant un cas d'utilisation où vous pouvez avoir besoin que Vue remplace un élément natif par un composant Vue, comme expliqué dans [Mises en garde concernant l'analyse du template DOM](https://fr.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats). Vous pouvez préfixer la valeur de l'attribut `is` avec `vue:` pour que Vue rende l'élément comme un composant Vue :\n\n ```html\n <table>\n <tr is=\"vue:my-row-component\"></tr>\n </table>\n ```\n\n- **Voir aussi :**\n\n - [Éléments spéciaux natifs - `<component>`](https://fr.vuejs.org/api/built-in-special-elements.html#component)\n - [Composants dynamiques](https://fr.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
844
+ "value": "\n Utilisé pour lier les [composants dynamiques](https://fr.vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Attendu :** `string | Component`\n\n- **Utilisation sur des éléments natifs** <sup class=\"vt-badge\">3.1+</sup>\n\n Lorsque l'attribut \"is\" est utilisé sur un élément HTML natif, il sera interprété comme un [élément natif personnalisé](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), qui est une fonctionnalité native de la plate-forme Web.\n\n Il existe cependant un cas d'utilisation où vous pouvez avoir besoin que Vue remplace un élément natif par un composant Vue, comme expliqué dans [Mises en garde concernant l'analyse du template DOM](https://fr.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats). Vous pouvez préfixer la valeur de l'attribut `is` avec `vue:` pour que Vue rende l'élément comme un composant Vue :\n\n ```html\n <table>\n <tr is=\"vue:my-row-component\"></tr>\n </table>\n ```\n\n- **Voir aussi**\n\n - [Éléments spéciaux natifs - `<component>`](https://fr.vuejs.org/api/built-in-special-elements.html#component)\n - [Composants dynamiques](https://fr.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
845
845
  },
846
846
  "references": [
847
847
  {
@@ -5,7 +5,7 @@
5
5
  "name": "Transition",
6
6
  "description": {
7
7
  "kind": "markdown",
8
- "value": "\n**単一の**要素またはコンポーネントにアニメーションのトランジションを提供します。\n\n- **props**\n\n ```ts\n interface TransitionProps {\n /**\n * トランジションの CSS クラス名を自動生成するために使用します。\n * 例: `name: 'fade'` は `.fade-enter` や `.fade-enter-active`\n * などに自動展開されます。\n */\n name?: string\n /**\n * CSS のトランジションクラスを適用するかどうか。\n * デフォルト: true\n */\n css?: boolean\n /**\n * トランジション終了タイミングを決定するために待機する、\n * トランジションイベントの種類を指定します。\n * デフォルトの動作は、持続時間がより長い方のタイプを\n * 自動検出します。\n */\n type?: 'transition' | 'animation'\n /**\n * トランジションの持続時間を明示的に指定します。\n * デフォルトの動作は、ルートトランジション要素の最初の\n * `transitionend` または `animationend` イベントを待ちます。\n */\n duration?: number | { enter: number; leave: number }\n /**\n * leaving/entering トランジションのタイミングシーケンスを制御。\n * デフォルトの動作は同時です。\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * 初回レンダリング時にトランジションを適用するかどうか。\n * デフォルト: false\n */\n appear?: boolean\n\n /**\n * トランジションクラスをカスタマイズするための props。\n * テンプレートでは kebab-case を使用(例: enter-from-class=\"xxx\")\n */\n enterFromClass?: string\n enterActiveClass?: string\n enterToClass?: string\n appearFromClass?: string\n appearActiveClass?: string\n appearToClass?: string\n leaveFromClass?: string\n leaveActiveClass?: string\n leaveToClass?: string\n }\n ```\n\n- **イベント**\n\n - `@before-enter`\n - `@before-leave`\n - `@enter`\n - `@leave`\n - `@appear`\n - `@after-enter`\n - `@after-leave`\n - `@after-appear`\n - `@enter-cancelled`\n - `@leave-cancelled`(`v-show` のみ)\n - `@appear-cancelled`\n\n- **例**\n\n シンプルな要素:\n\n ```html\n <Transition>\n <div v-if=\"ok\">toggled content</div>\n </Transition>\n ```\n\n `key` 属性を変更することで強制的にトランジションさせる:\n\n ```html\n <Transition>\n <div :key=\"text\">{{ text }}</div>\n </Transition>\n ```\n\n トランジションモードと出現時のアニメーションを備えている動的コンポーネント:\n\n ```html\n <Transition name=\"fade\" mode=\"out-in\" appear>\n <component :is=\"view\"></component>\n </Transition>\n ```\n\n トランジションイベントを購読する:\n\n ```html\n <Transition @after-enter=\"onTransitionComplete\">\n <div v-show=\"ok\">toggled content</div>\n </Transition>\n ```\n\n- **参照** [`<Transition>` ガイド](https://ja.vuejs.org/guide/built-ins/transition.html)\n"
8
+ "value": "\n**単一の**要素またはコンポーネントにアニメーションのトランジション効果を提供します。\n\n- **props**\n\n ```ts\n interface TransitionProps {\n /**\n * トランジションの CSS クラス名を自動生成するために使用します。\n * 例: `name: 'fade'` は `.fade-enter` や `.fade-enter-active`\n * などに自動展開されます。\n */\n name?: string\n /**\n * CSS のトランジションクラスを適用するかどうか。\n * デフォルト: true\n */\n css?: boolean\n /**\n * トランジション終了タイミングを決定するために待機する、\n * トランジションイベントの種類を指定します。\n * デフォルトの動作は、持続時間がより長い方のタイプを\n * 自動検出します。\n */\n type?: 'transition' | 'animation'\n /**\n * トランジションの持続時間を明示的に指定します。\n * デフォルトの動作は、ルートトランジション要素の最初の\n * `transitionend` または `animationend` イベントを待ちます。\n */\n duration?: number | { enter: number; leave: number }\n /**\n * leaving/entering トランジションのタイミングシーケンスを制御。\n * デフォルトの動作は同時です。\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * 初回レンダリング時にトランジションを適用するかどうか。\n * デフォルト: false\n */\n appear?: boolean\n\n /**\n * トランジションクラスをカスタマイズするための props。\n * テンプレートでは kebab-case を使用(例: enter-from-class=\"xxx\")\n */\n enterFromClass?: string\n enterActiveClass?: string\n enterToClass?: string\n appearFromClass?: string\n appearActiveClass?: string\n appearToClass?: string\n leaveFromClass?: string\n leaveActiveClass?: string\n leaveToClass?: string\n }\n ```\n\n- **イベント**\n\n - `@before-enter`\n - `@before-leave`\n - `@enter`\n - `@leave`\n - `@appear`\n - `@after-enter`\n - `@after-leave`\n - `@after-appear`\n - `@enter-cancelled`\n - `@leave-cancelled`(`v-show` のみ)\n - `@appear-cancelled`\n\n- **例**\n\n シンプルな要素:\n\n ```html\n <Transition>\n <div v-if=\"ok\">toggled content</div>\n </Transition>\n ```\n\n `key` 属性を変更することで強制的にトランジションさせる:\n\n ```html\n <Transition>\n <div :key=\"text\">{{ text }}</div>\n </Transition>\n ```\n\n トランジションモードと出現時のアニメーションを備えている動的コンポーネント:\n\n ```html\n <Transition name=\"fade\" mode=\"out-in\" appear>\n <component :is=\"view\"></component>\n </Transition>\n ```\n\n トランジションイベントを購読する:\n\n ```html\n <Transition @after-enter=\"onTransitionComplete\">\n <div v-show=\"ok\">toggled content</div>\n </Transition>\n ```\n\n- **参照** [`<Transition>` ガイド](https://ja.vuejs.org/guide/built-ins/transition.html)\n"
9
9
  },
10
10
  "attributes": [],
11
11
  "references": [
@@ -39,7 +39,7 @@
39
39
  "name": "TransitionGroup",
40
40
  "description": {
41
41
  "kind": "markdown",
42
- "value": "\nリスト内の**複数**の要素またはコンポーネントにトランジション効果を提供する。\n\n- **props**\n\n `<TransitionGroup>` は `<Transition>` と同じ props(`mode` 以外)と追加の 2 つの props を受け取ります:\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * 未定義の場合はフラグメントとしてレンダリングされます。\n */\n tag?: string\n /**\n * 移動のトランジション中に適用される CSS クラスのカスタマイズ。\n * テンプレートでは kebab-case を使用(例: move-class=\"xxx\")\n */\n moveClass?: string\n }\n ```\n\n- **イベント**\n\n `<TransitionGroup>` は `<Transition>` と同じイベントを発行します。\n\n- **詳細**\n\n デフォルトでは、`<TransitionGroup>` はラッパー DOM 要素をレンダリングしませんが、 `tag` props によって定義できます。\n\n アニメーションが正しく動作するためには、`<transition-group>` 内のすべての子に[**一意なキーを指定**](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)する必要があることに注意してください。\n\n `<TransitionGroup>` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス(`name` 属性から自動生成されるか、`move-class` props で設定)が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。\n\n- **例**\n\n ```html\n <TransitionGroup tag=\"ul\" name=\"slide\">\n <li v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </li>\n </TransitionGroup>\n ```\n\n- **参照** [ガイド - TransitionGroup](https://ja.vuejs.org/guide/built-ins/transition-group.html)\n"
42
+ "value": "\nリスト内の**複数**の要素またはコンポーネントにトランジション効果を提供します。\n\n- **props**\n\n `<TransitionGroup>` は `<Transition>` と同じ props(`mode` 以外)と追加の 2 つの props を受け取ります:\n\n ```ts\n interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n /**\n * 未定義の場合はフラグメントとしてレンダリングされます。\n */\n tag?: string\n /**\n * 移動のトランジション中に適用される CSS クラスのカスタマイズ。\n * テンプレートでは kebab-case を使用(例: move-class=\"xxx\")\n */\n moveClass?: string\n }\n ```\n\n- **イベント**\n\n `<TransitionGroup>` は `<Transition>` と同じイベントを発行します。\n\n- **詳細**\n\n デフォルトでは、`<TransitionGroup>` はラッパー DOM 要素をレンダリングしませんが、 `tag` props によって定義できます。\n\n アニメーションが正しく動作するためには、`<transition-group>` 内のすべての子に[**一意なキーを指定**](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)する必要があることに注意してください。\n\n `<TransitionGroup>` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス(`name` 属性から自動生成されるか、`move-class` props で設定)が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。\n\n- **例**\n\n ```html\n <TransitionGroup tag=\"ul\" name=\"slide\">\n <li v-for=\"item in items\" :key=\"item.id\">\n {{ item.text }}\n </li>\n </TransitionGroup>\n ```\n\n- **参照** [ガイド - TransitionGroup](https://ja.vuejs.org/guide/built-ins/transition-group.html)\n"
43
43
  },
44
44
  "attributes": [],
45
45
  "references": [
@@ -5,4 +5,4 @@ import createJsonService from 'volar-service-json';
5
5
  export interface Settings {
6
6
  json?: Parameters<typeof createJsonService>[0];
7
7
  }
8
- export declare function resolveConfig(config: Config, compilerOptions?: ts.CompilerOptions, vueCompilerOptions?: Partial<vue.VueCompilerOptions>, ts?: typeof import('typescript/lib/tsserverlibrary'), settings?: Settings, codegenStack?: boolean): Config;
8
+ export declare function resolveConfig(config: Config, compilerOptions?: ts.CompilerOptions, vueCompilerOptions?: Partial<vue.VueCompilerOptions>, ts?: typeof import('typescript/lib/tsserverlibrary'), codegenStack?: boolean): Config;
@@ -20,16 +20,18 @@ const vue_codelens_references_1 = require("./plugins/vue-codelens-references");
20
20
  const vue_template_1 = require("./plugins/vue-template");
21
21
  const vue_twoslash_queries_1 = require("./plugins/vue-twoslash-queries");
22
22
  const vue_visualize_hidden_callback_param_1 = require("./plugins/vue-visualize-hidden-callback-param");
23
+ const vue_directive_comments_1 = require("./plugins/vue-directive-comments");
23
24
  const types_1 = require("./types");
24
- function resolveConfig(config, compilerOptions = {}, vueCompilerOptions = {}, ts = require('typescript'), settings, codegenStack = false) {
25
+ function resolveConfig(config, compilerOptions = {}, vueCompilerOptions = {}, ts = require('typescript'), codegenStack = false) {
25
26
  const resolvedVueCompilerOptions = vue.resolveVueCompilerOptions(vueCompilerOptions);
26
27
  const vueLanguageModules = vue.createLanguages(compilerOptions, resolvedVueCompilerOptions, ts, codegenStack);
27
28
  config.languages = Object.assign({}, vueLanguageModules, config.languages);
28
- config.services = resolvePlugins(config.services, resolvedVueCompilerOptions, settings);
29
+ config.services = resolvePlugins(config.services, resolvedVueCompilerOptions);
29
30
  return config;
30
31
  }
31
32
  exports.resolveConfig = resolveConfig;
32
- function resolvePlugins(services, vueCompilerOptions, settings) {
33
+ const unicodeReg = /\\u/g;
34
+ function resolvePlugins(services, vueCompilerOptions) {
33
35
  const originalTsPlugin = services?.typescript ?? (0, volar_service_typescript_1.default)();
34
36
  services ??= {};
35
37
  services.typescript = (_context, modules) => {
@@ -148,7 +150,7 @@ function resolvePlugins(services, vueCompilerOptions, settings) {
148
150
  transformed = true;
149
151
  item.additionalTextEdits.push({
150
152
  range: editRange,
151
- newText: unescape(printText.replace(/\\u/g, '%u')),
153
+ newText: unescape(printText.replace(unicodeReg, '%u')),
152
154
  });
153
155
  }
154
156
  else if (exportDefault.args && exportDefault.argsNode) {
@@ -167,7 +169,7 @@ function resolvePlugins(services, vueCompilerOptions, settings) {
167
169
  transformed = true;
168
170
  item.additionalTextEdits.push({
169
171
  range: editRange,
170
- newText: unescape(printText.replace(/\\u/g, '%u')),
172
+ newText: unescape(printText.replace(unicodeReg, '%u')),
171
173
  });
172
174
  }
173
175
  }
@@ -233,7 +235,7 @@ function resolvePlugins(services, vueCompilerOptions, settings) {
233
235
  services.vue ??= (0, vue_1.default)();
234
236
  services.css ??= (0, volar_service_css_1.default)();
235
237
  services['pug-beautify'] ??= (0, volar_service_pug_beautify_1.default)();
236
- services.json ??= (0, volar_service_json_1.default)(settings?.json);
238
+ services.json ??= (0, volar_service_json_1.default)();
237
239
  services['typescript/twoslash-queries'] ??= (0, volar_service_typescript_twoslash_queries_1.default)();
238
240
  services['vue/referencesCodeLens'] ??= (0, vue_codelens_references_1.default)();
239
241
  services['vue/autoInsertDotValue'] ??= (0, vue_autoinsert_dotvalue_1.default)();
@@ -241,6 +243,7 @@ function resolvePlugins(services, vueCompilerOptions, settings) {
241
243
  services['vue/autoInsertParentheses'] ??= (0, vue_autoinsert_parentheses_1.default)();
242
244
  services['vue/autoInsertSpaces'] ??= (0, vue_autoinsert_space_1.default)();
243
245
  services['vue/visualizeHiddenCallbackParam'] ??= (0, vue_visualize_hidden_callback_param_1.default)();
246
+ services['vue/directiveComments'] ??= (0, vue_directive_comments_1.default)();
244
247
  services.emmet ??= (0, volar_service_emmet_1.default)();
245
248
  return services;
246
249
  }
@@ -0,0 +1,7 @@
1
+ import { AutoInsertionContext, Service } from '@volar/language-service';
2
+ import type * as ts from 'typescript/lib/tsserverlibrary';
3
+ import type { TextDocument } from 'vscode-languageserver-textdocument';
4
+ declare const _default: () => Service;
5
+ export default _default;
6
+ export declare function isCharacterTyping(document: TextDocument, options: AutoInsertionContext): boolean;
7
+ export declare function isBlacklistNode(ts: typeof import('typescript/lib/tsserverlibrary'), node: ts.Node, pos: number, allowAccessDotValue: boolean): boolean;
@@ -0,0 +1,159 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.isBlacklistNode = exports.isCharacterTyping = void 0;
4
+ const shared_1 = require("@vue/shared");
5
+ const plugin = (context, modules) => {
6
+ if (!modules?.typescript)
7
+ return {};
8
+ const ts = modules.typescript;
9
+ return {
10
+ async provideAutoInsertionEdit(document, position, insertContext) {
11
+ if (!isTsDocument(document))
12
+ return;
13
+ if (!isCharacterTyping(document, insertContext))
14
+ return;
15
+ const enabled = await context.env.getConfiguration?.('vue.autoInsert.dotValue') ?? true;
16
+ if (!enabled)
17
+ return;
18
+ const program = context.inject('typescript/languageService').getProgram();
19
+ if (!program)
20
+ return;
21
+ const sourceFile = program.getSourceFile(context.env.uriToFileName(document.uri));
22
+ if (!sourceFile)
23
+ return;
24
+ if (isBlacklistNode(ts, sourceFile, document.offsetAt(position), false))
25
+ return;
26
+ const node = findPositionIdentifier(sourceFile, sourceFile, document.offsetAt(position));
27
+ if (!node)
28
+ return;
29
+ const token = context.inject('typescript/languageServiceHost').getCancellationToken?.();
30
+ if (token) {
31
+ context.inject('typescript/languageService').getQuickInfoAtPosition(context.env.uriToFileName(document.uri), node.end);
32
+ if (token?.isCancellationRequested()) {
33
+ return; // check cancel here because type checker do not use cancel token
34
+ }
35
+ }
36
+ const checker = program.getTypeChecker();
37
+ const type = checker.getTypeAtLocation(node);
38
+ const props = type.getProperties();
39
+ if (props.some(prop => prop.name === 'value')) {
40
+ return '${1:.value}';
41
+ }
42
+ function findPositionIdentifier(sourceFile, node, offset) {
43
+ let result;
44
+ node.forEachChild(child => {
45
+ if (!result) {
46
+ if (child.end === offset && ts.isIdentifier(child)) {
47
+ result = child;
48
+ }
49
+ else if (child.end >= offset && child.getStart(sourceFile) < offset) {
50
+ result = findPositionIdentifier(sourceFile, child, offset);
51
+ }
52
+ }
53
+ });
54
+ return result;
55
+ }
56
+ },
57
+ };
58
+ };
59
+ exports.default = () => plugin;
60
+ function isTsDocument(document) {
61
+ return document.languageId === 'javascript' ||
62
+ document.languageId === 'typescript' ||
63
+ document.languageId === 'javascriptreact' ||
64
+ document.languageId === 'typescriptreact';
65
+ }
66
+ function isCharacterTyping(document, options) {
67
+ const lastCharacter = options.lastChange.text[options.lastChange.text.length - 1];
68
+ const rangeStart = options.lastChange.range.start;
69
+ const position = {
70
+ line: rangeStart.line,
71
+ character: rangeStart.character + options.lastChange.text.length,
72
+ };
73
+ const nextCharacter = document.getText({
74
+ start: position,
75
+ end: { line: position.line, character: position.character + 1 },
76
+ });
77
+ if (lastCharacter === undefined) { // delete text
78
+ return false;
79
+ }
80
+ if (options.lastChange.text.indexOf('\n') >= 0) { // multi-line change
81
+ return false;
82
+ }
83
+ return /\w/.test(lastCharacter) && !/\w/.test(nextCharacter);
84
+ }
85
+ exports.isCharacterTyping = isCharacterTyping;
86
+ function isBlacklistNode(ts, node, pos, allowAccessDotValue) {
87
+ if (ts.isVariableDeclaration(node) && pos >= node.name.getFullStart() && pos <= node.name.getEnd()) {
88
+ return true;
89
+ }
90
+ else if (ts.isFunctionDeclaration(node) && node.name && pos >= node.name.getFullStart() && pos <= node.name.getEnd()) {
91
+ return true;
92
+ }
93
+ else if (ts.isParameter(node) && pos >= node.name.getFullStart() && pos <= node.name.getEnd()) {
94
+ return true;
95
+ }
96
+ else if (ts.isPropertyAssignment(node) && pos >= node.name.getFullStart() && pos <= node.name.getEnd()) {
97
+ return true;
98
+ }
99
+ else if (ts.isShorthandPropertyAssignment(node)) {
100
+ return true;
101
+ }
102
+ else if (ts.isImportDeclaration(node)) {
103
+ return true;
104
+ }
105
+ else if (ts.isLiteralTypeNode(node)) {
106
+ return true;
107
+ }
108
+ else if (ts.isTypeReferenceNode(node)) {
109
+ return true;
110
+ }
111
+ else if (!allowAccessDotValue && ts.isPropertyAccessExpression(node) && node.expression.end === pos && node.name.text === 'value') {
112
+ return true;
113
+ }
114
+ else if (ts.isCallExpression(node)
115
+ && ts.isIdentifier(node.expression)
116
+ && isWatchOrUseFunction(node.expression.text)
117
+ && isTopLevelArgOrArrayTopLevelItemItem(node)) {
118
+ return true;
119
+ }
120
+ else {
121
+ let _isBlacklistNode = false;
122
+ node.forEachChild(node => {
123
+ if (_isBlacklistNode)
124
+ return;
125
+ if (pos >= node.getFullStart() && pos <= node.getEnd()) {
126
+ if (isBlacklistNode(ts, node, pos, allowAccessDotValue)) {
127
+ _isBlacklistNode = true;
128
+ }
129
+ }
130
+ });
131
+ return _isBlacklistNode;
132
+ }
133
+ function isWatchOrUseFunction(fnName) {
134
+ return fnName === 'watch'
135
+ || fnName === 'unref'
136
+ || fnName === 'triggerRef'
137
+ || fnName === 'isRef'
138
+ || (0, shared_1.hyphenate)(fnName).startsWith('use-');
139
+ }
140
+ function isTopLevelArgOrArrayTopLevelItemItem(node) {
141
+ for (const arg of node.arguments) {
142
+ if (pos >= arg.getFullStart() && pos <= arg.getEnd()) {
143
+ if (ts.isIdentifier(arg)) {
144
+ return true;
145
+ }
146
+ if (ts.isArrayLiteralExpression(arg)) {
147
+ for (const el of arg.elements) {
148
+ if (pos >= el.getFullStart() && pos <= el.getEnd()) {
149
+ return ts.isIdentifier(el);
150
+ }
151
+ }
152
+ }
153
+ return false;
154
+ }
155
+ }
156
+ }
157
+ }
158
+ exports.isBlacklistNode = isBlacklistNode;
159
+ //# sourceMappingURL=vue-.js.map
@@ -0,0 +1,7 @@
1
+ import { AutoInsertionContext, Service } from '@volar/language-service';
2
+ import type * as ts from 'typescript/lib/tsserverlibrary';
3
+ import type { TextDocument } from 'vscode-languageserver-textdocument';
4
+ declare const _default: () => Service;
5
+ export default _default;
6
+ export declare function isCharacterTyping(document: TextDocument, options: AutoInsertionContext): boolean;
7
+ export declare function isBlacklistNode(ts: typeof import('typescript/lib/tsserverlibrary'), node: ts.Node, pos: number, allowAccessDotValue: boolean): boolean;
@@ -0,0 +1,159 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.isBlacklistNode = exports.isCharacterTyping = void 0;
4
+ const shared_1 = require("@vue/shared");
5
+ const plugin = (context, modules) => {
6
+ if (!modules?.typescript)
7
+ return {};
8
+ const ts = modules.typescript;
9
+ return {
10
+ async provideAutoInsertionEdit(document, position, insertContext) {
11
+ if (!isTsDocument(document))
12
+ return;
13
+ if (!isCharacterTyping(document, insertContext))
14
+ return;
15
+ const enabled = await context.env.getConfiguration?.('vue.autoInsert.dotValue') ?? true;
16
+ if (!enabled)
17
+ return;
18
+ const program = context.inject('typescript/languageService').getProgram();
19
+ if (!program)
20
+ return;
21
+ const sourceFile = program.getSourceFile(context.env.uriToFileName(document.uri));
22
+ if (!sourceFile)
23
+ return;
24
+ if (isBlacklistNode(ts, sourceFile, document.offsetAt(position), false))
25
+ return;
26
+ const node = findPositionIdentifier(sourceFile, sourceFile, document.offsetAt(position));
27
+ if (!node)
28
+ return;
29
+ const token = context.inject('typescript/languageServiceHost').getCancellationToken?.();
30
+ if (token) {
31
+ context.inject('typescript/languageService').getQuickInfoAtPosition(context.env.uriToFileName(document.uri), node.end);
32
+ if (token?.isCancellationRequested()) {
33
+ return; // check cancel here because type checker do not use cancel token
34
+ }
35
+ }
36
+ const checker = program.getTypeChecker();
37
+ const type = checker.getTypeAtLocation(node);
38
+ const props = type.getProperties();
39
+ if (props.some(prop => prop.name === 'value')) {
40
+ return '${1:.value}';
41
+ }
42
+ function findPositionIdentifier(sourceFile, node, offset) {
43
+ let result;
44
+ node.forEachChild(child => {
45
+ if (!result) {
46
+ if (child.end === offset && ts.isIdentifier(child)) {
47
+ result = child;
48
+ }
49
+ else if (child.end >= offset && child.getStart(sourceFile) < offset) {
50
+ result = findPositionIdentifier(sourceFile, child, offset);
51
+ }
52
+ }
53
+ });
54
+ return result;
55
+ }
56
+ },
57
+ };
58
+ };
59
+ exports.default = () => plugin;
60
+ function isTsDocument(document) {
61
+ return document.languageId === 'javascript' ||
62
+ document.languageId === 'typescript' ||
63
+ document.languageId === 'javascriptreact' ||
64
+ document.languageId === 'typescriptreact';
65
+ }
66
+ function isCharacterTyping(document, options) {
67
+ const lastCharacter = options.lastChange.text[options.lastChange.text.length - 1];
68
+ const rangeStart = options.lastChange.range.start;
69
+ const position = {
70
+ line: rangeStart.line,
71
+ character: rangeStart.character + options.lastChange.text.length,
72
+ };
73
+ const nextCharacter = document.getText({
74
+ start: position,
75
+ end: { line: position.line, character: position.character + 1 },
76
+ });
77
+ if (lastCharacter === undefined) { // delete text
78
+ return false;
79
+ }
80
+ if (options.lastChange.text.indexOf('\n') >= 0) { // multi-line change
81
+ return false;
82
+ }
83
+ return /\w/.test(lastCharacter) && !/\w/.test(nextCharacter);
84
+ }
85
+ exports.isCharacterTyping = isCharacterTyping;
86
+ function isBlacklistNode(ts, node, pos, allowAccessDotValue) {
87
+ if (ts.isVariableDeclaration(node) && pos >= node.name.getFullStart() && pos <= node.name.getEnd()) {
88
+ return true;
89
+ }
90
+ else if (ts.isFunctionDeclaration(node) && node.name && pos >= node.name.getFullStart() && pos <= node.name.getEnd()) {
91
+ return true;
92
+ }
93
+ else if (ts.isParameter(node) && pos >= node.name.getFullStart() && pos <= node.name.getEnd()) {
94
+ return true;
95
+ }
96
+ else if (ts.isPropertyAssignment(node) && pos >= node.name.getFullStart() && pos <= node.name.getEnd()) {
97
+ return true;
98
+ }
99
+ else if (ts.isShorthandPropertyAssignment(node)) {
100
+ return true;
101
+ }
102
+ else if (ts.isImportDeclaration(node)) {
103
+ return true;
104
+ }
105
+ else if (ts.isLiteralTypeNode(node)) {
106
+ return true;
107
+ }
108
+ else if (ts.isTypeReferenceNode(node)) {
109
+ return true;
110
+ }
111
+ else if (!allowAccessDotValue && ts.isPropertyAccessExpression(node) && node.expression.end === pos && node.name.text === 'value') {
112
+ return true;
113
+ }
114
+ else if (ts.isCallExpression(node)
115
+ && ts.isIdentifier(node.expression)
116
+ && isWatchOrUseFunction(node.expression.text)
117
+ && isTopLevelArgOrArrayTopLevelItemItem(node)) {
118
+ return true;
119
+ }
120
+ else {
121
+ let _isBlacklistNode = false;
122
+ node.forEachChild(node => {
123
+ if (_isBlacklistNode)
124
+ return;
125
+ if (pos >= node.getFullStart() && pos <= node.getEnd()) {
126
+ if (isBlacklistNode(ts, node, pos, allowAccessDotValue)) {
127
+ _isBlacklistNode = true;
128
+ }
129
+ }
130
+ });
131
+ return _isBlacklistNode;
132
+ }
133
+ function isWatchOrUseFunction(fnName) {
134
+ return fnName === 'watch'
135
+ || fnName === 'unref'
136
+ || fnName === 'triggerRef'
137
+ || fnName === 'isRef'
138
+ || (0, shared_1.hyphenate)(fnName).startsWith('use-');
139
+ }
140
+ function isTopLevelArgOrArrayTopLevelItemItem(node) {
141
+ for (const arg of node.arguments) {
142
+ if (pos >= arg.getFullStart() && pos <= arg.getEnd()) {
143
+ if (ts.isIdentifier(arg)) {
144
+ return true;
145
+ }
146
+ if (ts.isArrayLiteralExpression(arg)) {
147
+ for (const el of arg.elements) {
148
+ if (pos >= el.getFullStart() && pos <= el.getEnd()) {
149
+ return ts.isIdentifier(el);
150
+ }
151
+ }
152
+ }
153
+ return false;
154
+ }
155
+ }
156
+ }
157
+ }
158
+ exports.isBlacklistNode = isBlacklistNode;
159
+ //# sourceMappingURL=vue-autoinsert-dotvalue%20copy.js.map
@@ -63,6 +63,7 @@ function isTsDocument(document) {
63
63
  document.languageId === 'javascriptreact' ||
64
64
  document.languageId === 'typescriptreact';
65
65
  }
66
+ const charReg = /\w/;
66
67
  function isCharacterTyping(document, options) {
67
68
  const lastCharacter = options.lastChange.text[options.lastChange.text.length - 1];
68
69
  const rangeStart = options.lastChange.range.start;
@@ -80,7 +81,7 @@ function isCharacterTyping(document, options) {
80
81
  if (options.lastChange.text.indexOf('\n') >= 0) { // multi-line change
81
82
  return false;
82
83
  }
83
- return /\w/.test(lastCharacter) && !/\w/.test(nextCharacter);
84
+ return charReg.test(lastCharacter) && !charReg.test(nextCharacter);
84
85
  }
85
86
  exports.isCharacterTyping = isCharacterTyping;
86
87
  function isBlacklistNode(ts, node, pos, allowAccessDotValue) {
@@ -0,0 +1,3 @@
1
+ import { Service } from '@volar/language-service';
2
+ declare const _default: () => Service;
3
+ export default _default;
@@ -0,0 +1,55 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const cmds = [
4
+ 'vue-ignore',
5
+ 'vue-skip',
6
+ 'vue-expect-error',
7
+ ];
8
+ const directiveCommentReg = /<!--\s+@/;
9
+ const plugin = () => {
10
+ return {
11
+ triggerCharacters: ['@'],
12
+ provideCompletionItems(document, position) {
13
+ if (document.languageId !== 'html')
14
+ return;
15
+ const line = document.getText({ start: { line: position.line, character: 0 }, end: position });
16
+ const cmdStart = line.match(directiveCommentReg);
17
+ if (!cmdStart)
18
+ return;
19
+ const startIndex = cmdStart.index + cmdStart[0].length;
20
+ const remainText = line.substring(startIndex);
21
+ const result = [];
22
+ for (const cmd of cmds) {
23
+ let match = true;
24
+ for (let i = 0; i < remainText.length; i++) {
25
+ if (remainText[i] !== cmd[i]) {
26
+ console.log(JSON.stringify(remainText[i]), JSON.stringify(cmd[i]));
27
+ match = false;
28
+ break;
29
+ }
30
+ }
31
+ if (match) {
32
+ result.push({
33
+ label: '@' + cmd,
34
+ textEdit: {
35
+ range: {
36
+ start: {
37
+ line: position.line,
38
+ character: startIndex - 1,
39
+ },
40
+ end: position,
41
+ },
42
+ newText: '@' + cmd,
43
+ },
44
+ });
45
+ }
46
+ }
47
+ return {
48
+ isIncomplete: false,
49
+ items: result,
50
+ };
51
+ },
52
+ };
53
+ };
54
+ exports.default = () => plugin;
55
+ //# sourceMappingURL=vue-directive-comments.js.map
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const language_service_1 = require("@volar/language-service");
4
4
  const vue = require("@vue/language-core");
5
+ const twoslashReg = /<!--\s*\^\?\s*-->/g;
5
6
  const plugin = (context, modules) => {
6
7
  if (!context || !modules?.typescript)
7
8
  return {};
@@ -12,7 +13,7 @@ const plugin = (context, modules) => {
12
13
  const hoverOffsets = [];
13
14
  const inlayHints = [];
14
15
  const languageService = context.inject('typescript/languageService');
15
- for (const pointer of document.getText(range).matchAll(/<!--\s*\^\?\s*-->/g)) {
16
+ for (const pointer of document.getText(range).matchAll(twoslashReg)) {
16
17
  const offset = pointer.index + pointer[0].indexOf('^?') + document.offsetAt(range.start);
17
18
  const position = document.positionAt(offset);
18
19
  hoverOffsets.push([position, document.offsetAt({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vue/language-service",
3
- "version": "1.8.3",
3
+ "version": "1.8.5",
4
4
  "main": "out/index.js",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -17,28 +17,28 @@
17
17
  "update-html-data": "node ./scripts/update-html-data.js"
18
18
  },
19
19
  "dependencies": {
20
- "@volar/language-core": "1.7.10",
21
- "@volar/language-service": "1.7.10",
22
- "@volar/typescript": "1.7.10",
20
+ "@volar/language-core": "~1.9.0",
21
+ "@volar/language-service": "~1.9.0",
22
+ "@volar/typescript": "~1.9.0",
23
23
  "@vue/compiler-dom": "^3.3.0",
24
- "@vue/language-core": "1.8.3",
24
+ "@vue/language-core": "1.8.5",
25
25
  "@vue/reactivity": "^3.3.0",
26
26
  "@vue/shared": "^3.3.0",
27
- "volar-service-css": "0.0.8",
28
- "volar-service-emmet": "0.0.8",
29
- "volar-service-html": "0.0.8",
30
- "volar-service-json": "0.0.8",
31
- "volar-service-pug": "0.0.8",
32
- "volar-service-pug-beautify": "0.0.8",
33
- "volar-service-typescript": "0.0.8",
34
- "volar-service-typescript-twoslash-queries": "0.0.8",
27
+ "volar-service-css": "0.0.10",
28
+ "volar-service-emmet": "0.0.10",
29
+ "volar-service-html": "0.0.10",
30
+ "volar-service-json": "0.0.10",
31
+ "volar-service-pug": "0.0.10",
32
+ "volar-service-pug-beautify": "0.0.10",
33
+ "volar-service-typescript": "0.0.10",
34
+ "volar-service-typescript-twoslash-queries": "0.0.10",
35
35
  "vscode-html-languageservice": "^5.0.4",
36
36
  "vscode-languageserver-textdocument": "^1.0.8"
37
37
  },
38
38
  "devDependencies": {
39
- "@volar/kit": "1.7.10",
39
+ "@volar/kit": "~1.9.0",
40
40
  "vscode-languageserver-protocol": "^3.17.3",
41
41
  "vscode-uri": "^3.0.7"
42
42
  },
43
- "gitHead": "a02e928ae3f3a255366cdb334ac6fb49c3237ae1"
43
+ "gitHead": "971820b55ea42cb7e8c8ba7c35c8998d5572b420"
44
44
  }