feat(maz-ui): add local-flags prop for offline/hybrid app support#1576
feat(maz-ui): add local-flags prop for offline/hybrid app support#1576LouisMazel wants to merge 32 commits into
Conversation
Maz-UI v5 is a focused major: a theming overhaul on top of Tailwind v4, RTL-correct components, a lighter chart, a simpler icon API, and a one-shot CLI to make the upgrade itself painless. **Highlights** - **Theming, top to bottom** — OKLCh color system for perceptually uniform scales, honest token names (`background` → `surface`, `border` → `divider`), a real radius scale, a `components` block to override per-component tokens, the new `nova` preset, and preset persistence across reloads. - **Logical direction by default** — every `left`/`right` prop, slot and CSS hook is now `start`/`end`. Set `dir="rtl"` and components mirror correctly. - **Lighter chart** — `MazChart` drops `vue-chartjs`, lazy-loads `chart.js`, and only registers the modules the chart `type` actually needs. - **Simpler icons** — one `icon` prop instead of four. New `@maz-ui/icons/raw/*` subpath for raw SVG inlining without a Vue component. - **Standardized sizes** — `MazBadge` joins the rest of the library on the `MazSize` keyword scale. - **~8% lighter library bundle** thanks to the chart, icon and theming refactors. - Modern browsers required (Chromium 111+, Safari 16.4+, Firefox 128+). **Migration** - **Mechanical part:** `npx @maz-ui/upgrade ./` rewrites your code, bumps every `maz-ui` / `@maz-ui/*` entry in `package.json` to `^5.0.0`, and runs the right `pnpm`/`yarn`/`bun`/`npm install` for you. - **Judgment calls** (icon paths, theme preset reshape, chart animation default): connect [`@maz-ui/mcp`](https://maz-ui.com/guide/mcp) to your AI assistant and walk the guide section by section. **Links** - [Announcement](https://maz-ui.com/blog/v5) - [Migration guide](https://maz-ui.com/guide/migration-v5) - [`@maz-ui/upgrade` CLI](https://github.com/LouisMazel/maz-ui/tree/master/packages/upgrade) - [`@maz-ui/mcp` server](https://maz-ui.com/guide/mcp) > **Solo maintainer note:** v4 will receive no further support after v5 > stable — no security fixes, no backports.
Maz-UI v5 is a focused major: a theming overhaul on top of Tailwind v4, RTL-correct components, a lighter chart, a simpler icon API, and a one-shot CLI to make the upgrade itself painless. **Highlights** - **Theming, top to bottom** — OKLCh color system for perceptually uniform scales, honest token names (`background` → `surface`, `border` → `divider`), a real radius scale, a `components` block to override per-component tokens, the new `nova` preset, and preset persistence across reloads. - **Logical direction by default** — every `left`/`right` prop, slot and CSS hook is now `start`/`end`. Set `dir="rtl"` and components mirror correctly. - **Lighter chart** — `MazChart` drops `vue-chartjs`, lazy-loads `chart.js`, and only registers the modules the chart `type` actually needs. - **Simpler icons** — one `icon` prop instead of four. New `@maz-ui/icons/raw/*` subpath for raw SVG inlining without a Vue component. - **Standardized sizes** — `MazBadge` joins the rest of the library on the `MazSize` keyword scale. - **~8% lighter library bundle** thanks to the chart, icon and theming refactors. - Modern browsers required (Chromium 111+, Safari 16.4+, Firefox 128+). **Migration** - **Mechanical part:** `npx @maz-ui/upgrade ./` rewrites your code, bumps every `maz-ui` / `@maz-ui/*` entry in `package.json` to `^5.0.0`, and runs the right `pnpm`/`yarn`/`bun`/`npm install` for you. - **Judgment calls** (icon paths, theme preset reshape, chart animation default): connect [`@maz-ui/mcp`](https://maz-ui.com/guide/mcp) to your AI assistant and walk the guide section by section. **Links** - [Announcement](https://maz-ui.com/blog/v5) - [Migration guide](https://maz-ui.com/guide/migration-v5) - [`@maz-ui/upgrade` CLI](https://github.com/LouisMazel/maz-ui/tree/master/packages/upgrade) - [`@maz-ui/mcp` server](https://maz-ui.com/guide/mcp) > **Solo maintainer note:** v4 will receive no further support after v5 > stable — no security fixes, no backports.
…d maz plugin
Ships a new ESLint plugin under the `maz/*` namespace, starting with `maz/tailwind-no-arbitrary-px` which forbids `px` units inside Tailwind arbitrary value classes (`w-[16px]`, `[gap:24px]`, …) and autofixes them to `rem` (or `em`).
The plugin and rule are registered automatically when `tailwindcss` is enabled in `defineConfig`. Configure via the `tailwindcss.noArbitraryPx` shortcut or via a standard ESLint `rules` override:
```ts
defineConfig({
tailwindcss: {
preset: 'recommended',
noArbitraryPx: { baseFontSize: 16, unit: 'rem', severity: 'error' },
},
})
```
`mazPlugin` is also exported for users who want to wire the rule manually without enabling the full Tailwind preset.
…scheme, color-mix (#1572)
* feat(maz-ui): add MazSidebar component with sub-components and composable Implements a fully accessible, composable sidebar system for dashboard, admin, and SaaS applications. State is shared via provide/inject from the root MazSidebar component. Components added: - MazSidebar: root container (push/overlay modes, offcanvas/icon/none collapsible) - MazSidebarHeader, MazSidebarContent, MazSidebarFooter: layout zones - MazSidebarGroup: grouping with optional label (sr-only in icon mode) - MazSidebarSeparator: visual HR divider - MazSidebarMenu / MazSidebarMenuItem: ul/li with ARIA roles - MazSidebarMenuButton: link/button with icon, label, badge, tooltip auto-show - MazSidebarMenuSub: collapsible sub-menu with ArrowRight/ArrowLeft keyboard support - MazSidebarTrigger: toggle button with aria-expanded and aria-controls Composable added: - useMazSidebar: typed inject for open state, toggle, setOpen, state Closes #1573 * refactor(maz-ui): polish MazSidebar to align with project conventions - Rename `useMazSidebar` composable to `useSidebar` (kept Maz-prefixed types) - Drop all scoped CSS in favour of Tailwind utilities and add `m-reset-css` on every sub-component root so theming and tree-shaking work as expected - MazSidebarMenuButton: `icon` accepts `MazIconLike`, `badge` accepts `MazBadgeProps`, tooltip via `v-tooltip` directive - MazSidebarMenuSub: smooth grid-rows expand/collapse via `MazExpandAnimation`, accepts `MazIconLike` icon - MazSidebarTrigger: replace inline SVG with `MazIcon` + `MazBars3` - Overlay mode delegated to `MazBackdrop` (reuses scroll-lock, focus trap, escape, click-outside) - Fix offcanvas-collapsed border leak and the icon-centering jump during collapse via `min(calc((var(--maz-sidebar-icon-width)-1.25rem)/2), calc((100%-1.25rem)/2))` — icons stay centred regardless of any padding applied to `MazSidebarContent` - Split the monolithic spec into one file per component (11 specs, 121 tests) - Doc: replace inline `style` with Tailwind classes and document the new prop shapes - Wire MazSidebar components and `useSidebar` into the Nuxt module auto-imports
) * feat(maz-ui): add MazCodeHighlight component with shiki syntax highlighting - Add MazCodeHighlight component with code/language/theme props - Support default slot text extraction as fallback for code prop - Auto-detect dark/light mode via MutationObserver on html element - Lazy-load shiki via dynamic import to keep bundle lean - Add shiki ^3.0.0 to lib dependencies - Export from components/index.ts * feat(maz-ui): add MazWindowMockup component with browser/terminal/editor variants - Three macOS-style traffic light buttons in all variant title bars - Browser variant: address bar with url prop (default 'localhost') - Editor variant: filename tab with filename prop (default 'index.vue') - Terminal variant: centered title with title prop (default 'zsh'), $ prompt - showPrompt prop and #prompt slot for terminal prompt customization - minHeight prop for CSS-based content area height control - code + language props trigger integrated MazCodeHighlight rendering - Default slot for free content when code prop is not set - Dark/light mode compatible via maz-ui CSS vars - Export from components/index.ts * feat(@maz-ui/nuxt): register MazCodeHighlight and MazWindowMockup in Nuxt module Add MazCodeHighlight and MazWindowMockup to COMPONENT_NAMES in the Nuxt module for auto-import support. MazComponentsResolver already resolves all Maz-prefixed components via regex pattern. * test(maz-ui): add unit tests for MazCodeHighlight and MazWindowMockup - MazCodeHighlight: tests for code prop, slot fallback, language prop, theme prop, empty state, and shiki error fallback - MazWindowMockup: tests for all three variants (browser/terminal/editor), url/filename/title props, showPrompt prop, prompt slot, default slot - MazCodeHighlight stubbed in MazWindowMockup tests to avoid async teardown issues * docs(maz-ui): add documentation pages for MazCodeHighlight and MazWindowMockup - Add maz-code-highlight.md with basic usage, slot fallback, language, and custom theme examples - Add maz-window-mockup.md with browser, terminal (with custom prompt), and editor variant examples - Add both to the sidebar under a new 'Display' section in components.mts
…oneNumber Adds a `localFlags` boolean prop (default: false) on both components. When enabled, flags are rendered from bundled SVG assets via LazyMazFlagXX components from @maz-ui/icons instead of requesting images from flagcdn.com. Falls back to a colored badge when no bundled asset exists for a code (e.g. gb-eng, sub-national codes). CDN behavior is unchanged by default. Closes #1196
|
🤖 [tech-lead] Required Fixes
Nits (non bloquants)
Points positifs
Merci de corriger les points 1 et 2 avant merge — le 1 casse la page de doc, le 2 alourdit le bundle pour 100 % des consommateurs. |
Bundle ReportChanges will increase total bundle size by 1.74kB (0.06%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: lib-esmAssets Changed:
Files in
Files in
|
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## develop #1576 +/- ##
===========================================
+ Coverage 92.24% 92.41% +0.16%
===========================================
Files 228 246 +18
Lines 8128 8319 +191
Branches 2179 2241 +62
===========================================
+ Hits 7498 7688 +190
- Misses 522 523 +1
Partials 108 108
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report in Codecov by Sentry.
🚀 New features to boost your workflow:
|
- Replace `import * as MazIcons from '@maz-ui/icons'` with on-demand
dynamic imports from `@maz-ui/icons/lazy/<ComponentName>` to restore
tree-shaking; results are cached in a shallowReactive map so each
flag is fetched at most once per page lifecycle
- Update test mocks to match new per-module import paths
- Use replaceAll('-', '') instead of replace('-', '') to handle codes
with multiple dashes (e.g. en-US-posix)
- Add missing `localFlagsExample` ref to VitePress demo script setup
|
🤖 [dev] Corrections du tech-lead review appliquées : [high] Suppression de [high] [low] [low] |
LouisMazel
force-pushed
the
develop
branch
5 times, most recently
from
f12c763 to
82851e1
Compare
1 participant
Summary
localFlags: booleanprop (defaultfalse) onMazSelectCountryandMazInputPhoneNumberlocal-flagsis enabled, flags are rendered viaLazyMazFlagXXcomponents from@maz-ui/icons(already a dependency) — no CDN requestgb-eng, sub-national codes)flagcdn.com) is completely unchanged whenlocal-flags=false(default)Motivation
Closes #1196 — hybrid apps (Capacitor, Cordova) may run without network access. Flags sourced from flagcdn.com would fail to render in offline scenarios. This feature allows bundling flag assets locally.
Changes
MazSelectCountry.vuelocalFlagsprop +getLocalFlagComponent()using@maz-ui/iconsMazInputPhoneNumber.vuelocalFlagsprop forwarded to innerMazSelectCountryMazSelectCountry.spec.tslocalFlagsscenariosMazInputPhoneNumber.spec.tsmaz-select-country.mdmaz-input-phone-number.mdTechnical decisions
Object.hasOwn(icons, key)is used instead of direct bracket access to avoid triggering Vitest's strict mock Proxygettrap when a key is absentgetLocalFlagComponent(option.code)) — this is synchronous since the icons aremarkRaw(defineAsyncComponent(...))objects that exist immediatelyTest plan
pnpm test:unit:all— 3070 tests, all passpnpm lint:js— no errorspnpm typecheck:all— no errorslocalFlags=false(default): CDN flags still rendered viaMazLazyImglocalFlags=true+ known code (e.g.FR): local flag component renderedlocalFlags=true+ unknown sub-national code (e.g.gb-eng): colored badge shown, no CDN requestMazInputPhoneNumber→MazSelectCountry