From b8080c32b503aee7705b3c812fc26e7fb1bebe4d Mon Sep 17 00:00:00 2001 From: Romain Crestey Date: Mon, 20 Jan 2025 22:02:47 +0100 Subject: [PATCH] fr: tutorial/06/01-02-03-04 --- .../+assets/app-a/src/lib/App.svelte | 4 ++-- .../+assets/app-b/src/lib/App.svelte | 4 ++-- .../06-bindings/01-text-inputs/index.md | 16 +++++++++++----- .../06-bindings/02-numeric-inputs/index.md | 8 +++++--- .../+assets/app-a/src/lib/App.svelte | 10 ++++------ .../+assets/app-b/src/lib/App.svelte | 10 ++++------ .../06-bindings/03-checkbox-inputs/index.md | 5 +++-- .../+assets/app-a/src/lib/App.svelte | 17 +++++++++-------- .../+assets/app-b/src/lib/App.svelte | 17 +++++++++-------- .../06-bindings/04-select-bindings/index.md | 13 +++++++++---- .../tutorial/01-svelte/06-bindings/index.md | 2 +- 11 files changed, 59 insertions(+), 47 deletions(-) diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/+assets/app-a/src/lib/App.svelte index 8858f5e58..ab462d618 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/+assets/app-a/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/+assets/app-a/src/lib/App.svelte @@ -1,7 +1,7 @@ -

Hello {name}!

+

Bonjour {name} !

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/+assets/app-b/src/lib/App.svelte index e6beac92e..15455f353 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/+assets/app-b/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/+assets/app-b/src/lib/App.svelte @@ -1,7 +1,7 @@ -

Hello {name}!

+

Bonjour {name} !

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/index.md b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/index.md index bc195e1ab..288bc7b78 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/index.md +++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/index.md @@ -1,16 +1,22 @@ --- -title: Text inputs +title: Inputs texte --- -As a general rule, data flow in Svelte is _top down_ — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around. +De manière générale, la donnée circule en _descendant_ — un composant parent peut définir des props +sur un composant enfant, et un composant peut définir des attributs sur un élément, mais pas +l'inverse. -Sometimes it's useful to break that rule. Take the case of the `` element in this component — we _could_ add an `oninput` event handler that sets the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see. +Parfois, il peut être utile d'ignorer cette règle. Prenez le cas du élément `` dans ce +composant — nous _pourrions_ ajouter un gestionnaire d'évènement `oninput` qui définit la valeur de +`name` à `event.target.value`, mais ça semble un peu... compliqué. Et ça peut empirer avec d'autres +éléments de formulaires, comme nous le verrons plus tard. -Instead, we can use the `bind:value` directive: +Au lieu de faire ça, nous pouvons utiliser la directive `bind:value` : ```svelte /// file: App.svelte ``` -This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`. +Ceci signifie que non seulement les changements de valeur de `name` vont mettre à jour la valeur de +l'input, mais aussi que les changements sur la valeur de l'input vont mettre à jour `name`. diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/index.md b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/index.md index 6291b7a27..cd08a4f55 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/index.md +++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/index.md @@ -1,10 +1,12 @@ --- -title: Numeric inputs +title: Inputs numériques --- -In the DOM, every input value is a string. That's unhelpful when you're dealing with numeric inputs — `type="number"` and `type="range"` — as it means you have to remember to coerce `input.value` before using it. +Dans le DOM, chaque valeur d'input est une chaîne de caractères. Cela n'est pas très pratique +lorsqu'il s'agit d'inputs numériques — `type="number"` et `type="range"` — puisque cela signifie que +vous devez vous souvenir de transformer la valeur de `input.value` avant de vous en servir. -With `bind:value`, Svelte takes care of it for you: +Avec `bind:value`, Svelte s'occupe de ça pour vous : ```svelte /// file: App.svelte diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/+assets/app-a/src/lib/App.svelte index db310f39b..0a82f66c6 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/+assets/app-a/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/+assets/app-a/src/lib/App.svelte @@ -4,19 +4,17 @@ {#if yes}

- Thank you. We will bombard your inbox and sell - your personal details. + Merci. Nous bombarderons votre boîte de réceloption et vendrons vos données personnelles.

{:else}

- You must opt in to continue. If you're not - paying, you're the product. + Vous devez acceptez pour continuer. Si vous ne payez pas, vous êtes le produit.

{/if} - + diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/+assets/app-b/src/lib/App.svelte index cd1315947..11b5aa152 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/+assets/app-b/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/+assets/app-b/src/lib/App.svelte @@ -4,19 +4,17 @@ {#if yes}

- Thank you. We will bombard your inbox and sell - your personal details. + Merci. Nous bombarderons votre boîte de réceloption et vendrons vos données personnelles.

{:else}

- You must opt in to continue. If you're not - paying, you're the product. + Vous devez acceptez pour continuer. Si vous ne payez pas, vous êtes le produit.

{/if} - + diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/index.md b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/index.md index dc79573de..47ddb74fe 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/index.md +++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/index.md @@ -1,8 +1,9 @@ --- -title: Checkbox inputs +title: Checkbox --- -Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`: +Les checkbox sont utilisées pour activer ou désactiver des états. Plutôt que de créer une liaison à +`input.value`, nous pouvons créer une liaison avec `input.checked` : ```svelte /// file: App.svelte diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/+assets/app-a/src/lib/App.svelte index b78a59ab9..0f8dd11f9 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/+assets/app-a/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/+assets/app-a/src/lib/App.svelte @@ -2,15 +2,16 @@ let questions = $state([ { id: 1, - text: `Where did you go to school?` + text: `Où êtes-vous allé à l'école ?` }, { id: 2, - text: `What is your mother's name?` + text: `Quel est le nom de jeune fille de votre mère ?` }, { id: 3, - text: `What is another personal fact that an attacker could easily find with Google?` + text: `Quelle information personnelle une personne mal intentionnée pourrait aisément trouver +grâce à Google ?` } ]); @@ -22,12 +23,12 @@ e.preventDefault(); alert( - `answered question ${selected.id} (${selected.text}) with "${answer}"` + `vous avez répondu à la question ${selected.id} (${selected.text}) avec "${answer}"` ); } -

Insecurity questions

+

Questions pas du tout sécurisées

- selected question {selected + question sélectionnée {selected ? selected.id - : '[waiting...]'} + : '[chargement...]'}

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md index e918bd185..3c88ebb60 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md +++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md @@ -1,8 +1,8 @@ --- -title: Select bindings +title: Liaisons de select --- -We can also use `bind:value` with `` : ```svelte /// file: App.svelte @@ -12,6 +12,11 @@ We can also use `bind:value` with `