VueTools

Базовый пакет, предоставляющий Vue 3 стек для компонентов MODX 3.x через ES Modul
Версия 1.2.1-pl
Дата выпуска 24.09.2026
Загрузки 569
Просмотры 1 830
Внимание, этот компонент требует PHP 8.1 или выше!
Внимание, этот компонент требует MODX 3 или выше.
VueTools решает проблему дублирования библиотек при использовании Vue 3 в нескольких компонентах MODX. Вместо того чтобы каждый компонент включал свою копию Vue, Pinia и PrimeVue, все они используют общие библиотеки из VueTools.

Преимущества

  • Единая версия библиотек — все компоненты используют одинаковые версии Vue, Pinia, PrimeVue
  • Меньший размер загрузки — библиотеки загружаются один раз и кэшируются браузером
  • Изолированные стили — PrimeVue стили не конфликтуют с ExtJS админки MODX
  • Готовые composables — useLexicon, useApi, useModx, usePermission для работы с MODX

Состав пакета
  • Vue 3 | 3.5.x | Реактивный фреймворк
  • Pinia | 3.0.x | State management
  • PrimeVue | 4.3.x | UI компоненты
  • PrimeIcons | 7.0.x | Иконки

Архитектура
VueTools использует Import Map — стандартную технологию браузера для разрешения ES Module импортов.

Плагин VueTools срабатывает на событие OnManagerPageInit и регистрирует Import Map в head админки:

{
 "imports": {
        "vue": "/assets/components/vuetools/vendor/vue.min.js",
        "pinia": "/assets/components/vuetools/vendor/pinia.min.js",
        "primevue": "/assets/components/vuetools/vendor/primevue.min.js",
        "@vuetools/useApi": "/assets/components/vuetools/composables/useApi.min.js",
        "@vuetools/useLexicon": "/assets/components/vuetools/composables/useLexicon.min.js",
        "@vuetools/useModx": "/assets/components/vuetools/composables/useModx.min.js",
        "@vuetools/usePermission": "/assets/components/vuetools/composables/usePermission.min.js",
        "@vuetools/": "/assets/components/vuetools/composables/"
    }
}

Как это работает

  1. Плагин VueTools (OnManagerPageInit)
  2. Регистрирует Import Map в head админки (до ES modules)
  3. Подключает CSS стили PrimeVue (изолированы .vueApp)
  4. Ваш компонент загружает ES modules
  5. Браузер разрешает импорты через Import Map

Когда Vue компонент выполняет import { ref } from 'vue', браузер находит ключ `vue` в Import Map и загружает файл по указанному пути.

Пакет является зависимостью для MiniShop3, mSearch и других компонентов, которые используют единый визуальный стиль админки

Журнал изменений

Все заметные изменения проекта фиксируются в этом файле.

Формат основан на Keep a Changelog, проект следует семантическому версионированию.

[1.2.1-pl] - 2026-09-24

Изменено

  • Тема Modx точнее повторяет менеджер MODX 3 (#46): кнопка без severity получает зелёную заливку .primary-button (#6CB24A), как и severity="success"; тёмно-синий #234368 остаётся на вкладках, ссылках и выделении
  • Тема Modx: однострочные поля — 32px (modx.field.height), кнопки остаются 36px (modx.control.height) (#46)
  • Тема Modx: ToggleSwitch, Slider, ProgressBar, Checkbox, RadioButton, DatePicker, Dialog, DataTable, Paginator, Tabs, Tooltip, Toast и меню оформлены под менеджер (#46)
  • DEVELOPER_GUIDE: проверка версии VueTools для компонентов, использующих темизацию (#25)
  • Шаблоны issue и pull request для GitHub (#45)

Исправлено

  • Тема Modx: светлые переопределения DatePicker, Slider и ProgressBar следуют darkModeSelector, в том числе внутри поддерева .p-dark (#48)
  • Окончания строк приведены к LF через .gitattributes (#48)

[1.2.0-pl] - 2026-09-14

Добавлено

  • Нативная тема менеджера MODX 3 Modx для PrimeVue 4 (основа Nora, акцент #234368, скругление 3px, основной текст 13px)
  • Хелперы ModxManagerTheme (darkModeSelector: 'none') и ModxTheme (класс .p-dark)
  • Централизованная темизация (#22): системная настройка vuetools.theme (по умолчанию aura), внедрение window.VueTools, @vuetools/useTheme / getActiveTheme() с откатом на Aura
  • Реестр пресетов (aura, modx) внутри VueTools; новые темы регистрируются только здесь
  • Алиасы Import Map vuetools и vuetools/theme (тот же бандл, что и primevue; vuetools/theme служит признаком версии с поддержкой темизации)
  • Витрина темы: npm run demo / npm run build:demo (src/demo/, vite.config.demo.js)
  • Сброс кеша ассетов через ?v= по filemtime для vendor/composables
  • Системная настройка-комбо vuetools-combo-theme (aura | modx) для vuetools.theme

Исправлено

  • Один сервис VueTools под ключами vuetools и vueTools, чтобы Import Map и CSS не регистрировались дважды (#11)

Изменено

  • README и DEVELOPER_GUIDE: рекомендуется getActiveTheme(); Сохранить = severity="success"; уровни токенов
  • Обратная совместимость: компоненты, жёстко задающие Aura / ModxManagerTheme, продолжают работать без изменений

Безопасность

  • Сводное обновление зависимостей сборки: vite, postcss, nanoid, brace-expansion (#21)

[1.1.2-pl] - 2026-06-15

Добавлено

  • Класс VueTools\Service, чтобы MODX находил сервис vuetools по стандартному пути model/vuetools/ (#6)

Изменено

  • Пакет тем PrimeVue @primevue/themes заменён на поддерживаемый @primeuix/themes (#9)
  • Обновлён встроенный стек: Vue 3.5.32, Pinia 3.0.4, PrimeVue 4.5.5; primelocale ^2.3.1 (#9)
  • Жёстко заданные $versions в VueCore синхронизированы с поставляемыми бандлами (#13)
  • postcss обновлён до 8.5.15 — включает исправления безопасности (#12)

[1.1.1-pl] - 2026-02-10

Исправлено

  • В сборке отсутствовал файл usePrimeVueLocale.min.js

Изменено

  • Обновлены зависимости

[1.1.0-pl] - 2026-02-05

Добавлено

  • Локализация PrimeVue: composable usePrimeVueLocale и пресеты локалей (de, en, es, fr, pl, ru, uk)
  • getPrimeVueLocale(cultureKey?) возвращает локаль PrimeVue для фильтров DataTable, DatePicker, Calendar; без cultureKey использует MODx.cultureKey
  • Локали из пакета primelocale (добавлен в зависимости)
  • Import Map: запись @vuetools/usePrimeVueLocale
  • Раздел DEVELOPER_GUIDE «Локализация PrimeVue» и пример использования в README

[1.0.1-pl] - 2026-01-01

Первый бета-релиз.

Добавлено

  • Vue 3.5.13 в виде ES-модуля
  • Pinia 3.0.1 в виде ES-модуля
  • PrimeVue 4.3.1 с темой Aura в виде ES-модуля
  • PrimeIcons 7.0.0
  • Регистрация Import Map для разрешения модулей в браузере
  • Изоляция CSS префиксом .vueApp (без конфликтов с ExtJS)
  • Composables: useApi, useLexicon, useModx, usePermission
  • Плагин VueCoreManager для автоматической регистрации Import Map

Изменено

  • Переименовано из ModxProVueCore в VueTools

Последние обсуждения в сообществе MODX.pro