itube-specs 0.0.368 → 0.0.371

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

@@ -3,7 +3,7 @@ import type { Ref } from 'vue';
 import { useRoute } from 'vue-router';
 import type { IChipsItem } from '../types';
 
-export function useMeta(t, page: string, brandName: string, sortOptions?: IChipsItem[], text?: Ref<string>, secondText?: Ref<string>) {
+export function useMeta(t, page: string, brandName: string, sortOptions?: IChipsItem[], text?: Ref<string>, secondText?: Ref<string>, thirdText?: Ref<string>, fourthText?: Ref<string>) {
     const route = useRoute();
 
     const sortType = computed(() => {
@@ -16,6 +16,8 @@ export function useMeta(t, page: string, brandName: string, sortOptions?: IChips
     function getPath(key: string) {
         const plainSlug = unref(text);
         const secondTextValue = unref(secondText);
+        const thirdTextValue = unref(thirdText);
+        const fourTextValue = unref(fourthText);
         const pageNumber = computed(() => route.query?.['page'] ? Number(route.query['page']) : 1);
         const pageText = unref(pageNumber) === 1 ? null : ` #${unref(pageNumber)}`;
 
@@ -24,6 +26,8 @@ export function useMeta(t, page: string, brandName: string, sortOptions?: IChips
             {
                 text: plainSlug,
                 secondText: secondTextValue,
+                thirdText: thirdTextValue,
+                fourText: fourTextValue,
                 brandName: `| ${brandName}`, //черточка '|' нужна обязательно
                 page: pageText,
             }

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

@@ -0,0 +1,99 @@
+import type { IChipsItem, IModelFilter, IModelFilterOptions } from '../types'
+import type { LocationQuery } from '#vue-router'
+import { getMonth } from '../runtime'
+import type { Ref } from 'vue';
+
+export function useFilterChipsItems(
+  filters: Ref<IModelFilter[]>,
+  route: { query: LocationQuery },
+  t: (key: string) => string
+) {
+  const chipsItems = computed<IChipsItem[]>(() => {
+    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 =
+          last === 'from' || last === 'to'
+            ? 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 = filters.value.find(filter =>
+        filter.name ===
+        item
+          .replace(/ /g, '_')
+          .replace('_from', '')
+          .replace('_to', '')
+      )
+
+      const defaultValue =
+        index === 0
+          ? filter?.options[0]
+          : filter?.options.at(-1)
+
+      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 (
+        filter?.options.find(
+          (option: IModelFilterOptions) =>
+            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, '_')}`
+      ),
+    }))
+  })
+
+  return {
+    chipsItems,
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.368",
+  "version": "0.0.371",
   "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>