ov-switch
src/ov-switch.js
LIFTED FROM demo/switch.html
Attributes
| attribute | |
|---|---|
arm-hold | |
guard | |
kind | |
label | |
lamp | |
look | |
positions | |
set | |
source | |
src | |
transit |
Properties
| property | type | kind | accepts | staleness |
|---|---|---|---|---|
reading | Structured | structured | not on the reading protocol | not applicable |
talkback | Structured | structured | not on the reading protocol | not applicable |
READ-ONLY PROPERTIES
armed, report, set
Events
| event |
|---|
ov:arm |
ov:command |
ov:safe |
Using it
import 'overscan'
import 'overscan/overscan.css'
<ov-switch
src="../demo/models/switch-unknown.json"
label="MRL"
positions="REL,OFF,LAT"
transit="8"
></ov-switch>import { OvSwitch } from 'overscan/react'
<OvSwitch
src="../demo/models/switch-unknown.json"
label="MRL"
positions="REL,OFF,LAT"
transit="8"
reading={data}
talkback={data}
onArm={handler}
onCommand={handler}
onSafe={handler}
/>import { OvSwitch } from 'overscan/vue'
<OvSwitch
src="../demo/models/switch-unknown.json"
label="MRL"
positions="REL,OFF,LAT"
transit="8"
:reading="data"
:talkback="data"
@arm="handler"
@command="handler"
@safe="handler"
/>import OvSwitch from 'overscan/svelte/OvSwitch.svelte'
<OvSwitch
src="../demo/models/switch-unknown.json"
label="MRL"
positions="REL,OFF,LAT"
transit="8"
reading={data}
talkback={data}
onarm={handler}
oncommand={handler}
onsafe={handler}
/>The CSS is a separate import in every framework. A single element can be imported on its own instead of the whole kit: import 'overscan/src/ov-chart.js'
A reading is set as a PROPERTY, never an attribute. An attribute is a string, so an array cannot survive one and a null arrives as the word "null", which the protocol would read as a value rather than a dropout.
Every ov: event is bound with addEventListener. The colon has no declarative spelling in Svelte 5, where the on: directive is gone and "onov:commit" is not an identifier, nor in JSX. Vue can bind it.
The wrapper applies attributes ITSELF and hands the framework nothing but a ref. All three frameworks set a prop as a property when the name exists on the element, and this kit has 72 getter-only properties across 39 elements. Assigning one throws, and in React it does not degrade: the whole tree fails to render. 13 elements have a getter-only name that is also a real attribute (at, bearing, digits, duration, floor, fov, fresh, hold, lat, lon, period, pitch, range, ring, rings, span, step, sweep, sweeps, traces, value), which are the ones a reader would naturally pass in markup.