Skip to content

Commit 6142da5

Browse files
authored
feat: restructure options properties and types (#1517)
In this PR, I refactored the useOptions composable to have a more abstract type interface, which makes it easier to use this composable in different components. This introduces some breaking changes to the options props for several components. - Simplify `useOptions` composable and types - Remove `hidden` property from internal options representation. Components which need that propery have to handle it by its own. - Update `options` property type of several components. BREAKING CHANGE: The `options` property type of components with child items has changed. The type got simplified to a more abstract type interface.
1 parent 4a8453e commit 6142da5

File tree

110 files changed

+1744
-2294
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

110 files changed

+1744
-2294
lines changed

packages/docs/components/Autocomplete.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ Use it with the [Field](/components/Field) component to access all functionaliti
6060
| mobileModal | Dropdown content (items) are shown into a modal on mobile | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;mobileModal: false<br>}</code> |
6161
| v-model | The selected option value, use v-model to make it two-way binding<br/>the selected value, use v-model to make it two-way binding | string\|number\|object | - | |
6262
| openOnFocus | Open dropdown list on focus | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;openOnFocus: false<br>}</code> |
63-
| options | Autocomplete options | OptionsPropWithGroups&lt;unknown&gt; | - | |
63+
| options | Autocomplete options | AutocompleteOptions&lt;unknown&gt; | - | |
6464
| override | Override existing theme classes completely | boolean | - | |
6565
| placeholder | Input placeholder | string | - | |
6666
| position | Position of the dropdown | "auto" \| "bottom" \| "top" | `auto`, `top`, `bottom` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;position: "auto"<br>}</code> |
@@ -95,14 +95,14 @@ Use it with the [Field](/components/Field) component to access all functionaliti
9595

9696
### Slots
9797

98-
| Name | Description | Bindings |
99-
| ------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
100-
| header | Define an additional header | **toggle** `(): void` - toggle dropdown active state |
101-
| default | Define the autocomplete items here | **toggle** `(): void` - toggle dropdown active state |
102-
| group | Override the option group | **group** `object` - options group<br/>**index** `number` - option index |
103-
| option | Override the select option | **option** `object` - option object<br/>**index** `number` - option index<br/>**value** `unknown` - option value |
104-
| empty | Define the content to show if the list is empty | **toggle** `(): void` - toggle dropdown active state |
105-
| footer | Define an additional footer | **toggle** `(): void` - toggle dropdown active state |
98+
| Name | Description | Bindings |
99+
| ------- | ----------------------------------------------- | ---------------------------------------------------- |
100+
| header | Define an additional header | **toggle** `(): void` - toggle dropdown active state |
101+
| default | Define the autocomplete items here | **toggle** `(): void` - toggle dropdown active state |
102+
| group | Override the option group | **group** `object` - options group |
103+
| option | Override the select option | **option** `object` - option object |
104+
| empty | Define the content to show if the list is empty | **toggle** `(): void` - toggle dropdown active state |
105+
| footer | Define an additional footer | **toggle** `(): void` - toggle dropdown active state |
106106

107107
</section>
108108

packages/docs/components/Breadcrumb.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ The component implements the W3C ARIA APG [Breadcrumb Pattern](https://www.w3.or
3434
| Prop name | Description | Type | Values | Default |
3535
| --------- | ---------------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
3636
| ariaLabel | Accessibility aria-label to be passed to the nav wrapper element | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;ariaLabel: "Breadcrumb"<br>}</code> |
37-
| options | breadcrumb items, unnecessary when default slot is used | SimpleOptionsProp | - | |
37+
| options | breadcrumb items, unnecessary when default slot is used | BreadcrumnOptions | - | |
3838
| override | Override existing theme classes completely | boolean | - | |
3939
| position | Position of the breadcrumb | "centered" \| "left" \| "right" | `left`, `centered`, `right` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>breadcrumb: {<br>&nbsp;&nbsp;position: undefined<br>}</code> |
4040
| separator | The separator between breadcrumb items | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>breadcrumb: {<br>&nbsp;&nbsp;separator: "/"<br>}</code> |

0 commit comments

Comments
 (0)