Component Reference
«datetime-local» Component Type
«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, can take null as value (being it its default value).
- Imports:
String(Valid “#RRGGBB” or “#RGB” Hex value) or null (meaning not selected). - 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
Use <input type="color" data-smark>. SmarkForm also infers color from the native type, or sets the native type when you explicitly declare {"type":"color"} on an <input> without type.
<input data-smark='{"type":"color", "name":"myColor"}'>
Alternatively, you can also use the shorthand notation inferring the type from the <input> element type:
<input type="color" name="myColor" data-smark>
Example:
🔗
<div id="myForm">
<input type="color" name="myColor" data-smark>
</div>
const myForm = new SmarkForm(document.getElementById("myForm"), {
"value": {
"myColor": "#3a7bd5"
}
});
👉 Notice that, after selecting a color, you can clear the input field by pressing the Delete key.
But, in order to allow clearing the field from touch devices it’s advisable to add a trigger button with the clear action.
The following example uses the Singleton Pattern to group the input field and the clear button:
🔗
<div id="myForm">
<span data-smark='{"type":"color", "name":"myColor"}'>
<input data-smark>
<button data-smark-action="clear">❌ Clear</button>
</span>
</div>
const myForm = new SmarkForm(document.getElementById("myForm"), {
"value": {
"myColor": "#e74c3c"
}
});
👉 Without recurring to the Singleton Pattern, you would have to specify the context in the button action, like this:
<input type="color" name="myColor" data-smark>
<button data-smark='{"action":"clear","context":"./myColor"}'>❌ Clear</button>
👉 Here we used a explicitly relative path for the context. But you could also use: → "context":"myColor" (non explicit relative path) → "context":"/myColor" (absolute path)
Requirements
The color component requires an <input type="color">; a missing native type is filled in, while a different type or tag raises a render error.
🔗
<div id="myForm">
<p>
<label>Correct:</label>
<span data-smark='{"type":"color", "name":"myColor1"}'>
<input type="color" name="myColor" data-smark>
<button data-smark-action="clear">❌ Clear</button>
</span>
</p>
<p>
<label>Incorrect:</label>
<span data-smark='{"type":"color", "name":"myColor2"}'>
<input type="text" name="myColor" data-smark>
<button data-smark-action="clear">❌ Clear</button>
</span>
</p>
</div>
const myForm = new SmarkForm(document.getElementById("myForm"));
When a SmarkForm component fails to render due to a RenderError, it is replaced by a flamboyant placeholder that shows the error code and provides a handy button to “replay” it to the console making it easier to debug the issue.
👉 Take a look to the Preview tab of the previous example to see it in action.
Notice that you’ll need to open your browser console if you want to see the error details when pressing the “Replay Error” button.
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
optionsobject as an argument, which contains the necessary information to perform the action.👉 When called from triggers, the properties defined in their
data-smarkobject, are passed asoptionsto the action. Those expecting a path(★ ) to other components are resolved to the actual component.
The color component type supports the following actions:
(Async) export (Action)
Exports the selected color as a #RRGGBB hex string, or null if no color has been selected.
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 color value into the field. Accepts a #RRGGBB or #RGB hex string, or null to clear the selection.
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 color selection (sets the value 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.
(Async) reset (Action)
Reverts the color field to its configured default value. If no default was configured, the field reverts to null (same as clear).
Options (reset)
- action: (= “reset”)
- 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.