@maz-ui/mcp 5.0.0-beta.11 → 5.0.0-beta.17
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/generated-docs/maz-checkbox.doc.md +16 -17
- package/docs/generated-docs/maz-date-picker.doc.md +41 -41
- package/docs/generated-docs/maz-drawer.doc.md +7 -8
- package/docs/generated-docs/maz-expand-animation.doc.md +4 -4
- package/docs/generated-docs/maz-input-code.doc.md +16 -16
- package/docs/generated-docs/maz-input-price.doc.md +14 -14
- package/docs/generated-docs/maz-input-tags.doc.md +16 -16
- package/docs/generated-docs/maz-input.doc.md +14 -14
- package/docs/generated-docs/maz-lazy-img.doc.md +14 -14
- package/docs/generated-docs/maz-loading-bar.doc.md +4 -4
- package/docs/generated-docs/maz-pull-to-refresh.doc.md +10 -10
- package/docs/generated-docs/maz-radio-buttons.doc.md +17 -17
- package/docs/generated-docs/maz-radio.doc.md +16 -16
- package/docs/generated-docs/maz-reading-progress-bar.doc.md +4 -4
- package/docs/generated-docs/maz-sidebar-menu-button.doc.md +12 -11
- package/docs/generated-docs/maz-sidebar-menu-sub.doc.md +5 -5
- package/docs/generated-docs/maz-sidebar-trigger.doc.md +0 -6
- package/docs/generated-docs/maz-sidebar.doc.md +12 -9
- package/docs/generated-docs/maz-switch.doc.md +14 -14
- package/docs/generated-docs/maz-table.doc.md +5 -5
- package/docs/generated-docs/maz-textarea.doc.md +25 -25
- package/docs/src/components/maz-sidebar.md +100 -47
- package/docs/src/directives/tooltip.md +23 -0
- package/package.json +3 -3
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required |
|
|
4
|
-
| --------------- | -------------------------------------------- | ------------- | -------- |
|
|
5
|
-
| **style** | Style attribut of the component root element | `Native type` | No |
|
|
6
|
-
| **class** | Class attribut of the component root element | `Native type` | No |
|
|
7
|
-
| **id** | The id of the radio | `string` | No |
|
|
8
|
-
| **model-value** | `v-model` <br/> | `T` | No |
|
|
9
|
-
| **value** | The value of the radio | `T` | Yes |
|
|
10
|
-
| **name** | The name of the radio | `string` | Yes |
|
|
11
|
-
| **label** | The label of the radio | `string` | No |
|
|
12
|
-
| **color** | The color of the radio | `MazColor` | No |
|
|
13
|
-
| **size** | The size of the radio | `MazSize` | No |
|
|
14
|
-
| **disabled** | The disabled state of the radio | `boolean` | No |
|
|
15
|
-
| **error** | Whether there is an error with the input. | `boolean` | No |
|
|
16
|
-
| **success** | Whether the input is successful. | `boolean` | No |
|
|
17
|
-
| **warning** | Whether there is a warning with the input. | `boolean` | No |
|
|
18
|
-
| **hint** | The hint text to display below the input. | `string` | No |
|
|
3
|
+
| Name | Description | Type | Required |
|
|
4
|
+
| --------------- | -------------------------------------------- | ------------- | -------- |
|
|
5
|
+
| **style** | Style attribut of the component root element | `Native type` | No |
|
|
6
|
+
| **class** | Class attribut of the component root element | `Native type` | No |
|
|
7
|
+
| **id** | The id of the radio | `string` | No |
|
|
8
|
+
| **model-value** | `v-model` <br/> | `T` | No |
|
|
9
|
+
| **value** | The value of the radio | `T` | Yes |
|
|
10
|
+
| **name** | The name of the radio | `string` | Yes |
|
|
11
|
+
| **label** | The label of the radio | `string` | No |
|
|
12
|
+
| **color** | The color of the radio | `MazColor` | No |
|
|
13
|
+
| **size** | The size of the radio | `MazSize` | No |
|
|
14
|
+
| **disabled** | The disabled state of the radio | `boolean` | No |
|
|
15
|
+
| **error** | Whether there is an error with the input. | `boolean` | No |
|
|
16
|
+
| **success** | Whether the input is successful. | `boolean` | No |
|
|
17
|
+
| **warning** | Whether there is a warning with the input. | `boolean` | No |
|
|
18
|
+
| **hint** | The hint text to display below the input. | `string` | No |
|
|
19
19
|
|
|
20
20
|
## Events
|
|
21
21
|
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
| Name | Description | Type | Required | Default |
|
|
4
4
|
| --------------------- | ----------------------------------------------------------------------------------------- | ------------- | -------- | ----------- |
|
|
5
|
-
| **height** | Height of the progress bar | `string` | No | `
|
|
6
|
-
| **color** | Color of the progress bar | `MazColor` | No | `
|
|
7
|
-
| **teleport-selector** | Selector of the element to teleport the progress bar | `string` | No | `
|
|
8
|
-
| **content-selector** | Selector of the element to get the height | `string` | No | `
|
|
5
|
+
| **height** | Height of the progress bar | `string` | No | `4px` |
|
|
6
|
+
| **color** | Color of the progress bar | `MazColor` | No | `primary` |
|
|
7
|
+
| **teleport-selector** | Selector of the element to teleport the progress bar | `string` | No | `body` |
|
|
8
|
+
| **content-selector** | Selector of the element to get the height | `string` | No | `body` |
|
|
9
9
|
| **offset** | Offset of the progress bar | `number` | No | `0` |
|
|
10
10
|
| **bar-class** | Class of the progress bar | `Native type` | No | `undefined` |
|
|
11
11
|
| **distance** | Instead of using the height of the content with a selector, you can set a scroll distance | `number` | No | `undefined` |
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name
|
|
4
|
-
|
|
|
5
|
-
| **to**
|
|
6
|
-
| **href**
|
|
7
|
-
| **icon**
|
|
8
|
-
| **label**
|
|
9
|
-
| **badge**
|
|
10
|
-
| **tooltip**
|
|
11
|
-
| **
|
|
12
|
-
| **
|
|
13
|
-
| **
|
|
3
|
+
| Name | Description | Type | Required |
|
|
4
|
+
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- |
|
|
5
|
+
| **to** | Route for router-link navigation | `string \| Record` | No |
|
|
6
|
+
| **href** | URL for anchor navigation | `string` | No |
|
|
7
|
+
| **icon** | Icon to display before the label. Accepts a bare icon value (Vue component, raw SVG string, URL) or a full `MazIconProps` object for fine-grained control (size, title, fallback, …). | `MazIconLike` | No |
|
|
8
|
+
| **label** | Label text | `string` | No |
|
|
9
|
+
| **badge** | Badge content. Pass a `string`/`number` for a simple primary badge, or a full `MazBadgeProps` object (with optional `text`) to customise color, size, outlined, … | `MazSidebarMenuButtonBadge` | No |
|
|
10
|
+
| **tooltip** | Tooltip text. When provided, shows a tooltip on hover via the `v-tooltip` directive. | `string` | No |
|
|
11
|
+
| **tooltip-mode** | Controls when the tooltip should be displayed. - `always`: tooltip shows on hover regardless of the sidebar state - `closed`: tooltip only shows on hover when the sidebar is collapsed Overrides the parent `MazSidebar`'s `tooltipMode`. Falls back to the sidebar value (which defaults to `always`) when not provided. | `MazSidebarTooltipMode` | No |
|
|
12
|
+
| **active** | Whether the item is active (highlights with `aria-current="page"`) | `boolean` | No |
|
|
13
|
+
| **disabled** | Whether the item is disabled | `boolean` | No |
|
|
14
|
+
| **size** | Size of the button | `"sm" \| "md" \| "lg"` | No |
|
|
14
15
|
|
|
15
16
|
## Events
|
|
16
17
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required |
|
|
4
|
-
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |
|
|
5
|
-
| **label** | Label for the sub-menu trigger button | `string` | No |
|
|
6
|
-
| **icon** | Icon to display before the label. Accepts a bare icon value (Vue component, raw SVG string, URL) or a full `MazIconProps` object for fine-grained control. | `MazIconLike` | No |
|
|
7
|
-
| **default-open** | Whether the sub-menu is open by default | `boolean` | No |
|
|
3
|
+
| Name | Description | Type | Required |
|
|
4
|
+
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |
|
|
5
|
+
| **label** | Label for the sub-menu trigger button | `string` | No |
|
|
6
|
+
| **icon** | Icon to display before the label. Accepts a bare icon value (Vue component, raw SVG string, URL) or a full `MazIconProps` object for fine-grained control. | `MazIconLike` | No |
|
|
7
|
+
| **default-open** | Whether the sub-menu is open by default | `boolean` | No |
|
|
8
8
|
|
|
9
9
|
## Slots
|
|
10
10
|
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name
|
|
4
|
-
|
|
|
5
|
-
| **id**
|
|
6
|
-
| **open**
|
|
7
|
-
| **side**
|
|
8
|
-
| **collapsible**
|
|
9
|
-
| **mode**
|
|
10
|
-
| **width**
|
|
11
|
-
| **icon-width**
|
|
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 - none: always fully visible | `"offcanvas" \| "icon" \| "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` |
|
|
12
15
|
|
|
13
16
|
## Events
|
|
14
17
|
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required |
|
|
4
|
-
| --------------- | -------------------------------------------- | ------------- | -------- |
|
|
5
|
-
| **style** | Style attribut of the component root element | `Native type` | No |
|
|
6
|
-
| **class** | Class attribut of the component root element | `Native type` | No |
|
|
7
|
-
| **model-value** | The model value of the switch | `boolean` | No |
|
|
8
|
-
| **id** | The id of the switch | `string` | No |
|
|
9
|
-
| **disabled** | If the switch is disabled | `boolean` | No |
|
|
10
|
-
| **name** | The name of the switch | `string` | No |
|
|
11
|
-
| **label** | Text label | `string` | No |
|
|
12
|
-
| **color** | The color of the switch | `MazColor` | No |
|
|
13
|
-
| **error** | Whether there is an error with the input. | `boolean` | No |
|
|
14
|
-
| **success** | Whether the input is successful. | `boolean` | No |
|
|
15
|
-
| **warning** | Whether there is a warning with the input. | `boolean` | No |
|
|
16
|
-
| **hint** | The hint text to display below the input. | `string` | No |
|
|
3
|
+
| Name | Description | Type | Required |
|
|
4
|
+
| --------------- | -------------------------------------------- | ------------- | -------- |
|
|
5
|
+
| **style** | Style attribut of the component root element | `Native type` | No |
|
|
6
|
+
| **class** | Class attribut of the component root element | `Native type` | No |
|
|
7
|
+
| **model-value** | The model value of the switch | `boolean` | No |
|
|
8
|
+
| **id** | The id of the switch | `string` | No |
|
|
9
|
+
| **disabled** | If the switch is disabled | `boolean` | No |
|
|
10
|
+
| **name** | The name of the switch | `string` | No |
|
|
11
|
+
| **label** | Text label | `string` | No |
|
|
12
|
+
| **color** | The color of the switch | `MazColor` | No |
|
|
13
|
+
| **error** | Whether there is an error with the input. | `boolean` | No |
|
|
14
|
+
| **success** | Whether the input is successful. | `boolean` | No |
|
|
15
|
+
| **warning** | Whether there is a warning with the input. | `boolean` | No |
|
|
16
|
+
| **hint** | The hint text to display below the input. | `string` | No |
|
|
17
17
|
|
|
18
18
|
## Events
|
|
19
19
|
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
| **table-class** | CSS class of the table element | `HTMLAttributes['class']` | No | `undefined` | - |
|
|
6
6
|
| **table-style** | CSS style of the table element | `HTMLAttributes['style']` | No | `undefined` | - |
|
|
7
7
|
| **model-value** | `v-model` <br/>List of selected rows | `(string \| boolean \| number)[]` | No | `undefined` | - |
|
|
8
|
-
| **size** | Size of the table | `MazSize` | No | `
|
|
8
|
+
| **size** | Size of the table | `MazSize` | No | `md` | `xl, lg, md, sm, xs, mini` |
|
|
9
9
|
| **input-size** | Size of the search inputs | `MazSize` | No | `undefined` | `xl, lg, md, sm, xs, mini` |
|
|
10
10
|
| **title** | Title of the table | `string` | No | `undefined` | - |
|
|
11
11
|
| **headers** | Headers of the table | `MazTableHeader[]` | No | `undefined` | - |
|
|
12
12
|
| **sortable** | Enable sort feature on all columns | `boolean` | No | `false` | - |
|
|
13
|
-
| **headers-align** | Align all headers | `string` | No | `
|
|
13
|
+
| **headers-align** | Align all headers | `string` | No | `left` | - |
|
|
14
14
|
| **rows** | Rows of the table | `T[]` | No | `undefined` | - |
|
|
15
15
|
| **hoverable** | Add hover effect on rows | `boolean` | No | `false` | - |
|
|
16
16
|
| **search** | Enable search feature in table header | `boolean` | No | `false` | - |
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
| **elevation** | Add shadow to the table | `boolean` | No | `false` | - |
|
|
23
23
|
| **divider** | add divider between rows | `boolean` | No | `false` | - |
|
|
24
24
|
| **caption** | Caption of the table | `string` | No | `undefined` | - |
|
|
25
|
-
| **caption-side** | Caption side | `string` | No | `
|
|
25
|
+
| **caption-side** | Caption side | `string` | No | `bottom` | `top, bottom` |
|
|
26
26
|
| **pagination** | Add pagination in table footer | `boolean` | No | `false` | - |
|
|
27
27
|
| **page** | `v-model:page` <br/>Current page of pagination | `number` | No | `1` | - |
|
|
28
28
|
| **page-size** | `v-model:page-size` <br/>Number of items per page | `number` | No | `20` | - |
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
| **selectable** | Enable selection of rows | `boolean` | No | `false` | - |
|
|
34
34
|
| **selected-key** | Enable selection of rows - key of the selected row | `string` | No | `undefined` | - |
|
|
35
35
|
| **table-layout** | Table layout | `string` | No | `undefined` | `auto, fixed` |
|
|
36
|
-
| **color** | Color of the component | `MazColor` | No | `
|
|
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 | `string` | No | `
|
|
38
|
+
| **rounded-size** | Size radius of the component's border | `string` | No | `md` | `none, sm, md, lg, xl, full` |
|
|
39
39
|
| **scrollable** | Enable scrollable on table | `boolean` | No | `false` | - |
|
|
40
40
|
|
|
41
41
|
## Events
|
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required | Default
|
|
4
|
-
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------- |
|
|
5
|
-
| **style** | Style attribut of the component root element | `Native type` | No | `undefined`
|
|
6
|
-
| **class** | Class attribut of the component root element | `Native type` | No | `undefined`
|
|
7
|
-
| **model-value** | `v-model` <br/> | `T` | No | `undefined`
|
|
8
|
-
| **id** | The id of the textarea | `string` | No | `undefined`
|
|
9
|
-
| **name** | The name of the textarea | `string` | No | `
|
|
10
|
-
| **label** | The label of the textarea | `string` | No | `undefined`
|
|
11
|
-
| **placeholder** | The placeholder of the textarea | `string` | No | `undefined`
|
|
12
|
-
| **required** | If the textarea is required | `boolean` | No | `
|
|
13
|
-
| **disabled** | If the textarea is disabled | `boolean` | No | `
|
|
14
|
-
| **readonly** | If the textarea is readonly | `boolean` | No | `
|
|
15
|
-
| **error** | If the textarea has an error | `boolean` | No | `
|
|
16
|
-
| **success** | If the textarea has a success | `boolean` | No | `
|
|
17
|
-
| **warning** | If the textarea has a warning | `boolean` | No | `
|
|
18
|
-
| **hint** | The hint of the textarea | `string` | No | `undefined`
|
|
19
|
-
| **color** | The color of the textarea | `MazColor` | No | `
|
|
20
|
-
| **rounded-size** | Size radius of the component's border | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"` | No | `
|
|
21
|
-
| **padding** | If the textarea has a padding | `boolean` | No | `true`
|
|
22
|
-
| **transparent** | If the textarea has a transparent background | `boolean` | No | `false`
|
|
23
|
-
| **border** | If the textarea has no border | `boolean` | No | `
|
|
24
|
-
| **autogrow** | If the textarea should autogrow based on its content | `boolean` | No | `true`
|
|
25
|
-
| **append-justify** | The alignment of the append slot | `"start" \| "end" \| "center" \| "space-between" \| "space-around" \| "space-evenly"` | No | `
|
|
26
|
-
| **top-label** | Static label displayed above the textarea. Unlike the floating label, this remains fixed | `string` | No | `undefined`
|
|
27
|
-
| **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`
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------- | ----------- | ------------------------------------------------------------------------------------- |
|
|
5
|
+
| **style** | Style attribut of the component root element | `Native type` | No | `undefined` | - |
|
|
6
|
+
| **class** | Class attribut of the component root element | `Native type` | No | `undefined` | - |
|
|
7
|
+
| **model-value** | `v-model` <br/> | `T` | No | `undefined` | - |
|
|
8
|
+
| **id** | The id of the textarea | `string` | No | `undefined` | - |
|
|
9
|
+
| **name** | The name of the textarea | `string` | No | `undefined` | - |
|
|
10
|
+
| **label** | The label of the textarea | `string` | No | `undefined` | - |
|
|
11
|
+
| **placeholder** | The placeholder of the textarea | `string` | No | `undefined` | - |
|
|
12
|
+
| **required** | If the textarea is required | `boolean` | No | `undefined` | - |
|
|
13
|
+
| **disabled** | If the textarea is disabled | `boolean` | No | `undefined` | - |
|
|
14
|
+
| **readonly** | If the textarea is readonly | `boolean` | No | `undefined` | - |
|
|
15
|
+
| **error** | If the textarea has an error | `boolean` | No | `undefined` | - |
|
|
16
|
+
| **success** | If the textarea has a success | `boolean` | No | `undefined` | - |
|
|
17
|
+
| **warning** | If the textarea has a warning | `boolean` | No | `undefined` | - |
|
|
18
|
+
| **hint** | The hint of the textarea | `string` | No | `undefined` | - |
|
|
19
|
+
| **color** | The color of the textarea | `MazColor` | No | `undefined` | - |
|
|
20
|
+
| **rounded-size** | Size radius of the component's border | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"` | No | `md` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` |
|
|
21
|
+
| **padding** | If the textarea has a padding | `boolean` | No | `true` | - |
|
|
22
|
+
| **transparent** | If the textarea has a transparent background | `boolean` | No | `false` | - |
|
|
23
|
+
| **border** | If the textarea has no border | `boolean` | No | `false` | - |
|
|
24
|
+
| **autogrow** | If the textarea should autogrow based on its content | `boolean` | No | `true` | - |
|
|
25
|
+
| **append-justify** | The alignment of the append slot | `"start" \| "end" \| "center" \| "space-between" \| "space-around" \| "space-evenly"` | No | `end` | `'start' \| 'end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly'` |
|
|
26
|
+
| **top-label** | Static label displayed above the textarea. Unlike the floating label, this remains fixed | `string` | No | `undefined` | - |
|
|
27
|
+
| **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` | - |
|
|
28
28
|
|
|
29
29
|
## Events
|
|
30
30
|
|
|
@@ -36,7 +36,7 @@ The following features are planned for a future release and are **not yet availa
|
|
|
36
36
|
| `MazSidebarMenuSub` | Collapsible sub-menu |
|
|
37
37
|
| `MazSidebarTrigger` | Toggle button (must be a descendant of `MazSidebar`) |
|
|
38
38
|
|
|
39
|
-
##
|
|
39
|
+
## Basic usage
|
|
40
40
|
|
|
41
41
|
<ComponentDemo>
|
|
42
42
|
<div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[25rem] maz:flex">
|
|
@@ -94,7 +94,7 @@ const isOpen = ref(true)
|
|
|
94
94
|
</template>
|
|
95
95
|
</ComponentDemo>
|
|
96
96
|
|
|
97
|
-
##
|
|
97
|
+
## Groups & dividers
|
|
98
98
|
|
|
99
99
|
<ComponentDemo>
|
|
100
100
|
<div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[25rem] maz:flex">
|
|
@@ -156,7 +156,7 @@ const isOpen = ref(true)
|
|
|
156
156
|
</template>
|
|
157
157
|
</ComponentDemo>
|
|
158
158
|
|
|
159
|
-
##
|
|
159
|
+
## Sub-menus
|
|
160
160
|
|
|
161
161
|
<ComponentDemo>
|
|
162
162
|
<div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[25rem] maz:flex">
|
|
@@ -213,9 +213,39 @@ const isOpen = ref(true)
|
|
|
213
213
|
</template>
|
|
214
214
|
</ComponentDemo>
|
|
215
215
|
|
|
216
|
-
##
|
|
216
|
+
## Icon mode with tooltips
|
|
217
217
|
|
|
218
|
-
When `collapsible="icon"` and the sidebar is collapsed, labels fade out and only the icons stay visible. To help users identify items in collapsed state, provide a `tooltip` prop on each `MazSidebarMenuButton`: it uses the `v-tooltip` directive and is
|
|
218
|
+
When `collapsible="icon"` and the sidebar is collapsed, labels fade out and only the icons stay visible. To help users identify items in collapsed state, provide a `tooltip` prop on each `MazSidebarMenuButton`: it uses the `v-tooltip` directive and is only shown on hover when the sidebar is collapsed by default.
|
|
219
|
+
|
|
220
|
+
### Controlling when the tooltip appears
|
|
221
|
+
|
|
222
|
+
Both `MazSidebar` and `MazSidebarMenuButton` accept a `tooltip-mode` prop:
|
|
223
|
+
|
|
224
|
+
- `closed` (default on the sidebar) — tooltip only shows on hover when the sidebar is collapsed
|
|
225
|
+
- `always` — tooltip shows on hover regardless of the sidebar state
|
|
226
|
+
|
|
227
|
+
Set it on the sidebar to apply to every descendant button, or override per-button:
|
|
228
|
+
|
|
229
|
+
```html
|
|
230
|
+
<!-- Every button: tooltip visible only when collapsed -->
|
|
231
|
+
<MazSidebar tooltip-mode="closed">
|
|
232
|
+
<MazSidebarMenuButton :icon="MazHome" label="Dashboard" tooltip="Go to Dashboard" />
|
|
233
|
+
</MazSidebar>
|
|
234
|
+
|
|
235
|
+
<!-- This button overrides: tooltip always shown -->
|
|
236
|
+
<MazSidebar tooltip-mode="closed">
|
|
237
|
+
<MazSidebarMenuButton
|
|
238
|
+
:icon="MazCog6Tooth"
|
|
239
|
+
label="Settings"
|
|
240
|
+
tooltip="Open Settings"
|
|
241
|
+
tooltip-mode="always"
|
|
242
|
+
/>
|
|
243
|
+
</MazSidebar>
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
::: tip Performance
|
|
247
|
+
When no `tooltip` prop is provided on a button, the `v-tooltip` directive is not attached at all — no listeners, no popover instance.
|
|
248
|
+
:::
|
|
219
249
|
|
|
220
250
|
<ComponentDemo>
|
|
221
251
|
<div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[25rem] maz:flex">
|
|
@@ -269,7 +299,7 @@ const isOpen = ref(true)
|
|
|
269
299
|
</template>
|
|
270
300
|
</ComponentDemo>
|
|
271
301
|
|
|
272
|
-
##
|
|
302
|
+
## Offcanvas mode
|
|
273
303
|
|
|
274
304
|
<ComponentDemo>
|
|
275
305
|
<div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[20rem] maz:flex">
|
|
@@ -302,7 +332,7 @@ const isOpen = ref(true)
|
|
|
302
332
|
</template>
|
|
303
333
|
</ComponentDemo>
|
|
304
334
|
|
|
305
|
-
##
|
|
335
|
+
## Overlay vs push mode
|
|
306
336
|
|
|
307
337
|
In `mode="push"` (default), the sidebar is part of the document flow and pushes the main content.
|
|
308
338
|
In `mode="overlay"`, the sidebar floats over the content with a backdrop, escape key support and focus trapping.
|
|
@@ -341,7 +371,7 @@ In `mode="overlay"`, the sidebar floats over the content with a backdrop, escape
|
|
|
341
371
|
</template>
|
|
342
372
|
</ComponentDemo>
|
|
343
373
|
|
|
344
|
-
##
|
|
374
|
+
## Side end (right)
|
|
345
375
|
|
|
346
376
|
<ComponentDemo>
|
|
347
377
|
<div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[20rem] maz:flex">
|
|
@@ -371,7 +401,7 @@ In `mode="overlay"`, the sidebar floats over the content with a backdrop, escape
|
|
|
371
401
|
</template>
|
|
372
402
|
</ComponentDemo>
|
|
373
403
|
|
|
374
|
-
##
|
|
404
|
+
## Badges
|
|
375
405
|
|
|
376
406
|
`badge` accepts a `string`, a `number`, or a full `MazBadgeProps` object (with an optional `text`) to fine-tune color, size, outlined, etc.
|
|
377
407
|
|
|
@@ -421,7 +451,7 @@ In `mode="overlay"`, the sidebar floats over the content with a backdrop, escape
|
|
|
421
451
|
</template>
|
|
422
452
|
</ComponentDemo>
|
|
423
453
|
|
|
424
|
-
##
|
|
454
|
+
## User menu in footer
|
|
425
455
|
|
|
426
456
|
<ComponentDemo>
|
|
427
457
|
<div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[22rem] maz:flex">
|
|
@@ -466,7 +496,7 @@ In `mode="overlay"`, the sidebar floats over the content with a backdrop, escape
|
|
|
466
496
|
</template>
|
|
467
497
|
</ComponentDemo>
|
|
468
498
|
|
|
469
|
-
##
|
|
499
|
+
## Mobile (static rendering)
|
|
470
500
|
|
|
471
501
|
::: info
|
|
472
502
|
Automatic mobile drawer (drawer auto under a breakpoint with backdrop) is a **deferred v1.1 feature**. For now, control the sidebar visibility programmatically based on viewport.
|
|
@@ -498,7 +528,7 @@ watch(isMobile, (mobile) => {
|
|
|
498
528
|
</template>
|
|
499
529
|
```
|
|
500
530
|
|
|
501
|
-
##
|
|
531
|
+
## Programmatic control (v-model + composable)
|
|
502
532
|
|
|
503
533
|
Use `v-model:open` for two-way binding, or `useSidebar()` inside any descendant component.
|
|
504
534
|
|
|
@@ -530,7 +560,48 @@ const sidebar = useSidebar()
|
|
|
530
560
|
</template>
|
|
531
561
|
```
|
|
532
562
|
|
|
533
|
-
##
|
|
563
|
+
## Persistent open state
|
|
564
|
+
|
|
565
|
+
The sidebar persists its open/collapsed state in a cookie (`maz-sidebar-open`) so it survives page reloads. This is **enabled by default**.
|
|
566
|
+
|
|
567
|
+
```html
|
|
568
|
+
<!-- Default: persistence enabled, cookie name "maz-sidebar-open" -->
|
|
569
|
+
<MazSidebar v-model:open="isOpen" />
|
|
570
|
+
|
|
571
|
+
<!-- Disable persistence -->
|
|
572
|
+
<MazSidebar v-model:open="isOpen" :persist="false" />
|
|
573
|
+
|
|
574
|
+
<!-- Custom cookie key (useful when multiple sidebars coexist) -->
|
|
575
|
+
<MazSidebar v-model:open="isOpen" persist-key="admin-sidebar-open" />
|
|
576
|
+
```
|
|
577
|
+
|
|
578
|
+
### How it works
|
|
579
|
+
|
|
580
|
+
- **In setup (server + client)**: the cookie is read and used to initialize the open state. On the server, the value is taken from the request `Cookie` header via Vue's `useSSRContext()`; on the client it comes from `document.cookie`.
|
|
581
|
+
- **On client mount**: `update:open` is emitted if the persisted value differs from the `:open` prop, so your parent `v-model` stays in sync.
|
|
582
|
+
- **On state change**: every transition between expanded/collapsed writes the new value to the cookie (1-year expiry, `SameSite=Lax`).
|
|
583
|
+
|
|
584
|
+
### SSR considerations
|
|
585
|
+
|
|
586
|
+
Persistence is **SSR-native** — the server reads the request cookie and renders the sidebar in its persisted state immediately, so there is no expand → collapse flash on hydration. This works out of the box in Nuxt and any Vue 3 SSR runtime that exposes the request headers through `useSSRContext()`.
|
|
587
|
+
|
|
588
|
+
If you prefer to manage the state yourself (e.g. to share it with other parts of your app), disable persistence and feed the cookie via your own ref:
|
|
589
|
+
|
|
590
|
+
```html
|
|
591
|
+
<script setup>
|
|
592
|
+
const sidebarOpen = useCookie<boolean>('maz-sidebar-open', { default: () => true })
|
|
593
|
+
</script>
|
|
594
|
+
|
|
595
|
+
<template>
|
|
596
|
+
<MazSidebar v-model:open="sidebarOpen" :persist="false">
|
|
597
|
+
<!-- ... -->
|
|
598
|
+
</MazSidebar>
|
|
599
|
+
</template>
|
|
600
|
+
```
|
|
601
|
+
|
|
602
|
+
`:persist="false"` prevents the sidebar from also writing the cookie, leaving full control to your `useCookie` ref.
|
|
603
|
+
|
|
604
|
+
## With router (vue-router / NuxtLink)
|
|
534
605
|
|
|
535
606
|
`MazSidebarMenuButton` uses `resolveLinkComponent()` internally — it detects `RouterLink` (vue-router) or a provided `NuxtLink`. Pass the `to` prop for router navigation, `href` for plain anchor links.
|
|
536
607
|
|
|
@@ -546,40 +617,6 @@ const sidebar = useSidebar()
|
|
|
546
617
|
<MazSidebarMenuButton label="Dashboard" :active="$route.name === 'dashboard'" />
|
|
547
618
|
```
|
|
548
619
|
|
|
549
|
-
## MazSidebar Props
|
|
550
|
-
|
|
551
|
-
| Prop | Type | Default | Description |
|
|
552
|
-
|---|---|---|---|
|
|
553
|
-
| `id` | `string` | auto-generated | Unique identifier for the sidebar |
|
|
554
|
-
| `v-model:open` | `boolean` | `true` | Controls the open/closed state |
|
|
555
|
-
| `side` | `'start' \| 'end'` | `'start'` | Which side the sidebar appears on |
|
|
556
|
-
| `collapsible` | `'offcanvas' \| 'icon' \| 'none'` | `'offcanvas'` | How the sidebar collapses |
|
|
557
|
-
| `mode` | `'push' \| 'overlay'` | `'push'` | Whether content is pushed or overlaid |
|
|
558
|
-
| `width` | `string` | `'16rem'` | Width when expanded |
|
|
559
|
-
| `iconWidth` | `string` | `'3rem'` | Width in icon-collapsed mode |
|
|
560
|
-
|
|
561
|
-
## MazSidebarMenuButton Props
|
|
562
|
-
|
|
563
|
-
| Prop | Type | Default | Description |
|
|
564
|
-
|---|---|---|---|
|
|
565
|
-
| `to` | `string \| object` | — | Router-link target |
|
|
566
|
-
| `href` | `string` | — | Anchor href |
|
|
567
|
-
| `icon` | `MazIconLike` | — | Icon — value or full `MazIconProps` object |
|
|
568
|
-
| `label` | `string` | — | Text label |
|
|
569
|
-
| `badge` | `string \| number \| MazBadgeProps & { text? }` | — | Badge — value or full `MazBadgeProps` object |
|
|
570
|
-
| `tooltip` | `string` | — | Tooltip text — shown on hover via `v-tooltip` |
|
|
571
|
-
| `active` | `boolean` | — | Force active state (`aria-current="page"`) |
|
|
572
|
-
| `disabled` | `boolean` | `false` | Disable the button |
|
|
573
|
-
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
|
|
574
|
-
|
|
575
|
-
## MazSidebarMenuSub Props
|
|
576
|
-
|
|
577
|
-
| Prop | Type | Default | Description |
|
|
578
|
-
|---|---|---|---|
|
|
579
|
-
| `label` | `string` | — | Label for the trigger button |
|
|
580
|
-
| `icon` | `MazIconLike` | — | Icon — value or full `MazIconProps` object |
|
|
581
|
-
| `defaultOpen` | `boolean` | `false` | Open the sub-menu by default |
|
|
582
|
-
|
|
583
620
|
## CSS Variables
|
|
584
621
|
|
|
585
622
|
Customize the sidebar width using these CSS custom properties (also settable via `width` / `iconWidth` props):
|
|
@@ -603,6 +640,22 @@ Customize the sidebar width using these CSS custom properties (also settable via
|
|
|
603
640
|
- In `mode="overlay"`, `Tab`/`Shift+Tab` are trapped within the sidebar
|
|
604
641
|
- All transitions respect `prefers-reduced-motion`
|
|
605
642
|
|
|
643
|
+
## MazSidebar
|
|
644
|
+
|
|
645
|
+
<!--@include: ./../../.vitepress/generated-docs/maz-sidebar.doc.md-->
|
|
646
|
+
|
|
647
|
+
## MazSidebarMenuButton
|
|
648
|
+
|
|
649
|
+
<!--@include: ./../../.vitepress/generated-docs/maz-sidebar-menu-button.doc.md-->
|
|
650
|
+
|
|
651
|
+
## MazSidebarMenuSub
|
|
652
|
+
|
|
653
|
+
<!--@include: ./../../.vitepress/generated-docs/maz-sidebar-menu-sub.doc.md-->
|
|
654
|
+
|
|
655
|
+
## MazSidebarGroup
|
|
656
|
+
|
|
657
|
+
<!--@include: ./../../.vitepress/generated-docs/maz-sidebar-group.doc.md-->
|
|
658
|
+
|
|
606
659
|
<script setup>
|
|
607
660
|
import { ref } from 'vue'
|
|
608
661
|
|
|
@@ -400,6 +400,29 @@ The `offset` (in px) option allows you to adjust the position of the tooltip rel
|
|
|
400
400
|
</template>
|
|
401
401
|
</ComponentDemo>
|
|
402
402
|
|
|
403
|
+
## Conditionally disable
|
|
404
|
+
|
|
405
|
+
Pass `false`, `null` or `undefined` as the binding value to silently disable the tooltip — no popover instance is created, no listeners are attached, and no warning is logged. This is the recommended way to skip the tooltip on the fly without conditionally rendering two different elements:
|
|
406
|
+
|
|
407
|
+
```vue
|
|
408
|
+
<script lang="ts" setup>
|
|
409
|
+
import { vTooltip } from 'maz-ui/directives'
|
|
410
|
+
import { computed, ref } from 'vue'
|
|
411
|
+
|
|
412
|
+
const label = ref<string>('')
|
|
413
|
+
const tooltipBinding = computed(() => label.value ? { text: label.value } : false)
|
|
414
|
+
</script>
|
|
415
|
+
|
|
416
|
+
<template>
|
|
417
|
+
<!-- When label is empty the directive becomes a no-op -->
|
|
418
|
+
<MazBtn v-tooltip="tooltipBinding">
|
|
419
|
+
Hover me
|
|
420
|
+
</MazBtn>
|
|
421
|
+
</template>
|
|
422
|
+
```
|
|
423
|
+
|
|
424
|
+
If the binding switches back to a valid value later, the tooltip mounts as expected. Toggling the value off again destroys the existing popover instance.
|
|
425
|
+
|
|
403
426
|
## Global install
|
|
404
427
|
|
|
405
428
|
### Vue
|