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

Необходимо создать компонент на 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 для мутации листов.