Merge pull request #34 from tomoam/update-up-to-20230330

2023/03/30 迄の更新に追従

Author: tomoam

content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md

@@ -6,5 +6,5 @@ title: Checkbox inputs
 
 ```svelte
 /// file: App.svelte
-<input type=checkbox bind:checked={yes}>
+<input type=checkbox +++bind:+++checked={yes}>
 ```

content/tutorial/01-svelte/06-bindings/04-group-inputs/README.md

@@ -0,0 +1,17 @@
+---
+title: Select bindings
+---
+
+`<select>` 要素にも `bind:value` を使用できます。
+
+```svelte
+/// file: App.svelte
+<select
+    +++bind:+++value={selected}
+    on:change={() => answer = ''}
+>
+```
+
+`<option>` の値は文字列ではなくオブジェクトであることにご注意ください。Svelteは気にしません。
+
+> `selected` の初期値を設定していないので、バインディングは自動的にデフォルト値(配列の先頭)に設定されます。しかし、注意してください。バインディングが初期化されるまで、`selected` は undefined のままなので、よく考えもせずにテンプレート内の `selected.id` などを参照することはできません。

content/tutorial/01-svelte/06-bindings/04-group-inputs/app-a/src/lib/App.svelte

@@ -0,0 +1,29 @@
+---
+title: Group inputs
+---
+
+同じ値に関連している `type="radio"` input や `type="checkbox"` input が複数ある場合、`value` 属性とともに `bind:group` を使うことができます。同じグループの radio input は互いに排他的(exclusive)です。同じグループの checkbox input は選択した値の配列を構成します。
+
+`bind:group={scoops}` を radio input に追加し…
+
+```svelte
+/// file: App.svelte
+<input
+	type="radio"
+	name="scoops"
+	value={number}
+	+++bind:group={scoops}+++
+/>
+```
+
+…そして `bind:group={flavours}` を checkbox input に追加します:
+
+```svelte
+/// file: App.svelte
+<input
+	type="checkbox"
+	name="flavours"
+	value={flavour}
+	+++bind:group={flavours}+++
+/>
+```

content/tutorial/01-svelte/06-bindings/04-group-inputs/app-b/src/lib/App.svelte

@@ -0,0 +1,45 @@
+<script>
+	let scoops = 1;
+	let flavours = [];
+
+	const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
+</script>
+
+<h2>Size</h2>
+
+{#each [1, 2, 3] as number}
+	<label>
+		<input
+			type="radio"
+			name="scoops"
+			value={number}
+		/>
+
+		{number} {number === 1 ? 'scoop' : 'scoops'}
+	</label>
+{/each}
+
+<h2>Flavours</h2>
+
+{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
+	<label>
+		<input
+			type="checkbox"
+			name="flavours"
+			value={flavour}
+		/>
+
+		{flavour}
+	</label>
+{/each}
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {formatter.format(flavours)}
+	</p>
+{/if}

content/tutorial/01-svelte/06-bindings/04-select-bindings/README.md

@@ -0,0 +1,47 @@
+<script>
+	let scoops = 1;
+	let flavours = [];
+
+	const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
+</script>
+
+<h2>Size</h2>
+
+{#each [1, 2, 3] as number}
+	<label>
+		<input
+			type="radio"
+			name="scoops"
+			value={number}
+			bind:group={scoops}
+		/>
+
+		{number} {number === 1 ? 'scoop' : 'scoops'}
+	</label>
+{/each}
+
+<h2>Flavours</h2>
+
+{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
+	<label>
+		<input
+			type="checkbox"
+			name="flavours"
+			value={flavour}
+			bind:group={flavours}
+		/>
+
+		{flavour}
+	</label>
+{/each}
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {formatter.format(flavours)}
+	</p>
+{/if}