-
Notifications
You must be signed in to change notification settings - Fork 1
API REFERENCE
vox()
TYPE
Function
PARAMETERS
{ el: string | Element } ?
RETURNS
{ init: Function, exit: Function }
DESCRIPTION
Creates two functions to initialize/uninitialize elements.
- controls all
[vox]
elements and their descendants:
const { init, exit } = vox();
- controls the
#app
element and its descendants:
const { init, exit } = vox({ el: '#app' });
vox.api
TYPE
Object
DESCRIPTION
An object of named components available inside vox
directives.
vox.api.counter = () => ({
count: 0,
decrement() {
count--;
},
increment() {
count++;
}
});
vox.api.app
TYPE
Object
DESCRIPTION
An extendable component for the global app context.
vox.api.app.log = (x) => {
console.log({ [x]: x });
};
vox.config
TYPE
Object
DESCRIPTION
vox
configuration (currently empty).
vox.version
TYPE
string
DESCRIPTION
vox
version in use.
if (parseInt(vox.version) > 0) {
// ...
} else {
// ...
}
vox
SYNTAX
vox="{ ... }"
DESCRIPTION
Creates a new component.
<div vox="{ cupcake: '🧁' }">
...
</div>
vox:for
SYNTAX
vox:for="(item in items)"
vox:for="(item of items)"
vox:for="(item, index) in items"
vox:for="(item, key, index) in items"
Parentheses are optional.
DESCRIPTION
Renders an element any number of times.
Supports arrays, objects, strings and integers >= 0
.
<ol vox="{ items: [ '🌮', '🍩', '☕️' ] }">
<li vox:for="(item, i) in items">
...
</li>
</ol>
<div vox:for="(number in 10)">
...
</div>
vox:if
SYNTAX
vox:if="(condition)"
Parentheses around condition are optional.
DESCRIPTION
Conditionally renders an element.
<div vox="{ x: 10 }">
<div vox:if="(x > 0)">
...
</div>
</div>
vox:is
SYNTAX
vox:is="(name)"
Parentheses around name are optional.
DESCRIPTION
Registers a reference to an element on the global els
object.
<input vox:is="('foo')"/>
<input vox:is="('bar')"/>
<div vox:init="{
console.log(els.foo);
console.log(els.bar);
}">
...
</div>
vox:init
SYNTAX
vox:init="{ ... }"
Braces around code block are optional.
DESCRIPTION
Executes a piece of code when an element is initialized (mounted
).
<div vox:init="console.log('🎉')">
...
</div>
vox:«name»
SYNTAX
vox:name="(expression)"
Parentheses around expression are optional.
DESCRIPTION
Binds a JavaScript property to an expression.
Supports all lowercase properties and some extras as well.
<div vox="{ open: false }">
<button vox:disabled="(open)">
click
</button>
<div vox:hidden="(!open)">
...
</div>
</div>
vox:aria
SYNTAX
vox:aria="{ ... }"
vox:aria:name="(expression)"
Parentheses around expression are optional.
DESCRIPTION
Binds an aria
attribute to an expression.
<div vox="{ disabled: true, expanded: false }">
<button vox:aria="{ disabled, expanded }">
click
</button>
</div>
<div vox="{ active: false }">
<button vox:aria:pressed="(active)">
click
</button>
</div>
vox:attr
SYNTAX
vox:attr="{ ... }"
vox:attr:name="(expression)"
Parentheses around expression are optional.
.camel
converts the kebab-case attribute name into camelCase.
DESCRIPTION
Binds an attribute to an expression.
<div vox="{ auto: 'off' }">
<input vox:attr="{
autocapitalize: auto,
autocomplete: auto
}"/>
</div>
<svg vox:attr:view-box.camel="(`0 0 ${x} ${y}`)">
...
</svg>
vox:class
SYNTAX
vox:class="(expression)"
vox:class:name="(expression)"
Parentheses around expression are optional.
.camel
converts the kebab-case class name into camelCase.
DESCRIPTION
Binds a class name to an expression.
Supports strings, objects and mixed arrays.
<div vox="{ a: 1, b: false }">
<div vox:class="[ { alpha: a, bravo: b }, 'charlie' ]">
...
</div>
</div>
<div vox="{ active: false }">
<div vox:class:active="(active)">
...
</div>
</div>
vox:event
SYNTAX
vox:event="{ ... }"
vox:event:name="{ ... }"
vox:onevent="{ ... }"
Braces around code block are optional.
.camel
converts the kebab-case event name into camelCase;
.window
.win
attaches the event handler to the window
object;
.document
.doc
attaches the event handler to the document
object;
.prevent
calls event.preventDefault()
;
.stop
calls event.stopPropagation()
;
.outside
.out
listens for the event outside the element;
.self
only continues code execution if event.target
is the element itself;
.«button»
only continues code execution if a certain mouse button is pressed *;
.«key»
only continues code execution if a certain key is pressed **;
.«modifier»
only continues code execution if a certain modifier key is pressed ***;
.repeat
only continues code execution if a certain key is being held down;
.capture
sets the event listener's capture
option to true
;
.once
sets the event listener's once
option to true
;
.passive
sets the event listener's passive
option to true
.
* .back
.forward
.left
.middle
.mid
.right
** .delete
.del
.down
.enter
.escape
.esc
.left
.right
.space
.tab
.up
*** .alt
.ctrl
.meta
.shift
DESCRIPTION
Attaches an event handler to an element.
<button vox:event="{
mouseover: (event) => {
console.log('wait for it...');
},
click: (event) => {
console.log('click! 💥');
}
}">
click
</button>
<div vox:event:my-event.win="{
console.log(el);
console.log(event.currentTarget);
console.log(event.detail);
}">
...
</div>
<img src="https://picsum.photos/100" vox:onload="console.log('🎆')"/>
vox:focus
SYNTAX
vox:focus="(condition)"
Parentheses around condition are optional.
DESCRIPTION
Conditionally focuses an element.
<div vox="{ active: false }">
<textarea vox:focus="(active)">
...
</textarea>
</div>
vox:html
SYNTAX
vox:html="(expression)"
Parentheses around expression are optional.
DESCRIPTION
Binds an element's innerHTML
to an expression.
<div vox="{ x: 3 }">
<span vox:html="(`<var>${x}</var>`)"></span>
</div>
vox:run
SYNTAX
vox:run="{ ... }"
Braces around code block are optional.
DESCRIPTION
Executes a piece of code immediately and every time its data changes.
<div vox="{ x: 0 }" vox:run="console.log(x)">
<button vox:onclick="(x++)">
click
</button>
</div>
vox:style
SYNTAX
vox:style="(expression)"
vox:style:name="(expression)"
Parentheses around expression are optional.
DESCRIPTION
Binds an inline style to an expression.
Supports strings, objects and mixed arrays.
<div vox:style="(`color: ${accent};`)">
...
</div>
<div vox="{ color: 'pink', background: 'black' }">
<div vox:style="{ color, background }">
...
</div>
</div>
<div vox:style:font-size="(1.25 + 'em')">
...
</div>
vox:text
SYNTAX
vox:text="(expression)"
Parentheses around expression are optional.
DESCRIPTION
Binds an element's textContent
to an expression.
<div vox="{ x: 3 }">
<span vox:text="(x)"></span>
</div>
vox:exit
SYNTAX
vox:exit="{ ... }"
Braces around code block are optional.
DESCRIPTION
Executes a piece of code when an element is uninitialized (unmounted
).
<div vox:exit="console.log('💩')">
...
</div>
vox:skip
SYNTAX
vox:skip
vox:skip="(condition)"
Parentheses around condition are optional.
DESCRIPTION
Skips an element and its descendants from initialization.
Optionally, evaluates an expression before an element is initialized and conditionally skips it and its descendants.
<div vox:skip>skip!</div>
<div vox:skip="(0)">don't skip!</div>
<div vox:skip="(1)">skip!</div>