Skip to content

Commit

Permalink
feat(dropdown): make closeOnOutside, selectOnFocus and `selectOnC…
Browse files Browse the repository at this point in the history 
…lose` configurable
  • Loading branch information
@mlmoravek
mlmoravek committed Feb 11, 2025
1 parent 83f3cf9 commit 04f5c0a
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 6 deletions.
6 changes: 3 additions & 3 deletions packages/docs/components/Dropdown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ The component implements the W3C ARIA APG [Combobox Pattern](https://www.w3.org/
| 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> |
| ariaLabel | Accessibility aria-label to be passed to the trigger element - usefull if selectable | string | - | <code style='white-space: nowrap; padding: 0;'></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> |
| closeOnOutside | Close Dropdown when clicked outside | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| closeOnOutside | Close Dropdown when clicked outside | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;closeOnOutside: true<br>}</code> |
| delay | Dropdown delay before it appears (number in ms) | number | - | |
| desktopModal | Dropdown content (items) are shown into a modal on desktop | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;desktopModal: false<br>}</code> |
| disabled | Dropdown is disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
Expand All @@ -67,8 +67,8 @@ The component implements the W3C ARIA APG [Combobox Pattern](https://www.w3.org/
| override | Override existing theme classes completely | boolean | - | |
| position | Position of the dropdown relative to the trigger | "auto" \| "bottom-left" \| "bottom-right" \| "bottom" \| "left" \| "right" \| "top-left" \| "top-right" \| "top" | `auto`, `top`, `bottom`, `left`, `right`, `top-right`, `top-left`, `bottom-left`, `bottom-right` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;position: "bottom-left"<br>}</code> |
| scrollable | Dropdown content will be scrollable | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| selectOnClose | Select current focused item when closed | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| selectOnFocus | Select current focused item when focused | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| selectOnClose | Select current focused item when closed | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;selectOnClose: false<br>}</code> |
| selectOnFocus | Select current focused item when focused | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;selectOnFocus: false<br>}</code> |
| selectable | Enables item selection | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| teleport | Append the component to another part of the DOM.<br/>Set `true` to append the component to the body.<br/>In addition, any CSS selector string or an actual DOM node can be used. | boolean \| object \| string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;teleport: false<br>}</code> |
| triggerTag | Dropdown trigger tag name | DynamicComponent | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;triggerTag: "div"<br>}</code> |
Expand Down
6 changes: 3 additions & 3 deletions packages/oruga/src/components/dropdown/Dropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ const props = withDefaults(defineProps<DropdownProps<T, IsMultiple>>(), {
selectable: false,
keepOpen: () => getDefault("dropdown.keepOpen", false),
keepFirst: () => getDefault("dropdown.keepFirst", false),
closeOnOutside: true,
selectOnFocus: false,
selectOnClose: false,
closeOnOutside: () => getDefault("dropdown.closeOnOutside", true),
selectOnFocus: () => getDefault("dropdown.selectOnFocus", false),
selectOnClose: () => getDefault("dropdown.selectOnClose", false),
expanded: false,
position: () => getDefault("dropdown.position", "bottom-left"),
scrollable: false,
Expand Down
6 changes: 6 additions & 0 deletions packages/oruga/src/components/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -430,6 +430,12 @@ In addition, any CSS selector string or an actual DOM node can be used. */
keepOpen: boolean;
/** The first option will always be pre-selected (easier to just hit enter or tab) */
keepFirst: boolean;
/** Close Dropdown when clicked outside */
closeOnOutside: boolean;
/** Select current focused item when focused */
selectOnFocus: boolean;
/** Select current focused item when closed */
selectOnClose: boolean;
/** Dropdown content (items) are shown into a modal on mobile */
mobileModal: boolean;
/** Dropdown content (items) are shown into a modal on desktop */
Expand Down

0 comments on commit 04f5c0a

Please sign in to comment.