@maz-ui/mcp 5.0.0-beta.19 → 5.0.0-beta.24
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/README.md +1 -1
- package/dist/mcp.mjs +1 -1
- package/docs/generated-docs/maz-avatar.doc.md +25 -25
- package/docs/generated-docs/maz-btn.doc.md +1 -1
- package/docs/generated-docs/maz-input.doc.md +33 -33
- package/docs/generated-docs/maz-sidebar.doc.md +12 -12
- package/docs/generated-docs/maz-table.doc.md +1 -1
- package/docs/generated-docs/maz-textarea.doc.md +1 -1
- package/docs/src/components/maz-dialog.md +46 -0
- package/docs/src/components/maz-sidebar.md +45 -0
- package/docs/src/ecosystem/nuxt.md +27 -0
- package/docs/src/ecosystem/themes.md +23 -0
- package/docs/src/guide/global-defaults.md +101 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -193,7 +193,7 @@ The server exposes documentation through MCP resources with the following URI pa
|
|
|
193
193
|
- **`maz-ui://component/{ComponentName}`** - Individual component documentation
|
|
194
194
|
- Examples: `maz-ui://component/MazBtn`, `maz-ui://component/MazInput`
|
|
195
195
|
- **`maz-ui://guide/{guideName}`** - Setup and usage guides
|
|
196
|
-
- Examples: `maz-ui://guide/getting-started`, `maz-ui://guide/vue`, `maz-ui://
|
|
196
|
+
- Examples: `maz-ui://guide/getting-started`, `maz-ui://guide/vue`, `maz-ui://ecosystem/nuxt`
|
|
197
197
|
- **`maz-ui://composable/{composableName}`** - Vue composable documentation
|
|
198
198
|
- Examples: `maz-ui://composable/use-toast`, `maz-ui://composable/use-dialog`
|
|
199
199
|
- **`maz-ui://directive/{directiveName}`** - Vue directive documentation
|
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.24";
|
|
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
|
|
4
|
-
| ----------------------- | --------------------------------------------------------------- |
|
|
5
|
-
| **style** | The style of the component | `Native type`
|
|
6
|
-
| **class** | The class of the component | `Native type`
|
|
7
|
-
| **src** | The source of the image | `string \| null`
|
|
8
|
-
| **caption** | The caption of the avatar | `string \| null`
|
|
9
|
-
| **href** | The link of the avatar | `string`
|
|
10
|
-
| **to** | The link (router-link or nuxt-link) of the avatar | `string \| Record`
|
|
11
|
-
| **alt** | The alt of the image | `string`
|
|
12
|
-
| **target** | The target of the link | `string`
|
|
13
|
-
| **size** | The size of the avatar | `MazSizeUnit`
|
|
14
|
-
| **bordered** | Add a border to the avatar | `boolean`
|
|
15
|
-
| **clickable** | Make the avatar clickable | `boolean`
|
|
16
|
-
| **square** | Make the avatar square | `boolean`
|
|
17
|
-
| **no-elevation** | Remove the shadow | `boolean`
|
|
18
|
-
| **show-caption** | Show the caption | `boolean`
|
|
19
|
-
| **image-height-full** | Make the image height full | `boolean`
|
|
20
|
-
| **hide-loader** | Remove the loader | `boolean`
|
|
21
|
-
| **button-color** | The color of the clickable button | `MazColor`
|
|
22
|
-
| **hide-clickable-icon** | Remove the icon on hover when component is clickable | `boolean`
|
|
23
|
-
| **letter-count** | Number of letters to display in the round text | `number`
|
|
24
|
-
| **rounded-size** | Size of the rounded | `
|
|
25
|
-
| **fallback-src** | The fallback src to replace the src on loading error | `string`
|
|
26
|
-
| **loading** | The loading strategy of the image - lazy, eager or intersecting | `"lazy" \| "eager" \| "intersecting"`
|
|
27
|
-
| **color** | The color of the avatar | `MazColor`
|
|
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"` |
|
|
28
28
|
|
|
29
29
|
## Events
|
|
30
30
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
| **size** | Predifined sizes of the button | `MazSize` | No | `undefined` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs' \| 'mini'` |
|
|
7
7
|
| **color** | The color of the button | `MazColor \| "surface"` | No | `undefined` | `'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'destructive' \| 'transparent' \| 'contrast' \| 'accent' \| 'surface'` |
|
|
8
8
|
| **type** | The type of the button | `"submit" \| "reset" \| "button"` | No | `undefined` | `'submit' \| 'reset' \| 'button'` |
|
|
9
|
-
| **rounded-size** | Size of the rounded | `
|
|
9
|
+
| **rounded-size** | Size of the rounded | `MazRoundedSize` | No | `md` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` |
|
|
10
10
|
| **outlined** | If true, the button have the "border" style | `boolean` | No | `false` | - |
|
|
11
11
|
| **pastel** | If true, the button will have a pastel color | `boolean` | No | `false` | - |
|
|
12
12
|
| **block** | If true, the button will have a full width | `boolean` | No | `false` | - |
|
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type
|
|
4
|
-
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
5
|
-
| **style** | Inline styles to apply to the component root element | `HTMLAttributes['style']`
|
|
6
|
-
| **class** | CSS classes to apply to the component root element | `HTMLAttributes['class']`
|
|
7
|
-
| **model-value** | `v-model` <br/>The current value of the input field. This prop is used for two-way data binding with v-model<br/>**Example:** `<MazInput v-model="inputValue" />` | `T`
|
|
8
|
-
| **placeholder** | Text displayed when the input is empty to guide the user<br/>**Example:** `"Enter your email address"` | `string`
|
|
9
|
-
| **label** | Floating label that appears inside the input and moves up when focused or filled. Provides better UX than traditional placeholders<br/>**Example:** `"Email Address"` | `string`
|
|
10
|
-
| **top-label** | Static label displayed above the input field. Unlike the floating label, this remains fixed<br/>**Example:** `"User Information"` | `string`
|
|
11
|
-
| **assistive-text** | Helper text displayed below the input to provide additional context or validation feedback<br/>**Example:** `"Must contain at least 8 characters"` | `string`
|
|
12
|
-
| **color** | Theme color that affects the border and focus states of the input<br/>**Example:** `"primary"` | `MazColor`
|
|
13
|
-
| **type** | HTML input type attribute that determines the input behavior and validation<br/>**Example:** `"email"` | `InputHTMLAttributes['type']`
|
|
14
|
-
| **required** | Makes the input field mandatory for form submission<br/>**Example:** `true` | `boolean`
|
|
15
|
-
| **disabled** | Disables the input field, preventing user interaction and form submission<br/>**Example:** `false` | `boolean`
|
|
16
|
-
| **readonly** | Makes the input field read-only, allowing selection but preventing modification<br/>**Example:** `false` | `boolean`
|
|
17
|
-
| **id** | Unique identifier for the input element, used for form labels and accessibility<br/>**Example:** `"user-email"` | `string`
|
|
18
|
-
| **error** | Applies error styling (red border and text) to indicate validation failure<br/>**Example:** `true` | `boolean`
|
|
19
|
-
| **success** | Applies success styling (green border and text) to indicate successful validation<br/>**Example:** `true` | `boolean`
|
|
20
|
-
| **warning** | Applies warning styling (orange border and text) to indicate potential issues<br/>**Example:** `true` | `boolean`
|
|
21
|
-
| **hint** | Alternative text that replaces the label when provided. Useful for contextual hints<br/>**Example:** `"Optional field"` | `string`
|
|
22
|
-
| **input-classes** | Additional CSS classes to apply specifically to the input wrapper element<br/>**Example:** `"custom-input-wrapper"` | `string`
|
|
23
|
-
| **border** | Controls whether the input has a visible border. Set to false for borderless inputs<br/>**Example:** `true` | `boolean`
|
|
24
|
-
| **inputmode** | HTML inputmode attribute that provides hints for virtual keyboards on mobile devices<br/>**Example:** `"numeric"` | `InputHTMLAttributes['inputmode']`
|
|
25
|
-
| **size** | Controls the height and text size of the input component<br/>**Example:** `"md"` | `MazSize`
|
|
26
|
-
| **debounce** | Enables input debouncing to limit the frequency of value updates. When true, uses 500ms delay. When a number, uses that value as delay in milliseconds<br/>**Example:** `true` | `boolean \| number`
|
|
27
|
-
| **auto-focus** | Automatically focuses the input when the component mounts<br/>**Example:** `false` | `boolean`
|
|
28
|
-
| **border-active** | When true, shows the colored border immediately instead of only on focus<br/>**Example:** `false` | `boolean`
|
|
29
|
-
| **start-icon** | Icon displayed on the inline-start edge of the input (left in LTR, right in RTL). Accepts a bare value (Vue component, raw SVG string, URL or `data:` URI) or a full `MazIconProps` object for fine-grained control (size, title, svgAttributes, fallback, …). | `MazIconLike`
|
|
30
|
-
| **end-icon** | Icon displayed on the inline-end edge of the input (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object. | `MazIconLike`
|
|
31
|
-
| **rounded-size** | Controls the border radius of the input component<br/>**Example:** `"lg"` | `
|
|
32
|
-
| **block** | Makes the input expand to the full width of its container<br/>**Example:** `false` | `boolean`
|
|
33
|
-
| **name** | The name of the input field. Used for form submission and validation<br/>**Example:** `"email"` | `string`
|
|
34
|
-
| **autocomplete** | The autocomplete attribute for the input field. Used for form submission and validation<br/>**Example:** `"email"` | `string`
|
|
35
|
-
| **loading** | Loading state for the input field. Used to show a loading spinner | `boolean`
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | -------- | ----------- | ------------------------------------------------------------------------------------------ |
|
|
5
|
+
| **style** | Inline styles to apply to the component root element | `HTMLAttributes['style']` | No | `undefined` | - |
|
|
6
|
+
| **class** | CSS classes to apply to the component root element | `HTMLAttributes['class']` | No | `undefined` | - |
|
|
7
|
+
| **model-value** | `v-model` <br/>The current value of the input field. This prop is used for two-way data binding with v-model<br/>**Example:** `<MazInput v-model="inputValue" />` | `T` | No | `undefined` | - |
|
|
8
|
+
| **placeholder** | Text displayed when the input is empty to guide the user<br/>**Example:** `"Enter your email address"` | `string` | No | `undefined` | - |
|
|
9
|
+
| **label** | Floating label that appears inside the input and moves up when focused or filled. Provides better UX than traditional placeholders<br/>**Example:** `"Email Address"` | `string` | No | `undefined` | - |
|
|
10
|
+
| **top-label** | Static label displayed above the input field. Unlike the floating label, this remains fixed<br/>**Example:** `"User Information"` | `string` | No | `undefined` | - |
|
|
11
|
+
| **assistive-text** | Helper text displayed below the input to provide additional context or validation feedback<br/>**Example:** `"Must contain at least 8 characters"` | `string` | No | `undefined` | - |
|
|
12
|
+
| **color** | Theme color that affects the border and focus states of the input<br/>**Example:** `"primary"` | `MazColor` | No | `undefined` | `primary, secondary, accent, info, success, warning, destructive, contrast` |
|
|
13
|
+
| **type** | HTML input type attribute that determines the input behavior and validation<br/>**Example:** `"email"` | `InputHTMLAttributes['type']` | No | `undefined` | `text, password, email, number, tel, url, search, date, time, datetime-local, month, week` |
|
|
14
|
+
| **required** | Makes the input field mandatory for form submission<br/>**Example:** `true` | `boolean` | No | `undefined` | - |
|
|
15
|
+
| **disabled** | Disables the input field, preventing user interaction and form submission<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
|
|
16
|
+
| **readonly** | Makes the input field read-only, allowing selection but preventing modification<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
|
|
17
|
+
| **id** | Unique identifier for the input element, used for form labels and accessibility<br/>**Example:** `"user-email"` | `string` | No | `undefined` | - |
|
|
18
|
+
| **error** | Applies error styling (red border and text) to indicate validation failure<br/>**Example:** `true` | `boolean` | No | `undefined` | - |
|
|
19
|
+
| **success** | Applies success styling (green border and text) to indicate successful validation<br/>**Example:** `true` | `boolean` | No | `undefined` | - |
|
|
20
|
+
| **warning** | Applies warning styling (orange border and text) to indicate potential issues<br/>**Example:** `true` | `boolean` | No | `undefined` | - |
|
|
21
|
+
| **hint** | Alternative text that replaces the label when provided. Useful for contextual hints<br/>**Example:** `"Optional field"` | `string` | No | `undefined` | - |
|
|
22
|
+
| **input-classes** | Additional CSS classes to apply specifically to the input wrapper element<br/>**Example:** `"custom-input-wrapper"` | `string` | No | `undefined` | - |
|
|
23
|
+
| **border** | Controls whether the input has a visible border. Set to false for borderless inputs<br/>**Example:** `true` | `boolean` | No | `undefined` | - |
|
|
24
|
+
| **inputmode** | HTML inputmode attribute that provides hints for virtual keyboards on mobile devices<br/>**Example:** `"numeric"` | `InputHTMLAttributes['inputmode']` | No | `undefined` | `text, numeric, decimal, tel, search, email, url` |
|
|
25
|
+
| **size** | Controls the height and text size of the input component<br/>**Example:** `"md"` | `MazSize` | No | `undefined` | `xs, sm, md, lg, xl, mini` |
|
|
26
|
+
| **debounce** | Enables input debouncing to limit the frequency of value updates. When true, uses 500ms delay. When a number, uses that value as delay in milliseconds<br/>**Example:** `true` | `boolean \| number` | No | `undefined` | - |
|
|
27
|
+
| **auto-focus** | Automatically focuses the input when the component mounts<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
|
|
28
|
+
| **border-active** | When true, shows the colored border immediately instead of only on focus<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
|
|
29
|
+
| **start-icon** | Icon displayed on the inline-start edge of the input (left in LTR, right in RTL). Accepts a bare value (Vue component, raw SVG string, URL or `data:` URI) or a full `MazIconProps` object for fine-grained control (size, title, svgAttributes, fallback, …). | `MazIconLike` | No | `undefined` | - |
|
|
30
|
+
| **end-icon** | Icon displayed on the inline-end edge of the input (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object. | `MazIconLike` | No | `undefined` | - |
|
|
31
|
+
| **rounded-size** | Controls the border radius of the input component<br/>**Example:** `"lg"` | `MazRoundedSize` | No | `md` | `none, sm, md, lg, xl, full` |
|
|
32
|
+
| **block** | Makes the input expand to the full width of its container<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
|
|
33
|
+
| **name** | The name of the input field. Used for form submission and validation<br/>**Example:** `"email"` | `string` | No | `undefined` | - |
|
|
34
|
+
| **autocomplete** | The autocomplete attribute for the input field. Used for form submission and validation<br/>**Example:** `"email"` | `string` | No | `undefined` | - |
|
|
35
|
+
| **loading** | Loading state for the input field. Used to show a loading spinner | `boolean` | No | `false` | - |
|
|
36
36
|
|
|
37
37
|
## Events
|
|
38
38
|
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type
|
|
4
|
-
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
5
|
-
| **id** | Unique identifier for the sidebar (auto-generated if not provided) | `string`
|
|
6
|
-
| **open** | Whether the sidebar is open | `boolean`
|
|
7
|
-
| **side** | Side of the sidebar | `"start" \| "end"`
|
|
8
|
-
| **collapsible** | How the sidebar collapses - offcanvas: completely hidden - icon: only icons visible - none: always fully visible
|
|
9
|
-
| **mode** | How the sidebar affects layout - push: sidebar is in document flow - overlay: sidebar floats over content with a backdrop | `"push" \| "overlay"`
|
|
10
|
-
| **width** | Width of the expanded sidebar | `string`
|
|
11
|
-
| **icon-width** | Width of the collapsed sidebar in icon mode | `string`
|
|
12
|
-
| **tooltip-mode** | When descendant `MazSidebarMenuButton` components should display their tooltip. - `always`: tooltip shows on hover regardless of the sidebar state - `closed`: tooltip only shows on hover when the sidebar is collapsed Individual buttons can override this via their own `tooltipMode` prop. | `MazSidebarTooltipMode`
|
|
13
|
-
| **persist** | Persist the open/collapsed state in a cookie so it survives reloads. Restoration happens on client mount (SSR-safe). For zero-flash SSR, read the cookie server-side and forward it via `v-model:open`. | `boolean`
|
|
14
|
-
| **persist-key** | Cookie key used when `persist` is enabled. Set a unique key per sidebar instance if you mount several sidebars on the same site. | `string`
|
|
3
|
+
| Name | Description | Type | Required | Default |
|
|
4
|
+
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- | ------------------ |
|
|
5
|
+
| **id** | Unique identifier for the sidebar (auto-generated if not provided) | `string` | No | `undefined` |
|
|
6
|
+
| **open** | Whether the sidebar is open | `boolean` | No | `undefined` |
|
|
7
|
+
| **side** | Side of the sidebar | `"start" \| "end"` | No | `undefined` |
|
|
8
|
+
| **collapsible** | How the sidebar collapses - offcanvas: completely hidden - icon: only icons visible - hover: only icons visible by default, expands on mouse hover or keyboard focus (transient visual state — does not update `v-model:open` nor the persistence cookie) - none: always fully visible | `"offcanvas" \| "icon" \| "hover" \| "none"` | No | `undefined` |
|
|
9
|
+
| **mode** | How the sidebar affects layout - push: sidebar is in document flow - overlay: sidebar floats over content with a backdrop | `"push" \| "overlay"` | No | `undefined` |
|
|
10
|
+
| **width** | Width of the expanded sidebar | `string` | No | `undefined` |
|
|
11
|
+
| **icon-width** | Width of the collapsed sidebar in icon mode | `string` | No | `undefined` |
|
|
12
|
+
| **tooltip-mode** | When descendant `MazSidebarMenuButton` components should display their tooltip. - `always`: tooltip shows on hover regardless of the sidebar state - `closed`: tooltip only shows on hover when the sidebar is collapsed Individual buttons can override this via their own `tooltipMode` prop. | `MazSidebarTooltipMode` | No | `closed` |
|
|
13
|
+
| **persist** | Persist the open/collapsed state in a cookie so it survives reloads. Restoration happens on client mount (SSR-safe). For zero-flash SSR, read the cookie server-side and forward it via `v-model:open`. | `boolean` | No | `true` |
|
|
14
|
+
| **persist-key** | Cookie key used when `persist` is enabled. Set a unique key per sidebar instance if you mount several sidebars on the same site. | `string` | No | `maz-sidebar-open` |
|
|
15
15
|
|
|
16
16
|
## Events
|
|
17
17
|
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
| **table-layout** | Table layout | `string` | No | `undefined` | `auto, fixed` |
|
|
36
36
|
| **color** | Color of the component | `MazColor` | No | `primary` | - |
|
|
37
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 | `
|
|
38
|
+
| **rounded-size** | Size radius of the component's border | `MazRoundedSize` | No | `md` | `none, sm, md, lg, xl, full` |
|
|
39
39
|
| **scrollable** | Enable scrollable on table | `boolean` | No | `false` | - |
|
|
40
40
|
|
|
41
41
|
## Events
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
| **warning** | If the textarea has a warning | `boolean` | No | `undefined` | - |
|
|
18
18
|
| **hint** | The hint of the textarea | `string` | No | `undefined` | - |
|
|
19
19
|
| **color** | The color of the textarea | `MazColor` | No | `undefined` | - |
|
|
20
|
-
| **rounded-size** | Size radius of the component's border | `
|
|
20
|
+
| **rounded-size** | Size radius of the component's border | `MazRoundedSize` | No | `md` | - |
|
|
21
21
|
| **padding** | If the textarea has a padding | `boolean` | No | `true` | - |
|
|
22
22
|
| **transparent** | If the textarea has a transparent background | `boolean` | No | `false` | - |
|
|
23
23
|
| **border** | If the textarea has no border | `boolean` | No | `false` | - |
|
|
@@ -103,10 +103,56 @@ For long content, you can enable scrolling in content part (Header and footer sl
|
|
|
103
103
|
</template>
|
|
104
104
|
</ComponentDemo>
|
|
105
105
|
|
|
106
|
+
## Width
|
|
107
|
+
|
|
108
|
+
On tablet and up, the dialog is sized by two CSS variables coming from the active theme preset (`components.dialog`):
|
|
109
|
+
|
|
110
|
+
- `--maz-dialog-max-width` (default `38rem`)
|
|
111
|
+
- `--maz-dialog-min-width` (default `32rem`)
|
|
112
|
+
|
|
113
|
+
You can set these defaults globally per preset — see [the theme `components.dialog` documentation](./../ecosystem/themes.md#dialog-sizing). To change the width of a single dialog, pass the `max-width` / `min-width` props — they always override the preset:
|
|
114
|
+
|
|
115
|
+
<ComponentDemo>
|
|
116
|
+
<MazBtn @click="widthOpened = true">Open Wide Dialog</MazBtn>
|
|
117
|
+
|
|
118
|
+
<MazDialog v-model="widthOpened" title="Custom width" max-width="50rem" min-width="40rem">
|
|
119
|
+
<p>
|
|
120
|
+
This dialog overrides the preset width through props.
|
|
121
|
+
</p>
|
|
122
|
+
<template #footer="{ close }">
|
|
123
|
+
<MazBtn @click="close">
|
|
124
|
+
Confirm
|
|
125
|
+
</MazBtn>
|
|
126
|
+
</template>
|
|
127
|
+
</MazDialog>
|
|
128
|
+
|
|
129
|
+
<template #code>
|
|
130
|
+
|
|
131
|
+
```vue
|
|
132
|
+
<template>
|
|
133
|
+
<MazDialog
|
|
134
|
+
v-model="isOpen"
|
|
135
|
+
title="Custom width"
|
|
136
|
+
max-width="50rem"
|
|
137
|
+
min-width="40rem"
|
|
138
|
+
>
|
|
139
|
+
<p>This dialog overrides the preset width through props.</p>
|
|
140
|
+
</MazDialog>
|
|
141
|
+
</template>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
</template>
|
|
145
|
+
</ComponentDemo>
|
|
146
|
+
|
|
147
|
+
::: tip
|
|
148
|
+
The default widths are expressed in `rem`, so they scale with the preset's `base-font-size`. Presets with a larger base size (e.g. `ocean` at `16px`) ship rem values adjusted to keep the rendered pixel width consistent across presets.
|
|
149
|
+
:::
|
|
150
|
+
|
|
106
151
|
<!--@include: ./../../.vitepress/generated-docs/maz-dialog.doc.md-->
|
|
107
152
|
|
|
108
153
|
<script setup>
|
|
109
154
|
import { ref } from 'vue'
|
|
110
155
|
const isOpen = ref(false)
|
|
111
156
|
const scollableOpened = ref(false)
|
|
157
|
+
const widthOpened = ref(false)
|
|
112
158
|
</script>
|
|
@@ -299,6 +299,51 @@ const isOpen = ref(true)
|
|
|
299
299
|
</template>
|
|
300
300
|
</ComponentDemo>
|
|
301
301
|
|
|
302
|
+
## Hover mode
|
|
303
|
+
|
|
304
|
+
`collapsible="hover"` displays the sidebar in icon-only mode and **automatically expands it when the mouse enters the sidebar (or any descendant) and collapses it when the mouse leaves**. Keyboard focus also expands the sidebar, so users navigating with `Tab` see the full labels.
|
|
305
|
+
|
|
306
|
+
::: tip
|
|
307
|
+
This is a **purely visual** state. The `v-model:open` value is not updated and the persistence cookie is not written when the sidebar expands or collapses through hover. Use this mode when you want the rail-style sidebar of `collapsible="icon"` without exposing a toggle.
|
|
308
|
+
:::
|
|
309
|
+
|
|
310
|
+
<ComponentDemo>
|
|
311
|
+
<div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[22rem] maz:flex">
|
|
312
|
+
<MazSidebar collapsible="hover" class="maz:h-full">
|
|
313
|
+
<MazSidebarContent>
|
|
314
|
+
<MazSidebarMenu>
|
|
315
|
+
<MazSidebarMenuItem>
|
|
316
|
+
<MazSidebarMenuButton :icon="MazHome" label="Dashboard" :active="true" />
|
|
317
|
+
</MazSidebarMenuItem>
|
|
318
|
+
<MazSidebarMenuItem>
|
|
319
|
+
<MazSidebarMenuButton :icon="MazCog6Tooth" label="Settings" />
|
|
320
|
+
</MazSidebarMenuItem>
|
|
321
|
+
</MazSidebarMenu>
|
|
322
|
+
</MazSidebarContent>
|
|
323
|
+
</MazSidebar>
|
|
324
|
+
<main class="maz:flex-1 maz:p-4">Move your cursor over the sidebar to expand it.</main>
|
|
325
|
+
</div>
|
|
326
|
+
|
|
327
|
+
<template #code>
|
|
328
|
+
|
|
329
|
+
```html
|
|
330
|
+
<MazSidebar collapsible="hover">
|
|
331
|
+
<MazSidebarContent>
|
|
332
|
+
<MazSidebarMenu>
|
|
333
|
+
<MazSidebarMenuItem>
|
|
334
|
+
<MazSidebarMenuButton :icon="MazHome" label="Dashboard" />
|
|
335
|
+
</MazSidebarMenuItem>
|
|
336
|
+
<MazSidebarMenuItem>
|
|
337
|
+
<MazSidebarMenuButton :icon="MazCog6Tooth" label="Settings" />
|
|
338
|
+
</MazSidebarMenuItem>
|
|
339
|
+
</MazSidebarMenu>
|
|
340
|
+
</MazSidebarContent>
|
|
341
|
+
</MazSidebar>
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
</template>
|
|
345
|
+
</ComponentDemo>
|
|
346
|
+
|
|
302
347
|
## Offcanvas mode
|
|
303
348
|
|
|
304
349
|
<ComponentDemo>
|
|
@@ -152,6 +152,13 @@ export default defineNuxtConfig({
|
|
|
152
152
|
autoImport: true, // All components globally available
|
|
153
153
|
},
|
|
154
154
|
|
|
155
|
+
// Global component defaults (priority: instance prop > defaults[Component] > defaults.global > library default)
|
|
156
|
+
defaults: {
|
|
157
|
+
global: { roundedSize: 'lg' }, // cross-cutting (roundedSize, size)
|
|
158
|
+
MazBtn: { roundedSize: 'full' }, // per-component, wins over global
|
|
159
|
+
MazCard: { bordered: false, elevation: true },
|
|
160
|
+
},
|
|
161
|
+
|
|
155
162
|
// Plugins (not enabled by default)
|
|
156
163
|
plugins: {
|
|
157
164
|
aos: true,
|
|
@@ -262,6 +269,26 @@ const theme = {
|
|
|
262
269
|
}
|
|
263
270
|
```
|
|
264
271
|
|
|
272
|
+
### Global Component Defaults
|
|
273
|
+
|
|
274
|
+
Set default prop values once for every component. Resolution priority, per prop: instance prop > `defaults[Component]` > `defaults.global` > library default. A global default never overrides a prop set on the instance.
|
|
275
|
+
|
|
276
|
+
```ts
|
|
277
|
+
const defaults = {
|
|
278
|
+
// Cross-cutting tokens applied to every component that exposes them
|
|
279
|
+
global: {
|
|
280
|
+
roundedSize: 'lg', // 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
|
|
281
|
+
size: 'sm', // 'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
|
282
|
+
},
|
|
283
|
+
// Per-component defaults, strongly typed as Partial<ComponentNameProps>, win over `global`
|
|
284
|
+
MazBtn: { roundedSize: 'full' },
|
|
285
|
+
MazCard: { bordered: false, elevation: true },
|
|
286
|
+
MazContainer: { bordered: false },
|
|
287
|
+
}
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
See the [Global component defaults guide](/guide/global-defaults) for the full list of globalizable props.
|
|
291
|
+
|
|
265
292
|
## Theme Strategies Explained
|
|
266
293
|
|
|
267
294
|
### Runtime (Recommended)
|
|
@@ -593,6 +593,27 @@ const surfaceTheme = definePreset({
|
|
|
593
593
|
|
|
594
594
|
Components consume these via `maz:bg-container` / `maz:bg-input` Tailwind utilities, so a single override propagates everywhere — no per-component class hunt.
|
|
595
595
|
|
|
596
|
+
### Dialog sizing
|
|
597
|
+
|
|
598
|
+
`components.dialog` controls the width of [`MazDialog`](./../components/maz-dialog.md) on tablet and up. The two keys are emitted as `--maz-dialog-max-width` / `--maz-dialog-min-width` and consumed by the component through `var(--maz-dialog-max-width, 38rem)` / `var(--maz-dialog-min-width, 32rem)`:
|
|
599
|
+
|
|
600
|
+
```typescript
|
|
601
|
+
const wideDialogTheme = definePreset({
|
|
602
|
+
base: 'maz-ui',
|
|
603
|
+
overrides: {
|
|
604
|
+
name: 'wide-dialogs',
|
|
605
|
+
components: {
|
|
606
|
+
dialog: {
|
|
607
|
+
'max-width': '48rem',
|
|
608
|
+
'min-width': '36rem',
|
|
609
|
+
},
|
|
610
|
+
},
|
|
611
|
+
},
|
|
612
|
+
})
|
|
613
|
+
```
|
|
614
|
+
|
|
615
|
+
Both values are in `rem`, so they scale with the preset's `base-font-size`. Bundled presets anchored on `14px` use `38rem` / `32rem`; `ocean` (`16px`) ships scaled rem values (`33.25rem` / `28rem`) to keep the same rendered pixel width. The `max-width` / `min-width` props on `MazDialog` still override the preset per instance.
|
|
616
|
+
|
|
596
617
|
## useTheme Composable API
|
|
597
618
|
|
|
598
619
|
```typescript
|
|
@@ -957,6 +978,8 @@ Per-component knobs under `components.<key>`. All optional — omit to fall back
|
|
|
957
978
|
| `btn.font-weight` | `--maz-btn-font-weight` | Font-weight on `.m-btn`. Defaults to `'500'`. |
|
|
958
979
|
| `container.bg.light` / `.dark` | `--maz-container-bg` (per mode) | Background of `Card`, `Container`, `Dialog`, `Popover`, `Drawer`, … Defaults to `var(--maz-surface)`. Bridged to `--color-container`. |
|
|
959
980
|
| `input.bg.light` / `.dark` | `--maz-input-bg` (per mode) | Background of `Input`, `Textarea`, `Select`, `Checkbox`, … Defaults to `var(--maz-surface)` light, `var(--maz-surface-400)` dark. Bridged to `--color-input`. |
|
|
981
|
+
| `dialog.max-width` | `--maz-dialog-max-width` | Max-width of `MazDialog` on tablet and up. Defaults to `38rem` (`33.25rem` on `ocean`). Overridable via the `max-width` prop. |
|
|
982
|
+
| `dialog.min-width` | `--maz-dialog-min-width` | Min-width of `MazDialog` on tablet and up. Defaults to `32rem` (`28rem` on `ocean`). Overridable via the `min-width` prop. |
|
|
960
983
|
|
|
961
984
|
### Sample output
|
|
962
985
|
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Global component defaults
|
|
3
|
+
description: Set default prop values once for every Maz-UI component through the MazUi plugin or the Nuxt module
|
|
4
|
+
head:
|
|
5
|
+
- - meta
|
|
6
|
+
- name: keywords
|
|
7
|
+
content: maz-ui defaults, global props, default props, rounded size, component configuration, vue, nuxt
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# {{ $frontmatter.title }}
|
|
11
|
+
|
|
12
|
+
{{ $frontmatter.description }}
|
|
13
|
+
|
|
14
|
+
Instead of repeating the same prop on every instance (`<MazBtn rounded-size="lg" />` everywhere), you can set a default once and let every component pick it up.
|
|
15
|
+
|
|
16
|
+
## Priority
|
|
17
|
+
|
|
18
|
+
A resolved prop always follows this order, from highest to lowest priority:
|
|
19
|
+
|
|
20
|
+
1. The prop set on the component instance
|
|
21
|
+
2. `defaults.<ComponentName>` (per-component default)
|
|
22
|
+
3. `defaults.global` (cross-cutting default)
|
|
23
|
+
4. The library's built-in default
|
|
24
|
+
|
|
25
|
+
A global default **never** overrides a prop set on the instance. Without any `defaults` config, every component keeps its built-in default, so this feature is fully opt-in and backward compatible.
|
|
26
|
+
|
|
27
|
+
## Vue
|
|
28
|
+
|
|
29
|
+
Pass `defaults` to the `MazUi` plugin:
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
import { MazUi } from 'maz-ui/plugins/maz-ui'
|
|
33
|
+
import { mazUi as mazUiPreset } from '@maz-ui/themes/presets/mazUi'
|
|
34
|
+
import 'maz-ui/style.css'
|
|
35
|
+
|
|
36
|
+
app.use(MazUi, {
|
|
37
|
+
theme: { preset: mazUiPreset },
|
|
38
|
+
defaults: {
|
|
39
|
+
global: { roundedSize: 'lg' },
|
|
40
|
+
MazBtn: { roundedSize: 'full' }, // wins over global for MazBtn
|
|
41
|
+
MazCard: { bordered: false, elevation: true },
|
|
42
|
+
MazContainer: { bordered: false },
|
|
43
|
+
},
|
|
44
|
+
})
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Nuxt
|
|
48
|
+
|
|
49
|
+
Set it in `nuxt.config` under the `mazUi` key:
|
|
50
|
+
|
|
51
|
+
```ts
|
|
52
|
+
export default defineNuxtConfig({
|
|
53
|
+
modules: ['@maz-ui/nuxt'],
|
|
54
|
+
mazUi: {
|
|
55
|
+
defaults: {
|
|
56
|
+
global: { roundedSize: 'lg' },
|
|
57
|
+
MazBtn: { roundedSize: 'full' },
|
|
58
|
+
MazCard: { bordered: false, elevation: true },
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
})
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## `global` vs per-component
|
|
65
|
+
|
|
66
|
+
- `defaults.global` holds **cross-cutting** props shared by many components: `roundedSize` and `size`. Set them once and every component that exposes them picks the value up.
|
|
67
|
+
- `defaults.<ComponentName>` holds **per-component** props (including booleans such as `bordered`, `elevation`, `padding`). A per-component entry always wins over `global`.
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
defaults: {
|
|
71
|
+
global: { roundedSize: 'lg', size: 'sm' },
|
|
72
|
+
MazBtn: { roundedSize: 'full' }, // MazBtn is 'full', everything else 'lg'
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Type safety
|
|
77
|
+
|
|
78
|
+
`defaults` is fully typed. Each component entry is typed as `Partial<ComponentNameProps>`, so you get autocompletion and a TypeScript error on an unknown or mistyped prop:
|
|
79
|
+
|
|
80
|
+
```ts
|
|
81
|
+
defaults: {
|
|
82
|
+
MazBtn: { roundedSiz: 'lg' }, // ❌ TS error: 'roundedSiz' does not exist
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Globalizable props
|
|
87
|
+
|
|
88
|
+
| Prop | Type | Components |
|
|
89
|
+
| --- | --- | --- |
|
|
90
|
+
| `roundedSize` | `MazRoundedSize` (`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`) | `MazBtn`, `MazBtnGroup`, `MazContainer`, `MazInput`, `MazTextarea`, `MazTable`, `MazBadge`, `MazAlert`, `MazAvatar`, `MazSkeleton`, `MazTimeline` |
|
|
91
|
+
| `size` | `MazSize` (`'mini' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`) | `MazBtn`, `MazBtnGroup`, `MazBadge`, `MazInput`, `MazSelect`, `MazSelectCountry`, `MazInputNumber`, `MazInputTags`, `MazInputPhoneNumber`, `MazCheckbox`, `MazRadio`, `MazRadioButtons`, `MazDropdown`, `MazPagination`, `MazTable`, `MazTimeline` |
|
|
92
|
+
| `bordered`, `elevation`, `padding`, `transparent`, `overflowHidden` | `boolean` | `MazContainer` |
|
|
93
|
+
| `bordered`, `elevation`, `padding`, `radius`, `scale`, `overflowHidden` | `boolean` | `MazCard` |
|
|
94
|
+
|
|
95
|
+
::: tip Note
|
|
96
|
+
Components whose `size` is a free CSS length (`MazSizeUnit`, e.g. `MazSpinner`, `MazAvatar`, `MazDrawer`, `MazSlider`, `MazCircularProgressBar`, `MazFullscreenLoader`) do not take the global `size` token - the value would not be valid for them. `MazAlert` and `MazTimeline` keep their own wider `roundedSize` scale; a `defaults.global.roundedSize` value still applies to them, and their extra steps (`2xl`, `3xl`) are reachable through their per-component entry.
|
|
97
|
+
:::
|
|
98
|
+
|
|
99
|
+
## Relation to the theme system
|
|
100
|
+
|
|
101
|
+
This is **not** a duplicate of [`@maz-ui/themes`](/ecosystem/themes). The theme system controls *what a token looks like* (the CSS value of `rounded-md`, `shadow-elevation`, colors…). Global defaults control *which prop value a component selects by default* (whether `MazBtn` defaults to `roundedSize="lg"`). Both work together: the theme defines what `lg` renders as, the defaults decide which step a component uses.
|
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.24",
|
|
5
5
|
"description": "Maz-UI ModelContextProtocol Client",
|
|
6
6
|
"author": "Louis Mazel <me@loicmazuel.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
45
|
-
"@maz-ui/
|
|
46
|
-
"@maz-ui/
|
|
45
|
+
"@maz-ui/node": "5.0.0-beta.24",
|
|
46
|
+
"@maz-ui/utils": "5.0.0-beta.24"
|
|
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.
|
|
56
|
-
"maz-ui": "5.0.0-beta.
|
|
55
|
+
"@maz-ui/eslint-config": "5.0.0-beta.24",
|
|
56
|
+
"maz-ui": "5.0.0-beta.24"
|
|
57
57
|
},
|
|
58
58
|
"lint-staged": {
|
|
59
59
|
"*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
|