@tremolo-ui/vue 0.7.0

package/src/components/PointsEditor/PointsEditorPoint.ts

@@ -0,0 +1,253 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  ref,
+  useId,
+  watch,
+  type PropType,
+} from 'vue'
+
+import {
+  arrowKeyMove,
+  clampPoint,
+  createDragValue,
+  elementMapping,
+  POINT_AXIS,
+  selectModifier,
+  type InputEventOption,
+  type ModifierValue,
+  type PointPosition,
+  type PointsEditorPoint as PointRegistration,
+} from '@tremolo-ui/dom'
+
+import { checkPlacement } from '../_util/placement'
+import { visuallyHiddenRangeInput } from '../_util/visually-hidden-range-input'
+
+import { usePointsEditorContext } from './context'
+
+type PerAxis = string | Partial<Record<'x' | 'y', string>>
+
+const perAxis = (setting: PerAxis | undefined, axis: 'x' | 'y') =>
+  typeof setting === 'string' ? setting : setting?.[axis]
+
+/** One point, bound with `v-model` as `{ x, y }` from 0 to 1. */
+export const PointsEditorPoint = /* @__PURE__ */ defineComponent({
+  name: 'PointsEditorPoint',
+  inheritAttrs: false,
+  props: {
+    /** Where the point is, with `y` growing downwards. Bind it with `v-model`. */
+    modelValue: { type: Object as PropType<PointPosition>, required: true },
+    /** How the selection refers to this point. One is generated when left out. */
+    id: String,
+    /** The lowest position the point can take, per axis. */
+    min: Object as PropType<Partial<PointPosition>>,
+    /** The highest position the point can take, per axis. */
+    max: Object as PropType<Partial<PointPosition>>,
+    /** Sets `--color`, for the theme to colour the point with. */
+    color: String,
+    /** Overrides the `disabled` of `PointsEditor`. */
+    disabled: { type: Boolean, default: undefined },
+    /** Overrides the `readonly` of `PointsEditor`. */
+    readonly: { type: Boolean, default: undefined },
+    /** Overrides the `wheel` of `PointsEditor`; `null` turns it off. */
+    wheel: {
+      type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
+      default: undefined,
+    },
+    /** Overrides the `keyboard` of `PointsEditor`; `null` turns it off. */
+    keyboard: {
+      type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
+      default: undefined,
+    },
+    /** The accessible name of each axis, or one for both. */
+    ariaLabel: [String, Object] as PropType<PerAxis>,
+    /** What the value of each axis means, or one for both. */
+    ariaValuetext: [String, Object] as PropType<PerAxis>,
+  },
+  emits: {
+    'update:modelValue': (value: PointPosition) => typeof value === 'object',
+    dragStart: (value: PointPosition) => typeof value === 'object',
+    dragEnd: (value: PointPosition) => typeof value === 'object',
+  },
+  setup(props, { slots, attrs, emit }) {
+    const points = usePointsEditorContext()
+    checkPlacement('PointsEditorPoint', 'PointsEditorContainer')
+
+    const generatedId = useId()
+    const id = computed(() => props.id ?? generatedId)
+    const disabled = computed(() => props.disabled ?? points.disabled)
+    const readonly = computed(() => props.readonly ?? points.readonly)
+    const inactive = computed(() => disabled.value || readonly.value)
+    const wheel = computed(() =>
+      props.wheel === undefined ? points.wheel : props.wheel,
+    )
+    const keyboard = computed(() =>
+      props.keyboard === undefined ? points.keyboard : props.keyboard,
+    )
+    const current = computed(() =>
+      clampPoint(props.modelValue, props.min, props.max),
+    )
+
+    const el = ref<HTMLDivElement | null>(null)
+    const x = ref<HTMLInputElement | null>(null)
+    const dragging = ref(false)
+
+    // Read by the editor whenever it moves the selection, so the value can
+    // change on every frame of a drag without registering again.
+    const read = (): PointRegistration => ({
+      value: props.modelValue,
+      min: props.min,
+      max: props.max,
+      readonly: inactive.value,
+      onChange: (next) => emit('update:modelValue', next),
+      element: el.value,
+      wheel: wheel.value,
+    })
+    watch(
+      id,
+      (key, _, onCleanup) => onCleanup(points.editor.registerPoint(key, read)),
+      { immediate: true },
+    )
+
+    /** Where the pointer was when the drag started. */
+    let origin: PointPosition | null = null
+
+    watch(
+      el,
+      (element, _, onCleanup) => {
+        if (!element) return
+        // The value is the position itself: no scaling, and no rounding.
+        const drag = createDragValue(element, {
+          axis: POINT_AXIS,
+          mapping: elementMapping(() => points.container, {
+            sensitivity: (state) =>
+              selectModifier(points.dragSensitivity, state.event).value,
+          }),
+          cursor: inactive.value ? undefined : points.cursor,
+          shouldStart: () => !disabled.value,
+          // A move rather than a position: the point keeps the offset it was
+          // grabbed at, and everything else selected moves with it.
+          onChange: ([px, py]) => {
+            if (origin) {
+              points.editor.movePointDrag({
+                x: px - origin.x,
+                y: py - origin.y,
+              })
+            }
+          },
+          onDragStart: ([px, py], state) => {
+            points.editor.beginPointDrag(id.value, state.event)
+            origin = { x: px, y: py }
+            dragging.value = true
+            x.value?.focus()
+            if (!inactive.value) emit('dragStart', current.value)
+          },
+          onDragEnd: () => {
+            origin = null
+            dragging.value = false
+            if (!inactive.value) emit('dragEnd', current.value)
+          },
+        })
+        const stop = watch(
+          () => (inactive.value ? undefined : points.cursor),
+          (cursor) => drag.update({ cursor }),
+        )
+        onCleanup(() => {
+          stop()
+          drag.destroy()
+        })
+      },
+      { immediate: true, flush: 'post' },
+    )
+
+    function onInput(axis: 'x' | 'y', target: HTMLInputElement) {
+      if (readonly.value) {
+        target.value = String(current.value[axis])
+        return
+      }
+      const delta = target.valueAsNumber - props.modelValue[axis]
+      points.editor.nudgeSelection(id.value, {
+        x: axis === 'x' ? delta : 0,
+        y: axis === 'y' ? delta : 0,
+      })
+    }
+
+    const input = (axis: 'x' | 'y') =>
+      visuallyHiddenRangeInput({
+        ref: axis === 'x' ? x : undefined,
+        'data-axis': axis,
+        value: current.value[axis],
+        min: props.min?.[axis] ?? 0,
+        max: props.max?.[axis] ?? 1,
+        step: 'any',
+        disabled: disabled.value,
+        'aria-readonly': readonly.value,
+        'aria-orientation': axis === 'x' ? 'horizontal' : 'vertical',
+        'aria-label': perAxis(props.ariaLabel, axis) ?? axis,
+        'aria-valuetext': perAxis(props.ariaValuetext, axis),
+        onInput: (event: Event) =>
+          onInput(axis, event.target as HTMLInputElement),
+      })
+
+    // The visual point has two values, so its semantics live on the two
+    // range inputs inside it. tabindex -1 keeps the focus inside when a press
+    // lands on the point itself.
+    return () => {
+      const { style, onFocus, onKeydown, ...rest } = attrs
+      return h(
+        'div',
+        {
+          ref: el,
+          tabindex: -1,
+          'data-disabled': disabled.value ? '' : undefined,
+          'data-readonly': readonly.value ? '' : undefined,
+          'data-dragging': dragging.value ? '' : undefined,
+          'data-selected': points.selection.includes(id.value) ? '' : undefined,
+          ...rest,
+          style: [
+            {
+              position: 'absolute',
+              translate: 'var(--translate, -50% -50%)',
+              '--color': props.color,
+            },
+            style,
+            {
+              left: `${props.modelValue.x * 100}%`,
+              top: `${props.modelValue.y * 100}%`,
+            },
+          ],
+          // Merged with the caller's own, which run after these.
+          ...mergeProps(
+            {
+              onFocus: (event: FocusEvent) => {
+                // The point is not the control: what reaches it goes to the input.
+                if (!disabled.value && event.target === event.currentTarget) {
+                  x.value?.focus()
+                }
+              },
+              onKeydown: (event: KeyboardEvent) => {
+                // The key picks the axis, whichever input holds the focus. y grows
+                // downwards, so ArrowUp moves the point towards 0.
+                const move = arrowKeyMove(event.key)
+                if (!move) return
+                event.preventDefault()
+                if (inactive.value || !keyboard.value) return
+                points.editor.nudgePoint(
+                  id.value,
+                  move.axis === 0 ? 'x' : 'y',
+                  move.direction,
+                  keyboard.value,
+                  event,
+                )
+              },
+            },
+            { onFocus, onKeydown },
+          ),
+        },
+        [input('x'), input('y'), slots.default?.()],
+      )
+    }
+  },
+})

package/src/components/PointsEditor/PointsEditorSelectionBox.ts

@@ -0,0 +1,36 @@
+import { defineComponent, h } from 'vue'
+
+import { checkPlacement } from '../_util/placement'
+
+import { usePointsEditorContext } from './context'
+
+/**
+ * The box a drag on empty space draws. Nothing is rendered while no drag is
+ * running, and it takes none of the pointer.
+ */
+export const PointsEditorSelectionBox = /* @__PURE__ */ defineComponent({
+  name: 'PointsEditorSelectionBox',
+  setup(_, { slots }) {
+    const points = usePointsEditorContext()
+    checkPlacement('PointsEditorSelectionBox', 'PointsEditorContainer')
+    return () => {
+      const box = points.selectionBox
+      if (!box) return null
+      return h(
+        'div',
+        {
+          style: {
+            position: 'absolute',
+            zIndex: 20,
+            pointerEvents: 'none',
+            left: `${box.x * 100}%`,
+            top: `${box.y * 100}%`,
+            width: `${box.width * 100}%`,
+            height: `${box.height * 100}%`,
+          },
+        },
+        slots.default?.(),
+      )
+    }
+  },
+})

package/src/components/PointsEditor/context.ts

@@ -0,0 +1,39 @@
+import { type InjectionKey } from 'vue'
+
+import {
+  type InputEventOption,
+  type ModifierValue,
+  type PointsEditorInstance,
+  type SelectionBoxRect,
+} from '@tremolo-ui/dom'
+
+import { injectContext } from '../_util/context'
+
+/** What `PointsEditor` shares with its parts. The fields are getters. */
+export interface PointsEditorContextValue {
+  readonly disabled: boolean
+  readonly readonly: boolean
+  readonly wheel: ModifierValue<InputEventOption> | null
+  readonly keyboard: ModifierValue<InputEventOption> | null
+  readonly dragSensitivity: ModifierValue<number>
+  readonly cursor: string
+  readonly selectable: boolean
+  /** Ids of the selected points. Always empty while `selectable` is off. */
+  readonly selection: readonly string[]
+  /** The selection box, while one is being dragged. */
+  readonly selectionBox: SelectionBoxRect | null
+  /** The element points are placed in and measured against. */
+  readonly container: HTMLElement | null
+  /** The selection and the moves, from `createPointsEditor` in `@tremolo-ui/dom`. */
+  readonly editor: PointsEditorInstance
+  /** @internal `PointsEditorContainer` registers its element. */
+  setContainer: (element: HTMLElement | null) => void
+}
+
+export const PointsEditorKey: InjectionKey<PointsEditorContextValue> =
+  Symbol('PointsEditor')
+
+/** The context of the enclosing `PointsEditor`, for a part of your own. */
+export function usePointsEditorContext(): PointsEditorContextValue {
+  return injectContext(PointsEditorKey, 'PointsEditor')
+}

package/src/components/PointsEditor/index.ts

@@ -0,0 +1,9 @@
+export {
+  usePointsEditorContext,
+  type PointsEditorContextValue,
+} from './context'
+export { PointsEditor } from './PointsEditor'
+export { PointsEditorBackground } from './PointsEditorBackground'
+export { PointsEditorContainer } from './PointsEditorContainer'
+export { PointsEditorPoint } from './PointsEditorPoint'
+export { PointsEditorSelectionBox } from './PointsEditorSelectionBox'

package/src/components/Slider/Slider.ts

@@ -0,0 +1,224 @@
+import { computed, defineComponent, h, provide, ref, type PropType } from 'vue'
+
+import {
+  applyDelta,
+  arrowKeyDirection,
+  elementMapping,
+  selectModifier,
+  valuePercent,
+  wheelDirection,
+  type AxisOptions,
+  type XY,
+} 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 { SliderKey } from './context'
+
+/** Customizable slider. Bind the value with `v-model`. */
+export const Slider = /* @__PURE__ */ defineComponent({
+  name: 'Slider',
+  props: {
+    /** The current value. Bind it with `v-model`. */
+    modelValue: { type: Number, required: true },
+    /** The value at the start of the travel. */
+    min: { type: Number, required: true },
+    /** The value at the end of the travel. */
+    max: { type: Number, required: true },
+    /** Granularity of the value. @default 1 */
+    step: { type: Number, default: 1 },
+    /** How the value is distributed across the travel. @default linearScale */
+    scale: { type: Object as PropType<Scale>, default: () => linearScale },
+    /** Run the slider vertically, with the value growing upwards. */
+    vertical: Boolean,
+    /** Grow the value the other way. */
+    reverse: Boolean,
+    /** The cursor to show while dragging. @default { cursor: 'pointer' } */
+    externalStyles: Object as PropType<{ cursor?: string }>,
+    wheel: wheelProp,
+    keyboard: keyboardProp,
+    dragSensitivity: dragSensitivityProp,
+    /** Make the slider unchangeable and remove it from the tab order. */
+    disabled: Boolean,
+    /** Make the value unchangeable. */
+    readonly: Boolean,
+  },
+  emits: {
+    'update:modelValue': (value: number) => typeof value === 'number',
+    /** A drag started, with the value where the track was pressed. */
+    dragStart: (value: number) => typeof value === 'number',
+    /** The drag ended, with the value it ended on. */
+    dragEnd: (value: number) => typeof value === 'number',
+  },
+  setup(props, { slots, emit, expose }) {
+    const root = ref<HTMLDivElement | null>(null)
+    let track: HTMLElement | null = null
+    let thumb: HTMLInputElement | null = null
+
+    const inactive = computed(() => props.disabled || props.readonly)
+    // Measured from the left or the top, as CSS places things: vertical and
+    // reverse each flip it, and together they cancel out.
+    const displayReversed = computed(() => props.vertical !== props.reverse)
+    const percent = computed(() =>
+      valuePercent(
+        props.modelValue,
+        { min: props.min, max: props.max, scale: props.scale },
+        displayReversed.value,
+      ),
+    )
+    const axis = computed((): AxisOptions => ({
+      min: props.min,
+      max: props.max,
+      step: props.step,
+      scale: props.scale,
+      reverse: displayReversed.value,
+    }))
+
+    useCheckSteps(() => ({
+      component: 'Slider',
+      range: axis.value,
+      keyboard: props.keyboard,
+      wheel: props.wheel,
+    }))
+
+    const change = (next: number) => emit('update:modelValue', next)
+
+    provide(SliderKey, {
+      get value() {
+        return props.modelValue
+      },
+      get min() {
+        return props.min
+      },
+      get max() {
+        return props.max
+      },
+      get step() {
+        return props.step
+      },
+      get scale() {
+        return props.scale
+      },
+      get vertical() {
+        return props.vertical
+      },
+      get reverse() {
+        return props.reverse
+      },
+      get disabled() {
+        return props.disabled
+      },
+      get readonly() {
+        return props.readonly
+      },
+      get percent() {
+        return percent.value
+      },
+      change,
+      setTrack: (element) => {
+        track = element
+      },
+      setThumb: (input) => {
+        thumb = input
+      },
+    })
+
+    const valueOf = (v: XY<number>) => v[props.vertical ? 1 : 0]
+
+    useDragValue(root, () => ({
+      axis: axis.value,
+      mapping: elementMapping(() => track, {
+        sensitivity: (state) =>
+          selectModifier(props.dragSensitivity, state.event).value,
+      }),
+      cursor: inactive.value
+        ? undefined
+        : (props.externalStyles?.cursor ?? 'pointer'),
+      shouldStart: () => !inactive.value,
+      updateOnPointerDown: true,
+      onChange: (v) => {
+        if (!inactive.value) change(valueOf(v))
+      },
+      onDragStart: (v) => {
+        if (inactive.value) return
+        thumb?.focus()
+        emit('dragStart', valueOf(v))
+      },
+      onDragEnd: (v) => {
+        if (!inactive.value) emit('dragEnd', valueOf(v))
+      },
+    }))
+
+    useWheel(
+      root,
+      (event) => {
+        if (!props.wheel || inactive.value) return
+        // A notch the slider does not read — a sideways scroll on a vertical
+        // slider — is left to the page rather than swallowed.
+        const direction = wheelDirection(event, { horizontal: !props.vertical })
+        if (direction === null) return
+        event.preventDefault()
+        change(
+          applyDelta(
+            props.modelValue,
+            props.reverse ? -direction : direction,
+            props.wheel,
+            axis.value,
+            event,
+          ),
+        )
+      },
+      { requireFocus: true },
+    )
+
+    expose({
+      /** Move the focus to the thumb. */
+      focus: () => {
+        if (!props.disabled) thumb?.focus()
+      },
+      /** Take the focus away from the thumb. */
+      blur: () => thumb?.blur(),
+    })
+
+    // The group is the pointer and keyboard event area; the range input in
+    // the thumb carries the control semantics. A press lands on the track or
+    // the thumb, neither of which can hold focus, and the browser answers that
+    // by clearing the focus — tabindex -1 keeps it inside.
+    return () =>
+      h(
+        'div',
+        {
+          ref: root,
+          role: 'group',
+          tabindex: -1,
+          'data-orientation': props.vertical ? 'vertical' : 'horizontal',
+          'data-disabled': props.disabled ? '' : undefined,
+          'data-readonly': props.readonly ? '' : undefined,
+          onKeydown: (event: KeyboardEvent) => {
+            const direction = arrowKeyDirection(event.key)
+            if (direction === null) return
+            event.preventDefault()
+            if (!props.keyboard || inactive.value) return
+            change(
+              applyDelta(
+                props.modelValue,
+                props.reverse ? -direction : direction,
+                props.keyboard,
+                axis.value,
+                event,
+              ),
+            )
+          },
+          onFocus: () => {
+            if (!props.disabled) thumb?.focus()
+          },
+          onBlur: () => thumb?.blur(),
+        },
+        slots.default?.(),
+      )
+  },
+})

package/src/components/Slider/SliderMarks.ts

@@ -0,0 +1,57 @@
+import { computed, defineComponent, h, type PropType } from 'vue'
+
+import { cssLength, sliderMarks, type MarksOptions } from '@tremolo-ui/dom'
+
+import { providePlacement } from '../_util/placement'
+
+import { useSliderContext } from './context'
+import { SliderMarksOption } from './SliderMarksOption'
+
+/** The marks along the slider: written out as options, or built from `options`. */
+export const SliderMarks = /* @__PURE__ */ defineComponent({
+  name: 'SliderMarks',
+  props: {
+    /** Space between the marks and the track. Sets `--gap`. */
+    gap: [Number, String],
+    /**
+     * Build the marks instead of writing `SliderMarksOption` out: a number
+     * puts one every that many, `'step'` one every `step`. The default slot
+     * is ignored while it is set.
+     */
+    options: [String, Number, Object] as PropType<MarksOptions>,
+  },
+  setup(props, { slots }) {
+    const slider = useSliderContext()
+    providePlacement('SliderMarks')
+    const marks = computed(() => {
+      if (props.options === undefined) return []
+      const list = sliderMarks(
+        props.options,
+        slider.min,
+        slider.max,
+        slider.step,
+      )
+      // In the order they are on screen.
+      return slider.vertical !== slider.reverse ? list.reverse() : list
+    })
+    // Each option inside is placed against this box.
+    return () =>
+      h(
+        'div',
+        {
+          'data-orientation': slider.vertical ? 'vertical' : 'horizontal',
+          style: { '--gap': cssLength(props.gap), position: 'relative' },
+        },
+        props.options !== undefined
+          ? marks.value.map(({ value, mark, label }) =>
+              h(SliderMarksOption, {
+                key: value,
+                value,
+                mark,
+                label: label ? undefined : null,
+              }),
+            )
+          : slots.default?.(),
+      )
+  },
+})