@sit-onyx/nuxt 1.0.0-alpha.9 → 1.0.0-beta.1

package/README.md

@@ -1,7 +1,7 @@
-<div align="center">
+<div align="center" style="text-align: center">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-light.svg">
-    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg">
+    <source media="(prefers-color-scheme: dark)" type="image/svg+xml" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-light.svg">
+    <source media="(prefers-color-scheme: light)" type="image/svg+xml" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg">
     <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg" width="160px">
   </picture>
 </div>
@@ -10,10 +10,10 @@
 
 # @sit-onyx/nuxt
 
-A Nuxt module to easily integrate onyx into [Nuxt Js](https://nuxt.com/) projects.
+A Nuxt module to easily integrate onyx into [Nuxt](https://nuxt.com/) projects.
 Created by [Schwarz IT](https://it.schwarz).
 
-## Adding it to a nuxt project
+## Adding it to a Nuxt project
 
 Install the module in your Nuxt application with one command:
 

package/dist/module.d.mts

@@ -11,6 +11,20 @@ interface ModuleOptions {
      * @see https://onyx.schwarz/development/#installation
      */
     disableGlobalStyles?: boolean;
+    /**
+     * Settings related to the integration with @nuxtjs/i18n
+     */
+    i18n?: {
+        /**
+         * Mapping for registering the translations from onyx with @nuxtjs/i18n.
+         * @example
+         * ```ts
+         * registerLocales: { "en_US": "en-US" }
+         * ```
+         * This would register the onyx translations for the language "en-US" to the code "en_US" of your projects locales.
+         */
+        registerLocales?: Record<string, "en-US" | "de-DE" | "ko-KR">;
+    };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 

package/dist/module.d.ts

@@ -11,6 +11,20 @@ interface ModuleOptions {
      * @see https://onyx.schwarz/development/#installation
      */
     disableGlobalStyles?: boolean;
+    /**
+     * Settings related to the integration with @nuxtjs/i18n
+     */
+    i18n?: {
+        /**
+         * Mapping for registering the translations from onyx with @nuxtjs/i18n.
+         * @example
+         * ```ts
+         * registerLocales: { "en_US": "en-US" }
+         * ```
+         * This would register the onyx translations for the language "en-US" to the code "en_US" of your projects locales.
+         */
+        registerLocales?: Record<string, "en-US" | "de-DE" | "ko-KR">;
+    };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 

package/dist/module.json

@@ -1,9 +1,9 @@
 {
-  "name": "onyx-nuxt",
+  "name": "@sit-onyx/nuxt",
   "configKey": "onyx",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-beta.0",
   "builder": {
-    "@nuxt/module-builder": "0.7.1",
+    "@nuxt/module-builder": "0.8.1",
     "unbuild": "unknown"
   }
 }

package/dist/module.mjs

@@ -1,13 +1,15 @@
-import { defineNuxtModule, addComponent } from '@nuxt/kit';
+import { defineNuxtModule, useLogger, createResolver, addComponent, addPlugin } from '@nuxt/kit';
 import * as onyx from 'sit-onyx';
 
 const module = defineNuxtModule({
   meta: {
-    name: "onyx-nuxt",
+    name: "@sit-onyx/nuxt",
     configKey: "onyx"
   },
   defaults: {},
   setup(options, nuxt) {
+    const logger = useLogger("@sit-onyx/nuxt");
+    const { resolve } = createResolver(import.meta.url);
     nuxt.options.postcss.plugins.cssnano = { preset: ["default", { calc: false }] };
     nuxt.options.css.push("sit-onyx/style.css");
     if (!options.disableGlobalStyles) {
@@ -20,7 +22,43 @@ const module = defineNuxtModule({
         export: component
       });
     });
+    const i18nModuleIndex = getModuleIndex(
+      nuxt.options.modules,
+      "@nuxtjs/i18n",
+      "@nuxtjs/i18n-edge"
+    );
+    const onyxModuleIndex = getModuleIndex(nuxt.options.modules, "@sit-onyx/nuxt");
+    if (i18nModuleIndex >= 0 && onyxModuleIndex > i18nModuleIndex) {
+      logger.warn(
+        "The @nuxtjs/i18n module was registered before the @sit-onyx/nuxt module. The default translations of onyx won't be loaded, please register the @sit-onyx/nuxt module before @nuxtjs/i18n"
+      );
+    }
+    if (i18nModuleIndex >= 0) {
+      const registerOnyxLocales = (register) => {
+        register({
+          langDir: resolve("./runtime/locales"),
+          // we need to use .js files instead of .ts because the .ts files would be compiled to .js in the build step, so
+          // when projects use this nuxt module, .ts files will throw a "can not find file" error
+          locales: Object.entries(options.i18n?.registerLocales ?? {}).map(([code, language]) => ({
+            code,
+            file: `${language}.js`
+          }))
+        });
+      };
+      nuxt.hook("i18n:registerModule", registerOnyxLocales);
+      addPlugin({ src: resolve("./runtime/plugins/onyx") });
+    }
   }
 });
+function getModuleIndex(modules, ...moduleNames) {
+  for (let i = 0; i < modules.length; i++) {
+    const module = modules[i];
+    if (typeof module === "string" && moduleNames.includes(module))
+      return i;
+    if (Array.isArray(module) && moduleNames.includes(module[0]))
+      return i;
+  }
+  return -1;
+}
 
 export { module as default };

package/dist/runtime/locales/de-DE.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/locales/de-DE.js

@@ -0,0 +1,7 @@
+// @ts-check
+import { defineI18nLocale } from "#i18n";
+import deDE from "sit-onyx/locales/de-DE.json";
+
+export default defineI18nLocale(() => {
+  return { onyx: deDE };
+});

package/dist/runtime/locales/en-US.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/locales/en-US.js

@@ -0,0 +1,7 @@
+// @ts-check
+import { defineI18nLocale } from "#i18n";
+import enUS from "sit-onyx/locales/en-US.json";
+
+export default defineI18nLocale(() => {
+  return { onyx: enUS };
+});

package/dist/runtime/locales/ko-KR.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/locales/ko-KR.js

@@ -0,0 +1,7 @@
+// @ts-check
+import { defineI18nLocale } from "#i18n";
+import koKR from "sit-onyx/locales/ko-KR.json";
+
+export default defineI18nLocale(() => {
+  return { onyx: koKR };
+});

package/dist/runtime/plugins/onyx.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/onyx.js

@@ -0,0 +1,25 @@
+import { computed, watchEffect } from "#imports";
+import { defineNuxtPlugin, useNuxtApp } from "nuxt/app";
+import { provideI18n, syncGlobalOptionalText } from "sit-onyx";
+export default defineNuxtPlugin({
+  name: "onyx:plugin",
+  // @ts-ignore: dependency comes from @nuxtjs/i18n
+  dependsOn: ["i18n:plugin"],
+  setup: (app) => {
+    const { t: translate, localeProperties } = useNuxtApp().$i18n;
+    const t = computed(() => {
+      return (key, placeholders) => {
+        return translate(`onyx.${key}`, placeholders?.n ?? 1, { named: placeholders });
+      };
+    });
+    provideI18n(app.vueApp, {
+      locale: computed(() => localeProperties.value.iso ?? "en-US"),
+      t
+    });
+    app.hook("app:beforeMount", () => {
+      watchEffect(() => {
+        syncGlobalOptionalText(translate(`onyx.optional`));
+      });
+    });
+  }
+});

package/dist/types.d.mts

@@ -1,17 +1 @@
-
-import type { ModuleOptions } from './module.js'
-
-
-
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['onyx']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['onyx']?: ModuleOptions }
-}
-
-declare module 'nuxt/schema' {
-  interface NuxtConfig { ['onyx']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['onyx']?: ModuleOptions }
-}
-
-
-export type { ModuleOptions, default } from './module.js'
+export { type ModuleOptions, default } from './module.js'

package/dist/types.d.ts

@@ -1,17 +1 @@
-
-import type { ModuleOptions } from './module'
-
-
-
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['onyx']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['onyx']?: ModuleOptions }
-}
-
-declare module 'nuxt/schema' {
-  interface NuxtConfig { ['onyx']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['onyx']?: ModuleOptions }
-}
-
-
-export type { ModuleOptions, default } from './module'
+export { type ModuleOptions, default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0-beta.1",
   "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -26,17 +26,19 @@
     "dist"
   ],
   "dependencies": {
-    "@nuxt/kit": "^3.12.1"
+    "@nuxt/kit": "^3.12.3"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.3.3",
-    "@nuxt/module-builder": "~0.7.1",
-    "@nuxt/schema": "^3.12.1",
+    "@nuxt/devtools": "^1.3.9",
+    "@nuxt/module-builder": "~0.8.1",
+    "@nuxt/schema": "^3.12.3",
     "@nuxt/test-utils": "^3.13.1",
-    "nuxt": "^3.12.1"
+    "@nuxtjs/i18n": "^8.3.1",
+    "nuxt": "^3.12.3",
+    "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
-    "sit-onyx": "^1.0.0-alpha.129"
+    "sit-onyx": "^1.0.0-beta.1"
   },
   "scripts": {
     "dev": "nuxi dev playground",