The following is the spec for the input component that should have the general features and be able to support the extensions where needed.
General
Should be able to input any arbitrary value with features that make enhance the experience.
unit detection
see chrome dev tools as an example
should show a arrow icon when the mouse is over a unit.
![Screenshot 2022-05-26 at 2 03 23 PM](https://user-images.githubusercontent.com/105234327/170475940-22ff3930-f5ea-469a-80d8-bcd9d0b486b3.png)
number detection
see chrome dev tools as an example
should show a ew-resize cursor when hovering over a number.
![3-resize](https://user-images.githubusercontent.com/105234327/170476464-86e1b927-db1e-4b69-aa72-8da7e67c8909.gif)
for both of the above we can either
- destructive implementation: spans/divs within a rich "input". (this is what chrome dev-tools uses)
- non-destructive implementation: use
measureText
, style.cusror
and mousemove
on the native input element to detect and decorate the input without the need for a rich "input". essentially using mouse x-coordinates relative to the input detect whether the mouse is over a unit/number from the current value of the input and update style.cursor
based on that.
Auto completion
should autocomplete valid property values as specified for that instance of the input.
![Screenshot 2022-05-26 at 2 27 34 PM](https://user-images.githubusercontent.com/105234327/170479254-a64e8d23-92e0-4c6e-a339-c9d392bcb897.png)
Extensions
Should be able to support the following add-ons depending on the input instance
Auto-correct/delimited values
Archived
Should be able to add support for multiple delimited values and masked values such that i.e `10px10px` is `10px 10px` and `10px, 10px` is `10px 10px` essentially should be able to detect correct almost valid values to their valid counterparts and mask any denylisted characters to their counter parts i.e `comma` to `space` if specified.
an example of masking imask.js.org
Expansion control
Archived
Should be able to add a control that based on the delimiter(could be space or comma) can add a value to the input, examples including:
values that can be 1, 2, 3 or 4 values where by each variant is valid in its own right i.e margin: 1px
vs margin: 1px 2px
vs margin: 1px 2px 3px
vs margin: 1px 2px 3px 4px
the expansion control would provide a interface for what would otherwise be manually admitted by keyboard.
Known problems