@vue/language-service 1.8.7 → 1.8.10

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.
Files changed (55) hide show
  1. package/data/language-blocks/en.json +68 -0
  2. package/data/language-blocks/fr.json +68 -0
  3. package/data/language-blocks/ja.json +68 -0
  4. package/data/language-blocks/ko.json +68 -0
  5. package/data/language-blocks/pt.json +694 -0
  6. package/data/language-blocks/zh-cn.json +68 -0
  7. package/data/model-modifiers/en.json +12 -0
  8. package/data/model-modifiers/fr.json +12 -0
  9. package/data/model-modifiers/ja.json +12 -0
  10. package/data/model-modifiers/ko.json +12 -0
  11. package/data/model-modifiers/pt.json +116 -0
  12. package/data/model-modifiers/zh-cn.json +12 -0
  13. package/data/template/en.json +104 -0
  14. package/data/template/fr.json +104 -0
  15. package/data/template/ja.json +104 -0
  16. package/data/template/ko.json +104 -0
  17. package/data/template/pt.json +978 -0
  18. package/data/template/zh-cn.json +105 -1
  19. package/out/helpers.d.ts +1 -0
  20. package/out/helpers.js +28 -5
  21. package/out/ideFeatures/nameCasing.d.ts +7 -6
  22. package/out/ideFeatures/nameCasing.js +15 -16
  23. package/out/index.d.ts +1 -0
  24. package/out/languageService.d.ts +5 -4
  25. package/out/languageService.js +72 -47
  26. package/out/plugins/data.d.ts +1 -0
  27. package/out/plugins/data.js +9 -0
  28. package/out/plugins/vue-autoinsert-dotvalue.d.ts +2 -2
  29. package/out/plugins/vue-autoinsert-dotvalue.js +5 -4
  30. package/out/plugins/vue-autoinsert-parentheses.d.ts +2 -2
  31. package/out/plugins/vue-autoinsert-parentheses.js +3 -1
  32. package/out/plugins/vue-autoinsert-space.d.ts +2 -2
  33. package/out/plugins/vue-autoinsert-space.js +3 -1
  34. package/out/plugins/vue-codelens-references.d.ts +2 -1
  35. package/out/plugins/vue-codelens-references.js +4 -3
  36. package/out/plugins/vue-directive-comments.d.ts +2 -2
  37. package/out/plugins/vue-directive-comments.js +3 -1
  38. package/out/plugins/vue-extract-file.d.ts +2 -1
  39. package/out/plugins/vue-extract-file.js +4 -4
  40. package/out/plugins/vue-template.d.ts +2 -2
  41. package/out/plugins/vue-template.js +53 -28
  42. package/out/plugins/vue-toggle-v-bind-codeaction.d.ts +2 -1
  43. package/out/plugins/vue-toggle-v-bind-codeaction.js +6 -5
  44. package/out/plugins/vue-twoslash-queries.d.ts +2 -2
  45. package/out/plugins/vue-twoslash-queries.js +27 -2
  46. package/out/plugins/vue-visualize-hidden-callback-param.d.ts +2 -2
  47. package/out/plugins/vue-visualize-hidden-callback-param.js +3 -1
  48. package/out/plugins/vue.d.ts +2 -2
  49. package/out/plugins/vue.js +32 -4
  50. package/out/types.d.ts +1 -0
  51. package/package.json +11 -11
  52. package/out/plugins/vue-.d.ts +0 -7
  53. package/out/plugins/vue-.js +0 -159
  54. package/out/plugins/vue-autoinsert-dotvalue copy.d.ts +0 -7
  55. package/out/plugins/vue-autoinsert-dotvalue copy.js +0 -159
@@ -0,0 +1,694 @@
1
+ {
2
+ "version": 1.1,
3
+ "tags": [
4
+ {
5
+ "name": "template",
6
+ "attributes": [
7
+ {
8
+ "name": "src",
9
+ "description": {
10
+ "kind": "markdown",
11
+ "value": "\nSe você prefere dividir seu componente `*.vue` em multiplos arquivos, você pode usar o atributo `src` para importar um arquivo externo para o bloco de linguagem:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nEsteja ciente de que as importações `src` seguem as mesmas regras de resolução de caminho que as solicitações do módulo webpack, o que significa:\n\n- Caminhos relativos precisam começar com `./`\n- Você pode importar recursos de dependências do npm:\n\n```vue\n<!-- importa um arquivo do pacote de npm \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nAs importações com `src` também funcionam com blocos personalizados, por exemplo:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n"
12
+ },
13
+ "references": [
14
+ {
15
+ "name": "en",
16
+ "url": "https://vuejs.org/api/sfc-spec.html#src-imports"
17
+ },
18
+ {
19
+ "name": "zh-cn",
20
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
21
+ },
22
+ {
23
+ "name": "ja",
24
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
25
+ },
26
+ {
27
+ "name": "ua",
28
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
29
+ },
30
+ {
31
+ "name": "fr",
32
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
33
+ },
34
+ {
35
+ "name": "ko",
36
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
37
+ },
38
+ {
39
+ "name": "pt",
40
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
41
+ }
42
+ ]
43
+ },
44
+ {
45
+ "name": "lang",
46
+ "description": {
47
+ "kind": "markdown",
48
+ "value": "\nBlocos pode declarar linguagens de pré-processadores usando o atributo `lang`. A caso mais comum é usando TypeScript para o bloco `<script>`:\n```html\n<script lang=\"ts\">\n // usa TypeScript\n</script>\n```\n\n`lang` pode ser aplicado a qualquer bloco - por exemplo, nós podemos usar `<style>` com [Sass](https://sass-lang.com/) e `<template>` com [Pug](https://pugjs.org/api/getting-started.html):\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\nNote que a integração com vários pré-processadores pode diferir por conjunto de ferramentas. Confira a respectiva documentação para exemplos:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)\n"
49
+ },
50
+ "values": [
51
+ {
52
+ "name": "html"
53
+ },
54
+ {
55
+ "name": "pug"
56
+ }
57
+ ],
58
+ "references": [
59
+ {
60
+ "name": "en",
61
+ "url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
62
+ },
63
+ {
64
+ "name": "zh-cn",
65
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
66
+ },
67
+ {
68
+ "name": "ja",
69
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
70
+ },
71
+ {
72
+ "name": "ua",
73
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
74
+ },
75
+ {
76
+ "name": "fr",
77
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
78
+ },
79
+ {
80
+ "name": "ko",
81
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
82
+ },
83
+ {
84
+ "name": "pt",
85
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
86
+ }
87
+ ]
88
+ }
89
+ ],
90
+ "description": {
91
+ "kind": "markdown",
92
+ "value": "\n- Cada arquivo `*.vue` pode conter no máximo um bloco `<template>` de alto nível por vez.\n\n- O conteúdo será extraído e passado para `@vue/compiler-dom`, pré-compilado em funções de renderização JavaScript e anexado ao componente exportado como sua opção `render`.\n"
93
+ },
94
+ "references": [
95
+ {
96
+ "name": "en",
97
+ "url": "https://vuejs.org/api/sfc-spec.html#template"
98
+ },
99
+ {
100
+ "name": "zh-cn",
101
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#template"
102
+ },
103
+ {
104
+ "name": "ja",
105
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#template"
106
+ },
107
+ {
108
+ "name": "ua",
109
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#template"
110
+ },
111
+ {
112
+ "name": "fr",
113
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#template"
114
+ },
115
+ {
116
+ "name": "ko",
117
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#template"
118
+ },
119
+ {
120
+ "name": "pt",
121
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#template"
122
+ }
123
+ ]
124
+ },
125
+ {
126
+ "name": "script",
127
+ "attributes": [
128
+ {
129
+ "name": "src",
130
+ "description": {
131
+ "kind": "markdown",
132
+ "value": "\nSe você prefere dividir seu componente `*.vue` em multiplos arquivos, você pode usar o atributo `src` para importar um arquivo externo para o bloco de linguagem:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nEsteja ciente de que as importações `src` seguem as mesmas regras de resolução de caminho que as solicitações do módulo webpack, o que significa:\n\n- Caminhos relativos precisam começar com `./`\n- Você pode importar recursos de dependências do npm:\n\n```vue\n<!-- importa um arquivo do pacote de npm \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nAs importações com `src` também funcionam com blocos personalizados, por exemplo:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n"
133
+ },
134
+ "references": [
135
+ {
136
+ "name": "en",
137
+ "url": "https://vuejs.org/api/sfc-spec.html#src-imports"
138
+ },
139
+ {
140
+ "name": "zh-cn",
141
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
142
+ },
143
+ {
144
+ "name": "ja",
145
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
146
+ },
147
+ {
148
+ "name": "ua",
149
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
150
+ },
151
+ {
152
+ "name": "fr",
153
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
154
+ },
155
+ {
156
+ "name": "ko",
157
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
158
+ },
159
+ {
160
+ "name": "pt",
161
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
162
+ }
163
+ ]
164
+ },
165
+ {
166
+ "name": "lang",
167
+ "description": {
168
+ "kind": "markdown",
169
+ "value": "\nBlocos pode declarar linguagens de pré-processadores usando o atributo `lang`. A caso mais comum é usando TypeScript para o bloco `<script>`:\n```html\n<script lang=\"ts\">\n // usa TypeScript\n</script>\n```\n\n`lang` pode ser aplicado a qualquer bloco - por exemplo, nós podemos usar `<style>` com [Sass](https://sass-lang.com/) e `<template>` com [Pug](https://pugjs.org/api/getting-started.html):\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\nNote que a integração com vários pré-processadores pode diferir por conjunto de ferramentas. Confira a respectiva documentação para exemplos:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)\n"
170
+ },
171
+ "values": [
172
+ {
173
+ "name": "ts"
174
+ },
175
+ {
176
+ "name": "js"
177
+ },
178
+ {
179
+ "name": "tsx"
180
+ },
181
+ {
182
+ "name": "jsx"
183
+ }
184
+ ],
185
+ "references": [
186
+ {
187
+ "name": "en",
188
+ "url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
189
+ },
190
+ {
191
+ "name": "zh-cn",
192
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
193
+ },
194
+ {
195
+ "name": "ja",
196
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
197
+ },
198
+ {
199
+ "name": "ua",
200
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
201
+ },
202
+ {
203
+ "name": "fr",
204
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
205
+ },
206
+ {
207
+ "name": "ko",
208
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
209
+ },
210
+ {
211
+ "name": "pt",
212
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
213
+ }
214
+ ]
215
+ },
216
+ {
217
+ "name": "generic"
218
+ },
219
+ {
220
+ "name": "setup",
221
+ "valueSet": "v",
222
+ "description": {
223
+ "kind": "markdown",
224
+ "value": "\n- Cada arquivo `*.vue` pode conter no máximo um bloco `<script setup>` de alto nível por vez (excluíndo `<script>` normal).\n\n- O script é pré-processado e usado como a função `setup()` do componente, o que significa que será executado **para cada instância do componente**. Ligações de nível superior em `<script setup>` são automaticamente expostas ao template. Para obter mais detalhes, consulte [documentação dedicada a `<script setup>`](https://pt.vuejs.org/api/sfc-script-setup.html).\n"
225
+ },
226
+ "references": [
227
+ {
228
+ "name": "en",
229
+ "url": "https://vuejs.org/api/sfc-spec.html#script-setup"
230
+ },
231
+ {
232
+ "name": "zh-cn",
233
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#script-setup"
234
+ },
235
+ {
236
+ "name": "ja",
237
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#script-setup"
238
+ },
239
+ {
240
+ "name": "ua",
241
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#script-setup"
242
+ },
243
+ {
244
+ "name": "fr",
245
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#script-setup"
246
+ },
247
+ {
248
+ "name": "ko",
249
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#script-setup"
250
+ },
251
+ {
252
+ "name": "pt",
253
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#script-setup"
254
+ }
255
+ ]
256
+ }
257
+ ],
258
+ "description": {
259
+ "kind": "markdown",
260
+ "value": "\n- Cada arquivo `*.vue` pode conter no máximo um bloco `<script>` de alto nível por vez (excluíndo [`<script setup>`](https://pt.vuejs.org/api/sfc-script-setup.html)).\n\n- O escript é executado como um módulo ES.\n\n- A **exportação padrão** `default export` deve ser um objeto de opções do componente Vue, seja como um objeto simples ou como o valor de retorno de [defineComponent](https://pt.vuejs.org/api/general.html#definecomponent)\n"
261
+ },
262
+ "references": [
263
+ {
264
+ "name": "en",
265
+ "url": "https://vuejs.org/api/sfc-spec.html#script"
266
+ },
267
+ {
268
+ "name": "zh-cn",
269
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#script"
270
+ },
271
+ {
272
+ "name": "ja",
273
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#script"
274
+ },
275
+ {
276
+ "name": "ua",
277
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#script"
278
+ },
279
+ {
280
+ "name": "fr",
281
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#script"
282
+ },
283
+ {
284
+ "name": "ko",
285
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#script"
286
+ },
287
+ {
288
+ "name": "pt",
289
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#script"
290
+ }
291
+ ]
292
+ },
293
+ {
294
+ "name": "script setup",
295
+ "attributes": [],
296
+ "description": {
297
+ "kind": "markdown",
298
+ "value": "\n- Cada arquivo `*.vue` pode conter no máximo um bloco `<script setup>` de alto nível por vez (excluíndo `<script>` normal).\n\n- O script é pré-processado e usado como a função `setup()` do componente, o que significa que será executado **para cada instância do componente**. Ligações de nível superior em `<script setup>` são automaticamente expostas ao template. Para obter mais detalhes, consulte [documentação dedicada a `<script setup>`](https://pt.vuejs.org/api/sfc-script-setup.html).\n"
299
+ },
300
+ "references": [
301
+ {
302
+ "name": "en",
303
+ "url": "https://vuejs.org/api/sfc-spec.html#script-setup"
304
+ },
305
+ {
306
+ "name": "zh-cn",
307
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#script-setup"
308
+ },
309
+ {
310
+ "name": "ja",
311
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#script-setup"
312
+ },
313
+ {
314
+ "name": "ua",
315
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#script-setup"
316
+ },
317
+ {
318
+ "name": "fr",
319
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#script-setup"
320
+ },
321
+ {
322
+ "name": "ko",
323
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#script-setup"
324
+ },
325
+ {
326
+ "name": "pt",
327
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#script-setup"
328
+ }
329
+ ]
330
+ },
331
+ {
332
+ "name": "style",
333
+ "attributes": [
334
+ {
335
+ "name": "src",
336
+ "description": {
337
+ "kind": "markdown",
338
+ "value": "\nSe você prefere dividir seu componente `*.vue` em multiplos arquivos, você pode usar o atributo `src` para importar um arquivo externo para o bloco de linguagem:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nEsteja ciente de que as importações `src` seguem as mesmas regras de resolução de caminho que as solicitações do módulo webpack, o que significa:\n\n- Caminhos relativos precisam começar com `./`\n- Você pode importar recursos de dependências do npm:\n\n```vue\n<!-- importa um arquivo do pacote de npm \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nAs importações com `src` também funcionam com blocos personalizados, por exemplo:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n"
339
+ },
340
+ "references": [
341
+ {
342
+ "name": "en",
343
+ "url": "https://vuejs.org/api/sfc-spec.html#src-imports"
344
+ },
345
+ {
346
+ "name": "zh-cn",
347
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
348
+ },
349
+ {
350
+ "name": "ja",
351
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
352
+ },
353
+ {
354
+ "name": "ua",
355
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
356
+ },
357
+ {
358
+ "name": "fr",
359
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
360
+ },
361
+ {
362
+ "name": "ko",
363
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
364
+ },
365
+ {
366
+ "name": "pt",
367
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
368
+ }
369
+ ]
370
+ },
371
+ {
372
+ "name": "lang",
373
+ "description": {
374
+ "kind": "markdown",
375
+ "value": "\nBlocos pode declarar linguagens de pré-processadores usando o atributo `lang`. A caso mais comum é usando TypeScript para o bloco `<script>`:\n```html\n<script lang=\"ts\">\n // usa TypeScript\n</script>\n```\n\n`lang` pode ser aplicado a qualquer bloco - por exemplo, nós podemos usar `<style>` com [Sass](https://sass-lang.com/) e `<template>` com [Pug](https://pugjs.org/api/getting-started.html):\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\nNote que a integração com vários pré-processadores pode diferir por conjunto de ferramentas. Confira a respectiva documentação para exemplos:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)\n"
376
+ },
377
+ "values": [
378
+ {
379
+ "name": "css"
380
+ },
381
+ {
382
+ "name": "scss"
383
+ },
384
+ {
385
+ "name": "less"
386
+ },
387
+ {
388
+ "name": "stylus"
389
+ },
390
+ {
391
+ "name": "postcss"
392
+ },
393
+ {
394
+ "name": "sass"
395
+ }
396
+ ],
397
+ "references": [
398
+ {
399
+ "name": "en",
400
+ "url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
401
+ },
402
+ {
403
+ "name": "zh-cn",
404
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
405
+ },
406
+ {
407
+ "name": "ja",
408
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
409
+ },
410
+ {
411
+ "name": "ua",
412
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
413
+ },
414
+ {
415
+ "name": "fr",
416
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
417
+ },
418
+ {
419
+ "name": "ko",
420
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
421
+ },
422
+ {
423
+ "name": "pt",
424
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
425
+ }
426
+ ]
427
+ },
428
+ {
429
+ "name": "scoped",
430
+ "valueSet": "v",
431
+ "description": {
432
+ "kind": "markdown",
433
+ "value": "\nQuando uma tag `<style>` tem o atributo `scoped`, seu CSS se aplica apenas aos elementos do componente atual. Isso é semelhante ao encapsulamento de estilo encontrado no Shadow DOM. Por mais que tenha algumas ressalvas, não requer nenhum polyfill. É alcançado usando o PostCSS para transformar o seguinte código:\n\n```vue\n<style scoped>\n.example {\n color: red;\n}\n</style>\n\n<template>\n <div class=\"example\">olá</div>\n</template>\n```\n\nNesse outro código:\n\n```vue\n<style>\n.example[data-v-f3f3eg9] {\n color: red;\n}\n</style>\n\n<template>\n <div class=\"example\" data-v-f3f3eg9>olá</div>\n</template>\n```\n\n### Elementos raiz de componentes filhos \n\nCom `scoped`, os estilos do componente pai não vazam para os componentes filhos. No entanto, o nó raiz de um componente filho será afetado pelo CSS do componente pai e pelo CSS do componente filho. Isso é feito de propósito para que o pai possa estilizar o elemento raiz do filho para fins de layout.\n\n### Seletores profundos \n\nSe você deseja que um seletor em estilos `scoped` seja \"profundo\", ou seja, afetando componentes filhos, você pode usar a pseudo-classe `:deep()`:\n\n```vue\n<style scoped>\n.a :deep(.b) {\n /* ... */\n}\n</style>\n```\n\nO código acima será compilado para:\n\n```css\n.a[data-v-f3f3eg9] .b {\n /* ... */\n}\n```\n\n:::tip\nOs nós DOM criados com `v-html` não são afetados pelos estilos delimitados, mas você ainda pode estilizá-los usando seletores profundos.\n:::\n\n### Seletores de slot \n\nPor padrão, os estilos delimitados não afetam o conteúdo renderizado por `<slot/>`, pois eles são considerados de propriedade do componente pai que os passa. Para estilizar explicitamente o conteúdo do slot, use a pseudo-classe `:slotted`:\n\n```vue\n<style scoped>\n:slotted(div) {\n color: red;\n}\n</style>\n```\n\n### Seletores globais \n\nSe você deseja que um seletor aplique-se globalmente, mas ainda esteja em um bloco de estilo `scoped`, você pode usar a pseudo-classe `:global` em vez de criar outro `<style>` (veja abaixo):\n\n```vue\n<style scoped>\n:global(.red) {\n color: red;\n}\n</style>\n```\n\n### Misturando estilos locais e globais \n\nVocê também pode incluir estilos com e sem escopo no mesmo componente:\n\n```vue\n<style>\n/* estilos globais */\n</style>\n\n<style scoped>\n/* estilos locais */\n</style>\n```\n\n### Dicas de estilo delimitado \n\n- **Estilos delimitados não eliminam a necessidade de classes**. Devido a forma que os navegadores renderizam vários seletores CSS, `p { color: red }` será muito mais lento quando delimitado (isto é, quando combinado com um seletor de atributo). Se você usar classes ou ids, como em `.example { color: red }`, então você virtualmente elimina esse impacto de desempenho.\n\n- **Tenha cuidado com seletores descendentes em componentes recursivos!** Para uma regra CSS com o seletor `.a .b`, se o elemento que corresponde a `.a` contém um componente filho recursivo, então todos os `.b` nesse componente filho serão correspondidos pela regra.\n"
434
+ },
435
+ "references": [
436
+ {
437
+ "name": "en",
438
+ "url": "https://vuejs.org/api/sfc-css-features.html#scoped-css"
439
+ },
440
+ {
441
+ "name": "zh-cn",
442
+ "url": "https://cn.vuejs.org/api/sfc-css-features.html#scoped-css"
443
+ },
444
+ {
445
+ "name": "ja",
446
+ "url": "https://ja.vuejs.org/api/sfc-css-features.html#scoped-css"
447
+ },
448
+ {
449
+ "name": "ua",
450
+ "url": "https://ua.vuejs.org/api/sfc-css-features.html#scoped-css"
451
+ },
452
+ {
453
+ "name": "fr",
454
+ "url": "https://fr.vuejs.org/api/sfc-css-features.html#scoped-css"
455
+ },
456
+ {
457
+ "name": "ko",
458
+ "url": "https://ko.vuejs.org/api/sfc-css-features.html#scoped-css"
459
+ },
460
+ {
461
+ "name": "pt",
462
+ "url": "https://pt.vuejs.org/api/sfc-css-features.html#scoped-css"
463
+ }
464
+ ]
465
+ },
466
+ {
467
+ "name": "module",
468
+ "valueSet": "v",
469
+ "description": {
470
+ "kind": "markdown",
471
+ "value": "\nUma tag `<style module>` é compilada como um [Módulo CSS](https://github.com/css-modules/css-modules) e expõe as classes CSS resultantes para o componente como um objeto sob a chave `$style`:\n\n```vue\n<template>\n <p :class=\"$style.red\">Isto deveria ser vermelho</p>\n</template>\n\n<style module>\n.red {\n color: red;\n}\n</style>\n```\n\nAs classes resultantes tem um hash aplicado para evitar colisões, alcançando o mesmo efeito de delimitar o CSS apenas ao componente atual.\n\nRecorra à [Especificação de Módulos CSS](https://github.com/css-modules/css-modules) para mais detalhes como [exceções globais](https://github.com/css-modules/css-modules#exceptions) e [composição](https://github.com/css-modules/css-modules#composition).\n\n### Nome de injeção personalizado \n\nVocê pode personalizar a propriedade chave do objeto de classes injetadas dando ao atributo `module` um valor:\n\n```vue\n<template>\n <p :class=\"classes.red\">vermelho</p>\n</template>\n\n<style module=\"classes\">\n.red {\n color: red;\n}\n</style>\n```\n\n### Uso com API de Composição \n\nAs classes injetadas podem ser acessadas em `setup()` e `<script setup>` por meio da API `useCssModule`. Para blocos `<style module>` com nomes de injeção personalizados, `useCssModule` aceita o valor do atributo `module` correspondente como primeiro argumento:\n\n```js\nimport { useCssModule } from 'vue'\n\n// dentro do escopo de setup()...\n// padrão, retorna as classes da tag <style module>\nuseCssModule()\n\n// personalizado, retorna as classes da tag <style module=\"classes\">\nuseCssModule('classes')\n```\n"
472
+ },
473
+ "references": [
474
+ {
475
+ "name": "en",
476
+ "url": "https://vuejs.org/api/sfc-css-features.html#css-modules"
477
+ },
478
+ {
479
+ "name": "zh-cn",
480
+ "url": "https://cn.vuejs.org/api/sfc-css-features.html#css-modules"
481
+ },
482
+ {
483
+ "name": "ja",
484
+ "url": "https://ja.vuejs.org/api/sfc-css-features.html#css-modules"
485
+ },
486
+ {
487
+ "name": "ua",
488
+ "url": "https://ua.vuejs.org/api/sfc-css-features.html#css-modules"
489
+ },
490
+ {
491
+ "name": "fr",
492
+ "url": "https://fr.vuejs.org/api/sfc-css-features.html#css-modules"
493
+ },
494
+ {
495
+ "name": "ko",
496
+ "url": "https://ko.vuejs.org/api/sfc-css-features.html#css-modules"
497
+ },
498
+ {
499
+ "name": "pt",
500
+ "url": "https://pt.vuejs.org/api/sfc-css-features.html#css-modules"
501
+ }
502
+ ]
503
+ }
504
+ ],
505
+ "description": {
506
+ "kind": "markdown",
507
+ "value": "\n- Um único arquivo `*.vue` pode conter multiplas tags `<style>`.\n\n- Uma tag `<style>` pode ter atributos `scoped` ou `module` (consulte [Recursos de estilo SFC](https://pt.vuejs.org/api/sfc-css-features.html) para obter mais detalhes) para ajudar a encapsular os estilos no componente atual. Múltiplas tags `<style>` com diferentes modos de encapsulamento podem ser misturados no mesmo componente.\n"
508
+ },
509
+ "references": [
510
+ {
511
+ "name": "en",
512
+ "url": "https://vuejs.org/api/sfc-spec.html#style"
513
+ },
514
+ {
515
+ "name": "zh-cn",
516
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#style"
517
+ },
518
+ {
519
+ "name": "ja",
520
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#style"
521
+ },
522
+ {
523
+ "name": "ua",
524
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#style"
525
+ },
526
+ {
527
+ "name": "fr",
528
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#style"
529
+ },
530
+ {
531
+ "name": "ko",
532
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#style"
533
+ },
534
+ {
535
+ "name": "pt",
536
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#style"
537
+ }
538
+ ]
539
+ },
540
+ {
541
+ "name": "Blocos Customizados",
542
+ "attributes": [
543
+ {
544
+ "name": "src",
545
+ "description": {
546
+ "kind": "markdown",
547
+ "value": "\nSe você prefere dividir seu componente `*.vue` em multiplos arquivos, você pode usar o atributo `src` para importar um arquivo externo para o bloco de linguagem:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nEsteja ciente de que as importações `src` seguem as mesmas regras de resolução de caminho que as solicitações do módulo webpack, o que significa:\n\n- Caminhos relativos precisam começar com `./`\n- Você pode importar recursos de dependências do npm:\n\n```vue\n<!-- importa um arquivo do pacote de npm \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nAs importações com `src` também funcionam com blocos personalizados, por exemplo:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n"
548
+ },
549
+ "references": [
550
+ {
551
+ "name": "en",
552
+ "url": "https://vuejs.org/api/sfc-spec.html#src-imports"
553
+ },
554
+ {
555
+ "name": "zh-cn",
556
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
557
+ },
558
+ {
559
+ "name": "ja",
560
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
561
+ },
562
+ {
563
+ "name": "ua",
564
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
565
+ },
566
+ {
567
+ "name": "fr",
568
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
569
+ },
570
+ {
571
+ "name": "ko",
572
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
573
+ },
574
+ {
575
+ "name": "pt",
576
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
577
+ }
578
+ ]
579
+ }
580
+ ],
581
+ "description": {
582
+ "kind": "markdown",
583
+ "value": "\nBlocos customizados adicionas podem ser incluídos em um arquivo `*.vue` para qualquer necessidade específica do projeto, por exemplo um bloco `<docs>`. Alguns exemplos do mundo real de blocos customizados incluem:\n\n- [Gridsome: `<page-query>`](https://gridsome.org/docs/querying-data/)\n- [vite-plugin-vue-gql: `<gql>`](https://github.com/wheatjs/vite-plugin-vue-gql)\n- [vue-i18n: `<i18n>`](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n#i18n-custom-block)\n\nO manuseio de blocos personalizados dependerá de Ferramental - se você deseja criar suas próprias integrações de blocos personalizados, veja a [seção relevante de ferramental](https://pt.vuejs.org/guide/scaling-up/tooling.html#sfc-custom-block-integrations) para obter mais detalhes.\n"
584
+ },
585
+ "references": [
586
+ {
587
+ "name": "en",
588
+ "url": "https://vuejs.org/api/sfc-spec.html#blocos-customizados"
589
+ },
590
+ {
591
+ "name": "zh-cn",
592
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#blocos-customizados"
593
+ },
594
+ {
595
+ "name": "ja",
596
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#blocos-customizados"
597
+ },
598
+ {
599
+ "name": "ua",
600
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#blocos-customizados"
601
+ },
602
+ {
603
+ "name": "fr",
604
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#blocos-customizados"
605
+ },
606
+ {
607
+ "name": "ko",
608
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#blocos-customizados"
609
+ },
610
+ {
611
+ "name": "pt",
612
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#blocos-customizados"
613
+ }
614
+ ]
615
+ }
616
+ ],
617
+ "globalAttributes": [
618
+ {
619
+ "name": "lang",
620
+ "description": {
621
+ "kind": "markdown",
622
+ "value": "\nBlocos pode declarar linguagens de pré-processadores usando o atributo `lang`. A caso mais comum é usando TypeScript para o bloco `<script>`:\n```html\n<script lang=\"ts\">\n // usa TypeScript\n</script>\n```\n\n`lang` pode ser aplicado a qualquer bloco - por exemplo, nós podemos usar `<style>` com [Sass](https://sass-lang.com/) e `<template>` com [Pug](https://pugjs.org/api/getting-started.html):\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\nNote que a integração com vários pré-processadores pode diferir por conjunto de ferramentas. Confira a respectiva documentação para exemplos:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)\n"
623
+ },
624
+ "values": [],
625
+ "references": [
626
+ {
627
+ "name": "en",
628
+ "url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
629
+ },
630
+ {
631
+ "name": "zh-cn",
632
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
633
+ },
634
+ {
635
+ "name": "ja",
636
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
637
+ },
638
+ {
639
+ "name": "ua",
640
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
641
+ },
642
+ {
643
+ "name": "fr",
644
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
645
+ },
646
+ {
647
+ "name": "ko",
648
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
649
+ },
650
+ {
651
+ "name": "pt",
652
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
653
+ }
654
+ ]
655
+ },
656
+ {
657
+ "name": "src",
658
+ "description": {
659
+ "kind": "markdown",
660
+ "value": "\nSe você prefere dividir seu componente `*.vue` em multiplos arquivos, você pode usar o atributo `src` para importar um arquivo externo para o bloco de linguagem:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nEsteja ciente de que as importações `src` seguem as mesmas regras de resolução de caminho que as solicitações do módulo webpack, o que significa:\n\n- Caminhos relativos precisam começar com `./`\n- Você pode importar recursos de dependências do npm:\n\n```vue\n<!-- importa um arquivo do pacote de npm \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nAs importações com `src` também funcionam com blocos personalizados, por exemplo:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n"
661
+ },
662
+ "references": [
663
+ {
664
+ "name": "en",
665
+ "url": "https://vuejs.org/api/sfc-spec.html#src-imports"
666
+ },
667
+ {
668
+ "name": "zh-cn",
669
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
670
+ },
671
+ {
672
+ "name": "ja",
673
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
674
+ },
675
+ {
676
+ "name": "ua",
677
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
678
+ },
679
+ {
680
+ "name": "fr",
681
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
682
+ },
683
+ {
684
+ "name": "ko",
685
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
686
+ },
687
+ {
688
+ "name": "pt",
689
+ "url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
690
+ }
691
+ ]
692
+ }
693
+ ]
694
+ }