nuxt-i18n-micro 3.30.3 → 4.0.0

package/dist/runtime/components/i18n-switcher.vue.d.ts

@@ -1,57 +1,108 @@
-import type { CSSProperties } from 'vue';
-interface Props {
+import type { Locale } from '@i18n-micro/types';
+import type { CSSProperties, PropType, SlotsType } from 'vue';
+/**
+ * A locale switcher: a button showing the current locale and a dropdown of the rest,
+ * each linking to the equivalent route in that locale.
+ *
+ * It ships small inline default styles; each `custom*Style` prop is merged on top of the
+ * matching part, and the slots add markup around it. Locales with `disabled: true` are not listed.
+ * A click on a link is one navigation; with a modifier key it is the browser's (a new tab).
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Display name per locale code, overriding the `displayName` from the locale config. */
+    customLabels: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    /** Inline style for the outer wrapper. */
+    customWrapperStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the button that opens the dropdown. */
+    customButtonStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the dropdown panel. */
+    customDropdownStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for each item in the dropdown. */
+    customItemStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the link inside an item. */
+    customLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the link of the currently active locale. */
+    customActiveLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the *current* locale button when it is `disabled: true` in config. */
+    customDisabledLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the caret icon on the button. */
+    customIconStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+}>, () => unknown, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** Display name per locale code, overriding the `displayName` from the locale config. */
-    customLabels?: Record<string, string>;
+    customLabels: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
     /** Inline style for the outer wrapper. */
-    customWrapperStyle?: CSSProperties;
+    customWrapperStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the button that opens the dropdown. */
-    customButtonStyle?: CSSProperties;
+    customButtonStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the dropdown panel. */
-    customDropdownStyle?: CSSProperties;
+    customDropdownStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for each item in the dropdown. */
-    customItemStyle?: CSSProperties;
+    customItemStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the link inside an item. */
-    customLinkStyle?: CSSProperties;
+    customLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the link of the currently active locale. */
-    customActiveLinkStyle?: CSSProperties;
+    customActiveLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the *current* locale button when it is `disabled: true` in config. */
-    customDisabledLinkStyle?: CSSProperties;
+    customDisabledLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the caret icon on the button. */
-    customIconStyle?: CSSProperties;
-}
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {
-    locale: any;
-}, __VLS_21: {
-    locale: any;
-}, __VLS_23: {
-    locale: any;
-}, __VLS_25: {
-    locale: any;
-}, __VLS_27: {}, __VLS_29: {};
-type __VLS_Slots = {} & {
-    'before-button'?: (props: typeof __VLS_1) => any;
-} & {
-    'before-selected-locale'?: (props: typeof __VLS_3) => any;
-} & {
-    'after-selected-locale'?: (props: typeof __VLS_5) => any;
-} & {
-    'before-dropdown'?: (props: typeof __VLS_7) => any;
-} & {
-    'before-dropdown-items'?: (props: typeof __VLS_9) => any;
-} & {
-    'before-item'?: (props: typeof __VLS_11) => any;
-} & {
-    'before-link-content'?: (props: typeof __VLS_21) => any;
-} & {
-    'after-link-content'?: (props: typeof __VLS_23) => any;
-} & {
-    'after-item'?: (props: typeof __VLS_25) => any;
-} & {
-    'after-dropdown-items'?: (props: typeof __VLS_27) => any;
-} & {
-    'after-dropdown'?: (props: typeof __VLS_29) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    customIconStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
     customLabels: Record<string, string>;
     customWrapperStyle: CSSProperties;
     customButtonStyle: CSSProperties;
@@ -61,12 +112,35 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     customActiveLinkStyle: CSSProperties;
     customDisabledLinkStyle: CSSProperties;
     customIconStyle: CSSProperties;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+}, SlotsType<{
+    /** Content before the button that opens the dropdown. */
+    'before-button': () => unknown;
+    /** Content before the active locale label inside the button. */
+    'before-selected-locale': () => unknown;
+    /** Content after the active locale label inside the button. */
+    'after-selected-locale': () => unknown;
+    /** Content between the button and the dropdown panel. */
+    'before-dropdown': () => unknown;
+    /** Content at the top of the dropdown, above the locale list. */
+    'before-dropdown-items': () => unknown;
+    /** Content before each locale entry. */
+    'before-item': (scope: {
+        locale: Locale;
+    }) => unknown;
+    /** Content before a locale's label inside its link. */
+    'before-link-content': (scope: {
+        locale: Locale;
+    }) => unknown;
+    /** Content after a locale's label inside its link. */
+    'after-link-content': (scope: {
+        locale: Locale;
+    }) => unknown;
+    /** Content after each locale entry. */
+    'after-item': (scope: {
+        locale: Locale;
+    }) => unknown;
+    /** Content at the bottom of the dropdown, below the locale list. */
+    'after-dropdown-items': () => unknown;
+    /** Content after the dropdown panel. */
+    'after-dropdown': () => unknown;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/i18n-t.d.vue.ts

@@ -1,5 +1,6 @@
+import { type I18nTRenderProps } from '@i18n-micro/core/render';
 import type { PluralFunc } from '@i18n-micro/types';
-import type { PropType, VNode } from 'vue';
+import type { FunctionalComponent, PropType } from 'vue';
 /**
  * Renders one translation into an element, with pluralization, interpolation and
  * number/date formatting handled for you.
@@ -8,121 +9,63 @@ import type { PropType, VNode } from 'vue';
  * several are set the first of that list wins — the order the render function checks them.
  *
  * @slot default — receives `{ translation }`, for wrapping the resolved string in markup
- * @slot {name} — any other named slot replaces the `{name}` placeholder inside the translation
+ * @slot {name} — any other named slot replaces every `{name}` placeholder inside the translation
  */
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /** Translation key to render. */
-    keypath: {
-        type: PropType<string>;
-        required: true;
-    };
-    /** Count selecting the plural form. Set it to use `$tc` instead of `$t`. */
-    plural: {
-        type: PropType<number | string>;
-    };
-    /** Element to render. */
-    tag: {
-        type: PropType<string>;
-        default: string;
-    };
-    /** Interpolation values substituted into the translation. */
-    params: {
-        type: PropType<Record<string, string | number | boolean>>;
-        default: () => {};
-    };
-    /** Rendered instead of the component when `hideIfEmpty` suppresses an empty translation. */
-    defaultValue: {
-        type: PropType<string>;
-        default: string;
-    };
-    /** Render the translation as HTML rather than text. Only for content you control. */
-    html: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    /** Render nothing when the translation resolves to an empty string. */
-    hideIfEmpty: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    /** Plural rule for this element only, overriding the configured one. */
-    customPluralRule: {
-        type: PropType<PluralFunc>;
-        default: null;
-    };
-    /** Formats the value with `$tn` and passes it to the translation as `{number}`. */
-    number: {
-        type: PropType<number | string>;
-    };
-    /** Formats the value with `$td` and passes it to the translation as `{date}`. */
-    date: {
-        type: PropType<Date | string | number>;
-    };
-    /** Formats the value with `$tdr` and passes it to the translation as `{relativeDate}`. */
-    relativeDate: {
-        type: PropType<Date | string | number>;
-    };
-}>, () => string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /** Translation key to render. */
-    keypath: {
-        type: PropType<string>;
-        required: true;
-    };
-    /** Count selecting the plural form. Set it to use `$tc` instead of `$t`. */
-    plural: {
-        type: PropType<number | string>;
-    };
-    /** Element to render. */
-    tag: {
-        type: PropType<string>;
-        default: string;
-    };
-    /** Interpolation values substituted into the translation. */
-    params: {
-        type: PropType<Record<string, string | number | boolean>>;
-        default: () => {};
-    };
-    /** Rendered instead of the component when `hideIfEmpty` suppresses an empty translation. */
-    defaultValue: {
-        type: PropType<string>;
-        default: string;
-    };
-    /** Render the translation as HTML rather than text. Only for content you control. */
-    html: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    /** Render nothing when the translation resolves to an empty string. */
-    hideIfEmpty: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    /** Plural rule for this element only, overriding the configured one. */
-    customPluralRule: {
-        type: PropType<PluralFunc>;
-        default: null;
-    };
-    /** Formats the value with `$tn` and passes it to the translation as `{number}`. */
-    number: {
-        type: PropType<number | string>;
-    };
-    /** Formats the value with `$td` and passes it to the translation as `{date}`. */
-    date: {
-        type: PropType<Date | string | number>;
-    };
-    /** Formats the value with `$tdr` and passes it to the translation as `{relativeDate}`. */
-    relativeDate: {
-        type: PropType<Date | string | number>;
-    };
-}>> & Readonly<{}>, {
-    params: Record<string, string | number | boolean>;
-    tag: string;
-    html: boolean;
-    defaultValue: string;
-    hideIfEmpty: boolean;
-    customPluralRule: PluralFunc;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: FunctionalComponent<I18nTRenderProps, {}, any, {}> & {
+    displayName: string;
+    inheritAttrs: boolean;
+    props: {
+        /** Translation key to render. */
+        keypath: {
+            type: PropType<string>;
+            required: boolean;
+        };
+        /** Count selecting the plural form. Set it to use `$tc` instead of `$t`. `null` means unset. */
+        plural: {
+            type: PropType<number | string | null>;
+        };
+        /** Element to render. */
+        tag: {
+            type: PropType<string>;
+            default: string;
+        };
+        /** Interpolation values substituted into the translation. */
+        params: {
+            type: PropType<Record<string, string | number | boolean>>;
+        };
+        /** Rendered instead of the component when `hideIfEmpty` suppresses an empty translation. */
+        defaultValue: {
+            type: PropType<string>;
+            default: string;
+        };
+        /** Render the translation as HTML rather than text. Only for translations you control: `params` are escaped, the translation is not. */
+        html: {
+            type: PropType<boolean>;
+            default: boolean;
+        };
+        /** Render nothing when the translation resolves to an empty string. */
+        hideIfEmpty: {
+            type: PropType<boolean>;
+            default: boolean;
+        };
+        /** Plural rule for this element only, overriding the configured one. Its answer is used as is; `null` renders empty. */
+        customPluralRule: {
+            type: PropType<PluralFunc>;
+            default: null;
+        };
+        /** Formats the value with `$tn` and passes it to the translation as `{number}`, alongside `params`. */
+        number: {
+            type: PropType<number | string | null>;
+        };
+        /** Formats the value with `$td` and passes it to the translation as `{date}`, alongside `params`. */
+        date: {
+            type: PropType<Date | string | number | null>;
+        };
+        /** Formats the value with `$tdr` and passes it to the translation as `{relativeDate}`, alongside `params`. */
+        relativeDate: {
+            type: PropType<Date | string | number | null>;
+        };
+    };
+};

package/dist/runtime/components/i18n-t.vue

@@ -1,8 +1,21 @@
 <script>
-import { defineComponent, h as hyperscript } from "vue";
-import { useNuxtApp, useRoute } from "#imports";
-export default defineComponent({
-  name: "I18nT",
+import { renderI18nT } from "@i18n-micro/core/render";
+import { Fragment, h } from "vue";
+import { useNuxtApp } from "#imports";
+const renderApi = { h, Fragment };
+const hosts = /* @__PURE__ */ new WeakMap();
+function hostOf(injections) {
+  const { $t, $tc, $tn, $td, $tdr, $has, $getLocale, $pluralFunc, $pluralLocale } = injections;
+  const host = { t: $t, tc: $tc, tn: $tn, td: $td, tdr: $tdr, has: $has, getLocale: $getLocale, pluralFunc: $pluralFunc, pluralLocale: $pluralLocale };
+  hosts.set($t, host);
+  return host;
+}
+const render = (props, { slots, attrs }) => {
+  const injections = useNuxtApp();
+  return renderI18nT(renderApi, hosts.get(injections.$t) ?? hostOf(injections), props, slots, attrs);
+};
+export default Object.assign(render, {
+  displayName: "I18nT",
   inheritAttrs: false,
   props: {
     /** Translation key to render. */
@@ -10,7 +23,7 @@ export default defineComponent({
       type: String,
       required: true
     },
-    /** Count selecting the plural form. Set it to use `$tc` instead of `$t`. */
+    /** Count selecting the plural form. Set it to use `$tc` instead of `$t`. `null` means unset. */
     plural: {
       type: [Number, String]
     },
@@ -21,15 +34,14 @@ export default defineComponent({
     },
     /** Interpolation values substituted into the translation. */
     params: {
-      type: Object,
-      default: () => ({})
+      type: Object
     },
     /** Rendered instead of the component when `hideIfEmpty` suppresses an empty translation. */
     defaultValue: {
       type: String,
       default: ""
     },
-    /** Render the translation as HTML rather than text. Only for content you control. */
+    /** Render the translation as HTML rather than text. Only for translations you control: `params` are escaped, the translation is not. */
     html: {
       type: Boolean,
       default: false
@@ -39,82 +51,23 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    /** Plural rule for this element only, overriding the configured one. */
+    /** Plural rule for this element only, overriding the configured one. Its answer is used as is; `null` renders empty. */
     customPluralRule: {
       type: Function,
       default: null
     },
-    /** Formats the value with `$tn` and passes it to the translation as `{number}`. */
+    /** Formats the value with `$tn` and passes it to the translation as `{number}`, alongside `params`. */
     number: {
       type: [Number, String]
     },
-    /** Formats the value with `$td` and passes it to the translation as `{date}`. */
+    /** Formats the value with `$td` and passes it to the translation as `{date}`, alongside `params`. */
     date: {
       type: [Date, String, Number]
     },
-    /** Formats the value with `$tdr` and passes it to the translation as `{relativeDate}`. */
+    /** Formats the value with `$tdr` and passes it to the translation as `{relativeDate}`, alongside `params`. */
     relativeDate: {
       type: [Date, String, Number]
     }
-  },
-  setup(props, { slots, attrs }) {
-    return () => {
-      const options = {};
-      const { $getLocale, $_t, $tc, $tn, $td, $tdr } = useNuxtApp();
-      const route = useRoute();
-      const $t = $_t(route);
-      const safeAttrs = { ...attrs };
-      delete safeAttrs.innerHTML;
-      const renderText = (translation2) => props.html ? hyperscript(props.tag, { ...safeAttrs, innerHTML: translation2 }) : hyperscript(props.tag, safeAttrs, translation2);
-      if (props.number !== void 0) {
-        const numberValue = Number(props.number);
-        return renderText(String($t(props.keypath, { number: $tn(numberValue) }) ?? ""));
-      }
-      if (props.date !== void 0) {
-        return renderText(String($t(props.keypath, { date: $td(props.date) }) ?? ""));
-      }
-      if (props.relativeDate !== void 0) {
-        return renderText(String($t(props.keypath, { relativeDate: $tdr(props.relativeDate) }) ?? ""));
-      }
-      if (props.plural !== void 0) {
-        const count = Number.parseInt(props.plural.toString(), 10);
-        if (props.customPluralRule) {
-          return renderText(String(props.customPluralRule(props.keypath, count, props.params, $getLocale(), $t) ?? ""));
-        } else {
-          return renderText($tc(props.keypath, { count, ...props.params }));
-        }
-      }
-      const translation = ($t(props.keypath, { ...props.params, ...options }) ?? "").toString();
-      if (props.hideIfEmpty && !translation.trim()) {
-        return props.defaultValue ?? null;
-      }
-      if (props.html) {
-        return renderText(translation);
-      }
-      if (slots.default) {
-        return hyperscript(props.tag, safeAttrs, slots.default({ translation }));
-      }
-      const children = [];
-      let lastIndex = 0;
-      const placements = Object.entries(slots).map(([slotName, slotFn]) => {
-        const placeholder = `{${slotName}}`;
-        return { placeholder, slotFn, index: translation.indexOf(placeholder) };
-      }).filter(({ index }) => index !== -1).sort((a, b) => a.index - b.index);
-      for (const { placeholder, slotFn, index } of placements) {
-        if (index > lastIndex) {
-          children.push(translation.slice(lastIndex, index));
-        }
-        children.push(hyperscript(slotFn));
-        lastIndex = index + placeholder.length;
-      }
-      if (lastIndex < translation.length) {
-        children.push(translation.slice(lastIndex));
-      }
-      if (slots.default) {
-        return hyperscript(props.tag, safeAttrs, slots.default({ children }));
-      }
-      return hyperscript(props.tag, safeAttrs, children);
-    };
   }
 });
 </script>