Skip to content

Commit

Permalink
feat(autocomplete|taginput): update component generics and props (#956)
Browse files Browse the repository at this point in the history 
* add Input `debounce` prop

* update Autocomplete generics

* add Autocomplete prop `filter` to define a filter for input value

* update Autocomplete examples

* rename Autocomplete prop `data` to `options`

* rename TableColumn prop `display` to `formatter`

* update Taginput generics

* rename Taginput prop `data` to `options`

* add Taginput prop `filter` to define a filter for input value

* add Taginput prop `formatter`

* set Taginput inner Autocomplete to expanded

* update Taginput examples

* remove Taginput `allowAutocomplete` prop and rework `allowNew` behavior

* add Taginput remove tags on enter
  • Loading branch information
@mlmoravek
mlmoravek authored Jun 13, 2024
1 parent dd8b50f commit 26de252
Show file tree
Hide file tree
Showing 35 changed files with 512 additions and 947 deletions.
121 changes: 62 additions & 59 deletions packages/docs/components/Autocomplete.md
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/docs/components/Datepicker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ title: Datepicker

| Prop name | Description | Type | Values | Default |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| active | The active state of the dropdown, use v-model:active to make it two-way binding. | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| active | The active state of the dropdown, use v-model:active to make it two-way binding | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| ariaNextLabel | Accessibility next button aria label | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;ariaNextLabel: "Next Page"<br>}</code> |
| ariaPreviousLabel | Accessibility previous button aria label | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;ariaNextLabel: "Previous Page"<br>}</code> |
| closeOnClick | Close dropdown on click | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;closeOnClick: true<br>}</code> |
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/components/Datetimepicker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ title: Datetimepicker

| Prop name | Description | Type | Values | Default |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| active | The active state of the dropdown, use v-model:active to make it two-way binding. | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| active | The active state of the dropdown, use v-model:active to make it two-way binding | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| datepicker | Define props for the underlying datepicker component | DatepickerProps | - | |
| datetimeCreator | Date creator function, default is `new Date()` | (date: Date) =&gt; Date | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datetimepicker: {<br>&nbsp;&nbsp;datetimeCreator: (d: Date) => new Date(d), <br>}</code> |
| datetimeFormatter | Custom function to format a date into a string | (date: Date) =&gt; string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datetimepicker: {<br>&nbsp;&nbsp;dateFormatter: defaultFunction<br>}</code> |
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/components/Dropdown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ sidebarDepth: 2

| Prop name | Description | Type | Values | Default |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| active | The active state of the dropdown, use v-model:active to make it two-way binding. | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| active | The active state of the dropdown, use v-model:active to make it two-way binding | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| animation | Custom animation (transition name) | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;animation: "fade"<br>}</code> |
| ariaRole | Role attribute to be passed to the list container for better accessibility.<br/>Use menu only in situations where your dropdown is related to a navigation menu. | string | `list`, `listbox`, `menu`, `dialog` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;ariaRole: "list"<br>}</code> |
| checkScroll | Makes the component check if menu reached scroll start or end and emit scroll events. | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;checkScroll: false<br>}</code> |
Expand Down
1 change: 1 addition & 0 deletions packages/docs/components/Input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ title: Input
| clearIcon | Icon name to be added on the clear button | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;clearIcon: "close-circle"<br>}</code> |
| clearable | Add a button/icon to clear the inputed text | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;clearable: false<br>}</code> |
| counter | Show character counter when maxlength prop is passed | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;counter: false<br>}</code> |
| debounce | Number of milliseconds to delay before to emit input event | number | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;debounce: 400<br>}</code> |
| disabled | Same as native disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| expanded | Makes input full width when inside a grouped or addon field | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| icon | Icon to be shown | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;icon: undefined<br>}</code> |
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/components/Loading.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ title: Loading

| Prop name | Description | Type | Values | Default |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| active | Whether loading is active or not, use v-model:active to make it two-way binding. | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| active | Whether loading is active or not, use v-model:active to make it two-way binding | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| animation | Custom animation (transition name) | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;animation: "fade"<br>}</code> |
| cancelable | Is Loading cancable by pressing escape or clicking outside. | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| container | DOM element where the loading component will be created on (for programmatic usage).<br/>Note that this also changes fullPage to false. | string \| HTMLElement \| null | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;container: "body"<br>}</code> |
Expand Down
Loading

0 comments on commit 26de252

Please sign in to comment.