@vue/language-service 1.8.1 → 1.8.2

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": "\n**単一の**要素またはコンポーネントにアニメーションのトランジションを提供します。\n\n- **プロパティ**\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 * トランジションクラスをカスタマイズするためのプロパティ。\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- **プロパティ**\n\n `<TransitionGroup>` は `<Transition>` と同じプロパティ(`mode` 以外)と追加の 2 つのプロパティを受け取ります:\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` プロパティによって定義できます。\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` プロパティで設定)が適用されます。移動用のクラスが適用されたときに、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": [
@@ -73,7 +73,7 @@
73
73
  "name": "KeepAlive",
74
74
  "description": {
75
75
  "kind": "markdown",
76
- "value": "\n動的に切り替えられる、内側のコンポーネントをキャッシュします。\n\n- **プロパティ**\n\n ```ts\n interface KeepAliveProps {\n /**\n * 指定された場合、`include` でマッチした名前の\n * コンポーネントのみがキャッシュされます。\n */\n include?: MatchPattern\n /**\n * `exclude` でマッチした名前のコンポーネントは\n * キャッシュされません。\n */\n exclude?: MatchPattern\n /**\n * キャッシュするコンポーネントインスタンスの最大数。\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **詳細**\n\n 動的コンポーネントをラップすると、`<KeepAlive>` は非アクティブなコンポーネントインスタンスを破棄せずにキャッシュします。\n\n `<KeepAlive>` の直接の子として、アクティブなコンポーネントのインスタンスは常に 1 つだけです。\n\n `<KeepAlive>` の内部でコンポーネントが切り替えられると、その `activated` と `deactivated` ライフサイクルフックが呼び出されます(`mounted` と `unmounted` は呼び出されず、その代わりとして提供されています)。これは `<KeepAlive>` の直接の子だけでなく、そのすべての子孫にも適用されます。\n\n- **例**\n\n 基本的な使い方:\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `v-if` / `v-else` の分岐を使用する場合、一度にレンダリングされるコンポーネントは 1 つだけである必要があります:\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 `<Transition>` と共に使用:\n\n ```html\n <Transition>\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n </Transition>\n ```\n\n `include` / `exclude` の使用:\n\n ```html\n <!-- カンマ区切りの文字列 -->\n <KeepAlive include=\"a,b\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 正規表現(`v-bind` を使用) -->\n <KeepAlive :include=\"/a|b/\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 配列(`v-bind` を使用) -->\n <KeepAlive :include=\"['a', 'b']\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `max` の使用:\n\n ```html\n <KeepAlive :max=\"10\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n- **参照** [ガイド - KeepAlive](https://ja.vuejs.org/guide/built-ins/keep-alive.html)\n"
76
+ "value": "\n動的に切り替えられる、内側のコンポーネントをキャッシュします。\n\n- **props**\n\n ```ts\n interface KeepAliveProps {\n /**\n * 指定された場合、`include` でマッチした名前の\n * コンポーネントのみがキャッシュされます。\n */\n include?: MatchPattern\n /**\n * `exclude` でマッチした名前のコンポーネントは\n * キャッシュされません。\n */\n exclude?: MatchPattern\n /**\n * キャッシュするコンポーネントインスタンスの最大数。\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **詳細**\n\n 動的コンポーネントをラップすると、`<KeepAlive>` は非アクティブなコンポーネントインスタンスを破棄せずにキャッシュします。\n\n `<KeepAlive>` の直接の子として、アクティブなコンポーネントのインスタンスは常に 1 つだけです。\n\n `<KeepAlive>` の内部でコンポーネントが切り替えられると、その `activated` と `deactivated` ライフサイクルフックが呼び出されます(`mounted` と `unmounted` は呼び出されず、その代わりとして提供されています)。これは `<KeepAlive>` の直接の子だけでなく、そのすべての子孫にも適用されます。\n\n- **例**\n\n 基本的な使い方:\n\n ```html\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `v-if` / `v-else` の分岐を使用する場合、一度にレンダリングされるコンポーネントは 1 つだけである必要があります:\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 `<Transition>` と共に使用:\n\n ```html\n <Transition>\n <KeepAlive>\n <component :is=\"view\"></component>\n </KeepAlive>\n </Transition>\n ```\n\n `include` / `exclude` の使用:\n\n ```html\n <!-- カンマ区切りの文字列 -->\n <KeepAlive include=\"a,b\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 正規表現(`v-bind` を使用) -->\n <KeepAlive :include=\"/a|b/\">\n <component :is=\"view\"></component>\n </KeepAlive>\n\n <!-- 配列(`v-bind` を使用) -->\n <KeepAlive :include=\"['a', 'b']\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n `max` の使用:\n\n ```html\n <KeepAlive :max=\"10\">\n <component :is=\"view\"></component>\n </KeepAlive>\n ```\n\n- **参照** [ガイド - KeepAlive](https://ja.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": "\nスロットの内容を DOM の別の場所にレンダリングします。\n\n- **プロパティ**\n\n ```ts\n interface TeleportProps {\n /**\n * 必須。ターゲットコンテナーを指定します。\n * セレクターまたは実際の要素のいずれかを指定できます。\n */\n to: string | HTMLElement\n /**\n * `true` の場合、コンテンツはターゲットコンテナーに\n * 移動せずに元の場所に残ります。\n * 動的に変更できます。\n */\n disabled?: boolean\n }\n ```\n\n- **例**\n\n ターゲットコンテナーの指定:\n\n ```html\n <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n 条件によって無効化:\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n- **参照** [ガイド - Teleport](https://ja.vuejs.org/guide/built-ins/teleport.html)\n"
110
+ "value": "\nスロットの内容を DOM の別の場所にレンダリングします。\n\n- **props**\n\n ```ts\n interface TeleportProps {\n /**\n * 必須。ターゲットコンテナーを指定します。\n * セレクターまたは実際の要素のいずれかを指定できます。\n */\n to: string | HTMLElement\n /**\n * `true` の場合、コンテンツはターゲットコンテナーに\n * 移動せずに元の場所に残ります。\n * 動的に変更できます。\n */\n disabled?: boolean\n }\n ```\n\n- **例**\n\n ターゲットコンテナーの指定:\n\n ```html\n <teleport to=\"#some-id\" />\n <teleport to=\".some-class\" />\n <teleport to=\"[data-teleport]\" />\n ```\n\n 条件によって無効化:\n\n ```html\n <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n <video src=\"./my-movie.mp4\">\n </teleport>\n ```\n\n- **参照** [ガイド - Teleport](https://ja.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": "\nコンポーネントツリー内のネストした非同期な依存関係を管理するために使用します。\n\n- **プロパティ**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n }\n ```\n\n- **イベント**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **詳細**\n\n `<Suspense>` は `#default` スロットと `#fallback` スロットの 2 つのスロットを受け付けます。default スロットをメモリー内にレンダリングする間、fallback スロットの内容を表示します。\n\n デフォルトスロットのレンダリング中に非同期な依存関係([非同期コンポーネント](https://ja.vuejs.org/guide/components/async.html)や [`async setup()`](https://ja.vuejs.org/guide/built-ins/suspense.html#async-setup) のコンポーネント)が発生すると、それらが全て解決するまで待ってからデフォルトスロットを表示します。\n\n- **参照** [ガイド - Suspense](https://ja.vuejs.org/guide/built-ins/suspense.html)\n"
144
+ "value": "\nコンポーネントツリー内のネストした非同期な依存関係を管理するために使用します。\n\n- **props**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n }\n ```\n\n- **イベント**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **詳細**\n\n `<Suspense>` は `#default` スロットと `#fallback` スロットの 2 つのスロットを受け付けます。default スロットをメモリー内にレンダリングする間、fallback スロットの内容を表示します。\n\n デフォルトスロットのレンダリング中に非同期な依存関係([非同期コンポーネント](https://ja.vuejs.org/guide/components/async.html)や [`async setup()`](https://ja.vuejs.org/guide/built-ins/suspense.html#async-setup) のコンポーネント)が発生すると、それらが全て解決するまで待ってからデフォルトスロットを表示します。\n\n- **参照** [ガイド - Suspense](https://ja.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": "\n動的コンポーネントや動的な要素をレンダリングするための「メタ・コンポーネント」です。\n\n- **プロパティ**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **詳細**\n\n 実際にレンダリングするコンポーネントは `is` プロパティによって決定されます。\n\n - `is` が文字列の場合、HTML タグ名か、コンポーネントの登録名となります。\n\n - また、`is` はコンポーネントの定義に直接バインドもできます。\n\n- **例**\n\n 登録名によるコンポーネントのレンダリング(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 定義によるコンポーネントのレンダリング(`<script setup>` の Composition API):\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 HTML 要素のレンダリング:\n\n ```html\n <component :is=\"href ? 'a' : 'span'\"></component>\n ```\n\n [ビルトインのコンポーネント](./built-in-components)はすべて `is` に渡すことができますが、名前で渡したい場合は登録しなければなりません。例えば:\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 例えば `<script setup>` などで、コンポーネント名ではなく、コンポーネント自体を `is` に渡す場合は、登録は必要ありません。\n\n もし `v-model` が `<component>` タグで使用された場合、テンプレートコンパイラーは他のコンポーネントと同じように、`modelValue` プロパティと `update:modelValue` イベントリスナーに展開されます。しかし、これは `<input>` や `<select>` のようなネイティブ HTML 要素とは互換性がありません。そのため、動的に生成されるネイティブ要素に対して `v-model` を使用しても動作しません:\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 <!-- 'input' はネイティブ HTML 要素なので、動作しません -->\n <component :is=\"tag\" v-model=\"username\" />\n </template>\n ```\n\n 実際のアプリケーションでは、ネイティブのフォームフィールドはコンポーネントでラップされるのが一般的なので、このようなエッジケースはあまりありません。もし、ネイティブ要素を直接使用する必要がある場合は、 `v-model` を属性とイベントに手動で分割できます。\n\n- **参照** [動的コンポーネント](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
178
+ "value": "\n動的コンポーネントや動的な要素をレンダリングするための「メタ・コンポーネント」です。\n\n- **props**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **詳細**\n\n 実際にレンダリングするコンポーネントは `is` props によって決定されます。\n\n - `is` が文字列の場合、HTML タグ名か、コンポーネントの登録名となります。\n\n - また、`is` はコンポーネントの定義に直接バインドもできます。\n\n- **例**\n\n 登録名によるコンポーネントのレンダリング(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 定義によるコンポーネントのレンダリング(`<script setup>` の Composition API):\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 HTML 要素のレンダリング:\n\n ```html\n <component :is=\"href ? 'a' : 'span'\"></component>\n ```\n\n [ビルトインのコンポーネント](./built-in-components)はすべて `is` に渡すことができますが、名前で渡したい場合は登録しなければなりません。例えば:\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 例えば `<script setup>` などで、コンポーネント名ではなく、コンポーネント自体を `is` に渡す場合は、登録は必要ありません。\n\n もし `v-model` が `<component>` タグで使用された場合、テンプレートコンパイラーは他のコンポーネントと同じように、`modelValue` props `update:modelValue` イベントリスナーに展開されます。しかし、これは `<input>` や `<select>` のようなネイティブ HTML 要素とは互換性がありません。そのため、動的に生成されるネイティブ要素に対して `v-model` を使用しても動作しません:\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 <!-- 'input' はネイティブ HTML 要素なので、動作しません -->\n <component :is=\"tag\" v-model=\"username\" />\n </template>\n ```\n\n 実際のアプリケーションでは、ネイティブのフォームフィールドはコンポーネントでラップされるのが一般的なので、このようなエッジケースはあまりありません。もし、ネイティブ要素を直接使用する必要がある場合は、 `v-model` を属性とイベントに手動で分割できます。\n\n- **参照** [動的コンポーネント](https://ja.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": "\nテンプレート内でスロットコンテンツのアウトレットを表します。\n\n- **プロパティ**\n\n ```ts\n interface SlotProps {\n /**\n * <slot> に渡されたすべてのプロパティは、スコープ付き\n * スロットの引数として渡されます\n */\n [key: string]: any\n /**\n * スロット名を指定するために予約済み。\n */\n name?: string\n }\n ```\n\n- **詳細**\n\n `<slot>` 要素では `name` 属性を使用してスロット名を指定できます。`name` が指定されない場合は、デフォルトのスロットがレンダリングされます。slot 要素に渡された追加の属性は、親で定義されたスコープ付きスロットにスロットプロパティとして渡されます。\n\n この要素そのものは、一致したスロットの内容に置き換えられます。\n\n Vue テンプレートの `<slot>` 要素は JavaScript にコンパイルされているので、[ネイティブの `<slot>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot)と混同しないように注意してください。\n\n- **参照** [コンポーネント - スロット](https://ja.vuejs.org/guide/components/slots.html)\n"
212
+ "value": "\nテンプレート内でスロットコンテンツのアウトレットを表します。\n\n- **props**\n\n ```ts\n interface SlotProps {\n /**\n * <slot> に渡されたすべての props は、スコープ付き\n * スロットの引数として渡されます\n */\n [key: string]: any\n /**\n * スロット名を指定するために予約済み。\n */\n name?: string\n }\n ```\n\n- **詳細**\n\n `<slot>` 要素では `name` 属性を使用してスロット名を指定できます。`name` が指定されない場合は、デフォルトのスロットがレンダリングされます。slot 要素に渡された追加の属性は、親で定義されたスコープ付きスロットにスロット props として渡されます。\n\n この要素そのものは、一致したスロットの内容に置き換えられます。\n\n Vue テンプレートの `<slot>` 要素は JavaScript にコンパイルされているので、[ネイティブの `<slot>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot)と混同しないように注意してください。\n\n- **参照** [コンポーネント - スロット](https://ja.vuejs.org/guide/components/slots.html)\n"
213
213
  },
214
214
  "attributes": [],
215
215
  "references": [
@@ -544,7 +544,7 @@
544
544
  "name": "v-bind",
545
545
  "description": {
546
546
  "kind": "markdown",
547
- "value": "\n1 つ以上の属性やコンポーネントのプロパティを式に動的にバインドします。\n\n- **省略記法:** `:` or `.`(`.prop` 修飾子使用時)\n\n- **期待する値:** `any(引数ありの場合) | Object(引数なしの場合)`\n\n- **引数:** `attrOrProp(省略可能)`\n\n- **修飾子**\n\n - `.camel` - kebab-case の属性名を camelCase に変換します。\n - `.prop` - バインディングを DOM プロパティとして設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n - `.attr` - バインディングを DOM 属性として設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n\n- **使用法**\n\n `class` や `style` 属性をバインドする際に使用する `v-bind` は、Array や Object などの追加の値の型をサポートします。詳しくは、以下のリンク先のガイドを参照してください。\n\n 要素にバインディングを設定するとき、Vue はデフォルトで、`in` 演算子チェックを使用して、プロパティとして定義されたキーが要素にあるかどうかを確認します。プロパティが定義されている場合、Vue はその値を属性ではなく DOM プロパティとして設定します。これはほとんどの場合において有効ですが、`.prop` や `.attr` という修飾子を明示的に使用することでこの動作をオーバーライドできます。これは、特に[カスタム要素を扱う](https://ja.vuejs.org/guide/extras/web-components.html#passing-dom-properties)ときに必要になることがあります。\n\n コンポーネントのプロパティをバインドするために使用する場合、そのプロパティは子コンポーネントで適切に宣言されている必要があります。\n\n 引数なしで使用する場合、属性の名前と値のペアを含むオブジェクトをバインドするために使用できます。\n\n- **例**\n\n ```html\n <!-- 属性をバインドする -->\n <img v-bind:src=\"imageSrc\" />\n\n <!-- 動的な属性名 -->\n <button v-bind:[key]=\"value\"></button>\n\n <!-- 省略記法 -->\n <img :src=\"imageSrc\" />\n\n <!-- 動的な属性名の省略記法 -->\n <button :[key]=\"value\"></button>\n\n <!-- インラインの文字列連結 -->\n <img :src=\"'/path/to/images/' + fileName\" />\n\n <!-- クラスのバインド -->\n <div :class=\"{ red: isRed }\"></div>\n <div :class=\"[classA, classB]\"></div>\n <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n <!-- スタイルのバインド -->\n <div :style=\"{ fontSize: size + 'px' }\"></div>\n <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n <!-- 属性のオブジェクトをバインド -->\n <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n <!-- プロパティのバインド。\"prop\" は子コンポーネントで宣言する必要があります。 -->\n <MyComponent :prop=\"someThing\" />\n\n <!-- 親のプロパティを子コンポーネントと共有するために渡す -->\n <MyComponent v-bind=\"$props\" />\n\n <!-- XLink -->\n <svg><a :xlink:special=\"foo\"></a></svg>\n ```\n\n `.prop` 修飾子には、専用の短縮形 `.` もあります:\n\n ```html\n <div :someProperty.prop=\"someObject\"></div>\n\n <!-- 以下とと同じ -->\n <div .someProperty=\"someObject\"></div>\n ```\n\n `.camel` 修飾子は、DOM 内テンプレートを使用する際に、 `v-bind` 属性名をキャメル化できます(例: SVG の `viewBox` 属性):\n\n ```html\n <svg :view-box.camel=\"viewBox\"></svg>\n ```\n\n 文字列テンプレートを使用する場合や、ビルドステップでテンプレートを事前コンパイルする場合は、`.camel` は必要ありません。\n\n- **参照**\n - [クラスとスタイルのバインディング](https://ja.vuejs.org/guide/essentials/class-and-style.html)\n - [コンポーネント - プロパティ渡しの詳細](https://ja.vuejs.org/guide/components/props.html#prop-passing-details)\n"
547
+ "value": "\n1 つ以上の属性やコンポーネントの props を式に動的にバインドします。\n\n- **省略記法:** `:` or `.`(`.prop` 修飾子使用時)\n\n- **期待する値:** `any(引数ありの場合) | Object(引数なしの場合)`\n\n- **引数:** `attrOrProp(省略可能)`\n\n- **修飾子**\n\n - `.camel` - kebab-case の属性名を camelCase に変換します。\n - `.prop` - バインディングを DOM プロパティとして設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n - `.attr` - バインディングを DOM 属性として設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n\n- **使用法**\n\n `class` や `style` 属性をバインドする際に使用する `v-bind` は、Array や Object などの追加の値の型をサポートします。詳しくは、以下のリンク先のガイドを参照してください。\n\n 要素にバインディングを設定するとき、Vue はデフォルトで、`in` 演算子チェックを使用して、プロパティとして定義されたキーが要素にあるかどうかを確認します。プロパティが定義されている場合、Vue はその値を属性ではなく DOM プロパティとして設定します。これはほとんどの場合において有効ですが、`.prop` や `.attr` という修飾子を明示的に使用することでこの動作をオーバーライドできます。これは、特に[カスタム要素を扱う](https://ja.vuejs.org/guide/extras/web-components.html#passing-dom-properties)ときに必要になることがあります。\n\n コンポーネントの props をバインドするために使用する場合、その props は子コンポーネントで適切に宣言されている必要があります。\n\n 引数なしで使用する場合、属性の名前と値のペアを含むオブジェクトをバインドするために使用できます。\n\n- **例**\n\n ```html\n <!-- 属性をバインドする -->\n <img v-bind:src=\"imageSrc\" />\n\n <!-- 動的な属性名 -->\n <button v-bind:[key]=\"value\"></button>\n\n <!-- 省略記法 -->\n <img :src=\"imageSrc\" />\n\n <!-- 動的な属性名の省略記法 -->\n <button :[key]=\"value\"></button>\n\n <!-- インラインの文字列連結 -->\n <img :src=\"'/path/to/images/' + fileName\" />\n\n <!-- クラスのバインド -->\n <div :class=\"{ red: isRed }\"></div>\n <div :class=\"[classA, classB]\"></div>\n <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n <!-- スタイルのバインド -->\n <div :style=\"{ fontSize: size + 'px' }\"></div>\n <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n <!-- 属性のオブジェクトをバインド -->\n <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n <!-- props のバインド。\"prop\" は子コンポーネントで宣言する必要があります。 -->\n <MyComponent :prop=\"someThing\" />\n\n <!-- 親の props を子コンポーネントと共有するために渡す -->\n <MyComponent v-bind=\"$props\" />\n\n <!-- XLink -->\n <svg><a :xlink:special=\"foo\"></a></svg>\n ```\n\n `.prop` 修飾子には、専用の短縮形 `.` もあります:\n\n ```html\n <div :someProperty.prop=\"someObject\"></div>\n\n <!-- 以下と同じ -->\n <div .someProperty=\"someObject\"></div>\n ```\n\n `.camel` 修飾子は、DOM 内テンプレートを使用する際に、 `v-bind` 属性名をキャメル化できます(例: SVG の `viewBox` 属性):\n\n ```html\n <svg :view-box.camel=\"viewBox\"></svg>\n ```\n\n 文字列テンプレートを使用する場合や、ビルドステップでテンプレートを事前コンパイルする場合は、`.camel` は必要ありません。\n\n- **参照**\n - [クラスとスタイルのバインディング](https://ja.vuejs.org/guide/essentials/class-and-style.html)\n - [コンポーネント - props 渡しの詳細](https://ja.vuejs.org/guide/components/props.html#prop-passing-details)\n"
548
548
  },
549
549
  "references": [
550
550
  {
@@ -610,7 +610,7 @@
610
610
  "name": "v-slot",
611
611
  "description": {
612
612
  "kind": "markdown",
613
- "value": "\nプロパティの受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。\n\n- **省略記法:** `#`\n\n- **期待する値:** 関数の引数の位置で有効な JavaScript 式(分割代入のサポートを含む)。省略可能 - プロパティがスロットに渡されることを期待している場合のみ必要です。\n\n- **引数:** スロット名(省略可能で、デフォルトは `default`)\n\n- **以下に限定:**\n\n - `<template>`\n - [コンポーネント](https://ja.vuejs.org/guide/components/slots.html#scoped-slots)(プロパティのある単独のデフォルトスロット用)\n\n- **例**\n\n ```html\n <!-- 名前付きスロット -->\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 <!-- プロパティを受け取る名前付きスロット -->\n <InfiniteScroll>\n <template v-slot:item=\"slotProps\">\n <div class=\"item\">\n {{ slotProps.item.text }}\n </div>\n </template>\n </InfiniteScroll>\n\n <!-- プロパティを受け取るデフォルトスロット、分割代入あり -->\n <Mouse v-slot=\"{ x, y }\">\n Mouse position: {{ x }}, {{ y }}\n </Mouse>\n ```\n\n- **参照**\n - [コンポーネント - スロット](https://ja.vuejs.org/guide/components/slots.html)\n"
613
+ "value": "\nprops の受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。\n\n- **省略記法:** `#`\n\n- **期待する値:** 関数の引数の位置で有効な JavaScript 式(分割代入のサポートを含む)。省略可能 - props がスロットに渡されることを期待している場合のみ必要です。\n\n- **引数:** スロット名(省略可能で、デフォルトは `default`)\n\n- **以下に限定:**\n\n - `<template>`\n - [コンポーネント](https://ja.vuejs.org/guide/components/slots.html#scoped-slots)(props のある単独のデフォルトスロット用)\n\n- **例**\n\n ```html\n <!-- 名前付きスロット -->\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 <!-- 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 <!-- props を受け取るデフォルトスロット、分割代入あり -->\n <Mouse v-slot=\"{ x, y }\">\n Mouse position: {{ x }}, {{ y }}\n </Mouse>\n ```\n\n- **参照**\n - [コンポーネント - スロット](https://ja.vuejs.org/guide/components/slots.html)\n"
614
614
  },
615
615
  "references": [
616
616
  {
@@ -1,7 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const embedded = require("@volar/language-core");
4
- const language_core_1 = require("@vue/language-core");
5
3
  const vue_autoinsert_dotvalue_1 = require("./vue-autoinsert-dotvalue");
6
4
  const plugin = (context, modules) => {
7
5
  if (!context) {
@@ -18,22 +16,14 @@ const plugin = (context, modules) => {
18
16
  return;
19
17
  if (!(0, vue_autoinsert_dotvalue_1.isCharacterTyping)(document, options_2))
20
18
  return;
21
- const [vueFile] = context.documents.getVirtualFileByUri(document.uri);
22
- if (!(vueFile instanceof language_core_1.VueFile))
23
- return;
24
- let templateFormatScript;
25
- embedded.forEachEmbeddedFile(vueFile, embedded => {
26
- if (embedded.fileName.endsWith('.template_format.ts')) {
27
- templateFormatScript = embedded;
28
- }
29
- });
30
- if (!templateFormatScript)
19
+ const [virtualFile] = context.documents.getVirtualFileByUri(document.uri);
20
+ if (!virtualFile?.fileName.endsWith('.template_format.ts'))
31
21
  return;
32
22
  const offset = document.offsetAt(position);
33
- for (const mappedRange of templateFormatScript.mappings) {
34
- if (mappedRange.sourceRange[1] === offset) {
35
- const text = document.getText().substring(mappedRange.sourceRange[0], mappedRange.sourceRange[1]);
36
- const ast = ts.createSourceFile(templateFormatScript.fileName, text, ts.ScriptTarget.Latest);
23
+ for (const mappedRange of virtualFile.mappings) {
24
+ if (mappedRange.generatedRange[1] === offset) {
25
+ const text = document.getText().substring(mappedRange.generatedRange[0], mappedRange.generatedRange[1]);
26
+ const ast = ts.createSourceFile(virtualFile.fileName, text, ts.ScriptTarget.Latest);
37
27
  if (ast.statements.length === 1) {
38
28
  const statement = ast.statements[0];
39
29
  if (ts.isExpressionStatement(statement)
@@ -53,8 +43,8 @@ const plugin = (context, modules) => {
53
43
  .replaceAll('}', '\\}');
54
44
  return {
55
45
  range: {
56
- start: document.positionAt(mappedRange.sourceRange[1]),
57
- end: document.positionAt(mappedRange.sourceRange[1]),
46
+ start: document.positionAt(mappedRange.generatedRange[0]),
47
+ end: document.positionAt(mappedRange.generatedRange[1]),
58
48
  },
59
49
  newText: '(' + escapedText + '$0' + ')',
60
50
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vue/language-service",
3
- "version": "1.8.1",
3
+ "version": "1.8.2",
4
4
  "main": "out/index.js",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -17,11 +17,11 @@
17
17
  "update-html-data": "node ./scripts/update-html-data.js"
18
18
  },
19
19
  "dependencies": {
20
- "@volar/language-core": "1.7.8",
21
- "@volar/language-service": "1.7.8",
22
- "@volar/typescript": "1.7.8",
20
+ "@volar/language-core": "1.7.9",
21
+ "@volar/language-service": "1.7.9",
22
+ "@volar/typescript": "1.7.9",
23
23
  "@vue/compiler-dom": "^3.3.0",
24
- "@vue/language-core": "1.8.1",
24
+ "@vue/language-core": "1.8.2",
25
25
  "@vue/reactivity": "^3.3.0",
26
26
  "@vue/shared": "^3.3.0",
27
27
  "volar-service-css": "0.0.8",
@@ -36,9 +36,9 @@
36
36
  "vscode-languageserver-textdocument": "^1.0.8"
37
37
  },
38
38
  "devDependencies": {
39
- "@volar/kit": "1.7.8",
39
+ "@volar/kit": "1.7.9",
40
40
  "vscode-languageserver-protocol": "^3.17.3",
41
41
  "vscode-uri": "^3.0.7"
42
42
  },
43
- "gitHead": "3e31c6eb412a9e8145188190472f59c8b43aa9e6"
43
+ "gitHead": "de0fb3f1be30b495d17e2999aee24fb9ea3e7e0e"
44
44
  }