groovinads-ui 1.9.92 → 1.9.93
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/README.md +16 -12
- package/dist/index.es.js +2 -2
- package/dist/index.js +2 -2
- package/index.d.ts +11 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -102,7 +102,7 @@ import { Button } from 'groovinads-ui';
|
|
|
102
102
|
|
|
103
103
|
<Button
|
|
104
104
|
variant={'outline'}
|
|
105
|
-
size={'
|
|
105
|
+
size={'sm'}
|
|
106
106
|
onClick={() => {
|
|
107
107
|
console.log('Button clicked');
|
|
108
108
|
}}
|
|
@@ -126,7 +126,7 @@ import { Button } from 'groovinads-ui';
|
|
|
126
126
|
| `hideLabelOnMobile` | Boolean | No | `true` `false` | `false` | If true, the text inside the button will not be displayed on mobile. If false, the text will be displayed on mobile. Cannot be used together with `hideLabelOnDesktop`. |
|
|
127
127
|
| `onClick` | Function | No | n/a | n/a | Function to be executed when the button is clicked. |
|
|
128
128
|
| `processing` | Boolean | No | `true` `false` | `false` | If true, displays a loading animation (…) with a spinner. If false, it will not be displayed. |
|
|
129
|
-
| `size` | String | No | `
|
|
129
|
+
| `size` | String | No | `sm` `md` `lg` | `md` | Defines the size of the button. It's optional. |
|
|
130
130
|
| `startIcon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed at the start of the button (before the text). |
|
|
131
131
|
| `style` | String | No | `default` `success` `danger` `warning` `link` | `default` | Specifies the style variant of the button, which can change its color and visual appearance. It's optional. |
|
|
132
132
|
| `variant` | String | No | `primary` `secondary` `terciary` `outline` | `primary` | Defines the visual style of the button. It's optional. |
|
|
@@ -277,7 +277,7 @@ export default NestedDropdownExample;
|
|
|
277
277
|
| `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
|
|
278
278
|
| `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden. |
|
|
279
279
|
| `showError` | Boolean | No | `true` `false` | `false` | If `true`, displays the dropdown in error state with `not-validated` class. Used for validation. |
|
|
280
|
-
| `size` | String | No | `
|
|
280
|
+
| `size` | String | No | `sm` `md` `lg` | `md` | Size of the toggle button. |
|
|
281
281
|
| `style` | String | No | `default` `success` `danger` `warning` `link` | `default` | Style/color scheme of the toggle button. |
|
|
282
282
|
| `variant` | String | No | `primary` `secondary` `terciary` `outline` `input` | `primary` | Variant of the toggle button. Use `input` for form-field style dropdowns with label and selected value display. |
|
|
283
283
|
|
|
@@ -346,6 +346,7 @@ export default DropdownDatePickerExample;
|
|
|
346
346
|
| `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
|
|
347
347
|
| `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
|
|
348
348
|
| `showError` | Boolean | No | `true` `false` | `false` | If `true`, displays the dropdown in error state with `not-validated` class. Controlled externally for validation. |
|
|
349
|
+
| `size` | String | No | `sm` `md` `lg` | `md` | Size of the toggle button. |
|
|
349
350
|
| `variant` | String | No | `input` `filter` | `input` | Determines the type of dropdown. If `input`, it will be displayed as a button. If `filter`, it will be displayed as a filter dropdown. |
|
|
350
351
|
|
|
351
352
|
### DropdownFilter
|
|
@@ -490,6 +491,7 @@ export default MultiSelectComponent;
|
|
|
490
491
|
| `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. |
|
|
491
492
|
| `showError` | Boolean | No | `true` `false` | `false` | If `true`, displays the dropdown in error state with `not-validated` class. Controlled externally for validation. |
|
|
492
493
|
| `showStatus` | String | No | n/a | String | Filter items by status if applicable. |
|
|
494
|
+
| `size` | String | No | `sm` `md` `lg` | `md` | Size of the toggle button. |
|
|
493
495
|
| `values` | Array | No | n/a | [ ] | Available values for selection. |
|
|
494
496
|
| `valuesSelected` | Array / Object | No | n/a | [ ] | Represents the state of the values that are currently selected. |
|
|
495
497
|
|
|
@@ -550,6 +552,7 @@ export default DropdownSimpleDatePickerExample;
|
|
|
550
552
|
| `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
|
|
551
553
|
| `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
|
|
552
554
|
| `showError` | Boolean | No | `true` `false` | `false` | If true, the input will be displayed with an error. |
|
|
555
|
+
| `size` | String | No | `sm` `md` `lg` | `md` | Size of the toggle button. |
|
|
553
556
|
|
|
554
557
|
### Checkbox
|
|
555
558
|
|
|
@@ -584,7 +587,7 @@ export default CheckboxComponent;
|
|
|
584
587
|
| `id` | String | No | n/a | n/a | The unique identifier for the checkbox. It's required for associating the label and checkbox. |
|
|
585
588
|
| `name` | String | No | n/a | n/a | The `name` attribute of the checkbox. Used to identify the form data after it's submitted. |
|
|
586
589
|
| `setStatus` | Function | No | n/a | n/a | Function to set the `status` of the checkbox. This is a handler function typically used for state management. |
|
|
587
|
-
| `size` | String | No | `
|
|
590
|
+
| `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the checkbox. |
|
|
588
591
|
| `status` | Boolean | No | `true` `false` | `false` | Indicates whether the checkbox is checked, `true` or unchecked `false`. |
|
|
589
592
|
|
|
590
593
|
### Input
|
|
@@ -648,7 +651,7 @@ export default InputComponent;
|
|
|
648
651
|
| `requiredText` | String | No | n/a | n/a | Text displayed when input validation fails, used to indicate an error. |
|
|
649
652
|
| `setShowError` | Function | No | n/a | n/a | Function used to change the state of `showError`. |
|
|
650
653
|
| `showError` | Boolean | No | `true` `false` | `false` | If true, indicates that an error message should be displayed, usually controlled by `setShowError`. |
|
|
651
|
-
| `size` | String | No | `
|
|
654
|
+
| `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the input field. |
|
|
652
655
|
| `suffix` | String | No | n/a | n/a | Optional suffix text to display inside the input field. |
|
|
653
656
|
| `type` | String | No | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text` | Type of input |
|
|
654
657
|
| `value` | String / Number | No | n/a | n/a | The value of the input. |
|
|
@@ -706,8 +709,9 @@ export default ExampleInputChip;
|
|
|
706
709
|
| `keywordsList` | Array | Yes | n/a | n/a | This property expects an array of keywords. You can initialize it as an empty array or with keywords, and it will be updated when new keywords are added or removed from the input field. |
|
|
707
710
|
| `maxKeywords` | Number | Yes | n/a | n/a | Indicates the maximum number of allowed keywords. When the keywordsList reaches this limit, an error message defined in requiredText will be displayed. Additionally, if the counter is enabled, its status will change to the 'danger' color. |
|
|
708
711
|
| `maxKeywordLength` | Number | No | n/a | n/a | Indicates the maximum length of each keyword. When a keyword exceeds this limit, an error message defined in `duplicateKeywordErrorText` will be displayed. |
|
|
712
|
+
| `name` | String | No | n/a | n/a | The `name` attribute of the input. Used to identify the form data after it's submitted. |
|
|
709
713
|
| `pillColor` | String | No | `blue` `danger` `dark` `green` `light` `midtone` `neutral` `red` `yellow` | `neutral` | Define the color of the keyword. |
|
|
710
|
-
| `placeholder` | String | Yes | n/a | 'Add keywords…' | Displays a suggested or descriptive text inside the input field before the user types.
|
|
714
|
+
| `placeholder` | String | Yes | n/a | 'Add keywords…' | Displays a suggested or descriptive text inside the input field before the user types. Also used to generate the input's `id` attribute (converted to camelCase). |
|
|
711
715
|
| `recomendedKeywords` | Number | No | n/a | n/a | Specifies the recommended number of keywords. When the keywords list (`keywordsList`) reaches the recommended number, the counter's status will change to the 'warning' color. |
|
|
712
716
|
| `requiredText` | String | Yes | n/a | n/a | Texto que se mostrará como error cuando la lista de keywords (keywordsList) alcance el límite máximo definido en maxKeywords. |
|
|
713
717
|
| `setKeywordsList` | String | Yes | n/a | n/a | Dynamically updates the list of keywords. It is called when a new keyword is added or removed from the list. The updated array will be passed to the `keywordsList` prop. |
|
|
@@ -775,7 +779,7 @@ import { Radio } from 'groovinads-ui';
|
|
|
775
779
|
| `fullWidth` | Boolean | No | `true` `false` | `false` | If `true`, the radio button will take the full width of its container. |
|
|
776
780
|
| `name` | String | No | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. |
|
|
777
781
|
| `setStatus` | Function | No | n/a | n/a | It is used to update the selection state of the radio button based on user interaction. |
|
|
778
|
-
| `size` | String | No | `
|
|
782
|
+
| `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the radio button. |
|
|
779
783
|
| `status` | Boolean | No | `true` `false` | `false` | Indicates whether the radio button is selected (true, the radio button appears selected) or not (false, it appears unselected). |
|
|
780
784
|
|
|
781
785
|
### Slider
|
|
@@ -870,7 +874,7 @@ import { Switch } from 'groovinads-ui';
|
|
|
870
874
|
| `id` | String | No | n/a | n/a | It will be used as the id of the switch input. If not specified, an ID will be automatically generated based on the text of the children. |
|
|
871
875
|
| `name` | String | No | n/a | n/a | The name attribute of the switch. Used to identify the form data after it's submitted. |
|
|
872
876
|
| `setStatus` | Function | No | n/a | n/a | Function to set the `status` of the switch. This is a handler function typically used for state management. |
|
|
873
|
-
| `size` | String | No | `
|
|
877
|
+
| `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the switch. |
|
|
874
878
|
| `status` | Number / Boolean | No | `0` `1` | `0` | Indicates whether the switch is on (`1` / `true`) or off (`0` / `false`). |
|
|
875
879
|
| `switchPosition` | String | No | `start` `end` | `start` | Determines the position of the switch relative to the label. |
|
|
876
880
|
|
|
@@ -901,7 +905,7 @@ import { Textarea } from 'groovinads-ui';
|
|
|
901
905
|
| `requiredText` | String | No | n/a | n/a | Text displayed when textarea validation fails, used to indicate an error. |
|
|
902
906
|
| `setShowError` | Function | No | n/a | n/a | Function to set the visibility of the error message. |
|
|
903
907
|
| `showError` | Boolean | No | `true` `false` | `false` | If true, indicates that an error message should be displayed controlled by `setShowError`. |
|
|
904
|
-
| `size` | String | No | `
|
|
908
|
+
| `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the textarea field. |
|
|
905
909
|
| `value` | String | No | n/a | n/a | The value of the textarea. |
|
|
906
910
|
|
|
907
911
|
## Labels
|
|
@@ -940,7 +944,7 @@ export default ExampleAlert;
|
|
|
940
944
|
| `className` | String | No | n/a | n/a | Additional CSS class for the alert. |
|
|
941
945
|
| `icon` | Boolean | No | `true` `false` | `true` | If true, displays an icon in the alert. The icon can vary depending on the alert `type` and settings. If false, no icon is displayed in the alert. |
|
|
942
946
|
| `onClose` | Function | No | n/a | `null` | By default, `onClose` is `null`. You can provide a function for this property, which allows you to perform additional actions when the alert is closed. |
|
|
943
|
-
| `size` | String | No | `
|
|
947
|
+
| `size` | String | No | `sm` `md` `lg` `md` | `md` | Size of the alert. |
|
|
944
948
|
| `type` | String | Yes | `info` `success` `warning` `danger` | `info` | Type of alert to display. Each `type` has a specific associated icon. |
|
|
945
949
|
|
|
946
950
|
### BlockIcon
|
|
@@ -957,7 +961,7 @@ import { BlockIcon } from 'groovinads-ui';
|
|
|
957
961
|
| `className` | String | No | n/a | n/a | Additional CSS class for the block icon. |
|
|
958
962
|
| `color` | String | No | `blue` `danger` `dark` `green` `grey` `light` `midtone` `neutral` `red` `yellow` | `neutral` | Color of the block icon container. |
|
|
959
963
|
| `name` | String | No | n/a | `font-awesome` | FontAwesome icon name. |
|
|
960
|
-
| `size` | String | No | `
|
|
964
|
+
| `size` | String | No | `sm` `md` `lg` | `md` | Size of the block icon container. |
|
|
961
965
|
|
|
962
966
|
### EditableContent
|
|
963
967
|
|
|
@@ -1180,7 +1184,7 @@ import { ModalComponent } from 'groovinads-ui';
|
|
|
1180
1184
|
| `onBeforeClose` | Function | No | n/a | n/a | Callback function called before closing the modal (on backdrop click, ESC key, or X button). Useful for showing confirmation dialogs before closing. When provided, the modal won't close automatically - you control when to close it. |
|
|
1181
1185
|
| `setShow` | Function | Yes | n/a | n/a | Function to toggle the visibility state between visible and hidden. |
|
|
1182
1186
|
| `show` | Boolean | Yes | `true` `false` | n/a | Controls the visibility of the Modal. If `true`, the Modal is displayed; if `false`, it is hidden. |
|
|
1183
|
-
| `size` | String | No | `sm` `md` `lg`
|
|
1187
|
+
| `size` | String | No | `sm` `md` `lg` `xl` | `md` | Sets the size of the Modal. It's optional. |
|
|
1184
1188
|
| `type` | String | No | `default` `confirmation` `error` | `default` | Defines the type of the modal (optional). Each type has its own animation and behavior. If set to `default`, a class is added that applies `flow-reverse`, making the footer buttons appear inverted (on the right, not applied on mobile); if set to `confirmation` or `error`, they appear on the left. Defaults to default if not specified. |
|
|
1185
1189
|
|
|
1186
1190
|
## Navigation
|