shadcn_view_component 0.3.3

data/app/javascript/shadcn/controllers/slider_controller.js

@@ -0,0 +1,230 @@
+import { Controller } from "@hotwired/stimulus"
+import { readDirection } from "shadcn/direction"
+
+// Radix's Slider (vendor/radix/ui/slider.tsx).
+//
+// The values live in the DOM: each thumb's `aria-valuenow` is the value, and
+// everything else — the range's two edges, the wrappers' offsets, the hidden
+// inputs — is derived from them. There is no separate model to keep in step,
+// which is what a server-rendered slider needs: the markup arrives correct and
+// the controller only has to keep it that way.
+export default class extends Controller {
+  static targets = [ "thumb", "wrapper", "range", "input" ]
+  static values = {
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    orientation: { type: String, default: "horizontal" },
+    disabled: { type: Boolean, default: false },
+    // Radix's `minStepsBetweenThumbs` (slider.tsx:121): how close two thumbs
+    // may come, counted in steps rather than in value, so it means the same at
+    // any scale.
+    minSteps: { type: Number, default: 0 }
+  }
+
+  connect() {
+    this.dragging = null
+    this.render()
+  }
+
+  disconnect() {
+    this.endDrag()
+  }
+
+  // ------------------------------------------------------------- reading
+
+  get vertical() { return this.orientationValue === "vertical" }
+
+  get values() {
+    return this.thumbTargets.map((thumb) => Number(thumb.getAttribute("aria-valuenow")))
+  }
+
+  percentOf(value) {
+    if (this.maxValue === this.minValue) return 0
+
+    return this.clamp((value - this.minValue) / (this.maxValue - this.minValue) * 100, 0, 100)
+  }
+
+  // ------------------------------------------------------------- writing
+
+  setValue(index, value) {
+    const thumb = this.thumbTargets[index]
+    if (!thumb) return
+
+    const next = this.constrain(index, value)
+    if (next === this.values[index]) return
+
+    thumb.setAttribute("aria-valuenow", String(next))
+    this.render()
+    this.dispatch("change", { detail: { values: this.values } })
+  }
+
+  // Snap to the step, keep inside the ends, and stay clear of the neighbouring
+  // thumbs by `minSteps` — Radix's three constraints, applied in that order
+  // because a value snapped after clamping can land outside again.
+  constrain(index, value) {
+    const stepped = this.minValue + Math.round((value - this.minValue) / this.stepValue) * this.stepValue
+    const gap = this.minStepsValue * this.stepValue
+    const values = this.values
+    const lower = index > 0 ? values[index - 1] + gap : this.minValue
+    const upper = index < values.length - 1 ? values[index + 1] - gap : this.maxValue
+
+    return this.clamp(Number(stepped.toFixed(10)), Math.max(lower, this.minValue), Math.min(upper, this.maxValue))
+  }
+
+  render() {
+    const values = this.values
+    const edgeStart = this.vertical ? "bottom" : "left"
+    const edgeEnd = this.vertical ? "top" : "right"
+
+    if (this.hasRangeTarget) {
+      // A single thumb fills from the start of the scale rather than from its
+      // own value, which would leave the range zero-wide — Radix's
+      // `valuesCount > 1 ? Math.min(...percentages) : 0` (slider.tsx:592).
+      const start = values.length > 1 ? this.percentOf(Math.min(...values)) : 0
+
+      this.rangeTarget.style[edgeStart] = `${start}%`
+      this.rangeTarget.style[edgeEnd] = `${100 - this.percentOf(Math.max(...values))}%`
+    }
+
+    this.wrapperTargets.forEach((wrapper, index) => {
+      const percent = this.percentOf(values[index])
+
+      wrapper.style[edgeStart] = `calc(${percent}% + ${this.boundsOffset(index, percent)}px)`
+    })
+
+    this.inputTargets.forEach((input, index) => { input.value = String(values[index]) })
+  }
+
+  // Radix's `getThumbInBoundsOffset` (slider.tsx:908). The thumb is centred on
+  // its value, so at 0% half of it would hang off the start and at 100% off the
+  // end. This slides the correction from +half to −half across the track, which
+  // keeps the whole thumb inside without moving it anywhere in the middle.
+  boundsOffset(index, percent) {
+    const thumb = this.thumbTargets[index]
+    if (!thumb) return 0
+
+    const size = this.vertical ? thumb.offsetHeight : thumb.offsetWidth
+    const half = size / 2
+
+    return half - (percent / 50) * half
+  }
+
+  // ------------------------------------------------------------ keyboard
+
+  keydown(event) {
+    if (this.disabledValue) return
+
+    const index = this.thumbTargets.indexOf(event.currentTarget)
+    if (index === -1) return
+
+    const value = this.values[index]
+    // Page keys and Shift+arrow move ten steps, which is Radix's multiplier
+    // (slider.tsx:263-264) rather than a number chosen here.
+    const large = event.shiftKey || event.key.startsWith("Page")
+    const amount = this.stepValue * (large ? 10 : 1)
+    const step = this.stepFor(event.key)
+
+    if (step === null) return
+
+    event.preventDefault()
+
+    if (step === "min") return this.setValue(index, this.minValue)
+    if (step === "max") return this.setValue(index, this.maxValue)
+
+    this.setValue(index, value + step * amount)
+  }
+
+  // Which way a key means "more". In a vertical slider up is more; in a
+  // horizontal one that is right, and right-to-left swaps the two arrows —
+  // which `shadcn/direction.js` already answers for the whole gem.
+  stepFor(key) {
+    const rtl = readDirection(this.element) === "rtl"
+
+    switch (key) {
+      case "Home": return "min"
+      case "End": return "max"
+      case "ArrowUp": case "PageUp": return 1
+      case "ArrowDown": case "PageDown": return -1
+      case "ArrowRight": return rtl ? -1 : 1
+      case "ArrowLeft": return rtl ? 1 : -1
+      default: return null
+    }
+  }
+
+  // --------------------------------------------------------------- pointer
+
+  // A press anywhere on the slider moves the nearest thumb to it and starts a
+  // drag, which is what makes the whole track a control rather than just the
+  // handle.
+  trackDown(event) {
+    if (this.disabledValue || event.button !== 0) return
+
+    const value = this.valueAtPointer(event)
+    const index = this.nearestThumb(value)
+
+    this.beginDrag(event, index)
+    this.setValue(index, value)
+  }
+
+  thumbDown(event) {
+    if (this.disabledValue || event.button !== 0) return
+
+    // The track handler would otherwise run too and re-pick the nearest thumb,
+    // which is the wrong one whenever two sit on the same value.
+    event.stopPropagation()
+    this.beginDrag(event, this.thumbTargets.indexOf(event.currentTarget))
+  }
+
+  beginDrag(event, index) {
+    event.preventDefault()
+    this.thumbTargets[index]?.focus()
+
+    this.dragging = index
+    this.onMove = (moveEvent) => this.setValue(this.dragging, this.valueAtPointer(moveEvent))
+    this.onUp = () => this.endDrag()
+
+    window.addEventListener("pointermove", this.onMove)
+    window.addEventListener("pointerup", this.onUp)
+  }
+
+  endDrag() {
+    if (this.dragging === null) return
+
+    window.removeEventListener("pointermove", this.onMove)
+    window.removeEventListener("pointerup", this.onUp)
+    this.dragging = null
+  }
+
+  valueAtPointer(event) {
+    const rect = this.element.getBoundingClientRect()
+    const rtl = readDirection(this.element) === "rtl"
+    let fraction
+
+    if (this.vertical) {
+      fraction = (rect.bottom - event.clientY) / rect.height
+    } else {
+      fraction = (event.clientX - rect.left) / rect.width
+      if (rtl) fraction = 1 - fraction
+    }
+
+    return this.minValue + this.clamp(fraction, 0, 1) * (this.maxValue - this.minValue)
+  }
+
+  // Ties go to the lower index, which matters only when two thumbs share a
+  // value — and then either choice is arbitrary until one of them moves.
+  nearestThumb(value) {
+    const values = this.values
+    let best = 0
+
+    values.forEach((current, index) => {
+      if (Math.abs(current - value) < Math.abs(values[best] - value)) best = index
+    })
+
+    return best
+  }
+
+  clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max)
+  }
+}

data/app/javascript/shadcn/controllers/switch_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Radix's Switch: a `role="switch"` button whose thumb is moved by
+// `data-state`, plus a hidden checkbox for form submission. As with Checkbox,
+// Radix renders that input as a sibling of the button, so it lives outside this
+// controller's scope and is resolved by id.
+export default class extends Controller {
+  static targets = [ "thumb" ]
+  static values = { checked: Boolean, disabled: Boolean, inputId: String }
+
+  connect() {
+    this.input = this.inputIdValue ? document.getElementById(this.inputIdValue) : null
+    this.render()
+  }
+
+  toggle(event) {
+    if (this.disabledValue) return
+    event?.preventDefault()
+
+    this.checkedValue = !this.checkedValue
+    this.render()
+    this.dispatch("change", { detail: { checked: this.checkedValue } })
+
+    if (this.input) this.input.dispatchEvent(new Event("change", { bubbles: true }))
+  }
+
+  keydown(event) {
+    if (event.key === "Enter") event.preventDefault()
+  }
+
+  render() {
+    const state = this.checkedValue ? "checked" : "unchecked"
+
+    this.element.dataset.state = state
+    this.element.setAttribute("aria-checked", String(this.checkedValue))
+    if (this.hasThumbTarget) this.thumbTarget.dataset.state = state
+    if (this.input) this.input.checked = this.checkedValue
+  }
+}

data/app/javascript/shadcn/controllers/tabs_controller.js

@@ -0,0 +1,81 @@
+import { Controller } from "@hotwired/stimulus"
+import { directionAwareKey, readDirection } from "shadcn/direction"
+import { uniqueId } from "shadcn/id"
+
+// Radix's Tabs: roving tabindex across the triggers, arrow keys following the
+// orientation, and automatic activation on focus.
+export default class extends Controller {
+  static targets = [ "trigger", "content" ]
+  static values = {
+    value: String,
+    orientation: { type: String, default: "horizontal" },
+    activation: { type: String, default: "automatic" }
+  }
+
+  connect() {
+    if (!this.valueValue) {
+      const first = this.triggerTargets.find((t) => !t.disabled)
+      if (first) this.valueValue = first.dataset.value || ""
+    }
+    this.render()
+  }
+
+  select(event) {
+    const trigger = event.currentTarget
+    if (trigger.disabled) return
+
+    this.valueValue = trigger.dataset.value || ""
+    this.render()
+    this.dispatch("change", { detail: { value: this.valueValue } })
+  }
+
+  keydown(event) {
+    const horizontal = this.orientationValue === "horizontal"
+    const forward = horizontal ? "ArrowRight" : "ArrowDown"
+    const backward = horizontal ? "ArrowLeft" : "ArrowUp"
+    // Right-to-left swaps the two horizontal arrows, so the key that *means*
+    // forward is translated before it is compared. `shadcn/direction.js` says
+    // why this is a module and not a provider.
+    const key = directionAwareKey(event.key, readDirection(this.element))
+
+    const triggers = this.triggerTargets.filter((t) => !t.disabled)
+    const index = triggers.indexOf(event.currentTarget)
+    if (index === -1) return
+
+    let next = null
+    if (key === forward) next = triggers[(index + 1) % triggers.length]
+    else if (key === backward) next = triggers[(index - 1 + triggers.length) % triggers.length]
+    else if (event.key === "Home") next = triggers[0]
+    else if (event.key === "End") next = triggers[triggers.length - 1]
+    else return
+
+    event.preventDefault()
+    next.focus({ preventScroll: true })
+    if (this.activationValue === "automatic") next.click()
+  }
+
+  render() {
+    this.triggerTargets.forEach((trigger) => {
+      const value = trigger.dataset.value || ""
+      const active = value === this.valueValue
+      const panel = this.contentTargets.find((c) => (c.dataset.value || "") === value)
+
+      if (!trigger.id) trigger.id = uniqueId("shadcn-tab")
+
+      trigger.dataset.state = active ? "active" : "inactive"
+      trigger.setAttribute("aria-selected", String(active))
+      trigger.setAttribute("tabindex", active ? "0" : "-1")
+
+      if (!panel) return
+      if (!panel.id) panel.id = uniqueId("shadcn-tabpanel")
+      trigger.setAttribute("aria-controls", panel.id)
+      panel.setAttribute("aria-labelledby", trigger.id)
+    })
+
+    this.contentTargets.forEach((content) => {
+      const active = (content.dataset.value || "") === this.valueValue
+      content.dataset.state = active ? "active" : "inactive"
+      content.hidden = !active
+    })
+  }
+}

data/app/javascript/shadcn/controllers/theme_controller.js

@@ -0,0 +1,67 @@
+import { Controller } from "@hotwired/stimulus"
+import {
+  CHANGE_EVENT,
+  apply,
+  getMode,
+  getTheme,
+  resolvedMode,
+  setMode,
+  setTheme,
+  toggleMode,
+  watchSystem
+} from "shadcn/theme"
+
+// Drives the mode and colour-theme switchers. It is the counterpart of
+// next-themes' `useTheme()` and shadcn's `useThemeConfig()`.
+//
+// Put it on an element wrapping the control:
+//
+//   <div data-controller="shadcn--theme">
+//     <button data-action="shadcn--theme#toggle">…</button>
+//     <div data-mode="dark" data-action="click->shadcn--theme#setMode">Dark</div>
+//   </div>
+export default class extends Controller {
+  connect() {
+    apply()
+    watchSystem()
+
+    this.onChange = () => this.render()
+    document.addEventListener(CHANGE_EVENT, this.onChange)
+
+    this.render()
+  }
+
+  disconnect() {
+    document.removeEventListener(CHANGE_EVENT, this.onChange)
+  }
+
+  // Reads the mode from the clicked element, e.g. `data-mode="dark"`.
+  setMode(event) {
+    setMode(event.currentTarget.dataset.mode)
+  }
+
+  toggle() {
+    toggleMode()
+  }
+
+  // Reads the palette from the clicked element's `data-value`, which is what
+  // the select and dropdown items already carry.
+  setTheme(event) {
+    setTheme(event.currentTarget.dataset.value)
+  }
+
+  // Reflects the current state onto the element so CSS and assistive tech can
+  // see it, and marks the active option in any menu inside.
+  render() {
+    const mode = getMode()
+
+    this.element.dataset.mode = mode
+    this.element.dataset.resolvedMode = resolvedMode()
+    this.element.dataset.theme = getTheme()
+
+    this.element.querySelectorAll("[data-mode]").forEach((option) => {
+      if (option === this.element) return
+      option.dataset.active = String(option.dataset.mode === mode)
+    })
+  }
+}