Contents

import { Controller } from "@hotwired/stimulus"
import { computePosition, flip, shift, offset, autoUpdate } from "https://esm.sh/@floating-ui/dom@1.6.13?standalone"

export default class extends Controller {
  static targets = [ "button", "menu" ]
  static values  = { placement: { type: String, default: "bottom" } }

  initialize() {
    this.orient = this.orient.bind(this)
  }

  connect() {
    this.cleanup = autoUpdate(this.buttonTarget, this.menuTarget, this.orient)
  }

  disconnect() {
    this.cleanup()
  }

  show() {
    this.menuTarget.showPopover()
  }

  showLater() {
    setTimeout(() => this.show(), 700)
  }

  hide() {
    this.menuTarget.hidePopover()
  }

  orient() {
    computePosition(this.buttonTarget, this.menuTarget, this.#options).then(({x, y}) => {
      this.menuTarget.style.insetInlineStart = `${x}px`
      this.menuTarget.style.insetBlockStart  = `${y}px`
    })
  }

  get #options() {
    return { placement: this.placementValue, middleware: [offset(4), flip(), shift({padding: 4})] }
  }
}

Version data entries

5 entries across 5 versions & 1 rubygems

Version	Path
css-zero-0.0.92	lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js
css-zero-0.0.91	lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js
css-zero-0.0.90	lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js
css-zero-0.0.89	lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js
css-zero-0.0.88	lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js