Sha256: 7738c31dcd8ba598ee36ad941e0bbd381e03887265f362fbf46888d89e0aefae
Contents?: true
Size: 929 Bytes
Versions: 7
Compression:
Stored size: 929 Bytes
Contents
import {controllerFactory} from '@utils/createController'
import {computePosition, computePosition, autoUpdate, offset, flip, shift} from '@floating-ui/dom'
export default class PopoverController extends controllerFactory()({
targets: {
button: HTMLButtonElement,
popover: HTMLElement,
},
values: {
placement: String,
},
}) {
connect() {
this.popoverTarget.addEventListener('toggle', (event: ToggleEvent) => {
if (event.newState === 'open') {
this.updatePosition()
}
})
}
updatePosition() {
autoUpdate(this.buttonTarget, this.popoverTarget, () => {
computePosition(this.buttonTarget, this.popoverTarget, {
placement: this.placementValue,
middleware: [offset(5), flip(), shift({padding: 5})],
}).then(({x, y}) => {
Object.assign(this.target.style, {
left: `${x}px`,
top: `${y}px`,
})
})
})
}
}
Version data entries
7 entries across 7 versions & 1 rubygems