From c3b92d45a21fadaee065fb78813ff43b19f0dd49 Mon Sep 17 00:00:00 2001
From: Naoki Haba <naosprintrunner6385@gmail.com>
Date: Sat, 28 Sep 2024 01:30:49 +0900
Subject: [PATCH 1/5] docs: fix issue with autofocus on custom directives page

---
 src/guide/reusability/custom-directives.md | 93 +++++++++++++++++-----
 1 file changed, 73 insertions(+), 20 deletions(-)

diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md
index 1d30d144b..f1af8a5a3 100644
--- a/src/guide/reusability/custom-directives.md
+++ b/src/guide/reusability/custom-directives.md
@@ -1,13 +1,23 @@
 # カスタムディレクティブ {#custom-directives}
 
 <script setup>
-const vFocus = {
+const vHighlight = {
   mounted: el => {
-    el.focus()
+    el.classList.add('is-highlight')
   }
 }
 </script>
 
+<style>
+.vt-doc p.is-highlight {
+  margin-bottom: 0;
+}
+.is-highlight {
+  background-color: yellow;
+  color: black;
+}
+</style>
+
 ## はじめに {#introduction}
 
 コアに設定されているデフォルトのディレクティブのセット（`v-model` や `v-show` など）に加え、Vue では独自のカスタムディレクティブを登録することができます。
@@ -20,14 +30,16 @@ Vue におけるコードの再利用として 2 つの方法を紹介してき
 
 ```vue
 <script setup>
-// テンプレート内で v-focus が有効になります
-const vFocus = {
-  mounted: (el) => el.focus()
+// テンプレート内で v-highlight が有効になります
+const vHighlight = {
+  mounted: (el) => {
+    el.classList.add('is-highlight')
+  }
 }
 </script>
 
 <template>
-  <input v-focus />
+  <p v-highlight>This sentence is important!</p>
 </template>
 ```
 
@@ -36,33 +48,33 @@ const vFocus = {
 <div class="options-api">
 
 ```js
-const focus = {
-  mounted: (el) => el.focus()
+const highlight = {
+  mounted: (el) => el.classList.add('is-highlight')
 }
 
 export default {
   directives: {
-    // テンプレート内で v-focus が有効になります
-    focus
+    // テンプレート内で v-highlight が有効になります
+    highlight
   }
 }
 ```
 
 ```vue-html
-<input v-focus />
+<p v-highlight>This sentence is important!</p>
 ```
 
 </div>
 
 <div class="demo">
-  <input v-focus placeholder="This should be focused" />
+  <p v-highlight>This sentence is important!</p>
 </div>
 
 ページの他の場所をクリックしていないと仮定すると、上の入力欄は自動的にフォーカスされるはずです。このディレクティブはページロード時だけでなく、Vue によって要素が動的に挿入されたときにも機能するため、`autofocus` 属性よりも便利です。
 
 <div class="composition-api">
 
-`<script setup>` では、接頭辞が `v` で始まるキャメルケースの変数をカスタムディレクティブとして使用することができます。上の例では、`vFocus` はテンプレート内で `v-focus` として使用できます。
+`<script setup>` では、接頭辞が `v` で始まるキャメルケースの変数をカスタムディレクティブとして使用することができます。上の例では、`vHighlight` はテンプレート内で `v-highlight` として使用できます。
 
 `<script setup>` を使用しない場合、カスタムディレクティブは `directives` オプションを使用して登録することができます:
 
@@ -72,8 +84,8 @@ export default {
     /*...*/
   },
   directives: {
-    // テンプレート内で v-focus が有効になります
-    focus: {
+    // テンプレート内で v-highlight が有効になります
+    highlight: {
       /* ... */
     }
   }
@@ -94,14 +106,56 @@ export default {
 const app = createApp({})
 
 // 全てのコンポーネントで v-focus が使用可能
-app.directive('focus', {
+app.directive('highlight', {
   /* ... */
 })
 ```
 
-:::tip
-カスタムディレクティブは DOM を直接操作することでしか必要な機能を実現できない場合にのみ使用してください。`v-bind` のような組み込みディレクティブを使用した宣言的なテンプレートは、効率的かつサーバーレンダリングフレンドリーです。可能なかぎり組み込みディレクティブを使用することをおすすめします。
-:::
+## カスタムディレクティブを使用するタイミング {#when-to-use}
+
+カスタムディレクティブは DOM を直接操作することでしか必要な機能を実現できない場合にのみ使用してください。
+
+一般的な例として、要素にフォーカスを当てる `v-focus` カスタムディレクティブがあります。
+
+<div class="composition-api">
+
+```vue
+<script setup>
+// テンプレート内で v-focus が有効になります
+const vFocus = {
+  mounted: (el) => el.focus()
+}
+</script>
+<template>
+  <input v-focus />
+</template>
+```
+
+</div>
+
+<div class="options-api">
+
+```js
+const focus = {
+  mounted: (el) => el.focus()
+}
+export default {
+  directives: {
+    // テンプレート内で v-focus が有効になります
+    focus
+  }
+}
+```
+
+```vue-html
+<input v-focus />
+```
+
+</div>
+
+このディレクティブは `autofocus` 属性よりも便利です。ページ読み込み時だけでなく、Vue によって要素が動的に挿入されたときにも機能するからです！
+
+可能な限り `v-bind` のような組み込みディレクティブを使用した宣言的なテンプレートを推奨します。これらはより効率的で、サーバーレンダリングにも適しているためです。
 
 ## ディレクティブフック {#directive-hooks}
 
@@ -214,7 +268,6 @@ app.directive('demo', (el, binding) => {
 コンポーネントにカスタムディレクティブを使用することは推奨しません。コンポーネントに複数のルートノードがある場合、予期しない動作が発生する可能性があります。
 :::
 
-
 コンポーネントで使用すると、[フォールスルー属性](/guide/components/attrs)と同様にカスタムディレクティブは常にコンポーネントのルートノードに適用されます。
 
 ```vue-html

From cd41e9546a8211c7cdaf1808ef056efc08857f31 Mon Sep 17 00:00:00 2001
From: Naoki Haba <naosprintrunner6385@gmail.com>
Date: Sun, 29 Sep 2024 16:16:45 +0900
Subject: [PATCH 2/5] chore: update CSS for custom directives page

---
 src/guide/reusability/custom-directives.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md
index f1af8a5a3..f7f980c16 100644
--- a/src/guide/reusability/custom-directives.md
+++ b/src/guide/reusability/custom-directives.md
@@ -12,6 +12,7 @@ const vHighlight = {
 .vt-doc p.is-highlight {
   margin-bottom: 0;
 }
+
 .is-highlight {
   background-color: yellow;
   color: black;

From aaf3631804929200460789ab228df902990601cb Mon Sep 17 00:00:00 2001
From: Naoki Haba <naosprintrunner6385@gmail.com>
Date: Sun, 29 Sep 2024 16:17:49 +0900
Subject: [PATCH 3/5] docs: remove unnecessary Japanese translation in custom
 directives page

---
 src/guide/reusability/custom-directives.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md
index f7f980c16..11617e65a 100644
--- a/src/guide/reusability/custom-directives.md
+++ b/src/guide/reusability/custom-directives.md
@@ -71,8 +71,6 @@ export default {
   <p v-highlight>This sentence is important!</p>
 </div>
 
-ページの他の場所をクリックしていないと仮定すると、上の入力欄は自動的にフォーカスされるはずです。このディレクティブはページロード時だけでなく、Vue によって要素が動的に挿入されたときにも機能するため、`autofocus` 属性よりも便利です。
-
 <div class="composition-api">
 
 `<script setup>` では、接頭辞が `v` で始まるキャメルケースの変数をカスタムディレクティブとして使用することができます。上の例では、`vHighlight` はテンプレート内で `v-highlight` として使用できます。

From ac84340e529748c205db2150856b6504b21082a3 Mon Sep 17 00:00:00 2001
From: Naoki Haba <naosprintrunner6385@gmail.com>
Date: Sun, 29 Sep 2024 16:21:00 +0900
Subject: [PATCH 4/5] Fix base on https://github.com/vuejs/docs/pull/2994

---
 src/guide/reusability/custom-directives.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md
index 11617e65a..64f84cbf6 100644
--- a/src/guide/reusability/custom-directives.md
+++ b/src/guide/reusability/custom-directives.md
@@ -104,7 +104,7 @@ export default {
 ```js
 const app = createApp({})
 
-// 全てのコンポーネントで v-focus が使用可能
+// 全てのコンポーネントで v-highlight が使用可能
 app.directive('highlight', {
   /* ... */
 })

From 02b104aac1be38153b9bea6e558909f87ca2074f Mon Sep 17 00:00:00 2001
From: Naoki Haba <naosprintrunner6385@gmail.com>
Date: Sun, 29 Sep 2024 17:10:54 +0900
Subject: [PATCH 5/5] feat: Add v-focus directive for input autofocus

---
 src/guide/reusability/custom-directives.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md
index 64f84cbf6..47cfbd49d 100644
--- a/src/guide/reusability/custom-directives.md
+++ b/src/guide/reusability/custom-directives.md
@@ -125,6 +125,7 @@ const vFocus = {
   mounted: (el) => el.focus()
 }
 </script>
+
 <template>
   <input v-focus />
 </template>
@@ -138,6 +139,7 @@ const vFocus = {
 const focus = {
   mounted: (el) => el.focus()
 }
+
 export default {
   directives: {
     // テンプレート内で v-focus が有効になります