sham-ui-directives

Directives for sham-ui-templates

Install

# npm
npm install sham-ui-directives

# yarn
yarn add sham-ui-directives

API

Table of Contents

• disabled
  • Examples
• EventListener
  • Parameters
  • Examples
• onclick
  • Examples
• onsubmit
• onload
• onresize
• onscroll
• oninput
• onselect
• ref
  • Parameters
  • Examples
• UpdateOnEvent
  • Parameters
  • Examples
• onChangeUpdate
  • Parameters
• onInputUpdate
  • Parameters

disabled

Directive for "disabled" attribute

Examples

<template>
  <input :disabled={{inputDisabled}}/>
</template>

<script>
    import { disabled } from 'sham-ui-directives';

    function extendContext() {
        this.ctx.appendDirectives( { disabled } );
    }

    function Input( options ) {
        options( {
            [ $.inputDisabled ]: true
        } );
    }

    export default Component( extendContext, Template, Input );
</script>

EventListener

Base directive class for event listener

Parameters

• type

Examples

import { EventListener } from 'sham-ui-directives';

// directive for 'click' event listener
class onclick extends EventListener {
    constructor() {
        super( 'click' );
    }
}

onclick

Extends EventListener

Directive for 'click' listener

Examples

<template>
  <button :onclick={{() => window.alert( 'Clicked' )}}>Click me!</button>
</template>
<script>
    import { onclick } from 'sham-ui-directives';

    function extendContext() {
        this.ctx.appendDirectives( { onclick } );
    }

    export default Component( extendContext, Template );
</script>

onsubmit

Extends EventListener

Directive for 'submit' listener

onload

Extends EventListener

Directive for 'load' listener

onresize

Extends EventListener

Directive for 'resize' listener

onscroll

Extends EventListener

Directive for 'scroll' listener

oninput

Extends EventListener

Directive for 'input' listener

onselect

Extends EventListener

Directive for 'select' listener

ref

Directive for reference to Node

Parameters

• component

Examples

<template>
  <input :ref={{$.inputField}} value="default value"/>
</template>
<script>
    import { ref } from 'sham-ui-directives';

    function extendContext() {
        this.ctx.appendDirectives( { ref } );
    }

    function Input( options, didMount ) {
        didMount( () => {
            alert( this.inputField.value );
        } )
    }

    export default Component( extendContext, Template, Input );
</script>

UpdateOnEvent

Base directive class for event listener

Parameters

• component
• type

Examples

import { UpdateOnEvent } from 'sham-ui-directives';

// directive for update on 'input' event listener
class updateOnEvent extends UpdateOnEvent {
    constructor() {
        super( 'input' );
    }
}

onChangeUpdate

Extends UpdateOnEvent

Update on 'change' event

Parameters

• component

onInputUpdate

Extends UpdateOnEvent

Update on 'input' event

Parameters

• component