VibeUI

Inputs

Chart Of Accounts

Выбор счёта в плане счетов: код собирается сегмент за сегментом, невыбранные части показаны точками, а проводку нельзя повесить на группу счетов.

  • cascader
  • accounting
  • codes
  • tree

Превью

1440pxHost theme

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

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

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

Счёт учёта

51.01.··

Выбрать можно только конечный субсчёт

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

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

# Установка и размещение «cascader-014» (Chart Of Accounts) из VibeUI

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

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

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

## 2. Что это
Выбор счёта в плане счетов: код собирается сегмент за сегментом, невыбранные части показаны точками, а проводку нельзя повесить на группу счетов.

Каскадер для плана счетов: 51 → 01 → 02. Код собирается на глазах и стоит крупно наверху, незаполненные сегменты показаны точками. Выбор возможен только на конечном уровне — на группу счетов проводку не повесить, — а архивные счета видны, но заблокированы. Ноль зависимостей, один файл, своя палитра.

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

<Cascader014 label="Счёт учёта" defaultPath={["51", "01"]} />

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-cascader-014-* и не подменять её токенами вашей темы (bg-muted, text-muted-foreground и подобными)
- собранный код наверху с точками вместо пустых сегментов: бухгалтер узнаёт счёт по коду, а не по названию
- моноширинный шрифт для кодов — иначе 51.01.02 и 51.1.2 выглядят одинаково
- запрет выбора узлов с детьми: проводка на группу счетов — ошибка учёта, а не удобство
- вычисление текущего уровня из path на каждом рендере, а не хранение узлов в состоянии: два источника правды разъезжаются
- хлебные крошки кнопками: вернуться на уровень выше должно быть одним нажатием
- нативный disabled у архивных счетов вместе с подписью «архив» — просто серый цвет не объясняет запрет

## 6. Можно менять
- label — заголовок над кодом
- accounts — сам план счетов деревом с кодами, названиями и флагом archived
- defaultPath — путь, раскрытый при первом рендере
- onSelect — обработчик, получает полный код и название счёта
- accent — цвет подложки кода и выделения
- глубину дерева: три уровня — привычка учёта, но структура рекурсивная

## 7. Правила
- Строка кода собирается из трёх сегментов: для планов с четырьмя уровнями поправьте и разметку кода, и разбор.
- Не сортируйте счета по названию: порядок кодов — часть нормативного плана счетов.
- Архивный счёт нельзя убирать из списка: в старых проводках он остаётся, и его надо уметь найти.
- Валидацию «счёт активный/пассивный» этот компонент не делает — это правило проводки, а не выбора.

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

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

npx shadcn@latest add https://vibeui.ru/r/cascader-014.json
https://vibeui.ru/r/cascader-014.json

Компонент самодостаточен: один файл, ноль зависимостей, собственная палитра в локальных переменных --vibeui-cascader-014-*. Клиентский: путь по дереву и выбранный код живут в useState. Дерево описано рекурсивным типом с полями code, name, children и archived; текущий уровень вычисляется проходом по path на каждом рендере, поэтому отдельного состояния «текущие узлы» нет и рассинхрона не бывает. Наверху стоит собранный код в моноширинном шрифте: незаполненные сегменты показаны точками через <i>, поэтому форма кода видна заранее. Хлебные крошки — кнопки, возвращающие путь до нужной глубины. Узлы с детьми открывают следующий уровень, листья выбираются и помечаются aria-current; архивные счета получают нативный disabled.

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

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

"use client"

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

export type Cascader014Account = {
  code: string
  name: string
  archived?: boolean
  children?: Cascader014Account[]
}

export type Cascader014Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children" | "onSelect"
> & {
  label?: string
  accounts?: Cascader014Account[]
  defaultPath?: string[]
  onSelect?: (code: string, name: string) => void
  accent?: string
}

// Идея компонента: в плане счетов человек мыслит кодом — 51.01.02, — и код
// собирается на глазах, сегмент за сегментом. Поэтому наверху стоит строка
// кода, где невыбранные сегменты показаны точками, а выбор возможен только
// на конечном уровне: проводку нельзя повесить на группу счетов.
const STYLES = `
:where([data-vibeui-block="cascader-014"]){
--vibeui-cascader-014-bg:oklch(1 0 0);
--vibeui-cascader-014-fg:oklch(0.22 0.014 250);
--vibeui-cascader-014-muted:oklch(0.55 0.014 250);
--vibeui-cascader-014-faint:oklch(0.76 0.01 250);
--vibeui-cascader-014-border:oklch(0.9 0.008 250);
--vibeui-cascader-014-soft:oklch(0.965 0.006 250);
--vibeui-cascader-014-accent:oklch(0.48 0.12 250);
--vibeui-cascader-014-accentsoft:oklch(0.94 0.04 250);
--vibeui-cascader-014-radius:0.625rem;
--vibeui-cascader-014-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--vibeui-cascader-014-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
[data-vibeui-block="cascader-014"]{
display:flex;flex-direction:column;gap:0.5rem;
width:100%;max-width:23rem;box-sizing:border-box;padding:0.875rem;
background:var(--vibeui-cascader-014-bg);
border:1px solid var(--vibeui-cascader-014-border);
border-radius:calc(var(--vibeui-cascader-014-radius) + 0.25rem);
color:var(--vibeui-cascader-014-fg);
font-family:var(--vibeui-cascader-014-font);
}
[data-vibeui-block="cascader-014"] [data-part="title"]{
margin:0;font-size:0.875rem;font-weight:700;letter-spacing:-0.01em;
}
[data-vibeui-block="cascader-014"] [data-part="code"]{
margin:0;padding:0.45rem 0.6rem;border-radius:var(--vibeui-cascader-014-radius);
background:var(--vibeui-cascader-014-accentsoft);
font-family:var(--vibeui-cascader-014-mono);font-size:1.05rem;font-weight:700;letter-spacing:0.04em;
}
[data-vibeui-block="cascader-014"] [data-part="code"] i{font-style:normal;color:var(--vibeui-cascader-014-faint)}
[data-vibeui-block="cascader-014"] [data-part="crumbs"]{
display:flex;flex-wrap:wrap;align-items:center;gap:0.2rem;margin:0;padding:0;list-style:none;
font-size:0.75rem;
}
[data-vibeui-block="cascader-014"] [data-part="crumb"]{
appearance:none;cursor:pointer;font:inherit;
padding:0.15rem 0.4rem;border-radius:0.35rem;
border:0;background:var(--vibeui-cascader-014-soft);color:var(--vibeui-cascader-014-muted);
}
[data-vibeui-block="cascader-014"] [data-part="crumb"]:hover{color:var(--vibeui-cascader-014-fg)}
[data-vibeui-block="cascader-014"] [data-part="crumb"]:focus-visible{
outline:2px solid var(--vibeui-cascader-014-accent);outline-offset:1px;
}
[data-vibeui-block="cascader-014"] [data-part="list"]{
margin:0;padding:0.2rem;list-style:none;display:flex;flex-direction:column;gap:0.1rem;
max-height:12rem;overflow:auto;
border:1px solid var(--vibeui-cascader-014-border);
border-radius:var(--vibeui-cascader-014-radius);
}
[data-vibeui-block="cascader-014"] [data-part="row"]{
appearance:none;cursor:pointer;font:inherit;width:100%;
display:grid;grid-template-columns:3.4rem 1fr auto;align-items:center;gap:0.4rem;
box-sizing:border-box;padding:0.4rem 0.5rem;
border:0;border-radius:0.45rem;background:transparent;color:inherit;text-align:left;
transition:background-color .16s ease;
}
[data-vibeui-block="cascader-014"] [data-part="row"]:hover:not(:disabled){background:var(--vibeui-cascader-014-soft)}
[data-vibeui-block="cascader-014"] [data-part="row"]:focus-visible{
outline:2px solid var(--vibeui-cascader-014-accent);outline-offset:-2px;
}
[data-vibeui-block="cascader-014"] [data-part="row"]:disabled{cursor:not-allowed;color:var(--vibeui-cascader-014-faint)}
[data-vibeui-block="cascader-014"] [data-part="row"][aria-current="true"]{
background:var(--vibeui-cascader-014-accentsoft);font-weight:600;
}
[data-vibeui-block="cascader-014"] [data-part="num"]{
font-family:var(--vibeui-cascader-014-mono);font-size:0.78rem;font-weight:700;
}
[data-vibeui-block="cascader-014"] [data-part="name"]{
min-width:0;font-size:0.8125rem;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
[data-vibeui-block="cascader-014"] [data-part="more"]{color:var(--vibeui-cascader-014-muted);font-size:0.8rem}
[data-vibeui-block="cascader-014"] [data-part="note"]{
margin:0;font-size:0.78rem;color:var(--vibeui-cascader-014-muted);
}
[data-vibeui-block="cascader-014"] [data-part="note"] b{color:var(--vibeui-cascader-014-fg)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="cascader-014"] *{animation:none!important;transition:none!important}}
`

const PLAN: Cascader014Account[] = [
  {
    code: "50",
    name: "Касса",
    children: [
      {
        code: "01",
        name: "Касса организации",
        children: [
          { code: "01", name: "Основная касса" },
          { code: "02", name: "Касса магазина" },
        ],
      },
      {
        code: "03",
        name: "Денежные документы",
        children: [{ code: "01", name: "Марки и бланки" }],
      },
    ],
  },
  {
    code: "51",
    name: "Расчётные счета",
    children: [
      {
        code: "01",
        name: "Рублёвые счета",
        children: [
          { code: "01", name: "Основной счёт" },
          { code: "02", name: "Счёт для налогов" },
          { code: "09", name: "Закрытый счёт", archived: true },
        ],
      },
      {
        code: "02",
        name: "Специальные счета",
        children: [{ code: "01", name: "Эскроу по договору" }],
      },
    ],
  },
  {
    code: "62",
    name: "Расчёты с покупателями",
    children: [
      {
        code: "01",
        name: "Расчёты в рублях",
        children: [
          { code: "01", name: "Оптовые покупатели" },
          { code: "02", name: "Розница" },
        ],
      },
    ],
  },
]

/**
 * Выбор счёта в плане счетов: код собирается сегмент за сегментом.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Cascader014({
  label = "Счёт учёта",
  accounts = PLAN,
  defaultPath = ["51", "01"],
  onSelect,
  accent,
  className,
  style,
  ...props
}: Cascader014Props) {
  const [path, setPath] = useState(defaultPath)
  const [chosen, setChosen] = useState("")

  const trail: Cascader014Account[] = []
  let level = accounts

  for (const code of path) {
    const node = level.find((entry) => entry.code === code)

    if (!node) break

    trail.push(node)
    level = node.children ?? []
  }

  const segments = [path[0] ?? "", path[1] ?? "", chosen.split(".")[2] ?? ""]

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

  return (
    <>
      <style href="vibeui-cascader-014" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="cascader-014"
        className={className}
        style={palette}
      >
        <h3 data-part="title">{label}</h3>
        <p data-part="code" aria-live="polite">
          {segments.map((segment, index) => (
            <span key={index}>
              {index > 0 ? "." : ""}
              {segment ? segment : <i>··</i>}
            </span>
          ))}
        </p>
        <ul data-part="crumbs">
          <li>
            <button
              type="button"
              data-part="crumb"
              onClick={() => {
                setPath([])
                setChosen("")
              }}
            >
              План счетов
            </button>
          </li>
          {trail.map((node, index) => (
            <li key={node.code}>
              <span aria-hidden="true">›</span>{" "}
              <button
                type="button"
                data-part="crumb"
                onClick={() => {
                  setPath(path.slice(0, index + 1))
                  setChosen("")
                }}
              >
                {node.code} {node.name}
              </button>
            </li>
          ))}
        </ul>
        <ul data-part="list" aria-label="Счета уровня">
          {level.map((node) => {
            const branch = Boolean(node.children?.length)
            const full = [...path, node.code].join(".")

            return (
              <li key={node.code}>
                <button
                  type="button"
                  data-part="row"
                  disabled={node.archived}
                  aria-current={!branch && chosen === full}
                  onClick={() => {
                    if (branch) {
                      setPath([...path, node.code])
                      setChosen("")

                      return
                    }

                    setChosen(full)
                    onSelect?.(full, node.name)
                  }}
                >
                  <span data-part="num">{node.code}</span>
                  <span data-part="name">
                    {node.name}
                    {node.archived ? " · архив" : ""}
                  </span>
                  <span data-part="more" aria-hidden="true">
                    {branch ? "›" : "•"}
                  </span>
                </button>
              </li>
            )
          })}
        </ul>
        <p data-part="note">
          {chosen ? (
            <>
              Выбран счёт <b>{chosen}</b>
            </>
          ) : (
            "Выбрать можно только конечный субсчёт"
          )}
        </p>
      </div>
    </>
  )
}