hakumi_components 0.1.3.pre

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

@@ -0,0 +1,132 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+    static values = {
+        value: Array
+    }
+
+    setup() {
+        this._subscribers = new Set()
+        this.boundHandleChildChange = this.handleChildChange.bind(this)
+        this.element.addEventListener("hakumi--checkbox:change", this.boundHandleChildChange)
+        this.#updateChildren()
+    }
+
+    valueValueChanged() {
+        this.#updateChildren()
+    }
+
+    teardown() {
+        this.element.removeEventListener("hakumi--checkbox:change", this.boundHandleChildChange)
+    }
+
+    registerApi() {
+        this.element.hakumiComponent = {
+            name: "checkbox_group",
+            version: 1,
+            singleton: false,
+            api: {
+                getValue: () => this.getValue(),
+                getAllValues: () => this.getAllValues(),
+                setValue: (val) => this.setValue(val),
+                selectAll: () => this.selectAll(),
+                clearAll: () => this.clearAll(),
+                onChange: (callback) => this.#subscribe(callback),
+                offChange: (callback) => this.#unsubscribe(callback)
+            }
+        }
+    }
+
+    handleChildChange(event) {
+        event.stopPropagation()
+        const { value, checked } = event.detail
+
+        const newValue = [...this.valueValue]
+        if (checked) {
+            if (!newValue.includes(value)) {
+                newValue.push(value)
+            }
+        } else {
+            const index = newValue.indexOf(value)
+            if (index > -1) {
+                newValue.splice(index, 1)
+            }
+        }
+
+        this.valueValue = newValue
+        this.dispatch("change", { detail: { value: this.valueValue } })
+    }
+
+    setValue(newValue) {
+        this.valueValue = newValue
+        this.#updateChildren()
+        this.dispatch("change", { detail: { value: this.valueValue } })
+        this.#notifySubscribers()
+    }
+
+    getValue() {
+        return this.valueValue
+    }
+
+    getAllValues() {
+        return this.#allInputValues()
+    }
+
+    selectAll() {
+        this.setValue(this.#allInputValues())
+    }
+
+    clearAll() {
+        this.setValue([])
+    }
+
+    #updateChildren() {
+
+        const checkboxes = this.element.querySelectorAll('[data-controller~="hakumi--checkbox"]')
+        checkboxes.forEach(wrapper => {
+            const input = wrapper.querySelector('input[type="checkbox"]')
+            if (!input) return
+
+            const val = input.value
+            const shouldBeChecked = this.valueValue.includes(val)
+
+
+            if (wrapper.hakumiComponent?.api) {
+                wrapper.hakumiComponent.api.setChecked(shouldBeChecked)
+            } else {
+                input.checked = shouldBeChecked
+            }
+        })
+    }
+
+    #allInputValues() {
+        return Array.from(new Set(
+            Array.from(this.element.querySelectorAll('input[type="checkbox"]')).map((input) => input.value)
+        ))
+    }
+
+    #subscribe(callback) {
+        if (typeof callback === "function") {
+            this._subscribers.add(callback)
+            return () => this.#unsubscribe(callback)
+        }
+        return () => { }
+    }
+
+    #unsubscribe(callback) {
+        if (callback) {
+            this._subscribers.delete(callback)
+        }
+    }
+
+    #notifySubscribers() {
+        if (!this._subscribers) return
+        this._subscribers.forEach(callback => {
+            try {
+                callback(this.getValue())
+            } catch (error) {
+                console.error("antCheckboxGroup onChange callback failed", error)
+            }
+        })
+    }
+}

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

@@ -0,0 +1,181 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static targets = ["item", "content"]
+
+  static values = {
+    accordion: { type: Boolean, default: false },
+    activeKeys: Array,
+    collapsible: String,
+    bordered: { type: Boolean, default: true },
+    ghost: { type: Boolean, default: false }
+  }
+
+  setup() {
+
+    if (!Array.isArray(this.activeKeysValue)) this.activeKeysValue = []
+    this.#applyState()
+  }
+
+  registerApi() {
+    this.element.hakumiComponent = {
+      name: "collapse",
+      version: 1,
+      singleton: false,
+      api: {
+        getActiveKeys: () => [...this.activeKeysValue],
+        setActiveKeys: (keys) => {
+          const before = [...this.activeKeysValue]
+          const next = Array.isArray(keys) ? keys.map(String) : []
+          this.activeKeysValue = next
+          this.#applyState()
+          this.dispatch('afterChange', { detail: { activeKeys: next, previousActiveKeys: before } })
+        },
+        open: (key) => {
+          const k = String(key)
+          if (this.activeKeysValue.includes(k)) return
+          this.activeKeysValue = this.accordionValue ? [k] : [...this.activeKeysValue.map(String), k]
+          this.#applyState()
+        },
+        close: (key) => {
+          const k = String(key)
+          this.activeKeysValue = this.activeKeysValue.filter(v => String(v) !== k)
+          this.#applyState()
+        },
+        toggle: (key) => this.#toggleKey(key),
+        isAccordion: () => this.accordionValue,
+        isOpen: (key) => {
+          if (key === undefined || key === null) {
+            return this.activeKeysValue.length > 0
+          }
+          return this.activeKeysValue.map(String).includes(String(key))
+        },
+        getState: () => ({
+          activeKeys: [...this.activeKeysValue],
+          accordion: this.accordionValue
+        })
+      }
+    }
+  }
+
+
+  toggle(event) {
+    if (event) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    const key = event.currentTarget?.dataset?.key || event.target?.closest('.hakumi-collapse-header')?.dataset?.key
+    if (!key) return
+    this.#toggleKey(key)
+  }
+
+
+  #applyState() {
+    const active = new Set(this.activeKeysValue.map(String))
+
+    this.#forEachItem((itemEl, key) => {
+      const isActive = active.has(key)
+      itemEl.classList.toggle('hakumi-collapse-item-active', isActive)
+
+      const content = this.#findContentByKey(key)
+      if (content) content.classList.toggle('hakumi-collapse-content-active', isActive)
+
+      const arrow = itemEl.querySelector('.hakumi-collapse-header .hakumi-collapse-arrow')
+      if (arrow) arrow.classList.toggle('hakumi-collapse-arrow-rotated', isActive)
+    })
+  }
+
+  #toggleKey(key) {
+    const items = this.#allItems()
+    const target = items.find(el => el.dataset.key === String(key))
+    if (!target) return
+    if (target.dataset.disabled === 'true') return
+
+    const before = [...this.activeKeysValue]
+
+    let next
+    const isActive = this.activeKeysValue.map(String).includes(String(key))
+    if (this.accordionValue) {
+      next = isActive ? [] : [String(key)]
+    } else {
+      if (isActive) {
+        next = this.activeKeysValue.filter(k => String(k) !== String(key))
+      } else {
+        next = [...this.activeKeysValue.map(String), String(key)]
+      }
+    }
+
+    this.dispatch('beforeChange', { detail: { currentActiveKeys: before, nextActiveKeys: next, toggledKey: String(key) } })
+
+
+    const isOpening = !isActive
+    if (isOpening) {
+      this.#expand(key)
+    } else {
+      this.#collapse(key)
+    }
+
+    this.activeKeysValue = next
+
+    this.#applyState()
+
+    this.dispatch('afterChange', { detail: { activeKeys: next, previousActiveKeys: before, toggledKey: String(key) } })
+  }
+
+  #allItems() {
+    return this.hasItemTarget ? this.itemTargets : Array.from(this.element.querySelectorAll('[data-hakumi--collapse-target="item"]'))
+  }
+
+  #forEachItem(callback) {
+    this.#allItems().forEach(el => callback(el, el.dataset.key))
+  }
+
+  #findContentByKey(key) {
+    return this.element.querySelector(`[data-hakumi--collapse-target="content"][data-key="${CSS.escape(String(key))}"]`)
+  }
+
+  #expand(key) {
+    const content = this.#findContentByKey(key)
+    if (!content) return
+    const box = content.querySelector('.hakumi-collapse-content-box')
+    if (!box) return
+
+
+    content.classList.add('hakumi-collapse-content-active')
+    content.style.height = '0px'
+
+    // eslint-disable-next-line no-unused-expressions
+    content.offsetHeight
+    const targetHeight = box.scrollHeight
+    content.style.height = `${targetHeight}px`
+
+    const onEnd = () => {
+      content.style.height = 'auto'
+      content.removeEventListener('transitionend', onEnd)
+    }
+    content.addEventListener('transitionend', onEnd)
+  }
+
+  #collapse(key) {
+    const content = this.#findContentByKey(key)
+    if (!content) return
+    const box = content.querySelector('.hakumi-collapse-content-box')
+    if (!box) return
+
+
+
+    const currentHeight = box.scrollHeight
+    content.style.height = `${currentHeight}px`
+
+    // eslint-disable-next-line no-unused-expressions
+    content.offsetHeight
+    content.style.height = '0px'
+
+    const onEnd = () => {
+      content.classList.remove('hakumi-collapse-content-active')
+      content.style.height = '0px'
+      content.removeEventListener('transitionend', onEnd)
+    }
+    content.addEventListener('transitionend', onEnd)
+  }
+}