Полезные чипсы с Vue 3 Composition API: Создание адаптивного компонента с фильтрацией и множественным выбором

Современные пользовательские интерфейсы требуют высокой интерактивности и удобства взаимодействия. В этой статье поговорим о том, как реализовать мощный, адаптивный компонент мульти-выбора на основе Vue 3 Composition API. ChipsMultiSelect — это компонент, который объединяет возможности выпадающего списка, визуализации выбора в виде "чипсов" и встроенной фильтрации.
Выбранные элементы отображаются в виде “чипсов”

Фильтрация элементов списка. Компонент совмещает функции выпадающего списка, набора “чипсов” и поле ввода для фильтрации.

При большом количестве “чипсов” происходит автоматический перенос на новую строку и увеличение высоты поля ввода

Основные возможности ChipsMultiSelect

• Интерактивное управление состоянием:

  Выбранные элементы отображаются в виде "чипсов".

  Удаление осуществляется с помощью иконки "крестик" на чипсе.

• Поддержка поиска и фильтрации:

  Поле ввода позволяет пользователям находить элементы в реальном времени.

  Динамическая фильтрация обновляет список на основе пользовательского ввода.

• Адаптивный дизайн:

  Высота поля ввода автоматически регулируется при большом количестве чипсов.

  При достижении максимальной ширины, происходит перенос добавленных "чипсов" на новую строку

• Легкая интеграция:

  Поддержка работы с различными форматами данных, включая строки, объекты и массивы.

  Особенности реализации

  Проблемы, с которыми столкнулся при реализации данного компонента – стилизация input таким образом чтоб в нем отобразить список чипсов. Также необходимо спозиционировать каретку ввода сразу после чипсов. К тому же при расположении чипсов более чем в один ряд поле ввода должно смещаться к последней чипсе.

  В общем случае с input решение выглядит довольно громоздким и сложным. Но тут нам на помощь приходят редактируемые div-ы (div cо свойством contenteditable = true ). Этот подход снимает все проблемы стилизации и заметно упрощает реализацию. Достаточно всего лишь застилизовать div под input.

  Доступ к данным, введенным пользователем для фильтрации получим с использованием innerText

  Еще одна особенность – чтоб при нажатии пользователем клавиши Enter при фильтрации не происходило перехода на новую строку event.preventDefault()

  Компонент ChipsMultiSelect состоит из нескольких ключевых частей:

• Компонент чипса (ChipsItem): Единичная чипса. Может быть объектом а не только строкой а также предоставляет возможность удалить его через крестик. Возможно переиспользовать в проекте, поэтому решено выделить в отдельный компонент.

• Список чипсов (ChipsList): Отвечает за отображение коллекции выбранных чипсов и обрабатывает пользовательские действия.

• Основной компонент (ChipsMultiSelect): содержит ChipsList, выпадающий список, функционал фильтрации.

Исходный код компонентов:

Компонент чипса (ChipsItem):

<script setup>
import Icon from '@/ui-library-b2b/icons/B2BBaseIcon.vue'

const props = defineProps({
  item: {
    type: Object,
  },
  bindName: {
    type: String,
    default: 'name',
  },
})

const emit = defineEmits(['delete'])

function deleteItem() {
  emit('delete', props.item)
}
</script>

<template>
  <div class="selected-item">
    {{ item[bindName] }}
    <div class="selected-item__close" @click.stop="deleteItem()">
      <Icon icon="Close" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.selected-item {
  display: flex;
  gap: 4px;
  align-items: center;
  color: var(--text-colors);
  font-weight: 300;
  font-style: normal;
  line-height: 20px;
  white-space: nowrap;
  font-size: 14px;
  letter-spacing: 0.005em;
  text-align: left;
  flex-direction: row;
  padding: 4px 6px 4px 8px;
  background: rgba(16, 24, 40, 0.1);
  border-radius: 2px;

  &__close {
    color: black;
    cursor: pointer;
  }
}
</style>

Список чипсов (ChipsList):

import { ref } from 'vue'
import SelectedItem from '@/ui-library-b2b/search/ChipsItem.vue'

const props = defineProps({
  bindName: {
    type: String,
    default: 'name',
  },
  inn: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['on-keyup', 'blur'])
const chips = defineModel()
const multiselectRef = ref(null)

function deleteItem(item) {
  chips.value = chips.value.filter((el) => el !== item)
}

function onKeyUp(e) {
  emit('on-keyup', multiselectRef.value.textContent)
  if (e.key === 'Enter') {
    multiselectRef.value.textContent = ''
  }
}

function onBlur() {
  emit('blur', multiselectRef.value.textContent)
  multiselectRef.value.textContent = ''
}

function handleInput() {
  const maxLength = 12

  if (props.inn) {
    if (multiselectRef.value.textContent.length > maxLength) {
      multiselectRef.value.textContent = multiselectRef.value.textContent.slice(0, maxLength)
    }
    multiselectRef.value.textContent = multiselectRef.value.textContent.replace(/\D/g, '')
  }
}
</script>

<template>
  <div class="chips">
    <div v-for="(item, index) in chips" :key="index">
      <SelectedItem :item="item" :bind-name @delete="deleteItem" />
    </div>
    <div
      ref="multiselectRef"
      contenteditable="true"
      spellcheck="false"
      class="custom-div"
      @keydown.enter.prevent=""
      @keyup="onKeyUp"
      @blur="onBlur"
      @input="handleInput"
    />
  </div>
</template>

<style lang='scss' scoped>
.chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
  width: 100%;
}

.custom-div {
  flex-grow: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.custom-div:focus {
  outline: none;
}
</style>

Основной компонент (ChipsMultiSelect)

<script setup lang="ts">
// import
import { ref } from 'vue'
import Chips from '@/ui-library-b2b/search/ChipsList.vue'
import Icon from '@/ui-library-b2b/icons/B2BBaseIcon.vue'

// props
const props = defineProps({
  caption: {
    type: String,
    default: 'Список холдингов',
  },
  placeholder: {
    type: String,
    default: '',
  },
})

// const
const searchText = defineModel()
const chips = ref([])
const title = ref('My title')
const titleElement = ref(null)

// methods
function validate(event: Event) {
  event.preventDefault()
  // (event.target as HTMLInputElement).blur()
  chips.value.push(titleElement.value.innerText.trim())
  titleElement.value.innerText = ''
}

function keyUp() {
  searchText.value = titleElement.value.innerText
  console.log(titleElement.value.innerText)
}

defineExpose({ titleElement })
</script>

<template>
  <div class="multi-search">
    <div class="multi-search__input">
      <Icon class="multi-search__icon-search" icon="Search" />
      <Chips v-model="chips" style="padding-left: 40px;" />
      <div
        ref="titleElement" contenteditable="true" spellcheck="false" :placeholder="chips.length > 0 ? '' : placeholder" @keyup="keyUp"
        @keydown.enter="validate"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.multi-search{
  [contenteditable=true]:empty:before{
    content: attr(placeholder);
    padding-top: 3px;
    pointer-events: none;
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.005em;
    color: rgba(16, 24, 40, 0.5);
  }

  div[contenteditable=true] {
    padding: 5px;
    width: 100%;
    outline:none;
  }

  position: relative;

  &__icon-search{
    position: fixed;
    margin: 5px 10px;
    width: 24px;
    height: 24px;
  }

  &__input{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 800px;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid rgba(16, 24, 40, 0.1);
    box-shadow: inset 0px 1px 0px rgba(16, 24, 40, 0.05), inset 0px 2px 0px rgba(16, 24, 40, 0.05);
    border-radius: 4px;

  }

  .btn {
    width: 16px;
    height: 16px;

    position: absolute;
    top: 8px;
    bottom: 10px;
    right: 10px;
    display: none;
    border: 0;
    padding-top: 0 -5px;
    border-radius: 50%;
    background-color: #fff;
    transition: background 200ms;
    outline: none;

    &:hover {
      width: 16px;
      height: 16px;
      display: block;
      background: url("../../assets/img/navigation/close.svg") no-repeat;
    }

  }

  input:valid ~ div {
    display: block;
  }

  .ok {
    background: url("../../assets/img/navigation/ok.svg") no-repeat;
  }

  .err {
    background: url("../../assets/img/navigation/close_gray.svg") no-repeat;
  }
}
</style>

Возможности кастомизации и расширения

Этот компонент можно легко кастомизировать для различных целей:

• Использование других типов данных: В компоненте можно работать с любыми типами данных, что позволяет использовать его для разных сценариев, таких как списки тегов, категорий и т.д.

• Поддержка разных форматов ввода: Ввод можно адаптировать под различные требования, например, поддержка телефонных номеров, ИНН, дат и других форматов.

• Динамическое обновление: Компонент можно адаптировать для работы с динамическими данными, например, при получении данных с сервера.

Применение и реальные кейсы использования:

• CRM-системы: фильтрация и выбор значений из больших справочников.

• E-commerce: подбор товаров по характеристикам.

• Управление тегами: работа с категориями в CMS.

Заключение

В данной статье мы реализовали компонент, который:

• Снижает сложность интеграции фильтров и поиска в веб-приложениях.

• Упрощает управление пользовательским вводом и валидацией данных.

• Обеспечивает высокую степень кастомизации через свойства и события.

ChipsMultiSelect демонстрирует, как Vue 3 может быть использован для создания интерактивных UI-компонентов. Он сочетает в себе гибкость, мощный функционал и удобство использования, что делает его незаменимым инструментом для веб-разработчиков. Компонент легко интегрируется в различные проекты и улучшает пользовательский опыт.

Исходный код компонентов