hakumi_components 0.1.3.pre

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

@@ -0,0 +1,567 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static targets = ["tab", "pane", "inkBar", "navList", "navWrap", "operations", "overflowSelect"]
+  static values = {
+    activeKey: String,
+    tabPosition: { type: String, default: "top" },
+    indicatorSize: { type: Number, default: 0 },
+    indicatorAlign: { type: String, default: "center" },
+    tabTemplate: String,
+    paneTemplate: String,
+    closeButtonTemplate: String
+  }
+
+  setup() {
+    this._isUpdating = false
+
+
+    this.#initializeTabsRegistry()
+
+
+    if (!this.activeKeyValue && this._tabs.length > 0) {
+      this.activeKeyValue = this._tabs[0].key
+    }
+
+
+    requestAnimationFrame(() => {
+      this.#updateInkBar()
+      this.#syncOverflow()
+    })
+
+
+    this.boundResize = () => {
+      if (this._isUpdating) return
+      this.#updateInkBar()
+      this.#syncOverflow()
+    }
+    window.addEventListener("resize", this.boundResize)
+
+
+    if (this.hasNavWrapTarget) {
+      this.resizeObserver = new ResizeObserver(() => {
+        if (this._isUpdating) return
+        this.#updateInkBar()
+        this.#syncOverflow()
+      })
+      this.resizeObserver.observe(this.navWrapTarget)
+    }
+  }
+
+  teardown() {
+    window.removeEventListener("resize", this.boundResize)
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+  }
+
+  registerApi() {
+    this.element.hakumiComponent = {
+      name: "tabs",
+      version: 1,
+      singleton: false,
+      api: {
+
+        getActiveKey: () => this.activeKeyValue,
+        getValue: () => this.activeKeyValue,
+
+
+        setActiveKey: (key) => this.#setActiveKey(key),
+        setValue: (key) => this.#setActiveKey(key),
+
+
+        getItems: () => this.#getItems(),
+
+
+        next: () => this.#navigateNext(),
+
+
+        prev: () => this.#navigatePrev(),
+
+
+        removeTab: (key) => this.#removeTabByKey(key),
+
+
+        addTab: (options = {}) => this.#addNewTab(options),
+
+
+        reset: () => this.#resetActiveKey()
+      }
+    }
+  }
+
+  #initializeTabsRegistry() {
+    this._tabs = []
+
+    this.tabTargets.forEach(tabEl => {
+      const key = tabEl.dataset.key
+      const paneEl = this.paneTargets.find(p => p.dataset.key === key)
+
+      this._tabs.push({
+        key,
+        label: tabEl.querySelector(".hakumi-tabs-tab-label")?.textContent || key,
+        disabled: tabEl.classList.contains("hakumi-tabs-tab-disabled"),
+        closable: tabEl.querySelector(".hakumi-tabs-tab-remove") !== null,
+        tabEl,
+        paneEl
+      })
+    })
+  }
+
+  #insertTabElement(tabData) {
+    if (!tabData.tabEl) return
+    const referenceNode = this.#tabInsertionReference()
+    this.navListTarget.insertBefore(tabData.tabEl, referenceNode)
+  }
+
+  #tabInsertionReference() {
+    return this.element.querySelector(".hakumi-tabs-nav-add") || this.inkBarTarget || null
+  }
+
+  #getGapSize(isVertical) {
+    if (!this.hasNavListTarget) return 0
+    const styles = window.getComputedStyle(this.navListTarget)
+    const parse = value => {
+      const numeric = parseFloat(value)
+      return Number.isFinite(numeric) ? numeric : 0
+    }
+    if (isVertical) {
+      return parse(styles.rowGap || styles.gap)
+    }
+    return parse(styles.columnGap || styles.gap)
+  }
+
+  #addNewTab({ key, label, content = "", closable = true, activate = true }) {
+
+    const tabKey = key || `tab-${Date.now()}`
+    const tabLabel = label || `New Tab`
+
+
+    const tabEl = this.#createTabElement(tabKey, tabLabel, closable)
+
+
+    const paneEl = this.#createPaneElement(tabKey, content)
+
+
+    const tabData = {
+      key: tabKey,
+      label: tabLabel,
+      disabled: false,
+      closable,
+      tabEl,
+      paneEl
+    }
+    this._tabs.push(tabData)
+
+
+    this.#insertTabElement(tabData)
+
+
+    const contentHolder = this.element.querySelector(".hakumi-tabs-content-holder")
+    if (contentHolder) {
+      contentHolder.appendChild(paneEl)
+    }
+
+
+    this.dispatch("tabAdded", { detail: { key: tabKey, label: tabLabel } })
+
+
+    if (activate) {
+      requestAnimationFrame(() => this.#activateTabByKey(tabKey))
+    }
+
+    this.#syncOverflow()
+
+    return tabKey
+  }
+
+  #createTabElement(key, label, closable) {
+    if (this.hasTabTemplateValue) {
+
+      const closeButton = closable ? this.#getCloseButtonHtml(key) : ""
+      const html = this.tabTemplateValue
+        .replace(/\{\{key\}\}/g, key)
+        .replace(/\{\{label\}\}/g, label)
+        .replace(/\{\{closeButton\}\}/g, closeButton)
+
+      const template = document.createElement("template")
+      template.innerHTML = html.trim()
+      return template.content.firstChild
+    }
+
+
+    const tab = document.createElement("div")
+    tab.className = "hakumi-tabs-tab"
+    tab.dataset.key = key
+    tab.dataset.antTabsTarget = "tab"
+    tab.dataset.action = "click->hakumi--tabs#selectTab"
+    tab.innerHTML = `
+      <div class="hakumi-tabs-tab-btn">
+        <span class="hakumi-tabs-tab-label">${label}</span>
+      </div>
+      ${closable ? this.#getCloseButtonHtml(key) : ""}
+    `
+    return tab
+  }
+
+  #createPaneElement(key, content) {
+    if (this.hasPaneTemplateValue) {
+
+      const html = this.paneTemplateValue
+        .replace(/\{\{key\}\}/g, key)
+        .replace(/\{\{content\}\}/g, content)
+
+      const template = document.createElement("template")
+      template.innerHTML = html.trim()
+      return template.content.firstChild
+    }
+
+
+    const pane = document.createElement("div")
+    pane.className = "hakumi-tabs-tabpane hakumi-tabs-tabpane-hidden"
+    pane.dataset.key = key
+    pane.dataset.antTabsTarget = "pane"
+    pane.setAttribute("aria-hidden", "true")
+    pane.innerHTML = content
+    return pane
+  }
+
+  #getCloseButtonHtml(key) {
+    if (this.hasCloseButtonTemplateValue) {
+      return this.closeButtonTemplateValue.replace(/\{\{key\}\}/g, key)
+    }
+
+
+    const existingButton = this.element.querySelector(".hakumi-tabs-tab-remove")
+    if (existingButton) {
+      const clone = existingButton.cloneNode(true)
+      clone.dataset.key = key
+      return clone.outerHTML
+    }
+
+
+    return `
+      <button type="button" class="hakumi-button hakumi-button-text hakumi-button-small hakumi-tabs-tab-remove" data-key="${key}" data-action="click->hakumi--tabs#removeTab">
+        <span class="hakumi-icon hakumi-icon-close"><svg viewBox="64 64 896 896" focusable="false" fill="currentColor" width="1em" height="1em"><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>
+      </button>
+    `
+  }
+
+  #getItems() {
+
+    return this._tabs.map(tab => ({
+      key: tab.key,
+      label: tab.label,
+      disabled: tab.disabled,
+      active: tab.key === this.activeKeyValue
+    }))
+  }
+
+  #setActiveKey(key) {
+    this.#activateTabByKey(key)
+  }
+
+  #resetActiveKey() {
+    const nextTab = this._tabs.find(tab => !tab.disabled)
+    if (nextTab) {
+      this.#activateTabByKey(nextTab.key)
+    }
+  }
+
+  #activateTabByKey(key) {
+    const tabData = this._tabs.find(t => t.key === key)
+    if (!tabData || tabData.disabled) return
+
+    const previousKey = this.activeKeyValue
+    if (key === previousKey) return
+
+
+    this._tabs.forEach(t => {
+      const isActive = t.key === key
+      if (t.tabEl) {
+        t.tabEl.classList.toggle("hakumi-tabs-tab-active", isActive)
+        t.tabEl.setAttribute("aria-selected", isActive.toString())
+        t.tabEl.setAttribute("tabindex", isActive ? "0" : "-1")
+      }
+      if (t.paneEl) {
+        t.paneEl.classList.toggle("hakumi-tabs-tabpane-active", isActive)
+        t.paneEl.classList.toggle("hakumi-tabs-tabpane-hidden", !isActive)
+        t.paneEl.setAttribute("aria-hidden", (!isActive).toString())
+      }
+    })
+
+    this.activeKeyValue = key
+    this.#syncOverflow()
+    this.#updateInkBar()
+
+
+    this.dispatch("change", { detail: { activeKey: key, previousKey } })
+  }
+
+  #navigateNext() {
+    const currentIndex = this._tabs.findIndex(t => t.key === this.activeKeyValue)
+    const nextIndex = (currentIndex + 1) % this._tabs.length
+    const nextTab = this._tabs[nextIndex]
+    if (nextTab && !nextTab.disabled) {
+      this.#activateTabByKey(nextTab.key)
+    }
+  }
+
+  #navigatePrev() {
+    const currentIndex = this._tabs.findIndex(t => t.key === this.activeKeyValue)
+    const prevIndex = currentIndex === 0 ? this._tabs.length - 1 : currentIndex - 1
+    const prevTab = this._tabs[prevIndex]
+    if (prevTab && !prevTab.disabled) {
+      this.#activateTabByKey(prevTab.key)
+    }
+  }
+
+  #removeTabByKey(key) {
+    const tabIndex = this._tabs.findIndex(t => t.key === key)
+    if (tabIndex === -1) return
+
+    const tabData = this._tabs[tabIndex]
+    const wasActive = key === this.activeKeyValue
+
+
+    this.dispatch("edit", { detail: { type: "remove", key } })
+
+
+    if (tabData.tabEl) tabData.tabEl.remove()
+    if (tabData.paneEl) tabData.paneEl.remove()
+
+
+    this._tabs.splice(tabIndex, 1)
+
+
+    if (wasActive && this._tabs.length > 0) {
+      const newIndex = Math.min(tabIndex, this._tabs.length - 1)
+      this.#activateTabByKey(this._tabs[newIndex].key)
+    }
+
+    this.#syncOverflow()
+    this.#updateInkBar()
+  }
+
+
+
+
+
+  selectTab(event) {
+    const tabEl = event.currentTarget
+    const key = tabEl.dataset.key
+    this.#activateTabByKey(key)
+  }
+
+  removeTab(event) {
+    if (event) event.stopPropagation()
+    const key = event.currentTarget.dataset.key
+    this.#removeTabByKey(key)
+  }
+
+  addTab(event) {
+    if (event) event.preventDefault()
+
+
+    this.dispatch("add", { detail: { action: "add" } })
+  }
+
+  selectFromOverflow(event) {
+    const select = event.target
+    const key = select.value
+    if (key) {
+
+      this.#activateTabByKey(key)
+      this.#syncOverflow()
+
+      select.value = ""
+    }
+  }
+
+
+
+
+
+  #syncOverflow() {
+    if (!this.hasNavWrapTarget || !this.hasNavListTarget || !this.hasOperationsTarget) return
+    if (this._isUpdating) return
+
+    this._isUpdating = true
+
+    try {
+      const isVertical = ["left", "right"].includes(this.tabPositionValue)
+      const wrapSize = isVertical ? this.navWrapTarget.clientHeight : this.navWrapTarget.clientWidth
+
+
+      const addButton = this.element.querySelector(".hakumi-tabs-nav-add")
+      const addButtonSize = addButton ? (isVertical ? addButton.offsetHeight : addButton.offsetWidth) : 0
+
+
+      const selectTriggerSize = 50
+
+
+      const tabSizes = new Map()
+      this._tabs.forEach(tabData => {
+        if (!tabData.tabEl) return
+        tabData.tabEl.classList.remove("hakumi-tabs-tab-hidden")
+        tabSizes.set(tabData.key, isVertical ? tabData.tabEl.offsetHeight : tabData.tabEl.offsetWidth)
+      })
+
+      const gapSize = this.#getGapSize(isVertical)
+
+
+      let totalSize = 0
+      tabSizes.forEach(size => totalSize += size)
+      totalSize += Math.max(this._tabs.length - 1, 0) * gapSize
+      const needsOverflow = totalSize > (wrapSize - addButtonSize)
+
+
+      const availableSize = wrapSize - addButtonSize - (needsOverflow ? selectTriggerSize : 0)
+
+
+      const activeTabData = this._tabs.find(t => t.key === this.activeKeyValue)
+      const activeTabSize = activeTabData ? tabSizes.get(activeTabData.key) || 0 : 0
+      let remainingSize = Math.max(availableSize - activeTabSize, 0)
+      let visibleCount = activeTabData ? 1 : 0
+
+      const visibleSet = new Set()
+      const overflowSet = new Set()
+
+      if (activeTabData) {
+        visibleSet.add(activeTabData)
+      }
+
+      this._tabs.forEach(tabData => {
+        if (!tabData.tabEl) return
+        if (tabData === activeTabData) return
+        const tabSize = tabSizes.get(tabData.key) || 0
+        const requiredSpace = tabSize + (visibleCount > 0 ? gapSize : 0)
+        if (remainingSize >= requiredSpace) {
+          visibleSet.add(tabData)
+          remainingSize -= requiredSpace
+          visibleCount += 1
+        } else {
+          overflowSet.add(tabData)
+        }
+      })
+
+      const visibleTabs = this._tabs.filter(tab => visibleSet.has(tab))
+      const overflowTabs = this._tabs.filter(tab => overflowSet.has(tab))
+
+
+      const parent = this.navListTarget
+      const insertionRef = this.#tabInsertionReference()
+
+      visibleTabs.forEach(tabData => {
+        if (tabData.tabEl) {
+          parent.insertBefore(tabData.tabEl, insertionRef)
+        }
+      })
+
+      overflowTabs.forEach(tabData => {
+        if (tabData.tabEl) {
+          parent.insertBefore(tabData.tabEl, insertionRef)
+        }
+      })
+
+
+      this._tabs.forEach(tabData => {
+        if (!tabData.tabEl) return
+        const shouldHide = overflowSet.has(tabData)
+        tabData.tabEl.classList.toggle("hakumi-tabs-tab-hidden", shouldHide)
+      })
+
+
+      const hasOverflow = overflowTabs.length > 0
+      this.operationsTarget.style.display = hasOverflow ? "flex" : "none"
+
+
+      if (this.hasInkBarTarget) {
+        this.inkBarTarget.classList.remove("hakumi-tabs-ink-bar-hidden")
+      }
+
+
+      if (hasOverflow && this.hasOverflowSelectTarget) {
+        this.#rebuildOverflowSelect(overflowTabs)
+      }
+    } finally {
+      this._isUpdating = false
+    }
+  }
+
+  #rebuildOverflowSelect(overflowTabs) {
+    const selectWrapper = this.overflowSelectTarget.querySelector(".hakumi-select") || this.overflowSelectTarget
+    const dropdown = selectWrapper.querySelector(".hakumi-select-dropdown")
+
+    if (dropdown) {
+      const optionsContainer = dropdown.querySelector(".hakumi-select-options") || dropdown
+      optionsContainer.innerHTML = ""
+
+      overflowTabs.forEach(tabData => {
+        const option = document.createElement("div")
+        option.className = "hakumi-select-item hakumi-select-item-option"
+        option.dataset.value = tabData.key
+        option.dataset.label = tabData.label
+        option.dataset.antSelectTarget = "option"
+        option.dataset.action = "click->hakumi--select#select"
+        option.setAttribute("role", "option")
+        option.innerHTML = `<div class="hakumi-select-item-option-content">${tabData.label}</div>`
+        optionsContainer.appendChild(option)
+      })
+    }
+  }
+
+  #updateInkBar() {
+    if (!this.hasInkBarTarget || !this.hasNavListTarget) return
+
+    const activeTabData = this._tabs.find(t => t.key === this.activeKeyValue)
+    if (!activeTabData || !activeTabData.tabEl) {
+      this.inkBarTarget.style.width = "0"
+      return
+    }
+
+    const activeTab = activeTabData.tabEl
+
+
+    if (activeTab.classList.contains("hakumi-tabs-tab-hidden")) {
+      return
+    }
+
+    const isVertical = ["left", "right"].includes(this.tabPositionValue)
+    const hasCustomSize = this.indicatorSizeValue > 0
+    const navListRect = this.navListTarget.getBoundingClientRect()
+    const tabRect = activeTab.getBoundingClientRect()
+
+    if (isVertical) {
+      const tabHeight = tabRect.height
+      let height = hasCustomSize ? Math.min(this.indicatorSizeValue, tabHeight) : tabHeight
+      let top = tabRect.top - navListRect.top
+
+      if (hasCustomSize && height < tabHeight) {
+        const diff = tabHeight - height
+        if (this.indicatorAlignValue === "center") top += diff / 2
+        else if (this.indicatorAlignValue === "end") top += diff
+      }
+
+      this.inkBarTarget.style.top = `${top}px`
+      this.inkBarTarget.style.height = `${height}px`
+      this.inkBarTarget.style.width = "2px"
+      this.inkBarTarget.style.left = ""
+    } else {
+      const tabWidth = tabRect.width
+      let width = hasCustomSize ? Math.min(this.indicatorSizeValue, tabWidth) : tabWidth
+      let left = tabRect.left - navListRect.left
+
+      if (hasCustomSize && width < tabWidth) {
+        const diff = tabWidth - width
+        if (this.indicatorAlignValue === "center") left += diff / 2
+        else if (this.indicatorAlignValue === "end") left += diff
+      }
+
+      this.inkBarTarget.style.left = `${left}px`
+      this.inkBarTarget.style.width = `${width}px`
+      this.inkBarTarget.style.height = "2px"
+      this.inkBarTarget.style.top = ""
+    }
+  }
+}

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

@@ -0,0 +1,103 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    checkable: { type: Boolean, default: false },
+    checked: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.#exposeApi()
+    
+    if (this.checkableValue) {
+      this.element.addEventListener("click", this.#handleClick)
+    }
+  }
+
+  disconnect() {
+    delete this.element.hakumiTag
+    
+    if (this.checkableValue) {
+      this.element.removeEventListener("click", this.#handleClick)
+    }
+  }
+
+  close(event) {
+    if (event) {
+      event.stopPropagation()
+    }
+
+    this.element.classList.add("hakumi-tag-hidden")
+
+    const onClose = this.dispatch("close", {
+      detail: { element: this.element },
+      cancelable: true
+    })
+
+    if (onClose.defaultPrevented) {
+      this.element.classList.remove("hakumi-tag-hidden")
+      return
+    }
+
+    setTimeout(() => {
+      this.dispatch("afterClose", { detail: { element: this.element } })
+      this.element.remove()
+    }, 200)
+  }
+
+  toggle() {
+    if (!this.checkableValue) return
+
+    this.checkedValue = !this.checkedValue
+    this.#updateCheckedState()
+    
+    this.dispatch("change", {
+      detail: { checked: this.checkedValue, element: this.element }
+    })
+  }
+
+  check() {
+    if (!this.checkableValue || this.checkedValue) return
+    
+    this.checkedValue = true
+    this.#updateCheckedState()
+    
+    this.dispatch("change", {
+      detail: { checked: true, element: this.element }
+    })
+  }
+
+  uncheck() {
+    if (!this.checkableValue || !this.checkedValue) return
+    
+    this.checkedValue = false
+    this.#updateCheckedState()
+    
+    this.dispatch("change", {
+      detail: { checked: false, element: this.element }
+    })
+  }
+
+  isChecked() {
+    return this.checkedValue
+  }
+
+  #handleClick = (event) => {
+    if (event.target.closest(".hakumi-tag-close-icon")) return
+    this.toggle()
+  }
+
+  #updateCheckedState() {
+    this.element.classList.toggle("hakumi-tag-checkable-checked", this.checkedValue)
+  }
+
+  #exposeApi() {
+    this.element.hakumiTag = {
+      close: () => this.close(),
+      toggle: () => this.toggle(),
+      check: () => this.check(),
+      uncheck: () => this.uncheck(),
+      isChecked: () => this.isChecked()
+    }
+  }
+}