@tremolo-ui/vue 0.7.0

package/src/components/FileInput/FileInput.ts

@@ -0,0 +1,82 @@
+import { defineComponent, h, provide, useId } from 'vue'
+
+import { partitionByAccept, visuallyHiddenStyle } from '@tremolo-ui/dom'
+
+import { FileInputKey } from './context'
+
+/**
+ * Picks files. The control is the native file input, out of sight but in the
+ * tab order, with `FileInputTrigger` as its label.
+ */
+export const FileInput = /* @__PURE__ */ defineComponent({
+  name: 'FileInput',
+  inheritAttrs: false,
+  props: {
+    /**
+     * Which files to take: extensions, MIME types and type groups. It is
+     * checked again when the files arrive, since the picker only takes it as
+     * a hint.
+     */
+    accept: String,
+    /** Let several files be picked at once. */
+    multiple: Boolean,
+    /** Make the input unusable. The parts carry `data-disabled`. */
+    disabled: Boolean,
+  },
+  emits: {
+    /** The picked files that satisfy `accept`. */
+    change: (files: File[]) => Array.isArray(files),
+    /** The picked files that do not satisfy `accept`, after `change` for the same selection. */
+    reject: (files: File[]) => Array.isArray(files),
+  },
+  setup(props, { slots, emit, attrs }) {
+    const inputId = useId()
+    provide(FileInputKey, {
+      inputId,
+      get disabled() {
+        return props.disabled
+      },
+    })
+
+    function onChange(event: Event) {
+      const input = event.target as HTMLInputElement
+      const { accepted, rejected } = partitionByAccept(
+        Array.from(input.files ?? []),
+        props.accept,
+      )
+      // Picking the same file twice fires no second change while the value
+      // is still on the input, so it is cleared as soon as it is read.
+      input.value = ''
+      if (accepted.length > 0) emit('change', accepted)
+      if (rejected.length > 0) emit('reject', rejected)
+    }
+
+    return () => {
+      const {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        'aria-describedby': ariaDescribedby,
+        ...rest
+      } = attrs
+      return h(
+        'div',
+        { ...rest, 'data-disabled': props.disabled ? '' : undefined },
+        [
+          h('input', {
+            id: inputId,
+            type: 'file',
+            accept: props.accept,
+            multiple: props.multiple,
+            disabled: props.disabled,
+            style: visuallyHiddenStyle,
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+            'aria-describedby': ariaDescribedby,
+            onChange,
+          }),
+          slots.default?.(),
+        ],
+      )
+    }
+  },
+})

package/src/components/FileInput/FileInputTrigger.ts

@@ -0,0 +1,24 @@
+import { defineComponent, h } from 'vue'
+
+import { useFileInputContext } from './context'
+
+/**
+ * Opens the file picker and names the input. A `<label>` rather than a
+ * button: the browser forwards the click, the input stays the one thing in
+ * the tab order, and its name comes from this text.
+ */
+export const FileInputTrigger = /* @__PURE__ */ defineComponent({
+  name: 'FileInputTrigger',
+  setup(_, { slots }) {
+    const fileInput = useFileInputContext()
+    return () =>
+      h(
+        'label',
+        {
+          for: fileInput.inputId,
+          'data-disabled': fileInput.disabled ? '' : undefined,
+        },
+        slots.default?.(),
+      )
+  },
+})

package/src/components/FileInput/context.ts

@@ -0,0 +1,18 @@
+import { type InjectionKey } from 'vue'
+
+import { injectContext } from '../_util/context'
+
+/** What `FileInput` shares with `FileInputTrigger`. */
+export interface FileInputContextValue {
+  /** The id of the file input, for the trigger's `for`. */
+  readonly inputId: string
+  readonly disabled: boolean
+}
+
+export const FileInputKey: InjectionKey<FileInputContextValue> =
+  Symbol('FileInput')
+
+/** The context of the enclosing `FileInput`, for a part of your own. */
+export function useFileInputContext(): FileInputContextValue {
+  return injectContext(FileInputKey, 'FileInput')
+}

package/src/components/FileInput/index.ts

@@ -0,0 +1,3 @@
+export { useFileInputContext, type FileInputContextValue } from './context'
+export { FileInput } from './FileInput'
+export { FileInputTrigger } from './FileInputTrigger'

package/src/components/Knob/Knob.ts

@@ -0,0 +1,237 @@
+import { computed, defineComponent, h, provide, ref, type PropType } from 'vue'
+
+import {
+  applyDelta,
+  arrowKeyDirection,
+  cssLength,
+  DEFAULT_DRAG_SENSITIVITY,
+  DEFAULT_KEYBOARD_OPTIONS,
+  DEFAULT_WHEEL_OPTIONS,
+  knobAngles,
+  relativeMapping,
+  selectModifier,
+  wheelDirection,
+  type AxisOptions,
+  type InputEventOption,
+  type ModifierValue,
+  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 { useCheckSteps } from '../_util/useCheckSteps'
+
+import { KnobKey } from './context'
+
+/**
+ * Interactive rotary knob, drawn in SVG by `KnobSVGRoot` and the parts inside
+ * it. Bind the value with `v-model`.
+ */
+export const Knob = /* @__PURE__ */ defineComponent({
+  name: 'Knob',
+  props: {
+    /** The current value. Bind it with `v-model`. */
+    modelValue: { type: Number, required: true },
+    /** The value with the knob turned all the way down. */
+    min: { type: Number, required: true },
+    /** The value with the knob turned all the way up. */
+    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 },
+    /** The value a double click restores. @default min */
+    defaultValue: Number,
+    /** Where the active arc starts. @default min */
+    startValue: Number,
+    /** Width and height of the knob. Sets `--knob-size`. */
+    size: [Number, String],
+    /** The cursor to show while dragging. @default { cursor: 'grabbing' } */
+    externalStyles: Object as PropType<{ cursor?: string }>,
+    /** How much one notch of the wheel moves the value. `null` turns it off. */
+    wheel: {
+      type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
+      default: () => DEFAULT_WHEEL_OPTIONS,
+    },
+    /** How much one arrow key press moves the value. `null` turns it off. */
+    keyboard: {
+      type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
+      default: () => DEFAULT_KEYBOARD_OPTIONS,
+    },
+    /** How much a drag moves the value, per modifier key. */
+    dragSensitivity: {
+      type: [Number, Object] as PropType<ModifierValue<number>>,
+      default: () => DEFAULT_DRAG_SENSITIVITY,
+    },
+    /** Hide the cursor while dragging and read the movement directly. */
+    pointerLock: Boolean,
+    /** Restore `defaultValue` on a double click. @default true */
+    enableDoubleClickDefault: { type: Boolean, default: true },
+    /** Make the knob unchangeable and remove it from the tab order. */
+    disabled: Boolean,
+    /** Make the knob unchangeable while leaving it focusable. */
+    readonly: Boolean,
+    /** How far the knob turns from `min` to `max`, in degrees. @default 270 */
+    angleRange: { type: Number, default: 270 },
+  },
+  emits: {
+    'update:modelValue': (value: number) => typeof value === 'number',
+  },
+  setup(props, { slots, emit, expose }) {
+    const root = ref<HTMLDivElement | null>(null)
+    const dragging = ref(false)
+    const inactive = computed(() => props.disabled || props.readonly)
+    const range = computed(() => ({
+      min: props.min,
+      max: props.max,
+      step: props.step,
+      scale: props.scale,
+    }))
+    const angles = computed(() =>
+      knobAngles({
+        value: props.modelValue,
+        min: props.min,
+        max: props.max,
+        scale: props.scale,
+        startValue: props.startValue ?? props.min,
+        angleRange: props.angleRange,
+      }),
+    )
+
+    useCheckSteps(() => ({
+      component: 'Knob',
+      range: range.value,
+      keyboard: props.keyboard,
+      wheel: props.wheel,
+    }))
+
+    provide(KnobKey, {
+      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 startValue() {
+        return props.startValue ?? props.min
+      },
+      get angleRange() {
+        return props.angleRange
+      },
+      get angles() {
+        return angles.value
+      },
+    })
+
+    const change = (next: number) => emit('update:modelValue', next)
+
+    // The knob has no travel of its own: 100px of movement spans the whole
+    // range, and only the vertical axis carries a value, reversed so that
+    // dragging up raises it.
+    useDragValue(root, () => ({
+      axis: [range.value, { ...range.value, reverse: true }] as XY<AxisOptions>,
+      mapping: relativeMapping({
+        pixelRange: 100,
+        sensitivity: (state) =>
+          selectModifier(props.dragSensitivity, state.event).value,
+      }),
+      getValue: (): XY<number> => [props.modelValue, props.modelValue],
+      threshold: 1,
+      cursor: inactive.value
+        ? undefined
+        : (props.externalStyles?.cursor ?? 'grabbing'),
+      pointerLock: inactive.value ? false : props.pointerLock,
+      shouldStart: () => !inactive.value,
+      onChange: (v) => {
+        if (!inactive.value) change(v[1])
+      },
+      onDragStart: () => {
+        dragging.value = true
+      },
+      onDragEnd: () => {
+        dragging.value = false
+      },
+    }))
+
+    useWheel(
+      root,
+      (event) => {
+        if (!props.wheel || inactive.value) return
+        // A notch the knob does not read — a sideways scroll — is left to
+        // the page rather than swallowed.
+        const direction = wheelDirection(event)
+        if (direction === null) return
+        event.preventDefault()
+        change(
+          applyDelta(
+            props.modelValue,
+            direction,
+            props.wheel,
+            range.value,
+            event,
+          ),
+        )
+      },
+      { requireFocus: true },
+    )
+
+    expose({
+      /** Move the focus to the knob. */
+      focus: () => {
+        if (!props.disabled) root.value?.focus()
+      },
+      /** Take the focus away from the knob. */
+      blur: () => root.value?.blur(),
+    })
+
+    return () =>
+      h(
+        'div',
+        {
+          ref: root,
+          role: 'slider',
+          tabindex: props.disabled ? -1 : 0,
+          'aria-valuenow': props.modelValue,
+          'aria-valuemin': props.min,
+          'aria-valuemax': props.max,
+          'aria-disabled': props.disabled,
+          'aria-readonly': props.readonly,
+          'data-disabled': props.disabled ? '' : undefined,
+          'data-readonly': props.readonly ? '' : undefined,
+          'data-dragging': dragging.value ? '' : undefined,
+          style: { '--knob-size': cssLength(props.size) },
+          onKeydown: (event: KeyboardEvent) => {
+            if (!props.keyboard || inactive.value) return
+            const direction = arrowKeyDirection(event.key)
+            if (direction === null) return
+            event.preventDefault()
+            change(
+              applyDelta(
+                props.modelValue,
+                direction,
+                props.keyboard,
+                range.value,
+                event,
+              ),
+            )
+          },
+          onDblclick: () => {
+            if (!inactive.value && props.enableDoubleClickDefault) {
+              change(props.defaultValue ?? props.min)
+            }
+          },
+        },
+        slots.default?.(),
+      )
+  },
+})

package/src/components/Knob/KnobActiveLine.ts

@@ -0,0 +1,31 @@
+import { defineComponent, h } from 'vue'
+
+import { knobArcPath, knobArcRadius } from '@tremolo-ui/dom'
+
+import { checkPlacement } from '../_util/placement'
+
+import { useKnobContext } from './context'
+
+/** The arc between `startValue` and the value, as an SVG `<path>`. */
+export const KnobActiveLine = /* @__PURE__ */ defineComponent({
+  name: 'KnobActiveLine',
+  props: {
+    stroke: { type: String, default: 'currentColor' },
+    strokeWidth: { type: [Number, String], default: 6 },
+  },
+  setup(props) {
+    checkPlacement('KnobActiveLine', 'KnobSVGRoot')
+    const knob = useKnobContext()
+    return () =>
+      h('path', {
+        d: knobArcPath(
+          knob.angles.r2,
+          knob.angles.r3,
+          knobArcRadius(props.strokeWidth),
+        ),
+        fill: 'none',
+        stroke: props.stroke,
+        'stroke-width': props.strokeWidth,
+      })
+  },
+})

package/src/components/Knob/KnobInactiveLine.ts

@@ -0,0 +1,36 @@
+import { defineComponent, h } from 'vue'
+
+import { knobArcPath, knobArcRadius } from '@tremolo-ui/dom'
+
+import { checkPlacement } from '../_util/placement'
+
+import { useKnobContext } from './context'
+
+/**
+ * The travel outside the value, as SVG `<path>`s: one on each side of the
+ * active arc that has any length.
+ */
+export const KnobInactiveLine = /* @__PURE__ */ defineComponent({
+  name: 'KnobInactiveLine',
+  inheritAttrs: false,
+  props: {
+    stroke: { type: String, default: 'currentColor' },
+    strokeWidth: { type: [Number, String], default: 6 },
+  },
+  setup(props, { attrs }) {
+    checkPlacement('KnobInactiveLine', 'KnobSVGRoot')
+    const knob = useKnobContext()
+    const path = (from: number, to: number) =>
+      h('path', {
+        ...attrs,
+        d: knobArcPath(from, to, knobArcRadius(props.strokeWidth)),
+        fill: 'none',
+        stroke: props.stroke,
+        'stroke-width': props.strokeWidth,
+      })
+    return () => [
+      knob.startValue > knob.min ? path(knob.angles.r1, knob.angles.r2) : null,
+      knob.startValue < knob.max ? path(knob.angles.r3, knob.angles.r4) : null,
+    ]
+  },
+})

package/src/components/Knob/KnobSVGRoot.ts

@@ -0,0 +1,25 @@
+import { defineComponent, h } from 'vue'
+
+import { KNOB_VIEWBOX_SIZE } from '@tremolo-ui/dom'
+
+import { providePlacement } from '../_util/placement'
+
+/**
+ * The `<svg>` the drawing parts go in, in the order you want them painted.
+ * It sets the view box they are drawn against.
+ */
+export const KnobSVGRoot = /* @__PURE__ */ defineComponent({
+  name: 'KnobSVGRoot',
+  setup(_, { slots }) {
+    providePlacement('KnobSVGRoot')
+    return () =>
+      h(
+        'svg',
+        {
+          viewBox: `0 0 ${KNOB_VIEWBOX_SIZE} ${KNOB_VIEWBOX_SIZE}`,
+          style: { display: 'block' },
+        },
+        slots.default?.(),
+      )
+  },
+})

package/src/components/Knob/KnobThumb.ts

@@ -0,0 +1,53 @@
+import { defineComponent, h, type PropType } from 'vue'
+
+import { KNOB_VIEWBOX_SIZE } from '@tremolo-ui/dom'
+import { clamp } from '@tremolo-ui/functions'
+
+import { checkPlacement } from '../_util/placement'
+
+import { useKnobContext } from './context'
+
+/** The circle that turns with the value, and the line on it that points at it. */
+export const KnobThumb = /* @__PURE__ */ defineComponent({
+  name: 'KnobThumb',
+  props: {
+    /** Fill colour of the circle. @default 'currentColor' */
+    thumb: { type: String, default: 'currentColor' },
+    /** Colour of the line that points at the value. @default 'currentColor' */
+    thumbLine: { type: String, default: 'currentColor' },
+    /** Diameter of the circle, as a percentage of the knob. @default 84 */
+    thumbSize: { type: Number, default: 84 },
+    /** Thickness of the line, as a percentage of the knob. @default 6 */
+    thumbLineWeight: { type: Number, default: 6 },
+    /** How far down the line reaches, as a percentage. @default 35 */
+    thumbLineLength: { type: Number, default: 35 },
+    /** Classes for the line that points at the value. */
+    classes: Object as PropType<{ thumbLine?: string }>,
+  },
+  setup(props) {
+    checkPlacement('KnobThumb', 'KnobSVGRoot')
+    const knob = useKnobContext()
+    return () =>
+      h('svg', null, [
+        h('circle', {
+          cx: '50%',
+          cy: '50%',
+          r: `${props.thumbSize / 2}%`,
+          fill: props.thumb,
+        }),
+        h('line', {
+          class: props.classes?.thumbLine,
+          x1: '50%',
+          y1: `${(KNOB_VIEWBOX_SIZE - clamp(props.thumbSize, 0, 100)) / 2}%`,
+          x2: '50%',
+          y2: `${props.thumbLineLength}%`,
+          stroke: props.thumbLine,
+          'stroke-width': `${props.thumbLineWeight}%`,
+          style: {
+            transform: `rotate(${knob.angles.r1 + knob.angles.p * knob.angleRange}deg)`,
+            transformOrigin: '50% 50%',
+          },
+        }),
+      ])
+  },
+})

package/src/components/Knob/context.ts

@@ -0,0 +1,30 @@
+import { type InjectionKey } from 'vue'
+
+import { type KnobAngles } from '@tremolo-ui/dom'
+import { type Scale } from '@tremolo-ui/functions'
+
+import { injectContext } from '../_util/context'
+
+/**
+ * What `Knob` shares with its parts. The fields are getters, so reading one in
+ * a render or a `computed` follows the value as it changes.
+ */
+export interface KnobContextValue {
+  readonly value: number
+  readonly min: number
+  readonly max: number
+  readonly step: number
+  readonly scale: Scale
+  readonly startValue: number
+  /** How far the knob turns from `min` to `max`, in degrees. */
+  readonly angleRange: number
+  /** The angles the parts are drawn with. See `knobAngles` in `@tremolo-ui/dom`. */
+  readonly angles: KnobAngles
+}
+
+export const KnobKey: InjectionKey<KnobContextValue> = Symbol('Knob')
+
+/** The context of the enclosing `Knob`, for a part of your own. */
+export function useKnobContext(): KnobContextValue {
+  return injectContext(KnobKey, 'Knob')
+}

package/src/components/Knob/index.ts

@@ -0,0 +1,6 @@
+export { useKnobContext, type KnobContextValue } from './context'
+export { Knob } from './Knob'
+export { KnobActiveLine } from './KnobActiveLine'
+export { KnobInactiveLine } from './KnobInactiveLine'
+export { KnobSVGRoot } from './KnobSVGRoot'
+export { KnobThumb } from './KnobThumb'