itube-specs 0.0.759 → 0.0.761

package/composables/use-meta.ts

@@ -14,7 +14,7 @@ import type { IChipsItem } from '../types';
  * @param thirdText - третий подставляемый текст
  * @param fourthText - четвёртый подставляемый текст
  */
-export function useMeta(t, page: string, brandName: string, sortOptions?: IChipsItem[], text?: Ref<string>, secondText?: Ref<string>, thirdText?: Ref<string>, fourthText?: Ref<string>) {
+export function useMeta(t: (key: string, params?: Record<string, unknown>) => string, page: string, brandName: string, sortOptions?: IChipsItem[], text?: Ref<string>, secondText?: Ref<string>, thirdText?: Ref<string>, fourthText?: Ref<string>) {
     const route = useRoute();
 
     const sortType = computed(() => {
@@ -48,12 +48,20 @@ export function useMeta(t, page: string, brandName: string, sortOptions?: IChips
     const metaTitle = computed(() => getPath('title'));
     const h1 = computed(() => getPath('h1'));
 
-    const meta = computed(() => ({
-        title: metaTitle.value,
-        meta: [
-            { name: 'description', content: getPath('meta_description') },
-        ],
-    }));
+    const meta = computed(() => {
+        const description = getPath('meta_description');
+
+        return {
+            title: metaTitle.value,
+            meta: [
+                { name: 'description', content: description },
+                { property: 'og:title', content: metaTitle.value },
+                { property: 'og:description', content: description },
+                { name: 'twitter:title', content: metaTitle.value },
+                { name: 'twitter:description', content: description },
+            ],
+        };
+    });
 
     return {
         meta,

package/composables/use-model-filter-chips.ts

@@ -1,14 +1,8 @@
-import type { IChipsItem, IModelFilter, IModelFilterOptions } from '../types'
-import type { LocationQuery } from '#vue-router'
-import { getMonth } from '../runtime'
+import type { IChipsItem, IModelFilter, IModelFilterOptions } from '../types';
+import type { LocationQuery } from '#vue-router';
+import { getMonth } from '../runtime';
 import type { Ref } from 'vue';
 
-/**
- * Формирует вычисляемый список чипсов из активных filter_* параметров в query маршрута.
- * @param filters - список схем фильтров модели
- * @param route - текущий маршрут с query
- * @param t - функция перевода (i18n)
- */
 export function useFilterChipsItems(
   filters: Ref<IModelFilter[]>,
   route: { query: LocationQuery },
@@ -21,52 +15,58 @@ export function useFilterChipsItems(
         item
           .replace('filter_', '')
           .replace(/_/g, ' ')
-      )
+      );
 
     const groups = Object.values(
       queryItems.reduce((acc: Record<string, string[]>, str: string) => {
-        const parts = str.split(' ')
-        const last = parts.at(-1)
+        const parts = str.split(' ');
+        const last = parts.at(-1);
 
         const key =
           last === 'from' || last === 'to'
             ? parts.slice(0, -1).join(' ')
-            : str
+            : str;
 
-        acc[key] ??= []
+        acc[key] ??= [];
 
-        if (last === 'from') acc[key].unshift(str)
-        else acc[key].push(str)
+        if (last === 'from') acc[key].unshift(str);
+        else acc[key].push(str);
 
-        return acc
+        return acc;
       }, {})
-    )
+    );
+
+    const findFilter = (items: string[]) => {
+      const key = items[0].replace(' from', '').replace(' to', '');
+      return filters.value.find(f => f.name.replace(/_/g, ' ') === key);
+    };
 
     const getValue = (item: string, index: number) => {
       const filter = filters.value.find(filter =>
         filter.name ===
         item
-          .replace(/ /g, '_')
+          .replace(/ /g,
+              '_')
           .replace('_from', '')
           .replace('_to', '')
-      )
+      );
 
       const defaultValue =
         index === 0
           ? filter?.options[0]
-          : filter?.options.at(-1)
+          : filter?.options.at(-1);
 
-      const value = route.query[`filter_${item.replace(/ /g, '_')}`]
+      const value = route.query[`filter_${item.replace(/ /g, '_')}`];
 
       if (item.includes('month')) {
         return getMonth(
           t,
           Number(value ?? defaultValue?.name) - 1
-        )
+        );
       }
 
       if (!isNaN(Number(value))) {
-        return value
+        return value;
       }
 
       return (
@@ -75,31 +75,35 @@ export function useFilterChipsItems(
             option.name === value
         )?.title ??
         defaultValue?.title
-      )
-    }
+      );
+    };
 
     const getValueText = (items: string[]) =>
-      [...new Set(items.map(getValue))].join(' - ')
-
-    const chipsTitle = (items: string[]) => {
-      const key = items[0].replace(' from', '')
-      const filter = filters.value.find(
-        f => f.name.replace(/_/g, ' ') === key
-      )
-
-      const text = `${filter?.title}: ${getValueText(items)}`
-      return text.length > 30 ? getValueText(items) : text
-    }
-
-    return groups.map(item => ({
-      title: chipsTitle(item),
-      value: item.map(
-        sub => `filter_${sub.replace(/ /g, '_')}`
-      ),
-    }))
-  })
+      [...new Set(items.map(getValue).filter(v => v !== undefined && v !== null && v !== ''))].join(' - ');
+
+    const chipsTitle = (items: string[], filter: IModelFilter) => {
+      const valueText = getValueText(items);
+      const text = `${filter.title}: ${valueText}`;
+      return text.length > 30 ? valueText : text;
+    };
+
+    return groups
+      .map(item => {
+        const filter = findFilter(item);
+        if (!filter) return null;
+        const valueText = getValueText(item);
+        if (!valueText) return null;
+        return {
+          title: chipsTitle(item, filter),
+          value: item.map(
+            sub => `filter_${sub.replace(/ /g, '_')}`
+          ),
+        };
+      })
+      .filter((c): c is IChipsItem => c !== null);
+  });
 
   return {
     chipsItems,
-  }
+  };
 }

package/package.json

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

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

@@ -1,20 +0,0 @@
-<template>
-  <div class="s-auth-icon">
-    <SIcon
-        class="s-auth-icon__icon"
-        :name="icon"
-        size="24"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(defineProps<{
-  icon?: string
-}>(), {
-  icon: 'user-filled'
-})
-</script>
-
-<style scoped lang="scss">
-</style>

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

@@ -1,120 +0,0 @@
-<template>
-  <div
-      class="s-auth-login"
-      :class="{'_loading': loading}"
-  >
-
-    <SAuthIcon class="s-auth-login__icon"/>
-
-    <SInput
-        v-model="form.username"
-        :label="t('auth.username')"
-        :placeholder="t('auth.username')"
-        hide-label
-        name="login-name"
-        :error="error.username"
-        @update:error="(val: boolean) => error.username = val"
-    />
-    <SInput
-        v-model="form.password_hash"
-        :label="t('auth.password')"
-        :placeholder="t('auth.password')"
-        hide-label
-        type="password"
-        :error="error.password_hash"
-        @update:error="(val: boolean) => error.password_hash = val"
-    />
-
-    <div class="s-auth-login__buttons">
-      <SButton
-          class="s-auth-login__login"
-          wide
-          size="l"
-          :disabled="loading"
-          theme="primary"
-          @click="login"
-      >{{ t('auth.log_in') }}
-      </SButton>
-      <button
-          class="s-auth-login__forgot"
-          type="button"
-          @click="onForgotClick"
-      >
-        {{ t('auth.forgot') }}
-      </button>
-
-      <p class="s-auth-login__back">
-        {{ t('register_text') }}
-        <button
-            class="s-auth-login__back-button"
-            type="button"
-            @click="onCreateClick"
-        >
-          {{ t('auth.sign_up') }}
-        </button>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { validatePassword, validateUsername } from '../../runtime';
-import { AuthorizationApiService } from '~/services/api/authorization.service';
-
-const { t } = useI18n();
-
-const form = ref({
-  username: '',
-  password_hash: '',
-});
-
-const error = ref({
-  username: false,
-  password_hash: false,
-});
-
-const emit = defineEmits<{
-  (eventName: 'forgot'): void
-  (eventName: 'create'): void
-}>();
-
-function onForgotClick() {
-  emit('forgot');
-}
-
-function onCreateClick() {
-  emit('create');
-}
-
-const loading = ref(false);
-
-const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
-
-async function login() {
-  resetSnackbar();
-  error.value.username = false;
-  error.value.password_hash = false;
-
-  if (!validateUsername(form.value.username)) {
-    error.value.username = true;
-    showError('error_username');
-  }
-  if (!validatePassword(form.value.password_hash)) {
-    error.value.password_hash = true;
-    showError('error_password');
-  }
-
-  if (!error.value.username && !error.value.password_hash) {
-    try {
-      loading.value = true;
-      await useUser(AuthorizationApiService).login(form.value);
-      useAuthPopup().closeAuthPopup();
-      showSuccess('Welcome back!');
-    } catch (error) {
-      setErrorState(error);
-    } finally {
-      loading.value = false;
-    }
-  }
-}
-</script>

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

@@ -1,69 +0,0 @@
-<template>
-  <div v-if="isAuthPopupOpen" class="s-auth-popup__decorate"/>
-  <transition mode="out-in">
-    <SPopup
-        v-if="currentStep === EAuthSteps.Registration && isAuthPopupOpen"
-        v-model="isAuthPopupOpen"
-        transparent-backdrop
-        :back="isBackShow"
-        class="s-auth-popup"
-        @back="currentStep -= 1"
-    >
-      <template #title>{{  $t('auth.create_new') }}</template>
-      <SAuthRegister
-          :additional-text="additionalText"
-          @login="onLoginClick"
-      />
-    </SPopup>
-  </transition>
-
-  <transition mode="out-in">
-    <SPopup
-        v-if="currentStep === EAuthSteps.Login && isAuthPopupOpen"
-        v-model="isAuthPopupOpen"
-        transparent-backdrop
-        :back="isBackShow"
-        class="s-auth-popup"
-        @back="currentStep -= 1"
-    >
-      <template #title>{{  $t('auth.welcome_back') }}</template>
-      <SAuthLogin @forgot="onRecoveryClick" @create="currentStep -= 1"/>
-    </SPopup>
-  </transition>
-
-  <transition mode="out-in">
-    <SPopup
-        v-if="currentStep === EAuthSteps.Recovery && isAuthPopupOpen"
-        v-model="isAuthPopupOpen"
-        transparent-backdrop
-        :back="isBackShow"
-        class="s-auth-popup"
-        @back="currentStep -= 1"
-    >
-      <template #title>{{  $t('auth.recovery_title')}}</template>
-      <SAuthRecovery @login="onLoginClick"/>
-    </SPopup>
-  </transition>
-</template>
-
-<script setup lang="ts">
-import { EAuthSteps } from '../../runtime';
-
-const { isAuthPopupOpen, currentStep, additionalText } = useAuthPopup()
-
-const backShow = ref(false)
-
-function onLoginClick(): void {
-  currentStep.value = EAuthSteps.Login
-  backShow.value = true
-}
-
-function onRecoveryClick(): void {
-  currentStep.value = EAuthSteps.Recovery
-  backShow.value = true
-}
-
-const isBackShow = computed(() => {
-  return currentStep.value !== EAuthSteps.Registration && backShow.value
-})
-</script>

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

@@ -1,104 +0,0 @@
-<template>
-  <div
-      class="s-auth-recovery"
-      :class="{'_loading': loading}"
-  >
-
-    <SAuthIcon
-        class="s-auth-recovery__icon"
-        icon="envelope"
-    />
-
-    <p class="s-auth-recovery__text">{{ t('auth.recovery_text') }}</p>
-    <SInput
-        v-model="form.email"
-        :label="$t('email')"
-        :placeholder="$t('email')"
-        hide-label
-        inputmode="email"
-        autocomplete="email"
-        :error="error.email"
-        @update:error="(val: boolean) => error.email = val"
-    />
-
-    <SButton
-        class="s-auth-recovery__button"
-        wide
-        size="l"
-        :disabled="loading"
-        theme="primary"
-        @click="submit"
-    >{{ t('auth.get_recovery') }}
-    </SButton>
-    <button
-        class="s-auth-recovery__login"
-        type="button"
-        @click="onLoginClick"
-    >{{ t('auth.back_to_login') }}
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IPasswordForm } from '../../types';
-import { validateEmail } from '../../runtime';
-import { AuthorizationApiService } from '~/services/api/authorization.service';
-
-const { initRecaptcha, getRecaptchaToken } = useRecaptcha();
-
-const { t } = useI18n();
-
-const form = ref({
-  email: '',
-  token: '',
-} as IPasswordForm)
-
-const error = ref({
-  email: false,
-});
-
-const emit = defineEmits<{
-  (eventName: 'login'): void
-}>()
-
-function onLoginClick() {
-  emit('login')
-}
-
-const loading = ref(false)
-
-const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
-
-// Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
-onMounted(async () => {
-  try {
-    await initRecaptcha();
-    console.log('reCAPTCHA готов для этой формы');
-  } catch (err) {
-    console.error('Ошибка инициализации reCAPTCHA:', err);
-  }
-});
-
-async function submit() {
-  resetSnackbar()
-  error.value.email = false;
-
-  if (!validateEmail(form.value.email)) {
-    error.value.email = true;
-    showError('error_email');
-    return;
-  }
-
-  try {
-    loading.value = true;
-    form.value.token = await getRecaptchaToken('password_reset');
-    await useUser(AuthorizationApiService).password(form.value);
-    useAuthPopup().closeAuthPopup();
-    showSuccess('Check your email');
-  } catch (error) {
-    setErrorState(error);
-  } finally {
-    loading.value = false;
-  }
-}
-</script>

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

@@ -1,176 +0,0 @@
-<template>
-  <ClientOnly>
-    <div
-        class="s-auth-register"
-        :class="{'_loading': loading}"
-    >
-      <SAuthIcon class="s-auth-register__icon" />
-      <p
-          v-if="additionalText"
-          class="s-auth-register__text"
-      >{{ t(additionalText) }}
-      </p>
-      <SInput
-          v-model="form.email"
-          :placeholder="t('email')"
-          :label="t('email')"
-          hide-label
-          inputmode="email"
-          autocomplete="email"
-          :error="error.email"
-          @update:error="(val: boolean) => error.email = val"
-      />
-      <SInput
-          v-model="form.username"
-          :label="t('login')"
-          :placeholder="t('login')"
-          hide-label
-          name="login-name"
-          :error="error.username"
-          @update:error="(val: boolean) => error.username = val"
-      />
-      <SInput
-          v-model="form.password_hash"
-          :label="t('auth.password')"
-          :placeholder="t('auth.password')"
-          hide-label
-          type="password"
-          :error="error.password_hash"
-          autocomplete="new-password"
-          @update:error="(val: boolean) => error.password_hash = val"
-      />
-
-      <div class="s-auth-register__buttons">
-        <SButton
-            :disabled="loading"
-            wide
-            size="l"
-            theme="primary"
-            @click="submit"
-        >{{ t('auth.sign_up') }}
-        </SButton>
-        <p class="s-auth-register__login">
-          {{ t('login_text') }}
-          <button
-              class="s-auth-register__login-button"
-              type="button"
-              @click="onLoginClick">
-            {{ t('auth.log_in') }}
-          </button>
-        </p>
-      </div>
-
-      <p class="s-auth-register__agreement">{{ t('auth.agree_begin') }}
-        <NuxtLink
-            class="s-auth-register__agreement-link"
-            to="/terms"
-            target="_blank"
-        >{{ t('auth.agree_terms') }}
-        </NuxtLink>
-                                            {{ t('auth.agree_and') }}
-        <NuxtLink
-            class="s-auth-register__agreement-link"
-            to="/policy"
-            target="_blank"
-        >{{ t('auth.agree_policy') }}
-        </NuxtLink>
-      </p>
-    </div>
-  </ClientOnly>
-</template>
-
-<script setup lang="ts">
-import type { IRegistrateForm } from '../../types';
-import { validateEmail, validatePassword, validateUsername } from '../../runtime';
-import { AuthorizationApiService } from '~/services/api/authorization.service';
-
-const { initRecaptcha, getRecaptchaToken } = useRecaptcha();
-
-defineProps<{
-  additionalText?: string;
-}>()
-
-const { t } = useI18n();
-
-const form = ref({
-  username: '',
-  email: '',
-  password_hash: '',
-  token: '',
-} as IRegistrateForm)
-
-const error = ref({
-  username: false,
-  email: false,
-  password_hash: false,
-})
-
-const emit = defineEmits<{
-  (eventName: 'login'): void
-}>()
-
-function onLoginClick() {
-  emit('login')
-}
-
-const loading = ref(false);
-
-const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
-// Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
-onMounted(async () => {
-  try {
-    await initRecaptcha();
-    console.log('reCAPTCHA готов для этой формы');
-  } catch (err) {
-    console.error('Ошибка инициализации reCAPTCHA:', err);
-  }
-});
-
-function validateForm(): boolean {
-  const { username, email, password_hash } = form.value;
-
-  const errors = {
-    username: !validateUsername(username),
-    email: !validateEmail(email),
-    password_hash: !validatePassword(password_hash),
-  };
-
-  if (!validateEmail(email)) showError('error_email');
-  if (!validatePassword(password_hash)) showError('error_password');
-  if (!validateUsername(username)) showError('error_username');
-
-  error.value = errors;
-
-  return !Object.values(errors).some(Boolean);
-}
-
-async function submit() {
-  resetSnackbar();
-  if (!validateForm()) return;
-
-  try {
-    loading.value = true;
-
-    // Уникальное действие для каждой формы
-    // здесь 'register', в других формах — 'password_reset' или 'contact_form'
-    form.value.token = await getRecaptchaToken('register');
-
-    await useUser(AuthorizationApiService).register(form.value);
-
-    // Создаем сразу Favorites плейлист, возможно костыль убрать когда будет нормальная логика с беком
-    // const { FAVORITES_KEY } = useFavorites();
-    // await PlaylistsApiService.postPlaylist(FAVORITES_KEY, EPlaylistType.Private);
-
-    useAuthPopup().closeAuthPopup();
-    showSuccess('Registration success');
-  } catch (err) {
-    setErrorState(err);
-    console.error('Ошибка reCAPTCHA или регистрации:', err);
-  } finally {
-    loading.value = false;
-  }
-}
-</script>
-
-<style scoped>
-</style>