itube-specs 0.0.363 → 0.0.365

package/components/ui/s-dropdown.vue

@@ -1,64 +1,63 @@
 <template>
-  <div
-      ref="dropdownRef"
-      class="s-dropdown"
-      :style="`--max-height: ${getMaxHeight}`"
-      :class="[
-        { '--top': top },
-        { '--right': right },
-        { '--center': center },
-        { '--open': open },
-        { '--separate': separateLastChild },
-      ]"
-      @mouseleave="mouseHandler(false)"
-      @mouseover="mouseHandler(true)"
-  >
+  <ClientOnly>
     <div
-        class="s-dropdown__trigger"
-        @click="openDropdown"
+        ref="dropdownRef"
+        class="s-dropdown"
+        :style="`--max-height: ${getMaxHeight}`"
+        :class="[
+          {'--top': top},
+          {'--right': right},
+          {'--center': center},
+          {'--open': open},
+          {'--separate': separateLastChild},
+      ]"
+        @mouseleave="mouseHandler(false)"
+        @mouseover="mouseHandler(true)"
     >
-      <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 }"
-          @click="close"
+      <div
+          class="s-dropdown__trigger"
+          @click="openDropdown"
       >
-        <button
-            class="s-dropdown__sheet-close _to-sm"
-            type="button"
-            @click="close"
-        ></button>
-        <button
-            class="s-dropdown__crest _to-sm"
-            type="button"
+        <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}"
             @click="close"
         >
-          <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="{ class: 's-dropdown__item' }"></slot>
-        </div>
-      </dialog>
-    </transition>
-  </div>
+          <button
+              class="s-dropdown__sheet-close _to-sm"
+              type="button"
+              @click="close"
+          ></button>
+          <button
+              class="s-dropdown__crest _to-sm"
+              type="button"
+              @click="close"
+          >
+            <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>
+          </div>
+        </dialog>
+      </transition>
+    </div>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
+// На компоненте обязательно вызывать пропсы слота и вешать слот пропс (className) на непосредственных детей
 import { onClickOutside, useScrollLock } from '@vueuse/core';
 import { isMobile } from '../../runtime';
 import type { CssBreakpoints } from '../../types';
 
-const dropdownRef = ref<HTMLElement | null>(null);
+const dropdownRef = ref<HTMLDialogElement | null>(null);
 const menuRef = ref<HTMLDialogElement | null>(null);
 
 const props = withDefaults(defineProps<{
@@ -70,77 +69,57 @@ const props = withDefaults(defineProps<{
   openByClick?: boolean;
   useVIf?: boolean;
 }>(), {
-  useVIf: false,
+  useVIf: false
 });
 
 const open = ref(false);
 
 const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
 
-// SSR-safe: тело страницы доступно только на клиенте
-const bodyElement = ref<HTMLElement | null>(null);
-const bodyScrollLocked = useScrollLock(bodyElement);
+// Блокируем скролл body при открытии на мобильных
+const bodyScrollLocked = useScrollLock(document.body);
 
-onMounted(() => {
-  bodyElement.value = document.body;
-});
-
-// Закрытие дропдауна
 function close() {
   open.value = false;
 
-  if (isMobile(breakpoints).value && process.client) {
+  if (isMobile(breakpoints).value) {
     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 && process.client) {
+  if (isMobile(breakpoints).value) {
     open.value = true;
 
     nextTick(() => {
       if (menuRef.value?.showModal) {
         menuRef.value.showModal();
-        bodyScrollLocked.value = true;
+        bodyScrollLocked.value = true; // блокируем
       }
     });
   }
 }
 
-// Ховер-логика только на десктопе и без openByClick
-function mouseHandler(isEnter: boolean) {
-  if (!isMobile(breakpoints).value && !props.openByClick && process.client) {
-    open.value = isEnter;
+watch(open, (isOpen) => {
+  if (isOpen) {
+    onClickOutside(dropdownRef, () => {
+      close();
+    });
   }
-}
+}, { immediate: true });
 
-// Клик вне дропдауна
-watch(
-  open,
-  (isOpen) => {
-    if (isOpen && process.client && dropdownRef.value) {
-      onClickOutside(dropdownRef.value, () => {
-        close();
-      });
-    }
-  },
-  { immediate: true }
-);
-
-// Гарантированная разблокировка скролла при уходе со страницы
-onBeforeUnmount(() => {
-  if (process.client) {
-    bodyScrollLocked.value = false;
+function mouseHandler(event: boolean) {
+  if (!isMobile(breakpoints).value && !props.openByClick) {
+    open.value = event;
   }
-});
+}
 
 const getMaxHeight = computed(() => {
   return props.maxHeight ? `${props.maxHeight}px` : 'none';

package/components/ui/s-notification.vue

@@ -1,102 +1,97 @@
 <template>
-  <dialog
-      ref="notification"
-      class="s-notification"
-      :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">
-          <slot name="title"></slot>
-        </p>
-        <button
-            class="s-notification__close"
-            type="button"
-            title="close"
-            aria-label="close"
-            @click="close"
+  <ClientOnly>
+    <dialog
+        ref="notification"
+        class="s-notification"
+        :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"
+          >
+            <slot name="title"></slot>
+          </p>
+          <button
+              class="s-notification__close"
+              type="button"
+              title="close"
+              aria-label="close"
+              @click="close"
+          >
+            <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"
         >
-          <SIcon class="s-notification__close-icon" name="close" size="16" />
-        </button>
-      </header>
-      <div class="s-notification__content">
-        <slot></slot>
+          <slot name="footer"></slot>
+        </div>
       </div>
-      <div v-if="$slots.footer" class="s-notification__footer">
-        <slot name="footer"></slot>
-      </div>
-    </div>
-  </dialog>
+    </dialog>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
-import { useScrollLock } from '@vueuse/core'
-import { onBackdropClick } from '../../runtime'
+import { ref, watch, 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<{
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'close'): void
-}>()
+  (eventName: 'update:modelValue', value: boolean): void
+  (eventName: 'close'): void
+}>();
 
 const props = defineProps<{
   modelValue: boolean
   popup?: boolean
-}>()
-
-// Создаём элемент ТОЛЬКО на клиенте
-const bodyElement = ref<HTMLElement | null>(null)
-const isBodyScrollLocked = useScrollLock(bodyElement)
+}>();
 
-// Инициализируем body только после монтирования на клиенте
-onMounted(() => {
-  bodyElement.value = document.body
-})
+// Блокировка скролла тела страницы (body) при открытом модальном окне
+const bodyElement = ref(document.body);
+const isBodyScrollLocked = useScrollLock(bodyElement);
 
-// Реактивно управляем открытием/закрытием и блокировкой скролла
 watch(
-  () => props.modelValue,
-  (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
+    () => 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();
       }
-    } else if (isOpen && !props.popup) {
-      notification.value.show()
-    } else if (!isOpen && !props.popup) {
-      notification.value.close()
-    }
-  },
-  { immediate: true }
-)
+    },
+    { immediate: true }
+);
 
-// Гарантированная разблокировка при уходе со страницы
+// Дополнительная очистка при размонтировании (на всякий случай)
 onBeforeUnmount(() => {
-  if (process.client) {
-    isBodyScrollLocked.value = false
-  }
-})
+  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,143 +1,148 @@
 <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>
-
-      <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')"
+  <ClientOnly>
+    <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"
         >
-          <SIcon name="angle-left" size="24" />
-        </button>
-
-        <div v-if="$slots.title" class="s-popup__title">
-          <slot name="title"></slot>
+          <button
+              class="s-popup__sheet-handler"
+              type="button"
+              @click="close"
+          ></button>
         </div>
 
-        <button
-            class="s-popup__close"
-            type="button"
-            @click="close"
+        <aside
+            v-if="$slots.aside && !isMobile(breakpoints).value"
+            class="s-popup__aside"
         >
-          <SIcon name="close" size="24" />
-        </button>
-      </header>
+          <slot name="aside"></slot>
+        </aside>
 
-      <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>
+        <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>
       </div>
-    </div>
 
-    <transition mode="out-in">
-      <SSnackbar v-if="snackbarText && isSnackBarInPopup" />
-    </transition>
-  </dialog>
+      <transition mode="out-in">
+        <SSnackbar
+            v-if="snackbarText && isSnackBarInPopup"
+        />
+      </transition>
+    </dialog>
+  </ClientOnly>
 </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';
 
-const popupRef = ref<HTMLDialogElement | null>(null);
+const { resetSnackbar } = useSnackbar();
 
+const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+const popupRef = ref()
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
-  (e: 'back'): void;
-  (e: 'close'): void;
-}>();
+  (eventName: 'update:modelValue', value: boolean): void
+  (eventName: 'back'): void
+  (eventName: 'close'): void
+}>()
 
 const props = defineProps<{
-  modelValue: boolean;
-  back?: boolean;
-  transparentBackdrop?: boolean;
-  sheet?: boolean;
-  title?: string;
-  notModal?: boolean;
-}>();
-
-const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+  modelValue: boolean
+  back?: boolean
+  transparentBackdrop?: boolean
+  sheet?: boolean
+  title?: string
+  notModal?: boolean
+}>()
+
+const isLocked = useScrollLock(
+    typeof document !== 'undefined' ? document.body : null
+);
 
-// SSR-safe scroll lock
-const bodyElement = ref<HTMLElement | null>(null);
-const isLocked = useScrollLock(bodyElement);
+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 }
+);
 
 onMounted(() => {
-  bodyElement.value = document.body;
-
-  // Включаем режим отображения снакбара внутри попапа
   isSnackBarInPopup.value = true;
   resetSnackbar();
 });
 
 onBeforeUnmount(() => {
   isSnackBarInPopup.value = false;
-  if (process.client) {
-    isLocked.value = false;
-  }
+  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);
@@ -148,6 +153,5 @@ function closeByBackdropClick(event: Event) {
   onBackdropClick(target, close);
 }
 
-// Доступ к состоянию снакбара
-const { snackbarText, isSnackBarInPopup, resetSnackbar } = useSnackbar();
+const { snackbarText, isSnackBarInPopup } = useSnackbar();
 </script>

package/package.json

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