Skip to content

feat(theme): Add Modx PrimeVue 4 manager preset - #19

Closed
Ibochkarev wants to merge 3 commits into
masterfrom
feat/modx-primevue-theme
Closed

Ibochkarev wants to merge 3 commits into
masterfrom
feat/modx-primevue-theme

Conversation

@Ibochkarev

@Ibochkarev Ibochkarev commented Aug 28, 2026 •

Copy link
Copy Markdown
Member

Add a PrimeVue 4 preset that follows the MODX Revolution 3 manager look.

Manager extras still defaulted to Aura (or a thin Nora skin). This adds token-based Modx on Nora: splash #234368, 3px radius, 13px body, dense forms, tables, tabs, dialogs, and paginator. Dark mode is only in semantic.colorScheme.dark for showcase apps. ModxManagerTheme sets darkModeSelector: 'none' so Vue widgets stay light when ExtJS does.

Forking Aura or dumping global .p-* CSS would fight every PrimeVue update. Nora already has the dense rectangular baseline, so most of the work is tokens. A few CSS hooks remain where PrimeVue has no token (13px base font, tab strip overlap, paginator hairline borders).

What ships:

  • Named exports Modx, ModxManagerTheme, ModxTheme from the existing primevue.min.js bundle
  • Import Map aliases vuetools and vuetools/theme (same file)
  • Asset ?v= from filemtime so rebuilt vendor/composables are not stuck in HTTP cache
  • Demo: npm run demo
  • Docs: barrel-only import { … } from 'primevue' (subpaths like primevue/button create a second Theme instance)
  • Version 1.1.3-pl

Checked against MiniShop3 in the manager: tabs (white active + splash label on #F1F1F1), paginator (hairline borders, splash selection, no primary fill), buttons, InputNumber, Panel/Card, InputGroup, ToggleButton.

In the manager, Save is severity="success"; toolbar chrome is severity="secondary". Aura remains for extras that already use it.

Review focus: green Save contrast on white, DataTable density with Tag cells, and whether Aura consumers need more than the README note to switch.

Ship a Nora-based Modx theme aligned with MODX Revolution 3 manager
tokens (splash navy, 3px radius, 13px body). Export Modx helpers from
the primevue bundle, add vuetools/theme Import Map aliases, demo
showcase, docs, and bump to 1.1.3-pl.
Cache-bust vendor/composable URLs with filemtime so rebuilt
primevue.min.js is not stuck behind HTTP cache. Tighten tabs, buttons,
InputNumber, Panel/Card, and add InputGroup/ToggleButton tokens after
MiniShop3 checks. Document barrel-only primevue imports so extras do
not ship a second Theme instance.
@Ibochkarev
Ibochkarev marked this pull request as ready for review August 29, 2026 12:57
@Ibochkarev
Ibochkarev requested a review from biz87 August 29, 2026 12:57
Paginator nav uses hairline borders and splash selection instead of a
primary fill. Active tab label uses splash primary; drop nested
window-strip accent patterns from page-level Tabs.
@biz87

biz87 commented Sep 11, 2026

Copy link
Copy Markdown
Member

@

Закрываю — темизацию делаем централизованной внутри VueTools

PR ценен (пресет Modx на Nora, экспорты, demo — всё пойдёт в основу), но по итогам обсуждения архитектура меняется. VueTools — глобальная зависимость десятков компонентов, и переключение темы нужно одно на всех, из зависимости. Текущий #19 лишь поставляет пресеты и ожидает, что каждый потребитель сам захардкодит app.use(PrimeVue, { theme: ModxManagerTheme }) — центрального механизма нет. Поэтому закрываю в пользу переработанного PR.

Почему централизованно (в VueTools)

Пресеты лежат в бандле VueTools; какой применить — решается в рантайме по значению, отданному с сервера. Тогда переключение темы не требует пересборки потребителей: флип настройки → сервер отдаёт другое значение → резолвер выбирает другой пресет → перекрашивается вся экосистема.

Целевой механизм (сторона VueTools)

  1. Системная настройка vuetools.theme (регистрируется пакетом; default aura, значения aura|modx|…, расширяемо).
  2. Плагин VueCoreManager рядом с import map инъектит выбранное значение на клиент (напр. window.VueTools = { theme: modx }).
  3. Резолвер: композабл @vuetools/useTheme (или экспорт getActiveTheme()), читает инъекцию, маппит строку→пресет с fallback на Aura, возвращает { preset, options }.
  4. Реестр пресетов внутри VueTools (aura, modx, …) — новая тема правится только здесь.
  5. Version-сигнал vuetools/theme в import map (уже добавлен в этом PR) для version-aware проверки у потребителей.

Тонкий контракт потребителя

import { PrimeVue } from primevue
import { getActiveTheme } from @vuetools/useTheme
app.use(PrimeVue, getActiveTheme())   // тему диктует VueTools

Что переиспользуем из этого PR

Пресет Modx (токены Nora), named exports, demo-стенд, import map алиасы vuetools/vuetools/theme, filemtime cache-bust, парный фикс bare-vue. Меняется не движок темы — добавляется отсутствующий центральный слой (настройка + инъекция + резолвер + реестр).

Default aura сохраняет текущий вид у всех потребителей, пока админ не переключит.

Refs: MiniShop3 #640 (потребитель, тоже переработается под getActiveTheme()).
@

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants