Задача: Разработка панели инструментов для табличного редактора

Необходимо создать компонент на Vue.js (Options API), который эмулирует стандартную панель инструментов Google Таблиц. Компонент должен содержать верхнюю панель управления и редактируемый контейнер (div с атрибутом contenteditable, textarea не подойдет). Сохранение в базу данных не требуется, все изменения передаются через пользовательскую функцию наверх.

Состав компонента

  1. Верхняя панель инструментов (иконки в одну строку).
  2. Контейнер для таблицы с поддержкой contenteditable (ячейки таблицы).

Функционал панели инструментов (иконки с логикой)

  • Формулы: ввод через знак ”=”. Поддержка арифметических операций (+, -, *, /) и ссылок на другие ячейки.
  • Форматирование чисел: денежный, процентный формат, кнопки увеличения / уменьшения количества знаков после запятой.
  • Дополнительные форматы: кнопка “Другие форматы” с выпадающим меню.
  • Функции: кнопка “Функции” с выпадающим списком типовых формул.
  • Визуальное оформление: заливка (цвет фона) ячеек/диапазона, настройка границ (границы всех видов), объединение / разъединение ячеек.
  • Фильтры: кнопка для установки / снятия автофильтра по столбцам.
  • Закрепление: иконки для закрепления первой или нескольких строк (без полноценного меню, просто кнопки).
  • Диаграммы: кнопка для вставки простой диаграммы (место-заполнитель с базовой настройкой, e.g., столбцы).

Интеракция

В результате любого действия (изменение/кли) должен вызываться пользовательский callback, который передает наружу состояние или идентификатор действия.

Технические ограничения

  • Vue.js 2 / Vue 3 (Options API на выбор разработчика).
  • Компонент (1 общий) содержит 2 внутренних: панель а) и контейнер б).
  • Только чистый CSS / JS, использование сторонних библиотек фреймворков не допускается (кроме Vue).
  • Тип ячейки - div, работа через object или объекты data/v-model для мутации листов.