@ozdao/martyrs 0.2.561 → 0.2.563

package/src/modules/core/views/components/sections/Filters.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex t-nowrap  gap-thin">
+  <div class="flex o-x-scroll scroll-hide t-nowrap  gap-thin">
     <!-- All Filters Button -->
     <button
       @click="showAllFilters = true"
       class="pd-small radius-medium bg-light flex-v-center flex gap-micro cursor-pointer"
       :class="{ 'bg-main': activeFiltersCount > 0 }"
     >
-      <IconFilter class="i-medium" />
+      <IconFilter class="i-regular" />
       <span class="h-1r"></span>
       <span v-if="activeFiltersCount">{{ activeFiltersCount }}</span>
     </button>
@@ -19,7 +19,7 @@
       class="pd-small radius-medium bg-light cursor-pointer flex-v-center flex gap-micro"
       :class="{ 'selected bg-main': isFilterActive(filter) }"
     >
-      <IconCalendar v-if="filter.type === 'date'" class="mn-r-micro i-medium" />
+      <IconCalendar v-if="filter.type === 'date'" class="mn-r-micro i-regular" />
       <span class="t-nowrap">{{ filter.type === 'date' && getFilterValue(filter) ? formatFilterValue(filter) : filter.title }}</span>
       <span v-if="getFilterValue(filter) && filter.type !== 'date'" class="mn-l-micro">
         {{ formatFilterValue(filter) }}
@@ -29,95 +29,19 @@
     <!-- All Filters Popup -->
     <Popup
       :isPopupOpen="showAllFilters"
-      @close-popup="showAllFilters = false"
+      @close-popup="closeAllFilters"
       :align="isPhone() ? 'bottom center' : 'center center'"
       class="w-min-20r bg-white radius-medium mobile:radius-zero mobile:radius-tr-medium mobile:radius-tl-medium mobile:w-100 pd-medium"
     >
-      <div class="flex-v-center flex-nowrap flex mn-b-medium">
-        <h3 class="flex-child-full">Filters</h3>
-      </div>
-
-      <div class="filters-content">
-        <div 
-          v-for="filter in filters" 
-          :key="filter.value"
-          class="mn-b-medium"
-        >
-          <h4 class="mn-b-small">{{ filter.title }}</h4>
-          
-          <!-- Checkbox Filter -->
-          <div v-if="filter.type === 'checkbox'">
-            <Checkbox
-              v-for="option in filter.options"
-              :key="option.value"
-              :label="option.label"
-              :value="option.value"
-              v-model:radio="tempSelected[filter.value]"
-              mode="checkbox"
-              class="mn-b-micro"
-            />
-          </div>
-
-          <!-- Radio Filter -->
-          <div v-else-if="filter.type === 'radio'">
-            <div
-              v-for="option in filter.options"
-              :key="option.value"
-              @click="tempSelected[filter.value] = option.value"
-              class="pd-small radius-small cursor-pointer mn-b-micro"
-              :class="{ 
-                'bg-main': tempSelected[filter.value] === option.value,
-                'bg-light': tempSelected[filter.value] !== option.value
-              }"
-            >
-              {{ option.label }}
-            </div>
-          </div>
-
-          <!-- Range Filter -->
-          <div v-else-if="filter.type === 'range'" class="flex gap-thin">
-            <Field
-              v-model:field="tempSelected[filter.value].min"
-              :placeholder="filter.minPlaceholder || 'Min'"
-              type="number"
-              :label="returnCurrency()"
-              class="w-50 bg-light pd-small radius-small"
-            />
-            <Field
-              v-model:field="tempSelected[filter.value].max"
-              :placeholder="filter.maxPlaceholder || 'Max'"
-              type="number"
-              :label="returnCurrency()"
-              class="w-50 bg-light pd-small  radius-small"
-            />
-          </div>
-
-          <!-- Date Filter -->
-          <div v-else-if="filter.type === 'date'">
-            <Calendar
-              v-model:date="tempSelected[filter.value]"
-              :allowRange="true"
-              :disablePastDates="true"
-              class="bg-light radius-small"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div class="flex gap-thin mn-t-medium">
-        <button 
-          @click="applyAllFilters" 
-          class="button bg-main flex-child-full"
-        >
-          Apply
-        </button>
-        <button 
-          @click="resetFilters" 
-          class="button bg-light"
-        >
-          Reset Filters
-        </button>
-      </div>
+      <FiltersGroup
+        :filters="filters"
+        v-model:selected="tempSelected"
+        :immediate="false"
+        :showHeader="true"
+        :showApplyButton="true"
+        :showResetButton="true"
+        @update:selected="applyAllFilters"
+      />
     </Popup>
 
     <!-- Individual Filter Popups -->
@@ -125,58 +49,27 @@
       v-for="filter in filters"
       :key="`popup-${filter.value}`"
       :isPopupOpen="individualPopups[filter.value]"
-      @close-popup="individualPopups[filter.value] = false"
+      @close-popup="cancelFilter(filter.value)"
       :align="isPhone() ? 'bottom center' : 'center center'"
       class="bg-white radius-medium mobile:radius-zero mobile:radius-tr-medium mobile:radius-tl-medium mobile:w-100 pd-medium"
     >
       <h4 class="mn-b-medium">{{ filter.title }}</h4>
-      
-      <!-- Checkbox Filter -->
-      <div v-if="filter.type === 'checkbox'">
-        <Checkbox
-          v-for="option in filter.options"
-          :key="option.value"
-          :label="option.label"
-          :value="option.value"
-          v-model:radio="tempSelected[filter.value]"
-          mode="checkbox"
-          class="mn-b-micro"
-        />
-      </div>
 
-      <!-- Radio Filter -->
-      <div v-else-if="filter.type === 'radio'">
-        <div
-          v-for="option in filter.options"
-          :key="option.value"
-          @click="tempSelected[filter.value] = option.value"
-          class="pd-small radius-small cursor-pointer mn-b-micro"
-          :class="{ 
-            'bg-main': tempSelected[filter.value] === option.value,
-            'bg-light': tempSelected[filter.value] !== option.value
-          }"
-        >
-          {{ option.label }}
-        </div>
-      </div>
+      <!-- Checkbox Filter -->
+      <FilterCheckbox
+        v-if="filter.type === 'checkbox'"
+        v-model="tempSelected[filter.value]"
+        :options="filter.options"
+      />
 
       <!-- Range Filter -->
-      <div v-else-if="filter.type === 'range'" class="flex gap-thin">
-        <Field
-          v-model:field="tempSelected[filter.value].min"
-          :placeholder="filter.minPlaceholder || 'Min'"
-          type="number"
-          :label="returnCurrency()"
-          class="w-50 bg-light pd-small radius-small"
-        />
-        <Field
-          v-model:field="tempSelected[filter.value].max"
-          :placeholder="filter.maxPlaceholder || 'Max'"
-          type="number"
-          :label="returnCurrency()"
-          class="w-50 bg-light pd-small radius-small"
-        />
-      </div>
+      <FilterRange
+        v-else-if="filter.type === 'range'"
+        v-model="tempSelected[filter.value]"
+        :minPlaceholder="filter.minPlaceholder || 'Min'"
+        :maxPlaceholder="filter.maxPlaceholder || 'Max'"
+        :label="filter.label"
+      />
 
       <!-- Date Filter -->
       <div v-else-if="filter.type === 'date'">
@@ -190,21 +83,26 @@
         </div>
       </div>
 
+      <!-- Radio/Options Filter -->
+      <FilterOptions
+        v-else-if="filter.type === 'radio'"
+        v-model="tempSelected[filter.value]"
+        :options="filter.options"
+      />
+
       <div class="flex gap-thin mn-t-medium">
-         <button 
-          @click="cancelFilter(filter.value)" 
+        <button
+          @click="cancelFilter(filter.value)"
           class="bg-light button flex-child-full"
         >
           Cancel
         </button>
-         <button 
-          @click="applyFilter(filter.value)" 
+        <button
+          @click="applyFilter(filter.value)"
           class="bg-main w-100 button flex-child-full"
         >
           Apply
         </button>
-       
-       
       </div>
     </Popup>
   </div>
@@ -214,9 +112,12 @@
 import { ref, computed, reactive, watch } from 'vue'
 import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js'
 import Popup from '@martyrs/src/components/Popup/Popup.vue'
-import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
-import Field from '@martyrs/src/components/Field/Field.vue'
 import Calendar from '@martyrs/src/components/Calendar/Calendar.vue'
+import FiltersGroup from './filters/FiltersGroup.vue'
+import FilterCheckbox from './filters/FilterCheckbox.vue'
+import FilterRange from './filters/FilterRange.vue'
+import FilterDateRange from './filters/FilterDateRange.vue'
+import FilterOptions from './filters/FilterOptions.vue'
 import IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue'
 import IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue'
 import IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue'
@@ -367,8 +268,8 @@ const cancelFilter = (filterValue) => {
   individualPopups[filterValue] = false
 }
 
-const applyAllFilters = () => {
-  Object.entries(tempSelected).forEach(([key, value]) => {
+const applyAllFilters = (newValues) => {
+  Object.entries(newValues).forEach(([key, value]) => {
     if (selected.value[key] !== value) {
       selected.value[key] = value
       emit('select', { filter: key, value })
@@ -377,23 +278,8 @@ const applyAllFilters = () => {
   showAllFilters.value = false
 }
 
-const resetFilters = () => {
-  filters.value.forEach(filter => {
-    if (filter.type === 'checkbox') {
-      tempSelected[filter.value] = []
-      selected.value[filter.value] = []
-    } else if (filter.type === 'range') {
-      tempSelected[filter.value] = { min: '', max: '' }
-      selected.value[filter.value] = { min: '', max: '' }
-    } else if (filter.type === 'date') {
-      tempSelected[filter.value] = null
-      selected.value[filter.value] = null
-    } else {
-      tempSelected[filter.value] = null
-      selected.value[filter.value] = null
-    }
-    emit('select', { filter: filter.value, value: null })
-  })
+const closeAllFilters = () => {
+  showAllFilters.value = false
 }
 </script>
 

package/src/modules/core/views/components/sections/filters/FilterCheckbox.vue

@@ -1,20 +1,22 @@
 <!-- FilterCheckbox.vue -->
 <template>
   <div class="filter-checkbox">
-    <div
+    <Checkbox
       v-for="(option, index) in normalizedOptions"
       :key="option.value"
-      @click="toggleOption(option.value)"
-      :class="{ 'bg-light': isSelected(option.value) }"
-      class="pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"
-    >
-      {{ option.label }}
-    </div>
+      v-model:radio="model"
+      :label="option.label"
+      :value="option.value"
+      mode="checkbox"
+      class="br-solid br-1px br-light pd-small radius-small mn-b-micro"
+      @update:radio="emit('apply')"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, watch, computed } from 'vue'
+import { computed } from 'vue'
+import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
 
 const props = defineProps({
   options: {
@@ -28,14 +30,12 @@ const model = defineModel({
   default: () => []
 })
 
-const emit = defineEmits(['update:modelValue', 'apply'])
-
-const localValue = ref([...(model.value || [])])
+const emit = defineEmits(['apply'])
 
 // Normalize options to always have label and value
 const normalizedOptions = computed(() => {
   if (!props.options || !Array.isArray(props.options)) return []
-  
+
   return props.options.map((option, index) => {
     if (typeof option === 'string') {
       return { label: option, value: option }
@@ -49,25 +49,6 @@ const normalizedOptions = computed(() => {
     return { label: String(option), value: `option-${index}` }
   })
 })
-
-const isSelected = (value) => {
-  return localValue.value.includes(value)
-}
-
-const toggleOption = (value) => {
-  const idx = localValue.value.indexOf(value)
-  if (idx > -1) {
-    localValue.value.splice(idx, 1)
-  } else {
-    localValue.value.push(value)
-  }
-  model.value = [...localValue.value]
-  emit('apply')
-}
-
-watch(() => model.value, (newVal) => {
-  localValue.value = [...(newVal || [])]
-}, { deep: true })
 </script>
 
 <style scoped>

package/src/modules/core/views/components/sections/filters/FilterDateRange.vue

@@ -1,8 +1,9 @@
 <!-- FilterDateRange.vue -->
 <template>
   <div class="filter-date-range">
-    <!-- Quick options -->
-    <div 
+    <!-- Quick options (only if provided) -->
+    <div
+      v-if="dateOptions.length > 0"
       v-for="option in dateOptions"
       :key="option.value"
       @click="selectOption(option.value)"
@@ -11,19 +12,21 @@
     >
       {{ option.label }}
     </div>
-    
-    <!-- Custom dates -->
-    <div 
-      @click="() => { tempDates = model.value ? {...model.value} : null; showCalendar = true }"
-      :class="{ 'bg-light': selectedOption === 'custom' }"
-      class="pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"
+
+    <!-- Custom dates with icon (like in Products) -->
+    <div
+      @click="() => { showCalendar = true }"
+      :class="{ 'bg-light': model }"
+      class="pd-small field-wrapper radius-small bg-light cursor-pointer hover-bg-light transition-all flex-v-center flex gap-thin"
     >
-      {{ dateRangeLabel }}
+      <IconCalendar class="i-medium" />
+      <span>{{ dateRangeLabel }}</span>
     </div>
 
     <!-- Calendar Popup -->
     <Popup
-      v-model:show="showCalendar"
+      :isPopupOpen="showCalendar"
+      @close-popup="showCalendar = false"
       class="pd-medium bg-white radius-medium"
       style="min-width: 350px;"
     >
@@ -58,6 +61,7 @@
 import { ref, computed, watch } from 'vue'
 import Calendar from '@martyrs/src/components/Calendar/Calendar.vue'
 import Popup from '@martyrs/src/components/Popup/Popup.vue'
+import IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue'
 import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js'
 
 const { formatDate } = useGlobalMixins()
@@ -65,11 +69,7 @@ const { formatDate } = useGlobalMixins()
 const props = defineProps({
   dateOptions: {
     type: Array,
-    default: () => [
-      { label: 'Available today', value: 'today' },
-      { label: 'This week', value: 'week' },
-      { label: 'This month', value: 'month' }
-    ]
+    default: () => []
   }
 })
 

package/src/modules/core/views/components/sections/filters/FilterOptions.vue

@@ -1,26 +1,21 @@
 <!-- filters/FilterOptions.vue -->
 <template>
   <div class="filter-options">
-    <div
+    <Checkbox
       v-for="option in options"
       :key="option.value"
-      class="flex align-center gap-thin pd-thin cursor-pointer hover-bg-light radius-small"
-      @click="toggleOption(option.value)"
-    >
-      <Field
-        type="checkbox"
-        v-model:field="checkboxStates[option.value]"
-        class="mr-thin"
-      />
-      <span>{{ option.label }}</span>
-    </div>
+      v-model:radio="model"
+      :label="option.label"
+      :value="option.value"
+      mode="radio"
+      class="mn-b-micro"
+      @update:radio="emit('apply')"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
-import Field from '@martyrs/src/components/Field/Field.vue';
-
+import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
 
 const props = defineProps({
   options: {
@@ -31,35 +26,9 @@ const props = defineProps({
 })
 
 const model = defineModel({
-  type: Array,
-  default: () => []
-})
-
-// Создаем объект для хранения состояний чекбоксов
-const checkboxStates = ref({})
-
-// Инициализация состояний
-props.options.forEach(option => {
-  checkboxStates.value[option.value] = model.value.includes(option.value)
+  type: String,
+  default: null
 })
 
-// Следим за изменениями модели
-watch(model, (newVal) => {
-  props.options.forEach(option => {
-    checkboxStates.value[option.value] = newVal.includes(option.value)
-  })
-}, { deep: true })
-
-// Обновляем модель при изменении чекбоксов
-watch(checkboxStates, (states) => {
-  const selected = []
-  Object.entries(states).forEach(([value, checked]) => {
-    if (checked) selected.push(value)
-  })
-  model.value = selected
-}, { deep: true })
-
-const toggleOption = (value) => {
-  checkboxStates.value[value] = !checkboxStates.value[value]
-}
+const emit = defineEmits(['apply'])
 </script>

package/src/modules/core/views/components/sections/filters/FilterRange.vue

@@ -1,75 +1,98 @@
-<!-- FilterRange.vue -->
+<!-- filters/FilterPrice.vue -->
 <template>
-  <div class="filter-range">
-    <div class="flex gap-thin mn-b-small">
+  <div class="filter-price">
+    <div class="flex flex-v-center gap-thin">
       <Field
-        v-model="localValue.min"
-        :placeholder="minPlaceholder"
         type="number"
-        class="w-50 bg-light pd-small radius-small"
-        @keypress.enter="applyRange"
+        v-model:field="localValue.min"
+        :placeholder="minPlaceholder"
+        :label="label"
+        class="flex-1 bg-light pd-regular radius-small"
+        @blur="updateValue"
       />
+      <span class="t-small">—</span>
       <Field
-        v-model="localValue.max"
-        :placeholder="maxPlaceholder"
         type="number"
-        class="w-50 bg-light pd-small radius-small"
-        @keypress.enter="applyRange"
+        v-model:field="localValue.max"
+        :placeholder="maxPlaceholder"
+        :label="label"
+        class="flex-1 bg-light pd-regular radius-small"
+        @blur="updateValue"
       />
     </div>
-    <button 
-      @click="applyRange"
-      class="button bg-main t-white w-100 pd-small radius-small"
-    >
-      Apply
-    </button>
+    
+    <div v-if="config?.presets" class="mt-thin">
+      <button
+        v-for="preset in config.presets"
+        :key="preset.label"
+        @click="applyPreset(preset)"
+        class="btn btn-small mr-thin mb-thin"
+        :class="isPresetActive(preset) ? 'btn-primary' : 'btn-secondary'"
+      >
+        {{ preset.label }}
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
-import Field from '@martyrs/src/components/Field/Field.vue'
+import Field from '@martyrs/src/components/Field/Field.vue';
 
 const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({})
+  },
   minPlaceholder: {
     type: String,
-    default: 'From'
+    default: 'Min'
   },
   maxPlaceholder: {
     type: String,
-    default: 'To'
+    default: 'Max'
+  },
+  label: {
+    type: String,
+    default: undefined
   }
 })
 
 const model = defineModel({
   type: Object,
-  default: () => ({ min: '', max: '' })
+  default: () => ({ min: null, max: null })
 })
 
 const emit = defineEmits(['update:modelValue', 'apply'])
 
 const localValue = ref({ 
-  min: model.value?.min || '', 
-  max: model.value?.max || '' 
+  min: model.value?.min || null, 
+  max: model.value?.max || null 
 })
 
-const applyRange = () => {
+watch(model, (val) => {
+  if (val) {
+    localValue.value = { 
+      min: val.min || null, 
+      max: val.max || null 
+    }
+  }
+}, { deep: true })
+
+const updateValue = () => {
   model.value = { ...localValue.value }
   emit('apply')
 }
 
-watch(() => model.value, (newVal) => {
-  if (newVal) {
-    localValue.value = { 
-      min: newVal.min || '', 
-      max: newVal.max || '' 
-    }
+const applyPreset = (preset) => {
+  localValue.value = { 
+    min: preset.min || null, 
+    max: preset.max || null 
   }
-}, { deep: true })
-</script>
+  updateValue()
+}
 
-<style scoped>
-.filter-range {
-  width: 100%;
+const isPresetActive = (preset) => {
+  return localValue.value.min === preset.min && localValue.value.max === preset.max
 }
-</style>
+</script>