@maz-ui/mcp 5.0.0-beta.5 → 5.0.0-beta.51

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 (164) hide show
  1. package/README.md +1 -1
  2. package/dist/mcp.d.mts +22 -9
  3. package/dist/mcp.d.ts +22 -9
  4. package/dist/mcp.mjs +160 -83
  5. package/docs/generated-docs/maz-avatar.doc.md +30 -30
  6. package/docs/generated-docs/maz-bottom-sheet.doc.md +16 -13
  7. package/docs/generated-docs/maz-btn.doc.md +21 -19
  8. package/docs/generated-docs/maz-checkbox.doc.md +16 -17
  9. package/docs/generated-docs/maz-circular-progress-bar.doc.md +1 -1
  10. package/docs/generated-docs/maz-code-highlight.doc.md +11 -0
  11. package/docs/generated-docs/maz-container.doc.md +1 -0
  12. package/docs/generated-docs/maz-date-picker.doc.md +41 -41
  13. package/docs/generated-docs/maz-drawer.doc.md +7 -8
  14. package/docs/generated-docs/maz-dropdown.doc.md +3 -0
  15. package/docs/generated-docs/maz-expand-animation.doc.md +4 -4
  16. package/docs/generated-docs/maz-fullscreen-loader.doc.md +5 -5
  17. package/docs/generated-docs/maz-gallery.doc.md +15 -15
  18. package/docs/generated-docs/maz-input-code.doc.md +16 -16
  19. package/docs/generated-docs/maz-input-phone-number.doc.md +43 -42
  20. package/docs/generated-docs/maz-input-price.doc.md +14 -14
  21. package/docs/generated-docs/maz-input-tags.doc.md +16 -16
  22. package/docs/generated-docs/maz-input.doc.md +33 -33
  23. package/docs/generated-docs/maz-lazy-img.doc.md +14 -14
  24. package/docs/generated-docs/maz-loading-bar.doc.md +4 -4
  25. package/docs/generated-docs/maz-markdown-editor.doc.md +65 -0
  26. package/docs/generated-docs/maz-popover.doc.md +1 -1
  27. package/docs/generated-docs/maz-pull-to-refresh.doc.md +39 -20
  28. package/docs/generated-docs/maz-radio-buttons.doc.md +17 -17
  29. package/docs/generated-docs/maz-radio.doc.md +16 -16
  30. package/docs/generated-docs/maz-reading-progress-bar.doc.md +4 -4
  31. package/docs/generated-docs/maz-select-country.doc.md +27 -26
  32. package/docs/generated-docs/maz-sidebar-content.doc.md +5 -0
  33. package/docs/generated-docs/maz-sidebar-footer.doc.md +5 -0
  34. package/docs/generated-docs/maz-sidebar-group.doc.md +11 -0
  35. package/docs/generated-docs/maz-sidebar-header.doc.md +5 -0
  36. package/docs/generated-docs/maz-sidebar-menu-button.doc.md +27 -0
  37. package/docs/generated-docs/maz-sidebar-menu-item.doc.md +5 -0
  38. package/docs/generated-docs/maz-sidebar-menu-sub.doc.md +16 -0
  39. package/docs/generated-docs/maz-sidebar-menu.doc.md +5 -0
  40. package/docs/generated-docs/maz-sidebar-separator.doc.md +0 -0
  41. package/docs/generated-docs/maz-sidebar-trigger.doc.md +5 -0
  42. package/docs/generated-docs/maz-sidebar.doc.md +36 -0
  43. package/docs/generated-docs/maz-slider.doc.md +1 -1
  44. package/docs/generated-docs/maz-spinner.doc.md +4 -4
  45. package/docs/generated-docs/maz-switch.doc.md +14 -14
  46. package/docs/generated-docs/maz-table-virtualizer.doc.md +20 -0
  47. package/docs/generated-docs/maz-table.doc.md +43 -37
  48. package/docs/generated-docs/maz-tabs-bar.doc.md +20 -9
  49. package/docs/generated-docs/maz-tabs.doc.md +6 -3
  50. package/docs/generated-docs/maz-textarea.doc.md +27 -25
  51. package/docs/generated-docs/maz-ticker.doc.md +1 -1
  52. package/docs/generated-docs/maz-timeline.doc.md +4 -4
  53. package/docs/generated-docs/maz-window-mockup.doc.md +23 -0
  54. package/docs/src/blog/v4.md +1 -1
  55. package/docs/src/blog/v5.md +5 -7
  56. package/docs/src/components/maz-avatar.md +52 -4
  57. package/docs/src/components/maz-bottom-sheet.md +300 -169
  58. package/docs/src/components/maz-btn.md +1 -1
  59. package/docs/src/components/maz-checklist.md +10 -10
  60. package/docs/src/components/maz-code-highlight.md +233 -0
  61. package/docs/src/components/maz-date-picker.md +55 -1
  62. package/docs/src/components/maz-dialog.md +46 -0
  63. package/docs/src/components/maz-dropdown.md +32 -16
  64. package/docs/src/components/maz-icon.md +16 -5
  65. package/docs/src/components/maz-input-phone-number.md +30 -0
  66. package/docs/src/components/maz-lazy-img.md +64 -0
  67. package/docs/src/components/maz-markdown-editor.md +369 -0
  68. package/docs/src/components/maz-pull-to-refresh.md +176 -17
  69. package/docs/src/components/maz-select-country.md +138 -1
  70. package/docs/src/components/maz-sidebar.md +719 -0
  71. package/docs/src/components/maz-table.md +156 -1
  72. package/docs/src/components/maz-tabs.md +110 -3
  73. package/docs/src/components/maz-textarea.md +58 -0
  74. package/docs/src/components/maz-timeline.md +60 -0
  75. package/docs/src/components/maz-window-mockup.md +249 -0
  76. package/docs/src/composables/use-drag.md +239 -0
  77. package/docs/src/composables/use-form-validator.md +297 -16
  78. package/docs/src/composables/use-pull-to-refresh.md +79 -0
  79. package/docs/src/composables/use-swipe.md +26 -11
  80. package/docs/src/directives/click-outside.md +8 -15
  81. package/docs/src/directives/fullscreen-img.md +1 -1
  82. package/docs/src/directives/lazy-img.md +44 -11
  83. package/docs/src/directives/tooltip.md +24 -1
  84. package/docs/src/directives/zoom-img.md +1 -1
  85. package/docs/src/ecosystem/eslint-config.md +95 -1
  86. package/docs/src/{guide/icons.md → ecosystem/icons/index.md} +1 -1
  87. package/docs/src/ecosystem/node/exec-promise.md +87 -0
  88. package/docs/src/ecosystem/node/index.md +53 -0
  89. package/docs/src/ecosystem/node/logger.md +146 -0
  90. package/docs/src/ecosystem/node/print-banner.md +93 -0
  91. package/docs/src/{guide → ecosystem}/nuxt.md +102 -47
  92. package/docs/src/{guide → ecosystem}/themes.md +152 -71
  93. package/docs/src/{guide → ecosystem}/translations.md +1 -1
  94. package/docs/src/ecosystem/utils/camel-case.md +31 -0
  95. package/docs/src/{helpers → ecosystem/utils}/capitalize.md +2 -3
  96. package/docs/src/ecosystem/utils/check-availability.md +79 -0
  97. package/docs/src/ecosystem/utils/cookie.md +80 -0
  98. package/docs/src/ecosystem/utils/debounce-callback.md +38 -0
  99. package/docs/src/ecosystem/utils/debounce-id.md +69 -0
  100. package/docs/src/ecosystem/utils/debounce.md +65 -0
  101. package/docs/src/ecosystem/utils/fetch-locale-ip.md +33 -0
  102. package/docs/src/ecosystem/utils/format-json.md +33 -0
  103. package/docs/src/ecosystem/utils/format-phone-number.md +37 -0
  104. package/docs/src/ecosystem/utils/get-browser-locale.md +29 -0
  105. package/docs/src/ecosystem/utils/get-error-message.md +39 -0
  106. package/docs/src/ecosystem/utils/idle-timeout.md +90 -0
  107. package/docs/src/ecosystem/utils/index.md +60 -0
  108. package/docs/src/ecosystem/utils/is-client.md +32 -0
  109. package/docs/src/ecosystem/utils/is-equal.md +38 -0
  110. package/docs/src/ecosystem/utils/is-server.md +31 -0
  111. package/docs/src/ecosystem/utils/is-standalone-mode.md +43 -0
  112. package/docs/src/ecosystem/utils/kebab-case.md +36 -0
  113. package/docs/src/ecosystem/utils/normalize-string.md +77 -0
  114. package/docs/src/ecosystem/utils/pascal-case.md +35 -0
  115. package/docs/src/ecosystem/utils/script-loader.md +77 -0
  116. package/docs/src/ecosystem/utils/sleep.md +59 -0
  117. package/docs/src/ecosystem/utils/snake-case.md +36 -0
  118. package/docs/src/ecosystem/utils/swipe-handler.md +91 -0
  119. package/docs/src/ecosystem/utils/textarea-autogrow.md +41 -0
  120. package/docs/src/ecosystem/utils/throttle-id.md +48 -0
  121. package/docs/src/ecosystem/utils/throttle.md +57 -0
  122. package/docs/src/ecosystem/utils/truthy-filter.md +31 -0
  123. package/docs/src/ecosystem/utils/types/deep-key-of.md +48 -0
  124. package/docs/src/ecosystem/utils/types/deep-partial.md +42 -0
  125. package/docs/src/ecosystem/utils/types/deep-required.md +39 -0
  126. package/docs/src/ecosystem/utils/types/flatten-object-keys.md +44 -0
  127. package/docs/src/ecosystem/utils/types/generic-instance-type.md +42 -0
  128. package/docs/src/ecosystem/utils/types/infer-maybe-ref.md +35 -0
  129. package/docs/src/ecosystem/utils/upper-first.md +32 -0
  130. package/docs/src/ecosystem/utils/user-visibility.md +69 -0
  131. package/docs/src/guide/getting-started.md +15 -13
  132. package/docs/src/guide/global-defaults.md +102 -0
  133. package/docs/src/guide/maz-ui-provider.md +6 -3
  134. package/docs/src/guide/migration-v4.md +13 -9
  135. package/docs/src/guide/migration-v5.md +211 -15
  136. package/docs/src/guide/resolvers.md +8 -8
  137. package/docs/src/guide/tailwind.md +4 -0
  138. package/docs/src/guide/vue.md +4 -4
  139. package/docs/src/index.md +13 -13
  140. package/docs/src/plugins/aos.md +1 -1
  141. package/package.json +11 -10
  142. package/docs/src/helpers/camel-case.md +0 -14
  143. package/docs/src/helpers/check-availability.md +0 -14
  144. package/docs/src/helpers/debounce-callback.md +0 -14
  145. package/docs/src/helpers/debounce-id.md +0 -14
  146. package/docs/src/helpers/debounce.md +0 -14
  147. package/docs/src/helpers/is-client.md +0 -14
  148. package/docs/src/helpers/is-equal.md +0 -14
  149. package/docs/src/helpers/is-standalone-mode.md +0 -14
  150. package/docs/src/helpers/kebab-case.md +0 -14
  151. package/docs/src/helpers/normalize-string.md +0 -14
  152. package/docs/src/helpers/pascal-case.md +0 -14
  153. package/docs/src/helpers/script-loader.md +0 -14
  154. package/docs/src/helpers/sleep.md +0 -14
  155. package/docs/src/helpers/snake-case.md +0 -14
  156. package/docs/src/helpers/throttle-id.md +0 -14
  157. package/docs/src/helpers/throttle.md +0 -14
  158. /package/docs/src/{guide → ecosystem/icons}/icon-set.md +0 -0
  159. /package/docs/src/{guide → ecosystem}/mcp.md +0 -0
  160. /package/docs/src/{helpers → ecosystem/utils}/country-code-to-unicode-flag.md +0 -0
  161. /package/docs/src/{helpers → ecosystem/utils}/currency.md +0 -0
  162. /package/docs/src/{helpers → ecosystem/utils}/date.md +0 -0
  163. /package/docs/src/{helpers → ecosystem/utils}/get-country-flag-url.md +0 -0
  164. /package/docs/src/{helpers → ecosystem/utils}/number.md +0 -0
@@ -1,17 +1,17 @@
1
1
  ## Props
2
2
 
3
- | Name | Description | Type | Required | Default |
4
- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- | ------------------------ |
5
- | **images** | Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]` | `MazGalleryImage[]` | No | `undefined` |
6
- | **displayed-count** | Images count shown (max: 5) | `number` | No | `5` |
7
- | **remaining** | Remove transparent layer with the remain count (ex: +2) | `boolean` | No | `true` |
8
- | **height** | Height of gallery - set to `false` to remove default height | `number \| string \| false` | No | `150` |
9
- | **width** | Width of gallery - set to `false` to remove default width | `number \| string \| false` | No | `100%` |
10
- | **radius** | Disable the border radius of the gallery | `boolean` | No | `false` |
11
- | **zoom** | Disable full size display when clicking on image | `boolean` | No | `false` |
12
- | **has-empty-layer** | Layer with photography icon when no images is provided | `boolean` | No | `true` |
13
- | **lazy** | Lazy load image - if false, images are directly loaded | `boolean` | No | `true` |
14
- | **blur** | Disable blur effect on image hover | `boolean` | No | `true` |
15
- | **scale** | Disable scale animation effect on image hover | `boolean` | No | `true` |
16
- | **separator-color** | Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-surface-300)` | `string` | No | `transparent` |
17
- | **background-color** | Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-surface-300)` | `string` | No | `var(--maz-surface-300)` |
3
+ | Name | Description | Type | Required | Default |
4
+ | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- | ------------- |
5
+ | **images** | Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]` | `MazGalleryImage[]` | No | `undefined` |
6
+ | **displayed-count** | Images count shown (max: 5) | `number` | No | `5` |
7
+ | **remaining** | Remove transparent layer with the remain count (ex: +2) | `boolean` | No | `true` |
8
+ | **height** | Height of gallery - set to `false` to remove default height | `number \| string \| false` | No | `150` |
9
+ | **width** | Width of gallery - set to `false` to remove default width | `number \| string \| false` | No | `100%` |
10
+ | **radius** | Disable the border radius of the gallery | `boolean` | No | `false` |
11
+ | **zoom** | Disable full size display when clicking on image | `boolean` | No | `false` |
12
+ | **has-empty-layer** | Layer with photography icon when no images is provided | `boolean` | No | `true` |
13
+ | **lazy** | Lazy load image - if false, images are directly loaded | `boolean` | No | `true` |
14
+ | **blur** | Disable blur effect on image hover | `boolean` | No | `true` |
15
+ | **scale** | Disable scale animation effect on image hover | `boolean` | No | `true` |
16
+ | **separator-color** | Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` | `string` | No | `transparent` |
17
+ | **background-color** | Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000` | `string` | No | `undefined` |
@@ -1,21 +1,21 @@
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
- | **model-value** | The value of the component (v-model). | `T` | No | `undefined` |
8
- | **code-length** | The length of the code. | `number` | No | `4` |
9
- | **type** | The type of the input field. | `"text" \| "number"` | No | `'text'` |
10
- | **accept-alpha** | Whether to accept alpha characters. | `boolean` | No | `false` |
11
- | **required** | Whether the input is required. | `boolean` | No | `false` |
12
- | **disabled** | Whether the input is disabled. | `boolean` | No | `false` |
13
- | **error** | Whether there is an error with the input. | `boolean` | No | `false` |
14
- | **success** | Whether the input is successful. | `boolean` | No | `false` |
15
- | **warning** | Whether there is a warning with the input. | `boolean` | No | `false` |
16
- | **size** | The size of the component. | `MazInputCodeSize` | No | `'md'` |
17
- | **color** | The color of the component. | `MazColor` | No | `'primary'` |
18
- | **hint** | The hint text to display below the input. | `string` | No | `undefined` |
3
+ | Name | Description | Type | Required |
4
+ | ---------------- | ------------------------------------------ | -------------------- | -------- |
5
+ | **style** | The style of the component. | `Native type` | No |
6
+ | **class** | The class of the component. | `Native type` | No |
7
+ | **model-value** | The value of the component (v-model). | `T` | No |
8
+ | **code-length** | The length of the code. | `number` | No |
9
+ | **type** | The type of the input field. | `"text" \| "number"` | No |
10
+ | **accept-alpha** | Whether to accept alpha characters. | `boolean` | No |
11
+ | **required** | Whether the input is required. | `boolean` | No |
12
+ | **disabled** | Whether the input is disabled. | `boolean` | No |
13
+ | **error** | Whether there is an error with the input. | `boolean` | No |
14
+ | **success** | Whether the input is successful. | `boolean` | No |
15
+ | **warning** | Whether there is a warning with the input. | `boolean` | No |
16
+ | **size** | The size of the component. | `MazInputCodeSize` | No |
17
+ | **color** | The color of the component. | `MazColor` | No |
18
+ | **hint** | The hint text to display below the input. | `string` | No |
19
19
 
20
20
  ## Events
21
21
 
@@ -1,47 +1,48 @@
1
1
  ## Props
2
2
 
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` | - |
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
+ | **flag-src** | Source of the flags, instead of the flagcdn.com CDN: a URL template (`/flags/{code}.svg`, `{CODE}` for uppercase) or a function giving the image source of a code. Use `loadCountryFlag` from `maz-ui/country-flags` for the flags of `@maz-ui/icons`. Can be set for the whole app with the `defaults.global.flagSrc` option of the MazUi plugin. | `MazCountryFlagSrc` | No | `undefined (flags from flagcdn.com)` | - |
22
+ | **disabled** | Make the input disabled | `boolean` | No | `false` | - |
23
+ | **required** | Make the input required | `boolean` | No | `false` | - |
24
+ | **example** | Show the phone number example | `boolean` | No | `true` | - |
25
+ | **search** | Disable search input in country list | `boolean` | No | `true` | - |
26
+ | **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` | - |
27
+ | **use-browser-locale** | If true, the browser locale will be used | `boolean` | No | `true` | - |
28
+ | **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` | - |
29
+ | **hide-country-select** | Hide the country selector | `boolean` | No | `false` | - |
30
+ | **show-code-in-list** | Show country calling code in the country list | `boolean` | No | `false` | - |
31
+ | **custom-countries-list** | Replace country names | `Record<CountryCode, string>` | No | `undefined` | - |
32
+ | **auto-format** | Disabled auto-format when phone is valid | `"blur" \| "typing" \| "disabled" \| false` | No | `blur` | - |
33
+ | **country-locale** | Locale of country list<br/>**Example:** `"fr-FR"` | `string` | No | `undefined` | - |
34
+ | **validation-error** | Disable validation error UI | `boolean` | No | `true` | - |
35
+ | **validation-success** | Disable validation success UI | `boolean` | No | `true` | - |
36
+ | **success** | Add success UI | `boolean` | No | `false` | - |
37
+ | **error** | Add error UI | `boolean` | No | `false` | - |
38
+ | **warning** | Add warning UI | `boolean` | No | `false` | - |
39
+ | **display-country-name** | Will replace the calling code by the country name in the country selector | `boolean` | No | `false` | - |
40
+ | **block** | The input will be displayed in full width | `boolean` | No | `false` | - |
41
+ | **orientation** | Orientation of the inputs in the component | `'row' \| 'col' \| 'responsive'` | No | `responsive` | `row, col, responsive` |
42
+ | **country-select-attributes** | Meta attributes of the country input | `Record<string, unknown>` | No | `{ autocomplete: 'off', name: 'country' }` | - |
43
+ | **phone-input-attributes** | Meta attributes of the phone number input | `Record<string, unknown>` | No | `{ autocomplete: 'tel', name: 'phone', inputmode: 'tel' }` | - |
44
+ | **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` | - |
45
+ | **hint** | Alternative text that replaces the label when provided. Useful for contextual hints<br/>**Example:** `"This phone number is not valid"` | `string` | No | `undefined` | - |
45
46
 
46
47
  ## Events
47
48
 
@@ -1,19 +1,19 @@
1
1
  ## Props
2
2
 
3
- | Name | Description | Type | Required | Default |
4
- | -------------------- | ---------------------------------------------------------------------------- | --------- | -------- | -------------------------- |
5
- | **model-value** | `v-model` <br/> | `number` | No | `undefined` |
6
- | **currency** | The currency to use | `string` | No | `'EUR'` |
7
- | **locale** | The locale to use | `string` | No | `'fr-FR'` |
8
- | **min** | The minimum value that the input can accept | `number` | No | `Number.NEGATIVE_INFINITY` |
9
- | **max** | The maximum value that the input can accept | `number` | No | `Number.POSITIVE_INFINITY` |
10
- | **no-icon** | The input will be displayed without icon | `boolean` | No | `false` |
11
- | **block** | The input will be displayed in full width | `boolean` | No | `undefined` |
12
- | **error** | Will display the input in error state. | `boolean` | No | `undefined` |
13
- | **hint** | The hint text to display below the input. | `string` | No | `undefined` |
14
- | **success** | Will display the input in success state. | `boolean` | No | `undefined` |
15
- | **warning** | Will display the input in warning state. | `boolean` | No | `undefined` |
16
- | **currency-options** | Options for the currency helper - [see](https://maz-ui.com/helpers/currency) | `Omit` | No | `undefined` |
3
+ | Name | Description | Type | Required |
4
+ | -------------------- | ---------------------------------------------------------------------------- | --------- | -------- |
5
+ | **model-value** | `v-model` <br/> | `number` | No |
6
+ | **currency** | The currency to use | `string` | No |
7
+ | **locale** | The locale to use | `string` | No |
8
+ | **min** | The minimum value that the input can accept | `number` | No |
9
+ | **max** | The maximum value that the input can accept | `number` | No |
10
+ | **no-icon** | The input will be displayed without icon | `boolean` | No |
11
+ | **block** | The input will be displayed in full width | `boolean` | No |
12
+ | **error** | Will display the input in error state. | `boolean` | No |
13
+ | **hint** | The hint text to display below the input. | `string` | No |
14
+ | **success** | Will display the input in success state. | `boolean` | No |
15
+ | **warning** | Will display the input in warning state. | `boolean` | No |
16
+ | **currency-options** | Options for the currency helper - [see](https://maz-ui.com/helpers/currency) | `Omit` | No |
17
17
 
18
18
  ## Events
19
19
 
@@ -1,21 +1,21 @@
1
1
  ## Props
2
2
 
3
- | Name | Description | Type | Required | Default |
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/> | `TSParenthesizedType[]` | No | `undefined` |
8
- | **placeholder** | The placeholder of the input | `string` | No | `undefined` |
9
- | **label** | The label of the input | `string` | No | `undefined` |
10
- | **disabled** | Disable the input | `boolean` | No | `false` |
11
- | **error** | Display the input with error style | `boolean` | No | `false` |
12
- | **success** | Display the input with success style | `boolean` | No | `false` |
13
- | **warning** | Display the input with warning style | `boolean` | No | `false` |
14
- | **size** | The size of the input | `MazSize` | No | `'md'` |
15
- | **color** | The color of the input | `MazColor` | No | `'primary'` |
16
- | **block** | The input will be displayed in full width | `boolean` | No | `undefined` |
17
- | **add-tags-on-blur** | Add tags on blur | `boolean` | No | `true` |
18
- | **hint** | The hint text to display below the input. | `string` | No | `undefined` |
3
+ | Name | Description | Type | Required |
4
+ | -------------------- | -------------------------------------------- | ----------------------- | -------- |
5
+ | **style** | Style attribut of the component root element | `Native type` | No |
6
+ | **class** | Class attribut of the component root element | `Native type` | No |
7
+ | **model-value** | `v-model` <br/> | `TSParenthesizedType[]` | No |
8
+ | **placeholder** | The placeholder of the input | `string` | No |
9
+ | **label** | The label of the input | `string` | No |
10
+ | **disabled** | Disable the input | `boolean` | No |
11
+ | **error** | Display the input with error style | `boolean` | No |
12
+ | **success** | Display the input with success style | `boolean` | No |
13
+ | **warning** | Display the input with warning style | `boolean` | No |
14
+ | **size** | The size of the input | `MazSize` | No |
15
+ | **color** | The color of the input | `MazColor` | No |
16
+ | **block** | The input will be displayed in full width | `boolean` | No |
17
+ | **add-tags-on-blur** | Add tags on blur | `boolean` | No |
18
+ | **hint** | The hint text to display below the input. | `string` | No |
19
19
 
20
20
  ## Events
21
21
 
@@ -1,38 +1,38 @@
1
1
  ## Props
2
2
 
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
- | **start-icon** | Icon displayed on the inline-start edge of the input (left in LTR, right in RTL). Accepts a bare value (Vue component, raw SVG string, URL or `data:` URI) or a full `MazIconProps` object for fine-grained control (size, title, svgAttributes, fallback, …). | `MazIconLike` | No | `undefined` | - |
30
- | **end-icon** | Icon displayed on the inline-end edge of the input (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object. | `MazIconLike` | No | `undefined` | - |
31
- | **rounded-size** | Controls the border radius of the input component<br/>**Example:** `"lg"` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | No | `'md'` | `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` | - |
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 | `undefined` | `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 | `undefined` | `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 | `undefined` | - |
15
+ | **disabled** | Disables the input field, preventing user interaction and form submission<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
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 | `undefined` | - |
19
+ | **success** | Applies success styling (green border and text) to indicate successful validation<br/>**Example:** `true` | `boolean` | No | `undefined` | - |
20
+ | **warning** | Applies warning styling (orange border and text) to indicate potential issues<br/>**Example:** `true` | `boolean` | No | `undefined` | - |
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 | `undefined` | - |
24
+ | **inputmode** | HTML inputmode attribute that provides hints for virtual keyboards on mobile devices<br/>**Example:** `"numeric"` | `InputHTMLAttributes['inputmode']` | No | `undefined` | `text, numeric, decimal, tel, search, email, url` |
25
+ | **size** | Controls the height and text size of the input component<br/>**Example:** `"md"` | `MazSize` | No | `undefined` | `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 | `undefined` | - |
27
+ | **auto-focus** | Automatically focuses the input when the component mounts<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
28
+ | **border-active** | When true, shows the colored border immediately instead of only on focus<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
29
+ | **start-icon** | Icon displayed on the inline-start edge of the input (left in LTR, right in RTL). Accepts a bare value (Vue component, raw SVG string, URL or `data:` URI) or a full `MazIconProps` object for fine-grained control (size, title, svgAttributes, fallback, …). | `MazIconLike` | No | `undefined` | - |
30
+ | **end-icon** | Icon displayed on the inline-end edge of the input (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object. | `MazIconLike` | No | `undefined` | - |
31
+ | **rounded-size** | Controls the border radius of the input component<br/>**Example:** `"lg"` | `MazRoundedSize` | No | `md` | `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,19 +1,19 @@
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 \| Image \| null` | No | `undefined` |
8
- | **alt** | The alt of the image | `string` | No | `undefined` |
9
- | **hide-loader** | Remove the loader | `boolean` | No | `undefined` |
10
- | **observer-once** | Remove the observer once the image is loaded | `boolean` | No | `true` |
11
- | **load-once** | Remove the observer once the image is loaded | `boolean` | No | `undefined` |
12
- | **image-height-full** | Make the image height full | `boolean` | No | `undefined` |
13
- | **observer-options** | The options of the observer | `Native type` | No | `undefined` |
14
- | **fallback-src** | The fallback src to replace the src on loading error | `string` | No | `undefined` |
15
- | **img-class** | The classes of the image element | `Native type` | No | `undefined` |
16
- | **block** | The image will be displayed in full width | `boolean` | No | `undefined` |
3
+ | Name | Description | Type | Required |
4
+ | --------------------- | ---------------------------------------------------- | ------------------------- | -------- |
5
+ | **style** | The style of the component | `Native type` | No |
6
+ | **class** | The class of the component | `Native type` | No |
7
+ | **src** | The source of the image | `string \| Image \| null` | No |
8
+ | **alt** | The alt of the image | `string` | No |
9
+ | **hide-loader** | Remove the loader | `boolean` | No |
10
+ | **observer-once** | Remove the observer once the image is loaded | `boolean` | No |
11
+ | **load-once** | Remove the observer once the image is loaded | `boolean` | No |
12
+ | **image-height-full** | Make the image height full | `boolean` | No |
13
+ | **observer-options** | The options of the observer | `Native type` | No |
14
+ | **fallback-src** | The fallback src to replace the src on loading error | `string` | No |
15
+ | **img-class** | The classes of the image element | `Native type` | No |
16
+ | **block** | The image will be displayed in full width | `boolean` | No |
17
17
 
18
18
  ## Events
19
19
 
@@ -1,6 +1,6 @@
1
1
  ## Props
2
2
 
3
- | Name | Description | Type | Required | Default |
4
- | ---------- | ---------------------------- | ---------- | -------- | ------------ |
5
- | **color** | The color of the component. | `MazColor` | No | `'primary'` |
6
- | **height** | The height of the component. | `string` | No | `'0.125rem'` |
3
+ | Name | Description | Type | Required |
4
+ | ---------- | ---------------------------- | ---------- | -------- |
5
+ | **color** | The color of the component. | `MazColor` | No |
6
+ | **height** | The height of the component. | `string` | No |