@maz-ui/mcp 4.9.0 → 4.9.3
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-avatar.doc.md +25 -24
- package/docs/generated-docs/maz-badge.doc.md +8 -8
- package/docs/generated-docs/maz-btn.doc.md +8 -8
- package/docs/generated-docs/maz-container.doc.md +13 -13
- package/docs/generated-docs/maz-input.doc.md +33 -33
- package/docs/generated-docs/maz-read-more.doc.md +10 -10
- package/docs/generated-docs/maz-skeleton.doc.md +10 -10
- package/docs/generated-docs/maz-table.doc.md +37 -37
- package/docs/generated-docs/maz-textarea.doc.md +24 -22
- package/docs/src/components/maz-badge.md +4 -0
- package/docs/src/components/maz-btn-group.md +6 -2
- package/docs/src/components/maz-btn.md +6 -2
- package/docs/src/components/maz-dropdown.md +1 -1
- package/docs/src/components/maz-icon.md +4 -4
- package/docs/src/components/maz-link.md +4 -2
- package/docs/src/components/maz-popover.md +2 -1
- package/docs/src/components/maz-textarea.md +104 -6
- package/docs/src/guide/icon-set.md +2 -2
- package/docs/src/guide/icons.md +3 -3
- package/docs/src/index.md +33 -5
- package/package.json +6 -6
package/dist/mcp.mjs
CHANGED
|
@@ -7,7 +7,7 @@ import { existsSync, readFileSync, readdirSync } from 'node:fs';
|
|
|
7
7
|
import { resolve, join, dirname } from 'node:path';
|
|
8
8
|
import { fileURLToPath } from 'node:url';
|
|
9
9
|
|
|
10
|
-
const version = "4.
|
|
10
|
+
const version = "4.9.1";
|
|
11
11
|
|
|
12
12
|
class MetadataExtractor {
|
|
13
13
|
extract(name, type, content, manualTags = []) {
|
|
@@ -1,29 +1,30 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required | Default
|
|
4
|
-
| ----------------------- | --------------------------------------------------------------- | -------------------------------------------------- | -------- |
|
|
5
|
-
| **style** | The style of the component | `Native type` | No | `undefined`
|
|
6
|
-
| **class** | The class of the component | `Native type` | No | `undefined`
|
|
7
|
-
| **src** | The source of the image | `string \| null` | No | `undefined`
|
|
8
|
-
| **caption** | The caption of the avatar | `string \| null` | No | `undefined`
|
|
9
|
-
| **href** | The link of the avatar | `string` | No | `undefined`
|
|
10
|
-
| **to** | The link (router-link or nuxt-link) of the avatar | `string \| Record` | No | `undefined`
|
|
11
|
-
| **alt** | The alt of the image | `string` | No | `
|
|
12
|
-
| **target** | The target of the link | `string` | No | `
|
|
13
|
-
| **size** | The size of the avatar | `string` | No | `undefined`
|
|
14
|
-
| **bordered** | Add a border to the avatar | `boolean` | No | `undefined`
|
|
15
|
-
| **clickable** | Make the avatar clickable | `boolean` | No | `undefined`
|
|
16
|
-
| **square** | Make the avatar square | `boolean` | No | `undefined`
|
|
17
|
-
| **no-elevation** | Remove the shadow | `boolean` | No | `undefined`
|
|
18
|
-
| **show-caption** | Show the caption | `boolean` | No | `undefined`
|
|
19
|
-
| **image-height-full** | Make the image height full | `boolean` | No | `undefined`
|
|
20
|
-
| **hide-loader** | Remove the loader | `boolean` | No | `undefined`
|
|
21
|
-
| **button-color** | The color of the clickable button | `MazColor` | No | `
|
|
22
|
-
| **hide-clickable-icon** | Remove the icon on hover when component is clickable | `boolean` | No | `undefined`
|
|
23
|
-
| **letter-count** | Number of letters to display in the round text | `number` | No | `undefined`
|
|
24
|
-
| **rounded-size** | Size of the rounded | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"` | No | `
|
|
25
|
-
| **fallback-src** | The fallback src to replace the src on loading error | `string` | No | `undefined`
|
|
26
|
-
| **loading** | The loading strategy of the image - lazy, eager or intersecting | `"lazy" \| "eager" \| "intersecting"` | No | `
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ----------------------- | --------------------------------------------------------------- | -------------------------------------------------- | -------- | -------------- | -------------------------------------------------------------------------------------------------------------------------- |
|
|
5
|
+
| **style** | The style of the component | `Native type` | No | `undefined` | - |
|
|
6
|
+
| **class** | The class of the component | `Native type` | No | `undefined` | - |
|
|
7
|
+
| **src** | The source of the image | `string \| null` | No | `undefined` | - |
|
|
8
|
+
| **caption** | The caption of the avatar | `string \| null` | No | `undefined` | - |
|
|
9
|
+
| **href** | The link of the avatar | `string` | No | `undefined` | - |
|
|
10
|
+
| **to** | The link (router-link or nuxt-link) of the avatar | `string \| Record` | No | `undefined` | - |
|
|
11
|
+
| **alt** | The alt of the image | `string` | No | `undefined` | - |
|
|
12
|
+
| **target** | The target of the link | `string` | No | `undefined` | - |
|
|
13
|
+
| **size** | The size of the avatar | `string` | No | `undefined` | - |
|
|
14
|
+
| **bordered** | Add a border to the avatar | `boolean` | No | `undefined` | - |
|
|
15
|
+
| **clickable** | Make the avatar clickable | `boolean` | No | `undefined` | - |
|
|
16
|
+
| **square** | Make the avatar square | `boolean` | No | `undefined` | - |
|
|
17
|
+
| **no-elevation** | Remove the shadow | `boolean` | No | `undefined` | - |
|
|
18
|
+
| **show-caption** | Show the caption | `boolean` | No | `undefined` | - |
|
|
19
|
+
| **image-height-full** | Make the image height full | `boolean` | No | `undefined` | - |
|
|
20
|
+
| **hide-loader** | Remove the loader | `boolean` | No | `undefined` | - |
|
|
21
|
+
| **button-color** | The color of the clickable button | `MazColor` | No | `undefined` | `"primary" \| "secondary" \| "accent" \| "info" \| "success" \| "warning" \| "destructive" \| "contrast" \| "transparent"` |
|
|
22
|
+
| **hide-clickable-icon** | Remove the icon on hover when component is clickable | `boolean` | No | `undefined` | - |
|
|
23
|
+
| **letter-count** | Number of letters to display in the round text | `number` | No | `undefined` | - |
|
|
24
|
+
| **rounded-size** | Size of the rounded | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"` | No | `undefined` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` |
|
|
25
|
+
| **fallback-src** | The fallback src to replace the src on loading error | `string` | No | `undefined` | - |
|
|
26
|
+
| **loading** | The loading strategy of the image - lazy, eager or intersecting | `"lazy" \| "eager" \| "intersecting"` | No | `intersecting` | `'lazy' \| 'eager' \| 'intersecting'` |
|
|
27
|
+
| **color** | The color of the avatar | `MazColor` | No | `undefined` | `"primary" \| "secondary" \| "accent" \| "info" \| "success" \| "warning" \| "destructive" \| "contrast" \| "transparent"` |
|
|
27
28
|
|
|
28
29
|
## Events
|
|
29
30
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required | Default
|
|
4
|
-
| ---------------- | ------------------------------------- | --------------------- | -------- |
|
|
5
|
-
| **color** | Color of the badge | `MazBadgeColor` | No | `
|
|
6
|
-
| **size** | Size of the badge | `string` | No | `
|
|
7
|
-
| **nowrap** | Will not wrap the text | `boolean` | No | `false`
|
|
8
|
-
| **outlined** | Will add a border to the badge | `boolean` | No | `false`
|
|
9
|
-
| **pastel** | Will add a pastel style to the badge | `boolean` | No | `false`
|
|
10
|
-
| **rounded-size** | Size radius of the component's border | `MazBadgeRoundedSize` | No | `
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ---------------- | ------------------------------------- | --------------------- | -------- | --------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
5
|
+
| **color** | Color of the badge | `MazBadgeColor` | No | `primary` | `'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'destructive' \| 'contrast' \| 'background'` |
|
|
6
|
+
| **size** | Size of the badge | `string` | No | `0.8em` | - |
|
|
7
|
+
| **nowrap** | Will not wrap the text | `boolean` | No | `false` | - |
|
|
8
|
+
| **outlined** | Will add a border to the badge | `boolean` | No | `false` | - |
|
|
9
|
+
| **pastel** | Will add a pastel style to the badge | `boolean` | No | `false` | - |
|
|
10
|
+
| **rounded-size** | Size radius of the component's border | `MazBadgeRoundedSize` | No | `md` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` |
|
|
11
11
|
|
|
12
12
|
## Slots
|
|
13
13
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
| **size** | Predifined sizes of the button | `MazSize` | No | `undefined` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs' \| 'mini'` |
|
|
7
7
|
| **color** | The color of the button | `MazColor \| "background"` | No | `undefined` | `'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'destructive' \| 'transparent' \| 'contrast' \| 'accent' \| 'background'` |
|
|
8
8
|
| **type** | The type of the button | `"submit" \| "reset" \| "button"` | No | `undefined` | `'submit' \| 'reset' \| 'button'` |
|
|
9
|
-
| **rounded-size** | Size of the rounded | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"`
|
|
9
|
+
| **rounded-size** | Size of the rounded | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "base"` | No | `base` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'base'` |
|
|
10
10
|
| **outlined** | If true, the button have the "border" style | `boolean` | No | `false` | - |
|
|
11
11
|
| **pastel** | If true, the button will have a pastel color | `boolean` | No | `false` | - |
|
|
12
12
|
| **block** | If true, the button will have a full width | `boolean` | No | `false` | - |
|
|
@@ -22,10 +22,10 @@
|
|
|
22
22
|
|
|
23
23
|
## Slots
|
|
24
24
|
|
|
25
|
-
| Name
|
|
26
|
-
|
|
|
27
|
-
| left-icon
|
|
28
|
-
| icon
|
|
29
|
-
| default
|
|
30
|
-
|
|
|
31
|
-
| loader
|
|
25
|
+
| Name | Description | Bindings |
|
|
26
|
+
| ---------- | ---------------------------------------------- | -------- |
|
|
27
|
+
| left-icon | The icon to display on the left of the button | |
|
|
28
|
+
| icon | The icon to display on the fab button | |
|
|
29
|
+
| default | The content of the button | |
|
|
30
|
+
| right-icon | The icon to display on the right of the button | |
|
|
31
|
+
| loader | The loader to display in the button | |
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type
|
|
4
|
-
| ------------------- | ----------------------------------- |
|
|
5
|
-
| **title** | Title of the card in header | `string`
|
|
6
|
-
| **elevation** | Add elevation to the component | `boolean`
|
|
7
|
-
| **padding** | Add padding to the content | `boolean`
|
|
8
|
-
| **bordered** | Add border to the component | `boolean`
|
|
9
|
-
| **rounded-size** | Size of the rounded | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | No | `
|
|
10
|
-
| **transparent** | Remove background color | `boolean`
|
|
11
|
-
| **overflow-hidden** | Hide overflow | `boolean`
|
|
12
|
-
| **left-icon** | Add icon to the header on the left | `IconComponent \| string`
|
|
13
|
-
| **right-icon** | Add icon to the header on the right | `IconComponent \| string`
|
|
14
|
-
| **icon-size** | Size of the icon | `MazIconProps['size']`
|
|
15
|
-
| **block** | Display the container in full width | `boolean`
|
|
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' \| 'base'` | No | `base` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'base'` |
|
|
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
16
|
|
|
17
17
|
## Slots
|
|
18
18
|
|
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type
|
|
4
|
-
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
5
|
-
| **style** | Inline styles to apply to the component root element | `HTMLAttributes['style']`
|
|
6
|
-
| **class** | CSS classes to apply to the component root element | `HTMLAttributes['class']`
|
|
7
|
-
| **model-value** | `v-model` <br/>The current value of the input field. This prop is used for two-way data binding with v-model<br/>**Example:** `<MazInput v-model="inputValue" />` | `T`
|
|
8
|
-
| **placeholder** | Text displayed when the input is empty to guide the user<br/>**Example:** `"Enter your email address"` | `string`
|
|
9
|
-
| **label** | Floating label that appears inside the input and moves up when focused or filled. Provides better UX than traditional placeholders<br/>**Example:** `"Email Address"` | `string`
|
|
10
|
-
| **top-label** | Static label displayed above the input field. Unlike the floating label, this remains fixed<br/>**Example:** `"User Information"` | `string`
|
|
11
|
-
| **assistive-text** | Helper text displayed below the input to provide additional context or validation feedback<br/>**Example:** `"Must contain at least 8 characters"` | `string`
|
|
12
|
-
| **color** | Theme color that affects the border and focus states of the input<br/>**Example:** `"primary"` | `MazColor`
|
|
13
|
-
| **type** | HTML input type attribute that determines the input behavior and validation<br/>**Example:** `"email"` | `InputHTMLAttributes['type']`
|
|
14
|
-
| **required** | Makes the input field mandatory for form submission<br/>**Example:** `true` | `boolean`
|
|
15
|
-
| **disabled** | Disables the input field, preventing user interaction and form submission<br/>**Example:** `false` | `boolean`
|
|
16
|
-
| **readonly** | Makes the input field read-only, allowing selection but preventing modification<br/>**Example:** `false` | `boolean`
|
|
17
|
-
| **id** | Unique identifier for the input element, used for form labels and accessibility<br/>**Example:** `"user-email"` | `string`
|
|
18
|
-
| **error** | Applies error styling (red border and text) to indicate validation failure<br/>**Example:** `true` | `boolean`
|
|
19
|
-
| **success** | Applies success styling (green border and text) to indicate successful validation<br/>**Example:** `true` | `boolean`
|
|
20
|
-
| **warning** | Applies warning styling (orange border and text) to indicate potential issues<br/>**Example:** `true` | `boolean`
|
|
21
|
-
| **hint** | Alternative text that replaces the label when provided. Useful for contextual hints<br/>**Example:** `"Optional field"` | `string`
|
|
22
|
-
| **input-classes** | Additional CSS classes to apply specifically to the input wrapper element<br/>**Example:** `"custom-input-wrapper"` | `string`
|
|
23
|
-
| **border** | Controls whether the input has a visible border. Set to false for borderless inputs<br/>**Example:** `true` | `boolean`
|
|
24
|
-
| **inputmode** | HTML inputmode attribute that provides hints for virtual keyboards on mobile devices<br/>**Example:** `"numeric"` | `InputHTMLAttributes['inputmode']`
|
|
25
|
-
| **size** | Controls the height and text size of the input component<br/>**Example:** `"md"` | `MazSize`
|
|
26
|
-
| **debounce** | Enables input debouncing to limit the frequency of value updates. When true, uses 500ms delay. When a number, uses that value as delay in milliseconds<br/>**Example:** `true` | `boolean \| number`
|
|
27
|
-
| **auto-focus** | Automatically focuses the input when the component mounts<br/>**Example:** `false` | `boolean`
|
|
28
|
-
| **border-active** | When true, shows the colored border immediately instead of only on focus<br/>**Example:** `false` | `boolean`
|
|
29
|
-
| **left-icon** | Icon displayed on the left side of the input. Can be an icon name string or icon component<br/>**Example:** `"user"` | `string \| IconComponent`
|
|
30
|
-
| **right-icon** | Icon displayed on the right side of the input. Can be an icon name string or icon component<br/>**Example:** `"search"` | `string \| IconComponent`
|
|
31
|
-
| **rounded-size** | Controls the border radius of the input component<br/>**Example:** `"lg"` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | No | `'
|
|
32
|
-
| **block** | Makes the input expand to the full width of its container<br/>**Example:** `false` | `boolean`
|
|
33
|
-
| **name** | The name of the input field. Used for form submission and validation<br/>**Example:** `"email"` | `string`
|
|
34
|
-
| **autocomplete** | The autocomplete attribute for the input field. Used for form submission and validation<br/>**Example:** `"email"` | `string`
|
|
35
|
-
| **loading** | Loading state for the input field. Used to show a loading spinner | `boolean`
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ------------------------------------------------------------------------------------------ |
|
|
5
|
+
| **style** | Inline styles to apply to the component root element | `HTMLAttributes['style']` | No | `undefined` | - |
|
|
6
|
+
| **class** | CSS classes to apply to the component root element | `HTMLAttributes['class']` | No | `undefined` | - |
|
|
7
|
+
| **model-value** | `v-model` <br/>The current value of the input field. This prop is used for two-way data binding with v-model<br/>**Example:** `<MazInput v-model="inputValue" />` | `T` | No | `undefined` | - |
|
|
8
|
+
| **placeholder** | Text displayed when the input is empty to guide the user<br/>**Example:** `"Enter your email address"` | `string` | No | `undefined` | - |
|
|
9
|
+
| **label** | Floating label that appears inside the input and moves up when focused or filled. Provides better UX than traditional placeholders<br/>**Example:** `"Email Address"` | `string` | No | `undefined` | - |
|
|
10
|
+
| **top-label** | Static label displayed above the input field. Unlike the floating label, this remains fixed<br/>**Example:** `"User Information"` | `string` | No | `undefined` | - |
|
|
11
|
+
| **assistive-text** | Helper text displayed below the input to provide additional context or validation feedback<br/>**Example:** `"Must contain at least 8 characters"` | `string` | No | `undefined` | - |
|
|
12
|
+
| **color** | Theme color that affects the border and focus states of the input<br/>**Example:** `"primary"` | `MazColor` | No | `'primary'` | `primary, secondary, accent, info, success, warning, destructive, contrast` |
|
|
13
|
+
| **type** | HTML input type attribute that determines the input behavior and validation<br/>**Example:** `"email"` | `InputHTMLAttributes['type']` | No | `'text'` | `text, password, email, number, tel, url, search, date, time, datetime-local, month, week` |
|
|
14
|
+
| **required** | Makes the input field mandatory for form submission<br/>**Example:** `true` | `boolean` | No | `false` | - |
|
|
15
|
+
| **disabled** | Disables the input field, preventing user interaction and form submission<br/>**Example:** `false` | `boolean` | No | `false` | - |
|
|
16
|
+
| **readonly** | Makes the input field read-only, allowing selection but preventing modification<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
|
|
17
|
+
| **id** | Unique identifier for the input element, used for form labels and accessibility<br/>**Example:** `"user-email"` | `string` | No | `undefined` | - |
|
|
18
|
+
| **error** | Applies error styling (red border and text) to indicate validation failure<br/>**Example:** `true` | `boolean` | No | `false` | - |
|
|
19
|
+
| **success** | Applies success styling (green border and text) to indicate successful validation<br/>**Example:** `true` | `boolean` | No | `false` | - |
|
|
20
|
+
| **warning** | Applies warning styling (orange border and text) to indicate potential issues<br/>**Example:** `true` | `boolean` | No | `false` | - |
|
|
21
|
+
| **hint** | Alternative text that replaces the label when provided. Useful for contextual hints<br/>**Example:** `"Optional field"` | `string` | No | `undefined` | - |
|
|
22
|
+
| **input-classes** | Additional CSS classes to apply specifically to the input wrapper element<br/>**Example:** `"custom-input-wrapper"` | `string` | No | `undefined` | - |
|
|
23
|
+
| **border** | Controls whether the input has a visible border. Set to false for borderless inputs<br/>**Example:** `true` | `boolean` | No | `true` | - |
|
|
24
|
+
| **inputmode** | HTML inputmode attribute that provides hints for virtual keyboards on mobile devices<br/>**Example:** `"numeric"` | `InputHTMLAttributes['inputmode']` | No | `'text'` | `text, numeric, decimal, tel, search, email, url` |
|
|
25
|
+
| **size** | Controls the height and text size of the input component<br/>**Example:** `"md"` | `MazSize` | No | `'md'` | `xs, sm, md, lg, xl, mini` |
|
|
26
|
+
| **debounce** | Enables input debouncing to limit the frequency of value updates. When true, uses 500ms delay. When a number, uses that value as delay in milliseconds<br/>**Example:** `true` | `boolean \| number` | No | `false` | - |
|
|
27
|
+
| **auto-focus** | Automatically focuses the input when the component mounts<br/>**Example:** `false` | `boolean` | No | `false` | - |
|
|
28
|
+
| **border-active** | When true, shows the colored border immediately instead of only on focus<br/>**Example:** `false` | `boolean` | No | `false` | - |
|
|
29
|
+
| **left-icon** | Icon displayed on the left side of the input. Can be an icon name string or icon component<br/>**Example:** `"user"` | `string \| IconComponent` | No | `undefined` | - |
|
|
30
|
+
| **right-icon** | Icon displayed on the right side of the input. Can be an icon name string or icon component<br/>**Example:** `"search"` | `string \| IconComponent` | No | `undefined` | - |
|
|
31
|
+
| **rounded-size** | Controls the border radius of the input component<br/>**Example:** `"lg"` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'base'` | No | `'base'` | `none, sm, md, lg, xl, full` |
|
|
32
|
+
| **block** | Makes the input expand to the full width of its container<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
|
|
33
|
+
| **name** | The name of the input field. Used for form submission and validation<br/>**Example:** `"email"` | `string` | No | `undefined` | - |
|
|
34
|
+
| **autocomplete** | The autocomplete attribute for the input field. Used for form submission and validation<br/>**Example:** `"email"` | `string` | No | `undefined` | - |
|
|
35
|
+
| **loading** | Loading state for the input field. Used to show a loading spinner | `boolean` | No | `false` | - |
|
|
36
36
|
|
|
37
37
|
## Events
|
|
38
38
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type
|
|
4
|
-
| ----------------- | --------------------------------------------------- |
|
|
5
|
-
| **text** | The text to be truncated. | `string`
|
|
6
|
-
| **max-lines** | The maximum number of lines to be displayed. | `number`
|
|
7
|
-
| **max-chars** | The maximum number of characters to be displayed. | `number`
|
|
8
|
-
| **color** | The color of the link (MazLink). | `
|
|
9
|
-
| **collapse-text** | The text of the link when the content is collapsed. | `string`
|
|
10
|
-
| **expand-text** | The text of the link when the content is expanded. | `string`
|
|
11
|
-
| **id** | Unique identifier for accessibility linking. | `string`
|
|
12
|
-
| **aria-label** | Accessibility label for the content region. | `string`
|
|
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). | `MazLinkProps['color']` | 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
13
|
|
|
14
14
|
## Slots
|
|
15
15
|
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type
|
|
4
|
-
| ---------------- | ------------------------------------------- |
|
|
5
|
-
| **shape** | Skeleton shape type | `'circle' \| 'rectangle' \| 'square'`
|
|
6
|
-
| **size** | Size with units (ex: '2rem', '40px', '3em') | `SizeUnit`
|
|
7
|
-
| **width** | Custom width | `SizeUnit`
|
|
8
|
-
| **height** | Custom height | `SizeUnit`
|
|
9
|
-
| **animated** | Disable animation | `boolean`
|
|
10
|
-
| **rounded-size** | Controls the border radius | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | No | `
|
|
11
|
-
| **aria-label** | Accessibility label | `string`
|
|
12
|
-
| **loading-text** | Loading text for accessibility | `string`
|
|
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' \| 'base'` | No | `base` | `none, sm, md, lg, xl, full, base` |
|
|
11
|
+
| **aria-label** | Accessibility label | `string` | No | `skeleton.ariaLabel' (translations)` | - |
|
|
12
|
+
| **loading-text** | Loading text for accessibility | `string` | No | `skeleton.loadingText' (translations)` | - |
|
|
@@ -1,42 +1,42 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required | Default | Possible values
|
|
4
|
-
| ---------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------- | -------- | ---------------------------------------- |
|
|
5
|
-
| **table-class** | CSS class of the table element | `HTMLAttributes['class']` | No | `undefined` | -
|
|
6
|
-
| **table-style** | CSS style of the table element | `HTMLAttributes['style']` | No | `undefined` | -
|
|
7
|
-
| **model-value** | `v-model` <br/>List of selected rows | `(string \| boolean \| number)[]` | No | `undefined` | -
|
|
8
|
-
| **size** | Size of the table | `MazSize` | No | `'md'` | `xl, lg, md, sm, xs, mini`
|
|
9
|
-
| **input-size** | Size of the search inputs | `MazSize` | No | `undefined` | `xl, lg, md, sm, xs, mini`
|
|
10
|
-
| **title** | Title of the table | `string` | No | `undefined` | -
|
|
11
|
-
| **headers** | Headers of the table | `MazTableHeader[]` | No | `undefined` | -
|
|
12
|
-
| **sortable** | Enable sort feature on all columns | `boolean` | No | `false` | -
|
|
13
|
-
| **headers-align** | Align all headers | `string` | No | `'left'` | -
|
|
14
|
-
| **rows** | Rows of the table | `T[]` | No | `undefined` | -
|
|
15
|
-
| **hoverable** | Add hover effect on rows | `boolean` | No | `false` | -
|
|
16
|
-
| **search** | Enable search feature in table header | `boolean` | No | `false` | -
|
|
17
|
-
| **hide-search-in-row** | Disable search in rows - useful to filter data yourself or make search request to server | `boolean` | No | `false` | -
|
|
18
|
-
| **hide-search-by** | Disable search by column (remove select input "search by") | `boolean` | No | `false` | -
|
|
19
|
-
| **search-query** | `v-model:search-query` <br/>Search query in input | `string` | No | `undefined` | -
|
|
20
|
-
| **background-odd** | Add background color to odd rows | `boolean` | No | `false` | -
|
|
21
|
-
| **background-even** | Add background color to even rows | `boolean` | No | `false` | -
|
|
22
|
-
| **elevation** | Add shadow to the table | `boolean` | No | `false` | -
|
|
23
|
-
| **divider** | add divider between rows | `boolean` | No | `false` | -
|
|
24
|
-
| **caption** | Caption of the table | `string` | No | `undefined` | -
|
|
25
|
-
| **caption-side** | Caption side | `string` | No | `'bottom'` | `top, bottom`
|
|
26
|
-
| **pagination** | Add pagination in table footer | `boolean` | No | `false` | -
|
|
27
|
-
| **page** | `v-model:page` <br/>Current page of pagination | `number` | No | `1` | -
|
|
28
|
-
| **page-size** | `v-model:page-size` <br/>Number of items per page | `number` | No | `20` | -
|
|
29
|
-
| **total-pages** | Total number of pages | `number` | No | `undefined` | -
|
|
30
|
-
| **paginate-rows** | Don't paginate rows - useful to make pagination request with your server | `boolean` | No | `true` | -
|
|
31
|
-
| **total-items** | Total number of items | `number` | No | `undefined` | -
|
|
32
|
-
| **loading** | Loading state | `boolean` | No | `false` | -
|
|
33
|
-
| **selectable** | Enable selection of rows | `boolean` | No | `false` | -
|
|
34
|
-
| **selected-key** | Enable selection of rows - key of the selected row | `string` | No | `undefined` | -
|
|
35
|
-
| **table-layout** | Table layout | `string` | No | `undefined` | `auto, fixed`
|
|
36
|
-
| **color** | Color of the component | `MazColor` | No | `'primary'` | -
|
|
37
|
-
| **translations** | Translations of the table | `DeepPartial<MazUiTranslationsNestedSchema['table']>` | No | `Translations from @maz-ui/translations` | -
|
|
38
|
-
| **rounded-size** | Size radius of the component's border | `string` | No | `'lg'` | `none, sm, md, lg, xl, full` |
|
|
39
|
-
| **scrollable** | Enable scrollable on table | `boolean` | No | `false` | -
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ---------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------- | -------- | ---------------------------------------- | ---------------------------------- |
|
|
5
|
+
| **table-class** | CSS class of the table element | `HTMLAttributes['class']` | No | `undefined` | - |
|
|
6
|
+
| **table-style** | CSS style of the table element | `HTMLAttributes['style']` | No | `undefined` | - |
|
|
7
|
+
| **model-value** | `v-model` <br/>List of selected rows | `(string \| boolean \| number)[]` | No | `undefined` | - |
|
|
8
|
+
| **size** | Size of the table | `MazSize` | No | `'md'` | `xl, lg, md, sm, xs, mini` |
|
|
9
|
+
| **input-size** | Size of the search inputs | `MazSize` | No | `undefined` | `xl, lg, md, sm, xs, mini` |
|
|
10
|
+
| **title** | Title of the table | `string` | No | `undefined` | - |
|
|
11
|
+
| **headers** | Headers of the table | `MazTableHeader[]` | No | `undefined` | - |
|
|
12
|
+
| **sortable** | Enable sort feature on all columns | `boolean` | No | `false` | - |
|
|
13
|
+
| **headers-align** | Align all headers | `string` | No | `'left'` | - |
|
|
14
|
+
| **rows** | Rows of the table | `T[]` | No | `undefined` | - |
|
|
15
|
+
| **hoverable** | Add hover effect on rows | `boolean` | No | `false` | - |
|
|
16
|
+
| **search** | Enable search feature in table header | `boolean` | No | `false` | - |
|
|
17
|
+
| **hide-search-in-row** | Disable search in rows - useful to filter data yourself or make search request to server | `boolean` | No | `false` | - |
|
|
18
|
+
| **hide-search-by** | Disable search by column (remove select input "search by") | `boolean` | No | `false` | - |
|
|
19
|
+
| **search-query** | `v-model:search-query` <br/>Search query in input | `string` | No | `undefined` | - |
|
|
20
|
+
| **background-odd** | Add background color to odd rows | `boolean` | No | `false` | - |
|
|
21
|
+
| **background-even** | Add background color to even rows | `boolean` | No | `false` | - |
|
|
22
|
+
| **elevation** | Add shadow to the table | `boolean` | No | `false` | - |
|
|
23
|
+
| **divider** | add divider between rows | `boolean` | No | `false` | - |
|
|
24
|
+
| **caption** | Caption of the table | `string` | No | `undefined` | - |
|
|
25
|
+
| **caption-side** | Caption side | `string` | No | `'bottom'` | `top, bottom` |
|
|
26
|
+
| **pagination** | Add pagination in table footer | `boolean` | No | `false` | - |
|
|
27
|
+
| **page** | `v-model:page` <br/>Current page of pagination | `number` | No | `1` | - |
|
|
28
|
+
| **page-size** | `v-model:page-size` <br/>Number of items per page | `number` | No | `20` | - |
|
|
29
|
+
| **total-pages** | Total number of pages | `number` | No | `undefined` | - |
|
|
30
|
+
| **paginate-rows** | Don't paginate rows - useful to make pagination request with your server | `boolean` | No | `true` | - |
|
|
31
|
+
| **total-items** | Total number of items | `number` | No | `undefined` | - |
|
|
32
|
+
| **loading** | Loading state | `boolean` | No | `false` | - |
|
|
33
|
+
| **selectable** | Enable selection of rows | `boolean` | No | `false` | - |
|
|
34
|
+
| **selected-key** | Enable selection of rows - key of the selected row | `string` | No | `undefined` | - |
|
|
35
|
+
| **table-layout** | Table layout | `string` | No | `undefined` | `auto, fixed` |
|
|
36
|
+
| **color** | Color of the component | `MazColor` | No | `'primary'` | - |
|
|
37
|
+
| **translations** | Translations of the table | `DeepPartial<MazUiTranslationsNestedSchema['table']>` | No | `Translations from @maz-ui/translations` | - |
|
|
38
|
+
| **rounded-size** | Size radius of the component's border | `string` | No | `'lg'` | `none, sm, md, lg, xl, full, base` |
|
|
39
|
+
| **scrollable** | Enable scrollable on table | `boolean` | No | `false` | - |
|
|
40
40
|
|
|
41
41
|
## Events
|
|
42
42
|
|
|
@@ -1,27 +1,29 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description
|
|
4
|
-
| ------------------ |
|
|
5
|
-
| **style** | Style attribut of the component root element
|
|
6
|
-
| **class** | Class attribut of the component root element
|
|
7
|
-
| **model-value** | `v-model` <br/>
|
|
8
|
-
| **id** | The id of the textarea
|
|
9
|
-
| **name** | The name of the textarea
|
|
10
|
-
| **label** | The label of the textarea
|
|
11
|
-
| **placeholder** | The placeholder of the textarea
|
|
12
|
-
| **required** | If the textarea is required
|
|
13
|
-
| **disabled** | If the textarea is disabled
|
|
14
|
-
| **readonly** | If the textarea is readonly
|
|
15
|
-
| **error** | If the textarea has an error
|
|
16
|
-
| **success** | If the textarea has a success
|
|
17
|
-
| **warning** | If the textarea has a warning
|
|
18
|
-
| **hint** | The hint of the textarea
|
|
19
|
-
| **color** | The color of the textarea
|
|
20
|
-
| **rounded-size** | Size radius of the component's border
|
|
21
|
-
| **padding** | If the textarea has a padding
|
|
22
|
-
| **transparent** | If the textarea has a transparent background
|
|
23
|
-
| **border** | If the textarea has no border
|
|
24
|
-
| **
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ------------------ | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------- | --------------- | ------------------------------------------------------------------------------------- |
|
|
5
|
+
| **style** | Style attribut of the component root element | `Native type` | No | `undefined` | - |
|
|
6
|
+
| **class** | Class attribut of the component root element | `Native type` | No | `undefined` | - |
|
|
7
|
+
| **model-value** | `v-model` <br/> | `T` | No | `undefined` | - |
|
|
8
|
+
| **id** | The id of the textarea | `string` | No | `undefined` | - |
|
|
9
|
+
| **name** | The name of the textarea | `string` | No | `'MazTextarea'` | - |
|
|
10
|
+
| **label** | The label of the textarea | `string` | No | `undefined` | - |
|
|
11
|
+
| **placeholder** | The placeholder of the textarea | `string` | No | `undefined` | - |
|
|
12
|
+
| **required** | If the textarea is required | `boolean` | No | `false` | - |
|
|
13
|
+
| **disabled** | If the textarea is disabled | `boolean` | No | `false` | - |
|
|
14
|
+
| **readonly** | If the textarea is readonly | `boolean` | No | `false` | - |
|
|
15
|
+
| **error** | If the textarea has an error | `boolean` | No | `false` | - |
|
|
16
|
+
| **success** | If the textarea has a success | `boolean` | No | `false` | - |
|
|
17
|
+
| **warning** | If the textarea has a warning | `boolean` | No | `false` | - |
|
|
18
|
+
| **hint** | The hint of the textarea | `string` | No | `undefined` | - |
|
|
19
|
+
| **color** | The color of the textarea | `MazColor` | No | `'primary'` | - |
|
|
20
|
+
| **rounded-size** | Size radius of the component's border | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "base"` | No | `undefined` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'base'` |
|
|
21
|
+
| **padding** | If the textarea has a padding | `boolean` | No | `true` | - |
|
|
22
|
+
| **transparent** | If the textarea has a transparent background | `boolean` | No | `false` | - |
|
|
23
|
+
| **border** | If the textarea has no border | `boolean` | No | `true` | - |
|
|
24
|
+
| **autogrow** | If the textarea should autogrow based on its content | `boolean` | No | `true` | - |
|
|
25
|
+
| **append-justify** | The alignment of the append slot | `"start" \| "end" \| "center" \| "space-between" \| "space-around" \| "space-evenly"` | No | `'end'` | `'start' \| 'end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly'` |
|
|
26
|
+
| **top-label** | Static label displayed above the textarea. Unlike the floating label, this remains fixed | `string` | No | `undefined` | - |
|
|
25
27
|
|
|
26
28
|
## Events
|
|
27
29
|
|
|
@@ -55,6 +55,7 @@ description: MazBadge is a standalone component to show short text in colored co
|
|
|
55
55
|
'contrast',
|
|
56
56
|
'accent',
|
|
57
57
|
'background',
|
|
58
|
+
'transparent',
|
|
58
59
|
]
|
|
59
60
|
</script>
|
|
60
61
|
|
|
@@ -89,6 +90,7 @@ const colors = [
|
|
|
89
90
|
'contrast',
|
|
90
91
|
'accent',
|
|
91
92
|
'background',
|
|
93
|
+
'transparent',
|
|
92
94
|
]
|
|
93
95
|
</script>
|
|
94
96
|
|
|
@@ -123,6 +125,7 @@ const colors = [
|
|
|
123
125
|
'contrast',
|
|
124
126
|
'accent',
|
|
125
127
|
'background',
|
|
128
|
+
'transparent',
|
|
126
129
|
]
|
|
127
130
|
</script>
|
|
128
131
|
|
|
@@ -214,6 +217,7 @@ const roundedSize = ['none', 'sm', 'md', 'lg', 'xl', 'full']
|
|
|
214
217
|
'contrast',
|
|
215
218
|
'accent',
|
|
216
219
|
'background',
|
|
220
|
+
'transparent',
|
|
217
221
|
]
|
|
218
222
|
|
|
219
223
|
const roundedSize = ['none', 'sm', 'md', 'lg', 'xl', 'full']
|
|
@@ -297,7 +297,8 @@ Use the `leftIcon` or `rightIcon` properties to add icons to buttons.
|
|
|
297
297
|
<script lang="ts" setup>
|
|
298
298
|
import MazBtnGroup from 'maz-ui/components/MazBtnGroup'
|
|
299
299
|
import type { MazButtonGroupOption } from 'maz-ui/components/MazBtnGroup'
|
|
300
|
-
import { MazArrowLeft
|
|
300
|
+
import { MazArrowLeft } from '@maz-ui/icons/MazArrowLeft'
|
|
301
|
+
import { MazArrowRight } from '@maz-ui/icons/MazArrowRight'
|
|
301
302
|
|
|
302
303
|
const items: MazButtonGroupOption[] = [
|
|
303
304
|
{ text: 'Previous', leftIcon: MazArrowLeft, active: true },
|
|
@@ -424,7 +425,10 @@ interface MazButtonGroupProps {
|
|
|
424
425
|
|
|
425
426
|
<script lang="ts" setup>
|
|
426
427
|
import type { MazButtonGroupOption } from 'maz-ui/components/MazBtnGroup'
|
|
427
|
-
import { MazArrowLeft
|
|
428
|
+
import { MazArrowLeft } from '@maz-ui/icons/MazArrowLeft'
|
|
429
|
+
import { MazArrowRight } from '@maz-ui/icons/MazArrowRight'
|
|
430
|
+
import { MazBars3 } from '@maz-ui/icons/MazBars3'
|
|
431
|
+
import { MazSquares2x2 } from '@maz-ui/icons/MazSquares2x2'
|
|
428
432
|
|
|
429
433
|
const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl'] as const
|
|
430
434
|
const colors = ['primary', 'secondary', 'info', 'success', 'warning', 'destructive'] as const
|
|
@@ -462,7 +462,9 @@ Check out how [MazIcon](./maz-icon.md) works, see all available icons and downlo
|
|
|
462
462
|
<script lang="ts" setup>
|
|
463
463
|
import MazBtn from 'maz-ui/components/MazBtn'
|
|
464
464
|
|
|
465
|
-
import { MazCheck
|
|
465
|
+
import { MazCheck } from '@maz-ui/icons/MazCheck'
|
|
466
|
+
import { MazHome } from '@maz-ui/icons/MazHome'
|
|
467
|
+
import { MazCommandLine } from '@maz-ui/icons/MazCommandLine'
|
|
466
468
|
</script>
|
|
467
469
|
|
|
468
470
|
<template>
|
|
@@ -548,7 +550,9 @@ When `to` attribute is provided, the component automatically becomes a `<RouterL
|
|
|
548
550
|
|
|
549
551
|
<script setup lang="ts">
|
|
550
552
|
import { computed } from 'vue'
|
|
551
|
-
import { MazCheck
|
|
553
|
+
import { MazCheck } from '@maz-ui/icons/MazCheck'
|
|
554
|
+
import { MazHome } from '@maz-ui/icons/MazHome'
|
|
555
|
+
import { MazCommandLine } from '@maz-ui/icons/MazCommandLine'
|
|
552
556
|
import MazSpinner from 'maz-ui/src/components/MazSpinner.vue'
|
|
553
557
|
|
|
554
558
|
const colors = [
|
|
@@ -638,7 +638,7 @@ type MazDropdownMenuItem = {
|
|
|
638
638
|
<script lang="ts" setup>
|
|
639
639
|
import { ref, onMounted } from 'vue'
|
|
640
640
|
import { useToast } from 'maz-ui/src/composables/useToast'
|
|
641
|
-
import { MazChevronUpDown } from '@maz-ui/icons'
|
|
641
|
+
import { MazChevronUpDown } from '@maz-ui/icons/MazChevronUpDown'
|
|
642
642
|
|
|
643
643
|
const toast = useToast()
|
|
644
644
|
|
|
@@ -26,7 +26,7 @@ description: MazIcon is a standalone component to load your svg files
|
|
|
26
26
|
|
|
27
27
|
## Icon Component
|
|
28
28
|
|
|
29
|
-
`icon` is the icon component to render - e.g: `import { MazStar } from '@maz-ui/icons'`
|
|
29
|
+
`icon` is the icon component to render - e.g: `import { MazStar } from '@maz-ui/icons/MazStar'`
|
|
30
30
|
|
|
31
31
|
Can be custom component from your stack - e.g: `import ComponentIcon from './path_to_your/ComponentIcon.vue'`
|
|
32
32
|
|
|
@@ -38,7 +38,7 @@ Can be custom component from your stack - e.g: `import ComponentIcon from './pat
|
|
|
38
38
|
|
|
39
39
|
```vue
|
|
40
40
|
<script lang="ts" setup>
|
|
41
|
-
import { MazStar } from '@maz-ui/icons'
|
|
41
|
+
import { MazStar } from '@maz-ui/icons/MazStar'
|
|
42
42
|
</script>
|
|
43
43
|
|
|
44
44
|
<template>
|
|
@@ -99,7 +99,7 @@ Can be `xs`, `sm`, `md`, `lg`, `xl`
|
|
|
99
99
|
|
|
100
100
|
```vue
|
|
101
101
|
<script lang="ts" setup>
|
|
102
|
-
import { MazStar } from '@maz-ui/icons'
|
|
102
|
+
import { MazStar } from '@maz-ui/icons/MazStar'
|
|
103
103
|
</script>
|
|
104
104
|
|
|
105
105
|
<template>
|
|
@@ -129,7 +129,7 @@ Allowed units: `px`, `em`, `rem`, `%`, `vw`, `vh`, `cm`, `mm`, `in`, `pt`, `pc`,
|
|
|
129
129
|
|
|
130
130
|
```vue
|
|
131
131
|
<script lang="ts" setup>
|
|
132
|
-
import { MazStar } from '@maz-ui/icons'
|
|
132
|
+
import { MazStar } from '@maz-ui/icons/MazStar'
|
|
133
133
|
</script>
|
|
134
134
|
|
|
135
135
|
<template>
|
|
@@ -94,7 +94,8 @@ For more information about the icons, please check the [MazBtn](./maz-btn.md#ico
|
|
|
94
94
|
|
|
95
95
|
```vue
|
|
96
96
|
<script lang="ts" setup>
|
|
97
|
-
import { MazCheck
|
|
97
|
+
import { MazCheck } from '@maz-ui/icons/MazCheck'
|
|
98
|
+
import { MazHome } from '@maz-ui/icons/MazHome'
|
|
98
99
|
</script>
|
|
99
100
|
|
|
100
101
|
<template>
|
|
@@ -154,7 +155,8 @@ If no `to` or `href` is provided, the component will be a `button` by default. Y
|
|
|
154
155
|
</ComponentDemo>
|
|
155
156
|
|
|
156
157
|
<script setup lang="ts">
|
|
157
|
-
import { MazCheck
|
|
158
|
+
import { MazCheck } from '@maz-ui/icons/MazCheck'
|
|
159
|
+
import { MazHome } from '@maz-ui/icons/MazHome'
|
|
158
160
|
</script>
|
|
159
161
|
|
|
160
162
|
<!--@include: ./../../.vitepress/generated-docs/maz-link.doc.md-->
|
|
@@ -1356,7 +1356,8 @@ MazPopover follows WAI-ARIA guidelines:
|
|
|
1356
1356
|
<script setup>
|
|
1357
1357
|
import { ref, reactive } from 'vue'
|
|
1358
1358
|
import MazPopover from 'maz-ui/src/components/MazPopover.vue'
|
|
1359
|
-
import { MazInformationCircle
|
|
1359
|
+
import { MazInformationCircle } from '@maz-ui/icons/MazInformationCircle'
|
|
1360
|
+
import { MazEllipsisVertical } from '@maz-ui/icons/MazEllipsisVertical'
|
|
1360
1361
|
|
|
1361
1362
|
const isOpen = ref(false)
|
|
1362
1363
|
const events = ref([])
|
|
@@ -10,14 +10,14 @@ description: MazTextarea is a standalone component that replaces the standard ht
|
|
|
10
10
|
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
11
|
|
|
12
12
|
::: info
|
|
13
|
-
This component
|
|
13
|
+
This component uses the native CSS `field-sizing: content` property for autogrow — the textarea expands automatically as the user types, with zero JavaScript overhead.
|
|
14
14
|
:::
|
|
15
15
|
|
|
16
16
|
## Basic usage
|
|
17
17
|
|
|
18
18
|
<ComponentDemo expanded>
|
|
19
19
|
<MazTextarea
|
|
20
|
-
v-model="
|
|
20
|
+
v-model="mainValue"
|
|
21
21
|
name="comment"
|
|
22
22
|
label="Enter your comment"
|
|
23
23
|
/>
|
|
@@ -44,6 +44,30 @@ const value = ref()
|
|
|
44
44
|
</template>
|
|
45
45
|
</ComponentDemo>
|
|
46
46
|
|
|
47
|
+
## With top-label
|
|
48
|
+
|
|
49
|
+
You can use the `top-label` attribute to display a top label above the textarea.
|
|
50
|
+
|
|
51
|
+
<ComponentDemo>
|
|
52
|
+
<MazTextarea
|
|
53
|
+
v-model="value"
|
|
54
|
+
top-label="Your message"
|
|
55
|
+
placeholder="Type your message..."
|
|
56
|
+
/>
|
|
57
|
+
|
|
58
|
+
<template #code>
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<MazTextarea
|
|
62
|
+
v-model="value"
|
|
63
|
+
top-label="Your message"
|
|
64
|
+
placeholder="Type your message..."
|
|
65
|
+
/>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
</template>
|
|
69
|
+
</ComponentDemo>
|
|
70
|
+
|
|
47
71
|
## With label and append slots
|
|
48
72
|
|
|
49
73
|
You can use the `label` and `append` slots to customize the label and the append element.
|
|
@@ -137,6 +161,34 @@ You can use the `hint` attribute to display a hint message. This will replace th
|
|
|
137
161
|
hint="This is a hint message"
|
|
138
162
|
warning
|
|
139
163
|
/>
|
|
164
|
+
<hr class="maz-my-4">
|
|
165
|
+
<MazTextarea
|
|
166
|
+
v-model="value"
|
|
167
|
+
name="comment"
|
|
168
|
+
top-label="This is a label"
|
|
169
|
+
hint="This is a hint message"
|
|
170
|
+
/>
|
|
171
|
+
<MazTextarea
|
|
172
|
+
v-model="value"
|
|
173
|
+
name="comment"
|
|
174
|
+
top-label="This is a label"
|
|
175
|
+
hint="This is a hint message"
|
|
176
|
+
error
|
|
177
|
+
/>
|
|
178
|
+
<MazTextarea
|
|
179
|
+
v-model="value"
|
|
180
|
+
name="comment"
|
|
181
|
+
top-label="This is a label"
|
|
182
|
+
hint="This is a hint message"
|
|
183
|
+
success
|
|
184
|
+
/>
|
|
185
|
+
<MazTextarea
|
|
186
|
+
v-model="value"
|
|
187
|
+
name="comment"
|
|
188
|
+
top-label="This is a label"
|
|
189
|
+
hint="This is a hint message"
|
|
190
|
+
warning
|
|
191
|
+
/>
|
|
140
192
|
</div>
|
|
141
193
|
|
|
142
194
|
<template #code>
|
|
@@ -170,12 +222,61 @@ You can use the `hint` attribute to display a hint message. This will replace th
|
|
|
170
222
|
hint="This is a hint message"
|
|
171
223
|
warning
|
|
172
224
|
/>
|
|
225
|
+
<hr class="maz-my-4">
|
|
226
|
+
<MazTextarea
|
|
227
|
+
v-model="value"
|
|
228
|
+
name="comment"
|
|
229
|
+
top-label="This is a label"
|
|
230
|
+
hint="This is a hint message"
|
|
231
|
+
/>
|
|
232
|
+
<MazTextarea
|
|
233
|
+
v-model="value"
|
|
234
|
+
name="comment"
|
|
235
|
+
top-label="This is a label"
|
|
236
|
+
hint="This is a hint message"
|
|
237
|
+
error
|
|
238
|
+
/>
|
|
239
|
+
<MazTextarea
|
|
240
|
+
v-model="value"
|
|
241
|
+
name="comment"
|
|
242
|
+
top-label="This is a label"
|
|
243
|
+
hint="This is a hint message"
|
|
244
|
+
success
|
|
245
|
+
/>
|
|
246
|
+
<MazTextarea
|
|
247
|
+
v-model="value"
|
|
248
|
+
name="comment"
|
|
249
|
+
top-label="This is a label"
|
|
250
|
+
hint="This is a hint message"
|
|
251
|
+
warning
|
|
252
|
+
/>
|
|
173
253
|
</template>
|
|
174
254
|
```
|
|
175
255
|
|
|
176
256
|
</template>
|
|
177
257
|
</ComponentDemo>
|
|
178
258
|
|
|
259
|
+
## Disable autogrow
|
|
260
|
+
|
|
261
|
+
By default, the textarea automatically expands as the user types. You can disable this behavior with the `autogrow` prop set to `false` — the textarea will then have a fixed height with a manual resize handle.
|
|
262
|
+
|
|
263
|
+
<ComponentDemo>
|
|
264
|
+
<MazTextarea
|
|
265
|
+
v-model="value"
|
|
266
|
+
name="comment"
|
|
267
|
+
label="Fixed height textarea"
|
|
268
|
+
:autogrow="false"
|
|
269
|
+
/>
|
|
270
|
+
|
|
271
|
+
<template #code>
|
|
272
|
+
|
|
273
|
+
```html
|
|
274
|
+
<MazTextarea v-model="value" name="comment" label="Fixed height textarea" :autogrow="false" />
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
</template>
|
|
278
|
+
</ComponentDemo>
|
|
279
|
+
|
|
179
280
|
## Disabled
|
|
180
281
|
|
|
181
282
|
<ComponentDemo>
|
|
@@ -201,6 +302,7 @@ You can use the `hint` attribute to display a hint message. This will replace th
|
|
|
201
302
|
import { ref } from 'vue'
|
|
202
303
|
import { useToast } from 'maz-ui/src/composables/useToast'
|
|
203
304
|
|
|
305
|
+
const mainValue = ref()
|
|
204
306
|
const value = ref()
|
|
205
307
|
|
|
206
308
|
const toast = useToast()
|
|
@@ -212,7 +314,3 @@ You can use the `hint` attribute to display a hint message. This will replace th
|
|
|
212
314
|
value.value = ''
|
|
213
315
|
}
|
|
214
316
|
</script>
|
|
215
|
-
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
```
|
|
@@ -112,12 +112,12 @@ const copyIcon = (icon) => {
|
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
const copyStaticImport = (icon) => {
|
|
115
|
-
navigator.clipboard.writeText(`import { ${icon} } from '@maz-ui/icons'`)
|
|
115
|
+
navigator.clipboard.writeText(`import { ${icon} } from '@maz-ui/icons/${icon}'`)
|
|
116
116
|
success('Static import copied to clipboard')
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
const copyLazyImport = (icon) => {
|
|
120
|
-
navigator.clipboard.writeText(`import {
|
|
120
|
+
navigator.clipboard.writeText(`import { ${icon} } from '@maz-ui/icons/lazy/${icon}'`)
|
|
121
121
|
success('Lazy import copied to clipboard')
|
|
122
122
|
}
|
|
123
123
|
</script>
|
package/docs/src/guide/icons.md
CHANGED
|
@@ -83,9 +83,9 @@ Lazy icons are prefixed with `Lazy` and use `defineAsyncComponent` under the hoo
|
|
|
83
83
|
|
|
84
84
|
```vue
|
|
85
85
|
<script setup lang="ts">
|
|
86
|
-
import {
|
|
87
|
-
|
|
88
|
-
|
|
86
|
+
import { MazCheck } from '@maz-ui/icons/lazy/MazCheck'
|
|
87
|
+
import { MazHeart } from '@maz-ui/icons/lazy/MazHeart'
|
|
88
|
+
import { MazUser } from '@maz-ui/icons/lazy/MazUser'
|
|
89
89
|
</script>
|
|
90
90
|
|
|
91
91
|
<template>
|
package/docs/src/index.md
CHANGED
|
@@ -11,7 +11,29 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
|
|
|
11
11
|
# alt: Logo of Maz-UI
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
<section
|
|
14
|
+
<section class="vp-raw maz-pt-8">
|
|
15
|
+
<MazAnimatedElement :delay="0" class="maz-w-full">
|
|
16
|
+
<a href="https://relizy.dev" target="_blank" rel="noopener" class="maz-block maz-no-underline">
|
|
17
|
+
<MazCardSpotlight color="secondary" content-class="maz-flex maz-flex-col tab-m:maz-flex-row maz-gap-4 maz-items-start tab-m:maz-items-center maz-w-full" class="maz-w-full" :inner-opacity="0.70">
|
|
18
|
+
<img src="https://raw.githubusercontent.com/LouisMazel/relizy/refs/heads/main/resources/logo.svg" alt="Relizy logo" class="maz-h-14 maz-w-14 maz-shrink-0" />
|
|
19
|
+
<div class="maz-flex-1 maz-flex maz-flex-col maz-gap-1 maz-items-start">
|
|
20
|
+
<MazBadge color="primary" class="maz-text-xs" size="0.7rem">
|
|
21
|
+
<MazSparkles class="maz-mr-1" /> New
|
|
22
|
+
</MazBadge>
|
|
23
|
+
<h3 class="maz-text-lg maz-font-semibold maz-m-0">Relizy.dev — Ship releases in one command</h3>
|
|
24
|
+
<p class="dark:maz-text-gray-300 maz-text-muted maz-text-sm maz-m-0">
|
|
25
|
+
Automate versioning, changelogs, Git tagging & publishing to npm, GitHub & GitLab — built for monorepos and single packages.
|
|
26
|
+
</p>
|
|
27
|
+
</div>
|
|
28
|
+
<MazBtn href="https://relizy.dev" color="secondary" size="sm" class="maz-w-full tab-m:maz-w-auto maz-shrink-0" target="_blank" :right-icon="MazArrowTopRightOnSquare">
|
|
29
|
+
Discover Relizy
|
|
30
|
+
</MazBtn>
|
|
31
|
+
</MazCardSpotlight>
|
|
32
|
+
</a>
|
|
33
|
+
</MazAnimatedElement>
|
|
34
|
+
</section>
|
|
35
|
+
|
|
36
|
+
<section id="hero" class="maz-pt-8 maz-pb-12 tab-m:maz-py-12 vp-raw">
|
|
15
37
|
<div class="maz-mx-auto maz-max-w-3xl">
|
|
16
38
|
<MazAnimatedText
|
|
17
39
|
text="Collection of standalone components, plugins, directives, composables and more"
|
|
@@ -88,7 +110,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
|
|
|
88
110
|
class="maz-relative maz-w-full"
|
|
89
111
|
content-class="maz-flex maz-flex-col maz-gap-2 maz-items-start"
|
|
90
112
|
>
|
|
91
|
-
<DemoDashboardPage :delay="2000" class="maz-hidden tab-m:maz-block" />
|
|
113
|
+
<!-- <DemoDashboardPage :delay="2000" class="maz-hidden tab-m:maz-block" /> -->
|
|
92
114
|
<div class="dark:maz-hidden">
|
|
93
115
|
<MazLazyImg class="maz-block tab-m:!maz-hidden maz-w-full maz-min-h-40" src="/img/demo/dashboard-light.png" alt="Maz-UI" />
|
|
94
116
|
</div>
|
|
@@ -105,7 +127,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
|
|
|
105
127
|
class="maz-relative maz-w-full"
|
|
106
128
|
content-class="maz-flex maz-flex-col maz-gap-2 maz-items-start"
|
|
107
129
|
>
|
|
108
|
-
<DemoProductPage class="maz-hidden tab-m:maz-block" />
|
|
130
|
+
<!-- <DemoProductPage class="maz-hidden tab-m:maz-block" /> -->
|
|
109
131
|
<div class="dark:maz-hidden">
|
|
110
132
|
<MazLazyImg class="maz-block tab-m:!maz-hidden maz-w-full maz-min-h-40" src="/img/demo/product-page-light.png" alt="Maz-UI" />
|
|
111
133
|
</div>
|
|
@@ -122,7 +144,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
|
|
|
122
144
|
class="maz-relative maz-w-full"
|
|
123
145
|
content-class="maz-flex maz-flex-col maz-gap-2 maz-items-start"
|
|
124
146
|
>
|
|
125
|
-
<DemoAuthPage class="maz-hidden tab-m:maz-flex" />
|
|
147
|
+
<!-- <DemoAuthPage class="maz-hidden tab-m:maz-flex" /> -->
|
|
126
148
|
<div class="dark:maz-hidden">
|
|
127
149
|
<MazLazyImg class="maz-block tab-m:!maz-hidden maz-w-full maz-min-h-40" src="/img/demo/auth-page-light.png" alt="Maz-UI" />
|
|
128
150
|
</div>
|
|
@@ -504,9 +526,15 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
|
|
|
504
526
|
import DemoDashboardPage from '../components/DemoDashboardPage.vue'
|
|
505
527
|
import DemoProductPage from '../components/DemoProductPage.vue'
|
|
506
528
|
import Contributors from './../.vitepress/theme/components/Contributors.vue'
|
|
529
|
+
import { MazArrowTopRightOnSquare } from '@maz-ui/icons/MazArrowTopRightOnSquare'
|
|
530
|
+
import { MazStar } from '@maz-ui/icons/MazStar'
|
|
531
|
+
import { MazPlay } from '@maz-ui/icons/MazPlay'
|
|
532
|
+
import { MazGithub } from '@maz-ui/icons/MazGithub'
|
|
533
|
+
import { MazSun } from '@maz-ui/icons/MazSun'
|
|
534
|
+
import { MazMoon } from '@maz-ui/icons/MazMoon'
|
|
535
|
+
import { MazSparkles } from '@maz-ui/icons/MazSparkles'
|
|
507
536
|
|
|
508
537
|
import { ref, computed } from 'vue'
|
|
509
|
-
import { MazStar, MazPlay, MazGithub, MazSun, MazMoon } from '@maz-ui/icons'
|
|
510
538
|
import { useTheme } from '@maz-ui/themes/composables/useTheme'
|
|
511
539
|
|
|
512
540
|
const {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maz-ui/mcp",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "4.9.
|
|
4
|
+
"version": "4.9.3",
|
|
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.
|
|
44
|
+
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
45
45
|
"@maz-ui/node": "4.6.1",
|
|
46
46
|
"@maz-ui/utils": "4.7.6"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@modelcontextprotocol/inspector": "^0.21.
|
|
50
|
-
"@swc/core": "1.15.
|
|
51
|
-
"prettier": "^3.8.
|
|
49
|
+
"@modelcontextprotocol/inspector": "^0.21.2",
|
|
50
|
+
"@swc/core": "1.15.30",
|
|
51
|
+
"prettier": "^3.8.3",
|
|
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.
|
|
55
|
+
"@maz-ui/eslint-config": "4.9.1"
|
|
56
56
|
},
|
|
57
57
|
"lint-staged": {
|
|
58
58
|
"*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
|