itube-specs 0.0.723 → 0.0.726

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

@@ -22,19 +22,25 @@
             icon="date"
         />
       </div>
-      <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 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>
+      <div
+          v-else
+          class="s-filter-popup__loading _loading"
+      ></div>
     </div>
 
     <template #footer>
@@ -62,7 +68,7 @@
 <script setup lang="ts">
 import type { IFilterScheme, ISelectItem } from '../../types';
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 const props = defineProps<{
   addedItems: ISelectItem[]
@@ -70,7 +76,7 @@ const props = defineProps<{
   modelValue: boolean
   scheme: IFilterScheme[]
   count: number
-}>()
+}>();
 
 const durationValue = ref('');
 const addedValue = ref('');
@@ -87,39 +93,39 @@ const categoriesFromQuery = route.query.categories
 categoriesFromQuery.forEach(str => {
   const [key, ...rest] = str.split('_');
   if (key && rest.length > 0) {
-    filterValue.value[ key ] = rest.join('_');
+    filterValue.value[key] = rest.join('_');
   }
 });
 
-durationValue.value = route.query[ 'duration' ] as string || '';
-addedValue.value = route.query[ 'added' ] as string || '';
+durationValue.value = route.query['duration'] as string || '';
+addedValue.value = route.query['added'] as string || '';
 
 const emit = defineEmits<{
   (eventName: 'update:modelValue', value: boolean): void
-}>()
+}>();
 
-const isOpen = ref(props.modelValue)
+const isOpen = ref(props.modelValue);
 
 function closePopup() {
   isOpen.value = false;
-  emit('update:modelValue', isOpen.value)
+  emit('update:modelValue', isOpen.value);
 }
 
 const router = useRouter();
 
 function saveResult() {
   const oldQuery = { ...route.query };
-  delete oldQuery[ 'page' ];
+  delete oldQuery['page'];
 
   const mainFiltersValue = {
     ...(durationValue.value ? { duration: durationValue.value } : {}),
-    ...(addedValue.value ? { added: addedValue.value } : {})
+    ...(addedValue.value ? { added: addedValue.value } : {}),
   };
 
   const preserved = {
     ...mainFiltersValue,
     ...(oldQuery.sort ? { sort: oldQuery.sort } : {}),
-    ...(oldQuery.page ? { page: oldQuery.page } : {})
+    ...(oldQuery.page ? { page: oldQuery.page } : {}),
   };
 
   const categories = Object.entries(filterValue.value)
@@ -132,7 +138,7 @@ function saveResult() {
     query: {
       ...preserved,
       categories: categories.length ? categoriesString : undefined,
-    }
+    },
   });
 
   closePopup();
@@ -145,7 +151,7 @@ function reset() {
   router.push({
     query: {
       categories: null,
-    }
+    },
   });
 }
 
@@ -154,16 +160,16 @@ const filterTitle = computed(() => {
   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')
-})
+  return count > 0 ? `${filterText}: ${count}` : t('filter');
+});
 
-const isFiltered = computed(() => !!route.query[ 'categories' ] || Object.keys(filterValue.value).length > 0 || durationValue.value || addedValue.value);
+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
-  }))
+    value: item.value,
+  }));
 }
 </script>

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

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ButtonSizes, ButtonThemes, IFilterScheme, ISelectItem  } from '../../types';
+import type { ButtonSizes, ButtonThemes, IFilterScheme, ISelectItem } from '../../types';
 import type { LocationQuery } from '#vue-router';
 
 const route = useRoute();
@@ -33,12 +33,20 @@ defineProps<{
   durationItems: ISelectItem[]
   buttonSize?: ButtonSizes
   buttonTheme?: ButtonThemes
-}>()
+}>();
+
+const emit = defineEmits<{
+  (e: 'open'): void
+}>();
+
+watch(filterOpen, (value) => {
+  if (value) emit('open');
+});
 
 function getFilteredQuery(query: LocationQuery) {
   const result: string[] = [];
 
-  const categoriesRaw = query[ 'categories' ];
+  const categoriesRaw = query['categories'];
   if (categoriesRaw) {
     if (Array.isArray(categoriesRaw)) {
       categoriesRaw.forEach(item => {
@@ -52,7 +60,7 @@ function getFilteredQuery(query: LocationQuery) {
   }
 
   ['duration', 'added'].forEach(key => {
-    const val = query[ key ];
+    const val = query[key];
     if (typeof val === 'string' && val.length > 0) {
       result.push(val);
     }
@@ -63,9 +71,9 @@ function getFilteredQuery(query: LocationQuery) {
 
 const filterCount = ref(0);
 
-filterCount.value = getFilteredQuery(route.query).length
+filterCount.value = getFilteredQuery(route.query).length;
 
 watch(() => route.query, (value) => {
-  filterCount.value = getFilteredQuery(value).length
-})
+  filterCount.value = getFilteredQuery(value).length;
+});
 </script>

package/components/ui/s-img.vue

@@ -6,7 +6,7 @@
       :loading="loading"
       :width="width"
       :height="height"
-      :sizes="sizes"
+      :sizes="computedSizes"
       :alt="alt"
       :decoding="priority ? 'sync' : 'async'"
       :fetchpriority="priority ? 'high' : 'auto'"
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<{
   src?: string,
   width: string | number,
   height: string | number,
-  sizes: string,
+  sizes?: string,
   urls?: IThumbUrls,
   alt?: string,
   loading?: 'lazy' | 'eager',
@@ -33,6 +33,11 @@ const props = withDefaults(defineProps<{
   fit: 'cover',
 })
 
+const computedSizes = computed(() => {
+  if (props.loading === 'lazy') return 'auto';
+  return props.sizes;
+});
+
 const imgSrc = computed(() => {
   if (props.src) return props.src
   if (props.urls) return props.urls.webp[ThumbSize.Medium]

package/package.json

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

package/composables/__tests__/use-filter-scheme.test.ts

@@ -1,57 +0,0 @@
-// @vitest-environment nuxt
-import { describe, it, expect } from 'vitest';
-import { useFilterScheme } from '../use-filter-scheme';
-
-const t = (key: string) => key;
-
-describe('useFilterScheme', () => {
-  it('пустой массив для null', () => {
-    const { filterScheme } = useFilterScheme(t, null);
-    expect(filterScheme.value).toEqual([]);
-  });
-
-  it('трансформирует группы в схему', () => {
-    const groups = [{
-      title: 'Age', name: 'age', icon: 'age-icon',
-      categories: [
-        { title: 'teen', name: 'teen' },
-        { title: 'milf', name: 'milf' },
-      ],
-    }];
-    const { filterScheme } = useFilterScheme(t, groups);
-    expect(filterScheme.value).toHaveLength(1);
-    expect(filterScheme.value[0].label).toBe('Age');
-    expect(filterScheme.value[0].items).toEqual([
-      { title: 'Teen', value: 'teen' },
-      { title: 'Milf', value: 'milf' },
-    ]);
-  });
-
-  it('capitalize для multi-word', () => {
-    const groups = [{
-      title: 'Body', name: 'body', icon: '',
-      categories: [{ title: 'big tits', name: 'big-tits' }],
-    }];
-    const { filterScheme } = useFilterScheme(t, groups);
-    expect(filterScheme.value[0].items[0].title).toBe('Big Tits');
-  });
-
-  it('фильтрует пустые группы', () => {
-    const groups = [
-      { title: 'Empty', name: 'empty', icon: '', categories: [] },
-      { title: 'Body', name: 'body', icon: '', categories: [{ title: 'slim', name: 'slim' }] },
-    ];
-    const { filterScheme } = useFilterScheme(t, groups);
-    expect(filterScheme.value).toHaveLength(1);
-    expect(filterScheme.value[0].name).toBe('body');
-  });
-
-  it('placeholder из t()', () => {
-    const groups = [{
-      title: 'Age', name: 'age', icon: '',
-      categories: [{ title: 'teen', name: 'teen' }],
-    }];
-    const { filterScheme } = useFilterScheme(t, groups);
-    expect(filterScheme.value[0].placeholder).toBe('choose_category');
-  });
-});

package/composables/use-filter-scheme.ts

@@ -1,32 +0,0 @@
-import type { IFilterScheme, IGroupCategories } from '../types';
-import { convertString } from '../runtime';
-
-/**
- * Строит вычисляемую схему фильтров из группированных категорий.
- * @param t - функция перевода (i18n)
- * @param groupsCategories - массив групп категорий
- */
-export const useFilterScheme = (t, groupsCategories: IGroupCategories[] | null) => {
-  const getFilterSchemeCategories = (): IFilterScheme[] => {
-    return groupsCategories?.map((item) => ({
-      label: item.title,
-      name: item.name,
-      title: item.title,
-      icon: item.icon,
-      placeholder: t('choose_category'),
-      items: item.categories?.map((subItem) => ({
-        title: convertString().toCapitalize(subItem.title),
-        value: subItem.name,
-      })),
-    })) || [];
-  };
-
-  const filterScheme = computed((): IFilterScheme[] => {
-    if (!groupsCategories) {
-      return [];
-    }
-    return getFilterSchemeCategories().filter(item => item?.items.length > 0);
-  });
-
-  return { filterScheme };
-};