coreui / coreui-pro / 36800024297

96%

main: 94%

push

github

feat(Range): multiple thumbs, vertical orientation and ticks from options (#1500)

* feat(Range): multiple thumbs, vertical orientation and ticks from options

A .form-range wrapper now takes any number of .form-range-input elements.
The first input draws the track with a band from --cui-range-fill-start to
--cui-range-fill, the others stack on it with a transparent track, and each
thumb stays a native range input, so dragging, the keyboard, touch, form
submission and reset stay with the browser. The plugin keeps the thumbs in
order (and `distance` apart), moves the nearest thumb to a press on the
track and dispatches input/change as the browser would, and lifts the thumb
that can still move when two of them meet.

.form-range-vertical stands the control up through writing-mode, with the
track and thumb sized by logical properties, the tooltips at the start and
the ticks at the end. New options: clickableTicks, distance, ticks,
tooltipClass, track and the sanitizer trio for HTML from tooltipsFormat,
whose text now becomes aria-valuetext.

The tooltip is a <div> instead of an <output>: a form reset replaces the
children of an <output> with its text in Firefox, which took the arrow and
the inner element with it. The plugin also follows a form reset now, and
the end ticks align their labels to the track ends instead of overflowing
the control.

* build: raise the JS budgets for the multi-thumb Range

Measured against v6-dev (ed4abe685) with gzip -9 on both builds:
coreui.bundle.js +1555 B, coreui.bundle.min.js +1300 B, coreui.esm.js
+1559 B, coreui.esm.min.js +1326 B, coreui.js +1550 B, coreui.min.js
+1347 B. Most of it is the tick, nearest-thumb, distance and track-press
code that range-slider.ts carries today and gives up when it is rebuilt on
Range.

* fix(Range): measure the vertical ticks and tooltips along the thumb width

After writing-mode turns the input, the thumb travels along its inline
size, --cui-range-thumb-width, which is what the band an... (continued)

6653 of 7222 branches covered (92.12%)

Branch coverage included in aggregate %.

252 of 255 new or added lines in 1 file covered. (98.82%)

11872 of 12173 relevant lines covered (97.53%)

916.33 hits per line