itube-specs 0.0.936 → 0.0.939

package/components/filter/model.vue

@@ -1,17 +1,11 @@
 <!-- Контейнер фильтра моделей с отложенным применением (pending) перед навигацией -->
 <template>
   <div class="filter-model">
-    <FilterChips
+    <FilterChipsRow
       :items="chipsItems"
       @click="onChipsClick"
-    >
-      <button
-        v-if="chipsItems.length > 1"
-        class="filter-model__clear"
-        type="button"
-        @click="onClearAllClick"
-      >{{ t('reset_all') }}</button>
-    </FilterChips>
+      @clear="onClearAllClick"
+    />
     <transition appear>
       <FilterPopup
         v-model="model"
@@ -23,7 +17,6 @@
         models-page
         :loading="status === 'pending'"
         @chip-click="onPendingChipsClick"
-        @field-update="onFieldUpdate"
       >
         <template #quick-field="{ item, index }">
           <FilterModelField
@@ -72,9 +65,11 @@
 </template>
 
 <script setup lang="ts">
-import type { IChipsItem, IModelCard, IModelFilter, PaginatedResponse } from '../../types';
+import type { IFilterChipItem, IModelCard, IModelFilter, PaginatedResponse } from '../../types';
 import type { LocationQuery } from '#vue-router';
 import { getSortedFilterGroups } from '../../utils/get-sorted-filter-groups';
+import { parseModelFilterValues } from '../../utils/filter-model/parse-model-filter-values';
+import { buildModelFilterQuery } from '../../utils/filter-model/build-model-filter-query';
 
 const props = defineProps<{
   data: PaginatedResponse<IModelCard>,
@@ -93,12 +88,18 @@ const EXCLUDED_GROUP_NAMES = ['tags', 'quick'];
 
 const filters = computed<IModelFilter[]>(() => (props.data as any).filters ?? []);
 
-const pendingQuery = ref<LocationQuery>({ ...route.query });
-
-watch(() => model.value, (open) => {
-  if (open) {
-    pendingQuery.value = { ...route.query };
-  }
+const {
+  values: pendingQuery,
+  isFiltered: isPendingFiltered,
+  remove: removeField,
+  replace: replacePending,
+  reset: onResetClick,
+  apply: onApplyClick,
+} = useFilterPending({
+  open: model,
+  decode: parseModelFilterValues,
+  encode: buildModelFilterQuery,
+  navigate: 'replace',
 });
 
 const pendingRouteLike = reactive({
@@ -110,8 +111,6 @@ const pendingRouteLike = reactive({
 const { chipsItems } = useFilterChipsItems(filters, route, t, locale);
 const { chipsItems: pendingChipsItems } = useFilterChipsItems(filters, pendingRouteLike, t, locale);
 
-const isPendingFiltered = computed(() => Object.keys(pendingQuery.value).some(item => item.startsWith('filter')));
-
 const quickFilters = computed(() =>
   filters.value
     .filter((f): f is IModelFilter => f.group.name === 'quick'),
@@ -158,13 +157,11 @@ const unitItems = computed(() => [
 ]);
 
 watch(units, () => {
-  const next = { ...pendingQuery.value };
   const unitFields = ['height_cm', 'height_in', 'weight_kg', 'weight_lb'];
   for (const field of unitFields) {
-    delete next[`filter_${field}_from`];
-    delete next[`filter_${field}_to`];
+    removeField(`filter_${field}_from`);
+    removeField(`filter_${field}_to`);
   }
-  pendingQuery.value = next;
 });
 
 /** Быстрые поля в модалку приходят уже маппингом — исходный фильтр ищем по имени. */
@@ -180,17 +177,7 @@ function selectItems(item: IModelFilter) {
 }
 
 function onQueryUpdate(newQuery: LocationQuery) {
-  pendingQuery.value = { ...newQuery };
-}
-
-function updatePendingFilter(name: string, val: any) {
-  const next = { ...pendingQuery.value };
-  if (!val || val === 'all') {
-    delete next[`filter_${name}`];
-  } else {
-    next[`filter_${name}`] = val;
-  }
-  pendingQuery.value = next;
+  replacePending(parseModelFilterValues(newQuery));
 }
 
 function isPendingActive(name: string) {
@@ -211,7 +198,7 @@ function getPendingValue(name: string) {
 }
 
 
-function onChipsClick(item: IChipsItem) {
+function onChipsClick(item: IFilterChipItem) {
   const query = { ...route.query };
   if (Array.isArray(item.value) && item.value.length > 1) {
     item.value.forEach((text: string) => {
@@ -223,24 +210,9 @@ function onChipsClick(item: IChipsItem) {
   router.replace({ query });
 }
 
-function onPendingChipsClick(item: IChipsItem) {
-  const next = { ...pendingQuery.value };
-  if (Array.isArray(item.value) && item.value.length > 1) {
-    item.value.forEach((text: string) => {
-      delete next[`${text}`];
-    });
-  } else {
-    delete next[`${item.value}`];
-  }
-  pendingQuery.value = next;
-}
-
-function onFieldUpdate({ name, value }: { name: string, value: any }) {
-  updatePendingFilter(name, value);
-}
-
-function onResetClick() {
-  pendingQuery.value = {};
+function onPendingChipsClick(item: IFilterChipItem) {
+  const names = Array.isArray(item.value) ? item.value : [String(item.value)];
+  names.forEach((name: string) => removeField(name));
 }
 
 /** «Сбросить всё» в облаке чипсов: снимает фильтры, сортировку не трогает. */
@@ -253,11 +225,6 @@ function onClearAllClick() {
 
   router.replace({ query });
 }
-
-function onApplyClick() {
-  model.value = false;
-  router.replace({ query: pendingQuery.value });
-}
 </script>
 
 <style lang="scss">
@@ -265,19 +232,6 @@ function onApplyClick() {
   margin-top: 8px;
 }
 
-// в облаке чипсов кнопка идёт последней, а слот `FilterChips` кладёт её первой
-.filter-model__clear {
-  @include font-sm;
-
-  order: 1;
-  padding: 6px 8px;
-  color: $filter-model-clear-text;
-
-  &:is(:hover, :focus) {
-    color: $filter-model-clear-text--hover;
-  }
-}
-
 // диапазон в сетке быстрых фильтров занимает обе колонки: слайдеру нужна вся
 // ширина под шкалу и подписи границ
 .filter-popup__grid > .filter-model-field__slider {

package/components/filter/popup.vue

@@ -26,13 +26,12 @@
       >
         <span class="filter-popup__active-filters-title">{{ t('filter_popup.active_title') }}</span>
         <div class="filter-popup__active-chips">
-          <UiChips
+          <FilterChips
             v-for="(chip, index) in activeChips"
             :key="`s-filter-popup-active-${index}`"
-            :index="`s-filter-popup-chips-${index}`"
             :item="chip"
             class="filter-popup__chips"
-            with-close
+            without-label
             @click="$emit('chip-click', chip)"
           />
         </div>
@@ -126,7 +125,7 @@
 </template>
 
 <script setup lang="ts" generic="TField">
-import type { IChipsItem } from '../../types';
+import type { IFilterChipItem } from '../../types';
 
 export interface FilterGroup<T> {
   key: string
@@ -139,7 +138,7 @@ export interface FilterGroup<T> {
 defineProps<{
   title?: string
   activeCount?: number
-  activeChips?: IChipsItem[]
+  activeChips?: IFilterChipItem[]
   quick?: TField[]
   groups?: FilterGroup<TField>[]
   loading?: boolean
@@ -147,7 +146,7 @@ defineProps<{
 }>();
 
 defineEmits<{
-  (e: 'chip-click', item: IChipsItem): void
+  (e: 'chip-click', item: IFilterChipItem): void
   (e: 'field-update', payload: { name: string, value: any }): void
 }>();
 
@@ -225,22 +224,19 @@ const { t } = useI18n();
   gap: 8px;
 }
 
-.ui-chips.filter-popup__chips {
-  @include font-sm;
-
-  border-radius: $radius-lg;
-  border: 1px solid $filter-popup-active-chip-border;
+// на подложке попапа своя палитра, геометрия — общая из .filter-chip
+.filter-chips.filter-popup__chips {
+  border-color: $filter-popup-active-chip-border;
   background-color: $filter-popup-active-chip-bg;
   color: $filter-popup-active-chip-text;
-  pointer-events: all;
 
-  @include hover(background-color) {
+  @include hover(background-color, border-color) {
     background-color: $filter-popup-active-chip-bg--hover;
+    border-color: $filter-popup-active-chip-border;
   }
 }
 
-.ui-chips.filter-popup__chips .ui-chips__close {
-  pointer-events: all;
+.filter-popup__chips .filter-chips__close {
   color: $filter-popup-active-chip-close;
 }
 

package/components/filter/selects.vue

@@ -7,7 +7,7 @@
     >
       <div
         v-if="item.kind==='select'"
-        :class="{'_from-sm': !desktopOnlyFilters.includes(item.name)}"
+        :class="{'_from-sm': !isMobileVisible(item)}"
         class="filter-selects__wrapper"
       >
         <!-- Прозрачный select -->
@@ -24,7 +24,7 @@
           >
             <hr v-if="option.name === 'unspecified' && item.options.length > 1">
             <option :value="option.name">
-              {{ `${capitalize(option.title)} (${option.quantity})` }}
+              {{ getOptionLabel(option) }}
             </option>
           </template>
         </select>
@@ -46,7 +46,7 @@
       <div
         v-if="item.kind==='range'"
         :ref="el => sliderRefs[index] = el"
-        :class="{'_from-sm': !desktopOnlyFilters.includes(item.name)}"
+        :class="{'_from-sm': !isMobileVisible(item)}"
         class="filter-selects__wrapper"
       >
         <UiBtn
@@ -106,18 +106,30 @@
 </template>
 
 <script setup lang="ts">
-import type { IModelFilter } from '../../types';
+import type { IModelFilter, IModelFilterOptions } from '../../types';
 import { convertString, checkDeviceWidth } from '../../runtime';
 import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
+import { parseFilterCategories } from '../../utils/parse-filter-categories';
+import { parseCategoryFilterValues } from '../../utils/filter-main/parse-category-filter-values';
+import { buildCategoriesQuery } from '../../utils/filter-selects/build-categories-query';
 
 const props = defineProps<{
   filters: IModelFilter[]
+  /** Где живёт состояние: свой query-параметр `filter_<name>` (модели, вебкамы) или общая
+   *  строка `categories=<группа>_<значение>` (каталог видео, синхронно с попапом фильтра). */
+  mode?: 'param' | 'categories'
 }>();
 
 const route = useRoute();
 const router = useRouter();
 
-const desktopOnlyFilters = ['guy_type', 'body_build', 'ethnicity'];
+const isCategoriesMode = computed(() => props.mode === 'categories');
+
+// В мобильную строку влезает не всё, остальное остаётся в попапе фильтра. Какие фильтры
+// в ней оставить — знает только вызывающая сторона: набор зависит и от раздела, и от ниши.
+function isMobileVisible(item: IModelFilter) {
+  return !!item.showOnMobile;
+}
 
 const mainFilters = computed(() => {
   return props.filters.filter(item => item.group.name === 'quick');
@@ -128,11 +140,15 @@ const selectItems = computed(() => mainFilters.value.filter(item => item.kind ==
 const selectValues = ref<Record<string, string>>({});
 const sliderRefs = ref<(HTMLDivElement | null)[]>([]);
 
+function readQueryValue(name: string, query: Record<string, any>) {
+  if (isCategoriesMode.value) return parseCategoryFilterValues(parseFilterCategories(query))[name];
+  return query[`filter_${name}`] as string | undefined;
+}
+
 function getSelectValue(name: string, query: Record<string, any>) {
   const item = selectItems.value.find(i => i.name === name);
   if (!item) return '';
-  const value = query[`filter_${name}`] as string | undefined;
-  return value ?? item.options[0]?.name ?? '';
+  return readQueryValue(name, query) ?? item.options[0]?.name ?? '';
 }
 
 onMounted(() => {
@@ -144,21 +160,26 @@ onMounted(() => {
 // Проверка, активен ли фильтр
 function isActive(name: string) {
   const baseName = name.replace(/_(from|to)$/, '');
+  if (isCategoriesMode.value) return !!readQueryValue(baseName, route.query);
   return Object.keys(route.query).some(key => key.startsWith(`filter_${baseName}`));
 }
 
 // Хендлер изменения select
 function onChange(name: string) {
   const val = selectValues.value[name];
-  const query = { ...route.query };
+  const isReset = !val || val === 'all';
+  let query: Record<string, any> = { ...route.query };
 
-  if (!val || val === 'all') {
+  if (isCategoriesMode.value) {
+    query = buildCategoriesQuery(route.query, name, val);
+  } else if (isReset) {
     delete query[`filter_${name}`];
-    selectValues.value[name] = getSelectValue(name, query);
   } else {
     query[`filter_${name}`] = val;
   }
 
+  if (isReset) selectValues.value[name] = getSelectValue(name, query);
+
   router.replace({ query });
 }
 
@@ -276,11 +297,17 @@ function capitalize(text: string) {
 }
 
 function getSelectLabel(item: IModelFilter) {
-  const current = route.query[`filter_${item.name}`] as string | undefined;
+  const current = readQueryValue(item.name, route.query);
   if (!current) return item.title;
   const opt = item.options.find(o => o.name === current);
   return opt ? capitalize(opt.title) : item.title;
 }
+
+// Количество бек считает не для всех опций (у синтетической «all» его нет) — скобки без числа не рисуем
+function getOptionLabel(option: IModelFilterOptions) {
+  const title = capitalize(option.title);
+  return typeof option.quantity === 'number' ? `${title} (${option.quantity})` : title;
+}
 </script>
 
 <style lang="scss">
@@ -333,7 +360,9 @@ function getSelectLabel(item: IModelFilter) {
   text-transform: none;
 }
 
-.filter-selects__select-button.--active-select {
+// .ui-btn в селекторе не для красоты: без него специфичность равна .ui-btn.--secondary,
+// который правит те же свойства, и кто победит — решает порядок блоков в бандле
+.ui-btn.filter-selects__select-button.--active-select {
   padding: 6px 14px;
   border: 1px solid $filters-main-select-border--active;
   color: $filters-main-select-text--active;

package/components/filter/videos-chips.vue

@@ -1,16 +1,20 @@
 <!-- Чипсы фильтра видео (категории/длительность/дата) с парсингом из query -->
 <template>
-  <FilterChips
+  <FilterChipsRow
     :items="chipsItems"
-    @click="(e: IChipsItem) => onChipsClick(e)"
+    @click="(e: IFilterChipItem) => onChipsClick(e)"
+    @clear="onClearAllClick"
   >
     <slot/>
-  </FilterChips>
+  </FilterChipsRow>
 </template>
 
 <script setup lang="ts">
-import type { IChipsItem, ISelectItem, IFilterScheme } from '../../types';
+import type { IFilterChipItem, ISelectItem, IFilterScheme } from '../../types';
+import type { LocationQuery } from '#vue-router';
 import { parseFilterCategories } from '../../utils/parse-filter-categories';
+import { buildChipParts } from '../../utils/filter-chips/build-chip-parts';
+import { convertString } from '../../runtime';
 
 const route = useRoute();
 const router = useRouter();
@@ -22,8 +26,24 @@ const props = defineProps<{
   scheme: IFilterScheme[]
 }>();
 
+const quickFilterScheme = useAppConfig().quickVideoFilters || [];
+
+const findGroup = (name: string) => props.scheme.find(item => item.name.toLowerCase() === name.toLowerCase());
+
+/**
+ * Название группы для подписи чипсы. Сначала короткий заголовок из конфига сайта — тот же,
+ * что стоит на кнопке в строке главных фильтров, иначе название группы с бека. Схема грузится
+ * лениво, и до неё остаётся только ключ из query.
+ */
+function groupLabel(name: string) {
+  const quick = quickFilterScheme.find(item => item.name.toLowerCase() === name.toLowerCase());
+  if (quick?.titleKey) return t(quick.titleKey);
+
+  return findGroup(name)?.title || convertString().toCapitalize(name);
+}
+
 const chipsItems = computed(() => {
-  const items: IChipsItem[] = [];
+  const items: IFilterChipItem[] = [];
 
   // categories
   const categories = parseFilterCategories(route.query);
@@ -31,12 +51,10 @@ const chipsItems = computed(() => {
     categories.forEach(cat => {
       const value = cat.split('_')[1] ?? cat;
       const groupCategory = cat.split('_')[0];
-      const title = props.scheme.find(item => {
-        return item.name.toLowerCase() === groupCategory.toLowerCase();
-      })?.items.find((item: ISelectItem) => item.value === value)?.title;
+      const title = findGroup(groupCategory)?.items.find((item: ISelectItem) => item.value === value)?.title;
 
       items.push({
-        title: title || '',
+        ...buildChipParts(groupLabel(groupCategory), title || convertString().toCapitalize(value)),
         value: cat,
         key: 'categories'
       });
@@ -48,7 +66,7 @@ const chipsItems = computed(() => {
   if (durationParam) {
     const title = props.durationItems.find(item => item.value === durationParam)?.title;
     items.push({
-      title: t(title || ''),
+      ...buildChipParts(t('duration'), t(title || '')),
       value: String(durationParam),
       key: 'duration'
     });
@@ -59,7 +77,7 @@ const chipsItems = computed(() => {
   if (addedParam) {
     const title = props.addedItems.find(item => item.value === addedParam)?.title;
     items.push({
-      title: t(title || ''),
+      ...buildChipParts(t('added'), t(title || '')),
       value: String(addedParam),
       key: 'added'
     });
@@ -68,17 +86,14 @@ const chipsItems = computed(() => {
   return items;
 });
 
-function onChipsClick(item: IChipsItem & { key?: string }) {
-  const query = { ...route.query };
-
+// Снятие одной чипсы и «сбросить всё» — одна и та же операция, поэтому правило,
+// за какой параметр query отвечает чипса, живёт в одном месте
+function removeChipFromQuery(query: LocationQuery, item: IFilterChipItem) {
   if (item.key === 'categories') {
-    const categories = parseFilterCategories(route.query);
-    if (!categories.length) return;
+    const categories = parseFilterCategories(query).filter(cat => cat !== item.value);
 
-    const updatedCategories = categories.filter(cat => cat !== item.value);
-
-    if (updatedCategories.length > 0) {
-      query.categories = updatedCategories.join(',');
+    if (categories.length > 0) {
+      query.categories = categories.join(',');
     } else {
       delete query.categories;
     }
@@ -91,6 +106,22 @@ function onChipsClick(item: IChipsItem & { key?: string }) {
   if (item.key === 'added') {
     delete query.added;
   }
+}
+
+function onChipsClick(item: IFilterChipItem) {
+  const query = { ...route.query };
+
+  removeChipFromQuery(query, item);
+
+  router.replace({ query });
+}
+
+/** «Сбросить всё»: снимает фильтры, сортировку не трогает. */
+function onClearAllClick() {
+  const query = { ...route.query };
+
+  chipsItems.value.forEach(item => removeChipFromQuery(query, item));
+  delete query['page'];
 
   router.replace({ query });
 }