diff --git a/CHANGELOG.md b/CHANGELOG.md index 897c1bb06a..20e9b081d6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -143,6 +143,9 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component - The `range` property was removed in favor of `type="datetime-range"` (datetime ranges), `type="date-range"` (date only ranges), and `type="time-range"` (time only ranges). - The `lang` property was replaced with the `locale` property. - The `formatter` property was removed. +- `NcPopover` is no longer a transparent wrapper over the `floating-vue` package. + Instead only use the documented properties and events. + If you find some use cases not covered by the documented interface, please open a feature request. - `NcSelect` - `userSelect` property was removed, instead just use the `NcSelectUsers` component - `closeOnSelect` property was removed in favor of `keepOpen`. @@ -257,7 +260,12 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component ### 📝 Notes #### NcPopover -The `focusTrap` property is now deprecated and will be replaced with `noFocusTrap`, +`NcPopover` now has its own properties and no longer directly exposes the internal library used (`floating-vue`). +It is still possible to use its properties, but this ability might be removed in the next version. +Thus we encourage you to only use the documented properties. + +Also this component now supports a logical placement (`start`, `end`) which works with RTL design. +Moreover the `focusTrap` property is now deprecated and will be replaced with `noFocusTrap`, the reason behind this is to only have boolean properties with default value of `false` allowing shortcut props. ## [v8.25.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.25.0) (UNRELEASED) diff --git a/src/components/NcPopover/NcPopover.vue b/src/components/NcPopover/NcPopover.vue index a0368a01d8..0038de1656 100644 --- a/src/components/NcPopover/NcPopover.vue +++ b/src/components/NcPopover/NcPopover.vue @@ -7,10 +7,6 @@ ### General description -This component is just a wrapper for the floating-vue plugin by Akryum, -please refer to this documentation for customization: -https://github.com/Akryum/floating-vue - This components has two slots: * 'trigger' which can be any html element and it will trigger the popover this slot is optional since you can toggle the popover also by updating the @@ -51,12 +47,12 @@ open prop on this component; The [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree. -The prop `:focus-trap="false"` help to prevent it when the default behavior is not relevant. +The prop `no-focus-trap` help to prevent it when the default behavior is not relevant. ```vue ``` -#### With passing props to `floating-vue`'s `Dropdown`: +#### With logical placement + +If the text flow is language specific (e.g. UI is shown for right-to-left language), +also the popover often needs to be adjusted when not rendered on top or bottom (default). ```vue + + ``` #### With a custom button in as a trigger: @@ -141,11 +176,22 @@ See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/