itube-specs 0.0.363 → 0.0.364

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,14 +19,13 @@
     >
       <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
@@ -39,13 +38,11 @@
             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="{ class: 's-dropdown__item' }"></slot>
+          <slot name="items" v-bind="'s-dropdown__item'"></slot>
         </div>
       </dialog>
     </transition>
@@ -53,12 +50,12 @@
 </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 +67,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);
-
-onMounted(() => {
-  bodyElement.value = document.body;
-});
+// Блокируем скролл body при открытии на мобильных
+const bodyScrollLocked = useScrollLock(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();
+    });
   }
-}
-
-// Клик вне дропдауна
-watch(
-  open,
-  (isOpen) => {
-    if (isOpen && process.client && dropdownRef.value) {
-      onClickOutside(dropdownRef.value, () => {
-        close();
-      });
-    }
-  },
-  { immediate: true }
-);
+}, { 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

@@ -2,13 +2,16 @@
   <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
@@ -18,13 +21,16 @@
             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>
@@ -32,71 +38,58 @@
 </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
-      }
-    } else if (isOpen && !props.popup) {
-      notification.value.show()
-    } else if (!isOpen && !props.popup) {
-      notification.value.close()
+  (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();
     }
   },
   { 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,146 @@
 <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"
+    <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')"
       >
-        <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>
+        <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>
-
-    <transition mode="out-in">
-      <SSnackbar v-if="snackbarText && isSnackBarInPopup" />
-    </transition>
-  </dialog>
+    <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>
 </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 +151,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.364",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {