@maz-ui/translations 4.0.0-beta.0

package/dist/index.d.ts

@@ -0,0 +1,202 @@
+import * as vue from 'vue';
+import { Ref, App } from 'vue';
+
+type DeepKeyOf<T> = T extends object ? {
+    [K in keyof T]: K extends string ? T[K] extends object ? `${K}.${DeepKeyOf<T[K]>}` : K : never;
+}[keyof T] : never;
+
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+
+type FlattenObjectKeys<T extends Record<string, any>, Prefix extends string = ''> = {
+    [K in keyof T]: T[K] extends Record<string, any> ? FlattenObjectKeys<T[K], `${Prefix}${K extends string ? K : ''}.`> : `${Prefix}${K extends string ? K : ''}`;
+}[keyof T];
+
+declare const _default: {
+    /**
+     * This is the translation for the input phone number component.
+     * The keys are:
+     * - countrySelect: The translation for the country select.
+     * - phoneInput: The translation for the phone input.
+     */
+    selectCountry: {
+        searchPlaceholder: string;
+    };
+    inputPhoneNumber: {
+        /**
+         * This is the translation for the country select component.
+         * The keys are:
+         * - placeholder: The translation for the placeholder text.
+         * - error: The translation for the error text.
+         * - searchPlaceholder: The translation for the search placeholder text.
+         */
+        countrySelect: {
+            placeholder: string;
+            error: string;
+            searchPlaceholder: string;
+        };
+        /**
+         * This is the translation for the phone input component.
+         * The keys are:
+         * - placeholder: The translation for the placeholder text.
+         * - example: The translation for the example text.
+         */
+        phoneInput: {
+            placeholder: string;
+            example: string;
+        };
+    };
+    /**
+     * This is the translation for the dropzone component.
+     * The keys are:
+     * - dragAndDrop: The translation for the drag and drop text.
+     * - selectFile: The translation for the select file button.
+     * - divider: The translation for the divider text.
+     * - fileMaxCount: The translation for the maximum number of files.
+     * - fileMaxSize: The translation for the maximum size of the files.
+     * - fileTypes: The translation for the allowed file types.
+     */
+    dropzone: {
+        dragAndDrop: string;
+        selectFile: string;
+        divider: string;
+        fileMaxCount: string;
+        fileMaxSize: string;
+        fileTypes: string;
+    };
+    /**
+     * This is the translation for the date picker component.
+     * The keys are:
+     * - shortcuts: The translation for the shortcuts.
+     */
+    datePicker: {
+        shortcuts: {
+            lastSevenDays: string;
+            lastThirtyDays: string;
+            thisWeek: string;
+            lastWeek: string;
+            thisMonth: string;
+            thisYear: string;
+            lastYear: string;
+        };
+    };
+    /**
+     * This is the translation for the dropdown component.
+     * The keys are:
+     * - screenReaderDescription: The translation for the screen reader description.
+     */
+    dropdown: {
+        screenReaderDescription: string;
+    };
+    /**
+     * This is the translation for the select component.
+     * The keys are:
+     * - searchPlaceholder: The translation for the search placeholder text.
+     */
+    select: {
+        searchPlaceholder: string;
+    };
+    /**
+     * This is the translation for the table component.
+     * The keys are:
+     * - noResults: The translation for the no results text.
+     * - actionColumnTitle: The translation for the action column title.
+     * - searchByInput: The translation for the search by input.
+     * - searchInput: The translation for the search input.
+     * - pagination: The translation for the pagination component.
+     */
+    table: {
+        noResults: string;
+        actionColumnTitle: string;
+        searchByInput: {
+            all: string;
+            placeholder: string;
+        };
+        searchInput: {
+            placeholder: string;
+        };
+        pagination: {
+            all: string;
+            rowsPerPage: string;
+            of: string;
+        };
+    };
+    /**
+     * This is the translation for the pagination component.
+     * The keys are:
+     * - navAriaLabel: The aria-label for the navigation (nav) element.
+     * - screenReader.firstPage: The translation for the first page button (screen reader).
+     * - screenReader.previousPage: The translation for the previous page button (screen reader).
+     * - screenReader.page: The translation for the current page button (screen reader).
+     * - screenReader.nextPage: The translation for the next page button (screen reader).
+     * - screenReader.lastPage: The translation for the last page button (screen reader).
+     */
+    pagination: {
+        navAriaLabel: string;
+        screenReader: {
+            firstPage: string;
+            previousPage: string;
+            page: string;
+            nextPage: string;
+            lastPage: string;
+        };
+    };
+    carousel: {
+        ariaLabel: {
+            previousButton: string;
+            nextButton: string;
+        };
+    };
+    checklist: {
+        noResultsFound: string;
+        searchInput: {
+            placeholder: string;
+        };
+    };
+};
+
+type TranslationKey = NonNullable<DeepKeyOf<MazTranslationsSchema>>;
+interface MazTranslationsOptions {
+    locale?: string;
+    fallbackLocale?: string;
+    preloadFallback?: boolean;
+    messages?: Record<string, MazTranslationsSchema | (() => Promise<MazTranslationsSchema>)>;
+}
+interface MazTranslationsInstance {
+    locale: Ref<string>;
+    t: (key: TranslationKey, variables?: Record<string, any>) => string;
+    setLocale: (locale: string) => Promise<void>;
+}
+type MazTranslationsFlattenSchema = Record<FlattenObjectKeys<typeof _default>, string>;
+type MazTranslationsNestedSchema = typeof _default;
+type MazTranslationsSchema = DeepPartial<MazTranslationsFlattenSchema | MazTranslationsNestedSchema>;
+
+declare function createMazTranslations(options?: MazTranslationsOptions): Promise<{
+    locale: vue.Ref<string, string>;
+    t: (key: TranslationKey, variables?: Record<string, any>) => string;
+    setLocale: (newLocale: string) => Promise<void>;
+}>;
+declare function useMazTranslations(): Promise<MazTranslationsInstance>;
+declare function setGlobalMazTranslations(instance: MazTranslationsInstance): void;
+
+declare const MazTranslations: {
+    install(app: App, options?: MazTranslationsOptions): Promise<{
+        locale: vue.Ref<string, string>;
+        t: (key: TranslationKey, variables?: Record<string, any>) => string;
+        setLocale: (newLocale: string) => Promise<void>;
+    }>;
+};
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        /**
+         * Maz translations instance
+         */
+        $mazTranslations: MazTranslationsInstance;
+    }
+}
+
+declare function useTranslations(): MazTranslationsInstance;
+
+export { MazTranslations, createMazTranslations, setGlobalMazTranslations, useMazTranslations, useTranslations };
+export type { MazTranslationsInstance, MazTranslationsOptions, MazTranslationsSchema };

package/dist/index.mjs

@@ -0,0 +1,184 @@
+import { ref, inject } from 'vue';
+
+let globalInstance = null;
+const defaultLocaleLoaders = {
+  "en": () => import('./chunks/en.mjs'),
+  "fr": () => import('./chunks/fr.mjs'),
+  "es": () => import('./chunks/es.mjs'),
+  "de": () => import('./chunks/de.mjs'),
+  "it": () => import('./chunks/it.mjs'),
+  "pt": () => import('./chunks/pt.mjs'),
+  "zh-CN": () => import('./chunks/zh-CN.mjs'),
+  "ja": () => import('./chunks/ja.mjs')
+};
+function get(obj, path) {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
+function set(obj, path, value) {
+  const keys = path.split(".");
+  const lastKey = keys.pop();
+  const target = keys.reduce((current, key) => {
+    if (!current[key] || typeof current[key] !== "object") {
+      current[key] = {};
+    }
+    return current[key];
+  }, obj);
+  target[lastKey] = value;
+}
+function isFlattened(obj) {
+  if (!obj || typeof obj !== "object")
+    return false;
+  return Object.keys(obj).some((key) => key.includes("."));
+}
+function flattenToNested(flatObj) {
+  if (!isFlattened(flatObj)) {
+    return flatObj;
+  }
+  const nested = {};
+  for (const [key, value] of Object.entries(flatObj)) {
+    if (key.includes(".")) {
+      set(nested, key, value);
+    } else {
+      nested[key] = value;
+    }
+  }
+  return nested;
+}
+function merge(target, source) {
+  const normalizedSource = flattenToNested(source);
+  const normalizedTarget = flattenToNested(target);
+  const result = { ...normalizedTarget };
+  for (const key in normalizedSource) {
+    if (normalizedSource[key] && typeof normalizedSource[key] === "object") {
+      result[key] = merge(result[key] || {}, normalizedSource[key]);
+    } else {
+      result[key] = normalizedSource[key];
+    }
+  }
+  return result;
+}
+function interpolate(message, variables) {
+  if (!variables)
+    return message;
+  return message.replace(/\{(\w+)\}/g, (match, key) => {
+    return variables[key] !== void 0 ? String(variables[key]) : match;
+  });
+}
+async function createMazTranslations(options = {}) {
+  const {
+    locale: initialLocale = "en",
+    fallbackLocale = "en",
+    preloadFallback = true,
+    messages = {}
+  } = options;
+  const locale = ref(initialLocale);
+  const messagesRef = ref({});
+  const loadedLocales = ref(/* @__PURE__ */ new Set());
+  const loadingPromises = ref(/* @__PURE__ */ new Map());
+  const userMessageLoaders = ref({});
+  for (const [loc, msgs] of Object.entries(messages)) {
+    userMessageLoaders.value[loc] = typeof msgs === "function" ? msgs : () => Promise.resolve(msgs);
+  }
+  function loadLocaleMessages(targetLocale) {
+    if (loadedLocales.value.has(targetLocale)) {
+      return;
+    }
+    if (loadingPromises.value.has(targetLocale)) {
+      return loadingPromises.value.get(targetLocale);
+    }
+    const loadingPromise = (async () => {
+      try {
+        let defaultMessages = {};
+        let userMessages = {};
+        if (defaultLocaleLoaders[targetLocale]) {
+          const defaultModule = await defaultLocaleLoaders[targetLocale]();
+          defaultMessages = defaultModule.default;
+        }
+        const userLoader = userMessageLoaders.value[targetLocale];
+        if (userLoader) {
+          if (typeof userLoader === "function") {
+            userMessages = await userLoader();
+          } else {
+            userMessages = userLoader;
+          }
+        }
+        messagesRef.value[targetLocale] = merge(defaultMessages, userMessages);
+        loadedLocales.value.add(targetLocale);
+      } catch (error) {
+        console.error(`Failed to load translations for locale "${targetLocale}":`, error);
+        messagesRef.value[targetLocale] = {};
+        loadedLocales.value.add(targetLocale);
+      } finally {
+        loadingPromises.value.delete(targetLocale);
+      }
+    })();
+    loadingPromises.value.set(targetLocale, loadingPromise);
+    return loadingPromise;
+  }
+  const localePromises = [];
+  localePromises.push(loadLocaleMessages(initialLocale));
+  if (preloadFallback && fallbackLocale !== initialLocale) {
+    localePromises.push(loadLocaleMessages(fallbackLocale));
+  }
+  await Promise.all(localePromises);
+  const t = (key, variables) => {
+    let message = get(messagesRef.value[locale.value], key);
+    if (!message && locale.value !== fallbackLocale) {
+      if (!loadedLocales.value.has(fallbackLocale)) {
+        loadLocaleMessages(fallbackLocale)?.catch(console.error);
+        console.warn(`Fallback locale "${fallbackLocale}" not loaded yet for key "${key}", loading...`);
+        return key;
+      }
+      message = get(messagesRef.value[fallbackLocale], key);
+    }
+    if (!message && fallbackLocale !== "en" && locale.value !== "en") {
+      if (!loadedLocales.value.has("en")) {
+        loadLocaleMessages("en")?.catch(console.error);
+        console.warn(`English fallback not loaded yet for key "${key}", loading...`);
+        return key;
+      }
+      message = get(messagesRef.value.en, key);
+    }
+    if (!message) {
+      console.warn(`Translation key "${key}" not found for locale "${locale.value}"`);
+      return key;
+    }
+    return interpolate(String(message), variables);
+  };
+  const setLocale = async (newLocale) => {
+    if (!loadedLocales.value.has(newLocale)) {
+      await loadLocaleMessages(newLocale);
+    }
+    locale.value = newLocale;
+  };
+  return { locale, t, setLocale };
+}
+async function useMazTranslations() {
+  if (!globalInstance) {
+    globalInstance = await createMazTranslations();
+  }
+  return globalInstance;
+}
+function setGlobalMazTranslations(instance) {
+  globalInstance = instance;
+}
+
+const MazTranslations = {
+  async install(app, options = {}) {
+    const i18n = await createMazTranslations(options);
+    setGlobalMazTranslations(i18n);
+    app.config.globalProperties.$mazTranslations = i18n;
+    app.provide("mazTranslations", i18n);
+    return i18n;
+  }
+};
+
+function useTranslations() {
+  const injected = inject("mazTranslations");
+  if (!injected) {
+    throw new Error("MazTranslations plugin or MazUi plugin not installed. Please install the plugin first.");
+  }
+  return injected;
+}
+
+export { MazTranslations, createMazTranslations, setGlobalMazTranslations, useMazTranslations, useTranslations };

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@maz-ui/translations",
+  "type": "module",
+  "version": "4.0.0-beta.0",
+  "description": "Translations for Maz-UI library",
+  "author": "Louis Mazel <me@loicmazuel.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LouisMazel/maz-ui.git"
+  },
+  "bugs": "https://github.com/LouisMazel/maz-ui/issues",
+  "keywords": [
+    "translations",
+    "i18n",
+    "internationalization",
+    "localization",
+    "maz-ui",
+    "vue",
+    "nuxt"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./*": "./*"
+  },
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "typecheck": "tsc --noEmit --skipLibCheck",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "pre-commit": "lint-staged"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@maz-ui/utils": "4.0.0-beta.0",
+    "typescript": "^5.8.3",
+    "unbuild": "^3.5.0",
+    "vue": "catalog:"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs,mts,cjs,md}": [
+      "eslint --fix"
+    ]
+  },
+  "gitHead": "9ef7beb4feeee0b0cb44e7df8af7115d5d5ef334"
+}