itube-specs 0.0.902 → 0.0.910

package/components/profile/delete.vue

@@ -28,7 +28,7 @@ import { AuthorizationApiService } from '../../services/api/authorization.servic
 
 const { t } = useI18n();
 const { signOut } = useUser(AuthorizationApiService);
-const { showSuccess } = useSnackbar();
+const { show } = useSnackbar();
 
 const loading = ref(false);
 const isConfirmOpen = ref(false);
@@ -38,7 +38,7 @@ async function deleteProfile() {
     loading.value = true;
     await AuthorizationApiService.deleteProfile();
     isConfirmOpen.value = false;
-    showSuccess('profile_deleted');
+    show('profile_deleted');
     signOut();
   } catch (err) {
     console.log(err, 'error delete profile');

package/components/profile/setup.vue

@@ -187,7 +187,7 @@ function setDate(string: string) {
 }
 
 const deletingAvatar = ref(false);
-const { showSuccess } = useSnackbar();
+const { show } = useSnackbar();
 
 async function deleteAvatar() {
   deletingAvatar.value = true;
@@ -196,7 +196,7 @@ async function deleteAvatar() {
     form.value.avatar = '';
     await getProfile(true);
     avatarPreview.value = '';
-    showSuccess('avatar_deleted');
+    show('avatar_deleted');
   } finally {
     deletingAvatar.value = false;
   }

package/components/report/main.vue

@@ -147,8 +147,9 @@
 
 <script setup lang="ts">
 import { reportFormsScheme } from '../../lib';
-import { ReportFormsSubjects, validateEmail, validatePhone } from '../../runtime';
+import { checkDeviceWidth, ReportFormsSubjects, validateEmail, validatePhone } from '../../runtime';
 import type { InputTypes, IReportForm, IReportRequest } from '../../types';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
 const { initRecaptcha, getRecaptchaToken } = useRecaptcha();
 
@@ -180,7 +181,11 @@ const {
   onBack,
 } = useReportPopup();
 
-const showBack = computed(() => activeStep.value !== 'list' || !!onBack.value);
+const { isTablet } = checkDeviceWidth(CSS_BREAKPOINTS);
+
+/* Возврат в меню карточки имеет смысл только там, где оно само — шит (до md);
+   на десктопе стрелка остаётся только для перехода со второго шага на список причин */
+const showBack = computed(() => activeStep.value !== 'list' || (!!onBack.value && isTablet.value));
 
 function handleBack() {
   const callback = onBack.value;
@@ -243,7 +248,7 @@ function onFieldEnter(value: string) {
   else inputRefs.value[ list[ index + 1 ] ]?.focus();
 }
 
-const { showSuccess, showError, resetSnackbar } = useSnackbar();
+const { show, showError, resetSnackbar } = useSnackbar();
 
 function resetForm() {
   Object.keys(form.value).forEach((key) => {
@@ -320,7 +325,7 @@ async function submit() {
     });
     closeReportPopup();
     resetForm();
-    showSuccess('email_send');
+    show('email_send');
   } catch (error) {
     console.log('error send email', error);
     showError('email_error');

package/components/search/input.vue

@@ -97,7 +97,7 @@ $icon-size: 16px;
 .search-input {
   position: relative;
   display: block;
-  border-radius: $radius;
+  border-radius: $radius-12;
 
   @include to-br(sm) {
     background-color: $search-bg--mobile;
@@ -144,15 +144,15 @@ $icon-size: 16px;
 }
 
 .search-field__input::placeholder {
-  @include font-sm;
+  @include to-br(sm) {
+    color: $search-placeholder--mobile;
+  }
 
-    @include to-br(sm) {
-      color: $search-placeholder--mobile;
-    }
+  @include from-br(sm) {
+    @include font-sm;
 
-    @include from-br(sm) {
-        color: $search-placeholder;
-    }
+    color: $search-placeholder;
+  }
 }
 
 .search-field__search {
@@ -165,7 +165,7 @@ $icon-size: 16px;
   color: $input-text;
   padding: 10px;
   background-color: $search-button-bg;
-  border-radius: $radius - 2px;
+  border-radius: $radius-md;
 
   @include from-br(sm) {
     cursor: pointer;

package/components/section/collections.vue

@@ -0,0 +1,110 @@
+<!-- Блок редакционных подборок: заголовок с бейджем, ссылка «все» и сетка карточек + плитка «ещё» -->
+<template>
+  <section
+    v-if="items.length > 0"
+    class="section-collections"
+  >
+    <header class="section-collections__header">
+      <UiSectionTitle
+        :title="t('collections_by')"
+        title-tag="h2"
+        size="xl"
+      >
+        <span class="section-collections__badge">{{ t('editorial') }}</span>
+      </UiSectionTitle>
+
+      <UiLink
+        :to="generateLink(COLLECTIONS_LINK)"
+        theme="secondary"
+        class="section-collections__link"
+      >
+        {{ t('following.view_all') }}
+        <UiIcon
+          name="arrow-right"
+          size="16"
+        />
+      </UiLink>
+    </header>
+
+    <GridPlaylists
+      :items="items"
+      no-actions
+    >
+      <CardCollectionsMore
+        :to="COLLECTIONS_LINK"
+        :text="t('show_more_collections')"
+        :thumbs="restThumbs"
+        :count="restCount"
+      />
+    </GridPlaylists>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { IPlaylistCard, IThumbUrls } from '../../types';
+
+const props = withDefaults(defineProps<{
+  dataItems: IPlaylistCard[]
+  /** Сколько карточек показать до плитки «ещё» */
+  limit?: number
+}>(), {
+  limit: 3,
+});
+
+const COLLECTIONS_LINK = '/playlists/collections';
+
+/** Сетка 4×4 в плитке «ещё» */
+const THUMBS_LIMIT = 16;
+
+const { t } = useI18n();
+
+const { generateLink } = useGenerateLink();
+
+const items = computed(() => (props.dataItems || []).slice(0, props.limit));
+
+const rest = computed(() => (props.dataItems || []).slice(props.limit));
+
+const restCount = computed(() => rest.value.length);
+
+/** Обложки для плитки «ещё»: сначала по первой от каждой скрытой подборки, потом по вторым и так далее */
+const restThumbs = computed(() => {
+  const byIndex = (index: number) => rest.value
+    .map(item => item.thumbUrls?.[index])
+    .filter((thumb): thumb is IThumbUrls => Boolean(thumb));
+
+  return [0, 1, 2, 3].flatMap(index => byIndex(index)).slice(0, THUMBS_LIMIT);
+});
+</script>
+
+<style lang="scss">
+.section-collections {
+  margin-bottom: 40px;
+}
+
+.section-collections__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+  margin-bottom: 24px;
+}
+
+.section-collections__badge {
+  @include font-3xs;
+
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  padding-block: 2px;
+  padding-inline: 8px;
+  font-weight: 600;
+  color: $collections-badge-text;
+  background-color: $collections-badge-bg;
+  border: 1px solid $collections-badge-border;
+  border-radius: $radius-full;
+}
+
+.section-collections__link {
+  flex-shrink: 0;
+}
+</style>

package/components/ui/follow-btn.vue

@@ -0,0 +1,162 @@
+<!-- Кнопка подписки: «Follow» → «Following», при наведении на подписку становится красной «Unfollow». На мобиле только иконка. Отписка сама показывает снекбар с undo -->
+<template>
+  <button
+    :aria-label="ariaLabel"
+    :class="[`--${size}`, { '--following': following }]"
+    class="ui-follow-btn"
+    type="button"
+    @click="onClick"
+  >
+    <UiIcon
+      :name="following ? 'check' : 'plus'"
+      class="ui-follow-btn__icon"
+      size="16"
+    />
+    <span class="ui-follow-btn__label">{{ following ? t('library.following_state') : t('follow') }}</span>
+
+    <template v-if="following">
+      <UiIcon
+        class="ui-follow-btn__icon-hover"
+        name="minus"
+        size="16"
+      />
+      <span class="ui-follow-btn__label-hover">{{ t('unfollow') }}</span>
+    </template>
+  </button>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    /** Имя модели / канала / категории — уходит в aria-label, чтобы кнопки в списке различались на слух */
+    name: string
+    following?: boolean
+    /** `s` — под размеры `UiBtn size="s"` в шапках карточек */
+    size?: 'm' | 's'
+  }>(),
+  {
+    size: 'm',
+  }
+);
+
+const emit = defineEmits<{
+  (eventName: 'toggle'): void,
+}>();
+
+const { t } = useI18n();
+const { show } = useSnackbar();
+
+/**
+ * Снекбар с undo вшит в кнопку: отменять хочется только отписку, и текст у неё всегда
+ * один и тот же — раскладывать эту механику по каждому вызову смысла нет.
+ * Само состояние остаётся у родителя, undo просто переключает подписку обратно.
+ */
+function onClick() {
+  const wasFollowing = props.following;
+
+  emit('toggle');
+
+  if (!wasFollowing) return;
+
+  show('unfollowed', {
+    icon: 'minus',
+    highlight: props.name,
+    onAction: () => emit('toggle'),
+  });
+}
+
+/**
+ * Доступное имя повторяет видимую подпись (Following / Follow), а не действие: иначе
+ * ломается WCAG «Label in Name», ведь на мобиле подписи нет вообще.
+ */
+const ariaLabel = computed(() => props.following
+  ? t('following_aria', { name: props.name })
+  : t('follow_aria', { name: props.name }));
+</script>
+
+<style lang="scss">
+.ui-follow-btn {
+  @include font-sm;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 6px;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  font-weight: 500;
+  border-radius: $radius-md;
+  background-color: $follow-btn-bg;
+  border: 1px solid $follow-btn-border;
+  color: $follow-btn-text;
+
+  @include from-br(sm) {
+    width: 124px;
+    height: auto;
+    padding: 8px 16px;
+  }
+
+  @include hover(background-color, border-color) {
+    background-color: $follow-btn-bg--hover;
+    border-color: $follow-btn-border--hover;
+  }
+}
+
+/* Размер под соседние `UiBtn size="s"`: без фиксированной ширины — в шапке кнопки жмутся по контенту */
+.ui-follow-btn.--s {
+  width: 32px;
+  height: 32px;
+  border-radius: $radius-lg;
+
+  @include from-br(sm) {
+    width: max-content;
+    height: auto;
+    min-height: 32px;
+    padding: 6px 12px;
+  }
+}
+
+.ui-follow-btn.--following {
+  background-color: $follow-btn-following-bg;
+  border-color: $follow-btn-following-border;
+  color: $follow-btn-following-text;
+
+  @include hover(background-color, border-color, color) {
+    background-color: $follow-btn-following-bg--hover;
+    border-color: $follow-btn-following-border--hover;
+    color: $follow-btn-following-text--hover;
+  }
+}
+
+.ui-follow-btn__label {
+  display: none;
+
+  @include from-br(sm) {
+    display: block;
+  }
+}
+
+/* Подмена подписи и иконки — чистым CSS: на тач-устройствах ховера нет, а JS-стейт там «залипал» бы после тапа */
+.ui-follow-btn__icon-hover,
+.ui-follow-btn__label-hover {
+  display: none;
+}
+
+@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 {
+    display: none;
+  }
+
+  .ui-follow-btn.--following: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 {
+      display: block;
+    }
+  }
+}
+</style>

package/components/ui/section-title.vue

@@ -26,6 +26,8 @@
       :icon="icon"
       class="ui-section-title__count"
     >{{ count }}</UiCount>
+    <!-- Доп. бейдж рядом с заголовком (например «editorial») -->
+    <slot/>
   </div>
 </template>
 

package/components/ui/snackbar.vue

@@ -1,33 +1,68 @@
 <template>
   <div
-    :class="`--${snackbarTheme}`"
+    aria-live="polite"
     class="ui-snackbar"
+    role="status"
+    @mouseenter="pauseDismiss"
+    @mouseleave="resumeDismiss"
+    @focusin="pauseDismiss"
+    @focusout="resumeDismiss"
   >
-    <div class="ui-snackbar__icon-wrapper">
+    <span class="ui-snackbar__icon-wrapper">
       <UiIcon
         :name="snackbarIcon"
         class="ui-snackbar__icon"
         size="16"
       />
-    </div>
-    {{
-      te(`snackbar.${convertSnackKey}`)
-        ? t(`snackbar.${convertSnackKey}`)
-        : t('snackbar.something_went_wrong')
-    }}
+    </span>
+    <p class="ui-snackbar__text">
+      <span class="ui-snackbar__message">{{ message }}</span>
+      <strong
+        v-if="snackbarHighlight"
+        class="ui-snackbar__highlight"
+      >{{ snackbarHighlight }}</strong>
+    </p>
+    <button
+      v-if="snackbarActionText"
+      class="ui-snackbar__action"
+      type="button"
+      @click="runSnackbarAction"
+    >
+      {{ actionLabel }}
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { convertString } from '../../runtime';
 
-const { snackbarText, snackbarIcon, snackbarTheme } = useSnackbar();
+const {
+  snackbarText,
+  snackbarIcon,
+  snackbarHighlight,
+  snackbarActionText,
+  runSnackbarAction,
+  pauseDismiss,
+  resumeDismiss,
+} = useSnackbar();
 
 const { t, te } = useI18n();
 
 const convertSnackKey = computed(() =>
   convertString().toSnakeCase(snackbarText.value)
 );
+
+const message = computed(() =>
+  te(`snackbar.${convertSnackKey.value}`)
+    ? t(`snackbar.${convertSnackKey.value}`)
+    : t('snackbar.something_went_wrong')
+);
+
+const actionLabel = computed(() =>
+  te(`snackbar.${snackbarActionText.value}`)
+    ? t(`snackbar.${snackbarActionText.value}`)
+    : t('snackbar.undo')
+);
 </script>
 
 <style lang="scss">
@@ -36,36 +71,38 @@ const convertSnackKey = computed(() =>
 
   position: fixed;
   z-index: $z-index-popup;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 16px;
-  min-width: 100px;
-  width: max-content;
-  max-width: 90vw;
+  bottom: 16px;
+  left: 16px;
+  right: 16px;
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   column-gap: 12px;
   padding: 12px 16px;
-  border-radius: $radius-lg;
+  border: 1px solid $snackbar-border;
+  border-radius: $radius-md;
+  background-color: $snackbar-bg;
   color: $snackbar-text;
+  box-shadow: $snackbar-shadow;
 
   @include from-br(sm) {
-    top: 24px;
-    left: auto;
-    right: 24px;
-    transform: none;
+    left: 0;
+    right: 0;
+    width: max-content;
+    min-width: 300px;
+    max-width: 448px;
+    margin-inline: auto;
   }
-}
 
-.ui-snackbar__close {
-  padding: 4px;
-  border-radius: 4px;
-  color: $snackbar-close;
+  &.v-enter-active,
+  &.v-leave-active {
+    transition: opacity 300ms ease, transform 300ms ease;
+  }
 
-  @include hover(color, background-color) {
-    color: $snackbar-close--hover;
-    background-color: $snackbar-close-bg--hover;
+  &.v-enter-from,
+  &.v-leave-to {
+    opacity: 0;
+    transform: translateY(16px);
   }
 }
 
@@ -75,31 +112,43 @@ const convertSnackKey = computed(() =>
   width: 32px;
   height: 32px;
   border-radius: $radius-full;
+  background-color: $snackbar-icon-bg;
 }
 
-.ui-snackbar.--error {
-  background-color: $snackbar-error-bg;
-  color: $snackbar-error;
+.ui-snackbar__icon {
+  color: $snackbar-icon;
 }
 
-.ui-snackbar.--error .ui-snackbar__icon-wrapper {
-  background-color: $snackbar-error-icon-bg;
+.ui-snackbar__text {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  min-width: 0;
 }
 
-.ui-snackbar.--error .ui-snackbar__icon {
-  color: $snackbar-error-icon;
+.ui-snackbar__message {
+  flex-shrink: 0;
 }
 
-.ui-snackbar.--success {
-  background-color: $snackbar-success-bg;
-  color: $snackbar-success;
+.ui-snackbar__highlight {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  color: $snackbar-highlight;
 }
 
-.ui-snackbar.--success .ui-snackbar__icon-wrapper {
-  background-color: $snackbar-success-icon-bg;
-}
+.ui-snackbar__action {
+  @include font-sm;
 
-.ui-snackbar.--success .ui-snackbar__icon {
-  color: $snackbar-success-icon;
+  padding: 6px 12px;
+  border-radius: $radius-md;
+  font-weight: 600;
+  background-color: $snackbar-action-bg;
+  color: $snackbar-action-text;
+
+  @include hover(background-color) {
+    background-color: $snackbar-action-bg--hover;
+  }
 }
 </style>