db-ui · nmerget · Apr 3, 2024 · Mar 21, 2024 · Mar 21, 2024 · Mar 22, 2024
@@ -69,7 +69,8 @@ const getComponents = () => [
 	},
 
 	{
-		name: 'popover'
+		name: 'popover',
+		overwrites: { angular: [{ from: 'mouseEnter', to: 'mouseenter' }] }
 	},
 
 	{

@@ -19,6 +19,13 @@ module.exports = () => {
 						`./src/components/${name}/${name}.spec.tsx`,
 						`../../output/${resolvedFramework}/src/components/${name}/${name}.spec.tsx`
 					);
+					if (framework === 'vue') {
+						Replace({
+							files: `../../output/${resolvedFramework}/src/components/${name}/${name}.spec.tsx`,
+							from: ['{/*', '*/}'],
+							to: ''
+						});
+					}
 				}
 				Fse.copySync(
 					`./test/playwright/boilerplate`,

@@ -20,8 +20,9 @@ import { DBPopover } from '@db-ui/ngx-components';
 
 ```html app.component.html
 <!-- app.component.html -->
-<db-button describedbyid="popover-01">
-	Hover on me to open Popover
-	<db-popover id="popover-01">Popover</db-popover>
-</db-button>
+<db-popover>
+	<db-button trigger> Hover on me to open Popover </db-button>
+	Use any html code here like e.g. a <code>button</code>:
+	<button type="button">Test</button>
+</db-popover>
 ```
@@ -8,9 +8,14 @@ For general installation and configuration take a look at the [components](https
 <!-- index.html -->
 ...
 <body>
-	<button class="db-button" aria-describedby="popover-01">
-		Hover on me to open Popover
-		<i class="db-popover" id="popover-01">Popover</i>
-	</button>
+	<div class="db-popover">
+		<button aria-haspopup="true" class="db-button" type="button">
+			Hover on me to open Popover
+		</button>
+		<article class="db-popover-content">
+			Use any html code here like e.g. a <code>button</code>:
+			<button type="button">Test</button>
+		</article>
+	</div>
 </body>
 ```
@@ -9,10 +9,10 @@ For general installation and configuration take a look at the [react-components]
 import { DBPopover, DBButton } from "@db-ui/react-components";
 
 const App = () => (
-	<DBButton describedbyid="popover-01">
-		Hover on me to open Popover
-		<DBPopover id="popover-01">Popover</DBPopover>
-	</DBButton>
+	<DBPopover slotTrigger={<DBButton>Hover on me to open Popover</DBButton>}>
+		Use any html code here like e.g. a <code>button</code>:
+		<button type="button">Test</button>
+	</DBPopover>
 );
 
 export default App;

@@ -11,9 +11,12 @@ import { DBPopover, DBButton } from "@db-ui/v-components";
 </script>
 
 <template>
-	<DBButton describedbyid="popover-01">
-		Hover on me to open Popover
-		<DBPopover id="popover-01">Popover</DBPopover>
-	</DBButton>
+	<DBPopover>
+		<template v-slot:trigger>
+			<DBButton> Hover on me to open Popover </DBButton>
+		</template>
+		Use any html code here like e.g. a <code>button</code>:
+		<button type="button">Test</button>
+	</DBPopover>
 </template>
 ```
@@ -3,8 +3,10 @@ import {
 	GapProps,
 	GlobalProps,
 	GlobalState,
+	InitializedState,
 	PlacementProps,
 	PopoverProps,
+	PopoverState,
 	SpacingProps
 } from '../../shared/model';
 
@@ -13,6 +15,11 @@ export interface DBPopoverDefaultProps {
 	 * Use open to disable the default hover/focus behaviour to use it on click or other trigger.
 	 */
 	open?: boolean;
+
+	/**
+	 * The trigger to open the popover e.g. a button
+	 */
+	slotTrigger?: any;
 }
 
 export type DBPopoverProps = DBPopoverDefaultProps &
@@ -26,4 +33,5 @@ export interface DBPopoverDefaultState {}
 
 export type DBPopoverState = DBPopoverDefaultState &
 	GlobalState &
-	ClickEventState<HTMLElement>;
+	PopoverState &
+	InitializedState;
@@ -1,7 +1,13 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	onUpdate,
+	Slot,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBPopoverProps, DBPopoverState } from './model';
-import { cls } from '../../utils';
-import { ClickEvent } from '../../shared/model';
+import { cls, handleDataOutside } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -11,29 +17,50 @@ export default function DBPopover(props: DBPopoverProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBPopoverState>({
-		handleClick: (event: ClickEvent<HTMLElement>) => {
-			event.stopPropagation();
+		initialized: false,
+		handleAutoPlacement: () => {
+			if (!ref) return;
+			const article = ref.querySelector('article');
+			if (!article) return;
+			handleDataOutside(article);
 		}
 	});
 
+	onMount(() => {
+		state.initialized = true;
+	});
+
+	onUpdate(() => {
+		if (ref && state.initialized) {
+			const children: Element[] = Array.from(ref.children);
+			if (children.length >= 2) {
+				children[0].ariaHasPopup = 'true';
+			}
+			state.initialized = false;
+		}
+	}, [ref, state.initialized]);
+
 	// jscpd:ignore-end
 
 	return (
-		<i
+		<div
 			ref={ref}
 			id={props.id}
 			class={cls('db-popover', props.className)}
-			data-spacing={props.spacing}
-			data-gap={props.gap}
-			data-animation={props.animation}
-			data-open={props.open}
-			data-delay={props.delay}
-			data-width={props.width}
-			data-placement={props.placement}
-			onClick={(event: ClickEvent<HTMLElement>) =>
-				state.handleClick(event)
-			}>
-			{props.children}
-		</i>
+			onFocus={() => state.handleAutoPlacement()}
+			onMouseEnter={() => state.handleAutoPlacement()}>
+			<Slot name="trigger" />
+			<article
+				class="db-popover-content"
+				data-spacing={props.spacing}
+				data-gap={props.gap}
+				data-animation={props.animation}
+				data-open={props.open}
+				data-delay={props.delay}
+				data-width={props.width}
+				data-placement={props.placement}>
+				{props.children}
+			</article>
+		</div>
 	);
 }
@@ -2,22 +2,34 @@
 @use "../../styles/popover-component";
 
 .db-popover {
-	@extend %default-popover;
+	position: relative;
 
-	&,
-	&[data-spacing="small"] {
-		padding: variables.$db-spacing-fixed-sm;
+	&:hover,
+	&:focus-within {
+		& > article {
+			@extend %show-popover;
+		}
 	}
 
-	&[data-spacing="medium"] {
-		padding: variables.$db-spacing-fixed-md;
-	}
+	& > article {
+		@extend %popover-center;
+		@extend %default-popover;
 
-	&[data-spacing="none"] {
-		padding: 0;
-	}
+		&,
+		&[data-spacing="small"] {
+			padding: variables.$db-spacing-fixed-sm;
+		}
+
+		&[data-spacing="medium"] {
+			padding: variables.$db-spacing-fixed-md;
+		}
+
+		&[data-spacing="none"] {
+			padding: 0;
+		}
 
-	&[data-open="true"] {
-		@extend %show-popover;
+		&[data-open="true"] {
+			@extend %show-popover;
+		}
 	}
 }
@@ -6,13 +6,19 @@ import { DBPopover } from './index';
 import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
 import { DBButton } from '../button';
 
-const comp = (
-	<DBButton describedbyid="popover-01">
-		Button
-		<DBPopover open={true} animation="disabled" id="popover-01">
+// template v-slot is used for vue component tests
+const comp: any = (
+	<div className="padding-box">
+		<DBPopover
+			animation="disabled"
+			data-testid="popover"
+			slotTrigger={<DBButton data-testid="button">Button</DBButton>}>
+			{/*<template v-slot:trigger>
+				<DBButton data-testid="button">Button</DBButton>
+			</template>*/}
 			Test
 		</DBPopover>
-	</DBButton>
+	</div>
 );
 
 const testComponent = () => {
@@ -25,6 +31,18 @@ const testComponent = () => {
 		const component = await mount(comp);
 		await expect(component).toHaveScreenshot();
 	});
+
+	test('should open', async ({ mount }) => {
+		const component = await mount(comp);
+		await component.getByTestId('button').focus();
+		await expect(component.getByTestId('popover')).toBeVisible();
+	});
+
+	test('after open should match screenshot', async ({ mount }) => {
+		const component = await mount(comp);
+		await component.getByTestId('button').focus();
+		await expect(component).toHaveScreenshot();
+	});
 };
 
 test.describe('DBPopover', () => {

@@ -3,8 +3,10 @@ import {
 	EmphasisProps,
 	GlobalProps,
 	GlobalState,
+	InitializedState,
 	PlacementProps,
-	PopoverProps
+	PopoverProps,
+	PopoverState
 } from '../../shared/model';
 
 export interface DBTooltipDefaultProps {
@@ -21,4 +23,6 @@ export interface DBTooltipDefaultState {}
 
 export type DBTooltipState = DBTooltipDefaultState &
 	GlobalState &
-	ClickEventState<HTMLElement>;
+	ClickEventState<HTMLElement> &
+	PopoverState &
+	InitializedState;
@@ -1,6 +1,12 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	onUpdate,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBTooltipProps, DBTooltipState } from './model';
-import { cls } from '../../utils';
+import { cls, handleDataOutside } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({
@@ -11,10 +17,34 @@ export default function DBTooltip(props: DBTooltipProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTooltipState>({
+		initialized: false,
 		handleClick: (event: ClickEvent<HTMLElement>) => {
 			event.stopPropagation();
+		},
+		handleAutoPlacement: () => {
+			if (ref) handleDataOutside(ref);
 		}
 	});
+
+	onMount(() => {
+		state.initialized = true;
+	});
+
+	onUpdate(() => {
+		if (ref && state.initialized) {
+			const parent = ref.parentElement;
+			if (parent) {
+				['mouseenter', 'focus'].forEach((event) => {
+					parent.addEventListener(event, () =>
+						state.handleAutoPlacement()
+					);
+				});
+			}
+
+			state.initialized = false;
+		}
+	}, [ref, state.initialized]);
+
 	// jscpd:ignore-end
 
 	// TODO: Shall we check if only <span>, <p> or direct text was passed as children?
-Original file line number
+Diff line change
@@ Expand Up / @@ -69,7 +69,8 @@ const getComponents = () => [ @@
     	},
     	{
-    		name: 'popover'
+    		name: 'popover',
+    		overwrites: { angular: [{ from: 'mouseEnter', to: 'mouseenter' }] }
     	},
     	{
@@ Expand Down @@