@maz-ui/mcp 5.0.0-beta.39 → 5.0.0-beta.40
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 +1 -1
- package/docs/src/components/maz-avatar.md +23 -4
- package/docs/src/components/maz-lazy-img.md +64 -0
- package/docs/src/directives/lazy-img.md +47 -14
- package/docs/src/ecosystem/themes.md +1 -1
- package/docs/src/ecosystem/utils/currency.md +2 -2
- package/docs/src/ecosystem/utils/date.md +2 -2
- package/docs/src/ecosystem/utils/number.md +2 -2
- package/docs/src/plugins/wait.md +1 -1
- package/package.json +2 -2
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.
|
|
10
|
+
const version = "5.0.0-beta.40";
|
|
11
11
|
|
|
12
12
|
class MetadataExtractor {
|
|
13
13
|
extract(name, type, content, manualTags = []) {
|
|
@@ -15,7 +15,7 @@ This component uses [vLazyImg](./../directives/lazy-img.md) directive
|
|
|
15
15
|
|
|
16
16
|
## Basic usage
|
|
17
17
|
|
|
18
|
-
<MazAvatar
|
|
18
|
+
<MazAvatar src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />
|
|
19
19
|
|
|
20
20
|
```vue
|
|
21
21
|
<script lang="ts" setup>
|
|
@@ -87,7 +87,6 @@ function clicked() { console.log('clicked') }
|
|
|
87
87
|
target="_blank"
|
|
88
88
|
rounded-size="none"
|
|
89
89
|
clickable
|
|
90
|
-
no-size
|
|
91
90
|
>
|
|
92
91
|
<template #icon>
|
|
93
92
|
<MazIcon icon="/eye.svg" />
|
|
@@ -139,10 +138,12 @@ Initials are always uppercased.
|
|
|
139
138
|
|
|
140
139
|
## On Error
|
|
141
140
|
|
|
142
|
-
|
|
141
|
+
When no `src` (and no `caption`) is provided, or when the image fails to load, `MazAvatar` displays the default `no-image` placeholder.
|
|
142
|
+
|
|
143
|
+
<MazAvatar @error="error" src="https://broken-link-image-src.example" />
|
|
143
144
|
|
|
144
145
|
```html
|
|
145
|
-
<MazAvatar @error="error" />
|
|
146
|
+
<MazAvatar @error="error" src="https://broken-link-image-src.example" />
|
|
146
147
|
```
|
|
147
148
|
|
|
148
149
|
## Fallback image loaded on error
|
|
@@ -200,6 +201,24 @@ These modes are native use an `HTMLImageElement` with the `loading` attribute. (
|
|
|
200
201
|
<MazAvatar loading="eager" src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123" />
|
|
201
202
|
```
|
|
202
203
|
|
|
204
|
+
## Image height full
|
|
205
|
+
|
|
206
|
+
By default the image fills the avatar **width** (`width: 100%`). Enable `image-height-full` to make the image fill the **height** instead: it keeps its aspect ratio, fills 100% of the height and overflows/crops horizontally. This is ideal for wide images or SVGs (like flags) that must cover the whole avatar.
|
|
207
|
+
|
|
208
|
+
<div class="flex gap-05 items-center flex-wrap">
|
|
209
|
+
<MazAvatar class="vp-raw" size="4rem" src="https://placedog.net/300/200?id=7" />
|
|
210
|
+
<MazAvatar class="vp-raw" size="4rem" image-height-full src="https://placedog.net/300/200?id=7" />
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
```vue
|
|
214
|
+
<template>
|
|
215
|
+
<!-- default: width 100% -->
|
|
216
|
+
<MazAvatar src="https://placedog.net/300/200" />
|
|
217
|
+
<!-- height 100%, cropped on the sides -->
|
|
218
|
+
<MazAvatar image-height-full src="https://placedog.net/300/200" />
|
|
219
|
+
</template>
|
|
220
|
+
```
|
|
221
|
+
|
|
203
222
|
<script lang="ts" setup>
|
|
204
223
|
const clicked = () => { console.log('clicked') }
|
|
205
224
|
const error = (el) => { console.error('error', el) }
|
|
@@ -21,4 +21,68 @@ import MazLazyImg from 'maz-ui/components/MazLazyImg'
|
|
|
21
21
|
</template>
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
+
::: tip Performance
|
|
25
|
+
`MazLazyImg` relies on the [`vLazyImg`](./../directives/lazy-img.md) directive, whose `IntersectionObserver`s are pooled and shared across every instance - rendering many images (galleries, lists, avatars) stays cheap.
|
|
26
|
+
:::
|
|
27
|
+
|
|
28
|
+
## Responsive sources
|
|
29
|
+
|
|
30
|
+
Pass an object with `sources` to serve different images depending on the media query (like a native `<picture>`).
|
|
31
|
+
|
|
32
|
+
```vue
|
|
33
|
+
<template>
|
|
34
|
+
<MazLazyImg
|
|
35
|
+
:src="{
|
|
36
|
+
sources: [
|
|
37
|
+
{ srcset: 'https://placedog.net/600/400', media: '(max-width: 600px)' },
|
|
38
|
+
{ srcset: 'https://placedog.net/1500/1000', media: '(min-width: 601px)' },
|
|
39
|
+
],
|
|
40
|
+
}"
|
|
41
|
+
block
|
|
42
|
+
/>
|
|
43
|
+
</template>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Image height full
|
|
47
|
+
|
|
48
|
+
By default the image is displayed with `width: 100%`. Enable `image-height-full` to fill the **height** instead: the image keeps its aspect ratio, fills 100% of the height and overflows/crops horizontally. Handy for wide images or SVGs inside a fixed-height container.
|
|
49
|
+
|
|
50
|
+
```vue
|
|
51
|
+
<template>
|
|
52
|
+
<div style="height: 200px;">
|
|
53
|
+
<MazLazyImg image-height-full src="https://placedog.net/1500/1000" />
|
|
54
|
+
</div>
|
|
55
|
+
</template>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Fallback on error
|
|
59
|
+
|
|
60
|
+
Provide `fallback-src` to swap the image when it fails to load.
|
|
61
|
+
|
|
62
|
+
<MazLazyImg
|
|
63
|
+
block
|
|
64
|
+
src="https://broken-link-image-src.example"
|
|
65
|
+
fallback-src="https://placedog.net/500/500?id=42"
|
|
66
|
+
/>
|
|
67
|
+
|
|
68
|
+
```vue
|
|
69
|
+
<template>
|
|
70
|
+
<MazLazyImg
|
|
71
|
+
src="https://broken-link-image-src.example"
|
|
72
|
+
fallback-src="https://placedog.net/500/500"
|
|
73
|
+
block
|
|
74
|
+
/>
|
|
75
|
+
</template>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Without loader
|
|
79
|
+
|
|
80
|
+
Hide the spinner shown while the image is loading with `hide-loader`.
|
|
81
|
+
|
|
82
|
+
```vue
|
|
83
|
+
<template>
|
|
84
|
+
<MazLazyImg src="https://placedog.net/1000/1000" hide-loader block />
|
|
85
|
+
</template>
|
|
86
|
+
```
|
|
87
|
+
|
|
24
88
|
<!--@include: ./../../.vitepress/generated-docs/maz-lazy-img.doc.md-->
|
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: vLazyImg
|
|
3
|
-
description: vLazyImg is a Vue directive to lazy load images with many options.
|
|
3
|
+
description: vLazyImg is a Vue directive to lazy load images with many options. Images are loaded when they enter the viewport, using a shared IntersectionObserver for optimal performance.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# {{ $frontmatter.title }}
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
+
::: tip Performance
|
|
11
|
+
Every element bound to the directive shares a pooled `IntersectionObserver` (grouped by observer options) and keeps its state per element. You can render hundreds of lazy images - like a list of [`MazAvatar`](./../components/maz-avatar.md) - with only a handful of observers and no leak when elements unmount.
|
|
12
|
+
:::
|
|
13
|
+
|
|
10
14
|
## Basic usage
|
|
11
15
|
|
|
12
16
|
<img
|
|
13
|
-
|
|
17
|
+
alt="Lazy loaded image"
|
|
18
|
+
style="background-color: var(--maz-surface-300); width: 80%;"
|
|
14
19
|
class="flex flex-center rounded"
|
|
15
20
|
v-lazy-img="'https://placedog.net/1500/1000'"
|
|
16
21
|
/>
|
|
@@ -23,7 +28,7 @@ import { vLazyImg } from 'maz-ui/directives'
|
|
|
23
28
|
<template>
|
|
24
29
|
<img
|
|
25
30
|
v-lazy-img="'https://placedog.net/1500/1000'"
|
|
26
|
-
style="background-color: var(--maz-
|
|
31
|
+
style="background-color: var(--maz-surface-300); width: 80%;"
|
|
27
32
|
class="flex flex-center rounded"
|
|
28
33
|
>
|
|
29
34
|
</template>
|
|
@@ -49,20 +54,49 @@ import { vLazyImg } from 'maz-ui/directives'
|
|
|
49
54
|
</template>
|
|
50
55
|
```
|
|
51
56
|
|
|
57
|
+
## Disable lazy loading
|
|
58
|
+
|
|
59
|
+
Set `disabled: true` to load the image immediately, bypassing the `IntersectionObserver`. Useful for above-the-fold images or server-side rendering.
|
|
60
|
+
|
|
61
|
+
```vue
|
|
62
|
+
<template>
|
|
63
|
+
<img
|
|
64
|
+
v-lazy-img="{ src: 'https://placedog.net/1500/1000', disabled: true }"
|
|
65
|
+
>
|
|
66
|
+
</template>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Fallback image on error
|
|
70
|
+
|
|
71
|
+
Provide a `fallbackSrc` to replace the image when it fails to load. Set `fallbackSrc: false` to keep the broken image instead of loading the default placeholder.
|
|
72
|
+
|
|
73
|
+
<img class="maz:size-40" v-lazy-img="{ src: 'https://broken-link.example' }" alt="broken image" />
|
|
74
|
+
|
|
75
|
+
```vue
|
|
76
|
+
<template>
|
|
77
|
+
<img
|
|
78
|
+
v-lazy-img="{
|
|
79
|
+
src: 'https://broken-link.example',
|
|
80
|
+
fallbackSrc: '/images/fallback.png',
|
|
81
|
+
}"
|
|
82
|
+
>
|
|
83
|
+
</template>
|
|
84
|
+
```
|
|
85
|
+
|
|
52
86
|
## Options
|
|
53
87
|
|
|
54
88
|
> Open the developer console to show logs
|
|
55
89
|
|
|
56
90
|
<img
|
|
57
|
-
|
|
91
|
+
alt="Lazy loaded image with options"
|
|
92
|
+
style="background-color: var(--maz-surface-300); width: 80%;"
|
|
58
93
|
class="flex flex-center rounded"
|
|
59
94
|
v-lazy-img="lazyBinding"
|
|
60
95
|
/>
|
|
61
96
|
|
|
62
97
|
```vue
|
|
63
98
|
<script lang="ts" setup>
|
|
64
|
-
import { vLazyImg, vLazyImgBindingValue } from 'maz-ui/directives'
|
|
65
|
-
import { ref } from 'vue'
|
|
99
|
+
import { vLazyImg, type vLazyImgBindingValue } from 'maz-ui/directives'
|
|
66
100
|
|
|
67
101
|
const lazyBinding: vLazyImgBindingValue = {
|
|
68
102
|
src: 'https://placedog.net/1500/1000',
|
|
@@ -71,7 +105,7 @@ const lazyBinding: vLazyImgBindingValue = {
|
|
|
71
105
|
loadedClass: 'custom-class-loaded',
|
|
72
106
|
errorClass: 'custom-class-error',
|
|
73
107
|
fallbackClass: 'custom-class-fallback',
|
|
74
|
-
observerOnce: false, //
|
|
108
|
+
observerOnce: false, // run onIntersecting each time the user scrolls onto the image
|
|
75
109
|
loadOnce: false,
|
|
76
110
|
onLoading: (el: Element) => console.log('loading', el),
|
|
77
111
|
onLoaded: (el: Element) => console.log('loaded', el),
|
|
@@ -83,7 +117,7 @@ const lazyBinding: vLazyImgBindingValue = {
|
|
|
83
117
|
<template>
|
|
84
118
|
<img
|
|
85
119
|
v-lazy-img="lazyBinding"
|
|
86
|
-
style="background-color: var(--maz-
|
|
120
|
+
style="background-color: var(--maz-surface-300); width: 80%;"
|
|
87
121
|
class="flex flex-center rounded"
|
|
88
122
|
>
|
|
89
123
|
</template>
|
|
@@ -94,7 +128,6 @@ const lazyBinding: vLazyImgBindingValue = {
|
|
|
94
128
|
### Vue
|
|
95
129
|
|
|
96
130
|
```typescript
|
|
97
|
-
import errorPhoto from 'path/to/error-photo.png'
|
|
98
131
|
import { vLazyImgInstall, type vLazyImgOptions } from 'maz-ui/directives'
|
|
99
132
|
import { createApp } from 'vue'
|
|
100
133
|
|
|
@@ -109,13 +142,12 @@ const vLazyImgOptions: vLazyImgOptions = {
|
|
|
109
142
|
fallbackClass: 'm-lazy-fallback',
|
|
110
143
|
observerOnce: true,
|
|
111
144
|
loadOnce: true,
|
|
112
|
-
noUseErrorPhoto: false,
|
|
113
145
|
observerOptions: {
|
|
114
146
|
root: undefined,
|
|
115
147
|
rootMargin: undefined,
|
|
116
148
|
threshold: 0.1,
|
|
117
149
|
},
|
|
118
|
-
|
|
150
|
+
fallbackSrc: '/images/fallback.png', // or `false` to disable the default placeholder
|
|
119
151
|
onLoading: (el: Element) => console.log('loading', el),
|
|
120
152
|
onLoaded: (el: Element) => console.log('loaded', el),
|
|
121
153
|
onError: (el: Element) => console.log('error', el),
|
|
@@ -147,7 +179,8 @@ export interface vLazyImgOptions {
|
|
|
147
179
|
threshold: number
|
|
148
180
|
rootMargin?: string
|
|
149
181
|
}
|
|
150
|
-
|
|
182
|
+
/** Image loaded on error - set to `false` to keep the broken image */
|
|
183
|
+
fallbackSrc?: string | false
|
|
151
184
|
onLoading?: (el: Element) => unknown
|
|
152
185
|
onLoaded?: (el: Element) => unknown
|
|
153
186
|
onError?: (el: Element) => unknown
|
|
@@ -155,7 +188,9 @@ export interface vLazyImgOptions {
|
|
|
155
188
|
}
|
|
156
189
|
|
|
157
190
|
interface vLazyImgBindingOptions extends vLazyImgOptions {
|
|
191
|
+
/** The source of the image when the binding value is an options object */
|
|
158
192
|
src?: string
|
|
193
|
+
/** Load the image immediately, bypassing the IntersectionObserver */
|
|
159
194
|
disabled?: boolean
|
|
160
195
|
}
|
|
161
196
|
|
|
@@ -164,7 +199,6 @@ export type vLazyImgBindingValue = string | vLazyImgBindingOptions
|
|
|
164
199
|
|
|
165
200
|
<script lang="ts" setup>
|
|
166
201
|
import { vLazyImg, type vLazyImgBindingValue } from 'maz-ui/directives/vLazyImg'
|
|
167
|
-
import { ref } from 'vue'
|
|
168
202
|
|
|
169
203
|
const lazyBinding: vLazyImgBindingValue = {
|
|
170
204
|
src: 'https://placedog.net/1500/1000',
|
|
@@ -173,7 +207,6 @@ export type vLazyImgBindingValue = string | vLazyImgBindingOptions
|
|
|
173
207
|
loadedClass: 'custom-class-loaded',
|
|
174
208
|
errorClass: 'custom-class-error',
|
|
175
209
|
fallbackClass: 'custom-class-fallback',
|
|
176
|
-
noUseErrorPhoto: true,
|
|
177
210
|
observerOnce: false,
|
|
178
211
|
loadOnce: true,
|
|
179
212
|
onLoading: (el: Element) => console.log('loading', el),
|
|
@@ -580,7 +580,7 @@ const surfaceTheme = definePreset({
|
|
|
580
580
|
},
|
|
581
581
|
container: {
|
|
582
582
|
// Cards / dialogs / popovers / drawers — light = page surface, dark = a tier above
|
|
583
|
-
bg: { light: 'var(--maz-surface)', dark: 'var(--maz-
|
|
583
|
+
bg: { light: 'var(--maz-surface)', dark: 'var(--maz-surface-300)' },
|
|
584
584
|
},
|
|
585
585
|
input: {
|
|
586
586
|
// All form-control surfaces
|
|
@@ -16,7 +16,7 @@ Enter only numbers
|
|
|
16
16
|
<MazInput v-model="numberValue" type="number" />
|
|
17
17
|
|
|
18
18
|
<div
|
|
19
|
-
style="padding: 16px; margin-top: 16px; background-color: var(--maz-
|
|
19
|
+
style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
|
|
20
20
|
class="flex flex-center rounded gap-05"
|
|
21
21
|
>
|
|
22
22
|
formatted value: <strong>{{ priceFormatted }}</strong>
|
|
@@ -38,7 +38,7 @@ const priceFormatted = computed(() =>
|
|
|
38
38
|
<MazInput v-model="numberValue" type="number" />
|
|
39
39
|
|
|
40
40
|
<div
|
|
41
|
-
style="padding: 16px; margin-top: 16px; background-color: var(--maz-
|
|
41
|
+
style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
|
|
42
42
|
>
|
|
43
43
|
{{ priceFormatted }}
|
|
44
44
|
</div>
|
|
@@ -12,7 +12,7 @@ description: The module formatDate is a function that formats dates with the nat
|
|
|
12
12
|
<MazInput v-model="dateValue" type="date" />
|
|
13
13
|
|
|
14
14
|
<div
|
|
15
|
-
style="padding: 16px; margin-top: 16px; background-color: var(--maz-
|
|
15
|
+
style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
|
|
16
16
|
class="flex flex-center rounded gap-05"
|
|
17
17
|
>
|
|
18
18
|
formatted value: <strong>{{ dateFormatted }}</strong>
|
|
@@ -34,7 +34,7 @@ const dateFormatted = computed(() =>
|
|
|
34
34
|
<MazInput v-model="dateValue" type="date" />
|
|
35
35
|
|
|
36
36
|
<div
|
|
37
|
-
style="padding: 16px; margin-top: 16px; background-color: var(--maz-
|
|
37
|
+
style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
|
|
38
38
|
>
|
|
39
39
|
{{ dateFormatted }}
|
|
40
40
|
</div>
|
|
@@ -12,7 +12,7 @@ description: The module formatNumber is a function that formats numbers with the
|
|
|
12
12
|
<MazInput v-model="numberValue" type="number" />
|
|
13
13
|
|
|
14
14
|
<div
|
|
15
|
-
style="padding: 16px; margin-top: 16px; background-color: var(--maz-
|
|
15
|
+
style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
|
|
16
16
|
class="maz:flex maz:flex-center maz:rounded-md maz:gap-0.5"
|
|
17
17
|
>
|
|
18
18
|
formatted value: <strong>{{ numberFormatted }}</strong>
|
|
@@ -34,7 +34,7 @@ const numberFormatted = computed(() =>
|
|
|
34
34
|
<MazInput v-model="numberValue" type="number" />
|
|
35
35
|
|
|
36
36
|
<div
|
|
37
|
-
style="padding: 16px; margin-top: 16px; background-color: var(--maz-
|
|
37
|
+
style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
|
|
38
38
|
>
|
|
39
39
|
{{ numberFormatted }}
|
|
40
40
|
</div>
|
package/docs/src/plugins/wait.md
CHANGED
|
@@ -46,7 +46,7 @@ export default defineNuxtConfig({
|
|
|
46
46
|
|
|
47
47
|
<br />
|
|
48
48
|
|
|
49
|
-
<div v-if="submitted" style="padding: 20px; background-color: var(--maz-
|
|
49
|
+
<div v-if="submitted" style="padding: 20px; background-color: var(--maz-surface-300); border-radius: 10px; margin-top: 1rem;">
|
|
50
50
|
Data Submitted
|
|
51
51
|
</div>
|
|
52
52
|
|
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.
|
|
4
|
+
"version": "5.0.0-beta.40",
|
|
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.39",
|
|
46
|
-
"maz-ui": "5.0.0-beta.
|
|
46
|
+
"maz-ui": "5.0.0-beta.40"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@modelcontextprotocol/inspector": "^0.21.2",
|