itube-specs 0.0.649 → 0.0.652

package/components/auth/s-auth-recovery.vue

@@ -15,6 +15,7 @@
         :label="$t('email')"
         :placeholder="$t('email')"
         hide-label
+        inputmode="email"
         autocomplete="email"
         :error="error.email"
         @update:error="(val: boolean) => error.email = val"
@@ -40,7 +41,7 @@
 
 <script setup lang="ts">
 import type { IPasswordForm } from '../../types';
-import { validateEmail } from '../../runtime';
+import { validateEmail } from 'itube-specs/runtime';
 import { AuthorizationApiService } from '~/services/api/authorization.service';
 
 const { initRecaptcha, getRecaptchaToken } = useRecaptcha();

package/components/auth/s-auth-register.vue

@@ -15,6 +15,7 @@
           :placeholder="t('email')"
           :label="t('email')"
           hide-label
+          inputmode="email"
           autocomplete="email"
           :error="error.email"
           @update:error="(val: boolean) => error.email = val"
@@ -80,8 +81,9 @@
 
 <script setup lang="ts">
 import type { IRegistrateForm } from '../../types';
-import { validateEmail, validatePassword, validateUsername } from '../../runtime';
+import { EPlaylistType, validateEmail, validatePassword, validateUsername } from 'itube-specs/runtime';
 import { AuthorizationApiService } from '~/services/api/authorization.service';
+import { PlaylistsApiService } from '~/services/api/playlists.service';
 
 const { initRecaptcha, getRecaptchaToken } = useRecaptcha();
 
@@ -156,11 +158,13 @@ async function submit() {
 
     await useUser(AuthorizationApiService).register(form.value);
 
+    // Создаем сразу Favorites плейлист, возможно костыль убрать когда будет нормальная логика с беком
+    // const { FAVORITES_KEY } = useFavorites();
+    // await PlaylistsApiService.postPlaylist(FAVORITES_KEY, EPlaylistType.Private);
+
     useAuthPopup().closeAuthPopup();
     snackbarTheme.value = 'success';
     snackbarText.value = 'Registration success';
-
-    // ... успех
   } catch (err) {
     setErrorState(err);
     console.error('Ошибка reCAPTCHA или регистрации:', err);

package/components/cards/s-video-mini-card.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script setup lang="ts">
-import type { IVideoCard } from '../../types';
-import { getDuration } from '../../runtime';
+import type { IVideoCard } from 'itube-specs/types';
+import { getDuration } from 'itube-specs/runtime';
 
 const props = defineProps<{
   card: IVideoCard

package/components/page-components/s-filter-page.vue

@@ -31,7 +31,6 @@
                 :name="item.name"
                 :model-value="getSelectValue(item.name)"
                 :items="selectItems(item)"
-                :count="getCount(item)"
                 size="s"
                 :active="isActiveSelect(item.name)"
                 :label="item.title"

package/components/page-components/s-filter-popup.vue

@@ -29,6 +29,10 @@
           :name="item.title"
           :items="item.items"
           :label="item?.label"
+          :label-icon="{
+            icon: item.icon,
+            prefix: 'categories'
+          }"
           :placeholder="item.placeholder"
       />
     </div>

package/components/page-components/s-like.vue

@@ -35,7 +35,7 @@
       <span class="s-like__control-icon-wrapper">
         <SIcon class="s-like__control-icon --dislike" name="thumbs-down" size="16"/>
       </span>
-      <span class="s-like__control-text">{{ formatNumber(Number(resultDislikes)) }}</span>
+      <span class="s-like__control-text">{{ formatNumber(Math.abs(Number(resultDislikes))) }}</span>
     </button>
   </div>
 </template>

package/components/page-components/s-report.vue

@@ -10,13 +10,15 @@
         @back="activeStep === 'list' ? handleBack() : goToList()"
     >
       <template #title>{{ activeStep !== 'list' && activeCategory ? t(`report_form.${activeCategory.title}`) : t('report') }}</template>
-
-      <!-- Step 1: Category list -->
-      <div v-if="activeStep === 'list'" class="s-report__popup-wrapper">
+      <template #fixedContent>
         <SVideoMiniCard
             class="s-report__video-card"
             :card="reportedVideoCard"
         />
+      </template>
+
+      <!-- Step 1: Category list -->
+      <div v-if="activeStep === 'list'" class="s-report__popup-wrapper">
         <div class="s-report__categories">
           <button
               v-for="(item, index) in reportFormsScheme"
@@ -40,10 +42,6 @@
           class="s-report__popup-wrapper"
           :class="{'_loading': loading}"
       >
-        <SVideoMiniCard
-            class="s-report__video-card"
-            :card="reportedVideoCard"
-        />
         <div class="s-report__wrapper" v-if="activeCategory">
           <p
               v-if="activeCategory.text"
@@ -124,8 +122,8 @@
 </template>
 
 <script setup lang="ts">
-import { reportFormsScheme } from '../../lib/report-forms-scheme';
-import { EReportFormsSubjects, validateEmail, validatePhone } from '../../runtime';
+import { reportFormsScheme } from 'itube-specs/lib/report-forms-scheme';
+import { EReportFormsSubjects, validateEmail, validatePhone } from 'itube-specs/runtime';
 import type { InputTypes, IReportForm, IReportRequest } from '../../types';
 
 const { initRecaptcha, getRecaptchaToken } = useRecaptcha();

package/components/page-components/s-share.vue

@@ -1,17 +1,17 @@
 <template>
   <transition mode="out-in">
     <SPopup
-        v-if="isSharePopupOpen"
-        v-model="isSharePopupOpen"
+        v-if="model"
+        v-model="model"
         sheet
     >
       <template #title>{{ $t('share') }}</template>
+      <template v-if="$slots.card" #fixedContent>
+        <div class="s-share__card">
+          <slot name="card"/>
+        </div>
+      </template>
       <div class="s-share__popup-wrapper">
-        <SVideoMiniCard
-            v-if="sharedVideoCard && Object.keys(sharedVideoCard).length"
-            class="s-share__video-card"
-            :card="sharedVideoCard"
-        />
         <div class="s-share__buttons">
           <a
               v-for="(item, index) in buttons"
@@ -25,37 +25,25 @@
                 sizes="28px"
                 width="28"
                 height="28"
-                :src="`/img/socials/${item.img}`"
+                :src="`/icons/socials/${item.img}`"
             />
           </a>
         </div>
-        <div class="s-share__wrapper">
-          <div class="s-share__copy">
-            <span class="s-share__copy-label _from-sm">{{ inputText }}</span>
-            <span class="s-share__copy-url">{{ fullUrl }}</span>
-            <button
-                class="s-share__copy-button"
-                :title="$t('copy')"
-                @click="copyUrl"
-                type="button"
-            >
-              <SIcon
-                  class="s-share__copy-icon"
-                  :class="{'--accent': isCopied}"
-                  :name="copyIcon"
-                  size="20"
-              />
-            </button>
-          </div>
-          <div class="s-share__cancel-wrapper">
-            <SButton
-                class="s-share__cancel"
-                wide
-                theme="secondary"
-                @click="closeSharePopup"
-            >{{ $t('cancel') }}
-            </SButton>
-          </div>
+        <div class="s-share__copy">
+          <span class="s-share__copy-url">{{ fullUrl }}</span>
+          <button
+              class="s-share__copy-button"
+              :title="$t('copy')"
+              @click="copyUrl"
+              type="button"
+          >
+            <SIcon
+                class="s-share__copy-icon"
+                :class="{'--accent': isCopied}"
+                :name="copyIcon"
+                size="20"
+            />
+          </button>
         </div>
       </div>
     </SPopup>
@@ -63,15 +51,21 @@
 </template>
 
 <script setup lang="ts">
-const { isSharePopupOpen, closeSharePopup, sharedVideoCard } = useSharePopup();
+const model = defineModel<boolean>({ default: false });
+
+const props = defineProps<{
+  url?: string
+}>();
 
 const route = useRoute();
 
 const isCopied = ref(false);
 let copyTimeout: ReturnType<typeof setTimeout> | null = null;
 
+const origin = computed(() => process.client ? window.location.origin : '');
+
 const fullUrl = computed(() =>
-    (process.client ? window.location.origin : '') + route.fullPath
+    props.url ? origin.value + props.url : origin.value + route.fullPath
 );
 
 function copyUrl() {
@@ -82,7 +76,6 @@ function copyUrl() {
 }
 
 const copyIcon = computed(() => isCopied.value ? 'check' : 'copy');
-const inputText = computed(() => isCopied.value ? t('link_copied') : t('link'));
 
 watch(() => isCopied.value, (value) => {
   if (value) {
@@ -94,8 +87,6 @@ onBeforeUnmount(() => {
   if (copyTimeout) clearTimeout(copyTimeout);
 });
 
-const { t } = useI18n()
-
 const buttons = computed(() => {
   return [
     {

package/components/playlist/s-playlist-add.vue

@@ -21,73 +21,86 @@
           class="s-playlist-add__wrapper"
           :class="{'_loading': loadingUserPlaylists || loadingPostVideo}"
       >
+        <SCheckbox
+            right
+            class="s-playlist-add__item"
+            :model-value="selectValue.includes('favorites')"
+            @update:model-value="togglePlaylist('favorites')"
+        >
+          <div class="s-playlist-add__item-wrapper --favorites">
+            <SIcon name="heart" size="20" />
+            {{ $t('favorites')}}
+          </div>
+        </SCheckbox>
         <template
             v-if="playlistsItems && playlistsItems.length"
         >
-          <SCheckbox
-              right
-              class="s-playlist-add__item"
-              :model-value="selectValue.includes('favorites')"
-              @update:model-value="togglePlaylist('favorites')"
-          >
-            <div class="s-playlist-add__item-wrapper --favorites">
-              <SIcon name="heart" size="20" />
-              {{ $t('favorites')}}
-            </div>
-          </SCheckbox>
-          <SCheckbox
-              v-for="(item, index) in playlistsItems"
-              class="s-playlist-add__item"
-              right
-              :key="`playlist-${index}`"
-              :model-value="selectValue.includes(item.value)"
-              @update:model-value="togglePlaylist(item.value)"
-          >
-            <div class="s-playlist-add__item-wrapper">
-              <SIcon
-                  class="s-playlist-add__item-icon"
-                  name="list"
-                  size="20"
-              />
-              <span class="s-playlist-add__item-text">{{ item.title }}</span>
-              <div class="s-playlist-add__item-icon">
-                <SIcon name="video-camera" size="16" />
-                {{ item.videosCount }}
+          <template v-for="(item, index) in playlistsItems" :key="`playlist-${index}`">
+            <SPlaylistInput
+                v-if="editingId === item.value"
+                v-model="editName"
+                v-model:type="editType"
+                :placeholder="$t('playlist_name')"
+                edit-playlist
+                @close="editingId = null"
+                @submit="saveEdit(item.value)"
+                @delete="deleteEdit(item.value)"
+            />
+            <SCheckbox
+                v-else
+                class="s-playlist-add__item"
+                right
+                :model-value="selectValue.includes(item.value)"
+                @update:model-value="togglePlaylist(item.value)"
+            >
+              <div class="s-playlist-add__item-wrapper">
+                <SIcon
+                    class="s-playlist-add__item-icon"
+                    name="list"
+                    size="20"
+                />
+                <span class="s-playlist-add__item-text">{{ item.title }}</span>
+                <SIcon
+                    class="s-playlist-add__item-icon"
+                    :name="item.typeIcon"
+                    size="16"
+                />
+                <div class="s-playlist-add__item-icon">
+                  <SIcon name="video-camera" size="16" />
+                  {{ item.videosCount }}
+                </div>
               </div>
-            </div>
-          </SCheckbox>
+              <button class="s-playlist-add__item-edit" type="button" @click.prevent="startEdit(item)">
+                <SIcon name="pen" size="16"/>
+              </button>
+            </SCheckbox>
+          </template>
         </template>
-        <button
-            v-if="step !== 'new'"
-            type="button"
-            class="s-playlist-add__item --new"
-            @click="step = 'new'"
-        >
-          <SIcon
-              class="s-playlist-add__item-icon --new"
-              name="plus"
-              size="20"
-          />
-          {{ $t('playlist.new_playlist') }}
-        </button>
-        <div v-else class="s-playlist-add__new">
-          <SInput
+        <template v-if="!editingId">
+          <button
+              v-if="step !== 'new'"
+              type="button"
+              class="s-playlist-add__item --new"
+              @click="step = 'new'"
+          >
+            <SIcon
+                class="s-playlist-add__item-icon --new"
+                name="plus"
+                size="20"
+            />
+            {{ $t('playlist.new_playlist') }}
+          </button>
+          <SPlaylistInput
+              v-else
               v-model="newPlaylistName"
-              :placeholder="$t('playlist.new_playlist')"
-              :icon="newPlaylistName ? 'close' : undefined"
+              v-model:type="playlistType"
               :error="nameError"
-              @icon-click="clearNewPlaylist"
+              :placeholder="$t('playlist_name')"
               @update:error="nameError = $event"
+              @close="clearNewPlaylist"
+              @submit="onSaveClick"
           />
-          <SButton
-              size="s"
-              theme="primary"
-              :disabled="!newPlaylistName.trim()"
-              @click="createPlaylist"
-          >
-            {{ $t('create') }}
-          </SButton>
-        </div>
+        </template>
       </div>
 
       <template #footer>
@@ -105,8 +118,8 @@
               size="l"
               :disabled="loadingUserPlaylists || loadingPostVideo"
               theme="primary"
-              @click="onSaveClick"
-          >{{ $t('add') }}
+              @click="editingId ? saveEdit(editingId) : onSaveClick()"
+          >{{ editingId ? $t('update') : $t('add') }}
           </SButton>
         </div>
       </template>
@@ -128,12 +141,14 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (eventName: 'post-playlist', eventValue: IPlaylistShort): void
   (eventName: 'execute-user-playlists'): void
   (eventName: 'save-video-to-playlist', eventValue: {
     form: IPlaylistVideoFormType
     id: string
+    newPlaylist?: IPlaylistShort
   }): void
+  (eventName: 'edit-playlist', eventValue: { id: string, playlistName: string, playlistType: EPlaylistType }): void
+  (eventName: 'delete-playlist', eventValue: string): void
 }>()
 
 const { videoCard, closePlaylistAdd, isPlaylistAdd, selectValue, step } = usePlaylistAdd();
@@ -147,6 +162,8 @@ const playlistsItems = computed(() => {
       title: item.name,
       value: item.id,
       videosCount: item.videosCount,
+      typeIcon: item.playlistType === EPlaylistType.Private ? 'lock' : 'user-group',
+      playlistType: item.playlistType === EPlaylistType.Private ? 'private' as const : 'public' as const,
     }))
 })
 
@@ -161,45 +178,55 @@ function togglePlaylist(value: string) {
 }
 
 watch(isPlaylistAdd, (val) => {
-  if (val) emit('execute-user-playlists');
+  if (val) {
+    selectValue.value = ['favorites'];
+    emit('execute-user-playlists');
+  }
 }, { immediate: true });
 
 async function closePopup() {
   step.value = 'add';
+  selectValue.value = [];
+  newPlaylistName.value = '';
+  playlistType.value = 'public';
+  editingId.value = null;
   isPlaylistAdd.value = false;
   closePlaylistAdd();
 }
 
 const newPlaylistName = ref('');
-const isPrivate = ref(false);
+const playlistType = ref<'public' | 'private'>('public');
 const nameError = ref(false);
 
 function clearNewPlaylist() {
   newPlaylistName.value = '';
+  playlistType.value = 'public';
+  step.value = 'add';
 }
 
-function createPlaylist() {
-  const name = newPlaylistName.value.trim();
-  if (!name) return;
-
-  const nameExists = props.userPlaylists?.items?.some(
-    (item: IPlaylistCard) => item.name.toLowerCase() === name.toLowerCase()
-  );
+const editingId = ref<string | null>(null);
+const editName = ref('');
+const editType = ref<'public' | 'private'>('public');
 
-  if (nameExists) {
-    nameError.value = true;
-    snackbarTheme.value = 'error';
-    snackbarText.value = 'playlist_name_exists';
-    return;
-  }
+function startEdit(item: { value: string, title: string, playlistType: 'public' | 'private' }) {
+  clearNewPlaylist();
+  editingId.value = item.value;
+  editName.value = item.title;
+  editType.value = item.playlistType;
+}
 
-  emit('post-playlist', {
-    name,
-    type: isPrivate.value ? EPlaylistType.Private : EPlaylistType.Public,
+function saveEdit(id: string) {
+  emit('edit-playlist', {
+    id,
+    playlistName: editName.value,
+    playlistType: editType.value === 'private' ? EPlaylistType.Private : EPlaylistType.Public,
   });
-  newPlaylistName.value = '';
-  isPrivate.value = false;
-  step.value = 'add';
+  editingId.value = null;
+}
+
+function deleteEdit(id: string) {
+  editingId.value = null;
+  emit('delete-playlist', id);
 }
 
 const postVideoForm = computed(() => ({
@@ -215,10 +242,34 @@ const postVideoForm = computed(() => ({
 const { setErrorState, snackbarText, snackbarTheme } = useSnackbar();
 
 async function onSaveClick() {
+  let newPlaylist: IPlaylistShort | undefined;
+
+  if (step.value === 'new') {
+    const name = newPlaylistName.value.trim();
+    if (!name) return;
+
+    const nameExists = props.userPlaylists?.items?.some(
+      (item: IPlaylistCard) => item.name.toLowerCase() === name.toLowerCase()
+    );
+
+    if (nameExists) {
+      nameError.value = true;
+      snackbarTheme.value = 'error';
+      snackbarText.value = 'playlist_name_exists';
+      return;
+    }
+
+    newPlaylist = {
+      name,
+      type: playlistType.value === 'private' ? EPlaylistType.Private : EPlaylistType.Public,
+    };
+  }
+
   try {
     emit('save-video-to-playlist', {
       form: postVideoForm.value as IPlaylistVideoFormType,
-      id: String(selectValue.value)
+      id: String(selectValue.value),
+      newPlaylist,
     })
     closePopup();
     snackbarTheme.value = 'success';

package/components/playlist/s-playlist-delete-video.vue

@@ -6,14 +6,14 @@
         sheet
         transparent-backdrop
     >
-      <template #title>{{ $t('playlist.delete_video') }}</template>
+      <template #title>{{ $t('remove_video') }}</template>
 
       <div
           class="s-playlist-delete-video__wrapper"
           :class="{'_loading': loadingAll}"
       >
         <SVideoMiniCard v-if="deletedVideo" :card="deletedVideo"/>
-        <p class="s-playlist-delete-video__text">{{ $t('playlist.confirm_delete_video') }}</p>
+        <p class="s-playlist-delete-video__text">{{ $t('confirm_remove_video') }}</p>
       </div>
       <template #footer>
         <div class="s-playlist-delete-video__buttons">
@@ -31,7 +31,7 @@
               size="l"
               theme="primary"
               @click="onBinClick"
-          >{{ $t('playlist.delete') }}
+          >{{ $t('remove') }}
           </SButton>
         </div>
       </template>
@@ -41,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { EPlaylistStep } from '../../runtime';
+import { EPlaylistStep } from 'itube-specs/runtime';
 
 const { isPlaylistEditOpen, closePlaylistEdit, currentStep, selectedPlaylist, deletedVideo } = usePlaylistEdit();
 const { snackbarText, snackbarTheme } = useSnackbar();
@@ -69,7 +69,7 @@ async function onBinClick() {
       deletedVideoId: deletedVideo.value?.id || ''
     })
     snackbarTheme.value = 'success';
-    snackbarText.value = 'video_deleted';
+    snackbarText.value = 'video_removed';
     closePlaylistEdit();
   } catch {
     console.log('error delete')

package/components/playlist/s-playlist-input.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+      class="s-playlist-input"
+      @keydown.enter="$emit('submit')"
+  >
+    <SInput
+        v-model="name"
+        :placeholder="placeholder"
+        :error="error"
+        :icon="name.length > 0 ? 'close' : ''"
+        @icon-click="name = ''"
+        @update:error="$emit('update:error', $event)"
+    />
+    <button
+        type="button"
+        class="s-playlist-input__back"
+        @click="$emit('close')"
+    >
+      <SIcon name="close" size="20"/>
+    </button>
+    <div class="s-playlist-input__visibility">
+      <SToggle
+          :model-value="currentType === 'public'"
+          @update:model-value="currentType = $event ? 'public' : 'private'"
+      >
+        <div class="s-playlist-input__toggle-wrapper">
+          <SIcon class="s-playlist-input__toggle-icon" :name="PLAYLIST_TYPE_ICON[EPlaylistType.Public]" size="14"/>
+          {{ $t('public') }}
+        </div>
+      </SToggle>
+      <STooltip class="s-playlist-input__tooltip" right>
+        <template #trigger>
+          <span class="s-playlist-input__hint">?</span>
+        </template>
+        <p class="s-playlist-input__tooltip-text"><span>{{ $t('public') }}: </span>{{ $t('public_hint') }}</p>
+        <p class="s-playlist-input__tooltip-text"><span>{{ $t('private') }}: </span>{{ $t('private_hint') }}</p>
+      </STooltip>
+      <button
+          v-if="editPlaylist"
+          type="button"
+          class="s-playlist-input__delete"
+          @click="$emit('delete')"
+      >
+        {{ $t('delete') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { EPlaylistType } from 'itube-specs/runtime';
+
+const PLAYLIST_TYPE_ICON: Record<EPlaylistType, string> = {
+  [EPlaylistType.Public]: 'user-group',
+  [EPlaylistType.Private]: 'lock',
+};
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  type: 'public' | 'private'
+  error?: boolean
+  placeholder?: string
+  editPlaylist?: boolean
+}>(), {
+  error: false,
+  placeholder: '',
+  editPlaylist: false,
+});
+
+const emit = defineEmits<{
+  (eventName: 'update:modelValue', value: string): void
+  (eventName: 'update:type', value: 'public' | 'private'): void
+  (eventName: 'update:error', value: boolean): void
+  (eventName: 'close'): void
+  (eventName: 'submit'): void
+  (eventName: 'delete'): void
+}>();
+
+const name = computed({
+  get: () => props.modelValue,
+  set: (val: string) => emit('update:modelValue', val),
+});
+
+const currentType = computed({
+  get: () => props.type,
+  set: (val: 'public' | 'private') => emit('update:type', val),
+});
+</script>

package/components/ui/s-avatar.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="s-avatar">
+    <img
+        v-if="src || data.avatar"
+        :src="avatar"
+        :width="size"
+        :height="size"
+        :alt="$t(alt)"
+    >
+    <span
+        v-else
+        class="s-avatar__placeholder"
+        :style="{ width: size + 'px', height: size + 'px' }"
+    >{{ avatar }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IProfileData } from 'itube-specs';
+
+const props = withDefaults(defineProps<{
+  size?: number
+  alt?: string
+  src?: string
+}>(), {
+  size: 36,
+  alt: 'avatar'
+});
+
+const data = computed(() => useState<IProfileData>('profileData').value);
+
+const avatar = computed(() => props.src || (data.value && (data.value.avatar || data.value.username.charAt(0))));
+</script>

package/components/ui/s-button.vue

@@ -19,10 +19,12 @@
 </template>
 
 <script setup lang="ts">
+import type { ButtonThemes } from '../../types';
+
 withDefaults(
   defineProps<{
     type?: 'button' | 'submit' | 'reset',
-    theme?: 'primary' | 'secondary' | 'ghost' | 'bordered' | 'tab' | 'warning' | 'muted'
+    theme?: ButtonThemes
     size?: 'm' | 's' | 'l',
     icon?: boolean,
     wide?: boolean,

package/components/ui/s-dropdown.vue

@@ -48,7 +48,7 @@
 
 <script setup lang="ts">
 // На компоненте обязательно вызывать пропсы слота и вешать слот пропс (className) на непосредственных детей
-import { isMobileWidth } from '../../runtime';
+import { isMobileWidth } from 'itube-specs/runtime';
 import type { CssBreakpoints } from '../../types';
 import { onClickOutside } from '@vueuse/core';
 
@@ -93,11 +93,10 @@ function openDropdown() {
   open.value = !open.value
   if (open.value) nextTick(() => checkPosition())
 
-  if (isMobile.value) {
+  if (isMobile.value && open.value) {
     nextTick(() => {
       if (menuRef.value?.showModal) {
         menuRef.value.showModal();
-        scrollLock();
       }
     })
   }
@@ -107,13 +106,27 @@ function close() {
   open.value = false;
 
   if (isMobile.value) {
-    scrollUnlock()
     nextTick(() => {
       menuRef.value?.close?.()
     })
   }
 }
 
+watch(open, (val) => {
+  if (!isMobile.value) return;
+  if (val) {
+    scrollLock();
+  } else {
+    scrollUnlock();
+  }
+});
+
+onBeforeUnmount(() => {
+  if (open.value && isMobile.value) {
+    scrollUnlock();
+  }
+});
+
 let hoverTimeout: ReturnType<typeof setTimeout> | null = null
 
 function mouseHandler(event: boolean) {

package/components/ui/s-link.vue

@@ -17,9 +17,11 @@
 </template>
 
 <script setup lang="ts">
+import type { ButtonThemes } from '../../types';
+
 withDefaults(
   defineProps<{
-    theme?: 'primary' | 'secondary' | 'ghost' | 'bordered' | 'tab' | 'warning' | 'muted',
+    theme?: ButtonThemes,
     size?: 'm' | 's',
     wide?: boolean,
     active?: boolean,

package/components/ui/s-select.vue

@@ -4,7 +4,6 @@
       aria-label="select"
       :class="[
           {
-            '--wide': wide,
             '--active': active
           },
           `--${size}`,
@@ -14,11 +13,11 @@
       <SIcon
           v-if="labelIcon"
           class="s-select__label-icon"
-          :name="labelIcon"
+          :name="labelIcon.icon"
           size="16"
+          :prefix="labelIcon.prefix"
       />
       {{ label }}
-<!--      <SCount class="s-select__count" v-if="count">{{ count }}</SCount>-->
     </span>
     <span class="s-select__wrapper">
       <SIcon
@@ -58,22 +57,26 @@
 
 <script setup lang="ts">
 import type { ISelectItem } from '../../types';
-import type { LocaleObject } from '#internal-i18n-types';
-import { convertString } from '~/runtime';
+import { convertString } from 'itube-specs/runtime';
 
-const props = withDefaults(defineProps<{
+export interface ISelectLabelIcon {
+  icon: string
+  prefix?: string
+}
+
+export interface ISelectProps {
   name: string
-  icon?: string
-  labelIcon?: string
-  placeholder?: string
   modelValue: string | undefined
+  items: ISelectItem[]
+  placeholder?: string
   label?: string
-  items: ISelectItem[] | LocaleObject[]
-  wide?: boolean
+  icon?: string
+  labelIcon?: ISelectLabelIcon
   size?: 'm' | 's'
-  // count?: string | number
   active?: boolean
-}>(), {
+}
+
+const props = withDefaults(defineProps<ISelectProps>(), {
   size: 'm'
 })
 

package/components/ui/s-toggle.vue

@@ -4,7 +4,8 @@
       aria-label="Toggle"
       :class="[
           {'s-toggle--checked': modelValue},
-          {'s-toggle--disabled': disabled}
+          {'s-toggle--disabled': disabled},
+          {'--left': left}
           ]"
   >
     <input
@@ -16,7 +17,6 @@
     >
     <span v-if="$slots.default" class="s-toggle__text">
       <slot/>
-      {{ modelValue}}
     </span>
   </label>
 </template>
@@ -25,5 +25,6 @@
 defineProps<{
   modelValue: boolean
   disabled?: boolean
+  left?: boolean
 }>()
 </script>

package/components/ui/s-tooltip.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+      ref="tooltipRef"
+      class="s-tooltip"
+      @mouseenter="onEnter"
+      @mouseleave="onLeave"
+  >
+    <div class="s-tooltip__trigger" @click="onClick">
+      <slot name="trigger"/>
+    </div>
+    <transition name="fade">
+      <div v-if="isOpen" class="s-tooltip__content" :class="{'--right': right}">
+        <slot/>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { isMobileWidth } from 'itube-specs/runtime';
+import { onClickOutside } from '@vueuse/core';
+import type { CssBreakpoints } from '../../types';
+
+defineProps<{
+  right?: boolean
+}>();
+
+const tooltipRef = ref<HTMLElement>();
+const isOpen = ref(false);
+
+const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+const isMobile = isMobileWidth(breakpoints);
+
+onClickOutside(tooltipRef, () => {
+  if (isMobile.value) {
+    isOpen.value = false;
+  }
+});
+
+function onEnter() {
+  if (!isMobile.value) {
+    isOpen.value = true;
+  }
+}
+
+function onLeave() {
+  if (!isMobile.value) {
+    isOpen.value = false;
+  }
+}
+
+function onClick() {
+  if (isMobile.value) {
+    isOpen.value = !isOpen.value;
+  }
+}
+</script>

package/composables/use-filter-scheme.ts

@@ -1,5 +1,5 @@
 import type { IFilterScheme, IGroupCategories } from '../types';
-import { convertString } from '../runtime';
+import { convertString } from 'itube-specs/runtime';
 
 export const useFilterScheme = (t, groupsCategories: IGroupCategories[] | null) => {
   const getFilterSchemeCategories = (): IFilterScheme[] => {
@@ -7,6 +7,7 @@ export const useFilterScheme = (t, groupsCategories: IGroupCategories[] | null)
       label: item.title,
       name: item.name,
       title: item.title,
+      icon: item.icon,
       placeholder: t('choose_category'),
       items: item.categories?.map((subItem) => ({
         title: convertString().toCapitalize(subItem.title),

package/composables/use-global-scroll-lock.ts

@@ -1,21 +1,29 @@
-import { useScrollLock } from '@vueuse/core';
+function hasScrollableParent(target: HTMLElement): boolean {
+  let el: HTMLElement | null = target;
+  while (el && el !== document.body) {
+    const { overflowY } = window.getComputedStyle(el);
+    if ((overflowY === 'auto' || overflowY === 'scroll') && el.scrollHeight > el.clientHeight) {
+      return true;
+    }
+    el = el.parentElement;
+  }
+  return false;
+}
+
+function preventTouchScroll(e: TouchEvent) {
+  if (!hasScrollableParent(e.target as HTMLElement)) {
+    e.preventDefault();
+  }
+}
 
 export function useGlobalScrollLock() {
   const lockCount = useState('global-scroll-lock-count', () => 0);
-  let isLockedRef: ReturnType<typeof useScrollLock> | null = null;
-
-  function getLockedRef() {
-    if (!isLockedRef && import.meta.client) {
-      isLockedRef = useScrollLock(document.body);
-    }
-    return isLockedRef;
-  }
 
   function scrollLock() {
     lockCount.value++;
-    const ref = getLockedRef();
-    if (lockCount.value === 1 && ref) {
-      ref.value = true;
+    if (lockCount.value === 1 && import.meta.client) {
+      document.body.style.overflow = 'hidden';
+      document.addEventListener('touchmove', preventTouchScroll, { passive: false });
     }
   }
 
@@ -23,12 +31,12 @@ export function useGlobalScrollLock() {
     lockCount.value--;
     if (lockCount.value <= 0) {
       lockCount.value = 0;
-      const ref = getLockedRef();
-      if (ref) {
-        ref.value = false;
+      if (import.meta.client) {
+        document.body.style.overflow = '';
+        document.removeEventListener('touchmove', preventTouchScroll);
       }
     }
   }
 
-  return { scrollLock, scrollUnlock }
+  return { scrollLock, scrollUnlock };
 }

package/package.json

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

package/types/button-themes.d.ts

@@ -1 +1 @@
-export type ButtonThemes = 'primary' | 'secondary' | 'ghost' | 'bordered' | 'tab' | undefined
+export type ButtonThemes = 'primary' | 'secondary' | 'warning' | 'muted' | undefined