@maz-ui/mcp 5.0.0-beta.46 → 5.0.0-beta.47
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.
|
|
10
|
+
const version = "5.0.0-beta.46";
|
|
11
11
|
|
|
12
12
|
class MetadataExtractor {
|
|
13
13
|
extract(name, type, content, manualTags = []) {
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required |
|
|
4
|
+
| ------------------ | ------------------------------------------------------------- | --------------------- | -------- |
|
|
5
|
+
| **count** | Total number of rows to virtualize. | `number` | Yes |
|
|
6
|
+
| **scroll-element** | Scrollable viewport element the virtualizer observes. | `HTMLElement \| null` | No |
|
|
7
|
+
| **estimate-size** | Fixed per-row height used to place rows and size the spacers. | `number` | No |
|
|
8
|
+
| **overscan** | Rows rendered outside the viewport on each side. | `number` | No |
|
|
9
|
+
|
|
10
|
+
## Events
|
|
11
|
+
|
|
12
|
+
| Event name | Properties | Description |
|
|
13
|
+
| ---------- | ---------- | ----------- |
|
|
14
|
+
| change | |
|
|
15
|
+
|
|
16
|
+
## Slots
|
|
17
|
+
|
|
18
|
+
| Name | Description | Bindings |
|
|
19
|
+
| ------- | ----------- | -------- |
|
|
20
|
+
| default | | |
|
|
@@ -1,44 +1,48 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name
|
|
4
|
-
|
|
|
5
|
-
| **table-class**
|
|
6
|
-
| **table-style**
|
|
7
|
-
| **model-value**
|
|
8
|
-
| **size**
|
|
9
|
-
| **input-size**
|
|
10
|
-
| **title**
|
|
11
|
-
| **headers**
|
|
12
|
-
| **sortable**
|
|
13
|
-
| **headers-align**
|
|
14
|
-
| **rows**
|
|
15
|
-
| **hoverable**
|
|
16
|
-
| **search**
|
|
17
|
-
| **hide-search-in-row**
|
|
18
|
-
| **hide-search-by**
|
|
19
|
-
| **search-query**
|
|
20
|
-
| **background-odd**
|
|
21
|
-
| **background-even**
|
|
22
|
-
| **elevation**
|
|
23
|
-
| **divider**
|
|
24
|
-
| **caption**
|
|
25
|
-
| **caption-side**
|
|
26
|
-
| **pagination**
|
|
27
|
-
| **page**
|
|
28
|
-
| **page-size**
|
|
29
|
-
| **total-pages**
|
|
30
|
-
| **paginate-rows**
|
|
31
|
-
| **total-items**
|
|
32
|
-
| **loading**
|
|
33
|
-
| **selectable**
|
|
34
|
-
| **selected-key**
|
|
35
|
-
| **table-layout**
|
|
36
|
-
| **color**
|
|
37
|
-
| **translations**
|
|
38
|
-
| **rounded-size**
|
|
39
|
-
| **scrollable**
|
|
40
|
-
| **row-key**
|
|
41
|
-
| **animated-rows**
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | -------- | ---------------------------------------- | ---------------------------- |
|
|
5
|
+
| **table-class** | CSS class of the table element | `HTMLAttributes['class']` | No | `undefined` | - |
|
|
6
|
+
| **table-style** | CSS style of the table element | `HTMLAttributes['style']` | No | `undefined` | - |
|
|
7
|
+
| **model-value** | `v-model` <br/>List of selected rows | `(string \| boolean \| number)[]` | No | `undefined` | - |
|
|
8
|
+
| **size** | Size of the table | `MazSize` | No | `md` | `xl, lg, md, sm, xs, mini` |
|
|
9
|
+
| **input-size** | Size of the search inputs | `MazSize` | No | `undefined` | `xl, lg, md, sm, xs, mini` |
|
|
10
|
+
| **title** | Title of the table | `string` | No | `undefined` | - |
|
|
11
|
+
| **headers** | Headers of the table | `MazTableHeader[]` | No | `undefined` | - |
|
|
12
|
+
| **sortable** | Enable sort feature on all columns | `boolean` | No | `false` | - |
|
|
13
|
+
| **headers-align** | Align all headers | `string` | No | `left` | - |
|
|
14
|
+
| **rows** | Rows of the table | `T[]` | No | `undefined` | - |
|
|
15
|
+
| **hoverable** | Add hover effect on rows | `boolean` | No | `false` | - |
|
|
16
|
+
| **search** | Enable search feature in table header | `boolean` | No | `false` | - |
|
|
17
|
+
| **hide-search-in-row** | Disable search in rows - useful to filter data yourself or make search request to server | `boolean` | No | `false` | - |
|
|
18
|
+
| **hide-search-by** | Disable search by column (remove select input "search by") | `boolean` | No | `false` | - |
|
|
19
|
+
| **search-query** | `v-model:search-query` <br/>Search query in input | `string` | No | `undefined` | - |
|
|
20
|
+
| **background-odd** | Add background color to odd rows | `boolean` | No | `false` | - |
|
|
21
|
+
| **background-even** | Add background color to even rows | `boolean` | No | `false` | - |
|
|
22
|
+
| **elevation** | Add shadow to the table | `boolean` | No | `false` | - |
|
|
23
|
+
| **divider** | add divider between rows | `boolean` | No | `false` | - |
|
|
24
|
+
| **caption** | Caption of the table | `string` | No | `undefined` | - |
|
|
25
|
+
| **caption-side** | Caption side | `string` | No | `bottom` | `top, bottom` |
|
|
26
|
+
| **pagination** | Add pagination in table footer | `boolean` | No | `false` | - |
|
|
27
|
+
| **page** | `v-model:page` <br/>Current page of pagination | `number` | No | `1` | - |
|
|
28
|
+
| **page-size** | `v-model:page-size` <br/>Number of items per page | `number` | No | `20` | - |
|
|
29
|
+
| **total-pages** | Total number of pages | `number` | No | `undefined` | - |
|
|
30
|
+
| **paginate-rows** | Don't paginate rows - useful to make pagination request with your server | `boolean` | No | `true` | - |
|
|
31
|
+
| **total-items** | Total number of items | `number` | No | `undefined` | - |
|
|
32
|
+
| **loading** | Loading state | `boolean` | No | `false` | - |
|
|
33
|
+
| **selectable** | Enable selection of rows | `boolean` | No | `false` | - |
|
|
34
|
+
| **selected-key** | Enable selection of rows - key of the selected row | `string` | No | `undefined` | - |
|
|
35
|
+
| **table-layout** | Table layout | `string` | No | `undefined` | `auto, fixed` |
|
|
36
|
+
| **color** | Color of the component | `MazColor` | No | `primary` | - |
|
|
37
|
+
| **translations** | Translations of the table | `DeepPartial<MazUiTranslationsNestedSchema['table']>` | No | `Translations from @maz-ui/translations` | - |
|
|
38
|
+
| **rounded-size** | Size radius of the component's border | `MazRoundedSize` | No | `md` | `none, sm, md, lg, xl, full` |
|
|
39
|
+
| **scrollable** | Enable scrollable on table | `boolean` | No | `false` | - |
|
|
40
|
+
| **row-key** | Field name used as a stable key for each row (e.g. an id). Gives every row a stable identity so reordering is tracked correctly - required for `animatedRows` to look right. Falls back to the row index when not provided. | `string` | No | `undefined` | - |
|
|
41
|
+
| **animated-rows** | Animate row reordering with a FLIP transition (rows slide to their new position). Provide a stable `rowKey` for meaningful results. Respects `prefers-reduced-motion`. | `boolean` | No | `false` | - |
|
|
42
|
+
| **virtualized** | Only render the rows visible in the viewport (plus an overscan) using `@tanstack/vue-virtual`. Keeps the table fast on thousands of rows. Requires `maxHeight` to bound the scroll viewport. Ignored when `animatedRows` is on or when a custom default slot is provided. Rows render client-side only. | `boolean` | No | `false` | - |
|
|
43
|
+
| **max-height** | Max height of the scroll viewport (any CSS length, e.g. `'400px'`, `'70vh'`). Enables scrolling and, when `virtualized`, bounds the virtualized viewport. | `string` | No | `undefined` | - |
|
|
44
|
+
| **estimated-row-height** | Fixed row height in pixels used by the virtualizer to place rows and size the spacers. Set it to your real row height (virtualized rows should be uniform). | `number` | No | `44` | - |
|
|
45
|
+
| **overscan** | Number of rows rendered outside the viewport on each side when `virtualized`. | `number` | No | `10` | - |
|
|
42
46
|
|
|
43
47
|
## Events
|
|
44
48
|
|
|
@@ -16,6 +16,7 @@ description: A powerful and flexible date picker component with support for sing
|
|
|
16
16
|
- [Basic Usage](#basic-usage)
|
|
17
17
|
- [Date Formats](#date-formats)
|
|
18
18
|
- [Date Selection](#date-selection)
|
|
19
|
+
- [Custom Trigger](#custom-trigger)
|
|
19
20
|
- [Time Selection](#time-selection)
|
|
20
21
|
- [Range Selection](#range-selection)
|
|
21
22
|
- [Internationalization](#internationalization)
|
|
@@ -273,6 +274,58 @@ const date = ref()
|
|
|
273
274
|
</template>
|
|
274
275
|
</ComponentDemo>
|
|
275
276
|
|
|
277
|
+
## Custom Trigger
|
|
278
|
+
|
|
279
|
+
By default MazDatePicker renders a readonly `MazInput` as the field that opens the calendar. Use the `#trigger` slot to replace it with your own element - a button, a custom input, an icon... Clicking the slotted element opens the calendar automatically (no `@click` needed), and the slot exposes the current open state plus functions for programmatic control.
|
|
280
|
+
|
|
281
|
+
### Slot bindings
|
|
282
|
+
|
|
283
|
+
| Binding | Type | Description |
|
|
284
|
+
| --- | --- | --- |
|
|
285
|
+
| `is-open` | `boolean` | Whether the calendar is currently open |
|
|
286
|
+
| `open` | `() => void` | Open the calendar programmatically |
|
|
287
|
+
| `close` | `() => void` | Close the calendar programmatically |
|
|
288
|
+
| `toggle` | `() => void` | Toggle the calendar programmatically |
|
|
289
|
+
|
|
290
|
+
<ComponentDemo>
|
|
291
|
+
<MazDatePicker v-model="triggerDate" auto-close hide-header>
|
|
292
|
+
<template #trigger="{ isOpen }">
|
|
293
|
+
<MazBtn color="secondary" :class="{ 'maz:ring-2 maz:ring-offset-2 maz:ring-secondary': isOpen }">
|
|
294
|
+
{{ triggerDate || 'Pick a date' }}
|
|
295
|
+
</MazBtn>
|
|
296
|
+
</template>
|
|
297
|
+
</MazDatePicker>
|
|
298
|
+
|
|
299
|
+
<template #code>
|
|
300
|
+
|
|
301
|
+
```vue
|
|
302
|
+
<template>
|
|
303
|
+
<MazDatePicker v-model="date" auto-close>
|
|
304
|
+
<!-- Clicking the button opens the picker automatically. -->
|
|
305
|
+
<template #trigger="{ isOpen }">
|
|
306
|
+
<MazBtn color="secondary" :class="{ 'maz:ring-2 maz:ring-secondary': isOpen }">
|
|
307
|
+
{{ date || 'Pick a date' }}
|
|
308
|
+
</MazBtn>
|
|
309
|
+
</template>
|
|
310
|
+
</MazDatePicker>
|
|
311
|
+
</template>
|
|
312
|
+
|
|
313
|
+
<script setup>
|
|
314
|
+
import { ref } from 'vue'
|
|
315
|
+
|
|
316
|
+
const date = ref()
|
|
317
|
+
</script>
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
</template>
|
|
321
|
+
</ComponentDemo>
|
|
322
|
+
|
|
323
|
+
::: tip
|
|
324
|
+
The model value is not passed through the slot - use your own `v-model` ref (here `date`) to display the selected value in your custom trigger. The exposed `open` / `close` / `toggle` functions are only needed when you want to drive the picker from your own logic.
|
|
325
|
+
:::
|
|
326
|
+
|
|
327
|
+
> In `inline` mode the calendar is always visible, so the `trigger` slot is not rendered. To open the picker from an element rendered outside the component, use the `custom-element-selector` prop instead.
|
|
328
|
+
|
|
276
329
|
## Time Selection
|
|
277
330
|
|
|
278
331
|
### Date + Time (24h format)
|
|
@@ -1021,6 +1074,7 @@ const formatExample2 = ref('03/15/2024')
|
|
|
1021
1074
|
const formatExample3 = ref('15-03-2024')
|
|
1022
1075
|
const transformedDate = ref()
|
|
1023
1076
|
const newDateValue = ref()
|
|
1077
|
+
const triggerDate = ref()
|
|
1024
1078
|
// Date selection
|
|
1025
1079
|
const dateSelection = ref()
|
|
1026
1080
|
const inlineDate = ref()
|
|
@@ -20,6 +20,7 @@ description: MazTable is designed to be a reusable data table with advanced feat
|
|
|
20
20
|
5. Customizable Page Size: Users can choose the number of items to display per page using a dropdown list.
|
|
21
21
|
6. Loading Indicator (prop `loading`): A loading indicator (MazLoadingBar) is displayed when data is being loaded.
|
|
22
22
|
7. Animated rows (props `animated-rows` + `row-key`): rows slide to their new position when the order changes (FLIP animation). Respects `prefers-reduced-motion`.
|
|
23
|
+
8. Virtualization (prop `virtualized`): render only the rows visible in the viewport (plus an overscan) so the table stays fast with thousands of rows.
|
|
23
24
|
|
|
24
25
|
## Available models
|
|
25
26
|
|
|
@@ -156,7 +157,7 @@ v-model:page-size="{{pageSize ?? 'undefined'}}"
|
|
|
156
157
|
</template>
|
|
157
158
|
<template #cell-name="{ row, value }">
|
|
158
159
|
<div class="maz:flex maz:items-center maz:gap-2">
|
|
159
|
-
<MazAvatar :src="row.logoUrl" size="
|
|
160
|
+
<MazAvatar :src="row.logoUrl" size="mini"></MazAvatar>
|
|
160
161
|
<span>{{value}}</span>
|
|
161
162
|
</div>
|
|
162
163
|
</template>
|
|
@@ -431,6 +432,79 @@ Enable `animated-rows` to make rows slide to their new position when the order c
|
|
|
431
432
|
|
|
432
433
|
</ComponentDemo>
|
|
433
434
|
|
|
435
|
+
## Virtualization
|
|
436
|
+
|
|
437
|
+
Enable `virtualized` to render only the rows inside the viewport (plus an overscan) instead of every row. This keeps the table fast and the DOM light even with tens of thousands of rows. It works in `rows` mode (data-driven), and `@tanstack/vue-virtual` is loaded on demand - pages that never virtualize a table never ship it.
|
|
438
|
+
|
|
439
|
+
The example below renders **10 000 rows** but only keeps ~20 `<tr>` in the DOM at any time.
|
|
440
|
+
|
|
441
|
+
<ComponentDemo>
|
|
442
|
+
<MazTable
|
|
443
|
+
class="vp-raw"
|
|
444
|
+
size="sm"
|
|
445
|
+
virtualized
|
|
446
|
+
max-height="300px"
|
|
447
|
+
:estimated-row-height="38"
|
|
448
|
+
:headers="[
|
|
449
|
+
{ label: '#', key: 'id', width: '5rem' },
|
|
450
|
+
{ label: 'Name', key: 'name', width: '12rem' },
|
|
451
|
+
{ label: 'Email', key: 'email' },
|
|
452
|
+
{ label: 'Score', key: 'score', align: 'center', width: '6rem' },
|
|
453
|
+
]"
|
|
454
|
+
:rows="virtualizedRows"
|
|
455
|
+
/>
|
|
456
|
+
|
|
457
|
+
<template #code>
|
|
458
|
+
|
|
459
|
+
```vue
|
|
460
|
+
<template>
|
|
461
|
+
<MazTable
|
|
462
|
+
virtualized
|
|
463
|
+
max-height="400px"
|
|
464
|
+
:estimated-row-height="38"
|
|
465
|
+
:headers="[
|
|
466
|
+
{ label: '#', key: 'id', width: '5rem' },
|
|
467
|
+
{ label: 'Name', key: 'name', width: '12rem' },
|
|
468
|
+
{ label: 'Email', key: 'email' },
|
|
469
|
+
{ label: 'Score', key: 'score', align: 'center', width: '6rem' },
|
|
470
|
+
]"
|
|
471
|
+
:rows="rows"
|
|
472
|
+
/>
|
|
473
|
+
</template>
|
|
474
|
+
|
|
475
|
+
<script lang="ts" setup>
|
|
476
|
+
import { MazTable } from 'maz-ui/components'
|
|
477
|
+
|
|
478
|
+
// 10 000 rows - only the visible window is rendered to the DOM
|
|
479
|
+
const rows = Array.from({ length: 10_000 }, (_, i) => ({
|
|
480
|
+
id: i + 1,
|
|
481
|
+
name: `User ${i + 1}`,
|
|
482
|
+
email: `user${i + 1}@maz-ui.com`,
|
|
483
|
+
score: Math.round(Math.random() * 100),
|
|
484
|
+
}))
|
|
485
|
+
</script>
|
|
486
|
+
```
|
|
487
|
+
|
|
488
|
+
</template>
|
|
489
|
+
|
|
490
|
+
</ComponentDemo>
|
|
491
|
+
|
|
492
|
+
### Options
|
|
493
|
+
|
|
494
|
+
| Prop | Default | Description |
|
|
495
|
+
| --- | --- | --- |
|
|
496
|
+
| `virtualized` | `false` | Turns virtualization on. |
|
|
497
|
+
| `max-height` | - | **Required.** Bounds the scroll viewport (any CSS length, e.g. `'400px'`, `'70vh'`). Scrolling is enabled automatically and the header stays sticky. |
|
|
498
|
+
| `estimated-row-height` | `44` | Fixed row height (in px) used to place rows and size the spacers. Set it to your real row height; virtualized rows should be uniform (single line). |
|
|
499
|
+
| `overscan` | `10` | Rows rendered outside the viewport on each side. |
|
|
500
|
+
|
|
501
|
+
### Good to know
|
|
502
|
+
|
|
503
|
+
* **Set a `width` (or `minWidth`) on your headers.** Virtualization forces `table-layout: fixed` so columns stay aligned across the rendered window; without widths the browser distributes them equally.
|
|
504
|
+
* **Accessibility:** the table exposes `aria-rowcount` and each rendered row an `aria-rowindex`, so screen readers still announce "row X of N".
|
|
505
|
+
* **Ignored** (with a dev warning) when `animated-rows` is enabled or when you provide a custom default slot - those paths render every row.
|
|
506
|
+
* **Rendered client-side:** the virtualized body is empty during SSR and fills in on hydration.
|
|
507
|
+
|
|
434
508
|
## Loading
|
|
435
509
|
|
|
436
510
|
Enable the loading state with the prop `loading`
|
|
@@ -589,6 +663,13 @@ Available sizes: `'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'`
|
|
|
589
663
|
function shuffleRows() {
|
|
590
664
|
players.value = [...players.value].sort(() => Math.random() - 0.5)
|
|
591
665
|
}
|
|
666
|
+
|
|
667
|
+
const virtualizedRows = Array.from({ length: 10_000 }, (_, i) => ({
|
|
668
|
+
id: i + 1,
|
|
669
|
+
name: `User ${i + 1}`,
|
|
670
|
+
email: `user${i + 1}@maz-ui.com`,
|
|
671
|
+
score: Math.round(Math.random() * 100),
|
|
672
|
+
}))
|
|
592
673
|
</script>
|
|
593
674
|
|
|
594
675
|
## Types
|
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.47",
|
|
5
5
|
"description": "Maz-UI ModelContextProtocol Client",
|
|
6
6
|
"author": "Louis Mazel <me@loicmazuel.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -42,14 +42,14 @@
|
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@maz-ui/utils": "5.0.0-beta.46",
|
|
45
|
-
"@modelcontextprotocol/sdk": "^1.
|
|
46
|
-
"maz-ui": "5.0.0-beta.
|
|
45
|
+
"@modelcontextprotocol/sdk": "^1.32.0",
|
|
46
|
+
"maz-ui": "5.0.0-beta.47"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@maz-ui/eslint-config": "5.0.0-beta.
|
|
49
|
+
"@maz-ui/eslint-config": "5.0.0-beta.47",
|
|
50
50
|
"@maz-ui/node": "5.0.0-beta.44",
|
|
51
|
-
"@modelcontextprotocol/inspector": "^2.
|
|
52
|
-
"@swc/core": "1.16.
|
|
51
|
+
"@modelcontextprotocol/inspector": "^2.9.0",
|
|
52
|
+
"@swc/core": "1.16.13",
|
|
53
53
|
"prettier": "^3.9.9",
|
|
54
54
|
"ts-node-maintained": "^10.9.5",
|
|
55
55
|
"tsx": "^4.23.15",
|