VibeUI

Display

Assignee Filter Board

Доска с фильтром по исполнителю, где счётчик колонки показывает «показано из всего», а опустевшая после фильтра колонка объясняет словами, что скрыто.

  • kanban
  • filter
  • assignee
  • board

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/kanban-005

Очередь2 из 2

  • Фасетный фильтрИрина
  • Импорт остатковПётр

В работе2 из 2

  • Карточка товараИрина
  • Логи доставкиМария

Готово1 из 1

  • Письма о заказеПётр
Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «kanban-005» (Assignee Filter Board) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/kanban-005.json

Registry item: https://vibeui.ru/r/kanban-005.json
Ставится в: components/vibeui/kanban-005.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Доска с фильтром по исполнителю, где счётчик колонки показывает «показано из всего», а опустевшая после фильтра колонка объясняет словами, что скрыто.

Доска с фильтром по исполнителю: чипсы выбора, счётчик «показано из всего» и объяснение в опустевшей колонке. Ноль зависимостей, один файл.

## 3. Как использовать
import { Kanban005 } from "@/components/vibeui/kanban-005"

<Kanban005 everyone="Все" columns={["Очередь", "В работе"]} />

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-kanban-005-* и не подменять её токенами вашей темы
- счётчик «показано из всего»: одно число после фильтрации выглядит как пропажа задач
- объяснение в опустевшей колонке вместо схлопывания — иначе фильтр читается как удаление
- aria-pressed на чипсах: выбранный фильтр обязан быть слышен, а не только подсвечен
- заливку и рамку выбранного чипса, а не один оттенок текста
- кнопки со стрелками на карточке — перетаскивание недоступно с клавиатуры

## 6. Можно менять
- массивы columns и cards с исполнителями
- everyone — подпись чипса «без фильтра»
- обработчик onChange, акцент через проп accent
- ширину колонки

## 7. Правила
- Список исполнителей строится из исходного пропа cards, а не из текущего состояния доски.
- Фильтр не меняет данные: скрытые карточки остаются в состоянии и учитываются в общем числе.
- Порядок внутри колонки не меняется: перенос управляет только принадлежностью.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/kanban-005.json
https://vibeui.ru/r/kanban-005.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-kanban-005-*. Клиентский: "use client" ради фильтра и состояния доски. Список исполнителей собирается из карточек через Set, поэтому его не надо вести отдельно. Фильтр — ряд кнопок с aria-pressed, а не набор ссылок: выбор не меняет адрес страницы. Счётчик колонки печатает видимое и общее число, пустая колонка показывает объяснение вместо пустоты, смена фильтра и перенос объявляются в живой области role=status.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

"use client"

import { useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties, DragEvent } from "react"

export type Kanban005Card = {
  id: string
  title: string
  assignee: string
  column: string
}

export type Kanban005Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children" | "onChange"
> & {
  columns?: string[]
  cards?: Kanban005Card[]
  everyone?: string
  onChange?: (cards: Kanban005Card[]) => void
  accent?: string
}

// Идея компонента: доска с фильтром по исполнителю. Фильтр обязан говорить о
// себе: счётчик колонки показывает «2 из 5», то есть сколько карточек видно и
// сколько их всего, — иначе после фильтрации цифры выглядят как пропажа задач.
// Пустая после фильтра колонка не схлопывается, а объясняет словами, что
// скрыто. Смена фильтра и перенос объявляются в одной живой области. Перенос
// мышью — нативный drag, с клавиатуры — стрелочные кнопки на карточке.
const STYLES = `
:where([data-vibeui-block="kanban-005"]){
--vibeui-kanban-005-bg:oklch(0.985 0.002 265);
--vibeui-kanban-005-card:oklch(1 0 0);
--vibeui-kanban-005-fg:oklch(0.24 0.014 265);
--vibeui-kanban-005-muted:oklch(0.56 0.014 265);
--vibeui-kanban-005-border:oklch(0.91 0.006 265);
--vibeui-kanban-005-accent:oklch(0.55 0.2 262);
--vibeui-kanban-005-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="kanban-005"]{
position:relative;display:grid;gap:0.625rem;
width:100%;box-sizing:border-box;padding:0.75rem;
background:var(--vibeui-kanban-005-bg);
border:1px solid var(--vibeui-kanban-005-border);border-radius:0.875rem;
font-family:var(--vibeui-kanban-005-font);color:var(--vibeui-kanban-005-fg);
}
[data-vibeui-block="kanban-005"] *{box-sizing:border-box}
[data-vibeui-block="kanban-005"] [data-part="filters"]{
display:flex;flex-wrap:wrap;gap:0.3125rem;
}
[data-vibeui-block="kanban-005"] [data-part="chip"]{
appearance:none;cursor:pointer;
padding:0.1875rem 0.625rem;border-radius:999px;
border:1px solid var(--vibeui-kanban-005-border);background:var(--vibeui-kanban-005-card);
color:var(--vibeui-kanban-005-muted);font:inherit;font-size:0.6875rem;font-weight:650;line-height:1.5;
transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
/* Выбранный фильтр отличается заливкой и рамкой, а не одним оттенком текста. */
[data-vibeui-block="kanban-005"] [data-part="chip"][aria-pressed="true"]{
background:color-mix(in oklab,var(--vibeui-kanban-005-accent) 12%,transparent);
border-color:color-mix(in oklab,var(--vibeui-kanban-005-accent) 50%,transparent);
color:color-mix(in oklab,var(--vibeui-kanban-005-accent) 80%,black);
}
[data-vibeui-block="kanban-005"] [data-part="chip"]:focus-visible{outline:2px solid var(--vibeui-kanban-005-accent);outline-offset:2px}
[data-vibeui-block="kanban-005"] [data-part="board"]{
display:grid;grid-auto-flow:column;grid-auto-columns:minmax(11rem,1fr);gap:0.625rem;
overflow-x:auto;
}
[data-vibeui-block="kanban-005"] [data-part="column"]{
display:flex;flex-direction:column;gap:0.5rem;min-width:0;
padding:0.5rem;border-radius:0.75rem;border:1px dashed transparent;
}
[data-vibeui-block="kanban-005"] [data-part="column"][data-over="true"]{
border-color:var(--vibeui-kanban-005-accent);
background:color-mix(in oklab,var(--vibeui-kanban-005-accent) 6%,transparent);
}
[data-vibeui-block="kanban-005"] [data-part="head"]{
margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;
font-size:0.75rem;font-weight:650;
}
/* «2 из 5» вместо «2»: иначе отфильтрованные задачи выглядят потерянными. */
[data-vibeui-block="kanban-005"] [data-part="count"]{
color:var(--vibeui-kanban-005-muted);font-size:0.6875rem;font-weight:650;font-variant-numeric:tabular-nums;
}
[data-vibeui-block="kanban-005"] ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.375rem}
[data-vibeui-block="kanban-005"] [data-part="empty"]{
margin:0;padding:0.5rem;border-radius:0.5rem;
border:1px dashed var(--vibeui-kanban-005-border);
color:var(--vibeui-kanban-005-muted);font-size:0.6875rem;line-height:1.35;
}
[data-vibeui-block="kanban-005"] [data-part="card"]{
display:grid;gap:0.375rem;padding:0.5rem;border-radius:0.625rem;cursor:grab;
background:var(--vibeui-kanban-005-card);
border:1px solid var(--vibeui-kanban-005-border);
box-shadow:0 1px 2px oklch(0.2 0.02 265 / 6%);
font-size:0.75rem;line-height:1.35;
}
[data-vibeui-block="kanban-005"] [data-part="card"][data-dragging="true"]{opacity:.45}
[data-vibeui-block="kanban-005"] [data-part="who"]{color:var(--vibeui-kanban-005-muted);font-size:0.625rem}
[data-vibeui-block="kanban-005"] [data-part="nav"]{display:flex;gap:0.25rem;justify-content:flex-end}
[data-vibeui-block="kanban-005"] [data-part="nav"] button{
appearance:none;cursor:pointer;width:1.5rem;height:1.5rem;border-radius:0.375rem;
border:1px solid var(--vibeui-kanban-005-border);background:var(--vibeui-kanban-005-card);
color:var(--vibeui-kanban-005-muted);font:inherit;font-size:0.6875rem;line-height:1;
}
[data-vibeui-block="kanban-005"] [data-part="nav"] button:hover:not(:disabled){color:var(--vibeui-kanban-005-fg)}
[data-vibeui-block="kanban-005"] [data-part="nav"] button:disabled{opacity:.35;cursor:default}
[data-vibeui-block="kanban-005"] [data-part="nav"] button:focus-visible{outline:2px solid var(--vibeui-kanban-005-accent);outline-offset:1px}
[data-vibeui-block="kanban-005"] [data-part="live"]{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="kanban-005"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_COLUMNS = ["Очередь", "В работе", "Готово"]

const DEFAULT_CARDS: Kanban005Card[] = [
  { id: "1", title: "Фасетный фильтр", assignee: "Ирина", column: "Очередь" },
  { id: "2", title: "Импорт остатков", assignee: "Пётр", column: "Очередь" },
  { id: "3", title: "Карточка товара", assignee: "Ирина", column: "В работе" },
  { id: "4", title: "Логи доставки", assignee: "Мария", column: "В работе" },
  { id: "5", title: "Письма о заказе", assignee: "Пётр", column: "Готово" },
]

/**
 * Доска с фильтром по исполнителю: счётчик колонки показывает видимое и всего.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Kanban005({
  columns = DEFAULT_COLUMNS,
  cards = DEFAULT_CARDS,
  everyone = "Все",
  onChange,
  accent,
  className,
  style,
  ...props
}: Kanban005Props) {
  const [board, setBoard] = useState(cards)
  const [filter, setFilter] = useState(everyone)
  const [dragged, setDragged] = useState<string | null>(null)
  const [over, setOver] = useState<string | null>(null)
  const [announcement, setAnnouncement] = useState("")

  const people = [everyone, ...new Set(cards.map((card) => card.assignee))]
  const visible = (card: Kanban005Card) =>
    filter === everyone || card.assignee === filter

  const pick = (person: string) => {
    setFilter(person)
    const shown = board.filter(
      (card) => person === everyone || card.assignee === person,
    ).length
    setAnnouncement(
      person === everyone
        ? `Фильтр снят, показаны все ${board.length} задач.`
        : `Фильтр «${person}»: показано ${shown} из ${board.length} задач.`,
    )
  }

  const put = (id: string, column: string) => {
    const card = board.find((row) => row.id === id)
    if (!card || card.column === column) return

    const next = board.map((row) => (row.id === id ? { ...row, column } : row))
    setBoard(next)
    onChange?.(next)
    setAnnouncement(`«${card.title}» перенесена в «${column}».`)
  }

  const shift = (id: string, step: -1 | 1) => {
    const card = board.find((row) => row.id === id)
    if (!card) return

    const target = columns[columns.indexOf(card.column) + step]
    if (target) put(id, target)
  }

  const drop = (event: DragEvent<HTMLElement>, column: string) => {
    event.preventDefault()
    setOver(null)
    if (dragged) put(dragged, column)
    setDragged(null)
  }

  const palette = {
    ...(accent ? { "--vibeui-kanban-005-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-kanban-005" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="kanban-005"
        className={className}
        style={palette}
      >
        <div
          data-part="filters"
          role="group"
          aria-label="Фильтр по исполнителю"
        >
          {people.map((person) => (
            <button
              key={person}
              type="button"
              data-part="chip"
              aria-pressed={person === filter}
              onClick={() => pick(person)}
            >
              {person}
            </button>
          ))}
        </div>
        <div data-part="board">
          {columns.map((column, columnIndex) => {
            const all = board.filter((card) => card.column === column)
            const rows = all.filter(visible)

            return (
              <section
                key={column}
                data-part="column"
                data-over={column === over}
                aria-label={`${column}: показано ${rows.length} из ${all.length}`}
                onDragOver={(event) => {
                  event.preventDefault()
                  setOver(column)
                }}
                onDragLeave={() => setOver(null)}
                onDrop={(event) => drop(event, column)}
              >
                <p data-part="head">
                  {column}
                  <span data-part="count">
                    {rows.length} из {all.length}
                  </span>
                </p>
                {rows.length === 0 ? (
                  <p data-part="empty">
                    {all.length === 0
                      ? "Пусто"
                      : `Скрыто фильтром: ${all.length}`}
                  </p>
                ) : (
                  <ul>
                    {rows.map((card) => (
                      <li key={card.id}>
                        <article
                          data-part="card"
                          data-dragging={card.id === dragged}
                          draggable
                          onDragStart={() => setDragged(card.id)}
                          onDragEnd={() => {
                            setDragged(null)
                            setOver(null)
                          }}
                        >
                          {card.title}
                          <span data-part="who">{card.assignee}</span>
                          <span data-part="nav">
                            <button
                              type="button"
                              disabled={columnIndex === 0}
                              aria-label={`Перенести «${card.title}» в предыдущую колонку`}
                              onClick={() => shift(card.id, -1)}
                            >
                              ←
                            </button>
                            <button
                              type="button"
                              disabled={columnIndex === columns.length - 1}
                              aria-label={`Перенести «${card.title}» в следующую колонку`}
                              onClick={() => shift(card.id, 1)}
                            >
                              →
                            </button>
                          </span>
                        </article>
                      </li>
                    ))}
                  </ul>
                )}
              </section>
            )
          })}
        </div>
        <span data-part="live" role="status" aria-live="polite">
          {announcement}
        </span>
      </div>
    </>
  )
}