Sha256: 2572d357abd0881c145bba066b463626d9afd43e58973427b54986f7ac25602b
Contents?: true
Size: 935 Bytes
Versions: 25
Compression:
Stored size: 935 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.buttonTarget.style, {
left: `${x}px`,
top: `${y}px`,
})
})
})
}
}
Version data entries
25 entries across 25 versions & 1 rubygems