nuxt-hs-ui 2.1.6 → 2.1.7

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.15.0"
   },
-  "version": "2.1.6",
+  "version": "2.1.7",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/composables/use-hs-scroll-lock.d.ts

@@ -0,0 +1,15 @@
+export declare const useHsScrollLockPinia: import("pinia").StoreDefinition<"HsScrollLockPinia", Pick<{
+    active: import("vue").Ref<boolean, boolean>;
+    key: import("vue").Ref<string, string>;
+}, "key" | "active">, Pick<{
+    active: import("vue").Ref<boolean, boolean>;
+    key: import("vue").Ref<string, string>;
+}, never>, Pick<{
+    active: import("vue").Ref<boolean, boolean>;
+    key: import("vue").Ref<string, string>;
+}, never>>;
+export declare const useHsScrollLock: () => {
+    unlock: () => void;
+    lock: () => void;
+    init: (element: HTMLElement | null) => void;
+};

package/dist/runtime/composables/use-hs-scroll-lock.js

@@ -0,0 +1,76 @@
+import { defineStore } from "pinia";
+import { GenerateUniqeKey } from "../utils/com.js";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import { ref } from "vue";
+export const useHsScrollLockPinia = defineStore("HsScrollLockPinia", () => {
+  const active = ref(false);
+  const key = ref("");
+  return { active, key };
+});
+export const useHsScrollLock = () => {
+  const scrollY = ref(0);
+  const isIOS = ref(false);
+  const elm = ref(null);
+  const key = GenerateUniqeKey();
+  const hsScrollLockPinia = useHsScrollLockPinia();
+  const checkSafariMobile = () => {
+    if (typeof navigator === "undefined") return false;
+    const ua = navigator.userAgent || "";
+    const isOldIPad = /\(iPad.*OS/.test(ua);
+    const isIpad = /Macintosh/.test(ua) && navigator.maxTouchPoints > 1;
+    const isiOS = /iP(?:ad|hone|od)/.test(ua);
+    console.log({ ua, isOldIPad, isIpad, isiOS });
+    return isOldIPad || isIpad || isiOS;
+  };
+  const init = (element) => {
+    if (element === null) {
+      console.error(
+        "[useScrollLock] Expected a valid HTMLElement in init(), but got null. Make sure to pass the correct ref."
+      );
+      if (import.meta.dev) {
+        throw new Error(
+          "[useScrollLock] Expected a valid HTMLElement in init(), but got null. Make sure to pass the correct ref."
+        );
+      }
+    }
+    elm.value = element;
+    isIOS.value = checkSafariMobile();
+  };
+  const lock = () => {
+    if (hsScrollLockPinia.active) return;
+    hsScrollLockPinia.key = key;
+    hsScrollLockPinia.active = true;
+    if (isIOS.value) {
+      scrollY.value = window.scrollY;
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY.value}px`;
+      document.body.style.left = "0";
+      document.body.style.right = "0";
+      document.body.style.width = "100%";
+    } else {
+      if (!elm.value) return;
+      const options = {
+        // bodyにスクロールバー分のpadding-rightを追加するかどうか（デフォルト値：false）
+        reserveScrollBarGap: true
+      };
+      disableBodyScroll(elm.value, options);
+    }
+  };
+  const unlock = () => {
+    if (hsScrollLockPinia.key !== key) return;
+    hsScrollLockPinia.key = "";
+    hsScrollLockPinia.active = false;
+    if (isIOS.value) {
+      document.body.style.position = "";
+      document.body.style.top = "";
+      document.body.style.left = "";
+      document.body.style.right = "";
+      document.body.style.width = "";
+      window.scrollTo(0, scrollY.value);
+    } else {
+      if (!elm.value) return;
+      enableBodyScroll(elm.value);
+    }
+  };
+  return { unlock, lock, init };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-hs-ui",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "My new Nuxt module",
   "repository": "https://github.com/hare-systems-ryo/nuxt-hs-ui",
   "license": "MIT",