@maz-ui/mcp 5.0.0-beta.11 → 5.0.0-beta.18
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.d.mts +22 -9
- package/dist/mcp.d.ts +22 -9
- package/dist/mcp.mjs +160 -83
- package/docs/generated-docs/maz-checkbox.doc.md +16 -17
- package/docs/generated-docs/maz-date-picker.doc.md +41 -41
- package/docs/generated-docs/maz-drawer.doc.md +7 -8
- package/docs/generated-docs/maz-expand-animation.doc.md +4 -4
- package/docs/generated-docs/maz-input-code.doc.md +16 -16
- package/docs/generated-docs/maz-input-price.doc.md +14 -14
- package/docs/generated-docs/maz-input-tags.doc.md +16 -16
- package/docs/generated-docs/maz-input.doc.md +14 -14
- package/docs/generated-docs/maz-lazy-img.doc.md +14 -14
- package/docs/generated-docs/maz-loading-bar.doc.md +4 -4
- package/docs/generated-docs/maz-pull-to-refresh.doc.md +10 -10
- package/docs/generated-docs/maz-radio-buttons.doc.md +17 -17
- package/docs/generated-docs/maz-radio.doc.md +16 -16
- package/docs/generated-docs/maz-reading-progress-bar.doc.md +4 -4
- package/docs/generated-docs/maz-sidebar-menu-button.doc.md +12 -11
- package/docs/generated-docs/maz-sidebar-menu-sub.doc.md +5 -5
- package/docs/generated-docs/maz-sidebar-trigger.doc.md +0 -6
- package/docs/generated-docs/maz-sidebar.doc.md +12 -9
- package/docs/generated-docs/maz-switch.doc.md +14 -14
- package/docs/generated-docs/maz-table.doc.md +5 -5
- package/docs/generated-docs/maz-textarea.doc.md +25 -25
- package/docs/src/blog/v4.md +1 -1
- package/docs/src/blog/v5.md +4 -4
- package/docs/src/components/maz-btn.md +1 -1
- package/docs/src/components/maz-date-picker.md +1 -1
- package/docs/src/components/maz-icon.md +2 -2
- package/docs/src/components/maz-sidebar.md +100 -47
- package/docs/src/directives/click-outside.md +1 -1
- package/docs/src/directives/fullscreen-img.md +1 -1
- package/docs/src/directives/lazy-img.md +1 -1
- package/docs/src/directives/tooltip.md +24 -1
- package/docs/src/directives/zoom-img.md +1 -1
- package/docs/src/{guide/icons.md → ecosystem/icons/index.md} +1 -1
- package/docs/src/ecosystem/node/exec-promise.md +87 -0
- package/docs/src/ecosystem/node/index.md +53 -0
- package/docs/src/ecosystem/node/logger.md +146 -0
- package/docs/src/ecosystem/node/print-banner.md +93 -0
- package/docs/src/{guide → ecosystem}/nuxt.md +1 -1
- package/docs/src/{guide → ecosystem}/themes.md +4 -4
- package/docs/src/{guide → ecosystem}/translations.md +1 -1
- package/docs/src/ecosystem/utils/camel-case.md +31 -0
- package/docs/src/ecosystem/utils/check-availability.md +79 -0
- package/docs/src/ecosystem/utils/cookie.md +80 -0
- package/docs/src/ecosystem/utils/debounce-callback.md +38 -0
- package/docs/src/ecosystem/utils/debounce-id.md +69 -0
- package/docs/src/ecosystem/utils/debounce.md +65 -0
- package/docs/src/ecosystem/utils/fetch-locale-ip.md +33 -0
- package/docs/src/ecosystem/utils/format-json.md +33 -0
- package/docs/src/ecosystem/utils/format-phone-number.md +37 -0
- package/docs/src/ecosystem/utils/get-browser-locale.md +29 -0
- package/docs/src/ecosystem/utils/get-error-message.md +39 -0
- package/docs/src/ecosystem/utils/idle-timeout.md +90 -0
- package/docs/src/ecosystem/utils/index.md +60 -0
- package/docs/src/ecosystem/utils/is-client.md +32 -0
- package/docs/src/ecosystem/utils/is-equal.md +38 -0
- package/docs/src/ecosystem/utils/is-server.md +31 -0
- package/docs/src/ecosystem/utils/is-standalone-mode.md +43 -0
- package/docs/src/ecosystem/utils/kebab-case.md +36 -0
- package/docs/src/ecosystem/utils/normalize-string.md +77 -0
- package/docs/src/ecosystem/utils/pascal-case.md +35 -0
- package/docs/src/ecosystem/utils/script-loader.md +77 -0
- package/docs/src/ecosystem/utils/sleep.md +59 -0
- package/docs/src/ecosystem/utils/snake-case.md +36 -0
- package/docs/src/ecosystem/utils/swipe-handler.md +91 -0
- package/docs/src/ecosystem/utils/textarea-autogrow.md +41 -0
- package/docs/src/ecosystem/utils/throttle-id.md +48 -0
- package/docs/src/ecosystem/utils/throttle.md +57 -0
- package/docs/src/ecosystem/utils/truthy-filter.md +31 -0
- package/docs/src/ecosystem/utils/types/deep-key-of.md +48 -0
- package/docs/src/ecosystem/utils/types/deep-partial.md +42 -0
- package/docs/src/ecosystem/utils/types/deep-required.md +39 -0
- package/docs/src/ecosystem/utils/types/flatten-object-keys.md +44 -0
- package/docs/src/ecosystem/utils/types/generic-instance-type.md +42 -0
- package/docs/src/ecosystem/utils/types/infer-maybe-ref.md +35 -0
- package/docs/src/ecosystem/utils/upper-first.md +32 -0
- package/docs/src/ecosystem/utils/user-visibility.md +69 -0
- package/docs/src/guide/getting-started.md +2 -2
- package/docs/src/guide/migration-v4.md +6 -6
- package/docs/src/guide/resolvers.md +7 -7
- package/docs/src/guide/vue.md +4 -4
- package/docs/src/index.md +12 -12
- package/docs/src/plugins/aos.md +1 -1
- package/package.json +4 -4
- package/docs/src/helpers/camel-case.md +0 -14
- package/docs/src/helpers/check-availability.md +0 -14
- package/docs/src/helpers/debounce-callback.md +0 -14
- package/docs/src/helpers/debounce-id.md +0 -14
- package/docs/src/helpers/debounce.md +0 -14
- package/docs/src/helpers/is-client.md +0 -14
- package/docs/src/helpers/is-equal.md +0 -14
- package/docs/src/helpers/is-standalone-mode.md +0 -14
- package/docs/src/helpers/kebab-case.md +0 -14
- package/docs/src/helpers/normalize-string.md +0 -14
- package/docs/src/helpers/pascal-case.md +0 -14
- package/docs/src/helpers/script-loader.md +0 -14
- package/docs/src/helpers/sleep.md +0 -14
- package/docs/src/helpers/snake-case.md +0 -14
- package/docs/src/helpers/throttle-id.md +0 -14
- package/docs/src/helpers/throttle.md +0 -14
- /package/docs/src/{guide → ecosystem/icons}/icon-set.md +0 -0
- /package/docs/src/{guide → ecosystem}/mcp.md +0 -0
- /package/docs/src/{helpers → ecosystem/utils}/capitalize.md +0 -0
- /package/docs/src/{helpers → ecosystem/utils}/country-code-to-unicode-flag.md +0 -0
- /package/docs/src/{helpers → ecosystem/utils}/currency.md +0 -0
- /package/docs/src/{helpers → ecosystem/utils}/date.md +0 -0
- /package/docs/src/{helpers → ecosystem/utils}/get-country-flag-url.md +0 -0
- /package/docs/src/{helpers → ecosystem/utils}/number.md +0 -0
|
@@ -1,46 +1,46 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required | Default
|
|
4
|
-
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | -------- |
|
|
5
|
-
| **id** | The unique identifier of the component | `string` | No | `undefined`
|
|
6
|
-
| **style** | The inline style object for the component | `HTMLAttributes['style']` | No | `undefined`
|
|
7
|
-
| **class** | The CSS class(es) to apply to the component | `HTMLAttributes['class']` | No | `undefined`
|
|
8
|
-
| **input-props** | The props to apply to the input component | `MazInputProps` | No | `undefined`
|
|
9
|
-
| **model-value** | The value of the date picker component If an object is provided, the picker will be a range picker | `MazDatePickerValue` | No | `undefined`
|
|
10
|
-
| **format** | The format pattern for date display and parsing<br/>**Example:** `'YYYY-MM-DD', 'DD/MM/YYYY', 'YYYY-MM-DD HH:mm'` | `string` | No | `
|
|
11
|
-
| **open** | `v-model:open` <br/>Controls whether the picker window is open | `boolean` | No | `false`
|
|
12
|
-
| **label** | The label text displayed above the input field | `string` | No | `undefined`
|
|
13
|
-
| **placeholder** | The placeholder text shown when no value is selected | `string` | No | `undefined`
|
|
14
|
-
| **input-date-format** | The Intl.DateTimeFormatOptions for styling the input date display | `Intl.DateTimeFormatOptions` | No | `
|
|
15
|
-
| **input-date-transformer** | Custom function to transform the formatted date display | `Function` | No | `undefined`
|
|
16
|
-
| **locale** | The locale string for date formatting and localization<br/>**Example:** `'en-US', 'fr-FR', 'de-DE'` | `string` | No | `undefined`
|
|
17
|
-
| **hide-header** | Controls whether the calendar header is hidden | `boolean` | No | `false`
|
|
18
|
-
| **disabled** | Controls whether the component is disabled | `boolean` | No | `false`
|
|
19
|
-
| **first-day-of-week** | The first day of the week in the calendar<br/>**Example:** `0 (Sunday), 1 (Monday), 6 (Saturday)` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | No | `0`
|
|
20
|
-
| **auto-close** | Controls whether the picker closes automatically after date selection | `boolean` | No | `false`
|
|
21
|
-
| **custom-element-selector** | CSS selector for a custom element that triggers the picker<br/>**Example:** `'#my-button', '.trigger-class'` | `string` | No | `undefined`
|
|
22
|
-
| **double** | Controls whether the picker displays two months side by side | `boolean` | No | `false`
|
|
23
|
-
| **inline** | Controls whether the picker is displayed inline without input field | `boolean` | No | `false`
|
|
24
|
-
| **color** | The color theme of the component | `MazColor` | No | `
|
|
25
|
-
| **picker-position** | The position where the picker popover should appear | `MazPopoverProps['position']` | No | `
|
|
26
|
-
| **picker-prefer-position** | The preferred position of the picker popover | `MazPopoverProps['preferPosition']` | No | `
|
|
27
|
-
| **picker-fallback-position** | The fallback position of the picker popover | `MazPopoverProps['fallbackPosition']` | No | `
|
|
28
|
-
| **time** | Controls whether the picker includes a time selector | `boolean` | No | `false`
|
|
29
|
-
| **only-time** | Controls whether the picker shows only time selection (no date) | `boolean` | No | `false`
|
|
30
|
-
| **minute-interval** | The interval in minutes for the time picker minute selection | `number` | No | `5`
|
|
31
|
-
| **use-browser-locale** | Controls whether to automatically detect and use the browser's locale | `boolean` | No | `true`
|
|
32
|
-
| **fetch-local** | Controls whether to fetch locale data dynamically | `boolean` | No | `true`
|
|
33
|
-
| **shortcuts** | Array of predefined date range shortcuts or false to disable | `MazDatePickerShortcut[] \| false` | No | `
|
|
34
|
-
| **shortcut** | The identifier of the currently selected shortcut | `MazDatePickerShortcut['identifier']` | No | `undefined`
|
|
35
|
-
| **min-date** | The minimum selectable date in ISO format<br/>**Example:** `'2023-01-01'` | `string` | No | `undefined`
|
|
36
|
-
| **max-date** | The maximum selectable date in ISO format<br/>**Example:** `'2024-12-31'` | `string` | No | `undefined`
|
|
37
|
-
| **min-max-auto** | When minDate or maxDate are provided, if the current date is not between minDate and maxDate, the current date will be set to the minDate or maxDate | `boolean` | No | `true`
|
|
38
|
-
| **disabled-weekly** | Array of weekday numbers to disable (0 = Sunday, 6 = Saturday)<br/>**Example:** `[0, 6] to disable weekends` | `number[]` | No | `
|
|
39
|
-
| **disabled-dates** | Array of specific dates to disable in ISO format<br/>**Example:** `['2023-12-25', '2024-01-01']` | `string[]` | No | `
|
|
40
|
-
| **disabled-hours** | Array of hour numbers to disable in the time picker (0-23)<br/>**Example:** `[0, 1, 2, 22, 23] to disable night hours` | `number[]` | No | `
|
|
41
|
-
| **block** | Controls whether the input displays in full width | `boolean` | No | `false`
|
|
42
|
-
| **range** | Controls whether the picker operates in range selection mode | `boolean` | No | `false`
|
|
43
|
-
| **transition** | The transition name of the popover | `MazPopoverProps['transition']` | No | `
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | -------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
|
|
5
|
+
| **id** | The unique identifier of the component | `string` | No | `undefined` | - |
|
|
6
|
+
| **style** | The inline style object for the component | `HTMLAttributes['style']` | No | `undefined` | - |
|
|
7
|
+
| **class** | The CSS class(es) to apply to the component | `HTMLAttributes['class']` | No | `undefined` | - |
|
|
8
|
+
| **input-props** | The props to apply to the input component | `MazInputProps` | No | `undefined` | - |
|
|
9
|
+
| **model-value** | The value of the date picker component If an object is provided, the picker will be a range picker | `MazDatePickerValue` | No | `undefined` | - |
|
|
10
|
+
| **format** | The format pattern for date display and parsing<br/>**Example:** `'YYYY-MM-DD', 'DD/MM/YYYY', 'YYYY-MM-DD HH:mm'` | `string` | No | `YYYY-MM-DD` | - |
|
|
11
|
+
| **open** | `v-model:open` <br/>Controls whether the picker window is open | `boolean` | No | `false` | - |
|
|
12
|
+
| **label** | The label text displayed above the input field | `string` | No | `undefined` | - |
|
|
13
|
+
| **placeholder** | The placeholder text shown when no value is selected | `string` | No | `undefined` | - |
|
|
14
|
+
| **input-date-format** | The Intl.DateTimeFormatOptions for styling the input date display | `Intl.DateTimeFormatOptions` | No | `{ dateStyle: 'medium', timeStyle: 'short' }` | - |
|
|
15
|
+
| **input-date-transformer** | Custom function to transform the formatted date display | `Function` | No | `undefined` | - |
|
|
16
|
+
| **locale** | The locale string for date formatting and localization<br/>**Example:** `'en-US', 'fr-FR', 'de-DE'` | `string` | No | `undefined` | - |
|
|
17
|
+
| **hide-header** | Controls whether the calendar header is hidden | `boolean` | No | `false` | - |
|
|
18
|
+
| **disabled** | Controls whether the component is disabled | `boolean` | No | `false` | - |
|
|
19
|
+
| **first-day-of-week** | The first day of the week in the calendar<br/>**Example:** `0 (Sunday), 1 (Monday), 6 (Saturday)` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | No | `0` | `0, 1, 2, 3, 4, 5, 6` |
|
|
20
|
+
| **auto-close** | Controls whether the picker closes automatically after date selection | `boolean` | No | `false` | - |
|
|
21
|
+
| **custom-element-selector** | CSS selector for a custom element that triggers the picker<br/>**Example:** `'#my-button', '.trigger-class'` | `string` | No | `undefined` | - |
|
|
22
|
+
| **double** | Controls whether the picker displays two months side by side | `boolean` | No | `false` | - |
|
|
23
|
+
| **inline** | Controls whether the picker is displayed inline without input field | `boolean` | No | `false` | - |
|
|
24
|
+
| **color** | The color theme of the component | `MazColor` | No | `primary` | `primary, secondary, success, destructive, warning, info, accent, contrast` |
|
|
25
|
+
| **picker-position** | The position where the picker popover should appear | `MazPopoverProps['position']` | No | `auto` | `top, bottom, left, right, top-end, bottom-end, left-end, right-end, top-start, bottom-start, left-start, right-start` |
|
|
26
|
+
| **picker-prefer-position** | The preferred position of the picker popover | `MazPopoverProps['preferPosition']` | No | `bottom-start` | `top, bottom, left, right, top-end, bottom-end, left-end, right-end, top-start, bottom-start, left-start, right-start` |
|
|
27
|
+
| **picker-fallback-position** | The fallback position of the picker popover | `MazPopoverProps['fallbackPosition']` | No | `top-start` | `top, bottom, left, right, top-end, bottom-end, left-end, right-end, top-start, bottom-start, left-start, right-start` |
|
|
28
|
+
| **time** | Controls whether the picker includes a time selector | `boolean` | No | `false` | - |
|
|
29
|
+
| **only-time** | Controls whether the picker shows only time selection (no date) | `boolean` | No | `false` | - |
|
|
30
|
+
| **minute-interval** | The interval in minutes for the time picker minute selection | `number` | No | `5` | `1, 5, 10, 15, 30` |
|
|
31
|
+
| **use-browser-locale** | Controls whether to automatically detect and use the browser's locale | `boolean` | No | `true` | - |
|
|
32
|
+
| **fetch-local** | Controls whether to fetch locale data dynamically | `boolean` | No | `true` | - |
|
|
33
|
+
| **shortcuts** | Array of predefined date range shortcuts or false to disable | `MazDatePickerShortcut[] \| false` | No | `[predefined shortcuts array]` | - |
|
|
34
|
+
| **shortcut** | The identifier of the currently selected shortcut | `MazDatePickerShortcut['identifier']` | No | `undefined` | - |
|
|
35
|
+
| **min-date** | The minimum selectable date in ISO format<br/>**Example:** `'2023-01-01'` | `string` | No | `undefined` | - |
|
|
36
|
+
| **max-date** | The maximum selectable date in ISO format<br/>**Example:** `'2024-12-31'` | `string` | No | `undefined` | - |
|
|
37
|
+
| **min-max-auto** | When minDate or maxDate are provided, if the current date is not between minDate and maxDate, the current date will be set to the minDate or maxDate | `boolean` | No | `true` | - |
|
|
38
|
+
| **disabled-weekly** | Array of weekday numbers to disable (0 = Sunday, 6 = Saturday)<br/>**Example:** `[0, 6] to disable weekends` | `number[]` | No | `[]` | - |
|
|
39
|
+
| **disabled-dates** | Array of specific dates to disable in ISO format<br/>**Example:** `['2023-12-25', '2024-01-01']` | `string[]` | No | `[]` | - |
|
|
40
|
+
| **disabled-hours** | Array of hour numbers to disable in the time picker (0-23)<br/>**Example:** `[0, 1, 2, 22, 23] to disable night hours` | `number[]` | No | `[]` | - |
|
|
41
|
+
| **block** | Controls whether the input displays in full width | `boolean` | No | `false` | - |
|
|
42
|
+
| **range** | Controls whether the picker operates in range selection mode | `boolean` | No | `false` | - |
|
|
43
|
+
| **transition** | The transition name of the popover | `MazPopoverProps['transition']` | No | `scale-fade` | - |
|
|
44
44
|
|
|
45
45
|
## Events
|
|
46
46
|
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required |
|
|
4
|
-
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------- |
|
|
5
|
-
| **title** | The title of the drawer | `string` | No |
|
|
6
|
-
| **variant** | The edge from which the drawer slides in. `start` (= left in LTR, right in RTL) and `end` (= right in LTR, left in RTL) follow the document direction; `top` and `bottom` are physical. | `"start" \| "end" \| "top" \| "bottom"` | No | `
|
|
7
|
-
| **size** | The size of the drawer | `MazSizeUnit` | No |
|
|
8
|
-
| **backdrop-class** | The class of the backdrop | `string` | No |
|
|
9
|
-
| **hide-close-button** | Disable the close button | `boolean` | No |
|
|
10
|
-
| **no-close** | | `any` | No | `false` | - |
|
|
3
|
+
| Name | Description | Type | Required | Possible values |
|
|
4
|
+
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------- | ------------------------------- |
|
|
5
|
+
| **title** | The title of the drawer | `string` | No | - |
|
|
6
|
+
| **variant** | The edge from which the drawer slides in. `start` (= left in LTR, right in RTL) and `end` (= right in LTR, left in RTL) follow the document direction; `top` and `bottom` are physical. | `"start" \| "end" \| "top" \| "bottom"` | No | `start', 'end', 'top', 'bottom` |
|
|
7
|
+
| **size** | The size of the drawer | `MazSizeUnit` | No | - |
|
|
8
|
+
| **backdrop-class** | The class of the backdrop | `string` | No | - |
|
|
9
|
+
| **hide-close-button** | Disable the close button | `boolean` | No | - |
|
|
11
10
|
|
|
12
11
|
## Events
|
|
13
12
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required | Default
|
|
4
|
-
| ------------------- | ----------------------------------------- | -------- | -------- |
|
|
5
|
-
| **duration** | Duration of the animation in milliseconds | `string` | No | `
|
|
6
|
-
| **timing-function** | Timing function of the animation | `string` | No | `
|
|
3
|
+
| Name | Description | Type | Required | Default |
|
|
4
|
+
| ------------------- | ----------------------------------------- | -------- | -------- | ------------- |
|
|
5
|
+
| **duration** | Duration of the animation in milliseconds | `string` | No | `300ms` |
|
|
6
|
+
| **timing-function** | Timing function of the animation | `string` | No | `ease-in-out` |
|
|
7
7
|
|
|
8
8
|
## Slots
|
|
9
9
|
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
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 |
|
|
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,19 +1,19 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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
|
|
|
@@ -9,26 +9,26 @@
|
|
|
9
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
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
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 | `
|
|
13
|
-
| **type** | HTML input type attribute that determines the input behavior and validation<br/>**Example:** `"email"` | `InputHTMLAttributes['type']` | No | `
|
|
14
|
-
| **required** | Makes the input field mandatory for form submission<br/>**Example:** `true` | `boolean` | No | `
|
|
15
|
-
| **disabled** | Disables the input field, preventing user interaction and form submission<br/>**Example:** `false` | `boolean` | No | `
|
|
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
16
|
| **readonly** | Makes the input field read-only, allowing selection but preventing modification<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
|
|
17
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 | `
|
|
19
|
-
| **success** | Applies success styling (green border and text) to indicate successful validation<br/>**Example:** `true` | `boolean` | No | `
|
|
20
|
-
| **warning** | Applies warning styling (orange border and text) to indicate potential issues<br/>**Example:** `true` | `boolean` | No | `
|
|
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
21
|
| **hint** | Alternative text that replaces the label when provided. Useful for contextual hints<br/>**Example:** `"Optional field"` | `string` | No | `undefined` | - |
|
|
22
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 | `
|
|
24
|
-
| **inputmode** | HTML inputmode attribute that provides hints for virtual keyboards on mobile devices<br/>**Example:** `"numeric"` | `InputHTMLAttributes['inputmode']` | No | `
|
|
25
|
-
| **size** | Controls the height and text size of the input component<br/>**Example:** `"md"` | `MazSize` | No | `
|
|
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 | `
|
|
27
|
-
| **auto-focus** | Automatically focuses the input when the component mounts<br/>**Example:** `false` | `boolean` | No | `
|
|
28
|
-
| **border-active** | When true, shows the colored border immediately instead of only on focus<br/>**Example:** `false` | `boolean` | No | `
|
|
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
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
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 | `
|
|
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
32
|
| **block** | Makes the input expand to the full width of its container<br/>**Example:** `false` | `boolean` | No | `undefined` | - |
|
|
33
33
|
| **name** | The name of the input field. Used for form submission and validation<br/>**Example:** `"email"` | `string` | No | `undefined` | - |
|
|
34
34
|
| **autocomplete** | The autocomplete attribute for the input field. Used for form submission and validation<br/>**Example:** `"email"` | `string` | No | `undefined` | - |
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
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 |
|
|
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 |
|
|
4
|
-
| ---------- | ---------------------------- | ---------- | -------- |
|
|
5
|
-
| **color** | The color of the component. | `MazColor` | No |
|
|
6
|
-
| **height** | The height of the component. | `string` | No |
|
|
3
|
+
| Name | Description | Type | Required |
|
|
4
|
+
| ---------- | ---------------------------- | ---------- | -------- |
|
|
5
|
+
| **color** | The color of the component. | `MazColor` | No |
|
|
6
|
+
| **height** | The height of the component. | `string` | No |
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required |
|
|
4
|
-
| ---------------------- | ----------- | ---------------- | -------- |
|
|
5
|
-
| **distance** | | `number` | No |
|
|
6
|
-
| **offset** | | `number` | No |
|
|
7
|
-
| **on-click** | | `TSFunctionType` | No |
|
|
8
|
-
| **container-selector** | | `string` | No |
|
|
9
|
-
| **header-class** | | `string` | No |
|
|
10
|
-
| **spinner-color** | | `MazColor` | No |
|
|
11
|
-
| **disabled** | | `boolean` | No |
|
|
12
|
-
| **standalone-mode** | | `boolean` | No |
|
|
3
|
+
| Name | Description | Type | Required |
|
|
4
|
+
| ---------------------- | ----------- | ---------------- | -------- |
|
|
5
|
+
| **distance** | | `number` | No |
|
|
6
|
+
| **offset** | | `number` | No |
|
|
7
|
+
| **on-click** | | `TSFunctionType` | No |
|
|
8
|
+
| **container-selector** | | `string` | No |
|
|
9
|
+
| **header-class** | | `string` | No |
|
|
10
|
+
| **spinner-color** | | `MazColor` | No |
|
|
11
|
+
| **disabled** | | `boolean` | No |
|
|
12
|
+
| **standalone-mode** | | `boolean` | No |
|
|
13
13
|
|
|
14
14
|
## Events
|
|
15
15
|
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required | Default
|
|
4
|
-
| --------------- | --------------------------------------------- | ----------------------- | -------- |
|
|
5
|
-
| **model-value** | `v-model` <br/> | `T` | No | `undefined`
|
|
6
|
-
| **options** | The options to display | `Option[]` | Yes | `undefined`
|
|
7
|
-
| **name** | The name of the radio group | `string` | No | `
|
|
8
|
-
| **color** | The color of the selected radio buttons | `MazColor \| "surface"` | No | `
|
|
9
|
-
| **elevation** | Add elevation to the radio buttons | `boolean` | No | `
|
|
10
|
-
| **orientation** | The orientation of the radio buttons | `"row" \| "col"` | No | `
|
|
11
|
-
| **wrap** | Disable the wrap of the radio buttons | `boolean` | No | `
|
|
12
|
-
| **equal-size** | Make all radio buttons the same size | `boolean` | No | `
|
|
13
|
-
| **selector** | Display a selector icon | `boolean` | No | `
|
|
14
|
-
| **block** | The component will be displayed in full width | `boolean` | No | `
|
|
15
|
-
| **error** | Whether there is an error with the input. | `boolean` | No | `undefined`
|
|
16
|
-
| **success** | Whether the input is successful. | `boolean` | No | `undefined`
|
|
17
|
-
| **warning** | Whether there is a warning with the input. | `boolean` | No | `undefined`
|
|
18
|
-
| **hint** | The hint text to display below the input. | `string` | No | `undefined`
|
|
19
|
-
| **size** | The size of the radio buttons | `MazSize` | No | `
|
|
3
|
+
| Name | Description | Type | Required | Default | Possible values |
|
|
4
|
+
| --------------- | --------------------------------------------- | ----------------------- | -------- | ----------- | --------------- |
|
|
5
|
+
| **model-value** | `v-model` <br/> | `T` | No | `undefined` | - |
|
|
6
|
+
| **options** | The options to display | `Option[]` | Yes | `undefined` | - |
|
|
7
|
+
| **name** | The name of the radio group | `string` | No | `undefined` | - |
|
|
8
|
+
| **color** | The color of the selected radio buttons | `MazColor \| "surface"` | No | `undefined` | - |
|
|
9
|
+
| **elevation** | Add elevation to the radio buttons | `boolean` | No | `undefined` | - |
|
|
10
|
+
| **orientation** | The orientation of the radio buttons | `"row" \| "col"` | No | `row` | `row' \| 'col` |
|
|
11
|
+
| **wrap** | Disable the wrap of the radio buttons | `boolean` | No | `undefined` | - |
|
|
12
|
+
| **equal-size** | Make all radio buttons the same size | `boolean` | No | `undefined` | - |
|
|
13
|
+
| **selector** | Display a selector icon | `boolean` | No | `undefined` | - |
|
|
14
|
+
| **block** | The component will be displayed in full width | `boolean` | No | `undefined` | - |
|
|
15
|
+
| **error** | Whether there is an error with the input. | `boolean` | No | `undefined` | - |
|
|
16
|
+
| **success** | Whether the input is successful. | `boolean` | No | `undefined` | - |
|
|
17
|
+
| **warning** | Whether there is a warning with the input. | `boolean` | No | `undefined` | - |
|
|
18
|
+
| **hint** | The hint text to display below the input. | `string` | No | `undefined` | - |
|
|
19
|
+
| **size** | The size of the radio buttons | `MazSize` | No | `md` | - |
|
|
20
20
|
|
|
21
21
|
## Events
|
|
22
22
|
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
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
|
-
| **id** | The id of the radio | `string` | No |
|
|
8
|
-
| **model-value** | `v-model` <br/> | `T` | No |
|
|
9
|
-
| **value** | The value of the radio | `T` | Yes |
|
|
10
|
-
| **name** | The name of the radio | `string` | Yes |
|
|
11
|
-
| **label** | The label of the radio | `string` | No |
|
|
12
|
-
| **color** | The color of the radio | `MazColor` | No |
|
|
13
|
-
| **size** | The size of the radio | `MazSize` | No |
|
|
14
|
-
| **disabled** | The disabled state of the radio | `boolean` | No |
|
|
15
|
-
| **error** | Whether there is an error with the input. | `boolean` | No |
|
|
16
|
-
| **success** | Whether the input is successful. | `boolean` | No |
|
|
17
|
-
| **warning** | Whether there is a warning with the input. | `boolean` | No |
|
|
18
|
-
| **hint** | The hint text to display below the input. | `string` | No |
|
|
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
|
+
| **id** | The id of the radio | `string` | No |
|
|
8
|
+
| **model-value** | `v-model` <br/> | `T` | No |
|
|
9
|
+
| **value** | The value of the radio | `T` | Yes |
|
|
10
|
+
| **name** | The name of the radio | `string` | Yes |
|
|
11
|
+
| **label** | The label of the radio | `string` | No |
|
|
12
|
+
| **color** | The color of the radio | `MazColor` | No |
|
|
13
|
+
| **size** | The size of the radio | `MazSize` | No |
|
|
14
|
+
| **disabled** | The disabled state of the radio | `boolean` | No |
|
|
15
|
+
| **error** | Whether there is an error with the input. | `boolean` | No |
|
|
16
|
+
| **success** | Whether the input is successful. | `boolean` | No |
|
|
17
|
+
| **warning** | Whether there is a warning with the input. | `boolean` | No |
|
|
18
|
+
| **hint** | The hint text to display below the input. | `string` | No |
|
|
19
19
|
|
|
20
20
|
## Events
|
|
21
21
|
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
| Name | Description | Type | Required | Default |
|
|
4
4
|
| --------------------- | ----------------------------------------------------------------------------------------- | ------------- | -------- | ----------- |
|
|
5
|
-
| **height** | Height of the progress bar | `string` | No | `
|
|
6
|
-
| **color** | Color of the progress bar | `MazColor` | No | `
|
|
7
|
-
| **teleport-selector** | Selector of the element to teleport the progress bar | `string` | No | `
|
|
8
|
-
| **content-selector** | Selector of the element to get the height | `string` | No | `
|
|
5
|
+
| **height** | Height of the progress bar | `string` | No | `4px` |
|
|
6
|
+
| **color** | Color of the progress bar | `MazColor` | No | `primary` |
|
|
7
|
+
| **teleport-selector** | Selector of the element to teleport the progress bar | `string` | No | `body` |
|
|
8
|
+
| **content-selector** | Selector of the element to get the height | `string` | No | `body` |
|
|
9
9
|
| **offset** | Offset of the progress bar | `number` | No | `0` |
|
|
10
10
|
| **bar-class** | Class of the progress bar | `Native type` | No | `undefined` |
|
|
11
11
|
| **distance** | Instead of using the height of the content with a selector, you can set a scroll distance | `number` | No | `undefined` |
|