docs: sync v11

Author: kazupon

docs/api/v11/component.md

@@ -1,2 +1,279 @@
 # Components
 
+## BaseFormatProps
+
+BaseFormat Props for Components that is offered Vue I18n
+
+**Signature:**
+```typescript
+export interface BaseFormatProps
+```
+
+**Details**
+
+The interface definitions of the underlying props of components such as Translation, DatetimeFormat, and NumberFormat.
+
+### i18n
+
+**Signature:**
+```typescript
+i18n?: Composer;
+```
+
+**Details**
+
+A composer instance with an existing scope.
+
+This option takes precedence over the `scope` option.
+
+### locale
+
+**Signature:**
+```typescript
+locale?: Locale;
+```
+
+**Details**
+
+Specifies the locale to be used for the component.
+
+If specified, the global scope or the locale of the parent scope of the target component will not be overridden and the specified locale will be used.
+
+### scope
+
+**Signature:**
+```typescript
+scope?: ComponentI18nScope;
+```
+
+**Details**
+
+Specifies the scope to be used in the target component.
+
+You can specify either `global` or `parent`.
+
+If `global` is specified, global scope is used, else then `parent` is specified, the scope of the parent of the target component is used.
+
+If the parent is a global scope, the global scope is used, if it's a local scope, the local scope is used.
+
+### tag
+
+**Signature:**
+```typescript
+tag?: string | object;
+```
+
+**Details**
+
+Used to wrap the content that is distribute in the slot. If omitted, the slot content is treated as Fragments.
+
+You can specify a string-based tag name, such as `p`, or the object for which the component is defined.
+
+## DatetimeFormat
+
+Datetime Format Component
+
+**Signature:**
+```typescript
+DatetimeFormat: {
+    new (): {
+        $props: VNodeProps & DatetimeFormatProps & BaseFormatProps;
+    };
+}
+```
+
+**Details**
+
+See the following items for property about details
+
+:::danger
+Not supported IE, due to no support `Intl.DateTimeFormat#formatToParts` in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts)
+
+If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-datetimeformat)
+:::
+
+**See Also**
+- [FormattableProps](component#formattableprops)
+- [BaseFormatProps](component#baseformatprops)
+- [Custom Formatting](../../guide/essentials/datetime#custom-formatting)
+
+## DatetimeFormatProps
+
+DatetimeFormat Component Props
+
+**Signature:**
+```typescript
+export type DatetimeFormatProps = FormattableProps<number | Date, Intl.DateTimeFormatOptions>;
+```
+
+## FormattableProps
+
+Formattable Props
+
+**Signature:**
+```typescript
+export interface FormattableProps<Value, Format> extends BaseFormatProps
+```
+
+**Details**
+
+The props used in DatetimeFormat, or NumberFormat component
+
+### format
+
+**Signature:**
+```typescript
+format?: string | Format;
+```
+
+**Details**
+
+The format to use in the target component.
+
+Specify the format key string or the format as defined by the Intl API in ECMA 402.
+
+### value
+
+**Signature:**
+```typescript
+value: Value;
+```
+
+**Details**
+
+The value specified for the target component
+
+## NumberFormat
+
+Number Format Component
+
+**Signature:**
+```typescript
+NumberFormat: {
+    new (): {
+        $props: VNodeProps & NumberFormatProps & BaseFormatProps;
+    };
+}
+```
+
+**Details**
+
+See the following items for property about details
+
+:::danger
+Not supported IE, due to no support `Intl.NumberFormat#formatToParts` in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts)
+
+If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-numberformat)
+:::
+
+**See Also**
+- [FormattableProps](component#formattableprops)
+- [BaseFormatProps](component#baseformatprops)
+- [Custom Formatting](../../guide/essentials/number#custom-formatting)
+
+## NumberFormatProps
+
+NumberFormat Component Props
+
+**Signature:**
+```typescript
+export type NumberFormatProps = FormattableProps<number, Intl.NumberFormatOptions>;
+```
+
+## Translation
+
+Translation Component
+
+**Signature:**
+```typescript
+Translation: {
+    new (): {
+        $props: VNodeProps & TranslationProps;
+    };
+}
+```
+
+**Details**
+
+See the following items for property about details
+
+**See Also**
+- [TranslationProps](component#translationprops)
+- [BaseFormatProps](component#baseformatprops)
+- [Component Interpolation](../../guide/advanced/component)
+
+**Examples**
+
+
+```html
+<div id="app">
+  <!-- ... -->
+  <i18n keypath="term" tag="label" for="tos">
+    <a :href="url" target="_blank">{{ $t('tos') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+```
+
+
+```js
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+const messages = {
+  en: {
+    tos: 'Term of Service',
+    term: 'I accept xxx {0}.'
+  },
+  ja: {
+    tos: '利用規約',
+    term: '私は xxx の{0}に同意します。'
+  }
+}
+
+const i18n = createI18n({
+  locale: 'en',
+  messages
+})
+
+const app = createApp({
+  data: {
+    url: '/term'
+  }
+}).use(i18n).mount('#app')
+```
+
+
+
+
+## TranslationProps
+
+Translation Component Props
+
+**Signature:**
+```typescript
+export interface TranslationProps extends BaseFormatProps
+```
+
+### keypath
+
+**Signature:**
+```typescript
+keypath: string;
+```
+
+**Details**
+
+The locale message key can be specified prop
+
+### plural
+
+**Signature:**
+```typescript
+plural?: number | string;
+```
+
+**Details**
+
+The Plural Choosing the message number prop
+

docs/api/v11/directive.md

@@ -1,2 +1,52 @@
 # Directives
 
+## TranslationDirective
+
+Translation Directive (`v-t`)
+
+**Signature:**
+```typescript
+export type TranslationDirective<T = HTMLElement> = ObjectDirective<T>;
+```
+
+:::danger DEPRECATED
+will be removed at vue-i18n v12
+:::
+
+**Details**
+
+Update the element `textContent` that localized with locale messages.
+
+You can use string syntax or object syntax.
+
+String syntax can be specified as a keypath of locale messages.
+
+If you can be used object syntax, you need to specify as the object key the following params
+```
+- path: required, key of locale messages
+- locale: optional, locale
+- args: optional, for list or named formatting
+```
+
+
+
+**Examples**
+
+
+```html
+<!-- string syntax: literal -->
+<p v-t="'foo.bar'"></p>
+
+<!-- string syntax: binding via data or computed props -->
+<p v-t="msg"></p>
+
+<!-- object syntax: literal -->
+<p v-t="{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }"></p>
+
+<!-- object syntax: binding via data or computed props -->
+<p v-t="{ path: greeting, args: { name: fullName } }"></p>
+```
+
+
+
+