@tremolo-ui/vue 0.7.0

package/src/components/Slider/SliderMarksOption.ts

@@ -0,0 +1,85 @@
+import { computed, defineComponent, h, type PropType } from 'vue'
+
+import { cssLength, valuePercent } from '@tremolo-ui/dom'
+
+import { checkPlacement } from '../_util/placement'
+
+import { useSliderContext } from './context'
+
+/** One mark along the slider, and its label. */
+export const SliderMarksOption = /* @__PURE__ */ defineComponent({
+  name: 'SliderMarksOption',
+  props: {
+    /** Where the mark sits, on the same scale as the thumb. */
+    value: { type: Number, required: true },
+    /** Draw the mark itself. @default true */
+    mark: { type: Boolean, default: true },
+    /**
+     * Text shown next to the mark. Leave it out to show the value; `null`
+     * leaves the label out.
+     */
+    label: {
+      type: [Number, String, null] as PropType<number | string | null>,
+      default: undefined,
+    },
+    /** Thickness of the mark. Sets `--thickness`. */
+    thickness: [Number, String],
+    /** Length of the mark. Sets `--length`. */
+    length: [Number, String],
+    /** Space between the mark and the label. Sets `--gap`. */
+    gap: [Number, String],
+    /** Classes for the mark and the label inside the option. */
+    classes: Object as PropType<{ mark?: string; label?: string }>,
+    /** Styles for the mark and the label inside the option. */
+    styles: Object as PropType<{ mark?: string; label?: string }>,
+  },
+  setup(props) {
+    const slider = useSliderContext()
+    checkPlacement('SliderMarksOption', 'SliderMarks')
+    // The marks sit on the same curve the thumb runs along.
+    const percent = computed(() =>
+      valuePercent(
+        props.value,
+        { min: slider.min, max: slider.max, scale: slider.scale },
+        slider.vertical !== slider.reverse,
+      ),
+    )
+    return () => {
+      const orientation = slider.vertical ? 'vertical' : 'horizontal'
+      return h(
+        'div',
+        {
+          'data-orientation': orientation,
+          style: {
+            '--thickness': cssLength(props.thickness),
+            '--length': cssLength(props.length),
+            '--gap': cssLength(props.gap),
+            position: 'absolute',
+            translate: slider.vertical
+              ? 'var(--translate, 0 -50%)'
+              : 'var(--translate, -50% 0)',
+            zIndex: 10,
+            left: slider.vertical ? undefined : `${percent.value}%`,
+            top: slider.vertical ? `${percent.value}%` : undefined,
+          },
+        },
+        [
+          props.mark
+            ? h('div', {
+                class: props.classes?.mark,
+                style: props.styles?.mark,
+                'data-orientation': orientation,
+              })
+            : null,
+          props.label !== null
+            ? h(
+                'div',
+                { class: props.classes?.label, style: props.styles?.label },
+                String(props.label ?? props.value),
+              )
+            : null,
+        ],
+      )
+    }
+  },
+})

package/src/components/Slider/SliderThumb.ts

@@ -0,0 +1,92 @@
+import { defineComponent, h, onBeforeUnmount, ref, watchEffect } from 'vue'
+
+import { checkPlacement } from '../_util/placement'
+import { visuallyHiddenRangeInput } from '../_util/visually-hidden-range-input'
+
+import { useSliderContext } from './context'
+
+/**
+ * The thumb, placed at the value. The ARIA (`aria-label` and friends) lands
+ * on the range input inside it, which is the control and takes the focus.
+ */
+export const SliderThumb = /* @__PURE__ */ defineComponent({
+  name: 'SliderThumb',
+  inheritAttrs: false,
+  props: {
+    /** Sets `--color`, for the theme to colour the thumb with. */
+    color: String,
+  },
+  setup(props, { slots, attrs, expose }) {
+    const slider = useSliderContext()
+    checkPlacement('SliderThumb', 'SliderTrack')
+    const input = ref<HTMLInputElement | null>(null)
+    watchEffect(() => slider.setThumb(input.value))
+    onBeforeUnmount(() => slider.setThumb(null))
+
+    expose({
+      focus: () => {
+        if (!slider.disabled) input.value?.focus()
+      },
+      blur: () => input.value?.blur(),
+    })
+
+    return () => {
+      const {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        'aria-describedby': ariaDescribedby,
+        'aria-valuetext': ariaValuetext,
+        style,
+        ...rest
+      } = attrs
+      return h(
+        'div',
+        {
+          'data-disabled': slider.disabled ? '' : undefined,
+          'data-readonly': slider.readonly ? '' : undefined,
+          ...rest,
+          // Placed by a percentage of the track, measured from its own
+          // centre; where it sits comes after the caller's style.
+          style: [
+            {
+              position: 'absolute',
+              translate: 'var(--translate, -50% -50%)',
+              zIndex: 100,
+              '--color': props.color,
+            },
+            style,
+            {
+              top: slider.vertical ? `${slider.percent}%` : '50%',
+              left: slider.vertical ? '50%' : `${slider.percent}%`,
+            },
+          ],
+        },
+        [
+          visuallyHiddenRangeInput({
+            ref: input,
+            value: slider.value,
+            min: slider.min,
+            max: slider.max,
+            step: slider.step,
+            disabled: slider.disabled,
+            'aria-readonly': slider.readonly,
+            'aria-orientation': slider.vertical ? 'vertical' : 'horizontal',
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+            'aria-describedby': ariaDescribedby,
+            'aria-valuetext': ariaValuetext,
+            onInput: (event: Event) => {
+              const target = event.target as HTMLInputElement
+              if (slider.readonly) {
+                target.value = String(slider.value)
+                return
+              }
+              slider.change(target.valueAsNumber)
+            },
+          }),
+          slots.default?.(),
+        ],
+      )
+    }
+  },
+})

package/src/components/Slider/SliderTrack.ts

@@ -0,0 +1,50 @@
+import { defineComponent, h, onBeforeUnmount, ref, watchEffect } from 'vue'
+
+import { cssLength } from '@tremolo-ui/dom'
+
+import { providePlacement } from '../_util/placement'
+
+import { useSliderContext } from './context'
+
+/** The track the thumb runs along, and what the pointer is measured against. */
+export const SliderTrack = /* @__PURE__ */ defineComponent({
+  name: 'SliderTrack',
+  props: {
+    /** How long the track is along the axis the slider runs. Sets `--length`. */
+    length: [Number, String],
+    /** How thick the track is across that axis. Sets `--thickness`. */
+    thickness: [Number, String],
+    /** Colour of the part from `min` to the value. Sets `--active`. */
+    active: String,
+    /** Colour of the rest of the track. Sets `--inactive`. */
+    inactive: String,
+  },
+  setup(props, { slots }) {
+    const slider = useSliderContext()
+    providePlacement('SliderTrack')
+    const el = ref<HTMLDivElement | null>(null)
+    watchEffect(() => slider.setTrack(el.value))
+    onBeforeUnmount(() => slider.setTrack(null))
+    // `--percent` is where the value sits, for the theme to paint the fill
+    // with: the one number CSS cannot work out on its own.
+    return () =>
+      h(
+        'div',
+        {
+          ref: el,
+          'data-disabled': slider.disabled ? '' : undefined,
+          'data-orientation': slider.vertical ? 'vertical' : 'horizontal',
+          'data-flipped': slider.vertical !== slider.reverse ? '' : undefined,
+          style: {
+            '--active': props.active,
+            '--inactive': props.inactive,
+            '--length': cssLength(props.length),
+            '--thickness': cssLength(props.thickness),
+            '--percent': `${slider.percent}%`,
+            position: 'relative',
+          },
+        },
+        slots.default?.(),
+      )
+  },
+})

package/src/components/Slider/context.ts

@@ -0,0 +1,33 @@
+import { type InjectionKey } from 'vue'
+
+import { type Scale } from '@tremolo-ui/functions'
+
+import { injectContext } from '../_util/context'
+
+/** What `Slider` shares with its parts. The fields are getters. */
+export interface SliderContextValue {
+  readonly value: number
+  readonly min: number
+  readonly max: number
+  readonly step: number
+  readonly scale: Scale
+  readonly vertical: boolean
+  readonly reverse: boolean
+  readonly disabled: boolean
+  readonly readonly: boolean
+  /** Where the value sits along the track, as a percentage from the top or left. */
+  readonly percent: number
+  /** Set the value, as an input on the slider would. */
+  change: (value: number) => void
+  /** @internal `SliderTrack` registers the element the pointer is measured against. */
+  setTrack: (element: HTMLElement | null) => void
+  /** @internal `SliderThumb` registers the input the focus goes to. */
+  setThumb: (input: HTMLInputElement | null) => void
+}
+
+export const SliderKey: InjectionKey<SliderContextValue> = Symbol('Slider')
+
+/** The context of the enclosing `Slider`, for a part of your own. */
+export function useSliderContext(): SliderContextValue {
+  return injectContext(SliderKey, 'Slider')
+}

package/src/components/Slider/index.ts

@@ -0,0 +1,6 @@
+export { useSliderContext, type SliderContextValue } from './context'
+export { Slider } from './Slider'
+export { SliderMarks } from './SliderMarks'
+export { SliderMarksOption } from './SliderMarksOption'
+export { SliderThumb } from './SliderThumb'
+export { SliderTrack } from './SliderTrack'

package/src/components/XYPad/XYPad.ts

@@ -0,0 +1,250 @@
+import { computed, defineComponent, h, provide, ref, type PropType } from 'vue'
+
+import {
+  applyDelta,
+  arrowKeyMove,
+  elementMapping,
+  selectModifier,
+  toXY,
+  valuePercent,
+  wheelMove,
+  type AxisMove,
+  type AxisOptions,
+  type InputEventOption,
+  type ModifierState,
+  type ModifierValue,
+  type XY,
+  type XYInput,
+} from '@tremolo-ui/dom'
+import { linearScale, type Scale } from '@tremolo-ui/functions'
+
+import { useDragValue } from '../../composables/useDragValue'
+import { useWheel } from '../../composables/useWheel'
+import { dragSensitivityProp, keyboardProp, wheelProp } from '../_util/props'
+import { useCheckSteps } from '../_util/useCheckSteps'
+
+import { XYPadKey } from './context'
+
+/**
+ * Two-dimensional slider. The per-axis settings are `[x, y]` tuples, and a
+ * plain value applies to both axes. Bind the value with `v-model`.
+ */
+export const XYPad = /* @__PURE__ */ defineComponent({
+  name: 'XYPad',
+  props: {
+    /** The current value as `[x, y]`. Bind it with `v-model`. */
+    modelValue: {
+      type: Array as unknown as PropType<XY<number>>,
+      required: true,
+    },
+    /** The value at the start of the travel, per axis. */
+    min: {
+      type: [Number, Array] as PropType<XYInput<number>>,
+      required: true,
+    },
+    /** The value at the end of the travel, per axis. */
+    max: {
+      type: [Number, Array] as PropType<XYInput<number>>,
+      required: true,
+    },
+    /** Granularity of the value, per axis. @default 1 */
+    step: { type: [Number, Array] as PropType<XYInput<number>>, default: 1 },
+    /** How the value is distributed, per axis. @default linearScale */
+    scale: {
+      type: [Object, Array] as PropType<XYInput<Scale>>,
+      default: () => linearScale,
+    },
+    /** Grow the value the other way, per axis. `y` grows downwards unless reversed. */
+    reverse: {
+      type: [Boolean, Array] as PropType<XYInput<boolean>>,
+      default: false,
+    },
+    /** The cursor to show while dragging. @default { cursor: 'pointer' } */
+    externalStyles: Object as PropType<{ cursor?: string }>,
+    wheel: wheelProp,
+    keyboard: keyboardProp,
+    dragSensitivity: dragSensitivityProp,
+    /** Make the pad unchangeable and remove it from the tab order. */
+    disabled: Boolean,
+    /** Make the value unchangeable. */
+    readonly: Boolean,
+  },
+  emits: {
+    'update:modelValue': (value: XY<number>) => Array.isArray(value),
+    dragStart: (value: XY<number>) => Array.isArray(value),
+    dragEnd: (value: XY<number>) => Array.isArray(value),
+  },
+  setup(props, { slots, emit, expose }) {
+    const root = ref<HTMLDivElement | null>(null)
+    let area: HTMLElement | null = null
+    let thumb: HTMLInputElement | null = null
+
+    const inactive = computed(() => props.disabled || props.readonly)
+    const min = computed(() => toXY(props.min))
+    const max = computed(() => toXY(props.max))
+    const step = computed(() => toXY(props.step))
+    const scale = computed(() => toXY(props.scale))
+    const reverse = computed(() => toXY(props.reverse))
+    const percent = computed(
+      () =>
+        [0, 1].map((i) =>
+          valuePercent(
+            props.modelValue[i],
+            { min: min.value[i], max: max.value[i], scale: scale.value[i] },
+            reverse.value[i],
+          ),
+        ) as XY<number>,
+    )
+    // `reverse` only concerns the drag, where positions follow the screen; the
+    // key and wheel handlers flip the direction themselves.
+    const axis = computed(
+      () =>
+        [0, 1].map((i) => ({
+          min: min.value[i],
+          max: max.value[i],
+          step: step.value[i],
+          scale: scale.value[i],
+          reverse: reverse.value[i],
+        })) as XY<AxisOptions>,
+    )
+
+    for (const [i, name] of [
+      [0, 'x'],
+      [1, 'y'],
+    ] as const) {
+      useCheckSteps(() => ({
+        component: 'XYPad',
+        axis: name,
+        range: axis.value[i],
+        keyboard: props.keyboard,
+        wheel: props.wheel,
+      }))
+    }
+
+    const change = (next: XY<number>) => emit('update:modelValue', next)
+
+    /** Move one axis by one press of `option`, in screen coordinates. */
+    function nudge(
+      { axis: i, direction }: AxisMove,
+      option: ModifierValue<InputEventOption>,
+      modifiers: ModifierState,
+    ) {
+      const value = props.modelValue
+      const next = applyDelta(
+        value[i],
+        reverse.value[i] ? -direction : direction,
+        option,
+        axis.value[i],
+        modifiers,
+      )
+      change(i === 0 ? [next, value[1]] : [value[0], next])
+    }
+
+    provide(XYPadKey, {
+      get value() {
+        return props.modelValue
+      },
+      get min() {
+        return min.value
+      },
+      get max() {
+        return max.value
+      },
+      get step() {
+        return step.value
+      },
+      get scale() {
+        return scale.value
+      },
+      get reverse() {
+        return reverse.value
+      },
+      get disabled() {
+        return props.disabled
+      },
+      get readonly() {
+        return props.readonly
+      },
+      get percent() {
+        return percent.value
+      },
+      change,
+      setArea: (element) => {
+        area = element
+      },
+      setThumb: (input) => {
+        thumb = input
+      },
+    })
+
+    useDragValue(root, () => ({
+      axis: axis.value,
+      mapping: elementMapping(() => area, {
+        sensitivity: (state) =>
+          selectModifier(props.dragSensitivity, state.event).value,
+      }),
+      updateOnPointerDown: true,
+      cursor: inactive.value
+        ? undefined
+        : (props.externalStyles?.cursor ?? 'pointer'),
+      shouldStart: () => !inactive.value,
+      onChange: (v) => {
+        if (!inactive.value) change(v)
+      },
+      onDragStart: (v) => {
+        if (inactive.value) return
+        thumb?.focus()
+        emit('dragStart', v)
+      },
+      onDragEnd: (v) => {
+        if (!inactive.value) emit('dragEnd', v)
+      },
+    }))
+
+    useWheel(
+      root,
+      (event) => {
+        if (!props.wheel || inactive.value) return
+        const move = wheelMove(event)
+        if (!move) return
+        event.preventDefault()
+        nudge(move, props.wheel, event)
+      },
+      { requireFocus: true },
+    )
+
+    expose({
+      focus: () => {
+        if (!props.disabled) thumb?.focus()
+      },
+      blur: () => thumb?.blur(),
+    })
+
+    return () =>
+      h(
+        'div',
+        {
+          ref: root,
+          role: 'group',
+          tabindex: -1,
+          'data-disabled': props.disabled ? '' : undefined,
+          'data-readonly': props.readonly ? '' : undefined,
+          onKeydown: (event: KeyboardEvent) => {
+            // The key picks the axis, whichever of the two inputs holds the
+            // focus: the focus lands on the x input.
+            const move = arrowKeyMove(event.key)
+            if (!move) return
+            event.preventDefault()
+            if (props.keyboard && !inactive.value) {
+              nudge(move, props.keyboard, event)
+            }
+          },
+          onFocus: () => {
+            if (!props.disabled) thumb?.focus()
+          },
+          onBlur: () => thumb?.blur(),
+        },
+        slots.default?.(),
+      )
+  },
+})

package/src/components/XYPad/XYPadArea.ts

@@ -0,0 +1,20 @@
+import { defineComponent, h, onBeforeUnmount, ref, watchEffect } from 'vue'
+
+import { providePlacement } from '../_util/placement'
+
+import { useXYPadContext } from './context'
+
+/** The area the thumb moves in, and what the pointer is measured against. */
+export const XYPadArea = /* @__PURE__ */ defineComponent({
+  name: 'XYPadArea',
+  setup(_, { slots }) {
+    const pad = useXYPadContext()
+    providePlacement('XYPadArea')
+    const el = ref<HTMLDivElement | null>(null)
+    watchEffect(() => pad.setArea(el.value))
+    onBeforeUnmount(() => pad.setArea(null))
+    // The thumb inside is placed against this box.
+    return () =>
+      h('div', { ref: el, style: { position: 'relative' } }, slots.default?.())
+  },
+})

package/src/components/XYPad/XYPadThumb.ts

@@ -0,0 +1,105 @@
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  ref,
+  watchEffect,
+  type PropType,
+} from 'vue'
+
+import { toXY, type XYInput } from '@tremolo-ui/dom'
+
+import { checkPlacement } from '../_util/placement'
+import { visuallyHiddenRangeInput } from '../_util/visually-hidden-range-input'
+
+import { useXYPadContext } from './context'
+
+type PerAxis = XYInput<string | undefined>
+
+/** The thumb, placed at the value, with one range input per axis inside. */
+export const XYPadThumb = /* @__PURE__ */ defineComponent({
+  name: 'XYPadThumb',
+  inheritAttrs: false,
+  props: {
+    /** Sets `--color`, for the theme to colour the thumb with. */
+    color: String,
+    /** The accessible name of each axis, as `[x, y]`. */
+    ariaLabel: [String, Array] as PropType<PerAxis>,
+    /** The ids of what labels each axis, as `[x, y]` or one for both. */
+    ariaLabelledby: [String, Array] as PropType<PerAxis>,
+    /** The ids of what describes each axis, as `[x, y]` or one for both. */
+    ariaDescribedby: [String, Array] as PropType<PerAxis>,
+    /** What the value of each axis means, as `[x, y]` or one for both. */
+    ariaValuetext: [String, Array] as PropType<PerAxis>,
+  },
+  setup(props, { slots, attrs, expose }) {
+    const pad = useXYPadContext()
+    checkPlacement('XYPadThumb', 'XYPadArea')
+    const x = ref<HTMLInputElement | null>(null)
+    const y = ref<HTMLInputElement | null>(null)
+    watchEffect(() => pad.setThumb(x.value))
+    onBeforeUnmount(() => pad.setThumb(null))
+
+    expose({
+      focus: () => {
+        if (!pad.disabled) x.value?.focus()
+      },
+      blur: () => {
+        x.value?.blur()
+        y.value?.blur()
+      },
+    })
+
+    function input(axis: 0 | 1) {
+      const labels = toXY(props.ariaLabel)
+      return visuallyHiddenRangeInput({
+        ref: axis === 0 ? x : y,
+        'data-axis': axis === 0 ? 'x' : 'y',
+        value: pad.value[axis],
+        min: pad.min[axis],
+        max: pad.max[axis],
+        step: pad.step[axis],
+        disabled: pad.disabled,
+        'aria-readonly': pad.readonly,
+        'aria-orientation': axis === 0 ? 'horizontal' : 'vertical',
+        'aria-label': labels[axis] ?? (axis === 0 ? 'x' : 'y'),
+        'aria-labelledby': toXY(props.ariaLabelledby)[axis],
+        'aria-describedby': toXY(props.ariaDescribedby)[axis],
+        'aria-valuetext': toXY(props.ariaValuetext)[axis],
+        onInput: (event: Event) => {
+          const target = event.target as HTMLInputElement
+          if (pad.readonly) {
+            target.value = String(pad.value[axis])
+            return
+          }
+          const next = [...pad.value] as [number, number]
+          next[axis] = target.valueAsNumber
+          pad.change(next)
+        },
+      })
+    }
+
+    return () => {
+      const { style, ...rest } = attrs
+      return h(
+        'div',
+        {
+          'data-disabled': pad.disabled ? '' : undefined,
+          'data-readonly': pad.readonly ? '' : undefined,
+          ...rest,
+          style: [
+            {
+              position: 'absolute',
+              translate: 'var(--translate, -50% -50%)',
+              zIndex: 100,
+              '--color': props.color,
+            },
+            style,
+            { left: `${pad.percent[0]}%`, top: `${pad.percent[1]}%` },
+          ],
+        },
+        [input(0), input(1), slots.default?.()],
+      )
+    }
+  },
+})

package/src/components/XYPad/context.ts

@@ -0,0 +1,33 @@
+import { type InjectionKey } from 'vue'
+
+import { type XY } from '@tremolo-ui/dom'
+import { type Scale } from '@tremolo-ui/functions'
+
+import { injectContext } from '../_util/context'
+
+/** What `XYPad` shares with its parts. The fields are getters. */
+export interface XYPadContextValue {
+  readonly value: XY<number>
+  readonly min: XY<number>
+  readonly max: XY<number>
+  readonly step: XY<number>
+  readonly scale: XY<Scale>
+  readonly reverse: XY<boolean>
+  readonly disabled: boolean
+  readonly readonly: boolean
+  /** Where the value sits in the area, as percentages from the left and top. */
+  readonly percent: XY<number>
+  /** Set the value, as an input on the pad would. */
+  change: (value: XY<number>) => void
+  /** @internal `XYPadArea` registers the element the pointer is measured against. */
+  setArea: (element: HTMLElement | null) => void
+  /** @internal `XYPadThumb` registers the input the focus goes to. */
+  setThumb: (input: HTMLInputElement | null) => void
+}
+
+export const XYPadKey: InjectionKey<XYPadContextValue> = Symbol('XYPad')
+
+/** The context of the enclosing `XYPad`, for a part of your own. */
+export function useXYPadContext(): XYPadContextValue {
+  return injectContext(XYPadKey, 'XYPad')
+}

package/src/components/XYPad/index.ts

@@ -0,0 +1,4 @@
+export { useXYPadContext, type XYPadContextValue } from './context'
+export { XYPad } from './XYPad'
+export { XYPadArea } from './XYPadArea'
+export { XYPadThumb } from './XYPadThumb'

package/src/components/_util/context.ts

@@ -0,0 +1,8 @@
+import { inject, type InjectionKey } from 'vue'
+
+/** Read a component's context, or explain which parent is missing. */
+export function injectContext<T>(key: InjectionKey<T>, parent: string): T {
+  const context = inject(key, null)
+  if (!context) throw new Error(`Missing ${parent} in the tree`)
+  return context
+}