itube-specs 0.0.935 → 0.0.936

package/components/card/video/actions.vue

@@ -22,7 +22,8 @@
       :aria-pressed="later"
       :class="['card-video-actions__btn', '--watch-later', { '--active': later }]"
       type="button"
-      @click="toggleWatchLater(card.guid, card.title)"
+      v-bind="hoverGuard"
+      @click="onWatchLaterClick"
     >
       <UiIcon
         :name="later ? 'clock-filled' : 'clock'"
@@ -44,9 +45,17 @@ const props = defineProps<{
 const { t } = useI18n();
 
 const { isFavorite, isWatchLater, toggleFavorite, toggleWatchLater } = useVideoCollections();
+const { blockHover, hoverGuard } = useHoverGuard();
 
 const favorite = computed(() => isFavorite(props.card.guid));
 const later = computed(() => isWatchLater(props.card.guid));
+
+/* The heart is only rendered while the video is in favorites, so a click always unmounts it — only
+   «watch later» stays under the cursor and needs the hover muted. */
+function onWatchLaterClick() {
+  blockHover();
+  toggleWatchLater(props.card.guid, props.card.title);
+}
 </script>
 
 <style lang="scss">
@@ -104,11 +113,11 @@ $action-size: 36px;
     opacity: 1;
   }
 
-  .card-video-actions__btn:is(:hover, :focus-visible) {
+  .card-video-actions__btn:not(.--active):is(:hover, :focus-visible) {
     background-color: $video-card-action-bg--hover;
   }
 
-  .card-video-actions__btn.--active:is(:hover, :focus-visible) {
+  .card-video-actions__btn.--active:not(.--no-hover):is(:hover, :focus-visible) {
     background-color: $video-card-action-active-bg--hover;
     border-color: $video-card-action-active-border--hover;
     color: $video-card-action-active-icon--hover;

package/components/filter/selects.vue

@@ -107,7 +107,6 @@
 
 <script setup lang="ts">
 import type { IModelFilter } from '../../types';
-import { onClickOutside } from '@vueuse/core';
 import { convertString, checkDeviceWidth } from '../../runtime';
 import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
@@ -178,19 +177,24 @@ function toggleSlider(name: string) {
   }
 }
 
-// Следим за активным слайдером и навешиваем onClickOutside
-watch(activeSliderName, (newName) => {
-  if (!newName) return;
-  const index = mainFilters.value.findIndex(f => f.name === newName);
-  if (index !== -1 && sliderRefs.value[ index ]) {
-    const cleanup = onClickOutside(sliderRefs.value[ index ]!, () => {
-      activeSliderName.value = null;
-      cleanup();
-    });
-  }
+const { isMobile } = checkDeviceWidth(CSS_BREAKPOINTS);
+
+// Слайдер на строке один открытый из многих — «мимо» считаем от корня именно активного.
+// На мобиле слайдер живёт в UiPopup, тот закрывается сам, и сбросить надо только имя.
+const activeSliderEl = computed(() => {
+  if (!activeSliderName.value) return null;
+
+  const index = mainFilters.value.findIndex(f => f.name === activeSliderName.value);
+  return index === -1 ? null : sliderRefs.value[ index ];
 });
 
-const { isMobile } = checkDeviceWidth(CSS_BREAKPOINTS);
+useOverlayClose(activeSliderEl, () => !!activeSliderName.value && !isMobile.value, () => {
+  activeSliderName.value = null;
+});
+
+watch(popupShow, (value) => {
+  if (!value) activeSliderName.value = null;
+});
 
 const sliderEdgeClass = ref<Record<number, string>>({});
 

package/components/layout/burger.vue

@@ -4,6 +4,7 @@
     :class="{'layout-burger--hide': isAuthPopupOpen}"
     class="layout-burger"
     @click="closeByBackdropClick"
+    @cancel.prevent
   >
     <button
       :aria-label="$t('close')"
@@ -144,6 +145,10 @@ function close() {
   emit('update:modelValue', false);
 }
 
+// Диалог висит в разметке всегда, поэтому в стеке — только пока открыт. Нативный `cancel` погашен:
+// браузер закрыл бы его мимо `modelValue`, оставив заблокированный скролл и съев одно нажатие кнопки.
+useEscapeClose(() => props.modelValue, close);
+
 function closeByBackdropClick(event: Event) {
   const target = event.target as HTMLDialogElement;
   onBackdropClick(target, close);

package/components/layout/footer-language.vue

@@ -32,14 +32,12 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core';
-
 const { locale } = useI18n();
 
 const menuRef = ref();
 const isMenuShow = ref(false);
 
-onClickOutside(menuRef, () => {
+useOverlayClose(menuRef, isMenuShow, () => {
   isMenuShow.value = false;
 });
 

package/components/layout/header-user.vue

@@ -107,7 +107,6 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 import { profileNavigationItems } from '../../lib';
 import type { IProfileData } from '../../types';
@@ -118,7 +117,7 @@ const isChildsShow = ref(false);
 
 const data = computed(() => useState<IProfileData>('profileData').value);
 
-onClickOutside(userRef, () => {
+useOverlayClose(userRef, isMenuShow, () => {
   isMenuShow.value = false;
 });
 

package/components/layout/header.vue

@@ -88,7 +88,6 @@
 
 <script setup lang="ts">
 import { AuthSteps } from '../../runtime';
-import { onClickOutside } from '@vueuse/core';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 
 const { locale } = useI18n();
@@ -101,9 +100,7 @@ const { isAuthorized } = useUser(AuthorizationApiService);
 
 const { openAuthPopup } = useAuthPopup();
 
-onClickOutside(languageRef, () => {
-  showLanguage.value = false;
-});
+useOverlayClose(languageRef, showLanguage, closeLanguage);
 
 function showLanguageMenu() {
   showLanguage.value = !showLanguage.value;

package/components/layout/niche.vue

@@ -3,7 +3,6 @@
     v-if="niches.length > 1"
     ref="nicheRef"
     class="layout-niche"
-    @keydown.esc="isOpen = false"
   >
     <button
       :class="{'--open': isOpen}"
@@ -56,7 +55,6 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core';
 import type { Niche } from '../../runtime';
 
 withDefaults(defineProps<{
@@ -71,7 +69,7 @@ const { niches, currentNiche, changeNiche } = useNiches();
 const nicheRef = ref<HTMLElement>();
 const isOpen = ref(false);
 
-onClickOutside(nicheRef, () => {
+useOverlayClose(nicheRef, isOpen, () => {
   isOpen.value = false;
 });
 

package/components/search/main.vue

@@ -51,8 +51,6 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core';
-
 const searchValue = useState('searchValue', () => '');
 
 const searchSlug = useSlug();
@@ -76,10 +74,13 @@ watch(() => route.path, (value) => {
   }
 }, { immediate: true });
 
-onClickOutside(searchRef, () => {
+useOverlayClose(searchRef, isResultShow, () => {
   isResultShow.value = false;
 });
 
+// Мобильный оверлей поиска — свой слой: Esc сначала гасит подсказки, потом сам оверлей
+useEscapeClose(() => searchShow.value && !isResultShow.value, onCloseClick);
+
 watch(isResultShow, (value) => {
   if (value) {
     scrollLock();

package/components/ui/chips-micro.vue

@@ -52,7 +52,6 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core';
 import { convertString } from '../../runtime';
 
 const props = withDefaults(defineProps<{
@@ -157,7 +156,7 @@ function measure() {
 
 useChipsOverflow(listRef, measure);
 
-onClickOutside(rootRef, () => {
+useOverlayClose(rootRef, open, () => {
   open.value = false;
 });
 </script>

package/components/ui/dropdown.vue

@@ -30,6 +30,7 @@
         :class="{'--open': open}"
         class="ui-dropdown__menu"
         @click="close"
+        @cancel.prevent
         @mouseenter="mouseHandler(true)"
         @mouseleave="mouseHandler(false)"
       >
@@ -63,7 +64,6 @@
 // На компоненте обязательно вызывать пропсы слота и вешать слот пропс (className) на непосредственных детей
 import { checkDeviceWidth } from '../../runtime';
 import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
-import { onClickOutside } from '@vueuse/core';
 
 const dropdownRef = ref();
 const menuRef = ref();
@@ -83,9 +83,7 @@ const props = withDefaults(defineProps<{
 const open = ref(false);
 const autoTop = ref(false);
 
-onClickOutside(dropdownRef, () => {
-  open.value = false;
-});
+useOverlayClose(dropdownRef, open, () => close());
 
 const { scrollLock, scrollUnlock } = useGlobalScrollLock();
 

package/components/ui/follow-btn.vue

@@ -5,6 +5,7 @@
     :class="[`--${size}`, { '--following': following }]"
     class="ui-follow-btn"
     type="button"
+    v-bind="hoverGuard"
     @click="onClick"
   >
     <UiIcon
@@ -45,6 +46,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 const { show } = useSnackbar();
+const { blockHover, hoverGuard } = useHoverGuard();
 
 /**
  * Снекбар с undo вшит в кнопку: отменять хочется только отписку, и текст у неё всегда
@@ -54,6 +56,7 @@ const { show } = useSnackbar();
 function onClick() {
   const wasFollowing = props.following;
 
+  blockHover();
   emit('toggle');
 
   if (!wasFollowing) return;
@@ -121,7 +124,10 @@ const ariaLabel = computed(() => props.following
   background-color: $follow-btn-following-bg;
   border-color: $follow-btn-following-border;
   color: $follow-btn-following-text;
+}
 
+/* `--no-hover` is set on click: the red «Unfollow» must not flash under the cursor right after following */
+.ui-follow-btn.--following:not(.--no-hover) {
   @include hover(background-color, border-color, color) {
     background-color: $follow-btn-following-bg--hover;
     border-color: $follow-btn-following-border--hover;
@@ -144,17 +150,17 @@ const ariaLabel = computed(() => props.following
 }
 
 @media (hover: hover) {
-  .ui-follow-btn.--following:is(:hover, :focus-visible) .ui-follow-btn__icon,
-  .ui-follow-btn.--following:is(:hover, :focus-visible) .ui-follow-btn__label {
+  .ui-follow-btn.--following:not(.--no-hover):is(:hover, :focus-visible) .ui-follow-btn__icon,
+  .ui-follow-btn.--following:not(.--no-hover):is(:hover, :focus-visible) .ui-follow-btn__label {
     display: none;
   }
 
-  .ui-follow-btn.--following:is(:hover, :focus-visible) .ui-follow-btn__icon-hover {
+  .ui-follow-btn.--following:not(.--no-hover):is(:hover, :focus-visible) .ui-follow-btn__icon-hover {
     display: block;
   }
 
   @include from-br(sm) {
-    .ui-follow-btn.--following:is(:hover, :focus-visible) .ui-follow-btn__label-hover {
+    .ui-follow-btn.--following:not(.--no-hover):is(:hover, :focus-visible) .ui-follow-btn__label-hover {
       display: block;
     }
   }

package/components/ui/notification.vue

@@ -4,7 +4,7 @@
     :class="{'--popup': popup}"
     class="ui-notification"
     @click="closeByBackdropClick"
-    @cancel="close"
+    @cancel.prevent
   >
     <div class="ui-notification__wrapper">
       <header class="ui-notification__header">
@@ -56,6 +56,11 @@ const props = defineProps<{
   popup?: boolean
 }>();
 
+// Только модальный вариант: немодальный — плашка вроде cookie-баннера, она висит на странице
+// сама по себе и перехватывать ею каждый Esc незачем. `cancel` погашен в разметке, закрытие
+// идёт общим стеком — браузер закрыл бы диалог мимо `modelValue`.
+useEscapeClose(() => !!props.popup, () => close());
+
 onMounted(() => {
   if (props.popup) {
     notification.value.showModal();

package/components/ui/popup.vue

@@ -8,7 +8,7 @@
     ]"
     class="ui-popup"
     @click="closeByBackdropClick"
-    @cancel="close"
+    @cancel.prevent
   >
     <div class="ui-popup__wrapper">
       <header class="ui-popup__header">
@@ -94,6 +94,11 @@ const props = defineProps<{
   notModal?: boolean
 }>();
 
+// Попап живёт в разметке только открытым, поэтому в стеке Esc он с самого монтирования.
+// Нативный `cancel` погашен: браузер закрыл бы диалог мимо `modelValue`, а из-под открытого
+// дропдауна — ещё и вместе с ним, за одно нажатие.
+useEscapeClose(true, () => close());
+
 onMounted(() => {
   enterPopup();
   scrollLock();

package/components/ui/tooltip.vue

@@ -28,7 +28,6 @@
 
 <script setup lang="ts">
 import { checkDeviceWidth } from '../../runtime';
-import { onClickOutside } from '@vueuse/core';
 import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
 const props = defineProps<{
@@ -44,11 +43,10 @@ const contentStyle = ref<Record<string, string>>({});
 const breakpoints = CSS_BREAKPOINTS;
 const { isMobile } = checkDeviceWidth(breakpoints);
 
-onClickOutside(tooltipRef, () => {
-  if (isMobile.value) {
-    isOpen.value = false;
-  }
-});
+// Клик мимо закрывает только на мобиле — на десктопе тултип и так уходит по mouseleave
+useOverlayClose(tooltipRef, isOpen, () => {
+  isOpen.value = false;
+}, { outside: isMobile });
 
 /** Контент в position: fixed — иначе его режет overflow скроллящихся родителей (список в попапе). */
 function open() {

package/composables/use-hover-guard.ts

@@ -0,0 +1,28 @@
+/**
+ * A toggle button sitting under the cursor would show the hover style of its brand new state
+ * right after the click — «Unfollow» red instead of the «Follow» that was just pressed. Mutes
+ * that hover until the pointer (or focus) leaves the button and comes back.
+ *
+ * `hoverGuard` goes on the element as `v-bind`, `blockHover()` — into the click handler.
+ * The muted state is exposed as the `--no-hover` class, so the CSS side is a `:not(.--no-hover)`
+ * on the reversing hover rule only: the plain hover feedback stays untouched.
+ */
+export function useHoverGuard() {
+  const blocked = ref(false);
+
+  function blockHover() {
+    blocked.value = true;
+  }
+
+  function releaseHover() {
+    blocked.value = false;
+  }
+
+  const hoverGuard = computed(() => ({
+    class: blocked.value ? '--no-hover' : null,
+    onPointerleave: releaseHover,
+    onBlur: releaseHover,
+  }));
+
+  return { blockHover, hoverGuard };
+}

package/composables/use-overlay-close.ts

@@ -0,0 +1,92 @@
+import type { MaybeRefOrGetter } from 'vue';
+import type { MaybeComputedElementRef } from '@vueuse/core';
+import { onClickOutside } from '@vueuse/core';
+
+type CloseHandler = () => void;
+
+// Стек, а не слушатель на каждый оверлей: Esc обязан закрывать только верхний слой — иначе
+// дропдаун, открытый из попапа, уносил бы с собой и сам попап.
+const handlers: CloseHandler[] = [];
+
+let listening = false;
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Escape' || event.defaultPrevented) return;
+
+  const handler = handlers.at(-1);
+  if (!handler) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+  handler();
+}
+
+function listen() {
+  if (listening) return;
+
+  // capture: перехватываем раньше полей ввода внутри оверлея — иначе Esc уходит в них
+  document.addEventListener('keydown', onKeydown, true);
+  listening = true;
+}
+
+function unlisten() {
+  if (!listening || handlers.length) return;
+
+  document.removeEventListener('keydown', onKeydown, true);
+  listening = false;
+}
+
+/**
+ * Закрытие по Esc для оверлея без «клика мимо» — модального `<dialog>`, где снаружи закрывает
+ * бэкдроп. Нативный `cancel` у таких диалогов гасится (`@cancel.prevent`) и закрытие идёт сюда:
+ * браузер закрыл бы верхний диалог мимо нашего состояния, а стек снимает ровно один слой.
+ * @param isOpen - открыт ли оверлей сейчас; для компонентов, монтируемых только открытыми, — `true`
+ * @param close - закрытие оверлея
+ */
+export const useEscapeClose = (isOpen: MaybeRefOrGetter<boolean>, close: CloseHandler) => {
+  if (import.meta.server) return;
+
+  const handler: CloseHandler = () => close();
+
+  function push() {
+    if (handlers.includes(handler)) return;
+
+    handlers.push(handler);
+    listen();
+  }
+
+  function pop() {
+    const index = handlers.indexOf(handler);
+    if (index === -1) return;
+
+    handlers.splice(index, 1);
+    unlisten();
+  }
+
+  watch(() => toValue(isOpen), (value) => value ? push() : pop(), { immediate: true });
+
+  onScopeDispose(pop);
+};
+
+/**
+ * Закрытие оверлея двумя привычными способами разом: клик мимо и Esc. Порознь их разносить нечего —
+ * пользователь ждёт обоих, а забытый Esc с виду неотличим от рабочего оверлея.
+ * @param target - корень оверлея: клик вне него считается «мимо»
+ * @param isOpen - открыт ли оверлей сейчас
+ * @param close - закрытие оверлея
+ * @param options.outside - условие для «клика мимо», когда Esc нужен, а клик — нет (тултип на десктопе)
+ */
+export const useOverlayClose = (
+  target: MaybeComputedElementRef,
+  isOpen: MaybeRefOrGetter<boolean>,
+  close: CloseHandler,
+  options: { outside?: MaybeRefOrGetter<boolean> } = {},
+) => {
+  onClickOutside(target, () => {
+    if (!toValue(isOpen) || !toValue(options.outside ?? true)) return;
+
+    close();
+  });
+
+  useEscapeClose(isOpen, close);
+};

package/package.json

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