Fixed a bug relating to custom-elements's first vnode where render(){ return <div class="example" /> } would set the example-class on the custom-element itself.
Added support for className and style similar to react Cleaned up some comments Reworked how tests are built in order to add a new test "pdf" which was a small side-project where previous mentioned bug showed up, it's an example using HTML to create a PDF for printing
This commit is contained in:
35
tests/todos-mvc/components/todo-input.jsx
Normal file
35
tests/todos-mvc/components/todo-input.jsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import {defineElement, render, CustomElement, Host, State} from "../../../packages/csx";
|
||||
import style from './todo-input.scss';
|
||||
|
||||
@defineElement('todo-input')
|
||||
export class TodoInput extends CustomElement{
|
||||
@State() value = "";
|
||||
|
||||
render(){
|
||||
return (
|
||||
<Host>
|
||||
<style>{ style }</style>
|
||||
<form onSubmit={ this.handleSubmit }>
|
||||
<input
|
||||
value={this.value}
|
||||
type="text"
|
||||
placeholder="What needs to be done?"
|
||||
onInput={this.handleInput}
|
||||
/>
|
||||
</form>
|
||||
</Host>
|
||||
)
|
||||
}
|
||||
|
||||
handleSubmit = (e)=>{
|
||||
e.preventDefault();
|
||||
if (!this.value) return;
|
||||
this.dispatchEvent(new CustomEvent('submit', {
|
||||
detail: this.value
|
||||
}));
|
||||
this.value = "";
|
||||
};
|
||||
handleInput = ({target: {value}})=>{
|
||||
this.value = value;
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user