itube-specs 0.0.230 → 0.0.232

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

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import type { IChipsItem, IModelFilter } from '../../types';
+import type { IChipsItem, IModelFilter, IModelFilterOptions } from '../../types';
 import type { LocationQueryValue } from '#vue-router';
 import { useRoute, useRouter } from '#vue-router';
 import { getMonth } from '../../runtime';
@@ -42,28 +42,33 @@ const chipsItems = computed(() => {
       }, {})
   )
 
-  const title = (item: string, index: number) => {
+  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 defaultValue = index === 0 ? filter?.options[ 0 ] : filter?.options[ filter.options.length - 1 ];
     const value: LocationQueryValue | LocationQueryValue[] = route.query[ `filter_${item.replace(/ /g, '_')}` ];
-    if (item.split(' ').some(item => item === 'month')) {
-      return getMonth(t, Number(value) - 1 || Number(defaultValue) - 1)
+    const result = () => {
+      if (item.split(' ').some(item => item === 'month')) {
+        return getMonth(t, Number(value) - 1 || Number(defaultValue) - 1);
+      } else {
+        return filter?.options.find((option: IModelFilterOptions) => option.name === value)?.title;
+      }
     }
-    return value || Number(defaultValue) - 1;
+    return result() || Number(defaultValue) - 1;
   }
 
-  const text = (item: string[]) => [...new Set(item.map((subItem, index) => title(subItem, index)))].join(' - ');
+  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)?.title;
-    const textValue = `${convertedKey}: ${text(item)}`;
-    return textValue.length > 30 ? text(item) : textValue;
+    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) => ({

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

@@ -31,7 +31,7 @@
           v-for="(item, index) in scheme"
           :name="item.title"
           :key="`scheme-${index}`"
-          v-model="filterValue[item.title.toLowerCase()]"
+          v-model="filterValue[item.name.toLowerCase()]"
           :items="item.items"
           :label="item?.label"
           :placeholder="item.placeholder"

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

@@ -6,7 +6,8 @@
 </template>
 
 <script setup lang="ts">
-import type { IChipsItem, ISelectItem } from '../../types';
+import type { IChipsItem, ISelectItem, IFilterScheme } from '../../types';
+import { convertString } from '../../runtime';
 
 const route = useRoute();
 const router = useRouter();
@@ -14,6 +15,7 @@ const router = useRouter();
 const props = defineProps<{
   addedItems: ISelectItem[]
   durationItems: ISelectItem[]
+  scheme: IFilterScheme[]
 }>()
 
 const chipsItems = computed(() => {
@@ -26,9 +28,14 @@ const chipsItems = computed(() => {
         ? categoriesParam.flatMap(c => c.split(','))
         : categoriesParam.split(',');
     categories.forEach(cat => {
-      const title = cat.split('_')[1] ?? cat;
+      const value = cat.split('_')[1] ?? cat;
+      const groupCategory = cat.split('_')[0];
+      const title = props.scheme.find(item => {
+        return item.name === convertString().toCapitalize(groupCategory)
+      })?.items.find((item: ISelectItem) => item.value === value)?.title;
+
       items.push({
-        title,
+        title: title || '',
         value: cat,
         key: 'categories'
       });

package/package.json

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

package/types/filter-scheme.d.ts

@@ -2,10 +2,8 @@ import type { ISelectItem } from '../types';
 
 export interface IFilterScheme {
   title: string
-  className?: string
   label?: string
-  wide?: boolean
-  fixed?: boolean
   items: ISelectItem[]
   placeholder: string
+  name: string
 }