Fix strange popover positioning

[manuelmeister]

The wording of the popover positioning was very irritating.

You now specify the desired position of the activator.
I also added a default activator and warning text. This will solve 80% of the use cases.

[carlobeltrame]

I think I found it more intuitive before. You now added activator-x and activator-y props. But before, these were not the position of the activator relative to the popover, but the position of the popover relative to the activator. When I use the PopoverPrompt component, I primarily think about where in the UI I put the activator, and then from there, on which side the prompt should pop up once the user clicks the activator. I think that was the way it was implemented before (but I didn't test it out).

If that confuses you, how about renaming the existing x and y props to popover-x and popover-y, or removing our custom position props entirely and just expose Vuetify's left, right, top and bottom props?

[manuelmeister]

I always thought about the origin point and never about a target point. What about origin-x and origin-y?

I would not want to remove our custom position props as someone could define left right and top at the same time. I need to know in which edge the origin with the activator button is. I don't want to provide more options.

[carlobeltrame]

I don't understand what "origin" means in this context. In my mental model, an origin can't be shifted, it is usually at (0, 0), and therefore origin-x and origin-y don't make sense to me.
Terms I would understand in this context include "direction", "menu-position", "popover", "activator" (although I don't think new devs will easily understand that), "opener", "button", "trigger", "dropdown", ...

[manuelmeister]

I was thinking about the transform origin (css: transform-origin: top right;), which is the point where the popover scales up from. Aligning the popover and button to the same axis makes it more intuitive.

If I understand correctly, for the picture in the issue description, you would define x as left and y as below.
Because, to me, the button and popover are aligned to the right.

@usu what do you think? If you agree with Carlo, I will change the attributes to be defined like this:

button="right"
popover="below"

(for the picture in the issue description)

[manuelmeister]

@carlobeltrame I looked at this again and agree that it was not well worded. I also noticed that Vuetify v-menu has some strange quirk with its left and right prop:
https://codepen.io/manuelmeister/pen/wvRpqLj

When I first implemented this, this confused me, because in CSS if something is aligned right then it is aligned to the right side of container and not "from the right side overflowing towards left" 🤷

I have settled for

button-align="left"
popover-position="top"

which will result in

╭─────────────────────────────────╮ 
│                                 │
│             popover             │
│                                 │
├──────────┬──────────────────────╯
│  button  │
╰──────────╯

[github-actions]

⛔ Feature branch deployment currently inactive.

If the PR is still open, you can add the deploy! label to this PR to trigger a feature branch deployment.

[carlobeltrame]

It's definitely better now than the way you had it before.
I still think would be more intuitive to have both position props refer to the same element: popover-align and popover-position, since the popover position on the screen is relative to the activator, not the other way round. But if you don't agree, the wording of the props is now clearer than x and y, so I'm fine with the current state.

[manuelmeister]

@carlobeltrame I changed it to align and position.