itube-specs 0.0.367 → 0.0.369

package/components/page-components/s-model-filters.vue

@@ -1,5 +1,8 @@
 <template>
-  <SFilterModelChips :filters="data.filters"/>
+  <SFilterChips
+      :items="chipsItems"
+      @click="(e: IChipsItem)=> onChipsClick(e)"
+  />
   <SFilterPage
       class="s-model-filters__filters _from-sm"
       :filters="data.filters"
@@ -44,13 +47,14 @@
 </template>
 
 <script setup lang="ts">
-import type { IModelCard, PaginatedResponse } from '../../types';
+import type { IChipsItem, IModelCard, PaginatedResponse } from '../../types';
 
 const props = defineProps<{
   data: PaginatedResponse<IModelCard>,
   status: string,
   filterCount: number,
   title?: string,
+  chipsItems: IChipsItem[]
 }>()
 
 const model = defineModel<boolean>();
@@ -80,6 +84,18 @@ const popupTitle = computed(() => {
   const filterText = props.filterCount > 1 ? t('filters') : t('filter');
   return `${filterText}${countText}`;
 })
+
+function onChipsClick(item: IChipsItem) {
+  const query = { ...route.query };
+  if (Array.isArray(item.value) && item.value.length > 1) {
+    item.value.forEach((text: string) => {
+      delete query[ `${text}` ]
+    })
+  } else {
+    delete query[ `${item.value}` ]
+  }
+  router.replace({ query });
+}
 </script>
 
 <style scoped lang="scss">

package/composables/use-meta.ts

@@ -1,11 +1,17 @@
 import { computed, unref } from 'vue';
 import type { Ref } from 'vue';
 import { useRoute } from 'vue-router';
+import type { IChipsItem } from '../types';
 
-export function useMeta(t, page: string, brandName: string, hasSort?: boolean, text?: Ref<string>, secondText?: Ref<string>) {
+export function useMeta(t, page: string, brandName: string, sortOptions?: IChipsItem[], text?: Ref<string>, secondText?: Ref<string>) {
     const route = useRoute();
 
-    const sortType = computed(() => route?.query?.['sort'] || 'trending');
+    const sortType = computed(() => {
+        const values = sortOptions?.map(item => item.value);
+        const queryValue = String(route?.query?.['sort']);
+        const DEFAULT_VALUE = 'trending';
+        return queryValue && values?.includes(queryValue) ? queryValue : DEFAULT_VALUE;
+    });
 
     function getPath(key: string) {
         const plainSlug = unref(text);
@@ -14,7 +20,7 @@ export function useMeta(t, page: string, brandName: string, hasSort?: boolean, t
         const pageText = unref(pageNumber) === 1 ? null : ` #${unref(pageNumber)}`;
 
         return t(
-            `meta.${page}.${hasSort ? `${sortType.value}.` : ''}${key}`,
+            `meta.${page}.${sortOptions && sortOptions.length > 0 ? `${sortType.value}.` : ''}${key}`,
             {
                 text: plainSlug,
                 secondText: secondTextValue,

package/package.json

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

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

@@ -1,96 +0,0 @@
-<template>
-  <SFilterChips
-      :items="chipsItems"
-      @click="(e: IChipsItem)=> onChipsClick(e)"
-  />
-</template>
-
-<script setup lang="ts">
-import type { IChipsItem, IModelFilter, IModelFilterOptions } from '../../types';
-import type { LocationQueryValue } from '#vue-router';
-import { useRoute, useRouter } from '#vue-router';
-import { getMonth } from '../../runtime';
-
-const props = defineProps<{
-  filters: IModelFilter[]
-}>();
-
-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-
-const chipsItems = computed(() => {
-  const queryItems = Object.keys(route.query)
-      .filter(item => item.startsWith('filter'))
-      .map(item => 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 key = ['from', 'to'].includes(last)
-            ? parts.slice(0, -1).join(' ')
-            : str;
-
-        acc[ key ] ??= [];
-
-        if (last === 'from') acc[ key ].unshift(str);
-        else acc[ key ].push(str);
-
-        return acc;
-      }, {})
-  )
-
-  const getValue = (item: string, index: number) => {
-    const filter = props.filters.find(filter => {
-      return filter.name === `${item.replace(/ /g, '_')
-          .replace('_from', '')
-          .replace('_to', '')
-      }`
-    });
-    const defaultValue = index === 0 ? filter?.options[ 0 ] : filter?.options[ filter.options.length - 1 ];
-    const value: LocationQueryValue | LocationQueryValue[] = route.query[ `filter_${item.replace(/ /g, '_')}` ];
-    const result = () => {
-      if (item.split(' ').some(item => item === 'month')) {
-        return getMonth(t, Number(value) - 1 || Number(defaultValue) - 1);
-      } else if (!isNaN(Number(value))) {
-        return value;
-      } else  {
-        return filter?.options.find((option: IModelFilterOptions) => option.name === value)?.title;
-      }
-    }
-    return result() || Number(defaultValue) - 1;
-  }
-
-  const getValueText = (item: string[]) => [...new Set(item.map((subItem, index) => getValue(subItem, index)))].join(' - ');
-
-  const chipsTitle = ((item: string[]) => {
-    const key = Array.isArray(item) ? item[0].replace(' from', '') : item;
-    const convertedKey = props.filters.find(item => item.name.replace(/_/g, ' ') === key)?.name;
-    const filter = props.filters.find(item => item.name === convertedKey);
-    const textValue = `${filter?.title}: ${getValueText(item)}`;
-    return textValue.length > 30 ? getValueText(item) : textValue;
-  })
-
-  return groups.map((item) => ({
-    title: chipsTitle(item),
-    value: item.map(subItem => `filter_${subItem.replace(/ /g, '_')}`),
-  }));
-})
-
-function onChipsClick(item: IChipsItem) {
-  const query = { ...route.query };
-  if (Array.isArray(item.value) && item.value.length > 1) {
-    item.value.forEach((text: string) => {
-      delete query[ `${text}` ]
-    })
-  } else {
-    delete query[ `${item.value}` ]
-  }
-  router.replace({ query });
-}
-</script>
-
-<style scoped lang="scss">
-</style>