itube-specs 0.0.705 → 0.0.707

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

@@ -4,37 +4,77 @@
       <h2
           v-if="title"
           class="s-filter-page__title"
-      >{{ title }}</h2>
+      >{{ title }}
+      </h2>
       <div
           v-for="(group, index) in groups"
           :key="`filter-group-${index}`"
           class="s-filter-page__group"
+          :class="{'--short': group.name === 'tags'}"
       >
-        <span
+        <div
             v-if="filters.length > 0"
-            class="s-filter-page__group-title"
+            class="s-filter-page__group-header"
         >
-          {{ group?.title }}
-        </span>
+          <span class="s-filter-page__group-title">
+            {{ group?.title }}
+          </span>
+          <FSegmentedControl
+              v-if="group?.name === 'physical'"
+              :items="unitItems"
+              :model-value="units"
+              small
+              @update:model-value="units = $event"
+          />
+        </div>
+        <div
+            v-if="getGroupSliders(group?.name).length > 1"
+            class="s-filter-page__sliders"
+            :style="{ '--slider-count': getGroupSliders(group?.name).length }"
+        >
+          <SFilterSlider
+              v-for="(item, subIndex) in getGroupSliders(group?.name)"
+              :key="`slider-${subIndex}`"
+              :item="item"
+              :group-name="item.group.name"
+              :index="subIndex"
+          />
+        </div>
         <div class="s-filter-page__items">
           <template v-for="(item, subIndex) in filters">
             <SFilterSlider
-                v-if="(item.kind === 'range') && (item.group.name === group?.name)"
-                class="f-filters-main__slider"
+                v-if="(item.kind === 'range') && (item.group.name === group?.name) && !hiddenByUnits.has(item.name) && getGroupSliders(group?.name).length === 1"
+                class="s-filter-page__slider"
                 :item="item"
                 :group-name="item.group.name"
                 :index="subIndex"
             />
             <SSelect
-                v-if="(item.kind === 'select') && (item.group.name === group?.name)"
+                v-if="(item.kind === 'select') && (item.group.name === group?.name) && !hiddenByUnits.has(item.name)"
+                class="s-filter-page__select"
                 :key="`model-filter-select-${subIndex}`"
                 :name="item.name"
-                :model-value="getSelectValue(item.name)"
+                :model-value="getValue(item.name)"
                 :items="selectItems(item)"
                 size="s"
                 :active="isActiveSelect(item.name)"
                 :label="item.title"
-                @update:model-value="val => updateSelectFilter(item.name, val)"
+                @update:model-value="val => updateFilter(item.name, val)"
+            />
+            <FSegmentedControl
+                v-if="(item.kind === 'radio') && (item.group.name === group?.name)"
+                class="s-filter-page__radio"
+                :items="getRadioItems(item.options)"
+                :title="item.title"
+                :model-value="getValue(item.name)"
+                @update:model-value="val => updateFilter(item.name, val)"
+            />
+            <FFilterByChips
+                v-if="(item.kind === 'chips') && (item.group.name === group?.name)"
+                class="f-filters-main__chips"
+                :items="item.options"
+                :title="item.title"
+                :filter-name="item.name"
             />
           </template>
         </div>
@@ -44,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-import type { IModelFilter } from '../../types';
+import type { IModelFilter, IModelFilterOptions } from '../../types';
 
 import { useRoute, useRouter } from 'vue-router';
 
@@ -57,6 +97,25 @@ const props = defineProps<{
 const route = useRoute();
 const router = useRouter();
 
+const { t } = useI18n();
+
+const { units, hiddenByUnits } = useUnits();
+
+watch(units, () => {
+  const query = { ...route.query };
+  const unitFields = ['height_cm', 'height_in', 'weight_kg', 'weight_lb'];
+  for (const field of unitFields) {
+    delete query[`filter_${field}_from`];
+    delete query[`filter_${field}_to`];
+  }
+  router.replace({ query });
+});
+
+const unitItems = computed(() => [
+  { name: 'imperial', title: t('units_imperial'), quantity: 0 },
+  { name: 'metric', title: t('units_metric'), quantity: 0 },
+]);
+
 const groups = computed(() => {
   const uniqueNames = [...new Set(props.filters.map(item => item.group.title))];
   return uniqueNames.map(name => {
@@ -64,6 +123,12 @@ const groups = computed(() => {
   }).sort((a, b) => a?.order - b?.order)
 });
 
+function getGroupSliders(groupName: string) {
+  return props.filters.filter(
+    (item) => item.kind === 'range' && item.group.name === groupName && !hiddenByUnits.value.has(item.name)
+  );
+}
+
 function selectItems(item: IModelFilter) {
   return [
     ...item.options.map(item => ({
@@ -73,7 +138,7 @@ function selectItems(item: IModelFilter) {
   ]
 }
 
-function updateSelectFilter(name: string, val: any) {
+function updateFilter(name: string, val: any) {
   const query = { ...route.query };
 
   if (!val || val === 'all') {
@@ -90,7 +155,7 @@ function isActiveSelect(name: string) {
   return Object.keys(route.query).some(key => key.startsWith(`filter_${baseName}`));
 }
 
-function getSelectValue(name: string) {
+function getValue(name: string) {
   const value = route.query[ `filter_${name}` ];
   if (value) {
     return value;
@@ -102,10 +167,17 @@ function getSelectValue(name: string) {
   return null;
 }
 
-function getCount(item: IModelFilter) {
-  const selectedValue = getSelectValue(item.name);
-  const targetValue = selectedValue !== null && selectedValue !== undefined && selectedValue !== '' ? selectedValue : 'all';
-  return props.filters.find(subitem => subitem.name === item.name)?.options.find(subitem => subitem.name === targetValue)?.quantity;
+function getRadioItems(items: IModelFilterOptions[]) {
+  const filteredItems = items.filter((item) => item.name !== 'unspecified');
+  const order = ['all', 'yes'];
+  return filteredItems.sort((a, b) => {
+    const aIndex = order.indexOf(a.name);
+    const bIndex = order.indexOf(b.name);
+    if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
+    if (aIndex !== -1) return -1;
+    if (bIndex !== -1) return 1;
+    return 0;
+  });
 }
 </script>
 

package/components/page-components/s-info-grid.vue

@@ -7,11 +7,12 @@
     >
       <h3 class="s-info-grid__group-title">{{ group.title }}</h3>
       <div class="s-info-grid__group-items">
-        <NuxtLink
-            v-for="(item, index) in group.items"
+        <component
+            :is="item.isFilter ? NuxtLink : 'div'"
+            v-for="(item, index) in group.items.filter(i => !hiddenByUnits.has(i.name))"
             :key="`s-info-grid-item-${gIndex}-${index}`"
             class="s-info-grid__item"
-            :to="generateLink(link(item, item.values[0]))"
+            :to="item.isFilter ? generateLink(link(item, item.values[0].name)) : undefined"
         >
           <SIcon class="s-info-grid__item-icon" name="tattoos" size="12" />
           <span class="s-info-grid__item-title">{{ item.title }}</span>
@@ -24,9 +25,9 @@
                     {'--success': isSuccess(value)},
                     {'--warning': isWarning(value)}
                 ]"
-            >{{ value }}{{ vIndex < item.values.length - 1 ? ', ' : '' }}</span>
+            >{{ value.title }}{{ vIndex < item.values.length - 1 ? ', ' : '' }}</span>
           </p>
-        </NuxtLink>
+        </component>
       </div>
     </div>
   </div>
@@ -39,7 +40,9 @@ defineProps<{
   groups: IGroupedParameter[]
 }>();
 
-const {generateLink} = useGenerateLink();
+const NuxtLink = resolveComponent('NuxtLink');
+const { hiddenByUnits } = useUnits();
+const { generateLink } = useGenerateLink();
 
 function link(item: IGroupedParameterItem, value: string) {
   const formattedValue = value.toLowerCase().replace(/\s+/g, '+');

package/components/ui/s-input.vue

@@ -8,6 +8,7 @@
           {'s-input--error': error},
           {'s-input--textarea': isTextArea},
           {'s-input--icon': isPassword || icon},
+          {'s-input--pre-icon': preIcon},
           `s-input--${size}`,
       ]"
   >
@@ -30,6 +31,12 @@
         :for="name"
     >{{ placeholder }}</label>
     <div class="s-input__wrapper">
+      <SIcon
+          v-if="preIcon"
+          class="s-input__pre-icon"
+          :name="preIcon"
+          :size="preIconSize"
+      />
       <textarea
         v-if="isTextArea"
         :id="name"
@@ -59,7 +66,6 @@
           autocapitalize="off"
           :placeholder="placeholder"
           spellcheck="false"
-          v-bind="$attrs"
           @input="onInput"
           @focus="onFocus"
           @blur="onBlur"
@@ -110,6 +116,8 @@ const props = withDefaults(defineProps<{
   placeholder?: string
   icon?: string
   labelIcon?: string
+  preIcon?: string
+  preIconSize?: string
 }>(), {
   type: 'text',
   inputmode: 'text',

package/composables/use-units.test.ts

@@ -0,0 +1,51 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useUnits } from './use-units';
+
+describe('useUnits', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useNuxtApp().payload.state = {};
+  });
+
+  it('по умолчанию metric', () => {
+    const { units } = useUnits();
+    expect(units.value).toBe('metric');
+  });
+
+  it('imperial для US', () => {
+    useState<string>('clientCountryCode', () => 'us');
+    const { units } = useUnits();
+    expect(units.value).toBe('imperial');
+  });
+
+  it('imperial для Liberia', () => {
+    useState<string>('clientCountryCode', () => 'lr');
+    const { units } = useUnits();
+    expect(units.value).toBe('imperial');
+  });
+
+  it('берёт сохранённое значение из localStorage', () => {
+    localStorage.setItem('units', 'imperial');
+    const { units } = useUnits();
+    expect(units.value).toBe('imperial');
+  });
+
+  it('localStorage приоритетнее country code', () => {
+    useState<string>('clientCountryCode', () => 'us');
+    localStorage.setItem('units', 'metric');
+    const { units } = useUnits();
+    expect(units.value).toBe('metric');
+  });
+
+  it('hiddenByUnits для metric — скрывает дюймы и фунты', () => {
+    const { hiddenByUnits } = useUnits();
+    expect(hiddenByUnits.value).toEqual(new Set(['height_in', 'weight_lb']));
+  });
+
+  it('hiddenByUnits для imperial — скрывает см и кг', () => {
+    localStorage.setItem('units', 'imperial');
+    const { hiddenByUnits } = useUnits();
+    expect(hiddenByUnits.value).toEqual(new Set(['height_cm', 'weight_kg']));
+  });
+});

package/composables/use-units.ts

@@ -0,0 +1,21 @@
+const imperialCountries = new Set(['us', 'lr', 'mm']);
+
+export function useUnits() {
+  const clientCountryCode = useState<string>('clientCountryCode', () => '');
+  const savedUnits = import.meta.client ? localStorage.getItem('units') : null;
+  const defaultUnits = imperialCountries.has(clientCountryCode.value) ? 'imperial' : 'metric';
+  const units = useState('units', () => savedUnits || defaultUnits);
+
+  const hiddenByUnits = computed(() => {
+    if (units.value === 'metric') {
+      return new Set(['height_in', 'weight_lb']);
+    }
+    return new Set(['height_cm', 'weight_kg']);
+  });
+
+  watch(units, (val) => {
+    localStorage.setItem('units', val);
+  });
+
+  return { units, hiddenByUnits };
+}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.705",
+  "version": "0.0.707",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {
     "prepublishOnly": "npm install && npx nuxi prepare",
     "patch": "npm version patch",
-    "eslint fix": "npx eslint . --ext .ts,.vue,.js --fix"
+    "eslint fix": "npx eslint . --ext .ts,.vue,.js --fix",
+    "test": "NODE_OPTIONS='--no-warnings' vitest"
   },
   "exports": {
     ".": {
@@ -40,11 +41,15 @@
   "devDependencies": {
     "@nuxt/eslint": "latest",
     "@nuxt/icon": "1.15.0",
+    "@nuxt/test-utils": "^3.23.0",
     "@nuxtjs/i18n": "9.5.6",
     "@types/node": "^20.19.19",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "^9.37.0",
+    "happy-dom": "^18.0.1",
     "nuxt": "3.17.6",
     "typescript": "^5.9.3",
+    "vitest": "^3.2.4",
     "vue": "3.5.17"
   },
   "dependencies": {

package/types/parameter-model.d.ts

@@ -10,6 +10,6 @@ export interface IParameterModel {
   title: string
   values: IParameterModelValue[]
   group: IModelGroup
-  isFilter: boolean
+  is_filter: boolean
   kind: 'range' | 'select' | 'radio' | 'chips'
 }