Zeen Component Library

# ZeenBlockFilter

Компонент ZeenBlockFilter

# Примеры:

  • Фильтры

    c
    по

# Props - входные параметры

Название Тип Обязательный По умолчанию Описание
title string - 'Фильтры' Заголовок блока

# Slots - передача в компоненты

Название Описание
title Текст заголовка

# Source Code - исходный код компонента

<template>
  <ZeenContainer>
    <div class="filter">
      <div class="filter__header">
        <ZeenHeadline class="filter__title" v-bind="attrsTitle">
          <slot name="title">
            {{ title }}
          </slot>
        </ZeenHeadline>
        <ZeenButton class="filter__header-btn" theme="fill-additional" @click="clearFields">
          <slot name="button-header">
            {{ buttonHeader }}
          </slot>
        </ZeenButton>
      </div>
      <div class="filter__body">
        <ZeenSwitchChose class="filter__row-item" v-model="switchValue" :value="switchValue" v-bind="attrsSwitch">
          <template #text-left>
            <slot name="switch-left">
              {{ switchText.left }}
            </slot>
          </template>
          <template #text-right>
            <slot name="switch-right">
              {{ switchText.right }}
            </slot>
          </template>
        </ZeenSwitchChose>
        <ZeenTimeRange
          class="filter__row-item"
          v-bind="attrsTimeRange"
          :minMax="attrsTimeRange.minMax"
          :value="attrsTimeRange.value"
          @onChange="setTimeRange"
        />
        <ZeenSelect
          class="filter__row-item"
          v-model="selectSpeaker"
          :options="attrsSelectSpeaker.options"
          v-bind="attrsSelectSpeaker"
        />
        <ZeenSelect
          class="filter__row-item"
          v-model="selectHall"
          :options="attrsSelectHall.options"
          v-bind="attrsSelectHall"
        />
        <ZeenTextInput
          class="filter__row-item filter__row-item-text-input"
          v-model="inputSearch"
          :placeholder="attrsTextInput.placeholder"
          v-bind="attrsTextInput"
          @input="onInput"
          @handleKeypress="search"
        >
          <template #btn>
            <button class="input-icon" @click="search">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 15 15">
                <path
                  fill-rule="evenodd"
                  d="M9.079 1.038c2.593 1.8 3.208 5.32 1.371 7.863l4.175 4.063a1.164 1.164 0 0 1 0 1.712c-.482.448-1.244.43-1.702-.043L8.68 10.499a5.85 5.85 0 0 1-6.251-.254c-2.594-1.8-3.208-5.32-1.372-7.863S6.486-.763 9.08 1.038ZM2 5.5A3.5 3.5 0 0 0 5.502 9h.002A3.501 3.501 0 0 0 5.5 2 3.5 3.5 0 0 0 2 5.501Z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
          </template>
        </ZeenTextInput>
      </div>
    </div>
  </ZeenContainer>
</template>

<script>
import ZeenContainer from '../../components/ZeenContainer/ZeenContainer'
import ZeenHeadline from '../../components/ZeenHeadline/ZeenHeadline'
import ZeenButton from '../../components/ZeenButton/ZeenButton'
import ZeenSwitchChose from '../../components/ZeenSwitchChose/ZeenSwitchChose'
import ZeenTimeRange from '../../components/ZeenTimeRange/ZeenTimeRange'
import ZeenSelect from '../../components/inputs/ZeenSelect/ZeenSelect'
import ZeenTextInput from '../../components/inputs/ZeenTextInput/ZeenTextInput'

export default {
  name: 'ZeenBlockFilter',
  components: {ZeenTextInput, ZeenSelect, ZeenTimeRange, ZeenSwitchChose, ZeenButton, ZeenHeadline, ZeenContainer},
  props: {
    title: {
      type: String,
      default: 'Фильтры',
    },
    buttonHeader: {
      type: String,
      default: 'Сброс',
    },
    switchText: {
      type: Object,
    },
    attrsTitle: {
      type: Object,
    },
    attrsSwitch: {
      type: Object,
      required: true,
    },
    attrsTimeRange: {
      type: Object,
    },
    attrsSelectSpeaker: {
      type: Object,
      required: true,
    },
    attrsSelectHall: {
      type: Object,
      required: true,
    },
    attrsTextInput: {
      type: Object,
      default: () => ({
        placeholder: 'Введите поисковый запрос...',
      }),
    },
  },
  data() {
    return {
      switchValue: false,
      selectSpeaker: null,
      selectHall: null,
      inputSearch: null,
      timeRangeValue: null,
    }
  },
  methods: {
    setTimeRange(value) {
      this.timeRangeValue = value
    },
    onInput(event) {
      this.$emit('input', event)
    },
    search() {
      this.$emit('search', this.inputSearch)
    },
    clearFields() {
      this.switchValue = false
      this.selectSpeaker = null
      this.selectHall = null
      this.inputSearch = null
      this.timeRangeValue = null
    },
  },
}
</script>

<style scoped lang="scss">
@import '/src/styles/mixins.scss';

.filter {
  padding-top: var(--zeen-block-filter-padding-top);
  padding-bottom: var(--zeen-block-filter-padding-bottom);

  &__title {
    font-size: var(--zeen-block-filter-title-size);
    line-height: var(--zeen-block-filter-title-line-height);
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--zeen-block-filter-header-padding-bottom);
    border-bottom: solid 1px var(--main-border-color);
  }

  &__body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: var(--zeen-block-filter-gap);
    padding-top: var(--zeen-block-filter-body-padding-top);
    padding-bottom: var(--zeen-block-filter-body-padding-bottom);

    @include tablets {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, auto);
    }
  }

  &__row {
    &-item {
      flex: 1 1 auto;
      align-self: stretch;

      &-text-input {
        --text-input-vertical-padding: var(--zeen-block-filter-text-input-padding-y);
      }

      &:nth-child(1) {
        grid-column: 1 / span 2;
        @include tablets {
          grid-column: 1;
        }
      }

      &:nth-child(2) {
        grid-column: 3 / span 4;
        @include tablets {
          grid-column: 2;
        }
      }

      &:nth-child(3) {
        grid-column: 1;
      }

      &:nth-child(4) {
        grid-column: 2;
      }

      &:nth-child(5) {
        grid-column: 3 / span 4;
        @include tablets {
          grid-column: 1 / span 2;
        }
      }
    }
  }
}

.input-icon {
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  width: 15px;
  height: 15px;

  & > * {
    fill: var(--zeen-block-filter-svg-color);
  }
}
</style>

← ZeenPreviewQuestions →