@maz-ui/mcp 5.0.0-beta.28 → 5.0.0-beta.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/mcp.mjs CHANGED
@@ -7,7 +7,7 @@ import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs';
7
7
  import { resolve, join, dirname } from 'node:path';
8
8
  import { fileURLToPath } from 'node:url';
9
9
 
10
- const version = "5.0.0-beta.28";
10
+ const version = "5.0.0-beta.30";
11
11
 
12
12
  class MetadataExtractor {
13
13
  extract(name, type, content, manualTags = []) {
@@ -1,30 +1,30 @@
1
1
  ## Props
2
2
 
3
- | Name | Description | Type | Required | Default | Possible values |
4
- | ----------------------- | --------------------------------------------------------------- | ------------------------------------- | -------- | -------------- | -------------------------------------------------------------------------------------------------------------------------- |
5
- | **style** | The style of the component | `Native type` | No | `undefined` | - |
6
- | **class** | The class of the component | `Native type` | No | `undefined` | - |
7
- | **src** | The source of the image | `string \| null` | No | `undefined` | - |
8
- | **caption** | The caption of the avatar | `string \| null` | No | `undefined` | - |
9
- | **href** | The link of the avatar | `string` | No | `undefined` | - |
10
- | **to** | The link (router-link or nuxt-link) of the avatar | `string \| Record` | No | `undefined` | - |
11
- | **alt** | The alt of the image | `string` | No | `undefined` | - |
12
- | **target** | The target of the link | `string` | No | `undefined` | - |
13
- | **size** | The size of the avatar | `MazSizeUnit` | No | `undefined` | - |
14
- | **bordered** | Add a border to the avatar | `boolean` | No | `undefined` | - |
15
- | **clickable** | Make the avatar clickable | `boolean` | No | `undefined` | - |
16
- | **square** | Make the avatar square | `boolean` | No | `undefined` | - |
17
- | **no-elevation** | Remove the shadow | `boolean` | No | `undefined` | - |
18
- | **show-caption** | Show the caption | `boolean` | No | `undefined` | - |
19
- | **image-height-full** | Make the image height full | `boolean` | No | `undefined` | - |
20
- | **hide-loader** | Remove the loader | `boolean` | No | `undefined` | - |
21
- | **button-color** | The color of the clickable button | `MazColor` | No | `undefined` | `"primary" \| "secondary" \| "accent" \| "info" \| "success" \| "warning" \| "destructive" \| "contrast" \| "transparent"` |
22
- | **hide-clickable-icon** | Remove the icon on hover when component is clickable | `boolean` | No | `undefined` | - |
23
- | **letter-count** | Number of letters to display in the round text | `number` | No | `undefined` | - |
24
- | **rounded-size** | Size of the rounded | `MazRoundedSize` | No | `undefined` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` |
25
- | **fallback-src** | The fallback src to replace the src on loading error | `string` | No | `undefined` | - |
26
- | **loading** | The loading strategy of the image - lazy, eager or intersecting | `"lazy" \| "eager" \| "intersecting"` | No | `intersecting` | `'lazy' \| 'eager' \| 'intersecting'` |
27
- | **color** | The color of the avatar | `MazColor` | No | `undefined` | `"primary" \| "secondary" \| "accent" \| "info" \| "success" \| "warning" \| "destructive" \| "contrast" \| "transparent"` |
3
+ | Name | Description | Type | Required | Default | Possible values |
4
+ | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | -------- | -------------- | -------------------------------------------------------------------------------------------------------------------------- |
5
+ | **style** | The style of the component | `Native type` | No | `undefined` | - |
6
+ | **class** | The class of the component | `Native type` | No | `undefined` | - |
7
+ | **src** | The source of the image | `string \| null` | No | `undefined` | - |
8
+ | **caption** | The caption of the avatar | `string \| null` | No | `undefined` | - |
9
+ | **href** | The link of the avatar | `string` | No | `undefined` | - |
10
+ | **to** | The link (router-link or nuxt-link) of the avatar | `string \| Record` | No | `undefined` | - |
11
+ | **alt** | The alt of the image | `string` | No | `undefined` | - |
12
+ | **target** | The target of the link | `string` | No | `undefined` | - |
13
+ | **size** | The size of the avatar - a keyword from `MazSize` or any CSS size unit | `MazSize \| MazSizeUnit` | No | `undefined` | `'mini' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` or a CSS unit like `'2rem'`, `'48px'` |
14
+ | **bordered** | Add a border to the avatar | `boolean` | No | `undefined` | - |
15
+ | **clickable** | Make the avatar clickable | `boolean` | No | `undefined` | - |
16
+ | **square** | Make the avatar square | `boolean` | No | `undefined` | - |
17
+ | **no-elevation** | Remove the shadow | `boolean` | No | `undefined` | - |
18
+ | **show-caption** | Show the caption | `boolean` | No | `undefined` | - |
19
+ | **image-height-full** | Make the image height full | `boolean` | No | `undefined` | - |
20
+ | **hide-loader** | Remove the loader | `boolean` | No | `undefined` | - |
21
+ | **button-color** | The color of the clickable button | `MazColor` | No | `undefined` | `"primary" \| "secondary" \| "accent" \| "info" \| "success" \| "warning" \| "destructive" \| "contrast" \| "transparent"` |
22
+ | **hide-clickable-icon** | Remove the icon on hover when component is clickable | `boolean` | No | `undefined` | - |
23
+ | **letter-count** | Number of letters to display in the round text initials. - For a single-word caption, the first `letterCount` characters are used (`'admin'` + `3` -> `'ADM'`). - For a multi-word caption, the first letter of the first `letterCount` words is used (`'Louis Mazel'` -> `'LM'`). | `number` | No | `2` | - |
24
+ | **rounded-size** | Size of the rounded | `MazRoundedSize` | No | `undefined` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` |
25
+ | **fallback-src** | The fallback src to replace the src on loading error | `string` | No | `undefined` | - |
26
+ | **loading** | The loading strategy of the image - lazy, eager or intersecting | `"lazy" \| "eager" \| "intersecting"` | No | `intersecting` | `'lazy' \| 'eager' \| 'intersecting'` |
27
+ | **color** | The color of the avatar | `MazColor` | No | `undefined` | `"primary" \| "secondary" \| "accent" \| "info" \| "success" \| "warning" \| "destructive" \| "contrast" \| "transparent"` |
28
28
 
29
29
  ## Events
30
30
 
@@ -38,8 +38,8 @@
38
38
 
39
39
  ## Slots
40
40
 
41
- | Name | Description | Bindings |
42
- | ---------- | ----------- | -------- |
43
- | round-text | | |
44
- | icon | | |
45
- | caption | | |
41
+ | Name | Description | Bindings |
42
+ | ---------- | ------------------------------------------------------------------------------------ | -------- |
43
+ | round-text | Replace the initials displayed when a caption is set and no image source is provided | |
44
+ | icon | The icon displayed on the clickable button overlay (shown on hover/focus) | |
45
+ | caption | Replace the caption displayed below the avatar (requires `showCaption`) | |
@@ -13,6 +13,7 @@
13
13
  | **end-icon** | Icon displayed on the inline-end edge of the header (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object. | `MazIconLike` | No | `undefined` | - |
14
14
  | **icon-size** | Size of the icon | `MazIconProps['size']` | No | `md` | - |
15
15
  | **block** | Display the container in full width | `boolean` | No | `false` | - |
16
+ | **content-class** | Additional class to add to the content wrapper | `string` | No | `undefined` | - |
16
17
 
17
18
  ## Slots
18
19
 
@@ -108,6 +108,35 @@ function clicked() { console.log('clicked') }
108
108
  </template>
109
109
  ```
110
110
 
111
+ ## Initials from caption
112
+
113
+ When no `src` is provided, `MazAvatar` displays initials generated from the `caption`. The `letter-count` prop (default `2`) controls how many letters are displayed:
114
+
115
+ - **Single word**: the first `letter-count` characters of the word are used.
116
+ - **Multiple words**: the first letter of each of the first `letter-count` words is used.
117
+
118
+ Initials are always uppercased.
119
+
120
+ <div class="flex gap-05 items-center flex-wrap">
121
+ <MazAvatar caption="admin" size="3rem" />
122
+ <MazAvatar caption="admin" :letter-count="3" size="3rem" />
123
+ <MazAvatar caption="Louis Mazel" size="3rem" />
124
+ <MazAvatar caption="Jean Claude Dus" :letter-count="3" size="3rem" />
125
+ </div>
126
+
127
+ ```vue
128
+ <template>
129
+ <!-- "AD" -->
130
+ <MazAvatar caption="admin" />
131
+ <!-- "ADM" -->
132
+ <MazAvatar caption="admin" :letter-count="3" />
133
+ <!-- "LM" -->
134
+ <MazAvatar caption="Louis Mazel" />
135
+ <!-- "JCD" -->
136
+ <MazAvatar caption="Jean Claude Dus" :letter-count="3" />
137
+ </template>
138
+ ```
139
+
111
140
  ## On Error
112
141
 
113
142
  <MazAvatar @error="error" />
@@ -151,7 +151,7 @@ Each field in `fieldsStates` contains:
151
151
  v-model="stateModel.age"
152
152
  label="Age (18-100)"
153
153
  type="number"
154
- :hint="stateErrors.age"s
154
+ :hint="stateErrors.age"
155
155
  :error="!!stateErrors.age"
156
156
  :success="stateFields.age.valid"
157
157
  />
@@ -365,7 +365,7 @@ Requires `useFormField` with `ref` option or `validationEvents`.
365
365
  :success="eagerEmailValid"
366
366
  :class="{ 'has-error-eager': eagerEmailHasError }"
367
367
  />
368
- <MazBtn type="submit" :loading="eagerSubmitting">Submit</MazBtn>
368
+ <MazBtn type="submit" :loading="eagerSubmitting" :disabled="!eagerIsValid">Submit</MazBtn>
369
369
  </form>
370
370
 
371
371
  <template #code>
@@ -381,7 +381,7 @@ const schema = {
381
381
  email: pipe(string(), nonEmpty('Required'), email('Invalid email')),
382
382
  }
383
383
 
384
- const { isSubmitting, handleSubmit } = useFormValidator({
384
+ const { isSubmitting, handleSubmit, isValid } = useFormValidator({
385
385
  schema,
386
386
  options: {
387
387
  mode: 'eager',
@@ -430,6 +430,8 @@ const {
430
430
  :error="emailHasError"
431
431
  :success="emailValid"
432
432
  />
433
+
434
+ <MazBtn type="submit" :loading="isSubmitting" :disabled="!isValid">Submit</MazBtn>
433
435
  </form>
434
436
  </template>
435
437
  ```
@@ -614,6 +616,8 @@ const { value: name, hasError, errorMessage, isValid } = useFormField<string>('n
614
616
 
615
617
  Pass a template ref to `useFormField`. It will automatically detect interactive elements and attach blur listeners.
616
618
 
619
+ The `ref` option is **reactive**: if the field is rendered conditionally (e.g. with `v-if`), the blur listeners are attached automatically as soon as the element appears in the DOM, and removed when it is unmounted. You don't need to handle anything special.
620
+
617
621
  ```vue
618
622
  <script setup>
619
623
  import { useFormField } from 'maz-ui/composables'
@@ -635,6 +639,41 @@ const { value, errorMessage, hasError } = useFormField<string>('email', {
635
639
  </template>
636
640
  ```
637
641
 
642
+ Because it is reactive, the same code works even when the input is wrapped in a `v-if`:
643
+
644
+ ```vue
645
+ <script setup>
646
+ import { useFormField } from 'maz-ui/composables'
647
+ import { useTemplateRef, ref } from 'vue'
648
+
649
+ const isVisible = ref(false)
650
+
651
+ const { value, errorMessage, hasError } = useFormField<string>('email', {
652
+ ref: useTemplateRef('emailRef'),
653
+ formIdentifier: 'my-form',
654
+ })
655
+ </script>
656
+
657
+ <template>
658
+ <MazInput
659
+ v-if="isVisible"
660
+ ref="emailRef"
661
+ v-model="value"
662
+ :hint="errorMessage"
663
+ :error="hasError"
664
+ />
665
+ </template>
666
+ ```
667
+
668
+ You can also pass a raw `HTMLElement` directly. In that case it won't be reactive, so the element must already exist in the DOM:
669
+
670
+ ```ts
671
+ const { value } = useFormField<string>('email', {
672
+ ref: document.querySelector('input'),
673
+ formIdentifier: 'my-form',
674
+ })
675
+ ```
676
+
638
677
  #### Option 2: Using `validationEvents`
639
678
 
640
679
  If your component emits a `blur` event, you can use `v-bind` with `validationEvents`.
@@ -1074,7 +1113,7 @@ useFormField<FieldType>(
1074
1113
  options?: {
1075
1114
  defaultValue?: FieldType, // Default value for this field
1076
1115
  mode?: 'lazy' | 'aggressive' | 'eager' | 'blur' | 'progressive', // Override form mode
1077
- ref?: Ref<HTMLElement | ComponentInstance>, // Template ref for blur detection
1116
+ ref?: Ref<HTMLElement | ComponentInstance> | HTMLElement, // Reactive template ref (v-if friendly) or raw element
1078
1117
  formIdentifier?: string | symbol, // Must match useFormValidator's identifier
1079
1118
  }
1080
1119
  )
@@ -1113,7 +1152,7 @@ interface FormValidatorOptions<Model> {
1113
1152
  interface FormFieldOptions<FieldType> {
1114
1153
  defaultValue?: FieldType
1115
1154
  mode?: 'eager' | 'lazy' | 'aggressive' | 'blur' | 'progressive'
1116
- ref?: Ref<HTMLElement | ComponentInstance>
1155
+ ref?: Ref<HTMLElement | ComponentInstance> | HTMLElement
1117
1156
  formIdentifier?: string | symbol
1118
1157
  }
1119
1158
 
@@ -1166,14 +1205,13 @@ const { value, validationEvents } = useFormField<string>('name')
1166
1205
  // Then: v-bind="validationEvents" on your input
1167
1206
  ```
1168
1207
 
1169
- ### Element Not Found Warning
1208
+ ### Conditionally Rendered Fields (`v-if`)
1170
1209
 
1171
- **Problem**: `No element found for ref in field 'name'`
1210
+ The `ref` option is reactive, so a field wrapped in `v-if` works out of the box: blur listeners are attached as soon as the element is rendered and removed when it is unmounted.
1172
1211
 
1173
- **Solutions**:
1174
- 1. Ensure the ref is bound to an HTML element or Vue component
1175
- 2. Make sure the component has a `$el` property
1176
- 3. For custom components, add `data-interactive` attribute
1212
+ If blur validation still doesn't trigger:
1213
+ 1. Ensure the `ref` is bound to an HTML element or a Vue component exposing `$el`
1214
+ 2. For custom components, add the `data-interactive` attribute
1177
1215
 
1178
1216
  ### Mismatched Form Identifiers
1179
1217
 
@@ -1310,6 +1348,7 @@ const eagerSchema = {
1310
1348
  const {
1311
1349
  isSubmitting: eagerSubmitting,
1312
1350
  handleSubmit: handleEager,
1351
+ isValid: eagerIsValid,
1313
1352
  } = useFormValidator({
1314
1353
  schema: eagerSchema,
1315
1354
  options: { mode: 'eager', scrollToError: '.has-error-eager', identifier: 'form-eager' },
@@ -23,7 +23,7 @@ npx @maz-ui/upgrade ./ --dry-run
23
23
  npx @maz-ui/upgrade ./
24
24
  ```
25
25
 
26
- It handles the mechanical part of the migration (CSS subpath imports, prop renames, CSS var renames, Nuxt config keys, custom preset color keys, and `package.json` version bumps)
26
+ It handles the mechanical part of the migration (CSS subpath imports, prop renames, CSS var renames, the `MazAvatar` size scale fix, Nuxt config keys, custom preset color keys, and `package.json` version bumps)
27
27
 
28
28
  What it can't decide for you: the `MazIcon` API simplification (section 4), `MazBadge` numeric size mapping (section 9), `foundation.radius` → `scales.rounded.md` reshape (section 11) and `MazChart` `update-mode` defaults (section 8). Those are best handled with the MCP server below.
29
29
 
@@ -83,7 +83,8 @@ The MCP server is read-only — it ships docs, not code edits — so the assista
83
83
  6. **`MazIcon` API simplified** — drop `name`, `path` and `src` props; use a single `icon` prop that accepts a Vue component, a URL/`data:` URI, or a raw SVG string.
84
84
  7. Rename **`left-icon` / `right-icon`** to **`start-icon` / `end-icon`** (and the matching slots / `--has-*-icon` classes) on `MazBtn`, `MazInput`, `MazLink`, `MazContainer`, `MazSelect`. Same idea for `MazCard`'s `footer-align` and `MazDrawer`'s `variant` — `'left' | 'right'` becomes `'start' | 'end'`.
85
85
  8. **`MazChart`** drops `vue-chartjs` (lighter bundle, no eager registration of unused chart types). The `update-mode` prop now defaults to `'none'` — pass `update-mode="default"` if you want animated data updates.
86
- 9. That's it for most apps. Everything else is opt-in.
86
+ 9. **`MazAvatar` size scale fixed.** A CSS-unit `size` now renders at its real value (`size="2rem"` is a 32px avatar, it was ~96px before). Multiply your unit values by 3 to keep the same render, or switch to a `MazSize` keyword (`'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'`). The upgrade tool does the ×3 rewrite for you on static values.
87
+ 10. That's it for most apps. Everything else is opt-in.
87
88
 
88
89
  ## Prerequisites
89
90
 
@@ -553,6 +554,49 @@ The components that exposed `color="background"` in their public prop now use `c
553
554
  rg "color\s*=\s*['\"]background['\"]" src/
554
555
  ```
555
556
 
557
+ ### 16. `MazAvatar` size scale fixed + `MazSize` keywords
558
+
559
+ `MazAvatar`'s `size` prop now accepts the standard `MazSize` keywords on top of CSS units, and a long-standing scale bug is fixed.
560
+
561
+ **The scale bug:** the avatar wrapper is sized at `3em` of a root `font-size: size`, so a CSS-unit `size` rendered the avatar **3x larger** than the value you passed. `size="2rem"` produced a ~96px avatar instead of 32px. In v5 the value is honored 1:1 - `size="2rem"` is a 32px avatar.
562
+
563
+ **New `MazSize` keywords** (aligned with `MazBtn`, `MazInput`, ...):
564
+
565
+ | Keyword | Rendered size |
566
+ | --- | --- |
567
+ | `mini` | 24px |
568
+ | `xs` | 32px |
569
+ | `sm` | 40px |
570
+ | `md` | 48px (matches the old default) |
571
+ | `lg` | 56px |
572
+ | `xl` | 64px |
573
+
574
+ ```vue
575
+ <!-- v5 - keyword sizes -->
576
+ <MazAvatar size="sm" />
577
+ <MazAvatar size="lg" />
578
+ ```
579
+
580
+ Custom CSS units still work - you just need to triple the value to keep the exact rendering you had in v4:
581
+
582
+ ```vue
583
+ <!-- v4 - rendered ~96px -->
584
+ <MazAvatar size="2rem" />
585
+
586
+ <!-- v5 - same ~96px render -->
587
+ <MazAvatar size="6rem" />
588
+ <!-- or adopt the corrected scale / a keyword -->
589
+ <MazAvatar size="2rem" />
590
+ <MazAvatar size="xl" />
591
+ ```
592
+
593
+ The upgrade tool rewrites static `size="<unit>"` values on `<MazAvatar>` automatically (every CSS unit is supported). Bound expressions (`:size="…"`) can't be rewritten safely - they are left untouched and listed at the end of the run so you can check them by hand.
594
+
595
+ ```bash
596
+ # Find avatars still passing a size you may want to review
597
+ rg "<MazAvatar[^>]*\bsize=" src/
598
+ ```
599
+
556
600
  ## Informational changes (probably no action needed)
557
601
 
558
602
  ### Theme colors are now emitted as OKLCh
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@maz-ui/mcp",
3
3
  "type": "module",
4
- "version": "5.0.0-beta.28",
4
+ "version": "5.0.0-beta.30",
5
5
  "description": "Maz-UI ModelContextProtocol Client",
6
6
  "author": "Louis Mazel <me@loicmazuel.com>",
7
7
  "license": "MIT",
@@ -43,7 +43,7 @@
43
43
  "dependencies": {
44
44
  "@modelcontextprotocol/sdk": "^1.29.0",
45
45
  "@maz-ui/utils": "5.0.0-beta.28",
46
- "@maz-ui/node": "5.0.0-beta.26"
46
+ "maz-ui": "5.0.0-beta.30"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@modelcontextprotocol/inspector": "^0.21.2",
@@ -52,8 +52,8 @@
52
52
  "ts-node-maintained": "^10.9.5",
53
53
  "tsx": "^4.22.3",
54
54
  "unbuild": "^3.6.1",
55
- "@maz-ui/eslint-config": "5.0.0-beta.28",
56
- "maz-ui": "5.0.0-beta.28"
55
+ "@maz-ui/node": "5.0.0-beta.26",
56
+ "@maz-ui/eslint-config": "5.0.0-beta.28"
57
57
  },
58
58
  "lint-staged": {
59
59
  "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"