VibeUI

Display

Two List Transfer

Перенос между двумя списками, где приёмник не схлопывается в полоску: у пустого списка своя высота и объясняющая надпись, а у каждой строки — кнопка переноса.

  • sortable
  • transfer
  • dual-list
  • a11y

Превью

1440pxHost theme

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

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

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

Доступные поля4

  • Артикул
  • Поставщик
  • Себестоимость
  • Дата поставки

В отчёте2

  • Название
  • Остаток
Показать полную инструкцию

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

# Установка и размещение «sortable-004» (Two List Transfer) из VibeUI

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

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

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

## 2. Что это
Перенос между двумя списками, где приёмник не схлопывается в полоску: у пустого списка своя высота и объясняющая надпись, а у каждой строки — кнопка переноса.

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

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

<Sortable004 source={["Артикул", "Поставщик"]} target={["Название"]} />

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-sortable-004-* и не подменять её токенами вашей темы
- минимальную высоту панели: схлопнувшийся приёмник — цель, в которую нельзя попасть мышью
- надпись в пустой панели вместо пустоты — она объясняет, что делать дальше
- кнопку со стрелкой у каждой строки: перетаскивание недоступно с клавиатуры
- подпись кнопки с обеими сторонами переноса — «→» без контекста ничего не говорит
- живую область role=status с числом строк в обоих списках после переноса

## 6. Можно менять
- массивы source и target
- sourceTitle и targetTitle — заголовки панелей
- обработчик onChange, акцент через проп accent
- ширину блока и минимальную высоту панели

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

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

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

npx shadcn@latest add https://vibeui.ru/r/sortable-004.json
https://vibeui.ru/r/sortable-004.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-sortable-004-*. Клиентский: "use client" ради состояния обоих списков. Панели описаны одним массивом и рисуются общей разметкой, поэтому обе стороны ведут себя одинаково. Минимальная высота панели задана явно, поэтому пустой список остаётся видимой целью для мыши. Кнопка со стрелкой у каждой строки называет обе стороны переноса, живая область role=status сообщает результат и остатки в обоих списках.

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

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

"use client"

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

export type Sortable004Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children" | "onChange"
> & {
  sourceTitle?: string
  targetTitle?: string
  source?: string[]
  target?: string[]
  onChange?: (lists: { source: string[]; target: string[] }) => void
  accent?: string
}

// Идея компонента: перенос между двумя списками. Главная ошибка такого блока —
// когда список-приёмник пуст и превращается в невидимую полоску: тогда мышью
// некуда целиться, а с клавиатуры непонятно, куда переносят. Поэтому у пустого
// списка есть своя высота и объясняющая надпись, а обе колонки всегда одного
// роста. Перенос мышью — нативный drag на любую точку списка; с клавиатуры —
// кнопка со стрелкой у каждой строки, и она же называет обе стороны переноса.
// Результат и остатки объявляются в живой области.
const STYLES = `
:where([data-vibeui-block="sortable-004"]){
--vibeui-sortable-004-bg:oklch(1 0 0);
--vibeui-sortable-004-panel:oklch(0.985 0.002 265);
--vibeui-sortable-004-fg:oklch(0.24 0.014 265);
--vibeui-sortable-004-muted:oklch(0.56 0.014 265);
--vibeui-sortable-004-border:oklch(0.9 0.006 265);
--vibeui-sortable-004-accent:oklch(0.55 0.2 262);
--vibeui-sortable-004-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="sortable-004"]{
position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem;
width:100%;max-width:30rem;box-sizing:border-box;padding:0.875rem;
background:var(--vibeui-sortable-004-bg);
border:1px solid var(--vibeui-sortable-004-border);border-radius:0.875rem;
font-family:var(--vibeui-sortable-004-font);color:var(--vibeui-sortable-004-fg);
}
[data-vibeui-block="sortable-004"] *{box-sizing:border-box}
/* Обе колонки одного роста: приёмник не должен схлопываться в полоску. */
[data-vibeui-block="sortable-004"] [data-part="panel"]{
display:flex;flex-direction:column;gap:0.5rem;min-width:0;min-height:9.5rem;
padding:0.5rem;border-radius:0.75rem;
background:var(--vibeui-sortable-004-panel);
border:1px dashed var(--vibeui-sortable-004-border);
}
[data-vibeui-block="sortable-004"] [data-part="panel"][data-over="true"]{
border-color:var(--vibeui-sortable-004-accent);border-style:solid;
background:color-mix(in oklab,var(--vibeui-sortable-004-accent) 6%,var(--vibeui-sortable-004-panel));
}
[data-vibeui-block="sortable-004"] [data-part="head"]{
margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;
font-size:0.75rem;font-weight:650;
}
[data-vibeui-block="sortable-004"] [data-part="count"]{
color:var(--vibeui-sortable-004-muted);font-size:0.6875rem;font-variant-numeric:tabular-nums;
}
[data-vibeui-block="sortable-004"] ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.3125rem}
[data-vibeui-block="sortable-004"] li{
display:flex;align-items:center;gap:0.375rem;cursor:grab;
padding:0.3125rem 0.3125rem 0.3125rem 0.5rem;border-radius:0.5rem;
background:var(--vibeui-sortable-004-bg);
border:1px solid var(--vibeui-sortable-004-border);
font-size:0.75rem;line-height:1.3;
}
[data-vibeui-block="sortable-004"] li[data-dragging="true"]{opacity:.45}
[data-vibeui-block="sortable-004"] [data-part="text"]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Кнопка переноса — единственный путь с клавиатуры, drag с неё недоступен. */
[data-vibeui-block="sortable-004"] [data-part="send"]{
flex:none;appearance:none;cursor:pointer;
width:1.375rem;height:1.375rem;border-radius:0.375rem;
border:1px solid var(--vibeui-sortable-004-border);
background:var(--vibeui-sortable-004-panel);color:var(--vibeui-sortable-004-muted);
font:inherit;font-size:0.6875rem;line-height:1;
}
[data-vibeui-block="sortable-004"] [data-part="send"]:hover{color:var(--vibeui-sortable-004-accent)}
[data-vibeui-block="sortable-004"] [data-part="send"]:focus-visible{outline:2px solid var(--vibeui-sortable-004-accent);outline-offset:1px}
[data-vibeui-block="sortable-004"] [data-part="empty"]{
margin:auto 0;padding:0.5rem;text-align:center;
color:var(--vibeui-sortable-004-muted);font-size:0.6875rem;line-height:1.35;
}
[data-vibeui-block="sortable-004"] [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="sortable-004"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_SOURCE = [
  "Артикул",
  "Поставщик",
  "Себестоимость",
  "Дата поставки",
]

const DEFAULT_TARGET = ["Название", "Остаток"]

/**
 * Перенос между двумя списками: мышью — drag, с клавиатуры — кнопка со стрелкой.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Sortable004({
  sourceTitle = "Доступные поля",
  targetTitle = "В отчёте",
  source = DEFAULT_SOURCE,
  target = DEFAULT_TARGET,
  onChange,
  accent,
  className,
  style,
  ...props
}: Sortable004Props) {
  const [left, setLeft] = useState(source)
  const [right, setRight] = useState(target)
  const [dragged, setDragged] = useState<string | null>(null)
  const [over, setOver] = useState<"left" | "right" | null>(null)
  const [announcement, setAnnouncement] = useState("")

  const send = (row: string, to: "left" | "right") => {
    const nextLeft =
      to === "left"
        ? left.includes(row)
          ? left
          : [...left, row]
        : left.filter((entry) => entry !== row)
    const nextRight =
      to === "right"
        ? right.includes(row)
          ? right
          : [...right, row]
        : right.filter((entry) => entry !== row)

    if (nextLeft.length === left.length && nextRight.length === right.length) {
      return
    }

    setLeft(nextLeft)
    setRight(nextRight)
    onChange?.({ source: nextLeft, target: nextRight })
    setAnnouncement(
      `«${row}» перенесено в «${to === "left" ? sourceTitle : targetTitle}». ${sourceTitle}: ${nextLeft.length}, ${targetTitle}: ${nextRight.length}.`,
    )
  }

  const drop = (event: DragEvent<HTMLElement>, to: "left" | "right") => {
    event.preventDefault()
    setOver(null)
    if (dragged) send(dragged, to)
    setDragged(null)
  }

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

  const panels = [
    { side: "left" as const, title: sourceTitle, rows: left, arrow: "→" },
    { side: "right" as const, title: targetTitle, rows: right, arrow: "←" },
  ]

  return (
    <>
      <style href="vibeui-sortable-004" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="sortable-004"
        className={className}
        style={palette}
      >
        {panels.map((panel) => (
          <section
            key={panel.side}
            data-part="panel"
            data-over={panel.side === over}
            aria-label={`${panel.title}: ${panel.rows.length}`}
            onDragOver={(event) => {
              event.preventDefault()
              setOver(panel.side)
            }}
            onDragLeave={() => setOver(null)}
            onDrop={(event) => drop(event, panel.side)}
          >
            <p data-part="head">
              {panel.title}
              <span data-part="count">{panel.rows.length}</span>
            </p>
            {panel.rows.length === 0 ? (
              <p data-part="empty">
                Пусто. Перетащите поле сюда или нажмите стрелку в соседнем
                списке.
              </p>
            ) : (
              <ul>
                {panel.rows.map((row) => (
                  <li
                    key={row}
                    draggable
                    data-dragging={row === dragged}
                    onDragStart={() => setDragged(row)}
                    onDragEnd={() => {
                      setDragged(null)
                      setOver(null)
                    }}
                  >
                    <span data-part="text">{row}</span>
                    <button
                      type="button"
                      data-part="send"
                      aria-label={`Перенести «${row}» из «${panel.title}» в «${panel.side === "left" ? targetTitle : sourceTitle}»`}
                      onClick={() =>
                        send(row, panel.side === "left" ? "right" : "left")
                      }
                    >
                      {panel.arrow}
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </section>
        ))}
        <span data-part="live" role="status" aria-live="polite">
          {announcement}
        </span>
      </div>
    </>
  )
}