ember-primitives 0.59.1 → 0.60.1

package/src/components/slider/store.ts

@@ -0,0 +1,374 @@
+import { tracked } from '@glimmer/tracking';
+import { htmlSafe } from '@ember/template';
+
+/**
+ * `style` attribute values need to be SafeStrings to avoid Ember's
+ * style-binding warning.
+ */
+export type StyleString = ReturnType<typeof htmlSafe>;
+
+export interface SliderStoreArgs {
+  value?: number | number[];
+  min?: number;
+  max?: number;
+  step?: number | number[];
+  orientation?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+  onValueChange?: (value: number | number[]) => void;
+  onValueCommit?: (value: number | number[]) => void;
+}
+
+export interface SliderThumb {
+  index: number;
+  value: number;
+  /**
+   * The value to pass to `<input type="range">`.
+   *
+   * When using an array `step`, this is the internal index (0..n-1).
+   * Otherwise it's the same as `value`.
+   */
+  inputValue: number;
+  percent: number;
+  active: boolean;
+  /**
+   * Inline style positioning this thumb along the track
+   * (`left: x%` or `bottom: x%`, depending on orientation).
+   */
+  positionStyle: StyleString;
+}
+
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_STEP = 1;
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+function roundToStep(value: number, step: number): number {
+  if (!Number.isFinite(step) || step <= 0) return value;
+
+  return Math.round(value / step) * step;
+}
+
+function getPercentage(value: number, min: number, max: number): number {
+  const range = max - min;
+
+  if (!Number.isFinite(range) || range === 0) return 0;
+
+  return ((value - min) / range) * 100;
+}
+
+function normalizeTickValues(values: number[]): number[] {
+  const uniques = new Set<number>();
+
+  for (const value of values) {
+    if (Number.isFinite(value)) uniques.add(value);
+  }
+
+  return Array.from(uniques).sort((a, b) => a - b);
+}
+
+function findNearestIndex(values: number[], target: number): number {
+  if (values.length === 0) return 0;
+
+  const first = values[0];
+
+  if (first === undefined) return 0;
+
+  let nearestIndex = 0;
+  let nearestDistance = Math.abs(first - target);
+
+  for (let index = 1; index < values.length; index++) {
+    const candidate = values[index];
+
+    if (candidate === undefined) continue;
+
+    const distance = Math.abs(candidate - target);
+
+    if (distance < nearestDistance) {
+      nearestIndex = index;
+      nearestDistance = distance;
+    }
+  }
+
+  return nearestIndex;
+}
+
+class ThumbState implements SliderThumb {
+  #slider: SliderStore;
+
+  constructor(
+    slider: SliderStore,
+    public index: number
+  ) {
+    this.#slider = slider;
+  }
+
+  get value(): number {
+    return this.#slider.values[this.index] ?? this.#slider.min;
+  }
+
+  get inputValue(): number {
+    const ticks = this.#slider.tickValues;
+
+    if (!ticks) return this.value;
+
+    return clamp(findNearestIndex(ticks, this.value), 0, Math.max(0, ticks.length - 1));
+  }
+
+  get percent(): number {
+    return this.#slider.thumbPercents[this.index] ?? 0;
+  }
+
+  get active(): boolean {
+    return this.#slider.activeThumbIndex === this.index;
+  }
+
+  get positionStyle(): StyleString {
+    return this.#slider.thumbPositionStyle(this.percent);
+  }
+}
+
+export class SliderStore {
+  #thumbStates: ThumbState[] = [];
+  #getArgs: () => SliderStoreArgs;
+
+  @tracked activeThumbIndex: number | null = null;
+
+  constructor(getArgs: () => SliderStoreArgs) {
+    this.#getArgs = getArgs;
+
+    const args = this.#getArgs();
+    const initialCount = Array.isArray(args.value) ? Math.max(1, args.value.length) : 1;
+
+    this.#thumbStates = Array.from(
+      { length: initialCount },
+      (_, index) => new ThumbState(this, index)
+    );
+  }
+
+  get #args(): SliderStoreArgs {
+    return this.#getArgs();
+  }
+
+  get min(): number {
+    return this.#args.min ?? DEFAULT_MIN;
+  }
+
+  get max(): number {
+    return this.#args.max ?? DEFAULT_MAX;
+  }
+
+  get step(): number {
+    return typeof this.#args.step === 'number' ? this.#args.step : DEFAULT_STEP;
+  }
+
+  get tickValues(): number[] | null {
+    const fromStep = Array.isArray(this.#args.step) ? this.#args.step : undefined;
+    const raw = fromStep;
+
+    if (!raw) return null;
+
+    const normalized = normalizeTickValues(raw);
+
+    return normalized.length === 0 ? null : normalized;
+  }
+
+  get orientation(): 'horizontal' | 'vertical' {
+    return this.#args.orientation ?? 'horizontal';
+  }
+
+  get disabled(): boolean {
+    return this.#args.disabled ?? false;
+  }
+
+  get internalMin(): number {
+    const ticks = this.tickValues;
+
+    if (ticks) return 0;
+
+    return this.min;
+  }
+
+  get internalMax(): number {
+    const ticks = this.tickValues;
+
+    if (ticks) return Math.max(0, ticks.length - 1);
+
+    return this.max;
+  }
+
+  get internalStep(): number {
+    const ticks = this.tickValues;
+
+    if (ticks) return 1;
+
+    return this.step;
+  }
+
+  get internalValues(): number[] {
+    const ticks = this.tickValues;
+    const normalized = Array.isArray(this.#args.value)
+      ? this.#args.value.length === 0
+        ? [ticks?.[0] ?? this.min]
+        : this.#args.value
+      : [this.#args.value ?? ticks?.[0] ?? this.min];
+
+    if (ticks) {
+      return normalized.map((v) => {
+        const index = findNearestIndex(ticks, v);
+
+        return clamp(index, this.internalMin, this.internalMax);
+      });
+    }
+
+    return normalized.map((v) => clamp(roundToStep(v, this.step), this.min, this.max));
+  }
+
+  outputValuesFromInternal(internalValues: number[]): number[] {
+    const ticks = this.tickValues;
+
+    if (!ticks) return internalValues;
+
+    return internalValues.map((internal) => {
+      const index = clamp(Math.round(internal), 0, ticks.length - 1);
+
+      return ticks[index] ?? ticks[0] ?? this.min;
+    });
+  }
+
+  get values(): number[] {
+    return this.outputValuesFromInternal(this.internalValues);
+  }
+
+  get thumbs(): SliderThumb[] {
+    this.#ensureThumbCount(this.internalValues.length);
+
+    return this.#thumbStates;
+  }
+
+  get thumbPercents(): number[] {
+    return this.internalValues.map((value) =>
+      getPercentage(value, this.internalMin, this.internalMax)
+    );
+  }
+
+  get isMulti(): boolean {
+    return this.internalValues.length > 1;
+  }
+
+  thumbPositionStyle = (percent: number): StyleString => {
+    const property = this.orientation === 'horizontal' ? 'left' : 'bottom';
+
+    return htmlSafe(`${property}: ${percent}%`);
+  };
+
+  get rangeStyle(): StyleString {
+    const internalValues = this.internalValues;
+
+    // For a single-thumb slider, the "range" should fill from the start to the
+    // thumb. For multi-thumb, it fills between the min/max thumbs.
+    const internalRangeMin =
+      internalValues.length <= 1 ? this.internalMin : Math.min(...internalValues);
+    const internalRangeMax =
+      internalValues[0] === undefined ? this.internalMin : Math.max(...internalValues);
+    const startPercent = getPercentage(internalRangeMin, this.internalMin, this.internalMax);
+    const endPercent = getPercentage(internalRangeMax, this.internalMin, this.internalMax);
+
+    if (this.orientation === 'horizontal') {
+      return htmlSafe(`left: ${startPercent}%; right: ${100 - endPercent}%`);
+    } else {
+      return htmlSafe(`bottom: ${startPercent}%; top: ${100 - endPercent}%`);
+    }
+  }
+
+  updateValue = (newValues: number[]) => {
+    if (this.#args.onValueChange) {
+      this.#args.onValueChange(this.coerceOutput(newValues));
+    }
+  };
+
+  commitValue = (newValues: number[]) => {
+    if (this.#args.onValueCommit) {
+      this.#args.onValueCommit(this.coerceOutput(newValues));
+    }
+  };
+
+  coerceOutput(values: number[]): number | number[] {
+    if (Array.isArray(this.#args.value)) return values;
+
+    return values[0] ?? this.min;
+  }
+
+  #ensureThumbCount(count: number) {
+    if (count === this.#thumbStates.length) return;
+
+    if (count < this.#thumbStates.length) {
+      this.#thumbStates = this.#thumbStates.slice(0, count);
+
+      return;
+    }
+
+    const startIndex = this.#thumbStates.length;
+
+    for (let index = startIndex; index < count; index++) {
+      this.#thumbStates.push(new ThumbState(this, index));
+    }
+  }
+
+  #applyThumbInternalValue(index: number, rawValue: number): number[] {
+    const nextValues = [...this.internalValues];
+    const stepped = clamp(
+      roundToStep(rawValue, this.internalStep),
+      this.internalMin,
+      this.internalMax
+    );
+
+    let constrained = stepped;
+
+    if (nextValues.length > 1) {
+      const prev = nextValues[index - 1];
+      const next = nextValues[index + 1];
+
+      if (prev !== undefined) constrained = Math.max(constrained, prev);
+      if (next !== undefined) constrained = Math.min(constrained, next);
+    }
+
+    nextValues[index] = constrained;
+
+    return nextValues;
+  }
+
+  handleThumbInput = (index: number, value: number) => {
+    if (this.disabled) return;
+
+    const internalValues = this.#applyThumbInternalValue(index, value);
+    const newValues = this.outputValuesFromInternal(internalValues);
+
+    this.updateValue(newValues);
+  };
+
+  handleThumbChange = (index: number, value: number) => {
+    if (this.disabled) return;
+
+    const internalValues = this.#applyThumbInternalValue(index, value);
+    const newValues = this.outputValuesFromInternal(internalValues);
+
+    this.updateValue(newValues);
+    this.commitValue(newValues);
+  };
+
+  handleThumbActivate = (index: number) => {
+    this.activeThumbIndex = index;
+  };
+
+  defaultThumbLabel = (index: number): string => {
+    const count = this.internalValues.length;
+
+    if (count <= 1) return 'Value';
+    if (count === 2) return index === 0 ? 'Minimum' : 'Maximum';
+
+    return `Value ${index + 1}`;
+  };
+}

package/src/components/slider.css

@@ -0,0 +1,203 @@
+/**
+ * Structural styles for <Slider>.
+ *
+ * These handle the annoying parts of building a custom slider on top of
+ * native <input type="range"> elements:
+ *   - stretching an invisible native input over the track (so keyboard,
+ *     pointer, and assistive-tech behavior all come from the platform)
+ *   - letting multiple overlapping inputs coexist (multi-thumb / range
+ *     sliders) by routing pointer events through the native thumb only
+ *   - vertical orientation (via `writing-mode`, no rotation hacks)
+ *   - positioning the visual thumb and keeping the active thumb on top
+ *
+ * Appearance (colors, exact sizes) is left to the consumer.
+ *
+ * Everything is wrapped in `@layer ember-primitives`, so *any* unlayered
+ * consumer rule overrides these -- regardless of specificity or order.
+ *
+ * This is a plain stylesheet (bundled like any other CSS), so styles are
+ * present at first layout -- no waiting on a render cycle. If you render
+ * the slider inside a shadow root, bring this stylesheet into that root
+ * yourself (e.g. adopt it, or @import it in the shadow tree).
+ *
+ * Knobs:
+ *   --ember-primitives__slider__hit-area         pointer target size (default 24px)
+ *   --ember-primitives__slider__thumb-size       visual thumb size (default 16px)
+ *   --ember-primitives__slider__track-thickness  rail thickness (default 4px)
+ *   --ember-primitives__slider__vertical-size    length of a vertical slider (default 10rem)
+ */
+@layer ember-primitives {
+  .ember-primitives__slider {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: var(--ember-primitives__slider__hit-area, 24px);
+  }
+
+  .ember-primitives__slider[data-orientation="vertical"] {
+    flex-direction: column;
+    min-height: 0;
+    min-width: var(--ember-primitives__slider__hit-area, 24px);
+    height: var(--ember-primitives__slider__vertical-size, 10rem);
+  }
+
+  .ember-primitives__slider__track {
+    position: relative;
+    flex: 1;
+    height: var(--ember-primitives__slider__track-thickness, 4px);
+  }
+
+  .ember-primitives__slider[data-orientation="vertical"] .ember-primitives__slider__track {
+    height: auto;
+    width: var(--ember-primitives__slider__track-thickness, 4px);
+  }
+
+  .ember-primitives__slider__range {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+  }
+
+  .ember-primitives__slider[data-orientation="vertical"] .ember-primitives__slider__range {
+    top: auto;
+    bottom: auto;
+    left: 0;
+    right: 0;
+  }
+
+  /*
+    The native input is stretched across the whole track, invisible, and only
+    used for interaction. The visual thumb (a sibling) is what users see.
+  */
+  .ember-primitives__slider__thumb-input {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    translate: 0 -50%;
+    width: 100%;
+    height: var(--ember-primitives__slider__hit-area, 24px);
+    margin: 0;
+    opacity: 0;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .ember-primitives__slider__thumb-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .ember-primitives__slider__thumb-input[data-active] {
+    z-index: 2;
+  }
+
+  /*
+    Size the (invisible) native thumb to the hit area, so grabbing "the thumb"
+    feels right. These cannot be comma-combined: an unknown pseudo-element
+    invalidates the whole selector list in the other engine.
+  */
+  .ember-primitives__slider__thumb-input::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--ember-primitives__slider__hit-area, 24px);
+    height: var(--ember-primitives__slider__hit-area, 24px);
+  }
+
+  .ember-primitives__slider__thumb-input::-moz-range-thumb {
+    border: none;
+    width: var(--ember-primitives__slider__hit-area, 24px);
+    height: var(--ember-primitives__slider__hit-area, 24px);
+  }
+
+  /*
+    Multi-thumb sliders overlap multiple full-width range inputs. If the
+    inputs themselves receive pointer events, the top-most input steals
+    clicks/drags from the other thumbs. Disable pointer events on the
+    track-sized input and re-enable them on the native thumb only.
+
+    Single-thumb sliders keep the whole input interactive, so clicking
+    anywhere on the track jumps to that value.
+  */
+  .ember-primitives__slider[data-multi] .ember-primitives__slider__thumb-input {
+    pointer-events: none;
+  }
+
+  .ember-primitives__slider[data-multi]
+    .ember-primitives__slider__thumb-input::-webkit-slider-thumb {
+    pointer-events: auto;
+  }
+
+  .ember-primitives__slider[data-multi] .ember-primitives__slider__thumb-input::-moz-range-thumb {
+    pointer-events: auto;
+  }
+
+  /*
+    Vertical orientation: modern engines render a native vertical range input
+    with `writing-mode`. `direction: rtl` puts the minimum at the bottom.
+  */
+  .ember-primitives__slider[data-orientation="vertical"] .ember-primitives__slider__thumb-input {
+    writing-mode: vertical-lr;
+    direction: rtl;
+    top: 0;
+    left: 50%;
+    translate: -50% 0;
+    width: var(--ember-primitives__slider__hit-area, 24px);
+    height: 100%;
+  }
+
+  /*
+    The visual thumb. The component positions it with an inline
+    `left`/`bottom` percentage; centering uses the `translate` property
+    (not `transform`) so consumer hover/active effects like
+    `transform: scale(1.4)` or `scale: 1.4` compose with it instead of
+    clobbering it.
+  */
+  .ember-primitives__slider__thumb {
+    position: absolute;
+    top: 50%;
+    translate: -50% -50%;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .ember-primitives__slider__thumb[data-active] {
+    z-index: 3;
+  }
+
+  .ember-primitives__slider[data-orientation="vertical"] .ember-primitives__slider__thumb {
+    top: auto;
+    left: 50%;
+    translate: -50% 50%;
+  }
+
+  /*
+    Default appearance -- zero specificity via :where(), so any consumer rule
+    wins (even a layered one). Colors derive from currentColor so the slider
+    adapts to its context.
+  */
+  :where(.ember-primitives__slider__track) {
+    border-radius: calc(var(--ember-primitives__slider__track-thickness, 4px) / 2);
+    background: color-mix(in srgb, currentColor 20%, transparent);
+  }
+
+  :where(.ember-primitives__slider__range) {
+    border-radius: inherit;
+    background: currentColor;
+  }
+
+  :where(.ember-primitives__slider__thumb) {
+    width: var(--ember-primitives__slider__thumb-size, 16px);
+    height: var(--ember-primitives__slider__thumb-size, 16px);
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  :where(.ember-primitives__slider__thumb[data-disabled]) {
+    opacity: 0.5;
+  }
+
+  /* Keyboard focus is on the (invisible) input; reflect it on the visual thumb. */
+  :where(.ember-primitives__slider__thumb-input:focus-visible + .ember-primitives__slider__thumb) {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}