@sit-onyx/nuxt 1.1.2 → 1.2.0-dev-20261015154043

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { stat } from 'node:fs/promises';
-import { defineNuxtModule, useLogger, createResolver, addComponent, addPlugin } from '@nuxt/kit';
+import { defineNuxtModule, useLogger, createResolver, addComponent, addPlugin, addImports, addComponentsDir } from '@nuxt/kit';
 import * as onyx from 'sit-onyx';
 
 const module$1 = defineNuxtModule({
@@ -58,6 +58,13 @@ const module$1 = defineNuxtModule({
       nuxt.hook("i18n:registerModule", registerOnyxLocales);
     }
     addPlugin({ src: resolve("./runtime/plugins/onyx") });
+    addImports([
+      {
+        from: resolve("./runtime/utils/scroll-behavior"),
+        name: "createOnyxScrollBehavior"
+      }
+    ]);
+    addComponentsDir({ path: resolve("./runtime/components") });
   }
 });
 function getModuleIndex(modules, ...moduleNames) {

package/dist/runtime/components/OnyxError.d.vue.ts

@@ -0,0 +1,7 @@
+type ErrorLike = Pick<Error, "message">;
+type __VLS_Props = {
+    error: ErrorLike;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/OnyxError.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { useLocalePath } from "#i18n";
+import { clearError } from "#imports";
+const props = defineProps({
+  error: { type: Object, required: true }
+});
+const localePath = useLocalePath();
+const handleBackHome = () => clearError({ redirect: localePath("/") });
+</script>
+
+<template>
+  <div class="onyx-error onyx-component">
+    <OnyxErrorSVG class="onyx-error__image" />
+
+    <div class="onyx-error__headline">
+      <OnyxHeadline is="h1">{{ props.error.message }}</OnyxHeadline>
+      <OnyxButton :label="$t('onyx.errors.backToHome')" @click="handleBackHome" />
+    </div>
+
+    <OnyxAccordion>
+      <OnyxAccordionItem value="details">
+        <template #header>{{ $t("onyx.errors.technicalDetails") }}</template>
+        <pre class="onyx-error__details">{{ JSON.stringify(props.error, null, 2) }}</pre>
+      </OnyxAccordionItem>
+    </OnyxAccordion>
+  </div>
+</template>
+
+<style scoped>
+.onyx-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--onyx-density-3xl);
+}
+.onyx-error__image {
+  width: 32rem;
+  display: block;
+}
+.onyx-error__headline {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--onyx-density-md);
+}
+.onyx-error__details {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-family: var(--onyx-font-family-mono);
+}
+</style>

package/dist/runtime/components/OnyxError.vue.d.ts

@@ -0,0 +1,7 @@
+type ErrorLike = Pick<Error, "message">;
+type __VLS_Props = {
+    error: ErrorLike;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/utils/scroll-behavior.d.ts

@@ -0,0 +1,13 @@
+import type { RouterConfig } from "nuxt/schema";
+type CreateOnyxScrollBehaviorOptions = {
+    onBeforeScroll?: (scrollContainer: HTMLElement, ...params: Parameters<NonNullable<RouterConfig["scrollBehavior"]>>) => Promise<void>;
+};
+/**
+ * Creates a Vue Router scrollBehavior for applying router scroll behavior when using the onyx
+ * design system. Note: The default Vue Router scroll behavior does not work because onyx uses a
+ * different scroll container (.onyx-page__main) instead of the html/body element.
+ *
+ * Will make sure the scrolling is done after the async page is ready.
+ */
+export declare function createOnyxScrollBehavior(options?: CreateOnyxScrollBehaviorOptions): RouterConfig["scrollBehavior"];
+export {};

package/dist/runtime/utils/scroll-behavior.js

@@ -0,0 +1,29 @@
+import { nextTick, useNuxtApp } from "#imports";
+export function createOnyxScrollBehavior(options) {
+  return (to, from, savedPosition) => {
+    const nuxtApp = useNuxtApp();
+    return new Promise((resolve) => {
+      nuxtApp.hooks.hookOnce("page:finish", async () => {
+        await nextTick();
+        const scrollContainer = document.querySelector(".onyx-page__main");
+        if (!scrollContainer) {
+          resolve(false);
+          return;
+        }
+        await options?.onBeforeScroll?.(scrollContainer, to, from, savedPosition);
+        const behavior = "instant";
+        const hash = to.hash || window.location.hash || void 0;
+        const hashElement = hash ? scrollContainer.querySelector(hash) : void 0;
+        if (hashElement) {
+          return hashElement.scrollIntoView({ block: "start", behavior });
+        }
+        if (savedPosition) {
+          scrollContainer.scrollTo(savedPosition);
+        } else {
+          scrollContainer.scrollTo({ left: 0, top: 0, behavior });
+        }
+        resolve(false);
+      });
+    });
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt",
-  "version": "1.1.2",
+  "version": "1.2.0-dev-20261015154043",
   "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
   "homepage": "https://onyx.schwarz",
   "bugs": {
@@ -25,21 +25,21 @@
     }
   },
   "devDependencies": {
-    "@nuxt/devtools": "^3.4.1",
-    "@nuxt/kit": "^4.5.2",
+    "@nuxt/devtools": "^3.4.2",
+    "@nuxt/kit": "^4.6.1",
     "@nuxt/module-builder": "^1.0.3",
-    "@nuxt/schema": "^4.5.2",
-    "@nuxt/test-utils": "^4.1.0",
+    "@nuxt/schema": "^4.6.1",
+    "@nuxt/test-utils": "^4.3.3",
     "@nuxtjs/i18n": "^10.6.0",
+    "@sit-onyx/shared": "^0.1.0",
     "nuxt": "4.5.2",
+    "sit-onyx": "^1.21.1-dev-20261015154043",
     "typescript": "6.0.3",
     "unbuild": "^3.6.1",
-    "vue-i18n": "^11.4.8",
-    "@sit-onyx/shared": "^0.1.0",
-    "sit-onyx": "^1.19.0"
+    "vue-i18n": "^11.4.14"
   },
   "peerDependencies": {
-    "sit-onyx": "^1.19.0"
+    "sit-onyx": "^1.21.1-dev-20261015154043"
   },
   "engines": {
     "node": ">=20"