hakumi_components 0.1.3.pre

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

@@ -0,0 +1,315 @@
+import QRCode from "qrcode"
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static targets = ["renderer"]
+  static values = {
+    value: String,
+    size: Number,
+    type: String,
+    color: String,
+    bgColor: String,
+    errorLevel: String,
+    status: String,
+    downloadName: String
+  }
+
+  registerApi() {
+    const api = {
+      getValue: () => this.valueValue,
+      setValue: (value) => this.setValue(value),
+      getSize: () => this.sizeValue,
+      setSize: (size) => this.setSize(size),
+      getType: () => this.typeValue,
+      setType: (type) => this.setType(type),
+      setColors: ({ color, bgColor } = {}) => this.setColors({ color, bgColor }),
+      setErrorLevel: (level) => this.setErrorLevel(level),
+      getDataUrl: () => this.getDataUrl(),
+      download: (filename) => this.download(filename),
+      rerender: () => this.renderCode(),
+      getState: () => ({
+        value: this.valueValue,
+        size: this.sizeValue,
+        type: this.typeValue,
+        errorLevel: this.errorLevelValue,
+        status: this.statusValue,
+        color: this.colorValue,
+        bgColor: this.bgColorValue
+      })
+    }
+
+    this.element.hakumiComponent = {
+      name: "qr_code",
+      version: 1,
+      singleton: false,
+      api
+    }
+
+    this.#exposeApi(api)
+  }
+
+  setup() {
+    this.#applySizeStyle()
+    this.#watchThemeChanges()
+    this.renderCode()
+  }
+
+  disconnect() {
+    this.#unwatchThemeChanges()
+    delete this.element.hakumiQrCode
+    super.disconnect()
+  }
+
+  valueValueChanged() {
+    this.renderCode()
+  }
+
+  sizeValueChanged() {
+    this.#applySizeStyle()
+    this.renderCode()
+  }
+
+  typeValueChanged() {
+    this.renderCode()
+  }
+
+  colorValueChanged() {
+    this.renderCode()
+  }
+
+  bgColorValueChanged() {
+    this.renderCode()
+  }
+
+  errorLevelValueChanged() {
+    this.renderCode()
+  }
+
+  statusValueChanged() {
+    this.renderCode()
+  }
+
+  async renderCode() {
+    if (!this.hasRendererTarget) return
+
+    const value = this.valueValue
+    if (!value) {
+      this.rendererTarget.innerHTML = ""
+      return
+    }
+
+    const type = (this.typeValue || "canvas").toLowerCase()
+    const options = {
+      margin: 0,
+      width: this.sizeValue || 160,
+      errorCorrectionLevel: (this.errorLevelValue || "M").toUpperCase(),
+      color: {
+        dark: this.#resolveColor(this.colorValue, "--color-text", "#000000"),
+        light: this.#resolveColor(this.bgColorValue, "--color-bg-container", "#ffffff")
+      }
+    }
+
+    try {
+      if (type === "svg") {
+        const svg = await QRCode.toString(value, { type: "svg", ...options })
+        this.rendererTarget.innerHTML = svg
+        this.svgMarkup = svg
+        this.canvasElement = null
+      } else {
+        const canvas = this.#ensureCanvas()
+        await QRCode.toCanvas(canvas, value, options)
+        this.svgMarkup = null
+      }
+    } catch (error) {
+      console.error("[HakumiComponents] Failed to render QR code", error)
+    }
+  }
+
+  setValue(value) {
+    this.valueValue = value
+  }
+
+  setSize(size) {
+    const parsed = Number(size)
+    if (Number.isNaN(parsed) || parsed <= 0) return false
+    this.sizeValue = parsed
+    return true
+  }
+
+  setType(type) {
+    if (!type) return false
+    const normalized = String(type).toLowerCase()
+    if (!["canvas", "svg"].includes(normalized)) return false
+    this.typeValue = normalized
+    return true
+  }
+
+  setColors({ color, bgColor } = {}) {
+    if (typeof color === "string") this.colorValue = color
+    if (typeof bgColor === "string") this.bgColorValue = bgColor
+    return true
+  }
+
+  setErrorLevel(level) {
+    if (!level) return false
+    const normalized = String(level).trim().toUpperCase()
+    if (!["L", "M", "Q", "H"].includes(normalized)) return false
+    this.errorLevelValue = normalized
+    return true
+  }
+
+  getDataUrl() {
+    if (this.canvasElement) {
+      return this.canvasElement.toDataURL("image/png")
+    }
+
+    if (this.svgMarkup) {
+      return `data:image/svg+xml;utf8,${encodeURIComponent(this.svgMarkup)}`
+    }
+
+    return null
+  }
+
+  download(filename) {
+    const dataUrl = this.getDataUrl()
+    if (!dataUrl) return false
+
+    const link = document.createElement("a")
+    link.href = dataUrl
+    link.download = filename || this.downloadNameValue || "qr-code"
+    link.click()
+    return true
+  }
+
+  #ensureCanvas() {
+    if (this.canvasElement) return this.canvasElement
+
+    this.rendererTarget.innerHTML = ""
+    const canvas = document.createElement("canvas")
+    canvas.className = "hakumi-qr-code-canvas"
+    this.rendererTarget.appendChild(canvas)
+    this.canvasElement = canvas
+    return canvas
+  }
+
+  #resolveColor(value, variableName, fallback) {
+    const raw = this.#resolveRawColor(value, variableName)
+    const normalized = this.#normalizeColor(raw)
+    return normalized || fallback
+  }
+
+  #resolveRawColor(value, variableName) {
+    const candidate = value && value.trim() !== "" ? value.trim() : null
+    if (!candidate || candidate.startsWith("var(")) {
+      const variableNameMatch = candidate
+        ? candidate.match(/var\((--[^)\s,]+)(?:,[^)]+)?\)/)
+        : null
+
+      if (variableNameMatch) {
+        return this.#readCssVariable(variableNameMatch[1])
+      }
+
+      return this.#readCssVariable(variableName)
+    }
+
+    return candidate
+  }
+
+  #normalizeColor(color) {
+    if (!color) return null
+
+    const trimmed = color.trim()
+    if (trimmed === "") return null
+
+    if (trimmed.startsWith("#")) {
+      return this.#normalizeHex(trimmed)
+    }
+
+    if (/^rgba?/i.test(trimmed)) {
+      const match = trimmed.match(/^rgba?\(([^)]+)\)$/i)
+      if (!match) return null
+
+      const parts = match[1]
+        .split(",")
+        .map((part) => parseFloat(part.trim()))
+        .filter((value) => !Number.isNaN(value))
+
+      if (parts.length < 3) return null
+
+      const [r, g, b] = parts
+      return this.#rgbToHex(r, g, b)
+    }
+
+    return null
+  }
+
+  #normalizeHex(value) {
+    const hex = value.replace("#", "")
+    if (hex.length === 3 || hex.length === 4) {
+      return `#${hex
+        .slice(0, 3)
+        .split("")
+        .map((char) => char + char)
+        .join("")}`
+    }
+
+    if (hex.length === 6 || hex.length === 8) {
+      return `#${hex.slice(0, 6)}`
+    }
+
+    return null
+  }
+
+  #rgbToHex(r, g, b) {
+    const clamp = (value) => {
+      const number = Math.round(value)
+      if (Number.isNaN(number)) return 0
+      return Math.max(0, Math.min(255, number))
+    }
+
+    return `#${[clamp(r), clamp(g), clamp(b)]
+      .map((component) => component.toString(16).padStart(2, "0"))
+      .join("")}`
+  }
+
+  #readCssVariable(name, fallback) {
+    if (!name) return fallback
+    const computed = getComputedStyle(this.element).getPropertyValue(name).trim()
+    return computed || fallback
+  }
+
+  #exposeApi(api) {
+    this.element.hakumiQrCode = {
+      getValue: () => api.getValue(),
+      setValue: (value) => api.setValue(value),
+      getSize: () => api.getSize(),
+      setSize: (size) => api.setSize(size),
+      getType: () => api.getType(),
+      setType: (type) => api.setType(type),
+      setColors: (options) => api.setColors(options),
+      setErrorLevel: (level) => api.setErrorLevel(level),
+      getDataUrl: () => api.getDataUrl(),
+      download: (filename) => api.download(filename),
+      rerender: () => api.rerender(),
+      getState: () => api.getState()
+    }
+  }
+
+  #applySizeStyle() {
+    if (!this.sizeValue) return
+    const value = Math.max(1, Number(this.sizeValue))
+    this.element.style.setProperty("--hakumi-qr-code-size", `${value}px`)
+  }
+
+  #watchThemeChanges() {
+    if (this._themeChangeHandler) return
+    this._themeChangeHandler = () => this.renderCode()
+    window.addEventListener("theme-changed", this._themeChangeHandler)
+  }
+
+  #unwatchThemeChanges() {
+    if (!this._themeChangeHandler) return
+    window.removeEventListener("theme-changed", this._themeChangeHandler)
+    this._themeChangeHandler = null
+  }
+}

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

@@ -0,0 +1,86 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+    static targets = ["input", "radio"]
+    static values = {
+        checked: Boolean,
+        variant: String
+    }
+
+    setup() {
+        this.#updateCheckedState()
+    }
+
+    registerApi() {
+        this.element.hakumiComponent = {
+            name: "radio",
+            version: 1,
+            singleton: false,
+            api: {
+                setChecked: (checked) => this.setChecked(checked),
+                isChecked: () => this.checkedValue
+            }
+        }
+    }
+
+    checkedValueChanged() {
+        this.#updateCheckedState()
+    }
+
+    toggle() {
+        if (!this.hasInputTarget) return
+        this.checkedValue = this.inputTarget.checked
+        this.#syncGroup()
+        this.dispatch("change", { detail: { checked: this.checkedValue, value: this.inputTarget.value, name: this.inputTarget.name } })
+    }
+
+    setChecked(checked) {
+        if (this.hasInputTarget) {
+            this.inputTarget.checked = checked
+        }
+        this.checkedValue = checked
+        this.#syncGroup()
+    }
+
+    #syncGroup() {
+        if (!this.hasInputTarget) return
+        const name = this.inputTarget.name
+        if (!name) return
+
+        const scope = this.element.closest(".hakumi-radio-group") || document
+        const wrappers = scope.querySelectorAll('[data-controller~="hakumi--radio"]')
+
+        wrappers.forEach((wrapper) => {
+            const input = wrapper.querySelector('input[type="radio"]')
+            if (!input || input.name !== name) return
+
+            const controller = this.application?.getControllerForElementAndIdentifier(wrapper, "hakumi--radio")
+            if (controller) {
+                controller.checkedValue = input.checked
+            } else {
+                this.#updateWrapperClasses(wrapper, input.checked, input.disabled)
+            }
+        })
+    }
+
+    #updateCheckedState() {
+        if (this.hasInputTarget && this.inputTarget.checked !== this.checkedValue) {
+            this.inputTarget.checked = this.checkedValue
+        }
+
+        this.#updateWrapperClasses(this.element, this.checkedValue, this.hasInputTarget ? this.inputTarget.disabled : false)
+        this.#updateRadioClasses()
+    }
+
+    #updateWrapperClasses(wrapper, checked, disabled) {
+        const base = this.variantValue === "button" ? "hakumi-radio-button-wrapper" : "hakumi-radio-wrapper"
+        wrapper.classList.toggle(`${base}-checked`, checked)
+        wrapper.classList.toggle(`${base}-disabled`, disabled)
+    }
+
+    #updateRadioClasses() {
+        if (!this.hasRadioTarget) return
+        this.radioTarget.classList.toggle("hakumi-radio-checked", this.checkedValue)
+        this.radioTarget.classList.toggle("hakumi-radio-disabled", this.hasInputTarget ? this.inputTarget.disabled : false)
+    }
+}

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

@@ -0,0 +1,262 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+    static targets = ["input", "star"]
+    static values = {
+        count: Number,
+        allowHalf: Boolean,
+        allowClear: Boolean,
+        disabled: Boolean,
+        readonly: Boolean,
+        value: Number
+    }
+
+    setup() {
+        this.currentValue = this.valueValue || 0
+        this.#syncInput()
+        this.#render(this.currentValue)
+        this.#updateDisabledState()
+        this.#updateReadonlyState()
+        this.#setupKeyboardHandler()
+    }
+
+    teardown() {
+        if (this.boundKeyHandler) {
+            this.element.removeEventListener('keydown', this.boundKeyHandler)
+        }
+    }
+
+    registerApi() {
+        this.element.hakumiComponent = {
+            name: "rate",
+            version: 1,
+            singleton: false,
+            api: {
+
+                setValue: (value) => this.setValue(value),
+                getValue: () => this.currentValue,
+                clear: () => this.clear(),
+
+
+                setDisabled: (disabled) => this.setDisabled(disabled),
+                isDisabled: () => this.disabledValue,
+                toggleDisabled: () => this.setDisabled(!this.disabledValue),
+                disable: () => this.setDisabled(true),
+                enable: () => this.setDisabled(false),
+
+
+                setReadonly: (readonly) => this.setReadonly(readonly),
+                isReadonly: () => this.readonlyValue,
+                toggleReadonly: () => this.setReadonly(!this.readonlyValue),
+
+
+                setAllowClear: (allowClear) => this.setAllowClear(allowClear),
+                isAllowClear: () => this.allowClearValue,
+                toggleAllowClear: () => this.setAllowClear(!this.allowClearValue),
+
+
+                setAllowHalf: (allowHalf) => this.setAllowHalf(allowHalf),
+                isAllowHalf: () => this.allowHalfValue,
+                toggleAllowHalf: () => this.setAllowHalf(!this.allowHalfValue)
+            }
+        }
+    }
+
+    valueValueChanged(value) {
+        this.currentValue = Number(value || 0)
+        this.#syncInput()
+        this.#render(this.currentValue)
+    }
+
+    onHover(event) {
+        if (this.#isLocked()) return
+
+        const nextValue = this.#valueFromEvent(event)
+        this.#render(nextValue)
+    }
+
+    onLeave() {
+        if (this.#isLocked()) return
+
+        this.#render(this.currentValue)
+    }
+
+    onClick(event) {
+        if (this.#isLocked()) return
+
+        let nextValue = this.#valueFromEvent(event)
+
+        if (this.allowClearValue && nextValue === this.currentValue) {
+            nextValue = 0
+        }
+
+        this.setValue(nextValue)
+        this.dispatch("change", { detail: { value: nextValue } })
+    }
+
+    setValue(value) {
+        this.currentValue = Number(value || 0)
+        this.valueValue = this.currentValue
+        this.#syncInput()
+        this.#render(this.currentValue)
+    }
+
+    clear() {
+        this.setValue(0)
+    }
+
+    setDisabled(disabled) {
+        this.disabledValue = Boolean(disabled)
+    }
+
+    setReadonly(readonly) {
+        this.readonlyValue = Boolean(readonly)
+    }
+
+    setAllowClear(allowClear) {
+        this.allowClearValue = Boolean(allowClear)
+    }
+
+    setAllowHalf(allowHalf) {
+        this.allowHalfValue = Boolean(allowHalf)
+        this.#render(this.currentValue)
+    }
+
+    disabledValueChanged() {
+        this.#updateDisabledState()
+    }
+
+    readonlyValueChanged() {
+        this.#updateReadonlyState()
+    }
+
+    #updateDisabledState() {
+        const isDisabled = this.disabledValue
+        this.element.classList.toggle("hakumi-rate-disabled", isDisabled)
+        this.element.setAttribute("aria-disabled", String(isDisabled))
+
+
+        if (this.#isLocked()) {
+            this.element.setAttribute('tabindex', '-1')
+        } else {
+            this.element.setAttribute('tabindex', '0')
+        }
+
+        if (this.hasInputTarget) {
+            this.inputTarget.disabled = isDisabled
+        }
+    }
+
+    #updateReadonlyState() {
+        const isReadonly = this.readonlyValue
+        this.element.classList.toggle("hakumi-rate-readonly", isReadonly)
+        this.element.setAttribute("aria-readonly", String(isReadonly))
+
+
+        if (this.#isLocked()) {
+            this.element.setAttribute('tabindex', '-1')
+        } else {
+            this.element.setAttribute('tabindex', '0')
+        }
+    }
+
+    #syncInput() {
+        if (this.hasInputTarget) {
+            this.inputTarget.value = this.currentValue
+        }
+    }
+
+    #valueFromEvent(event) {
+        const star = event.currentTarget
+        const index = Number(star.dataset.index)
+
+        if (!this.allowHalfValue) return index
+
+        const rect = star.getBoundingClientRect()
+        const offsetX = event.clientX - rect.left
+        return offsetX <= rect.width / 2 ? index - 0.5 : index
+    }
+
+    #render(value) {
+        const fullStars = Math.floor(value)
+        const hasDecimal = value - fullStars > 0
+        const hasHalf = this.allowHalfValue && hasDecimal
+
+        this.starTargets.forEach((star) => {
+            const index = Number(star.dataset.index)
+            const isFull = index <= fullStars
+            const isHalf = index === fullStars + 1 && hasHalf
+
+            star.classList.toggle("hakumi-rate-star-full", isFull)
+            star.classList.toggle("hakumi-rate-star-half", isHalf)
+            star.classList.toggle("hakumi-rate-star-zero", !isFull && !isHalf)
+        })
+
+        this.element.classList.toggle("hakumi-rate-has-value", value > 0)
+        this.element.setAttribute("aria-valuenow", value)
+    }
+
+    #isLocked() {
+        return this.disabledValue || this.readonlyValue
+    }
+
+    #setupKeyboardHandler() {
+        this.boundKeyHandler = this.#handleKeydown.bind(this)
+        this.element.addEventListener('keydown', this.boundKeyHandler)
+
+
+        if (!this.#isLocked() && !this.element.hasAttribute('tabindex')) {
+            this.element.setAttribute('tabindex', '0')
+        }
+    }
+
+    #handleKeydown(event) {
+        if (this.#isLocked()) return
+
+        let handled = false
+        let newValue = this.currentValue
+
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+
+                newValue = Math.min(this.countValue, this.currentValue + (this.allowHalfValue ? 0.5 : 1))
+                handled = true
+                break
+
+            case 'ArrowLeft':
+            case 'ArrowDown':
+
+                newValue = Math.max(0, this.currentValue - (this.allowHalfValue ? 0.5 : 1))
+                handled = true
+                break
+
+            case 'Home':
+
+                newValue = this.allowClearValue ? 0 : (this.allowHalfValue ? 0.5 : 1)
+                handled = true
+                break
+
+            case 'End':
+
+                newValue = this.countValue
+                handled = true
+                break
+
+            case 'Enter':
+            case ' ':
+
+                if (this.allowClearValue) {
+                    newValue = this.currentValue === 0 ? this.countValue : 0
+                    handled = true
+                }
+                break
+        }
+
+        if (handled) {
+            event.preventDefault()
+            this.setValue(newValue)
+            this.dispatch("change", { detail: { value: newValue } })
+        }
+    }
+}