@maz-ui/mcp 4.3.2 → 4.4.0
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-animated-text.doc.md +15 -12
- package/docs/generated-docs/maz-btn-group.doc.md +20 -0
- package/docs/generated-docs/maz-btn.doc.md +1 -0
- package/docs/generated-docs/maz-pagination.doc.md +9 -10
- package/docs/generated-docs/maz-popover.doc.md +4 -0
- package/docs/generated-docs/maz-stepper.doc.md +1 -0
- package/docs/src/components/maz-btn-group.md +475 -0
- package/docs/src/components/maz-pagination.md +0 -2
- package/docs/src/components/maz-stepper.md +38 -17
- package/docs/src/composables/use-form-validator.md +151 -2
- package/docs/src/guide/icon-set.md +1 -1
- package/docs/src/guide/icons.md +1 -1
- package/docs/src/index.md +10 -23
- package/package.json +9 -9
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.
|
|
10
|
+
const version = "4.4.0-beta.1";
|
|
11
11
|
|
|
12
12
|
const _dirname = dirname(fileURLToPath(import.meta.url));
|
|
13
13
|
class DocumentationService {
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name
|
|
4
|
-
|
|
|
5
|
-
| **text**
|
|
6
|
-
| **last-word**
|
|
7
|
-
| **delay**
|
|
8
|
-
| **direction**
|
|
9
|
-
| **tag**
|
|
10
|
-
| **word-delay**
|
|
11
|
-
| **column-gap**
|
|
12
|
-
| **row-gap**
|
|
13
|
-
| **duration**
|
|
14
|
-
| **once**
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ----------------- | ------------------------------------------------------------- | ------------------------------------- | -------- | ----------- | ----------------------------- |
|
|
5
|
+
| **text** | The text to animate<br/>**Example:** `"Hello"` | `string` | Yes | `undefined` | - |
|
|
6
|
+
| **last-word** | The last word(s) to be highlighted<br/>**Example:** `"world"` | `string` | No | `undefined` | - |
|
|
7
|
+
| **delay** | The delay of the animation | `number` | No | `0` | - |
|
|
8
|
+
| **direction** | The direction of the animation | `"up" \| "down" \| "left" \| "right"` | No | `up` | `up", "down", "left", "right` |
|
|
9
|
+
| **tag** | The tag to use for the text | `string` | No | `span` | - |
|
|
10
|
+
| **word-delay** | The delay between each word | `number` | No | `75` | - |
|
|
11
|
+
| **column-gap** | The column gap between each word | `number` | No | `0.5` | - |
|
|
12
|
+
| **row-gap** | The row gap between each word | `number` | No | `0` | - |
|
|
13
|
+
| **duration** | The duration of the animation | `number` | No | `2000` | - |
|
|
14
|
+
| **once** | Play the animation only once | `boolean` | No | `true` | - |
|
|
15
|
+
| **gradient-from** | The gradient from color | `MazColor` | No | `info` | - |
|
|
16
|
+
| **gradient-via** | The gradient via color | `MazColor` | No | `secondary` | - |
|
|
17
|
+
| **gradient-to** | The gradient to color | `MazColor` | No | `secondary` | - |
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ---------------- | ------------------------------------------------------------------------ | ------------------------ | -------- | ----------- | --------------- |
|
|
5
|
+
| **items** | The items for the button group (optional when using slot-based approach) | `MazButtonGroupOption[]` | No | `undefined` | - |
|
|
6
|
+
| **orientation** | The orientation of the button group | `"row" \| "col"` | No | `row` | `row' \| 'col` |
|
|
7
|
+
| **size** | The size of all buttons (only applies to props-based buttons) | `MazSize` | No | `md` | - |
|
|
8
|
+
| **color** | The color of all buttons (only applies to props-based buttons) | `MazColor` | No | `primary` | - |
|
|
9
|
+
| **rounded-size** | The rounded size of the buttons | `Native type` | No | `lg` | - |
|
|
10
|
+
| **outlined** | The outlined state of the buttons | `boolean` | No | `false` | - |
|
|
11
|
+
| **pastel** | The pastel state of the buttons | `boolean` | No | `false` | - |
|
|
12
|
+
| **loading** | The loading state of the buttons | `boolean` | No | `false` | - |
|
|
13
|
+
| **disabled** | The disabled state of the buttons | `boolean` | No | `false` | - |
|
|
14
|
+
|
|
15
|
+
## Slots
|
|
16
|
+
|
|
17
|
+
| Name | Description | Bindings |
|
|
18
|
+
| -------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
19
|
+
| button-[index] | Custom content for a specific button | <br/>**item** `MazButtonGroupOption` - The button item<br/>**index** `number` - The button index |
|
|
20
|
+
| default | Slot for passing MazBtn components directly | |
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
| **right-icon** | The name of the icon or component to display on the right of the button `@type` `{string \| FunctionalComponent<SVGAttributes> \| ComponentPublicInstance \| Component}` | `string \| IconComponent` | No | `undefined` | - |
|
|
19
19
|
| **padding** | If true, the button will have no padding | `boolean` | No | `true` | - |
|
|
20
20
|
| **justify** | Choose how the elements are aligned in the button | `"start" \| "end" \| "center" \| "space-between" \| "space-around" \| "space-evenly"` | No | `undefined` | - |
|
|
21
|
+
| **active** | If true, the button will have an active state | `boolean` | No | `false` | - |
|
|
21
22
|
|
|
22
23
|
## Slots
|
|
23
24
|
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description
|
|
4
|
-
| ---------------- |
|
|
5
|
-
| **model-value** | `v-model` <br/>The current page number.
|
|
6
|
-
| **button-props** | Props apply to the MazBtn components.
|
|
7
|
-
| **
|
|
8
|
-
| **
|
|
9
|
-
| **
|
|
10
|
-
| **
|
|
11
|
-
| **
|
|
12
|
-
| **loading** | Enable loading state of current button | `boolean` | No | `false` | - |
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ---------------- | --------------------------------------------------------------- | -------------------------- | -------- | ----------- | ------------------------------------------------------------------------------------------------------- |
|
|
5
|
+
| **model-value** | `v-model` <br/>The current page number. | `number` | No | `1` | - |
|
|
6
|
+
| **button-props** | Props apply to the MazBtn components. | `Partial<MazBtnProps>` | No | `undefined` | - |
|
|
7
|
+
| **active-color** | Color of the active button. | `MazColor \| "background"` | No | `contrast` | `contrast', 'primary', 'secondary', 'info', 'success', 'warning', 'destructive', 'accent', 'background` |
|
|
8
|
+
| **size** | Size of the buttons. | `MazSize` | No | `md` | `mini', 'xs', 'sm', 'md', 'lg', 'xl` |
|
|
9
|
+
| **total-pages** | Total number of pages. | `number` | Yes | `10` | - |
|
|
10
|
+
| **page-range** | Number of buttons to display before and after the current page. | `number` | No | `1` | - |
|
|
11
|
+
| **loading** | Enable loading state of current button | `boolean` | No | `false` | - |
|
|
13
12
|
|
|
14
13
|
## Slots
|
|
15
14
|
|
|
@@ -69,3 +69,7 @@
|
|
|
69
69
|
### updatePosition
|
|
70
70
|
|
|
71
71
|
> Update the popover position <br/>`@description` Manually recalculate and update the popover position<br/>`@usage` `mazPopoverInstance.value?.updatePosition()`
|
|
72
|
+
|
|
73
|
+
### panelRef
|
|
74
|
+
|
|
75
|
+
> Panel reference <br/>`@description` Reference to the popover panel element<br/>`@usage` `mazPopoverInstance.value?.panelRef`
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
| Name | Description | Bindings |
|
|
24
24
|
| ------------------ | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
25
|
+
| point | | |
|
|
25
26
|
| icon-${step} | Replace step number in the circle by an icon for the step | |
|
|
26
27
|
| title-${step} | Title of the step | |
|
|
27
28
|
| title-${step} | Subtitle of the step | |
|
|
@@ -0,0 +1,475 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: MazBtnGroup
|
|
3
|
+
description: MazBtnGroup is a component to group multiple MazBtn buttons together with seamless styling. Supports props-based or slot-based rendering with customizable orientation, size, and color.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# {{ $frontmatter.title }}
|
|
7
|
+
|
|
8
|
+
{{ $frontmatter.description }}
|
|
9
|
+
|
|
10
|
+
<!--@include: ./../.vitepress/mixins/getting-started.md-->
|
|
11
|
+
|
|
12
|
+
## Basic usage with items
|
|
13
|
+
|
|
14
|
+
Use the `items` prop to quickly create a button group from an array of button configurations.
|
|
15
|
+
|
|
16
|
+
<ComponentDemo>
|
|
17
|
+
<MazBtnGroup :items="basicItems" />
|
|
18
|
+
|
|
19
|
+
<template #code>
|
|
20
|
+
|
|
21
|
+
```vue
|
|
22
|
+
<template>
|
|
23
|
+
<MazBtnGroup :items="items" />
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script lang="ts" setup>
|
|
27
|
+
import MazBtnGroup from 'maz-ui/components/MazBtnGroup'
|
|
28
|
+
import type { MazButtonGroupOption } from 'maz-ui/components/MazBtnGroup'
|
|
29
|
+
|
|
30
|
+
const items: MazButtonGroupOption[] = [
|
|
31
|
+
{ text: 'Day' },
|
|
32
|
+
{ text: 'Week', active: true },
|
|
33
|
+
{ text: 'Month' },
|
|
34
|
+
]
|
|
35
|
+
</script>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
</template>
|
|
39
|
+
</ComponentDemo>
|
|
40
|
+
|
|
41
|
+
## Slot-based usage
|
|
42
|
+
|
|
43
|
+
Use the default slot to pass `MazBtn` components directly for full control over each button.
|
|
44
|
+
|
|
45
|
+
<ComponentDemo>
|
|
46
|
+
<MazBtnGroup>
|
|
47
|
+
<MazBtn>Edit</MazBtn>
|
|
48
|
+
<MazBtn :active="true">Save</MazBtn>
|
|
49
|
+
<MazBtn>Delete</MazBtn>
|
|
50
|
+
</MazBtnGroup>
|
|
51
|
+
|
|
52
|
+
<template #code>
|
|
53
|
+
|
|
54
|
+
```vue
|
|
55
|
+
<template>
|
|
56
|
+
<MazBtnGroup>
|
|
57
|
+
<MazBtn>Edit</MazBtn>
|
|
58
|
+
<MazBtn :active="true">Save</MazBtn>
|
|
59
|
+
<MazBtn>Delete</MazBtn>
|
|
60
|
+
</MazBtnGroup>
|
|
61
|
+
</template>
|
|
62
|
+
|
|
63
|
+
<script lang="ts" setup>
|
|
64
|
+
import MazBtnGroup from 'maz-ui/components/MazBtnGroup'
|
|
65
|
+
import MazBtn from 'maz-ui/components/MazBtn'
|
|
66
|
+
</script>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
</template>
|
|
70
|
+
</ComponentDemo>
|
|
71
|
+
|
|
72
|
+
## Orientation
|
|
73
|
+
|
|
74
|
+
Use the `orientation` prop to arrange buttons horizontally (`row`) or vertically (`col`).
|
|
75
|
+
|
|
76
|
+
<ComponentDemo>
|
|
77
|
+
<div class="maz-flex maz-gap-8 maz-flex-wrap">
|
|
78
|
+
<div>
|
|
79
|
+
<p class="maz-mb-2 maz-text-muted">Row (default)</p>
|
|
80
|
+
<MazBtnGroup :items="basicItems" orientation="row" />
|
|
81
|
+
</div>
|
|
82
|
+
<div>
|
|
83
|
+
<p class="maz-mb-2 maz-text-muted">Column</p>
|
|
84
|
+
<MazBtnGroup :items="basicItems" orientation="col" />
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<template #code>
|
|
89
|
+
|
|
90
|
+
```vue
|
|
91
|
+
<template>
|
|
92
|
+
<MazBtnGroup :items="items" orientation="row" />
|
|
93
|
+
<MazBtnGroup :items="items" orientation="col" />
|
|
94
|
+
</template>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
</template>
|
|
98
|
+
</ComponentDemo>
|
|
99
|
+
|
|
100
|
+
## Sizes
|
|
101
|
+
|
|
102
|
+
Use the `size` prop to apply a size to all buttons in the group.
|
|
103
|
+
|
|
104
|
+
<ComponentDemo>
|
|
105
|
+
<div class="maz-flex maz-flex-col maz-gap-4 maz-items-start">
|
|
106
|
+
<MazBtnGroup v-for="size in sizes" :key="size" :items="basicItems" :size="size" />
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<template #code>
|
|
110
|
+
|
|
111
|
+
```vue
|
|
112
|
+
<template>
|
|
113
|
+
<MazBtnGroup :items="items" size="mini" />
|
|
114
|
+
<MazBtnGroup :items="items" size="xs" />
|
|
115
|
+
<MazBtnGroup :items="items" size="sm" />
|
|
116
|
+
<MazBtnGroup :items="items" size="md" />
|
|
117
|
+
<MazBtnGroup :items="items" size="lg" />
|
|
118
|
+
<MazBtnGroup :items="items" size="xl" />
|
|
119
|
+
</template>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
</template>
|
|
123
|
+
</ComponentDemo>
|
|
124
|
+
|
|
125
|
+
## Colors
|
|
126
|
+
|
|
127
|
+
Use the `color` prop to apply a color to all buttons in the group.
|
|
128
|
+
|
|
129
|
+
<ComponentDemo>
|
|
130
|
+
<div class="maz-flex maz-flex-col maz-gap-4 maz-items-start">
|
|
131
|
+
<MazBtnGroup v-for="color in colors" :key="color" :items="basicItems" :color="color" />
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<template #code>
|
|
135
|
+
|
|
136
|
+
```vue
|
|
137
|
+
<template>
|
|
138
|
+
<MazBtnGroup :items="items" color="primary" />
|
|
139
|
+
<MazBtnGroup :items="items" color="secondary" />
|
|
140
|
+
<MazBtnGroup :items="items" color="info" />
|
|
141
|
+
<MazBtnGroup :items="items" color="success" />
|
|
142
|
+
<MazBtnGroup :items="items" color="warning" />
|
|
143
|
+
<MazBtnGroup :items="items" color="destructive" />
|
|
144
|
+
</template>
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
</template>
|
|
148
|
+
</ComponentDemo>
|
|
149
|
+
|
|
150
|
+
## Button variants
|
|
151
|
+
|
|
152
|
+
Use the `outlined` or `pastel` properties on individual buttons or apply different variants to buttons in the group.
|
|
153
|
+
|
|
154
|
+
### Outlined
|
|
155
|
+
|
|
156
|
+
<br />
|
|
157
|
+
|
|
158
|
+
<ComponentDemo>
|
|
159
|
+
<MazBtnGroup :items="outlinedItems" />
|
|
160
|
+
|
|
161
|
+
<template #code>
|
|
162
|
+
|
|
163
|
+
```vue
|
|
164
|
+
<template>
|
|
165
|
+
<MazBtnGroup :items="items" />
|
|
166
|
+
</template>
|
|
167
|
+
|
|
168
|
+
<script lang="ts" setup>
|
|
169
|
+
import MazBtnGroup from 'maz-ui/components/MazBtnGroup'
|
|
170
|
+
import type { MazButtonGroupOption } from 'maz-ui/components/MazBtnGroup'
|
|
171
|
+
|
|
172
|
+
const items: MazButtonGroupOption[] = [
|
|
173
|
+
{ text: 'Day', outlined: true },
|
|
174
|
+
{ text: 'Week', outlined: true },
|
|
175
|
+
{ text: 'Month', outlined: true },
|
|
176
|
+
]
|
|
177
|
+
</script>
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
</template>
|
|
181
|
+
</ComponentDemo>
|
|
182
|
+
|
|
183
|
+
### Pastel
|
|
184
|
+
|
|
185
|
+
<br />
|
|
186
|
+
|
|
187
|
+
<ComponentDemo>
|
|
188
|
+
<MazBtnGroup :items="pastelItems" />
|
|
189
|
+
|
|
190
|
+
<template #code>
|
|
191
|
+
|
|
192
|
+
```vue
|
|
193
|
+
<template>
|
|
194
|
+
<MazBtnGroup :items="items" />
|
|
195
|
+
</template>
|
|
196
|
+
|
|
197
|
+
<script lang="ts" setup>
|
|
198
|
+
import MazBtnGroup from 'maz-ui/components/MazBtnGroup'
|
|
199
|
+
import type { MazButtonGroupOption } from 'maz-ui/components/MazBtnGroup'
|
|
200
|
+
|
|
201
|
+
const items: MazButtonGroupOption[] = [
|
|
202
|
+
{ text: 'Day', pastel: true },
|
|
203
|
+
{ text: 'Week', pastel: true },
|
|
204
|
+
{ text: 'Month', pastel: true },
|
|
205
|
+
]
|
|
206
|
+
</script>
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
</template>
|
|
210
|
+
</ComponentDemo>
|
|
211
|
+
|
|
212
|
+
### Slot-based variants
|
|
213
|
+
|
|
214
|
+
<br />
|
|
215
|
+
|
|
216
|
+
<ComponentDemo>
|
|
217
|
+
<div class="maz-flex maz-flex-col maz-gap-4 maz-items-start">
|
|
218
|
+
<MazBtnGroup>
|
|
219
|
+
<MazBtn outlined>Edit</MazBtn>
|
|
220
|
+
<MazBtn outlined>Save</MazBtn>
|
|
221
|
+
<MazBtn outlined>Delete</MazBtn>
|
|
222
|
+
</MazBtnGroup>
|
|
223
|
+
<MazBtnGroup>
|
|
224
|
+
<MazBtn pastel>Edit</MazBtn>
|
|
225
|
+
<MazBtn pastel>Save</MazBtn>
|
|
226
|
+
<MazBtn pastel>Delete</MazBtn>
|
|
227
|
+
</MazBtnGroup>
|
|
228
|
+
</div>
|
|
229
|
+
|
|
230
|
+
<template #code>
|
|
231
|
+
|
|
232
|
+
```vue
|
|
233
|
+
<template>
|
|
234
|
+
<MazBtnGroup>
|
|
235
|
+
<MazBtn outlined>Edit</MazBtn>
|
|
236
|
+
<MazBtn outlined>Save</MazBtn>
|
|
237
|
+
<MazBtn outlined>Delete</MazBtn>
|
|
238
|
+
</MazBtnGroup>
|
|
239
|
+
|
|
240
|
+
<MazBtnGroup>
|
|
241
|
+
<MazBtn pastel>Edit</MazBtn>
|
|
242
|
+
<MazBtn pastel>Save</MazBtn>
|
|
243
|
+
<MazBtn pastel>Delete</MazBtn>
|
|
244
|
+
</MazBtnGroup>
|
|
245
|
+
</template>
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
</template>
|
|
249
|
+
</ComponentDemo>
|
|
250
|
+
|
|
251
|
+
## Click handlers
|
|
252
|
+
|
|
253
|
+
Add click handlers to buttons using the `onClick` property in items.
|
|
254
|
+
|
|
255
|
+
<ComponentDemo>
|
|
256
|
+
<MazBtnGroup :items="clickableItems" />
|
|
257
|
+
|
|
258
|
+
<template #code>
|
|
259
|
+
|
|
260
|
+
```vue
|
|
261
|
+
<template>
|
|
262
|
+
<MazBtnGroup :items="items" />
|
|
263
|
+
</template>
|
|
264
|
+
|
|
265
|
+
<script lang="ts" setup>
|
|
266
|
+
import MazBtnGroup from 'maz-ui/components/MazBtnGroup'
|
|
267
|
+
import type { MazButtonGroupOption } from 'maz-ui/components/MazBtnGroup'
|
|
268
|
+
|
|
269
|
+
const items: MazButtonGroupOption[] = [
|
|
270
|
+
{ text: 'Alert', onClick: () => alert('Clicked Alert!') },
|
|
271
|
+
{ text: 'Console', onClick: () => console.log('Clicked Console!') },
|
|
272
|
+
]
|
|
273
|
+
</script>
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
</template>
|
|
277
|
+
</ComponentDemo>
|
|
278
|
+
|
|
279
|
+
## With icons
|
|
280
|
+
|
|
281
|
+
Use the `leftIcon` or `rightIcon` properties to add icons to buttons.
|
|
282
|
+
|
|
283
|
+
<ComponentDemo>
|
|
284
|
+
<MazBtnGroup :items="iconItems" />
|
|
285
|
+
<br />
|
|
286
|
+
<br />
|
|
287
|
+
<MazBtnGroup :items="iconOnlyItems" />
|
|
288
|
+
|
|
289
|
+
<template #code>
|
|
290
|
+
|
|
291
|
+
```vue
|
|
292
|
+
<template>
|
|
293
|
+
<MazBtnGroup :items="items" />
|
|
294
|
+
<MazBtnGroup :items="iconOnlyItems" />
|
|
295
|
+
</template>
|
|
296
|
+
|
|
297
|
+
<script lang="ts" setup>
|
|
298
|
+
import MazBtnGroup from 'maz-ui/components/MazBtnGroup'
|
|
299
|
+
import type { MazButtonGroupOption } from 'maz-ui/components/MazBtnGroup'
|
|
300
|
+
import { MazArrowLeft, MazArrowRight } from '@maz-ui/icons'
|
|
301
|
+
|
|
302
|
+
const items: MazButtonGroupOption[] = [
|
|
303
|
+
{ text: 'Previous', leftIcon: MazArrowLeft, active: true },
|
|
304
|
+
{ text: 'Next', rightIcon: MazArrowRight },
|
|
305
|
+
]
|
|
306
|
+
|
|
307
|
+
const iconOnlyItems: MazButtonGroupOption[] = [
|
|
308
|
+
{ icon: MazBars3, color: 'transparent', outlined: true, active: true },
|
|
309
|
+
{ icon: MazSquares2x2, color: 'transparent', outlined: true },
|
|
310
|
+
]
|
|
311
|
+
</script>
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
</template>
|
|
315
|
+
</ComponentDemo>
|
|
316
|
+
|
|
317
|
+
## With links
|
|
318
|
+
|
|
319
|
+
Use the `href` or `to` properties to create link buttons.
|
|
320
|
+
|
|
321
|
+
<ComponentDemo>
|
|
322
|
+
<MazBtnGroup :items="linkItems" />
|
|
323
|
+
|
|
324
|
+
<template #code>
|
|
325
|
+
|
|
326
|
+
```vue
|
|
327
|
+
<template>
|
|
328
|
+
<MazBtnGroup :items="items" />
|
|
329
|
+
</template>
|
|
330
|
+
|
|
331
|
+
<script lang="ts" setup>
|
|
332
|
+
import MazBtnGroup from 'maz-ui/components/MazBtnGroup'
|
|
333
|
+
import type { MazButtonGroupOption } from 'maz-ui/components/MazBtnGroup'
|
|
334
|
+
|
|
335
|
+
const items: MazButtonGroupOption[] = [
|
|
336
|
+
{ text: 'External Link', href: 'https://maz-ui.com', target: '_blank' },
|
|
337
|
+
{ text: 'Router Link', to: { path: '/components/maz-btn' } },
|
|
338
|
+
]
|
|
339
|
+
</script>
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
</template>
|
|
343
|
+
</ComponentDemo>
|
|
344
|
+
|
|
345
|
+
## Mixed button styles
|
|
346
|
+
|
|
347
|
+
Combine different button styles within the same group.
|
|
348
|
+
|
|
349
|
+
<ComponentDemo>
|
|
350
|
+
<MazBtnGroup :items="mixedItems" />
|
|
351
|
+
|
|
352
|
+
<template #code>
|
|
353
|
+
|
|
354
|
+
```vue
|
|
355
|
+
<template>
|
|
356
|
+
<MazBtnGroup :items="items" />
|
|
357
|
+
</template>
|
|
358
|
+
|
|
359
|
+
<script lang="ts" setup>
|
|
360
|
+
import MazBtnGroup from 'maz-ui/components/MazBtnGroup'
|
|
361
|
+
import type { MazButtonGroupOption } from 'maz-ui/components/MazBtnGroup'
|
|
362
|
+
|
|
363
|
+
const items: MazButtonGroupOption[] = [
|
|
364
|
+
{ text: 'Primary', color: 'primary' },
|
|
365
|
+
{ text: 'Success', color: 'success' },
|
|
366
|
+
{ text: 'Warning', color: 'warning', outlined: true },
|
|
367
|
+
{ text: 'Danger', color: 'destructive', pastel: true },
|
|
368
|
+
]
|
|
369
|
+
</script>
|
|
370
|
+
```
|
|
371
|
+
|
|
372
|
+
</template>
|
|
373
|
+
</ComponentDemo>
|
|
374
|
+
|
|
375
|
+
## Types
|
|
376
|
+
|
|
377
|
+
### MazButtonGroupOption
|
|
378
|
+
|
|
379
|
+
```ts
|
|
380
|
+
import type { MazBtnProps } from 'maz-ui/components/MazBtn'
|
|
381
|
+
import type { RouteLocationRaw } from 'vue-router'
|
|
382
|
+
|
|
383
|
+
interface MazButtonGroupOption extends Omit<MazBtnProps, 'block'> {
|
|
384
|
+
/** The text of the button */
|
|
385
|
+
text: string
|
|
386
|
+
/** Click handler for the button */
|
|
387
|
+
onClick?: () => void
|
|
388
|
+
/** The href for anchor links */
|
|
389
|
+
href?: string
|
|
390
|
+
/** The route for router-link */
|
|
391
|
+
to?: RouteLocationRaw
|
|
392
|
+
}
|
|
393
|
+
```
|
|
394
|
+
|
|
395
|
+
### MazButtonGroupProps
|
|
396
|
+
|
|
397
|
+
```ts
|
|
398
|
+
interface MazButtonGroupProps {
|
|
399
|
+
/**
|
|
400
|
+
* The items for the button group (optional when using slot-based approach)
|
|
401
|
+
* @default undefined
|
|
402
|
+
*/
|
|
403
|
+
items?: MazButtonGroupOption[]
|
|
404
|
+
/**
|
|
405
|
+
* The orientation of the button group
|
|
406
|
+
* @values 'row' | 'col'
|
|
407
|
+
* @default 'row'
|
|
408
|
+
*/
|
|
409
|
+
orientation?: 'row' | 'col'
|
|
410
|
+
/**
|
|
411
|
+
* The size of all buttons (only applies to props-based buttons)
|
|
412
|
+
* @default 'md'
|
|
413
|
+
*/
|
|
414
|
+
size?: 'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
|
415
|
+
/**
|
|
416
|
+
* The color of all buttons (only applies to props-based buttons)
|
|
417
|
+
* @default 'primary'
|
|
418
|
+
*/
|
|
419
|
+
color?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'destructive' | 'transparent' | 'contrast' | 'accent'
|
|
420
|
+
}
|
|
421
|
+
```
|
|
422
|
+
|
|
423
|
+
<!--@include: ./../../.vitepress/generated-docs/maz-btn-group.doc.md-->
|
|
424
|
+
|
|
425
|
+
<script lang="ts" setup>
|
|
426
|
+
import type { MazButtonGroupOption } from 'maz-ui/components/MazBtnGroup'
|
|
427
|
+
import { MazArrowLeft, MazArrowRight, MazBars3, MazSquares2x2 } from '@maz-ui/icons'
|
|
428
|
+
|
|
429
|
+
const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl'] as const
|
|
430
|
+
const colors = ['primary', 'secondary', 'info', 'success', 'warning', 'destructive'] as const
|
|
431
|
+
|
|
432
|
+
const basicItems: MazButtonGroupOption[] = [
|
|
433
|
+
{ text: 'Day' },
|
|
434
|
+
{ text: 'Week', active: true },
|
|
435
|
+
{ text: 'Month' },
|
|
436
|
+
]
|
|
437
|
+
|
|
438
|
+
const outlinedItems: MazButtonGroupOption[] = [
|
|
439
|
+
{ text: 'Day', outlined: true },
|
|
440
|
+
{ text: 'Week', outlined: true, active: true },
|
|
441
|
+
{ text: 'Month', outlined: true },
|
|
442
|
+
]
|
|
443
|
+
|
|
444
|
+
const pastelItems: MazButtonGroupOption[] = [
|
|
445
|
+
{ text: 'Day', pastel: true },
|
|
446
|
+
{ text: 'Week', pastel: true },
|
|
447
|
+
{ text: 'Month', pastel: true },
|
|
448
|
+
]
|
|
449
|
+
|
|
450
|
+
const clickableItems: MazButtonGroupOption[] = [
|
|
451
|
+
{ text: 'Alert', onClick: () => alert('Clicked Alert!') },
|
|
452
|
+
{ text: 'Console', onClick: () => console.log('Clicked Console!') },
|
|
453
|
+
]
|
|
454
|
+
|
|
455
|
+
const iconItems: MazButtonGroupOption[] = [
|
|
456
|
+
{ text: 'Previous', leftIcon: MazArrowLeft },
|
|
457
|
+
{ text: 'Next', rightIcon: MazArrowRight },
|
|
458
|
+
]
|
|
459
|
+
const iconOnlyItems: MazButtonGroupOption[] = [
|
|
460
|
+
{ icon: MazBars3, color: 'primary', active: true },
|
|
461
|
+
{ icon: MazSquares2x2, color: 'transparent', outlined: true },
|
|
462
|
+
]
|
|
463
|
+
|
|
464
|
+
const linkItems: MazButtonGroupOption[] = [
|
|
465
|
+
{ text: 'External Link', href: 'https://maz-ui.com' },
|
|
466
|
+
{ text: 'Router Link', to: { path: '/components/maz-btn' } },
|
|
467
|
+
]
|
|
468
|
+
|
|
469
|
+
const mixedItems: MazButtonGroupOption[] = [
|
|
470
|
+
{ text: 'Primary', color: 'primary' },
|
|
471
|
+
{ text: 'Success', color: 'success' },
|
|
472
|
+
{ text: 'Warning', color: 'warning', outlined: true },
|
|
473
|
+
{ text: 'Danger', color: 'destructive', pastel: true },
|
|
474
|
+
]
|
|
475
|
+
</script>
|
|
@@ -26,7 +26,6 @@ import { ref } from 'vue'
|
|
|
26
26
|
const currentPage = ref(1)
|
|
27
27
|
|
|
28
28
|
const props: MazPaginationProps = {
|
|
29
|
-
resultsSize: 100,
|
|
30
29
|
totalPages: 10,
|
|
31
30
|
activeColor: 'contrast',
|
|
32
31
|
}
|
|
@@ -72,7 +71,6 @@ const props: MazPaginationProps = {
|
|
|
72
71
|
const currentPage = ref(1)
|
|
73
72
|
|
|
74
73
|
const props: Props = {
|
|
75
|
-
resultsSize: 100,
|
|
76
74
|
totalPages: 10,
|
|
77
75
|
activeColor: 'contrast',
|
|
78
76
|
}
|
|
@@ -161,36 +161,57 @@ description: MazStepper is a standalone UI component customizable, reactive for
|
|
|
161
161
|
|
|
162
162
|
## Use `step` property instead of slots
|
|
163
163
|
|
|
164
|
-
|
|
164
|
+
Instead of using slots, you can provide its data with the `steps` property
|
|
165
|
+
|
|
166
|
+
You can use html in all properties
|
|
165
167
|
|
|
166
168
|
<MazStepper
|
|
167
169
|
:steps="[
|
|
168
|
-
{ title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', },
|
|
169
|
-
{ title: 'Title 2', subtitle: 'Subtitle 2
|
|
170
|
-
{ title: 'Title 3', subtitle: 'Subtitle 3', titleInfo: 'Info 3' },
|
|
171
|
-
{ title: 'Title 4', subtitle: 'Subtitle 4', titleInfo: 'Info 4' },
|
|
170
|
+
{ title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', content: 'Content 1' },
|
|
171
|
+
{ title: 'Title 2', subtitle: `<span class='maz-text-primary'>Subtitle 2</span>`, titleInfo: 'Info 2', content: 'Content 2' },
|
|
172
|
+
{ title: 'Title 3', subtitle: 'Subtitle 3', titleInfo: 'Info 3', content: 'Content 3' },
|
|
173
|
+
{ title: 'Title 4', subtitle: 'Subtitle 4', titleInfo: 'Info 4', content: 'Content 4' },
|
|
172
174
|
]"
|
|
173
175
|
>
|
|
174
|
-
|
|
175
|
-
<template #content-2> Content 2 </template>
|
|
176
|
-
<template #content-3> Content 3 </template>
|
|
177
|
-
<template #content-4> Content 4 </template>
|
|
176
|
+
|
|
178
177
|
</MazStepper>
|
|
179
178
|
|
|
180
179
|
```vue{3-8}
|
|
181
180
|
<template>
|
|
182
181
|
<MazStepper
|
|
183
182
|
:steps="[
|
|
184
|
-
{ title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1' },
|
|
185
|
-
{ title: 'Title 2', subtitle: 'Subtitle 2', titleInfo: 'Info 2' },
|
|
186
|
-
{ title: 'Title 3', subtitle: 'Subtitle 3', titleInfo: 'Info 3' },
|
|
187
|
-
{ title: 'Title 4', subtitle: 'Subtitle 4', titleInfo: 'Info 4' },
|
|
183
|
+
{ title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', content: 'Content 1' },
|
|
184
|
+
{ title: 'Title 2', subtitle: '<span class="maz-text-primary">Subtitle 2</span>', titleInfo: 'Info 2', content: 'Content 2' },
|
|
185
|
+
{ title: 'Title 3', subtitle: 'Subtitle 3', titleInfo: 'Info 3', content: 'Content 3' },
|
|
186
|
+
{ title: 'Title 4', subtitle: 'Subtitle 4', titleInfo: 'Info 4', content: 'Content 4' },
|
|
187
|
+
]"
|
|
188
|
+
/>
|
|
189
|
+
</template>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
## Replace default step point
|
|
193
|
+
|
|
194
|
+
<MazStepper
|
|
195
|
+
:steps="[
|
|
196
|
+
{ title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', content: 'Content 1' },
|
|
197
|
+
{ title: 'Title 2', subtitle: 'Subtitle 2', titleInfo: 'Info 2', content: 'Content 2' },
|
|
198
|
+
]">
|
|
199
|
+
<template #point="{ step }">
|
|
200
|
+
<div class="maz-bg-red-500 maz-p-1 maz-size-8 maz-rounded maz-flex maz-flex-center">{{ step }}</div>
|
|
201
|
+
</template>
|
|
202
|
+
</MazStepper>
|
|
203
|
+
|
|
204
|
+
```vue{8-10}
|
|
205
|
+
<template>
|
|
206
|
+
<MazStepper
|
|
207
|
+
:steps="[
|
|
208
|
+
{ title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', content: 'Content 1' },
|
|
209
|
+
{ title: 'Title 2', subtitle: 'Subtitle 2', titleInfo: 'Info 2', content: 'Content 2' },
|
|
188
210
|
]"
|
|
189
211
|
>
|
|
190
|
-
<template #
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
<template #content-4> Content 4 </template>
|
|
212
|
+
<template #point="{ step }">
|
|
213
|
+
<div class="bg-red-500 p-1 size-8 rounded flex flex-center">{{ step }}</div>
|
|
214
|
+
</template>
|
|
194
215
|
</MazStepper>
|
|
195
216
|
</template>
|
|
196
217
|
```
|
|
@@ -537,6 +537,100 @@ const onSubmit = handleSubmit(async (formData) => {
|
|
|
537
537
|
</template>
|
|
538
538
|
</ComponentDemo>
|
|
539
539
|
|
|
540
|
+
## Reset Form
|
|
541
|
+
|
|
542
|
+
Default: `true`
|
|
543
|
+
|
|
544
|
+
You can use the `resetForm` function to reset the form to its initial state.
|
|
545
|
+
|
|
546
|
+
You must use `handleSubmit` to handle the form submission and reset the form.
|
|
547
|
+
|
|
548
|
+
<ComponentDemo>
|
|
549
|
+
<form class="maz-flex maz-flex-col maz-gap-4" @submit="onSubmitReset">
|
|
550
|
+
<MazInput
|
|
551
|
+
v-model="modelReset.name"
|
|
552
|
+
label="Enter your name"
|
|
553
|
+
:hint="errorMessagesReset.name"
|
|
554
|
+
:error="fieldsStatesReset.name.error"
|
|
555
|
+
:success="fieldsStatesReset.name.valid"
|
|
556
|
+
:class="{ 'has-error-reset': fieldsStatesReset.name.error }"
|
|
557
|
+
/>
|
|
558
|
+
<MazInput
|
|
559
|
+
v-model="modelReset.age"
|
|
560
|
+
type="number"
|
|
561
|
+
label="Enter your age"
|
|
562
|
+
:hint="errorMessagesReset.age"
|
|
563
|
+
:error="fieldsStatesReset.age.error"
|
|
564
|
+
:success="fieldsStatesReset.age.valid"
|
|
565
|
+
:class="{ 'has-error-reset': fieldsStatesReset.age.error }"
|
|
566
|
+
/>
|
|
567
|
+
<MazBtn type="submit" :loading="isSubmittingReset">
|
|
568
|
+
Submit
|
|
569
|
+
</MazBtn>
|
|
570
|
+
<MazBtn @click="resetFormReset" color="destructive">
|
|
571
|
+
Reset
|
|
572
|
+
</MazBtn>
|
|
573
|
+
</form>
|
|
574
|
+
|
|
575
|
+
<template #code>
|
|
576
|
+
|
|
577
|
+
```vue{37,38}
|
|
578
|
+
<template>
|
|
579
|
+
<form class="maz-flex maz-flex-col maz-gap-4" @submit="onSubmit">
|
|
580
|
+
<MazInput
|
|
581
|
+
v-model="model.name"
|
|
582
|
+
label="Enter your name"
|
|
583
|
+
:hint="errorMessages.name"
|
|
584
|
+
:error="fieldsStates.name.error"
|
|
585
|
+
:success="fieldsStates.name.valid"
|
|
586
|
+
:class="{ 'has-error-debounced': fieldsStates.name.error }"
|
|
587
|
+
/>
|
|
588
|
+
<MazInput
|
|
589
|
+
v-model="model.age"
|
|
590
|
+
type="number"
|
|
591
|
+
label="Enter your age"
|
|
592
|
+
:hint="errorMessages.age"
|
|
593
|
+
:error="fieldsStates.age.error"
|
|
594
|
+
:success="fieldsStates.age.valid"
|
|
595
|
+
:class="{ 'has-error-debounced': fieldsStates.age.error }"
|
|
596
|
+
/>
|
|
597
|
+
<MazBtn type="submit" :loading="isSubmitting">
|
|
598
|
+
Submit
|
|
599
|
+
</MazBtn>
|
|
600
|
+
<MazBtn @click="resetForm" color="destructive">
|
|
601
|
+
Reset
|
|
602
|
+
</MazBtn>
|
|
603
|
+
</form>
|
|
604
|
+
</template>
|
|
605
|
+
|
|
606
|
+
<script setup lang="ts">
|
|
607
|
+
import { sleep } from 'maz-ui'
|
|
608
|
+
import { useFormValidator, useToast, InferFormValidatorSchema } from 'maz-ui/composables'
|
|
609
|
+
import { string, nonEmpty, pipe, number, minValue, minLength } from 'valibot'
|
|
610
|
+
|
|
611
|
+
const { model, fieldsStates, isValid, isSubmitting, errorMessages, handleSubmit, resetForm } = useFormValidator({
|
|
612
|
+
schema: {
|
|
613
|
+
name: pipe(string('Name is required'), nonEmpty('Name is required'), minLength(3, 'Name must be at least 3 characters')),
|
|
614
|
+
age: pipe(number('Age is required'), nonEmpty('Age is required'), minValue(18, 'Age must be greater than 18')),
|
|
615
|
+
},
|
|
616
|
+
options: {
|
|
617
|
+
resetOnSuccess: true,
|
|
618
|
+
scrollToError: '.has-error-reset',
|
|
619
|
+
},
|
|
620
|
+
})
|
|
621
|
+
|
|
622
|
+
const onSubmit = handleSubmit(async (formData) => {
|
|
623
|
+
// Form submission logic
|
|
624
|
+
console.log(formData)
|
|
625
|
+
await sleep(2000)
|
|
626
|
+
toast.success('Form submitted', { position: 'top' })
|
|
627
|
+
})
|
|
628
|
+
</script>
|
|
629
|
+
```
|
|
630
|
+
|
|
631
|
+
</template>
|
|
632
|
+
</ComponentDemo>
|
|
633
|
+
|
|
540
634
|
## Throlling and Debouncing
|
|
541
635
|
|
|
542
636
|
You can use the `throttledFields` and `debouncedFields` options to throttle or debounce the validation of specific fields.
|
|
@@ -745,7 +839,26 @@ It accepts a validation schema, default values, and configuration options to han
|
|
|
745
839
|
- `fieldsStates`: `FieldsStates` - The validation state of each field.
|
|
746
840
|
- `validateForm`: `(setErrors?: boolean) => Promise<boolean>` - Function to validate the entire form.
|
|
747
841
|
- `scrollToError`: `(selector?: string, options?: { offset?: number }) => void` - Function to scroll to the first field with an error.
|
|
748
|
-
- `handleSubmit`: `successCallback: (model: Model) => Promise<unknown> | unknown, scrollToError?: false | string
|
|
842
|
+
- `handleSubmit`: `(successCallback: (model: Model) => Promise<unknown> | unknown, scrollToError?: false | string, options?: { resetOnSuccess?: boolean }) => Promise<void>` - Form submission handler, the callback is called if the form is valid and passes the complete payload as an argument. The second argument is optional and can be used to disable or provide a CSS selector for scrolling to errors (default '.has-field-error'). The third argument is an optional object with options `resetOnSuccess` that is a boolean and is optional.
|
|
843
|
+
- `resetForm`: `() => void` - Function to reset the form to its initial state.
|
|
844
|
+
|
|
845
|
+
```ts
|
|
846
|
+
interface useFormValidationReturn {
|
|
847
|
+
identifier: string | symbol;
|
|
848
|
+
isDirty: import('vue').ComputedRef<boolean>;
|
|
849
|
+
isSubmitting: Ref<boolean, boolean>;
|
|
850
|
+
isSubmitted: Ref<boolean, boolean>;
|
|
851
|
+
isValid: import('vue').ComputedRef<boolean>;
|
|
852
|
+
errors: import('vue').ComputedRef<Record<ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>, import('./useFormValidator/types').ValidationIssues>>;
|
|
853
|
+
model: Ref<InferSchemaFormValidator<TSchema>, InferSchemaFormValidator<TSchema>>;
|
|
854
|
+
fieldsStates: Ref<FieldsStates<InferSchemaFormValidator<TSchema>, ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>>, FieldsStates<InferSchemaFormValidator<TSchema>, ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>>>;
|
|
855
|
+
validateForm: (setErrors?: boolean) => Promise<void[]>;
|
|
856
|
+
scrollToError: typeof scrollToError;
|
|
857
|
+
handleSubmit: <Func extends (model: InferOutputSchemaFormValidator<TSchema>) => Promise<Awaited<ReturnType<Func>>> | ReturnType<Func>>(successCallback: Func, enableScrollOrSelector?: FormValidatorOptions["scrollToError"], options?: { resetOnSuccess?: boolean }) => (event?: Event) => Promise<ReturnType<Func> | undefined>;
|
|
858
|
+
errorMessages: import('vue').ComputedRef<Record<ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>, string | undefined>>;
|
|
859
|
+
resetForm: () => void;
|
|
860
|
+
}
|
|
861
|
+
```
|
|
749
862
|
|
|
750
863
|
## useFormField
|
|
751
864
|
|
|
@@ -787,6 +900,24 @@ To use the modes `eager`, `progressive` or `blur`, you must use this `useFormFie
|
|
|
787
900
|
- `value`: `WritableComputedRef<T>` - The reactive value of the field with proper TypeScript typing.
|
|
788
901
|
- `validationEvents`: `ComputedRef<{ onBlur?: () => void; }>` - Validation events to bind to the field. They are used to trigger field validation, to be used like this `v-bind="validationEvents"` (components must emit `blur` event to trigger field validation) - Not necessary for `lazy`, `aggressive` validation modes or if you use the component reference when initializing the composable.
|
|
789
902
|
|
|
903
|
+
```ts
|
|
904
|
+
interface useFormFieldReturn {
|
|
905
|
+
hasError: import('vue').ComputedRef<boolean>;
|
|
906
|
+
errors: import('vue').ComputedRef<import('./useFormValidator/types').ValidationIssues>;
|
|
907
|
+
errorMessage: import('vue').ComputedRef<Record<ModelKey, string | undefined>[ModelKey]>;
|
|
908
|
+
isValid: import('vue').ComputedRef<boolean>;
|
|
909
|
+
isDirty: import('vue').ComputedRef<boolean>;
|
|
910
|
+
isBlurred: import('vue').ComputedRef<boolean>;
|
|
911
|
+
isValidated: import('vue').ComputedRef<boolean>;
|
|
912
|
+
isValidating: import('vue').ComputedRef<boolean>;
|
|
913
|
+
mode: import('vue').ComputedRef<"blur" | "eager" | "lazy" | "aggressive" | "progressive" | undefined>;
|
|
914
|
+
value: import('vue').WritableComputedRef<FieldType, FieldType>;
|
|
915
|
+
validationEvents: import('vue').ComputedRef<{
|
|
916
|
+
onBlur: () => void;
|
|
917
|
+
} | undefined>;
|
|
918
|
+
}
|
|
919
|
+
```
|
|
920
|
+
|
|
790
921
|
## Recent Improvements (v4.0.0)
|
|
791
922
|
|
|
792
923
|
### 🚀 Enhanced Type Safety
|
|
@@ -1017,7 +1148,7 @@ interface FormFieldOptions<T> {
|
|
|
1017
1148
|
agree: pipe(boolean('You must agree to the terms and conditions'), literal(true, 'You must agree to the terms and conditions')),
|
|
1018
1149
|
})
|
|
1019
1150
|
|
|
1020
|
-
const { model, isValid, isSubmitting, isDirty, isSubmitted, handleSubmit, errorMessages, fieldsStates } = useFormValidator<typeof schema>({
|
|
1151
|
+
const { model, isValid, isSubmitting, isDirty, isSubmitted, handleSubmit, errorMessages, fieldsStates, resetForm } = useFormValidator<typeof schema>({
|
|
1021
1152
|
schema,
|
|
1022
1153
|
defaultValues: { name: 'John Doe', age: 10 },
|
|
1023
1154
|
options: { mode: 'lazy', scrollToError: '.has-error' },
|
|
@@ -1083,6 +1214,17 @@ interface FormFieldOptions<T> {
|
|
|
1083
1214
|
toast.success('Form submitted', { position: 'top' })
|
|
1084
1215
|
})
|
|
1085
1216
|
|
|
1217
|
+
const { model: modelReset, fieldsStates: fieldsStatesReset, isValid: isValidReset, isSubmitting: isSubmittingReset, errorMessages: errorMessagesReset, handleSubmit: handleSubmitReset, resetForm: resetFormReset } = useFormValidator({
|
|
1218
|
+
schema: {
|
|
1219
|
+
name: pipe(string('Name is required'), nonEmpty('Name is required'), minLength(3, 'Name must be at least 3 characters')),
|
|
1220
|
+
age: pipe(number('Age is required'), nonEmpty('Age is required'), minValue(18, 'Age must be greater than 18')),
|
|
1221
|
+
},
|
|
1222
|
+
options: {
|
|
1223
|
+
resetOnSuccess: true,
|
|
1224
|
+
scrollToError: '.has-error-reset',
|
|
1225
|
+
},
|
|
1226
|
+
})
|
|
1227
|
+
|
|
1086
1228
|
const { model: modelDebounced, fieldsStates: fieldsStatesDebounced, isValid: isValidDebounced, isSubmitting: isSubmittingDebounced, errorMessages: errorMessagesDebounced, handleSubmit: handleSubmitDebounced } = useFormValidator({
|
|
1087
1229
|
schema: {
|
|
1088
1230
|
name: pipe(string('Name is required'), nonEmpty('Name is required'), minLength(3, 'Name must be at least 3 characters')),
|
|
@@ -1095,6 +1237,13 @@ interface FormFieldOptions<T> {
|
|
|
1095
1237
|
},
|
|
1096
1238
|
})
|
|
1097
1239
|
|
|
1240
|
+
const onSubmitReset = handleSubmitReset(async (formData) => {
|
|
1241
|
+
// Form submission logic
|
|
1242
|
+
console.log(formData)
|
|
1243
|
+
await sleep(2000)
|
|
1244
|
+
toast.success(`Form submitted with ${JSON.stringify(formData)}`, { position: 'top' })
|
|
1245
|
+
})
|
|
1246
|
+
|
|
1098
1247
|
const onSubmitDebounced = handleSubmitDebounced(async (formData) => {
|
|
1099
1248
|
// Form submission logic
|
|
1100
1249
|
console.log(formData)
|
|
@@ -21,7 +21,7 @@ All icons follow a consistent naming pattern:
|
|
|
21
21
|
</MazTabs>
|
|
22
22
|
<div class="maz-grid maz-grid-cols-3 maz-gap-2">
|
|
23
23
|
<div v-for="icon in filteredIcons" :key="icon.name" class="maz-flex maz-flex-col maz-items-center maz-gap-3 maz-text-center maz-border maz-border-solid maz-border-divider maz-rounded maz-p-4 maz-truncate hover:maz-bg-surface-600/50 dark:hover:maz-bg-surface-400">
|
|
24
|
-
<
|
|
24
|
+
<component :is="icon.component" class="maz-size-8" />
|
|
25
25
|
<span class="maz-text-xs maz-text-muted maz-truncate">{{ icon.name }}</span>
|
|
26
26
|
<div class="maz-flex maz-flex-row maz-gap-2 maz-w-full">
|
|
27
27
|
<MazBtn v-tooltip="{ text: 'Copy Name', panelClass: 'maz-text-xs' }" class="maz-flex-1" size="xs" color="background" outlined @click="copyIcon(icon.name)" :icon="MazClipboardDocument" />
|
package/docs/src/guide/icons.md
CHANGED
|
@@ -235,7 +235,7 @@ Icons inherit the current text color and can be styled like any other element:
|
|
|
235
235
|
<MazSky class="text-blue-400" />
|
|
236
236
|
|
|
237
237
|
<!-- Interactive states -->
|
|
238
|
-
<
|
|
238
|
+
<MazBtn class="hover:text-blue-500 transition-colors cursor-pointer" />
|
|
239
239
|
|
|
240
240
|
<!-- Animations -->
|
|
241
241
|
<MazSpinner class="animate-spin" />
|
package/docs/src/index.md
CHANGED
|
@@ -11,29 +11,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
|
|
|
11
11
|
# alt: Logo of Maz-UI
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
<section class="
|
|
15
|
-
<h2 class="maz-inline-flex maz-gap-4 mob-l:maz-text-center maz-text-2xl maz-font-semibold dark">
|
|
16
|
-
<span class="maz-text-3xl">🎉</span>
|
|
17
|
-
Maz-UI v4 is here!
|
|
18
|
-
</h2>
|
|
19
|
-
<p class="mob-l:maz-text-center maz-text-lg maz-mb-3 mob-l:maz-max-w-3xl dark">
|
|
20
|
-
Discover the latest major release with improved performance, better tree-shaking, and enhanced TypeScript support, advanced theming, translations, icons set and more.
|
|
21
|
-
</p>
|
|
22
|
-
|
|
23
|
-
<div class="maz-flex maz-gap-2 maz-justify-center maz-flex-wrap maz-flex-col-reverse mob-l:maz-flex-row">
|
|
24
|
-
<MazBtn href="https://v3.maz-ui.com" color="contrast" outlined class="dark maz-w-full mob-l:maz-w-auto">
|
|
25
|
-
V3 documentation
|
|
26
|
-
</MazBtn>
|
|
27
|
-
<MazBtn href="https://github.com/LouisMazel/maz-ui/blob/master/CHANGELOG.md" color="contrast" outlined class="dark maz-w-full mob-l:maz-w-auto" target="blank">
|
|
28
|
-
Changelog
|
|
29
|
-
</MazBtn>
|
|
30
|
-
<MazBtn href="/guide/migration-v4" color="contrast" class="dark maz-w-full mob-l:maz-w-auto">
|
|
31
|
-
Migration guide
|
|
32
|
-
</MazBtn>
|
|
33
|
-
</div>
|
|
34
|
-
</section>
|
|
35
|
-
|
|
36
|
-
<section id="hero" class="maz-pb-6 tab-m:maz-pb-12 vp-raw">
|
|
14
|
+
<section id="hero" class="maz-py-12 tab-m:maz-py-24 vp-raw">
|
|
37
15
|
<div class="maz-mx-auto maz-max-w-3xl">
|
|
38
16
|
<MazAnimatedText
|
|
39
17
|
text="Collection of standalone components, plugins, directives, composables and more"
|
|
@@ -513,10 +491,19 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
|
|
|
513
491
|
</div>
|
|
514
492
|
</section>
|
|
515
493
|
|
|
494
|
+
<Contributors
|
|
495
|
+
repo="louismazel/maz-ui"
|
|
496
|
+
:creators="['LouisMazel']"
|
|
497
|
+
:links="[
|
|
498
|
+
{ username: 'LouisMazel', link: 'https://twitter.com/mazeel', type: 'twitter' },
|
|
499
|
+
]"
|
|
500
|
+
/>
|
|
501
|
+
|
|
516
502
|
<script lang="ts" setup>
|
|
517
503
|
import DemoAuthPage from '../components/DemoAuthPage.vue'
|
|
518
504
|
import DemoDashboardPage from '../components/DemoDashboardPage.vue'
|
|
519
505
|
import DemoProductPage from '../components/DemoProductPage.vue'
|
|
506
|
+
import Contributors from './../.vitepress/theme/components/Contributors.vue'
|
|
520
507
|
|
|
521
508
|
import { ref, computed } from 'vue'
|
|
522
509
|
import { MazStar, MazPlay, MazGithub, MazSun, MazMoon } from '@maz-ui/icons'
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maz-ui/mcp",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "4.
|
|
4
|
+
"version": "4.4.0",
|
|
5
5
|
"description": "Maz-UI ModelContextProtocol Client",
|
|
6
6
|
"author": "Louis Mazel <me@loicmazuel.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -41,18 +41,18 @@
|
|
|
41
41
|
"docs"
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@modelcontextprotocol/sdk": "^1.
|
|
45
|
-
"@maz-ui/
|
|
46
|
-
"@maz-ui/
|
|
44
|
+
"@modelcontextprotocol/sdk": "^1.25.1",
|
|
45
|
+
"@maz-ui/node": "4.4.0",
|
|
46
|
+
"@maz-ui/utils": "4.3.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@modelcontextprotocol/inspector": "^0.
|
|
50
|
-
"@swc/core": "1.15.
|
|
51
|
-
"eslint": "^9.39.
|
|
49
|
+
"@modelcontextprotocol/inspector": "^0.18.0",
|
|
50
|
+
"@swc/core": "1.15.10",
|
|
51
|
+
"eslint": "^9.39.2",
|
|
52
52
|
"lint-staged": "^16.2.7",
|
|
53
|
-
"prettier": "^3.
|
|
53
|
+
"prettier": "^3.7.4",
|
|
54
54
|
"ts-node-maintained": "^10.9.5",
|
|
55
|
-
"tsx": "^4.
|
|
55
|
+
"tsx": "^4.21.0",
|
|
56
56
|
"unbuild": "^3.6.1",
|
|
57
57
|
"@maz-ui/eslint-config": "4.3.2"
|
|
58
58
|
},
|