@maz-ui/mcp 5.0.0-beta.6 → 5.0.0-beta.9
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-circular-progress-bar.doc.md +1 -1
- package/docs/generated-docs/maz-code-highlight.doc.md +11 -0
- package/docs/generated-docs/maz-drawer.doc.md +1 -1
- package/docs/generated-docs/maz-fullscreen-loader.doc.md +5 -5
- package/docs/generated-docs/maz-gallery.doc.md +15 -15
- package/docs/generated-docs/maz-sidebar-content.doc.md +5 -0
- package/docs/generated-docs/maz-sidebar-footer.doc.md +5 -0
- package/docs/generated-docs/maz-sidebar-group.doc.md +11 -0
- package/docs/generated-docs/maz-sidebar-header.doc.md +5 -0
- package/docs/generated-docs/maz-sidebar-menu-button.doc.md +26 -0
- package/docs/generated-docs/maz-sidebar-menu-item.doc.md +5 -0
- package/docs/generated-docs/maz-sidebar-menu-sub.doc.md +16 -0
- package/docs/generated-docs/maz-sidebar-menu.doc.md +5 -0
- package/docs/generated-docs/maz-sidebar-separator.doc.md +0 -0
- package/docs/generated-docs/maz-sidebar-trigger.doc.md +11 -0
- package/docs/generated-docs/maz-sidebar.doc.md +33 -0
- package/docs/generated-docs/maz-slider.doc.md +1 -1
- package/docs/generated-docs/maz-spinner.doc.md +4 -4
- package/docs/generated-docs/maz-ticker.doc.md +1 -1
- package/docs/generated-docs/maz-window-mockup.doc.md +23 -0
- package/docs/src/blog/v5.md +1 -3
- package/docs/src/components/maz-code-highlight.md +233 -0
- package/docs/src/components/maz-sidebar.md +621 -0
- package/docs/src/components/maz-timeline.md +60 -0
- package/docs/src/components/maz-window-mockup.md +249 -0
- package/docs/src/directives/click-outside.md +7 -14
- package/docs/src/directives/lazy-img.md +4 -4
- package/docs/src/guide/getting-started.md +13 -11
- package/docs/src/guide/maz-ui-provider.md +6 -3
- package/docs/src/guide/migration-v4.md +7 -3
- package/docs/src/guide/migration-v5.md +67 -12
- package/docs/src/guide/nuxt.md +53 -46
- package/docs/src/guide/tailwind.md +4 -0
- package/docs/src/guide/themes.md +127 -69
- package/docs/src/helpers/capitalize.md +2 -3
- package/docs/src/helpers/currency.md +2 -2
- package/docs/src/helpers/date.md +2 -2
- package/docs/src/helpers/number.md +2 -2
- package/docs/src/plugins/wait.md +1 -1
- package/package.json +3 -3
package/dist/mcp.mjs
CHANGED
|
@@ -7,7 +7,7 @@ import { existsSync, readFileSync, readdirSync } 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.8";
|
|
11
11
|
|
|
12
12
|
class MetadataExtractor {
|
|
13
13
|
extract(name, type, content, manualTags = []) {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
| Name | Description | Type | Required | Default | Possible values |
|
|
4
4
|
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- | -------------------------------------------- | ------------------------------------ |
|
|
5
5
|
| **percentage** | The percentage value of the progress bar | `number` | Yes | `undefined` | - |
|
|
6
|
-
| **size** | The size of the progress bar | `
|
|
6
|
+
| **size** | The size of the progress bar | `MazSizeUnit` | No | `10em' (equal 80px for a font-size of 16px)` | - |
|
|
7
7
|
| **duration** | Duration of the animation in milliseconds | `number` | No | `1000` | - |
|
|
8
8
|
| **delay** | Delay before the animation starts in milliseconds | `number` | No | `100` | - |
|
|
9
9
|
| **color** | The color of the progress bar | `MazColor` | No | `undefined` | - |
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required | Default |
|
|
4
|
+
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | -------- | ----------- |
|
|
5
|
+
| **code** | Source code to highlight | `string` | No | `undefined` |
|
|
6
|
+
| **language** | Language identifier for syntax highlighting (e.g. 'vue', 'ts', 'bash') | `string` | No | `undefined` |
|
|
7
|
+
| **theme** | Override the shiki theme name. Defaults to github-light/github-dark based on current color mode | `string` | No | `undefined` |
|
|
8
|
+
| **rounded** | Apply rounded corners on the highlighted code block. | `boolean` | No | `true` |
|
|
9
|
+
| **copyable** | Show the copy-to-clipboard button on hover. | `boolean` | No | `true` |
|
|
10
|
+
| **copy-value** | Value copied to the clipboard. Falls back to the resolved code when omitted. Useful when the displayed code differs from what should be copied (e.g. terminal prompt prefix). | `string` | No | `undefined` |
|
|
11
|
+
| **translations** | Custom translations for the component. Override either key independently. | `Partial<MazUiTranslationsNestedSchema['codeHighlight']>` | No | `undefined` |
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------- | ----------- | ------------------------------- |
|
|
5
5
|
| **title** | The title of the drawer | `string` | No | `undefined` | - |
|
|
6
6
|
| **variant** | The edge from which the drawer slides in. `start` (= left in LTR, right in RTL) and `end` (= right in LTR, left in RTL) follow the document direction; `top` and `bottom` are physical. | `"start" \| "end" \| "top" \| "bottom"` | No | `'end'` | `start', 'end', 'top', 'bottom` |
|
|
7
|
-
| **size** | The size of the drawer | `
|
|
7
|
+
| **size** | The size of the drawer | `MazSizeUnit` | No | `'30rem'` | - |
|
|
8
8
|
| **backdrop-class** | The class of the backdrop | `string` | No | `undefined` | - |
|
|
9
9
|
| **hide-close-button** | Disable the close button | `boolean` | No | `undefined` | - |
|
|
10
10
|
| **no-close** | | `any` | No | `false` | - |
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type
|
|
4
|
-
| --------------------- | ----------------------------------- |
|
|
5
|
-
| **color** | The color of the spinner | `MazColor`
|
|
6
|
-
| **size** | The size of the spinner | `
|
|
7
|
-
| **teleport-selector** | The selector to teleport the loader | `string`
|
|
3
|
+
| Name | Description | Type | Required |
|
|
4
|
+
| --------------------- | ----------------------------------- | ------------- | -------- |
|
|
5
|
+
| **color** | The color of the spinner | `MazColor` | No |
|
|
6
|
+
| **size** | The size of the spinner | `MazSizeUnit` | No |
|
|
7
|
+
| **teleport-selector** | The selector to teleport the loader | `string` | No |
|
|
8
8
|
|
|
9
9
|
## Slots
|
|
10
10
|
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required | Default
|
|
4
|
-
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- |
|
|
5
|
-
| **images** | Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]` | `MazGalleryImage[]` | No | `undefined`
|
|
6
|
-
| **displayed-count** | Images count shown (max: 5) | `number` | No | `5`
|
|
7
|
-
| **remaining** | Remove transparent layer with the remain count (ex: +2) | `boolean` | No | `true`
|
|
8
|
-
| **height** | Height of gallery - set to `false` to remove default height | `number \| string \| false` | No | `150`
|
|
9
|
-
| **width** | Width of gallery - set to `false` to remove default width | `number \| string \| false` | No | `100%`
|
|
10
|
-
| **radius** | Disable the border radius of the gallery | `boolean` | No | `false`
|
|
11
|
-
| **zoom** | Disable full size display when clicking on image | `boolean` | No | `false`
|
|
12
|
-
| **has-empty-layer** | Layer with photography icon when no images is provided | `boolean` | No | `true`
|
|
13
|
-
| **lazy** | Lazy load image - if false, images are directly loaded | `boolean` | No | `true`
|
|
14
|
-
| **blur** | Disable blur effect on image hover | `boolean` | No | `true`
|
|
15
|
-
| **scale** | Disable scale animation effect on image hover | `boolean` | No | `true`
|
|
16
|
-
| **separator-color** | Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000`
|
|
17
|
-
| **background-color** | Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000`
|
|
3
|
+
| Name | Description | Type | Required | Default |
|
|
4
|
+
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- | ------------- |
|
|
5
|
+
| **images** | Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]` | `MazGalleryImage[]` | No | `undefined` |
|
|
6
|
+
| **displayed-count** | Images count shown (max: 5) | `number` | No | `5` |
|
|
7
|
+
| **remaining** | Remove transparent layer with the remain count (ex: +2) | `boolean` | No | `true` |
|
|
8
|
+
| **height** | Height of gallery - set to `false` to remove default height | `number \| string \| false` | No | `150` |
|
|
9
|
+
| **width** | Width of gallery - set to `false` to remove default width | `number \| string \| false` | No | `100%` |
|
|
10
|
+
| **radius** | Disable the border radius of the gallery | `boolean` | No | `false` |
|
|
11
|
+
| **zoom** | Disable full size display when clicking on image | `boolean` | No | `false` |
|
|
12
|
+
| **has-empty-layer** | Layer with photography icon when no images is provided | `boolean` | No | `true` |
|
|
13
|
+
| **lazy** | Lazy load image - if false, images are directly loaded | `boolean` | No | `true` |
|
|
14
|
+
| **blur** | Disable blur effect on image hover | `boolean` | No | `true` |
|
|
15
|
+
| **scale** | Disable scale animation effect on image hover | `boolean` | No | `true` |
|
|
16
|
+
| **separator-color** | Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` | `string` | No | `transparent` |
|
|
17
|
+
| **background-color** | Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000` | `string` | No | `undefined` |
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required |
|
|
4
|
+
| --------- | ---------------------------- | -------- | -------- |
|
|
5
|
+
| **label** | Optional label for the group | `string` | No |
|
|
6
|
+
|
|
7
|
+
## Slots
|
|
8
|
+
|
|
9
|
+
| Name | Description | Bindings |
|
|
10
|
+
| ------- | ----------- | -------- |
|
|
11
|
+
| default | | |
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
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
|
+
| **active** | Whether the item is active (highlights with `aria-current="page"`) | `boolean` | No |
|
|
12
|
+
| **disabled** | Whether the item is disabled | `boolean` | No |
|
|
13
|
+
| **size** | Size of the button | `"sm" \| "md" \| "lg"` | No |
|
|
14
|
+
|
|
15
|
+
## Events
|
|
16
|
+
|
|
17
|
+
| Event name | Properties | Description |
|
|
18
|
+
| ---------- | ---------- | ----------- |
|
|
19
|
+
| click | |
|
|
20
|
+
|
|
21
|
+
## Slots
|
|
22
|
+
|
|
23
|
+
| Name | Description | Bindings |
|
|
24
|
+
| ------- | ----------- | -------- |
|
|
25
|
+
| icon | | |
|
|
26
|
+
| default | | |
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required | Default |
|
|
4
|
+
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- | ----------- |
|
|
5
|
+
| **label** | Label for the sub-menu trigger button | `string` | No | `undefined` |
|
|
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 | `undefined` |
|
|
7
|
+
| **default-open** | Whether the sub-menu is open by default | `boolean` | No | `false` |
|
|
8
|
+
|
|
9
|
+
## Slots
|
|
10
|
+
|
|
11
|
+
| Name | Description | Bindings |
|
|
12
|
+
| ------- | ----------- | -------- |
|
|
13
|
+
| icon | | |
|
|
14
|
+
| label | | |
|
|
15
|
+
| chevron | | |
|
|
16
|
+
| default | | |
|
|
File without changes
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required |
|
|
4
|
+
| --------- | -------------------- | -------- | -------- |
|
|
5
|
+
| **class** | Additional CSS class | `string` | No |
|
|
6
|
+
|
|
7
|
+
## Slots
|
|
8
|
+
|
|
9
|
+
| Name | Description | Bindings |
|
|
10
|
+
| ------- | ----------- | -------- |
|
|
11
|
+
| default | | |
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
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 | `true` |
|
|
7
|
+
| **side** | Side of the sidebar | `"start" \| "end"` | No | `'start'` |
|
|
8
|
+
| **collapsible** | How the sidebar collapses - offcanvas: completely hidden - icon: only icons visible - none: always fully visible | `"offcanvas" \| "icon" \| "none"` | No | `'offcanvas'` |
|
|
9
|
+
| **mode** | How the sidebar affects layout - push: sidebar is in document flow - overlay: sidebar floats over content with a backdrop | `"push" \| "overlay"` | No | `'push'` |
|
|
10
|
+
| **width** | Width of the expanded sidebar | `string` | No | `'16rem'` |
|
|
11
|
+
| **icon-width** | Width of the collapsed sidebar in icon mode | `string` | No | `'3rem'` |
|
|
12
|
+
|
|
13
|
+
## Events
|
|
14
|
+
|
|
15
|
+
| Event name | Properties | Description |
|
|
16
|
+
| ----------- | ---------- | ------------------------------- |
|
|
17
|
+
| update:open | | Emitted when open state changes |
|
|
18
|
+
|
|
19
|
+
## Slots
|
|
20
|
+
|
|
21
|
+
| Name | Description | Bindings |
|
|
22
|
+
| ------- | ----------- | -------- |
|
|
23
|
+
| default | | |
|
|
24
|
+
|
|
25
|
+
## Expose
|
|
26
|
+
|
|
27
|
+
### toggle
|
|
28
|
+
|
|
29
|
+
>
|
|
30
|
+
|
|
31
|
+
### setOpen
|
|
32
|
+
|
|
33
|
+
>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
| **min** | min value of sliders | `number` | No |
|
|
8
8
|
| **max** | max value of sliders | `number` | No |
|
|
9
9
|
| **step** | step value for slider increments | `number` | No |
|
|
10
|
-
| **size** | height size of slider bar | `
|
|
10
|
+
| **size** | height size of slider bar | `MazSizeUnit` | No |
|
|
11
11
|
| **divider** | remove div in different colors | `boolean` | No |
|
|
12
12
|
| **log** | become a logarithmic slider (exponential) | `boolean` | No |
|
|
13
13
|
| **color** | main slider color | `MazColor` | No |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type
|
|
4
|
-
| --------- | ------------------------ |
|
|
5
|
-
| **size** | The size of the spinner | `
|
|
6
|
-
| **color** | The color of the spinner | `MazColor`
|
|
3
|
+
| Name | Description | Type | Required | Default |
|
|
4
|
+
| --------- | ------------------------ | ------------- | -------- | ------- |
|
|
5
|
+
| **size** | The size of the spinner | `MazSizeUnit` | No | `2em` |
|
|
6
|
+
| **color** | The color of the spinner | `MazColor` | No | `theme` |
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
| **pause-on-focus** | Pause animation when a child element receives focus | `boolean` | No | `false` | - |
|
|
12
12
|
| **paused** | Programmatic pause control - takes precedence over pauseOnHover and pauseOnFocus | `boolean` | No | `false` | - |
|
|
13
13
|
| **overlay** | Show gradient overlays on edges to fade content in/out | `boolean` | No | `true` | - |
|
|
14
|
-
| **overlay-size** | Size of the gradient overlay zones (CSS value) | `
|
|
14
|
+
| **overlay-size** | Size of the gradient overlay zones (CSS value) | `MazSizeUnit` | No | `33%` | - |
|
|
15
15
|
| **animation-timing-function** | CSS animation timing function | `string` | No | `linear` | - |
|
|
16
16
|
|
|
17
17
|
## Slots
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ----------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | -------- | ----------- | ----------------------------------- |
|
|
5
|
+
| **id** | Stable id used to scope the empty-state SVG pattern. Auto-generated if not provided. | `string` | No | `undefined` | - |
|
|
6
|
+
| **variant** | Window style variant | `MazWindowMockupVariant` | No | `browser` | `browser' \| 'terminal' \| 'editor` |
|
|
7
|
+
| **url** | URL to display in the browser address bar (browser variant only) | `string` | No | `localhost` | - |
|
|
8
|
+
| **filename** | Filename to display in the editor tab (editor variant only) | `string` | No | `index.vue` | - |
|
|
9
|
+
| **title** | Title to display in the terminal title bar (terminal variant only) | `string` | No | `zsh` | - |
|
|
10
|
+
| **min-height** | Minimum height of the content area as a CSS value (e.g. '200px') | `string` | No | `undefined` | - |
|
|
11
|
+
| **code** | Source code to display using MazCodeHighlight. Takes priority over the default slot. | `string` | No | `undefined` | - |
|
|
12
|
+
| **language** | Language identifier for syntax highlighting (e.g. 'vue', 'ts', 'bash') | `string` | No | `undefined` | - |
|
|
13
|
+
| **label** | Label displayed inside the empty-state placeholder when no code and no slot content are provided. | `string` | No | `undefined` | - |
|
|
14
|
+
| **hide-prompt** | Whether to hide the terminal prompt prefix (no-op on non-terminal variants) | `boolean` | No | `false` | - |
|
|
15
|
+
| **prompt** | Prefix to display before the code in the terminal (terminal variant only) | `string` | No | `$` | - |
|
|
16
|
+
| **hide-url-copy** | Hide the copy-to-clipboard button next to the URL bar (browser variant only). | `boolean` | No | `false` | - |
|
|
17
|
+
| **translations** | Custom translations for the component. Override either key independently. | `Partial<MazUiTranslationsNestedSchema['windowMockup']>` | No | `undefined` | - |
|
|
18
|
+
|
|
19
|
+
## Slots
|
|
20
|
+
|
|
21
|
+
| Name | Description | Bindings |
|
|
22
|
+
| ------- | ---------------------------------------------------------------------- | -------- |
|
|
23
|
+
| default | Free content (image, interface, etc.) shown when code prop is not set. | |
|
package/docs/src/blog/v5.md
CHANGED
|
@@ -90,9 +90,7 @@ npx @maz-ui/upgrade ./ --dry-run
|
|
|
90
90
|
npx @maz-ui/upgrade ./
|
|
91
91
|
```
|
|
92
92
|
|
|
93
|
-
It
|
|
94
|
-
|
|
95
|
-
It respects your `.gitignore`, walks `.vue`/`.css`/`.ts`/`.tsx`/`.cts`/`.mts`/`.js`/`.jsx`/`.cjs`/`.mjs` and `package.json`, and skips the usual build dirs.
|
|
93
|
+
It handles the mechanical part of the migration (CSS subpath imports, prop renames, CSS var renames, Nuxt config keys, custom preset color keys, and `package.json` version bumps)
|
|
96
94
|
|
|
97
95
|
### `@maz-ui/mcp` — for everything else
|
|
98
96
|
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: MazCodeHighlight
|
|
3
|
+
description: MazCodeHighlight displays source code with syntax highlighting powered by shiki. It auto-detects dark/light mode, ships with a copy-to-clipboard button, a language badge, and supports lazy loading.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# {{ $frontmatter.title }}
|
|
7
|
+
|
|
8
|
+
{{ $frontmatter.description }}
|
|
9
|
+
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
|
+
|
|
12
|
+
## Installation requirement
|
|
13
|
+
|
|
14
|
+
Install [`shiki`](https://shiki.style) in your project to enable highlighting:
|
|
15
|
+
|
|
16
|
+
::: code-group
|
|
17
|
+
|
|
18
|
+
```bash [pnpm]
|
|
19
|
+
pnpm add shiki
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```bash [npm]
|
|
23
|
+
npm install shiki
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```bash [yarn]
|
|
27
|
+
yarn add shiki
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
:::
|
|
31
|
+
|
|
32
|
+
If `shiki` is not installed, the component falls back to a plain `<pre><code>` block.
|
|
33
|
+
|
|
34
|
+
## Basic usage
|
|
35
|
+
|
|
36
|
+
<ComponentDemo>
|
|
37
|
+
<MazCodeHighlight code="const greeting = 'Hello, maz-ui!'" language="ts" />
|
|
38
|
+
|
|
39
|
+
<template #code>
|
|
40
|
+
|
|
41
|
+
```vue
|
|
42
|
+
<template>
|
|
43
|
+
<MazCodeHighlight code="const greeting = 'Hello, maz-ui!'" language="ts" />
|
|
44
|
+
</template>
|
|
45
|
+
|
|
46
|
+
<script lang="ts" setup>
|
|
47
|
+
import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
|
|
48
|
+
</script>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
</template>
|
|
52
|
+
</ComponentDemo>
|
|
53
|
+
|
|
54
|
+
## With slot
|
|
55
|
+
|
|
56
|
+
The default slot text is used as source code when the `code` prop is not provided. This is useful for plain text blocks.
|
|
57
|
+
|
|
58
|
+
<ComponentDemo>
|
|
59
|
+
<MazCodeHighlight language="bash">npm install maz-ui</MazCodeHighlight>
|
|
60
|
+
|
|
61
|
+
<template #code>
|
|
62
|
+
|
|
63
|
+
```vue
|
|
64
|
+
<template>
|
|
65
|
+
<MazCodeHighlight language="bash">npm install maz-ui</MazCodeHighlight>
|
|
66
|
+
</template>
|
|
67
|
+
|
|
68
|
+
<script lang="ts" setup>
|
|
69
|
+
import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
|
|
70
|
+
</script>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
</template>
|
|
74
|
+
</ComponentDemo>
|
|
75
|
+
|
|
76
|
+
## Languages
|
|
77
|
+
|
|
78
|
+
Pass any valid [shiki language identifier](https://shiki.style/languages) to the `language` prop. The chosen language is also displayed as a small badge in the top-right corner (the badge fades out on hover when the copy button appears).
|
|
79
|
+
|
|
80
|
+
<ComponentDemo>
|
|
81
|
+
<MazCodeHighlight language="vue" :code="vueExample" />
|
|
82
|
+
|
|
83
|
+
<template #code>
|
|
84
|
+
|
|
85
|
+
```vue
|
|
86
|
+
<template>
|
|
87
|
+
<MazCodeHighlight language="vue" :code="vueExample" />
|
|
88
|
+
</template>
|
|
89
|
+
|
|
90
|
+
<script lang="ts" setup>
|
|
91
|
+
import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
|
|
92
|
+
|
|
93
|
+
const vueExample = `<script lang="ts" setup>
|
|
94
|
+
import { ref } from 'vue'
|
|
95
|
+
const count = ref(0)
|
|
96
|
+
<\/script>
|
|
97
|
+
|
|
98
|
+
<template>
|
|
99
|
+
<button @click="count++">Count: {{ count }}</button>
|
|
100
|
+
</template>`
|
|
101
|
+
</script>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
</template>
|
|
105
|
+
</ComponentDemo>
|
|
106
|
+
|
|
107
|
+
## Custom theme
|
|
108
|
+
|
|
109
|
+
Override the auto-detected theme with any [shiki built-in theme](https://shiki.style/themes).
|
|
110
|
+
|
|
111
|
+
<ComponentDemo>
|
|
112
|
+
<MazCodeHighlight code="console.log('dracula theme')" language="js" theme="dracula" />
|
|
113
|
+
|
|
114
|
+
<template #code>
|
|
115
|
+
|
|
116
|
+
```vue
|
|
117
|
+
<template>
|
|
118
|
+
<MazCodeHighlight code="console.log('dracula theme')" language="js" theme="dracula" />
|
|
119
|
+
</template>
|
|
120
|
+
|
|
121
|
+
<script lang="ts" setup>
|
|
122
|
+
import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
|
|
123
|
+
</script>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
</template>
|
|
127
|
+
</ComponentDemo>
|
|
128
|
+
|
|
129
|
+
## Copy to clipboard
|
|
130
|
+
|
|
131
|
+
A copy button is displayed in the top-right corner on hover (or when focused via keyboard). Clicking it writes the resolved code to the clipboard and shows a check icon for ~1.5s.
|
|
132
|
+
|
|
133
|
+
### Disable the copy button
|
|
134
|
+
|
|
135
|
+
Set `:copyable="false"` to hide the button entirely.
|
|
136
|
+
|
|
137
|
+
<ComponentDemo>
|
|
138
|
+
<MazCodeHighlight code="const noCopyButton = true" language="ts" :copyable="false" />
|
|
139
|
+
|
|
140
|
+
<template #code>
|
|
141
|
+
|
|
142
|
+
```vue
|
|
143
|
+
<template>
|
|
144
|
+
<MazCodeHighlight code="const noCopyButton = true" language="ts" :copyable="false" />
|
|
145
|
+
</template>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
</template>
|
|
149
|
+
</ComponentDemo>
|
|
150
|
+
|
|
151
|
+
### Copy a different value than the displayed code
|
|
152
|
+
|
|
153
|
+
Use `copyValue` when the displayed source differs from what should be copied — for example to strip a leading `$` prompt when rendering a shell command. This is the mechanism `MazWindowMockup` uses internally to keep the terminal prompt out of the clipboard.
|
|
154
|
+
|
|
155
|
+
<ComponentDemo>
|
|
156
|
+
<MazCodeHighlight code="$ pnpm add maz-ui" copy-value="pnpm add maz-ui" language="bash" />
|
|
157
|
+
|
|
158
|
+
<template #code>
|
|
159
|
+
|
|
160
|
+
```vue
|
|
161
|
+
<template>
|
|
162
|
+
<MazCodeHighlight
|
|
163
|
+
code="$ pnpm add maz-ui"
|
|
164
|
+
copy-value="pnpm add maz-ui"
|
|
165
|
+
language="bash"
|
|
166
|
+
/>
|
|
167
|
+
</template>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
</template>
|
|
171
|
+
</ComponentDemo>
|
|
172
|
+
|
|
173
|
+
## Disable rounded corners
|
|
174
|
+
|
|
175
|
+
Set `:rounded="false"` to render the highlighted block with squared corners — useful when embedding inside another container that already has its own border-radius (e.g. inside `MazWindowMockup`).
|
|
176
|
+
|
|
177
|
+
<ComponentDemo>
|
|
178
|
+
<MazCodeHighlight code="// squared corners" language="ts" :rounded="false" />
|
|
179
|
+
|
|
180
|
+
<template #code>
|
|
181
|
+
|
|
182
|
+
```vue
|
|
183
|
+
<template>
|
|
184
|
+
<MazCodeHighlight code="// squared corners" language="ts" :rounded="false" />
|
|
185
|
+
</template>
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
</template>
|
|
189
|
+
</ComponentDemo>
|
|
190
|
+
|
|
191
|
+
## Custom translations
|
|
192
|
+
|
|
193
|
+
The copy button's aria-label and tooltip come from the `@maz-ui/translations` package (`codeHighlight.copyToClipboard` / `codeHighlight.copiedToClipboard`). You can override either key per-instance with the `translations` prop without touching the global locale:
|
|
194
|
+
|
|
195
|
+
<ComponentDemo>
|
|
196
|
+
<MazCodeHighlight
|
|
197
|
+
code="const hello = 'world'"
|
|
198
|
+
language="ts"
|
|
199
|
+
:translations="{ copyToClipboard: 'Copier le code', copiedToClipboard: 'Copié !' }"
|
|
200
|
+
/>
|
|
201
|
+
|
|
202
|
+
<template #code>
|
|
203
|
+
|
|
204
|
+
```vue
|
|
205
|
+
<template>
|
|
206
|
+
<MazCodeHighlight
|
|
207
|
+
code="const hello = 'world'"
|
|
208
|
+
language="ts"
|
|
209
|
+
:translations="{
|
|
210
|
+
copyToClipboard: 'Copier le code',
|
|
211
|
+
copiedToClipboard: 'Copié !',
|
|
212
|
+
}"
|
|
213
|
+
/>
|
|
214
|
+
</template>
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
</template>
|
|
218
|
+
</ComponentDemo>
|
|
219
|
+
|
|
220
|
+
For app-wide translations, set up the [maz-ui translations plugin](/translations) and the component will pick up your locale automatically.
|
|
221
|
+
|
|
222
|
+
<script lang="ts" setup>
|
|
223
|
+
const vueExample = `<script lang="ts" setup>
|
|
224
|
+
import { ref } from 'vue'
|
|
225
|
+
const count = ref(0)
|
|
226
|
+
<\/script>
|
|
227
|
+
|
|
228
|
+
<template>
|
|
229
|
+
<button @click="count++">Count: {{ count }}</button>
|
|
230
|
+
</template>`
|
|
231
|
+
</script>
|
|
232
|
+
|
|
233
|
+
<!--@include: ./../../.vitepress/generated-docs/maz-code-highlight.doc.md-->
|