@maz-ui/mcp 4.7.10-beta.0 → 4.8.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.
Files changed (8) hide show
  1. package/docs/generated-docs/maz-ticker.doc.md +25 -0
  2. package/docs/generated-docs/maz-timeline.doc.md +32 -0
  3. package/docs/src/components/maz-backdrop.md +2 -2
  4. package/docs/src/components/maz-btn-group.md +2 -2
  5. package/docs/src/components/maz-ticker.md +692 -0
  6. package/docs/src/components/maz-timeline.md +418 -0
  7. package/docs/src/composables/use-form-validator.md +1 -1
  8. package/package.json +2 -2
package/docs/generated-docs/maz-ticker.doc.md ADDED
@@ -0,0 +1,25 @@
1
+ ## Props
2
+
3
+ | Name | Description | Type | Required | Default | Possible values |
4
+ | ----------------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------- | ------------ | ---------------------------- |
5
+ | **orientation** | Scrolling direction | `MazTickerOrientation` | No | `horizontal` | `'horizontal' \| 'vertical'` |
6
+ | **reverse** | Reverse the scrolling direction | `boolean` | No | `false` | - |
7
+ | **duration** | Duration of one full animation cycle in seconds | `number` | No | `20` | - |
8
+ | **gap** | Gap between repeated content blocks (CSS value) | `TSLiteralType \| TSLiteralType \| TSLiteralType \| TSLiteralType \| TSLiteralType \| TSLiteralType` | No | `1rem` | - |
9
+ | **repeat** | Number of times the content is duplicated for seamless looping | `number` | No | `4` | - |
10
+ | **pause-on-hover** | Pause animation on mouse hover | `boolean` | No | `false` | - |
11
+ | **pause-on-focus** | Pause animation when a child element receives focus | `boolean` | No | `false` | - |
12
+ | **paused** | Programmatic pause control - takes precedence over pauseOnHover and pauseOnFocus | `boolean` | No | `false` | - |
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) | `string` | No | `33%` | - |
15
+ | **animation-timing-function** | CSS animation timing function | `string` | No | `linear` | - |
16
+
17
+ ## Slots
18
+
19
+ | Name | Description | Bindings |
20
+ | ------------- | ----------------------------------------------------------------------------------------------------- | -------- |
21
+ | before | Static content before the scrolling area | |
22
+ | overlay-start | Custom overlay for the start edge (left in horizontal, top in vertical). Replaces default gradient. | |
23
+ | default | Content to scroll (repeated for seamless animation) | |
24
+ | overlay-end | Custom overlay for the end edge (right in horizontal, bottom in vertical). Replaces default gradient. | |
25
+ | after | Static content after the scrolling area | |
package/docs/generated-docs/maz-timeline.doc.md ADDED
@@ -0,0 +1,32 @@
1
+ ## Props
2
+
3
+ | Name | Description | Type | Required | Default | Possible values |
4
+ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | -------- | ----------- | --------------------------------------------------------------------------------------------------------- |
5
+ | **model-value** | Index of the active step (v-model) | `number` | No | `undefined` | - |
6
+ | **steps** | Array of timeline steps to display | `MazTimelineItem[]` | Yes | `undefined` | - |
7
+ | **direction** | Layout direction of the timeline - `'horizontal'`: always horizontal - `'vertical'`: always vertical - `'auto'`: horizontal above breakpoint, vertical below | `MazTimelineDirection` | No | `auto` | `'horizontal' \| 'vertical' \| 'auto'` |
8
+ | **breakpoint** | CSS media breakpoint for auto direction (below this value → vertical) | `string` | No | `768px` | - |
9
+ | **color** | Color theme for active and completed steps | `MazTimelineColor` | No | `primary` | `'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'destructive' \| 'contrast'` |
10
+ | **size** | Size of the step indicators and typography | `MazSize` | No | `md` | `'mini' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` |
11
+ | **show-step-numbers** | Show step numbers inside the indicators | `boolean` | No | `true` | - |
12
+ | **auto-validate-steps** | Automatically show a checkmark icon for completed steps | `boolean` | No | `true` | - |
13
+ | **clickable** | Enable click interaction on steps | `boolean` | No | `false` | - |
14
+ | **animated** | Enable animations (pulse on active, state transitions, connector progress) | `boolean` | No | `true` | - |
15
+ | **rounded-size** | Border radius of step indicators | `MazTimelineRoundedSize` | No | `full` | `'none' \| 'sm' \| 'md' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` |
16
+
17
+ ## Events
18
+
19
+ | Event name | Properties | Description |
20
+ | ----------------- | ------------------------------------------------- | ---------------------------------------- |
21
+ | update:modelValue | **value** `mixed` - The new active step index | Emitted when the active step changes |
22
+ | click-step | **payload** `mixed` - The step data and its index | Emitted when a clickable step is clicked |
23
+
24
+ ## Slots
25
+
26
+ | Name | Description | Bindings |
27
+ | --------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
28
+ | indicator | Custom content for the step indicator circle | **step** `MazTimelineItem` - The step data<br/>**index** `number` - The step index<br/>**state** `MazTimelineStepState` - The resolved step state<br/><br/> |
29
+ | content | Full custom content area replacing title and subtitle | **step** `MazTimelineItem` - The step data<br/>**index** `number` - The step index<br/>**state** `MazTimelineStepState` - The resolved step state<br/><br/> |
30
+ | title | Custom title content | **step** `MazTimelineItem` - The step data<br/>**index** `number` - The step index<br/>**state** `MazTimelineStepState` - The resolved step state |
31
+ | subtitle | Custom subtitle content | **step** `MazTimelineItem` - The step data<br/>**index** `number` - The step index<br/>**state** `MazTimelineStepState` - The resolved step state |
32
+ | connector | Custom connector between steps | **index** `number` - The index of the step before this connector<br/><br/> |
package/docs/src/components/maz-backdrop.md CHANGED
@@ -87,7 +87,7 @@ A persistent backdrop cannot be closed by clicking outside or pressing Escape. P
87
87
  <div class="demo-content">
88
88
  <h3>I'm persistent!</h3>
89
89
  <p>You can only close me by clicking the button below</p>
90
- <MazBtn @click="persistentOpen = false" color="danger">
90
+ <MazBtn @click="persistentOpen = false" color="destructive">
91
91
  Force Close
92
92
  </MazBtn>
93
93
  </div>
@@ -100,7 +100,7 @@ A persistent backdrop cannot be closed by clicking outside or pressing Escape. P
100
100
  <div class="my-content">
101
101
  <h3>I'm persistent!</h3>
102
102
  <p>You can only close me by clicking the button below</p>
103
- <MazBtn @click="persistentOpen = false" color="danger">
103
+ <MazBtn @click="persistentOpen = false" color="destructive">
104
104
  Force Close
105
105
  </MazBtn>
106
106
  </div>
package/docs/src/components/maz-btn-group.md CHANGED
@@ -364,7 +364,7 @@ const items: MazButtonGroupOption[] = [
364
364
  { text: 'Primary', color: 'primary' },
365
365
  { text: 'Success', color: 'success' },
366
366
  { text: 'Warning', color: 'warning', outlined: true },
367
- { text: 'Danger', color: 'destructive', pastel: true },
367
+ { text: 'Destructive', color: 'destructive', pastel: true },
368
368
  ]
369
369
  </script>
370
370
  ```
@@ -470,6 +470,6 @@ const mixedItems: MazButtonGroupOption[] = [
470
470
  { text: 'Primary', color: 'primary' },
471
471
  { text: 'Success', color: 'success' },
472
472
  { text: 'Warning', color: 'warning', outlined: true },
473
- { text: 'Danger', color: 'destructive', pastel: true },
473
+ { text: 'Destructive', color: 'destructive', pastel: true },
474
474
  ]
475
475
  </script>
package/docs/src/components/maz-ticker.md ADDED
@@ -0,0 +1,692 @@
1
+ ---
2
+ title: MazTicker
3
+ description: MazTicker is a scrolling ticker component that continuously animates content in a loop with configurable speed, direction, pause controls, and gradient overlays
4
+ ---
5
+
6
+ # {{ $frontmatter.title }}
7
+
8
+ {{ $frontmatter.description }}
9
+
10
+ <!--@include: ./../../.vitepress/mixins/getting-started.md-->
11
+
12
+ ## Basic usage
13
+
14
+ <ComponentDemo expanded>
15
+ <MazTicker>
16
+ <span>Vue 3</span>
17
+ <span>Nuxt 3</span>
18
+ <span>TypeScript</span>
19
+ <span>TailwindCSS</span>
20
+ <span>Maz UI</span>
21
+ </MazTicker>
22
+
23
+ <template #code>
24
+
25
+ ```vue
26
+ <template>
27
+ <MazTicker>
28
+ <span>Vue 3</span>
29
+ <span>Nuxt 3</span>
30
+ <span>TypeScript</span>
31
+ <span>TailwindCSS</span>
32
+ <span>Maz UI</span>
33
+ </MazTicker>
34
+ </template>
35
+
36
+ <script lang="ts" setup>
37
+ import MazTicker from 'maz-ui/components/MazTicker'
38
+ </script>
39
+ ```
40
+
41
+ </template>
42
+ </ComponentDemo>
43
+
44
+ ## Screenshots gallery
45
+
46
+ A vertical ticker with images, similar to a screenshot showcase. Uses `orientation="vertical"` with `pause-on-hover` for user-friendly browsing.
47
+
48
+ <ComponentDemo>
49
+ <div class="maz-flex maz-gap-4 maz-overflow-hidden" style="height: 300px">
50
+ <MazTicker orientation="vertical" :overlay="false" :duration="30" pause-on-hover>
51
+ <img
52
+ v-for="i in 4" :key="i" :src="`https://picsum.photos/seed/maz-ticker-${i}/400/225`"
53
+ :alt="`Screenshot ${i}`" class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
54
+ style="width: 400px; height: 225px"
55
+ />
56
+ </MazTicker>
57
+ <MazTicker orientation="vertical" :overlay="false" :duration="30" reverse pause-on-hover>
58
+ <img
59
+ v-for="i in 4" :key="i" :src="`https://picsum.photos/seed/maz-ticker-${i + 4}/400/225`"
60
+ :alt="`Screenshot ${i + 4}`" class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
61
+ style="width: 400px; height: 225px"
62
+ />
63
+ </MazTicker>
64
+ <MazTicker class="maz-hidden md:maz-flex" orientation="vertical" :overlay="false" :duration="30" pause-on-hover>
65
+ <img
66
+ v-for="i in 4" :key="i" :src="`https://picsum.photos/seed/maz-ticker-${i + 8}/400/225`"
67
+ :alt="`Screenshot ${i + 8}`" class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
68
+ style="width: 400px; height: 225px"
69
+ />
70
+ </MazTicker>
71
+ </div>
72
+
73
+ <template #code>
74
+
75
+ ```vue
76
+ <template>
77
+ <div class="maz-flex maz-gap-4 maz-overflow-hidden" style="height: 300px">
78
+ <MazTicker
79
+ orientation="vertical"
80
+ :overlay="false"
81
+ :duration="30"
82
+ pause-on-hover
83
+ >
84
+ <img
85
+ v-for="i in 4"
86
+ :key="i"
87
+ :src="`https://picsum.photos/seed/maz-ticker-${i}/400/225`"
88
+ :alt="`Screenshot ${i}`"
89
+ class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
90
+ style="width: 400px; height: 225px"
91
+ />
92
+ </MazTicker>
93
+ <MazTicker
94
+ orientation="vertical"
95
+ :overlay="false"
96
+ :duration="30"
97
+ reverse
98
+ pause-on-hover
99
+ >
100
+ <img
101
+ v-for="i in 4"
102
+ :key="i"
103
+ :src="`https://picsum.photos/seed/maz-ticker-${i + 4}/400/225`"
104
+ :alt="`Screenshot ${i + 4}`"
105
+ class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
106
+ style="width: 400px; height: 225px"
107
+ />
108
+ </MazTicker>
109
+ <MazTicker
110
+ class="maz-hidden md:maz-flex"
111
+ orientation="vertical"
112
+ :overlay="false"
113
+ :duration="30"
114
+ pause-on-hover
115
+ >
116
+ <img
117
+ v-for="i in 4"
118
+ :key="i"
119
+ :src="`https://picsum.photos/seed/maz-ticker-${i + 8}/400/225`"
120
+ :alt="`Screenshot ${i + 8}`"
121
+ class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
122
+ style="width: 400px; height: 225px"
123
+ />
124
+ </MazTicker>
125
+ </div>
126
+ </template>
127
+
128
+ <script lang="ts" setup>
129
+ import MazTicker from 'maz-ui/components/MazTicker'
130
+ </script>
131
+ ```
132
+
133
+ </template>
134
+ </ComponentDemo>
135
+
136
+ ## 3D Screenshots showcase
137
+
138
+ Create an eye-catching 3D perspective effect with tilted vertical tickers, inspired by the Nuxt UI Marquee screenshots demo.
139
+
140
+ <ComponentDemo>
141
+ <div class="maz-overflow-hidden maz-rounded-lg maz-bg-gray-100 dark:maz-bg-gray-800" style="height: 400px; perspective: 1500px">
142
+ <div class="maz-flex maz-gap-4" style="height: 900px; margin-top: -300px; margin-left: -150px; transform: rotateX(55deg) rotateZ(30deg); transform-origin: center center">
143
+ <MazTicker reverse orientation="vertical" :overlay="false" :duration="40" style="width: 300px; flex-shrink: 0">
144
+ <img
145
+ v-for="i in 4"
146
+ :key="i"
147
+ :src="`https://picsum.photos/seed/maz-3d-${i}/460/258`"
148
+ :alt="`Screenshot ${i}`"
149
+ width="460"
150
+ height="258"
151
+ loading="lazy"
152
+ class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
153
+ style="width: 300px; height: 168px"
154
+ />
155
+ </MazTicker>
156
+ <MazTicker orientation="vertical" :overlay="false" :duration="40" style="width: 300px; flex-shrink: 0">
157
+ <img
158
+ v-for="i in 4"
159
+ :key="i"
160
+ :src="`https://picsum.photos/seed/maz-3d-${i + 4}/460/258`"
161
+ :alt="`Screenshot ${i + 4}`"
162
+ width="460"
163
+ height="258"
164
+ loading="lazy"
165
+ class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
166
+ style="width: 300px; height: 168px"
167
+ />
168
+ </MazTicker>
169
+ <MazTicker reverse orientation="vertical" :overlay="false" :duration="40" style="width: 300px; flex-shrink: 0">
170
+ <img
171
+ v-for="i in 4"
172
+ :key="i"
173
+ :src="`https://picsum.photos/seed/maz-3d-${i + 8}/460/258`"
174
+ :alt="`Screenshot ${i + 8}`"
175
+ width="460"
176
+ height="258"
177
+ loading="lazy"
178
+ class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
179
+ style="width: 300px; height: 168px"
180
+ />
181
+ </MazTicker>
182
+ </div>
183
+ </div>
184
+
185
+ <template #code>
186
+
187
+ ```vue
188
+ <template>
189
+ <div
190
+ class="maz-overflow-hidden maz-rounded-lg maz-bg-gray-100 dark:maz-bg-gray-800"
191
+ style="height: 400px; perspective: 1500px"
192
+ >
193
+ <div
194
+ class="maz-flex maz-gap-4"
195
+ style="height: 900px; margin-top: -300px; margin-left: -150px; transform: rotateX(55deg) rotateZ(30deg); transform-origin: center center"
196
+ >
197
+ <MazTicker
198
+ reverse
199
+ orientation="vertical"
200
+ :overlay="false"
201
+ :duration="40"
202
+ style="width: 300px; flex-shrink: 0"
203
+ >
204
+ <img
205
+ v-for="i in 4"
206
+ :key="i"
207
+ :src="`https://picsum.photos/seed/maz-3d-${i}/460/258`"
208
+ :alt="`Screenshot ${i}`"
209
+ width="460"
210
+ height="258"
211
+ loading="lazy"
212
+ class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
213
+ style="width: 300px; height: 168px"
214
+ />
215
+ </MazTicker>
216
+ <MazTicker
217
+ orientation="vertical"
218
+ :overlay="false"
219
+ :duration="40"
220
+ style="width: 300px; flex-shrink: 0"
221
+ >
222
+ <img
223
+ v-for="i in 4"
224
+ :key="i"
225
+ :src="`https://picsum.photos/seed/maz-3d-${i + 4}/460/258`"
226
+ :alt="`Screenshot ${i + 4}`"
227
+ width="460"
228
+ height="258"
229
+ loading="lazy"
230
+ class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
231
+ style="width: 300px; height: 168px"
232
+ />
233
+ </MazTicker>
234
+ <MazTicker
235
+ reverse
236
+ orientation="vertical"
237
+ :overlay="false"
238
+ :duration="40"
239
+ style="width: 300px; flex-shrink: 0"
240
+ >
241
+ <img
242
+ v-for="i in 4"
243
+ :key="i"
244
+ :src="`https://picsum.photos/seed/maz-3d-${i + 8}/460/258`"
245
+ :alt="`Screenshot ${i + 8}`"
246
+ width="460"
247
+ height="258"
248
+ loading="lazy"
249
+ class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
250
+ style="width: 300px; height: 168px"
251
+ />
252
+ </MazTicker>
253
+ </div>
254
+ </div>
255
+ </template>
256
+
257
+ <script lang="ts" setup>
258
+ import MazTicker from 'maz-ui/components/MazTicker'
259
+ </script>
260
+ ```
261
+
262
+ </template>
263
+ </ComponentDemo>
264
+
265
+ ## Orientation
266
+
267
+ ### Horizontal (default)
268
+
269
+ By default, the ticker will scroll horizontally.
270
+
271
+ <ComponentDemo>
272
+ <MazTicker orientation="horizontal">
273
+ <span>Item 1</span>
274
+ <span>Item 2</span>
275
+ <span>Item 3</span>
276
+ </MazTicker>
277
+
278
+ <template #code>
279
+
280
+ ```vue
281
+ <template>
282
+ <MazTicker orientation="horizontal">
283
+ <span>Item 1</span>
284
+ <span>Item 2</span>
285
+ <span>Item 3</span>
286
+ </MazTicker>
287
+ </template>
288
+ ```
289
+
290
+ </template>
291
+ </ComponentDemo>
292
+
293
+ ### Vertical
294
+
295
+ Otherwise, the ticker will scroll vertically.
296
+
297
+ <ComponentDemo>
298
+ <div style="height: 100px">
299
+ <MazTicker orientation="vertical">
300
+ <div class="maz-py-2">Item 1</div>
301
+ <div class="maz-py-2">Item 2</div>
302
+ <div class="maz-py-2">Item 3</div>
303
+ </MazTicker>
304
+ </div>
305
+
306
+ <template #code>
307
+
308
+ ```vue
309
+ <template>
310
+ <div style="height: 100px">
311
+ <MazTicker orientation="vertical">
312
+ <div class="maz-py-2">Item 1</div>
313
+ <div class="maz-py-2">Item 2</div>
314
+ <div class="maz-py-2">Item 3</div>
315
+ </MazTicker>
316
+ </div>
317
+ </template>
318
+ ```
319
+
320
+ </template>
321
+ </ComponentDemo>
322
+
323
+ ## Reverse direction
324
+
325
+ <ComponentDemo>
326
+ <div class="maz-flex maz-flex-col maz-gap-4">
327
+ <MazTicker>
328
+ <span>Normal direction</span>
329
+ </MazTicker>
330
+ <MazTicker reverse>
331
+ <span>Reverse direction</span>
332
+ </MazTicker>
333
+ </div>
334
+
335
+ <template #code>
336
+
337
+ ```vue
338
+ <template>
339
+ <MazTicker>
340
+ <span>Normal direction</span>
341
+ </MazTicker>
342
+ <MazTicker reverse>
343
+ <span>Reverse direction</span>
344
+ </MazTicker>
345
+ </template>
346
+ ```
347
+
348
+ </template>
349
+ </ComponentDemo>
350
+
351
+ ## Speed control
352
+
353
+ Control the animation speed with the `duration` prop (in seconds). Lower values = faster.
354
+
355
+ <ComponentDemo>
356
+ <div class="maz-flex maz-flex-col maz-gap-4">
357
+ <MazTicker :duration="5" :repeat="20">
358
+ <span>Fast (5s)</span>
359
+ </MazTicker>
360
+ <MazTicker :duration="20" :repeat="20">
361
+ <span>Normal (20s)</span>
362
+ </MazTicker>
363
+ <MazTicker :duration="40" :repeat="20">
364
+ <span>Slow (40s)</span>
365
+ </MazTicker>
366
+ </div>
367
+
368
+ <template #code>
369
+
370
+ ```vue
371
+ <template>
372
+ <MazTicker :duration="5">
373
+ <span>Fast (5s)</span>
374
+ </MazTicker>
375
+ <MazTicker :duration="20">
376
+ <span>Normal (20s)</span>
377
+ </MazTicker>
378
+ <MazTicker :duration="40">
379
+ <span>Slow (40s)</span>
380
+ </MazTicker>
381
+ </template>
382
+ ```
383
+
384
+ </template>
385
+ </ComponentDemo>
386
+
387
+ ## Repeat
388
+
389
+ The `repeat` prop controls how many times the content is duplicated to create a seamless loop. The default value is `4`. Increase it when your content is short to avoid visible gaps during the animation.
390
+
391
+ <ComponentDemo>
392
+ <div class="maz-flex maz-flex-col maz-gap-4">
393
+ <MazTicker :repeat="2">
394
+ <span>Repeat 2</span>
395
+ </MazTicker>
396
+ <MazTicker :repeat="10">
397
+ <span>Repeat 10</span>
398
+ </MazTicker>
399
+ </div>
400
+
401
+ <template #code>
402
+
403
+ ```vue
404
+ <template>
405
+ <MazTicker :repeat="2">
406
+ <span>Repeat 2</span>
407
+ </MazTicker>
408
+ <MazTicker :repeat="10">
409
+ <span>Repeat 10</span>
410
+ </MazTicker>
411
+ </template>
412
+ ```
413
+
414
+ </template>
415
+ </ComponentDemo>
416
+
417
+ ## Custom gap
418
+
419
+ <ComponentDemo>
420
+ <div class="maz-flex maz-flex-col maz-gap-4">
421
+ <MazTicker gap="0.5rem" :repeat="20">
422
+ <span>Small gap</span>
423
+ </MazTicker>
424
+ <MazTicker gap="3rem" :repeat="20">
425
+ <span>Large gap</span>
426
+ </MazTicker>
427
+ </div>
428
+
429
+ <template #code>
430
+
431
+ ```vue
432
+ <template>
433
+ <MazTicker gap="0.5rem">
434
+ <span>Small gap</span>
435
+ </MazTicker>
436
+ <MazTicker gap="3rem">
437
+ <span>Large gap</span>
438
+ </MazTicker>
439
+ </template>
440
+ ```
441
+
442
+ </template>
443
+ </ComponentDemo>
444
+
445
+ ## Overlay
446
+
447
+ ### Without overlay
448
+
449
+ You can disable the overlay by setting the `overlay` prop to `false`.
450
+
451
+ <ComponentDemo>
452
+ <MazTicker :overlay="false" :repeat="10">
453
+ <span>No gradient overlay</span>
454
+ </MazTicker>
455
+
456
+ <template #code>
457
+
458
+ ```vue
459
+ <template>
460
+ <MazTicker :overlay="false" :repeat="10">
461
+ <span>No gradient overlay</span>
462
+ </MazTicker>
463
+ </template>
464
+ ```
465
+
466
+ </template>
467
+ </ComponentDemo>
468
+
469
+ ### Custom overlay size
470
+
471
+ You can change the size of the overlay by setting the `overlay-size` prop to a CSS value.
472
+
473
+ <ComponentDemo>
474
+ <div class="maz-flex maz-flex-col maz-gap-4">
475
+ <MazTicker overlay-size="10%" :repeat="10">
476
+ <span>Small overlay (10%)</span>
477
+ </MazTicker>
478
+ <MazTicker overlay-size="50%" :repeat="10">
479
+ <span>Large overlay (50%)</span>
480
+ </MazTicker>
481
+ </div>
482
+
483
+ <template #code>
484
+
485
+ ```vue
486
+ <template>
487
+ <MazTicker overlay-size="10%" :repeat="10">
488
+ <span>Small overlay (10%)</span>
489
+ </MazTicker>
490
+ <MazTicker overlay-size="50%" :repeat="10">
491
+ <span>Large overlay (50%)</span>
492
+ </MazTicker>
493
+ </template>
494
+ ```
495
+
496
+ </template>
497
+ </ComponentDemo>
498
+
499
+ ## Pause controls
500
+
501
+ ### Pause on hover
502
+
503
+ When a child element is hovered, the animation will pause.
504
+
505
+ <ComponentDemo>
506
+ <MazTicker pause-on-hover>
507
+ <span>Hover me to pause</span>
508
+ </MazTicker>
509
+
510
+ <template #code>
511
+
512
+ ```vue
513
+ <template>
514
+ <MazTicker pause-on-hover>
515
+ <span>Hover me to pause</span>
516
+ </MazTicker>
517
+ </template>
518
+ ```
519
+
520
+ </template>
521
+ </ComponentDemo>
522
+
523
+ ### Pause on focus
524
+
525
+ When a child element is focused, the animation will pause.
526
+
527
+ <ComponentDemo>
528
+ <MazTicker pause-on-focus>
529
+ <a href="#">Focusable link 1</a>
530
+ <a href="#">Focusable link 2</a>
531
+ <a href="#">Focusable link 3</a>
532
+ </MazTicker>
533
+
534
+ <template #code>
535
+
536
+ ```vue
537
+ <template>
538
+ <MazTicker pause-on-focus>
539
+ <a href="#">Focusable link 1</a>
540
+ <a href="#">Focusable link 2</a>
541
+ <a href="#">Focusable link 3</a>
542
+ </MazTicker>
543
+ </template>
544
+ ```
545
+
546
+ </template>
547
+ </ComponentDemo>
548
+
549
+ ### Programmatic pause
550
+
551
+ You can control the animation programmatically with the `paused` prop.
552
+
553
+ <ComponentDemo>
554
+ <div class="maz-flex maz-flex-col maz-gap-4">
555
+ <MazBtn size="sm" @click="isPaused = !isPaused">
556
+ {{ isPaused ? 'Resume' : 'Pause' }}
557
+ </MazBtn>
558
+ <MazTicker :paused="isPaused">
559
+ <span>Controlled by button</span>
560
+ </MazTicker>
561
+ </div>
562
+
563
+ <template #code>
564
+
565
+ ```vue
566
+ <template>
567
+ <MazBtn size="sm" @click="isPaused = !isPaused">
568
+ {{ isPaused ? 'Resume' : 'Pause' }}
569
+ </MazBtn>
570
+ <MazTicker :paused="isPaused">
571
+ <span>Controlled by button</span>
572
+ </MazTicker>
573
+ </template>
574
+
575
+ <script lang="ts" setup>
576
+ import { ref } from 'vue'
577
+ import MazTicker from 'maz-ui/components/MazTicker'
578
+ import MazBtn from 'maz-ui/components/MazBtn'
579
+
580
+ const isPaused = ref(false)
581
+ </script>
582
+ ```
583
+
584
+ </template>
585
+ </ComponentDemo>
586
+
587
+ ## Custom content
588
+
589
+ MazTicker accepts any HTML content, not just text.
590
+
591
+ <ComponentDemo>
592
+ <MazTicker pause-on-hover :duration="15">
593
+ <MazBadge color="primary">Vue 3</MazBadge>
594
+ <MazBadge color="success">Nuxt 3</MazBadge>
595
+ <MazBadge color="info">TypeScript</MazBadge>
596
+ <MazBadge color="warning">TailwindCSS</MazBadge>
597
+ <MazBadge color="accent">Maz UI</MazBadge>
598
+ </MazTicker>
599
+
600
+ <template #code>
601
+
602
+ ```vue
603
+ <template>
604
+ <MazTicker pause-on-hover :duration="15">
605
+ <MazBadge color="primary">Vue 3</MazBadge>
606
+ <MazBadge color="success">Nuxt 3</MazBadge>
607
+ <MazBadge color="info">TypeScript</MazBadge>
608
+ <MazBadge color="warning">TailwindCSS</MazBadge>
609
+ <MazBadge color="accent">Maz UI</MazBadge>
610
+ </MazTicker>
611
+ </template>
612
+
613
+ <script lang="ts" setup>
614
+ import MazTicker from 'maz-ui/components/MazTicker'
615
+ import MazBadge from 'maz-ui/components/MazBadge'
616
+ </script>
617
+ ```
618
+
619
+ </template>
620
+ </ComponentDemo>
621
+
622
+ ## Slots
623
+
624
+ ### Before and after
625
+
626
+ Replace the default before and after slots with custom content.
627
+
628
+ <ComponentDemo>
629
+ <MazTicker>
630
+ <template #before>
631
+ <div class="maz-flex maz-items-center maz-px-4 maz-font-semibold">Latest:</div>
632
+ </template>
633
+ <span>Breaking news item</span>
634
+ <template #after>
635
+ <div class="maz-flex maz-items-center maz-px-4 maz-font-semibold">End</div>
636
+ </template>
637
+ </MazTicker>
638
+
639
+ <template #code>
640
+
641
+ ```vue
642
+ <template>
643
+ <MazTicker>
644
+ <template #before>
645
+ <div class="maz-flex maz-items-center maz-px-4 maz-font-semibold">Latest:</div>
646
+ </template>
647
+ <span>Breaking news item</span>
648
+ <template #after>
649
+ <div class="maz-flex maz-items-center maz-px-4 maz-font-semibold">End</div>
650
+ </template>
651
+ </MazTicker>
652
+ </template>
653
+ ```
654
+
655
+ </template>
656
+ </ComponentDemo>
657
+
658
+ ## Timing function
659
+
660
+ <ComponentDemo>
661
+ <div class="maz-flex maz-flex-col maz-gap-4">
662
+ <MazTicker animation-timing-function="linear" :repeat="10">
663
+ <span>Linear (default)</span>
664
+ </MazTicker>
665
+ <MazTicker animation-timing-function="ease-in-out" :repeat="10">
666
+ <span>Ease in out</span>
667
+ </MazTicker>
668
+ </div>
669
+
670
+ <template #code>
671
+
672
+ ```vue
673
+ <template>
674
+ <MazTicker animation-timing-function="linear" :repeat="10">
675
+ <span>Linear (default)</span>
676
+ </MazTicker>
677
+ <MazTicker animation-timing-function="ease-in-out" :repeat="10">
678
+ <span>Ease in out</span>
679
+ </MazTicker>
680
+ </template>
681
+ ```
682
+
683
+ </template>
684
+ </ComponentDemo>
685
+
686
+ <script lang="ts" setup>
687
+ import { ref } from 'vue'
688
+
689
+ const isPaused = ref(false)
690
+ </script>
691
+
692
+ <!--@include: ./../../.vitepress/generated-docs/maz-ticker.doc.md-->
package/docs/src/components/maz-timeline.md ADDED
@@ -0,0 +1,418 @@
1
+ ---
2
+ title: MazTimeline
3
+ description: MazTimeline is a step/progress timeline component for Vue 3 with support for horizontal, vertical, and responsive layouts, customizable colors, sizes, step states, and scoped slots
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
+ <MazTimeline v-model="currentStep" :steps="steps" />
16
+
17
+ <template #code>
18
+
19
+ ```vue
20
+ <template>
21
+ <MazTimeline v-model="currentStep" :steps="steps" />
22
+ </template>
23
+
24
+ <script lang="ts" setup>
25
+ import { ref } from 'vue'
26
+ import MazTimeline from 'maz-ui/components/MazTimeline'
27
+
28
+ const currentStep = ref(1)
29
+ const steps = [
30
+ { title: 'Account', subtitle: 'Create your account' },
31
+ { title: 'Profile', subtitle: 'Set up your profile' },
32
+ { title: 'Settings', subtitle: 'Configure preferences' },
33
+ { title: 'Complete', subtitle: 'All done!' },
34
+ ]
35
+ </script>
36
+ ```
37
+
38
+ </template>
39
+ </ComponentDemo>
40
+
41
+ ## Directions
42
+
43
+ ### Horizontal
44
+
45
+ <ComponentDemo>
46
+ <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal" />
47
+
48
+ <template #code>
49
+
50
+ ```vue
51
+ <template>
52
+ <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal" />
53
+ </template>
54
+ ```
55
+
56
+ </template>
57
+ </ComponentDemo>
58
+
59
+ ### Vertical
60
+
61
+ <ComponentDemo>
62
+ <MazTimeline v-model="currentStep" :steps="steps" direction="vertical" />
63
+
64
+ <template #code>
65
+
66
+ ```vue
67
+ <template>
68
+ <MazTimeline v-model="currentStep" :steps="steps" direction="vertical" />
69
+ </template>
70
+ ```
71
+
72
+ </template>
73
+ </ComponentDemo>
74
+
75
+ ### Auto (responsive)
76
+
77
+ The default direction is `'auto'`, which switches from horizontal to vertical based on the `breakpoint` prop (default: `'768px'`).
78
+
79
+ <ComponentDemo>
80
+ <MazTimeline v-model="currentStep" :steps="steps" direction="auto" breakpoint="768px" />
81
+
82
+ <template #code>
83
+
84
+ ```vue
85
+ <template>
86
+ <MazTimeline
87
+ v-model="currentStep"
88
+ :steps="steps"
89
+ direction="auto"
90
+ breakpoint="768px"
91
+ />
92
+ </template>
93
+ ```
94
+
95
+ </template>
96
+ </ComponentDemo>
97
+
98
+ ## Colors
99
+
100
+ Use the `color` prop to change the theme color.
101
+
102
+ <ComponentDemo>
103
+ <div class="maz-flex maz-flex-col maz-gap-6">
104
+ <MazTimeline v-for="color in colors" :key="color" :model-value="1" :steps="colorSteps" :color="color" direction="horizontal" />
105
+ </div>
106
+
107
+ <template #code>
108
+
109
+ ```vue
110
+ <template>
111
+ <MazTimeline :steps="steps" color="primary" />
112
+ <MazTimeline :steps="steps" color="secondary" />
113
+ <MazTimeline :steps="steps" color="info" />
114
+ <MazTimeline :steps="steps" color="success" />
115
+ <MazTimeline :steps="steps" color="warning" />
116
+ <MazTimeline :steps="steps" color="destructive" />
117
+ </template>
118
+ ```
119
+
120
+ </template>
121
+ </ComponentDemo>
122
+
123
+ ## Sizes
124
+
125
+ Use the `size` prop to change the indicator size.
126
+
127
+ <ComponentDemo>
128
+ <div class="maz-flex maz-flex-col maz-gap-6">
129
+ <MazTimeline v-for="size in sizes" :key="size" :model-value="1" :steps="colorSteps" :size="size" direction="horizontal" />
130
+ </div>
131
+
132
+ <template #code>
133
+
134
+ ```vue
135
+ <template>
136
+ <MazTimeline :steps="steps" size="mini" />
137
+ <MazTimeline :steps="steps" size="xs" />
138
+ <MazTimeline :steps="steps" size="sm" />
139
+ <MazTimeline :steps="steps" size="md" />
140
+ <MazTimeline :steps="steps" size="lg" />
141
+ <MazTimeline :steps="steps" size="xl" />
142
+ </template>
143
+ ```
144
+
145
+ </template>
146
+ </ComponentDemo>
147
+
148
+ ## Step states
149
+
150
+ Each step can have a manual `state` property: `'completed'`, `'active'`, `'error'`, `'warning'`, or `'pending'`.
151
+
152
+ <ComponentDemo>
153
+ <MazTimeline :steps="stateSteps" direction="horizontal" />
154
+
155
+ <template #code>
156
+
157
+ ```vue
158
+ <template>
159
+ <MazTimeline :steps="stateSteps" direction="horizontal" />
160
+ </template>
161
+
162
+ <script lang="ts" setup>
163
+ const stateSteps = [
164
+ { title: 'Completed', subtitle: 'Step finished', state: 'completed' },
165
+ { title: 'Active', subtitle: 'In progress', state: 'active' },
166
+ { title: 'Error', subtitle: 'Something went wrong', state: 'error' },
167
+ { title: 'Warning', subtitle: 'Needs attention', state: 'warning' },
168
+ { title: 'Pending', subtitle: 'Not started', state: 'pending' },
169
+ ]
170
+ </script>
171
+ ```
172
+
173
+ </template>
174
+ </ComponentDemo>
175
+
176
+ ## Clickable
177
+
178
+ Enable `clickable` to allow users to navigate between steps by clicking on them. The `click-step` event is emitted with the step index.
179
+
180
+ <ComponentDemo>
181
+ <MazTimeline v-model="clickableStep" :steps="steps" clickable direction="horizontal" />
182
+
183
+ <template #code>
184
+
185
+ ```vue
186
+ <template>
187
+ <MazTimeline v-model="clickableStep" :steps="steps" clickable />
188
+ </template>
189
+
190
+ <script lang="ts" setup>
191
+ import { ref } from 'vue'
192
+
193
+ const clickableStep = ref(0)
194
+ </script>
195
+ ```
196
+
197
+ </template>
198
+ </ComponentDemo>
199
+
200
+ ## Disabled steps
201
+
202
+ Individual steps can be disabled by setting `disabled: true` on the step object.
203
+
204
+ <ComponentDemo>
205
+ <MazTimeline v-model="currentStep" :steps="disabledSteps" clickable direction="horizontal" />
206
+
207
+ <template #code>
208
+
209
+ ```vue
210
+ <template>
211
+ <MazTimeline v-model="currentStep" :steps="disabledSteps" clickable />
212
+ </template>
213
+
214
+ <script lang="ts" setup>
215
+ const disabledSteps = [
216
+ { title: 'Account', subtitle: 'Create your account' },
217
+ { title: 'Profile', subtitle: 'Set up your profile' },
218
+ { title: 'Settings', subtitle: 'Locked', disabled: true },
219
+ { title: 'Complete', subtitle: 'All done!' },
220
+ ]
221
+ </script>
222
+ ```
223
+
224
+ </template>
225
+ </ComponentDemo>
226
+
227
+ ## Without step numbers
228
+
229
+ Hide the step numbers inside indicators with `:show-step-numbers="false"`.
230
+
231
+ <ComponentDemo>
232
+ <MazTimeline v-model="currentStep" :steps="steps" :show-step-numbers="false" direction="horizontal" />
233
+
234
+ <template #code>
235
+
236
+ ```vue
237
+ <template>
238
+ <MazTimeline
239
+ v-model="currentStep"
240
+ :steps="steps"
241
+ :show-step-numbers="false"
242
+ />
243
+ </template>
244
+ ```
245
+
246
+ </template>
247
+ </ComponentDemo>
248
+
249
+ ## Without auto-validate
250
+
251
+ By default, completed steps show a checkmark. Disable this with `:auto-validate-steps="false"`.
252
+
253
+ <ComponentDemo>
254
+ <MazTimeline :model-value="2" :steps="steps" :auto-validate-steps="false" direction="horizontal" />
255
+
256
+ <template #code>
257
+
258
+ ```vue
259
+ <template>
260
+ <MazTimeline
261
+ :model-value="2"
262
+ :steps="steps"
263
+ :auto-validate-steps="false"
264
+ />
265
+ </template>
266
+ ```
267
+
268
+ </template>
269
+ </ComponentDemo>
270
+
271
+ ## Rounded sizes
272
+
273
+ Customize the indicator border radius with the `rounded-size` prop.
274
+
275
+ <ComponentDemo>
276
+ <div class="maz-flex maz-flex-col maz-gap-6">
277
+ <MazTimeline v-for="rounded in roundedSizes" :key="rounded" :model-value="1" :steps="colorSteps" :rounded-size="rounded" direction="horizontal" />
278
+ </div>
279
+
280
+ <template #code>
281
+
282
+ ```vue
283
+ <template>
284
+ <MazTimeline :steps="steps" rounded-size="full" />
285
+ <MazTimeline :steps="steps" rounded-size="lg" />
286
+ <MazTimeline :steps="steps" rounded-size="md" />
287
+ <MazTimeline :steps="steps" rounded-size="sm" />
288
+ <MazTimeline :steps="steps" rounded-size="none" />
289
+ </template>
290
+ ```
291
+
292
+ </template>
293
+ </ComponentDemo>
294
+
295
+ ## Custom slots
296
+
297
+ MazTimeline provides scoped slots for full customization.
298
+
299
+ ### Indicator slot
300
+
301
+ <ComponentDemo>
302
+ <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal">
303
+ <template #indicator="{ step, index, state }">
304
+ <span style="font-size: 1.2em">{{ index + 1 }}.</span>
305
+ </template>
306
+ </MazTimeline>
307
+
308
+ <template #code>
309
+
310
+ ```vue
311
+ <template>
312
+ <MazTimeline v-model="currentStep" :steps="steps">
313
+ <template #indicator="{ step, index, state }">
314
+ <span style="font-size: 1.2em">{{ index + 1 }}.</span>
315
+ </template>
316
+ </MazTimeline>
317
+ </template>
318
+ ```
319
+
320
+ </template>
321
+ </ComponentDemo>
322
+
323
+ ### Content slot
324
+
325
+ <ComponentDemo>
326
+ <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal">
327
+ <template #content="{ step, index, state }">
328
+ <div class="maz-text-center">
329
+ <strong>{{ step.title }}</strong>
330
+ <p class="maz-text-muted maz-text-sm maz-m-0">Step {{ index + 1 }} - {{ state }}</p>
331
+ </div>
332
+ </template>
333
+ </MazTimeline>
334
+
335
+ <template #code>
336
+
337
+ ```vue
338
+ <template>
339
+ <MazTimeline v-model="currentStep" :steps="steps">
340
+ <template #content="{ step, index, state }">
341
+ <div class="maz-text-center">
342
+ <strong>{{ step.title }}</strong>
343
+ <p class="maz-text-muted maz-text-sm maz-m-0">
344
+ Step {{ index + 1 }} - {{ state }}
345
+ </p>
346
+ </div>
347
+ </template>
348
+ </MazTimeline>
349
+ </template>
350
+ ```
351
+
352
+ </template>
353
+ </ComponentDemo>
354
+
355
+ ### Connector slot
356
+
357
+ <ComponentDemo>
358
+ <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal">
359
+ <template #connector="{ index, state }">
360
+ <div class="maz-text-center maz-text-xs maz-text-muted">---</div>
361
+ </template>
362
+ </MazTimeline>
363
+
364
+ <template #code>
365
+
366
+ ```vue
367
+ <template>
368
+ <MazTimeline v-model="currentStep" :steps="steps">
369
+ <template #connector="{ index, state }">
370
+ <div class="maz-text-center maz-text-xs maz-text-muted">---</div>
371
+ </template>
372
+ </MazTimeline>
373
+ </template>
374
+ ```
375
+
376
+ </template>
377
+ </ComponentDemo>
378
+
379
+ <script lang="ts" setup>
380
+ import { ref } from 'vue'
381
+
382
+ const currentStep = ref(1)
383
+ const clickableStep = ref(0)
384
+
385
+ const steps = [
386
+ { title: 'Account', subtitle: 'Create your account' },
387
+ { title: 'Profile', subtitle: 'Set up your profile' },
388
+ { title: 'Settings', subtitle: 'Configure preferences' },
389
+ { title: 'Complete', subtitle: 'All done!' },
390
+ ]
391
+
392
+ const colorSteps = [
393
+ { title: 'Step 1' },
394
+ { title: 'Step 2' },
395
+ { title: 'Step 3' },
396
+ ]
397
+
398
+ const stateSteps = [
399
+ { title: 'Completed', subtitle: 'Step finished', state: 'completed' },
400
+ { title: 'Active', subtitle: 'In progress', state: 'active' },
401
+ { title: 'Error', subtitle: 'Something went wrong', state: 'error' },
402
+ { title: 'Warning', subtitle: 'Needs attention', state: 'warning' },
403
+ { title: 'Pending', subtitle: 'Not started', state: 'pending' },
404
+ ]
405
+
406
+ const disabledSteps = [
407
+ { title: 'Account', subtitle: 'Create your account' },
408
+ { title: 'Profile', subtitle: 'Set up your profile' },
409
+ { title: 'Settings', subtitle: 'Locked', disabled: true },
410
+ { title: 'Complete', subtitle: 'All done!' },
411
+ ]
412
+
413
+ const colors = ['primary', 'secondary', 'info', 'success', 'warning', 'destructive']
414
+ const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
415
+ const roundedSizes = ['full', 'lg', 'md', 'sm', 'none']
416
+ </script>
417
+
418
+ <!--@include: ./../../.vitepress/generated-docs/maz-timeline.doc.md-->
package/docs/src/composables/use-form-validator.md CHANGED
@@ -860,7 +860,7 @@ Use `resetForm()` to reset the form to its initial state, or set `resetOnSuccess
860
860
  />
861
861
  <div class="maz-flex maz-gap-2">
862
862
  <MazBtn type="submit" :loading="resetSubmitting">Submit</MazBtn>
863
- <MazBtn type="button" color="danger" @click="resetFormFn">Reset</MazBtn>
863
+ <MazBtn type="button" color="destructive" @click="resetFormFn">Reset</MazBtn>
864
864
  </div>
865
865
  </form>
866
866
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@maz-ui/mcp",
3
3
  "type": "module",
4
- "version": "4.7.10-beta.0",
4
+ "version": "4.8.0",
5
5
  "description": "Maz-UI ModelContextProtocol Client",
6
6
  "author": "Louis Mazel <me@loicmazuel.com>",
7
7
  "license": "MIT",
@@ -52,7 +52,7 @@
52
52
  "ts-node-maintained": "^10.9.5",
53
53
  "tsx": "^4.21.0",
54
54
  "unbuild": "^3.6.1",
55
- "@maz-ui/eslint-config": "4.7.10-beta.0"
55
+ "@maz-ui/eslint-config": "4.8.0"
56
56
  },
57
57
  "lint-staged": {
58
58
  "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"