hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/controllers/hakumi/popover_controller.js

@@ -0,0 +1,473 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+    static targets = ["trigger", "popover", "arrow"]
+    static values = {
+        placement: { type: String, default: "top" },
+        trigger: { type: String, default: "hover" },
+        disabled: { type: Boolean, default: false },
+        open: { type: Boolean, default: undefined },
+        arrow: { type: Boolean, default: true },
+        autoAdjustOverflow: { type: Boolean, default: true }
+    }
+
+    registerApi() {
+        const api = {
+            open: () => this.open(),
+            close: () => this.close(),
+            toggle: () => this.toggle(),
+            isOpen: () => this.isOpen,
+            getState: () => ({
+                open: this.isOpen,
+                placement: this.placementValue,
+                trigger: this.triggerModes,
+                arrow: this.arrowValue,
+                disabled: this.disabledValue
+            }),
+            setPlacement: (placement) => this.setPlacement(placement),
+            setOpen: (value) => this.setOpen(value)
+        }
+
+        this.element.hakumiComponent = {
+            name: "popover",
+            version: 1,
+            singleton: false,
+            api
+        }
+
+        this.#exposeApi(api)
+    }
+
+    setup() {
+        this.isOpen = false
+        this.hideTimeout = null
+        this.triggerModes = this.#parseTriggers()
+        this._popover = this.popoverTarget
+        this.setupTriggerEvents()
+
+        if (this.hasOpenValue && this.openValue !== undefined) {
+            this.isOpen = this.openValue
+            this.updateVisibility()
+        }
+    }
+
+    teardown() {
+        this.removeTriggerEvents()
+
+        const popover = this.popoverElement
+        if (popover && popover.parentElement === document.body) {
+            this.element.appendChild(popover)
+        }
+    }
+
+    disconnect() {
+        delete this.element.hakumiPopover
+        super.disconnect()
+    }
+
+    setupTriggerEvents() {
+        if (!this.hasTriggerTarget) return
+
+        this.onTriggerClick = (event) => {
+            if (this.disabledValue) return
+            event.preventDefault()
+            this.toggle()
+        }
+
+        this.onTriggerHoverEnter = () => {
+            if (this.disabledValue) return
+            this.#clearHideTimeout()
+            this.show()
+        }
+
+        this.onTriggerHoverLeave = () => {
+            if (this.disabledValue) return
+            this.#scheduleHide()
+        }
+
+        this.onPopoverHoverEnter = () => {
+            if (this.disabledValue) return
+            this.#clearHideTimeout()
+            this.show()
+        }
+
+        this.onPopoverHoverLeave = () => {
+            if (this.disabledValue) return
+            this.#scheduleHide()
+        }
+
+        if (this.triggerModes.includes("click")) {
+            this.triggerTarget.addEventListener("click", this.onTriggerClick)
+            this.triggerTarget.setAttribute("aria-haspopup", "dialog")
+            this.triggerTarget.setAttribute("aria-expanded", "false")
+            this.#bindOutsideListeners()
+        } else {
+            this.#unbindOutsideListeners()
+        }
+
+        if (this.triggerModes.includes("hover")) {
+            this.triggerTarget.addEventListener("mouseenter", this.onTriggerHoverEnter)
+            this.triggerTarget.addEventListener("mouseleave", this.onTriggerHoverLeave)
+
+            const popover = this.popoverElement
+            if (popover) {
+                popover.addEventListener("mouseenter", this.onPopoverHoverEnter)
+                popover.addEventListener("mouseleave", this.onPopoverHoverLeave)
+            }
+        }
+
+        if (this.triggerModes.includes("focus")) {
+            this.onTriggerFocusIn = () => {
+                if (this.disabledValue) return
+                this.show()
+            }
+            this.onTriggerFocusOut = () => {
+                if (this.disabledValue) return
+                this.hide()
+            }
+
+            this.triggerTarget.addEventListener("focusin", this.onTriggerFocusIn)
+            this.triggerTarget.addEventListener("focusout", this.onTriggerFocusOut)
+        }
+    }
+
+    removeTriggerEvents() {
+        if (!this.hasTriggerTarget) return
+
+        this.triggerTarget.removeEventListener("click", this.onTriggerClick)
+        this.triggerTarget.removeEventListener("mouseenter", this.onTriggerHoverEnter)
+        this.triggerTarget.removeEventListener("mouseleave", this.onTriggerHoverLeave)
+        this.triggerTarget.removeEventListener("focusin", this.onTriggerFocusIn)
+        this.triggerTarget.removeEventListener("focusout", this.onTriggerFocusOut)
+
+        const popover = this.popoverElement
+        if (popover) {
+            popover.removeEventListener("mouseenter", this.onPopoverHoverEnter)
+            popover.removeEventListener("mouseleave", this.onPopoverHoverLeave)
+        }
+
+        this.#unbindOutsideListeners()
+    }
+
+    show() {
+        if (this.disabledValue) return
+        if (this.#isControlled()) return
+
+        this.isOpen = true
+        this.updateVisibility()
+    }
+
+    hide() {
+        if (this.disabledValue) return
+        if (this.#isControlled()) return
+
+        this.isOpen = false
+        this.updateVisibility()
+        this.dispatch("hidden", { prefix: "hakumi-popover" })
+        this.element.dispatchEvent(new CustomEvent("hakumi-component:hidden", { bubbles: true }))
+    }
+
+    open() {
+        this.isOpen = true
+        this.updateVisibility()
+    }
+
+    close() {
+        this.isOpen = false
+        this.updateVisibility()
+        this.dispatch("hidden", { prefix: "hakumi-popover" })
+        this.element.dispatchEvent(new CustomEvent("hakumi-component:hidden", { bubbles: true }))
+    }
+
+    toggle() {
+        if (this.#isControlled()) {
+            this.setOpen(!this.isOpen)
+            return
+        }
+
+        this.isOpen ? this.hide() : this.show()
+    }
+
+    updateVisibility() {
+        const popover = this.popoverElement
+        if (!popover) return
+
+        if (this.isOpen) {
+            popover.style.display = "block"
+            this.triggerTarget.setAttribute("aria-expanded", "true")
+
+            requestAnimationFrame(() => {
+                popover.classList.add("hakumi-popover-visible")
+                this.#positionPopover()
+            })
+        } else {
+            popover.classList.remove("hakumi-popover-visible")
+            this.triggerTarget.setAttribute("aria-expanded", "false")
+
+            setTimeout(() => {
+                if (!this.isOpen) {
+                    popover.style.display = "none"
+                    if (popover.parentElement === document.body) {
+                        this.element.appendChild(popover)
+                    }
+                }
+            }, 300)
+        }
+    }
+
+    openValueChanged() {
+        if (this.openValue !== undefined) {
+            this.isOpen = this.openValue
+            this.updateVisibility()
+        }
+    }
+
+    setOpen(value) {
+        this.openValue = Boolean(value)
+        this.isOpen = this.openValue
+        this.updateVisibility()
+    }
+
+    setPlacement(placement) {
+        this.placementValue = placement
+        if (this.isOpen) {
+            this.#positionPopover()
+        }
+    }
+
+    #positionPopover() {
+        if (!this.hasTriggerTarget) return
+
+        const trigger = this.triggerTarget
+        const popover = this.popoverElement
+        const gap = this.arrowValue ? 8 : 4
+
+        if (popover.parentElement !== document.body) {
+            document.body.appendChild(popover)
+        }
+
+        popover.style.visibility = "hidden"
+        popover.style.display = "block"
+        popover.style.position = "absolute"
+        const rect = popover.getBoundingClientRect()
+        popover.style.visibility = ""
+
+        const viewport = {
+            width: window.innerWidth,
+            height: window.innerHeight
+        }
+
+        let placement = this.placementValue
+
+        if (placement === "auto") {
+            placement = this._chooseBestPlacement(trigger, rect, gap, viewport)
+        }
+
+        if (this.autoAdjustOverflowValue) {
+            const check = (p) => {
+                const triggerRect = trigger.getBoundingClientRect()
+                const coords = this._calculateViewportCoords(p, triggerRect, rect, gap)
+                return {
+                    top: coords.top < 0,
+                    bottom: (coords.top + rect.height) > viewport.height,
+                    left: coords.left < 0,
+                    right: (coords.left + rect.width) > viewport.width
+                }
+            }
+
+            const overflows = check(placement)
+            const dirMatch = placement.match(/^(top|bottom|left|right)/)
+            const dir = dirMatch ? dirMatch[1] : "top"
+
+            if (overflows[dir]) {
+                const opposites = {
+                    top: "bottom",
+                    bottom: "top",
+                    left: "right",
+                    right: "left"
+                }
+                const newPlacement = placement.replace(dir, opposites[dir])
+                const altOverflows = check(newPlacement)
+
+                if (!altOverflows[opposites[dir]]) {
+                    placement = newPlacement
+                }
+            }
+        }
+
+        const triggerRect = trigger.getBoundingClientRect()
+        const finalViewportCoords = this._calculateViewportCoords(placement, triggerRect, rect, gap)
+
+        popover.style.top = `${finalViewportCoords.top + window.scrollY}px`
+        popover.style.left = `${finalViewportCoords.left + window.scrollX}px`
+        popover.style.zIndex = "1030"
+
+        popover.setAttribute("data-hakumi--popover-placement-value", placement)
+    }
+
+    _chooseBestPlacement(trigger, popoverRect, gap, viewport) {
+        const triggerRect = trigger.getBoundingClientRect()
+        const spaces = {
+            top: triggerRect.top,
+            bottom: viewport.height - triggerRect.bottom,
+            left: triggerRect.left,
+            right: viewport.width - triggerRect.right
+        }
+
+        const pw = popoverRect.width
+        const ph = popoverRect.height
+
+        const fits = (side) => {
+            const required = (side === "top" || side === "bottom") ? ph : pw
+            return spaces[side] >= required + gap
+        }
+
+        if (fits("top") || fits("bottom")) {
+            return spaces.top >= spaces.bottom ? "top" : "bottom"
+        }
+
+        if (fits("left") || fits("right")) {
+            return spaces.left >= spaces.right ? "left" : "right"
+        }
+
+        return Object.entries(spaces).reduce((a, b) => a[1] > b[1] ? a : b)[0]
+    }
+
+    _calculateViewportCoords(placement, triggerRect, popoverRect, gap) {
+        const { top: ty, left: tx, width: tw, height: th } = triggerRect
+        const { width: pw, height: ph } = popoverRect
+
+        let top = 0
+        let left = 0
+
+        switch (placement) {
+            case "top":
+            case "topLeft":
+            case "topRight":
+                top = ty - ph - gap
+                break
+            case "bottom":
+            case "bottomLeft":
+            case "bottomRight":
+                top = ty + th + gap
+                break
+            case "left":
+            case "leftTop":
+            case "leftBottom":
+                top = ty + (th - ph) / 2
+                if (placement === "leftTop") top = ty
+                if (placement === "leftBottom") top = ty + th - ph
+                break
+            case "right":
+            case "rightTop":
+            case "rightBottom":
+                top = ty + (th - ph) / 2
+                if (placement === "rightTop") top = ty
+                if (placement === "rightBottom") top = ty + th - ph
+                break
+        }
+
+        switch (placement) {
+            case "top":
+            case "bottom":
+                left = tx + (tw - pw) / 2
+                break
+            case "topLeft":
+            case "bottomLeft":
+                left = tx
+                break
+            case "topRight":
+            case "bottomRight":
+                left = tx + tw - pw
+                break
+            case "left":
+            case "leftTop":
+            case "leftBottom":
+                left = tx - pw - gap
+                break
+            case "right":
+            case "rightTop":
+            case "rightBottom":
+                left = tx + tw + gap
+                break
+        }
+
+        return { top, left }
+    }
+
+    #scheduleHide() {
+        this.#clearHideTimeout()
+        this.hideTimeout = setTimeout(() => this.hide(), 120)
+    }
+
+    #clearHideTimeout() {
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout)
+            this.hideTimeout = null
+        }
+    }
+
+    get popoverElement() {
+        if (!this._popover && this.hasPopoverTarget) {
+            this._popover = this.popoverTarget
+        }
+        return this._popover
+    }
+
+    #parseTriggers() {
+        if (!this.triggerValue) return []
+        return this.triggerValue.split(/[\s,]+/).map((t) => t.trim()).filter(Boolean)
+    }
+
+    #isControlled() {
+        return this.hasOpenValue && this.openValue !== undefined
+    }
+
+    #exposeApi(api) {
+        this.element.hakumiPopover = {
+            open: () => api.open(),
+            close: () => api.close(),
+            toggle: () => api.toggle(),
+            isOpen: () => api.isOpen(),
+            getState: () => api.getState(),
+            setPlacement: (placement) => api.setPlacement(placement),
+            setOpen: (value) => api.setOpen(value)
+        }
+    }
+
+    #bindOutsideListeners() {
+        if (this.boundOutsideHandlers || !this.triggerModes.includes("click")) return
+
+        this.boundOutsideHandlers = {}
+        this.#outsideEvents().forEach((eventName) => {
+            const handler = (event) => this.#handleOutsideEvent(event)
+            this.boundOutsideHandlers[eventName] = handler
+            document.addEventListener(eventName, handler, true)
+        })
+    }
+
+    #unbindOutsideListeners() {
+        if (!this.boundOutsideHandlers) return
+
+        Object.entries(this.boundOutsideHandlers).forEach(([eventName, handler]) => {
+            document.removeEventListener(eventName, handler, true)
+        })
+        this.boundOutsideHandlers = null
+    }
+
+    #outsideEvents() {
+        return ["pointerdown", "mousedown", "touchstart", "click"]
+    }
+
+    #handleOutsideEvent(event) {
+        if (!this.isOpen || this.disabledValue || this.#isControlled()) return
+
+        const popover = this.popoverElement
+        const clickedInsideTrigger = this.element.contains(event.target)
+        const clickedInsidePopover = popover?.contains(event.target)
+
+        if (!clickedInsideTrigger && !clickedInsidePopover) {
+            this.hide()
+        }
+    }
+}

data/app/javascript/hakumi_components/controllers/hakumi/progress_controller.js

@@ -0,0 +1,185 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static values = {
+    percent: { type: Number, default: 0 },
+    successPercent: { type: Number, default: 0 },
+    type: { type: String, default: "line" },
+    status: { type: String, default: "normal" },
+    statusExplicit: { type: Boolean, default: false },
+    steps: { type: Number, default: 0 },
+    gapDegree: { type: Number, default: 0 },
+    gapPosition: { type: String, default: "top" },
+    strokeWidth: { type: Number, default: 0 },
+    showInfo: { type: Boolean, default: true },
+    customInfo: { type: Boolean, default: false }
+  }
+
+  setup() {
+    this.#updateUI()
+  }
+
+  registerApi() {
+    this.element.hakumiComponent = {
+      name: "progress",
+      version: 1,
+      singleton: false,
+      api: {
+        getPercent: () => this.percentValue,
+        setPercent: (value) => this.setPercent(value),
+        adjustPercent: (delta) => this.adjustPercent(delta),
+        increase: () => this.increase(),
+        decrease: () => this.decrease(),
+        getStatus: () => this.statusValue,
+        setStatus: (value) => this.setStatus(value)
+      }
+    }
+  }
+
+  setPercent(value) {
+    const next = this.#clampPercent(value)
+    if (next === this.percentValue) return
+
+    this.percentValue = next
+    this.#updateStatus()
+    this.#updateUI()
+  }
+
+  adjustPercent(delta) {
+    const amount = Number(delta)
+    if (Number.isNaN(amount) || amount === 0) return this.percentValue
+
+    this.setPercent(this.percentValue + amount)
+    return this.percentValue
+  }
+
+  increase() {
+    return this.adjustPercent(this.#stepSize())
+  }
+
+  decrease() {
+    return this.adjustPercent(-this.#stepSize())
+  }
+
+  setStatus(value) {
+    if (!value) return
+
+    this.statusValue = value
+    this.#applyStatusClasses()
+  }
+
+  #stepSize() {
+    if (this.stepsValue > 0) {
+      return 100 / this.stepsValue
+    }
+
+    return 10
+  }
+
+  #clampPercent(value) {
+    const number = Number(value)
+    if (Number.isNaN(number)) return 0
+
+    return Math.max(0, Math.min(100, number))
+  }
+
+  #updateStatus() {
+    if (this.statusExplicitValue) {
+      this.#applyStatusClasses()
+      return
+    }
+
+    const computed = this.percentValue >= 100 ? "success" : "normal"
+    this.statusValue = computed
+    this.#applyStatusClasses()
+  }
+
+  #applyStatusClasses() {
+    const base = "hakumi-progress-status-"
+    this.element.classList.forEach((klass) => {
+      if (klass.startsWith(base)) this.element.classList.remove(klass)
+    })
+    this.element.classList.add(`${base}${this.statusValue}`)
+  }
+
+  #updateUI() {
+    this.element.setAttribute("aria-valuenow", String(this.percentValue))
+
+    if (this.typeValue === "line") {
+      this.#updateLine()
+    } else {
+      this.#updateCircle()
+    }
+
+    this.#updateInfo()
+  }
+
+  #updateLine() {
+    if (this.stepsValue > 0) {
+      this.#updateLineSteps()
+      return
+    }
+
+    const bar = this.element.querySelector(".hakumi-progress-bg")
+    if (bar) bar.style.width = `${this.percentValue}%`
+
+    const success = this.element.querySelector(".hakumi-progress-success-bg")
+    if (success) success.style.width = `${this.successPercentValue}%`
+  }
+
+  #updateLineSteps() {
+    const items = this.element.querySelectorAll(".hakumi-progress-steps-item")
+    const total = this.stepsValue
+    const progressUnits = (this.percentValue / 100) * total
+
+    items.forEach((item, index) => {
+      const active = progressUnits > index
+      const current = index === Math.floor(progressUnits) && progressUnits < total
+      item.classList.toggle("hakumi-progress-steps-item-active", active)
+      item.classList.toggle("hakumi-progress-steps-item-current", current)
+    })
+  }
+
+  #updateCircle() {
+    if (this.stepsValue > 0) {
+      this.#updateCircleSteps()
+      return
+    }
+
+    const path = this.element.querySelector(".hakumi-progress-circle-path")
+    if (!path) return
+
+    const strokeWidth = this.strokeWidthValue || 6
+    const radius = 50 - strokeWidth / 2
+    const total = 2 * Math.PI * radius
+    const gapDegree = this.gapDegreeValue || (this.typeValue === "dashboard" ? 75 : 0)
+    const gapLength = total * (gapDegree / 360)
+    const effective = total - gapLength
+    const pathLength = effective * (this.percentValue / 100)
+
+    path.setAttribute("stroke-dasharray", `${pathLength.toFixed(2)} ${total.toFixed(2)}`)
+    path.setAttribute("stroke-dashoffset", (gapLength / 2).toFixed(2))
+  }
+
+  #updateCircleSteps() {
+    const steps = this.element.querySelectorAll(".hakumi-progress-circle-step")
+    const total = this.stepsValue
+    const progressUnits = (this.percentValue / 100) * total
+
+    steps.forEach((step) => {
+      const index = Number(step.dataset.stepIndex || 0)
+      const active = progressUnits > index
+      const current = index === Math.floor(progressUnits) && progressUnits < total
+
+      step.classList.toggle("hakumi-progress-circle-step-active", active)
+      step.classList.toggle("hakumi-progress-circle-step-current", current)
+    })
+  }
+
+  #updateInfo() {
+    if (!this.showInfoValue || this.customInfoValue) return
+
+    const info = this.element.querySelector(".hakumi-progress-text")
+    if (info) info.textContent = `${this.percentValue}%`
+  }
+}