hakumi_components 0.1.3.pre

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

@@ -0,0 +1,348 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static targets = [
+    "container",
+    "track",
+    "slide",
+    "dots",
+    "dot",
+    "dotProgress",
+    "prevArrow",
+    "nextArrow"
+  ]
+
+  static values = {
+    autoplay: { type: Boolean, default: false },
+    autoplaySpeed: { type: Number, default: 3000 },
+    infinite: { type: Boolean, default: true },
+    fade: { type: Boolean, default: false },
+    adaptiveHeight: { type: Boolean, default: false },
+    draggable: { type: Boolean, default: false },
+    arrows: { type: Boolean, default: false },
+    dots: { type: Boolean, default: true },
+    dotPlacement: { type: String, default: "bottom" },
+    speed: { type: Number, default: 500 },
+    easing: { type: String, default: "linear" },
+    waitForAnimate: { type: Boolean, default: false },
+    autoplayDotDuration: { type: Boolean, default: false },
+    currentIndex: { type: Number, default: 0 }
+  }
+
+  setup() {
+    this._isAnimating = false
+    this._autoplayTimer = null
+    this._dragging = false
+    this._dragStartX = 0
+    this._dragDeltaX = 0
+
+    this.#setupLayout()
+    this.#updateSlides(true)
+    this.#updateDots()
+    this.#updateArrows()
+    if (this.adaptiveHeightValue) this.#updateHeight()
+    this.#setupDragging()
+    this.#startAutoplay()
+  }
+
+  teardown() {
+    this.#stopAutoplay()
+    this.#teardownDragging()
+  }
+
+  registerApi() {
+    this.element.hakumiComponent = {
+      name: "carousel",
+      version: 1,
+      singleton: false,
+      api: {
+        getCurrent: () => this.currentIndexValue,
+        getSlideCount: () => this.slideCount,
+        next: () => this.next(),
+        prev: () => this.prev(),
+        goTo: (index, dontAnimate = false) => {
+          if (dontAnimate) {
+            const previousSpeed = this.speedValue
+            const previousWait = this.waitForAnimateValue
+
+            this.speedValue = 0
+            this.waitForAnimateValue = false
+            this.#goTo(index)
+            this.speedValue = previousSpeed
+            this.waitForAnimateValue = previousWait
+          } else {
+            this.#goTo(index)
+          }
+        }
+      }
+    }
+  }
+
+
+  next() {
+    this.#goTo(this.currentIndexValue + 1)
+  }
+
+  prev() {
+    this.#goTo(this.currentIndexValue - 1)
+  }
+
+  goToFromDot(event) {
+    const index = parseInt(event.currentTarget.dataset.index, 10)
+    if (Number.isNaN(index)) return
+    this.#goTo(index)
+  }
+
+
+  get slideCount() {
+    return this.hasSlideTarget ? this.slideTargets.length : 0
+  }
+
+
+  #goTo(targetIndex, options = {}) {
+    if (this.slideCount === 0) return
+    if (this.waitForAnimateValue && this._isAnimating) return
+
+    let index = targetIndex
+
+    if (this.infiniteValue) {
+      index = ((index % this.slideCount) + this.slideCount) % this.slideCount
+    } else {
+      index = Math.max(0, Math.min(index, this.slideCount - 1))
+    }
+
+    const previous = this.currentIndexValue
+    if (index === previous) return
+
+    this._isAnimating = true
+    this.#stopAutoplay()
+
+    this.dispatch("beforeChange", {
+      detail: { current: previous, next: index }
+    })
+
+    this.currentIndexValue = index
+    this.#updateSlides()
+    this.#updateDots()
+    this.#updateArrows()
+    if (this.adaptiveHeightValue) this.#updateHeight()
+
+    const duration = Math.max(0, this.speedValue)
+
+    if (duration === 0) {
+      this._isAnimating = false
+      this.dispatch("afterChange", {
+        detail: { current: index, previous }
+      })
+      this.#startAutoplay()
+    } else {
+      window.setTimeout(() => {
+        this._isAnimating = false
+        this.dispatch("afterChange", {
+          detail: { current: index, previous }
+        })
+        this.#startAutoplay()
+      }, duration)
+    }
+  }
+
+  #setupLayout() {
+    if (!this.hasTrackTarget) return
+
+    if (this.fadeValue) {
+      this.trackTarget.style.transition = ""
+    } else {
+      this.trackTarget.style.transitionProperty = "transform"
+      this.trackTarget.style.transitionTimingFunction = this.easingValue
+      this.trackTarget.style.transitionDuration = `${this.speedValue}ms`
+    }
+  }
+
+  #updateSlides(initial = false) {
+    if (!this.hasSlideTarget) return
+
+    const activeIndex = this.currentIndexValue
+
+    if (this.fadeValue) {
+      this.slideTargets.forEach((slide, index) => {
+        const isActive = index === activeIndex
+        slide.classList.toggle("hakumi-carousel-slide-active", isActive)
+        slide.setAttribute("aria-hidden", (!isActive).toString())
+      })
+      return
+    }
+
+    if (!this.hasTrackTarget) return
+
+    const offset = -activeIndex * 100
+
+    if (initial) {
+      const previousDuration = this.trackTarget.style.transitionDuration
+      this.trackTarget.style.transitionDuration = "0ms"
+      this.trackTarget.style.transform = `translateX(${offset}%)`
+      this.trackTarget.getBoundingClientRect()
+      this.trackTarget.style.transitionDuration = previousDuration || `${this.speedValue}ms`
+    } else {
+      this.trackTarget.style.transform = `translateX(${offset}%)`
+    }
+
+    this.slideTargets.forEach((slide, index) => {
+      const isActive = index === activeIndex
+      slide.classList.toggle("hakumi-carousel-slide-active", isActive)
+      slide.setAttribute("aria-hidden", (!isActive).toString())
+    })
+  }
+
+  #updateDots() {
+    if (!this.hasDotTarget) return
+
+    const activeIndex = this.currentIndexValue
+
+    this.dotTargets.forEach((dot, index) => {
+      const isActive = index === activeIndex
+      dot.classList.toggle("hakumi-carousel-dot-active", isActive)
+      const button = dot.querySelector(".hakumi-carousel-dot-button")
+      if (button) {
+        button.setAttribute("aria-current", isActive ? "true" : "false")
+      }
+    })
+  }
+
+  #updateArrows() {
+    if (!this.arrowsValue) return
+
+    if (!this.infiniteValue && this.slideCount > 0) {
+      const atStart = this.currentIndexValue === 0
+      const atEnd = this.currentIndexValue === this.slideCount - 1
+
+      if (this.hasPrevArrowTarget) {
+        this.prevArrowTarget.classList.toggle("hakumi-carousel-arrow-disabled", atStart)
+        this.prevArrowTarget.disabled = atStart
+      }
+
+      if (this.hasNextArrowTarget) {
+        this.nextArrowTarget.classList.toggle("hakumi-carousel-arrow-disabled", atEnd)
+        this.nextArrowTarget.disabled = atEnd
+      }
+    }
+  }
+
+  #updateHeight() {
+    if (!this.hasContainerTarget || !this.hasSlideTarget) return
+
+    const active = this.slideTargets[this.currentIndexValue]
+    if (!active) return
+
+    const rect = active.getBoundingClientRect()
+    this.containerTarget.style.height = `${rect.height}px`
+  }
+
+  #startAutoplay() {
+    if (!this.autoplayValue || this.slideCount <= 1) return
+
+    this.#restartDotProgress()
+
+    this._autoplayTimer = window.setInterval(() => {
+      this.next()
+    }, this.autoplaySpeedValue)
+  }
+
+  #stopAutoplay() {
+    if (this._autoplayTimer) {
+      window.clearInterval(this._autoplayTimer)
+      this._autoplayTimer = null
+    }
+
+    if (this.autoplayDotDurationValue && this.hasDotProgressTarget) {
+      this.dotProgressTargets.forEach((bar) => {
+        bar.style.transition = ""
+        bar.style.width = ""
+      })
+    }
+  }
+
+  #restartDotProgress() {
+    if (!this.autoplayDotDurationValue || !this.hasDotProgressTarget) return
+
+    const activeIndex = this.currentIndexValue
+
+    this.dotProgressTargets.forEach((bar, index) => {
+      bar.style.transition = "none"
+      bar.style.width = "0%"
+
+      if (index === activeIndex) {
+        requestAnimationFrame(() => {
+          bar.style.transition = `width ${this.autoplaySpeedValue}ms linear`
+          bar.style.width = "100%"
+        })
+      }
+    })
+  }
+
+  #setupDragging() {
+    if (!this.draggableValue || !this.hasContainerTarget || this.fadeValue) return
+
+    this._onPointerDown = this.#onPointerDown.bind(this)
+    this._onPointerMove = this.#onPointerMove.bind(this)
+    this._onPointerUp = this.#onPointerUp.bind(this)
+
+    this.containerTarget.addEventListener("pointerdown", this._onPointerDown)
+  }
+
+  #teardownDragging() {
+    if (!this._onPointerDown || !this.hasContainerTarget) return
+
+    this.containerTarget.removeEventListener("pointerdown", this._onPointerDown)
+    document.removeEventListener("pointermove", this._onPointerMove)
+    document.removeEventListener("pointerup", this._onPointerUp)
+  }
+
+  #onPointerDown(event) {
+    if (event.button !== 0) return
+
+    this._dragging = true
+    this._dragStartX = event.clientX
+    this._dragDeltaX = 0
+
+    this.#stopAutoplay()
+
+    document.addEventListener("pointermove", this._onPointerMove)
+    document.addEventListener("pointerup", this._onPointerUp)
+  }
+
+  #onPointerMove(event) {
+    if (!this._dragging || !this.hasTrackTarget) return
+
+    this._dragDeltaX = event.clientX - this._dragStartX
+    const containerWidth = this.containerTarget.clientWidth || 1
+    const percent = (this._dragDeltaX / containerWidth) * 100
+    const baseOffset = -this.currentIndexValue * 100
+
+    this.trackTarget.style.transitionDuration = "0ms"
+    this.trackTarget.style.transform = `translateX(${baseOffset + percent}%)`
+  }
+
+  #onPointerUp() {
+    if (!this._dragging) return
+
+    this._dragging = false
+
+    document.removeEventListener("pointermove", this._onPointerMove)
+    document.removeEventListener("pointerup", this._onPointerUp)
+
+    const containerWidth = this.containerTarget.clientWidth || 1
+    const threshold = containerWidth * 0.15
+    const deltaX = this._dragDeltaX
+
+    this.trackTarget.style.transitionDuration = `${this.speedValue}ms`
+
+    if (deltaX > threshold) {
+      this.prev()
+    } else if (deltaX < -threshold) {
+      this.next()
+    } else {
+      this.#updateSlides()
+      this.#startAutoplay()
+    }
+  }
+}

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

@@ -0,0 +1,287 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+    static targets = ["input", "label", "placeholder", "menus", "hiddenInput", "clearBtn", "menuItem"]
+    static values = {
+        options: Array,
+        value: Array,
+        trigger: { type: String, default: "click" },
+        changeOnSelect: Boolean,
+        disabled: Boolean
+    }
+
+    setup() {
+        this.clickOutsideHandler = this.clickOutside.bind(this)
+        document.addEventListener("click", this.clickOutsideHandler)
+        this.activePath = []
+        this.initialized = false
+
+
+        if (this.valueValue.length > 0) {
+            this.activePath = [...this.valueValue]
+            this.updateLabelFromValue()
+        }
+    }
+
+    teardown() {
+        document.removeEventListener("click", this.clickOutsideHandler)
+    }
+
+    registerApi() {
+        this.element.hakumiComponent = {
+            name: "cascader",
+            version: 1,
+            singleton: false,
+            api: {
+                getValue: () => [...this.valueValue],
+                setValue: (path = []) => this.setValuePath(path),
+                getLabel: () => this.labelsForPath(this.valueValue).join(' / '),
+                open: () => this.open(),
+                close: () => this.close(),
+                clear: () => this.clear(),
+                isOpen: () => this.element.classList.contains("hakumi-cascader-open")
+            }
+        }
+    }
+
+    toggle(event) {
+        if (this.disabledValue) return
+        event.stopPropagation()
+        event.preventDefault()
+
+        if (this.element.classList.contains("hakumi-cascader-open")) {
+            this.close()
+        } else {
+            this.open()
+        }
+    }
+
+    open() {
+        this.element.classList.add("hakumi-cascader-open", "hakumi-cascader-focused")
+        this.menusTarget.classList.remove("hakumi-cascader-menus-hidden")
+
+
+        this.renderMenus()
+    }
+
+    close() {
+        this.element.classList.remove("hakumi-cascader-open", "hakumi-cascader-focused")
+        this.menusTarget.classList.add("hakumi-cascader-menus-hidden")
+    }
+
+    clickOutside(event) {
+        if (!this.element.contains(event.target) && this.element.classList.contains("hakumi-cascader-open")) {
+            this.close()
+        }
+    }
+
+    preventClose(event) {
+        event.stopPropagation()
+    }
+
+
+
+    renderMenus() {
+        let currentOptions = this.optionsValue
+        let level = 0
+
+        while (currentOptions && currentOptions.length > 0) {
+            this.syncLevel(currentOptions, level)
+
+            const activeValue = this.activePath[level]
+            if (activeValue) {
+                const activeOption = currentOptions.find(o => String(o.value) === String(activeValue))
+                if (activeOption && activeOption.children) {
+                    currentOptions = activeOption.children
+                    level++
+                } else {
+                    currentOptions = null
+                }
+            } else {
+                currentOptions = null
+            }
+        }
+
+
+        while (this.menusTarget.children.length > level + 1) {
+            this.menusTarget.removeChild(this.menusTarget.lastChild)
+        }
+    }
+
+    syncLevel(options, level) {
+        let menu = this.menusTarget.children[level]
+        const parentKey = level === 0 ? 'root' : String(this.activePath[level - 1])
+
+
+        if (menu && menu.dataset.parent !== parentKey) {
+            while (this.menusTarget.children.length > level) {
+                this.menusTarget.removeChild(this.menusTarget.lastChild)
+            }
+            menu = null
+        }
+
+        if (!menu) {
+            menu = this.createMenu(options, level, parentKey)
+            this.menusTarget.appendChild(menu)
+        } else {
+            this.updateActiveState(menu, level)
+        }
+    }
+
+    createMenu(options, level, parentKey) {
+        const menu = document.createElement("ul")
+        menu.className = "hakumi-cascader-menu"
+        menu.setAttribute("role", "menu")
+        menu.dataset.parent = parentKey
+
+        options.forEach(option => {
+            const isDisabled = option.disabled
+            const item = document.createElement("li")
+            item.className = `hakumi-cascader-menu-item`
+            if (isDisabled) item.classList.add("hakumi-cascader-menu-item-disabled")
+
+            item.dataset.value = option.value
+            item.dataset.label = option.label
+            item.dataset.level = level
+            item.dataset.hasChildren = !!(option.children && option.children.length > 0)
+
+            if (!isDisabled) {
+                if (this.triggerValue === "hover") {
+                    item.addEventListener("mouseenter", () => this.handleOptionActivate(option, level))
+                    item.addEventListener("click", () => this.handleOptionClick(option, level))
+                } else {
+                    item.addEventListener("click", () => this.handleOptionClick(option, level))
+                }
+            }
+
+            item.innerHTML = `
+        <div class="hakumi-cascader-menu-item-content">${option.label}</div>
+        ${option.children && option.children.length > 0
+                    ? `<span class="hakumi-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3 6.1 7.7 6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>`
+                    : ''}
+      `
+            menu.appendChild(item)
+        })
+
+
+        this.updateActiveState(menu, level)
+        return menu
+    }
+
+    updateActiveState(menu, level) {
+        const activeVal = String(this.activePath[level])
+        Array.from(menu.children).forEach(item => {
+            if (item.dataset.value === activeVal) {
+                item.classList.add("hakumi-cascader-menu-item-active")
+            } else {
+                item.classList.remove("hakumi-cascader-menu-item-active")
+            }
+        })
+    }
+
+
+
+    isActive(value, level) {
+        return String(this.activePath[level]) === String(value)
+    }
+
+    handleOptionClick(option, level) {
+
+
+
+
+        this.handleOptionActivate(option, level)
+
+        const isLeaf = !(option.children && option.children.length > 0)
+
+        if (isLeaf || this.changeOnSelectValue) {
+            this.select(this.activePath)
+            if (isLeaf) {
+                this.close()
+            }
+        }
+    }
+
+    handleOptionActivate(option, level) {
+
+        this.activePath = this.activePath.slice(0, level)
+        this.activePath.push(option.value)
+
+
+        this.renderMenus()
+    }
+
+    select(path) {
+        this.valueValue = [...path]
+        this.updateLabelFromValue()
+        this.hiddenInputTarget.value = this.valueValue.join(',')
+
+
+        this.dispatch("change", { detail: { value: this.valueValue } })
+
+
+        if (this.hasClearBtnTarget) this.clearBtnTarget.style.opacity = '1'
+    }
+
+    setValuePath(path = []) {
+        if (!Array.isArray(path)) return
+        this.valueValue = [...path]
+        this.activePath = [...path]
+        this.renderMenus()
+        this.hiddenInputTarget.value = this.valueValue.join(',')
+        this.updateLabelFromValue()
+    }
+
+
+
+    updateLabelFromValue() {
+        if (this.valueValue.length === 0) {
+            this.placeholderTarget.style.display = 'block'
+            if (this.hasLabelTarget) this.labelTarget.style.display = 'none'
+            if (this.hasClearBtnTarget) this.clearBtnTarget.style.opacity = '0'
+            this.element.classList.remove("hakumi-cascader-has-value")
+            return
+        }
+
+
+        const labels = this.labelsForPath(this.valueValue)
+        const displayLabel = labels.join(' / ')
+
+        if (this.hasLabelTarget) {
+            this.labelTarget.textContent = displayLabel
+            this.labelTarget.title = displayLabel
+            this.labelTarget.style.display = 'block'
+        }
+
+        this.placeholderTarget.style.display = 'none'
+        this.element.classList.add("hakumi-cascader-has-value")
+        if (this.hasClearBtnTarget) this.clearBtnTarget.style.opacity = '1'
+    }
+
+    clear(event) {
+        if (event) event.stopPropagation()
+        this.valueValue = []
+        this.activePath = []
+        this.hiddenInputTarget.value = ""
+        this.updateLabelFromValue()
+        this.close()
+        this.dispatch("change", { detail: { value: [] } })
+    }
+
+    labelsForPath(path = []) {
+        const labels = []
+        let currentOptions = this.optionsValue
+
+        for (const val of path) {
+            const opt = currentOptions.find(o => String(o.value) === String(val))
+            if (opt) {
+                labels.push(opt.label)
+                currentOptions = opt.children || []
+            } else {
+                break
+            }
+        }
+
+        return labels
+    }
+}

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

@@ -0,0 +1,84 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+    static targets = ["input", "checkbox"]
+    static values = {
+        checked: Boolean,
+        indeterminate: Boolean
+    }
+
+    setup() {
+        this.#updateIndeterminate()
+        this.#updateCheckedState()
+    }
+
+    registerApi() {
+        this.element.hakumiComponent = {
+            name: "checkbox",
+            version: 1,
+            singleton: false,
+            api: {
+                setChecked: (checked) => this.setChecked(checked),
+                setIndeterminate: (val) => this.setIndeterminate(val),
+                isChecked: () => this.checkedValue,
+                isIndeterminate: () => this.indeterminateValue
+            }
+        }
+    }
+
+    checkedValueChanged() {
+        this.#updateCheckedState()
+    }
+
+    indeterminateValueChanged() {
+        this.#updateIndeterminate()
+    }
+
+    toggle(event) {
+
+        this.checkedValue = this.inputTarget.checked
+        this.indeterminateValue = false
+
+
+        this.dispatch("change", { detail: { checked: this.checkedValue, value: this.inputTarget.value } })
+    }
+
+
+    setChecked(checked) {
+        this.inputTarget.checked = checked
+        this.checkedValue = checked
+        this.indeterminateValue = false
+    }
+
+    setIndeterminate(indeterminate) {
+        this.indeterminateValue = indeterminate
+    }
+
+    #updateIndeterminate() {
+        if (this.hasInputTarget) {
+            this.inputTarget.indeterminate = this.indeterminateValue
+        }
+        if (this.hasCheckboxTarget) {
+            if (this.indeterminateValue) {
+                this.checkboxTarget.classList.add("hakumi-checkbox-indeterminate")
+            } else {
+                this.checkboxTarget.classList.remove("hakumi-checkbox-indeterminate")
+            }
+        }
+    }
+
+    #updateCheckedState() {
+
+        if (this.hasInputTarget && this.inputTarget.checked !== this.checkedValue) {
+            this.inputTarget.checked = this.checkedValue
+        }
+
+        if (this.hasCheckboxTarget) {
+            if (this.checkedValue) {
+                this.checkboxTarget.classList.add("hakumi-checkbox-checked")
+            } else {
+                this.checkboxTarget.classList.remove("hakumi-checkbox-checked")
+            }
+        }
+    }
+}