42 lines
1.4 KiB
JavaScript
42 lines
1.4 KiB
JavaScript
import {defineElement, render, CustomElement, Host, ShadowDOM, State} from "../../../packages/csx-custom-elements";
|
|
import style from './todo-item.scss';
|
|
|
|
@defineElement('todo-item')
|
|
export class TodoItem extends CustomElement{
|
|
@State() checked = false;// TODO annotate as prop instead of state (attribute)
|
|
@State() model; // TODO annotate as prop instead of state
|
|
@State() text;
|
|
|
|
render(){
|
|
return (
|
|
<Host>
|
|
<ShadowDOM>
|
|
<style>{ style }</style>
|
|
<li class={( this.checked ? 'completed' : '' )}>
|
|
<input
|
|
type="checkbox" checked={ this.checked }
|
|
onChange={this.handleChange}
|
|
/>
|
|
<label>
|
|
<slot />
|
|
</label>
|
|
<button onClick={this.handleClick}>x</button>
|
|
</li>
|
|
</ShadowDOM>
|
|
</Host>
|
|
);
|
|
}
|
|
|
|
handleChange = ()=>{
|
|
this.dispatchEvent(new CustomEvent('check', {
|
|
detail: {checked: (this.checked=!this.checked), id: this.model},
|
|
bubbles: true
|
|
}));
|
|
};
|
|
handleClick = ()=>{
|
|
this.dispatchEvent(new CustomEvent('remove', {
|
|
detail: {id: this.model},
|
|
bubbles: true
|
|
}));
|
|
};
|
|
} |