itube-specs 0.0.746 → 0.0.747

package/components/grids/s-grid-videos.vue

@@ -5,7 +5,7 @@
           {'--first-hidden': hideFirstRow},
       ]"
   >
-    <slot name="grid-start" />
+    <slot name="grid-start"/>
     <FVideoCard
         v-for="(item, index) in eagerItems"
         :key="`video-${item.guid}`"
@@ -18,7 +18,7 @@
         :playlist="playlist"
     />
     <slot/>
-    <NuxtLazyHydrate when-idle v-if="idleItems.length > 0">
+    <NuxtLazyHydrate when-idle v-if="idleItems.length > 0" :key="`idle-${route.fullPath}`">
       <div class="s-grid-videos__idle">
         <FVideoCard
             v-for="item in idleItems"
@@ -32,7 +32,7 @@
         />
       </div>
     </NuxtLazyHydrate>
-    <NuxtLazyHydrate when-visible v-if="lazyItems.length > 0">
+    <NuxtLazyHydrate when-visible v-if="lazyItems.length > 0" :key="`lazy-${route.fullPath}`">
       <div class="s-grid-videos__lazy">
         <FVideoCard
             v-for="item in lazyItems"
@@ -46,13 +46,12 @@
         />
       </div>
     </NuxtLazyHydrate>
-    <slot name="grid-end" />
+    <slot name="grid-end"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { IVideoCard } from '../../types';
-import { isMobileDevice } from '../../runtime';
 
 const IDLE_COUNT = 4;
 
@@ -64,11 +63,10 @@ const props = defineProps<{
   playlist?: boolean
   playlistId?: string
   topChips?: string[]
-}>()
+}>();
 
-const isMobile = useState('isMobile', () =>
-  isMobileDevice(useRequestHeaders()['user-agent'] ?? '')
-);
+const route = useRoute();
+const isMobile = useState<boolean>('isMobile');
 const eagerCount = computed(() => isMobile.value ? 4 : 12);
 
 const eagerItems = computed(() => props.items.slice(0, eagerCount.value));

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

@@ -1,176 +1,155 @@
 <template>
   <SPopup
-      v-if="isOpen"
-      v-model="isOpen"
+      v-if="model"
+      v-model="model"
       drawer
-      @close="closePopup"
+      class="s-filter-popup"
   >
-    <template #title>{{ filterTitle }}</template>
-    <div class="s-filter-popup__filters">
-      <div class="s-filter-popup__main-filters">
-        <SSelect
-            v-model="durationValue"
-            name="duration"
-            :items="translateTitle(durationItems)"
-            :placeholder="t('duration')"
-            icon="time"
-        />
-        <SSelect
-            v-model="addedValue"
-            name="added"
-            :items="translateTitle(addedItems)"
-            :placeholder="t('added')"
-            icon="date"
-        />
+    <template #title>
+      <div class="s-filter-popup__title-wrapper">
+        {{ title ?? t('filter') }}
+        <span
+            v-if="activeCount"
+            class="s-filter-popup__active"
+        >{{ activeCount }} active</span>
       </div>
-      <template v-if="scheme.length">
-        <SSelect
-            v-for="(item, index) in scheme"
-            :key="`scheme-${index}`"
-            v-model="filterValue[item.name.toLowerCase()]"
-            :name="item.title"
-            :items="item.items"
-            :label="item?.label"
-            :label-icon="{
-              icon: item.icon,
-              prefix: 'categories'
-            }"
-            :placeholder="item.placeholder"
-        />
-      </template>
+    </template>
+
+    <div
+        class="s-filter-popup__content"
+        :class="{ '_loading': loading }"
+    >
+      <div
+          v-if="activeChips && activeChips.length > 0"
+          class="s-filter-popup__active-filters"
+      >
+        <span class="s-filter-popup__active-filters-title">{{ t('filter_popup.active_title') }}</span>
+        <div class="s-filter-popup__active-chips">
+          <SChips
+              v-for="(chip, index) in activeChips"
+              :key="`s-filter-popup-active-${index}`"
+              class="s-filter-popup__chips"
+              with-close
+              :index="`s-filter-popup-chips-${index}`"
+              :item="chip"
+              @click="$emit('chip-click', chip)"
+          />
+        </div>
+      </div>
+
       <div
-          v-else
-          class="s-filter-popup__loading _loading"
-      ></div>
+          v-if="quick && quick.length > 0"
+          class="s-filter-popup__quick"
+      >
+        <span class="s-filter-popup__quick-title">{{ t('filter_popup.quick_title') }}</span>
+        <div class="s-filter-popup__grid">
+          <template v-for="(item, index) in quick" :key="`quick-${index}`">
+            <slot
+                name="quick-field"
+                :item="item"
+                :index="index"
+            >
+              <SSelect
+                  class="s-filter-popup__select"
+                  :name="(item as any).name"
+                  :model-value="(item as any).value"
+                  :items="(item as any).items"
+                  size="s"
+                  :is-first-placeholder="modelsPage"
+                  :active="(item as any).active"
+                  :label="(item as any).label ?? (item as any).title"
+                  :label-icon="(item as any).icon ? { icon: (item as any).icon, prefix: (item as any).iconPrefix ?? (modelsPage ? 'models' : 'categories') } : undefined"
+                  :placeholder="(item as any).placeholder"
+                  @update:model-value="val => $emit('field-update', { name: (item as any).name, value: val })"
+              />
+            </slot>
+          </template>
+        </div>
+      </div>
+
+      <details
+          v-for="(group, groupIndex) in groups"
+          :key="`group-${groupIndex}`"
+          class="s-filter-popup__group"
+      >
+        <summary class="s-filter-popup__summary">
+          <SIcon
+              name="angle-right"
+              size="16"
+              class="s-filter-popup__summary-arrow"
+          />
+          <span class="s-filter-popup__summary-title">{{ group.title }}</span>
+          <span class="s-filter-popup__summary-count">{{ t('filter_popup.fields', { count: group.count ?? group.fields.length }) }}</span>
+          <span
+              v-if="group.description"
+              class="s-filter-popup__summary-description"
+          >{{ group.description }}</span>
+        </summary>
+        <div class="s-filter-popup__group-content">
+          <template
+              v-for="(field, fieldIndex) in group.fields"
+              :key="`field-${groupIndex}-${fieldIndex}`"
+          >
+            <slot
+                name="field"
+                :field="field"
+                :group="group"
+                :index="fieldIndex"
+            >
+              <SSelect
+                  class="s-filter-popup__select"
+                  :name="(field as any).name"
+                  :model-value="(field as any).value"
+                  :items="(field as any).items"
+                  size="s"
+                  :active="(field as any).active"
+                  :label="(field as any).label ?? (field as any).title"
+                  :label-icon="(field as any).icon ? { icon: (field as any).icon, prefix: (field as any).iconPrefix ?? (modelsPage ? 'models' : 'categories') } : undefined"
+                  :placeholder="(field as any).placeholder"
+                  @update:model-value="val => $emit('field-update', { name: (field as any).name, value: val })"
+              />
+            </slot>
+          </template>
+        </div>
+      </details>
     </div>
 
     <template #footer>
-      <div class="s-filter-popup__buttons">
-        <SButton
-            theme="secondary"
-            wide
-            size="l"
-            :disabled="!isFiltered"
-            @click="reset"
-        >{{ t('reset_all') }}
-        </SButton>
-        <SButton
-            wide
-            size="l"
-            theme="primary"
-            @click="saveResult"
-        >{{ t('apply') }}
-        </SButton>
-      </div>
+      <slot name="footer"/>
     </template>
   </SPopup>
 </template>
 
-<script setup lang="ts">
-import type { IFilterScheme, ISelectItem } from '../../types';
+<script setup lang="ts" generic="TField">
+import type { IChipsItem } from '../../types';
 
-const { t } = useI18n();
+export interface FilterGroup<T> {
+  key: string
+  title: string
+  description?: string
+  count?: number
+  fields: T[]
+}
 
-const props = defineProps<{
-  addedItems: ISelectItem[]
-  durationItems: ISelectItem[]
-  modelValue: boolean
-  scheme: IFilterScheme[]
-  count: number
+defineProps<{
+  title?: string
+  activeCount?: number
+  activeChips?: IChipsItem[]
+  quick?: TField[]
+  groups?: FilterGroup<TField>[]
+  loading?: boolean
+  modelsPage?: boolean
 }>();
 
-const durationValue = ref('');
-const addedValue = ref('');
-const filterValue = ref({} as Record<string, string>);
-
-const route = useRoute();
-
-const categoriesFromQuery = route.query.categories
-    ? (typeof route.query.categories === 'string'
-        ? route.query.categories.split(',')
-        : route.query.categories.flatMap(cat => cat.split(',')))
-    : [];
-
-categoriesFromQuery.forEach(str => {
-  const [key, ...rest] = str.split('_');
-  if (key && rest.length > 0) {
-    filterValue.value[key] = rest.join('_');
-  }
-});
-
-durationValue.value = route.query['duration'] as string || '';
-addedValue.value = route.query['added'] as string || '';
-
-const emit = defineEmits<{
-  (eventName: 'update:modelValue', value: boolean): void
+defineEmits<{
+  (e: 'chip-click', item: IChipsItem): void
+  (e: 'field-update', payload: { name: string, value: any }): void
 }>();
 
-const isOpen = ref(props.modelValue);
-
-function closePopup() {
-  isOpen.value = false;
-  emit('update:modelValue', isOpen.value);
-}
+const model = defineModel<boolean>();
 
-const router = useRouter();
-
-function saveResult() {
-  const oldQuery = { ...route.query };
-  delete oldQuery['page'];
-
-  const mainFiltersValue = {
-    ...(durationValue.value ? { duration: durationValue.value } : {}),
-    ...(addedValue.value ? { added: addedValue.value } : {}),
-  };
-
-  const preserved = {
-    ...mainFiltersValue,
-    ...(oldQuery.sort ? { sort: oldQuery.sort } : {}),
-    ...(oldQuery.page ? { page: oldQuery.page } : {}),
-  };
-
-  const categories = Object.entries(filterValue.value)
-      .filter(([, value]) => typeof value === 'string' && value.length > 0)
-      .map(([key, value]) => `${key}_${value}`);
-
-  const categoriesString = categories.join(',');
-
-  router.push({
-    query: {
-      ...preserved,
-      categories: categories.length ? categoriesString : undefined,
-    },
-  });
-
-  closePopup();
-}
-
-function reset() {
-  durationValue.value = '';
-  addedValue.value = '';
-  filterValue.value = {};
-  router.push({
-    query: {
-      categories: null,
-    },
-  });
-}
-
-const filterTitle = computed(() => {
-  const hasDuration = durationValue.value ? 1 : 0;
-  const hasAdded = addedValue.value ? 1 : 0;
-  const count = Object.keys(filterValue.value).length + hasAdded + hasDuration;
-  const filterText = count > 1 ? t('filters') : t('filter');
-  return count > 0 ? `${filterText}: ${count}` : t('filter');
-});
-
-const isFiltered = computed(() => !!route.query['categories'] || Object.keys(filterValue.value).length > 0 || durationValue.value || addedValue.value);
-
-function translateTitle(array: ISelectItem[]) {
-  return array.map((item: ISelectItem) => ({
-    title: t(item.title),
-    key: item.key,
-    value: item.value,
-  }));
-}
+const { t } = useI18n();
 </script>
+
+<style scoped lang="scss">
+</style>

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

@@ -11,27 +11,54 @@
                         maxRangeValue(item)
                       ]"
         :title="item.title"
+        :icon="icon"
+        :icon-prefix="iconPrefix"
         :active="isActive(item.name)"
-        :format="formatterSlider(item.options)"
+        :format="formatterSlider()"
         :between="betweenText(item.options, getRangeInfo(item.options)?.min, getRangeInfo(item.options)?.max)"
         @update:model-value="val => updateRangeFilter(item, val)"
-    />
+    >
+      <template
+          v-for="(_, name) in $slots"
+          #[name]="slotData"
+      >
+        <slot :name="name" v-bind="slotData"/>
+      </template>
+    </SSlider>
   </ClientOnly>
 </template>
 
 <script setup lang="ts">
 import type { IModelFilter, IModelFilterOptions } from '../../types';
+import type { LocationQuery } from '#vue-router';
 import { useRoute, useRouter } from '#vue-router';
 
-defineProps<{
+const props = defineProps<{
   item: IModelFilter
   index: number
   groupName: string
-}>()
+  query?: LocationQuery
+  icon?: string
+  iconPrefix?: string
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:query', value: LocationQuery): void
+}>();
 
 const route = useRoute();
 const router = useRouter();
 
+const effectiveQuery = computed<LocationQuery>(() => props.query ?? route.query);
+
+function commitQuery(newQuery: LocationQuery) {
+  if (props.query !== undefined) {
+    emit('update:query', newQuery);
+  } else {
+    router.replace({ query: newQuery });
+  }
+}
+
 function getRangeInfo(options: { name: string; quantity: number; title: string }[]): {
   min: number,
   step: number,
@@ -46,8 +73,8 @@ function getRangeInfo(options: { name: string; quantity: number; title: string }
     return null;
   }
 
-  const min = numericValues[ 0 ] || 0;
-  const max = numericValues[ numericValues.length - 1 ] || 100;
+  const min = numericValues[0] || 0;
+  const max = numericValues[numericValues.length - 1] || 100;
   const step = numericValues.length > 1 ? 1 : 0;
 
   return { min, step, max };
@@ -58,22 +85,22 @@ function updateRangeFilter(item: IModelFilter, val: string[] | number[]) {
     const rangeInfo = getRangeInfo(item.options);
     if (!rangeInfo) return;
     const [from, to] = val;
-    const query = { ...route.query };
+    const query = { ...effectiveQuery.value };
 
-    query[ `filter_${item.name}_from` ] = from;
-    query[ `filter_${item.name}_to` ] = to;
+    query[`filter_${item.name}_from`] = String(from);
+    query[`filter_${item.name}_to`] = String(to);
 
     if (from === rangeInfo.min && to === rangeInfo.max) {
-      delete query[ `filter_${item.name}_from` ];
-      delete query[ `filter_${item.name}_to` ];
+      delete query[`filter_${item.name}_from`];
+      delete query[`filter_${item.name}_to`];
     }
 
-    router.replace({ query });
+    commitQuery(query);
   });
 }
 
 function getRangeValue(name: string, defaultValue: number | undefined) {
-  const value = route.query[ `filter_${name}` ];
+  const value = effectiveQuery.value[`filter_${name}`];
   if (value !== undefined) {
     return Number(value);
   } else {
@@ -92,7 +119,7 @@ function maxRangeValue(item: IModelFilter) {
 }
 
 function isSliderHasTitle(options: IModelFilterOptions[] | undefined): boolean | undefined {
-  return options && options[ 0 ] && isNaN(Number(options[ 0 ].title));
+  return options && options[0] && isNaN(Number(options[0].title));
 }
 
 function formatterSlider() {
@@ -103,14 +130,14 @@ function betweenText(options: IModelFilterOptions[], min: number | undefined, ma
   if (isSliderHasTitle(options)) {
     const getText = (number: number | undefined): string | undefined => {
       return options.find((item: IModelFilterOptions) => Number(item.name) === number)?.title;
-    }
+    };
     return [getText(min) || '', getText(max) || ''];
   }
 }
 
 function isActive(name: string) {
   const baseName = name.replace(/_(from|to)$/, '');
-  return Object.keys(route.query).some(key => key.startsWith(`filter_${baseName}`));
+  return Object.keys(effectiveQuery.value).some(key => key.startsWith(`filter_${baseName}`));
 }
 </script>