itube-specs 0.0.361 → 0.0.362

package/components/ui/s-dropdown.vue

@@ -4,11 +4,11 @@
       class="s-dropdown"
       :style="`--max-height: ${getMaxHeight}`"
       :class="[
-          {'--top': top},
-          {'--right': right},
-          {'--center': center},
-          {'--open': open},
-          {'--separate': separateLastChild},
+        { '--top': top },
+        { '--right': right },
+        { '--center': center },
+        { '--open': open },
+        { '--separate': separateLastChild },
       ]"
       @mouseleave="mouseHandler(false)"
       @mouseover="mouseHandler(true)"
@@ -19,13 +19,14 @@
     >
       <slot name="trigger"></slot>
     </div>
+
     <transition name="s-dropdown" mode="out-in">
       <dialog
           v-if="useVIf ? open && $slots.items : true"
           :style="!useVIf ? { display: (open && $slots.items) ? '' : 'none' } : {}"
           ref="menuRef"
           class="s-dropdown__menu"
-          :class="{'--open': open}"
+          :class="{ '--open': open }"
           @click="close"
       >
         <button
@@ -38,11 +39,13 @@
             type="button"
             @click="close"
         >
-          <SIcon name="close" size="16"/>
+          <SIcon name="close" size="16" />
         </button>
+
         <slot name="header"></slot>
+
         <div class="s-dropdown__menu-items" v-if="$slots.items">
-          <slot name="items" v-bind="'s-dropdown__item'"></slot>
+          <slot name="items" v-bind="{ class: 's-dropdown__item' }"></slot>
         </div>
       </dialog>
     </transition>
@@ -50,12 +53,12 @@
 </template>
 
 <script setup lang="ts">
-// На компоненте обязательно вызывать пропсы слота и вешать слот пропс (className) на непосредственных детей
+import { ref, watch, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { onClickOutside, useScrollLock } from '@vueuse/core';
 import { isMobile } from '../../runtime';
 import type { CssBreakpoints } from '../../types';
 
-const dropdownRef = ref<HTMLDialogElement | null>(null);
+const dropdownRef = ref<HTMLElement | null>(null);
 const menuRef = ref<HTMLDialogElement | null>(null);
 
 const props = withDefaults(defineProps<{
@@ -67,57 +70,77 @@ const props = withDefaults(defineProps<{
   openByClick?: boolean;
   useVIf?: boolean;
 }>(), {
-  useVIf: false
+  useVIf: false,
 });
 
 const open = ref(false);
 
 const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
 
-// Блокируем скролл body при открытии на мобильных
-const bodyScrollLocked = useScrollLock(document.body);
+// SSR-safe: тело страницы доступно только на клиенте
+const bodyElement = ref<HTMLElement | null>(null);
+const bodyScrollLocked = useScrollLock(bodyElement);
+
+onMounted(() => {
+  bodyElement.value = document.body;
+});
 
+// Закрытие дропдауна
 function close() {
   open.value = false;
 
-  if (isMobile(breakpoints).value) {
+  if (isMobile(breakpoints).value && process.client) {
     nextTick(() => {
-      menuRef.value?.close?.();
-      bodyScrollLocked.value = false; // разблокируем
+      menuRef.value?.close();
+      bodyScrollLocked.value = false;
     });
   }
 }
 
+// Открытие по клику или ховеру
 function openDropdown() {
   if (props.openByClick) {
     open.value = !open.value;
   }
 
-  if (isMobile(breakpoints).value) {
+  if (isMobile(breakpoints).value && process.client) {
     open.value = true;
 
     nextTick(() => {
       if (menuRef.value?.showModal) {
         menuRef.value.showModal();
-        bodyScrollLocked.value = true; // блокируем
+        bodyScrollLocked.value = true;
       }
     });
   }
 }
 
-watch(open, (isOpen) => {
-  if (isOpen) {
-    onClickOutside(dropdownRef, () => {
-      close();
-    });
+// Ховер-логика только на десктопе и без openByClick
+function mouseHandler(isEnter: boolean) {
+  if (!isMobile(breakpoints).value && !props.openByClick && process.client) {
+    open.value = isEnter;
   }
-}, { immediate: true });
+}
+
+// Клик вне дропдауна
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen && process.client && dropdownRef.value) {
+      onClickOutside(dropdownRef.value, () => {
+        close();
+      });
+    }
+  },
+  { immediate: true }
+);
 
-function mouseHandler(event: boolean) {
-  if (!isMobile(breakpoints).value && !props.openByClick) {
-    open.value = event;
+// Гарантированная разблокировка скролла при уходе со страницы
+onBeforeUnmount(() => {
+  if (process.client) {
+    bodyScrollLocked.value = false;
   }
-}
+});
 
 const getMaxHeight = computed(() => {
   return props.maxHeight ? `${props.maxHeight}px` : 'none';

package/components/ui/s-notification.vue

@@ -2,16 +2,13 @@
   <dialog
       ref="notification"
       class="s-notification"
-      :class="{'--popup': popup}"
+      :class="{ '--popup': popup }"
       @click="closeByBackdropClick"
       @cancel="close"
   >
     <div class="s-notification__wrapper">
       <header class="s-notification__header">
-        <p
-            v-if="$slots.title"
-            class="s-notification__title"
-        >
+        <p v-if="$slots.title" class="s-notification__title">
           <slot name="title"></slot>
         </p>
         <button
@@ -21,16 +18,13 @@
             aria-label="close"
             @click="close"
         >
-          <SIcon class="s-notification__close-icon" name="close" size="16"/>
+          <SIcon class="s-notification__close-icon" name="close" size="16" />
         </button>
       </header>
       <div class="s-notification__content">
         <slot></slot>
       </div>
-      <div
-          v-if="$slots.footer"
-          class="s-notification__footer"
-      >
+      <div v-if="$slots.footer" class="s-notification__footer">
         <slot name="footer"></slot>
       </div>
     </div>
@@ -38,58 +32,71 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onBeforeUnmount } from 'vue';
-import { useScrollLock } from '@vueuse/core';
-import { onBackdropClick } from '../../runtime'; // оставляем, если используется где-то ещё
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useScrollLock } from '@vueuse/core'
+import { onBackdropClick } from '../../runtime'
 
-const notification = ref<HTMLDialogElement | null>(null);
+const notification = ref<HTMLDialogElement | null>(null)
 
 const emit = defineEmits<{
-  (eventName: 'update:modelValue', value: boolean): void
-  (eventName: 'close'): void
-}>();
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'close'): void
+}>()
 
 const props = defineProps<{
   modelValue: boolean
   popup?: boolean
-}>();
+}>()
+
+// Создаём элемент ТОЛЬКО на клиенте
+const bodyElement = ref<HTMLElement | null>(null)
+const isBodyScrollLocked = useScrollLock(bodyElement)
 
-// Блокировка скролла тела страницы (body) при открытом модальном окне
-const bodyElement = ref(document.body);
-const isBodyScrollLocked = useScrollLock(bodyElement);
+// Инициализируем body только после монтирования на клиенте
+onMounted(() => {
+  bodyElement.value = document.body
+})
 
+// Реактивно управляем открытием/закрытием и блокировкой скролла
 watch(
   () => props.modelValue,
-  (newVal) => {
-    if (newVal && props.popup) {
-      // Открываем dialog и блокируем скролл
-      notification.value?.showModal();
-      isBodyScrollLocked.value = true;
-    } else if (!newVal && props.popup) {
-      // Закрываем и разблокируем
-      notification.value?.close();
-      isBodyScrollLocked.value = false;
-    } else if (newVal && !props.popup) {
-      notification.value?.show();
-    } else if (!newVal && !props.popup) {
-      notification.value?.close();
+  (isOpen) => {
+    if (!notification.value) return
+
+    if (isOpen && props.popup) {
+      notification.value.showModal()
+      // Блокировка только если мы уже на клиенте и body доступен
+      if (process.client && bodyElement.value) {
+        isBodyScrollLocked.value = true
+      }
+    } else if (!isOpen && props.popup) {
+      notification.value.close()
+      if (process.client) {
+        isBodyScrollLocked.value = false
+      }
+    } else if (isOpen && !props.popup) {
+      notification.value.show()
+    } else if (!isOpen && !props.popup) {
+      notification.value.close()
     }
   },
   { immediate: true }
-);
+)
 
-// Дополнительная очистка при размонтировании (на всякий случай)
+// Гарантированная разблокировка при уходе со страницы
 onBeforeUnmount(() => {
-  isBodyScrollLocked.value = false;
-});
+  if (process.client) {
+    isBodyScrollLocked.value = false
+  }
+})
 
 function close() {
-  emit('close');
-  emit('update:modelValue', false);
+  emit('close')
+  emit('update:modelValue', false)
 }
 
 function closeByBackdropClick(event: Event) {
-  const target = event.target as HTMLDialogElement;
-  onBackdropClick(target, close);
+  const target = event.target as HTMLDialogElement
+  onBackdropClick(target, close)
 }
 </script>

package/components/ui/s-popup.vue

@@ -1,146 +1,144 @@
 <template>
-<dialog
-    ref="popupRef"
-    class="s-popup"
-    :class="[
-        {'--sheet': sheet},
-        {'--transparent-backdrop': transparentBackdrop},
-        {'--aside': $slots.aside}
-    ]"
-    @click="closeByBackdropClick"
-    @cancel="close"
->
-  <div class="s-popup__wrapper">
-    <div
-        v-if="sheet"
-        class="s-popup__sheet"
-    >
-      <button
-          class="s-popup__sheet-handler"
-          type="button"
-          @click="close"
-      ></button>
-    </div>
+  <dialog
+      ref="popupRef"
+      class="s-popup"
+      :class="[
+        { '--sheet': sheet },
+        { '--transparent-backdrop': transparentBackdrop },
+        { '--aside': $slots.aside }
+      ]"
+      @click="closeByBackdropClick"
+      @cancel="close"
+  >
+    <div class="s-popup__wrapper">
+      <div v-if="sheet" class="s-popup__sheet">
+        <button
+            class="s-popup__sheet-handler"
+            type="button"
+            @click="close"
+        ></button>
+      </div>
 
-    <aside
-        v-if="$slots.aside && !isMobile(breakpoints).value"
-        class="s-popup__aside"
-    >
-      <slot name="aside"></slot>
-    </aside>
-
-    <header
-        class="s-popup__header"
-    >
-      <button
-          v-if="back"
-          class="s-popup__back"
-          type="button"
-          @click="$emit('back')"
-      >
-        <SIcon name="angle-left" size="24" />
-      </button>
-      <div
-          v-if="$slots.title"
-          class="s-popup__title"
+      <aside
+          v-if="$slots.aside && !isMobile(breakpoints).value"
+          class="s-popup__aside"
       >
-        <slot name="title"></slot>
+        <slot name="aside"></slot>
+      </aside>
+
+      <header class="s-popup__header">
+        <button
+            v-if="back"
+            class="s-popup__back"
+            type="button"
+            @click="$emit('back')"
+        >
+          <SIcon name="angle-left" size="24" />
+        </button>
+
+        <div v-if="$slots.title" class="s-popup__title">
+          <slot name="title"></slot>
+        </div>
+
+        <button
+            class="s-popup__close"
+            type="button"
+            @click="close"
+        >
+          <SIcon name="close" size="24" />
+        </button>
+      </header>
+
+      <div v-if="$slots.fixedContent" class="s-popup__subheader">
+        <slot name="fixedContent"></slot>
+      </div>
+
+      <div v-if="$slots.default" class="s-popup__content">
+        <slot></slot>
+      </div>
+
+      <div v-if="$slots.footer" class="s-popup__footer">
+        <slot name="footer"></slot>
       </div>
-      <button
-          class="s-popup__close"
-          type="button"
-          @click="close"
-      >
-        <SIcon name="close" size="24" />
-      </button>
-    </header>
-    <div
-        v-if="$slots.fixedContent"
-        class="s-popup__subheader"
-    >
-      <slot name="fixedContent"></slot>
-    </div>
-    <div
-        v-if="$slots.default"
-        class="s-popup__content"
-    >
-      <slot></slot>
-    </div>
-    <div
-        v-if="$slots.footer"
-        class="s-popup__footer"
-    >
-      <slot name="footer"></slot>
     </div>
-  </div>
-
-  <transition mode="out-in">
-    <SSnackbar
-        v-if="snackbarText && isSnackBarInPopup"
-    />
-  </transition>
-</dialog>
+
+    <transition mode="out-in">
+      <SSnackbar v-if="snackbarText && isSnackBarInPopup" />
+    </transition>
+  </dialog>
 </template>
 
 <script setup lang="ts">
+import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { useScrollLock } from '@vueuse/core';
 import { onBackdropClick, isMobile } from '../../runtime';
 import type { CssBreakpoints } from '../../types';
-import { useScrollLock } from '@vueuse/core';
+import { useSnackbar } from '~/composables/useSnackbar'; // предполагаю, что это composable
 
-const {resetSnackbar} = useSnackbar();
+const popupRef = ref<HTMLDialogElement | null>(null);
 
-const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
-const popupRef = ref()
 const emit = defineEmits<{
-  (eventName: 'update:modelValue', value: boolean): void
-  (eventName: 'back'): void
-  (eventName: 'close'): void
-}>()
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'back'): void;
+  (e: 'close'): void;
+}>();
 
 const props = defineProps<{
-  modelValue: boolean
-  back?: boolean
-  transparentBackdrop?: boolean
-  sheet?: boolean
-  title?: string
-  notModal?: boolean
-}>()
-
-const isLocked = useScrollLock(
-  typeof document !== 'undefined' ? document.body : null
-);
+  modelValue: boolean;
+  back?: boolean;
+  transparentBackdrop?: boolean;
+  sheet?: boolean;
+  title?: string;
+  notModal?: boolean;
+}>();
 
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal) {
-      nextTick(() => {
-        isLocked.value = true;
-
-        if (props.notModal) {
-          popupRef.value?.show();
-        } else {
-          popupRef.value?.showModal();
-        }
-        popupRef.value?.focus({ preventScroll: true });
-      });
-    } else {
-      isLocked.value = false;
-    }
-  },
-  { immediate: true }
-);
+const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+
+// SSR-safe scroll lock
+const bodyElement = ref<HTMLElement | null>(null);
+const isLocked = useScrollLock(bodyElement);
 
 onMounted(() => {
+  bodyElement.value = document.body;
+
+  // Включаем режим отображения снакбара внутри попапа
   isSnackBarInPopup.value = true;
   resetSnackbar();
 });
 
 onBeforeUnmount(() => {
   isSnackBarInPopup.value = false;
-  isLocked.value = false;
+  if (process.client) {
+    isLocked.value = false;
+  }
 });
 
+// Реактивное открытие/закрытие + блокировка скролла
+watch(
+  () => props.modelValue,
+  async (isOpen) => {
+    if (!process.client || !popupRef.value) return;
+
+    if (isOpen) {
+      await nextTick(); // гарантируем, что dialog уже в DOM
+
+      if (props.notModal) {
+        popupRef.value.show();
+      } else {
+        popupRef.value.showModal();
+      }
+
+      popupRef.value.focus({ preventScroll: true });
+      isLocked.value = true;
+    } else {
+      isLocked.value = false;
+      // dialog автоматически закрывается при удалении из DOM, но на всякий случай
+      popupRef.value.close();
+    }
+  },
+  { immediate: true }
+);
+
 function close() {
   emit('close');
   emit('update:modelValue', false);
@@ -151,5 +149,6 @@ function closeByBackdropClick(event: Event) {
   onBackdropClick(target, close);
 }
 
-const { snackbarText, isSnackBarInPopup } = useSnackbar();
+// Доступ к состоянию снакбара
+const { snackbarText, isSnackBarInPopup, resetSnackbar } = useSnackbar();
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.361",
+  "version": "0.0.362",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {