@sit-onyx/nuxt 1.0.0-beta.31 → 1.0.0-beta.310

package/README.md

@@ -1,9 +1,5 @@
 <div align="center" style="text-align: center">
-  <picture>
-    <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>
+  <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo.svg" height="96px">
 </div>
 
 <br>

package/dist/module.d.mts

@@ -1,12 +1,6 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { OnyxTheme } from 'sit-onyx';
 
 interface ModuleOptions {
-    /**
-     * The onyx theme to use. See: [https://onyx.schwarz/development/theming.html](https://onyx.schwarz/development/theming.html)
-     * @default "onyx"
-     */
-    theme: OnyxTheme;
     /**
      * By default, the global onyx styles (`global.css` file) will be included
      * which applies some global styles like background color and font styles.
@@ -17,21 +11,8 @@ 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>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@sit-onyx/nuxt",
   "configKey": "onyx",
-  "version": "1.0.0-beta.30",
+  "version": "1.0.0-beta.309",
   "builder": {
-    "@nuxt/module-builder": "0.8.3",
+    "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"
   }
 }

package/dist/module.mjs

@@ -1,4 +1,5 @@
 import { defineNuxtModule, useLogger, createResolver, addComponent, addPlugin } from '@nuxt/kit';
+import { stat } from 'node:fs/promises';
 import * as onyx from 'sit-onyx';
 
 const module = defineNuxtModule({
@@ -6,20 +7,14 @@ const module = defineNuxtModule({
     name: "@sit-onyx/nuxt",
     configKey: "onyx"
   },
-  defaults: {
-    theme: "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.theme !== "onyx") {
-      nuxt.options.css.push(`sit-onyx/themes/${options.theme}.css`);
-    }
     if (!options.disableGlobalStyles) {
-      nuxt.options.css.push("sit-onyx/global.css");
+      nuxt.options.css.unshift("sit-onyx/global.css");
     }
+    nuxt.options.css.unshift("sit-onyx/style.css");
     Object.keys(onyx).filter((namedExport) => namedExport.startsWith("Onyx")).forEach((component) => {
       addComponent({
         filePath: "sit-onyx",
@@ -39,29 +34,37 @@ const module = defineNuxtModule({
       );
     }
     if (i18nModuleIndex >= 0) {
-      const registerOnyxLocales = (register) => {
+      const registerOnyxLocales = async (register) => {
+        const onyxLocalesToRegister = {};
+        await Promise.allSettled(
+          nuxt.options.i18n?.locales?.map(async (projectLocale) => {
+            const locale = typeof projectLocale === "string" ? { code: projectLocale, language: projectLocale } : projectLocale;
+            const language = locale.language ?? locale.code;
+            await stat(resolve(`./runtime/locales/${language}.js`));
+            onyxLocalesToRegister[locale.code] = language;
+          }) ?? []
+        );
         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]) => ({
+          locales: Object.entries(onyxLocalesToRegister).map(([code, language]) => ({
             code,
+            language,
             file: `${language}.js`
           }))
         });
       };
       nuxt.hook("i18n:registerModule", registerOnyxLocales);
-      addPlugin({ src: resolve("./runtime/plugins/onyx") });
     }
+    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;
+    if (typeof module === "string" && moduleNames.includes(module)) return i;
+    if (Array.isArray(module) && moduleNames.includes(module[0])) return i;
   }
   return -1;
 }

package/dist/runtime/plugins/onyx.js

@@ -1,25 +1,30 @@
-import { computed, watchEffect } from "#imports";
-import { defineNuxtPlugin, useNuxtApp } from "nuxt/app";
-import { provideI18n, syncGlobalOptionalText } from "sit-onyx";
+import { computed } from "#imports";
+import { defineNuxtPlugin, useNuxtApp, useRouter } from "nuxt/app";
+import { createOnyx } from "sit-onyx";
 export default defineNuxtPlugin({
   name: "onyx:plugin",
-  // @ts-ignore: dependency comes from @nuxtjs/i18n
-  dependsOn: ["i18n:plugin"],
+  dependsOn: [],
+  // "parallel: false" is the current default but to be resistant for future changes, we explicitly set it to false here
+  // see: https://github.com/SchwarzIT/onyx/pull/3832#discussion_r2244487744
+  parallel: false,
   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`));
+    const i18n = useNuxtApp().$i18n;
+    const router = useRouter();
+    const getI18nOptions = () => {
+      if (!i18n) return;
+      const t = computed(() => {
+        return (key, placeholders) => {
+          return i18n.t(`onyx.${key}`, placeholders?.n ?? 1, { named: placeholders });
+        };
       });
-    });
+      const locale = computed(() => i18n.localeProperties.value.language ?? "en-US");
+      return { t, locale };
+    };
+    app.vueApp.use(
+      createOnyx({
+        router,
+        i18n: getI18nOptions()
+      })
+    );
   }
 });

package/dist/types.d.mts

@@ -1 +1,3 @@
-export { type ModuleOptions, default } from './module.js'
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@sit-onyx/nuxt",
-  "version": "1.0.0-beta.31",
+  "version": "1.0.0-beta.310",
   "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
+  "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
   "homepage": "https://onyx.schwarz",
   "repository": {
     "type": "git",
@@ -13,32 +17,30 @@
   "bugs": {
     "url": "https://github.com/SchwarzIT/onyx/issues"
   },
-  "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
+      "types": "./dist/types.d.mts",
       "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "require": "./dist/module.mjs"
     }
   },
-  "types": "./dist/types.d.ts",
   "files": [
     "dist"
   ],
-  "dependencies": {
-    "@nuxt/kit": "^3.12.4"
-  },
   "devDependencies": {
-    "@nuxt/devtools": "^1.3.9",
-    "@nuxt/module-builder": "~0.8.3",
-    "@nuxt/schema": "^3.12.4",
-    "@nuxt/test-utils": "^3.14.1",
-    "@nuxtjs/i18n": "^8.3.3",
-    "nuxt": "^3.12.4",
-    "vue-i18n": "^9.13.1"
+    "@nuxt/devtools": "^2.6.3",
+    "@nuxt/kit": "^4.0.3",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.0.3",
+    "@nuxt/test-utils": "^3.19.2",
+    "@nuxtjs/i18n": "^10.0.6",
+    "nuxt": "^4.0.3",
+    "typescript": "5.9.2",
+    "vue-i18n": "^11.1.11",
+    "sit-onyx": "^1.0.0-beta.324"
   },
   "peerDependencies": {
-    "sit-onyx": "^1.0.0-beta.30"
+    "sit-onyx": "^1.0.0-beta.324"
   },
   "scripts": {
     "dev": "nuxi dev playground",

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -1,37 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-import { OnyxTheme } from 'sit-onyx';
-
-interface ModuleOptions {
-    /**
-     * The onyx theme to use. See: [https://onyx.schwarz/development/theming.html](https://onyx.schwarz/development/theming.html)
-     * @default "onyx"
-     */
-    theme: OnyxTheme;
-    /**
-     * By default, the global onyx styles (`global.css` file) will be included
-     * which applies some global styles like background color and font styles.
-     * This is recommended when building a whole application with onyx.
-     *
-     * You can set this option to `true` to disable this.
-     *
-     * @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>;
-
-export { type ModuleOptions, _default as default };

package/dist/types.d.ts

@@ -1 +0,0 @@
-export { type ModuleOptions, default } from './module'