@maz-ui/mcp 5.0.0-beta.3 → 5.0.0-beta.5
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-input-phone-number.doc.md +42 -38
- package/docs/generated-docs/maz-textarea.doc.md +25 -24
- package/docs/src/components/maz-container.md +2 -2
- package/docs/src/components/maz-input-phone-number.md +106 -103
- package/docs/src/components/maz-textarea.md +27 -1
- package/package.json +4 -4
package/dist/mcp.mjs
CHANGED
|
@@ -7,7 +7,7 @@ import { existsSync, readFileSync, readdirSync } from 'node:fs';
|
|
|
7
7
|
import { resolve, join, dirname } from 'node:path';
|
|
8
8
|
import { fileURLToPath } from 'node:url';
|
|
9
9
|
|
|
10
|
-
const version = "5.0.0-beta.
|
|
10
|
+
const version = "5.0.0-beta.4";
|
|
11
11
|
|
|
12
12
|
class MetadataExtractor {
|
|
13
13
|
extract(name, type, content, manualTags = []) {
|
|
@@ -1,43 +1,47 @@
|
|
|
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/>The current value of the input field in international format (e.g. +33612345678)<br/>**Example:** `"+33612345678"`
|
|
8
|
-
| **country-code** | `v-model:country-code` <br/>The selected country code (e.g. "FR")<br/>**Example:** `"FR"`
|
|
9
|
-
| **id** | Unique identifier for the component<br/>**Example:** `"phone-input-1"`
|
|
10
|
-
| **placeholder** | Text displayed when the input is empty<br/>**Example:** `"Enter your phone number"`
|
|
11
|
-
| **label**
|
|
12
|
-
| **
|
|
13
|
-
| **
|
|
14
|
-
| **
|
|
15
|
-
| **
|
|
16
|
-
| **
|
|
17
|
-
| **
|
|
18
|
-
| **
|
|
19
|
-
| **
|
|
20
|
-
| **
|
|
21
|
-
| **
|
|
22
|
-
| **
|
|
23
|
-
| **
|
|
24
|
-
| **search
|
|
25
|
-
| **
|
|
26
|
-
| **
|
|
27
|
-
| **
|
|
28
|
-
| **
|
|
29
|
-
| **
|
|
30
|
-
| **
|
|
31
|
-
| **
|
|
32
|
-
| **
|
|
33
|
-
| **validation-
|
|
34
|
-
| **success**
|
|
35
|
-
| **
|
|
36
|
-
| **
|
|
37
|
-
| **
|
|
38
|
-
| **
|
|
39
|
-
| **
|
|
40
|
-
| **
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
|
|
5
|
+
| **style** | Style attribut of the component root element | `HTMLAttributes['style']` | No | `undefined` | - |
|
|
6
|
+
| **class** | Class attribut of the component root element | `HTMLAttributes['class']` | No | `undefined` | - |
|
|
7
|
+
| **model-value** | `v-model` <br/>The current value of the input field in international format (e.g. +33612345678)<br/>**Example:** `"+33612345678"` | `string \| undefined \| null` | No | `undefined` | - |
|
|
8
|
+
| **country-code** | `v-model:country-code` <br/>The selected country code (e.g. "FR")<br/>**Example:** `"FR"` | `CountryCode \| undefined \| null` | No | `undefined` | - |
|
|
9
|
+
| **id** | Unique identifier for the component<br/>**Example:** `"phone-input-1"` | `string` | No | `undefined` | - |
|
|
10
|
+
| **placeholder** | Text displayed when the input is empty<br/>**Example:** `"Enter your phone number"` | `string` | No | `undefined` | - |
|
|
11
|
+
| **top-label** | Static label displayed above the input field. Unlike the floating label, this remains fixed<br/>**Example:** `"User Information"` | `string` | No | `undefined` | - |
|
|
12
|
+
| **label** | Label displayed above the input<br/>**Example:** `"Phone Number"` | `string` | No | `undefined` | - |
|
|
13
|
+
| **preferred-countries** | List of country codes to place first in the select list<br/>**Example:** `["FR", "BE", "GE"]` | `CountryCode[]` | No | `undefined` | - |
|
|
14
|
+
| **ignored-countries** | List of country codes to be removed from the select list<br/>**Example:** `["FR", "BE", "GE"]` | `CountryCode[]` | No | `undefined` | - |
|
|
15
|
+
| **only-countries** | List of country codes to only have the countries selected in the select list<br/>**Example:** `["FR", "BE", "GE"]` | `CountryCode[]` | No | `undefined` | - |
|
|
16
|
+
| **translations** | Locale strings of the component The default values are the translations of the MazUiTranslations plugin | `Partial<MazUiTranslationsNestedSchema['inputPhoneNumber']>` | No | `{ countrySelect: { error: 'Choose country', placeholder: 'Country code', searchPlaceholder: 'Search the country', }, phoneInput: { placeholder: 'Phone number', example: 'Example: {example}', }, }` | - |
|
|
17
|
+
| **list-position** | Position where the list of countries will be opened | `MazPopoverProps['position']` | No | `bottom left` | `top left, top right, bottom left, bottom right` |
|
|
18
|
+
| **color** | Component color applied | `MazColor` | No | `primary` | `primary, secondary, accent, info, success, warning, destructive, contrast` |
|
|
19
|
+
| **size** | Component size applied | `MazSize` | No | `md` | `xs, sm, md, lg, xl, mini` |
|
|
20
|
+
| **hide-flags** | Remove flags in country list | `boolean` | No | `false` | - |
|
|
21
|
+
| **disabled** | Make the input disabled | `boolean` | No | `false` | - |
|
|
22
|
+
| **required** | Make the input required | `boolean` | No | `false` | - |
|
|
23
|
+
| **example** | Show the phone number example | `boolean` | No | `true` | - |
|
|
24
|
+
| **search** | Disable search input in country list | `boolean` | No | `true` | - |
|
|
25
|
+
| **search-threshold** | Threshold of the search input in country list where 1 is a perfect match and 0 is a match with any character | `number` | No | `0.75` | - |
|
|
26
|
+
| **use-browser-locale** | If true, the browser locale will be used | `boolean` | No | `true` | - |
|
|
27
|
+
| **fetch-country** | The component will make a request (https://ipwho.is) to get the location of the user and use it to set the default country code | `boolean` | No | `false` | - |
|
|
28
|
+
| **hide-country-select** | Hide the country selector | `boolean` | No | `false` | - |
|
|
29
|
+
| **show-code-in-list** | Show country calling code in the country list | `boolean` | No | `false` | - |
|
|
30
|
+
| **custom-countries-list** | Replace country names | `Record<CountryCode, string>` | No | `undefined` | - |
|
|
31
|
+
| **auto-format** | Disabled auto-format when phone is valid | `"blur" \| "typing" \| "disabled" \| false` | No | `blur` | - |
|
|
32
|
+
| **country-locale** | Locale of country list<br/>**Example:** `"fr-FR"` | `string` | No | `undefined` | - |
|
|
33
|
+
| **validation-error** | Disable validation error UI | `boolean` | No | `true` | - |
|
|
34
|
+
| **validation-success** | Disable validation success UI | `boolean` | No | `true` | - |
|
|
35
|
+
| **success** | Add success UI | `boolean` | No | `false` | - |
|
|
36
|
+
| **error** | Add error UI | `boolean` | No | `false` | - |
|
|
37
|
+
| **warning** | Add warning UI | `boolean` | No | `false` | - |
|
|
38
|
+
| **display-country-name** | Will replace the calling code by the country name in the country selector | `boolean` | No | `false` | - |
|
|
39
|
+
| **block** | The input will be displayed in full width | `boolean` | No | `false` | - |
|
|
40
|
+
| **orientation** | Orientation of the inputs in the component | `'row' \| 'col' \| 'responsive'` | No | `responsive` | `row, col, responsive` |
|
|
41
|
+
| **country-select-attributes** | Meta attributes of the country input | `Record<string, unknown>` | No | `{ autocomplete: 'off', name: 'country' }` | - |
|
|
42
|
+
| **phone-input-attributes** | Meta attributes of the phone number input | `Record<string, unknown>` | No | `{ autocomplete: 'tel', name: 'phone', inputmode: 'tel' }` | - |
|
|
43
|
+
| **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` | - |
|
|
44
|
+
| **hint** | Alternative text that replaces the label when provided. Useful for contextual hints<br/>**Example:** `"This phone number is not valid"` | `string` | No | `undefined` | - |
|
|
41
45
|
|
|
42
46
|
## Events
|
|
43
47
|
|
|
@@ -1,29 +1,30 @@
|
|
|
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
|
-
| **autogrow** | If the textarea should autogrow based on its content
|
|
25
|
-
| **append-justify** | The alignment of the append slot
|
|
26
|
-
| **top-label** | Static label displayed above the textarea. Unlike the floating label, this remains fixed
|
|
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"` | No | `'md'` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` |
|
|
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` | - |
|
|
27
|
+
| **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` | - |
|
|
27
28
|
|
|
28
29
|
## Events
|
|
29
30
|
|
|
@@ -301,7 +301,7 @@ Use the `header` slot to fully customize the header, or use `title`, `icon-start
|
|
|
301
301
|
<ComponentDemo>
|
|
302
302
|
<MazContainer
|
|
303
303
|
title="Dashboard Overview"
|
|
304
|
-
start-icon="chart-bar"
|
|
304
|
+
start-icon="/chart-bar.svg"
|
|
305
305
|
elevation
|
|
306
306
|
:bordered="false"
|
|
307
307
|
rounded-size="xl"
|
|
@@ -329,7 +329,7 @@ Use the `header` slot to fully customize the header, or use `title`, `icon-start
|
|
|
329
329
|
<template>
|
|
330
330
|
<MazContainer
|
|
331
331
|
title="Dashboard Overview"
|
|
332
|
-
start-icon="chart-bar"
|
|
332
|
+
start-icon="/chart-bar.svg"
|
|
333
333
|
elevation
|
|
334
334
|
:bordered="false"
|
|
335
335
|
rounded-size="xl"
|
|
@@ -68,34 +68,28 @@ const results = ref<MazInputPhoneNumberData>()
|
|
|
68
68
|
Control which countries appear in the dropdown and their order.
|
|
69
69
|
|
|
70
70
|
<ComponentDemo>
|
|
71
|
-
<div class="maz:
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
<MazInputPhoneNumber
|
|
94
|
-
v-model="phone3"
|
|
95
|
-
:ignored-countries="['AF', 'AL', 'DZ']"
|
|
96
|
-
placeholder="Some countries are hidden"
|
|
97
|
-
/>
|
|
98
|
-
</div>
|
|
71
|
+
<div class="maz:flex maz:flex-col maz:gap-4">
|
|
72
|
+
<MazInputPhoneNumber
|
|
73
|
+
top-label="Preferred Countries"
|
|
74
|
+
assistive-text="Show your most common countries first"
|
|
75
|
+
v-model="phone1"
|
|
76
|
+
:preferred-countries="['US', 'FR', 'GB', 'DE', 'CA']"
|
|
77
|
+
placeholder="Common countries appear first"
|
|
78
|
+
/>
|
|
79
|
+
<MazInputPhoneNumber
|
|
80
|
+
top-label="Only Specific Countries"
|
|
81
|
+
assistive-text="Limit to certain countries only"
|
|
82
|
+
v-model="phone2"
|
|
83
|
+
:only-countries="['US', 'FR', 'GB', 'DE', 'IT', 'ES']"
|
|
84
|
+
placeholder="Only European + North American countries"
|
|
85
|
+
/>
|
|
86
|
+
<MazInputPhoneNumber
|
|
87
|
+
top-label="Ignore Countries"
|
|
88
|
+
assistive-text="Remove unwanted countries"
|
|
89
|
+
v-model="phone3"
|
|
90
|
+
:ignored-countries="['AF', 'AL', 'DZ']"
|
|
91
|
+
placeholder="Some countries are hidden"
|
|
92
|
+
/>
|
|
99
93
|
</div>
|
|
100
94
|
|
|
101
95
|
<template #code>
|
|
@@ -133,22 +127,22 @@ Control which countries appear in the dropdown and their order.
|
|
|
133
127
|
Choose how the country selector and phone input are arranged.
|
|
134
128
|
|
|
135
129
|
<ComponentDemo>
|
|
136
|
-
<div class="maz:
|
|
137
|
-
<
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
<
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
<
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
130
|
+
<div class="maz:flex maz:flex-col maz:gap-6">
|
|
131
|
+
<MazInputPhoneNumber
|
|
132
|
+
top-label="Responsive"
|
|
133
|
+
assistive-text="Stacks on mobile, side-by-side on desktop"
|
|
134
|
+
orientation="responsive"
|
|
135
|
+
/>
|
|
136
|
+
<MazInputPhoneNumber
|
|
137
|
+
top-label="Always Row"
|
|
138
|
+
assistive-text="Side-by-side on all screen sizes"
|
|
139
|
+
orientation="row"
|
|
140
|
+
/>
|
|
141
|
+
<MazInputPhoneNumber
|
|
142
|
+
top-label="Always Column"
|
|
143
|
+
assistive-text="Stacked on all screen sizes"
|
|
144
|
+
orientation="col"
|
|
145
|
+
/>
|
|
152
146
|
</div>
|
|
153
147
|
|
|
154
148
|
<template #code>
|
|
@@ -156,13 +150,25 @@ Choose how the country selector and phone input are arranged.
|
|
|
156
150
|
```vue
|
|
157
151
|
<template>
|
|
158
152
|
<!-- Responsive layout (default) -->
|
|
159
|
-
<MazInputPhoneNumber
|
|
153
|
+
<MazInputPhoneNumber
|
|
154
|
+
top-label="Responsive"
|
|
155
|
+
assistive-text="Stacks on mobile, side-by-side on desktop"
|
|
156
|
+
orientation="responsive"
|
|
157
|
+
/>
|
|
160
158
|
|
|
161
159
|
<!-- Always side-by-side -->
|
|
162
|
-
<MazInputPhoneNumber
|
|
160
|
+
<MazInputPhoneNumber
|
|
161
|
+
top-label="Always Row"
|
|
162
|
+
assistive-text="Side-by-side on all screen sizes"
|
|
163
|
+
orientation="row"
|
|
164
|
+
/>
|
|
163
165
|
|
|
164
166
|
<!-- Always stacked -->
|
|
165
|
-
<MazInputPhoneNumber
|
|
167
|
+
<MazInputPhoneNumber
|
|
168
|
+
top-label="Always Column"
|
|
169
|
+
assistive-text="Stacked on all screen sizes"
|
|
170
|
+
orientation="col"
|
|
171
|
+
/>
|
|
166
172
|
</template>
|
|
167
173
|
```
|
|
168
174
|
|
|
@@ -174,34 +180,30 @@ Choose how the country selector and phone input are arranged.
|
|
|
174
180
|
Customize what information is shown to users.
|
|
175
181
|
|
|
176
182
|
<ComponentDemo>
|
|
177
|
-
<div class="maz:
|
|
178
|
-
<
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
:
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
<h4 class="maz:font-semibold maz:mb-2">Hide Country Flags</h4>
|
|
202
|
-
<p class="maz:text-sm maz:text-muted maz:mb-2">Text-only country selection</p>
|
|
203
|
-
<MazInputPhoneNumber hide-flags />
|
|
204
|
-
</div>
|
|
183
|
+
<div class="maz:flex maz:flex-col maz:gap-4">
|
|
184
|
+
<MazInputPhoneNumber
|
|
185
|
+
top-label="Show Country Names"
|
|
186
|
+
assistive-text="Display country names instead of calling codes"
|
|
187
|
+
display-country-name
|
|
188
|
+
:translations="{
|
|
189
|
+
countrySelect: { placeholder: 'Choose country' }
|
|
190
|
+
}"
|
|
191
|
+
/>
|
|
192
|
+
<MazInputPhoneNumber
|
|
193
|
+
top-label="Show Calling Codes in List"
|
|
194
|
+
assistive-text="Help users see the dialing codes"
|
|
195
|
+
show-code-in-list
|
|
196
|
+
/>
|
|
197
|
+
<MazInputPhoneNumber
|
|
198
|
+
top-label="Hide Phone Examples"
|
|
199
|
+
assistive-text="Remove the example phone number hints (visible when the phone input is focused)"
|
|
200
|
+
:example="false"
|
|
201
|
+
/>
|
|
202
|
+
<MazInputPhoneNumber
|
|
203
|
+
top-label="Hide Country Flags"
|
|
204
|
+
assistive-text="Text-only country selection"
|
|
205
|
+
hide-flags
|
|
206
|
+
/>
|
|
205
207
|
</div>
|
|
206
208
|
|
|
207
209
|
<template #code>
|
|
@@ -762,34 +764,35 @@ const mobilePhone = ref()
|
|
|
762
764
|
Understanding what data the component provides.
|
|
763
765
|
|
|
764
766
|
<ComponentDemo>
|
|
765
|
-
<
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
<
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
<
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
<
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
<
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
<
|
|
791
|
-
|
|
792
|
-
|
|
767
|
+
<MazInputPhoneNumber
|
|
768
|
+
v-model="dataPhone"
|
|
769
|
+
v-model:country-code="dataCountry"
|
|
770
|
+
top-label="Your phone number"
|
|
771
|
+
placeholder="Enter a phone number to see data"
|
|
772
|
+
assistive-text="Enter your phone number in international format (e.g. +33612345678)"
|
|
773
|
+
@data="phoneData = $event"
|
|
774
|
+
/>
|
|
775
|
+
|
|
776
|
+
<div v-if="phoneData" class="maz:bg-surface-400 maz:pt-8 maz:rounded-md">
|
|
777
|
+
<h4 class="maz:font-semibold maz:mb-3">📊 Phone Number Data</h4>
|
|
778
|
+
<div class="maz:grid maz:grid-cols-1 maz:md:grid-cols-2 maz:gap-4 maz:text-sm">
|
|
779
|
+
<div>
|
|
780
|
+
<strong>Valid:</strong> {{ phoneData?.isValid ? '✅' : '❌' }}
|
|
781
|
+
</div>
|
|
782
|
+
<div>
|
|
783
|
+
<strong>Country:</strong> {{ phoneData?.countryCode || 'None' }}
|
|
784
|
+
</div>
|
|
785
|
+
<div>
|
|
786
|
+
<strong>National Format:</strong> {{ phoneData?.formatNational || 'None' }}
|
|
787
|
+
</div>
|
|
788
|
+
<div>
|
|
789
|
+
<strong>International:</strong> {{ phoneData?.formatInternational || 'None' }}
|
|
790
|
+
</div>
|
|
791
|
+
<div>
|
|
792
|
+
<strong>E164 Format:</strong> {{ phoneData?.e164 || 'None' }}
|
|
793
|
+
</div>
|
|
794
|
+
<div>
|
|
795
|
+
<strong>Phone Type:</strong> {{ phoneData?.type || 'Unknown' }}
|
|
793
796
|
</div>
|
|
794
797
|
</div>
|
|
795
798
|
</div>
|
|
@@ -68,6 +68,32 @@ You can use the `top-label` attribute to display a top label above the textarea.
|
|
|
68
68
|
</template>
|
|
69
69
|
</ComponentDemo>
|
|
70
70
|
|
|
71
|
+
## With assistive text
|
|
72
|
+
|
|
73
|
+
You can use the `assistive-text` attribute to display a assistive text below the textarea.
|
|
74
|
+
|
|
75
|
+
<ComponentDemo>
|
|
76
|
+
<MazTextarea
|
|
77
|
+
v-model="value"
|
|
78
|
+
top-label="Your message"
|
|
79
|
+
placeholder="Type your message..."
|
|
80
|
+
assistive-text="This is an assistive text"
|
|
81
|
+
/>
|
|
82
|
+
|
|
83
|
+
<template #code>
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<MazTextarea
|
|
87
|
+
v-model="value"
|
|
88
|
+
top-label="Your message"
|
|
89
|
+
placeholder="Type your message..."
|
|
90
|
+
assistive-text="This is an assistive text"
|
|
91
|
+
/>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
</template>
|
|
95
|
+
</ComponentDemo>
|
|
96
|
+
|
|
71
97
|
## With label and append slots
|
|
72
98
|
|
|
73
99
|
You can use the `label` and `append` slots to customize the label and the append element.
|
|
@@ -84,7 +110,7 @@ You can use the `label` and `append` slots to customize the label and the append
|
|
|
84
110
|
</span>
|
|
85
111
|
</template>
|
|
86
112
|
<template #append>
|
|
87
|
-
<MazBtn icon="paper-airplane" size="sm" @click="sendMessage" />
|
|
113
|
+
<MazBtn icon="/paper-airplane.svg" size="sm" @click="sendMessage" />
|
|
88
114
|
</template>
|
|
89
115
|
</MazTextarea>
|
|
90
116
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maz-ui/mcp",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "5.0.0-beta.
|
|
4
|
+
"version": "5.0.0-beta.5",
|
|
5
5
|
"description": "Maz-UI ModelContextProtocol Client",
|
|
6
6
|
"author": "Louis Mazel <me@loicmazuel.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
45
|
-
"@maz-ui/
|
|
46
|
-
"@maz-ui/
|
|
45
|
+
"@maz-ui/node": "5.0.0-beta.5",
|
|
46
|
+
"@maz-ui/utils": "5.0.0-beta.5"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@modelcontextprotocol/inspector": "^0.21.2",
|
|
@@ -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": "5.0.0-beta.
|
|
55
|
+
"@maz-ui/eslint-config": "5.0.0-beta.5"
|
|
56
56
|
},
|
|
57
57
|
"lint-staged": {
|
|
58
58
|
"*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
|