hakumi_components 0.1.3.pre

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

@@ -0,0 +1,184 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+    static targets = ["panel"]
+    static values = {
+        layout: String,
+        resizable: Boolean
+    }
+
+    setup() {
+        if (!this.resizableValue) return
+
+        this.panels = this.panelTargets
+        this.isDragging = false
+        this.currentPanel = null
+        this.startPos = 0
+        this.startSize = 0
+
+        this.boundResize = this.resize.bind(this)
+        this.boundStopResize = this.stopResize.bind(this)
+
+        this.initializeResizeBars()
+    }
+
+    teardown() {
+        this.removeResizeBars()
+        document.removeEventListener('mousemove', this.boundResize)
+        document.removeEventListener('mouseup', this.boundStopResize)
+    }
+
+    registerApi() {
+        this.element.hakumiComponent = {
+            name: "splitter",
+            version: 1,
+            singleton: false,
+            api: {
+                getLayout: () => this.layoutValue,
+                getPanels: () => this.panelTargets
+            }
+        }
+    }
+
+    initializeResizeBars() {
+        this.panels.forEach((panel, index) => {
+            if (index < this.panels.length - 1) {
+                const bar = this.createResizeBar(index)
+                panel.insertAdjacentElement('afterend', bar)
+            }
+        })
+    }
+
+    createResizeBar(index) {
+        const bar = document.createElement('div')
+        bar.className = `hakumi-splitter-bar hakumi-splitter-bar-${this.layoutValue}`
+        bar.dataset.panelIndex = index
+
+        bar.addEventListener('mousedown', this.startResize.bind(this))
+
+        return bar
+    }
+
+    removeResizeBars() {
+        this.element.querySelectorAll('.hakumi-splitter-bar').forEach(bar => {
+            bar.remove()
+        })
+    }
+
+    startResize(event) {
+        event.preventDefault()
+
+        const panelIndex = parseInt(event.currentTarget.dataset.panelIndex)
+        this.currentPanel = this.panels[panelIndex]
+        this.nextPanel = this.panels[panelIndex + 1]
+
+        if (this.layoutValue === 'horizontal') {
+            this.startPos = event.clientX
+            this.startSize = this.currentPanel.offsetWidth
+            this.nextStartSize = this.nextPanel.offsetWidth
+        } else {
+            this.startPos = event.clientY
+            this.startSize = this.currentPanel.offsetHeight
+            this.nextStartSize = this.nextPanel.offsetHeight
+        }
+
+        this.isDragging = true
+        event.currentTarget.classList.add('hakumi-splitter-bar-dragging')
+
+        document.addEventListener('mousemove', this.boundResize)
+        document.addEventListener('mouseup', this.boundStopResize)
+
+        document.body.style.cursor = this.layoutValue === 'horizontal' ? 'col-resize' : 'row-resize'
+        document.body.style.userSelect = 'none'
+    }
+
+    resize(event) {
+        if (!this.isDragging) return
+
+        const delta = this.layoutValue === 'horizontal'
+            ? event.clientX - this.startPos
+            : event.clientY - this.startPos
+
+        let newSize = this.startSize + delta
+        let nextNewSize = this.nextStartSize - delta
+
+
+        const containerSize = this.layoutValue === 'horizontal'
+            ? this.element.offsetWidth
+            : this.element.offsetHeight
+
+
+        const resizeBarCount = this.panels.length - 1
+        const resizeBarWidth = 8
+        const totalResizeBarSize = resizeBarCount * resizeBarWidth
+
+
+        let otherPanelsSize = 0
+        this.panels.forEach((panel, index) => {
+            const currentIndex = Array.from(this.panels).indexOf(this.currentPanel)
+            const nextIndex = Array.from(this.panels).indexOf(this.nextPanel)
+
+            if (index !== currentIndex && index !== nextIndex) {
+                const size = this.layoutValue === 'horizontal'
+                    ? panel.offsetWidth
+                    : panel.offsetHeight
+                otherPanelsSize += size
+            }
+        })
+
+
+        const availableSpace = containerSize - totalResizeBarSize - otherPanelsSize
+
+
+        const min = this.currentPanel.getAttribute('data-hakumi--splitter-min-value')
+        const max = this.currentPanel.getAttribute('data-hakumi--splitter-max-value')
+        const nextMin = this.nextPanel.getAttribute('data-hakumi--splitter-min-value')
+        const nextMax = this.nextPanel.getAttribute('data-hakumi--splitter-max-value')
+
+
+        if (min && newSize < parseInt(min)) newSize = parseInt(min)
+        if (max && newSize > parseInt(max)) newSize = parseInt(max)
+        if (newSize < 0) newSize = 0
+        if (newSize > availableSpace) newSize = availableSpace
+
+
+        nextNewSize = availableSpace - newSize
+
+
+        if (nextMin && nextNewSize < parseInt(nextMin)) {
+            nextNewSize = parseInt(nextMin)
+            newSize = availableSpace - nextNewSize
+        }
+        if (nextMax && nextNewSize > parseInt(nextMax)) {
+            nextNewSize = parseInt(nextMax)
+            newSize = availableSpace - nextNewSize
+        }
+        if (nextNewSize < 0) nextNewSize = 0
+
+        this.currentPanel.style.flex = `0 0 ${newSize}px`
+        this.nextPanel.style.flex = `0 0 ${nextNewSize}px`
+
+        if (this.layoutValue === 'horizontal') {
+            this.currentPanel.style.width = `${newSize}px`
+            this.nextPanel.style.width = `${nextNewSize}px`
+        } else {
+            this.currentPanel.style.height = `${newSize}px`
+            this.nextPanel.style.height = `${nextNewSize}px`
+        }
+    }
+
+    stopResize(event) {
+        if (!this.isDragging) return
+
+        this.isDragging = false
+        this.element.querySelectorAll('.hakumi-splitter-bar-dragging').forEach(bar => {
+            bar.classList.remove('hakumi-splitter-bar-dragging')
+        })
+
+        document.removeEventListener('mousemove', this.boundResize)
+        document.removeEventListener('mouseup', this.boundStopResize)
+
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+    }
+}

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

@@ -0,0 +1,249 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static targets = ["value"]
+  static values = {
+    value: Number,
+    animated: Boolean,
+    duration: Number,
+    precision: Number,
+    countdown: Boolean,
+    targetTimestamp: Number,
+    format: String
+  }
+
+  setup() {
+    this._initialized = false
+    this._currentValue = this.hasValueValue ? this.valueValue : null
+    this._initialValue = this._currentValue
+    this._running = false
+    this._remainingMs = null
+    this._initialRemainingMs = null
+
+    if (this.countdownValue) {
+      this._targetTimestamp = this.hasTargetTimestampValue ? this.targetTimestampValue : null
+      if (this._targetTimestamp) {
+        this._initialRemainingMs = Math.max(0, this._targetTimestamp - Date.now())
+        this._remainingMs = this._initialRemainingMs
+      }
+      this.start()
+    } else if (this._currentValue !== null) {
+      if (this.animatedValue) {
+        this.#animateValue(0, this._currentValue)
+      } else {
+        this.#renderNumber(this._currentValue)
+      }
+    }
+
+    this._initialized = true
+  }
+
+  registerApi() {
+    const api = {
+      getValue: () => this.getValue(),
+      setValue: (value, options = {}) => this.setValue(value, options),
+      start: () => this.start(),
+      pause: () => this.pause(),
+      reset: () => this.reset(),
+      isRunning: () => this.isRunning()
+    }
+
+    this.element.hakumiComponent = {
+      name: "statistic",
+      version: 1,
+      singleton: false,
+      api
+    }
+
+    this.#exposeApi(api)
+  }
+
+  disconnect() {
+    this.pause()
+    delete this.element.hakumiStatistic
+    super.disconnect()
+  }
+
+  valueValueChanged(newValue, oldValue) {
+    if (!this._initialized) return
+    if (this.countdownValue) return
+
+    const from = Number.isFinite(oldValue) ? oldValue : 0
+    const to = Number.isFinite(newValue) ? newValue : null
+    this._currentValue = to
+
+    if (to === null) return
+
+    if (this.animatedValue) {
+      this.#animateValue(from, to)
+    } else {
+      this.#renderNumber(to)
+    }
+  }
+
+  targetTimestampValueChanged(newValue) {
+    if (!this.countdownValue) return
+    this._targetTimestamp = newValue
+    this._initialRemainingMs = Math.max(0, this._targetTimestamp - Date.now())
+    this._remainingMs = this._initialRemainingMs
+    this.reset()
+  }
+
+  getValue() {
+    if (this.countdownValue) {
+      return this._remainingMs
+    }
+
+    return this._currentValue
+  }
+
+  setValue(value, options = {}) {
+    if (this.countdownValue) {
+      const timestamp = this.#normalizeTimestamp(value)
+      if (timestamp) {
+        this.targetTimestampValue = timestamp
+      }
+      return
+    }
+
+    const numeric = this.#normalizeNumber(value)
+    if (numeric === null) return
+
+    this.valueValue = numeric
+
+    if (options.animate === false && this.hasValueTarget) {
+      this.#renderNumber(numeric)
+    }
+  }
+
+  start() {
+    if (!this.countdownValue || this._running) return
+    if (!this._targetTimestamp && this._remainingMs === null) return
+
+    if (!this._targetTimestamp && this._remainingMs !== null) {
+      this._targetTimestamp = Date.now() + this._remainingMs
+    }
+
+    this._running = true
+    this.#tick()
+    this._interval = setInterval(() => this.#tick(), 1000)
+  }
+
+  pause() {
+    if (!this._running) return
+
+    this._running = false
+    if (this._interval) {
+      clearInterval(this._interval)
+      this._interval = null
+    }
+
+    if (this._targetTimestamp) {
+      this._remainingMs = Math.max(0, this._targetTimestamp - Date.now())
+    }
+  }
+
+  reset() {
+    this.pause()
+    if (this._initialRemainingMs !== null) {
+      this._remainingMs = this._initialRemainingMs
+      this._targetTimestamp = Date.now() + this._initialRemainingMs
+      this.#renderCountdown(this._remainingMs)
+    }
+    this.start()
+  }
+
+  isRunning() {
+    return this._running
+  }
+
+  #tick() {
+    if (!this._targetTimestamp) return
+
+    const remaining = Math.max(0, this._targetTimestamp - Date.now())
+    this._remainingMs = remaining
+    this.#renderCountdown(remaining)
+
+    if (remaining <= 0) {
+      this.pause()
+    }
+  }
+
+  #renderCountdown(remaining) {
+    if (!this.hasValueTarget) return
+
+    const format = this.hasFormatValue ? this.formatValue : "HH:mm:ss"
+    const totalSeconds = Math.max(0, Math.floor(remaining / 1000))
+    const days = Math.floor(totalSeconds / 86400)
+    const hoursTotal = Math.floor(totalSeconds / 3600)
+    const hours = hoursTotal % 24
+    const minutes = Math.floor(totalSeconds / 60) % 60
+    const seconds = totalSeconds % 60
+
+    const useDays = format.includes("DD")
+    const hoursValue = useDays ? hours : hoursTotal
+
+    const text = format
+      .replace("DD", String(days).padStart(2, "0"))
+      .replace("HH", String(hoursValue).padStart(2, "0"))
+      .replace("mm", String(minutes).padStart(2, "0"))
+      .replace("ss", String(seconds).padStart(2, "0"))
+
+    this.valueTarget.textContent = text
+  }
+
+  #renderNumber(value) {
+    if (!this.hasValueTarget) return
+    const formatter = this.#numberFormatter()
+    this.valueTarget.textContent = formatter ? formatter.format(value) : String(value)
+  }
+
+  #animateValue(from, to) {
+    if (!this.hasValueTarget) return
+    const duration = this.hasDurationValue ? this.durationValue : 800
+    const start = performance.now()
+    const formatter = this.#numberFormatter()
+
+    const step = (now) => {
+      const progress = Math.min(1, (now - start) / duration)
+      const current = from + (to - from) * progress
+      const formatted = formatter ? formatter.format(current) : String(current)
+      this.valueTarget.textContent = formatted
+
+      if (progress < 1) {
+        requestAnimationFrame(step)
+      }
+    }
+
+    requestAnimationFrame(step)
+  }
+
+  #numberFormatter() {
+    if (this.hasPrecisionValue && Number.isFinite(this.precisionValue)) {
+      return new Intl.NumberFormat(undefined, {
+        minimumFractionDigits: this.precisionValue,
+        maximumFractionDigits: this.precisionValue
+      })
+    }
+
+    return new Intl.NumberFormat()
+  }
+
+  #normalizeNumber(value) {
+    if (value === null || value === undefined) return null
+    const numeric = Number(value)
+    return Number.isNaN(numeric) ? null : numeric
+  }
+
+  #normalizeTimestamp(value) {
+    if (!value) return null
+    if (value instanceof Date) return value.getTime()
+
+    const numeric = Number(value)
+    return Number.isNaN(numeric) ? null : numeric
+  }
+
+  #exposeApi(api) {
+    this.element.hakumiStatistic = api
+  }
+}

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

@@ -0,0 +1,125 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static values = {
+    current: { type: Number, default: 0 },
+    clickable: { type: Boolean, default: false }
+  }
+
+  registerApi() {
+    this.element.hakumiComponent = {
+      name: "steps",
+      version: 1,
+      singleton: false,
+      api: {
+        getCurrent: () => this.currentValue,
+        setCurrent: (index) => {
+          const oldCurrent = this.currentValue
+          this.currentValue = index
+          this.#updateStepStatuses(oldCurrent)
+          this.#dispatchChange(index, oldCurrent)
+        },
+        goTo: (index) => {
+          this.element.hakumiComponent.api.setCurrent(index)
+        },
+        next: () => {
+          const items = this.element.querySelectorAll(".hakumi-steps-item")
+          if (this.currentValue < items.length - 1) {
+            this.element.hakumiComponent.api.setCurrent(this.currentValue + 1)
+          }
+        },
+        prev: () => {
+          if (this.currentValue > 0) {
+            this.element.hakumiComponent.api.setCurrent(this.currentValue - 1)
+          }
+        },
+        isClickable: () => this.clickableValue
+      }
+    }
+  }
+
+  selectStep(event) {
+    if (!this.clickableValue) return
+
+    const stepIndex = parseInt(event.currentTarget.dataset.stepIndex, 10)
+    if (isNaN(stepIndex)) return
+
+    const stepItem = event.currentTarget
+    if (stepItem.classList.contains("hakumi-steps-item-disabled")) return
+
+    const oldCurrent = this.currentValue
+    this.currentValue = stepIndex
+
+    this.#updateStepStatuses(oldCurrent)
+    this.#dispatchChange(stepIndex, oldCurrent)
+  }
+
+  #updateStepStatuses(oldCurrent) {
+    const items = this.element.querySelectorAll(".hakumi-steps-item")
+
+    items.forEach((item, index) => {
+
+      item.classList.remove(
+        "hakumi-steps-item-wait",
+        "hakumi-steps-item-process",
+        "hakumi-steps-item-finish"
+      )
+
+
+      if (item.dataset.status === "error") {
+        item.classList.add("hakumi-steps-item-error")
+        return
+      }
+
+
+      if (index < this.currentValue) {
+        item.classList.add("hakumi-steps-item-finish")
+        this.#updateItemIcon(item, "finish", index)
+      } else if (index === this.currentValue) {
+        item.classList.add("hakumi-steps-item-process")
+        this.#updateItemIcon(item, "process", index)
+      } else {
+        item.classList.add("hakumi-steps-item-wait")
+        this.#updateItemIcon(item, "wait", index)
+      }
+    })
+  }
+
+  #updateItemIcon(item, status, index) {
+
+    if (item.classList.contains("hakumi-steps-item-custom")) return
+
+    const iconSpan = item.querySelector(".hakumi-steps-icon")
+    if (!iconSpan) return
+
+
+    if (iconSpan.classList.contains("hakumi-steps-icon-dot")) return
+
+
+    if (status === "finish") {
+      iconSpan.innerHTML = this.#checkIcon()
+    } else if (status === "error") {
+      iconSpan.innerHTML = this.#closeIcon()
+    } else {
+
+      iconSpan.textContent = index + 1
+    }
+  }
+
+  #checkIcon() {
+    return `<span class="hakumi-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span>`
+  }
+
+  #closeIcon() {
+    return `<span class="hakumi-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span>`
+  }
+
+  #dispatchChange(newIndex, oldIndex) {
+    this.dispatch("change", {
+      detail: {
+        current: newIndex,
+        previous: oldIndex
+      }
+    })
+  }
+}

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

@@ -0,0 +1,147 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+    static targets = ["input"]
+    static values = {
+        checked: Boolean,
+        disabled: Boolean,
+        loading: Boolean
+    }
+
+    setup() {
+        this.#syncState()
+        this.#calculateHandlePosition()
+        this.#setupKeyboardHandler()
+    }
+
+    teardown() {
+        if (this.boundKeyHandler) {
+            this.element.removeEventListener('keydown', this.boundKeyHandler)
+        }
+    }
+
+    registerApi() {
+        this.element.hakumiComponent = {
+            name: "switch",
+            version: 1,
+            singleton: false,
+            api: {
+                setChecked: (checked) => this.setChecked(checked),
+                setDisabled: (disabled) => this.setDisabled(disabled),
+                setLoading: (loading) => this.setLoading(loading),
+                isChecked: () => this.checkedValue,
+                isDisabled: () => this.disabledValue,
+                isLoading: () => this.loadingValue,
+                toggleChecked: () => this.setChecked(!this.checkedValue),
+                toggleDisabled: () => this.setDisabled(!this.disabledValue),
+                toggleLoading: () => this.setLoading(!this.loadingValue),
+                check: () => this.setChecked(true),
+                uncheck: () => this.setChecked(false),
+                enable: () => this.setDisabled(false),
+                disable: () => this.setDisabled(true)
+            }
+        }
+    }
+
+    checkedValueChanged() {
+        this.#updateCheckedState()
+    }
+
+    disabledValueChanged() {
+        this.#updateDisabledState()
+    }
+
+    loadingValueChanged() {
+        this.#updateLoadingState()
+    }
+
+    toggle(event) {
+        if (this.disabledValue || this.loadingValue) {
+            event.preventDefault()
+            if (this.hasInputTarget) {
+                this.inputTarget.checked = this.checkedValue
+            }
+            return
+        }
+
+        this.checkedValue = this.inputTarget.checked
+        this.dispatch("change", { detail: { checked: this.checkedValue } })
+    }
+
+    setChecked(checked) {
+        this.checkedValue = Boolean(checked)
+    }
+
+    setDisabled(disabled) {
+        this.disabledValue = Boolean(disabled)
+    }
+
+    setLoading(loading) {
+        this.loadingValue = Boolean(loading)
+    }
+
+    #syncState() {
+        this.#updateCheckedState()
+        this.#updateDisabledState()
+        this.#updateLoadingState()
+    }
+
+    #updateCheckedState() {
+        if (this.hasInputTarget && this.inputTarget.checked !== this.checkedValue) {
+            this.inputTarget.checked = this.checkedValue
+        }
+
+        this.element.classList.toggle("hakumi-switch-checked", this.checkedValue)
+        this.element.setAttribute("aria-checked", String(this.checkedValue))
+    }
+
+    #updateDisabledState() {
+        const isDisabled = this.disabledValue
+        this.element.classList.toggle("hakumi-switch-disabled", isDisabled)
+        this.element.setAttribute("aria-disabled", String(isDisabled || this.loadingValue))
+
+        if (this.hasInputTarget) {
+            this.inputTarget.disabled = isDisabled || this.loadingValue
+        }
+    }
+
+    #updateLoadingState() {
+        const isLoading = this.loadingValue
+        this.element.classList.toggle("hakumi-switch-loading", isLoading)
+        this.element.setAttribute("aria-busy", String(isLoading))
+
+        if (this.hasInputTarget) {
+            this.inputTarget.disabled = this.disabledValue || isLoading
+        }
+    }
+
+    #calculateHandlePosition() {
+
+        const switchWidth = this.element.offsetWidth
+        const handle = this.element.querySelector('.hakumi-switch-handle')
+
+        if (handle) {
+            const handleWidth = handle.offsetWidth
+            const offset = switchWidth - handleWidth - 4
+            this.element.style.setProperty('--handle-translate', `${offset}px`)
+        }
+    }
+
+    #setupKeyboardHandler() {
+        this.boundKeyHandler = this.#handleKeydown.bind(this)
+        this.element.addEventListener('keydown', this.boundKeyHandler)
+    }
+
+    #handleKeydown(event) {
+
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault()
+
+            if (this.disabledValue || this.loadingValue) {
+                return
+            }
+
+            this.setChecked(!this.checkedValue)
+        }
+    }
+}