From 04f5c0ad94c3cba685419563fd78dbdeeb8ca367 Mon Sep 17 00:00:00 2001 From: mlmoravek Date: Tue, 11 Feb 2025 10:03:21 +0100 Subject: [PATCH] feat(dropdown): make `closeOnOutside`, `selectOnFocus` and `selectOnClose` configurable --- packages/docs/components/Dropdown.md | 6 +++--- packages/oruga/src/components/dropdown/Dropdown.vue | 6 +++--- packages/oruga/src/components/types.ts | 6 ++++++ 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/docs/components/Dropdown.md b/packages/docs/components/Dropdown.md index 774140b47..1ccb2af35 100644 --- a/packages/docs/components/Dropdown.md +++ b/packages/docs/components/Dropdown.md @@ -46,7 +46,7 @@ The component implements the W3C ARIA APG [Combobox Pattern](https://www.w3.org/ | animation | Custom animation (transition name) | string | - |
From config:
dropdown: {
  animation: "fade"
} | | ariaLabel | Accessibility aria-label to be passed to the trigger element - usefull if selectable | string | - | | | checkScroll | Makes the component check if menu reached scroll start or end and emit scroll events. | boolean | - |
From config:
dropdown: {
  checkScroll: false
} | -| closeOnOutside | Close Dropdown when clicked outside | boolean | - | true | +| closeOnOutside | Close Dropdown when clicked outside | boolean | - |
From config:
dropdown: {
  closeOnOutside: true
} | | delay | Dropdown delay before it appears (number in ms) | number | - | | | desktopModal | Dropdown content (items) are shown into a modal on desktop | boolean | - |
From config:
dropdown: {
  desktopModal: false
} | | disabled | Dropdown is disabled | boolean | - | false | @@ -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` |
From config:
dropdown: {
  position: "bottom-left"
} | | scrollable | Dropdown content will be scrollable | boolean | - | false | -| selectOnClose | Select current focused item when closed | boolean | - | false | -| selectOnFocus | Select current focused item when focused | boolean | - | false | +| selectOnClose | Select current focused item when closed | boolean | - |
From config:
dropdown: {
  selectOnClose: false
} | +| selectOnFocus | Select current focused item when focused | boolean | - |
From config:
dropdown: {
  selectOnFocus: false
} | | selectable | Enables item selection | boolean | - | false | | teleport | Append the component to another part of the DOM.
Set `true` to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used. | boolean \| object \| string | - |
From config:
dropdown: {
  teleport: false
} | | triggerTag | Dropdown trigger tag name | DynamicComponent | - |
From config:
dropdown: {
  triggerTag: "div"
} | diff --git a/packages/oruga/src/components/dropdown/Dropdown.vue b/packages/oruga/src/components/dropdown/Dropdown.vue index ea739a8d7..a3c8467c5 100644 --- a/packages/oruga/src/components/dropdown/Dropdown.vue +++ b/packages/oruga/src/components/dropdown/Dropdown.vue @@ -56,9 +56,9 @@ const props = withDefaults(defineProps>(), { 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, diff --git a/packages/oruga/src/components/types.ts b/packages/oruga/src/components/types.ts index 6cb43891e..eb3cf0705 100644 --- a/packages/oruga/src/components/types.ts +++ b/packages/oruga/src/components/types.ts @@ -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 */