«color» Component Type
📖 Table of Contents
Introduction
The color
component type extends the Input component type.
Since the native HTML type=color input field also returns a string and already ensures that the value is a valid #RRGGBB hexadecimal color string, the color
component type wouldn’t had been necessary since we could have used the input
component type.
But native HTML color input fields does not allow even empty string so, if we receive a #000000
value, we cannot tell if the user has intentionally selected the black color or if he just didn’t select any color at all.
The color
component type, on the other hand, allows the user to clear the color field by setting it to null.
- Imports and Exports:
String
(Valid “#RRGGBB” Hex value) or null (when not selected). - Singleton Pattern: Implements the Singleton Pattern.
- Data Conversion: None, but accepts null as value.
Usage
Example:
<span data-smark='{"type":"color", "name":"myColor"}'>
<input data-smark>
<button data-smark='{"action":"clear"}'>❌ Reset</button>
</span>
Validations
The number component will throw an error if the target field is not an INPUT element of type number.
API Reference
Actions
Actions are special component methods that can be triggered both programmatically (by directly calling the function) or by user interaction with a trigger component. Each action is associated with a specific behavior that can be performed on the component.
👉 Actions receive an
options
object as an argument, which contains the necessary information to perform the action.👉 When called from triggers, the properties defined in their
data-smark
object, are passed asoptions
to the action. Those expecting a path(★ ) to other components are resolved to the actual component.
The number
component type supports the following actions:
(Async) export (Action)
Exports the value of the number input field. If the value is not a valid number, it returns null.
Options (export)
- action: (= “export”)
- origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
- context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.
- target: Path★ (absolute or relative to its context). Pipes the exported data to the import action of the target component.
- data:
(Async) import (Action)
Imports a value into the number input field. If the value is not a valid number or string that can be converted to a number, it sets the field to null.
Options (import)
- action: (= “import”)
- origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
- context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.
- target: Path★ (absolute or relative to its context). Pipes the imported data from the export action of the target component, overridding the “data” option if specified.
- data: (number or string)
- focus: (boolean, default true)
(Async) clear (Action)
Clears the value of the number input field (sets it to null).
Options (clear)
- action: (= “clear”)
- origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
- context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.