@gluhar/app 4.2.1 → 4.3.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.3.0](https://github.com/gluharco/gluhar/compare/@gluhar/app@4.2.2...@gluhar/app@4.3.0) (2025-10-06)
+
+
+### 🚀 Enhancements
+
+- Added useLenis composable to easily enable lenis and GLenisScroller component for a nested inner scroller element ([6b5a120](https://github.com/gluharco/gluhar/commit/6b5a120afd84c2701a85e89c063b6ec234e4d96f))
+
+
+
+
+
+## [4.2.2](https://github.com/gluharco/gluhar/compare/@gluhar/app@4.2.1...@gluhar/app@4.2.2) (2025-09-02)
+
+
+### 🩹 Fixes
+
+- Remove return that breaks all below ([13cc919](https://github.com/gluharco/gluhar/commit/13cc919031d677b01af3daff22a2377cf56b715f))
+
+
+
+
+
 ## [4.2.1](https://github.com/gluharco/gluhar/compare/@gluhar/app@4.2.0...@gluhar/app@4.2.1) (2025-09-02)
 
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluhar/app",
   "configKey": "gluhar",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -25,9 +25,9 @@ const module = defineNuxtModule({
     if (vgsap !== false) {
       if (vgsap?.dev) {
         await installModule("@gluhar/v-gsap-nuxt", vgsap);
-        return;
+      } else {
+        await installModule("v-gsap-nuxt", vgsap);
       }
-      await installModule("v-gsap-nuxt", vgsap);
     }
     if (image !== false) {
       await installModule("@nuxt/image", image);

package/dist/runtime/components/GLenisScroller.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useResizeObserver } from "@vueuse/core";
+import { ref, type CSSProperties } from "vue";
+import { useLenis } from "#imports";
+
+defineProps<{
+  contentClass?: string;
+  contentStyle?: CSSProperties;
+}>();
+
+const scrollerRef = ref<HTMLDivElement>();
+const contentRef = ref<HTMLDivElement>();
+
+const { lenis } = useLenis(scrollerRef);
+
+const prevHeight = ref(0);
+
+useResizeObserver(contentRef, (entries) => {
+  const entry = entries[0];
+  const { height } = entry.contentRect;
+
+  if (height === prevHeight.value) return;
+
+  prevHeight.value = height;
+  lenis.value?.resize();
+});
+</script>
+
+<template>
+  <div class="lenis-scroller overflow-y-auto" ref="scrollerRef">
+    <div :class="contentClass" :style="contentStyle" ref="contentRef">
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/composables/useLenis.d.ts

@@ -0,0 +1,370 @@
+import Lenis from "lenis";
+import { type Ref } from "vue";
+interface LenisOptions {
+    wrapper?: HTMLElement | string;
+    content?: HTMLElement;
+    lerp?: number;
+    duration?: number;
+    orientation?: "vertical" | "horizontal";
+    gestureOrientation?: "vertical" | "horizontal" | "both";
+    smoothWheel?: boolean;
+    smoothTouch?: boolean;
+    wheelMultiplier?: number;
+    touchMultiplier?: number;
+    normalizeWheel?: boolean;
+    easing?: (t: number) => number;
+}
+export declare const useLenis: (wrapperOrOptions?: string | HTMLElement | Ref<HTMLElement | undefined> | LenisOptions) => {
+    lenis: Ref<{
+        isTouching?: boolean | undefined;
+        time: number;
+        userData: import("lenis").UserData;
+        lastVelocity: number;
+        velocity: number;
+        direction: 1 | -1 | 0;
+        options: {
+            wrapper: Window | HTMLElement | Element;
+            content: HTMLElement | Element;
+            eventsTarget: Window | HTMLElement | Element;
+            smoothWheel: boolean;
+            syncTouch: boolean;
+            syncTouchLerp: number;
+            touchInertiaExponent: number;
+            lerp: number;
+            infinite: boolean;
+            orientation: import("lenis").Orientation;
+            gestureOrientation: import("lenis").GestureOrientation;
+            touchMultiplier: number;
+            wheelMultiplier: number;
+            autoResize: boolean;
+            overscroll: boolean;
+            autoRaf: boolean;
+            anchors: boolean | {
+                offset?: number | undefined;
+                immediate?: boolean | undefined;
+                lock?: boolean | undefined;
+                duration?: number | undefined;
+                easing?: import("lenis").EasingFunction | undefined;
+                lerp?: number | undefined;
+                onStart?: ((lenis: Lenis) => void) | undefined;
+                onComplete?: ((lenis: Lenis) => void) | undefined;
+                force?: boolean | undefined;
+                programmatic?: boolean | undefined;
+                userData?: import("lenis").UserData | undefined;
+            };
+            autoToggle: boolean;
+            allowNestedScroll: boolean;
+            __experimental__naiveDimensions: boolean;
+            virtualScroll?: ((data: import("lenis").VirtualScrollData) => boolean) | undefined;
+            duration?: number | undefined;
+            easing?: import("lenis").EasingFunction | undefined;
+            prevent?: ((node: HTMLElement) => boolean) | undefined;
+        };
+        targetScroll: number;
+        animatedScroll: number;
+        readonly dimensions: {
+            width: number;
+            height: number;
+            scrollHeight: number;
+            scrollWidth: number;
+            destroy: () => void;
+            resize: () => void;
+            onWrapperResize: () => void;
+            onContentResize: () => void;
+            readonly limit: {
+                x: number;
+                y: number;
+            };
+        };
+        destroy: () => void;
+        on: {
+            (event: "scroll", callback: import("lenis").ScrollCallback): () => void;
+            (event: "virtual-scroll", callback: import("lenis").VirtualScrollCallback): () => void;
+        };
+        off: {
+            (event: "scroll", callback: import("lenis").ScrollCallback): void;
+            (event: "virtual-scroll", callback: import("lenis").VirtualScrollCallback): void;
+        };
+        resize: () => void;
+        start: () => void;
+        stop: () => void;
+        raf: (time: number) => void;
+        scrollTo: (target: number | string | HTMLElement, { offset, immediate, lock, duration, easing, lerp, onStart, onComplete, force, programmatic, userData, }?: import("lenis").ScrollToOptions) => void;
+        readonly rootElement: HTMLElement;
+        readonly limit: number;
+        readonly isHorizontal: boolean;
+        readonly actualScroll: number;
+        readonly scroll: number;
+        readonly progress: number;
+        isScrolling: import("lenis").Scrolling;
+        isStopped: boolean;
+        isLocked: boolean;
+        readonly isSmooth: boolean;
+        readonly className: string;
+    } | null, Lenis | {
+        isTouching?: boolean | undefined;
+        time: number;
+        userData: import("lenis").UserData;
+        lastVelocity: number;
+        velocity: number;
+        direction: 1 | -1 | 0;
+        options: {
+            wrapper: Window | HTMLElement | Element;
+            content: HTMLElement | Element;
+            eventsTarget: Window | HTMLElement | Element;
+            smoothWheel: boolean;
+            syncTouch: boolean;
+            syncTouchLerp: number;
+            touchInertiaExponent: number;
+            lerp: number;
+            infinite: boolean;
+            orientation: import("lenis").Orientation;
+            gestureOrientation: import("lenis").GestureOrientation;
+            touchMultiplier: number;
+            wheelMultiplier: number;
+            autoResize: boolean;
+            overscroll: boolean;
+            autoRaf: boolean;
+            anchors: boolean | {
+                offset?: number | undefined;
+                immediate?: boolean | undefined;
+                lock?: boolean | undefined;
+                duration?: number | undefined;
+                easing?: import("lenis").EasingFunction | undefined;
+                lerp?: number | undefined;
+                onStart?: ((lenis: Lenis) => void) | undefined;
+                onComplete?: ((lenis: Lenis) => void) | undefined;
+                force?: boolean | undefined;
+                programmatic?: boolean | undefined;
+                userData?: import("lenis").UserData | undefined;
+            };
+            autoToggle: boolean;
+            allowNestedScroll: boolean;
+            __experimental__naiveDimensions: boolean;
+            virtualScroll?: ((data: import("lenis").VirtualScrollData) => boolean) | undefined;
+            duration?: number | undefined;
+            easing?: import("lenis").EasingFunction | undefined;
+            prevent?: ((node: HTMLElement) => boolean) | undefined;
+        };
+        targetScroll: number;
+        animatedScroll: number;
+        readonly dimensions: {
+            width: number;
+            height: number;
+            scrollHeight: number;
+            scrollWidth: number;
+            destroy: () => void;
+            resize: () => void;
+            onWrapperResize: () => void;
+            onContentResize: () => void;
+            readonly limit: {
+                x: number;
+                y: number;
+            };
+        };
+        destroy: () => void;
+        on: {
+            (event: "scroll", callback: import("lenis").ScrollCallback): () => void;
+            (event: "virtual-scroll", callback: import("lenis").VirtualScrollCallback): () => void;
+        };
+        off: {
+            (event: "scroll", callback: import("lenis").ScrollCallback): void;
+            (event: "virtual-scroll", callback: import("lenis").VirtualScrollCallback): void;
+        };
+        resize: () => void;
+        start: () => void;
+        stop: () => void;
+        raf: (time: number) => void;
+        scrollTo: (target: number | string | HTMLElement, { offset, immediate, lock, duration, easing, lerp, onStart, onComplete, force, programmatic, userData, }?: import("lenis").ScrollToOptions) => void;
+        readonly rootElement: HTMLElement;
+        readonly limit: number;
+        readonly isHorizontal: boolean;
+        readonly actualScroll: number;
+        readonly scroll: number;
+        readonly progress: number;
+        isScrolling: import("lenis").Scrolling;
+        isStopped: boolean;
+        isLocked: boolean;
+        readonly isSmooth: boolean;
+        readonly className: string;
+    } | null>;
+    destroy: () => void;
+    createInstance?: undefined;
+} | {
+    lenis: Ref<{
+        isTouching?: boolean | undefined;
+        time: number;
+        userData: import("lenis").UserData;
+        lastVelocity: number;
+        velocity: number;
+        direction: 1 | -1 | 0;
+        options: {
+            wrapper: Window | HTMLElement | Element;
+            content: HTMLElement | Element;
+            eventsTarget: Window | HTMLElement | Element;
+            smoothWheel: boolean;
+            syncTouch: boolean;
+            syncTouchLerp: number;
+            touchInertiaExponent: number;
+            lerp: number;
+            infinite: boolean;
+            orientation: import("lenis").Orientation;
+            gestureOrientation: import("lenis").GestureOrientation;
+            touchMultiplier: number;
+            wheelMultiplier: number;
+            autoResize: boolean;
+            overscroll: boolean;
+            autoRaf: boolean;
+            anchors: boolean | {
+                offset?: number | undefined;
+                immediate?: boolean | undefined;
+                lock?: boolean | undefined;
+                duration?: number | undefined;
+                easing?: import("lenis").EasingFunction | undefined;
+                lerp?: number | undefined;
+                onStart?: ((lenis: Lenis) => void) | undefined;
+                onComplete?: ((lenis: Lenis) => void) | undefined;
+                force?: boolean | undefined;
+                programmatic?: boolean | undefined;
+                userData?: import("lenis").UserData | undefined;
+            };
+            autoToggle: boolean;
+            allowNestedScroll: boolean;
+            __experimental__naiveDimensions: boolean;
+            virtualScroll?: ((data: import("lenis").VirtualScrollData) => boolean) | undefined;
+            duration?: number | undefined;
+            easing?: import("lenis").EasingFunction | undefined;
+            prevent?: ((node: HTMLElement) => boolean) | undefined;
+        };
+        targetScroll: number;
+        animatedScroll: number;
+        readonly dimensions: {
+            width: number;
+            height: number;
+            scrollHeight: number;
+            scrollWidth: number;
+            destroy: () => void;
+            resize: () => void;
+            onWrapperResize: () => void;
+            onContentResize: () => void;
+            readonly limit: {
+                x: number;
+                y: number;
+            };
+        };
+        destroy: () => void;
+        on: {
+            (event: "scroll", callback: import("lenis").ScrollCallback): () => void;
+            (event: "virtual-scroll", callback: import("lenis").VirtualScrollCallback): () => void;
+        };
+        off: {
+            (event: "scroll", callback: import("lenis").ScrollCallback): void;
+            (event: "virtual-scroll", callback: import("lenis").VirtualScrollCallback): void;
+        };
+        resize: () => void;
+        start: () => void;
+        stop: () => void;
+        raf: (time: number) => void;
+        scrollTo: (target: number | string | HTMLElement, { offset, immediate, lock, duration, easing, lerp, onStart, onComplete, force, programmatic, userData, }?: import("lenis").ScrollToOptions) => void;
+        readonly rootElement: HTMLElement;
+        readonly limit: number;
+        readonly isHorizontal: boolean;
+        readonly actualScroll: number;
+        readonly scroll: number;
+        readonly progress: number;
+        isScrolling: import("lenis").Scrolling;
+        isStopped: boolean;
+        isLocked: boolean;
+        readonly isSmooth: boolean;
+        readonly className: string;
+    } | null, Lenis | {
+        isTouching?: boolean | undefined;
+        time: number;
+        userData: import("lenis").UserData;
+        lastVelocity: number;
+        velocity: number;
+        direction: 1 | -1 | 0;
+        options: {
+            wrapper: Window | HTMLElement | Element;
+            content: HTMLElement | Element;
+            eventsTarget: Window | HTMLElement | Element;
+            smoothWheel: boolean;
+            syncTouch: boolean;
+            syncTouchLerp: number;
+            touchInertiaExponent: number;
+            lerp: number;
+            infinite: boolean;
+            orientation: import("lenis").Orientation;
+            gestureOrientation: import("lenis").GestureOrientation;
+            touchMultiplier: number;
+            wheelMultiplier: number;
+            autoResize: boolean;
+            overscroll: boolean;
+            autoRaf: boolean;
+            anchors: boolean | {
+                offset?: number | undefined;
+                immediate?: boolean | undefined;
+                lock?: boolean | undefined;
+                duration?: number | undefined;
+                easing?: import("lenis").EasingFunction | undefined;
+                lerp?: number | undefined;
+                onStart?: ((lenis: Lenis) => void) | undefined;
+                onComplete?: ((lenis: Lenis) => void) | undefined;
+                force?: boolean | undefined;
+                programmatic?: boolean | undefined;
+                userData?: import("lenis").UserData | undefined;
+            };
+            autoToggle: boolean;
+            allowNestedScroll: boolean;
+            __experimental__naiveDimensions: boolean;
+            virtualScroll?: ((data: import("lenis").VirtualScrollData) => boolean) | undefined;
+            duration?: number | undefined;
+            easing?: import("lenis").EasingFunction | undefined;
+            prevent?: ((node: HTMLElement) => boolean) | undefined;
+        };
+        targetScroll: number;
+        animatedScroll: number;
+        readonly dimensions: {
+            width: number;
+            height: number;
+            scrollHeight: number;
+            scrollWidth: number;
+            destroy: () => void;
+            resize: () => void;
+            onWrapperResize: () => void;
+            onContentResize: () => void;
+            readonly limit: {
+                x: number;
+                y: number;
+            };
+        };
+        destroy: () => void;
+        on: {
+            (event: "scroll", callback: import("lenis").ScrollCallback): () => void;
+            (event: "virtual-scroll", callback: import("lenis").VirtualScrollCallback): () => void;
+        };
+        off: {
+            (event: "scroll", callback: import("lenis").ScrollCallback): void;
+            (event: "virtual-scroll", callback: import("lenis").VirtualScrollCallback): void;
+        };
+        resize: () => void;
+        start: () => void;
+        stop: () => void;
+        raf: (time: number) => void;
+        scrollTo: (target: number | string | HTMLElement, { offset, immediate, lock, duration, easing, lerp, onStart, onComplete, force, programmatic, userData, }?: import("lenis").ScrollToOptions) => void;
+        readonly rootElement: HTMLElement;
+        readonly limit: number;
+        readonly isHorizontal: boolean;
+        readonly actualScroll: number;
+        readonly scroll: number;
+        readonly progress: number;
+        isScrolling: import("lenis").Scrolling;
+        isStopped: boolean;
+        isLocked: boolean;
+        readonly isSmooth: boolean;
+        readonly className: string;
+    } | null>;
+    createInstance: (customOptions?: LenisOptions) => Lenis | null;
+    destroy: () => void;
+};
+export {};

package/dist/runtime/composables/useLenis.js

@@ -0,0 +1,101 @@
+import Lenis from "lenis";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { computed, onMounted, onUnmounted, isRef, ref } from "vue";
+import { useClientOnly, useGSAP, watch } from "#imports";
+const globalLenis = ref(null);
+const globalDestroy = () => {
+  if (globalLenis.value) {
+    globalLenis.value.destroy();
+    globalLenis.value = null;
+  }
+};
+export const useLenis = (wrapperOrOptions) => {
+  const { isClient } = useClientOnly();
+  const gsap = useGSAP();
+  if (!wrapperOrOptions) {
+    return {
+      lenis: globalLenis,
+      destroy: globalDestroy
+    };
+  }
+  const lenis = ref(null);
+  const options = computed(() => {
+    if (!isClient.value) return {};
+    if (typeof wrapperOrOptions === "string" || wrapperOrOptions instanceof HTMLElement) {
+      return { wrapper: wrapperOrOptions };
+    }
+    if (isRef(wrapperOrOptions)) {
+      return { wrapper: wrapperOrOptions.value };
+    }
+    return wrapperOrOptions || {};
+  });
+  const initLenis = (customOptions = {}) => {
+    if (!isClient.value) return null;
+    const currentOptions = options.value;
+    if (currentOptions.wrapper === void 0) {
+      return null;
+    }
+    const lenisOptions = {
+      wrapper: window,
+      // Default to window/body instead of #scroller
+      ...currentOptions,
+      ...customOptions
+    };
+    let wrapper = lenisOptions.wrapper;
+    if (typeof wrapper === "string") {
+      wrapper = document.querySelector(wrapper) || window;
+    }
+    const lenisInstance = new Lenis({
+      ...lenisOptions,
+      wrapper
+    });
+    lenisInstance.on("scroll", ScrollTrigger.update);
+    gsap.ticker.add((time) => {
+      lenisInstance.raf(time * 1e3);
+    });
+    gsap.ticker.lagSmoothing(0);
+    return lenisInstance;
+  };
+  const createInstance = (customOptions = {}) => {
+    const instance = initLenis(customOptions);
+    if (!lenis.value) {
+      lenis.value = instance;
+    }
+    return instance;
+  };
+  const destroy = () => {
+    if (lenis.value) {
+      lenis.value.destroy();
+      lenis.value = null;
+    }
+  };
+  watch(
+    () => options.value.wrapper,
+    (newWrapper) => {
+      if (newWrapper && !lenis.value) {
+        lenis.value = initLenis();
+        if (newWrapper === "#scroller" || typeof newWrapper === "object" && newWrapper?.id === "scroller") {
+          globalLenis.value = lenis.value;
+        }
+      }
+    },
+    { immediate: true }
+  );
+  onMounted(() => {
+    if (!lenis.value) {
+      lenis.value = initLenis();
+      const currentWrapper = options.value.wrapper;
+      if (currentWrapper === "#scroller" || typeof currentWrapper === "object" && currentWrapper?.id === "scroller") {
+        globalLenis.value = lenis.value;
+      }
+    }
+  });
+  onUnmounted(() => {
+    destroy();
+  });
+  return {
+    lenis,
+    createInstance,
+    destroy
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluhar/app",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "description": "Gluhar main package. This combines and configures @gluhar/theme, @gluhar/i18n, @gluhar/sanity and @gluhar/core into one main package. Provides numerous components, composables, utils and types.",
   "license": "MIT",
   "type": "module",
@@ -48,6 +48,7 @@
     "@sanity/image-url": "^1.1.0",
     "dayjs-nuxt": "^2.1.11",
     "defu": "^6.1.4",
+    "lenis": "^1.3.11",
     "pinia": "^2.2.2",
     "v-gsap-nuxt": "^1.4.2"
   },
@@ -63,5 +64,5 @@
     "nuxt": "^3.13.1",
     "vitest": "^2.0.5"
   },
-  "gitHead": "0ce5211ad166a7731e3e20f771d6adf4d47fb38b"
+  "gitHead": "12d17bee9d86790a8f21e2788c5d4b3c8df6ef5c"
 }