@dumiflex/wp-kit 0.4.0 → 0.6.0

package/src/Slider.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends number | [number, number]">
 /**
  * Slider: a number picked by dragging along a range (a weight, a threshold,
  * a size). Use it when the feel of "more or less" matters more than the
@@ -8,92 +8,190 @@
  *   <Slider v-model="weight" :min="0" :max="2" :step="0.05" aria-label="Weight" with-input />
  *   <Slider v-model="size" :min="4" :max="160" :marks="[{ value: 32, label: '32' }]" :format="(v) => `${v} px`" />
  *
- * APG slider: the thumb is the focus stop; arrows move one step, PageUp /
- * PageDown ten, Home / End jump to the ends, and `format` gives screen
- * readers the value as words ("32 px"). Clicking the track jumps there and
- * the drag carries on from it.
+ * Give it a pair (`v-model="range"` with `[low, high]`) for a low and a high
+ * number on one track (a weight range, a token budget, a sweep's from–to):
+ * two thumbs that can't cross, kept at least `min-gap` apart, and with
+ * `with-input` a WpNumber for each end. A click on the track moves the
+ * nearer thumb.
+ *
+ *   <Slider v-model="range" :min="0" :max="2" :step="0.1" :min-gap="0.2" aria-label="Weight" with-input />
+ *
+ * `snap` settles the thumb on the marks. `snap` (true) makes the marks the only
+ * values: a drag, a click or a typed number lands on the nearest mark and
+ * the arrows go mark to mark. A number pulls the thumb onto a mark only once
+ * the pointer comes within that distance of one, and moves it by `step`
+ * elsewhere (keys and typing stay exact, so a thumb can always leave a mark).
+ *
+ *   <Slider v-model="cfg" :min="1" :max="30" :marks="[{ value: 7, label: '7' }]" :snap="1" />
+ *
+ * APG slider: each thumb is a focus stop; arrows move one step, PageUp /
+ * PageDown ten, Home / End jump to the ends (for a pair, the ends that thumb
+ * can reach), and `format` gives screen readers the value as words ("32 px").
+ * A pair's thumbs are "<label>, low end" / "high end", their min and max the
+ * other thumb, so screen readers hear the real limits. Clicking the track
+ * jumps there and the drag carries on from it.
  */
 import { computed, ref } from "vue";
-import { keyStep, percentOf, snap, valueAt } from "./slider-math";
+import { keyStep, keyToMark, percentOf, snap, snapToMarks, valueAt } from "./slider-math";
 import WpNumber from "./WpNumber.vue";
 
 const props = withDefaults(defineProps<{
-  modelValue: number;
+  modelValue: T;
   min?: number | undefined;
   max?: number | undefined;
   step?: number | undefined;
+  /** A pair only: the smallest distance between the two ends. */
+  minGap?: number | undefined;
   size?: "sm" | "md" | "lg" | undefined;
   disabled?: boolean | undefined;
   ariaLabel?: string | undefined;
   /** Labelled ticks under the track. */
   marks?: { value: number; label?: string }[] | undefined;
+  /**
+   * Settle on the marks: true allows only mark values (drag, click, typing,
+   * arrows mark to mark); a number pulls the dragged thumb onto a mark within
+   * that distance of it and leaves it free elsewhere.
+   */
+  snap?: boolean | number | undefined;
   /** How the value reads (the tooltip-free label and screen readers). */
   format?: ((v: number) => string) | undefined;
-  /** Show the value after the track. */
+  /** Show the value (a pair: "low – high") after the track. */
   showValue?: boolean | undefined;
-  /** Put a WpNumber after the track to type the exact value. */
+  /** Put a WpNumber after the track (a pair: one at each side) to type the exact value. */
   withInput?: boolean | undefined;
-}>(), { min: 0, max: 100, step: 1, size: "md", ariaLabel: undefined, marks: undefined });
+}>(), { min: 0, max: 100, step: 1, minGap: 0, size: "md", ariaLabel: undefined, marks: undefined });
 
-const emit = defineEmits<{ (e: "update:modelValue", v: number): void; (e: "change", v: number): void }>();
+const emit = defineEmits<{ (e: "update:modelValue", v: T): void; (e: "change", v: T): void }>();
 
 const trackEl = ref<HTMLElement | null>(null);
-const dragging = ref(false);
+/** The thumb being dragged (0 = the only one, or a pair's low end). */
+const active = ref<0 | 1 | null>(null);
 
-const value = computed(() => snap(props.modelValue, props.min, props.max, props.step));
-const pct = computed(() => percentOf(value.value, props.min, props.max));
-const text = computed(() => (props.format ? props.format(value.value) : String(value.value)));
+const isPair = computed(() => Array.isArray(props.modelValue));
+const sn = (v: number): number => snap(v, props.min, props.max, props.step);
+/** The marks' values inside the range, for `snap`. */
+const markValues = computed(() => (props.marks ?? []).map((m) => m.value).filter((v) => v >= props.min && v <= props.max));
+/** Only marks can be picked (`snap` true with marks). */
+const marksOnly = computed(() => props.snap === true && markValues.value.length > 0);
+const toMark = (v: number): number => snapToMarks(v, markValues.value, props.snap);
 
-function set(v: number): void {
-  if (props.disabled) return;
-  if (v !== props.modelValue) emit("update:modelValue", v);
+/** The thumbs' values: one, or a pair sorted low to high. */
+const ends = computed<number[]>(() => {
+  const m = props.modelValue;
+  if (typeof m === "number") return [sn(m)];
+  return [sn(Math.min(m[0], m[1])), sn(Math.max(m[0], m[1]))];
+});
+const lo = computed(() => ends.value[0] ?? props.min);
+const hi = computed(() => ends.value[ends.value.length - 1] ?? props.max);
+const pcts = computed(() => ends.value.map((v) => percentOf(v, props.min, props.max)));
+const loPct = computed(() => pcts.value[0] ?? 0);
+const hiPct = computed(() => pcts.value[pcts.value.length - 1] ?? 0);
+
+const text = (v: number): string => (props.format ? props.format(v) : String(v));
+const label = computed(() => props.ariaLabel ?? (isPair.value ? "Range" : undefined));
+
+/** The lowest and highest value thumb `i` can take. */
+function limits(i: number): [number, number] {
+  if (!isPair.value) return [props.min, props.max];
+  return i === 0 ? [props.min, hi.value - props.minGap] : [lo.value + props.minGap, props.max];
+}
+
+function thumbLabel(i: number): string | undefined {
+  if (!isPair.value) return label.value;
+  return `${label.value ?? "Range"}, ${i === 0 ? "low" : "high"} end`;
+}
+
+function asModel(vals: number[]): T {
+  const out = isPair.value ? [vals[0] ?? lo.value, vals[1] ?? hi.value] : (vals[0] ?? lo.value);
+  return out as T;
+}
+
+/** Put thumb `i` at `v` (a pair's thumb kept inside the other end minus the gap); returns the new model. */
+function setEnd(i: 0 | 1, v: number): T {
+  let vals: number[];
+  if (!isPair.value) vals = [v];
+  else if (i === 0) vals = [Math.min(v, sn(hi.value - props.minGap)), hi.value];
+  else vals = [lo.value, Math.max(v, sn(lo.value + props.minGap))];
+  const next = asModel(vals);
+  if (!props.disabled && JSON.stringify(next) !== JSON.stringify(props.modelValue)) emit("update:modelValue", next);
+  return next;
+}
+
+function current(): T {
+  return asModel(ends.value);
 }
 
 function fromPointer(ev: PointerEvent): number {
   const r = trackEl.value?.getBoundingClientRect();
-  if (!r) return value.value;
-  return valueAt(ev.clientX, r.left, r.width, props.min, props.max, props.step);
+  return r ? toMark(valueAt(ev.clientX, r.left, r.width, props.min, props.max, props.step)) : lo.value;
 }
 
 function onPointerDown(ev: PointerEvent): void {
   if (props.disabled || ev.button !== 0) return;
   ev.preventDefault();
-  dragging.value = true;
+  const v = fromPointer(ev);
+  const i: 0 | 1 = isPair.value && (Math.abs(v - lo.value) > Math.abs(v - hi.value) || v > hi.value) ? 1 : 0;
+  active.value = i;
   (ev.currentTarget as HTMLElement).setPointerCapture?.(ev.pointerId);
-  set(fromPointer(ev));
-  (trackEl.value?.querySelector("[role=slider]") as HTMLElement | null)?.focus();
+  setEnd(i, v);
+  trackEl.value?.querySelectorAll<HTMLElement>("[role=slider]")[i]?.focus();
 }
 
 function onPointerMove(ev: PointerEvent): void {
-  if (dragging.value) set(fromPointer(ev));
+  if (active.value !== null) setEnd(active.value, fromPointer(ev));
 }
 
 function onPointerUp(ev: PointerEvent): void {
-  if (!dragging.value) return;
-  dragging.value = false;
+  if (active.value === null) return;
+  active.value = null;
   (ev.currentTarget as HTMLElement).releasePointerCapture?.(ev.pointerId);
-  emit("change", value.value);
+  emit("change", current());
 }
 
-function onKeydown(ev: KeyboardEvent): void {
+function onKeydown(ev: KeyboardEvent, i: 0 | 1): void {
   if (props.disabled) return;
-  const next = keyStep(ev.key, value.value, props.min, props.max, props.step);
+  const now = i === 0 ? lo.value : hi.value;
+  const next = marksOnly.value
+    ? keyToMark(ev.key, now, markValues.value)
+    : keyStep(ev.key, now, props.min, props.max, props.step);
   if (next === null) return;
   ev.preventDefault();
-  set(next);
-  emit("change", next);
+  const [low, high] = limits(i);
+  const v = marksOnly.value ? next : ev.key === "Home" ? low : ev.key === "End" ? high : next;
+  emit("change", setEnd(i, v));
+}
+
+function onTyped(i: 0 | 1, v: number | null): void {
+  if (v === null || props.disabled) return;
+  emit("change", setEnd(i, marksOnly.value ? toMark(sn(v)) : sn(v)));
 }
 
-function onTyped(v: number | null): void {
-  if (v === null) return;
-  const next = snap(v, props.min, props.max, props.step);
-  set(next);
-  emit("change", next);
+function passed(v: number): boolean {
+  return isPair.value ? v >= lo.value && v <= hi.value : v <= lo.value;
 }
 </script>
 
 <template>
-  <div class="wp-slider" :data-size="size" :data-disabled="disabled || undefined" :data-dragging="dragging || undefined" :data-marked="marks?.length ? 'true' : undefined">
+  <div
+    class="wp-slider"
+    :data-size="size"
+    :data-pair="isPair || undefined"
+    :data-disabled="disabled || undefined"
+    :data-dragging="active !== null || undefined"
+    :data-marked="marks?.length ? 'true' : undefined"
+  >
+    <WpNumber
+      v-if="withInput && isPair"
+      class="wp-slider__input"
+      :model-value="lo"
+      :min="min"
+      :max="hi - props.minGap"
+      :step="step"
+      :size="size"
+      :disabled="disabled"
+      :aria-label="thumbLabel(0)"
+      @update:model-value="onTyped(0, $event)"
+    />
     <div
       ref="trackEl"
       class="wp-slider__track"
@@ -103,43 +201,51 @@ function onTyped(v: number | null): void {
       @pointercancel="onPointerUp"
     >
       <div class="wp-slider__rail" />
-      <div class="wp-slider__fill" :style="{ width: `calc(${pct}% + var(--_thumb) / 2)` }" />
+      <div
+        class="wp-slider__fill"
+        :style="isPair
+          ? { left: `${loPct}%`, width: `${hiPct - loPct}%` }
+          : { width: `calc(${loPct}% + var(--_thumb) / 2)` }"
+      />
       <span
         v-for="m in marks ?? []"
         :key="m.value"
         class="wp-slider__mark"
-        :data-passed="m.value <= value || undefined"
+        :data-passed="passed(m.value) || undefined"
         :style="{ left: `${percentOf(m.value, props.min, props.max)}%` }"
         aria-hidden="true"
       ><span v-if="m.label" class="wp-slider__mark-label">{{ m.label }}</span></span>
       <!-- Focusable unless disabled (tabindex is bound). -->
       <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
       <div
+        v-for="(v, i) in ends"
+        :key="i"
         class="wp-slider__thumb"
         role="slider"
         :tabindex="disabled ? -1 : 0"
-        :aria-label="ariaLabel"
-        :aria-valuemin="min"
-        :aria-valuemax="max"
-        :aria-valuenow="value"
-        :aria-valuetext="format ? text : undefined"
+        :aria-label="thumbLabel(i)"
+        :aria-valuemin="limits(i)[0]"
+        :aria-valuemax="limits(i)[1]"
+        :aria-valuenow="v"
+        :aria-valuetext="format ? text(v) : undefined"
         :aria-disabled="disabled || undefined"
-        :style="{ left: `${pct}%` }"
-        @keydown="onKeydown"
+        :data-active="active === i || undefined"
+        :style="{ left: `${pcts[i]}%` }"
+        @keydown="onKeydown($event, i === 1 ? 1 : 0)"
       />
     </div>
-    <span v-if="showValue && !withInput" class="wp-slider__value" aria-hidden="true">{{ text }}</span>
+    <span v-if="showValue && !withInput" class="wp-slider__value" aria-hidden="true">{{ isPair ? `${text(lo)} – ${text(hi)}` : text(lo) }}</span>
     <WpNumber
       v-if="withInput"
       class="wp-slider__input"
-      :model-value="value"
-      :min="min"
+      :model-value="isPair ? hi : lo"
+      :min="isPair ? lo + props.minGap : min"
       :max="max"
       :step="step"
       :size="size"
       :disabled="disabled"
-      :aria-label="ariaLabel ? `${ariaLabel}, exact value` : 'Exact value'"
-      @update:model-value="onTyped"
+      :aria-label="isPair ? thumbLabel(1) : (ariaLabel ? `${ariaLabel}, exact value` : 'Exact value')"
+      @update:model-value="onTyped(isPair ? 1 : 0, $event)"
     />
   </div>
 </template>
@@ -158,10 +264,11 @@ function onTyped(v: number | null): void {
   position: relative; flex: 1; min-width: 60px; height: var(--_h);
   margin: 0 calc(var(--_thumb) / 2); cursor: pointer; touch-action: none;
 }
+.wp-slider[data-pair] .wp-slider__track { min-width: 80px; }
 .wp-slider__rail, .wp-slider__fill {
   position: absolute; top: 50%; left: 0; height: 4px; margin-top: -2px; border-radius: var(--wp-radius-cap, 999px);
 }
-.wp-slider__rail { right: 0; left: calc(var(--_thumb) / -2); right: calc(var(--_thumb) / -2); background: var(--wp-bg-3); box-shadow: inset 0 0 0 1px var(--wp-border-soft); }
+.wp-slider__rail { left: calc(var(--_thumb) / -2); right: calc(var(--_thumb) / -2); background: var(--wp-bg-3); box-shadow: inset 0 0 0 1px var(--wp-border-soft); }
 .wp-slider__fill { left: calc(var(--_thumb) / -2); background: var(--wp-accent); }
 .wp-slider[data-size="sm"] .wp-slider__rail, .wp-slider[data-size="sm"] .wp-slider__fill { height: 3px; margin-top: -1.5px; }
 .wp-slider__thumb {
@@ -171,8 +278,10 @@ function onTyped(v: number | null): void {
   box-shadow: var(--wp-shadow-sm); outline: none;
   transition: transform var(--wp-motion-quick), box-shadow var(--wp-motion-quick);
 }
-.wp-slider__track:hover .wp-slider__thumb, .wp-slider[data-dragging] .wp-slider__thumb { transform: scale(1.12); }
-.wp-slider__thumb:focus-visible { box-shadow: var(--wp-focus-ring); }
+.wp-slider:not([data-pair]) .wp-slider__track:hover .wp-slider__thumb,
+.wp-slider[data-pair] .wp-slider__thumb:hover,
+.wp-slider__thumb[data-active] { transform: scale(1.12); }
+.wp-slider__thumb:focus-visible { box-shadow: var(--wp-focus-ring); z-index: 1; }
 .wp-slider__mark {
   position: absolute; top: 50%; width: 2px; height: 8px; margin: -4px 0 0 -1px; border-radius: min(1px, var(--wp-radius-cap, 999px));
   background: var(--wp-border-strong); pointer-events: none;
@@ -184,11 +293,13 @@ function onTyped(v: number | null): void {
 }
 .wp-slider__value {
   flex: none; min-width: 3ch; text-align: right; color: var(--wp-text); font: 500 var(--wp-text-sm)/1 var(--wp-font-sans);
-  font-variant-numeric: tabular-nums;
+  font-variant-numeric: tabular-nums; white-space: nowrap;
 }
 .wp-slider[data-size="sm"] .wp-slider__value { font-size: var(--wp-text-xs); }
 .wp-slider__input { flex: none; width: 84px; }
+.wp-slider[data-pair] .wp-slider__input { width: 76px; }
 .wp-slider[data-size="sm"] .wp-slider__input { width: 64px; }
+.wp-slider[data-pair][data-size="sm"] .wp-slider__input { width: 60px; }
 .wp-slider[data-disabled] { opacity: 0.45; }
 .wp-slider[data-disabled] .wp-slider__track { cursor: not-allowed; }
 .wp-slider[data-disabled] .wp-slider__thumb { transform: none; }

package/src/SortableList.vue

@@ -241,7 +241,7 @@ function onGripBlur(i: number): void {
   background: transparent; color: var(--wp-text-dim); cursor: grab; touch-action: none;
 }
 .wp-sortable[data-size="sm"] .wp-sortable__grip { width: 20px; min-height: 20px; }
-.wp-sortable__grip .pi { font-size: 11px; }
+.wp-sortable__grip .pi { font-size: 12px; }
 .wp-sortable[data-size="sm"] .wp-sortable__grip .pi { font-size: 10px; }
 .wp-sortable__grip:hover:not(:disabled) { color: var(--wp-text); background: var(--wp-row-hover); }
 .wp-sortable__grip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }

package/src/TagInput.vue

@@ -263,7 +263,7 @@ function setOpen(v: boolean): void {
   color: var(--wp-text); font-size: var(--wp-text-xs); line-height: 1;
 }
 .wp-tag-input[data-size="sm"] .wp-tag-input__chip { height: 16px; padding-left: 5px; font-size: 10.5px; }
-.wp-tag-input__chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-tag-input__chip-text { min-width: 0; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* Plain ✕: no background zone, the chip keeps its height; the hit area is 20 px. */
 .wp-tag-input__remove {
   display: inline-grid; place-items: center; width: 16px; height: 16px; margin: -2px 0; padding: 0;

package/src/Timeline.vue

@@ -71,13 +71,13 @@ withDefaults(defineProps<{
 }
 .wp-timeline__dot {
   position: relative; display: grid; place-items: center; flex: none; box-sizing: border-box;
-  width: var(--_dot); height: var(--_dot); margin-top: 1px; border-radius: 50%; /* round: timeline dot */
+  width: var(--_dot); height: var(--_dot); margin-top: 1px; border-radius: min(50%, var(--wp-radius-cap, 999px));
   border: 2px solid var(--_tone); background: var(--wp-bg-1); color: var(--_tone);
 }
 .wp-timeline__item:not([data-icon]) .wp-timeline__dot { transform: scale(0.6); background: var(--_tone); }
 .wp-timeline__dot .pi { font-size: calc(var(--_dot) * 0.45); }
 .wp-timeline__item[data-pending] .wp-timeline__dot::after {
-  content: ""; position: absolute; inset: -4px; border-radius: 50%; /* round: timeline dot ring */ border: 2px solid var(--_tone);
+  content: ""; position: absolute; inset: -4px; border-radius: min(50%, var(--wp-radius-cap, 999px)); border: 2px solid var(--_tone);
   animation: wp-timeline-pulse 1.6s ease-out infinite;
 }
 @keyframes wp-timeline-pulse { from { opacity: 0.7; transform: scale(0.8); } to { opacity: 0; transform: scale(1.4); } }