Merge pull request #3876 from nextcloud/fix/popover-doubled-attrs

Fix doubling attrs in `NcPopover` and improve docs
nextcloud-libraries · Mar 22, 2023 · 7cda57f · 7cda57f
2 parents 9339ace + 56ddd3a
commit 7cda57f
Showing 1 changed file with 50 additions and 26 deletions.
diff --git a/src/components/NcPopover/NcPopover.vue b/src/components/NcPopover/NcPopover.vue
@@ -40,24 +40,26 @@ open prop on this component;
 
 ```vue
 <template>
-	<NcPopover>
-		<template #trigger>
-			<NcButton> I am the trigger </NcButton>
-		</template>
-		<template>
-			<form tabindex="0" @submit.prevent>
-				<h2>this is some content</h2>
-				<p>
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. </br>
-					Vestibulum eget placerat velit.
-				</p>
-				<label>
-					Label element
-					<input type="text" placehold="input element" />
-				</label>
-			</form>
-		</template>
-	</NcPopover>
+	<div style="display: flex">
+		<NcPopover>
+			<template #trigger>
+				<NcButton>I am the trigger</NcButton>
+			</template>
+			<template>
+				<form tabindex="0" @submit.prevent>
+					<h2>this is some content</h2>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>
+						Vestibulum eget placerat velit.
+					</p>
+					<label>
+						Label element
+						<input type="text" placeholder="input element"/>
+					</label>
+				</form>
+			</template>
+		</NcPopover>
+	</div>
 </template>
 ```
 
@@ -69,14 +71,33 @@ The prop `:focus-trap="false"` help to prevent it when the default behavior is n
 
 ```vue
 <template>
-	<NcPopover :focus-trap="false">
-		<template #trigger>
-			<NcButton> Click me! </NcButton>
-		</template>
-		<template>
-			Hi! 🚀
-		</template>
-	</NcPopover>
+	<div style="display: flex">
+		<NcPopover :focus-trap="false">
+			<template #trigger>
+				<NcButton>Click me!</NcButton>
+			</template>
+			<template>
+				Hi! 🚀
+			</template>
+		</NcPopover>
+	</div>
+</template>
+```
+
+#### With passing props to `floating-vue`'s `Dropdown`:
+
+```vue
+<template>
+	<div style="display: flex">
+		<NcPopover container="body" :popper-hide-triggers="(triggers) => [...triggers, 'click']">
+			<template #trigger>
+				<NcButton>I am the trigger</NcButton>
+			</template>
+			<template #default>
+				<NcButton>Click on the button will close NcPopover</NcButton>
+			</template>
+		</NcPopover>
+	</div>
 </template>
 ```
 </docs>
@@ -107,10 +128,13 @@ import { getTrapStack } from '../../utils/focusTrap.js'
 
 export default {
 	name: 'NcPopover',
+
 	components: {
 		Dropdown,
 	},
 
+	inheritAttrs: false,
+
 	props: {
 		popoverBaseClass: {
 			type: String,