@maz-ui/mcp 4.4.0 → 4.6.1
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-alert.doc.md +20 -0
- package/docs/generated-docs/maz-container.doc.md +25 -0
- package/docs/generated-docs/maz-input-number.doc.md +21 -19
- package/docs/generated-docs/maz-read-more.doc.md +18 -0
- package/docs/generated-docs/maz-skeleton.doc.md +12 -0
- package/docs/src/blog/v4.md +1 -1
- package/docs/src/components/maz-accordion.md +1 -1
- package/docs/src/components/maz-alert.md +374 -0
- package/docs/src/components/maz-animated-counter.md +1 -1
- package/docs/src/components/maz-animated-element.md +1 -1
- package/docs/src/components/maz-animated-text.md +1 -1
- package/docs/src/components/maz-avatar.md +1 -1
- package/docs/src/components/maz-backdrop.md +2 -2
- package/docs/src/components/maz-badge.md +1 -1
- package/docs/src/components/maz-bottom-sheet.md +1 -1
- package/docs/src/components/maz-btn-group.md +1 -1
- package/docs/src/components/maz-btn.md +1 -1
- package/docs/src/components/maz-card-spotlight.md +1 -1
- package/docs/src/components/maz-card.md +1 -1
- package/docs/src/components/maz-carousel.md +2 -2
- package/docs/src/components/maz-checkbox.md +1 -1
- package/docs/src/components/maz-checklist.md +2 -2
- package/docs/src/components/maz-circular-progress-bar.md +1 -1
- package/docs/src/components/maz-container.md +348 -0
- package/docs/src/components/maz-date-picker.md +3 -3
- package/docs/src/components/maz-dialog-confirm.md +1 -1
- package/docs/src/components/maz-dialog.md +1 -1
- package/docs/src/components/maz-drawer.md +1 -1
- package/docs/src/components/maz-dropdown.md +2 -2
- package/docs/src/components/maz-dropzone.md +4 -4
- package/docs/src/components/maz-expand-animation.md +1 -1
- package/docs/src/components/maz-fullscreen-loader.md +1 -1
- package/docs/src/components/maz-gallery.md +1 -1
- package/docs/src/components/maz-input-code.md +1 -1
- package/docs/src/components/maz-input-number.md +2 -2
- package/docs/src/components/maz-input-phone-number.md +3 -3
- package/docs/src/components/maz-input-price.md +2 -2
- package/docs/src/components/maz-input-tags.md +2 -2
- package/docs/src/components/maz-input.md +1 -1
- package/docs/src/components/maz-lazy-img.md +1 -1
- package/docs/src/components/maz-link.md +1 -1
- package/docs/src/components/maz-loading-bar.md +1 -1
- package/docs/src/components/maz-pagination.md +2 -2
- package/docs/src/components/maz-pull-to-refresh.md +1 -1
- package/docs/src/components/maz-radio-buttons.md +1 -1
- package/docs/src/components/maz-radio.md +1 -1
- package/docs/src/components/maz-read-more.md +300 -0
- package/docs/src/components/maz-reading-progress-bar.md +1 -1
- package/docs/src/components/maz-select-country.md +1 -1
- package/docs/src/components/maz-select.md +3 -3
- package/docs/src/components/maz-skeleton.md +355 -0
- package/docs/src/components/maz-slider.md +1 -1
- package/docs/src/components/maz-stepper.md +1 -1
- package/docs/src/components/maz-switch.md +1 -1
- package/docs/src/components/maz-table.md +1 -1
- package/docs/src/components/maz-textarea.md +1 -1
- package/docs/src/composables/use-aos.md +1 -1
- package/docs/src/composables/use-form-validator.md +1226 -996
- package/docs/src/composables/use-wait.md +1 -1
- package/docs/src/guide/getting-started.md +8 -9
- package/docs/src/guide/resolvers.md +20 -0
- package/docs/src/plugins/toast.md +1 -1
- package/package.json +8 -8
package/dist/mcp.mjs
CHANGED
|
@@ -7,7 +7,7 @@ import { existsSync, readFileSync, readdirSync } from 'node:fs';
|
|
|
7
7
|
import { resolve, dirname, join } from 'node:path';
|
|
8
8
|
import { fileURLToPath } from 'node:url';
|
|
9
9
|
|
|
10
|
-
const version = "4.4.0
|
|
10
|
+
const version = "4.4.0";
|
|
11
11
|
|
|
12
12
|
const _dirname = dirname(fileURLToPath(import.meta.url));
|
|
13
13
|
class DocumentationService {
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ---------------- | ---------------------------------------------------------- | ------------------------- | -------- | ----------- | --------------------------------------------------------------------------------------------------------- |
|
|
5
|
+
| **title** | Title of the alert | `string` | No | `undefined` | - |
|
|
6
|
+
| **content** | Content of the alert | `string` | No | `undefined` | - |
|
|
7
|
+
| **icon** | Icon of the alert - can be a component or icon name string | `IconComponent \| string` | No | `undefined` | - |
|
|
8
|
+
| **hide-icon** | Hide the icon | `boolean` | No | `false` | - |
|
|
9
|
+
| **color** | Color of the alert | `MazAlertColor` | No | `info` | `'success' \| 'warning' \| 'destructive' \| 'info' \| 'primary' \| 'secondary' \| 'accent' \| 'contrast'` |
|
|
10
|
+
| **icon-size** | Size of the icon | `MazIconProps['size']` | No | `md` | - |
|
|
11
|
+
| **rounded-size** | Size of the rounded corners | `MazAlertRoundedSize` | No | `base` | `'none' \| 'sm' \| 'md' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl'` |
|
|
12
|
+
| **bordered** | Add border to the component | `boolean` | No | `true` | - |
|
|
13
|
+
| **variant** | Visual variant of the alert | `MazAlertVariant` | No | `soft` | `'soft' \| 'solid'` |
|
|
14
|
+
|
|
15
|
+
## Slots
|
|
16
|
+
|
|
17
|
+
| Name | Description | Bindings |
|
|
18
|
+
| ------- | ------------------------------------------------------- | -------- |
|
|
19
|
+
| title | Title slot - overrides title prop | |
|
|
20
|
+
| default | Default slot for alert content - overrides content prop | |
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ------------------- | ----------------------------------- | -------------------------------------------------- | -------- | ----------- | -------------------------------------------------- |
|
|
5
|
+
| **title** | Title of the card in header | `string` | No | `undefined` | - |
|
|
6
|
+
| **elevation** | Add elevation to the component | `boolean` | No | `false` | - |
|
|
7
|
+
| **padding** | Add padding to the content | `boolean` | No | `true` | - |
|
|
8
|
+
| **bordered** | Add border to the component | `boolean` | No | `true` | - |
|
|
9
|
+
| **rounded-size** | Size of the rounded | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | No | `undefined` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` |
|
|
10
|
+
| **transparent** | Remove background color | `boolean` | No | `false` | - |
|
|
11
|
+
| **overflow-hidden** | Hide overflow | `boolean` | No | `true` | - |
|
|
12
|
+
| **left-icon** | Add icon to the header on the left | `IconComponent \| string` | No | `undefined` | - |
|
|
13
|
+
| **right-icon** | Add icon to the header on the right | `IconComponent \| string` | No | `undefined` | - |
|
|
14
|
+
| **icon-size** | Size of the icon | `MazIconProps['size']` | No | `md` | - |
|
|
15
|
+
| **block** | Display the container in full width | `boolean` | No | `false` | - |
|
|
16
|
+
|
|
17
|
+
## Slots
|
|
18
|
+
|
|
19
|
+
| Name | Description | Bindings |
|
|
20
|
+
| ---------- | ------------------------ | -------- |
|
|
21
|
+
| header | Replace the header | |
|
|
22
|
+
| icon-left | icon left | |
|
|
23
|
+
| title | title | |
|
|
24
|
+
| icon-right | icon right | |
|
|
25
|
+
| default | content of the container | |
|
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description
|
|
4
|
-
| ---------------- |
|
|
5
|
-
| **
|
|
6
|
-
| **
|
|
7
|
-
| **
|
|
8
|
-
| **
|
|
9
|
-
| **
|
|
10
|
-
| **
|
|
11
|
-
| **
|
|
12
|
-
| **
|
|
13
|
-
| **
|
|
14
|
-
| **
|
|
15
|
-
| **
|
|
16
|
-
| **
|
|
17
|
-
| **
|
|
18
|
-
| **
|
|
19
|
-
| **
|
|
20
|
-
| **
|
|
21
|
-
| **
|
|
3
|
+
| Name | Description | Type | Required | Default |
|
|
4
|
+
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | -------- | -------------------------- |
|
|
5
|
+
| **id** | The id of the input. | `string` | No | `undefined` |
|
|
6
|
+
| **style** | The inline style object for the component. | `HTMLAttributes['style']` | No | `undefined` |
|
|
7
|
+
| **class** | The CSS class name for the component. | `HTMLAttributes['class']` | No | `undefined` |
|
|
8
|
+
| **model-value** | `v-model` <br/>The value of the component (v-model). | `number` | No | `undefined` |
|
|
9
|
+
| **disabled** | Whether the input number is disabled or not. | `boolean` | No | `undefined` |
|
|
10
|
+
| **max** | The maximum value allowed for the input number. | `number` | No | `Number.POSITIVE_INFINITY` |
|
|
11
|
+
| **min** | The minimum value allowed for the input number. | `number` | No | `Number.NEGATIVE_INFINITY` |
|
|
12
|
+
| **step** | The step value for incrementing or decrementing the input number. | `number` | No | `1` |
|
|
13
|
+
| **size** | The size of the input number component. | `MazSize` | No | `md` |
|
|
14
|
+
| **hide-buttons** | Whether to hide the increment and decrement buttons or not. | `boolean` | No | `false` |
|
|
15
|
+
| **text-center** | Whether to center the text inside the input or not. | `boolean` | No | `true` |
|
|
16
|
+
| **inputmode** | The inputmode attribute for the input. | `HTMLAttributes['inputmode']` | No | `undefined` |
|
|
17
|
+
| **block** | The input will be displayed in full width | `boolean` | No | `undefined` |
|
|
18
|
+
| **error** | Will display the input in error state. | `boolean` | No | `false` |
|
|
19
|
+
| **hint** | The hint text to display below the input. | `string` | No | `undefined` |
|
|
20
|
+
| **success** | Will display the input in success state. | `boolean` | No | `false` |
|
|
21
|
+
| **warning** | Will display the input in warning state. | `boolean` | No | `false` |
|
|
22
|
+
| **input-props** | The props for the input component. | `MazInputProps` | No | `undefined` |
|
|
23
|
+
| **top-label** | Static label displayed above the input field. Unlike the floating label, this remains fixed<br/>**Example:** `"User Information"` | `string` | No | `undefined` |
|
|
22
24
|
|
|
23
25
|
## Events
|
|
24
26
|
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required | Default |
|
|
4
|
+
| ----------------- | --------------------------------------------------- | ---------- | -------- | ------------------------------------ |
|
|
5
|
+
| **text** | The text to be truncated. | `string` | No | `undefined` |
|
|
6
|
+
| **max-lines** | The maximum number of lines to be displayed. | `number` | No | `4` |
|
|
7
|
+
| **max-chars** | The maximum number of characters to be displayed. | `number` | No | `undefined` |
|
|
8
|
+
| **color** | The color of the link (MazLink). | `MazColor` | No | `primary` |
|
|
9
|
+
| **collapse-text** | The text of the link when the content is collapsed. | `string` | No | `readMore.collapse' (translations)` |
|
|
10
|
+
| **expand-text** | The text of the link when the content is expanded. | `string` | No | `readMore.expand' (translations)` |
|
|
11
|
+
| **id** | Unique identifier for accessibility linking. | `string` | No | `undefined` |
|
|
12
|
+
| **aria-label** | Accessibility label for the content region. | `string` | No | `readMore.ariaLabel' (translations)` |
|
|
13
|
+
|
|
14
|
+
## Slots
|
|
15
|
+
|
|
16
|
+
| Name | Description | Bindings |
|
|
17
|
+
| ------- | ----------- | -------- |
|
|
18
|
+
| default | | |
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ---------------- | ------------------------------------------- | -------------------------------------------------- | -------- | -------------------------------------- | ---------------------------- |
|
|
5
|
+
| **shape** | Skeleton shape type | `'circle' \| 'rectangle' \| 'square'` | No | `rectangle` | `circle, rectangle, square` |
|
|
6
|
+
| **size** | Size with units (ex: '2rem', '40px', '3em') | `SizeUnit` | No | `1rem` | - |
|
|
7
|
+
| **width** | Custom width | `SizeUnit` | No | `undefined` | - |
|
|
8
|
+
| **height** | Custom height | `SizeUnit` | No | `undefined` | - |
|
|
9
|
+
| **animated** | Disable animation | `boolean` | No | `true` | - |
|
|
10
|
+
| **rounded-size** | Controls the border radius | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | No | `md` | `none, sm, md, lg, xl, full` |
|
|
11
|
+
| **aria-label** | Accessibility label | `string` | No | `skeleton.ariaLabel' (translations)` | - |
|
|
12
|
+
| **loading-text** | Loading text for accessibility | `string` | No | `skeleton.loadingText' (translations)` | - |
|
package/docs/src/blog/v4.md
CHANGED
|
@@ -34,7 +34,7 @@ Optimal tree-shaking implementation results in **60-90% bundle size reductions**
|
|
|
34
34
|
|
|
35
35
|
```typescript
|
|
36
36
|
// Before v4: Large bundle with unused code
|
|
37
|
-
import * as MazUI from 'maz-ui'
|
|
37
|
+
import * as MazUI from 'maz-ui/components'
|
|
38
38
|
|
|
39
39
|
// v4: Surgical imports for minimal bundles
|
|
40
40
|
import MazBtn from 'maz-ui/components/MazBtn'
|
|
@@ -7,7 +7,7 @@ description: MazAccordion is a standalone component that allows you to create an
|
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
-
<!--@include:
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
11
|
|
|
12
12
|
## Basic usage
|
|
13
13
|
|
|
@@ -0,0 +1,374 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: MazAlert
|
|
3
|
+
description: MazAlert is an accessible component for displaying contextual feedback messages like success, warning, error, or informational notifications with customizable colors, icons, and styling options
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# {{ $frontmatter.title }}
|
|
7
|
+
|
|
8
|
+
{{ $frontmatter.description }}
|
|
9
|
+
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
|
+
|
|
12
|
+
## Basic usage
|
|
13
|
+
|
|
14
|
+
<ComponentDemo>
|
|
15
|
+
<MazAlert title="Information" content="This is an informational alert message." />
|
|
16
|
+
|
|
17
|
+
<template #code>
|
|
18
|
+
|
|
19
|
+
```vue
|
|
20
|
+
<template>
|
|
21
|
+
<MazAlert title="Information" content="This is an informational alert message." />
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script lang="ts" setup>
|
|
25
|
+
import MazAlert from 'maz-ui/components/MazAlert'
|
|
26
|
+
</script>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
</template>
|
|
30
|
+
</ComponentDemo>
|
|
31
|
+
|
|
32
|
+
## Variants
|
|
33
|
+
|
|
34
|
+
MazAlert supports two visual variants: `soft` (default) with transparent background, and `solid` with full color background.
|
|
35
|
+
|
|
36
|
+
### Soft variant (default)
|
|
37
|
+
|
|
38
|
+
The soft variant uses a transparent background with colored text.
|
|
39
|
+
|
|
40
|
+
<ComponentDemo>
|
|
41
|
+
<div class="maz-flex maz-flex-col maz-gap-4">
|
|
42
|
+
<MazAlert color="info" variant="soft" title="Soft Info" content="This is the default soft variant with transparent background." />
|
|
43
|
+
<MazAlert color="success" variant="soft" title="Soft Success" content="Subtle and non-intrusive style." />
|
|
44
|
+
<MazAlert color="destructive" variant="soft" title="Soft Error" content="Easy on the eyes while still noticeable." />
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<template #code>
|
|
48
|
+
|
|
49
|
+
```vue
|
|
50
|
+
<template>
|
|
51
|
+
<MazAlert color="info" variant="soft" title="Soft Info" content="..." />
|
|
52
|
+
<MazAlert color="success" variant="soft" title="Soft Success" content="..." />
|
|
53
|
+
<MazAlert color="destructive" variant="soft" title="Soft Error" content="..." />
|
|
54
|
+
</template>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
</template>
|
|
58
|
+
</ComponentDemo>
|
|
59
|
+
|
|
60
|
+
### Solid variant
|
|
61
|
+
|
|
62
|
+
The solid variant uses the full color as background with contrasting text.
|
|
63
|
+
|
|
64
|
+
<ComponentDemo>
|
|
65
|
+
<div class="maz-flex maz-flex-col maz-gap-4">
|
|
66
|
+
<MazAlert color="info" variant="solid" title="Solid Info" content="Full color background for high visibility." />
|
|
67
|
+
<MazAlert color="success" variant="solid" title="Solid Success" content="Great for important notifications." />
|
|
68
|
+
<MazAlert color="destructive" variant="solid" title="Solid Error" content="Impossible to miss critical alerts." />
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<template #code>
|
|
72
|
+
|
|
73
|
+
```vue
|
|
74
|
+
<template>
|
|
75
|
+
<MazAlert color="info" variant="solid" title="Solid Info" content="..." />
|
|
76
|
+
<MazAlert color="success" variant="solid" title="Solid Success" content="..." />
|
|
77
|
+
<MazAlert color="destructive" variant="solid" title="Solid Error" content="..." />
|
|
78
|
+
</template>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
</template>
|
|
82
|
+
</ComponentDemo>
|
|
83
|
+
|
|
84
|
+
### All colors with solid variant
|
|
85
|
+
|
|
86
|
+
<ComponentDemo>
|
|
87
|
+
<div class="maz-flex maz-flex-col maz-gap-4">
|
|
88
|
+
<MazAlert v-for="color in colors" :key="color" :color="color" variant="solid" :title="capitalize(color)" :content="`Solid ${color} alert.`" />
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<template #code>
|
|
92
|
+
|
|
93
|
+
```vue
|
|
94
|
+
<template>
|
|
95
|
+
<MazAlert color="info" variant="solid" title="Info" content="..." />
|
|
96
|
+
<MazAlert color="success" variant="solid" title="Success" content="..." />
|
|
97
|
+
<MazAlert color="warning" variant="solid" title="Warning" content="..." />
|
|
98
|
+
<MazAlert color="destructive" variant="solid" title="Error" content="..." />
|
|
99
|
+
<!-- ... other colors -->
|
|
100
|
+
</template>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
</template>
|
|
104
|
+
</ComponentDemo>
|
|
105
|
+
|
|
106
|
+
## Colors
|
|
107
|
+
|
|
108
|
+
MazAlert supports all theme colors to convey different types of messages.
|
|
109
|
+
|
|
110
|
+
<ComponentDemo>
|
|
111
|
+
<div class="maz-flex maz-flex-col maz-gap-4">
|
|
112
|
+
<MazAlert v-for="color in colors" :key="color" :color="color" :title="capitalize(color)" :content="`This is a ${color} alert message.`" />
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<template #code>
|
|
116
|
+
|
|
117
|
+
```vue
|
|
118
|
+
<template>
|
|
119
|
+
<MazAlert color="info" title="Info" content="This is an info alert." />
|
|
120
|
+
<MazAlert color="success" title="Success" content="Operation completed successfully!" />
|
|
121
|
+
<MazAlert color="warning" title="Warning" content="Please review before proceeding." />
|
|
122
|
+
<MazAlert color="destructive" title="Error" content="An error occurred." />
|
|
123
|
+
<MazAlert color="primary" title="Primary" content="This is a primary alert." />
|
|
124
|
+
<MazAlert color="secondary" title="Secondary" content="This is a secondary alert." />
|
|
125
|
+
<MazAlert color="accent" title="Accent" content="This is an accent alert." />
|
|
126
|
+
<MazAlert color="contrast" title="Contrast" content="This is a contrast alert." />
|
|
127
|
+
</template>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
</template>
|
|
131
|
+
</ComponentDemo>
|
|
132
|
+
|
|
133
|
+
## With slots
|
|
134
|
+
|
|
135
|
+
Use slots for more complex content with custom HTML.
|
|
136
|
+
|
|
137
|
+
<ComponentDemo>
|
|
138
|
+
<MazAlert color="destructive">
|
|
139
|
+
<template #title>
|
|
140
|
+
3 errors found
|
|
141
|
+
</template>
|
|
142
|
+
<ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
|
|
143
|
+
<li>firstname - Invalid length: Expected >=5 but received 0</li>
|
|
144
|
+
<li>lastname - Invalid length: Expected >=2 but received 0</li>
|
|
145
|
+
<li>age - Invalid type: Expected number but received ""</li>
|
|
146
|
+
</ul>
|
|
147
|
+
</MazAlert>
|
|
148
|
+
|
|
149
|
+
<template #code>
|
|
150
|
+
|
|
151
|
+
```vue
|
|
152
|
+
<template>
|
|
153
|
+
<MazAlert color="destructive">
|
|
154
|
+
<template #title>
|
|
155
|
+
3 errors found
|
|
156
|
+
</template>
|
|
157
|
+
<ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
|
|
158
|
+
<li>firstname - Invalid length: Expected >=5 but received 0</li>
|
|
159
|
+
<li>lastname - Invalid length: Expected >=2 but received 0</li>
|
|
160
|
+
<li>age - Invalid type: Expected number but received ""</li>
|
|
161
|
+
</ul>
|
|
162
|
+
</MazAlert>
|
|
163
|
+
</template>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
</template>
|
|
167
|
+
</ComponentDemo>
|
|
168
|
+
|
|
169
|
+
## Without border
|
|
170
|
+
|
|
171
|
+
Remove the border with `:bordered="false"`.
|
|
172
|
+
|
|
173
|
+
<ComponentDemo>
|
|
174
|
+
<div class="maz-flex maz-flex-col maz-gap-4">
|
|
175
|
+
<MazAlert color="success" title="Without border" content="This alert has no border." :bordered="false" />
|
|
176
|
+
<MazAlert color="success" title="With border (default)" content="This alert has a border." />
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<template #code>
|
|
180
|
+
|
|
181
|
+
```vue
|
|
182
|
+
<template>
|
|
183
|
+
<MazAlert
|
|
184
|
+
color="success"
|
|
185
|
+
title="Without border"
|
|
186
|
+
content="This alert has no border."
|
|
187
|
+
:bordered="false"
|
|
188
|
+
/>
|
|
189
|
+
|
|
190
|
+
<MazAlert
|
|
191
|
+
color="success"
|
|
192
|
+
title="With border (default)"
|
|
193
|
+
content="This alert has a border."
|
|
194
|
+
/>
|
|
195
|
+
</template>
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
</template>
|
|
199
|
+
</ComponentDemo>
|
|
200
|
+
|
|
201
|
+
## Rounded sizes
|
|
202
|
+
|
|
203
|
+
Customize the border radius with the `rounded-size` prop.
|
|
204
|
+
|
|
205
|
+
<ComponentDemo>
|
|
206
|
+
<div class="maz-flex maz-flex-col maz-gap-4">
|
|
207
|
+
<MazAlert v-for="size in roundedSizes" :key="size" :rounded-size="size" :title="`Rounded: ${size}`" content="Customize the border radius." />
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<template #code>
|
|
211
|
+
|
|
212
|
+
```vue
|
|
213
|
+
<template>
|
|
214
|
+
<MazAlert rounded-size="none" title="Rounded: none" content="..." />
|
|
215
|
+
<MazAlert rounded-size="sm" title="Rounded: sm" content="..." />
|
|
216
|
+
<MazAlert rounded-size="md" title="Rounded: md" content="..." />
|
|
217
|
+
<MazAlert rounded-size="base" title="Rounded: base (default)" content="..." />
|
|
218
|
+
<MazAlert rounded-size="lg" title="Rounded: lg" content="..." />
|
|
219
|
+
<MazAlert rounded-size="xl" title="Rounded: xl" content="..." />
|
|
220
|
+
<MazAlert rounded-size="2xl" title="Rounded: 2xl" content="..." />
|
|
221
|
+
<MazAlert rounded-size="3xl" title="Rounded: 3xl" content="..." />
|
|
222
|
+
</template>
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
</template>
|
|
226
|
+
</ComponentDemo>
|
|
227
|
+
|
|
228
|
+
## Hide icon
|
|
229
|
+
|
|
230
|
+
Hide the default icon with `hide-icon`.
|
|
231
|
+
|
|
232
|
+
<ComponentDemo>
|
|
233
|
+
<div class="maz-flex maz-flex-col maz-gap-4">
|
|
234
|
+
<MazAlert color="warning" title="With icon (default)" content="The icon is visible." />
|
|
235
|
+
<MazAlert color="warning" title="Without icon" content="The icon is hidden." hide-icon />
|
|
236
|
+
</div>
|
|
237
|
+
|
|
238
|
+
<template #code>
|
|
239
|
+
|
|
240
|
+
```vue
|
|
241
|
+
<template>
|
|
242
|
+
<MazAlert color="warning" title="With icon (default)" content="The icon is visible." />
|
|
243
|
+
<MazAlert color="warning" title="Without icon" content="The icon is hidden." hide-icon />
|
|
244
|
+
</template>
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
</template>
|
|
248
|
+
</ComponentDemo>
|
|
249
|
+
|
|
250
|
+
## Custom icon
|
|
251
|
+
|
|
252
|
+
Provide a custom icon using the `icon` prop.
|
|
253
|
+
|
|
254
|
+
<ComponentDemo>
|
|
255
|
+
<MazAlert color="primary" title="Custom icon" content="This alert uses a custom icon." icon="bell" />
|
|
256
|
+
|
|
257
|
+
<template #code>
|
|
258
|
+
|
|
259
|
+
```vue
|
|
260
|
+
<template>
|
|
261
|
+
<MazAlert
|
|
262
|
+
color="primary"
|
|
263
|
+
title="Custom icon"
|
|
264
|
+
content="This alert uses a custom icon."
|
|
265
|
+
icon="bell"
|
|
266
|
+
/>
|
|
267
|
+
</template>
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
</template>
|
|
271
|
+
</ComponentDemo>
|
|
272
|
+
|
|
273
|
+
## Title only or content only
|
|
274
|
+
|
|
275
|
+
You can use either title, content, or both.
|
|
276
|
+
|
|
277
|
+
<ComponentDemo>
|
|
278
|
+
<div class="maz-flex maz-flex-col maz-gap-4">
|
|
279
|
+
<MazAlert color="info" title="Title only alert" />
|
|
280
|
+
<MazAlert color="success" content="Content only alert without a title." />
|
|
281
|
+
<MazAlert color="warning" title="Both title and content" content="This alert has both." />
|
|
282
|
+
</div>
|
|
283
|
+
|
|
284
|
+
<template #code>
|
|
285
|
+
|
|
286
|
+
```vue
|
|
287
|
+
<template>
|
|
288
|
+
<MazAlert color="info" title="Title only alert" />
|
|
289
|
+
<MazAlert color="success" content="Content only alert without a title." />
|
|
290
|
+
<MazAlert color="warning" title="Both title and content" content="This alert has both." />
|
|
291
|
+
</template>
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
</template>
|
|
295
|
+
</ComponentDemo>
|
|
296
|
+
|
|
297
|
+
## Use cases
|
|
298
|
+
|
|
299
|
+
### Form validation errors
|
|
300
|
+
|
|
301
|
+
<ComponentDemo>
|
|
302
|
+
<MazAlert color="destructive" title="Please fix the following errors:">
|
|
303
|
+
<ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
|
|
304
|
+
<li>Email address is required</li>
|
|
305
|
+
<li>Password must be at least 8 characters</li>
|
|
306
|
+
</ul>
|
|
307
|
+
</MazAlert>
|
|
308
|
+
|
|
309
|
+
<template #code>
|
|
310
|
+
|
|
311
|
+
```vue
|
|
312
|
+
<template>
|
|
313
|
+
<MazAlert color="destructive" title="Please fix the following errors:">
|
|
314
|
+
<ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
|
|
315
|
+
<li>Email address is required</li>
|
|
316
|
+
<li>Password must be at least 8 characters</li>
|
|
317
|
+
</ul>
|
|
318
|
+
</MazAlert>
|
|
319
|
+
</template>
|
|
320
|
+
```
|
|
321
|
+
|
|
322
|
+
</template>
|
|
323
|
+
</ComponentDemo>
|
|
324
|
+
|
|
325
|
+
### Success notification
|
|
326
|
+
|
|
327
|
+
<ComponentDemo>
|
|
328
|
+
<MazAlert color="success" title="Payment successful!" content="Your order #12345 has been confirmed. You will receive an email confirmation shortly." />
|
|
329
|
+
|
|
330
|
+
<template #code>
|
|
331
|
+
|
|
332
|
+
```vue
|
|
333
|
+
<template>
|
|
334
|
+
<MazAlert
|
|
335
|
+
color="success"
|
|
336
|
+
title="Payment successful!"
|
|
337
|
+
content="Your order #12345 has been confirmed. You will receive an email confirmation shortly."
|
|
338
|
+
/>
|
|
339
|
+
</template>
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
</template>
|
|
343
|
+
</ComponentDemo>
|
|
344
|
+
|
|
345
|
+
### Warning message
|
|
346
|
+
|
|
347
|
+
<ComponentDemo>
|
|
348
|
+
<MazAlert color="warning" title="Session expiring soon" content="Your session will expire in 5 minutes. Please save your work to avoid losing any changes." />
|
|
349
|
+
|
|
350
|
+
<template #code>
|
|
351
|
+
|
|
352
|
+
```vue
|
|
353
|
+
<template>
|
|
354
|
+
<MazAlert
|
|
355
|
+
color="warning"
|
|
356
|
+
title="Session expiring soon"
|
|
357
|
+
content="Your session will expire in 5 minutes. Please save your work to avoid losing any changes."
|
|
358
|
+
/>
|
|
359
|
+
</template>
|
|
360
|
+
```
|
|
361
|
+
|
|
362
|
+
</template>
|
|
363
|
+
</ComponentDemo>
|
|
364
|
+
|
|
365
|
+
<script lang="ts" setup>
|
|
366
|
+
const colors = ['info', 'success', 'warning', 'destructive', 'primary', 'secondary', 'accent', 'contrast']
|
|
367
|
+
const roundedSizes = ['none', 'sm', 'md', 'base', 'lg', 'xl', '2xl', '3xl']
|
|
368
|
+
|
|
369
|
+
function capitalize(str: string) {
|
|
370
|
+
return str.charAt(0).toUpperCase() + str.slice(1)
|
|
371
|
+
}
|
|
372
|
+
</script>
|
|
373
|
+
|
|
374
|
+
<!--@include: ./../../.vitepress/generated-docs/maz-alert.doc.md-->
|
|
@@ -7,7 +7,7 @@ description: MazAnimatedCounter is a standalone component that allows you to ani
|
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
-
<!--@include:
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
11
|
|
|
12
12
|
## Basic usage
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ description: MazAnimatedElement is a standalone component that animates its cont
|
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
-
<!--@include:
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
11
|
|
|
12
12
|
## Basic usage
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ description: MazAnimatedText is a standalone component that animates text with a
|
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
-
<!--@include:
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
11
|
|
|
12
12
|
## Basic usage
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ description: MazAvatar is a standalone component that displays an image or an ic
|
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
-
<!--@include:
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
11
|
|
|
12
12
|
::: tip
|
|
13
13
|
This component uses [vLazyImg](./../directives/lazy-img.md) directive
|
|
@@ -7,7 +7,7 @@ description: MazBackdrop is a flexible backdrop component that provides a founda
|
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
-
<!--@include:
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
11
|
|
|
12
12
|
::: tip
|
|
13
13
|
This component uses `<Teleport to="body">` and is the foundation for [MazDialog](./maz-dialog.md), [MazDrawer](./maz-drawer.md), and [MazBottomSheet](./maz-bottom-sheet.md)
|
|
@@ -229,7 +229,7 @@ These features work automatically - you don't need to do anything extra!
|
|
|
229
229
|
const animatedOpen = ref(false)
|
|
230
230
|
</script>
|
|
231
231
|
|
|
232
|
-
<style
|
|
232
|
+
<style scoped>
|
|
233
233
|
.demo-content {
|
|
234
234
|
background: hsl(var(--maz-background));
|
|
235
235
|
padding: 2rem;
|
|
@@ -7,7 +7,7 @@ description: MazBadge is a standalone component to show short text in colored co
|
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
-
<!--@include:
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
11
|
|
|
12
12
|
## Basic usage
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ description: MazBottomSheet is a standalone component like a simple dialog but a
|
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
-
<!--@include:
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
11
|
|
|
12
12
|
::: tip
|
|
13
13
|
This component uses the `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md), so you can implement this component anywhere and it inherits all its props
|
|
@@ -7,7 +7,7 @@ description: MazBtnGroup is a component to group multiple MazBtn buttons togethe
|
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
-
<!--@include:
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
11
|
|
|
12
12
|
## Basic usage with items
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ description: MazBtn is a standalone component that replaces the standard html bu
|
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
-
<!--@include:
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
11
|
|
|
12
12
|
## Basic usage
|
|
13
13
|
|